@mirohq/design-system-combobox 1.6.0 → 1.7.0-filter-chip.1

package/dist/main.js

@@ -390,6 +390,12 @@ const StyledContent = designSystemStitches.styled(RadixPopover__namespace.Conten
   boxSizing: "border-box"
 });
 
+const List = ({ children }) => (
+  // Role must be set explicitly; Radix Content can overwrite Ariakit's default.
+  /* @__PURE__ */ jsxRuntime.jsx(react.ComboboxList, { role: "listbox", children: /* @__PURE__ */ jsxRuntime.jsx(StyledItemsContainer, { children }) })
+);
+List.displayName = "Combobox.List";
+
 const useDocumentFragment = () => {
   const [fragment, setFragment] = React.useState();
   designSystemUseLayoutEffect.useLayoutEffect(() => {
@@ -412,6 +418,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",
@@ -434,7 +445,22 @@ const Content = React.forwardRef(
     if (!openState) {
       return getInvisibleContent(children);
     }
-    const content = /* @__PURE__ */ jsxRuntime.jsx(StyledItemsContainer, { children });
+    const listContent = hasComboboxList(children) ? children : /* @__PURE__ */ jsxRuntime.jsx(List, { children });
+    let content = listContent;
+    if (overflow === "auto") {
+      content = /* @__PURE__ */ jsxRuntime.jsxs(designSystemScrollArea.ScrollArea, { type: "always", dir: direction, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystemScrollArea.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__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Thumb, {}) })
+      ] });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       StyledContent,
       {
@@ -449,6 +475,7 @@ const Content = React.forwardRef(
         sticky,
         hideWhenDetached,
         onOpenAutoFocus: (event) => {
+          var _a;
           if (onOpenAutoFocus != null) {
             onOpenAutoFocus(event);
             return;
@@ -456,6 +483,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: designSystemUtils.mergeRefs([forwardRef, contentRef]),
@@ -467,18 +501,7 @@ const Content = React.forwardRef(
             event.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(react.ComboboxList, { role: "listbox", children: overflow === "auto" ? /* @__PURE__ */ jsxRuntime.jsxs(designSystemScrollArea.ScrollArea, { type: "always", dir: direction, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystemScrollArea.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__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsxRuntime.jsx(designSystemScrollArea.ScrollArea.Thumb, {}) })
-        ] }) : content })
+        children: content
       }
     );
   }
@@ -610,8 +633,7 @@ const GroupLabel = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRu
 
 const Value = ({
   unselectAriaLabel,
-  multiple = true,
-  items
+  multiple = true
 }) => {
   const {
     value = [],
@@ -637,9 +659,8 @@ const Value = ({
   );
   const getItemText = React.useCallback(
     (itemValue) => {
-      var _a, _b;
-      const displayedText = (_b = items == null ? void 0 : items.get(itemValue)) != null ? _b : (_a = itemsMap.get(itemValue)) == null ? void 0 : _a.displayedText;
-      if (displayedText === void 0 || displayedText === "") {
+      const itemData = itemsMap.get(itemValue);
+      if (itemData === void 0 || itemData.displayedText === "") {
         return null;
       }
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -651,21 +672,14 @@ const Value = ({
             e.stopPropagation();
           },
           removable: canRemoveItem,
-          removeAriaLabel: "".concat(unselectAriaLabel, " ").concat(displayedText),
+          removeAriaLabel: "".concat(unselectAriaLabel, " ").concat(itemData.displayedText),
           "data-testid": process.env.NODE_ENV === "test" ? "combobox-value-".concat(itemValue) : void 0,
-          children: displayedText
+          children: itemData.displayedText
         },
         itemValue
       );
     },
-    [
-      canRemoveItem,
-      isDisabled,
-      items,
-      itemsMap,
-      onItemRemove,
-      unselectAriaLabel
-    ]
+    [canRemoveItem, isDisabled, itemsMap, onItemRemove, unselectAriaLabel]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: multiple && Array.isArray(value) ? value.map(getItemText) : getItemText(value) });
 };
@@ -707,39 +721,71 @@ const StyledInputSearch = designSystemStitches.styled(designSystemInput.InputSea
   "&&": {
     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 = React.useCallback(
-    (event) => {
+const SearchInput = React.forwardRef(
+  ({ children, onChange, onKeyDown, inlineChips = false, ...rest }, ref) => {
+    const { setSearchValue, contentRef } = useComboboxContext();
+    const handleSearchChange = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      StyledInputSearch,
+      {
+        ...rest,
+        ref,
+        inlineChips,
+        onKeyDown: handleKeyDown,
+        onChange: handleSearchChange,
+        children
+      }
+    );
+  }
+);
+SearchInput.displayName = "Combobox.SearchInput";
 
 const StyledCompositeItem = designSystemStitches.styled(react.CompositeItem, {
   ...designSystemBaseSelect.itemStyles,
@@ -749,7 +795,7 @@ const StyledCompositeItem = designSystemStitches.styled(react.CompositeItem, {
 
 const CompositeItem = ({
   asChild = true,
-  role = "menuitem",
+  role,
   textValue,
   disabled = false,
   tabbable,
@@ -968,6 +1014,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;