@datum-cloud/datum-ui 0.6.0-alpha.b817c77 → 0.6.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/README.md +4 -0
- package/dist/autocomplete/index.mjs +1 -1
- package/dist/{autocomplete-V5-qslzS.mjs → autocomplete-CkYJueBL.mjs} +2 -2
- package/dist/autosearch/index.mjs +199 -0
- package/dist/{calendar-date-picker-DWK94_DC.mjs → calendar-date-picker-CDT-8Ha8.mjs} +2 -1
- package/dist/combobox/index.mjs +2 -0
- package/dist/combobox-B-C9lJeD.mjs +97 -0
- package/dist/components/features/autocomplete/autocomplete.d.ts +1 -1
- package/dist/components/features/autocomplete/autocomplete.d.ts.map +1 -1
- package/dist/components/features/autocomplete/autocomplete.types.d.ts +2 -0
- package/dist/components/features/autocomplete/autocomplete.types.d.ts.map +1 -1
- package/dist/components/features/autosearch/autosearch.d.ts +35 -0
- package/dist/components/features/autosearch/autosearch.d.ts.map +1 -0
- package/dist/components/features/autosearch/autosearch.types.d.ts +51 -0
- package/dist/components/features/autosearch/autosearch.types.d.ts.map +1 -0
- package/dist/components/features/autosearch/index.d.ts +3 -0
- package/dist/components/features/autosearch/index.d.ts.map +1 -0
- package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts +2 -1
- package/dist/components/features/calendar-date-picker/calendar-date-picker.d.ts.map +1 -1
- package/dist/components/features/combobox/combobox.d.ts +27 -0
- package/dist/components/features/combobox/combobox.d.ts.map +1 -0
- package/dist/components/features/combobox/index.d.ts +3 -0
- package/dist/components/features/combobox/index.d.ts.map +1 -0
- package/dist/components/features/combobox/types.d.ts +84 -0
- package/dist/components/features/combobox/types.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/date-time-picker.d.ts +9 -0
- package/dist/components/features/date-time-picker/date-time-picker.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/index.d.ts +3 -0
- package/dist/components/features/date-time-picker/index.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/types.d.ts +59 -0
- package/dist/components/features/date-time-picker/types.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/utils/format.d.ts +13 -0
- package/dist/components/features/date-time-picker/utils/format.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/utils/index.d.ts +3 -0
- package/dist/components/features/date-time-picker/utils/index.d.ts.map +1 -0
- package/dist/components/features/date-time-picker/utils/timezone.d.ts +23 -0
- package/dist/components/features/date-time-picker/utils/timezone.d.ts.map +1 -0
- package/dist/components/features/form/adapter-types.d.ts +26 -0
- package/dist/components/features/form/adapter-types.d.ts.map +1 -1
- package/dist/components/features/form/adapters/conform/conform-adapter.d.ts.map +1 -1
- package/dist/components/features/form/adapters/rhf/rhf-adapter.d.ts.map +1 -1
- package/dist/components/features/form/components/form-autocomplete.d.ts.map +1 -1
- package/dist/components/features/form/components/form-autosearch.d.ts +37 -0
- package/dist/components/features/form/components/form-autosearch.d.ts.map +1 -0
- package/dist/components/features/form/components/form-checkbox.d.ts.map +1 -1
- package/dist/components/features/form/components/form-combobox.d.ts +80 -0
- package/dist/components/features/form/components/form-combobox.d.ts.map +1 -0
- package/dist/components/features/form/components/form-copy-box.d.ts +3 -0
- package/dist/components/features/form/components/form-copy-box.d.ts.map +1 -1
- package/dist/components/features/form/components/form-custom.d.ts.map +1 -1
- package/dist/components/features/form/components/form-date-picker.d.ts +40 -0
- package/dist/components/features/form/components/form-date-picker.d.ts.map +1 -0
- package/dist/components/features/form/components/form-date-time-picker.d.ts +39 -0
- package/dist/components/features/form/components/form-date-time-picker.d.ts.map +1 -0
- package/dist/components/features/form/components/form-dialog.d.ts.map +1 -1
- package/dist/components/features/form/components/form-field.d.ts.map +1 -1
- package/dist/components/features/form/components/form-radio-group.d.ts.map +1 -1
- package/dist/components/features/form/components/form-root.d.ts.map +1 -1
- package/dist/components/features/form/components/form-switch.d.ts.map +1 -1
- package/dist/components/features/form/components/form-time-picker.d.ts +21 -0
- package/dist/components/features/form/components/form-time-picker.d.ts.map +1 -0
- package/dist/components/features/form/components/form-transfer.d.ts +37 -0
- package/dist/components/features/form/components/form-transfer.d.ts.map +1 -0
- package/dist/components/features/form/components/index.d.ts +7 -1
- package/dist/components/features/form/components/index.d.ts.map +1 -1
- package/dist/components/features/form/components/stepper/form-stepper.d.ts +3 -1
- package/dist/components/features/form/components/stepper/form-stepper.d.ts.map +1 -1
- package/dist/components/features/form/hooks/index.d.ts +1 -1
- package/dist/components/features/form/hooks/index.d.ts.map +1 -1
- package/dist/components/features/form/hooks/use-display-touched.d.ts +20 -0
- package/dist/components/features/form/hooks/use-display-touched.d.ts.map +1 -0
- package/dist/components/features/form/hooks/use-field.d.ts +4 -0
- package/dist/components/features/form/hooks/use-field.d.ts.map +1 -1
- package/dist/components/features/form/hooks/use-form-state.d.ts +36 -0
- package/dist/components/features/form/hooks/use-form-state.d.ts.map +1 -0
- package/dist/components/features/form/index.d.ts +39 -21
- package/dist/components/features/form/index.d.ts.map +1 -1
- package/dist/components/features/form/stepper/index.d.ts +17 -0
- package/dist/components/features/form/stepper/index.d.ts.map +1 -0
- package/dist/components/features/form/types/index.d.ts +46 -0
- package/dist/components/features/form/types/index.d.ts.map +1 -1
- package/dist/components/features/form/utils/get-field-constraints.d.ts +23 -1
- package/dist/components/features/form/utils/get-field-constraints.d.ts.map +1 -1
- package/dist/components/features/form/utils/get-schema-defaults.d.ts +24 -0
- package/dist/components/features/form/utils/get-schema-defaults.d.ts.map +1 -0
- package/dist/components/features/form/utils/zod-helpers.d.ts +12 -0
- package/dist/components/features/form/utils/zod-helpers.d.ts.map +1 -0
- package/dist/components/features/time-picker/index.d.ts +3 -0
- package/dist/components/features/time-picker/index.d.ts.map +1 -0
- package/dist/components/features/time-picker/time-picker.d.ts +22 -0
- package/dist/components/features/time-picker/time-picker.d.ts.map +1 -0
- package/dist/components/features/time-picker/types.d.ts +31 -0
- package/dist/components/features/time-picker/types.d.ts.map +1 -0
- package/dist/components/features/transfer/components/index.d.ts +9 -0
- package/dist/components/features/transfer/components/index.d.ts.map +1 -0
- package/dist/components/features/transfer/components/transfer-group.d.ts +7 -0
- package/dist/components/features/transfer/components/transfer-group.d.ts.map +1 -0
- package/dist/components/features/transfer/components/transfer-item.d.ts +10 -0
- package/dist/components/features/transfer/components/transfer-item.d.ts.map +1 -0
- package/dist/components/features/transfer/components/transfer-panel.d.ts +18 -0
- package/dist/components/features/transfer/components/transfer-panel.d.ts.map +1 -0
- package/dist/components/features/transfer/components/transfer-search.d.ts +9 -0
- package/dist/components/features/transfer/components/transfer-search.d.ts.map +1 -0
- package/dist/components/features/transfer/hooks/use-transfer-dnd.d.ts +26 -0
- package/dist/components/features/transfer/hooks/use-transfer-dnd.d.ts.map +1 -0
- package/dist/components/features/transfer/hooks/use-transfer-state.d.ts +20 -0
- package/dist/components/features/transfer/hooks/use-transfer-state.d.ts.map +1 -0
- package/dist/components/features/transfer/index.d.ts +3 -0
- package/dist/components/features/transfer/index.d.ts.map +1 -0
- package/dist/components/features/transfer/transfer.d.ts +6 -0
- package/dist/components/features/transfer/transfer.d.ts.map +1 -0
- package/dist/components/features/transfer/types.d.ts +69 -0
- package/dist/components/features/transfer/types.d.ts.map +1 -0
- package/dist/data-table/index.mjs +1 -1
- package/dist/date-picker/index.mjs +2 -2
- package/dist/date-time-picker/index.mjs +2 -0
- package/dist/date-time-picker-BomrW07W.mjs +178 -0
- package/dist/form/adapters/conform/index.mjs +110 -13
- package/dist/form/adapters/rhf/index.mjs +116 -27
- package/dist/form/index.mjs +3 -3
- package/dist/form/stepper/index.mjs +519 -0
- package/dist/{form-BE1xBne4.mjs → form-B3rQ4CH9.mjs} +447 -605
- package/dist/form-context-Ccxm-wqL.mjs +17 -0
- package/dist/grid/index.mjs +1 -1
- package/dist/hooks/index.mjs +2 -2
- package/dist/index.mjs +16 -16
- package/dist/input-number/index.mjs +1 -1
- package/dist/map/index.mjs +1 -1
- package/dist/{map-Cw7u8r6E.mjs → map-CWIQ-eql.mjs} +1 -1
- package/dist/more-actions/index.mjs +1 -1
- package/dist/page-title/index.mjs +1 -1
- package/dist/stepper/index.mjs +1 -320
- package/dist/stepper-DvIOp0hh.mjs +321 -0
- package/dist/tag-input/index.mjs +1 -1
- package/dist/task-queue/index.mjs +1 -1
- package/dist/time-picker/index.mjs +2 -0
- package/dist/time-picker-BoF7pZZ2.mjs +43 -0
- package/dist/transfer/index.mjs +2 -0
- package/dist/transfer-46C-rFFW.mjs +264 -0
- package/dist/{get-field-constraints-BPMW8VvY.mjs → use-display-touched-I39aXEBD.mjs} +51 -16
- package/package.json +42 -1
- /package/dist/{adapter-context-B7L2ucTr.mjs → adapter-context-rWveHhDd.mjs} +0 -0
- /package/dist/{col-YBbQ5wlb.mjs → col-1T0Q3SlH.mjs} +0 -0
- /package/dist/{hooks-DYjN7lvC.mjs → hooks-D8r2M2U6.mjs} +0 -0
- /package/dist/{input-number-DEjXG2I6.mjs → input-number-a7uydAsw.mjs} +0 -0
- /package/dist/{map-leaflet-imports-D6nTEOIh.mjs → map-leaflet-imports-CRSKA79m.mjs} +0 -0
- /package/dist/{more-actions-BNQ2yfWZ.mjs → more-actions-ILnEZq_E.mjs} +0 -0
- /package/dist/{page-title-CNiRNZ7p.mjs → page-title-ChsnpBiH.mjs} +0 -0
- /package/dist/{tag-input-BKed-cul.mjs → tag-input-T9cUX9-G.mjs} +0 -0
- /package/dist/{task-queue-dropdown-Di_Wjspz.mjs → task-queue-dropdown-Wcbj-f0V.mjs} +0 -0
- /package/dist/{to-api-format-Cq4prffn.mjs → to-api-format-Bh3c01gr.mjs} +0 -0
- /package/dist/{use-copy-to-clipboard-BGdTmkFV.mjs → use-copy-to-clipboard-uNeeVHC4.mjs} +0 -0
package/README.md
CHANGED
|
@@ -139,10 +139,13 @@ Complex, fully-customized components with significant business logic.
|
|
|
139
139
|
| Component | Additional Dependencies | Description |
|
|
140
140
|
| -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------ |
|
|
141
141
|
| `Autocomplete` | — | Search autocomplete input |
|
|
142
|
+
| `Autosearch` | — | Search-first input with async results |
|
|
142
143
|
| `AvatarStack` | — | Stacked avatar display |
|
|
143
144
|
| `CalendarDatePicker` | `react-day-picker`, `date-fns` | Date/range picker with presets |
|
|
145
|
+
| `Combobox` | — | Searchable single-select dropdown |
|
|
144
146
|
| `CodeEditor`, `CodeEditorTabs` | `@monaco-editor/react`, `monaco-editor` | Monaco-based code editor with VS Code UX |
|
|
145
147
|
| `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableToolbar`, `DataTableViewOptions` | `@tanstack/react-table` | Advanced data table with sorting/filtering |
|
|
148
|
+
| `DateTimePicker`, `TimePicker` | `date-fns`, `date-fns-tz` | Date/time picker with timezone support |
|
|
146
149
|
| `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownSection` | — | Dropdown menu |
|
|
147
150
|
| `Dropzone` | `react-dropzone` | File drag-and-drop upload area |
|
|
148
151
|
| `EmptyContent` | — | Empty state placeholder |
|
|
@@ -160,6 +163,7 @@ Complex, fully-customized components with significant business logic.
|
|
|
160
163
|
| `TagInput` | — | Tag/chip input |
|
|
161
164
|
| `TaskQueue`, `TaskQueueProvider`, `TaskQueueDropdown`, `TaskPanelHeader`, `TaskSummaryDialog` | — | Background task queue with progress UI |
|
|
162
165
|
| `TimeRangePicker` | `date-fns`, `date-fns-tz` | Time range selector with timezone support |
|
|
166
|
+
| `Transfer` | — | Dual-panel item selector with search |
|
|
163
167
|
| `Toast`, `Toaster`, `useToast` | `sonner` | Toast notifications |
|
|
164
168
|
|
|
165
169
|
## Usage Examples
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Autocomplete } from "../autocomplete-
|
|
1
|
+
import { t as Autocomplete } from "../autocomplete-CkYJueBL.mjs";
|
|
2
2
|
export { Autocomplete };
|
|
@@ -159,7 +159,7 @@ function VirtualizedOptions({ options, selectedValue, onSelect, renderOption, it
|
|
|
159
159
|
* />
|
|
160
160
|
* ```
|
|
161
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, disabled = false, name, id, className, triggerClassName, contentClassName, listClassName }) {
|
|
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
163
|
const [open, setOpen] = React$1.useState(false);
|
|
164
164
|
const [search, setSearch] = React$1.useState("");
|
|
165
165
|
const flatOptions = React$1.useMemo(() => flattenOptions(options), [options]);
|
|
@@ -212,7 +212,7 @@ function Autocomplete({ options, value, onValueChange, onSearchChange, searchPla
|
|
|
212
212
|
children: [/* @__PURE__ */ jsxs(Popover, {
|
|
213
213
|
open,
|
|
214
214
|
onOpenChange: handleOpenChange,
|
|
215
|
-
modal
|
|
215
|
+
modal,
|
|
216
216
|
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
217
217
|
asChild: true,
|
|
218
218
|
children: /* @__PURE__ */ jsx(Trigger, {
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
import { t as cn } from "../cn-D2KYQ917.mjs";
|
|
2
|
+
import { t as Button } from "../button-BllvE9Lm.mjs";
|
|
3
|
+
import { i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../command-DqHWukGK.mjs";
|
|
4
|
+
import { t as Input } from "../input-FKGqZypx.mjs";
|
|
5
|
+
import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "../popover-FJAcbYoH.mjs";
|
|
6
|
+
import { t as Tooltip } from "../tooltip-Cruvl5F6.mjs";
|
|
7
|
+
import { AlertCircle, Check, Loader2, X } from "lucide-react";
|
|
8
|
+
import * as React$1 from "react";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
//#region src/components/features/autosearch/autosearch.types.ts
|
|
11
|
+
/**
|
|
12
|
+
* Default function to extract searchable text from an option.
|
|
13
|
+
* Combines label, description, and value for comprehensive searching.
|
|
14
|
+
*/
|
|
15
|
+
function defaultAutosearchValue(option) {
|
|
16
|
+
return [
|
|
17
|
+
option.label,
|
|
18
|
+
option.description,
|
|
19
|
+
option.value
|
|
20
|
+
].filter(Boolean).join(" ");
|
|
21
|
+
}
|
|
22
|
+
//#endregion
|
|
23
|
+
//#region src/components/features/autosearch/autosearch.tsx
|
|
24
|
+
/**
|
|
25
|
+
* Autosearch - Search-first input with dropdown results
|
|
26
|
+
*
|
|
27
|
+
* A text input that opens a popover with search results as you type.
|
|
28
|
+
* Different from Autocomplete which shows all options upfront.
|
|
29
|
+
*
|
|
30
|
+
* @example Basic usage
|
|
31
|
+
* ```tsx
|
|
32
|
+
* <Autosearch
|
|
33
|
+
* options={users}
|
|
34
|
+
* value={selectedUser}
|
|
35
|
+
* onValueChange={setSelectedUser}
|
|
36
|
+
* onSearch={handleSearch}
|
|
37
|
+
* placeholder="Search users..."
|
|
38
|
+
* />
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
41
|
+
* @example With loading state
|
|
42
|
+
* ```tsx
|
|
43
|
+
* <Autosearch
|
|
44
|
+
* options={searchResults}
|
|
45
|
+
* value={selected}
|
|
46
|
+
* onValueChange={setSelected}
|
|
47
|
+
* onSearch={debouncedSearch}
|
|
48
|
+
* loading={isSearching}
|
|
49
|
+
* placeholder="Type to search..."
|
|
50
|
+
* />
|
|
51
|
+
* ```
|
|
52
|
+
*/
|
|
53
|
+
function Autosearch({ options = [], value, onValueChange, onSearch, searchDebounceMs = 300, getValue = defaultAutosearchValue, placeholder = "Search for an option", emptyMessage = "No results found.", emptyContent, loading = false, modal = false, disabled = false, name, id, className, inputClassName, contentClassName, selectedClassName }) {
|
|
54
|
+
const [searchQuery, setSearchQuery] = React$1.useState("");
|
|
55
|
+
const [open, setOpen] = React$1.useState(false);
|
|
56
|
+
const [persistedOption, setPersistedOption] = React$1.useState(null);
|
|
57
|
+
const [searchExecuted, setSearchExecuted] = React$1.useState(false);
|
|
58
|
+
const searchDebounceRef = React$1.useRef(null);
|
|
59
|
+
const handleSearchChange = (inputValue) => {
|
|
60
|
+
setSearchQuery(inputValue);
|
|
61
|
+
const normalized = inputValue.trim();
|
|
62
|
+
if (searchDebounceRef.current) {
|
|
63
|
+
clearTimeout(searchDebounceRef.current);
|
|
64
|
+
searchDebounceRef.current = null;
|
|
65
|
+
}
|
|
66
|
+
if (!normalized) {
|
|
67
|
+
onSearch?.("");
|
|
68
|
+
setOpen(false);
|
|
69
|
+
setSearchExecuted(false);
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
setOpen(true);
|
|
73
|
+
searchDebounceRef.current = setTimeout(() => {
|
|
74
|
+
setSearchExecuted(true);
|
|
75
|
+
onSearch?.(normalized);
|
|
76
|
+
searchDebounceRef.current = null;
|
|
77
|
+
}, searchDebounceMs);
|
|
78
|
+
};
|
|
79
|
+
React$1.useEffect(() => {
|
|
80
|
+
return () => {
|
|
81
|
+
if (searchDebounceRef.current) {
|
|
82
|
+
clearTimeout(searchDebounceRef.current);
|
|
83
|
+
searchDebounceRef.current = null;
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
}, []);
|
|
87
|
+
const handleSelect = React$1.useCallback((option) => {
|
|
88
|
+
setPersistedOption(option);
|
|
89
|
+
onValueChange?.(option.value);
|
|
90
|
+
setSearchQuery("");
|
|
91
|
+
onSearch?.("");
|
|
92
|
+
setOpen(false);
|
|
93
|
+
setSearchExecuted(false);
|
|
94
|
+
}, [onValueChange, onSearch]);
|
|
95
|
+
const handleClear = React$1.useCallback(() => {
|
|
96
|
+
setPersistedOption(null);
|
|
97
|
+
setSearchQuery("");
|
|
98
|
+
onSearch?.("");
|
|
99
|
+
setOpen(false);
|
|
100
|
+
setSearchExecuted(false);
|
|
101
|
+
onValueChange?.("");
|
|
102
|
+
}, [onValueChange, onSearch]);
|
|
103
|
+
React$1.useEffect(() => {
|
|
104
|
+
const normalized = searchQuery.trim();
|
|
105
|
+
if (value || !normalized) return;
|
|
106
|
+
if (options.length === 1 && !options[0].disabled) handleSelect(options[0]);
|
|
107
|
+
}, [
|
|
108
|
+
searchQuery,
|
|
109
|
+
options,
|
|
110
|
+
value,
|
|
111
|
+
handleSelect
|
|
112
|
+
]);
|
|
113
|
+
const normalizedQuery = searchQuery.trim();
|
|
114
|
+
const hasSearch = Boolean(normalizedQuery);
|
|
115
|
+
const showResults = hasSearch && !value && options.length > 1;
|
|
116
|
+
const selectedOption = options.find((opt) => opt.value === value) ?? persistedOption;
|
|
117
|
+
const selectedLabel = selectedOption?.label ?? "";
|
|
118
|
+
const selectedDescription = selectedOption?.description ?? "";
|
|
119
|
+
const showNoResults = hasSearch && !loading && options.length === 0 && searchExecuted;
|
|
120
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
121
|
+
className: cn("relative", className),
|
|
122
|
+
children: [name && /* @__PURE__ */ jsx("input", {
|
|
123
|
+
type: "hidden",
|
|
124
|
+
name,
|
|
125
|
+
value: value ?? ""
|
|
126
|
+
}), value ? /* @__PURE__ */ jsxs("div", {
|
|
127
|
+
className: cn("bg-muted/10 border-border flex items-center justify-between gap-2 rounded-md border px-3 py-1 pr-1", selectedClassName),
|
|
128
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
129
|
+
className: "flex flex-col",
|
|
130
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
131
|
+
className: "text-sm font-medium",
|
|
132
|
+
children: selectedLabel
|
|
133
|
+
}), selectedDescription && /* @__PURE__ */ jsx("span", {
|
|
134
|
+
className: "text-muted-foreground text-xs",
|
|
135
|
+
children: selectedDescription
|
|
136
|
+
})]
|
|
137
|
+
}), /* @__PURE__ */ jsx(Button, {
|
|
138
|
+
size: "small",
|
|
139
|
+
type: "tertiary",
|
|
140
|
+
theme: "borderless",
|
|
141
|
+
onClick: handleClear,
|
|
142
|
+
disabled,
|
|
143
|
+
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
|
|
144
|
+
})]
|
|
145
|
+
}) : /* @__PURE__ */ jsxs(Popover, {
|
|
146
|
+
open: open && showResults,
|
|
147
|
+
onOpenChange: setOpen,
|
|
148
|
+
modal,
|
|
149
|
+
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
150
|
+
asChild: true,
|
|
151
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
152
|
+
className: "relative",
|
|
153
|
+
children: [
|
|
154
|
+
/* @__PURE__ */ jsx(Input, {
|
|
155
|
+
id,
|
|
156
|
+
placeholder,
|
|
157
|
+
value: searchQuery,
|
|
158
|
+
onChange: (e) => handleSearchChange(e.target.value),
|
|
159
|
+
disabled,
|
|
160
|
+
autoComplete: "off",
|
|
161
|
+
className: cn("w-full pr-10", inputClassName)
|
|
162
|
+
}),
|
|
163
|
+
loading && /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 animate-spin" }),
|
|
164
|
+
showNoResults && /* @__PURE__ */ jsx(Tooltip, {
|
|
165
|
+
message: emptyMessage,
|
|
166
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
167
|
+
className: "absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2",
|
|
168
|
+
children: /* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive h-4 w-4" })
|
|
169
|
+
})
|
|
170
|
+
})
|
|
171
|
+
]
|
|
172
|
+
})
|
|
173
|
+
}), /* @__PURE__ */ jsx(PopoverContent, {
|
|
174
|
+
className: cn("popover-content-width-full p-0", contentClassName),
|
|
175
|
+
side: "bottom",
|
|
176
|
+
align: "start",
|
|
177
|
+
onOpenAutoFocus: (event) => event.preventDefault(),
|
|
178
|
+
children: /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsx(CommandList, { children: loading ? /* @__PURE__ */ jsx(CommandEmpty, { children: "Searching..." }) : options.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: emptyContent ?? emptyMessage }) : /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
|
|
179
|
+
value: getValue(option),
|
|
180
|
+
onSelect: () => handleSelect(option),
|
|
181
|
+
disabled: option.disabled,
|
|
182
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
183
|
+
className: "flex flex-col",
|
|
184
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
185
|
+
className: "font-medium",
|
|
186
|
+
children: option.label
|
|
187
|
+
}), option.description && /* @__PURE__ */ jsx("span", {
|
|
188
|
+
className: "text-muted-foreground text-xs",
|
|
189
|
+
children: option.description
|
|
190
|
+
})]
|
|
191
|
+
}), /* @__PURE__ */ jsx(Check, { className: cn("ml-auto h-4 w-4", value === option.value ? "opacity-100" : "opacity-0") })]
|
|
192
|
+
}, option.value)) }) }) })
|
|
193
|
+
})]
|
|
194
|
+
})]
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
Autosearch.displayName = "Autosearch";
|
|
198
|
+
//#endregion
|
|
199
|
+
export { Autosearch, defaultAutosearchValue };
|
|
@@ -35,7 +35,7 @@ const multiSelectVariants = cva("flex font-normal shadow-none items-center justi
|
|
|
35
35
|
} },
|
|
36
36
|
defaultVariants: { variant: "default" }
|
|
37
37
|
});
|
|
38
|
-
function CalendarDatePicker({ ref, id = "calendar-date-picker", className, triggerClassName, date, closeOnSelect = false, numberOfMonths = 2, yearsRange = 10, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture = false, disablePast = false, maxRange, popoverClassName, disabled, ...props }) {
|
|
38
|
+
function CalendarDatePicker({ ref, id = "calendar-date-picker", className, triggerClassName, date, closeOnSelect = false, numberOfMonths = 2, yearsRange = 10, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture = false, disablePast = false, maxRange, popoverClassName, disabled, modal = false, ...props }) {
|
|
39
39
|
const [isPopoverOpen, setIsPopoverOpen] = React$1.useState(false);
|
|
40
40
|
const [selectedRange, setSelectedRange] = React$1.useState(numberOfMonths === 2 ? "This Year" : "Today");
|
|
41
41
|
const [monthFrom, setMonthFrom] = React$1.useState(date?.from);
|
|
@@ -421,6 +421,7 @@ function CalendarDatePicker({ ref, id = "calendar-date-picker", className, trigg
|
|
|
421
421
|
` }), /* @__PURE__ */ jsxs(Popover, {
|
|
422
422
|
open: isPopoverOpen,
|
|
423
423
|
onOpenChange: setIsPopoverOpen,
|
|
424
|
+
modal,
|
|
424
425
|
children: [/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
425
426
|
asChild: true,
|
|
426
427
|
children: /* @__PURE__ */ jsx(Button, {
|
|
@@ -0,0 +1,97 @@
|
|
|
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 };
|
|
@@ -27,7 +27,7 @@ import type { AutocompleteOption, AutocompleteProps } from './autocomplete.types
|
|
|
27
27
|
* />
|
|
28
28
|
* ```
|
|
29
29
|
*/
|
|
30
|
-
export declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>({ options, value, onValueChange, onSearchChange, searchPlaceholder, disableSearch, renderOption, renderValue, placeholder, emptyContent, footer, creatable, creatableLabel, virtualize, itemSize, loading, disabled, name, id, className, triggerClassName, contentClassName, listClassName, }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>({ options, value, onValueChange, onSearchChange, searchPlaceholder, disableSearch, renderOption, renderValue, placeholder, emptyContent, footer, creatable, creatableLabel, virtualize, itemSize, loading, modal, disabled, name, id, className, triggerClassName, contentClassName, listClassName, }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
31
31
|
export declare namespace Autocomplete {
|
|
32
32
|
var displayName: string;
|
|
33
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,sBAAsB,CAAA;AAkP7B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAAE,EAC9E,OAAO,EACP,KAAK,EACL,aAAa,EACb,cAAc,EACd,iBAA+B,EAC/B,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,WAAyB,EACzB,YAAiC,EACjC,MAAM,EACN,SAAiB,EACjB,cAAc,EACd,UAAkB,EAClB,QAAa,EACb,OAAe,EACf,QAAgB,EAChB,IAAI,EACJ,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,GACd,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA8JtB;
|
|
1
|
+
{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,sBAAsB,CAAA;AAkP7B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAAE,EAC9E,OAAO,EACP,KAAK,EACL,aAAa,EACb,cAAc,EACd,iBAA+B,EAC/B,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,WAAyB,EACzB,YAAiC,EACjC,MAAM,EACN,SAAiB,EACjB,cAAc,EACd,UAAkB,EAClB,QAAa,EACb,OAAe,EACf,KAAa,EACb,QAAgB,EAChB,IAAI,EACJ,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,GACd,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA8JtB;yBAvLe,YAAY"}
|
|
@@ -48,6 +48,8 @@ export interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOp
|
|
|
48
48
|
itemSize?: number;
|
|
49
49
|
/** External loading state */
|
|
50
50
|
loading?: boolean;
|
|
51
|
+
/** Popover modal mode - required when using inside a Dialog/Modal component (default: true) */
|
|
52
|
+
modal?: boolean;
|
|
51
53
|
/** Disable the component */
|
|
52
54
|
disabled?: boolean;
|
|
53
55
|
/** HTML name attribute for hidden input */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autocomplete/autocomplete.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB;IAClF,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,OAAO,EAAE,CAAC,EAAE,CAAA;CACb;AAMD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB;IAElF,4EAA4E;IAC5E,OAAO,EAAE,CAAC,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAA;IAGrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAGvC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAA;IAGvB,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAClE,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5C,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAGxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iFAAiF;IACjF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnD,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"autocomplete.types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autocomplete/autocomplete.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB;IAClF,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,OAAO,EAAE,CAAC,EAAE,CAAA;CACb;AAMD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB;IAElF,4EAA4E;IAC5E,OAAO,EAAE,CAAC,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAA;IAGrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAGvC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAA;IAGvB,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAClE,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5C,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAGxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iFAAiF;IACjF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnD,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,OAAO,CAAA;IAGf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IAGX,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD;;;GAGG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IAAI,IAAI,CACzF,iBAAiB,CAAC,CAAC,CAAC,EACpB,OAAO,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAC1C,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { AutosearchProps } from './autosearch.types';
|
|
2
|
+
/**
|
|
3
|
+
* Autosearch - Search-first input with dropdown results
|
|
4
|
+
*
|
|
5
|
+
* A text input that opens a popover with search results as you type.
|
|
6
|
+
* Different from Autocomplete which shows all options upfront.
|
|
7
|
+
*
|
|
8
|
+
* @example Basic usage
|
|
9
|
+
* ```tsx
|
|
10
|
+
* <Autosearch
|
|
11
|
+
* options={users}
|
|
12
|
+
* value={selectedUser}
|
|
13
|
+
* onValueChange={setSelectedUser}
|
|
14
|
+
* onSearch={handleSearch}
|
|
15
|
+
* placeholder="Search users..."
|
|
16
|
+
* />
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* @example With loading state
|
|
20
|
+
* ```tsx
|
|
21
|
+
* <Autosearch
|
|
22
|
+
* options={searchResults}
|
|
23
|
+
* value={selected}
|
|
24
|
+
* onValueChange={setSelected}
|
|
25
|
+
* onSearch={debouncedSearch}
|
|
26
|
+
* loading={isSearching}
|
|
27
|
+
* placeholder="Type to search..."
|
|
28
|
+
* />
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export declare function Autosearch({ options, value, onValueChange, onSearch, searchDebounceMs, getValue, placeholder, emptyMessage, emptyContent, loading, modal, disabled, name, id, className, inputClassName, contentClassName, selectedClassName, }: AutosearchProps): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare namespace Autosearch {
|
|
33
|
+
var displayName: string;
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=autosearch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autosearch.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autosearch/autosearch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAiBzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,UAAU,CAAC,EAEzB,OAAY,EAGZ,KAAK,EACL,aAAa,EAGb,QAAQ,EACR,gBAAsB,EACtB,QAAiC,EAGjC,WAAoC,EACpC,YAAkC,EAClC,YAAY,EAGZ,OAAe,EACf,KAAa,EAGb,QAAgB,EAChB,IAAI,EACJ,EAAE,EAGF,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,iBAAiB,GAClB,EAAE,eAAe,2CA2MjB;yBA3Oe,UAAU"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
import type { AutocompleteOption } from '../autocomplete/autocomplete.types';
|
|
3
|
+
/**
|
|
4
|
+
* Default function to extract searchable text from an option.
|
|
5
|
+
* Combines label, description, and value for comprehensive searching.
|
|
6
|
+
*/
|
|
7
|
+
export declare function defaultAutosearchValue(option: AutocompleteOption): string;
|
|
8
|
+
export interface AutosearchProps {
|
|
9
|
+
/** Options to display in search results */
|
|
10
|
+
options: AutocompleteOption[];
|
|
11
|
+
/** Currently selected option value */
|
|
12
|
+
value?: string;
|
|
13
|
+
/** Called when selection changes */
|
|
14
|
+
onValueChange?: (value: string) => void;
|
|
15
|
+
/** Callback when search query changes (debounced) */
|
|
16
|
+
onSearch?: (query: string) => void;
|
|
17
|
+
/** Debounce delay in ms (default: 300) */
|
|
18
|
+
searchDebounceMs?: number;
|
|
19
|
+
/** Extract searchable text from option for Command filtering */
|
|
20
|
+
getValue?: (option: AutocompleteOption) => string;
|
|
21
|
+
/** Placeholder text for search input */
|
|
22
|
+
placeholder?: string;
|
|
23
|
+
/** Message shown when no results found */
|
|
24
|
+
emptyMessage?: string;
|
|
25
|
+
/** Content shown when no options match after search */
|
|
26
|
+
emptyContent?: React.ReactNode;
|
|
27
|
+
/** External loading state */
|
|
28
|
+
loading?: boolean;
|
|
29
|
+
/** Popover modal mode */
|
|
30
|
+
modal?: boolean;
|
|
31
|
+
/** Disable the component */
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/** HTML name attribute for hidden input */
|
|
34
|
+
name?: string;
|
|
35
|
+
/** HTML id attribute */
|
|
36
|
+
id?: string;
|
|
37
|
+
/** Additional CSS classes for the root wrapper */
|
|
38
|
+
className?: string;
|
|
39
|
+
/** Additional CSS classes for the input */
|
|
40
|
+
inputClassName?: string;
|
|
41
|
+
/** Additional CSS classes for the popover content */
|
|
42
|
+
contentClassName?: string;
|
|
43
|
+
/** Additional CSS classes for the selected value card */
|
|
44
|
+
selectedClassName?: string;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Props for Form.Autosearch - same as the primitive but without
|
|
48
|
+
* value/onValueChange/name/id which come from FieldContext.
|
|
49
|
+
*/
|
|
50
|
+
export type FormAutosearchProps = Omit<AutosearchProps, 'value' | 'onValueChange' | 'name' | 'id'>;
|
|
51
|
+
//# sourceMappingURL=autosearch.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autosearch.types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autosearch/autosearch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AACnC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAM5E;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,kBAAkB,UAEhE;AAMD,MAAM,WAAW,eAAe;IAE9B,2CAA2C;IAC3C,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAG7B,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAGvC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,MAAM,CAAA;IAGjD,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uDAAuD;IACvD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAG9B,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yBAAyB;IACzB,KAAK,CAAC,EAAE,OAAO,CAAA;IAGf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IAGX,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAMD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,eAAe,EACf,OAAO,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAC1C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autosearch/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,oBAAoB,CAAA"}
|
|
@@ -32,8 +32,9 @@ interface CalendarDatePickerProps extends React.HTMLAttributes<HTMLButtonElement
|
|
|
32
32
|
maxRange?: number;
|
|
33
33
|
popoverClassName?: string;
|
|
34
34
|
disabled?: boolean;
|
|
35
|
+
modal?: boolean;
|
|
35
36
|
}
|
|
36
|
-
export declare function CalendarDatePicker({ ref, id, className, triggerClassName, date, closeOnSelect, numberOfMonths, yearsRange, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture, disablePast, maxRange, popoverClassName, disabled, ...props }: CalendarDatePickerProps & {
|
|
37
|
+
export declare function CalendarDatePicker({ ref, id, className, triggerClassName, date, closeOnSelect, numberOfMonths, yearsRange, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture, disablePast, maxRange, popoverClassName, disabled, modal, ...props }: CalendarDatePickerProps & {
|
|
37
38
|
ref?: React.RefObject<HTMLButtonElement | null>;
|
|
38
39
|
}): import("react/jsx-runtime").JSX.Element;
|
|
39
40
|
export declare namespace CalendarDatePicker {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar-date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/features/calendar-date-picker/calendar-date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAiBjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,QAAA,MAAM,mBAAmB;;8EAiBxB,CAAA;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;CACV;AAED,UAAU,uBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACzF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,IAAI,EAAE,SAAS,CAAA;IACf,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,GAAG,SAAS,KAAK,IAAI,CAAA;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAA;IAEjC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"calendar-date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/features/calendar-date-picker/calendar-date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAiBjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,QAAA,MAAM,mBAAmB;;8EAiBxB,CAAA;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;CACV;AAED,UAAU,uBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC;IACzF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,IAAI,EAAE,SAAS,CAAA;IACf,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,GAAG,SAAS,KAAK,IAAI,CAAA;IACnE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAA;IAEjC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,GAAG,EAAE,EAA2B,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,aAAqB,EAAE,cAAkB,EAAE,UAAe,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,aAAqB,EAAE,WAAmB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,KAAa,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAAE,2CAgyBpb;yBAhyBe,kBAAkB"}
|
|
@@ -0,0 +1,27 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|