@getgreenline/blaze-ui 1.0.4-5.01-beta → 1.0.4-5.02-beta
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.
|
@@ -11,7 +11,14 @@ export interface MultiSearchSelectProps extends Omit<React.ComponentProps<"butto
|
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
searchPlaceholder?: string;
|
|
13
13
|
emptyMessage?: string;
|
|
14
|
+
maxOptions?: number;
|
|
15
|
+
onSearchFunction?: (searchTerm: string) => Promise<MultiSearchSelectOption[]> | MultiSearchSelectOption[];
|
|
16
|
+
minSearchChars?: number;
|
|
17
|
+
searchDebounceMs?: number;
|
|
18
|
+
maxVisibleChips?: number;
|
|
19
|
+
selectedCountLabel?: string;
|
|
20
|
+
selectedCountFormatter?: (count: number) => string;
|
|
14
21
|
}
|
|
15
|
-
declare function MultiSearchSelect({ className, options, value, onValueChange, placeholder, searchPlaceholder, emptyMessage, disabled, ...props }: MultiSearchSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
declare function MultiSearchSelect({ className, options, value, onValueChange, placeholder, searchPlaceholder, emptyMessage, maxOptions, onSearchFunction, minSearchChars, searchDebounceMs, maxVisibleChips, selectedCountLabel, selectedCountFormatter, disabled, ...props }: MultiSearchSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
16
23
|
export { MultiSearchSelect };
|
|
17
24
|
//# sourceMappingURL=multi-search-select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-search-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-search-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B,OAAO,GAAG,UAAU,CACrB;IACC,OAAO,EAAE,uBAAuB,EAAE,CAAA;IAClC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"multi-search-select.d.ts","sourceRoot":"","sources":["../../src/components/multi-search-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B,OAAO,GAAG,UAAU,CACrB;IACC,OAAO,EAAE,uBAAuB,EAAE,CAAA;IAClC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB,CAAC,EAAE,CACjB,UAAU,EAAE,MAAM,KACf,OAAO,CAAC,uBAAuB,EAAE,CAAC,GAAG,uBAAuB,EAAE,CAAA;IACnE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACnD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAO,EACP,KAAK,EACL,aAAa,EACb,WAAiC,EACjC,iBAA+B,EAC/B,YAAiC,EACjC,UAAe,EACf,gBAAgB,EAChB,cAAkB,EAClB,gBAAsB,EACtB,eAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAiRxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
|
|
@@ -1,20 +1,103 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
4
4
|
import { XIcon, ChevronDownIcon, SearchIcon, CheckIcon } from 'lucide-react';
|
|
5
5
|
import { Badge } from './badge.js';
|
|
6
6
|
import { cn } from '../lib/utils.js';
|
|
7
7
|
|
|
8
|
-
function MultiSearchSelect({ className, options, value, onValueChange, placeholder = "Select options...", searchPlaceholder = "Search...", emptyMessage = "No options found", disabled, ...props }) {
|
|
8
|
+
function MultiSearchSelect({ className, options, value, onValueChange, placeholder = "Select options...", searchPlaceholder = "Search...", emptyMessage = "No options found", maxOptions = 50, onSearchFunction, minSearchChars = 3, searchDebounceMs = 800, maxVisibleChips = 3, selectedCountLabel, selectedCountFormatter, disabled, ...props }) {
|
|
9
9
|
const [open, setOpen] = React.useState(false);
|
|
10
10
|
const [search, setSearch] = React.useState("");
|
|
11
|
-
const
|
|
11
|
+
const [remoteOptions, setRemoteOptions] = React.useState([]);
|
|
12
|
+
const [isSearching, setIsSearching] = React.useState(false);
|
|
13
|
+
const normalizedSearch = search.trim();
|
|
14
|
+
React.useEffect(() => {
|
|
15
|
+
if (!onSearchFunction)
|
|
16
|
+
return;
|
|
17
|
+
if (normalizedSearch.length < minSearchChars) {
|
|
18
|
+
setRemoteOptions([]);
|
|
19
|
+
setIsSearching(false);
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
let isCancelled = false;
|
|
23
|
+
setIsSearching(true);
|
|
24
|
+
const timerId = window.setTimeout(async () => {
|
|
25
|
+
try {
|
|
26
|
+
const response = await onSearchFunction(normalizedSearch);
|
|
27
|
+
if (!isCancelled) {
|
|
28
|
+
setRemoteOptions(response ?? []);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
catch {
|
|
32
|
+
if (!isCancelled) {
|
|
33
|
+
setRemoteOptions([]);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
finally {
|
|
37
|
+
if (!isCancelled) {
|
|
38
|
+
setIsSearching(false);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}, searchDebounceMs);
|
|
42
|
+
return () => {
|
|
43
|
+
isCancelled = true;
|
|
44
|
+
window.clearTimeout(timerId);
|
|
45
|
+
};
|
|
46
|
+
}, [minSearchChars, normalizedSearch, onSearchFunction, searchDebounceMs]);
|
|
47
|
+
const allKnownOptions = React.useMemo(() => {
|
|
48
|
+
const seen = new Map();
|
|
49
|
+
for (const option of options) {
|
|
50
|
+
seen.set(option.value, option);
|
|
51
|
+
}
|
|
52
|
+
for (const option of remoteOptions) {
|
|
53
|
+
seen.set(option.value, option);
|
|
54
|
+
}
|
|
55
|
+
return Array.from(seen.values());
|
|
56
|
+
}, [options, remoteOptions]);
|
|
57
|
+
const selectedOptions = React.useMemo(() => {
|
|
58
|
+
const optionByValue = new Map(allKnownOptions.map((option) => [option.value, option]));
|
|
59
|
+
return value.map((selectedValue) => {
|
|
60
|
+
const knownOption = optionByValue.get(selectedValue);
|
|
61
|
+
if (knownOption)
|
|
62
|
+
return knownOption;
|
|
63
|
+
return {
|
|
64
|
+
value: selectedValue,
|
|
65
|
+
label: selectedValue,
|
|
66
|
+
};
|
|
67
|
+
});
|
|
68
|
+
}, [allKnownOptions, value]);
|
|
69
|
+
const visibleSelectedOptions = React.useMemo(() => selectedOptions.slice(0, maxVisibleChips), [selectedOptions, maxVisibleChips]);
|
|
70
|
+
const hiddenSelectedCount = Math.max(selectedOptions.length - maxVisibleChips, 0);
|
|
71
|
+
const selectedCountText = React.useMemo(() => {
|
|
72
|
+
if (selectedCountFormatter) {
|
|
73
|
+
return selectedCountFormatter(selectedOptions.length);
|
|
74
|
+
}
|
|
75
|
+
if (selectedCountLabel?.trim()) {
|
|
76
|
+
return `${selectedOptions.length} ${selectedCountLabel.trim()}`;
|
|
77
|
+
}
|
|
78
|
+
return `${selectedOptions.length} items selected`;
|
|
79
|
+
}, [selectedCountFormatter, selectedCountLabel, selectedOptions.length]);
|
|
12
80
|
const filteredOptions = React.useMemo(() => {
|
|
13
|
-
|
|
81
|
+
if (onSearchFunction) {
|
|
82
|
+
if (normalizedSearch.length < minSearchChars) {
|
|
83
|
+
return options.slice(0, maxOptions);
|
|
84
|
+
}
|
|
85
|
+
return remoteOptions.slice(0, maxOptions);
|
|
86
|
+
}
|
|
87
|
+
const query = normalizedSearch.toLowerCase();
|
|
14
88
|
if (!query)
|
|
15
|
-
return options;
|
|
16
|
-
return options
|
|
17
|
-
|
|
89
|
+
return options.slice(0, maxOptions);
|
|
90
|
+
return options
|
|
91
|
+
.filter((option) => option.label.toLowerCase().includes(query))
|
|
92
|
+
.slice(0, maxOptions);
|
|
93
|
+
}, [
|
|
94
|
+
maxOptions,
|
|
95
|
+
minSearchChars,
|
|
96
|
+
normalizedSearch,
|
|
97
|
+
onSearchFunction,
|
|
98
|
+
options,
|
|
99
|
+
remoteOptions,
|
|
100
|
+
]);
|
|
18
101
|
const toggleValue = React.useCallback((optionValue) => {
|
|
19
102
|
const nextValue = value.includes(optionValue)
|
|
20
103
|
? value.filter((currentValue) => currentValue !== optionValue)
|
|
@@ -29,12 +112,14 @@ function MultiSearchSelect({ className, options, value, onValueChange, placehold
|
|
|
29
112
|
setOpen(nextOpen);
|
|
30
113
|
if (!nextOpen)
|
|
31
114
|
setSearch("");
|
|
32
|
-
}, children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", "data-slot": "multi-search-select-trigger", disabled: disabled, className: cn("tw:!flex tw:!w-full tw:!min-h-9 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!shadow-xs tw:!outline-none", "focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px]", "disabled:tw:!cursor-not-allowed disabled:tw:!opacity-50", className), ...props, children: [jsx("div", { className: "tw:!flex tw:!min-w-0 tw:!flex-1 tw:!flex-wrap tw:!items-center tw:!gap-1.5", children: selectedOptions.length === 0 ? (jsx("span", { className: "tw:!text-muted-foreground", children: placeholder })) : (
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
115
|
+
}, children: [jsx(PopoverPrimitive.Trigger, { asChild: true, children: jsxs("button", { type: "button", "data-slot": "multi-search-select-trigger", disabled: disabled, className: cn("tw:!flex tw:!w-full tw:!min-h-9 tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!shadow-xs tw:!outline-none", "focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px]", "disabled:tw:!cursor-not-allowed disabled:tw:!opacity-50", className), ...props, children: [jsx("div", { className: "tw:!flex tw:!min-w-0 tw:!flex-1 tw:!flex-wrap tw:!items-center tw:!gap-1.5", children: selectedOptions.length === 0 ? (jsx("span", { className: "tw:!text-muted-foreground", children: placeholder })) : (jsxs(Fragment, { children: [visibleSelectedOptions.map((option) => (jsxs(Badge, { variant: "secondary", className: "tw:!max-w-full tw:!pr-1", children: [jsx("span", { className: "tw:!max-w-[140px] tw:!truncate", children: option.label }), jsx("span", { role: "button", tabIndex: -1, "aria-label": `Remove ${option.label}`, onClick: (event) => removeValue(option.value, event), className: "tw:!ml-1 tw:!inline-flex tw:!items-center tw:!justify-center", children: jsx(XIcon, { className: "tw:!size-3" }) })] }, option.value))), hiddenSelectedCount > 0 && (jsx("span", { className: "tw:!text-sm tw:!text-muted-foreground tw:!truncate", children: selectedCountText }))] })) }), jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!opacity-50" })] }) }), jsx(PopoverPrimitive.Portal, { children: jsxs(PopoverPrimitive.Content, { "data-slot": "multi-search-select-content", align: "start", sideOffset: 4, className: "tw:!z-50 tw:!w-[var(--radix-popover-trigger-width)] tw:!rounded-md tw:!border tw:!bg-popover tw:!text-popover-foreground tw:!shadow-md tw:!outline-none", children: [jsxs("div", { className: "tw:!flex tw:!items-center tw:!gap-2 tw:!border-b tw:!px-3", children: [jsx(SearchIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("input", { type: "text", value: search, onChange: (event) => setSearch(event.target.value), placeholder: searchPlaceholder, className: "tw:!h-9 tw:!w-full tw:!bg-transparent tw:!text-[14px] tw:!outline-none placeholder:tw:!text-muted-foreground" })] }), jsxs("div", { className: "tw:!max-h-72 tw:!overflow-y-auto tw:!p-1", children: [onSearchFunction &&
|
|
116
|
+
normalizedSearch.length > 0 &&
|
|
117
|
+
normalizedSearch.length < minSearchChars ? (jsxs("div", { className: "tw:!px-2 tw:!py-2 tw:!text-[14px] tw:!text-muted-foreground", children: ["Type at least ", minSearchChars, " characters to search"] })) : null, isSearching ? (jsx("div", { className: "tw:!px-2 tw:!py-2 tw:!text-[14px] tw:!text-muted-foreground", children: "Searching..." })) : null, !isSearching && filteredOptions.length === 0 ? (jsx("div", { className: "tw:!px-2 tw:!py-2 tw:!text-[14px] tw:!text-muted-foreground", children: emptyMessage })) : !isSearching ? (filteredOptions.map((option) => {
|
|
118
|
+
const isSelected = value.includes(option.value);
|
|
119
|
+
return (jsxs("button", { type: "button", disabled: option.disabled, onClick: () => toggleValue(option.value), className: cn("tw:!flex tw:!w-full tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-left tw:!text-[14px]", "hover:tw:!bg-accent hover:tw:!text-accent-foreground", option.disabled &&
|
|
120
|
+
"tw:!cursor-not-allowed tw:!opacity-50 hover:tw:!bg-transparent hover:tw:!text-foreground"), children: [jsx("span", { className: cn("tw:!inline-flex tw:!size-4 tw:!items-center tw:!justify-center tw:!rounded-[4px] tw:!border tw:!border-border", isSelected &&
|
|
121
|
+
"tw:!border-primary tw:!bg-primary tw:!text-primary-foreground"), children: isSelected ? jsx(CheckIcon, { className: "tw:!size-3" }) : null }), jsx("span", { className: "tw:!min-w-0 tw:!flex-1 tw:!truncate", children: option.label })] }, option.value));
|
|
122
|
+
})) : null] })] }) })] }));
|
|
38
123
|
}
|
|
39
124
|
|
|
40
125
|
export { MultiSearchSelect };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getgreenline/blaze-ui",
|
|
3
|
-
"version": "1.0.45.
|
|
3
|
+
"version": "1.0.45.02-beta",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@base-ui/react": "^1.4.1",
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
"rollup": "^4.60.3",
|
|
66
66
|
"tailwindcss": "^4.2.4",
|
|
67
67
|
"typescript": "^6.0.3",
|
|
68
|
-
"@workspace/
|
|
69
|
-
"@workspace/
|
|
68
|
+
"@workspace/typescript-config": "0.0.0",
|
|
69
|
+
"@workspace/eslint-config": "0.0.0"
|
|
70
70
|
},
|
|
71
71
|
"main": "./dist/index.js",
|
|
72
72
|
"module": "./dist/index.js",
|