onItemHighlight

apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.stories.tsx

@@ -32,6 +32,9 @@ export const WithKeywords = () => {
         setValue(newValue);
         action("onChangeComplete")(newValue);
       }}
+      onItemHighlight={(value) => {
+        action("onItemHighlight")(value);
+      }}
     />
   );
 };
@@ -63,6 +66,9 @@ export const WithIcons = () => {
         setValue(newValue);
         action("onChangeComplete")(newValue);
       }}
+      onItemHighlight={(value) => {
+        action("onItemHighlight")(value);
+      }}
     />
   );
 };
@@ -93,6 +99,9 @@ export const WithUnits = () => {
           setValue(newValue);
           action("onChangeComplete")(newValue);
         }}
+        onItemHighlight={(value) => {
+          action("onItemHighlight")(value);
+        }}
       />
       <TextField
         readOnly

apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -100,14 +100,14 @@ type CssValueInputProps = {
   units?: Array<Unit>;
   onChange: (value: StyleValue) => void;
   onChangeComplete: (value: StyleValue) => void;
+  onItemHighlight?: (value: StyleValue | null) => void;
 };
 
 /**
  * Common:
  * - Free text editing
- * - Filterable keywords list (click on chevron or arrow down)
  * - When text is a number - unit mode
- * - Enter or blur submits the value
+ * - Enter or blur calls onChangeComplete
  * - After submission, when value is an invalid CSS value - invalid mode
  * - When hovering over keywords and units list, onItemHighlight is called
  *
@@ -120,9 +120,10 @@ type CssValueInputProps = {
  * - Typing a unit in unit mode will change the selected unit
  * - During typing the unit until unit is matched, input is in invalid mode
  * - Math expression: "2px + 3em" (like CSS calc())
+ * - Handle scrubbing
  *
  * Keywords mode:
- * - Filter by typing
+ * - Filterable keywords list (click on chevron or arrow down to show the list)
  * - Arrow keys are used to navigate keyword items
  * - Enter key or click is used to select item when list is open
  * - Escape key is used to close list
@@ -135,6 +136,7 @@ export const CssValueInput = ({
   units,
   onChange,
   onChangeComplete,
+  onItemHighlight,
 }: CssValueInputProps) => {
   const {
     items,
@@ -152,6 +154,7 @@ export const CssValueInput = ({
     onItemSelect: (value) => {
       onChangeComplete(value ?? defaultValue);
     },
+    onItemHighlight,
   });
 
   const inputProps = getInputProps();

packages/design-system/src/components/combobox.tsx

@@ -171,7 +171,7 @@ export const useCombobox = <Item,>({
     },
     onHighlightedIndexChange({ highlightedIndex }) {
       if (highlightedIndex !== undefined) {
-        onItemHighlight?.(items[highlightedIndex]);
+        onItemHighlight?.(items[highlightedIndex] ?? null);
       }
     },
   });