infinity-ui-elements 1.8.3 → 1.8.4
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/Dropdown/DropdownMenu.d.ts +3 -2
- package/dist/components/Dropdown/DropdownMenu.d.ts.map +1 -1
- package/dist/components/SearchableDropdown/SearchableDropdown.d.ts +4 -1
- package/dist/components/SearchableDropdown/SearchableDropdown.d.ts.map +1 -1
- package/dist/components/SearchableDropdown/SearchableDropdown.stories.d.ts +6 -0
- package/dist/components/SearchableDropdown/SearchableDropdown.stories.d.ts.map +1 -1
- package/dist/index.esm.js +48 -11
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +48 -11
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
export interface DropdownMenuItem {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
value: string | number;
|
|
4
|
+
label: string;
|
|
5
5
|
description?: string;
|
|
6
6
|
leadingIcon?: React.ReactNode;
|
|
7
7
|
trailingIcon?: React.ReactNode;
|
|
8
8
|
isDisabled?: boolean;
|
|
9
9
|
onClick?: () => void;
|
|
10
|
+
variant?: "default" | "bordered" | "primary" | "negative";
|
|
10
11
|
}
|
|
11
12
|
export interface DropdownMenuProps {
|
|
12
13
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,gBAAgB;IAC/B,
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC;CAC3D;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,YAAY,0FA8LxB,CAAC"}
|
|
@@ -2,7 +2,6 @@ import * as React from "react";
|
|
|
2
2
|
import { type TextFieldProps } from "../TextField";
|
|
3
3
|
import { type DropdownMenuItem } from "../Dropdown/DropdownMenu";
|
|
4
4
|
export interface SearchableDropdownItem extends DropdownMenuItem {
|
|
5
|
-
value?: string;
|
|
6
5
|
[key: string]: any;
|
|
7
6
|
}
|
|
8
7
|
export interface SearchableDropdownProps extends Omit<TextFieldProps, "onChange" | "value"> {
|
|
@@ -102,6 +101,10 @@ export interface SearchableDropdownProps extends Omit<TextFieldProps, "onChange"
|
|
|
102
101
|
* Show dropdown on focus
|
|
103
102
|
*/
|
|
104
103
|
showOnFocus?: boolean;
|
|
104
|
+
/**
|
|
105
|
+
* Show "Add New" option when search doesn't match any items
|
|
106
|
+
*/
|
|
107
|
+
showAddNew?: boolean;
|
|
105
108
|
}
|
|
106
109
|
export declare const SearchableDropdown: React.ForwardRefExoticComponent<SearchableDropdownProps & React.RefAttributes<HTMLInputElement>>;
|
|
107
110
|
//# sourceMappingURL=SearchableDropdown.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchableDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/SearchableDropdown/SearchableDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE/E,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,
|
|
1
|
+
{"version":3,"file":"SearchableDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/SearchableDropdown/SearchableDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE/E,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACzC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1E;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAaD,eAAO,MAAM,kBAAkB,kGA8Q9B,CAAC"}
|
|
@@ -34,6 +34,7 @@ declare const meta: {
|
|
|
34
34
|
dropdownClassName?: string | undefined;
|
|
35
35
|
minSearchLength?: number | undefined;
|
|
36
36
|
showOnFocus?: boolean | undefined;
|
|
37
|
+
showAddNew?: boolean | undefined;
|
|
37
38
|
size?: "small" | "medium" | "large" | undefined;
|
|
38
39
|
dangerouslySetInnerHTML?: {
|
|
39
40
|
__html: string | TrustedHTML;
|
|
@@ -382,6 +383,10 @@ declare const meta: {
|
|
|
382
383
|
control: "boolean";
|
|
383
384
|
description: string;
|
|
384
385
|
};
|
|
386
|
+
showAddNew: {
|
|
387
|
+
control: "boolean";
|
|
388
|
+
description: string;
|
|
389
|
+
};
|
|
385
390
|
};
|
|
386
391
|
};
|
|
387
392
|
export default meta;
|
|
@@ -405,4 +410,5 @@ export declare const ControlledExample: Story;
|
|
|
405
410
|
export declare const WithCustomFilter: Story;
|
|
406
411
|
export declare const WithFooterActions: Story;
|
|
407
412
|
export declare const MultipleSearchableDropdowns: Story;
|
|
413
|
+
export declare const WithAddNew: Story;
|
|
408
414
|
//# sourceMappingURL=SearchableDropdown.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchableDropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/SearchableDropdown/SearchableDropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"SearchableDropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/SearchableDropdown/SearchableDropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDiC,CAAC;AAE5C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA8LnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAiC/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAmB/B,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KA4BzC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA+BxB,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1868,10 +1868,10 @@ const DropdownMenu = React.forwardRef(({ items = [], customContent, sectionHeadi
|
|
|
1868
1868
|
if (isEmpty || items.length === 0) {
|
|
1869
1869
|
return (jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-6 text-center", children: [emptyIcon || (jsx(Search, { className: "w-12 h-12 text-surface-ink-neutral-muted mb-4" })), jsx(Text, { as: "h3", variant: "body", size: "small", weight: "semibold", className: "text-surface-ink-neutral-normal mb-2", children: emptyTitle }), jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", className: "text-surface-ink-neutral-muted mb-3", children: emptyDescription }), emptyLinkText && (jsx(Link, { type: "anchor", color: "primary", size: "small", onClick: onEmptyLinkClick, children: emptyLinkText }))] }));
|
|
1870
1870
|
}
|
|
1871
|
-
return (jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "flex flex-col gap-1", children: items.map((item, index) => (jsx(ListItem, { title: item.
|
|
1871
|
+
return (jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "flex flex-col gap-1", children: items.map((item, index) => (jsx(ListItem, { title: item.label, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, variant: item.variant, onClick: () => {
|
|
1872
1872
|
item.onClick?.();
|
|
1873
1873
|
onClose?.();
|
|
1874
|
-
}, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.
|
|
1874
|
+
}, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.value))) })] }));
|
|
1875
1875
|
};
|
|
1876
1876
|
const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
|
|
1877
1877
|
const footerVisible = showFooter ?? !disableFooter;
|
|
@@ -2885,10 +2885,10 @@ TextField.displayName = "TextField";
|
|
|
2885
2885
|
|
|
2886
2886
|
const defaultFilter = (item, query) => {
|
|
2887
2887
|
const searchQuery = query.toLowerCase();
|
|
2888
|
-
return (item.
|
|
2888
|
+
return (item.label.toLowerCase().includes(searchQuery) ||
|
|
2889
2889
|
(item.description?.toLowerCase().includes(searchQuery) ?? false));
|
|
2890
2890
|
};
|
|
2891
|
-
const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHeading, isLoading = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText
|
|
2891
|
+
const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHeading, isLoading = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText, secondaryButtonText, onPrimaryClick, onSecondaryClick, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, showAddNew = false, containerClassName, ...textFieldProps }, ref) => {
|
|
2892
2892
|
const [uncontrolledSearchValue, setUncontrolledSearchValue] = React.useState(defaultSearchValue);
|
|
2893
2893
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
2894
2894
|
const [focusedIndex, setFocusedIndex] = React.useState(-1);
|
|
@@ -2937,7 +2937,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
|
|
|
2937
2937
|
const handleItemSelect = (item) => {
|
|
2938
2938
|
onItemSelect?.(item);
|
|
2939
2939
|
if (controlledSearchValue === undefined) {
|
|
2940
|
-
setUncontrolledSearchValue(item.
|
|
2940
|
+
setUncontrolledSearchValue(item.label);
|
|
2941
2941
|
}
|
|
2942
2942
|
setIsOpen(false);
|
|
2943
2943
|
inputRef.current?.focus();
|
|
@@ -2948,6 +2948,40 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
|
|
|
2948
2948
|
return items;
|
|
2949
2949
|
return items.filter((item) => filterFunction(item, searchValue));
|
|
2950
2950
|
}, [items, searchValue, filterFunction]);
|
|
2951
|
+
// Add "Add New" option if showAddNew is true and no items match
|
|
2952
|
+
const itemsWithAddNew = React.useMemo(() => {
|
|
2953
|
+
if (!showAddNew || !searchValue || filteredItems.length > 0) {
|
|
2954
|
+
return filteredItems;
|
|
2955
|
+
}
|
|
2956
|
+
const addNewItem = {
|
|
2957
|
+
value: searchValue,
|
|
2958
|
+
label: `+ Add ${searchValue}`,
|
|
2959
|
+
variant: "primary",
|
|
2960
|
+
onClick: () => {
|
|
2961
|
+
const newItem = {
|
|
2962
|
+
value: searchValue,
|
|
2963
|
+
label: searchValue,
|
|
2964
|
+
};
|
|
2965
|
+
onItemSelect?.(newItem);
|
|
2966
|
+
if (controlledSearchValue === undefined) {
|
|
2967
|
+
setUncontrolledSearchValue(searchValue);
|
|
2968
|
+
}
|
|
2969
|
+
setIsOpen(false);
|
|
2970
|
+
inputRef.current?.focus();
|
|
2971
|
+
},
|
|
2972
|
+
};
|
|
2973
|
+
return [addNewItem];
|
|
2974
|
+
}, [
|
|
2975
|
+
showAddNew,
|
|
2976
|
+
searchValue,
|
|
2977
|
+
filteredItems,
|
|
2978
|
+
onItemSelect,
|
|
2979
|
+
controlledSearchValue,
|
|
2980
|
+
]);
|
|
2981
|
+
// Reset focused index when items change
|
|
2982
|
+
React.useEffect(() => {
|
|
2983
|
+
setFocusedIndex(-1);
|
|
2984
|
+
}, [itemsWithAddNew.length]);
|
|
2951
2985
|
// Close dropdown when clicking outside
|
|
2952
2986
|
React.useEffect(() => {
|
|
2953
2987
|
const handleClickOutside = (event) => {
|
|
@@ -2977,7 +3011,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
|
|
|
2977
3011
|
switch (e.key) {
|
|
2978
3012
|
case "ArrowDown":
|
|
2979
3013
|
e.preventDefault();
|
|
2980
|
-
setFocusedIndex((prev) => prev <
|
|
3014
|
+
setFocusedIndex((prev) => prev < itemsWithAddNew.length - 1 ? prev + 1 : prev);
|
|
2981
3015
|
break;
|
|
2982
3016
|
case "ArrowUp":
|
|
2983
3017
|
e.preventDefault();
|
|
@@ -2985,8 +3019,8 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
|
|
|
2985
3019
|
break;
|
|
2986
3020
|
case "Enter":
|
|
2987
3021
|
e.preventDefault();
|
|
2988
|
-
if (focusedIndex >= 0 &&
|
|
2989
|
-
handleItemSelect(
|
|
3022
|
+
if (focusedIndex >= 0 && itemsWithAddNew[focusedIndex]) {
|
|
3023
|
+
handleItemSelect(itemsWithAddNew[focusedIndex]);
|
|
2990
3024
|
}
|
|
2991
3025
|
break;
|
|
2992
3026
|
case "Escape":
|
|
@@ -2997,9 +3031,10 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
|
|
|
2997
3031
|
}
|
|
2998
3032
|
};
|
|
2999
3033
|
// Update items with onClick handlers that call handleItemSelect
|
|
3000
|
-
|
|
3034
|
+
// Only add onClick if it doesn't already exist (for Add New items)
|
|
3035
|
+
const itemsWithHandlers = itemsWithAddNew.map((item) => ({
|
|
3001
3036
|
...item,
|
|
3002
|
-
onClick: () => handleItemSelect(item),
|
|
3037
|
+
onClick: item.onClick || (() => handleItemSelect(item)),
|
|
3003
3038
|
}));
|
|
3004
3039
|
const showDropdown = isOpen && searchValue.length >= minSearchLength;
|
|
3005
3040
|
const dropdownMenu = showDropdown && (jsx("div", { ref: menuRef, style: {
|
|
@@ -3008,7 +3043,9 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
|
|
|
3008
3043
|
left: `${position.left}px`,
|
|
3009
3044
|
width: dropdownWidth === "full" ? `${position.width}px` : "auto",
|
|
3010
3045
|
zIndex: 9999,
|
|
3011
|
-
}, children: jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty:
|
|
3046
|
+
}, children: jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: itemsWithAddNew.length === 0 && !showAddNew, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: (primaryButtonText || secondaryButtonText) && !disableFooter
|
|
3047
|
+
? true
|
|
3048
|
+
: false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: dropdownWidth === "full" ? "full" : "auto" }) }));
|
|
3012
3049
|
return (jsxs(Fragment, { children: [jsx("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps }) }), typeof document !== "undefined" &&
|
|
3013
3050
|
dropdownMenu &&
|
|
3014
3051
|
createPortal(dropdownMenu, document.body)] }));
|