@mirohq/design-system-combobox 0.3.5 → 0.3.7

package/dist/module.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useRef, useState, useContext, useCallback, useEffect, useMemo } from 'react';
-import { Combobox as Combobox$1, ComboboxItem, ComboboxItemCheck, ComboboxList, Group as Group$1, GroupLabel as GroupLabel$1, ComboboxProvider as ComboboxProvider$1 } from '@ariakit/react';
+import React, { createContext, useRef, useState, useMemo, useContext, useCallback, useEffect } from 'react';
+import { Combobox as Combobox$1, ComboboxList, 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 { mergeRefs, booleanify, stringAttrValue } from '@mirohq/design-system-utils';
 import * as RadixPopover from '@radix-ui/react-popover';
@@ -11,13 +11,13 @@ import { styled, theme } from '@mirohq/design-system-stitches';
 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 { contentStyles, itemStyles, StyledItemCheck, groupLabelStyles, separatorStyles } from '@mirohq/design-system-base-select';
-import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
-import { useLayoutEffect } from '@mirohq/design-system-use-layout-effect';
-import { createPortal } from 'react-dom';
+import { itemsContainerStyles, contentStyles, itemStyles, StyledItemCheck, groupLabelStyles, separatorStyles } from '@mirohq/design-system-base-select';
 import { Primitive } from '@mirohq/design-system-primitive';
-import { BaseButton } from '@mirohq/design-system-base-button';
-import { focus } from '@mirohq/design-system-styles';
+import { createPortal } from 'react-dom';
+import { useLayoutEffect } from '@mirohq/design-system-use-layout-effect';
+import { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled';
+import { useId } from '@mirohq/design-system-use-id';
+import { Chip } from '@mirohq/design-system-chip';
 
 const StyledBaseInput = styled(BaseInput, {
   flexWrap: "wrap",
@@ -53,6 +53,10 @@ const StyledBaseInput = styled(BaseInput, {
   }
 });
 
+function searchQueryMatch(displayedText, searchValue) {
+  return displayedText.toLowerCase().includes(searchValue.toLowerCase());
+}
+
 const ComboboxContext = createContext({});
 const ComboboxProvider = ({
   children,
@@ -66,13 +70,12 @@ const ComboboxProvider = ({
   onValueChange,
   searchValue: searchValueProp,
   onSearchValueChange,
-  autoFilter = true,
+  autoFilter,
   ...restProps
 }) => {
   const triggerRef = useRef(null);
   const inputRef = useRef(null);
   const contentRef = useRef(null);
-  const [defaultValue, setDefaultValue] = useState(defaultValueProp);
   const [openState = false, setOpenState] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen,
@@ -89,16 +92,23 @@ const ComboboxProvider = ({
     defaultProp: defaultValueProp,
     onChange: onValueChange
   });
-  const [filteredItems, setFilteredItems] = useState(/* @__PURE__ */ new Set());
-  const [searchValue, setSearchValue] = useControllableState({
+  const [searchValue = "", setSearchValue] = useControllableState({
     prop: searchValueProp,
     defaultProp: "",
     onChange: onSearchValueChange
   });
   const [size, setSize] = useState();
   const [placeholder, setPlaceholder] = useState();
-  const [itemValueTextMap, setItemValueTextMap] = useState(/* @__PURE__ */ new Map());
+  const [itemsMap, setItemsMap] = useState(/* @__PURE__ */ new Map());
   const { valid: formFieldValid } = useFormFieldContext();
+  const filteredItems = useMemo(() => {
+    if (searchValue.length > 0) {
+      return Array.from(itemsMap.values()).filter(
+        (item) => searchQueryMatch(item.displayedText, searchValue)
+      );
+    }
+    return [];
+  }, [itemsMap, searchValue]);
   return /* @__PURE__ */ jsx(
     ComboboxContext.Provider,
     {
@@ -109,18 +119,15 @@ const ComboboxProvider = ({
         setOpenState,
         value,
         setValue,
-        setDefaultValue,
-        defaultValue,
         triggerRef,
         inputRef,
         contentRef,
         autoFilter,
         searchValue,
         setSearchValue,
+        itemsMap,
+        setItemsMap,
         filteredItems,
-        setFilteredItems,
-        itemValueTextMap,
-        setItemValueTextMap,
         placeholder,
         setPlaceholder,
         size,
@@ -207,7 +214,7 @@ const Trigger = React.forwardRef(
     placeholder,
     openActionLabel,
     closeActionLabel,
-    clearable,
+    clearable = true,
     clearActionLabel,
     onChange,
     onFocus,
@@ -325,6 +332,7 @@ const Trigger = React.forwardRef(
   }
 );
 
+const StyledItemsContainer = styled(Primitive.div, itemsContainerStyles);
 const StyledContent = styled(RadixPopover.Content, {
   ...contentStyles,
   width: "var(--radix-popover-trigger-width)",
@@ -332,103 +340,6 @@ const StyledContent = styled(RadixPopover.Content, {
   boxSizing: "border-box"
 });
 
-const StyledItem = styled(ComboboxItem, itemStyles);
-
-const Item = React.forwardRef(
-  ({ disabled = false, value, textValue, children, ...restProps }, forwardRef) => {
-    const { "aria-disabled": ariaDisabled, ...restAriaDisabledProps } = useAriaDisabled(restProps, { allowArrows: true });
-    const {
-      autoFilter,
-      filteredItems,
-      setItemValueTextMap,
-      triggerRef,
-      inputRef,
-      value: comboboxValue = []
-    } = useComboboxContext();
-    useLayoutEffect(() => {
-      const textToSet = textValue !== void 0 ? textValue : typeof children === "string" ? children : "";
-      setItemValueTextMap((prevState) => new Map(prevState.set(value, textToSet)));
-      return () => {
-        setItemValueTextMap((prevState) => {
-          prevState.delete(value);
-          return new Map(prevState);
-        });
-      };
-    }, [setItemValueTextMap, value, textValue, children]);
-    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);
-      }
-    };
-    const isSelected = comboboxValue.includes(value);
-    return /* @__PURE__ */ jsxs(
-      StyledItem,
-      {
-        ...mergeProps(restProps, restAriaDisabledProps),
-        focusable: true,
-        hideOnClick: false,
-        accessibleWhenDisabled: booleanify(ariaDisabled),
-        disabled: booleanify(ariaDisabled) || disabled,
-        ref: forwardRef,
-        value,
-        onClick: scrollIntoView,
-        "aria-selected": isSelected,
-        children: [
-          /* @__PURE__ */ jsx(
-            ComboboxItemCheck,
-            {
-              checked: isSelected,
-              render: ({ style, ...props }) => (
-                // AriakitComboboxItemCheck adds its owm inline styles which we want to omit here
-                /* @__PURE__ */ jsx(StyledItemCheck, { ...props })
-              ),
-              children: /* @__PURE__ */ jsx(
-                IconCheckMark,
-                {
-                  size: "small",
-                  "data-testid": process.env.NODE_ENV === "test" ? "combobox-item-check" : void 0
-                }
-              )
-            }
-          ),
-          children
-        ]
-      }
-    );
-  }
-);
-
-const itemType = React.createElement(Item).type;
-const getChildrenItemValues = (componentChildren) => {
-  const values = [];
-  const recurse = (children) => {
-    React.Children.forEach(children, (child) => {
-      if (!React.isValidElement(child)) {
-        return;
-      }
-      if (child.type === itemType) {
-        const props = child.props;
-        values.push(props.value);
-        return;
-      }
-      if (child.props.children) {
-        recurse(child.props.children);
-      }
-    });
-  };
-  recurse(componentChildren);
-  return values;
-};
-
 const useDocumentFragment = () => {
   const [fragment, setFragment] = React.useState();
   useLayoutEffect(() => {
@@ -446,6 +357,7 @@ const useInvisibleContent = () => {
 };
 
 const CONTENT_OFFSET = parseInt(theme.space[50]);
+const RADIX_CONTENT_AVAILABLE_HEIGHT = "var(--radix-popover-content-available-height)";
 const isInsideRef = (element, ref) => {
   var _a, _b;
   return (_b = element != null && ((_a = ref.current) == null ? void 0 : _a.contains(element))) != null ? _b : false;
@@ -465,31 +377,15 @@ const Content = React.forwardRef(
     children,
     ...restProps
   }, forwardRef) => {
-    const {
-      triggerRef,
-      contentRef,
-      autoFilter,
-      setFilteredItems,
-      searchValue,
-      direction,
-      openState
-    } = useComboboxContext();
-    useEffect(() => {
-      const childrenItemValues = getChildrenItemValues(children);
-      const shouldFilter = autoFilter !== false && searchValue !== void 0 && searchValue.length > 0;
-      const items = shouldFilter ? childrenItemValues.filter(
-        (child) => child.toLowerCase().includes(searchValue.toLowerCase())
-      ) : childrenItemValues;
-      setFilteredItems(new Set(items));
-    }, [children, autoFilter, setFilteredItems, searchValue]);
+    const { triggerRef, contentRef, direction, openState } = useComboboxContext();
     const getInvisibleContent = useInvisibleContent();
     if (!openState) {
       return getInvisibleContent(children);
     }
+    const content = /* @__PURE__ */ jsx(StyledItemsContainer, { children });
     return /* @__PURE__ */ jsx(
       StyledContent,
       {
-        asChild: true,
         ...restProps,
         dir: direction,
         side,
@@ -514,14 +410,112 @@ const Content = React.forwardRef(
           /* @__PURE__ */ jsx(
             ScrollArea.Viewport,
             {
-              availableHeight: "var(--radix-popover-content-available-height)",
-              verticalGap: "var(--space-50) * 2",
-              maxHeight,
-              children
+              css: {
+                maxHeight: maxHeight !== void 0 ? "min(".concat(RADIX_CONTENT_AVAILABLE_HEIGHT, ", ").concat(typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight, ")") : RADIX_CONTENT_AVAILABLE_HEIGHT
+              },
+              children: content
             }
           ),
           /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
-        ] }) : children })
+        ] }) : content })
+      }
+    );
+  }
+);
+
+const StyledItem = styled(ComboboxItem, itemStyles);
+
+const GroupContext = createContext({});
+const GroupProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsx(
+  GroupContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
+const useGroupContext = () => useContext(GroupContext);
+
+const Item = React.forwardRef(
+  ({ disabled = false, value, textValue, children, ...restProps }, forwardRef) => {
+    const { "aria-disabled": ariaDisabled, ...restAriaDisabledProps } = useAriaDisabled(restProps, { allowArrows: true });
+    const {
+      searchValue,
+      autoFilter,
+      setItemsMap,
+      triggerRef,
+      inputRef,
+      value: comboboxValue = []
+    } = useComboboxContext();
+    const { groupId } = useGroupContext();
+    const displayedText = useMemo(() => {
+      if (textValue !== void 0) {
+        return textValue;
+      }
+      return typeof children === "string" ? children : "";
+    }, [textValue, children]);
+    useLayoutEffect(() => {
+      setItemsMap(
+        (prevState) => new Map(prevState.set(value, { displayedText, groupId }))
+      );
+      return () => {
+        setItemsMap((prevState) => {
+          prevState.delete(value);
+          return new Map(prevState);
+        });
+      };
+    }, [setItemsMap, groupId, value, displayedText]);
+    if (autoFilter && searchValue.length > 0 && !searchQueryMatch(displayedText, searchValue)) {
+      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);
+      }
+    };
+    const isSelected = comboboxValue.includes(value);
+    return /* @__PURE__ */ jsxs(
+      StyledItem,
+      {
+        ...mergeProps(restProps, restAriaDisabledProps),
+        focusable: true,
+        hideOnClick: false,
+        accessibleWhenDisabled: booleanify(ariaDisabled),
+        disabled: booleanify(ariaDisabled) || disabled,
+        ref: forwardRef,
+        value,
+        onClick: scrollIntoView,
+        "aria-selected": isSelected,
+        children: [
+          /* @__PURE__ */ jsx(
+            ComboboxItemCheck,
+            {
+              checked: isSelected,
+              render: ({ style, ...props }) => (
+                // AriakitComboboxItemCheck adds its owm inline styles which we want to omit here
+                /* @__PURE__ */ jsx(StyledItemCheck, { ...props })
+              ),
+              children: /* @__PURE__ */ jsx(
+                IconCheckMark,
+                {
+                  size: "small",
+                  "data-testid": process.env.NODE_ENV === "test" ? "combobox-item-check" : void 0
+                }
+              )
+            }
+          ),
+          children
+        ]
       }
     );
   }
@@ -532,79 +526,30 @@ const Portal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
 const StyledGroup = styled(Group$1, {});
 
 const Group = React.forwardRef(({ children, ...rest }, forwardRef) => {
-  const { autoFilter, filteredItems } = useComboboxContext();
-  const childValues = useMemo(
-    // don't perform calculation if auto filter is disabled
-    () => autoFilter !== false ? getChildrenItemValues(children) : [],
-    [children, autoFilter]
-  );
-  const hasVisibleChildren = useMemo(
-    () => (
-      // don't perform calculation if auto filter is disabled
-      autoFilter !== false ? childValues.some((value) => filteredItems.has(value)) : true
-    ),
-    [childValues, filteredItems, autoFilter]
-  );
+  const { autoFilter, searchValue, filteredItems } = useComboboxContext();
+  const id = useId();
   const getInvisibleContent = useInvisibleContent();
-  if (!hasVisibleChildren) {
-    return getInvisibleContent(children);
+  let hasVisibleContent = true;
+  if (autoFilter && searchValue.length > 0) {
+    hasVisibleContent = filteredItems.some((item) => item.groupId === id);
   }
-  return /* @__PURE__ */ jsx(StyledGroup, { ...rest, ref: forwardRef, children });
+  return /* @__PURE__ */ jsx(GroupProvider, { groupId: id, children: hasVisibleContent ? /* @__PURE__ */ jsx(StyledGroup, { ...rest, ref: forwardRef, children }) : getInvisibleContent(children) });
 });
 
 const StyledGroupLabel = styled(GroupLabel$1, groupLabelStyles);
 
 const GroupLabel = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
 
-const StyledChip = styled(Primitive.div, {
-  fontSize: "$150",
-  padding: "$50 $100",
-  borderRadius: "$round",
-  display: "flex",
-  alignItems: "center",
-  gap: "$50",
-  whiteSpace: "nowrap",
-  maxWidth: "$35",
-  backgroundColor: "$background-neutrals-subtle",
-  color: "$text-neutrals"
-});
-const StyledChipButton = styled(BaseButton, {
-  color: "$icon-neutrals-inactive",
-  ...focus.css({
-    boxShadow: "$focus-small-outline"
-  })
-});
-const StyledChipContent = styled(Primitive.div, {
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  lineHeight: 1.3
-});
-
-const StyledLeftSlot = styled(Primitive.span, {
-  order: -1,
-  marginRight: "$50"
-});
-
-const LeftSlot = StyledLeftSlot;
-
-const Chip = React.forwardRef(
-  ({ children, disabled = false, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
-    /* @__PURE__ */ jsx(StyledChipContent, { children }),
-    !booleanify(disabled) && /* @__PURE__ */ jsx(StyledChipButton, { onClick: onRemove, "aria-label": removeAriaLabel, children: /* @__PURE__ */ jsx(IconCross, { size: "small", weight: "thin", "aria-hidden": true }) })
-  ] })
-);
-Chip.LeftSlot = LeftSlot;
-
 const Value = ({ unselectAriaLabel }) => {
   const {
     value = [],
     setValue,
     disabled,
+    readOnly,
     "aria-disabled": ariaDisabled,
-    itemValueTextMap
+    itemsMap
   } = useComboboxContext();
-  const isDisabled = ariaDisabled === true || disabled;
+  const canRemoveItem = !booleanify(ariaDisabled) && !booleanify(disabled) && !booleanify(readOnly);
   const onItemRemove = useCallback(
     (item) => {
       setValue((prevValue) => prevValue == null ? void 0 : prevValue.filter((value2) => value2 !== item));
@@ -613,8 +558,8 @@ const Value = ({ unselectAriaLabel }) => {
   );
   const getItemText = useCallback(
     (itemValue) => {
-      const textValue = itemValueTextMap.get(itemValue);
-      if (textValue === void 0 || textValue === "") {
+      const itemData = itemsMap.get(itemValue);
+      if (itemData === void 0 || itemData.displayedText === "") {
         return null;
       }
       return /* @__PURE__ */ jsx(
@@ -624,15 +569,15 @@ const Value = ({ unselectAriaLabel }) => {
             onItemRemove(itemValue);
             e.stopPropagation();
           },
-          disabled: isDisabled,
-          removeAriaLabel: "".concat(unselectAriaLabel, " ").concat(textValue),
+          removable: canRemoveItem,
+          removeAriaLabel: "".concat(unselectAriaLabel, " ").concat(itemData.displayedText),
           "data-testid": process.env.NODE_ENV === "test" ? "combobox-value-".concat(itemValue) : void 0,
-          children: textValue
+          children: itemData.displayedText
         },
         itemValue
       );
     },
-    [isDisabled, itemValueTextMap, onItemRemove, unselectAriaLabel]
+    [canRemoveItem, itemsMap, onItemRemove, unselectAriaLabel]
   );
   return /* @__PURE__ */ jsx(Fragment, { children: value.map(getItemText) });
 };
@@ -641,7 +586,7 @@ const StyledSeparator = styled(Primitive.div, separatorStyles);
 
 const Separator = React.forwardRef((props, forwardRef) => {
   const { autoFilter, searchValue } = useComboboxContext();
-  if (autoFilter === true && searchValue !== void 0 && searchValue.length > 0) {
+  if (autoFilter && searchValue.length > 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true });
@@ -661,11 +606,13 @@ const StyledNoResult = styled(Primitive.div, {
 });
 
 const NoResult = React.forwardRef((props, forwardRef) => {
-  const { filteredItems } = useComboboxContext();
-  if (filteredItems.size !== 0) {
-    return null;
+  const { autoFilter, searchValue, filteredItems, itemsMap } = useComboboxContext();
+  const noActiveFiltering = !autoFilter || autoFilter && searchValue.length === 0;
+  const isVisible = noActiveFiltering ? itemsMap.size === 0 : filteredItems.length === 0;
+  if (isVisible) {
+    return /* @__PURE__ */ jsx(StyledNoResult, { ...props, ref: forwardRef });
   }
-  return /* @__PURE__ */ jsx(StyledNoResult, { ...props, ref: forwardRef });
+  return null;
 });
 
 const Root = React.forwardRef(
@@ -674,7 +621,6 @@ const Root = React.forwardRef(
     const {
       openState,
       setOpenState,
-      defaultValue,
       value = [],
       setValue,
       required,
@@ -728,7 +674,6 @@ const Root = React.forwardRef(
         {
           open: openState,
           setOpen: onOpenChange,
-          defaultSelectedValue: defaultValue,
           selectedValue: value,
           setSelectedValue: onSetSelectedValue,
           children: /* @__PURE__ */ jsxs(