@mirohq/design-system-combobox 0.1.0-combobox.5 → 0.1.0-combobox.7

package/dist/module.js

@@ -1,19 +1,25 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useRef, useState, useContext, useCallback, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { Combobox as Combobox$1, ComboboxItem, ComboboxItemCheck, Group as Group$1, GroupLabel as GroupLabel$1, ComboboxProvider as ComboboxProvider$1 } from '@ariakit/react';
 import { useFormFieldContext, FloatingLabel } from '@mirohq/design-system-base-form';
 import * as RadixPopover from '@radix-ui/react-popover';
-import { Portal as Portal$1 } from '@radix-ui/react-popover';
+import { Anchor, Portal as Portal$1 } from '@radix-ui/react-popover';
 import { stringAttrValue, booleanishAttrValue, mergeRefs, booleanify } from '@mirohq/design-system-utils';
-import { styled } from '@mirohq/design-system-stitches';
+import { styled, theme } from '@mirohq/design-system-stitches';
 import { Input } from '@mirohq/design-system-input';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { IconChevronDown, IconCross, IconCheckMark } from '@mirohq/design-system-icons';
+import { ScrollArea } from '@mirohq/design-system-scroll-area';
 import { mergeProps } from '@react-aria/utils';
 import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
 import { focus } from '@mirohq/design-system-styles';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { BaseButton } from '@mirohq/design-system-base-button';
 
+const StyledAnchor = styled(Anchor, {
+  position: "relative",
+  width: "100%"
+});
 const StyledInput = styled(Input, {
   flexWrap: "wrap",
   flexGrow: 1,
@@ -52,10 +58,14 @@ const StyledInput = styled(Input, {
 const ComboboxContext = createContext({});
 const ComboboxProvider = ({
   children,
+  open: openProp,
   defaultOpen,
+  onOpen,
+  onClose,
   valid,
   value: valueProp,
   defaultValue: defaultValueProp,
+  onValueChange,
   onSearchValueChange,
   autoFilter = true,
   ...restProps
@@ -63,9 +73,23 @@ const ComboboxProvider = ({
   const triggerRef = useRef(null);
   const inputRef = useRef(null);
   const contentRef = useRef(null);
-  const [openState, setOpenState] = useState(defaultOpen != null ? defaultOpen : false);
-  const [value, setValue] = useState(valueProp != null ? valueProp : []);
   const [defaultValue, setDefaultValue] = useState(defaultValueProp);
+  const [openState = false, setOpenState] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: (state) => {
+      if (state) {
+        onOpen == null ? void 0 : onOpen();
+      } else {
+        onClose == null ? void 0 : onClose();
+      }
+    }
+  });
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValueProp,
+    onChange: onValueChange
+  });
   const [filteredItems, setFilteredItems] = useState(/* @__PURE__ */ new Set());
   const [searchValue, setSearchValue] = useState("");
   const { valid: formFieldValid } = useFormFieldContext();
@@ -120,7 +144,7 @@ const TriggerActionButton = ({
   clearActionLabel,
   size
 }) => {
-  const { setOpenState, value, setValue } = useComboboxContext();
+  const { setOpenState, value = [], setValue } = useComboboxContext();
   const isEmpty = value.length === 0;
   const ActionButtonIcon = isEmpty ? IconChevronDown : IconCross;
   const label = isEmpty ? openActionLabel : clearActionLabel;
@@ -129,7 +153,7 @@ const TriggerActionButton = ({
       if (!isEmpty) {
         setValue([]);
       } else {
-        setOpenState((prevOpen) => !prevOpen);
+        setOpenState((prevOpen = false) => !prevOpen);
       }
       event.stopPropagation();
     },
@@ -149,18 +173,21 @@ const Trigger = React.forwardRef(
     openActionLabel,
     clearActionLabel,
     onChange,
+    css,
     ...restProps
   }, forwardRef) => {
     const {
       "aria-disabled": ariaDisabled,
       valid: comboboxValid,
       disabled,
-      value,
+      value = [],
+      readOnly,
       triggerRef,
       inputRef,
       onSearchValueChange,
       searchValue,
-      setSearchValue
+      setSearchValue,
+      setOpenState
     } = useComboboxContext();
     const {
       formElementId,
@@ -182,12 +209,13 @@ const Trigger = React.forwardRef(
       ),
       valid,
       disabled,
+      readOnly,
       invalid: booleanishAttrValue(valid),
       id: id != null ? id : formElementId,
       placeholder: value.length === 0 ? placeholder : void 0
     };
     const shouldUseFloatingLabel = label !== null && isFloatingLabel;
-    const isFloating = placeholder !== void 0 || value.length !== 0 || focused;
+    const isFloating = placeholder !== void 0 || value.length !== 0 || focused || searchValue !== "";
     const scrollIntoView = (event) => {
       var _a;
       const trigger = triggerRef == null ? void 0 : triggerRef.current;
@@ -207,36 +235,48 @@ const Trigger = React.forwardRef(
       onSearchValueChange == null ? void 0 : onSearchValueChange(e.target.value);
       onChange == null ? void 0 : onChange(e);
     };
-    return /* @__PURE__ */ jsxs(RadixPopover.Anchor, { ref: mergeRefs([triggerRef, forwardRef]), children: [
-      shouldUseFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: isFloating, size, children: label }),
-      /* @__PURE__ */ jsx(
-        Combobox$1,
-        {
-          render: /* @__PURE__ */ jsxs(
-            StyledInput,
+    return /* @__PURE__ */ jsxs(
+      StyledAnchor,
+      {
+        ref: mergeRefs([triggerRef, forwardRef]),
+        css,
+        onClick: () => {
+          if (!booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly)) {
+            setOpenState(true);
+          }
+        },
+        children: [
+          shouldUseFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: isFloating, size, children: label }),
+          /* @__PURE__ */ jsx(
+            Combobox$1,
             {
-              ...inputProps,
-              value: searchValue,
-              size,
-              ref: inputRef,
-              onChange: onInputChange,
-              onFocus: scrollIntoView,
-              children: [
-                children,
-                /* @__PURE__ */ jsx(
-                  TriggerActionButton,
-                  {
-                    openActionLabel,
-                    clearActionLabel,
-                    size
-                  }
-                )
-              ]
+              render: /* @__PURE__ */ jsxs(
+                StyledInput,
+                {
+                  ...inputProps,
+                  value: searchValue,
+                  size,
+                  ref: inputRef,
+                  onChange: onInputChange,
+                  onFocus: scrollIntoView,
+                  children: [
+                    children,
+                    /* @__PURE__ */ jsx(
+                      TriggerActionButton,
+                      {
+                        openActionLabel,
+                        clearActionLabel,
+                        size
+                      }
+                    )
+                  ]
+                }
+              )
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
 );
 
@@ -246,35 +286,30 @@ const StyledContent = styled(RadixPopover.Content, {
   boxShadow: "$50",
   fontSize: "$175",
   fontWeight: "normal",
-  lineHeight: "1.5",
+  lineHeight: "20px",
   width: "var(--radix-popover-trigger-width)",
   zIndex: "$select",
   overflowY: "auto",
-  marginTop: "$200",
-  padding: "$150",
+  padding: "$50",
   boxSizing: "border-box",
   outline: "1px solid transparent"
 });
 
 const StyledItemCheck = styled(Primitive.span, {
-  color: "$icon-primary",
-  paddingX: "$100"
+  color: "$icon-primary"
 });
 const StyledItem = styled(ComboboxItem, {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: "$200",
+  display: "grid",
+  gridTemplateColumns: "20px 1fr",
   borderRadius: "$50",
   boxSizing: "border-box",
   color: "$text-neutrals",
   cursor: "pointer",
   fontSize: "$175",
-  lineHeight: 1.5,
+  lineHeight: "20px",
   position: "relative",
   userSelect: "none",
-  paddingX: "$100",
-  paddingY: "10px",
+  padding: "6px $100 6px $150",
   ...focus.css({
     boxShadow: "$focus-small"
   }),
@@ -289,7 +324,13 @@ const StyledItem = styled(ComboboxItem, {
   },
   "&:disabled, &[aria-disabled=true], &[data-disabled]": {
     cursor: "default",
-    color: "$text-neutrals-disabled"
+    color: "$text-neutrals-disabled",
+    ["".concat(StyledItemCheck)]: {
+      color: "$icon-neutrals-disabled"
+    }
+  },
+  '&[aria-selected="true"]:not(:disabled,[aria-disabled=true],[data-disabled])': {
+    color: "$text-primary-selected"
   }
 });
 
@@ -316,13 +357,13 @@ const Item = React.forwardRef(
       {
         ...mergeProps(restProps, restAriaDisabledProps),
         focusable: true,
-        accessibleWhenDisabled: ariaDisabled === true,
-        disabled: ariaDisabled === true || disabled,
+        hideOnClick: false,
+        accessibleWhenDisabled: booleanify(ariaDisabled),
+        disabled: booleanify(ariaDisabled) || disabled,
         ref: forwardRef,
         value,
         onClick: scrollIntoView,
         children: [
-          children,
           /* @__PURE__ */ jsx(
             ComboboxItemCheck,
             {
@@ -330,9 +371,16 @@ const Item = React.forwardRef(
                 // AriakitComboboxItemCheck adds its owm inline styles which we want to omit here
                 /* @__PURE__ */ jsx(StyledItemCheck, { ...props })
               ),
-              children: /* @__PURE__ */ jsx(IconCheckMark, { size: "small" })
+              children: /* @__PURE__ */ jsx(
+                IconCheckMark,
+                {
+                  size: "small",
+                  "data-testid": process.env.NODE_ENV === "test" ? "combobox-item-check" : void 0
+                }
+              )
             }
-          )
+          ),
+          children
         ]
       }
     );
@@ -361,48 +409,65 @@ const getChildrenItemValues = (componentChildren) => {
   return values;
 };
 
+const CONTENT_OFFSET = parseInt(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.forwardRef(({ children, ...restProps }, forwardRef) => {
-  const {
-    triggerRef,
-    contentRef,
-    autoFilter,
-    filteredItems,
-    setFilteredItems,
-    searchValue,
-    noResultsText
-  } = useComboboxContext();
-  useEffect(() => {
-    const childrenItemValues = getChildrenItemValues(children);
-    setFilteredItems(
-      new Set(
-        autoFilter === false ? childrenItemValues : childrenItemValues.filter(
-          (child) => child.toLowerCase().includes(searchValue.toLowerCase())
+const Content = React.forwardRef(
+  ({ sideOffset = CONTENT_OFFSET, maxHeight, children, ...restProps }, forwardRef) => {
+    const {
+      triggerRef,
+      contentRef,
+      autoFilter,
+      filteredItems,
+      setFilteredItems,
+      searchValue,
+      noResultsText,
+      direction
+    } = useComboboxContext();
+    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__ */ jsx(
+      StyledContent,
+      {
+        ...restProps,
+        sideOffset,
+        ref: 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__ */ jsxs(ScrollArea, { type: "always", dir: direction, children: [
+          /* @__PURE__ */ jsx(
+            ScrollArea.Viewport,
+            {
+              availableHeight: "var(--radix-popover-content-available-height)",
+              verticalGap: "var(--space-50) * 2",
+              maxHeight,
+              children: content
+            }
+          ),
+          /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
+        ] })
+      }
     );
-  }, [children, autoFilter, setFilteredItems, searchValue]);
-  return /* @__PURE__ */ jsx(
-    StyledContent,
-    {
-      ...restProps,
-      ref: 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__ */ jsx(Portal$1, { ...props });
 
@@ -427,11 +492,8 @@ const Group = React.forwardRef(({ children, ...rest }, forwardRef) => {
 });
 
 const StyledGroupLabel = styled(GroupLabel$1, {
-  padding: "$100",
-  color: "$text-neutrals-subtle",
-  fontSize: "$150",
-  textTransform: "uppercase",
-  fontWeight: 650
+  padding: "6px $100",
+  color: "$text-neutrals-subtle"
 });
 
 const GroupLabel = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
@@ -482,14 +544,14 @@ const StyledValue = styled(Chip, {
 
 const Value = ({ removeChipAriaLabel }) => {
   const {
-    value,
+    value = [],
     setValue,
     disabled,
     "aria-disabled": ariaDisabled
   } = useComboboxContext();
   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 (value.length === 0) {
     return null;
@@ -500,6 +562,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
@@ -513,13 +576,19 @@ const StyledSeparator = styled(Primitive.div, {
   margin: "$100 0"
 });
 
-const Separator = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true }));
-
-const StyledComboboxContent = styled(Primitive.div, {
-  position: "relative"
+const Separator = React.forwardRef((props, forwardRef) => {
+  const { autoFilter, searchValue } = useComboboxContext();
+  if (autoFilter === true && searchValue.length > 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true });
 });
 
-const Root = React.forwardRef(({ value: valueProp, onValueChange, children, ...restProps }, forwardRef) => {
+const Root = ({
+  value: valueProp,
+  children,
+  ...restProps
+}) => {
   const {
     openState,
     setOpenState,
@@ -529,8 +598,7 @@ const Root = React.forwardRef(({ value: valueProp, onValueChange, children, ...r
     required,
     readOnly,
     "aria-disabled": ariaDisabled,
-    disabled,
-    direction
+    disabled
   } = useComboboxContext();
   const { setRequired, setDisabled, setAriaDisabled, setReadOnly } = useFormFieldContext();
   useEffect(() => {
@@ -549,66 +617,72 @@ const Root = React.forwardRef(({ value: valueProp, onValueChange, children, ...r
     setReadOnly
   ]);
   const onSetSelectedValue = (newValue) => {
-    onValueChange == null ? void 0 : onValueChange(newValue);
-    setValue(newValue);
+    setValue(typeof newValue === "string" ? [newValue] : newValue);
   };
-  return /* @__PURE__ */ jsx(RadixPopover.Root, { open: openState, onOpenChange: setOpenState, children: /* @__PURE__ */ jsx(
-    ComboboxProvider$1,
+  const onOpenChange = (value2) => {
+    if (!booleanify(readOnly)) {
+      setOpenState(value2);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    RadixPopover.Root,
     {
       open: openState,
-      setOpen: setOpenState,
-      defaultSelectedValue: defaultValue,
-      selectedValue: value,
-      setSelectedValue: onSetSelectedValue,
-      children: /* @__PURE__ */ jsx(StyledComboboxContent, { ...restProps, ref: forwardRef, dir: direction, children })
+      onOpenChange,
+      ...restProps,
+      children: /* @__PURE__ */ jsx(
+        ComboboxProvider$1,
+        {
+          open: openState,
+          setOpen: onOpenChange,
+          defaultSelectedValue: defaultValue,
+          selectedValue: value,
+          setSelectedValue: onSetSelectedValue,
+          children
+        }
+      )
     }
-  ) });
-});
-const Combobox = React.forwardRef(
-  ({
-    "aria-disabled": ariaDisabled,
-    defaultOpen = false,
+  );
+};
+const Combobox = ({
+  "aria-disabled": ariaDisabled,
+  defaultOpen = false,
+  open,
+  valid,
+  disabled,
+  readOnly,
+  required,
+  value,
+  defaultValue,
+  onOpen,
+  onClose,
+  onSearchValueChange,
+  onValueChange,
+  direction = "ltr",
+  autoFilter = true,
+  noResultsText,
+  ...restProps
+}) => /* @__PURE__ */ jsx(
+  ComboboxProvider,
+  {
+    defaultValue,
+    value,
+    onValueChange,
+    onSearchValueChange,
+    defaultOpen,
     open,
+    onOpen,
+    onClose,
     valid,
+    required,
     disabled,
     readOnly,
-    required,
-    value,
-    defaultValue,
-    onSearchValueChange,
-    onOpen,
-    onValueChange,
-    direction = "ltr",
-    autoFilter = true,
+    "aria-disabled": ariaDisabled,
+    direction,
+    autoFilter,
     noResultsText,
-    ...restProps
-  }, forwardRef) => /* @__PURE__ */ jsx(
-    ComboboxProvider,
-    {
-      defaultValue,
-      value,
-      onSearchValueChange,
-      defaultOpen,
-      open,
-      valid,
-      required,
-      disabled,
-      readOnly,
-      "aria-disabled": ariaDisabled,
-      direction,
-      autoFilter,
-      noResultsText,
-      children: /* @__PURE__ */ jsx(
-        Root,
-        {
-          ...restProps,
-          noResultsText,
-          value,
-          ref: forwardRef
-        }
-      )
-    }
-  )
+    children: /* @__PURE__ */ jsx(Root, { ...restProps, value })
+  }
 );
 Combobox.Portal = Portal;
 Combobox.Trigger = Trigger;