fix: Style panel style value combobox doesn't close on ESC (#4277)

## Description

closes #4269

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

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

@@ -50,6 +50,7 @@ import {
 } from "~/shared/nano-states";
 import { convertUnits } from "./convert-units";
 import { mergeRefs } from "@react-aria/utils";
+import { composeEventHandlers } from "~/shared/event-utils";
 
 // We need to enable scrub on properties that can have numeric value.
 const canBeNumber = (property: StyleProperty, value: CssValueInputValue) => {
@@ -691,6 +692,11 @@ export const CssValueInput = ({
     .filter(Boolean)
     .map((descr) => <Description>{descr}</Description>);
 
+  const inputPropsHandleKeyDown = composeEventHandlers(
+    inputProps.onKeyDown,
+    handleKeyDown
+  );
+
   return (
     <ComboboxRoot open={isOpen}>
       <Box {...getComboboxProps()}>
@@ -710,7 +716,7 @@ export const CssValueInput = ({
             }}
             autoFocus={autoFocus}
             onBlur={handleOnBlur}
-            onKeyDown={handleKeyDown}
+            onKeyDown={inputPropsHandleKeyDown}
             containerRef={disabled ? undefined : scrubRef}
             inputRef={mergeRefs(inputRef, props.inputRef ?? null)}
             name={property}

apps/builder/app/shared/event-utils.ts

@@ -0,0 +1,42 @@
+/*
+https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
+
+MIT License
+
+Copyright (c) 2022 WorkOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+export const composeEventHandlers = <E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void,
+  { checkForDefaultPrevented = true } = {}
+) => {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event);
+
+    if (
+      checkForDefaultPrevented === false ||
+      !(event as unknown as Event).defaultPrevented
+    ) {
+      return ourEventHandler?.(event);
+    }
+  };
+};

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

@@ -7,7 +7,6 @@ import type {
 import {
   ComboboxListboxItem,
   useCombobox,
-  comboboxStateChangeTypes,
   ComboboxContent,
   ComboboxRoot,
   ComboboxListbox,
@@ -38,32 +37,12 @@ export const Complex = () => {
 
   const stateReducer = useCallback(
     (
-      state: UseComboboxState<string>,
+      _state: UseComboboxState<string>,
       actionAndChanges: UseComboboxStateChangeOptions<string>
     ) => {
       const { type, changes } = actionAndChanges;
-      switch (type) {
-        // on item selection.
-        case comboboxStateChangeTypes.ItemClick:
-        case comboboxStateChangeTypes.InputKeyDownEnter:
-        case comboboxStateChangeTypes.InputBlur:
-        case comboboxStateChangeTypes.ControlledPropUpdatedSelectedItem:
-          return {
-            ...changes,
-            // if we have a selected item.
-            ...(changes.selectedItem && {
-              // we will set the input value to "" (empty string).
-              inputValue: "",
-            }),
-          };
-
-        // Remove "reset" action
-        case comboboxStateChangeTypes.InputKeyDownEscape: {
-          return {
-            ...state,
-          };
-        }
 
+      switch (type) {
         default:
           return changes; // otherwise business as usual.
       }
@@ -86,16 +65,14 @@ export const Complex = () => {
     stateReducer,
     onItemSelect: setValue,
     onChange: (value) => {
-      if (value) {
-        setValue(value);
-      }
+      setValue(value ?? "");
     },
   });
 
   return (
     <ComboboxRoot open={isOpen}>
       <Flex {...getComboboxProps()} direction="column" gap="3">
-        <ComboboxAnchor>
+        <ComboboxAnchor asChild>
           <InputField
             prefix={
               <Flex align="center">
@@ -110,8 +87,8 @@ export const Complex = () => {
             {items.map((item, index) => {
               return (
                 <ComboboxListboxItem
-                  key={index}
                   {...getItemProps({ item, index })}
+                  key={index}
                 >
                   {item}
                 </ComboboxListboxItem>