@oneplatformdev/ui 0.1.99-beta.273 → 0.1.99-beta.275

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/Combobox/Combobox.stories.js +57 -48
  2. package/Combobox/Combobox.stories.js.map +1 -1
  3. package/Combobox/ComboboxRenderContent.d.ts.map +1 -1
  4. package/Combobox/ComboboxRenderContent.js +12 -12
  5. package/Combobox/ComboboxRenderContent.js.map +1 -1
  6. package/Combobox/ComboboxRenderTrigger.js +23 -23
  7. package/Combobox/ComboboxRenderTrigger.js.map +1 -1
  8. package/DatePicker/DatePicker.d.ts.map +1 -1
  9. package/DatePicker/DatePicker.js +32 -30
  10. package/DatePicker/DatePicker.js.map +1 -1
  11. package/Select/SelectRoot.js +6 -6
  12. package/Select/SelectRoot.js.map +1 -1
  13. package/package.json +4 -4
package/Combobox/Combobox.stories.js CHANGED
@@ -1,22 +1,22 @@
1
- import { jsx as a, jsxs as d } from "react/jsx-runtime";
1
+ import { jsx as a, jsxs as m } from "react/jsx-runtime";
2
2
  import { useState as y, useMemo as x } from "react";
3
3
  import { Combobox as g } from "./Combobox.js";
4
- const b = (e) => new Promise((t) => setTimeout(t, e)), v = (e = []) => {
4
+ const p = (e) => new Promise((t) => setTimeout(t, e)), v = (e = []) => {
5
5
  const t = [], l = (n) => {
6
6
  if (n?.length)
7
7
  for (const o of n)
8
8
  t.push(o), o.items?.length && l(o.items);
9
9
  };
10
10
  return l(e), t;
11
- }, p = (e, t = 150) => async ({ search: l }) => {
12
- await b(t);
11
+ }, b = (e, t = 150) => async ({ search: l }) => {
12
+ await p(t);
13
13
  const n = (l ?? "").trim().toLowerCase();
14
14
  if (!n) return e;
15
- const o = v(e), u = new Set(
15
+ const o = v(e), d = new Set(
16
16
  o.filter((s) => String(s.label).toLowerCase().includes(n)).map((s) => String(s.value))
17
17
  ), i = (s) => s.map((c) => {
18
18
  const h = c.items?.length ? i(c.items) : void 0;
19
- return !(u.has(String(c.value)) || String(c.label).toLowerCase().includes(n)) && !h?.length ? null : { ...c, items: h };
19
+ return !(d.has(String(c.value)) || String(c.label).toLowerCase().includes(n)) && !h?.length ? null : { ...c, items: h };
20
20
  }).filter(Boolean);
21
21
  return i(e);
22
22
  }, C = (e, t) => {
@@ -24,26 +24,26 @@ const b = (e) => new Promise((t) => setTimeout(t, e)), v = (e = []) => {
24
24
  if (!l) return e;
25
25
  const n = v(e), o = new Set(
26
26
  n.filter((i) => String(i.label).toLowerCase().includes(l)).map((i) => String(i.value))
27
- ), u = (i) => i.map((s) => {
28
- const c = s.items?.length ? u(s.items) : void 0;
27
+ ), d = (i) => i.map((s) => {
28
+ const c = s.items?.length ? d(s.items) : void 0;
29
29
  return !(o.has(String(s.value)) || String(s.label).toLowerCase().includes(l)) && !c?.length ? null : { ...s, items: c };
30
30
  }).filter(Boolean);
31
- return u(e);
31
+ return d(e);
32
32
  }, N = (e, t = 250, l = 20) => async ({ search: n, offset: o = 0 }) => {
33
- await b(t);
34
- const u = C(e, n), i = v(u);
33
+ await p(t);
34
+ const d = C(e, n), i = v(d);
35
35
  return {
36
36
  data: i.slice(o, o + l),
37
37
  total: i.length
38
38
  };
39
- }, m = [
39
+ }, u = [
40
40
  { value: "ua", label: "Ukraine" },
41
41
  { value: "pl", label: "Poland" },
42
42
  { value: "de", label: "Germany" },
43
43
  { value: "fr", label: "France" },
44
44
  { value: "es", label: "Spain" },
45
45
  { value: "it", label: "Italy" }
46
- ], w = Array.from({ length: 120 }).map((e, t) => ({
46
+ ], O = Array.from({ length: 120 }).map((e, t) => ({
47
47
  value: `option-${t + 1}`,
48
48
  label: `Option ${t + 1}`
49
49
  })), f = [
@@ -115,7 +115,7 @@ function r({ initialValue: e = "", ...t }) {
115
115
  // eslint-disable-next-line react-hooks/exhaustive-deps
116
116
  []
117
117
  );
118
- return /* @__PURE__ */ d("div", { className: "max-w-sm", children: [
118
+ return /* @__PURE__ */ m("div", { className: "max-w-sm", children: [
119
119
  /* @__PURE__ */ a(
120
120
  g,
121
121
  {
@@ -127,18 +127,18 @@ function r({ initialValue: e = "", ...t }) {
127
127
  defaultNodeMatched: !0
128
128
  }
129
129
  ),
130
- /* @__PURE__ */ d("div", { className: "mt-3 text-xs text-muted-foreground", children: [
130
+ /* @__PURE__ */ m("div", { className: "mt-3 text-xs text-muted-foreground", children: [
131
131
  "value: ",
132
132
  /* @__PURE__ */ a("span", { className: "font-mono", children: String(l || "") })
133
133
  ] })
134
134
  ] });
135
135
  }
136
- function O({
136
+ function w({
137
137
  initialValue: e = [],
138
138
  ...t
139
139
  }) {
140
140
  const [l, n] = y(e), o = x(() => t.loadData, []);
141
- return /* @__PURE__ */ d("div", { className: "max-w-sm", children: [
141
+ return /* @__PURE__ */ m("div", { className: "max-w-sm", children: [
142
142
  /* @__PURE__ */ a(
143
143
  g,
144
144
  {
@@ -149,7 +149,7 @@ function O({
149
149
  loadData: o
150
150
  }
151
151
  ),
152
- /* @__PURE__ */ d("div", { className: "mt-3 text-xs text-muted-foreground", children: [
152
+ /* @__PURE__ */ m("div", { className: "mt-3 text-xs text-muted-foreground", children: [
153
153
  "value: ",
154
154
  /* @__PURE__ */ a("span", { className: "font-mono", children: (l || []).join(", ") })
155
155
  ] })
@@ -166,7 +166,7 @@ const D = {
166
166
  searchLabel: "Type to search...",
167
167
  emptyLabel: "No options",
168
168
  disabled: !1,
169
- loadData: p(m, 250)
169
+ loadData: b(u, 250)
170
170
  },
171
171
  argTypes: {
172
172
  loadData: { control: !1 },
@@ -190,16 +190,24 @@ const D = {
190
190
  render: (e) => /* @__PURE__ */ a(r, { ...e, initialValue: "de" })
191
191
  }, k = {
192
192
  args: {
193
- options: m,
194
- loadData: async () => m
193
+ options: u,
194
+ loadData: async () => u
195
195
  },
196
196
  render: (e) => /* @__PURE__ */ a(r, { ...e })
197
197
  }, B = {
198
198
  args: {
199
- loadData: p(m, 1200)
199
+ loadData: b(u, 1200)
200
200
  },
201
201
  render: (e) => /* @__PURE__ */ a(r, { ...e })
202
202
  }, I = {
203
+ args: {
204
+ loadData: async () => u,
205
+ onMount: async (e) => {
206
+ e.setOpen(!0), e.setOptions([]), e.setLoading(!0), await p(1200), e.setOptions(u), e.setLoading(!1);
207
+ }
208
+ },
209
+ render: (e) => /* @__PURE__ */ a(r, { ...e })
210
+ }, E = {
203
211
  args: {
204
212
  emptyLabel: "Nothing found",
205
213
  emptyAction: (e) => {
@@ -220,10 +228,10 @@ const D = {
220
228
  }
221
229
  },
222
230
  render: (e) => /* @__PURE__ */ a(r, { ...e })
223
- }, E = {
231
+ }, W = {
224
232
  args: {
225
- commandInputAction: (e) => /* @__PURE__ */ d("div", { className: "px-3 py-2 flex items-center justify-between text-xs text-muted-foreground", children: [
226
- /* @__PURE__ */ d("span", { children: [
233
+ commandInputAction: (e) => /* @__PURE__ */ m("div", { className: "px-3 py-2 flex items-center justify-between text-xs text-muted-foreground", children: [
234
+ /* @__PURE__ */ m("span", { children: [
227
235
  "results: ",
228
236
  /* @__PURE__ */ a("span", { className: "font-mono", children: e.options.length })
229
237
  ] }),
@@ -241,7 +249,7 @@ const D = {
241
249
  ] })
242
250
  },
243
251
  render: (e) => /* @__PURE__ */ a(r, { ...e })
244
- }, W = {
252
+ }, j = {
245
253
  args: {
246
254
  listHeadAction: (e) => /* @__PURE__ */ a(
247
255
  "button",
@@ -256,7 +264,7 @@ const D = {
256
264
  )
257
265
  },
258
266
  render: (e) => /* @__PURE__ */ a(r, { ...e })
259
- }, j = {
267
+ }, q = {
260
268
  args: {
261
269
  listFooterAction: (e) => /* @__PURE__ */ a(
262
270
  "button",
@@ -271,32 +279,32 @@ const D = {
271
279
  )
272
280
  },
273
281
  render: (e) => /* @__PURE__ */ a(r, { ...e })
274
- }, q = {
282
+ }, _ = {
275
283
  args: {
276
- loadData: p(f, 250)
284
+ loadData: b(f, 250)
277
285
  // defaultNodeDisabled: false,
278
286
  // defaultNodeMatched: false,
279
287
  // defaultNodeMuted: true,
280
288
  // defaultNodeInteractive: false,
281
289
  },
282
290
  render: (e) => /* @__PURE__ */ a(r, { ...e })
283
- }, _ = {
291
+ }, R = {
284
292
  args: {
285
- loadData: p(f, 250),
293
+ loadData: b(f, 250),
286
294
  onMount: async (e) => {
287
- await b(900), e.setOptions(S(f));
295
+ await p(900), e.setOptions(S(f));
288
296
  }
289
297
  },
290
- render: (e) => /* @__PURE__ */ a(O, { ...e, initialValue: ["fr", "de"] })
291
- }, R = {
298
+ render: (e) => /* @__PURE__ */ a(w, { ...e, initialValue: ["fr", "de"] })
299
+ }, $ = {
292
300
  args: {
293
- loadData: p(m, 250),
301
+ loadData: b(u, 250),
294
302
  onMount: async (e) => {
295
- await b(900), e.setOptions(m);
303
+ await p(900), e.setOptions(u);
296
304
  }
297
305
  },
298
306
  render: (e) => /* @__PURE__ */ a(r, { ...e })
299
- }, $ = {
307
+ }, G = {
300
308
  args: {
301
309
  renderTrigger: (e) => (console.log("state", e), /* @__PURE__ */ a(
302
310
  "button",
@@ -309,28 +317,29 @@ const D = {
309
317
  ))
310
318
  },
311
319
  render: (e) => /* @__PURE__ */ a(r, { ...e })
312
- }, G = {
320
+ }, H = {
313
321
  args: {
314
322
  placeholder: "Select option...",
315
323
  searchLabel: "Type to search...",
316
324
  emptyLabel: "No options",
317
- loadData: N(w, 500, 20)
325
+ loadData: N(O, 500, 20)
318
326
  },
319
327
  render: (e) => /* @__PURE__ */ a(r, { ...e })
320
328
  };
321
329
  export {
322
330
  P as Default,
323
331
  V as Disabled,
324
- I as EmptyStateWithAction,
325
- G as InfiniteScrollLoadMore,
326
- q as NestedOptions,
327
- _ as NestedOptionsMulti,
328
- R as OnMountPrefetch,
329
- $ as RenderCustomTrigger,
332
+ E as EmptyStateWithAction,
333
+ H as InfiniteScrollLoadMore,
334
+ I as Loading,
335
+ _ as NestedOptions,
336
+ R as NestedOptionsMulti,
337
+ $ as OnMountPrefetch,
338
+ G as RenderCustomTrigger,
330
339
  B as SlowFetchLoading,
331
- E as WithCommandInputAction,
332
- j as WithListFooterAction,
333
- W as WithListHeadAction,
340
+ W as WithCommandInputAction,
341
+ q as WithListFooterAction,
342
+ j as WithListHeadAction,
334
343
  k as WithStaticOptionsProp,
335
344
  F as WithValueSelected,
336
345
  D as default
package/Combobox/Combobox.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Combobox } from './Combobox';\r\nimport {\r\n ComboboxCallbackStateParams,\r\n ComboboxOption,\r\n ComboboxProps, MultiComboboxProps, SingleComboboxProps,\r\n} from './Combobox.types';\r\n\r\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\r\n\r\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\r\n const res: ComboboxOption[] = [];\r\n const walk = (list?: ComboboxOption[]) => {\r\n if (!list?.length) return;\r\n for (const n of list) {\r\n res.push(n);\r\n if (n.items?.length) walk(n.items);\r\n }\r\n };\r\n walk(nodes);\r\n return res;\r\n};\r\n\r\nconst createFetchOptions =\r\n (all: ComboboxOption[], delayMs = 150): ComboboxProps['loadData'] =>\r\n async ({ search }) => {\r\n await sleep(delayMs);\r\n\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n // simple \"contains\" search across flattened options; then return top-level filtered\r\n // (enough for Storybook demos; your real API can do better)\r\n const allFlat = flatten(all);\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n };\r\n\r\n\r\nconst filterTreeBySearch = (\r\n all: ComboboxOption[],\r\n search?: string,\r\n): ComboboxOption[] => {\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n const allFlat = flatten(all);\r\n\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n};\r\n\r\nconst createPaginatedFetchOptions =\r\n (\r\n all: ComboboxOption[],\r\n delayMs = 250,\r\n limit = 20,\r\n ): ComboboxProps['loadData'] =>\r\n async ({ search, offset = 0 }) => {\r\n await sleep(delayMs);\r\n\r\n const filteredTree = filterTreeBySearch(all, search);\r\n const filteredFlat = flatten(filteredTree);\r\n\r\n const data = filteredFlat.slice(offset, offset + limit);\r\n\r\n return {\r\n data,\r\n total: filteredFlat.length,\r\n };\r\n };\r\n\r\nconst BASE_OPTIONS: ComboboxOption[] = [\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n { value: 'fr', label: 'France' },\r\n { value: 'es', label: 'Spain' },\r\n { value: 'it', label: 'Italy' },\r\n];\r\n\r\nconst MANY_OPTIONS: ComboboxOption[] = Array.from({ length: 120 }).map((_, i) => ({\r\n value: `option-${i + 1}`,\r\n label: `Option ${i + 1}`,\r\n}));\r\n\r\nconst NESTED_OPTIONS: ComboboxOption[] = [\r\n {\r\n value: 'europe',\r\n label: 'Europe',\r\n items: [\r\n {\r\n value: 'fr',\r\n label: 'France',\r\n items: [\r\n {\r\n value: 'paris',\r\n label: 'Paris (Île-de-France)',\r\n items: [\r\n { value: 'paris-1', label: 'Paris 1st arrondissement' },\r\n { value: 'paris-3', label: 'Paris 3rd arrondissement' },\r\n { value: 'paris-10', label: 'Paris 10th arrondissement' },\r\n ],\r\n },\r\n { value: 'marseille', label: 'Marseille (Provence-Alpes-Côte d\\'Azur)' },\r\n {\r\n value: 'lyon',\r\n label: 'Lyon (Auvergne-Rhône-Alpes)',\r\n items: [\r\n { value: 'lyon-presquile', label: 'Presqu\\'île (1st/2nd)' },\r\n { value: 'lyon-vieux', label: 'Vieux Lyon' },\r\n ],\r\n },\r\n { value: 'toulouse', label: 'Toulouse (Occitanie)' },\r\n { value: 'bordeaux', label: 'Bordeaux (Nouvelle-Aquitaine)' },\r\n { value: 'strasbourg', label: 'Strasbourg (Grand Est)' },\r\n {\r\n value: 'rennes',\r\n label: 'Rennes (Brittany)',\r\n items: [\r\n { value: 'rennes-centre', label: 'Rennes Centre' },\r\n { value: 'rennes-beauregard', label: 'Beauregard' },\r\n ],\r\n },\r\n ]\r\n },\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n ],\r\n },\r\n {\r\n value: 'north-america',\r\n label: 'North America',\r\n items: [\r\n { value: 'us', label: 'United States' },\r\n { value: 'ca', label: 'Canada' },\r\n { value: 'mx', label: 'Mexico' },\r\n { value: 'north-america-long', label: 'To long option to test wrapping. '.repeat(3) },\r\n {\r\n value: 'north-america-long-single',\r\n label: 'To long option to test wrapping. '.replace(/ /g, '_').repeat(3)\r\n },\r\n ],\r\n },\r\n];\r\nconst getFlattenOptions = (options: ComboboxOption[]) => {\r\n return options.flatMap(option => [\r\n option,\r\n ...(option.items ? getFlattenOptions(option.items) : [])\r\n ]);\r\n};\r\n\r\nconst getAllValues = (options: ComboboxOption[]): string[] => {\r\n return getFlattenOptions(options).map(o => o.value)\r\n};\r\n\r\ntype ControlledProps<T extends ComboboxProps = ComboboxProps> = Omit<T, 'value' | 'onChange'> & {\r\n initialValue?: T['value'];\r\n};\r\n\r\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps<SingleComboboxProps>) {\r\n const [ value, setValue ] = useState<SingleComboboxProps['value']>(initialValue);\r\n const loadData = useMemo(\r\n () => args.loadData,\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [],\r\n );\r\n\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox type='single' {...args} value={value} onChange={setValue} loadData={loadData}\r\n defaultNodeMatched/>\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{String(value || '')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nfunction ControlledComboboxMulti({\r\n initialValue = [],\r\n ...args\r\n }: ControlledProps<MultiComboboxProps>) {\r\n const [ value, setValue ] = useState<MultiComboboxProps['value'] | undefined>(initialValue);\r\n const loadData = useMemo(() => args.loadData, []);\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox\r\n {...args}\r\n type='multi'\r\n value={value}\r\n onChange={setValue}\r\n loadData={loadData}\r\n />\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{(value || []).join(', ')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'Combobox',\r\n component: Combobox,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n disabled: false,\r\n loadData: createFetchOptions(BASE_OPTIONS, 250),\r\n },\r\n argTypes: {\r\n loadData: { control: false },\r\n onChange: { control: false },\r\n onMount: { control: false },\r\n emptyAction: { control: false },\r\n commandInputAction: { control: false },\r\n listHeadAction: { control: false },\r\n options: { control: false },\r\n value: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story/>\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof Combobox>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\n/** 1) Default (async options) */\r\nexport const Default: Story = {\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 2) With initial selected value */\r\nexport const WithValueSelected: Story = {\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\"/>,\r\n};\r\n\r\n/** 3) Disabled */\r\nexport const Disabled: Story = {\r\n args: { disabled: true },\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\"/>,\r\n};\r\n\r\n/** 4) Static options via `options` prop (no async needed, but loadData still required) */\r\nexport const WithStaticOptionsProp: Story = {\r\n args: {\r\n options: BASE_OPTIONS,\r\n loadData: async () => BASE_OPTIONS,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 5) Slow fetch to show loading state on open/search */\r\nexport const SlowFetchLoading: Story = {\r\n args: {\r\n loadData: createFetchOptions(BASE_OPTIONS, 1200),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 6) Empty state with action (search something like \"zzz\") */\r\nexport const EmptyStateWithAction: Story = {\r\n args: {\r\n emptyLabel: 'Nothing found',\r\n emptyAction: (st: ComboboxCallbackStateParams) => {\r\n const canCreate = Boolean(st.search?.trim());\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\r\n disabled={!canCreate}\r\n onClick={() => {\r\n const v = st.search.trim();\r\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\r\n st.setOptions([ next ]);\r\n st.setLoading(false);\r\n }}\r\n >\r\n Create option\r\n </button>\r\n );\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 7) commandInputAction (helper row under input) */\r\nexport const WithCommandInputAction: Story = {\r\n args: {\r\n commandInputAction: (st: ComboboxCallbackStateParams) => (\r\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\r\n <span>\r\n results: <span className=\"font-mono\">{st.options.length}</span>\r\n </span>\r\n <button\r\n type=\"button\"\r\n className=\"underline\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setLoading(false);\r\n }}\r\n >\r\n Clear search\r\n </button>\r\n </div>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 8) listHeadAction (top action inside list) */\r\nexport const WithListHeadAction: Story = {\r\n args: {\r\n listHeadAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left px-3 py-2 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n Close list\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 9) listHeadAction (footer action outside of list) */\r\nexport const WithListFooterAction: Story = {\r\n args: {\r\n listFooterAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left min-h-10 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n list footer action\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 10) Nested options tree */\r\nexport const NestedOptions: Story = {\r\n args: {\r\n loadData: createFetchOptions(NESTED_OPTIONS, 250),\r\n // defaultNodeDisabled: false,\r\n // defaultNodeMatched: false,\r\n // defaultNodeMuted: true,\r\n // defaultNodeInteractive: false,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 11) Multi Nested options tree */\r\nexport const NestedOptionsMulti: Story = {\r\n args: {\r\n loadData: createFetchOptions(NESTED_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'single'>) => {\r\n await sleep(900);\r\n st.setOptions(getFlattenOptions(NESTED_OPTIONS));\r\n },\r\n },\r\n render: (args) => {\r\n const TEST_FULL = false;\r\n const initialValues = TEST_FULL ? getAllValues(NESTED_OPTIONS) : [ 'fr', 'de' ];\r\n return <ControlledComboboxMulti {...args} initialValue={initialValues}/>\r\n },\r\n};\r\n\r\n/** 12) onMount initial loading (simulate prefetch on mount) */\r\nexport const OnMountPrefetch: Story = {\r\n args: {\r\n loadData: createFetchOptions(BASE_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'multi'>) => {\r\n await sleep(900);\r\n st.setOptions(BASE_OPTIONS);\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 13) render custom trigger */\r\nexport const RenderCustomTrigger: Story = {\r\n args: {\r\n renderTrigger: (state) => {\r\n console.log('state', state);\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"w-full\"\r\n onClick={() => state.setOpen((o) => !o)}\r\n >\r\n {state.selectedOption ? `Selected: ${state.selectedOption.label}` : 'Select option...'}\r\n </button>\r\n )\r\n }\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 14) Load more with infinite scroll */\r\nexport const InfiniteScrollLoadMore: Story = {\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n loadData: createPaginatedFetchOptions(MANY_OPTIONS, 500, 20),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","filterTreeBySearch","createPaginatedFetchOptions","limit","offset","filteredTree","filteredFlat","BASE_OPTIONS","MANY_OPTIONS","_","i","NESTED_OPTIONS","getFlattenOptions","options","option","ControlledCombobox","initialValue","args","value","setValue","useState","loadData","useMemo","jsxs","jsx","Combobox","ControlledComboboxMulti","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","NestedOptionsMulti","OnMountPrefetch","RenderCustomTrigger","state","InfiniteScrollLoadMore"],"mappings":";;;AAUA,MAAMA,IAAQ,CAACC,MAAe,IAAI,QAAQ,CAACC,MAAM,WAAWA,GAAGD,CAAE,CAAC,GAE5DE,IAAU,CAACC,IAA0B,OAAyB;AAClE,QAAMC,IAAwB,CAAA,GACxBC,IAAO,CAACC,MAA4B;AACxC,QAAKA,GAAM;AACX,iBAAWC,KAAKD;AACd,QAAAF,EAAI,KAAKG,CAAC,GACNA,EAAE,OAAO,UAAQF,EAAKE,EAAE,KAAK;AAAA,EAErC;AACA,SAAAF,EAAKF,CAAK,GACHC;AACT,GAEMI,IACJ,CAACC,GAAuBC,IAAU,QAChC,OAAO,EAAE,QAAAC,QAAa;AACpB,QAAMZ,EAAMW,CAAO;AAEnB,QAAME,KAAKD,KAAU,IAAI,KAAA,EAAO,YAAA;AAChC,MAAI,CAACC,EAAG,QAAOH;AAIf,QAAMI,IAAUX,EAAQO,CAAG,GACrBK,IAAgB,IAAI;AAAA,IACxBD,EACG,OAAO,CAACE,MAAM,OAAOA,EAAE,KAAK,EAAE,YAAA,EAAc,SAASH,CAAC,CAAC,EACvD,IAAI,CAACG,MAAM,OAAOA,EAAE,KAAK,CAAC;AAAA,EAAA,GAGzBC,IAAa,CAACV,MACXA,EACJ,IAAI,CAACC,MAAM;AACV,UAAMU,IAAQV,EAAE,OAAO,SAASS,EAAWT,EAAE,KAAK,IAAI;AAKtD,WAAI,EAHFO,EAAc,IAAI,OAAOP,EAAE,KAAK,CAAC,KACjC,OAAOA,EAAE,KAAK,EAAE,YAAA,EAAc,SAASK,CAAC,MAExB,CAACK,GAAO,SAAe,OAClC,EAAE,GAAGV,GAAG,OAAAU,EAAA;AAAA,EACjB,CAAC,EACA,OAAO,OAAO;AAGnB,SAAOD,EAAWP,CAAG;AACvB,GAGES,IAAqB,CACzBT,GACAE,MACqB;AACrB,QAAMC,KAAKD,KAAU,IAAI,KAAA,EAAO,YAAA;AAChC,MAAI,CAACC,EAAG,QAAOH;AAEf,QAAMI,IAAUX,EAAQO,CAAG,GAErBK,IAAgB,IAAI;AAAA,IACxBD,EACG,OAAO,CAACE,MAAM,OAAOA,EAAE,KAAK,EAAE,YAAA,EAAc,SAASH,CAAC,CAAC,EACvD,IAAI,CAACG,MAAM,OAAOA,EAAE,KAAK,CAAC;AAAA,EAAA,GAGzBC,IAAa,CAACV,MACXA,EACJ,IAAI,CAACC,MAAM;AACV,UAAMU,IAAQV,EAAE,OAAO,SAASS,EAAWT,EAAE,KAAK,IAAI;AAKtD,WAAI,EAHFO,EAAc,IAAI,OAAOP,EAAE,KAAK,CAAC,KACjC,OAAOA,EAAE,KAAK,EAAE,YAAA,EAAc,SAASK,CAAC,MAExB,CAACK,GAAO,SAAe,OAClC,EAAE,GAAGV,GAAG,OAAAU,EAAA;AAAA,EACjB,CAAC,EACA,OAAO,OAAO;AAGnB,SAAOD,EAAWP,CAAG;AACvB,GAEMU,IACJ,CACEV,GACAC,IAAU,KACVU,IAAQ,OAER,OAAO,EAAE,QAAAT,GAAQ,QAAAU,IAAS,EAAA,MAAQ;AAChC,QAAMtB,EAAMW,CAAO;AAEnB,QAAMY,IAAeJ,EAAmBT,GAAKE,CAAM,GAC7CY,IAAerB,EAAQoB,CAAY;AAIzC,SAAO;AAAA,IACL,MAHWC,EAAa,MAAMF,GAAQA,IAASD,CAAK;AAAA,IAIpD,OAAOG,EAAa;AAAA,EAAA;AAExB,GAEEC,IAAiC;AAAA,EACrC,EAAE,OAAO,MAAM,OAAO,UAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,UAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,QAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,QAAA;AACxB,GAEMC,IAAiC,MAAM,KAAK,EAAE,QAAQ,IAAA,CAAK,EAAE,IAAI,CAACC,GAAGC,OAAO;AAAA,EAChF,OAAO,UAAUA,IAAI,CAAC;AAAA,EACtB,OAAO,UAAUA,IAAI,CAAC;AACxB,EAAE,GAEIC,IAAmC;AAAA,EACvC;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,MACL;AAAA,QACE,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,UACL;AAAA,YACE,OAAO;AAAA,YACP,OAAO;AAAA,YACP,OAAO;AAAA,cACL,EAAE,OAAO,WAAW,OAAO,2BAAA;AAAA,cAC3B,EAAE,OAAO,WAAW,OAAO,2BAAA;AAAA,cAC3B,EAAE,OAAO,YAAY,OAAO,4BAAA;AAAA,YAA4B;AAAA,UAC1D;AAAA,UAEF,EAAE,OAAO,aAAa,OAAO,yCAAA;AAAA,UAC7B;AAAA,YACE,OAAO;AAAA,YACP,OAAO;AAAA,YACP,OAAO;AAAA,cACL,EAAE,OAAO,kBAAkB,OAAO,uBAAA;AAAA,cAClC,EAAE,OAAO,cAAc,OAAO,aAAA;AAAA,YAAa;AAAA,UAC7C;AAAA,UAEF,EAAE,OAAO,YAAY,OAAO,uBAAA;AAAA,UAC5B,EAAE,OAAO,YAAY,OAAO,gCAAA;AAAA,UAC5B,EAAE,OAAO,cAAc,OAAO,yBAAA;AAAA,UAC9B;AAAA,YACE,OAAO;AAAA,YACP,OAAO;AAAA,YACP,OAAO;AAAA,cACL,EAAE,OAAO,iBAAiB,OAAO,gBAAA;AAAA,cACjC,EAAE,OAAO,qBAAqB,OAAO,aAAA;AAAA,YAAa;AAAA,UACpD;AAAA,QACF;AAAA,MACF;AAAA,MAEF,EAAE,OAAO,MAAM,OAAO,UAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,UAAA;AAAA,IAAU;AAAA,EAClC;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,MACL,EAAE,OAAO,MAAM,OAAO,gBAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,MACtB,EAAE,OAAO,sBAAsB,OAAO,oCAAoC,OAAO,CAAC,EAAA;AAAA,MAClF;AAAA,QACE,OAAO;AAAA,QACP,OAAO,oCAAoC,QAAQ,MAAM,GAAG,EAAE,OAAO,CAAC;AAAA,MAAA;AAAA,IACxE;AAAA,EACF;AAEJ,GACMC,IAAoB,CAACC,MAClBA,EAAQ,QAAQ,CAAAC,MAAU;AAAA,EAC/BA;AAAA,EACA,GAAIA,EAAO,QAAQF,EAAkBE,EAAO,KAAK,IAAI,CAAA;AAAC,CACvD;AAWH,SAASC,EAAmB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAA8C;AAChG,QAAM,CAAEC,GAAOC,CAAS,IAAIC,EAAuCJ,CAAY,GACzEK,IAAWC;AAAA,IACf,MAAML,EAAK;AAAA;AAAA,IAEX,CAAA;AAAA,EAAC;AAGH,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAAS,MAAK;AAAA,QAAU,GAAGR;AAAA,QAAM,OAAAC;AAAA,QAAc,UAAUC;AAAA,QAAU,UAAAE;AAAA,QAC1D,oBAAkB;AAAA,MAAA;AAAA,IAAA;AAAA,IAC5B,gBAAAE,EAAC,OAAA,EAAI,WAAU,sCAAqC,UAAA;AAAA,MAAA;AAAA,wBAC1C,QAAA,EAAK,WAAU,aAAa,UAAA,OAAOL,KAAS,EAAE,EAAA,CAAE;AAAA,IAAA,EAAA,CAC1D;AAAA,EAAA,GACF;AAEJ;AAEA,SAASQ,EAAwB;AAAA,EACE,cAAAV,IAAe,CAAA;AAAA,EACf,GAAGC;AACL,GAAwC;AACvE,QAAM,CAAEC,GAAOC,CAAS,IAAIC,EAAkDJ,CAAY,GACpFK,IAAWC,EAAQ,MAAML,EAAK,UAAU,CAAA,CAAE;AAChD,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,MAAK;AAAA,QACL,OAAAC;AAAA,QACA,UAAUC;AAAA,QACV,UAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAE,EAAC,OAAA,EAAI,WAAU,sCAAqC,UAAA;AAAA,MAAA;AAAA,MAC3C,gBAAAC,EAAC,UAAK,WAAU,aAAc,gBAAS,CAAA,GAAI,KAAK,IAAI,EAAA,CAAE;AAAA,IAAA,EAAA,CAC/D;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMG,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWF;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAUlC,EAAmBgB,GAAc,GAAG;AAAA,EAAA;AAAA,EAEhD,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,aAAa,EAAE,SAAS,GAAA;AAAA,IACxB,oBAAoB,EAAE,SAAS,GAAA;AAAA,IAC/B,gBAAgB,EAAE,SAAS,GAAA;AAAA,IAC3B,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,YAAY;AAAA,IACV,CAACqB,MACC,gBAAAJ,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACI,KAAK,EAAA,CACR;AAAA,EAAA;AAGN,GAOaC,IAAiB;AAAA,EAC5B,QAAQ,CAACZ,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGaa,IAA2B;AAAA,EACtC,QAAQ,CAACb,MAAS,gBAAAO,EAACT,KAAoB,GAAGE,GAAM,cAAa,KAAA,CAAI;AACnE,GAGac,IAAkB;AAAA,EAC7B,MAAM,EAAE,UAAU,GAAA;AAAA,EAClB,QAAQ,CAACd,MAAS,gBAAAO,EAACT,KAAoB,GAAGE,GAAM,cAAa,KAAA,CAAI;AACnE,GAGae,IAA+B;AAAA,EAC1C,MAAM;AAAA,IACJ,SAASzB;AAAA,IACT,UAAU,YAAYA;AAAA,EAAA;AAAA,EAExB,QAAQ,CAACU,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGagB,IAA0B;AAAA,EACrC,MAAM;AAAA,IACJ,UAAU1C,EAAmBgB,GAAc,IAAI;AAAA,EAAA;AAAA,EAEjD,QAAQ,CAACU,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGaiB,IAA8B;AAAA,EACzC,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,aAAa,CAACC,MAAoC;AAChD,YAAMC,IAAY,EAAQD,EAAG,QAAQ;AACrC,aACE,gBAAAX;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,UAAU,CAACY;AAAA,UACX,SAAS,MAAM;AACb,kBAAMC,IAAIF,EAAG,OAAO,KAAA,GACdG,IAAuB,EAAE,OAAOD,GAAG,OAAO,WAAWA,CAAC,IAAA;AAC5D,YAAAF,EAAG,WAAW,CAAEG,CAAK,CAAC,GACtBH,EAAG,WAAW,EAAK;AAAA,UACrB;AAAA,UACD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAIL;AAAA,EAAA;AAAA,EAEF,QAAQ,CAAClB,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGasB,IAAgC;AAAA,EAC3C,MAAM;AAAA,IACJ,oBAAoB,CAACJ,MACnB,gBAAAZ,EAAC,OAAA,EAAI,WAAU,6EACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAA,EAAK,UAAA;AAAA,QAAA;AAAA,0BACM,QAAA,EAAK,WAAU,aAAa,UAAAY,EAAG,QAAQ,OAAA,CAAO;AAAA,MAAA,GAC1D;AAAA,MACA,gBAAAX;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM;AACb,YAAAW,EAAG,UAAU,EAAE,GACfA,EAAG,WAAW,EAAK;AAAA,UACrB;AAAA,UACD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF;AAAA,EAAA;AAAA,EAGJ,QAAQ,CAAClB,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGauB,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,gBAAgB,CAACL,MACf,gBAAAX;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM;AACb,UAAAW,EAAG,UAAU,EAAE,GACfA,EAAG,QAAQ,EAAK;AAAA,QAClB;AAAA,QACD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED;AAAA,EAGJ,QAAQ,CAAClB,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGawB,IAA8B;AAAA,EACzC,MAAM;AAAA,IACJ,kBAAkB,CAACN,MACjB,gBAAAX;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM;AACb,UAAAW,EAAG,UAAU,EAAE,GACfA,EAAG,QAAQ,EAAK;AAAA,QAClB;AAAA,QACD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED;AAAA,EAGJ,QAAQ,CAAClB,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGayB,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,UAAUnD,EAAmBoB,GAAgB,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMlD,QAAQ,CAACM,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGa0B,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,UAAUpD,EAAmBoB,GAAgB,GAAG;AAAA,IAChD,SAAS,OAAOwB,MAAsD;AACpE,YAAMrD,EAAM,GAAG,GACfqD,EAAG,WAAWvB,EAAkBD,CAAc,CAAC;AAAA,IACjD;AAAA,EAAA;AAAA,EAEF,QAAQ,CAACM,MAGA,gBAAAO,EAACE,GAAA,EAAyB,GAAGT,GAAM,cADuB,CAAE,MAAM,IAAK,GACR;AAE1E,GAGa2B,IAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,UAAUrD,EAAmBgB,GAAc,GAAG;AAAA,IAC9C,SAAS,OAAO4B,MAAqD;AACnE,YAAMrD,EAAM,GAAG,GACfqD,EAAG,WAAW5B,CAAY;AAAA,IAC5B;AAAA,EAAA;AAAA,EAEF,QAAQ,CAACU,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGa4B,IAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,eAAe,CAACC,OACd,QAAQ,IAAI,SAASA,CAAK,GAExB,gBAAAtB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAMsB,EAAM,QAAQ,CAAChD,MAAM,CAACA,CAAC;AAAA,QAErC,YAAM,iBAAiB,aAAagD,EAAM,eAAe,KAAK,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1E;AAAA,EAEF,QAAQ,CAAC7B,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGa8B,IAAgC;AAAA,EAC3C,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,UAAU7C,EAA4BM,GAAc,KAAK,EAAE;AAAA,EAAA;AAAA,EAE7D,QAAQ,CAACS,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD;"}
1
+ {"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Combobox } from './Combobox';\r\nimport {\r\n ComboboxCallbackStateParams,\r\n ComboboxOption,\r\n ComboboxProps, MultiComboboxProps, SingleComboboxProps,\r\n} from './Combobox.types';\r\n\r\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\r\n\r\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\r\n const res: ComboboxOption[] = [];\r\n const walk = (list?: ComboboxOption[]) => {\r\n if (!list?.length) return;\r\n for (const n of list) {\r\n res.push(n);\r\n if (n.items?.length) walk(n.items);\r\n }\r\n };\r\n walk(nodes);\r\n return res;\r\n};\r\n\r\nconst createFetchOptions =\r\n (all: ComboboxOption[], delayMs = 150): ComboboxProps['loadData'] =>\r\n async ({ search }) => {\r\n await sleep(delayMs);\r\n\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n // simple \"contains\" search across flattened options; then return top-level filtered\r\n // (enough for Storybook demos; your real API can do better)\r\n const allFlat = flatten(all);\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n };\r\n\r\n\r\nconst filterTreeBySearch = (\r\n all: ComboboxOption[],\r\n search?: string,\r\n): ComboboxOption[] => {\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n const allFlat = flatten(all);\r\n\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n};\r\n\r\nconst createPaginatedFetchOptions =\r\n (\r\n all: ComboboxOption[],\r\n delayMs = 250,\r\n limit = 20,\r\n ): ComboboxProps['loadData'] =>\r\n async ({ search, offset = 0 }) => {\r\n await sleep(delayMs);\r\n\r\n const filteredTree = filterTreeBySearch(all, search);\r\n const filteredFlat = flatten(filteredTree);\r\n\r\n const data = filteredFlat.slice(offset, offset + limit);\r\n\r\n return {\r\n data,\r\n total: filteredFlat.length,\r\n };\r\n };\r\n\r\nconst BASE_OPTIONS: ComboboxOption[] = [\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n { value: 'fr', label: 'France' },\r\n { value: 'es', label: 'Spain' },\r\n { value: 'it', label: 'Italy' },\r\n];\r\n\r\nconst MANY_OPTIONS: ComboboxOption[] = Array.from({ length: 120 }).map((_, i) => ({\r\n value: `option-${i + 1}`,\r\n label: `Option ${i + 1}`,\r\n}));\r\n\r\nconst NESTED_OPTIONS: ComboboxOption[] = [\r\n {\r\n value: 'europe',\r\n label: 'Europe',\r\n items: [\r\n {\r\n value: 'fr',\r\n label: 'France',\r\n items: [\r\n {\r\n value: 'paris',\r\n label: 'Paris (Île-de-France)',\r\n items: [\r\n { value: 'paris-1', label: 'Paris 1st arrondissement' },\r\n { value: 'paris-3', label: 'Paris 3rd arrondissement' },\r\n { value: 'paris-10', label: 'Paris 10th arrondissement' },\r\n ],\r\n },\r\n { value: 'marseille', label: 'Marseille (Provence-Alpes-Côte d\\'Azur)' },\r\n {\r\n value: 'lyon',\r\n label: 'Lyon (Auvergne-Rhône-Alpes)',\r\n items: [\r\n { value: 'lyon-presquile', label: 'Presqu\\'île (1st/2nd)' },\r\n { value: 'lyon-vieux', label: 'Vieux Lyon' },\r\n ],\r\n },\r\n { value: 'toulouse', label: 'Toulouse (Occitanie)' },\r\n { value: 'bordeaux', label: 'Bordeaux (Nouvelle-Aquitaine)' },\r\n { value: 'strasbourg', label: 'Strasbourg (Grand Est)' },\r\n {\r\n value: 'rennes',\r\n label: 'Rennes (Brittany)',\r\n items: [\r\n { value: 'rennes-centre', label: 'Rennes Centre' },\r\n { value: 'rennes-beauregard', label: 'Beauregard' },\r\n ],\r\n },\r\n ]\r\n },\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n ],\r\n },\r\n {\r\n value: 'north-america',\r\n label: 'North America',\r\n items: [\r\n { value: 'us', label: 'United States' },\r\n { value: 'ca', label: 'Canada' },\r\n { value: 'mx', label: 'Mexico' },\r\n { value: 'north-america-long', label: 'To long option to test wrapping. '.repeat(3) },\r\n {\r\n value: 'north-america-long-single',\r\n label: 'To long option to test wrapping. '.replace(/ /g, '_').repeat(3)\r\n },\r\n ],\r\n },\r\n];\r\nconst getFlattenOptions = (options: ComboboxOption[]) => {\r\n return options.flatMap(option => [\r\n option,\r\n ...(option.items ? getFlattenOptions(option.items) : [])\r\n ]);\r\n};\r\n\r\nconst getAllValues = (options: ComboboxOption[]): string[] => {\r\n return getFlattenOptions(options).map(o => o.value)\r\n};\r\n\r\ntype ControlledProps<T extends ComboboxProps = ComboboxProps> = Omit<T, 'value' | 'onChange'> & {\r\n initialValue?: T['value'];\r\n};\r\n\r\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps<SingleComboboxProps>) {\r\n const [ value, setValue ] = useState<SingleComboboxProps['value']>(initialValue);\r\n const loadData = useMemo(\r\n () => args.loadData,\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [],\r\n );\r\n\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox type='single' {...args} value={value} onChange={setValue} loadData={loadData}\r\n defaultNodeMatched/>\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{String(value || '')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nfunction ControlledComboboxMulti({\r\n initialValue = [],\r\n ...args\r\n }: ControlledProps<MultiComboboxProps>) {\r\n const [ value, setValue ] = useState<MultiComboboxProps['value'] | undefined>(initialValue);\r\n const loadData = useMemo(() => args.loadData, []);\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox\r\n {...args}\r\n type='multi'\r\n value={value}\r\n onChange={setValue}\r\n loadData={loadData}\r\n />\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{(value || []).join(', ')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'Combobox',\r\n component: Combobox,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n disabled: false,\r\n loadData: createFetchOptions(BASE_OPTIONS, 250),\r\n },\r\n argTypes: {\r\n loadData: { control: false },\r\n onChange: { control: false },\r\n onMount: { control: false },\r\n emptyAction: { control: false },\r\n commandInputAction: { control: false },\r\n listHeadAction: { control: false },\r\n options: { control: false },\r\n value: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story/>\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof Combobox>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\n/** 1) Default (async options) */\r\nexport const Default: Story = {\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 2) With initial selected value */\r\nexport const WithValueSelected: Story = {\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\"/>,\r\n};\r\n\r\n/** 3) Disabled */\r\nexport const Disabled: Story = {\r\n args: { disabled: true },\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\"/>,\r\n};\r\n\r\n/** 4) Static options via `options` prop (no async needed, but loadData still required) */\r\nexport const WithStaticOptionsProp: Story = {\r\n args: {\r\n options: BASE_OPTIONS,\r\n loadData: async () => BASE_OPTIONS,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 5) Slow fetch to show loading state on open/search */\r\nexport const SlowFetchLoading: Story = {\r\n args: {\r\n loadData: createFetchOptions(BASE_OPTIONS, 1200),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 5.1) Forced loading state (opened on mount) */\r\nexport const Loading: Story = {\r\n args: {\r\n loadData: async () => BASE_OPTIONS,\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'single'>) => {\r\n st.setOpen(true);\r\n st.setOptions([]);\r\n st.setLoading(true);\r\n await sleep(1200);\r\n st.setOptions(BASE_OPTIONS);\r\n st.setLoading(false);\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 6) Empty state with action (search something like \"zzz\") */\r\nexport const EmptyStateWithAction: Story = {\r\n args: {\r\n emptyLabel: 'Nothing found',\r\n emptyAction: (st: ComboboxCallbackStateParams) => {\r\n const canCreate = Boolean(st.search?.trim());\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\r\n disabled={!canCreate}\r\n onClick={() => {\r\n const v = st.search.trim();\r\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\r\n st.setOptions([ next ]);\r\n st.setLoading(false);\r\n }}\r\n >\r\n Create option\r\n </button>\r\n );\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 7) commandInputAction (helper row under input) */\r\nexport const WithCommandInputAction: Story = {\r\n args: {\r\n commandInputAction: (st: ComboboxCallbackStateParams) => (\r\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\r\n <span>\r\n results: <span className=\"font-mono\">{st.options.length}</span>\r\n </span>\r\n <button\r\n type=\"button\"\r\n className=\"underline\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setLoading(false);\r\n }}\r\n >\r\n Clear search\r\n </button>\r\n </div>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 8) listHeadAction (top action inside list) */\r\nexport const WithListHeadAction: Story = {\r\n args: {\r\n listHeadAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left px-3 py-2 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n Close list\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 9) listHeadAction (footer action outside of list) */\r\nexport const WithListFooterAction: Story = {\r\n args: {\r\n listFooterAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left min-h-10 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n list footer action\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 10) Nested options tree */\r\nexport const NestedOptions: Story = {\r\n args: {\r\n loadData: createFetchOptions(NESTED_OPTIONS, 250),\r\n // defaultNodeDisabled: false,\r\n // defaultNodeMatched: false,\r\n // defaultNodeMuted: true,\r\n // defaultNodeInteractive: false,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 11) Multi Nested options tree */\r\nexport const NestedOptionsMulti: Story = {\r\n args: {\r\n loadData: createFetchOptions(NESTED_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'single'>) => {\r\n await sleep(900);\r\n st.setOptions(getFlattenOptions(NESTED_OPTIONS));\r\n },\r\n },\r\n render: (args) => {\r\n const TEST_FULL = false;\r\n const initialValues = TEST_FULL ? getAllValues(NESTED_OPTIONS) : [ 'fr', 'de' ];\r\n return <ControlledComboboxMulti {...args} initialValue={initialValues}/>\r\n },\r\n};\r\n\r\n/** 12) onMount initial loading (simulate prefetch on mount) */\r\nexport const OnMountPrefetch: Story = {\r\n args: {\r\n loadData: createFetchOptions(BASE_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'multi'>) => {\r\n await sleep(900);\r\n st.setOptions(BASE_OPTIONS);\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 13) render custom trigger */\r\nexport const RenderCustomTrigger: Story = {\r\n args: {\r\n renderTrigger: (state) => {\r\n console.log('state', state);\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"w-full\"\r\n onClick={() => state.setOpen((o) => !o)}\r\n >\r\n {state.selectedOption ? `Selected: ${state.selectedOption.label}` : 'Select option...'}\r\n </button>\r\n )\r\n }\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 14) Load more with infinite scroll */\r\nexport const InfiniteScrollLoadMore: Story = {\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n loadData: createPaginatedFetchOptions(MANY_OPTIONS, 500, 20),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","filterTreeBySearch","createPaginatedFetchOptions","limit","offset","filteredTree","filteredFlat","BASE_OPTIONS","MANY_OPTIONS","_","i","NESTED_OPTIONS","getFlattenOptions","options","option","ControlledCombobox","initialValue","args","value","setValue","useState","loadData","useMemo","jsxs","jsx","Combobox","ControlledComboboxMulti","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","Loading","st","EmptyStateWithAction","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","NestedOptionsMulti","OnMountPrefetch","RenderCustomTrigger","state","InfiniteScrollLoadMore"],"mappings":"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"}
package/Combobox/ComboboxRenderContent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxRenderContent.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,wCAAwC,EACxC,gCAAgC,EAChC,cAAc,EAAE,aAAa,EAC7B,oBAAoB,EAAE,iCAAiC,EACvD,UAAU,EACX,MAAM,kBAAkB,CAAC;AAM1B,KAAK,0BAA0B,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAC1D,iCAAiC,CAAC,IAAI,CAAC,GACrC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAEtF,OAAO,EAAE,OAAO,CAAC;IAEjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAErB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAElD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAE5D,kBAAkB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAChE,gBAAgB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAE7D,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAEtC,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC,CAAA;AAkBD,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,EAChE,OAAO,0BAA0B,CAAC,IAAI,CAAC,4CAqJxC,CAAA"}
1
+ {"version":3,"file":"ComboboxRenderContent.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,wCAAwC,EACxC,gCAAgC,EAChC,cAAc,EAAE,aAAa,EAC7B,oBAAoB,EAAE,iCAAiC,EACvD,UAAU,EACX,MAAM,kBAAkB,CAAC;AAM1B,KAAK,0BAA0B,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAC1D,iCAAiC,CAAC,IAAI,CAAC,GACrC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAEtF,OAAO,EAAE,OAAO,CAAC;IAEjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAErB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAElD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAE5D,kBAAkB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAChE,gBAAgB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAE7D,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAEtC,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC,CAAA;AAkBD,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,EAChE,OAAO,0BAA0B,CAAC,IAAI,CAAC,4CAyJxC,CAAA"}
package/Combobox/ComboboxRenderContent.js CHANGED
@@ -3,15 +3,15 @@ import { cn as s } from "@oneplatformdev/utils";
3
3
  import { ComboboxRenderOptions as G } from "./ComboboxRenderOptions.js";
4
4
  import { useRef as H, useEffect as J } from "react";
5
5
  import { useInView as T } from "react-intersection-observer";
6
- import { PopoverContent as W } from "../Popover/Popover.js";
7
- import { Command as _, CommandInput as q, CommandList as z, CommandGroup as B, CommandEmpty as y, CommandItem as K } from "../Command/Command.js";
8
- import { LoadingMask as Q } from "../LoadingMask/LoadingMask.js";
9
- import { Skeleton as U } from "../Skeleton/Skeleton.js";
6
+ import { PopoverContent as _ } from "../Popover/Popover.js";
7
+ import { Command as q, CommandInput as z, CommandList as B, CommandGroup as K, CommandEmpty as y, CommandItem as Q } from "../Command/Command.js";
8
+ import { LoadingMask as U } from "../LoadingMask/LoadingMask.js";
9
+ import { Skeleton as W } from "../Skeleton/Skeleton.js";
10
10
  const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-0", children: Array.from({ length: t.length || 2 }).map((c, d) => /* @__PURE__ */ e(
11
11
  "div",
12
12
  {
13
13
  className: "flex items-center min-h-10 w-full px-4",
14
- children: /* @__PURE__ */ e("div", { className: s("flex items-center w-full", t.className), children: /* @__PURE__ */ e(U, { className: "h-4 w-full" }) })
14
+ children: /* @__PURE__ */ e("div", { className: s("flex items-center w-full", t.className), children: /* @__PURE__ */ e(W, { className: "h-4 w-full" }) })
15
15
  },
16
16
  d
17
17
  )) }), ae = (t) => {
@@ -51,16 +51,16 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
51
51
  return J(() => {
52
52
  c && g && V?.();
53
53
  }, [g, c]), /* @__PURE__ */ e(
54
- W,
54
+ _,
55
55
  {
56
56
  className: s(
57
57
  "w-(--radix-popper-anchor-width) max-w-none p-2"
58
58
  ),
59
59
  align: "start",
60
60
  container: E,
61
- children: /* @__PURE__ */ i(_, { shouldFilter: !1, children: [
61
+ children: /* @__PURE__ */ i(q, { shouldFilter: !1, children: [
62
62
  /* @__PURE__ */ e(
63
- q,
63
+ z,
64
64
  {
65
65
  placeholder: F,
66
66
  value: u,
@@ -68,22 +68,22 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
68
68
  }
69
69
  ),
70
70
  typeof p == "function" ? p(o) : p,
71
- /* @__PURE__ */ e(z, { ref: b, children: /* @__PURE__ */ i(
72
- B,
71
+ /* @__PURE__ */ e(B, { ref: b, children: /* @__PURE__ */ i(
72
+ K,
73
73
  {
74
74
  className: s(
75
75
  !x.length && "p-0 shadow-none",
76
76
  "px-0 py-2"
77
77
  ),
78
78
  children: [
79
- r && /* @__PURE__ */ e(Q, { fullWidth: !0 }),
79
+ r && /* @__PURE__ */ e("div", { className: "pt-2 pb-0", children: /* @__PURE__ */ e(U, {}) }),
80
80
  !r && m && /* @__PURE__ */ e(w, { children: n ? /* @__PURE__ */ i(y, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
81
81
  /* @__PURE__ */ e("span", { children: N }),
82
82
  typeof n == "function" ? n(o) : n
83
83
  ] }) : /* @__PURE__ */ e(y, { children: N }) }),
84
84
  !r && !m && /* @__PURE__ */ i(w, { children: [
85
85
  l && /* @__PURE__ */ e(
86
- K,
86
+ Q,
87
87
  {
88
88
  asChild: !0,
89
89
  className: "w-full",
package/Combobox/ComboboxRenderContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\r\nimport { PopoverContent } from '../Popover';\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '../Command';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport {\r\n ComboboxCallbackStateParamsRenderHandler,\r\n ComboboxCallbackStateParamsUnion,\r\n ComboboxOption, ComboboxProps,\r\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\r\n ISlotProps,\r\n} from './Combobox.types';\r\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\r\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\r\nimport { useInView } from \"react-intersection-observer\";\r\nimport { Skeleton } from \"../Skeleton\";\r\n\r\ntype ComboboxRenderContentProps<Data extends object = object> =\r\n IComboboxOptionsNodeHandlersProps<Data>\r\n & {\r\n open?: boolean;\r\n\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n\r\n hasNext: boolean;\r\n\r\n loading: boolean;\r\n loadingMore: boolean;\r\n\r\n options: ComboboxOption<Data>[];\r\n search?: string;\r\n onSearch?: (term: string) => void;\r\n isEmptyList?: boolean;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n\r\n searchLabel?: string;\r\n emptyLabel?: string;\r\n\r\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\r\n\r\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n\r\n slotProps?: ISlotProps;\r\n\r\n popoverContainer?: HTMLElement | null;\r\n\r\n onLoadMore?: () => Promise<void>;\r\n}\r\n\r\nconst SkeletonItems = (props: HTMLAttributes<HTMLDivElement> & { length?: number }) => (\r\n <div className=\"flex w-full flex-col gap-0\">\r\n {Array.from({ length: props.length || 2 }).map((_, i) => (\r\n <div\r\n key={i}\r\n className='flex items-center min-h-10 w-full px-4'\r\n >\r\n <div className={cn('flex items-center w-full', props.className)}>\r\n <Skeleton className='h-4 w-full'/>\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n);\r\n\r\n\r\nexport const ComboboxRenderContent = <Data extends object = object>(\r\n props: ComboboxRenderContentProps<Data>\r\n) => {\r\n const {\r\n open,\r\n type,\r\n search,\r\n onSearch,\r\n hasNext,\r\n loading,\r\n loadingMore,\r\n isEmptyList,\r\n onSelect,\r\n options = [],\r\n callbackStateParams,\r\n value,\r\n searchLabel = 'Type to search...',\r\n emptyLabel = 'No options',\r\n emptyAction,\r\n commandInputAction,\r\n listHeadAction,\r\n listFooterAction,\r\n slotProps = {},\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n forcePointerSelect,\r\n popoverContainer,\r\n renderList,\r\n onLoadMore,\r\n } = props;\r\n\r\n const scrollRootRef = useRef<HTMLDivElement>(null);\r\n const { ref: sentinelRef, inView } = useInView({\r\n root: scrollRootRef.current,\r\n rootMargin: \"0px 0px 200px 0px\",\r\n threshold: 0,\r\n });\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n if (!inView) return;\r\n void onLoadMore?.();\r\n }, [ inView, open ]);\r\n\r\n return (\r\n <PopoverContent\r\n className={cn(\r\n \"w-(--radix-popper-anchor-width) max-w-none p-2\"\r\n )}\r\n align=\"start\"\r\n container={popoverContainer}\r\n >\r\n <Command shouldFilter={false}>\r\n <CommandInput\r\n placeholder={searchLabel}\r\n value={search}\r\n onValueChange={onSearch}\r\n />\r\n {typeof commandInputAction === 'function'\r\n ? commandInputAction(callbackStateParams)\r\n : commandInputAction}\r\n\r\n <CommandList ref={scrollRootRef}>\r\n <CommandGroup\r\n className={cn(\r\n !options.length && 'p-0 shadow-none',\r\n 'px-0 py-2',\r\n )}\r\n >\r\n {loading && <LoadingMask fullWidth/>}\r\n {!loading && isEmptyList && (\r\n <>\r\n {emptyAction ? (\r\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\r\n <span>{emptyLabel}</span>\r\n {typeof emptyAction === 'function'\r\n ? emptyAction(callbackStateParams)\r\n : emptyAction}\r\n </CommandEmpty>\r\n ) : (\r\n <CommandEmpty>{emptyLabel}</CommandEmpty>\r\n )}\r\n </>\r\n )}\r\n\r\n {!loading && !isEmptyList && (\r\n <>\r\n {listHeadAction && (\r\n <CommandItem\r\n key='combobox-list-head-action'\r\n asChild\r\n className='w-full'\r\n >\r\n {typeof listHeadAction === 'function'\r\n ? listHeadAction(callbackStateParams)\r\n : listHeadAction}\r\n </CommandItem>\r\n )}\r\n\r\n {renderList && renderList(callbackStateParams)}\r\n\r\n {!renderList && (\r\n <ComboboxRenderOptions\r\n type={type}\r\n search={search}\r\n value={value}\r\n options={options}\r\n onSelect={onSelect}\r\n defaultNodeDisabled={defaultNodeDisabled}\r\n defaultNodeMatched={defaultNodeMatched}\r\n defaultNodeMuted={defaultNodeMuted}\r\n defaultNodeInteractive={defaultNodeInteractive}\r\n forcePointerSelect={forcePointerSelect}/>\r\n )}\r\n\r\n {hasNext && <div ref={sentinelRef} className=\"h-px w-full\"/>}\r\n {loadingMore && <SkeletonItems />}\r\n </>\r\n )}\r\n\r\n </CommandGroup>\r\n </CommandList>\r\n\r\n {/*LIST FOOTER ACTION*/}\r\n {!loading && listFooterAction && !isEmptyList && (\r\n <div\r\n data-slot=\"command-footer-wrapper\"\r\n {...((() => {\r\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\r\n return {\r\n ...rest,\r\n 'data-slot-bordered': JSON.stringify(bordered)\r\n }\r\n })())}\r\n className={cn(\r\n \"flex w-full items-center gap-2 px-0\",\r\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\r\n slotProps?.listFooterAction?.className,\r\n )}\r\n >\r\n {typeof listFooterAction === 'function'\r\n ? listFooterAction(callbackStateParams)\r\n : listFooterAction}\r\n </div>\r\n )}\r\n </Command>\r\n </PopoverContent>\r\n );\r\n}\r\n"],"names":["SkeletonItems","props","_","i","jsx","cn","Skeleton","ComboboxRenderContent","open","type","search","onSearch","hasNext","loading","loadingMore","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","forcePointerSelect","popoverContainer","renderList","onLoadMore","scrollRootRef","useRef","sentinelRef","inView","useInView","useEffect","PopoverContent","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":"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"}
1
+ {"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\r\nimport { PopoverContent } from '../Popover';\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '../Command';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport {\r\n ComboboxCallbackStateParamsRenderHandler,\r\n ComboboxCallbackStateParamsUnion,\r\n ComboboxOption, ComboboxProps,\r\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\r\n ISlotProps,\r\n} from './Combobox.types';\r\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\r\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\r\nimport { useInView } from \"react-intersection-observer\";\r\nimport { Skeleton } from \"../Skeleton\";\r\n\r\ntype ComboboxRenderContentProps<Data extends object = object> =\r\n IComboboxOptionsNodeHandlersProps<Data>\r\n & {\r\n open?: boolean;\r\n\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n\r\n hasNext: boolean;\r\n\r\n loading: boolean;\r\n loadingMore: boolean;\r\n\r\n options: ComboboxOption<Data>[];\r\n search?: string;\r\n onSearch?: (term: string) => void;\r\n isEmptyList?: boolean;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n\r\n searchLabel?: string;\r\n emptyLabel?: string;\r\n\r\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\r\n\r\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n\r\n slotProps?: ISlotProps;\r\n\r\n popoverContainer?: HTMLElement | null;\r\n\r\n onLoadMore?: () => Promise<void>;\r\n}\r\n\r\nconst SkeletonItems = (props: HTMLAttributes<HTMLDivElement> & { length?: number }) => (\r\n <div className=\"flex w-full flex-col gap-0\">\r\n {Array.from({ length: props.length || 2 }).map((_, i) => (\r\n <div\r\n key={i}\r\n className='flex items-center min-h-10 w-full px-4'\r\n >\r\n <div className={cn('flex items-center w-full', props.className)}>\r\n <Skeleton className='h-4 w-full'/>\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n);\r\n\r\n\r\nexport const ComboboxRenderContent = <Data extends object = object>(\r\n props: ComboboxRenderContentProps<Data>\r\n) => {\r\n const {\r\n open,\r\n type,\r\n search,\r\n onSearch,\r\n hasNext,\r\n loading,\r\n loadingMore,\r\n isEmptyList,\r\n onSelect,\r\n options = [],\r\n callbackStateParams,\r\n value,\r\n searchLabel = 'Type to search...',\r\n emptyLabel = 'No options',\r\n emptyAction,\r\n commandInputAction,\r\n listHeadAction,\r\n listFooterAction,\r\n slotProps = {},\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n forcePointerSelect,\r\n popoverContainer,\r\n renderList,\r\n onLoadMore,\r\n } = props;\r\n\r\n const scrollRootRef = useRef<HTMLDivElement>(null);\r\n const { ref: sentinelRef, inView } = useInView({\r\n root: scrollRootRef.current,\r\n rootMargin: \"0px 0px 200px 0px\",\r\n threshold: 0,\r\n });\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n if (!inView) return;\r\n void onLoadMore?.();\r\n }, [ inView, open ]);\r\n\r\n return (\r\n <PopoverContent\r\n className={cn(\r\n \"w-(--radix-popper-anchor-width) max-w-none p-2\"\r\n )}\r\n align=\"start\"\r\n container={popoverContainer}\r\n >\r\n <Command shouldFilter={false}>\r\n <CommandInput\r\n placeholder={searchLabel}\r\n value={search}\r\n onValueChange={onSearch}\r\n />\r\n {typeof commandInputAction === 'function'\r\n ? commandInputAction(callbackStateParams)\r\n : commandInputAction}\r\n\r\n <CommandList ref={scrollRootRef}>\r\n <CommandGroup\r\n className={cn(\r\n !options.length && 'p-0 shadow-none',\r\n 'px-0 py-2',\r\n )}\r\n >\r\n {loading && (\r\n <div className=\"pt-2 pb-0\">\r\n <LoadingMask />\r\n </div>\r\n )}\r\n {!loading && isEmptyList && (\r\n <>\r\n {emptyAction ? (\r\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\r\n <span>{emptyLabel}</span>\r\n {typeof emptyAction === 'function'\r\n ? emptyAction(callbackStateParams)\r\n : emptyAction}\r\n </CommandEmpty>\r\n ) : (\r\n <CommandEmpty>{emptyLabel}</CommandEmpty>\r\n )}\r\n </>\r\n )}\r\n\r\n {!loading && !isEmptyList && (\r\n <>\r\n {listHeadAction && (\r\n <CommandItem\r\n key='combobox-list-head-action'\r\n asChild\r\n className='w-full'\r\n >\r\n {typeof listHeadAction === 'function'\r\n ? listHeadAction(callbackStateParams)\r\n : listHeadAction}\r\n </CommandItem>\r\n )}\r\n\r\n {renderList && renderList(callbackStateParams)}\r\n\r\n {!renderList && (\r\n <ComboboxRenderOptions\r\n type={type}\r\n search={search}\r\n value={value}\r\n options={options}\r\n onSelect={onSelect}\r\n defaultNodeDisabled={defaultNodeDisabled}\r\n defaultNodeMatched={defaultNodeMatched}\r\n defaultNodeMuted={defaultNodeMuted}\r\n defaultNodeInteractive={defaultNodeInteractive}\r\n forcePointerSelect={forcePointerSelect}/>\r\n )}\r\n\r\n {hasNext && <div ref={sentinelRef} className=\"h-px w-full\"/>}\r\n {loadingMore && <SkeletonItems />}\r\n </>\r\n )}\r\n\r\n </CommandGroup>\r\n </CommandList>\r\n\r\n {/*LIST FOOTER ACTION*/}\r\n {!loading && listFooterAction && !isEmptyList && (\r\n <div\r\n data-slot=\"command-footer-wrapper\"\r\n {...((() => {\r\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\r\n return {\r\n ...rest,\r\n 'data-slot-bordered': JSON.stringify(bordered)\r\n }\r\n })())}\r\n className={cn(\r\n \"flex w-full items-center gap-2 px-0\",\r\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\r\n slotProps?.listFooterAction?.className,\r\n )}\r\n >\r\n {typeof listFooterAction === 'function'\r\n ? listFooterAction(callbackStateParams)\r\n : listFooterAction}\r\n </div>\r\n )}\r\n </Command>\r\n </PopoverContent>\r\n );\r\n}\r\n"],"names":["SkeletonItems","props","_","i","jsx","cn","Skeleton","ComboboxRenderContent","open","type","search","onSearch","hasNext","loading","loadingMore","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","forcePointerSelect","popoverContainer","renderList","onLoadMore","scrollRootRef","useRef","sentinelRef","inView","useInView","useEffect","PopoverContent","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":"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"}
package/Combobox/ComboboxRenderTrigger.js CHANGED
@@ -1,25 +1,25 @@
1
- import { jsx as r, jsxs as p, Fragment as b } from "react/jsx-runtime";
2
- import { DEFAULT_COMBOBOX_TYPE as h } from "./Combobox.types.js";
3
- import { cn as d } from "@oneplatformdev/utils";
1
+ import { jsx as r, jsxs as p, Fragment as h } from "react/jsx-runtime";
2
+ import { DEFAULT_COMBOBOX_TYPE as g } from "./Combobox.types.js";
3
+ import { cn as u } from "@oneplatformdev/utils";
4
4
  import { XIcon as f, ChevronDown as v } from "lucide-react";
5
5
  import { useMemo as w } from "react";
6
6
  import { PopoverTrigger as x } from "../Popover/Popover.js";
7
7
  import { Button as y } from "../Button/Button.js";
8
8
  import { LoadingMask as C } from "../LoadingMask/LoadingMask.js";
9
- import { ScrollArea as N } from "../ScrollArea/ScrollArea.js";
10
- const g = (o) => {
9
+ import { ScrollArea as F } from "../ScrollArea/ScrollArea.js";
10
+ const b = (o) => {
11
11
  const { value: n, flattenOptions: a = [], selectedOptions: t = /* @__PURE__ */ new Map() } = o;
12
12
  return w(() => {
13
13
  if (!n) return [];
14
- const c = Array.from(t.values()), l = Array.isArray(n) ? n : [n], u = [...a.filter((i) => l.find((s) => String(s).toLowerCase() === String(i.value).toLowerCase())), ...c].reduce((i, s) => (!s || i.has(s.value) || i.set(s.value, { ...s, label: s.label || s.value }), i), /* @__PURE__ */ new Map());
15
- return u.size ? Array.from(u.values()) : l.map((i) => ({ value: i, label: String(i) }));
14
+ const c = Array.from(t.values()), l = Array.isArray(n) ? n : [n], d = [...a.filter((i) => l.find((s) => String(s).toLowerCase() === String(i.value).toLowerCase())), ...c].reduce((i, s) => (!s || i.has(s.value) || i.set(s.value, { ...s, label: s.label || s.value }), i), /* @__PURE__ */ new Map());
15
+ return d.size ? Array.from(d.values()) : l.map((i) => ({ value: i, label: String(i) }));
16
16
  }, [n, a, t]);
17
- }, k = (o) => {
18
- const { type: n = h, placeholder: a, onSelect: t, open: c } = o, l = g(o);
17
+ }, N = (o) => {
18
+ const { type: n = g, placeholder: a, onSelect: t, open: c } = o, l = b(o);
19
19
  return l.length ? n === "single" ? /* @__PURE__ */ r("span", { className: "truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8", children: l[0].label }) : n === "multi" ? /* @__PURE__ */ r(
20
- N,
20
+ F,
21
21
  {
22
- className: d(
22
+ className: u(
23
23
  "w-full h-auto min-h-5 max-h-20.25",
24
24
  "overflow-y-auto overflow-x-hidden"
25
25
  ),
@@ -31,7 +31,7 @@ const g = (o) => {
31
31
  children: /* @__PURE__ */ r("div", { className: "p-0 gap-1 flex flex-wrap w-full pr-11", children: l.map((e) => e ? /* @__PURE__ */ p(
32
32
  "div",
33
33
  {
34
- className: d(
34
+ className: u(
35
35
  "flex items-center justify-center",
36
36
  "py-1 px-2 min-h-5 w-fit gap-1",
37
37
  "bg-[#9368FF] rounded-sm",
@@ -39,8 +39,8 @@ const g = (o) => {
39
39
  "cursor-pointer",
40
40
  "truncate"
41
41
  ),
42
- onClick: (u) => {
43
- c && (u.preventDefault(), u.stopPropagation(), t?.(e));
42
+ onClick: (d) => {
43
+ c && (d.preventDefault(), d.stopPropagation(), t?.(e));
44
44
  },
45
45
  children: [
46
46
  /* @__PURE__ */ r("span", { className: "whitespace-pre-wrap wrap-break-word line-clamp-1", children: e.label }),
@@ -57,7 +57,7 @@ const g = (o) => {
57
57
  "div",
58
58
  {
59
59
  ...l,
60
- className: d(
60
+ className: u(
61
61
  "absolute top-1/2 -translate-y-1/2 right-1",
62
62
  "flex items-center justify-center",
63
63
  "w-10 h-10 [&_svg]:size-5!",
@@ -71,8 +71,8 @@ const g = (o) => {
71
71
  children: n
72
72
  }
73
73
  );
74
- }, A = (o) => {
75
- const { open: n, onClearSelections: a } = o, t = g(o);
74
+ }, k = (o) => {
75
+ const { open: n, onClearSelections: a } = o, t = b(o);
76
76
  return n ? t.length ? /* @__PURE__ */ r(m, { onClick: () => a?.(), children: /* @__PURE__ */ r(f, {}) }) : null : /* @__PURE__ */ r(m, { prevented: !1, children: /* @__PURE__ */ r(v, {}) });
77
77
  }, E = (o) => {
78
78
  const {
@@ -90,13 +90,13 @@ const g = (o) => {
90
90
  color: "secondary",
91
91
  role: "combobox",
92
92
  "aria-expanded": a,
93
- className: d(
93
+ className: u(
94
94
  "relative w-full justify-between bg-transparent",
95
95
  !e && "font-normal text-sm",
96
96
  "border border-border",
97
- a && "border-1 outline-hidden ring-1 ring-ring",
97
+ a && "border-1 border-[#9368FF] outline-hidden ring-0 hover:border-[#9368FF] hover:bg-transparent",
98
98
  n === "multi" && "pr-0",
99
- "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
99
+ "focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]",
100
100
  e && "p-0",
101
101
  e && a && "p-0 border-1 ring-0 ring-transparent"
102
102
  ),
@@ -104,9 +104,9 @@ const g = (o) => {
104
104
  children: [
105
105
  t && /* @__PURE__ */ r(C, { fullWidth: !0 }),
106
106
  !t && e && e(c),
107
- !t && !e && /* @__PURE__ */ p(b, { children: [
108
- /* @__PURE__ */ r(k, { ...o }),
109
- /* @__PURE__ */ r(A, { ...o })
107
+ !t && !e && /* @__PURE__ */ p(h, { children: [
108
+ /* @__PURE__ */ r(N, { ...o }),
109
+ /* @__PURE__ */ r(k, { ...o })
110
110
  ] })
111
111
  ]
112
112
  }
package/Combobox/ComboboxRenderTrigger.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxRenderTrigger.js","sources":["../../src/Combobox/ComboboxRenderTrigger.tsx"],"sourcesContent":["import {\r\n ComboboxCallbackStateParamsRenderHandler,\r\n ComboboxCallbackStateParamsUnion,\r\n ComboboxOption,\r\n ComboboxProps, ComboboxSelectedType,\r\n DEFAULT_COMBOBOX_TYPE\r\n} from \"./Combobox.types\";\r\nimport { Button } from \"../Button\";\r\nimport { cn } from \"@oneplatformdev/utils\";\r\nimport { LoadingMask } from \"../LoadingMask\";\r\nimport { ChevronDown, XIcon } from \"lucide-react\";\r\nimport { PopoverTrigger } from \"../Popover\";\r\nimport { HTMLAttributes, useMemo } from \"react\";\r\nimport { ScrollArea } from \"../ScrollArea\";\r\n\r\ntype ComboboxRenderTriggerProps<Data extends object = object> = {\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n open: boolean;\r\n initialLoading: boolean;\r\n flattenOptions: ComboboxOption<Data>[];\r\n selectedOptions?: Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n onClearSelections?: () => void;\r\n\r\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\r\n renderTrigger?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n\r\n placeholder?: string;\r\n disabled?: boolean;\r\n}\r\n\r\nconst useValues = <Data extends object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n): ComboboxOption<Data>[] => {\r\n const { value, flattenOptions = [], selectedOptions = new Map() } = props;\r\n return useMemo(() => {\r\n if (!value) return [];\r\n const selectedOption = Array.from(selectedOptions.values());\r\n const vls = Array.isArray(value) ? value : [ value ];\r\n const flattenedOptionValues = flattenOptions.filter(o => {\r\n return vls.find(v => String(v).toLowerCase() === String(o.value).toLowerCase())\r\n });\r\n\r\n const labels = [ ...flattenedOptionValues, ...selectedOption ]\r\n .reduce<Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>>((acc, o) => {\r\n if (!o) return acc;\r\n if (acc.has(o.value)) return acc;\r\n acc.set(o.value, { ...o, label: o.label || o.value });\r\n return acc;\r\n }, new Map())\r\n if (!labels.size) return vls.map(v => ({ value: v, label: String(v) }));\r\n return Array.from(labels.values());\r\n }, [ value, flattenOptions, selectedOptions ])\r\n}\r\n\r\nconst ComboboxRenderTriggerLabel = <Data extends object = object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const { type = DEFAULT_COMBOBOX_TYPE, placeholder, onSelect, open } = props;\r\n const values = useValues(props);\r\n\r\n if (!values.length) {\r\n return (\r\n <span className=\"text-gray-400 whitespace-pre-wrap break-words line-clamp-1 pr-11\">\r\n {placeholder}\r\n </span>\r\n )\r\n }\r\n\r\n if (type === 'single') {\r\n return (\r\n <span className=\"truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8\">\r\n {values[0].label}\r\n </span>\r\n )\r\n }\r\n\r\n if (type === 'multi') {\r\n return (\r\n <ScrollArea\r\n className={cn(\r\n \"w-full h-auto min-h-5 max-h-20.25\",\r\n 'overflow-y-auto overflow-x-hidden',\r\n )}\r\n slotProps={{\r\n viewport: {\r\n className: '[&>div]:block!',\r\n }\r\n }}\r\n >\r\n <div className=\"p-0 gap-1 flex flex-wrap w-full pr-11\">\r\n {values.map((item) => {\r\n if (!item) return null;\r\n return (\r\n <div\r\n key={item.value}\r\n className={cn(\r\n 'flex items-center justify-center',\r\n 'py-1 px-2 min-h-5 w-fit gap-1',\r\n 'bg-[#9368FF] rounded-sm',\r\n 'text-[#FCFCFC] leading-none text-xs font-semibold',\r\n 'cursor-pointer',\r\n 'truncate',\r\n )}\r\n onClick={(e) => {\r\n if(!open) return;\r\n e.preventDefault();\r\n e.stopPropagation();\r\n onSelect?.(item)\r\n }}\r\n >\r\n <span className='whitespace-pre-wrap wrap-break-word line-clamp-1'>\r\n {item.label}\r\n </span>\r\n <XIcon className='size-3! shrink-0 text-white!'/>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n </ScrollArea>\r\n )\r\n }\r\n\r\n return 'No supported to render'\r\n}\r\n\r\nconst EndAdornmentWrapper = (\r\n props: HTMLAttributes<HTMLDivElement> & {\r\n prevented?: boolean;\r\n }\r\n) => {\r\n const { children, prevented = true, onClick, className, ...rest } = props;\r\n return (\r\n <div\r\n {...rest}\r\n className={cn(\r\n 'absolute top-1/2 -translate-y-1/2 right-1',\r\n 'flex items-center justify-center',\r\n 'w-10 h-10 [&_svg]:size-5!',\r\n 'opacity-50 cursor-pointer hover:opacity-100',\r\n className,\r\n )}\r\n onClick={(e) => {\r\n if (!prevented) return onClick?.(e);\r\n e.stopPropagation();\r\n e.preventDefault();\r\n onClick?.(e);\r\n }}\r\n >\r\n {children}\r\n </div>\r\n )\r\n}\r\nconst ComboboxRenderTriggerEndAdornment = <Data extends object = object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const { open, onClearSelections } = props;\r\n const values = useValues(props);\r\n\r\n if (!open) {\r\n return (\r\n <EndAdornmentWrapper prevented={false}>\r\n <ChevronDown/>\r\n </EndAdornmentWrapper>\r\n )\r\n }\r\n\r\n if (!values.length) return null\r\n\r\n return (\r\n <EndAdornmentWrapper onClick={() => onClearSelections?.()}>\r\n <XIcon/>\r\n </EndAdornmentWrapper>\r\n )\r\n}\r\n\r\nexport const ComboboxRenderTrigger = <Data extends object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const {\r\n type,\r\n open,\r\n initialLoading,\r\n callbackStateParams,\r\n disabled,\r\n renderTrigger,\r\n } = props;\r\n\r\n return (\r\n <PopoverTrigger asChild className=\"border-input\">\r\n <Button\r\n variant={renderTrigger ? 'none' : 'contained'}\r\n color='secondary'\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n className={cn(\r\n 'relative w-full justify-between bg-transparent',\r\n !renderTrigger && 'font-normal text-sm',\r\n 'border border-border',\r\n open && 'border-1 outline-hidden ring-1 ring-ring',\r\n type === 'multi' && 'pr-0',\r\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\r\n renderTrigger && 'p-0',\r\n renderTrigger && open && 'p-0 border-1 ring-0 ring-transparent',\r\n )}\r\n disabled={disabled || initialLoading}\r\n >\r\n {initialLoading && <LoadingMask fullWidth/>}\r\n {!initialLoading && renderTrigger && renderTrigger(callbackStateParams)}\r\n {!initialLoading && !renderTrigger && (\r\n <>\r\n <ComboboxRenderTriggerLabel {...props} />\r\n <ComboboxRenderTriggerEndAdornment {...props} />\r\n </>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n )\r\n}\r\n"],"names":["useValues","props","value","flattenOptions","selectedOptions","useMemo","selectedOption","vls","labels","o","v","acc","ComboboxRenderTriggerLabel","type","DEFAULT_COMBOBOX_TYPE","placeholder","onSelect","open","values","jsx","ScrollArea","cn","item","jsxs","e","XIcon","EndAdornmentWrapper","children","prevented","onClick","className","rest","ComboboxRenderTriggerEndAdornment","onClearSelections","ChevronDown","ComboboxRenderTrigger","initialLoading","callbackStateParams","disabled","renderTrigger","PopoverTrigger","Button","LoadingMask","Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"ComboboxRenderTrigger.js","sources":["../../src/Combobox/ComboboxRenderTrigger.tsx"],"sourcesContent":["import {\r\n ComboboxCallbackStateParamsRenderHandler,\r\n ComboboxCallbackStateParamsUnion,\r\n ComboboxOption,\r\n ComboboxProps, ComboboxSelectedType,\r\n DEFAULT_COMBOBOX_TYPE\r\n} from \"./Combobox.types\";\r\nimport { Button } from \"../Button\";\r\nimport { cn } from \"@oneplatformdev/utils\";\r\nimport { LoadingMask } from \"../LoadingMask\";\r\nimport { ChevronDown, XIcon } from \"lucide-react\";\r\nimport { PopoverTrigger } from \"../Popover\";\r\nimport { HTMLAttributes, useMemo } from \"react\";\r\nimport { ScrollArea } from \"../ScrollArea\";\r\n\r\ntype ComboboxRenderTriggerProps<Data extends object = object> = {\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n open: boolean;\r\n initialLoading: boolean;\r\n flattenOptions: ComboboxOption<Data>[];\r\n selectedOptions?: Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n onClearSelections?: () => void;\r\n\r\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\r\n renderTrigger?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n\r\n placeholder?: string;\r\n disabled?: boolean;\r\n}\r\n\r\nconst useValues = <Data extends object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n): ComboboxOption<Data>[] => {\r\n const { value, flattenOptions = [], selectedOptions = new Map() } = props;\r\n return useMemo(() => {\r\n if (!value) return [];\r\n const selectedOption = Array.from(selectedOptions.values());\r\n const vls = Array.isArray(value) ? value : [ value ];\r\n const flattenedOptionValues = flattenOptions.filter(o => {\r\n return vls.find(v => String(v).toLowerCase() === String(o.value).toLowerCase())\r\n });\r\n\r\n const labels = [ ...flattenedOptionValues, ...selectedOption ]\r\n .reduce<Map<ComboboxOption<Data>['value'], ComboboxOption<Data>>>((acc, o) => {\r\n if (!o) return acc;\r\n if (acc.has(o.value)) return acc;\r\n acc.set(o.value, { ...o, label: o.label || o.value });\r\n return acc;\r\n }, new Map())\r\n if (!labels.size) return vls.map(v => ({ value: v, label: String(v) }));\r\n return Array.from(labels.values());\r\n }, [ value, flattenOptions, selectedOptions ])\r\n}\r\n\r\nconst ComboboxRenderTriggerLabel = <Data extends object = object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const { type = DEFAULT_COMBOBOX_TYPE, placeholder, onSelect, open } = props;\r\n const values = useValues(props);\r\n\r\n if (!values.length) {\r\n return (\r\n <span className=\"text-gray-400 whitespace-pre-wrap break-words line-clamp-1 pr-11\">\r\n {placeholder}\r\n </span>\r\n )\r\n }\r\n\r\n if (type === 'single') {\r\n return (\r\n <span className=\"truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8\">\r\n {values[0].label}\r\n </span>\r\n )\r\n }\r\n\r\n if (type === 'multi') {\r\n return (\r\n <ScrollArea\r\n className={cn(\r\n \"w-full h-auto min-h-5 max-h-20.25\",\r\n 'overflow-y-auto overflow-x-hidden',\r\n )}\r\n slotProps={{\r\n viewport: {\r\n className: '[&>div]:block!',\r\n }\r\n }}\r\n >\r\n <div className=\"p-0 gap-1 flex flex-wrap w-full pr-11\">\r\n {values.map((item) => {\r\n if (!item) return null;\r\n return (\r\n <div\r\n key={item.value}\r\n className={cn(\r\n 'flex items-center justify-center',\r\n 'py-1 px-2 min-h-5 w-fit gap-1',\r\n 'bg-[#9368FF] rounded-sm',\r\n 'text-[#FCFCFC] leading-none text-xs font-semibold',\r\n 'cursor-pointer',\r\n 'truncate',\r\n )}\r\n onClick={(e) => {\r\n if(!open) return;\r\n e.preventDefault();\r\n e.stopPropagation();\r\n onSelect?.(item)\r\n }}\r\n >\r\n <span className='whitespace-pre-wrap wrap-break-word line-clamp-1'>\r\n {item.label}\r\n </span>\r\n <XIcon className='size-3! shrink-0 text-white!'/>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n </ScrollArea>\r\n )\r\n }\r\n\r\n return 'No supported to render'\r\n}\r\n\r\nconst EndAdornmentWrapper = (\r\n props: HTMLAttributes<HTMLDivElement> & {\r\n prevented?: boolean;\r\n }\r\n) => {\r\n const { children, prevented = true, onClick, className, ...rest } = props;\r\n return (\r\n <div\r\n {...rest}\r\n className={cn(\r\n 'absolute top-1/2 -translate-y-1/2 right-1',\r\n 'flex items-center justify-center',\r\n 'w-10 h-10 [&_svg]:size-5!',\r\n 'opacity-50 cursor-pointer hover:opacity-100',\r\n className,\r\n )}\r\n onClick={(e) => {\r\n if (!prevented) return onClick?.(e);\r\n e.stopPropagation();\r\n e.preventDefault();\r\n onClick?.(e);\r\n }}\r\n >\r\n {children}\r\n </div>\r\n )\r\n}\r\nconst ComboboxRenderTriggerEndAdornment = <Data extends object = object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const { open, onClearSelections } = props;\r\n const values = useValues(props);\r\n\r\n if (!open) {\r\n return (\r\n <EndAdornmentWrapper prevented={false}>\r\n <ChevronDown/>\r\n </EndAdornmentWrapper>\r\n )\r\n }\r\n\r\n if (!values.length) return null\r\n\r\n return (\r\n <EndAdornmentWrapper onClick={() => onClearSelections?.()}>\r\n <XIcon/>\r\n </EndAdornmentWrapper>\r\n )\r\n}\r\n\r\nexport const ComboboxRenderTrigger = <Data extends object>(\r\n props: ComboboxRenderTriggerProps<Data>\r\n) => {\r\n const {\r\n type,\r\n open,\r\n initialLoading,\r\n callbackStateParams,\r\n disabled,\r\n renderTrigger,\r\n } = props;\r\n\r\n return (\r\n <PopoverTrigger asChild className=\"border-input\">\r\n <Button\r\n variant={renderTrigger ? 'none' : 'contained'}\r\n color='secondary'\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n className={cn(\r\n 'relative w-full justify-between bg-transparent',\r\n !renderTrigger && 'font-normal text-sm',\r\n 'border border-border',\r\n open && 'border-1 border-[#9368FF] outline-hidden ring-0 hover:border-[#9368FF] hover:bg-transparent',\r\n type === 'multi' && 'pr-0',\r\n 'focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]',\r\n renderTrigger && 'p-0',\r\n renderTrigger && open && 'p-0 border-1 ring-0 ring-transparent',\r\n )}\r\n disabled={disabled || initialLoading}\r\n >\r\n {initialLoading && <LoadingMask fullWidth/>}\r\n {!initialLoading && renderTrigger && renderTrigger(callbackStateParams)}\r\n {!initialLoading && !renderTrigger && (\r\n <>\r\n <ComboboxRenderTriggerLabel {...props} />\r\n <ComboboxRenderTriggerEndAdornment {...props} />\r\n </>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n )\r\n}\r\n"],"names":["useValues","props","value","flattenOptions","selectedOptions","useMemo","selectedOption","vls","labels","o","v","acc","ComboboxRenderTriggerLabel","type","DEFAULT_COMBOBOX_TYPE","placeholder","onSelect","open","values","jsx","ScrollArea","cn","item","jsxs","e","XIcon","EndAdornmentWrapper","children","prevented","onClick","className","rest","ComboboxRenderTriggerEndAdornment","onClearSelections","ChevronDown","ComboboxRenderTrigger","initialLoading","callbackStateParams","disabled","renderTrigger","PopoverTrigger","Button","LoadingMask","Fragment"],"mappings":"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"}
package/DatePicker/DatePicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,UAAU,2FAyCtB,CAAC"}
1
+ {"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,UAAU,2FA4CtB,CAAC"}
package/DatePicker/DatePicker.js CHANGED
@@ -1,53 +1,55 @@
1
- import { jsxs as o, jsx as r } from "react/jsx-runtime";
2
- import * as i from "react";
3
- import { format as d } from "date-fns";
4
- import { Calendar as s } from "lucide-react";
5
- import { cn as c } from "@oneplatformdev/utils";
6
- import { uk as t } from "date-fns/locale";
7
- import { Button as f } from "../Button/Button.js";
8
- import { Calendar as p } from "../Calendar/Calendar.js";
9
- import { Popover as u, PopoverTrigger as h, PopoverContent as y } from "../Popover/Popover.js";
10
- const g = i.forwardRef(
11
- (a, l) => {
1
+ import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
+ import * as a from "react";
3
+ import { format as c } from "date-fns";
4
+ import { Calendar as f } from "lucide-react";
5
+ import { cn as p } from "@oneplatformdev/utils";
6
+ import { uk as n } from "date-fns/locale";
7
+ import { Button as u } from "../Button/Button.js";
8
+ import { Calendar as h } from "../Calendar/Calendar.js";
9
+ import { Popover as g, PopoverTrigger as b, PopoverContent as y } from "../Popover/Popover.js";
10
+ const v = a.forwardRef(
11
+ (i, l) => {
12
12
  const {
13
- selectedDate: e,
14
- onDateChange: m,
15
- disabled: n = !1
16
- } = a;
17
- return /* @__PURE__ */ o(u, { children: [
18
- /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ o(
19
- f,
13
+ selectedDate: o,
14
+ onDateChange: s,
15
+ disabled: d = !1
16
+ } = i, [r, m] = a.useState(!1);
17
+ return /* @__PURE__ */ t(g, { open: r, onOpenChange: m, children: [
18
+ /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ t(
19
+ u,
20
20
  {
21
21
  ref: l,
22
- disabled: n,
22
+ disabled: d,
23
23
  variant: "outline-solid",
24
- className: c(
24
+ className: p(
25
25
  "w-full justify-start text-left font-normal border h-10",
26
- !e && "text-muted-foreground"
26
+ !o && "text-muted-foreground",
27
+ "focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]",
28
+ r && "outline-hidden ring-0 border-[#9368FF]"
27
29
  ),
28
30
  children: [
29
- e ? d(e, "LLL dd, y", { locale: t }) : /* @__PURE__ */ r("span", { children: "dd/mm/yyyy" }),
30
- /* @__PURE__ */ r(s, { className: "mr-2 h-4 w-4 ml-auto" })
31
+ o ? c(o, "LLL dd, y", { locale: n }) : /* @__PURE__ */ e("span", { children: "dd/mm/yyyy" }),
32
+ /* @__PURE__ */ e(f, { className: "mr-2 h-4 w-4 ml-auto" })
31
33
  ]
32
34
  }
33
35
  ) }),
34
- /* @__PURE__ */ r(y, { align: "start", className: "w-auto p-0", children: /* @__PURE__ */ r(
35
- p,
36
+ /* @__PURE__ */ e(y, { align: "start", className: "w-auto p-0", children: /* @__PURE__ */ e(
37
+ h,
36
38
  {
37
39
  mode: "single",
38
40
  captionLayout: "dropdown-buttons",
39
- selected: e,
40
- onSelect: m,
41
+ selected: o,
42
+ onSelect: s,
41
43
  fromYear: 1960,
42
44
  toYear: 2030,
43
- locale: t
45
+ locale: n
44
46
  }
45
47
  ) })
46
48
  ] });
47
49
  }
48
50
  );
49
- g.displayName = "DatePicker";
51
+ v.displayName = "DatePicker";
50
52
  export {
51
- g as DatePicker
53
+ v as DatePicker
52
54
  };
53
55
  //# sourceMappingURL=DatePicker.js.map
package/DatePicker/DatePicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport * as React from 'react';\r\nimport { format } from 'date-fns';\r\nimport { Calendar as CalendarIcon } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { Button } from '../Button';\r\nimport { Calendar } from '../Calendar';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\r\nimport { uk } from 'date-fns/locale';\r\nimport { DatePickerProps } from './DatePicker.types';\r\n\r\nexport const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\r\n (props, ref) => {\r\n const {\r\n selectedDate,\r\n onDateChange,\r\n disabled = false\r\n } = props;\r\n return (\r\n <Popover>\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n disabled={disabled}\r\n variant={'outline-solid'}\r\n className={cn(\r\n 'w-full justify-start text-left font-normal border h-10',\r\n !selectedDate && 'text-muted-foreground'\r\n )}\r\n >\r\n {selectedDate ? (\r\n format(selectedDate, 'LLL dd, y', { locale: uk })\r\n ) : (\r\n <span>dd/mm/yyyy</span>\r\n )}\r\n <CalendarIcon className=\"mr-2 h-4 w-4 ml-auto\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent align=\"start\" className=\"w-auto p-0\">\r\n <Calendar\r\n mode=\"single\"\r\n captionLayout=\"dropdown-buttons\"\r\n selected={selectedDate}\r\n onSelect={onDateChange}\r\n fromYear={1960}\r\n toYear={2030}\r\n locale={uk}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nDatePicker.displayName = 'DatePicker';\r\n"],"names":["DatePicker","React","props","ref","selectedDate","onDateChange","disabled","Popover","jsx","PopoverTrigger","jsxs","Button","cn","format","uk","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,IAAA,IACTJ;AACJ,6BACGK,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,UAAAG;AAAA,UACA,SAAS;AAAA,UACT,WAAWM;AAAA,YACT;AAAA,YACA,CAACR,KAAgB;AAAA,UAAA;AAAA,UAGlB,UAAA;AAAA,YAAAA,IACCS,EAAOT,GAAc,aAAa,EAAE,QAAQU,GAAI,IAEhD,gBAAAN,EAAC,QAAA,EAAK,UAAA,aAAA,CAAU;AAAA,YAElB,gBAAAA,EAACO,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MACA,gBAAAP,EAACQ,GAAA,EAAe,OAAM,SAAQ,WAAU,cACtC,UAAA,gBAAAR;AAAA,QAACS;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,eAAc;AAAA,UACd,UAAUb;AAAA,UACV,UAAUC;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQS;AAAA,QAAA;AAAA,MAAA,EACV,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAd,EAAW,cAAc;"}
1
+ {"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport * as React from 'react';\r\nimport { format } from 'date-fns';\r\nimport { Calendar as CalendarIcon } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { Button } from '../Button';\r\nimport { Calendar } from '../Calendar';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\r\nimport { uk } from 'date-fns/locale';\r\nimport { DatePickerProps } from './DatePicker.types';\r\n\r\nexport const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(\r\n (props, ref) => {\r\n const {\r\n selectedDate,\r\n onDateChange,\r\n disabled = false\r\n } = props;\r\n const [open, setOpen] = React.useState(false);\r\n return (\r\n <Popover open={open} onOpenChange={setOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n disabled={disabled}\r\n variant={'outline-solid'}\r\n className={cn(\r\n 'w-full justify-start text-left font-normal border h-10',\r\n !selectedDate && 'text-muted-foreground',\r\n 'focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]',\r\n open && 'outline-hidden ring-0 border-[#9368FF]'\r\n )}\r\n >\r\n {selectedDate ? (\r\n format(selectedDate, 'LLL dd, y', { locale: uk })\r\n ) : (\r\n <span>dd/mm/yyyy</span>\r\n )}\r\n <CalendarIcon className=\"mr-2 h-4 w-4 ml-auto\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent align=\"start\" className=\"w-auto p-0\">\r\n <Calendar\r\n mode=\"single\"\r\n captionLayout=\"dropdown-buttons\"\r\n selected={selectedDate}\r\n onSelect={onDateChange}\r\n fromYear={1960}\r\n toYear={2030}\r\n locale={uk}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nDatePicker.displayName = 'DatePicker';\r\n\r\n"],"names":["DatePicker","React","props","ref","selectedDate","onDateChange","disabled","open","setOpen","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","uk","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,IAAA,IACTJ,GACE,CAACK,GAAMC,CAAO,IAAIP,EAAM,SAAS,EAAK;AAC5C,WACE,gBAAAQ,EAACC,GAAA,EAAQ,MAAAH,GAAY,cAAcC,GACjC,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACA,UAAAG;AAAA,UACA,SAAS;AAAA,UACT,WAAWQ;AAAA,YACT;AAAA,YACA,CAACV,KAAgB;AAAA,YACjB;AAAA,YACAG,KAAQ;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAH,IACCW,EAAOX,GAAc,aAAa,EAAE,QAAQY,GAAI,IAEhD,gBAAAL,EAAC,QAAA,EAAK,UAAA,aAAA,CAAU;AAAA,YAElB,gBAAAA,EAACM,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEnD;AAAA,MACA,gBAAAN,EAACO,GAAA,EAAe,OAAM,SAAQ,WAAU,cACtC,UAAA,gBAAAP;AAAA,QAACQ;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,eAAc;AAAA,UACd,UAAUf;AAAA,UACV,UAAUC;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQW;AAAA,QAAA;AAAA,MAAA,EACV,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AAEAhB,EAAW,cAAc;"}
package/Select/SelectRoot.js CHANGED
@@ -35,8 +35,8 @@ function w(t) {
35
35
  "border border-[#E1E1E5] outline-none text-[#06080D]",
36
36
  "data-[placeholder]:text-gray-400 [&_svg:not([class*='text-'])]:text-muted-foreground transition-[color,box-shadow,background-color,border-color]",
37
37
  "hover:bg-[#F9FAFB] hover:border-[#E1E1E5]",
38
- "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-[#C5C7CD]",
39
- "data-[state=open]:outline-hidden data-[state=open]:ring-1 data-[state=open]:ring-ring data-[state=open]:border-[#C5C7CD]",
38
+ "focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]",
39
+ "data-[state=open]:outline-hidden data-[state=open]:ring-0 data-[state=open]:border-[#9368FF]",
40
40
  "data-[state=open]:[&_[data-slot=select-trigger-icon]]:opacity-0 data-[state=open]:[&_[data-slot=select-trigger-icon]]:pointer-events-none",
41
41
  "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
42
42
  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -109,7 +109,7 @@ function z({
109
109
  }
110
110
  );
111
111
  }
112
- function C({
112
+ function N({
113
113
  className: t,
114
114
  children: o,
115
115
  ...r
@@ -130,7 +130,7 @@ function C({
130
130
  }
131
131
  );
132
132
  }
133
- function N({
133
+ function F({
134
134
  className: t,
135
135
  ...o
136
136
  }) {
@@ -180,13 +180,13 @@ function f({
180
180
  export {
181
181
  S as SelectContent,
182
182
  b as SelectGroup,
183
- C as SelectItem,
183
+ N as SelectItem,
184
184
  z as SelectLabel,
185
185
  a as SelectPrimitive,
186
186
  v as SelectRoot,
187
187
  f as SelectScrollDownButton,
188
188
  m as SelectScrollUpButton,
189
- N as SelectSeparator,
189
+ F as SelectSeparator,
190
190
  w as SelectTrigger,
191
191
  y as SelectValue
192
192
  };
package/Select/SelectRoot.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectRoot.js","sources":["../../src/Select/SelectRoot.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\r\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nfunction SelectRoot({\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Root>) {\r\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />\r\n}\r\n\r\nfunction SelectGroup({\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Group>) {\r\n return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\r\n}\r\n\r\nfunction SelectValue({\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Value>) {\r\n return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\r\n}\r\n\r\nfunction SelectTrigger(props: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\r\n size?: \"sm\" | \"default\";\r\n showIcon?: boolean;\r\n}) {\r\n const {\r\n className,\r\n size = \"default\",\r\n children,\r\n showIcon = true,\r\n ...rest\r\n } = props\r\n return (\r\n <SelectPrimitive.Trigger\r\n data-slot=\"select-trigger\"\r\n data-size={size}\r\n className={cn(\r\n \"relative flex w-inherit items-center justify-between gap-2 rounded-lg bg-[#FCFCFC] px-3 py-2 text-sm font-normal whitespace-nowrap\",\r\n \"border border-[#E1E1E5] outline-none text-[#06080D]\",\r\n \"data-[placeholder]:text-gray-400 [&_svg:not([class*='text-'])]:text-muted-foreground transition-[color,box-shadow,background-color,border-color]\",\r\n \"hover:bg-[#F9FAFB] hover:border-[#E1E1E5]\",\r\n \"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-[#C5C7CD]\",\r\n \"data-[state=open]:outline-hidden data-[state=open]:ring-1 data-[state=open]:ring-ring data-[state=open]:border-[#C5C7CD]\",\r\n \"data-[state=open]:[&_[data-slot=select-trigger-icon]]:opacity-0 data-[state=open]:[&_[data-slot=select-trigger-icon]]:pointer-events-none\",\r\n \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\",\r\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n 'cursor-pointer',\r\n 'disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8',\r\n className\r\n )}\r\n {...rest}\r\n >\r\n {children}\r\n {showIcon && (\r\n <SelectPrimitive.Icon asChild>\r\n <span\r\n data-slot=\"select-trigger-icon\"\r\n className=\"flex items-center justify-center opacity-50 transition-opacity hover:opacity-100\"\r\n >\r\n <ChevronDownIcon className=\"size-5 text-[#06080D]\" />\r\n </span>\r\n </SelectPrimitive.Icon>\r\n )}\r\n </SelectPrimitive.Trigger>\r\n )\r\n}\r\n\r\nfunction SelectContent({\r\n className,\r\n children,\r\n position = \"popper\",\r\n align = \"center\",\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Content>) {\r\n return (\r\n <SelectPrimitive.Portal>\r\n <SelectPrimitive.Content\r\n data-slot=\"select-content\"\r\n className={cn(\r\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\r\n position === \"popper\" &&\r\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\r\n 'p-1 rounded-xl shadow-md',\r\n className\r\n )}\r\n position={position}\r\n align={align}\r\n {...props}\r\n >\r\n <SelectScrollUpButton />\r\n <SelectPrimitive.Viewport\r\n className={cn(\r\n \"p-1\",\r\n position === \"popper\" &&\r\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\r\n )}\r\n >\r\n {children}\r\n </SelectPrimitive.Viewport>\r\n <SelectScrollDownButton />\r\n </SelectPrimitive.Content>\r\n </SelectPrimitive.Portal>\r\n )\r\n}\r\n\r\nfunction SelectLabel({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Label>) {\r\n return (\r\n <SelectPrimitive.Label\r\n data-slot=\"select-label\"\r\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction SelectItem({\r\n className,\r\n children,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Item>) {\r\n return (\r\n <SelectPrimitive.Item\r\n data-slot=\"select-item\"\r\n className={cn(\r\n \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\r\n <SelectPrimitive.ItemIndicator>\r\n <CheckIcon className=\"size-4\" />\r\n </SelectPrimitive.ItemIndicator>\r\n </span>\r\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\r\n </SelectPrimitive.Item>\r\n )\r\n}\r\n\r\nfunction SelectSeparator({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Separator>) {\r\n return (\r\n <SelectPrimitive.Separator\r\n data-slot=\"select-separator\"\r\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction SelectScrollUpButton({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\r\n return (\r\n <SelectPrimitive.ScrollUpButton\r\n data-slot=\"select-scroll-up-button\"\r\n className={cn(\r\n \"flex cursor-default items-center justify-center py-1\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ChevronUpIcon className=\"size-4\" />\r\n </SelectPrimitive.ScrollUpButton>\r\n )\r\n}\r\n\r\nfunction SelectScrollDownButton({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\r\n return (\r\n <SelectPrimitive.ScrollDownButton\r\n data-slot=\"select-scroll-down-button\"\r\n className={cn(\r\n \"flex cursor-default items-center justify-center py-1\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ChevronDownIcon className=\"size-4\" />\r\n </SelectPrimitive.ScrollDownButton>\r\n )\r\n}\r\n\r\nexport {\r\n SelectRoot,\r\n SelectContent,\r\n SelectGroup,\r\n SelectItem,\r\n SelectLabel,\r\n SelectScrollDownButton,\r\n SelectScrollUpButton,\r\n SelectSeparator,\r\n SelectTrigger,\r\n SelectValue,\r\n SelectPrimitive,\r\n}\r\n"],"names":["SelectRoot","props","SelectPrimitive","SelectGroup","SelectValue","SelectTrigger","className","size","children","showIcon","rest","jsxs","cn","jsx","ChevronDownIcon","SelectContent","position","align","SelectScrollUpButton","SelectScrollDownButton","SelectLabel","SelectItem","CheckIcon","SelectSeparator","ChevronUpIcon"],"mappings":"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"}
1
+ {"version":3,"file":"SelectRoot.js","sources":["../../src/Select/SelectRoot.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\r\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nfunction SelectRoot({\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Root>) {\r\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />\r\n}\r\n\r\nfunction SelectGroup({\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Group>) {\r\n return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\r\n}\r\n\r\nfunction SelectValue({\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Value>) {\r\n return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\r\n}\r\n\r\nfunction SelectTrigger(props: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\r\n size?: \"sm\" | \"default\";\r\n showIcon?: boolean;\r\n}) {\r\n const {\r\n className,\r\n size = \"default\",\r\n children,\r\n showIcon = true,\r\n ...rest\r\n } = props\r\n return (\r\n <SelectPrimitive.Trigger\r\n data-slot=\"select-trigger\"\r\n data-size={size}\r\n className={cn(\r\n \"relative flex w-inherit items-center justify-between gap-2 rounded-lg bg-[#FCFCFC] px-3 py-2 text-sm font-normal whitespace-nowrap\",\r\n \"border border-[#E1E1E5] outline-none text-[#06080D]\",\r\n \"data-[placeholder]:text-gray-400 [&_svg:not([class*='text-'])]:text-muted-foreground transition-[color,box-shadow,background-color,border-color]\",\r\n \"hover:bg-[#F9FAFB] hover:border-[#E1E1E5]\",\r\n \"focus-visible:outline-hidden focus-visible:ring-0 focus-visible:border-[#9368FF]\",\r\n \"data-[state=open]:outline-hidden data-[state=open]:ring-0 data-[state=open]:border-[#9368FF]\",\r\n \"data-[state=open]:[&_[data-slot=select-trigger-icon]]:opacity-0 data-[state=open]:[&_[data-slot=select-trigger-icon]]:pointer-events-none\",\r\n \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\",\r\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n 'cursor-pointer',\r\n 'disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8',\r\n className\r\n )}\r\n {...rest}\r\n >\r\n {children}\r\n {showIcon && (\r\n <SelectPrimitive.Icon asChild>\r\n <span\r\n data-slot=\"select-trigger-icon\"\r\n className=\"flex items-center justify-center opacity-50 transition-opacity hover:opacity-100\"\r\n >\r\n <ChevronDownIcon className=\"size-5 text-[#06080D]\" />\r\n </span>\r\n </SelectPrimitive.Icon>\r\n )}\r\n </SelectPrimitive.Trigger>\r\n )\r\n}\r\n\r\nfunction SelectContent({\r\n className,\r\n children,\r\n position = \"popper\",\r\n align = \"center\",\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Content>) {\r\n return (\r\n <SelectPrimitive.Portal>\r\n <SelectPrimitive.Content\r\n data-slot=\"select-content\"\r\n className={cn(\r\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\r\n position === \"popper\" &&\r\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\r\n 'p-1 rounded-xl shadow-md',\r\n className\r\n )}\r\n position={position}\r\n align={align}\r\n {...props}\r\n >\r\n <SelectScrollUpButton />\r\n <SelectPrimitive.Viewport\r\n className={cn(\r\n \"p-1\",\r\n position === \"popper\" &&\r\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\r\n )}\r\n >\r\n {children}\r\n </SelectPrimitive.Viewport>\r\n <SelectScrollDownButton />\r\n </SelectPrimitive.Content>\r\n </SelectPrimitive.Portal>\r\n )\r\n}\r\n\r\nfunction SelectLabel({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Label>) {\r\n return (\r\n <SelectPrimitive.Label\r\n data-slot=\"select-label\"\r\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction SelectItem({\r\n className,\r\n children,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Item>) {\r\n return (\r\n <SelectPrimitive.Item\r\n data-slot=\"select-item\"\r\n className={cn(\r\n \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\r\n <SelectPrimitive.ItemIndicator>\r\n <CheckIcon className=\"size-4\" />\r\n </SelectPrimitive.ItemIndicator>\r\n </span>\r\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\r\n </SelectPrimitive.Item>\r\n )\r\n}\r\n\r\nfunction SelectSeparator({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.Separator>) {\r\n return (\r\n <SelectPrimitive.Separator\r\n data-slot=\"select-separator\"\r\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction SelectScrollUpButton({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\r\n return (\r\n <SelectPrimitive.ScrollUpButton\r\n data-slot=\"select-scroll-up-button\"\r\n className={cn(\r\n \"flex cursor-default items-center justify-center py-1\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ChevronUpIcon className=\"size-4\" />\r\n </SelectPrimitive.ScrollUpButton>\r\n )\r\n}\r\n\r\nfunction SelectScrollDownButton({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\r\n return (\r\n <SelectPrimitive.ScrollDownButton\r\n data-slot=\"select-scroll-down-button\"\r\n className={cn(\r\n \"flex cursor-default items-center justify-center py-1\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ChevronDownIcon className=\"size-4\" />\r\n </SelectPrimitive.ScrollDownButton>\r\n )\r\n}\r\n\r\nexport {\r\n SelectRoot,\r\n SelectContent,\r\n SelectGroup,\r\n SelectItem,\r\n SelectLabel,\r\n SelectScrollDownButton,\r\n SelectScrollUpButton,\r\n SelectSeparator,\r\n SelectTrigger,\r\n SelectValue,\r\n SelectPrimitive,\r\n}\r\n"],"names":["SelectRoot","props","SelectPrimitive","SelectGroup","SelectValue","SelectTrigger","className","size","children","showIcon","rest","jsxs","cn","jsx","ChevronDownIcon","SelectContent","position","align","SelectScrollUpButton","SelectScrollDownButton","SelectLabel","SelectItem","CheckIcon","SelectSeparator","ChevronUpIcon"],"mappings":";;;;AAQA,SAASA,EAAW;AAAA,EACF,GAAGC;AACL,GAAsD;AACpE,2BAAQC,EAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAGD,GAAO;AAC7D;AAEA,SAASE,EAAY;AAAA,EACE,GAAGF;AACL,GAAuD;AAC1E,2BAAQC,EAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAGD,GAAO;AACpE;AAEA,SAASG,EAAY;AAAA,EACE,GAAGH;AACL,GAAuD;AAC1E,2BAAQC,EAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAGD,GAAO;AACpE;AAEA,SAASI,EAAcJ,GAGpB;AACD,QAAM;AAAA,IACJ,WAAAK;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDT;AACJ,SACE,gBAAAU;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,aAAWK;AAAA,MACX,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAAF;AAAA,QACAC,KACC,gBAAAI,EAACX,EAAgB,MAAhB,EAAqB,SAAO,IAC3B,UAAA,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAEV,UAAA,gBAAAA,EAACC,GAAA,EAAgB,WAAU,wBAAA,CAAwB;AAAA,UAAA;AAAA,QAAA,EACrD,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAASC,EAAc;AAAA,EACE,WAAAT;AAAA,EACA,UAAAE;AAAA,EACA,UAAAQ,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,GAAGhB;AACL,GAAyD;AAC9E,SACE,gBAAAY,EAACX,EAAgB,QAAhB,EACC,UAAA,gBAAAS;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWU;AAAA,QACT;AAAA,QACAI,MAAa,YACb;AAAA,QACA;AAAA,QACAV;AAAA,MAAA;AAAA,MAEF,UAAAU;AAAA,MACA,OAAAC;AAAA,MACC,GAAGhB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAACK,GAAA,EAAqB;AAAA,QACtB,gBAAAL;AAAA,UAACX,EAAgB;AAAA,UAAhB;AAAA,YACC,WAAWU;AAAA,cACT;AAAA,cACAI,MAAa,YACb;AAAA,YAAA;AAAA,YAGD,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEFW,GAAA,CAAA,CAAuB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5B;AAEJ;AAEA,SAASC,EAAY;AAAA,EACE,WAAAd;AAAA,EACA,GAAGL;AACL,GAAuD;AAC1E,SACE,gBAAAY;AAAA,IAACX,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWU,EAAG,6CAA6CN,CAAS;AAAA,MACnE,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASoB,EAAW;AAAA,EACE,WAAAf;AAAA,EACA,UAAAE;AAAA,EACA,GAAGP;AACL,GAAsD;AACxE,SACE,gBAAAU;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWU;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,8DACd,UAAA,gBAAAA,EAACX,EAAgB,eAAhB,EACC,UAAA,gBAAAW,EAACS,GAAA,EAAU,WAAU,SAAA,CAAS,EAAA,CAChC,GACF;AAAA,QACA,gBAAAT,EAACX,EAAgB,UAAhB,EAA0B,UAAAM,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;AAEA,SAASe,EAAgB;AAAA,EACE,WAAAjB;AAAA,EACA,GAAGL;AACL,GAA2D;AAClF,SACE,gBAAAY;AAAA,IAACX,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWU,EAAG,iDAAiDN,CAAS;AAAA,MACvE,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASiB,EAAqB;AAAA,EACE,WAAAZ;AAAA,EACA,GAAGL;AACL,GAAgE;AAC5F,SACE,gBAAAY;AAAA,IAACX,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWU;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEJ,UAAA,gBAAAY,EAACW,GAAA,EAAc,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGxC;AAEA,SAASL,EAAuB;AAAA,EACE,WAAAb;AAAA,EACA,GAAGL;AACL,GAAkE;AAChG,SACE,gBAAAY;AAAA,IAACX,EAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAWU;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEJ,UAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG1C;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.1.99-beta.273",
3
+ "version": "0.1.99-beta.275",
4
4
  "description": "UI component library for OnePlatform",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -109,9 +109,9 @@
109
109
  "recharts": "^3.2.0",
110
110
  "sonner": "^2.0.7",
111
111
  "vaul": "^1.1.2",
112
- "@oneplatformdev/tokens": "^0.1.99-beta.273",
113
- "@oneplatformdev/hooks": "^0.1.99-beta.273",
114
- "@oneplatformdev/utils": "^0.1.99-beta.273"
112
+ "@oneplatformdev/tokens": "^0.1.99-beta.275",
113
+ "@oneplatformdev/hooks": "^0.1.99-beta.275",
114
+ "@oneplatformdev/utils": "^0.1.99-beta.275"
115
115
  },
116
116
  "scripts": {
117
117
  "chromatic": "chromatic"