@mirohq/design-system-combobox 0.1.0-combobox.4 → 0.1.0-combobox.6

package/dist/main.js

@@ -6,11 +6,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var react = require('@ariakit/react');
 var designSystemBaseForm = require('@mirohq/design-system-base-form');
-var RadixPopover = require('@radix-ui/react-popover');
 var designSystemUtils = require('@mirohq/design-system-utils');
+var RadixPopover = require('@radix-ui/react-popover');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemInput = require('@mirohq/design-system-input');
+var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemScrollArea = require('@mirohq/design-system-scroll-area');
+var utils = require('@react-aria/utils');
 var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
 var designSystemStyles = require('@mirohq/design-system-styles');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
@@ -43,24 +46,29 @@ const StyledInput = designSystemStitches.styled(designSystemInput.Input, {
   flexWrap: "wrap",
   flexGrow: 1,
   gap: "0 $50",
-  "&&&": {
-    height: "max-content"
+  overflowY: "scroll",
+  "&[data-valid], &[data-invalid]": {
+    // we don't need a bigger padding here as Input component will render its own icon
+    paddingRight: "$100"
   },
   "& input": {
-    minWidth: "30px",
+    minWidth: "$8",
     flexBasis: 0,
-    flexGrow: 1,
-    marginRight: "$300"
+    flexGrow: 1
   },
   variants: {
     size: {
       large: {
         minHeight: "$10",
-        padding: "5px $100"
+        height: "auto",
+        padding: "5px $100",
+        paddingRight: "$500"
       },
       "x-large": {
         minHeight: "$12",
-        padding: "9px $150"
+        height: "auto",
+        padding: "5px $100",
+        paddingRight: "$500"
       }
     }
   },
@@ -72,19 +80,38 @@ const StyledInput = designSystemStitches.styled(designSystemInput.Input, {
 const ComboboxContext = React.createContext({});
 const ComboboxProvider = ({
   children,
+  open: openProp,
   defaultOpen,
+  onOpen,
+  onClose,
   valid,
   value: valueProp,
   defaultValue: defaultValueProp,
+  onValueChange,
   onSearchValueChange,
   autoFilter = true,
   ...restProps
 }) => {
   const triggerRef = React.useRef(null);
+  const inputRef = React.useRef(null);
   const contentRef = React.useRef(null);
-  const [openState, setOpenState] = React.useState(defaultOpen != null ? defaultOpen : false);
-  const [value, setValue] = React.useState(valueProp != null ? valueProp : []);
   const [defaultValue, setDefaultValue] = React.useState(defaultValueProp);
+  const [openState = false, setOpenState] = reactUseControllableState.useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: (state) => {
+      if (state) {
+        onOpen == null ? void 0 : onOpen();
+      } else {
+        onClose == null ? void 0 : onClose();
+      }
+    }
+  });
+  const [value, setValue] = reactUseControllableState.useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValueProp,
+    onChange: onValueChange
+  });
   const [filteredItems, setFilteredItems] = React.useState(/* @__PURE__ */ new Set());
   const [searchValue, setSearchValue] = React.useState("");
   const { valid: formFieldValid } = designSystemBaseForm.useFormFieldContext();
@@ -102,6 +129,7 @@ const ComboboxProvider = ({
         defaultValue,
         onSearchValueChange,
         triggerRef,
+        inputRef,
         contentRef,
         autoFilter,
         searchValue,
@@ -138,8 +166,8 @@ const TriggerActionButton = ({
   clearActionLabel,
   size
 }) => {
-  const { setOpenState, value, setValue } = useComboboxContext();
-  const isEmpty = value === void 0 || value.length === 0;
+  const { setOpenState, value = [], setValue } = useComboboxContext();
+  const isEmpty = value.length === 0;
   const ActionButtonIcon = isEmpty ? designSystemIcons.IconChevronDown : designSystemIcons.IconCross;
   const label = isEmpty ? openActionLabel : clearActionLabel;
   const onActionButtonClick = React.useCallback(
@@ -147,7 +175,7 @@ const TriggerActionButton = ({
       if (!isEmpty) {
         setValue([]);
       } else {
-        setOpenState((prevOpen) => !prevOpen);
+        setOpenState((prevOpen = false) => !prevOpen);
       }
       event.stopPropagation();
     },
@@ -173,8 +201,9 @@ const Trigger = React__default["default"].forwardRef(
       "aria-disabled": ariaDisabled,
       valid: comboboxValid,
       disabled,
-      value,
+      value = [],
       triggerRef,
+      inputRef,
       onSearchValueChange,
       searchValue,
       setSearchValue
@@ -201,41 +230,59 @@ const Trigger = React__default["default"].forwardRef(
       disabled,
       invalid: designSystemUtils.booleanishAttrValue(valid),
       id: id != null ? id : formElementId,
-      placeholder: (value == null ? void 0 : value.length) === 0 ? placeholder : void 0
+      placeholder: value.length === 0 ? placeholder : void 0
     };
     const shouldUseFloatingLabel = label !== null && isFloatingLabel;
-    const isFloating = placeholder !== void 0 || (value == null ? void 0 : value.length) !== 0 || focused;
+    const isFloating = placeholder !== void 0 || value.length !== 0 || focused;
+    const scrollIntoView = (event) => {
+      var _a;
+      const trigger = triggerRef == null ? void 0 : triggerRef.current;
+      const baseInput = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.parentElement;
+      if (baseInput != null && trigger != null) {
+        event.preventDefault();
+        baseInput.scrollTo({
+          top: trigger.scrollHeight
+        });
+      }
+      if (restProps.onFocus !== void 0) {
+        restProps.onFocus(event);
+      }
+    };
     const onInputChange = (e) => {
       setSearchValue(e.target.value);
       onSearchValueChange == null ? void 0 : onSearchValueChange(e.target.value);
       onChange == null ? void 0 : onChange(e);
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Anchor, { ref: designSystemUtils.mergeRefs([triggerRef, forwardRef]), children: /* @__PURE__ */ jsxRuntime.jsx(
-      react.Combobox,
-      {
-        render: /* @__PURE__ */ jsxRuntime.jsxs(
-          StyledInput,
-          {
-            value: searchValue,
-            onChange: onInputChange,
-            ...inputProps,
-            size,
-            children: [
-              shouldUseFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: isFloating, size, children: label }),
-              children,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                TriggerActionButton,
-                {
-                  openActionLabel,
-                  clearActionLabel,
-                  size
-                }
-              )
-            ]
-          }
-        )
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(RadixPopover__namespace.Anchor, { ref: designSystemUtils.mergeRefs([triggerRef, forwardRef]), children: [
+      shouldUseFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: isFloating, size, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.Combobox,
+        {
+          render: /* @__PURE__ */ jsxRuntime.jsxs(
+            StyledInput,
+            {
+              ...inputProps,
+              value: searchValue,
+              size,
+              ref: inputRef,
+              onChange: onInputChange,
+              onFocus: scrollIntoView,
+              children: [
+                children,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TriggerActionButton,
+                  {
+                    openActionLabel,
+                    clearActionLabel,
+                    size
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] });
   }
 );
 
@@ -249,7 +296,6 @@ const StyledContent = designSystemStitches.styled(RadixPopover__namespace.Conten
   width: "var(--radix-popover-trigger-width)",
   zIndex: "$select",
   overflowY: "auto",
-  marginTop: "$200",
   padding: "$150",
   boxSizing: "border-box",
   outline: "1px solid transparent"
@@ -295,20 +341,31 @@ const StyledItem = designSystemStitches.styled(react.ComboboxItem, {
 const Item = React__default["default"].forwardRef(
   ({ disabled = false, value, textValue, children, ...restProps }, forwardRef) => {
     const { "aria-disabled": ariaDisabled, ...restAriaDisabledProps } = designSystemUseAriaDisabled.useAriaDisabled(restProps, { allowArrows: true });
-    const { autoFilter, filteredItems } = useComboboxContext();
+    const { autoFilter, filteredItems, triggerRef, inputRef } = useComboboxContext();
     if (autoFilter !== false && !filteredItems.has(value)) {
       return null;
     }
+    const scrollIntoView = (event) => {
+      var _a;
+      if (((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.parentElement) != null && (triggerRef == null ? void 0 : triggerRef.current) != null) {
+        inputRef.current.parentElement.scrollTo({
+          top: triggerRef.current.scrollHeight
+        });
+      }
+      if (restProps.onClick !== void 0) {
+        restProps.onClick(event);
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       StyledItem,
       {
-        ...restProps,
-        ...restAriaDisabledProps,
+        ...utils.mergeProps(restProps, restAriaDisabledProps),
         focusable: true,
         accessibleWhenDisabled: ariaDisabled === true,
         disabled: ariaDisabled === true || disabled,
         ref: forwardRef,
         value,
+        onClick: scrollIntoView,
         children: [
           children,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -318,7 +375,13 @@ const Item = React__default["default"].forwardRef(
                 // AriakitComboboxItemCheck adds its owm inline styles which we want to omit here
                 /* @__PURE__ */ jsxRuntime.jsx(StyledItemCheck, { ...props })
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCheckMark, { size: "small" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystemIcons.IconCheckMark,
+                {
+                  size: "small",
+                  "data-testid": process.env.NODE_ENV === "test" ? "combobox-item-check" : void 0
+                }
+              )
             }
           )
         ]
@@ -349,48 +412,65 @@ const getChildrenItemValues = (componentChildren) => {
   return values;
 };
 
+const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
 const isInsideRef = (element, ref) => {
   var _a, _b;
   return (_b = element != null && ((_a = ref.current) == null ? void 0 : _a.contains(element))) != null ? _b : false;
 };
-const Content = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
-  const {
-    triggerRef,
-    contentRef,
-    autoFilter,
-    filteredItems,
-    setFilteredItems,
-    searchValue,
-    noResultsText
-  } = useComboboxContext();
-  React.useEffect(() => {
-    const childrenItemValues = getChildrenItemValues(children);
-    setFilteredItems(
-      new Set(
-        autoFilter === false ? childrenItemValues : childrenItemValues.filter(
-          (child) => child.toLowerCase().includes(searchValue.toLowerCase())
+const Content = React__default["default"].forwardRef(
+  ({ sideOffset = CONTENT_OFFSET, maxHeight, children, ...restProps }, forwardRef) => {
+    const {
+      triggerRef,
+      contentRef,
+      autoFilter,
+      filteredItems,
+      setFilteredItems,
+      searchValue,
+      noResultsText,
+      direction
+    } = useComboboxContext();
+    React.useEffect(() => {
+      const childrenItemValues = getChildrenItemValues(children);
+      setFilteredItems(
+        new Set(
+          autoFilter === false ? childrenItemValues : childrenItemValues.filter(
+            (child) => child.toLowerCase().includes(searchValue.toLowerCase())
+          )
         )
-      )
+      );
+    }, [children, autoFilter, setFilteredItems, searchValue]);
+    const content = filteredItems.size === 0 ? noResultsText : children;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledContent,
+      {
+        ...restProps,
+        sideOffset,
+        ref: designSystemUtils.mergeRefs([forwardRef, contentRef]),
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onInteractOutside: (event) => {
+          const target = event.target;
+          const isTrigger = isInsideRef(target, triggerRef);
+          const isContent = isInsideRef(target, contentRef);
+          if (isTrigger || isContent) {
+            event.preventDefault();
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystemScrollArea.ScrollArea, { type: "always", dir: direction, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystemScrollArea.ScrollArea.Viewport,
+            {
+              availableHeight: "var(--radix-popover-content-available-height)",
+              verticalGap: "calc(var(--space-150) * 2)",
+              maxHeight,
+              children: content
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Thumb, {}) })
+        ] })
+      }
     );
-  }, [children, autoFilter, setFilteredItems, searchValue]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledContent,
-    {
-      ...restProps,
-      ref: designSystemUtils.mergeRefs([forwardRef, contentRef]),
-      onOpenAutoFocus: (event) => event.preventDefault(),
-      onInteractOutside: (event) => {
-        const target = event.target;
-        const isTrigger = isInsideRef(target, triggerRef);
-        const isContent = isInsideRef(target, contentRef);
-        if (isTrigger || isContent) {
-          event.preventDefault();
-        }
-      },
-      children: filteredItems.size === 0 ? noResultsText : children
-    }
-  );
-});
+  }
+);
 
 const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { ...props });
 
@@ -470,17 +550,16 @@ const StyledValue = designSystemStitches.styled(Chip, {
 
 const Value = ({ removeChipAriaLabel }) => {
   const {
-    value,
+    value = [],
     setValue,
     disabled,
     "aria-disabled": ariaDisabled
   } = useComboboxContext();
-  const isEmpty = value === void 0 || value.length === 0;
   const isDisabled = ariaDisabled === true || disabled;
   const onItemRemove = (item) => {
-    setValue((prevValue) => prevValue.filter((value2) => value2 !== item));
+    setValue((prevValue) => prevValue == null ? void 0 : prevValue.filter((value2) => value2 !== item));
   };
-  if (isEmpty) {
+  if (value.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -489,6 +568,7 @@ const Value = ({ removeChipAriaLabel }) => {
       onRemove: () => onItemRemove(item),
       disabled: isDisabled,
       removeChipAriaLabel,
+      "data-testid": process.env.NODE_ENV === "test" ? "combobox-value-".concat(item) : void 0,
       children: item
     },
     item
@@ -502,9 +582,18 @@ const StyledSeparator = designSystemStitches.styled(designSystemPrimitive.Primit
   margin: "$100 0"
 });
 
-const Separator = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true }));
+const Separator = React__default["default"].forwardRef((props, forwardRef) => {
+  const { autoFilter, searchValue } = useComboboxContext();
+  if (autoFilter === true && searchValue.length > 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true });
+});
 
-const StyledComboboxContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
+const StyledComboboxContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  position: "relative",
+  width: "100%"
+});
 
 const Root = React__default["default"].forwardRef(({ value: valueProp, onValueChange, children, ...restProps }, forwardRef) => {
   const {
@@ -536,8 +625,18 @@ const Root = React__default["default"].forwardRef(({ value: valueProp, onValueCh
     setReadOnly
   ]);
   const onSetSelectedValue = (newValue) => {
-    onValueChange == null ? void 0 : onValueChange(newValue);
-    setValue(newValue);
+    setValue(typeof newValue === "string" ? [newValue] : newValue);
+  };
+  const comboboxProps = {
+    ...restProps,
+    onClick: (event) => {
+      if (!designSystemUtils.booleanify(disabled)) {
+        setOpenState(true);
+      }
+      if (restProps.onClick !== void 0) {
+        restProps.onClick(event);
+      }
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { open: openState, onOpenChange: setOpenState, children: /* @__PURE__ */ jsxRuntime.jsx(
     react.ComboboxProvider,
@@ -547,7 +646,15 @@ const Root = React__default["default"].forwardRef(({ value: valueProp, onValueCh
       defaultSelectedValue: defaultValue,
       selectedValue: value,
       setSelectedValue: onSetSelectedValue,
-      children: /* @__PURE__ */ jsxRuntime.jsx(StyledComboboxContent, { ...restProps, ref: forwardRef, dir: direction, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        StyledComboboxContent,
+        {
+          ...comboboxProps,
+          ref: forwardRef,
+          dir: direction,
+          children
+        }
+      )
     }
   ) });
 });
@@ -562,8 +669,9 @@ const Combobox = React__default["default"].forwardRef(
     required,
     value,
     defaultValue,
-    onSearchValueChange,
     onOpen,
+    onClose,
+    onSearchValueChange,
     onValueChange,
     direction = "ltr",
     autoFilter = true,
@@ -574,9 +682,12 @@ const Combobox = React__default["default"].forwardRef(
     {
       defaultValue,
       value,
+      onValueChange,
       onSearchValueChange,
       defaultOpen,
       open,
+      onOpen,
+      onClose,
       valid,
       required,
       disabled,
@@ -585,15 +696,7 @@ const Combobox = React__default["default"].forwardRef(
       direction,
       autoFilter,
       noResultsText,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Root,
-        {
-          ...restProps,
-          noResultsText,
-          value,
-          ref: forwardRef
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, value, ref: forwardRef })
     }
   )
 );