@mirohq/design-system-combobox 1.6.2 → 1.7.0-filter-chip.2

package/dist/module.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { createContext, useContext, useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { Combobox as Combobox$1, useComboboxContext as useComboboxContext$1, ComboboxList, ComboboxItem, ComboboxItemCheck, Group as Group$1, GroupLabel as GroupLabel$1, CompositeItem as CompositeItem$1, useCompositeContext, ComboboxProvider as ComboboxProvider$1 } from '@ariakit/react';
+import { Combobox as Combobox$1, ComboboxList, useComboboxContext as useComboboxContext$1, ComboboxItem, ComboboxItemCheck, Group as Group$1, GroupLabel as GroupLabel$1, CompositeItem as CompositeItem$1, useCompositeContext, ComboboxProvider as ComboboxProvider$1 } from '@ariakit/react';
 import { useFormFieldContext } from '@mirohq/design-system-base-form';
 import { stringAttrValue, mergeRefs, booleanify } from '@mirohq/design-system-utils';
 import * as RadixPopover from '@radix-ui/react-popover';
@@ -370,6 +370,12 @@ const StyledContent = styled(RadixPopover.Content, {
   boxSizing: "border-box"
 });
 
+const List = ({ children }) => (
+  // Role must be set explicitly; Radix Content can overwrite Ariakit's default.
+  /* @__PURE__ */ jsx(ComboboxList, { role: "listbox", children: /* @__PURE__ */ jsx(StyledItemsContainer, { children }) })
+);
+List.displayName = "Combobox.List";
+
 const useDocumentFragment = () => {
   const [fragment, setFragment] = React.useState();
   useLayoutEffect(() => {
@@ -392,6 +398,11 @@ const isInsideRef = (element, ref) => {
   var _a, _b;
   return (_b = element != null && ((_a = ref.current) == null ? void 0 : _a.contains(element))) != null ? _b : false;
 };
+const isComboboxList = (child) => {
+  var _a;
+  return React.isValidElement(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "Combobox.List";
+};
+const hasComboboxList = (children) => React.Children.toArray(children).some(isComboboxList);
 const Content = React.forwardRef(
   ({
     side = "bottom",
@@ -414,7 +425,22 @@ const Content = React.forwardRef(
     if (!openState) {
       return getInvisibleContent(children);
     }
-    const content = /* @__PURE__ */ jsx(StyledItemsContainer, { children });
+    const listContent = hasComboboxList(children) ? children : /* @__PURE__ */ jsx(List, { children });
+    let content = listContent;
+    if (overflow === "auto") {
+      content = /* @__PURE__ */ jsxs(ScrollArea, { type: "always", dir: direction, children: [
+        /* @__PURE__ */ jsx(
+          ScrollArea.Viewport,
+          {
+            css: {
+              maxHeight: maxHeight !== void 0 ? "min(".concat(RADIX_CONTENT_AVAILABLE_HEIGHT, ", ").concat(typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight, ")") : RADIX_CONTENT_AVAILABLE_HEIGHT
+            },
+            children: listContent
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
+      ] });
+    }
     return /* @__PURE__ */ jsx(
       StyledContent,
       {
@@ -429,6 +455,7 @@ const Content = React.forwardRef(
         sticky,
         hideWhenDetached,
         onOpenAutoFocus: (event) => {
+          var _a;
           if (onOpenAutoFocus != null) {
             onOpenAutoFocus(event);
             return;
@@ -436,6 +463,13 @@ const Content = React.forwardRef(
           event == null ? void 0 : event.preventDefault();
           if (externalOpenedRef.current !== true) return;
           const baseElement = ariakitStore == null ? void 0 : ariakitStore.getState().baseElement;
+          if (!(baseElement instanceof HTMLInputElement)) {
+            const searchInput = (_a = contentRef.current) == null ? void 0 : _a.querySelector("input");
+            if (searchInput != null) {
+              searchInput.focus();
+              return;
+            }
+          }
           baseElement == null ? void 0 : baseElement.focus();
         },
         ref: mergeRefs([forwardRef, contentRef]),
@@ -447,18 +481,7 @@ const Content = React.forwardRef(
             event.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsx(ComboboxList, { role: "listbox", children: overflow === "auto" ? /* @__PURE__ */ jsxs(ScrollArea, { type: "always", dir: direction, children: [
-          /* @__PURE__ */ jsx(
-            ScrollArea.Viewport,
-            {
-              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, {}) })
-        ] }) : content })
+        children: content
       }
     );
   }
@@ -625,6 +648,7 @@ const Value = ({
       return /* @__PURE__ */ jsx(
         Chip,
         {
+          size: "small",
           disabled: isDisabled,
           onRemove: (e) => {
             onItemRemove(itemValue);
@@ -687,39 +711,71 @@ const StyledInputSearch = styled(InputSearch, {
   "&&": {
     border: "1px solid $border-neutrals",
     backgroundColor: "$background-control"
+  },
+  variants: {
+    // Lay selected chips (passed as children, typically `<Combobox.Value />`)
+    // out inside the field alongside the text input, matching the multiselect
+    // trigger. The leading magnifier is pulled ahead of the chips so the field
+    // still reads as a search.
+    inlineChips: {
+      true: {
+        "&&": {
+          flexWrap: "wrap",
+          height: "auto",
+          minHeight: "$10",
+          paddingBlock: "$50",
+          gap: "$50"
+        },
+        // The magnifier icon slot (the only direct child that wraps a bare svg)
+        // leads the field, before the chips.
+        "& > div:has(> svg)": {
+          order: -1
+        },
+        "& input": {
+          width: "auto",
+          flexGrow: 1,
+          flexBasis: "$8",
+          minWidth: "$8"
+        }
+      }
+    }
   }
 });
-const SearchInput = React.forwardRef((props, ref) => {
-  const { setSearchValue, contentRef } = useComboboxContext();
-  const handleSearchChange = useCallback(
-    (event) => {
+const SearchInput = React.forwardRef(
+  ({ children, onChange, onKeyDown, inlineChips = false, ...rest }, ref) => {
+    const { setSearchValue, contentRef } = useComboboxContext();
+    const handleSearchChange = useCallback(
+      (event) => {
+        setSearchValue(event.target.value);
+        onChange == null ? void 0 : onChange(event);
+      },
+      [onChange, setSearchValue]
+    );
+    const handleKeyDown = (event) => {
       var _a;
-      setSearchValue(event.target.value);
-      (_a = props.onChange) == null ? void 0 : _a.call(props, event);
-    },
-    [props, setSearchValue]
-  );
-  const handleKeyDown = (event) => {
-    var _a, _b;
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      const firstItem = (_a = contentRef.current) == null ? void 0 : _a.querySelector(
-        '[role="option"]:not([aria-disabled="true"])'
-      );
-      firstItem == null ? void 0 : firstItem.focus();
-    }
-    (_b = props.onKeyDown) == null ? void 0 : _b.call(props, event);
-  };
-  return /* @__PURE__ */ jsx(
-    StyledInputSearch,
-    {
-      ...props,
-      ref,
-      onKeyDown: handleKeyDown,
-      onChange: handleSearchChange
-    }
-  );
-});
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const firstItem = (_a = contentRef.current) == null ? void 0 : _a.querySelector(
+          '[role="option"]:not([aria-disabled="true"])'
+        );
+        firstItem == null ? void 0 : firstItem.focus();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    return /* @__PURE__ */ jsx(
+      StyledInputSearch,
+      {
+        ...rest,
+        ref,
+        inlineChips,
+        onKeyDown: handleKeyDown,
+        onChange: handleSearchChange,
+        children
+      }
+    );
+  }
+);
+SearchInput.displayName = "Combobox.SearchInput";
 
 const StyledCompositeItem = styled(CompositeItem$1, {
   ...itemStyles,
@@ -729,7 +785,7 @@ const StyledCompositeItem = styled(CompositeItem$1, {
 
 const CompositeItem = ({
   asChild = true,
-  role = "menuitem",
+  role,
   textValue,
   disabled = false,
   tabbable,
@@ -948,6 +1004,7 @@ Combobox.Portal = Portal;
 Combobox.Trigger = Trigger;
 Combobox.Input = Input;
 Combobox.Content = Content;
+Combobox.List = List;
 Combobox.Item = Item;
 Combobox.CompositeItem = CompositeItem;
 Combobox.Group = Group;