From 5ada22fe4f6f2015b1353c02589a6b3fe4e285da Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 13 Oct 2022 14:22:01 +0200
Subject: [PATCH] onItemHighlight

---
 .../shared/css-value-input/css-value-input.stories.tsx   | 9 +++++++++
 .../shared/css-value-input/css-value-input.tsx           | 9 ++++++---
 packages/design-system/src/components/combobox.tsx       | 2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.stories.tsx b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.stories.tsx
index 2c6a3d40fc..226c48fb95 100644
--- a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.stories.tsx
+++ b/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
diff --git a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
index 92afea3ef8..eb83a5654d 100644
--- a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
+++ b/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();
diff --git a/packages/design-system/src/components/combobox.tsx b/packages/design-system/src/components/combobox.tsx
index 95f40cbc4e..c81ee172c4 100644
--- a/packages/design-system/src/components/combobox.tsx
+++ b/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);
       }
     },
   });