@bioturing/components 0.27.0 → 0.29.1
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/dist/components/breadcrumb/style.css +1 -1
- package/dist/components/checkbox/component.js.map +1 -1
- package/dist/components/checkbox/style.css +1 -1
- package/dist/components/choice-list/component.js +102 -42
- package/dist/components/choice-list/component.js.map +1 -1
- package/dist/components/choice-list/style.css +1 -1
- package/dist/components/cmdk/index.js.map +1 -1
- package/dist/components/color-select/style.css +1 -1
- package/dist/components/combobox/component.js +232 -0
- package/dist/components/combobox/component.js.map +1 -0
- package/dist/components/combobox/style.css +1 -0
- package/dist/components/drag-drop/style.css +1 -1
- package/dist/components/dropdown-menu/component.js +181 -160
- package/dist/components/dropdown-menu/component.js.map +1 -1
- package/dist/components/dropdown-menu/divider.js +16 -0
- package/dist/components/dropdown-menu/divider.js.map +1 -0
- package/dist/components/dropdown-menu/item.css +1 -0
- package/dist/components/dropdown-menu/item.js +131 -0
- package/dist/components/dropdown-menu/item.js.map +1 -0
- package/dist/components/dropdown-menu/style.css +1 -1
- package/dist/components/ds-root/component.js +22 -17
- package/dist/components/ds-root/component.js.map +1 -1
- package/dist/components/ds-root/style.css +1 -1
- package/dist/components/form/style.css +1 -1
- package/dist/components/hooks/useDraggable.js +77 -0
- package/dist/components/hooks/useDraggable.js.map +1 -0
- package/dist/components/hooks/useHover.js +26 -0
- package/dist/components/hooks/useHover.js.map +1 -0
- package/dist/components/hooks/useTransitionStatus.js +52 -0
- package/dist/components/hooks/useTransitionStatus.js.map +1 -0
- package/dist/components/modal/style.css +1 -1
- package/dist/components/nav/item.js +2 -2
- package/dist/components/nav/style.css +1 -1
- package/dist/components/popup-panel/component.js +81 -92
- package/dist/components/popup-panel/component.js.map +1 -1
- package/dist/components/resizable/component.js +165 -97
- package/dist/components/resizable/component.js.map +1 -1
- package/dist/components/resizable/style.css +1 -1
- package/dist/components/scroll-area/component.js +70 -24
- package/dist/components/scroll-area/component.js.map +1 -1
- package/dist/components/scroll-area/style.css +1 -1
- package/dist/components/select/component.js +160 -91
- package/dist/components/select/component.js.map +1 -1
- package/dist/components/select/item.js +54 -0
- package/dist/components/select/item.js.map +1 -0
- package/dist/components/select/style.css +1 -1
- package/dist/components/select-trigger/component.js +150 -0
- package/dist/components/select-trigger/component.js.map +1 -0
- package/dist/components/select-trigger/style.css +1 -0
- package/dist/components/splitter/splitter-panel.js +8 -8
- package/dist/components/splitter/splitter.js +9 -9
- package/dist/components/splitter/useSizes.js +10 -10
- package/dist/components/splitter/useSizes.js.map +1 -1
- package/dist/components/stack/StackChild.js +9 -9
- package/dist/components/switch/style.css +1 -1
- package/dist/components/table/style.css +1 -1
- package/dist/components/theme-provider/component.js.map +1 -1
- package/dist/components/theme-provider/style.css +1 -1
- package/dist/components/tour/style.css +1 -1
- package/dist/components/transition/component.js +1 -1
- package/dist/components/transition/component.js.map +1 -1
- package/dist/components/utils/WithRenderProp.js.map +1 -1
- package/dist/index.d.ts +355 -12
- package/dist/index.js +198 -188
- package/dist/index.js.map +1 -1
- package/dist/metadata.js +21 -7
- package/dist/metadata.js.map +1 -1
- package/dist/tokens/and-theme/tokens.js +12 -12
- package/dist/tokens/and-theme/tokens.js.map +1 -1
- package/package.json +8 -7
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as ce, Fragment as ue, jsx as p } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as fe, useState as _, useContext as K, useCallback as i, useMemo as x } from "react";
|
|
4
|
+
import { useControlled as be } from "@base-ui-components/utils/useControlled";
|
|
5
|
+
import { FormItemInputContext as me } from "antd/es/form/context";
|
|
6
|
+
import pe from "antd/es/config-provider/DisabledContext";
|
|
7
|
+
import './style.css';/* empty css */
|
|
8
|
+
import { DropdownMenuDivider as xe } from "../dropdown-menu/divider.js";
|
|
9
|
+
import { DropdownMenuItem as ye } from "../dropdown-menu/item.js";
|
|
10
|
+
import { DropdownMenu as ge } from "../dropdown-menu/component.js";
|
|
11
|
+
import { SelectTrigger as ve } from "../select-trigger/component.js";
|
|
12
|
+
import { useControlledState as he } from "../hooks/useControlledState.js";
|
|
13
|
+
import { useCls as Ce } from "../utils/antdUtils.js";
|
|
14
|
+
import { clsx as y } from "../utils/cn.js";
|
|
15
|
+
const Ae = ({
|
|
16
|
+
options: g = [],
|
|
17
|
+
value: R,
|
|
18
|
+
defaultValue: w,
|
|
19
|
+
onChange: v,
|
|
20
|
+
placeholder: $ = "Select...",
|
|
21
|
+
disabled: B = !1,
|
|
22
|
+
status: E,
|
|
23
|
+
allowClear: S = !1,
|
|
24
|
+
multiple: t = !1,
|
|
25
|
+
maxTagCount: ke,
|
|
26
|
+
showSearch: d = !0,
|
|
27
|
+
open: W,
|
|
28
|
+
onOpenChange: q,
|
|
29
|
+
placement: z = "bottomLeft",
|
|
30
|
+
className: G,
|
|
31
|
+
classNames: a,
|
|
32
|
+
size: H = "middle",
|
|
33
|
+
loading: Ie = !1,
|
|
34
|
+
optionRender: De,
|
|
35
|
+
filterOption: h = !0,
|
|
36
|
+
onSearch: C,
|
|
37
|
+
dropdownRender: Me,
|
|
38
|
+
clearIcon: J,
|
|
39
|
+
suffixIcon: Q,
|
|
40
|
+
dropdownMenuProps: U,
|
|
41
|
+
triggerProps: A,
|
|
42
|
+
searchProps: X,
|
|
43
|
+
showSelectionSummary: F = !1,
|
|
44
|
+
selectionSummaryRender: V,
|
|
45
|
+
showSelectAll: L = !1,
|
|
46
|
+
selectAllRender: we,
|
|
47
|
+
...Y
|
|
48
|
+
}, Z) => {
|
|
49
|
+
const [N] = _(
|
|
50
|
+
w !== void 0 ? w : t ? [] : void 0
|
|
51
|
+
), [l, O] = be({
|
|
52
|
+
controlled: R,
|
|
53
|
+
default: N,
|
|
54
|
+
name: "value"
|
|
55
|
+
}), [T, j] = he(
|
|
56
|
+
W,
|
|
57
|
+
q,
|
|
58
|
+
!1
|
|
59
|
+
), [c, ee] = _(""), u = Ce(), {
|
|
60
|
+
status: te
|
|
61
|
+
// hasFeedback,
|
|
62
|
+
// feedbackIcon,
|
|
63
|
+
} = K(me), le = K(pe), re = E || te, oe = B || le, n = i(
|
|
64
|
+
(e) => {
|
|
65
|
+
O(e), v == null || v(e);
|
|
66
|
+
},
|
|
67
|
+
[O, v]
|
|
68
|
+
), P = i(
|
|
69
|
+
(e) => {
|
|
70
|
+
if (t) {
|
|
71
|
+
const r = Array.isArray(l) ? l : [], b = r.includes(e) ? r.filter((m) => m !== e) : [...r, e];
|
|
72
|
+
n(b);
|
|
73
|
+
} else
|
|
74
|
+
n(e);
|
|
75
|
+
},
|
|
76
|
+
[t, l, n]
|
|
77
|
+
), ne = i(
|
|
78
|
+
(e) => {
|
|
79
|
+
ee(e), C == null || C(e);
|
|
80
|
+
},
|
|
81
|
+
[C]
|
|
82
|
+
);
|
|
83
|
+
i(
|
|
84
|
+
(e) => t ? Array.isArray(l) && l.includes(e) : l === e,
|
|
85
|
+
[t, l]
|
|
86
|
+
);
|
|
87
|
+
const o = x(() => !d || !c ? g : g.filter((e) => typeof h == "function" ? h(c, e) : h === !1 ? !0 : (typeof e.label == "string" ? e.label : String(e.value)).toLowerCase().includes(c.toLowerCase())), [g, d, c, h]), k = i(() => {
|
|
88
|
+
if (t) {
|
|
89
|
+
const e = o.map((r) => r.value);
|
|
90
|
+
n(e);
|
|
91
|
+
}
|
|
92
|
+
}, [t, o, n]), I = i(() => {
|
|
93
|
+
t && n([]);
|
|
94
|
+
}, [t, n]), se = x(() => o.map((e) => ({
|
|
95
|
+
type: "item",
|
|
96
|
+
key: e.value,
|
|
97
|
+
icon: e.icon,
|
|
98
|
+
label: e.label,
|
|
99
|
+
disabled: e.disabled,
|
|
100
|
+
onClick: () => !e.disabled && P(e.value)
|
|
101
|
+
})), [o, P]), ae = x(() => {
|
|
102
|
+
if (!L || !t || o.length === 0)
|
|
103
|
+
return null;
|
|
104
|
+
const e = Array.isArray(l) ? l : [], r = o.map((M) => M.value), b = e.filter(
|
|
105
|
+
(M) => r.includes(M)
|
|
106
|
+
), m = b.length === o.length && o.length > 0, D = b.length > 0 && b.length < o.length;
|
|
107
|
+
return /* @__PURE__ */ ce(ue, { children: [
|
|
108
|
+
/* @__PURE__ */ p(
|
|
109
|
+
ye,
|
|
110
|
+
{
|
|
111
|
+
item: {
|
|
112
|
+
type: "item",
|
|
113
|
+
key: "select_all",
|
|
114
|
+
label: "Select All",
|
|
115
|
+
onClick: () => {
|
|
116
|
+
D || m ? I() : k();
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
inCombobox: d,
|
|
120
|
+
selected: m,
|
|
121
|
+
showCheckbox: !0,
|
|
122
|
+
indeterminate: D,
|
|
123
|
+
renderAsNativeElement: !0,
|
|
124
|
+
onSelect: () => {
|
|
125
|
+
D || m ? I() : k();
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
"select_all"
|
|
129
|
+
),
|
|
130
|
+
/* @__PURE__ */ p(xe, {})
|
|
131
|
+
] });
|
|
132
|
+
}, [
|
|
133
|
+
L,
|
|
134
|
+
t,
|
|
135
|
+
o,
|
|
136
|
+
l,
|
|
137
|
+
d,
|
|
138
|
+
I,
|
|
139
|
+
k
|
|
140
|
+
]), f = x(() => Array.isArray(l) ? l : l ? [l] : [], [l]), s = f.map((e) => g.find((r) => r.value === e)).filter(Boolean), { displayValue: ie, displayPrefix: de } = x(() => {
|
|
141
|
+
if (s.length === 0)
|
|
142
|
+
return { displayValue: void 0, displayPrefix: void 0 };
|
|
143
|
+
if (t) {
|
|
144
|
+
const r = `${s.length} ${s.length === 1 ? "item" : "items"} selected`;
|
|
145
|
+
return F ? V ? {
|
|
146
|
+
displayValue: V(f),
|
|
147
|
+
displayPrefix: void 0
|
|
148
|
+
} : {
|
|
149
|
+
displayValue: r,
|
|
150
|
+
// TODO: Create icon component for multiple selection summary
|
|
151
|
+
displayPrefix: void 0
|
|
152
|
+
} : s.length === 1 ? {
|
|
153
|
+
displayValue: s[0].label,
|
|
154
|
+
displayPrefix: s[0].icon
|
|
155
|
+
} : {
|
|
156
|
+
displayValue: r,
|
|
157
|
+
displayPrefix: void 0
|
|
158
|
+
};
|
|
159
|
+
}
|
|
160
|
+
const e = s[0];
|
|
161
|
+
return {
|
|
162
|
+
displayValue: e == null ? void 0 : e.label,
|
|
163
|
+
displayPrefix: e == null ? void 0 : e.icon
|
|
164
|
+
};
|
|
165
|
+
}, [
|
|
166
|
+
s,
|
|
167
|
+
t,
|
|
168
|
+
F,
|
|
169
|
+
V,
|
|
170
|
+
f
|
|
171
|
+
]);
|
|
172
|
+
return /* @__PURE__ */ p("div", { ref: Z, className: y(u("combobox"), G), ...Y, children: /* @__PURE__ */ p(
|
|
173
|
+
ge,
|
|
174
|
+
{
|
|
175
|
+
items: se,
|
|
176
|
+
open: T,
|
|
177
|
+
onOpenChange: j,
|
|
178
|
+
placement: z,
|
|
179
|
+
showSearch: d,
|
|
180
|
+
searchProps: {
|
|
181
|
+
placeholder: "Search options...",
|
|
182
|
+
onValueChange: ne,
|
|
183
|
+
value: c,
|
|
184
|
+
...X
|
|
185
|
+
},
|
|
186
|
+
className: y(u("combobox-dropdown")),
|
|
187
|
+
classNames: {
|
|
188
|
+
trigger: y(u("combobox-trigger-wrapper")),
|
|
189
|
+
popup: y(u("combobox-popup")),
|
|
190
|
+
item: y(u("combobox-option"), a == null ? void 0 : a.option),
|
|
191
|
+
...a
|
|
192
|
+
},
|
|
193
|
+
popupMatchTriggerWidth: !0,
|
|
194
|
+
keepOpenOnSelect: t,
|
|
195
|
+
highlightedItemKey: t ? void 0 : f[0],
|
|
196
|
+
showCheckbox: t,
|
|
197
|
+
beforeList: ae,
|
|
198
|
+
selectedItemKeys: f,
|
|
199
|
+
...U,
|
|
200
|
+
children: /* @__PURE__ */ p(
|
|
201
|
+
ve,
|
|
202
|
+
{
|
|
203
|
+
value: ie,
|
|
204
|
+
prefix: de,
|
|
205
|
+
placeholder: $,
|
|
206
|
+
disabled: oe,
|
|
207
|
+
status: re,
|
|
208
|
+
open: T,
|
|
209
|
+
size: H,
|
|
210
|
+
allowClear: S,
|
|
211
|
+
suffixIcon: Q,
|
|
212
|
+
clearIcon: J,
|
|
213
|
+
classNames: {
|
|
214
|
+
trigger: a == null ? void 0 : a.trigger,
|
|
215
|
+
...A == null ? void 0 : A.classNames
|
|
216
|
+
},
|
|
217
|
+
onClear: () => n(t ? [] : void 0),
|
|
218
|
+
onOpenChange: j,
|
|
219
|
+
role: "combobox",
|
|
220
|
+
...A
|
|
221
|
+
}
|
|
222
|
+
)
|
|
223
|
+
}
|
|
224
|
+
) });
|
|
225
|
+
}, Ve = fe(Ae), qe = Object.assign(Ve, {
|
|
226
|
+
// Add any sub components here if needed
|
|
227
|
+
});
|
|
228
|
+
export {
|
|
229
|
+
qe as Combobox,
|
|
230
|
+
qe as default
|
|
231
|
+
};
|
|
232
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/combobox/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n useCallback,\n useMemo,\n useState,\n useContext,\n} from \"react\";\nimport { useControlled } from \"@base-ui-components/utils/useControlled\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\nimport { ValidateStatus } from \"antd/es/form/FormItem\";\nimport DisabledContext from \"antd/es/config-provider/DisabledContext\";\nimport { clsx, useCls } from \"../utils\";\nimport { SelectTrigger } from \"../select-trigger\";\nimport {\n DropdownMenu,\n DropdownMenuProps,\n DropdownMenuItem,\n type DropdownMenuItemType,\n} from \"../dropdown-menu\";\nimport type { PopoverProps } from \"antd/es/popover\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useControlledState } from \"../hooks\";\nimport { DropdownMenuDivider } from \"../dropdown-menu/divider\";\n\nexport interface ComboboxOption {\n value: string | number;\n label: React.ReactNode;\n disabled?: boolean;\n icon?: React.ReactNode;\n}\n\nexport interface ComboboxProps {\n /** Array of options to be displayed in the combobox */\n options?: ComboboxOption[];\n /** Current value of the combobox */\n value?: string | number | Array<string | number>;\n /** Default value when uncontrolled */\n defaultValue?: string | number | Array<string | number>;\n /** Callback when value changes */\n onChange?: (value: string | number | Array<string | number>) => void;\n /** Placeholder text for the input */\n placeholder?: string;\n /** Whether the combobox is disabled */\n disabled?: boolean;\n /** Validation status */\n status?: ValidateStatus;\n /** Whether to allow clearing the selection */\n allowClear?: boolean;\n /** Whether to allow multiple selections */\n multiple?: boolean;\n /** Maximum number of tags to show */\n maxTagCount?: number;\n /** Whether to show search functionality */\n showSearch?: boolean;\n /** Controlled open state */\n open?: boolean;\n /** Callback when open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Placement of the dropdown */\n placement?: PopoverProps[\"placement\"];\n /** Custom className for the component */\n className?: string;\n /** Custom class names for different parts */\n classNames?: {\n trigger?: string;\n input?: string;\n option?: string;\n optionIcon?: string;\n optionText?: string;\n };\n /** Size of the combobox */\n size?: \"small\" | \"middle\" | \"large\";\n /** Loading state */\n loading?: boolean;\n /** Custom render for options */\n optionRender?: (\n option: ComboboxOption,\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /** Filter function for search */\n filterOption?: boolean | ((input: string, option: ComboboxOption) => boolean);\n /** Callback when search input changes */\n onSearch?: (value: string) => void;\n /** Custom dropdown render */\n dropdownRender?: (menu: React.ReactElement) => React.ReactElement;\n /** Custom clear icon */\n clearIcon?: React.ReactNode;\n /** Custom suffix icon */\n suffixIcon?: React.ReactNode;\n /**\n * Props to pass to the dropdown menu\n */\n dropdownMenuProps?: DropdownMenuProps;\n /**\n * Props to pass to the combobox trigger\n */\n triggerProps?: React.ComponentPropsWithoutRef<typeof SelectTrigger>;\n searchProps?: {\n placeholder?: string;\n onValueChange?: (value: string) => void;\n value?: string;\n };\n /**\n * Show selection summary instead of individual tags when multiple\n * @default false\n */\n showSelectionSummary?: boolean;\n /**\n * Render function for the selection summary in multiple case\n * @default (selectedValues) => `${selectedValues.length} items selected`\n */\n selectionSummaryRender?: (\n selectedValues: Array<string | number>\n ) => React.ReactNode;\n /**\n * Show select all option when in multiple mode\n * @default false\n */\n showSelectAll?: boolean;\n /**\n * Render function for the select all option\n */\n selectAllRender?: (props: {\n onSelectAll: () => void;\n onDeselectAll: () => void;\n checked: boolean;\n indeterminate: boolean;\n }) => React.ReactNode;\n}\n\nconst ComboboxInner = (\n {\n options = [],\n value: controlledValue,\n defaultValue,\n onChange,\n placeholder = \"Select...\",\n disabled: disabledProp = false,\n status: statusProp,\n allowClear = false,\n multiple = false,\n maxTagCount,\n showSearch = true,\n open: controlledOpen,\n onOpenChange,\n placement = \"bottomLeft\",\n className,\n classNames,\n size = \"middle\",\n loading: _loading = false,\n optionRender,\n filterOption = true,\n onSearch,\n dropdownRender,\n clearIcon,\n suffixIcon,\n dropdownMenuProps,\n triggerProps,\n searchProps,\n showSelectionSummary = false,\n selectionSummaryRender,\n showSelectAll = false,\n selectAllRender,\n ...rest\n }: ComboboxProps,\n ref: React.ForwardedRef<HTMLDivElement>\n) => {\n const [initialDefaultValue] = useState(\n defaultValue !== undefined ? defaultValue : multiple ? [] : undefined\n );\n const [value, setValue] = useControlled({\n controlled: controlledValue,\n default: initialDefaultValue,\n name: \"value\",\n });\n\n const [open, setOpen] = useControlledState(\n controlledOpen,\n onOpenChange,\n false\n );\n const [searchValue, setSearchValue] = useState(\"\");\n const cls = useCls();\n\n // Get form context values\n const {\n status: contextStatus,\n // hasFeedback,\n // feedbackIcon,\n } = useContext(FormItemInputContext);\n const contextDisabled = useContext(DisabledContext);\n\n // Merge context values with props\n const mergedStatus = statusProp || contextStatus;\n const disabled = disabledProp || contextDisabled;\n\n const handleValueChange = useCallback(\n (newValue: string | number | Array<string | number>) => {\n setValue(newValue);\n onChange?.(newValue);\n },\n [setValue, onChange]\n );\n\n const handleOptionSelect = useCallback(\n (optionValue: string | number) => {\n if (multiple) {\n const currentValues = Array.isArray(value) ? value : [];\n const newValues = currentValues.includes(optionValue)\n ? currentValues.filter((v) => v !== optionValue)\n : [...currentValues, optionValue];\n handleValueChange(newValues);\n } else {\n handleValueChange(optionValue);\n // onOpenChange?.(false);\n }\n },\n [multiple, value, handleValueChange]\n );\n\n const handleSearchChange = useCallback(\n (newValue: string) => {\n setSearchValue(newValue);\n onSearch?.(newValue);\n },\n [onSearch]\n );\n\n // Check if option is selected\n const isSelected = useCallback(\n (optionValue: string | number) => {\n if (multiple) {\n return Array.isArray(value) && value.includes(optionValue);\n }\n return value === optionValue;\n },\n [multiple, value]\n );\n\n // Filter options based on search\n const filteredOptions = useMemo(() => {\n if (!showSearch || !searchValue) return options;\n\n return options.filter((option) => {\n if (typeof filterOption === \"function\") {\n return filterOption(searchValue, option);\n }\n if (filterOption === false) return true;\n\n const label =\n typeof option.label === \"string\" ? option.label : String(option.value);\n return label.toLowerCase().includes(searchValue.toLowerCase());\n });\n }, [options, showSearch, searchValue, filterOption]);\n\n const handleSelectAll = useCallback(() => {\n if (multiple) {\n const allValues = filteredOptions.map((option) => option.value);\n handleValueChange(allValues);\n }\n }, [multiple, filteredOptions, handleValueChange]);\n\n const handleDeselectAll = useCallback(() => {\n if (multiple) {\n handleValueChange([]);\n }\n }, [multiple, handleValueChange]);\n\n // Convert options to DropdownMenu items\n const dropdownItems: DropdownMenuItemType[] = useMemo(() => {\n return filteredOptions.map((option) => {\n return {\n type: \"item\",\n key: option.value,\n icon: option.icon,\n label: option.label,\n disabled: option.disabled,\n onClick: () => !option.disabled && handleOptionSelect(option.value),\n };\n });\n }, [filteredOptions, handleOptionSelect]);\n\n // Select all component for beforeList\n const selectAllComponent = useMemo(() => {\n if (!showSelectAll || !multiple || filteredOptions.length === 0) {\n return null;\n }\n\n const selectedValues = Array.isArray(value) ? value : [];\n const filteredOptionValues = filteredOptions.map((opt) => opt.value);\n const selectedFromFiltered = selectedValues.filter((val) =>\n filteredOptionValues.includes(val)\n );\n const checked =\n selectedFromFiltered.length === filteredOptions.length &&\n filteredOptions.length > 0;\n const indeterminate =\n selectedFromFiltered.length > 0 &&\n selectedFromFiltered.length < filteredOptions.length;\n\n const selectAllItem: DropdownMenuItemType & { type: \"item\" } = {\n type: \"item\",\n key: \"select_all\",\n label: \"Select All\",\n onClick: () => {\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n },\n };\n\n return (\n <>\n <DropdownMenuItem\n key=\"select_all\"\n item={selectAllItem}\n inCombobox={showSearch}\n selected={checked}\n showCheckbox\n indeterminate={indeterminate}\n renderAsNativeElement\n onSelect={() => {\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n }}\n />\n <DropdownMenuDivider />\n </>\n );\n }, [\n showSelectAll,\n multiple,\n filteredOptions,\n value,\n showSearch,\n handleDeselectAll,\n handleSelectAll,\n ]);\n\n // Prepare trigger data\n const selectedValues = useMemo(() => {\n return Array.isArray(value) ? value : value ? [value] : [];\n }, [value]);\n const selectedOptions = selectedValues\n .map((val) => options.find((opt) => opt.value === val))\n .filter(Boolean);\n\n // Generate display value and prefix for SelectTrigger\n const { displayValue, displayPrefix } = useMemo(() => {\n if (selectedOptions.length === 0) {\n return { displayValue: undefined, displayPrefix: undefined };\n }\n\n if (multiple) {\n const summaryText = `${selectedOptions.length} ${\n selectedOptions.length === 1 ? \"item\" : \"items\"\n } selected`;\n if (showSelectionSummary) {\n if (selectionSummaryRender) {\n return {\n displayValue: selectionSummaryRender(selectedValues),\n displayPrefix: undefined,\n };\n }\n // Default summary with icons\n return {\n displayValue: summaryText,\n // TODO: Create icon component for multiple selection summary\n displayPrefix: undefined,\n };\n }\n // For non-summary multiple selection\n return selectedOptions.length === 1\n ? {\n displayValue: selectedOptions[0].label,\n displayPrefix: selectedOptions[0].icon,\n }\n : {\n displayValue: summaryText,\n displayPrefix: undefined,\n };\n }\n\n // Single selection\n const selectedOption = selectedOptions[0];\n return {\n displayValue: selectedOption?.label,\n displayPrefix: selectedOption?.icon,\n };\n }, [\n selectedOptions,\n multiple,\n showSelectionSummary,\n selectionSummaryRender,\n selectedValues,\n ]);\n\n return (\n <div ref={ref} className={clsx(cls(\"combobox\"), className)} {...rest}>\n <DropdownMenu\n items={dropdownItems}\n open={open}\n onOpenChange={setOpen}\n placement={placement}\n showSearch={showSearch}\n searchProps={{\n placeholder: \"Search options...\",\n onValueChange: handleSearchChange,\n value: searchValue,\n ...searchProps,\n }}\n className={clsx(cls(\"combobox-dropdown\"))}\n classNames={{\n trigger: clsx(cls(\"combobox-trigger-wrapper\")),\n popup: clsx(cls(\"combobox-popup\")),\n item: clsx(cls(\"combobox-option\"), classNames?.option),\n ...classNames,\n }}\n popupMatchTriggerWidth\n keepOpenOnSelect={multiple}\n highlightedItemKey={multiple ? undefined : selectedValues[0]}\n showCheckbox={multiple}\n beforeList={selectAllComponent}\n selectedItemKeys={selectedValues}\n {...dropdownMenuProps}\n >\n <SelectTrigger\n value={displayValue}\n prefix={displayPrefix}\n placeholder={placeholder}\n disabled={disabled}\n status={mergedStatus}\n open={open}\n size={size}\n allowClear={allowClear}\n suffixIcon={suffixIcon}\n clearIcon={clearIcon}\n classNames={{\n trigger: classNames?.trigger,\n ...triggerProps?.classNames,\n }}\n onClear={() => handleValueChange(multiple ? [] : undefined)}\n onOpenChange={setOpen}\n role=\"combobox\"\n {...triggerProps}\n />\n </DropdownMenu>\n </div>\n );\n};\n\nconst MainCombobox = forwardRef(ComboboxInner);\n\nexport const Combobox = Object.assign(MainCombobox, {\n // Add any sub components here if needed\n});\n\nexport default Combobox;\n"],"names":["ComboboxInner","options","controlledValue","defaultValue","onChange","placeholder","disabledProp","statusProp","allowClear","multiple","maxTagCount","showSearch","controlledOpen","onOpenChange","placement","className","classNames","size","_loading","optionRender","filterOption","onSearch","dropdownRender","clearIcon","suffixIcon","dropdownMenuProps","triggerProps","searchProps","showSelectionSummary","selectionSummaryRender","showSelectAll","selectAllRender","rest","ref","initialDefaultValue","useState","value","setValue","useControlled","open","setOpen","useControlledState","searchValue","setSearchValue","cls","useCls","contextStatus","useContext","FormItemInputContext","contextDisabled","DisabledContext","mergedStatus","disabled","handleValueChange","useCallback","newValue","handleOptionSelect","optionValue","currentValues","newValues","v","handleSearchChange","filteredOptions","useMemo","option","handleSelectAll","allValues","handleDeselectAll","dropdownItems","selectAllComponent","selectedValues","filteredOptionValues","opt","selectedFromFiltered","val","checked","indeterminate","jsxs","Fragment","jsx","DropdownMenuItem","DropdownMenuDivider","selectedOptions","displayValue","displayPrefix","summaryText","selectedOption","clsx","DropdownMenu","SelectTrigger","MainCombobox","forwardRef","Combobox"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer components{.ds-combobox{position:relative;display:inline-block;width:100%}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-drag-container{position:relative}.ds-draggable{position:relative;cursor:grab;-webkit-user-select:none;user-select:none;background-color:var(--ds-color-bg-container);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.5rem;margin-bottom:.5rem;display:flex;max-width:100%;gap:.5rem;transition:background-color .2s,border-color .2s,box-shadow .2s}.ds-draggable[data-dragging]{opacity:.5;box-shadow:0 2px 8px #00000026;z-index:1}.ds-draggable[data-disabled]{cursor:not-allowed;opacity:.5;background-color:var(--ds-color-bg-disabled)}.ds-draggable:hover{border-color:var(--ds-color-primary)}.ds-draggable .ds-draggable-indicator{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone{position:relative;width:100%;background-color:var(--ds-color-fill-alter);border:1px dashed var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.75rem;display:flex;align-items:center;justify-content:center;transition:border-color .1s,background-color .1s}.ds-drop-zone[data-disabled=true]{cursor:not-allowed;background-color:var(--ds-color-bg-disabled);border-color:var(--ds-color-border)}.ds-drop-zone[data-dropping][data-valid],.ds-drop-zone[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-drop-zone[data-dragging][data-valid]{border-color:var(--ds-color-primary)}.ds-drop-zone .ds-drop-zone-content{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem}.ds-drop-zone .ds-drop-zone-icon{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone .ds-drop-zone-text{color:var(--ds-color-text-description);font-size:var(--ds-font-size)}.ds-dropzone-value{padding:.75rem;border-radius:var(--ds-border-radius);border-width:1px;border-style:solid;border-color:var(--ds-color-border)}.ds-dropzone-value[data-dragging][data-valid]{border-color:var(--ds-color-primary);border-style:dashed}.ds-dropzone-value[data-dropping][data-valid],.ds-dropzone-value[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-dropzone-value.ds-dropzone-value-multiple{padding:.625rem}.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag{max-width:100%;flex-shrink:0;margin:0}
|
|
1
|
+
.ds-drag-container{position:relative}.ds-draggable{position:relative;cursor:grab;-webkit-user-select:none;user-select:none;background-color:var(--ds-color-bg-container);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.5rem;margin-bottom:.5rem;display:flex;max-width:100%;gap:.5rem;transition:background-color .2s,border-color .2s,box-shadow .2s}.ds-draggable[data-dragging]{opacity:.5;box-shadow:0 2px 8px #00000026;z-index:1}.ds-draggable[data-disabled]{cursor:not-allowed;opacity:.5;background-color:var(--ds-color-bg-disabled)}.ds-draggable:hover{border-color:var(--ds-color-primary)}.ds-draggable .ds-draggable-indicator{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone{position:relative;width:100%;background-color:var(--ds-color-fill-alter);border:1px dashed var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.75rem;display:flex;align-items:center;justify-content:center;transition:border-color .1s,background-color .1s}.ds-drop-zone[data-disabled=true]{cursor:not-allowed;background-color:var(--ds-color-bg-disabled);border-color:var(--ds-color-border)}.ds-drop-zone[data-dropping][data-valid],.ds-drop-zone[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-drop-zone[data-dragging][data-valid]{border-color:var(--ds-color-primary)}.ds-drop-zone .ds-drop-zone-content{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem}.ds-drop-zone .ds-drop-zone-icon{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone .ds-drop-zone-text{color:var(--ds-color-text-description);font-size:var(--ds-font-size)}.ds-dropzone-value{padding:.75rem;border-radius:var(--ds-border-radius);border-width:1px;border-style:solid;border-color:var(--ds-color-border)}.ds-dropzone-value[data-dragging][data-valid]{border-color:var(--ds-color-primary);border-style:dashed}.ds-dropzone-value[data-dropping][data-valid],.ds-dropzone-value[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-dropzone-value.ds-dropzone-value-multiple{padding:.625rem}.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag{max-width:100%;flex-shrink:0;margin:0}.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag .ds-tag-close-icon{flex-shrink:0}.ds-dropzone-value-icon{color:var(--ds-color-icon);font-size:1.25rem;flex-shrink:0}.ds-dropzone-value-icon.ds-tag-icon{font-size:1rem}.ds-dropzone-value-text{color:var(--ds-color-text-secondary)}
|