akeyless-client-commons 1.0.9 → 1.0.11

package/dist/components/index.mjs

@@ -3456,7 +3456,7 @@ function useDebounce(value, delay) {
     return debouncedValue;
 }
 var MultipleSelector = forwardRef6(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({
@@ -3700,7 +3700,7 @@ var MultipleSelector = forwardRef6(function(param, ref) {
         refs
     ]);
     var CreatableItem = function() {
-        if (!creatable) return void 0;
+        if (!createNewOptionLabel) return void 0;
         if (isOptionsExist(options, [
             {
                 value: inputValue,
@@ -3733,7 +3733,7 @@ var MultipleSelector = forwardRef6(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;
@@ -3745,7 +3745,7 @@ var MultipleSelector = forwardRef6(function(param, ref) {
     };
     var EmptyItem = useCallback2(function() {
         if (!emptyIndicator) return void 0;
-        if (onSearch && !creatable && Object.keys(options).length === 0) {
+        if (onSearch && !createNewOptionLabel && Object.keys(options).length === 0) {
             return /* @__PURE__ */ jsx13(CommandItem, {
                 className: "",
                 value: "-",
@@ -3758,7 +3758,7 @@ var MultipleSelector = forwardRef6(function(param, ref) {
             children: emptyIndicator
         });
     }, [
-        creatable,
+        createNewOptionLabel,
         emptyIndicator,
         onSearch,
         options,
@@ -3774,14 +3774,14 @@ var MultipleSelector = forwardRef6(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__ */ jsxs8(Command, _object_spread_props(_object_spread({}, commandProps), {
@@ -4018,19 +4018,36 @@ import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import { useId, useMemo as useMemo5, useState as useState5 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "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 = useId();
     var _useState5 = _sliced_to_array(useState5(false), 2), open = _useState5[0], setOpen = _useState5[1];
     var _ref;
     var _useState51 = _sliced_to_array(useState5((_ref = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref !== void 0 ? _ref : ""), 2), selectedValue = _useState51[0], setSelectedValue = _useState51[1];
+    var _useState52 = _sliced_to_array(useState5(""), 2), searchQuery = _useState52[0], setSearchQuery = _useState52[1];
+    var _useState53 = _sliced_to_array(useState5([]), 2), newOptions = _useState53[0], setNewOptions = _useState53[1];
+    var allOptions = useMemo5(function() {
+        return _to_consumable_array(options).concat(_to_consumable_array(newOptions));
+    }, [
+        options,
+        newOptions
+    ]);
+    var filteredOptions = useMemo5(function() {
+        if (!searchQuery) return allOptions;
+        return allOptions.filter(function(option) {
+            return option.label.toLowerCase().includes(searchQuery.toLowerCase());
+        });
+    }, [
+        allOptions,
+        searchQuery
+    ]);
     var selectLabel = useMemo5(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__ */ jsxs10("div", {
@@ -4041,7 +4058,10 @@ function SearchSelect(param) {
         children: [
             /* @__PURE__ */ jsxs10(Popover, {
                 open: open,
-                onOpenChange: setOpen,
+                onOpenChange: function(isOpen) {
+                    setOpen(isOpen);
+                    if (!isOpen) setSearchQuery("");
+                },
                 children: [
                     /* @__PURE__ */ jsx15(PopoverTrigger, {
                         asChild: true,
@@ -4075,37 +4095,57 @@ function SearchSelect(param) {
                                         direction: direction
                                     },
                                     className: cn(searchClassName),
-                                    placeholder: searchPlaceholder
+                                    placeholder: searchPlaceholder,
+                                    value: searchQuery,
+                                    onValueChange: function(val) {
+                                        return setSearchQuery(val);
+                                    }
                                 }),
-                                /* @__PURE__ */ jsxs10(CommandList, {
-                                    children: [
-                                        /* @__PURE__ */ jsx15(CommandEmpty, {
-                                            className: cn("w-full py-2 text-center", notFoundLabelClassName),
-                                            children: notFoundLabel
-                                        }),
-                                        /* @__PURE__ */ jsx15(CommandGroup, {
-                                            className: cn("max-h-52 overflow-y-auto", dropdownClassName),
-                                            children: options.map(function(option) {
-                                                return /* @__PURE__ */ jsxs10(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__ */ jsx15(CheckIcon, {
-                                                            size: 16,
-                                                            className: "ml-auto"
-                                                        })
-                                                    ]
-                                                }, option.value);
-                                            })
+                                /* @__PURE__ */ jsx15(CommandList, {
+                                    children: filteredOptions.length === 0 && searchQuery ? createNewOptionLabel ? /* @__PURE__ */ jsx15(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__ */ jsx15(CommandEmpty, {
+                                        className: cn("w-full py-2 text-center", notFoundLabelClassName),
+                                        children: notFoundLabel
+                                    }) : /* @__PURE__ */ jsx15(CommandGroup, {
+                                        className: cn("max-h-52 overflow-y-auto", dropdownClassName),
+                                        children: filteredOptions.map(function(option) {
+                                            return /* @__PURE__ */ jsxs10(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__ */ jsx15(CheckIcon, {
+                                                        size: 16,
+                                                        className: "ml-auto"
+                                                    })
+                                                ]
+                                            }, option.value);
                                         })
-                                    ]
+                                    })
                                 })
                             ]
                         })
@@ -4604,7 +4644,7 @@ var NumberUI = function(param) {
 // src/components/forms/ModularForm/ModularForm.tsx
 import { cloneElement, useState as useState8 } from "react";
 // src/components/forms/ModularForm/formElements.tsx
-import { useCallback as useCallback4, useMemo as useMemo8, useState as useState7 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo8, useState as useState7 } from "react";
 // src/components/forms/ModularForm/InternationalPhonePicker.tsx
 import { ChevronDown, Phone } from "lucide-react";
 import { forwardRef as forwardRef7, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef4, useState as useState6 } from "react";
@@ -4801,7 +4841,7 @@ var useSortValues = function(options, sortDirection, sortAsNumber) {
 };
 var InputContainer = function(param) {
     var validationError = param.validationError, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_inputType = param.inputType, inputType = _param_inputType === void 0 ? "text" : _param_inputType, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_validationName = param.validationName, validationName = _param_validationName === void 0 ? "textNumbers" : _param_validationName, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, value = param.value;
-    var handleChangeFunction = useCallback4(function(e) {
+    var handleChangeFunction = useCallback3(function(e) {
         handleChange(e);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }, [
@@ -4904,7 +4944,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__ */ jsxs13("div", {
         className: cn("".concat(labelContent ? "flex gap-1 items-center" : ""), styles.containerClassName),
@@ -4930,7 +4970,7 @@ function MultiSelect(param) {
                 triggerSearchOnFocus: triggerSearchOnFocus,
                 groupBy: groupBy,
                 placeholder: placeholder,
-                creatable: createNewOption,
+                createNewOptionLabel: createNewOptionLabel,
                 hideClearAllButton: true,
                 hidePlaceholderWhenSelected: true,
                 badgeClassName: styles.badgeClassName,
@@ -4949,7 +4989,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__ */ jsxs13("div", {
         className: cn("flex justify-between items-center w-full", containerClassName),
@@ -4963,6 +5003,7 @@ var SelectWithSearch = function(param) {
             }),
             /* @__PURE__ */ jsx18(SearchSelect, {
                 direction: direction,
+                createNewOptionLabel: createNewOptionLabel,
                 options: sortOptions,
                 value: value,
                 onChange: onChange,