@oneplatformdev/ui 0.1.99-beta.72 → 0.1.99-beta.74

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.1.99-beta.74 (2026-01-16)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.74
+- Updated @oneplatformdev/hooks to 0.1.99-beta.74
+- Updated @oneplatformdev/tokens to 0.1.99-beta.74
+
+## 0.1.99-beta.73 (2026-01-16)
+
+### 🧱 Updated Dependencies
+
+- Updated @oneplatformdev/utils to 0.1.99-beta.73
+- Updated @oneplatformdev/hooks to 0.1.99-beta.73
+- Updated @oneplatformdev/tokens to 0.1.99-beta.73
+
 ## 0.1.99-beta.72 (2026-01-16)
 
 ### 🧱 Updated Dependencies

package/Combobox/Combobox.stories.js

@@ -1,18 +1,18 @@
-import { jsx as t, jsxs as u } from "react/jsx-runtime";
-import { useState as g, useMemo as x } from "react";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { useState as g, useMemo as v } from "react";
 import { Combobox as f } from "./Combobox.js";
-const h = (e) => new Promise((n) => setTimeout(n, e)), v = (e = []) => {
-  const n = [], a = (l) => {
+const h = (e) => new Promise((n) => setTimeout(n, e)), x = (e = []) => {
+  const n = [], o = (l) => {
     if (l?.length)
       for (const s of l)
-        n.push(s), s.items?.length && a(s.items);
+        n.push(s), s.items?.length && o(s.items);
   };
-  return a(e), n;
-}, d = (e, n = 350) => async (a) => {
+  return o(e), n;
+}, u = (e, n = 350) => async (o) => {
   await h(n);
-  const l = (a ?? "").trim().toLowerCase();
+  const l = (o ?? "").trim().toLowerCase();
   if (!l) return e;
-  const s = v(e), b = new Set(
+  const s = x(e), b = new Set(
     s.filter((i) => String(i.label).toLowerCase().includes(l)).map((i) => String(i.value))
   ), m = (i) => i.map((c) => {
     const p = c.items?.length ? m(c.items) : void 0;
@@ -47,17 +47,17 @@ const h = (e) => new Promise((n) => setTimeout(n, e)), v = (e = []) => {
     ]
   }
 ];
-function o({ initialValue: e = "", ...n }) {
-  const [a, l] = g(e), s = x(
+function a({ initialValue: e = "", ...n }) {
+  const [o, l] = g(e), s = v(
     () => n.fetchOptions,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  return /* @__PURE__ */ u("div", { className: "max-w-sm", children: [
-    /* @__PURE__ */ t(f, { ...n, value: a, onChange: l, fetchOptions: s }),
-    /* @__PURE__ */ u("div", { className: "mt-3 text-xs text-muted-foreground", children: [
+  return /* @__PURE__ */ d("div", { className: "max-w-sm", children: [
+    /* @__PURE__ */ t(f, { ...n, value: o, onChange: l, fetchOptions: s }),
+    /* @__PURE__ */ d("div", { className: "mt-3 text-xs text-muted-foreground", children: [
       "value: ",
-      /* @__PURE__ */ t("span", { className: "font-mono", children: String(a || "") })
+      /* @__PURE__ */ t("span", { className: "font-mono", children: String(o || "") })
     ] })
   ] });
 }
@@ -72,7 +72,7 @@ const w = {
     searchLabel: "Type to search...",
     emptyLabel: "No options",
     disabled: !1,
-    fetchOptions: d(r, 250)
+    fetchOptions: u(r, 250)
   },
   argTypes: {
     fetchOptions: { control: !1 },
@@ -88,24 +88,24 @@ const w = {
     (e) => /* @__PURE__ */ t("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ t(e, {}) })
   ]
 }, A = {
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
 }, L = {
-  render: (e) => /* @__PURE__ */ t(o, { ...e, initialValue: "pl" })
-}, k = {
+  render: (e) => /* @__PURE__ */ t(a, { ...e, initialValue: "pl" })
+}, M = {
   args: { disabled: !0 },
-  render: (e) => /* @__PURE__ */ t(o, { ...e, initialValue: "de" })
-}, F = {
+  render: (e) => /* @__PURE__ */ t(a, { ...e, initialValue: "de" })
+}, k = {
   args: {
     options: r,
     fetchOptions: async () => r
   },
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
-}, M = {
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
+}, F = {
   args: {
-    fetchOptions: d(r, 1200)
+    fetchOptions: u(r, 1200)
   },
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
-}, P = {
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
+}, I = {
   args: {
     emptyLabel: "Nothing found",
     emptyAction: (e) => {
@@ -117,7 +117,7 @@ const w = {
           className: "inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm",
           disabled: !n,
           onClick: () => {
-            const a = e.search.trim(), l = { value: a, label: `Create "${a}"` };
+            const o = e.search.trim(), l = { value: o, label: `Create "${o}"` };
             e.setOptions([l]), e.setLoading(!1);
           },
           children: "Create option"
@@ -125,11 +125,11 @@ const w = {
       );
     }
   },
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
-}, T = {
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
+}, P = {
   args: {
-    commandInputAction: (e) => /* @__PURE__ */ u("div", { className: "px-3 py-2 flex items-center justify-between text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ u("span", { children: [
+    commandInputAction: (e) => /* @__PURE__ */ d("div", { className: "px-3 py-2 flex items-center justify-between text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ d("span", { children: [
         "results: ",
         /* @__PURE__ */ t("span", { className: "font-mono", children: e.options.length })
       ] }),
@@ -146,8 +146,8 @@ const w = {
       )
     ] })
   },
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
-}, I = {
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
+}, T = {
   args: {
     listHeadAction: (e) => /* @__PURE__ */ t(
       "button",
@@ -161,7 +161,7 @@ const w = {
       }
     )
   },
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
 }, W = {
   args: {
     listFooterAction: (e) => /* @__PURE__ */ t(
@@ -176,32 +176,36 @@ const w = {
       }
     )
   },
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
 }, E = {
   args: {
-    fetchOptions: d(y, 250)
+    fetchOptions: u(y, 250),
+    defaultNodeDisabled: !1,
+    defaultNodeMatched: !1,
+    defaultNodeMuted: !0,
+    defaultNodeInteractive: !1
   },
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
 }, V = {
   args: {
-    fetchOptions: d(r, 250),
+    fetchOptions: u(r, 250),
     onMount: async (e) => {
       await h(900), e.setOptions(r), e.setLoading(!1);
     }
   },
-  render: (e) => /* @__PURE__ */ t(o, { ...e })
+  render: (e) => /* @__PURE__ */ t(a, { ...e })
 };
 export {
   A as Default,
-  k as Disabled,
-  P as EmptyStateWithAction,
+  M as Disabled,
+  I as EmptyStateWithAction,
   E as NestedOptions,
   V as OnMountPrefetch,
-  M as SlowFetchLoading,
-  T as WithCommandInputAction,
+  F as SlowFetchLoading,
+  P as WithCommandInputAction,
   W as WithListFooterAction,
-  I as WithListHeadAction,
-  F as WithStaticOptionsProp,
+  T as WithListHeadAction,
+  k as WithStaticOptionsProp,
   L as WithValueSelected,
   w as default
 };

package/Combobox/Combobox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Combobox } from './Combobox';\nimport type {\n  ComboboxCallbackStateParams,\n  ComboboxOption,\n  ComboboxProps,\n} from './Combobox.types';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\n  const res: ComboboxOption[] = [];\n  const walk = (list?: ComboboxOption[]) => {\n    if (!list?.length) return;\n    for (const n of list) {\n      res.push(n);\n      if (n.items?.length) walk(n.items);\n    }\n  };\n  walk(nodes);\n  return res;\n};\n\nconst createFetchOptions =\n  (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\n    async (search?: string) => {\n      await sleep(delayMs);\n\n      const q = (search ?? '').trim().toLowerCase();\n      if (!q) return all;\n\n      // simple \"contains\" search across flattened options; then return top-level filtered\n      // (enough for Storybook demos; your real API can do better)\n      const allFlat = flatten(all);\n      const matchedValues = new Set(\n        allFlat\n          .filter((o) => String(o.label).toLowerCase().includes(q))\n          .map((o) => String(o.value)),\n      );\n\n      const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\n        return list\n          .map((n) => {\n            const items = n.items?.length ? filterTree(n.items) : undefined;\n            const selfMatch =\n              matchedValues.has(String(n.value)) ||\n              String(n.label).toLowerCase().includes(q);\n\n            if (!selfMatch && !items?.length) return null;\n            return { ...n, items };\n          })\n          .filter(Boolean) as ComboboxOption[];\n      };\n\n      return filterTree(all);\n    };\n\nconst BASE_OPTIONS: ComboboxOption[] = [\n  { value: 'ua', label: 'Ukraine' },\n  { value: 'pl', label: 'Poland' },\n  { value: 'de', label: 'Germany' },\n  { value: 'fr', label: 'France' },\n  { value: 'es', label: 'Spain' },\n  { value: 'it', label: 'Italy' },\n];\n\nconst NESTED_OPTIONS: ComboboxOption[] = [\n  {\n    value: 'europe',\n    label: 'Europe',\n    items: [\n      { value: 'ua', label: 'Ukraine' },\n      { value: 'pl', label: 'Poland' },\n      { value: 'de', label: 'Germany' },\n      { value: 'fr', label: 'France' },\n    ],\n  },\n  {\n    value: 'north-america',\n    label: 'North America',\n    items: [\n      { value: 'us', label: 'United States' },\n      { value: 'ca', label: 'Canada' },\n      { value: 'mx', label: 'Mexico' },\n    ],\n  },\n];\n\ntype ControlledProps = Omit<ComboboxProps, 'value' | 'onChange'> & {\n  initialValue?: ComboboxProps['value'];\n};\n\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps) {\n  const [value, setValue] = useState<ComboboxProps['value']>(initialValue);\n\n  // keep stable reference if someone passes inline fetchOptions\n  const fetchOptions = useMemo(\n    () => args.fetchOptions,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  return (\n    <div className=\"max-w-sm\">\n      <Combobox {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} />\n      <div className=\"mt-3 text-xs text-muted-foreground\">\n        value: <span className=\"font-mono\">{String(value || '')}</span>\n      </div>\n    </div>\n  );\n}\n\nconst meta = {\n  title: 'Combobox',\n  component: Combobox,\n  parameters: {\n    layout: 'centered',\n  },\n  args: {\n    placeholder: 'Select option...',\n    searchLabel: 'Type to search...',\n    emptyLabel: 'No options',\n    disabled: false,\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n  },\n  argTypes: {\n    fetchOptions: { control: false },\n    onChange: { control: false },\n    onMount: { control: false },\n    emptyAction: { control: false },\n    commandInputAction: { control: false },\n    listHeadAction: { control: false },\n    options: { control: false },\n    value: { control: false },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"p-6 w-[420px]\">\n        <Story />\n      </div>\n    ),\n  ],\n} satisfies Meta<typeof Combobox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/** 1) Default (async options) */\nexport const Default: Story = {\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 2) With initial selected value */\nexport const WithValueSelected: Story = {\n  render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\n};\n\n/** 3) Disabled */\nexport const Disabled: Story = {\n  args: { disabled: true },\n  render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\n};\n\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\nexport const WithStaticOptionsProp: Story = {\n  args: {\n    options: BASE_OPTIONS,\n    fetchOptions: async () => BASE_OPTIONS,\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 5) Slow fetch to show loading state on open/search */\nexport const SlowFetchLoading: Story = {\n  args: {\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 6) Empty state with action (search something like \"zzz\") */\nexport const EmptyStateWithAction: Story = {\n  args: {\n    emptyLabel: 'Nothing found',\n    emptyAction: (st: ComboboxCallbackStateParams) => {\n      const canCreate = Boolean(st.search?.trim());\n      return (\n        <button\n          type=\"button\"\n          className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\n          disabled={!canCreate}\n          onClick={() => {\n            const v = st.search.trim();\n            const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\n            st.setOptions([next]);\n            st.setLoading(false);\n          }}\n        >\n          Create option\n        </button>\n      );\n    },\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 7) commandInputAction (helper row under input) */\nexport const WithCommandInputAction: Story = {\n  args: {\n    commandInputAction: (st: ComboboxCallbackStateParams) => (\n      <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\n        <span>\n          results: <span className=\"font-mono\">{st.options.length}</span>\n        </span>\n        <button\n          type=\"button\"\n          className=\"underline\"\n          onClick={() => {\n            st.setSearch('');\n            st.setLoading(false);\n          }}\n        >\n          Clear search\n        </button>\n      </div>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 8) listHeadAction (top action inside list) */\nexport const WithListHeadAction: Story = {\n  args: {\n    listHeadAction: (st: ComboboxCallbackStateParams) => (\n      <button\n        type=\"button\"\n        className=\"w-full text-left px-3 py-2 text-sm\"\n        onClick={() => {\n          st.setSearch('');\n          st.setOpen(false);\n        }}\n      >\n        Close list\n      </button>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 9) listHeadAction (footer action outside of list) */\nexport const WithListFooterAction: Story = {\n  args: {\n    listFooterAction: (st: ComboboxCallbackStateParams) => (\n      <button\n        type=\"button\"\n        className=\"w-full text-left px-3 py-2 text-sm\"\n        onClick={() => {\n          st.setSearch('');\n          st.setOpen(false);\n        }}\n      >\n        Add new option\n      </button>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 10) Nested options tree */\nexport const NestedOptions: Story = {\n  args: {\n    fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 11) onMount initial loading (simulate prefetch on mount) */\nexport const OnMountPrefetch: Story = {\n  args: {\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n    onMount: async (st: ComboboxCallbackStateParams) => {\n      await sleep(900);\n      st.setOptions(BASE_OPTIONS);\n      st.setLoading(false);\n    },\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","useMemo","jsxs","jsx","Combobox","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","OnMountPrefetch"],"mappings":"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"}
+{"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Combobox } from './Combobox';\nimport type {\n  ComboboxCallbackStateParams,\n  ComboboxOption,\n  ComboboxProps,\n} from './Combobox.types';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\n  const res: ComboboxOption[] = [];\n  const walk = (list?: ComboboxOption[]) => {\n    if (!list?.length) return;\n    for (const n of list) {\n      res.push(n);\n      if (n.items?.length) walk(n.items);\n    }\n  };\n  walk(nodes);\n  return res;\n};\n\nconst createFetchOptions =\n  (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\n    async (search?: string) => {\n      await sleep(delayMs);\n\n      const q = (search ?? '').trim().toLowerCase();\n      if (!q) return all;\n\n      // simple \"contains\" search across flattened options; then return top-level filtered\n      // (enough for Storybook demos; your real API can do better)\n      const allFlat = flatten(all);\n      const matchedValues = new Set(\n        allFlat\n          .filter((o) => String(o.label).toLowerCase().includes(q))\n          .map((o) => String(o.value)),\n      );\n\n      const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\n        return list\n          .map((n) => {\n            const items = n.items?.length ? filterTree(n.items) : undefined;\n            const selfMatch =\n              matchedValues.has(String(n.value)) ||\n              String(n.label).toLowerCase().includes(q);\n\n            if (!selfMatch && !items?.length) return null;\n            return { ...n, items };\n          })\n          .filter(Boolean) as ComboboxOption[];\n      };\n\n      return filterTree(all);\n    };\n\nconst BASE_OPTIONS: ComboboxOption[] = [\n  { value: 'ua', label: 'Ukraine' },\n  { value: 'pl', label: 'Poland' },\n  { value: 'de', label: 'Germany' },\n  { value: 'fr', label: 'France' },\n  { value: 'es', label: 'Spain' },\n  { value: 'it', label: 'Italy' },\n];\n\nconst NESTED_OPTIONS: ComboboxOption[] = [\n  {\n    value: 'europe',\n    label: 'Europe',\n    items: [\n      { value: 'ua', label: 'Ukraine' },\n      { value: 'pl', label: 'Poland' },\n      { value: 'de', label: 'Germany' },\n      { value: 'fr', label: 'France' },\n    ],\n  },\n  {\n    value: 'north-america',\n    label: 'North America',\n    items: [\n      { value: 'us', label: 'United States' },\n      { value: 'ca', label: 'Canada' },\n      { value: 'mx', label: 'Mexico' },\n    ],\n  },\n];\n\ntype ControlledProps = Omit<ComboboxProps, 'value' | 'onChange'> & {\n  initialValue?: ComboboxProps['value'];\n};\n\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps) {\n  const [value, setValue] = useState<ComboboxProps['value']>(initialValue);\n\n  // keep stable reference if someone passes inline fetchOptions\n  const fetchOptions = useMemo(\n    () => args.fetchOptions,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  return (\n    <div className=\"max-w-sm\">\n      <Combobox {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} />\n      <div className=\"mt-3 text-xs text-muted-foreground\">\n        value: <span className=\"font-mono\">{String(value || '')}</span>\n      </div>\n    </div>\n  );\n}\n\nconst meta = {\n  title: 'Combobox',\n  component: Combobox,\n  parameters: {\n    layout: 'centered',\n  },\n  args: {\n    placeholder: 'Select option...',\n    searchLabel: 'Type to search...',\n    emptyLabel: 'No options',\n    disabled: false,\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n  },\n  argTypes: {\n    fetchOptions: { control: false },\n    onChange: { control: false },\n    onMount: { control: false },\n    emptyAction: { control: false },\n    commandInputAction: { control: false },\n    listHeadAction: { control: false },\n    options: { control: false },\n    value: { control: false },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"p-6 w-[420px]\">\n        <Story />\n      </div>\n    ),\n  ],\n} satisfies Meta<typeof Combobox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/** 1) Default (async options) */\nexport const Default: Story = {\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 2) With initial selected value */\nexport const WithValueSelected: Story = {\n  render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\n};\n\n/** 3) Disabled */\nexport const Disabled: Story = {\n  args: { disabled: true },\n  render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\n};\n\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\nexport const WithStaticOptionsProp: Story = {\n  args: {\n    options: BASE_OPTIONS,\n    fetchOptions: async () => BASE_OPTIONS,\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 5) Slow fetch to show loading state on open/search */\nexport const SlowFetchLoading: Story = {\n  args: {\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 6) Empty state with action (search something like \"zzz\") */\nexport const EmptyStateWithAction: Story = {\n  args: {\n    emptyLabel: 'Nothing found',\n    emptyAction: (st: ComboboxCallbackStateParams) => {\n      const canCreate = Boolean(st.search?.trim());\n      return (\n        <button\n          type=\"button\"\n          className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\n          disabled={!canCreate}\n          onClick={() => {\n            const v = st.search.trim();\n            const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\n            st.setOptions([next]);\n            st.setLoading(false);\n          }}\n        >\n          Create option\n        </button>\n      );\n    },\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 7) commandInputAction (helper row under input) */\nexport const WithCommandInputAction: Story = {\n  args: {\n    commandInputAction: (st: ComboboxCallbackStateParams) => (\n      <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\n        <span>\n          results: <span className=\"font-mono\">{st.options.length}</span>\n        </span>\n        <button\n          type=\"button\"\n          className=\"underline\"\n          onClick={() => {\n            st.setSearch('');\n            st.setLoading(false);\n          }}\n        >\n          Clear search\n        </button>\n      </div>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 8) listHeadAction (top action inside list) */\nexport const WithListHeadAction: Story = {\n  args: {\n    listHeadAction: (st: ComboboxCallbackStateParams) => (\n      <button\n        type=\"button\"\n        className=\"w-full text-left px-3 py-2 text-sm\"\n        onClick={() => {\n          st.setSearch('');\n          st.setOpen(false);\n        }}\n      >\n        Close list\n      </button>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 9) listHeadAction (footer action outside of list) */\nexport const WithListFooterAction: Story = {\n  args: {\n    listFooterAction: (st: ComboboxCallbackStateParams) => (\n      <button\n        type=\"button\"\n        className=\"w-full text-left px-3 py-2 text-sm\"\n        onClick={() => {\n          st.setSearch('');\n          st.setOpen(false);\n        }}\n      >\n        Add new option\n      </button>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 10) Nested options tree */\nexport const NestedOptions: Story = {\n  args: {\n    fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n    defaultNodeDisabled: false,\n    defaultNodeMatched: false,\n    defaultNodeMuted: true,\n    defaultNodeInteractive: false,\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 11) onMount initial loading (simulate prefetch on mount) */\nexport const OnMountPrefetch: Story = {\n  args: {\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n    onMount: async (st: ComboboxCallbackStateParams) => {\n      await sleep(900);\n      st.setOptions(BASE_OPTIONS);\n      st.setLoading(false);\n    },\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","useMemo","jsxs","jsx","Combobox","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","OnMountPrefetch"],"mappings":"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"}

package/Combobox/ComboboxOptionItem.d.ts

@@ -1,4 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { IComboboxOptionsNodeProps } from './Combobox.types';
-export declare const ComboboxOptionItem: <Data extends object>(props: PropsWithChildren<IComboboxOptionsNodeProps<Data>>) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxOptionItem: <Data extends object>(props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {
+    onCollapseToggle?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ComboboxOptionItem.d.ts.map

package/Combobox/ComboboxOptionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptionItem.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAK7D,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,iBAAiB,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,4CA2EhH,CAAA"}
+{"version":3,"file":"ComboboxOptionItem.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAK7D,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,MAAM,EACpD,OAAO,iBAAiB,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,GAAG;IAC1D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,4CAwFF,CAAA"}

package/Combobox/ComboboxOptionItem.js

@@ -1,41 +1,45 @@
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import { CommandItem as v } from "../Command/Command.js";
+import { jsxs as v, jsx as s } from "react/jsx-runtime";
+import { CommandItem as y } from "../Command/Command.js";
 import { Check as h } from "lucide-react";
 import { cn as p } from "@oneplatformdev/utils";
-const y = 24, C = (d) => {
+const N = 24, O = (f) => {
   const {
-    children: f,
-    setOpen: i,
+    children: u,
+    setOpen: d,
     option: e,
     onChangeOption: r,
     value: c = "",
-    deep: t = 0,
-    defaultNodeDisabled: o,
-    defaultNodeMatched: n,
-    defaultNodeMuted: l,
-    defaultNodeInteractive: a
-  } = d;
-  return /* @__PURE__ */ m(
-    v,
+    deep: o = 0,
+    onCollapseToggle: m,
+    defaultNodeDisabled: n,
+    defaultNodeMatched: l,
+    defaultNodeMuted: i,
+    defaultNodeInteractive: t
+  } = f;
+  return /* @__PURE__ */ v(
+    y,
     {
       value: e.value,
       "data-matched": e.matched ?? !0,
       onSelect: () => {
-        if (!(typeof a == "function" ? a(e, t) : a ?? !0)) return i(!1);
-        c === e.value ? r?.({ value: "", label: "" }) : r?.(e), i(!1);
+        if (!(typeof t == "function" ? t(e, o) : t ?? !0)) return m?.();
+        c === e.value ? r?.({ value: "", label: "" }) : r?.(e), d(!1);
+      },
+      onClick: (a) => {
+        (typeof t == "function" ? t(e, o) : t ?? !0) || (a?.preventDefault(), a?.stopPropagation());
       },
       className: "py-0",
       style: {
-        "--deep-space": `${t * y}px`
+        "--deep-space": `${o * N}px`
       },
-      disabled: typeof o == "function" ? o(e, t) : o ?? !1,
+      disabled: typeof n == "function" ? n(e, o) : n ?? !1,
       children: [
         /* @__PURE__ */ s(
           "div",
           {
             style: { paddingLeft: "var(--deep-space)" },
             className: "relative min-w-10 h-10 aspect-square",
-            children: f
+            children: u
           }
         ),
         /* @__PURE__ */ s(
@@ -43,9 +47,12 @@ const y = 24, C = (d) => {
           {
             className: p(
               "overflow-hidden whitespace-wrap text-ellipsis line-clamp-2",
-              (typeof n == "function" ? n(e, t) : n ?? !1) && "font-bold",
-              (typeof l == "function" ? l(e, t) : l ?? !1) && "text-opacity-80",
-              !(typeof a == "function" ? a(e, t) : a ?? !0) && "pointer-events-none"
+              (typeof l == "function" ? l(e, o) : l ?? !1) && "font-bold",
+              (() => {
+                const a = typeof i == "function" ? i(e, o) : i ?? !1;
+                return console.log("res", a), a;
+              })() && "opacity-60",
+              !(typeof t == "function" ? t(e, o) : t ?? !0) && "pointer-events-none"
             ),
             children: e.label
           }
@@ -65,6 +72,6 @@ const y = 24, C = (d) => {
   );
 };
 export {
-  C as ComboboxOptionItem
+  O as ComboboxOptionItem
 };
 //# sourceMappingURL=ComboboxOptionItem.js.map

package/Combobox/ComboboxOptionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { IComboboxOptionsNodeProps } from './Combobox.types';\nimport { Check } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\n\nconst DEEP_OFFSET = 24;\nexport const ComboboxOptionItem = <Data extends object>(props: PropsWithChildren<IComboboxOptionsNodeProps<Data>>) => {\n  const {\n    children,\n    setOpen,\n    option,\n    onChangeOption,\n    value = '',\n    deep = 0,\n    defaultNodeDisabled,\n    defaultNodeMatched,\n    defaultNodeMuted,\n    defaultNodeInteractive,\n  } = props;\n  return (\n    <CommandItem\n      key={option.value}\n      value={option.value}\n      data-matched={option.matched ?? true}\n      onSelect={() => {\n        const interactive = typeof defaultNodeInteractive === \"function\"\n          ? defaultNodeInteractive(option, deep)\n          : defaultNodeInteractive ?? true\n        if(!interactive) return setOpen(false);\n        if (value === option.value) {\n          onChangeOption?.({ value: '', label: '' });\n        } else {\n          onChangeOption?.(option);\n        }\n        setOpen(false);\n      }}\n      className='py-0'\n      style={{\n        '--deep-space': `${deep * DEEP_OFFSET}px`,\n      } as CSSProperties}\n      disabled={typeof defaultNodeDisabled === \"function\"\n        ? defaultNodeDisabled(option, deep)\n        : defaultNodeDisabled ?? false}\n    >\n      <div\n        style={{ paddingLeft: 'var(--deep-space)' }}\n        className='relative min-w-10 h-10 aspect-square'\n      >\n        {children}\n      </div>\n      <span\n        className={cn(\n          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2',\n          (() => {\n          return typeof defaultNodeMatched === \"function\"\n            ? defaultNodeMatched(option, deep)\n            : defaultNodeMatched ?? false\n          })() && 'font-bold',\n          (() => {\n            return typeof defaultNodeMuted === \"function\"\n              ? defaultNodeMuted(option, deep)\n              : defaultNodeMuted ?? false\n          })() && 'text-opacity-80',\n          (() => {\n            const res = typeof defaultNodeInteractive === \"function\"\n              ? defaultNodeInteractive(option, deep)\n              : defaultNodeInteractive ?? true\n            return !res;\n          })() && 'pointer-events-none',\n        )}\n      >\n        {option.label}\n      </span>\n      <Check\n        className={cn(\n          'ml-auto',\n          value === option.value ? 'opacity-100' : 'opacity-0'\n        )}\n      />\n    </CommandItem>\n  );\n}\n"],"names":["DEEP_OFFSET","ComboboxOptionItem","props","children","setOpen","option","onChangeOption","value","deep","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","jsxs","CommandItem","jsx","cn","Check"],"mappings":";;;;AAMA,MAAMA,IAAc,IACPC,IAAqB,CAAsBC,MAA8D;AACpH,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEV;AACJ,SACE,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOT,EAAO;AAAA,MACd,gBAAcA,EAAO,WAAW;AAAA,MAChC,UAAU,MAAM;AAId,YAAG,EAHiB,OAAOO,KAA2B,aAClDA,EAAuBP,GAAQG,CAAI,IACnCI,KAA0B,IACb,QAAOR,EAAQ,EAAK;AACrC,QAAIG,MAAUF,EAAO,QACnBC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,IAEzCA,IAAiBD,CAAM,GAEzBD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,gBAAgB,GAAGI,IAAOR,CAAW;AAAA,MAAA;AAAA,MAEvC,UAAU,OAAOS,KAAwB,aACrCA,EAAoBJ,GAAQG,CAAI,IAChCC,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,aAAa,oBAAA;AAAA,YACtB,WAAU;AAAA,YAET,UAAAZ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,eAEO,OAAON,KAAuB,aACjCA,EAAmBL,GAAQG,CAAI,IAC/BE,KAAsB,OAClB;AAAA,eAEC,OAAOC,KAAqB,aAC/BA,EAAiBN,GAAQG,CAAI,IAC7BG,KAAoB,OAClB;AAAA,cAKC,EAHK,OAAOC,KAA2B,aAC1CA,EAAuBP,GAAQG,CAAI,IACnCI,KAA0B,OAExB;AAAA,YAAA;AAAA,YAGT,UAAAP,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAU;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAT,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAzDKA,EAAO;AAAA,EAAA;AA4DlB;"}
+{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { IComboboxOptionsNodeProps } from './Combobox.types';\nimport { Check } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\n\nconst DEEP_OFFSET = 24;\nexport const ComboboxOptionItem = <Data extends object>(\n  props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\n    onCollapseToggle?: () => void;\n  }\n) => {\n  const {\n    children,\n    setOpen,\n    option,\n    onChangeOption,\n    value = '',\n    deep = 0,\n    onCollapseToggle,\n    defaultNodeDisabled,\n    defaultNodeMatched,\n    defaultNodeMuted,\n    defaultNodeInteractive,\n  } = props;\n  return (\n    <CommandItem\n      key={option.value}\n      value={option.value}\n      data-matched={option.matched ?? true}\n      onSelect={() => {\n        const interactive = typeof defaultNodeInteractive === \"function\"\n          ? defaultNodeInteractive(option, deep)\n          : defaultNodeInteractive ?? true\n        if(!interactive) return onCollapseToggle?.();\n\n        if (value === option.value) onChangeOption?.({ value: '', label: '' });\n        else onChangeOption?.(option);\n\n        setOpen(false);\n      }}\n      onClick={(e) => {\n        const interactive = typeof defaultNodeInteractive === \"function\"\n          ? defaultNodeInteractive(option, deep)\n          : defaultNodeInteractive ?? true\n\n        if(!interactive) {\n          e?.preventDefault();\n          e?.stopPropagation();\n        }\n      }}\n      className='py-0'\n      style={{\n        '--deep-space': `${deep * DEEP_OFFSET}px`,\n      } as CSSProperties}\n      disabled={typeof defaultNodeDisabled === \"function\"\n        ? defaultNodeDisabled(option, deep)\n        : defaultNodeDisabled ?? false}\n    >\n      <div\n        style={{ paddingLeft: 'var(--deep-space)' }}\n        className='relative min-w-10 h-10 aspect-square'\n      >\n        {children}\n      </div>\n      <span\n        className={cn(\n          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2',\n          (() => {\n          return typeof defaultNodeMatched === \"function\"\n            ? defaultNodeMatched(option, deep)\n            : defaultNodeMatched ?? false\n          })() && 'font-bold',\n          (() => {\n            const res = typeof defaultNodeMuted === \"function\"\n              ? defaultNodeMuted(option, deep)\n              : defaultNodeMuted ?? false\n            console.log('res', res);\n            return res;\n          })() && 'opacity-60',\n          (() => {\n            const res = typeof defaultNodeInteractive === \"function\"\n              ? defaultNodeInteractive(option, deep)\n              : defaultNodeInteractive ?? true\n            return !res;\n          })() && 'pointer-events-none',\n        )}\n      >\n        {option.label}\n      </span>\n      <Check\n        className={cn(\n          'ml-auto',\n          value === option.value ? 'opacity-100' : 'opacity-0'\n        )}\n      />\n    </CommandItem>\n  );\n}\n"],"names":["DEEP_OFFSET","ComboboxOptionItem","props","children","setOpen","option","onChangeOption","value","deep","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","jsxs","CommandItem","e","jsx","cn","res","Check"],"mappings":";;;;AAMA,MAAMA,IAAc,IACPC,IAAqB,CAChCC,MAGG;AACH,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEX;AACJ,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOV,EAAO;AAAA,MACd,gBAAcA,EAAO,WAAW;AAAA,MAChC,UAAU,MAAM;AAId,YAAG,EAHiB,OAAOQ,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,IACb,QAAOJ,IAAA;AAExB,QAAIF,MAAUF,EAAO,QAAOC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,QAC/CD,CAAM,GAE5BD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,SAAS,CAACY,MAAM;AAKd,SAJoB,OAAOH,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,QAG5BG,GAAG,eAAA,GACHA,GAAG,gBAAA;AAAA,MAEP;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,gBAAgB,GAAGR,IAAOR,CAAW;AAAA,MAAA;AAAA,MAEvC,UAAU,OAAOU,KAAwB,aACrCA,EAAoBL,GAAQG,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,aAAa,oBAAA;AAAA,YACtB,WAAU;AAAA,YAET,UAAAd;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,eAEO,OAAOP,KAAuB,aACjCA,EAAmBN,GAAQG,CAAI,IAC/BG,KAAsB,OAClB;AAAA,eACP,MAAM;AACL,sBAAMQ,IAAM,OAAOP,KAAqB,aACpCA,EAAiBP,GAAQG,CAAI,IAC7BI,KAAoB;AACxB,+BAAQ,IAAI,OAAOO,CAAG,GACfA;AAAA,cACT,QAAQ;AAAA,cAKC,EAHK,OAAON,KAA2B,aAC1CA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,OAExB;AAAA,YAAA;AAAA,YAGT,UAAAR,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAY;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,WAAWF;AAAA,cACT;AAAA,cACAX,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IApEKA,EAAO;AAAA,EAAA;AAuElB;"}

package/Combobox/ComboboxOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptions.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,kBAAkB,CAAC;AAY1B,eAAO,MAAM,mBAAmB,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,yBAAyB,CAAC,IAAI,CAAC,4CAqE9F,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,qBAAqB,CAAC,IAAI,CAAC,4CAStF,CAAA"}
+{"version":3,"file":"ComboboxOptions.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,kBAAkB,CAAC;AAY1B,eAAO,MAAM,mBAAmB,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,yBAAyB,CAAC,IAAI,CAAC,4CAmE9F,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,IAAI,SAAS,MAAM,EAAE,OAAO,qBAAqB,CAAC,IAAI,CAAC,4CAStF,CAAA"}

package/Combobox/ComboboxOptions.js

@@ -1,62 +1,62 @@
 import { jsx as e, jsxs as u } from "react/jsx-runtime";
 import { useState as b } from "react";
-import { Collapsible as h, CollapsibleTrigger as g, CollapsibleContent as x } from "../Collapsible/Collapsible.js";
+import { Collapsible as g, CollapsibleTrigger as h, CollapsibleContent as C } from "../Collapsible/Collapsible.js";
 import { ComboboxOptionItem as p } from "./ComboboxOptionItem.js";
-import { ChevronRightIcon as C } from "lucide-react";
-import { cn as l } from "@oneplatformdev/utils";
+import { ChevronRightIcon as x } from "lucide-react";
+import { cn as c } from "@oneplatformdev/utils";
 import { ButtonIcon as v } from "../ButtonIcon/ButtonIcon.js";
 import "../ButtonIcon/buttonIconVariants.js";
 const m = (t) => {
-  const { option: o, deep: n = 0, defaultNodeOpen: r, defaultNodeDisabled: i, searchTerm: d } = t, [s, c] = b(() => typeof r == "function" ? r(o, n) : r ?? (!!d || !n));
-  return o?.items?.length ? /* @__PURE__ */ u(
-    h,
+  const { option: n, deep: r = 0, defaultNodeOpen: a, defaultNodeDisabled: s, searchTerm: d } = t, [i, l] = b(() => typeof a == "function" ? a(n, r) : a ?? (!!d || !r));
+  return n?.items?.length ? /* @__PURE__ */ u(
+    g,
     {
-      open: s,
-      onOpenChange: c,
-      "data-opened": s,
-      className: l("group/collapsible"),
-      disabled: typeof i == "function" ? i(o, n) : i ?? !1,
+      open: i,
+      onOpenChange: l,
+      "data-opened": i,
+      className: c("group/collapsible"),
+      disabled: typeof s == "function" ? s(n, r) : s ?? !1,
       children: [
-        /* @__PURE__ */ e(p, { ...t, children: /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "inset-0 absolute top-0 right-2", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(p, { ...t, onCollapseToggle: () => l((o) => !o), children: /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "inset-0 absolute top-0 right-2", children: /* @__PURE__ */ e(
           v,
           {
-            onClick: (a) => {
-              a?.preventDefault(), a?.stopPropagation(), c((f) => !f);
+            onClick: (o) => {
+              o?.preventDefault(), o?.stopPropagation(), l((f) => !f);
             },
             type: "button",
             variant: "ghost",
             color: "secondary",
-            className: l(
+            className: c(
               "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent"
             ),
             icon: /* @__PURE__ */ e(
-              C,
+              x,
               {
                 strokeWidth: 2,
-                className: l(
+                className: c(
                   "text-[#06080D]",
                   "transition-transform",
-                  s && "rotate-90"
+                  i && "rotate-90"
                 )
               }
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: o?.items.map((a) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n?.items.map((o) => /* @__PURE__ */ e(
           m,
           {
             ...t,
-            deep: n + 1,
-            option: a
+            deep: r + 1,
+            option: o
           },
-          a.value
+          o.value
         )) }) })
       ]
     }
   ) : /* @__PURE__ */ e(p, { ...t });
 }, B = (t) => {
-  const { options: o = [], ...n } = t;
-  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: o.map((r) => /* @__PURE__ */ e(m, { ...n, option: r }, r.value)) });
+  const { options: n = [], ...r } = t;
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n.map((a) => /* @__PURE__ */ e(m, { ...r, option: a }, a.value)) });
 };
 export {
   B as ComboboxOptions,

package/Combobox/ComboboxOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptions.js","sources":["../../src/Combobox/ComboboxOptions.tsx"],"sourcesContent":["import {\n  IComboboxOptionsNodeProps,\n  IComboboxOptionsProps,\n} from './Combobox.types';\nimport { useState } from 'react';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\n  const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, searchTerm } = props;\n\n  const [open, onOpenChange] = useState(() => {\n    const def = !!searchTerm || !deep;\n    return typeof defaultNodeOpen === \"function\"\n      ? defaultNodeOpen(option, deep)\n      : defaultNodeOpen ?? def\n  });\n\n  if (!option?.items?.length) {\n    return <ComboboxOptionItem {...props} />;\n  }\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={onOpenChange}\n      data-opened={open}\n      className={cn('group/collapsible')}\n      disabled={typeof defaultNodeDisabled === \"function\"\n        ? defaultNodeDisabled(option, deep)\n        : defaultNodeDisabled ?? false}\n    >\n      <ComboboxOptionItem {...props}>\n        <CollapsibleTrigger asChild>\n          <div className='inset-0 absolute top-0 right-2'>\n            <ButtonIcon\n              onClick={(e) => {\n                e?.preventDefault();\n                e?.stopPropagation();\n                onOpenChange((prev) => !prev);\n              }}\n              type=\"button\"\n              variant=\"ghost\"\n              color='secondary'\n              className={cn(\n                'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n              )}\n              icon={(\n                <ChevronRightIcon\n                  strokeWidth={2}\n                  className={cn(\n                    'text-[#06080D]',\n                    'transition-transform',\n                    open && 'rotate-90'\n                  )}\n                />\n              )}\n            />\n          </div>\n        </CollapsibleTrigger>\n      </ComboboxOptionItem>\n\n      <CollapsibleContent>\n        <div className=\"flex flex-col gap-0\">\n          {option?.items.map((opt) => {\n            return (\n              <ComboboxOptionsNode\n                key={opt.value}\n                {...props}\n                deep={deep + 1}\n                option={opt}\n              />\n            );\n          })}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport const ComboboxOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\n  const { options = [], ...rest } = props;\n  return (\n    <div className=\"flex flex-col gap-0\">\n      {options.map((option) => (\n        <ComboboxOptionsNode key={option.value} {...rest} option={option} />\n      ))}\n    </div>\n  );\n}\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","searchTerm","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","CollapsibleTrigger","ButtonIcon","e","prev","ChevronRightIcon","CollapsibleContent","opt","ComboboxOptions","options","rest"],"mappings":";;;;;;;;AAeO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,YAAAC,MAAeL,GAEzE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAc,CAACH,EAI9B;AAED,SAAKD,GAAQ,OAAO,SAIlB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ,EAACC,GAAA,EAAoB,GAAGb,GACtB,UAAA,gBAAAY,EAACE,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA,gBAAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAS,CAACC,MAAM;AACd,cAAAA,GAAG,eAAA,GACHA,GAAG,gBAAA,GACHT,EAAa,CAACU,MAAS,CAACA,CAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAWN;AAAA,cACT;AAAA,YAAA;AAAA,YAEF,MACE,gBAAAC;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,aAAa;AAAA,gBACb,WAAWP;AAAA,kBACT;AAAA,kBACA;AAAA,kBACAL,KAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,EAEJ,CACF,GACF,GACF;AAAA,QAEA,gBAAAM,EAACO,GAAA,EACC,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACmB,MAEhB,gBAAAR;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQkB;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAvDK,gBAAAR,EAACC,GAAA,EAAoB,GAAGb,EAAA,CAAO;AA0D1C,GAEaqB,IAAkB,CAAsBrB,MAAuC;AAC1F,QAAM,EAAE,SAAAsB,IAAU,CAAA,GAAI,GAAGC,MAASvB;AAClC,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAsB,EAAQ,IAAI,CAACrB,MACZ,gBAAAW,EAACb,GAAA,EAAwC,GAAGwB,GAAM,QAAAtB,EAAA,GAAxBA,EAAO,KAAiC,CACnE,GACH;AAEJ;"}
+{"version":3,"file":"ComboboxOptions.js","sources":["../../src/Combobox/ComboboxOptions.tsx"],"sourcesContent":["import {\n  IComboboxOptionsNodeProps,\n  IComboboxOptionsProps,\n} from './Combobox.types';\nimport { useState } from 'react';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\n  const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, searchTerm } = props;\n\n  const [open, onOpenChange] = useState(() => {\n    const def = !!searchTerm || !deep;\n    return typeof defaultNodeOpen === \"function\"\n      ? defaultNodeOpen(option, deep)\n      : defaultNodeOpen ?? def\n  });\n\n  if (!option?.items?.length) return <ComboboxOptionItem {...props} />;\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={onOpenChange}\n      data-opened={open}\n      className={cn('group/collapsible')}\n      disabled={typeof defaultNodeDisabled === \"function\"\n        ? defaultNodeDisabled(option, deep)\n        : defaultNodeDisabled ?? false}\n    >\n      <ComboboxOptionItem {...props} onCollapseToggle={() => onOpenChange(prev => !prev)}>\n        <CollapsibleTrigger asChild>\n          <div className='inset-0 absolute top-0 right-2'>\n            <ButtonIcon\n              onClick={(e) => {\n                e?.preventDefault();\n                e?.stopPropagation();\n                onOpenChange((prev) => !prev);\n              }}\n              type=\"button\"\n              variant=\"ghost\"\n              color='secondary'\n              className={cn(\n                'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n              )}\n              icon={(\n                <ChevronRightIcon\n                  strokeWidth={2}\n                  className={cn(\n                    'text-[#06080D]',\n                    'transition-transform',\n                    open && 'rotate-90'\n                  )}\n                />\n              )}\n            />\n          </div>\n        </CollapsibleTrigger>\n      </ComboboxOptionItem>\n\n      <CollapsibleContent>\n        <div className=\"flex flex-col gap-0\">\n          {option?.items.map((opt) => {\n            return (\n              <ComboboxOptionsNode\n                key={opt.value}\n                {...props}\n                deep={deep + 1}\n                option={opt}\n              />\n            );\n          })}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport const ComboboxOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\n  const { options = [], ...rest } = props;\n  return (\n    <div className=\"flex flex-col gap-0\">\n      {options.map((option) => (\n        <ComboboxOptionsNode key={option.value} {...rest} option={option} />\n      ))}\n    </div>\n  );\n}\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","searchTerm","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","prev","CollapsibleTrigger","ButtonIcon","e","ChevronRightIcon","CollapsibleContent","opt","ComboboxOptions","options","rest"],"mappings":";;;;;;;;AAeO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,YAAAC,MAAeL,GAEzE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAc,CAACH,EAI9B;AAED,SAAKD,GAAQ,OAAO,SAElB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ,EAACC,KAAoB,GAAGb,GAAO,kBAAkB,MAAMO,EAAa,CAAAO,MAAQ,CAACA,CAAI,GAC/E,4BAACC,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA,gBAAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,SAAS,CAACC,MAAM;AACd,cAAAA,GAAG,eAAA,GACHA,GAAG,gBAAA,GACHV,EAAa,CAACO,MAAS,CAACA,CAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAWH;AAAA,cACT;AAAA,YAAA;AAAA,YAEF,MACE,gBAAAC;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,aAAa;AAAA,gBACb,WAAWP;AAAA,kBACT;AAAA,kBACA;AAAA,kBACAL,KAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,EAEJ,CACF,GACF,GACF;AAAA,QAEA,gBAAAM,EAACO,GAAA,EACC,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACmB,MAEhB,gBAAAR;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQkB;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAtD+B,gBAAAR,EAACC,GAAA,EAAoB,GAAGb,GAAO;AAyDpE,GAEaqB,IAAkB,CAAsBrB,MAAuC;AAC1F,QAAM,EAAE,SAAAsB,IAAU,CAAA,GAAI,GAAGC,MAASvB;AAClC,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAsB,EAAQ,IAAI,CAACrB,MACZ,gBAAAW,EAACb,GAAA,EAAwC,GAAGwB,GAAM,QAAAtB,EAAA,GAAxBA,EAAO,KAAiC,CACnE,GACH;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.99-beta.72",
+  "version": "0.1.99-beta.74",
   "description": "UI component library for OnePlatform",
   "author": "One Platform Development Team",
   "keywords": [
@@ -105,9 +105,9 @@
     "recharts": "^3.2.0",
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
-    "@oneplatformdev/hooks": "^0.1.99-beta.72",
-    "@oneplatformdev/utils": "^0.1.99-beta.72",
-    "@oneplatformdev/tokens": "^0.1.99-beta.72"
+    "@oneplatformdev/utils": "^0.1.99-beta.74",
+    "@oneplatformdev/hooks": "^0.1.99-beta.74",
+    "@oneplatformdev/tokens": "^0.1.99-beta.74"
   },
   "scripts": {
     "chromatic": "chromatic"