@oneplatformdev/ui 0.1.99-beta.243 → 0.1.99-beta.245

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 (170) hide show
  1. package/.storybook/Wrappers.js.map +1 -1
  2. package/Accordion/Accordion.js.map +1 -1
  3. package/Alert/Alert.js.map +1 -1
  4. package/Alert/alertVariants.js.map +1 -1
  5. package/AlertDialog/AlertDialog.js.map +1 -1
  6. package/AlertDialog/AlertDialog.stories.js +2 -4
  7. package/AlertDialog/AlertDialog.stories.js.map +1 -1
  8. package/AlertDialog/AlertDialogRoot.js +18 -20
  9. package/AlertDialog/AlertDialogRoot.js.map +1 -1
  10. package/AreaChart/AreaChart.js.map +1 -1
  11. package/Aside/Aside.js.map +1 -1
  12. package/Aside/AsideSidebar.js.map +1 -1
  13. package/AspectRatio/AspectRatio.js.map +1 -1
  14. package/Avatar/Avatar.js.map +1 -1
  15. package/Badge/Badge.js.map +1 -1
  16. package/Badge/badgeVariants.js.map +1 -1
  17. package/Breadcrumb/Breadcrumb.js.map +1 -1
  18. package/Button/Button.js +10 -11
  19. package/Button/Button.js.map +1 -1
  20. package/Button/Button.stories.js.map +1 -1
  21. package/Button/Button.utils.js.map +1 -1
  22. package/Button/ButtonCounterBadge.js.map +1 -1
  23. package/Button/buttonVariants.js.map +1 -1
  24. package/ButtonIcon/ButtonIcon.js +19 -22
  25. package/ButtonIcon/ButtonIcon.js.map +1 -1
  26. package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
  27. package/ButtonIcon/buttonIconVariants.js.map +1 -1
  28. package/CHANGELOG.md +3241 -3233
  29. package/Calendar/Calendar.js +4 -6
  30. package/Calendar/Calendar.js.map +1 -1
  31. package/Card/Card.js.map +1 -1
  32. package/Carousel/Carousel.js +6 -7
  33. package/Carousel/Carousel.js.map +1 -1
  34. package/Chart/Chart.js.map +1 -1
  35. package/Checkbox/Checkbox.js +0 -1
  36. package/Checkbox/Checkbox.js.map +1 -1
  37. package/Checkbox/Checkbox.stories.js.map +1 -1
  38. package/Collapsible/Collapsible.js.map +1 -1
  39. package/Combobox/Combobox.js +10 -10
  40. package/Combobox/Combobox.js.map +1 -1
  41. package/Combobox/Combobox.stories.js.map +1 -1
  42. package/Combobox/Combobox.types.js.map +1 -1
  43. package/Combobox/ComboboxOptionItem.js +19 -20
  44. package/Combobox/ComboboxOptionItem.js.map +1 -1
  45. package/Combobox/ComboboxRenderContent.js +14 -15
  46. package/Combobox/ComboboxRenderContent.js.map +1 -1
  47. package/Combobox/ComboboxRenderOptions.js +5 -5
  48. package/Combobox/ComboboxRenderOptions.js.map +1 -1
  49. package/Combobox/ComboboxRenderTrigger.js +28 -30
  50. package/Combobox/ComboboxRenderTrigger.js.map +1 -1
  51. package/Command/Command.js +21 -22
  52. package/Command/Command.js.map +1 -1
  53. package/ContextPopover/ContextDropdownMenu.js.map +1 -1
  54. package/ContextPopover/ContextPopover.js.map +1 -1
  55. package/ContextPopover/useContextPopoverHandler.js.map +1 -1
  56. package/DataTable/DataTable.js +24 -26
  57. package/DataTable/DataTable.js.map +1 -1
  58. package/DataTable/DataTableColumnFilter.js +6 -7
  59. package/DataTable/DataTableColumnFilter.js.map +1 -1
  60. package/DataTable/useDataTable.js.map +1 -1
  61. package/DatePicker/DatePicker.js +12 -13
  62. package/DatePicker/DatePicker.js.map +1 -1
  63. package/Dialog/Dialog.js +16 -17
  64. package/Dialog/Dialog.js.map +1 -1
  65. package/Dialog/Dialog.stories.js +14 -15
  66. package/Dialog/Dialog.stories.js.map +1 -1
  67. package/Dialog/DialogOverlayScope.js.map +1 -1
  68. package/Drawer/Drawer.js.map +1 -1
  69. package/DropdownMenu/DropdownMenu.js.map +1 -1
  70. package/Dropzone/Dropzone.js.map +1 -1
  71. package/Dropzone/Dropzone.stories.js.map +1 -1
  72. package/Dropzone/Dropzone.types.js.map +1 -1
  73. package/Dropzone/DropzoneFilePreview.js.map +1 -1
  74. package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
  75. package/Dropzone/DropzoneUtils.js.map +1 -1
  76. package/Form/Form.js +14 -15
  77. package/Form/Form.js.map +1 -1
  78. package/Form/FormRenderControl.js +6 -7
  79. package/Form/FormRenderControl.js.map +1 -1
  80. package/Form/Form_old.js +4 -5
  81. package/Form/Form_old.js.map +1 -1
  82. package/FormCheckbox/FormCheckbox.js +4 -4
  83. package/FormCheckbox/FormCheckbox.js.map +1 -1
  84. package/FormCombobox/FormCombobox.js +4 -4
  85. package/FormCombobox/FormCombobox.js.map +1 -1
  86. package/FormDatePicker/FormDatePicker.js +4 -4
  87. package/FormDatePicker/FormDatePicker.js.map +1 -1
  88. package/FormDropzone/FormDropzone.js +3 -3
  89. package/FormDropzone/FormDropzone.js.map +1 -1
  90. package/FormInput/FormInput.js +6 -6
  91. package/FormInput/FormInput.js.map +1 -1
  92. package/FormInput/FormInput.stories.js +5 -5
  93. package/FormInput/FormInput.stories.js.map +1 -1
  94. package/FormRadio/FormRadio.js.map +1 -1
  95. package/FormSelect/FormSelect.js +6 -9
  96. package/FormSelect/FormSelect.js.map +1 -1
  97. package/FormTextarea/FormTextarea.js +4 -4
  98. package/FormTextarea/FormTextarea.js.map +1 -1
  99. package/Header/Header.js.map +1 -1
  100. package/HoverCard/HoverCard.js.map +1 -1
  101. package/InfoBlock/InfoBlock.js.map +1 -1
  102. package/InfoBlock/InfoBlock.stories.js.map +1 -1
  103. package/InfoBlock/infoBlockVariants.js.map +1 -1
  104. package/Input/Input.js.map +1 -1
  105. package/Input/Input.stories.js.map +1 -1
  106. package/Input/inputVariants.js.map +1 -1
  107. package/InputOTP/InputOTP.d.ts.map +1 -1
  108. package/InputOTP/InputOTP.js.map +1 -1
  109. package/LICENSE +21 -21
  110. package/Label/Label.js.map +1 -1
  111. package/Label/labelVariants.js.map +1 -1
  112. package/LazyLoader/LazyLoader.js +4 -5
  113. package/LazyLoader/LazyLoader.js.map +1 -1
  114. package/LoadedIcon/LoadedIcon.js.map +1 -1
  115. package/LoadingMask/LoadingMask.js.map +1 -1
  116. package/LoadingMask/RenderLoadingMask.js.map +1 -1
  117. package/LoadingProgress/LoadingProgress.js.map +1 -1
  118. package/LoadingProgress/loadingProgressVariants.js.map +1 -1
  119. package/Menubar/Menubar.js.map +1 -1
  120. package/NavigationMenu/NavigationMenu.js.map +1 -1
  121. package/NavigationMenu/navigationMenuVariants.js.map +1 -1
  122. package/Pagination/Pagination.js +0 -1
  123. package/Pagination/Pagination.js.map +1 -1
  124. package/Popover/Popover.js.map +1 -1
  125. package/Progress/Progress.js.map +1 -1
  126. package/README.md +7 -7
  127. package/Radio/Radio.js.map +1 -1
  128. package/RadioGroup/RadioGroup.js.map +1 -1
  129. package/Resizable/Resizable.js.map +1 -1
  130. package/Resizable/Resizable.stories.js.map +1 -1
  131. package/ScrollArea/ScrollArea.js.map +1 -1
  132. package/Search/Search.js +9 -9
  133. package/Search/Search.js.map +1 -1
  134. package/Search/Search.stories.js.map +1 -1
  135. package/Select/Select.js +6 -7
  136. package/Select/Select.js.map +1 -1
  137. package/Select/Select.stories.js.map +1 -1
  138. package/Select/SelectRoot.js.map +1 -1
  139. package/Separator/Separator.js.map +1 -1
  140. package/Sheet/Sheet.js.map +1 -1
  141. package/Sidebar/Sidebar.js +20 -21
  142. package/Sidebar/Sidebar.js.map +1 -1
  143. package/Skeleton/Skeleton.js.map +1 -1
  144. package/Slider/Slider.js.map +1 -1
  145. package/Sonner/Sonner.js.map +1 -1
  146. package/Switch/Switch.js.map +1 -1
  147. package/Table/Table.js.map +1 -1
  148. package/TablePagination/TablePagination.js +21 -26
  149. package/TablePagination/TablePagination.js.map +1 -1
  150. package/Tabs/Tabs.js.map +1 -1
  151. package/Tabs/TabsRoot.js.map +1 -1
  152. package/Textarea/Textarea.js.map +1 -1
  153. package/Textarea/Textarea.stories.js.map +1 -1
  154. package/Textarea/useAutosizeTextArea.js.map +1 -1
  155. package/Theme/ThemeModeToggle.js +3 -4
  156. package/Theme/ThemeModeToggle.js.map +1 -1
  157. package/Theme/ThemeProvider.js.map +1 -1
  158. package/Toast/Toast.js.map +1 -1
  159. package/Toast/toast.constants.js.map +1 -1
  160. package/Toast/toastVariants.js.map +1 -1
  161. package/Toast/useToast.js.map +1 -1
  162. package/Toaster/Toaster.js.map +1 -1
  163. package/Toggle/Toggle.js.map +1 -1
  164. package/ToggleGroup/ToggleGroup.js.map +1 -1
  165. package/Tooltip/Tooltip.js +4 -4
  166. package/Tooltip/Tooltip.js.map +1 -1
  167. package/Tooltip/TooltipRoot.js.map +1 -1
  168. package/Tooltip/tooltipVariants.js.map +1 -1
  169. package/index.js +286 -286
  170. package/package.json +4 -4
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Combobox } from './Combobox';\nimport {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps, MultiComboboxProps, SingleComboboxProps,\n} from './Combobox.types';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\n const res: ComboboxOption[] = [];\n const walk = (list?: ComboboxOption[]) => {\n if (!list?.length) return;\n for (const n of list) {\n res.push(n);\n if (n.items?.length) walk(n.items);\n }\n };\n walk(nodes);\n return res;\n};\n\nconst createFetchOptions =\n (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\n async (search?: string) => {\n await sleep(delayMs);\n\n const q = (search ?? '').trim().toLowerCase();\n if (!q) return all;\n\n // simple \"contains\" search across flattened options; then return top-level filtered\n // (enough for Storybook demos; your real API can do better)\n const allFlat = flatten(all);\n const matchedValues = new Set(\n allFlat\n .filter((o) => String(o.label).toLowerCase().includes(q))\n .map((o) => String(o.value)),\n );\n\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\n return list\n .map((n) => {\n const items = n.items?.length ? filterTree(n.items) : undefined;\n const selfMatch =\n matchedValues.has(String(n.value)) ||\n String(n.label).toLowerCase().includes(q);\n\n if (!selfMatch && !items?.length) return null;\n return { ...n, items };\n })\n .filter(Boolean) as ComboboxOption[];\n };\n\n return filterTree(all);\n };\n\nconst BASE_OPTIONS: ComboboxOption[] = [\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\n { value: 'fr', label: 'France' },\n { value: 'es', label: 'Spain' },\n { value: 'it', label: 'Italy' },\n];\n\nconst NESTED_OPTIONS: ComboboxOption[] = [\n {\n value: 'europe',\n label: 'Europe',\n items: [\n {\n value: 'fr',\n label: 'France',\n items: [\n {\n value: 'paris',\n label: 'Paris (Île-de-France)',\n items: [\n { value: 'paris-1', label: 'Paris 1st arrondissement' },\n { value: 'paris-3', label: 'Paris 3rd arrondissement' },\n { value: 'paris-10', label: 'Paris 10th arrondissement' },\n ],\n },\n { value: 'marseille', label: 'Marseille (Provence-Alpes-Côte d\\'Azur)' },\n {\n value: 'lyon',\n label: 'Lyon (Auvergne-Rhône-Alpes)',\n items: [\n { value: 'lyon-presquile', label: 'Presqu\\'île (1st/2nd)' },\n { value: 'lyon-vieux', label: 'Vieux Lyon' },\n ],\n },\n { value: 'toulouse', label: 'Toulouse (Occitanie)' },\n { value: 'bordeaux', label: 'Bordeaux (Nouvelle-Aquitaine)' },\n { value: 'strasbourg', label: 'Strasbourg (Grand Est)' },\n {\n value: 'rennes',\n label: 'Rennes (Brittany)',\n items: [\n { value: 'rennes-centre', label: 'Rennes Centre' },\n { value: 'rennes-beauregard', label: 'Beauregard' },\n ],\n },\n ]\n },\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\n ],\n },\n {\n value: 'north-america',\n label: 'North America',\n items: [\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n { value: 'mx', label: 'Mexico' },\n { value: 'north-america-long', label: 'To long option to test wrapping. '.repeat(3) },\n { value: 'north-america-long-single', label: 'To long option to test wrapping. '.replace(/ /g, '_').repeat(3) },\n ],\n },\n];\nconst getFlattenOptions = (options: ComboboxOption[]) => {\n return options.flatMap(option => [\n option,\n ...(option.items ? getFlattenOptions(option.items) : [])\n ]);\n};\n\nconst getAllValues = (options: ComboboxOption[]): string[] => {\n return getFlattenOptions(options).map(o => o.value)\n};\n\ntype ControlledProps<T extends ComboboxProps = ComboboxProps> = Omit<T, 'value' | 'onChange'> & {\n initialValue?: T['value'];\n};\n\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps<SingleComboboxProps>) {\n const [value, setValue] = useState<SingleComboboxProps['value']>(initialValue);\n const fetchOptions = useMemo(\n () => args.fetchOptions,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n\n return (\n <div className=\"max-w-sm\">\n <Combobox type='single' {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} defaultNodeMatched />\n <div className=\"mt-3 text-xs text-muted-foreground\">\n value: <span className=\"font-mono\">{String(value || '')}</span>\n </div>\n </div>\n );\n}\nfunction ControlledComboboxMulti({ initialValue = [], ...args }: ControlledProps<MultiComboboxProps>) {\n const [value, setValue] = useState<MultiComboboxProps['value'] | undefined>(initialValue);\n const fetchOptions = useMemo(() => args.fetchOptions, []);\n return (\n <div className=\"max-w-sm\">\n <Combobox\n {...args}\n type='multi'\n value={value}\n onChange={setValue}\n fetchOptions={fetchOptions}\n />\n <div className=\"mt-3 text-xs text-muted-foreground\">\n value: <span className=\"font-mono\">{(value || []).join(', ')}</span>\n </div>\n </div>\n );\n}\n\nconst meta = {\n title: 'Combobox',\n component: Combobox,\n parameters: {\n layout: 'centered',\n },\n args: {\n placeholder: 'Select option...',\n searchLabel: 'Type to search...',\n emptyLabel: 'No options',\n disabled: false,\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n },\n argTypes: {\n fetchOptions: { control: false },\n onChange: { control: false },\n onMount: { control: false },\n emptyAction: { control: false },\n commandInputAction: { control: false },\n listHeadAction: { control: false },\n options: { control: false },\n value: { control: false },\n },\n decorators: [\n (Story) => (\n <div className=\"p-6 w-[420px]\">\n <Story />\n </div>\n ),\n ],\n} satisfies Meta<typeof Combobox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/** 1) Default (async options) */\nexport const Default: Story = {\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 2) With initial selected value */\nexport const WithValueSelected: Story = {\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\n};\n\n/** 3) Disabled */\nexport const Disabled: Story = {\n args: { disabled: true },\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\n};\n\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\nexport const WithStaticOptionsProp: Story = {\n args: {\n options: BASE_OPTIONS,\n fetchOptions: async () => BASE_OPTIONS,\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 5) Slow fetch to show loading state on open/search */\nexport const SlowFetchLoading: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 6) Empty state with action (search something like \"zzz\") */\nexport const EmptyStateWithAction: Story = {\n args: {\n emptyLabel: 'Nothing found',\n emptyAction: (st: ComboboxCallbackStateParams) => {\n const canCreate = Boolean(st.search?.trim());\n return (\n <button\n type=\"button\"\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\n disabled={!canCreate}\n onClick={() => {\n const v = st.search.trim();\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\n st.setOptions([next]);\n st.setLoading(false);\n }}\n >\n Create option\n </button>\n );\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 7) commandInputAction (helper row under input) */\nexport const WithCommandInputAction: Story = {\n args: {\n commandInputAction: (st: ComboboxCallbackStateParams) => (\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\n <span>\n results: <span className=\"font-mono\">{st.options.length}</span>\n </span>\n <button\n type=\"button\"\n className=\"underline\"\n onClick={() => {\n st.setSearch('');\n st.setLoading(false);\n }}\n >\n Clear search\n </button>\n </div>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 8) listHeadAction (top action inside list) */\nexport const WithListHeadAction: Story = {\n args: {\n listHeadAction: (st: ComboboxCallbackStateParams) => (\n <button\n type=\"button\"\n className=\"w-full text-left px-3 py-2 text-sm\"\n onClick={() => {\n st.setSearch('');\n st.setOpen(false);\n }}\n >\n Close list\n </button>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 9) listHeadAction (footer action outside of list) */\nexport const WithListFooterAction: Story = {\n args: {\n listFooterAction: (st: ComboboxCallbackStateParams) => (\n <button\n type=\"button\"\n className=\"w-full text-left min-h-10 text-sm\"\n onClick={() => {\n st.setSearch('');\n st.setOpen(false);\n }}\n >\n list footer action\n </button>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 10) Nested options tree */\nexport const NestedOptions: Story = {\n args: {\n fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n // defaultNodeDisabled: false,\n // defaultNodeMatched: false,\n // defaultNodeMuted: true,\n // defaultNodeInteractive: false,\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 11) Multi Nested options tree */\nexport const NestedOptionsMulti: Story = {\n args: {\n fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n onMount: async (st: ComboboxCallbackStateParams<object, 'single'>) => {\n await sleep(900);\n st.setOptions(getFlattenOptions(NESTED_OPTIONS));\n },\n },\n render: (args) => {\n const TEST_FULL = false;\n const initialValues = TEST_FULL ? getAllValues(NESTED_OPTIONS): ['fr', 'de'];\n return <ControlledComboboxMulti {...args} initialValue={initialValues} />\n },\n};\n\n/** 12) onMount initial loading (simulate prefetch on mount) */\nexport const OnMountPrefetch: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n onMount: async (st: ComboboxCallbackStateParams<object, 'multi'>) => {\n await sleep(900);\n st.setOptions(BASE_OPTIONS);\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 13) render custom trigger */\nexport const RenderCustomTrigger: Story = {\n args: {\n renderTrigger: (state) => {\n console.log('state', state);\n return (\n <button\n type=\"button\"\n className=\"w-full\"\n onClick={() => state.setOpen((o) => !o)}\n >\n {state.selectedOption ? `Selected: ${state.selectedOption.label}` : 'Select option...'}\n </button>\n )\n }\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","getFlattenOptions","options","option","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","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"],"mappings":"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"}
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 = 350): ComboboxProps['fetchOptions'] =>\r\n async (search?: string) => {\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\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 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 { value: 'north-america-long-single', label: 'To long option to test wrapping. '.replace(/ /g, '_').repeat(3) },\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 fetchOptions = useMemo(\r\n () => args.fetchOptions,\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} fetchOptions={fetchOptions} 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\nfunction ControlledComboboxMulti({ initialValue = [], ...args }: ControlledProps<MultiComboboxProps>) {\r\n const [value, setValue] = useState<MultiComboboxProps['value'] | undefined>(initialValue);\r\n const fetchOptions = useMemo(() => args.fetchOptions, []);\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 fetchOptions={fetchOptions}\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 fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\r\n },\r\n argTypes: {\r\n fetchOptions: { 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 fetchOptions still required) */\r\nexport const WithStaticOptionsProp: Story = {\r\n args: {\r\n options: BASE_OPTIONS,\r\n fetchOptions: 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 fetchOptions: 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 fetchOptions: 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 fetchOptions: 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 fetchOptions: 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"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","getFlattenOptions","options","option","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","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"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.types.js","sources":["../../src/Combobox/Combobox.types.ts"],"sourcesContent":["import { Dispatch, HTMLAttributes, ReactNode, Ref, SetStateAction } from 'react';\n\nexport type ComboboxValueType = string | string[];\nexport type ComboboxSelectedType = 'single' | 'multi';\n\nexport const DEFAULT_COMBOBOX_TYPE: ComboboxSelectedType = 'single';\n\nexport interface ComboboxOption<Data extends object = object> {\n value: string;\n label: string;\n node?: Data;\n // tree only\n items?: ComboboxOption<Data>[];\n path?: string[];\n parent?: string;\n level?: number;\n matched?: boolean;\n}\n\nexport interface ComboboxCallbackStateParams<\n Data extends object = object,\n T extends ComboboxSelectedType = 'single'\n> {\n options: ComboboxOption<Data>[];\n setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>>\n search: string;\n setSearch: Dispatch<SetStateAction<string>>\n onChangeOption: (option: ComboboxOption<Data>) => void;\n open: boolean,\n setOpen: Dispatch<SetStateAction<boolean>>;\n loading: boolean;\n setLoading: Dispatch<SetStateAction<boolean>>;\n isEmptyList: boolean;\n isSearchedEmptyList: boolean;\n placeholder?: string;\n\n type: T;\n selectedOption: T extends 'single'\n ? ComboboxOption<Data> | undefined\n : ComboboxOption<Data>[];\n setSelectedOption: T extends 'single'\n ? Dispatch<SetStateAction<ComboboxOption<Data> | undefined>>\n : Dispatch<SetStateAction<ComboboxOption<Data>[] | undefined>>;\n}\n\nexport type ComboboxCallbackStateParamsUnion<Data extends object = object> = ComboboxCallbackStateParams<Data, 'single'> | ComboboxCallbackStateParams<Data, 'multi'>\nexport type ComboboxCallbackStateParamsRenderHandler<Data extends object = object> = (params:ComboboxCallbackStateParamsUnion<Data>) => ReactNode\n\nexport interface IComboboxOptionsNodeHandlersProps<Data extends object = object> {\n defaultNodeOpen?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n defaultNodeDisabled?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n defaultNodeMatched?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n defaultNodeMuted?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n defaultNodeInteractive?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n}\n\nexport interface IComboboxOptionsNodeProps<Data extends object = object>\n extends IComboboxOptionsNodeHandlersProps<Data> {\n type: ComboboxSelectedType,\n search?: string;\n value?: ComboboxValueType;\n option: ComboboxOption<Data>;\n onSelect?: (option: ComboboxOption<Data>) => void;\n deep?: number;\n}\n\nexport interface IComboboxOptionsProps<Data extends object = object>\n extends Omit<IComboboxOptionsNodeProps<Data>, 'option'>, IComboboxOptionsNodeHandlersProps<Data> {\n options?: ComboboxOption<Data>[];\n}\n\ninterface IListActionProps extends HTMLAttributes<HTMLDivElement> {\n bordered?: boolean;\n}\nexport interface ISlotProps {\n listFooterAction?: IListActionProps\n}\n\nexport interface ComboboxBaseProps<\n Data extends object = object,\n T extends ComboboxSelectedType = 'single'\n> extends IComboboxOptionsNodeHandlersProps {\n type?: T;\n // ref?: Ref<ComboboxCallbackStateParams<Data, T> | null>;\n imperativeRef?: Ref<\n ComboboxCallbackStateParams<Data, 'single'>\n | ComboboxCallbackStateParams<Data, 'multi'>\n | null\n >;\n placeholder?: string;\n searchLabel?: string;\n disabled?: boolean;\n fetchOptions: (search?: string) => Promise<ComboboxOption<Data>[]>;\n options?: ComboboxOption<Data>[];\n /** Command Empty list label*/\n emptyLabel?: string;\n /** Command Empty list action */\n emptyAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\n /** Command Input footer action */\n commandInputAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\n /** Command List first element action */\n listHeadAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\n /** Command List footer element action */\n listFooterAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\n /** Callback for load data on start component */\n onMount?: (params: ComboboxCallbackStateParams<Data, T>) => Promise<void>;\n\n renderTrigger?: (params: ComboboxCallbackStateParams<Data, T>) => ReactNode;\n renderList?: (params: ComboboxCallbackStateParams<Data, T>) => ReactNode;\n\n slotProps?: ISlotProps;\n}\n\nexport interface SingleComboboxProps<Data extends object = object>\n extends ComboboxBaseProps<Data, 'single'> {\n type?: 'single';\n value?: string;\n onChange: (value: string | undefined) => void;\n}\nexport interface MultiComboboxProps<Data extends object = object>\n extends ComboboxBaseProps<Data, 'multi'> {\n type: 'multi';\n value?: string[];\n onChange: (value: string[] | undefined) => void;\n}\n\nexport type ComboboxProps<\n Data extends object = object,\n T extends ComboboxSelectedType = 'single'\n> = T extends 'single'\n ? SingleComboboxProps<Data>\n : MultiComboboxProps<Data>;\n"],"names":["DEFAULT_COMBOBOX_TYPE"],"mappings":"AAKO,MAAMA,IAA8C;"}
1
+ {"version":3,"file":"Combobox.types.js","sources":["../../src/Combobox/Combobox.types.ts"],"sourcesContent":["import { Dispatch, HTMLAttributes, ReactNode, Ref, SetStateAction } from 'react';\r\n\r\nexport type ComboboxValueType = string | string[];\r\nexport type ComboboxSelectedType = 'single' | 'multi';\r\n\r\nexport const DEFAULT_COMBOBOX_TYPE: ComboboxSelectedType = 'single';\r\n\r\nexport interface ComboboxOption<Data extends object = object> {\r\n value: string;\r\n label: string;\r\n node?: Data;\r\n // tree only\r\n items?: ComboboxOption<Data>[];\r\n path?: string[];\r\n parent?: string;\r\n level?: number;\r\n matched?: boolean;\r\n}\r\n\r\nexport interface ComboboxCallbackStateParams<\r\n Data extends object = object,\r\n T extends ComboboxSelectedType = 'single'\r\n> {\r\n options: ComboboxOption<Data>[];\r\n setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>>\r\n search: string;\r\n setSearch: Dispatch<SetStateAction<string>>\r\n onChangeOption: (option: ComboboxOption<Data>) => void;\r\n open: boolean,\r\n setOpen: Dispatch<SetStateAction<boolean>>;\r\n loading: boolean;\r\n setLoading: Dispatch<SetStateAction<boolean>>;\r\n isEmptyList: boolean;\r\n isSearchedEmptyList: boolean;\r\n placeholder?: string;\r\n\r\n type: T;\r\n selectedOption: T extends 'single'\r\n ? ComboboxOption<Data> | undefined\r\n : ComboboxOption<Data>[];\r\n setSelectedOption: T extends 'single'\r\n ? Dispatch<SetStateAction<ComboboxOption<Data> | undefined>>\r\n : Dispatch<SetStateAction<ComboboxOption<Data>[] | undefined>>;\r\n}\r\n\r\nexport type ComboboxCallbackStateParamsUnion<Data extends object = object> = ComboboxCallbackStateParams<Data, 'single'> | ComboboxCallbackStateParams<Data, 'multi'>\r\nexport type ComboboxCallbackStateParamsRenderHandler<Data extends object = object> = (params:ComboboxCallbackStateParamsUnion<Data>) => ReactNode\r\n\r\nexport interface IComboboxOptionsNodeHandlersProps<Data extends object = object> {\r\n defaultNodeOpen?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\r\n defaultNodeDisabled?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\r\n defaultNodeMatched?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\r\n defaultNodeMuted?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\r\n defaultNodeInteractive?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\r\n}\r\n\r\nexport interface IComboboxOptionsNodeProps<Data extends object = object>\r\n extends IComboboxOptionsNodeHandlersProps<Data> {\r\n type: ComboboxSelectedType,\r\n search?: string;\r\n value?: ComboboxValueType;\r\n option: ComboboxOption<Data>;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n deep?: number;\r\n}\r\n\r\nexport interface IComboboxOptionsProps<Data extends object = object>\r\n extends Omit<IComboboxOptionsNodeProps<Data>, 'option'>, IComboboxOptionsNodeHandlersProps<Data> {\r\n options?: ComboboxOption<Data>[];\r\n}\r\n\r\ninterface IListActionProps extends HTMLAttributes<HTMLDivElement> {\r\n bordered?: boolean;\r\n}\r\nexport interface ISlotProps {\r\n listFooterAction?: IListActionProps\r\n}\r\n\r\nexport interface ComboboxBaseProps<\r\n Data extends object = object,\r\n T extends ComboboxSelectedType = 'single'\r\n> extends IComboboxOptionsNodeHandlersProps {\r\n type?: T;\r\n // ref?: Ref<ComboboxCallbackStateParams<Data, T> | null>;\r\n imperativeRef?: Ref<\r\n ComboboxCallbackStateParams<Data, 'single'>\r\n | ComboboxCallbackStateParams<Data, 'multi'>\r\n | null\r\n >;\r\n placeholder?: string;\r\n searchLabel?: string;\r\n disabled?: boolean;\r\n fetchOptions: (search?: string) => Promise<ComboboxOption<Data>[]>;\r\n options?: ComboboxOption<Data>[];\r\n /** Command Empty list label*/\r\n emptyLabel?: string;\r\n /** Command Empty list action */\r\n emptyAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\r\n /** Command Input footer action */\r\n commandInputAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\r\n /** Command List first element action */\r\n listHeadAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\r\n /** Command List footer element action */\r\n listFooterAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\r\n /** Callback for load data on start component */\r\n onMount?: (params: ComboboxCallbackStateParams<Data, T>) => Promise<void>;\r\n\r\n renderTrigger?: (params: ComboboxCallbackStateParams<Data, T>) => ReactNode;\r\n renderList?: (params: ComboboxCallbackStateParams<Data, T>) => ReactNode;\r\n\r\n slotProps?: ISlotProps;\r\n}\r\n\r\nexport interface SingleComboboxProps<Data extends object = object>\r\n extends ComboboxBaseProps<Data, 'single'> {\r\n type?: 'single';\r\n value?: string;\r\n onChange: (value: string | undefined) => void;\r\n}\r\nexport interface MultiComboboxProps<Data extends object = object>\r\n extends ComboboxBaseProps<Data, 'multi'> {\r\n type: 'multi';\r\n value?: string[];\r\n onChange: (value: string[] | undefined) => void;\r\n}\r\n\r\nexport type ComboboxProps<\r\n Data extends object = object,\r\n T extends ComboboxSelectedType = 'single'\r\n> = T extends 'single'\r\n ? SingleComboboxProps<Data>\r\n : MultiComboboxProps<Data>;\r\n"],"names":["DEFAULT_COMBOBOX_TYPE"],"mappings":"AAKO,MAAMA,IAA8C;"}
@@ -1,32 +1,31 @@
1
1
  import { jsxs as h, jsx as n } from "react/jsx-runtime";
2
- import { CommandItem as y } from "../Command/Command.js";
3
- import { DEFAULT_COMBOBOX_TYPE as b } from "./Combobox.types.js";
4
- import { ChevronRightIcon as g, CheckIcon as N } from "lucide-react";
2
+ import { DEFAULT_COMBOBOX_TYPE as y } from "./Combobox.types.js";
3
+ import { ChevronRightIcon as b, CheckIcon as g } from "lucide-react";
5
4
  import { cn as r } from "@oneplatformdev/utils";
6
- import { Checkbox as x } from "../Checkbox/Checkbox.js";
7
- import { ButtonIcon as D } from "../ButtonIcon/ButtonIcon.js";
8
- import "../ButtonIcon/buttonIconVariants.js";
9
- const k = 24, C = 8, E = (i) => i ? Math.max(i - 1, 0) * k - C : 0, B = (i) => {
5
+ import { CommandItem as N } from "../Command/Command.js";
6
+ import { ButtonIcon as x } from "../ButtonIcon/ButtonIcon.js";
7
+ import { Checkbox as D } from "../Checkbox/Checkbox.js";
8
+ const k = 24, C = 8, E = (s) => s ? Math.max(s - 1, 0) * k - C : 0, M = (s) => {
10
9
  const {
11
- type: c = b,
10
+ type: i = y,
12
11
  expanded: m,
13
12
  option: e,
14
13
  onSelect: v,
15
14
  value: l = "",
16
15
  deep: t = 0,
17
- onCollapseToggle: s,
16
+ onCollapseToggle: c,
18
17
  defaultNodeDisabled: p,
19
18
  defaultNodeMatched: d,
20
19
  defaultNodeMuted: u,
21
20
  defaultNodeInteractive: o
22
- } = i, f = Array.isArray(l) ? l.includes(e.value) : l === e.value;
21
+ } = s, f = Array.isArray(l) ? l.includes(e.value) : l === e.value;
23
22
  return /* @__PURE__ */ h(
24
- y,
23
+ N,
25
24
  {
26
25
  value: e.value,
27
26
  "data-matched": e.matched ?? !0,
28
27
  onSelect: () => {
29
- if (!(typeof o == "function" ? o(e, t) : o ?? !0)) return s?.();
28
+ if (!(typeof o == "function" ? o(e, t) : o ?? !0)) return c?.();
30
29
  v?.(e);
31
30
  },
32
31
  onClick: (a) => {
@@ -44,10 +43,10 @@ const k = 24, C = 8, E = (i) => i ? Math.max(i - 1, 0) * k - C : 0, B = (i) => {
44
43
  style: { paddingLeft: "var(--deep-space)" },
45
44
  className: "relative box-border min-w-10 h-10",
46
45
  onClick: (a) => {
47
- s && (a?.preventDefault(), a?.stopPropagation(), s?.());
46
+ c && (a?.preventDefault(), a?.stopPropagation(), c?.());
48
47
  },
49
- children: /* @__PURE__ */ n("div", { className: "w-10 aspect-square shrink-0", children: s && /* @__PURE__ */ n(
50
- D,
48
+ children: /* @__PURE__ */ n("div", { className: "w-10 aspect-square shrink-0", children: c && /* @__PURE__ */ n(
49
+ x,
51
50
  {
52
51
  type: "button",
53
52
  variant: "ghost",
@@ -56,7 +55,7 @@ const k = 24, C = 8, E = (i) => i ? Math.max(i - 1, 0) * k - C : 0, B = (i) => {
56
55
  "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent"
57
56
  ),
58
57
  icon: /* @__PURE__ */ n(
59
- g,
58
+ b,
60
59
  {
61
60
  strokeWidth: 2,
62
61
  className: r(
@@ -70,7 +69,7 @@ const k = 24, C = 8, E = (i) => i ? Math.max(i - 1, 0) * k - C : 0, B = (i) => {
70
69
  ) })
71
70
  }
72
71
  ),
73
- c === "multi" && /* @__PURE__ */ n(x, { checked: f, className: "mr-2 shrink-0" }),
72
+ i === "multi" && /* @__PURE__ */ n(D, { checked: f, className: "mr-2 shrink-0" }),
74
73
  /* @__PURE__ */ n(
75
74
  "span",
76
75
  {
@@ -83,8 +82,8 @@ const k = 24, C = 8, E = (i) => i ? Math.max(i - 1, 0) * k - C : 0, B = (i) => {
83
82
  children: e.label
84
83
  }
85
84
  ),
86
- c === "single" && /* @__PURE__ */ n(
87
- N,
85
+ i === "single" && /* @__PURE__ */ n(
86
+ g,
88
87
  {
89
88
  className: r(
90
89
  "ml-2 shrink-0",
@@ -98,6 +97,6 @@ const k = 24, C = 8, E = (i) => i ? Math.max(i - 1, 0) * k - C : 0, B = (i) => {
98
97
  );
99
98
  };
100
99
  export {
101
- B as ComboboxOptionItem
100
+ M as ComboboxOptionItem
102
101
  };
103
102
  //# sourceMappingURL=ComboboxOptionItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { DEFAULT_COMBOBOX_TYPE, IComboboxOptionsNodeProps } from './Combobox.types';\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { Checkbox } from \"../Checkbox\";\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nconst DEEP_OFFSET = 24;\nconst DEEP_PADDING_DELTA = 8;\nconst calcDeepSpace = (deep: number) => {\n if(!deep) return 0;\n const space = Math.max(deep - 1, 0) * DEEP_OFFSET;\n return space - DEEP_PADDING_DELTA;\n}\n\nexport const ComboboxOptionItem = <Data extends object>(\n props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\n onCollapseToggle?: () => void;\n expanded?: boolean;\n }\n) => {\n const {\n type = DEFAULT_COMBOBOX_TYPE,\n expanded,\n option,\n onSelect,\n value = '',\n deep = 0,\n onCollapseToggle,\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n } = props;\n\n const isSelected = Array.isArray(value)\n ? value.includes(option.value)\n : value === option.value;\n\n return (\n <CommandItem\n key={option.value}\n value={option.value}\n data-matched={option.matched ?? true}\n onSelect={() => {\n const interactive = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n if(!interactive) return onCollapseToggle?.();\n onSelect?.(option);\n }}\n onClick={(e) => {\n const interactive = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n\n if(!interactive) {\n e?.preventDefault();\n e?.stopPropagation();\n }\n }}\n className={cn('py-0 gap-0', deep && 'pl-0')}\n style={{\n '--deep-space': `${calcDeepSpace(deep)}px`,\n } as CSSProperties}\n disabled={typeof defaultNodeDisabled === \"function\"\n ? defaultNodeDisabled(option, deep)\n : defaultNodeDisabled ?? false}\n >\n {!!deep && (\n <div\n style={{ paddingLeft: 'var(--deep-space)' }}\n className='relative box-border min-w-10 h-10'\n onClick={(e) => {\n if(!onCollapseToggle) return;\n e?.preventDefault();\n e?.stopPropagation();\n onCollapseToggle?.();\n }}\n >\n <div className='w-10 aspect-square shrink-0'>\n {onCollapseToggle && (\n <ButtonIcon\n type=\"button\"\n variant=\"ghost\"\n color='secondary'\n className={cn(\n 'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n )}\n icon={(\n <ChevronRightIcon\n strokeWidth={2}\n className={cn(\n 'text-[#06080D]',\n 'transition-transform duration-200',\n expanded && 'rotate-90',\n )}\n />\n )}\n />\n )}\n </div>\n </div>\n )}\n {type === 'multi' && <Checkbox checked={isSelected} className='mr-2 shrink-0'/>}\n <span\n className={cn(\n 'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2 grow',\n (() => {\n return typeof defaultNodeMatched === \"function\"\n ? defaultNodeMatched(option, deep)\n : defaultNodeMatched ?? false\n })() && 'font-bold',\n (() => {\n return typeof defaultNodeMuted === \"function\"\n ? defaultNodeMuted(option, deep)\n : defaultNodeMuted ?? false\n })() && 'opacity-60',\n (() => {\n const res = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n return !res;\n })() && 'pointer-events-none',\n )}\n >\n {option.label}\n </span>\n {type === 'single' && (\n <CheckIcon\n className={cn(\n 'ml-2 shrink-0',\n isSelected ? 'opacity-100' : 'opacity-0'\n )}\n />\n )}\n </CommandItem>\n );\n}\n"],"names":["DEEP_OFFSET","DEEP_PADDING_DELTA","calcDeepSpace","deep","ComboboxOptionItem","props","type","DEFAULT_COMBOBOX_TYPE","expanded","option","onSelect","value","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","isSelected","jsxs","CommandItem","e","cn","jsx","ButtonIcon","ChevronRightIcon","Checkbox","CheckIcon"],"mappings":"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"}
1
+ {"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\r\nimport { CommandItem } from '../Command';\r\nimport { DEFAULT_COMBOBOX_TYPE, IComboboxOptionsNodeProps } from './Combobox.types';\r\nimport { CheckIcon, ChevronRightIcon } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { Checkbox } from \"../Checkbox\";\r\nimport { ButtonIcon } from \"../ButtonIcon\";\r\n\r\nconst DEEP_OFFSET = 24;\r\nconst DEEP_PADDING_DELTA = 8;\r\nconst calcDeepSpace = (deep: number) => {\r\n if(!deep) return 0;\r\n const space = Math.max(deep - 1, 0) * DEEP_OFFSET;\r\n return space - DEEP_PADDING_DELTA;\r\n}\r\n\r\nexport const ComboboxOptionItem = <Data extends object>(\r\n props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\r\n onCollapseToggle?: () => void;\r\n expanded?: boolean;\r\n }\r\n) => {\r\n const {\r\n type = DEFAULT_COMBOBOX_TYPE,\r\n expanded,\r\n option,\r\n onSelect,\r\n value = '',\r\n deep = 0,\r\n onCollapseToggle,\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n } = props;\r\n\r\n const isSelected = Array.isArray(value)\r\n ? value.includes(option.value)\r\n : value === option.value;\r\n\r\n return (\r\n <CommandItem\r\n key={option.value}\r\n value={option.value}\r\n data-matched={option.matched ?? true}\r\n onSelect={() => {\r\n const interactive = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true\r\n if(!interactive) return onCollapseToggle?.();\r\n onSelect?.(option);\r\n }}\r\n onClick={(e) => {\r\n const interactive = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true\r\n\r\n if(!interactive) {\r\n e?.preventDefault();\r\n e?.stopPropagation();\r\n }\r\n }}\r\n className={cn('py-0 gap-0', deep && 'pl-0')}\r\n style={{\r\n '--deep-space': `${calcDeepSpace(deep)}px`,\r\n } as CSSProperties}\r\n disabled={typeof defaultNodeDisabled === \"function\"\r\n ? defaultNodeDisabled(option, deep)\r\n : defaultNodeDisabled ?? false}\r\n >\r\n {!!deep && (\r\n <div\r\n style={{ paddingLeft: 'var(--deep-space)' }}\r\n className='relative box-border min-w-10 h-10'\r\n onClick={(e) => {\r\n if(!onCollapseToggle) return;\r\n e?.preventDefault();\r\n e?.stopPropagation();\r\n onCollapseToggle?.();\r\n }}\r\n >\r\n <div className='w-10 aspect-square shrink-0'>\r\n {onCollapseToggle && (\r\n <ButtonIcon\r\n type=\"button\"\r\n variant=\"ghost\"\r\n color='secondary'\r\n className={cn(\r\n 'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\r\n )}\r\n icon={(\r\n <ChevronRightIcon\r\n strokeWidth={2}\r\n className={cn(\r\n 'text-[#06080D]',\r\n 'transition-transform duration-200',\r\n expanded && 'rotate-90',\r\n )}\r\n />\r\n )}\r\n />\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {type === 'multi' && <Checkbox checked={isSelected} className='mr-2 shrink-0'/>}\r\n <span\r\n className={cn(\r\n 'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2 grow',\r\n (() => {\r\n return typeof defaultNodeMatched === \"function\"\r\n ? defaultNodeMatched(option, deep)\r\n : defaultNodeMatched ?? false\r\n })() && 'font-bold',\r\n (() => {\r\n return typeof defaultNodeMuted === \"function\"\r\n ? defaultNodeMuted(option, deep)\r\n : defaultNodeMuted ?? false\r\n })() && 'opacity-60',\r\n (() => {\r\n const res = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true\r\n return !res;\r\n })() && 'pointer-events-none',\r\n )}\r\n >\r\n {option.label}\r\n </span>\r\n {type === 'single' && (\r\n <CheckIcon\r\n className={cn(\r\n 'ml-2 shrink-0',\r\n isSelected ? 'opacity-100' : 'opacity-0'\r\n )}\r\n />\r\n )}\r\n </CommandItem>\r\n );\r\n}\r\n"],"names":["DEEP_OFFSET","DEEP_PADDING_DELTA","calcDeepSpace","deep","ComboboxOptionItem","props","type","DEFAULT_COMBOBOX_TYPE","expanded","option","onSelect","value","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","isSelected","jsxs","CommandItem","e","cn","jsx","ButtonIcon","ChevronRightIcon","Checkbox","CheckIcon"],"mappings":"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"}
@@ -1,17 +1,16 @@
1
- import { jsx as e, jsxs as i, Fragment as u } from "react/jsx-runtime";
2
- import { LoadingMask as M } from "../LoadingMask/LoadingMask.js";
3
- import "../LoadingMask/RenderLoadingMask.js";
1
+ import { jsx as e, jsxs as l, Fragment as u } from "react/jsx-runtime";
2
+ import { cn as m } from "@oneplatformdev/utils";
3
+ import { ComboboxRenderOptions as M } from "./ComboboxRenderOptions.js";
4
4
  import { PopoverContent as P } from "../Popover/Popover.js";
5
5
  import { Command as j, CommandInput as k, CommandList as E, CommandGroup as O, CommandEmpty as x, CommandItem as R } from "../Command/Command.js";
6
- import { cn as m } from "@oneplatformdev/utils";
7
- import { ComboboxRenderOptions as D } from "./ComboboxRenderOptions.js";
8
- const z = (b) => {
6
+ import { LoadingMask as D } from "../LoadingMask/LoadingMask.js";
7
+ const q = (b) => {
9
8
  const {
10
9
  type: y,
11
10
  search: p,
12
11
  onSearch: C,
13
12
  loading: t,
14
- isEmptyList: l,
13
+ isEmptyList: i,
15
14
  onSelect: N,
16
15
  options: f = [],
17
16
  callbackStateParams: o,
@@ -36,7 +35,7 @@ const z = (b) => {
36
35
  "w-(--radix-popper-anchor-width) max-w-none p-2"
37
36
  ),
38
37
  align: "start",
39
- children: /* @__PURE__ */ i(j, { shouldFilter: !1, children: [
38
+ children: /* @__PURE__ */ l(j, { shouldFilter: !1, children: [
40
39
  /* @__PURE__ */ e(
41
40
  k,
42
41
  {
@@ -46,7 +45,7 @@ const z = (b) => {
46
45
  }
47
46
  ),
48
47
  typeof d == "function" ? d(o) : d,
49
- /* @__PURE__ */ e(E, { children: /* @__PURE__ */ i(
48
+ /* @__PURE__ */ e(E, { children: /* @__PURE__ */ l(
50
49
  O,
51
50
  {
52
51
  className: m(
@@ -54,12 +53,12 @@ const z = (b) => {
54
53
  "px-0 py-2"
55
54
  ),
56
55
  children: [
57
- t && /* @__PURE__ */ e(M, { fullWidth: !0 }),
58
- !t && l && /* @__PURE__ */ e(u, { children: n ? /* @__PURE__ */ i(x, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
56
+ t && /* @__PURE__ */ e(D, { fullWidth: !0 }),
57
+ !t && i && /* @__PURE__ */ e(u, { children: n ? /* @__PURE__ */ l(x, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
59
58
  /* @__PURE__ */ e("span", { children: h }),
60
59
  typeof n == "function" ? n(o) : n
61
60
  ] }) : /* @__PURE__ */ e(x, { children: h }) }),
62
- !t && !l && /* @__PURE__ */ i(u, { children: [
61
+ !t && !i && /* @__PURE__ */ l(u, { children: [
63
62
  r && /* @__PURE__ */ e(
64
63
  R,
65
64
  {
@@ -71,7 +70,7 @@ const z = (b) => {
71
70
  ),
72
71
  c && c(o),
73
72
  !c && /* @__PURE__ */ e(
74
- D,
73
+ M,
75
74
  {
76
75
  type: y,
77
76
  search: p,
@@ -88,7 +87,7 @@ const z = (b) => {
88
87
  ]
89
88
  }
90
89
  ) }),
91
- !t && a && !l && /* @__PURE__ */ e(
90
+ !t && a && !i && /* @__PURE__ */ e(
92
91
  "div",
93
92
  {
94
93
  "data-slot": "command-footer-wrapper",
@@ -112,6 +111,6 @@ const z = (b) => {
112
111
  );
113
112
  };
114
113
  export {
115
- z as ComboboxRenderContent
114
+ q as ComboboxRenderContent
116
115
  };
117
116
  //# sourceMappingURL=ComboboxRenderContent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\nimport { PopoverContent } from '../Popover';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport {\n ComboboxCallbackStateParamsRenderHandler,\n ComboboxCallbackStateParamsUnion,\n ComboboxOption, ComboboxProps,\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\n ISlotProps,\n} from './Combobox.types';\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\n\ntype ComboboxRenderContentProps<Data extends object = object> = IComboboxOptionsNodeHandlersProps<Data> & {\n type: ComboboxSelectedType,\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\n\n loading: boolean;\n options: ComboboxOption<Data>[];\n search?: string;\n onSearch?: (term: string) => void;\n isEmptyList?: boolean;\n onSelect?: (option: ComboboxOption<Data>) => void;\n\n searchLabel?: string;\n emptyLabel?: string;\n\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\n\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\n\n slotProps?: ISlotProps;\n}\n\n\nexport const ComboboxRenderContent = <Data extends object = object>(\n props: ComboboxRenderContentProps<Data>\n) => {\n const {\n type,\n search,\n onSearch,\n loading,\n isEmptyList,\n onSelect,\n options = [],\n callbackStateParams,\n value,\n searchLabel = 'Type to search...',\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n slotProps = {},\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n renderList,\n } = props;\n\n return (\n <PopoverContent\n className={cn(\n \"w-(--radix-popper-anchor-width) max-w-none p-2\"\n )}\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={search}\n onValueChange={onSearch}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(callbackStateParams)\n : commandInputAction}\n\n <CommandList>\n <CommandGroup\n className={cn(\n !options.length && 'p-0 shadow-none',\n 'px-0 py-2',\n )}\n >\n {loading && <LoadingMask fullWidth/>}\n {!loading && isEmptyList && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(callbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n\n {!loading && !isEmptyList && (\n <>\n {listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(callbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n\n {renderList && renderList(callbackStateParams)}\n\n {!renderList && (\n <ComboboxRenderOptions\n type={type}\n search={search}\n value={value}\n options={options}\n onSelect={onSelect}\n defaultNodeDisabled={defaultNodeDisabled}\n defaultNodeMatched={defaultNodeMatched}\n defaultNodeMuted={defaultNodeMuted}\n defaultNodeInteractive={defaultNodeInteractive}/>\n )}\n </>\n )}\n\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {!loading && listFooterAction && !isEmptyList && (\n <div\n data-slot=\"command-footer-wrapper\"\n {...((() => {\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\n return {\n ...rest,\n 'data-slot-bordered': JSON.stringify(bordered)\n }\n })())}\n className={cn(\n \"flex w-full items-center gap-2 px-0\",\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\n slotProps?.listFooterAction?.className,\n )}\n >\n {typeof listFooterAction === 'function'\n ? listFooterAction(callbackStateParams)\n : listFooterAction}\n </div>\n )}\n </Command>\n </PopoverContent>\n );\n}\n"],"names":["ComboboxRenderContent","props","type","search","onSearch","loading","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","renderList","jsx","PopoverContent","cn","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\n\r\ntype ComboboxRenderContentProps<Data extends object = object> = IComboboxOptionsNodeHandlersProps<Data> & {\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n\r\n loading: boolean;\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\r\n\r\nexport const ComboboxRenderContent = <Data extends object = object>(\r\n props: ComboboxRenderContentProps<Data>\r\n) => {\r\n const {\r\n type,\r\n search,\r\n onSearch,\r\n loading,\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 renderList,\r\n } = props;\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 >\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>\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 )}\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":["ComboboxRenderContent","props","type","search","onSearch","loading","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","renderList","jsx","PopoverContent","cn","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":";;;;;;AA8CO,MAAMA,IAAwB,CACnCC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU,CAAA;AAAA,IACV,qBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,WAAAC,IAAY,CAAA;AAAA,IACZ,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACErB;AAEJ,SACE,gBAAAsB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,MAAA;AAAA,MAEF,OAAM;AAAA,MAEN,UAAA,gBAAAC,EAACC,GAAA,EAAQ,cAAc,IACrB,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,aAAajB;AAAA,YACb,OAAOR;AAAA,YACP,eAAeC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEhB,OAAOU,KAAuB,aAC3BA,EAAmBL,CAAmB,IACtCK;AAAA,0BAEHe,GAAA,EACC,UAAA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT,CAACjB,EAAQ,UAAU;AAAA,cACnB;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAH,KAAW,gBAAAkB,EAACQ,KAAY,WAAS,GAAA,CAAA;AAAA,cACjC,CAAC1B,KAAWC,KACX,gBAAAiB,EAAAS,GAAA,EACG,cACC,gBAAAN,EAACO,GAAA,EAAa,WAAU,8CACtB,UAAA;AAAA,gBAAA,gBAAAV,EAAC,UAAM,UAAAX,EAAA,CAAW;AAAA,gBACjB,OAAOC,KAAgB,aACpBA,EAAYJ,CAAmB,IAC/BI;AAAA,cAAA,EAAA,CACN,IAEA,gBAAAU,EAACU,GAAA,EAAc,UAAArB,EAAA,CAAW,GAE9B;AAAA,cAGD,CAACP,KAAW,CAACC,KACZ,gBAAAoB,EAAAM,GAAA,EACG,UAAA;AAAA,gBAAAjB,KACC,gBAAAQ;AAAA,kBAACW;AAAA,kBAAA;AAAA,oBAEC,SAAO;AAAA,oBACP,WAAU;AAAA,oBAET,UAAA,OAAOnB,KAAmB,aACvBA,EAAeN,CAAmB,IAClCM;AAAA,kBAAA;AAAA,kBANA;AAAA,gBAAA;AAAA,gBAUPO,KAAcA,EAAWb,CAAmB;AAAA,gBAE5C,CAACa,KACA,gBAAAC;AAAA,kBAACY;AAAA,kBAAA;AAAA,oBACC,MAAAjC;AAAA,oBACA,QAAAC;AAAA,oBACA,OAAAO;AAAA,oBACA,SAAAF;AAAA,oBACA,UAAAD;AAAA,oBACA,qBAAAW;AAAA,oBACA,oBAAAC;AAAA,oBACA,kBAAAC;AAAA,oBACA,wBAAAC;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAA+C,EAAA,CAErD;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAIN;AAAA,QAGC,CAAChB,KAAWW,KAAoB,CAACV,KAChC,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACT,IAAK,MAAM;AACV,oBAAM,EAAE,UAAAa,IAAW,IAAM,GAAGC,MAASpB,GAAW,oBAAoB,CAAA;AACpE,qBAAO;AAAA,gBACL,GAAGoB;AAAA,gBACH,sBAAsB,KAAK,UAAUD,CAAQ;AAAA,cAAA;AAAA,YAEjD,GAAA;AAAA,YACA,WAAWX;AAAA,cACT;AAAA,eACCR,GAAW,kBAAkB,YAAY,OAAS;AAAA,cACnDA,GAAW,kBAAkB;AAAA,YAAA;AAAA,YAG9B,UAAA,OAAOD,KAAqB,aACzBA,EAAiBP,CAAmB,IACpCO;AAAA,UAAA;AAAA,QAAA;AAAA,MACN,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
@@ -1,17 +1,17 @@
1
1
  import { jsx as t, jsxs as c } from "react/jsx-runtime";
2
2
  import { useState as f, useMemo as u } from "react";
3
- import { Collapsible as b, CollapsibleContent as x } from "../Collapsible/Collapsible.js";
4
3
  import { ComboboxOptionItem as m } from "./ComboboxOptionItem.js";
5
- import { cn as h } from "@oneplatformdev/utils";
4
+ import { cn as b } from "@oneplatformdev/utils";
5
+ import { Collapsible as x, CollapsibleContent as h } from "../Collapsible/Collapsible.js";
6
6
  const d = (n) => {
7
7
  const { option: e, deep: l = 0, defaultNodeOpen: s, defaultNodeDisabled: o, search: p } = n, [r, i] = f(() => typeof s == "function" ? s(e, l) : s ?? (!!p || !l));
8
8
  return e?.items?.length ? /* @__PURE__ */ c(
9
- b,
9
+ x,
10
10
  {
11
11
  open: r,
12
12
  onOpenChange: i,
13
13
  "data-opened": r,
14
- className: h("group/collapsible"),
14
+ className: b("group/collapsible"),
15
15
  disabled: typeof o == "function" ? o(e, l) : o ?? !1,
16
16
  children: [
17
17
  /* @__PURE__ */ t(
@@ -22,7 +22,7 @@ const d = (n) => {
22
22
  onCollapseToggle: () => i((a) => !a)
23
23
  }
24
24
  ),
25
- /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: e?.items.map((a) => /* @__PURE__ */ t(
25
+ /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-0", children: e?.items.map((a) => /* @__PURE__ */ t(
26
26
  d,
27
27
  {
28
28
  ...n,
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxRenderOptions.js","sources":["../../src/Combobox/ComboboxRenderOptions.tsx"],"sourcesContent":["import {\n IComboboxOptionsNodeProps,\n IComboboxOptionsProps,\n} from './Combobox.types';\nimport { useMemo, useState } from 'react';\nimport {\n Collapsible,\n CollapsibleContent,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { cn } from '@oneplatformdev/utils';\n\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\n const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, search } = props;\n\n const [open, onOpenChange] = useState(() => {\n const def = !!search || !deep;\n return typeof defaultNodeOpen === \"function\"\n ? defaultNodeOpen(option, deep)\n : defaultNodeOpen ?? def\n });\n\n if (!option?.items?.length) return <ComboboxOptionItem {...props} />;\n return (\n <Collapsible\n open={open}\n onOpenChange={onOpenChange}\n data-opened={open}\n className={cn('group/collapsible')}\n disabled={typeof defaultNodeDisabled === \"function\"\n ? defaultNodeDisabled(option, deep)\n : defaultNodeDisabled ?? false}\n >\n <ComboboxOptionItem\n {...props}\n expanded={open}\n onCollapseToggle={() => onOpenChange(prev => !prev)}\n />\n\n <CollapsibleContent>\n <div className=\"flex flex-col gap-0\">\n {option?.items.map((opt) => {\n return (\n <ComboboxOptionsNode\n key={opt.value}\n {...props}\n deep={deep + 1}\n option={opt}\n />\n );\n })}\n </div>\n </CollapsibleContent>\n </Collapsible>\n );\n}\n\nexport const ComboboxRenderOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\n const { options = [], ...rest } = props;\n const hasTree = useMemo(() => options.some(o => o.items?.length), [options]);\n return (\n <div className=\"flex flex-col gap-0\">\n {options.map((option) => (\n <ComboboxOptionsNode\n key={option.value}\n {...rest}\n option={option}\n deep={Number(hasTree)}\n />\n ))}\n </div>\n );\n}\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","search","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","prev","CollapsibleContent","opt","ComboboxRenderOptions","options","rest","hasTree","useMemo"],"mappings":";;;;;AAYO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,QAAAC,MAAWL,GAErE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAU,CAACH,EAI1B;AAED,SAAKD,GAAQ,OAAO,SAElB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGb;AAAA,YACJ,UAAUM;AAAA,YACV,kBAAkB,MAAMC,EAAa,CAAAO,MAAQ,CAACA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGpD,gBAAAF,EAACG,GAAA,EACC,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACe,MAEhB,gBAAAJ;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQc;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA9B+B,gBAAAJ,EAACC,GAAA,EAAoB,GAAGb,GAAO;AAiCpE,GAEaiB,IAAwB,CAAsBjB,MAAuC;AAChG,QAAM,EAAE,SAAAkB,IAAU,CAAA,GAAI,GAAGC,MAASnB,GAC5BoB,IAAUC,EAAQ,MAAMH,EAAQ,KAAK,CAAA,MAAK,EAAE,OAAO,MAAM,GAAG,CAACA,CAAO,CAAC;AAC3E,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAA,EAAQ,IAAI,CAACjB,MACZ,gBAAAW;AAAA,IAACb;AAAA,IAAA;AAAA,MAEE,GAAGoB;AAAA,MACJ,QAAAlB;AAAA,MACA,MAAM,OAAOmB,CAAO;AAAA,IAAA;AAAA,IAHfnB,EAAO;AAAA,EAAA,CAKf,GACH;AAEJ;"}
1
+ {"version":3,"file":"ComboboxRenderOptions.js","sources":["../../src/Combobox/ComboboxRenderOptions.tsx"],"sourcesContent":["import {\r\n IComboboxOptionsNodeProps,\r\n IComboboxOptionsProps,\r\n} from './Combobox.types';\r\nimport { useMemo, useState } from 'react';\r\nimport {\r\n Collapsible,\r\n CollapsibleContent,\r\n} from '../Collapsible';\r\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\r\n const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, search } = props;\r\n\r\n const [open, onOpenChange] = useState(() => {\r\n const def = !!search || !deep;\r\n return typeof defaultNodeOpen === \"function\"\r\n ? defaultNodeOpen(option, deep)\r\n : defaultNodeOpen ?? def\r\n });\r\n\r\n if (!option?.items?.length) return <ComboboxOptionItem {...props} />;\r\n return (\r\n <Collapsible\r\n open={open}\r\n onOpenChange={onOpenChange}\r\n data-opened={open}\r\n className={cn('group/collapsible')}\r\n disabled={typeof defaultNodeDisabled === \"function\"\r\n ? defaultNodeDisabled(option, deep)\r\n : defaultNodeDisabled ?? false}\r\n >\r\n <ComboboxOptionItem\r\n {...props}\r\n expanded={open}\r\n onCollapseToggle={() => onOpenChange(prev => !prev)}\r\n />\r\n\r\n <CollapsibleContent>\r\n <div className=\"flex flex-col gap-0\">\r\n {option?.items.map((opt) => {\r\n return (\r\n <ComboboxOptionsNode\r\n key={opt.value}\r\n {...props}\r\n deep={deep + 1}\r\n option={opt}\r\n />\r\n );\r\n })}\r\n </div>\r\n </CollapsibleContent>\r\n </Collapsible>\r\n );\r\n}\r\n\r\nexport const ComboboxRenderOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\r\n const { options = [], ...rest } = props;\r\n const hasTree = useMemo(() => options.some(o => o.items?.length), [options]);\r\n return (\r\n <div className=\"flex flex-col gap-0\">\r\n {options.map((option) => (\r\n <ComboboxOptionsNode\r\n key={option.value}\r\n {...rest}\r\n option={option}\r\n deep={Number(hasTree)}\r\n />\r\n ))}\r\n </div>\r\n );\r\n}\r\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","search","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","prev","CollapsibleContent","opt","ComboboxRenderOptions","options","rest","hasTree","useMemo"],"mappings":";;;;;AAYO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,QAAAC,MAAWL,GAErE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAU,CAACH,EAI1B;AAED,SAAKD,GAAQ,OAAO,SAElB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGb;AAAA,YACJ,UAAUM;AAAA,YACV,kBAAkB,MAAMC,EAAa,CAAAO,MAAQ,CAACA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGpD,gBAAAF,EAACG,GAAA,EACC,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACe,MAEhB,gBAAAJ;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQc;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA9B+B,gBAAAJ,EAACC,GAAA,EAAoB,GAAGb,GAAO;AAiCpE,GAEaiB,IAAwB,CAAsBjB,MAAuC;AAChG,QAAM,EAAE,SAAAkB,IAAU,CAAA,GAAI,GAAGC,MAASnB,GAC5BoB,IAAUC,EAAQ,MAAMH,EAAQ,KAAK,CAAA,MAAK,EAAE,OAAO,MAAM,GAAG,CAACA,CAAO,CAAC;AAC3E,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAA,EAAQ,IAAI,CAACjB,MACZ,gBAAAW;AAAA,IAACb;AAAA,IAAA;AAAA,MAEE,GAAGoB;AAAA,MACJ,QAAAlB;AAAA,MACA,MAAM,OAAOmB,CAAO;AAAA,IAAA;AAAA,IAHfnB,EAAO;AAAA,EAAA,CAKf,GACH;AAEJ;"}
@@ -1,27 +1,25 @@
1
- import { jsx as r, jsxs as d, Fragment as b } from "react/jsx-runtime";
1
+ import { jsx as r, jsxs as p, Fragment as b } from "react/jsx-runtime";
2
2
  import { DEFAULT_COMBOBOX_TYPE as h } from "./Combobox.types.js";
3
- import { Button as v } from "../Button/Button.js";
4
- import "../Button/buttonVariants.js";
3
+ import { cn as d } from "@oneplatformdev/utils";
4
+ import { XIcon as f, ChevronDown as v } from "lucide-react";
5
5
  import { useMemo as w } from "react";
6
- import { cn as u } from "@oneplatformdev/utils";
7
- import { LoadingMask as x } from "../LoadingMask/LoadingMask.js";
8
- import "../LoadingMask/RenderLoadingMask.js";
9
- import { XIcon as f, ChevronDown as y } from "lucide-react";
10
- import { PopoverTrigger as C } from "../Popover/Popover.js";
6
+ import { PopoverTrigger as x } from "../Popover/Popover.js";
7
+ import { Button as y } from "../Button/Button.js";
8
+ import { LoadingMask as C } from "../LoadingMask/LoadingMask.js";
11
9
  import { ScrollArea as N } from "../ScrollArea/ScrollArea.js";
12
10
  const g = (o) => {
13
11
  const { value: n, flattenOptions: a = [], selectedOptions: t = /* @__PURE__ */ new Map() } = o;
14
12
  return w(() => {
15
13
  if (!n) return [];
16
- const c = Array.from(t.values()), i = Array.isArray(n) ? n : [n], p = [...a.filter((l) => i.find((s) => String(s).toLowerCase() === String(l.value).toLowerCase())), ...c].reduce((l, s) => (!s || l.has(s.value) || l.set(s.value, { ...s, label: s.label || s.value }), l), /* @__PURE__ */ new Map());
17
- return p.size ? Array.from(p.values()) : i.map((l) => ({ value: l, label: String(l) }));
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) }));
18
16
  }, [n, a, t]);
19
17
  }, k = (o) => {
20
- const { type: n = h, placeholder: a, onSelect: t, open: c } = o, i = g(o);
21
- return i.length ? n === "single" ? /* @__PURE__ */ r("span", { className: "truncate overflow-hidden whitespace-nowrap break-words line-clamp-1 pr-8", children: i[0].label }) : n === "multi" ? /* @__PURE__ */ r(
18
+ const { type: n = h, placeholder: a, onSelect: t, open: c } = o, l = g(o);
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(
22
20
  N,
23
21
  {
24
- className: u(
22
+ className: d(
25
23
  "w-full h-auto min-h-5 max-h-20.25",
26
24
  "overflow-y-auto overflow-x-hidden"
27
25
  ),
@@ -30,10 +28,10 @@ const g = (o) => {
30
28
  className: "[&>div]:block!"
31
29
  }
32
30
  },
33
- children: /* @__PURE__ */ r("div", { className: "p-0 gap-1 flex flex-wrap w-full pr-11", children: i.map((e) => e ? /* @__PURE__ */ d(
31
+ children: /* @__PURE__ */ r("div", { className: "p-0 gap-1 flex flex-wrap w-full pr-11", children: l.map((e) => e ? /* @__PURE__ */ p(
34
32
  "div",
35
33
  {
36
- className: u(
34
+ className: d(
37
35
  "flex items-center justify-center",
38
36
  "py-1 px-2 min-h-5 w-fit gap-1",
39
37
  "bg-[#9368FF] rounded-sm",
@@ -41,8 +39,8 @@ const g = (o) => {
41
39
  "cursor-pointer",
42
40
  "truncate"
43
41
  ),
44
- onClick: (p) => {
45
- c && (p.preventDefault(), p.stopPropagation(), t?.(e));
42
+ onClick: (u) => {
43
+ c && (u.preventDefault(), u.stopPropagation(), t?.(e));
46
44
  },
47
45
  children: [
48
46
  /* @__PURE__ */ r("span", { className: "whitespace-pre-wrap wrap-break-word line-clamp-1", children: e.label }),
@@ -54,12 +52,12 @@ const g = (o) => {
54
52
  }
55
53
  ) : "No supported to render" : /* @__PURE__ */ r("span", { className: "text-gray-400 whitespace-pre-wrap break-words line-clamp-1 pr-11", children: a });
56
54
  }, m = (o) => {
57
- const { children: n, prevented: a = !0, onClick: t, className: c, ...i } = o;
55
+ const { children: n, prevented: a = !0, onClick: t, className: c, ...l } = o;
58
56
  return /* @__PURE__ */ r(
59
57
  "div",
60
58
  {
61
- ...i,
62
- className: u(
59
+ ...l,
60
+ className: d(
63
61
  "absolute top-1/2 -translate-y-1/2 right-1",
64
62
  "flex items-center justify-center",
65
63
  "w-10 h-10 [&_svg]:size-5!",
@@ -75,24 +73,24 @@ const g = (o) => {
75
73
  );
76
74
  }, A = (o) => {
77
75
  const { open: n, onClearSelections: a } = o, t = g(o);
78
- return n ? t.length ? /* @__PURE__ */ r(m, { onClick: () => a?.(), children: /* @__PURE__ */ r(f, {}) }) : null : /* @__PURE__ */ r(m, { prevented: !1, children: /* @__PURE__ */ r(y, {}) });
79
- }, B = (o) => {
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
+ }, E = (o) => {
80
78
  const {
81
79
  type: n,
82
80
  open: a,
83
81
  initialLoading: t,
84
82
  callbackStateParams: c,
85
- disabled: i,
83
+ disabled: l,
86
84
  renderTrigger: e
87
85
  } = o;
88
- return /* @__PURE__ */ r(C, { asChild: !0, className: "border-input", children: /* @__PURE__ */ d(
89
- v,
86
+ return /* @__PURE__ */ r(x, { asChild: !0, className: "border-input", children: /* @__PURE__ */ p(
87
+ y,
90
88
  {
91
89
  variant: e ? "none" : "contained",
92
90
  color: "secondary",
93
91
  role: "combobox",
94
92
  "aria-expanded": a,
95
- className: u(
93
+ className: d(
96
94
  "relative w-full justify-between bg-transparent",
97
95
  !e && "font-normal text-sm",
98
96
  "border border-border",
@@ -102,11 +100,11 @@ const g = (o) => {
102
100
  e && "p-0",
103
101
  e && a && "p-0 border-1 ring-0 ring-transparent"
104
102
  ),
105
- disabled: i || t,
103
+ disabled: l || t,
106
104
  children: [
107
- t && /* @__PURE__ */ r(x, { fullWidth: !0 }),
105
+ t && /* @__PURE__ */ r(C, { fullWidth: !0 }),
108
106
  !t && e && e(c),
109
- !t && !e && /* @__PURE__ */ d(b, { children: [
107
+ !t && !e && /* @__PURE__ */ p(b, { children: [
110
108
  /* @__PURE__ */ r(k, { ...o }),
111
109
  /* @__PURE__ */ r(A, { ...o })
112
110
  ] })
@@ -115,6 +113,6 @@ const g = (o) => {
115
113
  ) });
116
114
  };
117
115
  export {
118
- B as ComboboxRenderTrigger
116
+ E as ComboboxRenderTrigger
119
117
  };
120
118
  //# sourceMappingURL=ComboboxRenderTrigger.js.map