@skalfa/skalfa-component 1.0.23 → 1.0.25

package/dist/input/Input.component.js

@@ -15,7 +15,7 @@ function InputComponent({ label, tip, leftIcon, rightIcon, className = "", value
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file");
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file", unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputCheckbox.component.js

@@ -14,7 +14,7 @@ function InputCheckboxComponent({ name, label, tip, vertical, className = "", cl
     // =========================>
     // ## initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false, unregister);
     // =========================>
     // ## Invalid handler
     // =========================>

package/dist/input/InputCurrency.component.js

@@ -9,7 +9,7 @@ function InputCurrencyComponent({ label, tip, leftIcon, rightIcon, value, invali
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputDate.component.js

@@ -19,7 +19,7 @@ function InputDateComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputDatetime.component.js

@@ -20,7 +20,7 @@ function InputDatetimeComponent({ label, tip, leftIcon, rightIcon, value, invali
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputDocument.component.js

@@ -23,7 +23,7 @@ function InputDocumentComponent({ label, tip, leftIcon, rightIcon, className = "
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file");
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, props.type == "file", unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputImage.component.js

@@ -17,7 +17,7 @@ const InputImageComponent = ({ name, label, tip, value, disabled, aspect = "1/1"
     const [drag, setDrag] = (0, react_1.useState)(false);
     const [cropSrc, setCropSrc] = (0, react_1.useState)(null);
     const [openCrop, setOpenCrop] = (0, react_1.useState)(false);
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, true, unregister);
     const [invalidMessage, setInvalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
     (0, react_1.useEffect)(() => {
         if (value) {

package/dist/input/InputNumber.component.js

@@ -9,7 +9,7 @@ function InputNumberComponent({ label, tip, leftIcon, rightIcon, value, invalid,
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/InputPassword.component.js

@@ -15,7 +15,7 @@ function InputPasswordComponent({ label, tip, leftIcon, rightIcon, value, invali
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     const randomConfirmId = (0, _utils_1.useInputRandomId)();
     // =========================>

package/dist/input/InputRadio.component.js

@@ -12,7 +12,7 @@ function InputRadioComponent({ name, label, tip, vertical, value, disabled, inva
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false, unregister);
     // =========================>
     // ## Invalid handler
     // =========================>

package/dist/input/InputTime.component.js

@@ -15,7 +15,7 @@ function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, v
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler

package/dist/input/Select.component.d.ts

@@ -13,7 +13,7 @@ export interface SelectProps {
     tip?: string | ReactNode;
     leftIcon?: any;
     rightIcon?: any;
-    value?: string | number | (string | number)[];
+    value?: string | number | (string | number)[] | Record<string, any>;
     invalid?: string;
     disabled?: boolean;
     validations?: ValidationRules;
@@ -36,7 +36,9 @@ export interface SelectProps {
     tempOptions?: SelectOptionProps[];
     newOption?: SelectOptionProps;
     maxShowOption?: number;
-    onChange?: (value: string | number | (string | number)[], data?: any) => any;
+    creatable?: boolean | string;
+    creatableLabel?: string;
+    onChange?: (value: any, data?: any) => any;
     register?: (name: string, validations?: ValidationRules) => void;
     unregister?: (name: string) => void;
     onFocus?: () => void;
@@ -44,4 +46,4 @@ export interface SelectProps {
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className?: string;
 }
-export declare function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options, searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions, exceptOptions, tempOptions, newOption, maxShowOption, register, unregister, onChange, onFocus, onBlur, className, }: SelectProps): import("@types/react").JSX.Element;
+export declare function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options, searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions, exceptOptions, tempOptions, newOption, maxShowOption, creatable, creatableLabel, register, unregister, onChange, onFocus, onBlur, className, }: SelectProps): import("@types/react").JSX.Element;

package/dist/input/Select.component.js

@@ -6,8 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const skalfa_icon_1 = require("@skalfa/skalfa-icon");
 const react_1 = require("react");
 const _utils_1 = require("@utils");
+const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
 ;
-function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options = [], searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions = [], exceptOptions = [], tempOptions, newOption, maxShowOption = 10, register, unregister, onChange, onFocus, onBlur, className = "", }) {
+function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options = [], searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions = [], exceptOptions = [], tempOptions, newOption, maxShowOption = 10, creatable, creatableLabel, register, unregister, onChange, onFocus, onBlur, className = "", }) {
     const [inputShowValue, setInputShowValue] = (0, react_1.useState)("");
     const [keydown, setKeydown] = (0, react_1.useState)(false);
     const [useTemp, setUseTemp] = (0, react_1.useState)(true);
@@ -18,39 +19,73 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
     const [showOption, setShowOption] = (0, react_1.useState)(false);
     const [keyword, setKeyword] = (0, react_1.useState)("");
     const [keywordSearch] = (0, _utils_1.useLazySearch)(keyword);
+    const creatableKey = typeof creatable === "string" ? (creatable || "name") : (creatable ? "name" : null);
+    const [isCreatingNew, setIsCreatingNew] = (0, react_1.useState)(false);
+    const [customText, setCustomText] = (0, react_1.useState)("");
+    const [dropdownCustomText, setDropdownCustomText] = (0, react_1.useState)("");
+    const isFocusingCreatable = (0, react_1.useRef)(false);
+    const handleCreateNewSubmit = () => {
+        if (!dropdownCustomText.trim() || !creatableKey)
+            return;
+        isFocusingCreatable.current = false;
+        const valText = dropdownCustomText.trim();
+        setIsCreatingNew(true);
+        setCustomText(valText);
+        setInputShowValue(valText);
+        setShowOption(false);
+        setFilteredOptions([]);
+        const objVal = { [creatableKey]: valText };
+        inputHandler.setValue(objVal);
+        inputHandler.setIdle(false);
+        onChange?.(objVal);
+    };
     // =========================>
     // ## Initial
     // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false);
+    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, false, unregister);
     const randomId = (0, _utils_1.useInputRandomId)();
     // =========================>
     // ## Invalid handler
     // =========================>
     const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
     // =========================>
-    // ## change value handler
+    // ## options handler
     // =========================>
+    const optionsKey = typeof options === "object" ? JSON.stringify(options) : String(options || "");
+    const includedOptionsKey = typeof includedOptions === "object" ? JSON.stringify(includedOptions) : String(includedOptions || "");
+    const exceptOptionsKey = typeof exceptOptions === "object" ? JSON.stringify(exceptOptions) : String(exceptOptions || "");
     (0, react_1.useEffect)(() => {
-        if (value) {
-            inputHandler.setValue(value);
-            Array.isArray(dataOptions) && setInputShowValue((newOption ? [newOption, ...dataOptions] : dataOptions)?.find((option) => option.value == value)?.label || "");
-            inputHandler.setIdle(false);
+        let base = options?.length ? [...options, ...includedOptions] : [...includedOptions];
+        if (exceptOptions?.length) {
+            base = base.filter((op) => !exceptOptions.includes(op.value));
         }
-        else {
-            inputHandler.setValue("");
-            setInputShowValue("");
-        }
-    }, [value, dataOptions]);
+        setDataOptions(base);
+    }, [optionsKey, includedOptionsKey, exceptOptionsKey]);
+    const dataOptionsKey = dataOptions.map((op) => String(op.value)).join("|");
     // =========================>
-    // ## options handler
+    // ## change value handler
     // =========================>
     (0, react_1.useEffect)(() => {
-        options?.length && setDataOptions([...options, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value)));
-    }, [options]);
+        const currentVal = inputHandler.value;
+        if (currentVal && typeof currentVal === "object" && !Array.isArray(currentVal) && creatableKey && creatableKey in currentVal) {
+            setIsCreatingNew(true);
+            const text = String(currentVal[creatableKey] || "");
+            setCustomText(text);
+            setInputShowValue(text);
+        }
+        else if (currentVal !== undefined && currentVal !== null && currentVal !== "" && typeof currentVal !== "object") {
+            setIsCreatingNew(false);
+            const matched = (newOption ? [newOption, ...dataOptions] : dataOptions)?.find((option) => option.value == currentVal);
+            setInputShowValue(matched?.label || currentVal);
+        }
+        else if (!currentVal && !isCreatingNew) {
+            setInputShowValue("");
+        }
+    }, [inputHandler.value, dataOptionsKey, creatableKey]);
     const filterOption = (e) => {
-        if (dataOptions?.length) {
+        if (dataOptions?.length || creatableKey) {
             let newFilteredOptions = [];
-            if (searchable && !serverSearchable) {
+            if (searchable && !serverSearchable && dataOptions?.length) {
                 if (e.target.value) {
                     newFilteredOptions = dataOptions.filter((Option) => Option.label?.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1).slice(0, maxShowOption);
                 }
@@ -59,7 +94,7 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                 }
             }
             else {
-                newFilteredOptions = dataOptions;
+                newFilteredOptions = dataOptions || [];
             }
             setActiveOption(-1);
             setFilteredOptions(newFilteredOptions);
@@ -73,6 +108,16 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                 setActiveOption(-1);
                 setFilteredOptions([]);
                 setShowOption(false);
+                if (resultValue?.value === "__CREATE_NEW__" && creatableKey) {
+                    setIsCreatingNew(true);
+                    setCustomText("");
+                    setInputShowValue("");
+                    const objVal = { [creatableKey]: "" };
+                    inputHandler.setValue(objVal);
+                    onChange?.(objVal, resultValue);
+                    e.preventDefault();
+                    return;
+                }
                 if (!multiple) {
                     setInputShowValue(resultValue?.label || inputShowValue);
                     inputHandler.setValue(resultValue?.value || inputShowValue);
@@ -176,25 +221,42 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
             }
         }
     }, [keywordSearch, serverOptionControl?.path, serverOptionControl?.url]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", value: !multiple ? String(inputHandler.value) : Array().concat(inputHandler.value).map((val) => String(val)), name: name }), (0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: !searchable, id: randomId, placeholder: !inputHandler.value || (Array.isArray(inputHandler.value) && !inputHandler.value.length) ? placeholder : "", disabled: disabled, className: (0, _utils_1.cn)("input cursor-pointer", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", invalidMessage && "input-error", (0, _utils_1.pcn)(className, "input"), invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: (useTemp && tempOptions ? tempOptions.at(0)?.label : serverSearchable ? keyword : inputShowValue), onChange: (e) => {
+    return ((0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: () => {
+            isFocusingCreatable.current = false;
+            setShowOption(false);
+            inputHandler.setFocus(false);
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [isCreatingNew && typeof inputHandler.value === "object" && inputHandler.value !== null ? (Object.entries(inputHandler.value).map(([subK, subV]) => ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: `${name.endsWith("_id") ? name.slice(0, -3) : name}[${subK}]`, value: String(subV ?? "") }, subK)))) : ((0, jsx_runtime_1.jsx)("input", { type: "hidden", value: !multiple ? (typeof inputHandler.value === "object" ? JSON.stringify(inputHandler.value) : String(inputHandler.value ?? "")) : Array().concat(inputHandler.value).map((val) => String(val)), name: name })), isCreatingNew && ((0, jsx_runtime_1.jsx)("div", { className: "absolute left-1.5 top-1/2 -translate-y-1/2 bg-stroke text-sm px-3.5 py-1.5 rounded-lg select-none pointer-events-none z-10 font-normal", children: "Baru" })), (0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: !searchable, id: randomId, placeholder: !inputHandler.value || (Array.isArray(inputHandler.value) && !inputHandler.value.length) ? placeholder : "", disabled: disabled, className: (0, _utils_1.cn)("input cursor-pointer", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", isCreatingNew && "pl-[4.8rem]", invalidMessage && "input-error", (0, _utils_1.pcn)(className, "input"), invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: (useTemp && tempOptions ? tempOptions.at(0)?.label : serverSearchable ? keyword : (isCreatingNew ? customText : inputShowValue)), onChange: (e) => {
                                 setUseTemp(false);
                                 searchable && setInputShowValue(e.target.value);
                                 serverSearchable && setKeyword(e.target.value);
                                 inputHandler.setIdle(false);
-                                dataOptions?.length && filterOption(e);
+                                (dataOptions?.length || creatableKey) && filterOption(e);
                             }, onFocus: (e) => {
                                 setUseTemp(false);
                                 inputHandler.setFocus(true);
                                 onFocus?.();
-                                dataOptions?.length && filterOption(e);
+                                (dataOptions?.length || creatableKey) && filterOption(e);
                                 searchable && e.target.select();
                             }, onBlur: (e) => {
                                 setUseTemp(false);
+                                if (isFocusingCreatable.current)
+                                    return;
+                                if (isCreatingNew) {
+                                    setTimeout(() => {
+                                        if (!isFocusingCreatable.current) {
+                                            inputHandler.setFocus(false);
+                                        }
+                                    }, 100);
+                                    onBlur?.();
+                                    return;
+                                }
                                 const value = e.target.value;
                                 const valueOption = dataOptions?.find((option) => option.label?.toLowerCase() == value?.toLowerCase());
                                 if (!keydown) {
                                     if (!multiple) {
                                         setTimeout(() => {
+                                            if (isFocusingCreatable.current)
+                                                return;
                                             if (valueOption?.value) {
                                                 setInputShowValue(valueOption.label);
                                                 inputHandler.setValue(valueOption.value);
@@ -216,7 +278,9 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                                     }
                                 }
                                 setTimeout(() => {
-                                    inputHandler.setFocus(false);
+                                    if (!isFocusingCreatable.current) {
+                                        inputHandler.setFocus(false);
+                                    }
                                 }, 100);
                                 onBlur?.();
                             }, onKeyDown: (e) => {
@@ -233,42 +297,79 @@ function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, v
                                                     }
                                                 } })] }, key));
                                 }) }) })), leftIcon && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), !multiple && clearable && inputHandler.value && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-icon", "input-icon-clear", disabled && "input-icon-disabled", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled")), onClick: () => {
+                                setIsCreatingNew(false);
+                                setCustomText("");
+                                setDropdownCustomText("");
                                 setInputShowValue("");
                                 inputHandler.setValue("");
                                 onChange?.("");
-                            }, children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/times" }) })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-icon", "input-icon-right", "select-icon-dropdown", disabled && "input-icon-disabled", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled")), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-down" }) })] }), !!dataOptions?.length && showOption && !loadingOption && !!filteredOptions?.length && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { className: (0, _utils_1.cn)("input-suggest-container scroll-sm", inputHandler.focus && "input-suggest-container-active", (0, _utils_1.pcn)(className, "suggest")), children: (newOption ? [newOption, ...filteredOptions] : filteredOptions).map((option, key) => {
-                            const selected = !!((typeof inputHandler.value == "string" || typeof inputHandler.value == "number") && inputHandler.value == option.value) ||
-                                (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value));
-                            return ((0, jsx_runtime_1.jsxs)("li", { className: (0, _utils_1.cn)("input-suggest", (key == activeOption || selected) && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), (key == activeOption || selected) && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
-                                    setKeydown(true);
-                                    setTimeout(() => inputHandler.setFocus(true), 110);
-                                }, onMouseUp: () => {
-                                    setKeydown(false);
-                                    setActiveOption(key);
-                                    setFilteredOptions([]);
-                                    setShowOption(false);
-                                    if (!multiple) {
-                                        setInputShowValue(option.label);
-                                        serverSearchable && setKeyword(option.label);
-                                        inputHandler.setValue(option.value);
-                                        onChange?.(option.value, option);
-                                    }
-                                    else {
-                                        const values = Array.isArray(inputHandler.value)
-                                            ? Array().concat(inputHandler.value).filter((val) => val != option.value)
-                                            : [];
-                                        setInputShowValue("");
-                                        serverSearchable && setKeyword("");
-                                        if (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value)) {
-                                            inputHandler.setValue(values);
-                                            onChange?.(values);
+                            }, children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/times" }) })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-icon", "input-icon-right", "select-icon-dropdown cursor-pointer", disabled && "input-icon-disabled", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled")), onClick: (e) => {
+                                (dataOptions?.length || creatableKey) && filterOption(e);
+                            }, children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-down" }) })] }), (!!dataOptions?.length || creatableKey) && showOption && !loadingOption && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("ul", { className: (0, _utils_1.cn)("input-suggest-container scroll-sm", inputHandler.focus && "input-suggest-container-active", (0, _utils_1.pcn)(className, "suggest")), children: [creatableKey && ((0, jsx_runtime_1.jsxs)("li", { className: "p-2 border-b border-stroke flex items-center gap-2 cursor-default bg-white sticky top-0 z-10 mb-2", onMouseDown: (e) => {
+                                    isFocusingCreatable.current = true;
+                                    e.stopPropagation();
+                                }, onMouseUp: (e) => {
+                                    e.stopPropagation();
+                                }, onClick: (e) => {
+                                    e.stopPropagation();
+                                }, children: [(0, jsx_runtime_1.jsx)("input", { type: "text", className: "input flex-1 text-sm py-1.5 px-3 rounded-lg border border-stroke focus:outline-none focus:border-primary placeholder:text-slate-300 text-slate-700 bg-white", placeholder: creatableLabel || "Masukkan pilihan baru...", value: dropdownCustomText, onMouseDown: (e) => {
+                                            isFocusingCreatable.current = true;
+                                            e.stopPropagation();
+                                        }, onFocus: () => {
+                                            isFocusingCreatable.current = true;
+                                        }, onBlur: () => {
+                                            setTimeout(() => {
+                                                if (!isFocusingCreatable.current) {
+                                                    setShowOption(false);
+                                                    inputHandler.setFocus(false);
+                                                }
+                                            }, 200);
+                                        }, onChange: (e) => setDropdownCustomText(e.target.value), onKeyDown: (e) => {
+                                            e.stopPropagation();
+                                            if (e.key === "Enter") {
+                                                e.preventDefault();
+                                                handleCreateNewSubmit();
+                                            }
+                                        } }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "bg-light-primary text-primary p-2 rounded-lg flex items-center justify-center transition-colors shrink-0 shadow-sm cursor-pointer border-none", onMouseDown: (e) => {
+                                            isFocusingCreatable.current = true;
+                                            e.stopPropagation();
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            handleCreateNewSubmit();
+                                        }, children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "w-4 h-4" }) })] })), (newOption ? [newOption, ...filteredOptions] : filteredOptions).map((option, key) => {
+                                const selected = !isCreatingNew && (!!((typeof inputHandler.value == "string" || typeof inputHandler.value == "number") && inputHandler.value == option.value) ||
+                                    (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value)));
+                                return ((0, jsx_runtime_1.jsxs)("li", { className: (0, _utils_1.cn)("input-suggest", (key == activeOption || selected) && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), (key == activeOption || selected) && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
+                                        setKeydown(true);
+                                        setTimeout(() => inputHandler.setFocus(true), 110);
+                                    }, onMouseUp: () => {
+                                        setKeydown(false);
+                                        setActiveOption(key);
+                                        setFilteredOptions([]);
+                                        setShowOption(false);
+                                        setIsCreatingNew(false);
+                                        if (!multiple) {
+                                            setInputShowValue(option.label);
+                                            serverSearchable && setKeyword(option.label);
+                                            inputHandler.setValue(option.value);
+                                            onChange?.(option.value, option);
                                         }
                                         else {
-                                            inputHandler.setValue([...Array().concat(values), option.value]);
-                                            onChange?.([...Array().concat(values), option.value]);
+                                            const values = Array.isArray(inputHandler.value)
+                                                ? Array().concat(inputHandler.value).filter((val) => val != option.value)
+                                                : [];
+                                            setInputShowValue("");
+                                            serverSearchable && setKeyword("");
+                                            if (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value)) {
+                                                inputHandler.setValue(values);
+                                                onChange?.(values);
+                                            }
+                                            else {
+                                                inputHandler.setValue([...Array().concat(values), option.value]);
+                                                onChange?.([...Array().concat(values), option.value]);
+                                            }
                                         }
-                                    }
-                                    setTimeout(() => inputHandler.setFocus(false), 120);
-                                }, children: [selected && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "select-suggest-check" })), option.label] }, key));
-                        }) }) })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
+                                        setTimeout(() => inputHandler.setFocus(false), 120);
+                                    }, children: [selected && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/check", className: "select-suggest-check" })), option.label] }, key));
+                            })] }) })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
 }

package/dist/supervision/FormSupervision.component.d.ts

@@ -24,6 +24,7 @@ type ClusterConstruction = {
     tip: string;
     fields: FormType[];
     wrap: boolean;
+    min?: number;
     /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
     className: string;
 };
@@ -44,12 +45,26 @@ type ConstructionMap = {
     custom: formCustomConstructionProps;
 };
 type TypeKeys = keyof ConstructionMap;
+export type WatchContext = {
+    values: Record<string, any>;
+    self: string;
+    prev: WatchAction;
+};
+export type WatchAction = {
+    disabled?: boolean;
+    hidden?: boolean;
+    value?: any;
+    required?: boolean;
+    readonly?: boolean;
+    reset?: boolean;
+};
 export interface FormType<T extends TypeKeys = keyof ConstructionMap> {
     col?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | string;
     className?: string;
     construction?: ConstructionMap[T];
     type?: T;
-    onHide?: (values: any) => boolean;
+    onHide?: (values: Record<string, any>) => boolean;
+    onWatch?: (ctx: WatchContext) => WatchAction | undefined;
 }
 export interface formSupervisionProps {
     title?: string;