@datum-cloud/datum-ui 0.6.0 → 0.7.0
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.
- package/LICENSE +21 -0
- package/README.md +10 -0
- package/dist/action-row-DnhBhMtt.mjs +22 -0
- package/dist/app-navigation/index.mjs +2 -2
- package/dist/{app-navigation-84ro28PU.mjs → app-navigation-D0EBWUwJ.mjs} +48 -3
- package/dist/autocomplete/index.mjs +1 -1
- package/dist/autocomplete-DdbTQe6u.mjs +141 -0
- package/dist/autosearch/index.mjs +100 -92
- package/dist/avatar-stack/index.mjs +1 -1
- package/dist/{avatar-stack-oVr8tsU7.mjs → avatar-stack-CDhlA1Nm.mjs} +1 -1
- package/dist/calendar/index.mjs +1 -1
- package/dist/{calendar-DEkCw7I1.mjs → calendar-C-Hbf74r.mjs} +4 -4
- package/dist/{calendar-date-picker-CDT-8Ha8.mjs → calendar-date-picker-BaykEs6j.mjs} +324 -240
- package/dist/code-editor/index.mjs +1 -1
- package/dist/components/base/date-picker/index.d.ts +4 -0
- package/dist/components/base/date-picker/index.d.ts.map +1 -0
- package/dist/components/base/date-picker/types.d.ts +7 -0
- package/dist/components/base/date-picker/types.d.ts.map +1 -0
- package/dist/components/base/date-picker/use-date-constraints.d.ts +8 -0
- package/dist/components/base/date-picker/use-date-constraints.d.ts.map +1 -0
- package/dist/components/base/index.d.ts +3 -0
- package/dist/components/base/index.d.ts.map +1 -1
- package/dist/components/base/mobile-sheet/context.d.ts +13 -0
- package/dist/components/base/mobile-sheet/context.d.ts.map +1 -0
- package/dist/components/base/mobile-sheet/index.d.ts +3 -0
- package/dist/components/base/mobile-sheet/index.d.ts.map +1 -0
- package/dist/components/base/mobile-sheet/mobile-sheet.d.ts +14 -0
- package/dist/components/base/mobile-sheet/mobile-sheet.d.ts.map +1 -0
- package/dist/components/base/option-picker/index.d.ts +5 -0
- package/dist/components/base/option-picker/index.d.ts.map +1 -0
- package/dist/components/base/option-picker/option-list.d.ts +3 -0
- package/dist/components/base/option-picker/option-list.d.ts.map +1 -0
- package/dist/components/base/option-picker/types.d.ts +71 -0
- package/dist/components/base/option-picker/types.d.ts.map +1 -0
- package/dist/components/base/option-picker/use-option-picker.d.ts +4 -0
- package/dist/components/base/option-picker/use-option-picker.d.ts.map +1 -0
- package/dist/components/base/responsive-dropdown/index.d.ts +2 -0
- package/dist/components/base/responsive-dropdown/index.d.ts.map +1 -0
- package/dist/components/base/responsive-dropdown/responsive-dropdown.d.ts +25 -0
- package/dist/components/base/responsive-dropdown/responsive-dropdown.d.ts.map +1 -0
- package/dist/components/base/responsive-popover/index.d.ts +2 -0
- package/dist/components/base/responsive-popover/index.d.ts.map +1 -0
- package/dist/components/base/responsive-popover/responsive-popover.d.ts +46 -0
- package/dist/components/base/responsive-popover/responsive-popover.d.ts.map +1 -0
- package/dist/components/base/tooltip/tooltip.d.ts.map +1 -1
- package/dist/components/features/app-navigation/app-navigation.d.ts +5 -3
- package/dist/components/features/app-navigation/app-navigation.d.ts.map +1 -1
- package/dist/components/features/autocomplete/autocomplete.d.ts +2 -2
- package/dist/components/features/autocomplete/autocomplete.d.ts.map +1 -1
- package/dist/components/features/autocomplete/autocomplete.types.d.ts +7 -16
- package/dist/components/features/autocomplete/autocomplete.types.d.ts.map +1 -1
- package/dist/components/features/autocomplete/trigger.d.ts +20 -0
- package/dist/components/features/autocomplete/trigger.d.ts.map +1 -0
- package/dist/components/features/autosearch/autosearch.d.ts +1 -1
- package/dist/components/features/autosearch/autosearch.d.ts.map +1 -1
- package/dist/components/features/autosearch/autosearch.types.d.ts +4 -0
- package/dist/components/features/autosearch/autosearch.types.d.ts.map +1 -1
- package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts +3 -37
- package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts.map +1 -1
- package/dist/components/features/calendar-date-picker/calendar-header.d.ts +13 -0
- package/dist/components/features/calendar-date-picker/calendar-header.d.ts.map +1 -0
- package/dist/components/features/calendar-date-picker/calendar-presets.d.ts +9 -0
- package/dist/components/features/calendar-date-picker/calendar-presets.d.ts.map +1 -0
- package/dist/components/features/calendar-date-picker/date-trigger.d.ts +24 -0
- package/dist/components/features/calendar-date-picker/date-trigger.d.ts.map +1 -0
- package/dist/components/features/calendar-date-picker/index.d.ts +2 -1
- package/dist/components/features/calendar-date-picker/index.d.ts.map +1 -1
- package/dist/components/features/calendar-date-picker/types.d.ts +42 -0
- package/dist/components/features/calendar-date-picker/types.d.ts.map +1 -0
- package/dist/components/features/calendar-date-picker/use-calendar-date-picker.d.ts +48 -0
- package/dist/components/features/calendar-date-picker/use-calendar-date-picker.d.ts.map +1 -0
- package/dist/components/features/data-table/components/row-actions.d.ts +1 -1
- package/dist/components/features/data-table/components/row-actions.d.ts.map +1 -1
- package/dist/components/features/data-table/filters/checkbox-filter.d.ts +1 -1
- package/dist/components/features/data-table/filters/checkbox-filter.d.ts.map +1 -1
- package/dist/components/features/data-table/filters/select-filter.d.ts +1 -1
- package/dist/components/features/data-table/filters/select-filter.d.ts.map +1 -1
- package/dist/components/features/data-table/types.d.ts +11 -12
- package/dist/components/features/data-table/types.d.ts.map +1 -1
- package/dist/components/features/date-time-picker/date-time-picker.d.ts +1 -1
- package/dist/components/features/date-time-picker/date-time-picker.d.ts.map +1 -1
- package/dist/components/features/date-time-picker/types.d.ts +23 -0
- package/dist/components/features/date-time-picker/types.d.ts.map +1 -1
- package/dist/components/features/form/components/form-combobox.d.ts +7 -44
- package/dist/components/features/form/components/form-combobox.d.ts.map +1 -1
- package/dist/components/features/form/components/form-dialog.d.ts +2 -1
- package/dist/components/features/form/components/form-dialog.d.ts.map +1 -1
- package/dist/components/features/form/components/form-field.d.ts +1 -1
- package/dist/components/features/form/components/form-field.d.ts.map +1 -1
- package/dist/components/features/form/types/index.d.ts +4 -0
- package/dist/components/features/form/types/index.d.ts.map +1 -1
- package/dist/components/features/index.d.ts +2 -0
- package/dist/components/features/index.d.ts.map +1 -1
- package/dist/components/features/more-actions/action-row.d.ts +9 -0
- package/dist/components/features/more-actions/action-row.d.ts.map +1 -0
- package/dist/components/features/more-actions/index.d.ts +3 -1
- package/dist/components/features/more-actions/index.d.ts.map +1 -1
- package/dist/components/features/more-actions/more-actions.d.ts +8 -14
- package/dist/components/features/more-actions/more-actions.d.ts.map +1 -1
- package/dist/components/features/more-actions/types.d.ts +24 -0
- package/dist/components/features/more-actions/types.d.ts.map +1 -0
- package/dist/components/features/multi-select/index.d.ts +3 -0
- package/dist/components/features/multi-select/index.d.ts.map +1 -0
- package/dist/components/features/multi-select/multi-select.d.ts +147 -0
- package/dist/components/features/multi-select/multi-select.d.ts.map +1 -0
- package/dist/components/features/page-title/page-title.d.ts.map +1 -1
- package/dist/components/features/rich-text-editor/index.d.ts +4 -0
- package/dist/components/features/rich-text-editor/index.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/rich-text-content.d.ts +3 -0
- package/dist/components/features/rich-text-editor/rich-text-content.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/rich-text-editor.d.ts +28 -0
- package/dist/components/features/rich-text-editor/rich-text-editor.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/toolbar/bold-toolbar.d.ts +2 -0
- package/dist/components/features/rich-text-editor/toolbar/bold-toolbar.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/toolbar/italic-toolbar.d.ts +2 -0
- package/dist/components/features/rich-text-editor/toolbar/italic-toolbar.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/toolbar/link-toolbar.d.ts +2 -0
- package/dist/components/features/rich-text-editor/toolbar/link-toolbar.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/toolbar/strike-toolbar.d.ts +2 -0
- package/dist/components/features/rich-text-editor/toolbar/strike-toolbar.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/toolbar/toolbar-button.d.ts +17 -0
- package/dist/components/features/rich-text-editor/toolbar/toolbar-button.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/toolbar/toolbar.d.ts +6 -0
- package/dist/components/features/rich-text-editor/toolbar/toolbar.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/toolbar/underline-toolbar.d.ts +2 -0
- package/dist/components/features/rich-text-editor/toolbar/underline-toolbar.d.ts.map +1 -0
- package/dist/components/features/rich-text-editor/types.d.ts +20 -0
- package/dist/components/features/rich-text-editor/types.d.ts.map +1 -0
- package/dist/components/features/tag-input/tag-input.d.ts +12 -1
- package/dist/components/features/tag-input/tag-input.d.ts.map +1 -1
- package/dist/components/features/task-queue/core/task-queue-dropdown.d.ts.map +1 -1
- package/dist/components/features/time-picker/time-picker.d.ts +1 -17
- package/dist/components/features/time-picker/time-picker.d.ts.map +1 -1
- package/dist/components/features/time-picker/types.d.ts +20 -18
- package/dist/components/features/time-picker/types.d.ts.map +1 -1
- package/dist/components/features/time-picker/use-time-slots.d.ts +10 -0
- package/dist/components/features/time-picker/use-time-slots.d.ts.map +1 -0
- package/dist/components/features/time-range-picker/components/absolute-range-panel.d.ts.map +1 -1
- package/dist/components/features/time-range-picker/time-range-picker.d.ts.map +1 -1
- package/dist/data-table/index.mjs +60 -175
- package/dist/date-picker/index.mjs +2 -2
- package/dist/date-time-picker/index.mjs +1 -1
- package/dist/{date-time-picker-BomrW07W.mjs → date-time-picker-DKOxrhmc.mjs} +64 -49
- package/dist/dropdown/index.mjs +109 -1
- package/dist/dropzone/index.mjs +1 -1
- package/dist/empty-content/index.mjs +1 -1
- package/dist/form/adapters/conform/index.mjs +2 -2
- package/dist/form/adapters/rhf/index.mjs +2 -2
- package/dist/form/index.mjs +2 -2
- package/dist/form/stepper/index.mjs +3 -3
- package/dist/{form-B3rQ4CH9.mjs → form-CCNN9VtJ.mjs} +27 -30
- package/dist/grid/index.mjs +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.mjs +4 -3
- package/dist/hooks/use-breakpoint.d.ts +9 -0
- package/dist/hooks/use-breakpoint.d.ts.map +1 -0
- package/dist/index.mjs +48 -41
- package/dist/input-number/index.mjs +1 -1
- package/dist/loader-overlay/index.mjs +1 -1
- package/dist/map/index.mjs +1 -1
- package/dist/{map-CWIQ-eql.mjs → map-DRzZDNtB.mjs} +83 -4
- package/dist/mobile-sheet/index.mjs +2 -0
- package/dist/mobile-sheet-BxMvkzAj.mjs +61 -0
- package/dist/more-actions/index.mjs +3 -2
- package/dist/more-actions-Ca5qqd0H.mjs +49 -0
- package/dist/multi-select/index.mjs +2 -0
- package/dist/multi-select-DM_dxnSV.mjs +235 -0
- package/dist/page-title/index.mjs +1 -1
- package/dist/{page-title-ChsnpBiH.mjs → page-title-ChLiv6gB.mjs} +3 -2
- package/dist/popover/index.mjs +1 -1
- package/dist/radio-group/index.mjs +1 -1
- package/dist/responsive-dropdown/index.mjs +2 -0
- package/dist/responsive-dropdown-IFroDgKn.mjs +53 -0
- package/dist/responsive-popover/index.mjs +2 -0
- package/dist/responsive-popover-D-t9bxSN.mjs +61 -0
- package/dist/rich-text-editor/index.mjs +2 -0
- package/dist/rich-text-editor-CQH_U4T5.mjs +293 -0
- package/dist/select/index.mjs +1 -1
- package/dist/sheet/index.mjs +2 -2
- package/dist/{sheet-BzXksqYY.mjs → sheet-LhUgozvg.mjs} +1 -1
- package/dist/sidebar/index.mjs +1 -1
- package/dist/{sidebar-BnhnjvfO.mjs → sidebar-B8LQJiNI.mjs} +3 -3
- package/dist/skeleton/index.mjs +1 -1
- package/dist/{skeleton-D1MUhAVo.mjs → skeleton-D4HOEiOZ.mjs} +1 -1
- package/dist/spinner/index.mjs +1 -1
- package/dist/stepper/index.mjs +1 -1
- package/dist/styles/canela.css +23 -0
- package/dist/styles/fonts/CanelaText-Regular.ttf +0 -0
- package/dist/styles/tokens/figma-tokens.css +4 -0
- package/dist/switch/index.mjs +1 -1
- package/dist/table/index.mjs +1 -1
- package/dist/tag-input/index.mjs +1 -1
- package/dist/{tag-input-T9cUX9-G.mjs → tag-input-Bf4GMptp.mjs} +29 -14
- package/dist/task-queue/index.mjs +1 -1
- package/dist/{task-queue-dropdown-Wcbj-f0V.mjs → task-queue-dropdown-D-LncEWm.mjs} +39 -39
- package/dist/textarea/index.mjs +1 -1
- package/dist/theme/index.mjs +1 -1
- package/dist/time-picker/index.mjs +1 -1
- package/dist/time-picker-BZF5jbF6.mjs +99 -0
- package/dist/{to-api-format-Bh3c01gr.mjs → to-api-format-CgKcC9SK.mjs} +144 -119
- package/dist/toast/index.mjs +2 -2
- package/dist/{toast-DpxlFNNx.mjs → toast-DDdLgY53.mjs} +1 -1
- package/dist/tooltip/index.mjs +1 -1
- package/dist/{tooltip-Cruvl5F6.mjs → tooltip-a7NTDCWw.mjs} +74 -17
- package/dist/transfer/index.mjs +1 -1
- package/dist/{types-BZNk3q65.mjs → types-CKIe2WlV.mjs} +2 -2
- package/dist/typography/index.mjs +1 -1
- package/dist/use-breakpoint-DGcVmB3c.mjs +36 -0
- package/dist/{use-copy-to-clipboard-uNeeVHC4.mjs → use-copy-to-clipboard-D7KyLIAt.mjs} +1 -1
- package/dist/use-date-constraints-R3H4lIoT.mjs +41 -0
- package/dist/use-option-picker-BXQOfyrK.mjs +215 -0
- package/dist/visually-hidden/index.mjs +1 -1
- package/package.json +63 -8
- package/dist/autocomplete-CkYJueBL.mjs +0 -293
- package/dist/combobox/index.mjs +0 -2
- package/dist/combobox-B-C9lJeD.mjs +0 -97
- package/dist/components/features/combobox/combobox.d.ts +0 -27
- package/dist/components/features/combobox/combobox.d.ts.map +0 -1
- package/dist/components/features/combobox/index.d.ts +0 -3
- package/dist/components/features/combobox/index.d.ts.map +0 -1
- package/dist/components/features/combobox/types.d.ts +0 -84
- package/dist/components/features/combobox/types.d.ts.map +0 -1
- package/dist/dropdown-DZiAt-jS.mjs +0 -110
- package/dist/dropdown-menu-lALvDnab.mjs +0 -85
- package/dist/more-actions-ILnEZq_E.mjs +0 -52
- package/dist/time-picker-BoF7pZZ2.mjs +0 -43
- /package/dist/{adapter-context-rWveHhDd.mjs → adapter-context-NyGTDZYq.mjs} +0 -0
- /package/dist/{col-1T0Q3SlH.mjs → col-DISdGlqY.mjs} +0 -0
- /package/dist/{dropzone-ogtpQ4fy.mjs → dropzone-Bt0plEuw.mjs} +0 -0
- /package/dist/{empty-content-C63GPJ5d.mjs → empty-content-CBh5bbtJ.mjs} +0 -0
- /package/dist/{form-context-Ccxm-wqL.mjs → form-context-CeKyvO-A.mjs} +0 -0
- /package/dist/{hooks-D8r2M2U6.mjs → hooks-DQXVwbrs.mjs} +0 -0
- /package/dist/{input-number-a7uydAsw.mjs → input-number-Diu-C6d5.mjs} +0 -0
- /package/dist/{loader-overlay-BTFdkp7W.mjs → loader-overlay-C2WDla6V.mjs} +0 -0
- /package/dist/{map-leaflet-imports-CRSKA79m.mjs → map-leaflet-imports-BkUrNU37.mjs} +0 -0
- /package/dist/{popover-FJAcbYoH.mjs → popover-JOuXJOZ2.mjs} +0 -0
- /package/dist/{radio-group-CiITR0LO.mjs → radio-group-70UjJBb5.mjs} +0 -0
- /package/dist/{select-CiLR_DiQ.mjs → select-zxwykvQn.mjs} +0 -0
- /package/dist/{sheet-Di3b-oPu.mjs → sheet-DVEToCVY.mjs} +0 -0
- /package/dist/{skeleton-BKl4mfJt.mjs → skeleton-D2xuJdE1.mjs} +0 -0
- /package/dist/{spinner-OyOf9-Yu.mjs → spinner-CgPI3DDi.mjs} +0 -0
- /package/dist/{stepper-DvIOp0hh.mjs → stepper-Beb-zbdL.mjs} +0 -0
- /package/dist/{switch-DQJQhPIQ.mjs → switch-DcSF42Kc.mjs} +0 -0
- /package/dist/{table-Cdsh-39-.mjs → table-DWGT4cqh.mjs} +0 -0
- /package/dist/{textarea-BwD-MmTV.mjs → textarea-BoChBcFz.mjs} +0 -0
- /package/dist/{themes-DG1md8FI.mjs → themes-CAiN4b6G.mjs} +0 -0
- /package/dist/{toast-BWnN5fax.mjs → toast-D5XD7goD.mjs} +0 -0
- /package/dist/{transfer-46C-rFFW.mjs → transfer-CoGPwOc6.mjs} +0 -0
- /package/dist/{typography-ClB8k55E.mjs → typography-TRKP_CLT.mjs} +0 -0
- /package/dist/{use-display-touched-I39aXEBD.mjs → use-display-touched-8VGszCqj.mjs} +0 -0
- /package/dist/{visuallyhidden-BLUsJpYH.mjs → visuallyhidden-BHOPczmW.mjs} +0 -0
|
@@ -1,293 +0,0 @@
|
|
|
1
|
-
import { t as cn } from "./cn-D2KYQ917.mjs";
|
|
2
|
-
import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-DqHWukGK.mjs";
|
|
3
|
-
import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-FJAcbYoH.mjs";
|
|
4
|
-
import { t as LoaderOverlay } from "./loader-overlay-BTFdkp7W.mjs";
|
|
5
|
-
import { CheckIcon, ChevronDown } from "lucide-react";
|
|
6
|
-
import * as React$1 from "react";
|
|
7
|
-
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
9
|
-
//#region src/components/features/autocomplete/autocomplete.tsx
|
|
10
|
-
function isGroupedOptions(options) {
|
|
11
|
-
return options.length > 0 && "options" in options[0];
|
|
12
|
-
}
|
|
13
|
-
function flattenOptions(options) {
|
|
14
|
-
if (isGroupedOptions(options)) return options.flatMap((g) => g.options);
|
|
15
|
-
return options;
|
|
16
|
-
}
|
|
17
|
-
function Trigger({ ref, selectedOption, renderValue, placeholder, loading, disabled, open, id, className, ...rest }) {
|
|
18
|
-
let displayContent;
|
|
19
|
-
if (!selectedOption) displayContent = /* @__PURE__ */ jsx("span", {
|
|
20
|
-
className: "text-muted-foreground",
|
|
21
|
-
children: placeholder
|
|
22
|
-
});
|
|
23
|
-
else if (renderValue) displayContent = renderValue(selectedOption);
|
|
24
|
-
else displayContent = /* @__PURE__ */ jsx("span", {
|
|
25
|
-
className: "truncate",
|
|
26
|
-
children: selectedOption.label
|
|
27
|
-
});
|
|
28
|
-
return /* @__PURE__ */ jsxs("button", {
|
|
29
|
-
ref,
|
|
30
|
-
type: "button",
|
|
31
|
-
id,
|
|
32
|
-
role: "combobox",
|
|
33
|
-
"aria-expanded": open,
|
|
34
|
-
disabled: disabled || loading,
|
|
35
|
-
className: cn("text-input-foreground placeholder:text-input-placeholder", "border-input-border bg-input-background/50 relative flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition-all", "focus-visible:border-input-focus-border focus-visible:shadow-(--input-focus-shadow)", "focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-hidden", "aria-invalid:border-destructive", (disabled || loading) && "cursor-not-allowed opacity-50", className),
|
|
36
|
-
...rest,
|
|
37
|
-
children: [
|
|
38
|
-
loading && /* @__PURE__ */ jsx(LoaderOverlay, {}),
|
|
39
|
-
/* @__PURE__ */ jsx("div", {
|
|
40
|
-
className: "min-w-0 flex-1",
|
|
41
|
-
children: displayContent
|
|
42
|
-
}),
|
|
43
|
-
/* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground ml-2 size-4 shrink-0" })
|
|
44
|
-
]
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
Trigger.displayName = "AutocompleteTrigger";
|
|
48
|
-
function DefaultOptionContent({ option, isSelected }) {
|
|
49
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
50
|
-
className: "flex w-full items-center justify-between gap-2",
|
|
51
|
-
children: [/* @__PURE__ */ jsxs("div", {
|
|
52
|
-
className: "min-w-0 flex-1",
|
|
53
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
54
|
-
className: "truncate text-sm",
|
|
55
|
-
children: option.label
|
|
56
|
-
}), option.description && /* @__PURE__ */ jsx("p", {
|
|
57
|
-
className: "text-muted-foreground mt-0.5 line-clamp-2 text-xs",
|
|
58
|
-
children: option.description
|
|
59
|
-
})]
|
|
60
|
-
}), isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary size-4 shrink-0" })]
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
function StaticOptions({ options, selectedValue, onSelect, renderOption }) {
|
|
64
|
-
const renderItem = (option) => {
|
|
65
|
-
const isSelected = option.value === selectedValue;
|
|
66
|
-
return /* @__PURE__ */ jsx(CommandItem, {
|
|
67
|
-
value: option.value,
|
|
68
|
-
keywords: [option.label, option.description ?? ""],
|
|
69
|
-
disabled: option.disabled,
|
|
70
|
-
onSelect: () => onSelect(option.value),
|
|
71
|
-
className: "cursor-pointer justify-between px-3 py-2 text-xs",
|
|
72
|
-
children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsx(DefaultOptionContent, {
|
|
73
|
-
option,
|
|
74
|
-
isSelected
|
|
75
|
-
})
|
|
76
|
-
}, option.value);
|
|
77
|
-
};
|
|
78
|
-
if (isGroupedOptions(options)) return /* @__PURE__ */ jsx(Fragment$1, { children: options.map((group, index) => /* @__PURE__ */ jsx(CommandGroup, {
|
|
79
|
-
heading: group.label,
|
|
80
|
-
className: index > 0 ? "border-t pt-1" : "",
|
|
81
|
-
children: group.options.map(renderItem)
|
|
82
|
-
}, group.label)) });
|
|
83
|
-
return /* @__PURE__ */ jsx(CommandGroup, {
|
|
84
|
-
className: "p-0",
|
|
85
|
-
children: options.map(renderItem)
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
function VirtualizedOptions({ options, selectedValue, onSelect, renderOption, itemSize = 36, listClassName }) {
|
|
89
|
-
const flatOptions = flattenOptions(options);
|
|
90
|
-
const parentRef = React$1.useRef(null);
|
|
91
|
-
const virtualizer = useVirtualizer({
|
|
92
|
-
count: flatOptions.length,
|
|
93
|
-
getScrollElement: () => parentRef.current,
|
|
94
|
-
estimateSize: () => itemSize
|
|
95
|
-
});
|
|
96
|
-
React$1.useEffect(() => {
|
|
97
|
-
if (selectedValue) {
|
|
98
|
-
const index = flatOptions.findIndex((o) => o.value === selectedValue);
|
|
99
|
-
if (index >= 0) virtualizer.scrollToIndex(index, { align: "center" });
|
|
100
|
-
}
|
|
101
|
-
}, [
|
|
102
|
-
selectedValue,
|
|
103
|
-
flatOptions,
|
|
104
|
-
virtualizer
|
|
105
|
-
]);
|
|
106
|
-
return /* @__PURE__ */ jsx("div", {
|
|
107
|
-
ref: parentRef,
|
|
108
|
-
className: cn("max-h-[200px] overflow-auto", listClassName),
|
|
109
|
-
children: /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx("div", {
|
|
110
|
-
style: { height: `${virtualizer.getTotalSize()}px` },
|
|
111
|
-
className: "relative w-full",
|
|
112
|
-
children: virtualizer.getVirtualItems().map((virtualItem) => {
|
|
113
|
-
const option = flatOptions[virtualItem.index];
|
|
114
|
-
const isSelected = option.value === selectedValue;
|
|
115
|
-
return /* @__PURE__ */ jsx(CommandItem, {
|
|
116
|
-
value: option.value,
|
|
117
|
-
keywords: [option.label, option.description ?? ""],
|
|
118
|
-
disabled: option.disabled,
|
|
119
|
-
onSelect: () => onSelect(option.value),
|
|
120
|
-
className: "absolute top-0 left-0 w-full cursor-pointer justify-between px-3 py-2 text-xs",
|
|
121
|
-
style: {
|
|
122
|
-
height: `${virtualItem.size}px`,
|
|
123
|
-
transform: `translateY(${virtualItem.start}px)`
|
|
124
|
-
},
|
|
125
|
-
children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsx(DefaultOptionContent, {
|
|
126
|
-
option,
|
|
127
|
-
isSelected
|
|
128
|
-
})
|
|
129
|
-
}, option.value);
|
|
130
|
-
})
|
|
131
|
-
}) })
|
|
132
|
-
});
|
|
133
|
-
}
|
|
134
|
-
/**
|
|
135
|
-
* Autocomplete - A searchable select component
|
|
136
|
-
*
|
|
137
|
-
* Standalone, form-agnostic combobox built on Popover + Command (cmdk).
|
|
138
|
-
* Supports flat/grouped options, virtualization, custom rendering, and async search.
|
|
139
|
-
*
|
|
140
|
-
* @example Basic usage
|
|
141
|
-
* ```tsx
|
|
142
|
-
* <Autocomplete
|
|
143
|
-
* value={country}
|
|
144
|
-
* onValueChange={setCountry}
|
|
145
|
-
* options={countries}
|
|
146
|
-
* placeholder="Select country..."
|
|
147
|
-
* />
|
|
148
|
-
* ```
|
|
149
|
-
*
|
|
150
|
-
* @example Async search
|
|
151
|
-
* ```tsx
|
|
152
|
-
* <Autocomplete
|
|
153
|
-
* value={userId}
|
|
154
|
-
* onValueChange={setUserId}
|
|
155
|
-
* options={users ?? []}
|
|
156
|
-
* onSearchChange={setSearch}
|
|
157
|
-
* loading={isLoading}
|
|
158
|
-
* placeholder="Search users..."
|
|
159
|
-
* />
|
|
160
|
-
* ```
|
|
161
|
-
*/
|
|
162
|
-
function Autocomplete({ options, value, onValueChange, onSearchChange, searchPlaceholder = "Search...", disableSearch = false, renderOption, renderValue, placeholder = "Select...", emptyContent = "No results found", footer, creatable = false, creatableLabel, virtualize = false, itemSize = 36, loading = false, modal = false, disabled = false, name, id, className, triggerClassName, contentClassName, listClassName }) {
|
|
163
|
-
const [open, setOpen] = React$1.useState(false);
|
|
164
|
-
const [search, setSearch] = React$1.useState("");
|
|
165
|
-
const flatOptions = React$1.useMemo(() => flattenOptions(options), [options]);
|
|
166
|
-
const selectedOption = React$1.useMemo(() => flatOptions.find((o) => o.value === value), [flatOptions, value]);
|
|
167
|
-
const displayOption = React$1.useMemo(() => {
|
|
168
|
-
if (selectedOption) return selectedOption;
|
|
169
|
-
if (creatable && value) return {
|
|
170
|
-
value,
|
|
171
|
-
label: value
|
|
172
|
-
};
|
|
173
|
-
}, [
|
|
174
|
-
selectedOption,
|
|
175
|
-
creatable,
|
|
176
|
-
value
|
|
177
|
-
]);
|
|
178
|
-
const isExternalSearch = !!onSearchChange;
|
|
179
|
-
const trimmedSearch = React$1.useMemo(() => search.trim(), [search]);
|
|
180
|
-
const showCreatableItem = React$1.useMemo(() => {
|
|
181
|
-
if (!creatable || trimmedSearch.length === 0) return false;
|
|
182
|
-
const needle = trimmedSearch.toLowerCase();
|
|
183
|
-
return !flatOptions.some((o) => o.value.toLowerCase() === needle || o.label.toLowerCase() === needle);
|
|
184
|
-
}, [
|
|
185
|
-
creatable,
|
|
186
|
-
trimmedSearch,
|
|
187
|
-
flatOptions
|
|
188
|
-
]);
|
|
189
|
-
const handleSelect = React$1.useCallback((optionValue) => {
|
|
190
|
-
onValueChange?.(optionValue);
|
|
191
|
-
setSearch("");
|
|
192
|
-
setOpen(false);
|
|
193
|
-
}, [onValueChange]);
|
|
194
|
-
const handleCreatableSelect = React$1.useCallback(() => {
|
|
195
|
-
onValueChange?.(trimmedSearch);
|
|
196
|
-
setSearch("");
|
|
197
|
-
setOpen(false);
|
|
198
|
-
}, [onValueChange, trimmedSearch]);
|
|
199
|
-
const handleOpenChange = React$1.useCallback((nextOpen) => {
|
|
200
|
-
setOpen(nextOpen);
|
|
201
|
-
if (!nextOpen) {
|
|
202
|
-
setSearch("");
|
|
203
|
-
if (isExternalSearch) onSearchChange?.("");
|
|
204
|
-
}
|
|
205
|
-
}, [isExternalSearch, onSearchChange]);
|
|
206
|
-
const handleSearchChange = React$1.useCallback((val) => {
|
|
207
|
-
setSearch(val);
|
|
208
|
-
if (isExternalSearch) onSearchChange?.(val);
|
|
209
|
-
}, [isExternalSearch, onSearchChange]);
|
|
210
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
211
|
-
className: cn("relative", className),
|
|
212
|
-
children: [/* @__PURE__ */ jsxs(Popover, {
|
|
213
|
-
open,
|
|
214
|
-
onOpenChange: handleOpenChange,
|
|
215
|
-
modal,
|
|
216
|
-
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
217
|
-
asChild: true,
|
|
218
|
-
children: /* @__PURE__ */ jsx(Trigger, {
|
|
219
|
-
selectedOption: displayOption,
|
|
220
|
-
renderValue,
|
|
221
|
-
placeholder,
|
|
222
|
-
loading,
|
|
223
|
-
disabled,
|
|
224
|
-
open,
|
|
225
|
-
id,
|
|
226
|
-
className: triggerClassName
|
|
227
|
-
})
|
|
228
|
-
}), /* @__PURE__ */ jsx(PopoverContent, {
|
|
229
|
-
className: cn("popover-content-width-full p-0", contentClassName),
|
|
230
|
-
align: "start",
|
|
231
|
-
children: /* @__PURE__ */ jsxs(Command, {
|
|
232
|
-
shouldFilter: !isExternalSearch && !creatable,
|
|
233
|
-
defaultValue: value,
|
|
234
|
-
children: [
|
|
235
|
-
!disableSearch && /* @__PURE__ */ jsx(CommandInput, {
|
|
236
|
-
className: "placeholder:text-secondary/60 h-7 border-none text-xs placeholder:text-xs focus-visible:ring-0",
|
|
237
|
-
iconClassName: "text-secondary size-3.5",
|
|
238
|
-
wrapperClassName: "px-3 py-2",
|
|
239
|
-
placeholder: searchPlaceholder,
|
|
240
|
-
value: search,
|
|
241
|
-
onValueChange: handleSearchChange
|
|
242
|
-
}),
|
|
243
|
-
/* @__PURE__ */ jsxs(CommandList, {
|
|
244
|
-
className: cn(!virtualize && "max-h-[300px]", listClassName),
|
|
245
|
-
children: [
|
|
246
|
-
!showCreatableItem && /* @__PURE__ */ jsx(CommandEmpty, { children: typeof emptyContent === "string" ? /* @__PURE__ */ jsx("span", {
|
|
247
|
-
className: "text-muted-foreground text-xs",
|
|
248
|
-
children: emptyContent
|
|
249
|
-
}) : emptyContent }),
|
|
250
|
-
virtualize ? /* @__PURE__ */ jsx(VirtualizedOptions, {
|
|
251
|
-
options,
|
|
252
|
-
selectedValue: value,
|
|
253
|
-
onSelect: handleSelect,
|
|
254
|
-
renderOption,
|
|
255
|
-
itemSize,
|
|
256
|
-
listClassName
|
|
257
|
-
}) : /* @__PURE__ */ jsx(StaticOptions, {
|
|
258
|
-
options,
|
|
259
|
-
selectedValue: value,
|
|
260
|
-
onSelect: handleSelect,
|
|
261
|
-
renderOption
|
|
262
|
-
}),
|
|
263
|
-
showCreatableItem && /* @__PURE__ */ jsx(CommandGroup, {
|
|
264
|
-
forceMount: true,
|
|
265
|
-
className: "p-0",
|
|
266
|
-
children: /* @__PURE__ */ jsx(CommandItem, {
|
|
267
|
-
forceMount: true,
|
|
268
|
-
value: `\0creatable:${trimmedSearch}`,
|
|
269
|
-
keywords: [trimmedSearch],
|
|
270
|
-
onSelect: handleCreatableSelect,
|
|
271
|
-
className: "cursor-pointer px-3 py-2 text-xs",
|
|
272
|
-
children: creatableLabel ? creatableLabel(trimmedSearch) : `Use "${trimmedSearch}"`
|
|
273
|
-
})
|
|
274
|
-
})
|
|
275
|
-
]
|
|
276
|
-
}),
|
|
277
|
-
footer && /* @__PURE__ */ jsx("div", {
|
|
278
|
-
className: "border-t",
|
|
279
|
-
children: footer
|
|
280
|
-
})
|
|
281
|
-
]
|
|
282
|
-
})
|
|
283
|
-
})]
|
|
284
|
-
}), name && /* @__PURE__ */ jsx("input", {
|
|
285
|
-
type: "hidden",
|
|
286
|
-
name,
|
|
287
|
-
value: value ?? ""
|
|
288
|
-
})]
|
|
289
|
-
});
|
|
290
|
-
}
|
|
291
|
-
Autocomplete.displayName = "Autocomplete";
|
|
292
|
-
//#endregion
|
|
293
|
-
export { Autocomplete as t };
|
package/dist/combobox/index.mjs
DELETED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { t as cn } from "./cn-D2KYQ917.mjs";
|
|
2
|
-
import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-DqHWukGK.mjs";
|
|
3
|
-
import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-FJAcbYoH.mjs";
|
|
4
|
-
import { CheckIcon, ChevronDown, X } from "lucide-react";
|
|
5
|
-
import * as React$1 from "react";
|
|
6
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
//#region src/components/features/combobox/combobox.tsx
|
|
8
|
-
/**
|
|
9
|
-
* Combobox - Single-select dropdown with search
|
|
10
|
-
*
|
|
11
|
-
* A simpler alternative to Autocomplete for basic select scenarios.
|
|
12
|
-
* Supports grouped options and search filtering.
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```tsx
|
|
16
|
-
* const options = [
|
|
17
|
-
* { value: '1', label: 'Option 1' },
|
|
18
|
-
* { value: '2', label: 'Option 2' },
|
|
19
|
-
* ]
|
|
20
|
-
*
|
|
21
|
-
* <Combobox
|
|
22
|
-
* options={options}
|
|
23
|
-
* value={value}
|
|
24
|
-
* onChange={setValue}
|
|
25
|
-
* placeholder="Select an option"
|
|
26
|
-
* />
|
|
27
|
-
* ```
|
|
28
|
-
*/
|
|
29
|
-
function Combobox({ options, value, onChange, placeholder = "Select option...", searchPlaceholder = "Search...", emptyMessage = "No options found.", disabled = false, className, triggerClassName, contentClassName, searchable = true, showDropdownArrow = true, clearable = false, id, "data-testid": testId, modal = true }) {
|
|
30
|
-
const [open, setOpen] = React$1.useState(false);
|
|
31
|
-
const isGrouped = options.length > 0 && "options" in options[0];
|
|
32
|
-
const selectedOption = React$1.useMemo(() => {
|
|
33
|
-
if (isGrouped) return options.flatMap((group) => group.options);
|
|
34
|
-
return options;
|
|
35
|
-
}, [options, isGrouped]).find((opt) => opt.value === value);
|
|
36
|
-
const handleSelect = React$1.useCallback((selectedValue) => {
|
|
37
|
-
onChange?.(selectedValue === value ? void 0 : selectedValue);
|
|
38
|
-
setOpen(false);
|
|
39
|
-
}, [value, onChange]);
|
|
40
|
-
const handleClear = React$1.useCallback((e) => {
|
|
41
|
-
e.stopPropagation();
|
|
42
|
-
onChange?.(void 0);
|
|
43
|
-
}, [onChange]);
|
|
44
|
-
return /* @__PURE__ */ jsxs(Popover, {
|
|
45
|
-
open,
|
|
46
|
-
onOpenChange: setOpen,
|
|
47
|
-
modal,
|
|
48
|
-
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
49
|
-
asChild: true,
|
|
50
|
-
children: /* @__PURE__ */ jsxs("button", {
|
|
51
|
-
type: "button",
|
|
52
|
-
role: "combobox",
|
|
53
|
-
"aria-expanded": open,
|
|
54
|
-
disabled,
|
|
55
|
-
id,
|
|
56
|
-
"data-testid": testId,
|
|
57
|
-
className: cn("flex h-10 w-full items-center justify-between rounded-lg border border-input bg-background px-3 py-2 text-sm", "ring-offset-background placeholder:text-muted-foreground", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", triggerClassName, className),
|
|
58
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
59
|
-
className: "truncate",
|
|
60
|
-
children: selectedOption ? selectedOption.label : placeholder
|
|
61
|
-
}), /* @__PURE__ */ jsxs("div", {
|
|
62
|
-
className: "ml-2 flex shrink-0 items-center gap-1",
|
|
63
|
-
children: [clearable && selectedOption && !disabled && /* @__PURE__ */ jsx(X, {
|
|
64
|
-
className: "size-4 opacity-50 hover:opacity-100",
|
|
65
|
-
onClick: handleClear
|
|
66
|
-
}), showDropdownArrow && /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" })]
|
|
67
|
-
})]
|
|
68
|
-
})
|
|
69
|
-
}), /* @__PURE__ */ jsx(PopoverContent, {
|
|
70
|
-
className: cn("popover-content-width-full p-0", contentClassName),
|
|
71
|
-
align: "start",
|
|
72
|
-
children: /* @__PURE__ */ jsxs(Command, { children: [searchable && /* @__PURE__ */ jsx(CommandInput, {
|
|
73
|
-
placeholder: searchPlaceholder,
|
|
74
|
-
className: "h-9"
|
|
75
|
-
}), /* @__PURE__ */ jsxs(CommandList, {
|
|
76
|
-
className: "max-h-[300px]",
|
|
77
|
-
children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }), isGrouped ? options.map((group) => /* @__PURE__ */ jsx(CommandGroup, {
|
|
78
|
-
heading: group.label,
|
|
79
|
-
children: group.options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
|
|
80
|
-
value: option.value,
|
|
81
|
-
disabled: option.disabled,
|
|
82
|
-
onSelect: handleSelect,
|
|
83
|
-
children: [option.label, /* @__PURE__ */ jsx(CheckIcon, { className: cn("ml-auto size-4", value === option.value ? "opacity-100" : "opacity-0") })]
|
|
84
|
-
}, option.value))
|
|
85
|
-
}, group.label)) : /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
|
|
86
|
-
value: option.value,
|
|
87
|
-
disabled: option.disabled,
|
|
88
|
-
onSelect: handleSelect,
|
|
89
|
-
children: [option.label, /* @__PURE__ */ jsx(CheckIcon, { className: cn("ml-auto size-4", value === option.value ? "opacity-100" : "opacity-0") })]
|
|
90
|
-
}, option.value)) })]
|
|
91
|
-
})] })
|
|
92
|
-
})]
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
Combobox.displayName = "Combobox";
|
|
96
|
-
//#endregion
|
|
97
|
-
export { Combobox as t };
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { ComboboxProps } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Combobox - Single-select dropdown with search
|
|
4
|
-
*
|
|
5
|
-
* A simpler alternative to Autocomplete for basic select scenarios.
|
|
6
|
-
* Supports grouped options and search filtering.
|
|
7
|
-
*
|
|
8
|
-
* @example
|
|
9
|
-
* ```tsx
|
|
10
|
-
* const options = [
|
|
11
|
-
* { value: '1', label: 'Option 1' },
|
|
12
|
-
* { value: '2', label: 'Option 2' },
|
|
13
|
-
* ]
|
|
14
|
-
*
|
|
15
|
-
* <Combobox
|
|
16
|
-
* options={options}
|
|
17
|
-
* value={value}
|
|
18
|
-
* onChange={setValue}
|
|
19
|
-
* placeholder="Select an option"
|
|
20
|
-
* />
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
export declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, disabled, className, triggerClassName, contentClassName, searchable, showDropdownArrow, clearable, id, 'data-testid': testId, modal, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
export declare namespace Combobox {
|
|
25
|
-
var displayName: string;
|
|
26
|
-
}
|
|
27
|
-
//# sourceMappingURL=combobox.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/features/combobox/combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiC,aAAa,EAAE,MAAM,SAAS,CAAA;AAc3E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAgC,EAChC,iBAA+B,EAC/B,YAAkC,EAClC,QAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,UAAiB,EACjB,iBAAwB,EACxB,SAAiB,EACjB,EAAE,EACF,aAAa,EAAE,MAAM,EACrB,KAAY,GACb,EAAE,aAAa,2CAgIf;yBAjJe,QAAQ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA"}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
export interface ComboboxOption {
|
|
2
|
-
value: string;
|
|
3
|
-
label: string;
|
|
4
|
-
disabled?: boolean;
|
|
5
|
-
}
|
|
6
|
-
export interface ComboboxGroup {
|
|
7
|
-
label: string;
|
|
8
|
-
options: ComboboxOption[];
|
|
9
|
-
}
|
|
10
|
-
export interface ComboboxProps {
|
|
11
|
-
/**
|
|
12
|
-
* Available options (flat or grouped)
|
|
13
|
-
*/
|
|
14
|
-
'options': ComboboxOption[] | ComboboxGroup[];
|
|
15
|
-
/**
|
|
16
|
-
* Selected value
|
|
17
|
-
*/
|
|
18
|
-
'value'?: string;
|
|
19
|
-
/**
|
|
20
|
-
* Called when selection changes
|
|
21
|
-
*/
|
|
22
|
-
'onChange'?: (value: string | undefined) => void;
|
|
23
|
-
/**
|
|
24
|
-
* Placeholder for trigger button
|
|
25
|
-
* @default "Select option..."
|
|
26
|
-
*/
|
|
27
|
-
'placeholder'?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Placeholder for search input
|
|
30
|
-
* @default "Search..."
|
|
31
|
-
*/
|
|
32
|
-
'searchPlaceholder'?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Message shown when no options match
|
|
35
|
-
* @default "No options found."
|
|
36
|
-
*/
|
|
37
|
-
'emptyMessage'?: string;
|
|
38
|
-
/**
|
|
39
|
-
* Disable the combobox
|
|
40
|
-
*/
|
|
41
|
-
'disabled'?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Additional CSS classes for container
|
|
44
|
-
*/
|
|
45
|
-
'className'?: string;
|
|
46
|
-
/**
|
|
47
|
-
* Additional CSS classes for trigger button
|
|
48
|
-
*/
|
|
49
|
-
'triggerClassName'?: string;
|
|
50
|
-
/**
|
|
51
|
-
* Additional CSS classes for popover content
|
|
52
|
-
*/
|
|
53
|
-
'contentClassName'?: string;
|
|
54
|
-
/**
|
|
55
|
-
* Enable search functionality
|
|
56
|
-
* @default true
|
|
57
|
-
*/
|
|
58
|
-
'searchable'?: boolean;
|
|
59
|
-
/**
|
|
60
|
-
* Show dropdown arrow icon
|
|
61
|
-
* @default true
|
|
62
|
-
*/
|
|
63
|
-
'showDropdownArrow'?: boolean;
|
|
64
|
-
/**
|
|
65
|
-
* Allow clearing the selection
|
|
66
|
-
* @default false
|
|
67
|
-
*/
|
|
68
|
-
'clearable'?: boolean;
|
|
69
|
-
/**
|
|
70
|
-
* ID for the combobox
|
|
71
|
-
*/
|
|
72
|
-
'id'?: string;
|
|
73
|
-
/**
|
|
74
|
-
* Test ID
|
|
75
|
-
*/
|
|
76
|
-
'data-testid'?: string;
|
|
77
|
-
/**
|
|
78
|
-
* Whether the popover is modal (prevents interaction with elements outside)
|
|
79
|
-
* Required when using inside a Dialog/Modal component
|
|
80
|
-
* @default true
|
|
81
|
-
*/
|
|
82
|
-
'modal'?: boolean;
|
|
83
|
-
}
|
|
84
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/combobox/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,cAAc,EAAE,CAAA;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,EAAE,cAAc,EAAE,GAAG,aAAa,EAAE,CAAA;IAE7C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAEhD;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAE5B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB"}
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { t as cn } from "./cn-D2KYQ917.mjs";
|
|
2
|
-
import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
|
|
3
|
-
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
|
4
|
-
import "react";
|
|
5
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
7
|
-
//#region src/components/features/dropdown/dropdown.tsx
|
|
8
|
-
/**
|
|
9
|
-
* Datum Dropdown Menu Component
|
|
10
|
-
* Extends shadcn DropdownMenu with:
|
|
11
|
-
* - Destructive variant for DropdownMenuItem
|
|
12
|
-
*/
|
|
13
|
-
function DropdownMenu({ ...props }) {
|
|
14
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { ...props });
|
|
15
|
-
}
|
|
16
|
-
function DropdownMenuPortal({ ...props }) {
|
|
17
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { ...props });
|
|
18
|
-
}
|
|
19
|
-
function DropdownMenuTrigger({ ...props }) {
|
|
20
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ...props });
|
|
21
|
-
}
|
|
22
|
-
function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
|
|
23
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
|
|
24
|
-
sideOffset,
|
|
25
|
-
className: cn("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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className),
|
|
26
|
-
...props
|
|
27
|
-
}) });
|
|
28
|
-
}
|
|
29
|
-
function DropdownMenuGroup({ ...props }) {
|
|
30
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { ...props });
|
|
31
|
-
}
|
|
32
|
-
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
33
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
|
|
34
|
-
"data-inset": inset,
|
|
35
|
-
"data-variant": variant,
|
|
36
|
-
className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
37
|
-
...props
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
41
|
-
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
|
|
42
|
-
className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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", className),
|
|
43
|
-
checked,
|
|
44
|
-
...props,
|
|
45
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
46
|
-
className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
|
|
47
|
-
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
|
|
48
|
-
icon: CheckIcon,
|
|
49
|
-
className: "size-4"
|
|
50
|
-
}) })
|
|
51
|
-
}), children]
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
function DropdownMenuRadioGroup({ ...props }) {
|
|
55
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, { ...props });
|
|
56
|
-
}
|
|
57
|
-
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
58
|
-
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
|
|
59
|
-
className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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", className),
|
|
60
|
-
...props,
|
|
61
|
-
children: [/* @__PURE__ */ jsx("span", {
|
|
62
|
-
className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
|
|
63
|
-
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
|
|
64
|
-
icon: CircleIcon,
|
|
65
|
-
className: "size-2 fill-current"
|
|
66
|
-
}) })
|
|
67
|
-
}), children]
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
71
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
|
|
72
|
-
"data-inset": inset,
|
|
73
|
-
className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
|
|
74
|
-
...props
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
function DropdownMenuSeparator({ className, ...props }) {
|
|
78
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
|
|
79
|
-
className: cn("bg-border -mx-1 my-1 h-px", className),
|
|
80
|
-
...props
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
function DropdownMenuShortcut({ className, ...props }) {
|
|
84
|
-
return /* @__PURE__ */ jsx("span", {
|
|
85
|
-
className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
|
|
86
|
-
...props
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
function DropdownMenuSub({ ...props }) {
|
|
90
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { ...props });
|
|
91
|
-
}
|
|
92
|
-
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
93
|
-
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
|
|
94
|
-
"data-inset": inset,
|
|
95
|
-
className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", className),
|
|
96
|
-
...props,
|
|
97
|
-
children: [children, /* @__PURE__ */ jsx(Icon, {
|
|
98
|
-
icon: ChevronRightIcon,
|
|
99
|
-
className: "ml-auto size-4"
|
|
100
|
-
})]
|
|
101
|
-
});
|
|
102
|
-
}
|
|
103
|
-
function DropdownMenuSubContent({ className, ...props }) {
|
|
104
|
-
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
|
|
105
|
-
className: cn("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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg", className),
|
|
106
|
-
...props
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
//#endregion
|
|
110
|
-
export { DropdownMenuItem as a, DropdownMenuRadioGroup as c, DropdownMenuShortcut as d, DropdownMenuSub as f, DropdownMenuTrigger as h, DropdownMenuGroup as i, DropdownMenuRadioItem as l, DropdownMenuSubTrigger as m, DropdownMenuCheckboxItem as n, DropdownMenuLabel as o, DropdownMenuSubContent as p, DropdownMenuContent as r, DropdownMenuPortal as s, DropdownMenu as t, DropdownMenuSeparator as u };
|