@flanksource/clicky-ui 0.3.28 → 0.3.30

package/dist/components/ComboboxMenu.cjs

@@ -26,146 +26,164 @@ function ComboboxMenu({
   onSetMode,
   tristate
 }) {
+  const mobile = menuPos.strategy === "mobile";
+  const listbox = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: listId,
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": multiple || void 0,
+      style: {
+        position: mobile ? "absolute" : "fixed",
+        ...menuPos.top != null ? { top: menuPos.top } : { bottom: menuPos.bottom },
+        left: menuPos.left,
+        ...mobile ? { width: menuPos.width } : { minWidth: menuPos.width },
+        maxWidth: menuPos.maxWidth,
+        maxHeight: menuPos.maxHeight,
+        zIndex: mobile ? void 0 : floatingZ,
+        pointerEvents: mobile ? "auto" : void 0
+      },
+      className: utils.cn(
+        "overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
+        !mobile && "w-max"
+      ),
+      children: [
+        loading && filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "Loading…" }),
+        !loading && filtered.length === 0 && !customEntry && hasOptions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "No results" }),
+        filtered.map((option, index) => {
+          var _a;
+          const selected = isSelected(option.value);
+          const mode = tristate ? modes[option.value] : void 0;
+          const showHeader = option.group != null && option.group !== ((_a = filtered[index - 1]) == null ? void 0 : _a.group);
+          return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            showHeader && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "presentation",
+                className: "select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+                children: option.group
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: listId ? `${listId}-${index}` : void 0,
+                role: "option",
+                "aria-selected": tristate ? mode != null : selected,
+                "aria-disabled": option.disabled,
+                ...mode != null ? {
+                  "aria-label": `${option.label}, ${mode === "include" ? "included" : "excluded"}`
+                } : {},
+                ...option.title !== void 0 ? { title: option.title } : {},
+                ...tristate ? { "data-filter-option": option.value } : {},
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                  if (!tristate && !option.disabled) onSelect(option);
+                },
+                ...tristate ? {
+                  onClick: () => {
+                    if (!option.disabled) onSelect(option);
+                  }
+                } : {},
+                onMouseEnter: () => onHighlight(index),
+                className: utils.cn(
+                  "flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm",
+                  option.description ? "items-start" : "items-center",
+                  index === highlighted && "bg-accent",
+                  selected && !tristate && "font-medium",
+                  option.disabled && "cursor-not-allowed opacity-50"
+                ),
+                children: tristate ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    FilterPill.FilterPill,
+                    {
+                      mode: mode ?? "neutral",
+                      togglePosition: "right",
+                      interactive: false,
+                      label: option.label,
+                      onModeChange: (next) => onSetMode(option.value, next),
+                      className: "w-full justify-between"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionDescription, { description: option.description })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Icon.Icon,
+                    {
+                      icon: UiCheck.UiCheck,
+                      className: utils.cn(
+                        "shrink-0 text-xs",
+                        option.description && "mt-1",
+                        selected ? "opacity-100" : "opacity-0"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Icon.LabelIcon,
+                    {
+                      icon: option.icon,
+                      className: utils.cn(
+                        "text-sm text-muted-foreground",
+                        option.description && "mt-1"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionText, { option }),
+                  option.trailing != null && // Capped and truncating rather than `shrink-0`: in a menu
+                  // clamped by the viewport edge the label is what identifies
+                  // the option, so the preview yields first.
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto min-w-0 max-w-[55%] truncate pl-2 text-right text-xs text-muted-foreground", children: option.trailing })
+                ] })
+              }
+            )
+          ] }, option.value);
+        }),
+        customEntry && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: listId ? `${listId}-${filtered.length}` : void 0,
+            role: "option",
+            "aria-selected": false,
+            "data-filter-add-custom": customEntry.value,
+            title: customEntry.title,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => onSelect(customEntry),
+            onMouseEnter: () => onHighlight(filtered.length),
+            className: utils.cn(
+              "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary",
+              highlighted === filtered.length && "bg-accent"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.LabelIcon,
+                {
+                  icon: customEntry.icon,
+                  className: "text-sm text-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: customEntry.label })
+            ]
+          }
+        ),
+        footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "select-none px-2 py-1.5 text-[11px] text-muted-foreground", children: footer })
+      ]
+    }
+  );
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    mobile ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        id: listId,
-        ref: listRef,
-        role: "listbox",
-        "aria-multiselectable": multiple || void 0,
+        "data-slot": "combobox-viewport-layer",
         style: {
           position: "fixed",
-          ...menuPos.top != null ? { top: menuPos.top } : { bottom: menuPos.bottom },
-          left: menuPos.left,
-          minWidth: menuPos.width,
-          maxWidth: menuPos.maxWidth,
-          maxHeight: menuPos.maxHeight,
-          zIndex: floatingZ
+          inset: 0,
+          zIndex: floatingZ,
+          pointerEvents: "none"
         },
-        className: "w-max overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5",
-        children: [
-          loading && filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "Loading…" }),
-          !loading && filtered.length === 0 && !customEntry && hasOptions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "No results" }),
-          filtered.map((option, index) => {
-            var _a;
-            const selected = isSelected(option.value);
-            const mode = tristate ? modes[option.value] : void 0;
-            const showHeader = option.group != null && option.group !== ((_a = filtered[index - 1]) == null ? void 0 : _a.group);
-            return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-              showHeader && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  role: "presentation",
-                  className: "select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
-                  children: option.group
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  id: listId ? `${listId}-${index}` : void 0,
-                  role: "option",
-                  "aria-selected": tristate ? mode != null : selected,
-                  "aria-disabled": option.disabled,
-                  ...mode != null ? {
-                    "aria-label": `${option.label}, ${mode === "include" ? "included" : "excluded"}`
-                  } : {},
-                  ...option.title !== void 0 ? { title: option.title } : {},
-                  ...tristate ? { "data-filter-option": option.value } : {},
-                  onMouseDown: (event) => {
-                    event.preventDefault();
-                    if (!tristate && !option.disabled) onSelect(option);
-                  },
-                  ...tristate ? {
-                    onClick: () => {
-                      if (!option.disabled) onSelect(option);
-                    }
-                  } : {},
-                  onMouseEnter: () => onHighlight(index),
-                  className: utils.cn(
-                    "flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm",
-                    option.description ? "items-start" : "items-center",
-                    index === highlighted && "bg-accent",
-                    selected && !tristate && "font-medium",
-                    option.disabled && "cursor-not-allowed opacity-50"
-                  ),
-                  children: tristate ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      FilterPill.FilterPill,
-                      {
-                        mode: mode ?? "neutral",
-                        togglePosition: "right",
-                        interactive: false,
-                        label: option.label,
-                        onModeChange: (next) => onSetMode(option.value, next),
-                        className: "w-full justify-between"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionDescription, { description: option.description })
-                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Icon.Icon,
-                      {
-                        icon: UiCheck.UiCheck,
-                        className: utils.cn(
-                          "shrink-0 text-xs",
-                          option.description && "mt-1",
-                          selected ? "opacity-100" : "opacity-0"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Icon.LabelIcon,
-                      {
-                        icon: option.icon,
-                        className: utils.cn(
-                          "text-sm text-muted-foreground",
-                          option.description && "mt-1"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionText, { option }),
-                    option.trailing != null && // Capped and truncating rather than `shrink-0`: in a menu
-                    // clamped by the viewport edge the label is what identifies
-                    // the option, so the preview yields first.
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto min-w-0 max-w-[55%] truncate pl-2 text-right text-xs text-muted-foreground", children: option.trailing })
-                  ] })
-                }
-              )
-            ] }, option.value);
-          }),
-          customEntry && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              id: listId ? `${listId}-${filtered.length}` : void 0,
-              role: "option",
-              "aria-selected": false,
-              "data-filter-add-custom": customEntry.value,
-              title: customEntry.title,
-              onMouseDown: (event) => event.preventDefault(),
-              onClick: () => onSelect(customEntry),
-              onMouseEnter: () => onHighlight(filtered.length),
-              className: utils.cn(
-                "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary",
-                highlighted === filtered.length && "bg-accent"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Icon.LabelIcon,
-                  {
-                    icon: customEntry.icon,
-                    className: "text-sm text-muted-foreground"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: customEntry.label })
-              ]
-            }
-          ),
-          footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "select-none px-2 py-1.5 text-[11px] text-muted-foreground", children: footer })
-        ]
+        children: listbox
       }
-    ),
+    ) : listbox,
     document.body
   );
 }
@@ -175,7 +193,9 @@ function ComboboxOptionText({ option }) {
     /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionDescription, { description: option.description })
   ] });
 }
-function ComboboxOptionDescription({ description }) {
+function ComboboxOptionDescription({
+  description
+}) {
   return description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 block whitespace-pre-line text-xs font-normal leading-4 text-muted-foreground", children: description }) : null;
 }
 exports.ComboboxMenu = ComboboxMenu;

package/dist/components/ComboboxMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenu.cjs","sources":["../../src/components/ComboboxMenu.tsx"],"sourcesContent":["import { Fragment, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type {\n  ComboboxOption,\n  ComboboxTriStateMode,\n} from \"./combobox-types\";\nimport type { ComboboxMenuPosition } from \"./combobox-utils\";\n\nexport function ComboboxMenu({\n  customEntry,\n  filtered,\n  floatingZ,\n  footer,\n  hasOptions,\n  highlighted,\n  isSelected,\n  listId,\n  listRef,\n  loading,\n  menuPos,\n  modes,\n  multiple,\n  onHighlight,\n  onSelect,\n  onSetMode,\n  tristate,\n}: {\n  customEntry: ComboboxOption | null;\n  filtered: ComboboxOption[];\n  floatingZ: number;\n  footer: ReactNode;\n  /** Whether the control has an option set at all (before filtering). */\n  hasOptions: boolean;\n  highlighted: number;\n  isSelected: (value: string) => boolean;\n  listId: string | undefined;\n  listRef: RefObject<HTMLDivElement>;\n  loading: boolean | undefined;\n  menuPos: ComboboxMenuPosition;\n  modes: Record<string, ComboboxTriStateMode>;\n  multiple: boolean;\n  onHighlight: (index: number) => void;\n  onSelect: (option: ComboboxOption) => void;\n  onSetMode: (value: string, mode: string) => void;\n  tristate: boolean;\n}) {\n  return createPortal(\n    <div\n      id={listId}\n      ref={listRef}\n      role=\"listbox\"\n      aria-multiselectable={multiple || undefined}\n      style={{\n        position: \"fixed\",\n        ...(menuPos.top != null\n          ? { top: menuPos.top }\n          : { bottom: menuPos.bottom }),\n        left: menuPos.left,\n        minWidth: menuPos.width,\n        maxWidth: menuPos.maxWidth,\n        maxHeight: menuPos.maxHeight,\n        zIndex: floatingZ,\n      }}\n      className=\"w-max overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\"\n    >\n      {loading && filtered.length === 0 && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          Loading…\n        </div>\n      )}\n      {/* \"No results\" answers \"did my query match anything?\" — a control with\n          no option set at all (a free tag list) was never asked the question, so\n          it says nothing rather than reporting an empty search. */}\n      {!loading && filtered.length === 0 && !customEntry && hasOptions && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          No results\n        </div>\n      )}\n      {filtered.map((option, index) => {\n        const selected = isSelected(option.value);\n        const mode = tristate ? modes[option.value] : undefined;\n        const showHeader =\n          option.group != null &&\n          option.group !== filtered[index - 1]?.group;\n        return (\n          <Fragment key={option.value}>\n            {showHeader && (\n              <div\n                role=\"presentation\"\n                className=\"select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\"\n              >\n                {option.group}\n              </div>\n            )}\n            <div\n              id={listId ? `${listId}-${index}` : undefined}\n              role=\"option\"\n              aria-selected={tristate ? mode != null : selected}\n              aria-disabled={option.disabled}\n              {...(mode != null\n                ? {\n                    \"aria-label\": `${option.label}, ${\n                      mode === \"include\" ? \"included\" : \"excluded\"\n                    }`,\n                  }\n                : {})}\n              {...(option.title !== undefined ? { title: option.title } : {})}\n              {...(tristate\n                ? { \"data-filter-option\": option.value }\n                : {})}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                if (!tristate && !option.disabled) onSelect(option);\n              }}\n              {...(tristate\n                ? {\n                    onClick: () => {\n                      if (!option.disabled) onSelect(option);\n                    },\n                  }\n                : {})}\n              onMouseEnter={() => onHighlight(index)}\n              className={cn(\n                \"flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                option.description ? \"items-start\" : \"items-center\",\n                index === highlighted && \"bg-accent\",\n                selected && !tristate && \"font-medium\",\n                option.disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              {tristate ? (\n                <div className=\"min-w-0 flex-1\">\n                  <FilterPill\n                    mode={mode ?? \"neutral\"}\n                    togglePosition=\"right\"\n                    interactive={false}\n                    label={option.label}\n                    onModeChange={(next) => onSetMode(option.value, next)}\n                    className=\"w-full justify-between\"\n                  />\n                  <ComboboxOptionDescription description={option.description} />\n                </div>\n              ) : (\n                <>\n                  <Icon\n                    icon={UiCheck}\n                    className={cn(\n                      \"shrink-0 text-xs\",\n                      option.description && \"mt-1\",\n                      selected ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  />\n                  <LabelIcon\n                    icon={option.icon}\n                    className={cn(\n                      \"text-sm text-muted-foreground\",\n                      option.description && \"mt-1\",\n                    )}\n                  />\n                  <ComboboxOptionText option={option} />\n                  {option.trailing != null && (\n                    // Capped and truncating rather than `shrink-0`: in a menu\n                    // clamped by the viewport edge the label is what identifies\n                    // the option, so the preview yields first.\n                    <span className=\"ml-auto min-w-0 max-w-[55%] truncate pl-2 text-right text-xs text-muted-foreground\">\n                      {option.trailing}\n                    </span>\n                  )}\n                </>\n              )}\n            </div>\n          </Fragment>\n        );\n      })}\n      {customEntry && (\n        <div\n          id={listId ? `${listId}-${filtered.length}` : undefined}\n          role=\"option\"\n          aria-selected={false}\n          data-filter-add-custom={customEntry.value}\n          title={customEntry.title}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => onSelect(customEntry)}\n          onMouseEnter={() => onHighlight(filtered.length)}\n          className={cn(\n            \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary\",\n            highlighted === filtered.length && \"bg-accent\",\n          )}\n        >\n          <LabelIcon\n            icon={customEntry.icon}\n            className=\"text-sm text-muted-foreground\"\n          />\n          <span className=\"min-w-0 truncate\">{customEntry.label}</span>\n        </div>\n      )}\n      {footer != null && (\n        <div className=\"select-none px-2 py-1.5 text-[11px] text-muted-foreground\">\n          {footer}\n        </div>\n      )}\n    </div>,\n    document.body,\n  );\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className=\"min-w-0 flex-1\">\n      <span className=\"block truncate\">{option.label}</span>\n      <ComboboxOptionDescription description={option.description} />\n    </span>\n  );\n}\n\nfunction ComboboxOptionDescription({ description }: { description: string | undefined }) {\n  return description ? (\n    <span className=\"mt-0.5 block whitespace-pre-line text-xs font-normal leading-4 text-muted-foreground\">\n      {description}\n    </span>\n  ) : null;\n}\n"],"names":["createPortal","jsxs","jsx","Fragment","cn","FilterPill","Icon","UiCheck","LabelIcon"],"mappings":"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"}
+{"version":3,"file":"ComboboxMenu.cjs","sources":["../../src/components/ComboboxMenu.tsx"],"sourcesContent":["import { Fragment, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { Icon, LabelIcon } from \"../data/Icon\";\nimport { UiCheck } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport type { ComboboxOption, ComboboxTriStateMode } from \"./combobox-types\";\nimport type { ComboboxMenuPosition } from \"../lib/combobox\";\n\nexport function ComboboxMenu({\n  customEntry,\n  filtered,\n  floatingZ,\n  footer,\n  hasOptions,\n  highlighted,\n  isSelected,\n  listId,\n  listRef,\n  loading,\n  menuPos,\n  modes,\n  multiple,\n  onHighlight,\n  onSelect,\n  onSetMode,\n  tristate,\n}: {\n  customEntry: ComboboxOption | null;\n  filtered: ComboboxOption[];\n  floatingZ: number;\n  footer: ReactNode;\n  /** Whether the control has an option set at all (before filtering). */\n  hasOptions: boolean;\n  highlighted: number;\n  isSelected: (value: string) => boolean;\n  listId: string | undefined;\n  listRef: RefObject<HTMLDivElement | null>;\n  loading: boolean | undefined;\n  menuPos: ComboboxMenuPosition;\n  modes: Record<string, ComboboxTriStateMode>;\n  multiple: boolean;\n  onHighlight: (index: number) => void;\n  onSelect: (option: ComboboxOption) => void;\n  onSetMode: (value: string, mode: string) => void;\n  tristate: boolean;\n}) {\n  const mobile = menuPos.strategy === \"mobile\";\n  const listbox = (\n    <div\n      id={listId}\n      ref={listRef}\n      role=\"listbox\"\n      aria-multiselectable={multiple || undefined}\n      style={{\n        position: mobile ? \"absolute\" : \"fixed\",\n        ...(menuPos.top != null\n          ? { top: menuPos.top }\n          : { bottom: menuPos.bottom }),\n        left: menuPos.left,\n        ...(mobile ? { width: menuPos.width } : { minWidth: menuPos.width }),\n        maxWidth: menuPos.maxWidth,\n        maxHeight: menuPos.maxHeight,\n        zIndex: mobile ? undefined : floatingZ,\n        pointerEvents: mobile ? \"auto\" : undefined,\n      }}\n      className={cn(\n        \"overflow-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg shadow-black/5\",\n        !mobile && \"w-max\",\n      )}\n    >\n      {loading && filtered.length === 0 && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          Loading…\n        </div>\n      )}\n      {/* \"No results\" answers \"did my query match anything?\" — a control with\n          no option set at all (a free tag list) was never asked the question, so\n          it says nothing rather than reporting an empty search. */}\n      {!loading && filtered.length === 0 && !customEntry && hasOptions && (\n        <div className=\"px-2 py-4 text-center text-sm text-muted-foreground\">\n          No results\n        </div>\n      )}\n      {filtered.map((option, index) => {\n        const selected = isSelected(option.value);\n        const mode = tristate ? modes[option.value] : undefined;\n        const showHeader =\n          option.group != null && option.group !== filtered[index - 1]?.group;\n        return (\n          <Fragment key={option.value}>\n            {showHeader && (\n              <div\n                role=\"presentation\"\n                className=\"select-none px-2 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground\"\n              >\n                {option.group}\n              </div>\n            )}\n            <div\n              id={listId ? `${listId}-${index}` : undefined}\n              role=\"option\"\n              aria-selected={tristate ? mode != null : selected}\n              aria-disabled={option.disabled}\n              {...(mode != null\n                ? {\n                    \"aria-label\": `${option.label}, ${\n                      mode === \"include\" ? \"included\" : \"excluded\"\n                    }`,\n                  }\n                : {})}\n              {...(option.title !== undefined ? { title: option.title } : {})}\n              {...(tristate ? { \"data-filter-option\": option.value } : {})}\n              onMouseDown={(event) => {\n                event.preventDefault();\n                if (!tristate && !option.disabled) onSelect(option);\n              }}\n              {...(tristate\n                ? {\n                    onClick: () => {\n                      if (!option.disabled) onSelect(option);\n                    },\n                  }\n                : {})}\n              onMouseEnter={() => onHighlight(index)}\n              className={cn(\n                \"flex cursor-pointer gap-2 rounded-sm px-2 py-1.5 text-sm\",\n                option.description ? \"items-start\" : \"items-center\",\n                index === highlighted && \"bg-accent\",\n                selected && !tristate && \"font-medium\",\n                option.disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              {tristate ? (\n                <div className=\"min-w-0 flex-1\">\n                  <FilterPill\n                    mode={mode ?? \"neutral\"}\n                    togglePosition=\"right\"\n                    interactive={false}\n                    label={option.label}\n                    onModeChange={(next) => onSetMode(option.value, next)}\n                    className=\"w-full justify-between\"\n                  />\n                  <ComboboxOptionDescription description={option.description} />\n                </div>\n              ) : (\n                <>\n                  <Icon\n                    icon={UiCheck}\n                    className={cn(\n                      \"shrink-0 text-xs\",\n                      option.description && \"mt-1\",\n                      selected ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                  />\n                  <LabelIcon\n                    icon={option.icon}\n                    className={cn(\n                      \"text-sm text-muted-foreground\",\n                      option.description && \"mt-1\",\n                    )}\n                  />\n                  <ComboboxOptionText option={option} />\n                  {option.trailing != null && (\n                    // Capped and truncating rather than `shrink-0`: in a menu\n                    // clamped by the viewport edge the label is what identifies\n                    // the option, so the preview yields first.\n                    <span className=\"ml-auto min-w-0 max-w-[55%] truncate pl-2 text-right text-xs text-muted-foreground\">\n                      {option.trailing}\n                    </span>\n                  )}\n                </>\n              )}\n            </div>\n          </Fragment>\n        );\n      })}\n      {customEntry && (\n        <div\n          id={listId ? `${listId}-${filtered.length}` : undefined}\n          role=\"option\"\n          aria-selected={false}\n          data-filter-add-custom={customEntry.value}\n          title={customEntry.title}\n          onMouseDown={(event) => event.preventDefault()}\n          onClick={() => onSelect(customEntry)}\n          onMouseEnter={() => onHighlight(filtered.length)}\n          className={cn(\n            \"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-primary\",\n            highlighted === filtered.length && \"bg-accent\",\n          )}\n        >\n          <LabelIcon\n            icon={customEntry.icon}\n            className=\"text-sm text-muted-foreground\"\n          />\n          <span className=\"min-w-0 truncate\">{customEntry.label}</span>\n        </div>\n      )}\n      {footer != null && (\n        <div className=\"select-none px-2 py-1.5 text-[11px] text-muted-foreground\">\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n  return createPortal(\n    mobile ? (\n      <div\n        data-slot=\"combobox-viewport-layer\"\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: floatingZ,\n          pointerEvents: \"none\",\n        }}\n      >\n        {listbox}\n      </div>\n    ) : (\n      listbox\n    ),\n    document.body,\n  );\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className=\"min-w-0 flex-1\">\n      <span className=\"block truncate\">{option.label}</span>\n      <ComboboxOptionDescription description={option.description} />\n    </span>\n  );\n}\n\nfunction ComboboxOptionDescription({\n  description,\n}: {\n  description: string | undefined;\n}) {\n  return description ? (\n    <span className=\"mt-0.5 block whitespace-pre-line text-xs font-normal leading-4 text-muted-foreground\">\n      {description}\n    </span>\n  ) : null;\n}\n"],"names":["jsxs","cn","jsx","Fragment","FilterPill","Icon","UiCheck","LabelIcon","createPortal"],"mappings":"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"}

package/dist/components/ComboboxMenu.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject } from '../../../../node_modules/@types/react/index.d.ts';
 import { ComboboxOption, ComboboxTriStateMode } from './combobox-types';
-import { ComboboxMenuPosition } from './combobox-utils';
+import { ComboboxMenuPosition } from '../lib/combobox';
 export declare function ComboboxMenu({ customEntry, filtered, floatingZ, footer, hasOptions, highlighted, isSelected, listId, listRef, loading, menuPos, modes, multiple, onHighlight, onSelect, onSetMode, tristate, }: {
     customEntry: ComboboxOption | null;
     filtered: ComboboxOption[];
@@ -11,7 +11,7 @@ export declare function ComboboxMenu({ customEntry, filtered, floatingZ, footer,
     highlighted: number;
     isSelected: (value: string) => boolean;
     listId: string | undefined;
-    listRef: RefObject<HTMLDivElement>;
+    listRef: RefObject<HTMLDivElement | null>;
     loading: boolean | undefined;
     menuPos: ComboboxMenuPosition;
     modes: Record<string, ComboboxTriStateMode>;
@@ -20,5 +20,5 @@ export declare function ComboboxMenu({ customEntry, filtered, floatingZ, footer,
     onSelect: (option: ComboboxOption) => void;
     onSetMode: (value: string, mode: string) => void;
     tristate: boolean;
-}): import('react').ReactPortal;
+}): import('../../../../node_modules/@types/react/index.d.ts').ReactPortal;
 //# sourceMappingURL=ComboboxMenu.d.ts.map

package/dist/components/ComboboxMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EACV,cAAc,EACd,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACnC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB,+BA+JA"}
+{"version":3,"file":"ComboboxMenu.d.ts","sourceRoot":"","sources":["../../src/components/ComboboxMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,WAAW,EAAE,cAAc,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,OAAO,CAAC;CACnB,+BAkLA"}