akeyless-client-commons 1.0.10 → 1.0.11

package/dist/components/index.mjs

@@ -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);
     }, [
@@ -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,