bal 4329 (#3406)

tomer-shvadron · web-flow · commit 3b245c507c99 · 2025-06-11T15:25:50.000+03:00
* feat(ui): enhance SearchableDropdown and SelectField components

- Improve accessibility by modifying state handling in SearchableDropdown
- Refactor SelectField options mapping for clarity and update dependencies
- Ensure SelectField does not disable by default and adds disablePortal attribute

* fix(SelectField): make disabled prop dynamic

- Update disabled prop to use dynamic value instead of static false

* chore(release): bump versions and update dependencies

- Update @ballerine/ui to version 0.7.164 across multiple packages
- Bump versions for @ballerine/backoffice-v2, @ballerine/kyb-app, and others
- Ensure all related dependencies are synchronized with the new UI version
diff --git a/apps/backoffice-v2/CHANGELOG.md b/apps/backoffice-v2/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @ballerine/backoffice-v2
 
+## 0.7.164
+
+### Patch Changes
+
+- version bump
+- Updated dependencies
+  - @ballerine/ui@0.7.164
+  - @ballerine/react-pdf-toolkit@1.2.127
+
 ## 0.7.163
 
 ### Patch Changes
diff --git a/apps/backoffice-v2/package.json b/apps/backoffice-v2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.7.163",
+  "version": "0.7.164",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "type": "module",
@@ -52,8 +52,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ballerine/react-pdf-toolkit": "^1.2.126",
-    "@ballerine/ui": "0.7.163",
+    "@ballerine/react-pdf-toolkit": "^1.2.127",
+    "@ballerine/ui": "0.7.164",
     "@ballerine/blocks": "0.2.47",
     "@ballerine/common": "0.9.113",
     "@ballerine/workflow-browser-sdk": "0.6.137",
diff --git a/apps/kyb-app/CHANGELOG.md b/apps/kyb-app/CHANGELOG.md
@@ -1,5 +1,13 @@
 # kyb-app
 
+## 0.3.195
+
+### Patch Changes
+
+- version bump
+- Updated dependencies
+  - @ballerine/ui@0.7.164
+
 ## 0.3.194
 
 ### Patch Changes
diff --git a/apps/kyb-app/package.json b/apps/kyb-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.3.194",
+  "version": "0.3.195",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@ballerine/blocks": "0.2.47",
     "@ballerine/common": "^0.9.113",
-    "@ballerine/ui": "0.7.163",
+    "@ballerine/ui": "0.7.164",
     "@ballerine/workflow-browser-sdk": "0.6.137",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/apps/workflows-dashboard/CHANGELOG.md b/apps/workflows-dashboard/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @ballerine/workflows-dashboard
 
+## 0.2.47
+
+### Patch Changes
+
+- version bump
+- Updated dependencies
+  - @ballerine/ui@0.7.164
+
 ## 0.2.46
 
 ### Patch Changes
diff --git a/apps/workflows-dashboard/package.json b/apps/workflows-dashboard/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/workflows-dashboard",
   "private": false,
-  "version": "0.2.46",
+  "version": "0.2.47",
   "type": "module",
   "scripts": {
     "spellcheck": "cspell \"*\"",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@ballerine/common": "^0.9.109",
-    "@ballerine/ui": "^0.7.158",
+    "@ballerine/ui": "^0.7.164",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "1.0.4",
diff --git a/packages/react-pdf-toolkit/CHANGELOG.md b/packages/react-pdf-toolkit/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @ballerine/react-pdf-toolkit
 
+## 1.2.127
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.7.164
+
 ## 1.2.126
 
 ### Patch Changes
diff --git a/packages/react-pdf-toolkit/package.json b/packages/react-pdf-toolkit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/react-pdf-toolkit",
   "private": false,
-  "version": "1.2.126",
+  "version": "1.2.127",
   "types": "./dist/build.d.ts",
   "main": "./dist/react-pdf-toolkit.js",
   "module": "./dist/react-pdf-toolkit.mjs",
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@ballerine/config": "^1.1.44",
-    "@ballerine/ui": "0.7.163",
+    "@ballerine/ui": "0.7.164",
     "@react-pdf/renderer": "^3.1.14",
     "@sinclair/typebox": "^0.31.7",
     "ajv": "^8.12.0",
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @ballerine/ui
 
+## 0.7.164
+
+### Patch Changes
+
+- version bump
+
 ## 0.7.163
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.7.163",
+  "version": "0.7.164",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/packages/ui/src/components/atoms/SearchableDropdown/SearchableDropdown.tsx b/packages/ui/src/components/atoms/SearchableDropdown/SearchableDropdown.tsx
@@ -51,6 +51,7 @@ export const SearchableDropdown = ({
       if (selectedOption) {
         onChange(selectedOption.value);
       }
+
       setOpen(false);
     },
     [onChange, options],
@@ -70,6 +71,7 @@ export const SearchableDropdown = ({
   const handleOpenChange = useCallback(
     (isOpen: boolean) => {
       setOpen(isOpen);
+
       if (!isOpen) {
         setIsFocused(false);
         onBlur?.();
@@ -97,7 +99,7 @@ export const SearchableDropdown = ({
           >
             {selectedOption ? selectedOption.label : placeholder}
           </span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
+          <ChevronsUpDown className="ml-2 size-4 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -131,7 +133,7 @@ export const SearchableDropdown = ({
                   {option.label}
                   <Check
                     className={ctw(
-                      'ml-auto h-4 w-4',
+                      'ml-auto size-4',
                       value === option.value ? 'opacity-100' : 'opacity-0',
                     )}
                   />
diff --git a/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx b/packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/TextInputAdapter/components/SelectField/SelectField.tsx
@@ -16,23 +16,23 @@ export const SelectField = ({
 }: WithTestId<FieldProps<string>>) => {
   const options = useMemo((): ISearchableDropdownOption[] => {
     if (Array.isArray(schema.enum)) {
-      return schema.enum.map((value, index) => {
-        return {
-          label: schema.enumNames ? schema.enumNames[index] : value,
-          value: value as string,
-        };
-      });
+      return schema.enum.map((value, index) => ({
+        label: (uiSchema?.['ui:enumNames']?.[index] as string) ?? value,
+        value: value as string,
+      }));
     }
 
-    if (!Array.isArray(schema.oneOf)) return [];
+    if (!Array.isArray(schema.oneOf)) {
+      return [];
+    }
 
     return (schema.oneOf as TOneOfItem[]).map(item => {
       return {
         label: item.title as string,
         value: item.const as string,
       };
     }) as ISearchableDropdownOption[];
-  }, [schema.oneOf, schema.enumNames, schema.enum]);
+  }, [schema.enum, schema.oneOf, uiSchema]);
 
   const handleBlur = useCallback(() => {
     // @ts-ignore
@@ -48,6 +48,7 @@ export const SelectField = ({
       value={formData}
       disabled={disabled}
       testId={testId}
+      disablePortal
       textInputClassName="placeholder:text-gray-400"
       onChange={onChange}
       onBlur={handleBlur}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/services/workflows-service/CHANGELOG.md b/services/workflows-service/CHANGELOG.md
diff --git a/services/workflows-service/package.json b/services/workflows-service/package.json
diff --git a/services/workflows-service/prisma/data-migrations b/services/workflows-service/prisma/data-migrations

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ballerine/ui",`
`3`	`3`	`"private": false,`
`4`		`- "version": "0.7.163",`
	`4`	`+ "version": "0.7.164",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
`7`	`7`	`"types": "dist/index.d.ts",`