Merge pull request #1837 from adevinta/debug-select-formfield-status

fix(select): fix select deps
adevinta · Jan 24, 2024 · 3212a9f · 3212a9f
2 parents 0803232 + 9d8f4f2
commit 3212a9f
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
@@ -32,6 +32,7 @@
     "@spark-ui/form-field": "^1.4.1",
     "@spark-ui/icon": "^2.1.1",
     "@spark-ui/icons": "^1.21.6",
+    "@spark-ui/use-merge-refs": "^0.4.0",
     "@spark-ui/popover": "^1.5.3",
     "@spark-ui/visually-hidden": "^1.2.0",
     "class-variance-authority": "0.7.0",

diff --git a/packages/components/dropdown/src/DropdownValue.tsx b/packages/components/dropdown/src/DropdownValue.tsx
@@ -19,7 +19,12 @@ export const Value = forwardRef(
 
     return (
       <span ref={forwardedRef} className={cx('flex shrink items-center text-left', className)}>
-        <span className="line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all">
+        <span
+          className={cx(
+            'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
+            !hasSelectedItems && 'text-on-surface/dim-1'
+          )}
+        >
           {!hasSelectedItems ? placeholder : children || text}
         </span>
         {suffix && <span>{suffix}</span>}

diff --git a/packages/components/select/package.json b/packages/components/select/package.json
@@ -43,6 +43,8 @@
   "license": "MIT",
   "dependencies": {
     "@spark-ui/icon": "^2.1.1",
-    "@spark-ui/icons": "^1.21.6"
+    "@spark-ui/icons": "^1.21.6",
+    "@spark-ui/form-field": "^1.4.1",
+    "@spark-ui/use-combined-state": "^0.6.2"
   }
 }
diff --git a/packages/components/select/src/SelectContext.tsx b/packages/components/select/src/SelectContext.tsx
@@ -116,7 +116,6 @@ export const SelectProvider = ({
    *
    * The Map must be rebuilt from the new children in order to preserve logical indices.
    *
-   * Downshift is heavily indices based for keyboard navigation, so it it important.
    */
   useEffect(() => {
     const newMap = getItemsFromChildren(itemsComponent)

diff --git a/packages/components/select/src/SelectValue.tsx b/packages/components/select/src/SelectValue.tsx
@@ -23,7 +23,12 @@ export const Value = forwardRef(
         ref={forwardedRef}
         className={cx('flex shrink items-center text-left', className)}
       >
-        <span className="line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all">
+        <span
+          className={cx(
+            'line-clamp-1 flex-1 overflow-hidden text-ellipsis break-all',
+            !hasSelectedItem && 'text-on-surface/dim-1'
+          )}
+        >
           {!hasSelectedItem ? placeholder : children || text}
         </span>
       </span>