akeyless-client-commons 1.0.9 → 1.0.11

package/dist/components/index.js

@@ -3651,7 +3651,7 @@ function useDebounce(value, delay) {
     return debouncedValue;
 }
 var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
-    var value = param.value, onChange = param.onChange, placeholder = param.placeholder, tmp = param.defaultOptions, arrayDefaultOptions = tmp === void 0 ? [] : tmp, arrayOptions = param.options, delay = param.delay, onSearch = param.onSearch, onSearchSync = param.onSearchSync, loadingIndicator = param.loadingIndicator, emptyIndicator = param.emptyIndicator, _param_maxSelected = param.maxSelected, maxSelected = _param_maxSelected === void 0 ? Number.MAX_SAFE_INTEGER : _param_maxSelected, onMaxSelected = param.onMaxSelected, _param_hidePlaceholderWhenSelected = param.hidePlaceholderWhenSelected, hidePlaceholderWhenSelected = _param_hidePlaceholderWhenSelected === void 0 ? true : _param_hidePlaceholderWhenSelected, disabled = param.disabled, groupBy = param.groupBy, className = param.className, badgeClassName = param.badgeClassName, _param_selectFirstItem = param.selectFirstItem, selectFirstItem = _param_selectFirstItem === void 0 ? true : _param_selectFirstItem, _param_creatable = param.creatable, creatable = _param_creatable === void 0 ? false : _param_creatable, _param_triggerSearchOnFocus = param.triggerSearchOnFocus, triggerSearchOnFocus = _param_triggerSearchOnFocus === void 0 ? true : _param_triggerSearchOnFocus, commandProps = param.commandProps, inputProps = param.inputProps, _param_hideClearAllButton = param.hideClearAllButton, hideClearAllButton = _param_hideClearAllButton === void 0 ? false : _param_hideClearAllButton, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, emptyIndicatorClassName = param.emptyIndicatorClassName, _param_unremovableOptions = param.unremovableOptions, unremovableOptions = _param_unremovableOptions === void 0 ? [] : _param_unremovableOptions, name = param.name, _param_dropdownContainerClassName = param.dropdownContainerClassName, dropdownContainerClassName = _param_dropdownContainerClassName === void 0 ? "" : _param_dropdownContainerClassName;
+    var value = param.value, onChange = param.onChange, placeholder = param.placeholder, tmp = param.defaultOptions, arrayDefaultOptions = tmp === void 0 ? [] : tmp, arrayOptions = param.options, delay = param.delay, onSearch = param.onSearch, onSearchSync = param.onSearchSync, loadingIndicator = param.loadingIndicator, emptyIndicator = param.emptyIndicator, _param_maxSelected = param.maxSelected, maxSelected = _param_maxSelected === void 0 ? Number.MAX_SAFE_INTEGER : _param_maxSelected, onMaxSelected = param.onMaxSelected, _param_hidePlaceholderWhenSelected = param.hidePlaceholderWhenSelected, hidePlaceholderWhenSelected = _param_hidePlaceholderWhenSelected === void 0 ? true : _param_hidePlaceholderWhenSelected, disabled = param.disabled, groupBy = param.groupBy, className = param.className, badgeClassName = param.badgeClassName, _param_selectFirstItem = param.selectFirstItem, selectFirstItem = _param_selectFirstItem === void 0 ? true : _param_selectFirstItem, createNewOptionLabel = param.createNewOptionLabel, _param_triggerSearchOnFocus = param.triggerSearchOnFocus, triggerSearchOnFocus = _param_triggerSearchOnFocus === void 0 ? true : _param_triggerSearchOnFocus, commandProps = param.commandProps, inputProps = param.inputProps, _param_hideClearAllButton = param.hideClearAllButton, hideClearAllButton = _param_hideClearAllButton === void 0 ? false : _param_hideClearAllButton, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, emptyIndicatorClassName = param.emptyIndicatorClassName, _param_unremovableOptions = param.unremovableOptions, unremovableOptions = _param_unremovableOptions === void 0 ? [] : _param_unremovableOptions, name = param.name, _param_dropdownContainerClassName = param.dropdownContainerClassName, dropdownContainerClassName = _param_dropdownContainerClassName === void 0 ? "" : _param_dropdownContainerClassName;
     var _containerRef_current;
     var _React9_useState = _sliced_to_array(React9.useState(false), 2), isLoading = _React9_useState[0], setIsLoading = _React9_useState[1];
     var _useFloating = useFloating({
@@ -3895,7 +3895,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         refs
     ]);
     var CreatableItem = function() {
-        if (!creatable) return void 0;
+        if (!createNewOptionLabel) return void 0;
         if (isOptionsExist(options, [
             {
                 value: inputValue,
@@ -3928,7 +3928,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
                 setSelected(newOptions);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newOptions);
             },
-            children: 'Create "'.concat(inputValue, '"')
+            children: "".concat(createNewOptionLabel, ' "').concat(inputValue, '"')
         });
         if (!onSearch && inputValue.length > 0) {
             return Item;
@@ -3940,7 +3940,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
     };
     var EmptyItem = (0, import_react5.useCallback)(function() {
         if (!emptyIndicator) return void 0;
-        if (onSearch && !creatable && Object.keys(options).length === 0) {
+        if (onSearch && !createNewOptionLabel && Object.keys(options).length === 0) {
             return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CommandItem, {
                 className: "",
                 value: "-",
@@ -3953,7 +3953,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
             children: emptyIndicator
         });
     }, [
-        creatable,
+        createNewOptionLabel,
         emptyIndicator,
         onSearch,
         options,
@@ -3969,14 +3969,14 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         if (commandProps === null || commandProps === void 0 ? void 0 : commandProps.filter) {
             return commandProps.filter;
         }
-        if (creatable) {
+        if (createNewOptionLabel) {
             return function(value2, search) {
                 return value2.toLowerCase().includes(search.toLowerCase()) ? 1 : -1;
             };
         }
         return void 0;
     }, [
-        creatable,
+        createNewOptionLabel,
         commandProps === null || commandProps === void 0 ? void 0 : commandProps.filter
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Command, _object_spread_props(_object_spread({}, commandProps), {
@@ -4213,19 +4213,36 @@ var import_lucide_react4 = require("lucide-react");
 var import_react6 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function SearchSelect(param) {
-    var options = param.options, name = param.name, _param_selectPlaceholder = param.selectPlaceholder, selectPlaceholder = _param_selectPlaceholder === void 0 ? "Select" : _param_selectPlaceholder, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, _param_searchPlaceholder = param.searchPlaceholder, searchPlaceholder = _param_searchPlaceholder === void 0 ? "Search" : _param_searchPlaceholder, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, notFoundLabelClassName = param.notFoundLabelClassName, elementClassName = param.elementClassName, searchClassName = param.searchClassName, selectButtonClassName = param.selectButtonClassName, value = param.value, disabled = param.disabled, onChange = param.onChange, direction = param.direction;
+    var options = param.options, name = param.name, _param_selectPlaceholder = param.selectPlaceholder, selectPlaceholder = _param_selectPlaceholder === void 0 ? "Select" : _param_selectPlaceholder, defaultValue = param.defaultValue, _param_searchPlaceholder = param.searchPlaceholder, searchPlaceholder = _param_searchPlaceholder === void 0 ? "Search" : _param_searchPlaceholder, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, notFoundLabel = param.notFoundLabel, notFoundLabelClassName = param.notFoundLabelClassName, elementClassName = param.elementClassName, searchClassName = param.searchClassName, selectButtonClassName = param.selectButtonClassName, value = param.value, disabled = param.disabled, onChange = param.onChange, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel;
     var id = (0, import_react6.useId)();
     var _ref = _sliced_to_array((0, import_react6.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
     var _ref1;
     var _ref2 = _sliced_to_array((0, import_react6.useState)((_ref1 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref1 !== void 0 ? _ref1 : ""), 2), selectedValue = _ref2[0], setSelectedValue = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react6.useState)(""), 2), searchQuery = _ref3[0], setSearchQuery = _ref3[1];
+    var _ref4 = _sliced_to_array((0, import_react6.useState)([]), 2), newOptions = _ref4[0], setNewOptions = _ref4[1];
+    var allOptions = (0, import_react6.useMemo)(function() {
+        return _to_consumable_array(options).concat(_to_consumable_array(newOptions));
+    }, [
+        options,
+        newOptions
+    ]);
+    var filteredOptions = (0, import_react6.useMemo)(function() {
+        if (!searchQuery) return allOptions;
+        return allOptions.filter(function(option) {
+            return option.label.toLowerCase().includes(searchQuery.toLowerCase());
+        });
+    }, [
+        allOptions,
+        searchQuery
+    ]);
     var selectLabel = (0, import_react6.useMemo)(function() {
-        var _options_find;
-        return selectedValue ? (_options_find = options.find(function(item) {
+        var _allOptions_find;
+        return selectedValue ? (_allOptions_find = allOptions.find(function(item) {
             return item.value === selectedValue;
-        })) === null || _options_find === void 0 ? void 0 : _options_find.label : selectPlaceholder;
+        })) === null || _allOptions_find === void 0 ? void 0 : _allOptions_find.label : selectPlaceholder;
     }, [
         selectedValue,
-        options,
+        allOptions,
         selectPlaceholder
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", {
@@ -4236,7 +4253,10 @@ function SearchSelect(param) {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Popover, {
                 open: open,
-                onOpenChange: setOpen,
+                onOpenChange: function(isOpen) {
+                    setOpen(isOpen);
+                    if (!isOpen) setSearchQuery("");
+                },
                 children: [
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverTrigger, {
                         asChild: true,
@@ -4270,37 +4290,57 @@ function SearchSelect(param) {
                                         direction: direction
                                     },
                                     className: cn(searchClassName),
-                                    placeholder: searchPlaceholder
+                                    placeholder: searchPlaceholder,
+                                    value: searchQuery,
+                                    onValueChange: function(val) {
+                                        return setSearchQuery(val);
+                                    }
                                 }),
-                                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CommandList, {
-                                    children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandEmpty, {
-                                            className: cn("w-full py-2 text-center", notFoundLabelClassName),
-                                            children: notFoundLabel
-                                        }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandGroup, {
-                                            className: cn("max-h-52 overflow-y-auto", dropdownClassName),
-                                            children: options.map(function(option) {
-                                                return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CommandItem, {
-                                                    className: cn("hover:bg-[#cccbcb] cursor-pointer", dropdownOptionClassName, selectedValue === option.value && "bg-[#cccbcb]"),
-                                                    value: JSON.stringify(option),
-                                                    onSelect: function(currentValue) {
-                                                        var parsedValue = JSON.parse(currentValue);
-                                                        setSelectedValue(parsedValue.value);
-                                                        onChange === null || onChange === void 0 ? void 0 : onChange(parsedValue.value);
-                                                        setOpen(false);
-                                                    },
-                                                    children: [
-                                                        option.label,
-                                                        selectedValue === option.value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.CheckIcon, {
-                                                            size: 16,
-                                                            className: "ml-auto"
-                                                        })
-                                                    ]
-                                                }, option.value);
-                                            })
+                                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandList, {
+                                    children: filteredOptions.length === 0 && searchQuery ? createNewOptionLabel ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandItem, {
+                                        onSelect: function() {
+                                            var newOption = {
+                                                value: searchQuery,
+                                                label: searchQuery
+                                            };
+                                            setNewOptions(function(prev) {
+                                                return _to_consumable_array(prev).concat([
+                                                    newOption
+                                                ]);
+                                            });
+                                            setSelectedValue(newOption.value);
+                                            onChange === null || onChange === void 0 ? void 0 : onChange(newOption.value);
+                                            setOpen(false);
+                                            setSearchQuery("");
+                                        },
+                                        className: "hover:bg-[#cccbcb] cursor-pointer",
+                                        children: "".concat(createNewOptionLabel, ": ").concat(searchQuery)
+                                    }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandEmpty, {
+                                        className: cn("w-full py-2 text-center", notFoundLabelClassName),
+                                        children: notFoundLabel
+                                    }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandGroup, {
+                                        className: cn("max-h-52 overflow-y-auto", dropdownClassName),
+                                        children: filteredOptions.map(function(option) {
+                                            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CommandItem, {
+                                                className: cn("hover:bg-[#cccbcb] cursor-pointer", dropdownOptionClassName, selectedValue === option.value && "bg-[#cccbcb]"),
+                                                value: JSON.stringify(option),
+                                                onSelect: function(currentValue) {
+                                                    var parsedValue = JSON.parse(currentValue);
+                                                    setSelectedValue(parsedValue.value);
+                                                    onChange === null || onChange === void 0 ? void 0 : onChange(parsedValue.value);
+                                                    setOpen(false);
+                                                    setSearchQuery("");
+                                                },
+                                                children: [
+                                                    option.label,
+                                                    selectedValue === option.value && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.CheckIcon, {
+                                                        size: 16,
+                                                        className: "ml-auto"
+                                                    })
+                                                ]
+                                            }, option.value);
                                         })
-                                    ]
+                                    })
                                 })
                             ]
                         })
@@ -5099,7 +5139,7 @@ var SelectContainer = function(param) {
     });
 };
 function MultiSelect(param) {
-    var onChange = param.onChange, selectedOptions = param.selectedOptions, emptyOptionsElement = param.emptyOptionsElement, unremovableOptions = param.unremovableOptions, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_styles = param.styles, styles = _param_styles === void 0 ? {} : _param_styles, _param_name = param.name, name = _param_name === void 0 ? "multipleSelect" : _param_name, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select items" : _param_placeholder, labelContent = param.labelContent, required = param.required, labelClassName = param.labelClassName, groupBy = param.groupBy, onSearch = param.onSearch, onSearchSync = param.onSearchSync, triggerSearchOnFocus = param.triggerSearchOnFocus, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, _param_createNewOption = param.createNewOption, createNewOption = _param_createNewOption === void 0 ? false : _param_createNewOption, searchInputProps = param.searchInputProps;
+    var onChange = param.onChange, selectedOptions = param.selectedOptions, emptyOptionsElement = param.emptyOptionsElement, unremovableOptions = param.unremovableOptions, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_styles = param.styles, styles = _param_styles === void 0 ? {} : _param_styles, _param_name = param.name, name = _param_name === void 0 ? "multipleSelect" : _param_name, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select items" : _param_placeholder, labelContent = param.labelContent, required = param.required, labelClassName = param.labelClassName, groupBy = param.groupBy, onSearch = param.onSearch, onSearchSync = param.onSearchSync, triggerSearchOnFocus = param.triggerSearchOnFocus, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, searchInputProps = param.searchInputProps;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", {
         className: cn("".concat(labelContent ? "flex gap-1 items-center" : ""), styles.containerClassName),
@@ -5125,7 +5165,7 @@ function MultiSelect(param) {
                 triggerSearchOnFocus: triggerSearchOnFocus,
                 groupBy: groupBy,
                 placeholder: placeholder,
-                creatable: createNewOption,
+                createNewOptionLabel: createNewOptionLabel,
                 hideClearAllButton: true,
                 hidePlaceholderWhenSelected: true,
                 badgeClassName: styles.badgeClassName,
@@ -5144,7 +5184,7 @@ function MultiSelect(param) {
     });
 }
 var SelectWithSearch = function(param) {
-    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, selectButtonClassName = param.selectButtonClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction;
+    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, selectButtonClassName = param.selectButtonClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", {
         className: cn("flex justify-between items-center w-full", containerClassName),
@@ -5158,6 +5198,7 @@ var SelectWithSearch = function(param) {
             }),
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SearchSelect, {
                 direction: direction,
+                createNewOptionLabel: createNewOptionLabel,
                 options: sortOptions,
                 value: value,
                 onChange: onChange,