@mirohq/design-system-combobox 0.3.6 → 0.4.0

package/dist/main.js

@@ -16,11 +16,11 @@ var designSystemIcons = require('@mirohq/design-system-icons');
 var designSystemScrollArea = require('@mirohq/design-system-scroll-area');
 var designSystemBaseSelect = require('@mirohq/design-system-base-select');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
-var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
-var designSystemUseLayoutEffect = require('@mirohq/design-system-use-layout-effect');
 var reactDom = require('react-dom');
-var designSystemBaseButton = require('@mirohq/design-system-base-button');
-var designSystemStyles = require('@mirohq/design-system-styles');
+var designSystemUseLayoutEffect = require('@mirohq/design-system-use-layout-effect');
+var designSystemUseAriaDisabled = require('@mirohq/design-system-use-aria-disabled');
+var designSystemUseId = require('@mirohq/design-system-use-id');
+var designSystemChip = require('@mirohq/design-system-chip');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -60,6 +60,13 @@ const StyledBaseInput = designSystemStitches.styled(designSystemBaseInput.BaseIn
   },
   variants: {
     size: {
+      medium: {
+        minHeight: "$8",
+        height: "auto",
+        padding: "5px $100",
+        paddingRight: "$500",
+        fontSize: "$175"
+      },
       large: {
         minHeight: "$10",
         height: "auto",
@@ -79,6 +86,10 @@ const StyledBaseInput = designSystemStitches.styled(designSystemBaseInput.BaseIn
   }
 });
 
+function searchQueryMatch(displayedText, searchValue) {
+  return displayedText.toLowerCase().includes(searchValue.toLowerCase());
+}
+
 const ComboboxContext = React.createContext({});
 const ComboboxProvider = ({
   children,
@@ -92,13 +103,12 @@ const ComboboxProvider = ({
   onValueChange,
   searchValue: searchValueProp,
   onSearchValueChange,
-  autoFilter = true,
+  autoFilter,
   ...restProps
 }) => {
   const triggerRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const contentRef = React.useRef(null);
-  const [defaultValue, setDefaultValue] = React.useState(defaultValueProp);
   const [openState = false, setOpenState] = reactUseControllableState.useControllableState({
     prop: openProp,
     defaultProp: defaultOpen,
@@ -115,16 +125,23 @@ const ComboboxProvider = ({
     defaultProp: defaultValueProp,
     onChange: onValueChange
   });
-  const [filteredItems, setFilteredItems] = React.useState(/* @__PURE__ */ new Set());
-  const [searchValue, setSearchValue] = reactUseControllableState.useControllableState({
+  const [searchValue = "", setSearchValue] = reactUseControllableState.useControllableState({
     prop: searchValueProp,
     defaultProp: "",
     onChange: onSearchValueChange
   });
   const [size, setSize] = React.useState();
   const [placeholder, setPlaceholder] = React.useState();
-  const [itemValueTextMap, setItemValueTextMap] = React.useState(/* @__PURE__ */ new Map());
+  const [itemsMap, setItemsMap] = React.useState(/* @__PURE__ */ new Map());
   const { valid: formFieldValid } = designSystemBaseForm.useFormFieldContext();
+  const filteredItems = React.useMemo(() => {
+    if (searchValue.length > 0) {
+      return Array.from(itemsMap.values()).filter(
+        (item) => searchQueryMatch(item.displayedText, searchValue)
+      );
+    }
+    return [];
+  }, [itemsMap, searchValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ComboboxContext.Provider,
     {
@@ -135,18 +152,15 @@ const ComboboxProvider = ({
         setOpenState,
         value,
         setValue,
-        setDefaultValue,
-        defaultValue,
         triggerRef,
         inputRef,
         contentRef,
         autoFilter,
         searchValue,
         setSearchValue,
+        itemsMap,
+        setItemsMap,
         filteredItems,
-        setFilteredItems,
-        itemValueTextMap,
-        setItemValueTextMap,
         placeholder,
         setPlaceholder,
         size,
@@ -163,6 +177,9 @@ const StyledActionButton = designSystemStitches.styled(designSystemBaseInput.Bas
   right: "$100",
   variants: {
     size: {
+      medium: {
+        top: "3px"
+      },
       large: {
         top: "5px"
       },
@@ -233,7 +250,7 @@ const Trigger = React__default["default"].forwardRef(
     placeholder,
     openActionLabel,
     closeActionLabel,
-    clearable,
+    clearable = true,
     clearActionLabel,
     onChange,
     onFocus,
@@ -359,103 +376,6 @@ const StyledContent = designSystemStitches.styled(RadixPopover__namespace.Conten
   boxSizing: "border-box"
 });
 
-const StyledItem = designSystemStitches.styled(react.ComboboxItem, designSystemBaseSelect.itemStyles);
-
-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,
-      setItemValueTextMap,
-      triggerRef,
-      inputRef,
-      value: comboboxValue = []
-    } = useComboboxContext();
-    designSystemUseLayoutEffect.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__ */ jsxRuntime.jsxs(
-      StyledItem,
-      {
-        ...utils.mergeProps(restProps, restAriaDisabledProps),
-        focusable: true,
-        hideOnClick: false,
-        accessibleWhenDisabled: designSystemUtils.booleanify(ariaDisabled),
-        disabled: designSystemUtils.booleanify(ariaDisabled) || disabled,
-        ref: forwardRef,
-        value,
-        onClick: scrollIntoView,
-        "aria-selected": isSelected,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react.ComboboxItemCheck,
-            {
-              checked: isSelected,
-              render: ({ style, ...props }) => (
-                // AriakitComboboxItemCheck adds its owm inline styles which we want to omit here
-                /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseSelect.StyledItemCheck, { ...props })
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                designSystemIcons.IconCheckMark,
-                {
-                  size: "small",
-                  "data-testid": process.env.NODE_ENV === "test" ? "combobox-item-check" : void 0
-                }
-              )
-            }
-          ),
-          children
-        ]
-      }
-    );
-  }
-);
-
-const itemType = React__default["default"].createElement(Item).type;
-const getChildrenItemValues = (componentChildren) => {
-  const values = [];
-  const recurse = (children) => {
-    React__default["default"].Children.forEach(children, (child) => {
-      if (!React__default["default"].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__default["default"].useState();
   designSystemUseLayoutEffect.useLayoutEffect(() => {
@@ -493,23 +413,7 @@ const Content = React__default["default"].forwardRef(
     children,
     ...restProps
   }, forwardRef) => {
-    const {
-      triggerRef,
-      contentRef,
-      autoFilter,
-      setFilteredItems,
-      searchValue,
-      direction,
-      openState
-    } = useComboboxContext();
-    React.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);
@@ -555,84 +459,133 @@ const Content = React__default["default"].forwardRef(
   }
 );
 
+const StyledItem = designSystemStitches.styled(react.ComboboxItem, designSystemBaseSelect.itemStyles);
+
+const GroupContext = React.createContext({});
+const GroupProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  GroupContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
+  }
+);
+const useGroupContext = () => React.useContext(GroupContext);
+
+const Item = React__default["default"].forwardRef(
+  ({ disabled = false, value, textValue, children, ...restProps }, forwardRef) => {
+    const { "aria-disabled": ariaDisabled, ...restAriaDisabledProps } = designSystemUseAriaDisabled.useAriaDisabled(restProps, { allowArrows: true });
+    const {
+      searchValue,
+      autoFilter,
+      setItemsMap,
+      triggerRef,
+      inputRef,
+      value: comboboxValue = []
+    } = useComboboxContext();
+    const { groupId } = useGroupContext();
+    const displayedText = React.useMemo(() => {
+      if (textValue !== void 0) {
+        return textValue;
+      }
+      return typeof children === "string" ? children : "";
+    }, [textValue, children]);
+    designSystemUseLayoutEffect.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__ */ jsxRuntime.jsxs(
+      StyledItem,
+      {
+        ...utils.mergeProps(restProps, restAriaDisabledProps),
+        focusable: true,
+        hideOnClick: false,
+        accessibleWhenDisabled: designSystemUtils.booleanify(ariaDisabled),
+        disabled: designSystemUtils.booleanify(ariaDisabled) || disabled,
+        ref: forwardRef,
+        value,
+        onClick: scrollIntoView,
+        "aria-selected": isSelected,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.ComboboxItemCheck,
+            {
+              checked: isSelected,
+              render: ({ style, ...props }) => (
+                // AriakitComboboxItemCheck adds its owm inline styles which we want to omit here
+                /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseSelect.StyledItemCheck, { ...props })
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystemIcons.IconCheckMark,
+                {
+                  size: "small",
+                  "data-testid": process.env.NODE_ENV === "test" ? "combobox-item-check" : void 0
+                }
+              )
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+
 const Portal = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Portal, { ...props });
 
 const StyledGroup = designSystemStitches.styled(react.Group, {});
 
 const Group = React__default["default"].forwardRef(({ children, ...rest }, forwardRef) => {
-  const { autoFilter, filteredItems } = useComboboxContext();
-  const childValues = React.useMemo(
-    // don't perform calculation if auto filter is disabled
-    () => autoFilter !== false ? getChildrenItemValues(children) : [],
-    [children, autoFilter]
-  );
-  const hasVisibleChildren = React.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 = designSystemUseId.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__ */ jsxRuntime.jsx(StyledGroup, { ...rest, ref: forwardRef, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupProvider, { groupId: id, children: hasVisibleContent ? /* @__PURE__ */ jsxRuntime.jsx(StyledGroup, { ...rest, ref: forwardRef, children }) : getInvisibleContent(children) });
 });
 
 const StyledGroupLabel = designSystemStitches.styled(react.GroupLabel, designSystemBaseSelect.groupLabelStyles);
 
 const GroupLabel = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGroupLabel, { ...props, ref: forwardRef }));
 
-const StyledChip = designSystemStitches.styled(designSystemPrimitive.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 = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
-  color: "$icon-neutrals-inactive",
-  ...designSystemStyles.focus.css({
-    boxShadow: "$focus-small-outline"
-  })
-});
-const StyledChipContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  lineHeight: 1.3
-});
-
-const StyledLeftSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
-  order: -1,
-  marginRight: "$50"
-});
-
-const LeftSlot = StyledLeftSlot;
-
-const Chip = React__default["default"].forwardRef(
-  ({ children, disabled = false, onRemove, removeAriaLabel, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(StyledChip, { ...restProps, ref: forwardRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(StyledChipContent, { children }),
-    !designSystemUtils.booleanify(disabled) && /* @__PURE__ */ jsxRuntime.jsx(StyledChipButton, { onClick: onRemove, "aria-label": removeAriaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.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 = !designSystemUtils.booleanify(ariaDisabled) && !designSystemUtils.booleanify(disabled) && !designSystemUtils.booleanify(readOnly);
   const onItemRemove = React.useCallback(
     (item) => {
       setValue((prevValue) => prevValue == null ? void 0 : prevValue.filter((value2) => value2 !== item));
@@ -641,26 +594,26 @@ const Value = ({ unselectAriaLabel }) => {
   );
   const getItemText = React.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__ */ jsxRuntime.jsx(
-        Chip,
+        designSystemChip.Chip,
         {
           onRemove: (e) => {
             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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.map(getItemText) });
 };
@@ -669,7 +622,7 @@ const StyledSeparator = designSystemStitches.styled(designSystemPrimitive.Primit
 
 const Separator = React__default["default"].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__ */ jsxRuntime.jsx(StyledSeparator, { ...props, ref: forwardRef, "aria-hidden": true });
@@ -689,11 +642,13 @@ const StyledNoResult = designSystemStitches.styled(designSystemPrimitive.Primiti
 });
 
 const NoResult = React__default["default"].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__ */ jsxRuntime.jsx(StyledNoResult, { ...props, ref: forwardRef });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledNoResult, { ...props, ref: forwardRef });
+  return null;
 });
 
 const Root = React__default["default"].forwardRef(
@@ -702,7 +657,6 @@ const Root = React__default["default"].forwardRef(
     const {
       openState,
       setOpenState,
-      defaultValue,
       value = [],
       setValue,
       required,
@@ -756,7 +710,6 @@ const Root = React__default["default"].forwardRef(
         {
           open: openState,
           setOpen: onOpenChange,
-          defaultSelectedValue: defaultValue,
           selectedValue: value,
           setSelectedValue: onSetSelectedValue,
           children: /* @__PURE__ */ jsxRuntime.jsxs(