@skalfa/skalfa-component 1.0.2 → 1.0.4

package/dist/src/input/InputRadio.component.d.ts

@@ -1,27 +0,0 @@
-import { ReactNode } from "react";
-import { ApiType, ValidationRules } from "@utils";
-export type InputRadioOptionProps = {
-    value: string | number;
-    label: string;
-};
-export type InputRadioProps = {
-    name: string;
-    label?: string;
-    tip?: string | ReactNode;
-    vertical?: boolean;
-    value?: string | number;
-    disabled?: boolean;
-    invalid?: string;
-    options?: InputRadioOptionProps[];
-    serverOptionControl?: ApiType;
-    customOptions?: any;
-    validations?: ValidationRules;
-    onChange?: (value: string | number) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::", "suggest::", "suggest-item::". */
-    className?: string;
-    /** Use custom class with: "label::", "checked::", "error::". */
-    classNameCheckbox?: string;
-};
-export declare function InputRadioComponent({ name, label, tip, vertical, value, disabled, invalid, options, serverOptionControl, customOptions, validations, onChange, register, unregister, className, classNameCheckbox, }: InputRadioProps): import("react").JSX.Element;

package/dist/src/input/InputRadio.component.js

@@ -1,56 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputRadioComponent = InputRadioComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-function InputRadioComponent({ name, label, tip, vertical, value, disabled, invalid, options, serverOptionControl, customOptions, validations, onChange, register, unregister, className = "", classNameCheckbox = "", }) {
-    const [dataOptions, setDataOptions] = (0, react_1.useState)([]);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    // =========================>
-    // ## Initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, false);
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    // =========================>
-    // ## Fetch option
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        const fetchOptions = async () => {
-            setLoading(true);
-            const mutateOptions = await (0, _utils_1.api)(serverOptionControl || {});
-            if (mutateOptions?.status == 200) {
-                customOptions
-                    ? setDataOptions([customOptions, ...mutateOptions.data])
-                    : setDataOptions(mutateOptions.data);
-                setLoading(false);
-            }
-        };
-        if (serverOptionControl?.path || serverOptionControl?.url) {
-            fetchOptions();
-        }
-        else {
-            !options && setDataOptions([]);
-        }
-    }, [serverOptionControl?.path, serverOptionControl?.url]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container w-full", children: [(0, jsx_runtime_1.jsxs)("label", { className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "focus")), 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: (0, _utils_1.cn)("input input-radio-list", vertical && "input-radio-list-vertical", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error", !!invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), children: [loading && (vertical ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3]).map((_, key) => {
-                            return (0, jsx_runtime_1.jsx)("div", { className: "w-1/3 h-6 rounded-lg" }, key);
-                        }), (options || dataOptions) &&
-                            (options || dataOptions)?.map((option, key) => {
-                                return ((0, jsx_runtime_1.jsx)(_components_1.RadioComponent, { label: option.label, name: `option[${option.value}]#${name}`, checked: inputHandler.value == option.value, disabled: disabled, className: classNameCheckbox, onChange: () => {
-                                        if (inputHandler.value == option.value) {
-                                            inputHandler.setValue("");
-                                            onChange?.("");
-                                        }
-                                        else {
-                                            inputHandler.setValue(option.value || "");
-                                            onChange?.(option.value || "");
-                                        }
-                                    } }, 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/src/input/InputTime.component.d.ts

@@ -1,23 +0,0 @@
-import { FC, InputHTMLAttributes, ReactNode } from "react";
-import { ValidationRules } from "@utils";
-export interface InputTimeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    label?: string;
-    tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
-    value?: string;
-    invalid?: string;
-    validations?: ValidationRules;
-    onChange?: (value: string) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    /** Use custom class with: "label::", "tip::", "error::", "icon::". */
-    className?: string;
-}
-export declare function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputTimeProps): import("react").JSX.Element;
-interface InputTimePickerProps {
-    onChange?: (time: string) => void;
-    rightElement?: ReactNode;
-}
-export declare const InputTimePickerComponent: FC<InputTimePickerProps>;
-export {};

package/dist/src/input/InputTime.component.js

@@ -1,73 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputTimePickerComponent = void 0;
-exports.InputTimeComponent = InputTimeComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-function InputTimeComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    // =========================>
-    // ## Initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
-    const randomId = (0, _utils_1.useInputRandomId)();
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    return ((0, jsx_runtime_1.jsxs)(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", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), 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", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(_components_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error"), value: inputHandler.value, onChange: (e) => {
-                                        inputHandler.setValue(e.target.value);
-                                        inputHandler.setIdle(false);
-                                        onChange?.(e.target.value);
-                                    }, onFocus: (e) => {
-                                        props.onFocus?.(e);
-                                        inputHandler.setFocus(true);
-                                    }, autoComplete: "off", inputMode: isSm ? "none" : undefined }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-time-picker-popover", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
-                                            inputHandler.setValue(time);
-                                            onChange?.(time);
-                                        } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 380, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputTimePickerComponent, { onChange: (time) => {
-                            inputHandler.setValue(time);
-                            onChange?.(time);
-                        } }) }) }))] }));
-}
-;
-const InputTimePickerComponent = ({ onChange, rightElement, }) => {
-    const [hour, setHour] = (0, react_1.useState)(0);
-    const [minute, setMinute] = (0, react_1.useState)(0);
-    const [second, setSecond] = (0, react_1.useState)(0);
-    const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"));
-    const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
-    const seconds = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
-    const handleSelect = (type, val) => {
-        if (type === "h")
-            setHour(Number(val));
-        if (type === "m")
-            setMinute(Number(val));
-        if (type === "s")
-            setSecond(Number(val));
-    };
-    (0, react_1.useEffect)(() => {
-        const formatted = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:${String(second).padStart(2, "0")}`;
-        onChange?.(formatted);
-    }, [hour, minute, second]);
-    const renderColumn = (items, type, activeValue) => ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto text-center input-scroll", children: items.map((item) => {
-            const active = Number(item) === activeValue;
-            return ((0, jsx_runtime_1.jsx)("div", { onClick: () => handleSelect(type, item), className: (0, _utils_1.cn)("p-2 cursor-pointer rounded text-sm", active ? "bg-primary text-background font-semibold" : "hover:bg-light-primary"), children: item }, item));
-        }) }));
-    const timeSlots = (0, react_1.useMemo)(() => {
-        const newTimeSlots = [];
-        for (let i = 0; i <= 24 * 60; i += 30) {
-            const hours = Math.floor(i / 60);
-            const minutes = i % 60;
-            const label = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
-            newTimeSlots.push(label);
-        }
-        return newTimeSlots;
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full max-h-[260] flex gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-1/3 overflow-y-auto bg-background rounded-[6px] input-scroll", children: timeSlots.map((time) => ((0, jsx_runtime_1.jsx)("div", { className: "p-2 text-sm rounded cursor-pointer hover:bg-light-primary text-center", onClick: () => onChange?.(time), children: time }, time))) }), (0, jsx_runtime_1.jsxs)("div", { className: "w-2/3 flex gap-2", children: [renderColumn(hours, "h", hour), renderColumn(minutes, "m", minute), renderColumn(seconds, "s", second)] }), rightElement && (0, jsx_runtime_1.jsx)("div", { children: rightElement })] }));
-};
-exports.InputTimePickerComponent = InputTimePickerComponent;

package/dist/src/input/InputValues.component.d.ts

@@ -1,9 +0,0 @@
-import { CSSProperties } from 'react';
-export declare function InputValues({ value, className, onDelete, isFocus, onFocus, style, }: {
-    value?: string[] | number[];
-    className?: string;
-    onDelete?: (val: string | number, index: string | number) => void;
-    isFocus?: boolean;
-    onFocus?: () => void;
-    style?: CSSProperties;
-}): import("react").JSX.Element;

package/dist/src/input/InputValues.component.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputValues = InputValues;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-function InputValues({ value, className, onDelete, isFocus, onFocus, style, }) {
-    if (isFocus) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!value?.length && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-values-dropdown", className), onClick: () => onFocus?.(), children: value?.map((item, key) => {
-                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "", children: item }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => onDelete?.(item, key) })] }, key));
-                }) })) }));
-    }
-    else {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-values-preview", className), style: style, onClick: () => onFocus?.(), children: (0, jsx_runtime_1.jsx)("div", { className: "input-values-container", children: value?.map((item, key) => {
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: item }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => onDelete?.(item, key) })] }, key));
-                    }) }) }) }));
-    }
-}

package/dist/src/input/Radio.component.d.ts

@@ -1,12 +0,0 @@
-export interface RadioProps {
-    name: string;
-    label?: string;
-    value?: string;
-    disabled?: boolean;
-    checked?: boolean;
-    invalid?: string;
-    onChange?: () => void;
-    /** Use custom class with: "label::", "checked::", "error::". */
-    className?: string;
-}
-export declare function RadioComponent({ name, label, value, disabled, checked, invalid, onChange, className, }: RadioProps): import("react").JSX.Element;

package/dist/src/input/Radio.component.js

@@ -1,22 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioComponent = RadioComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const _utils_1 = require("@utils");
-;
-function RadioComponent({ name, label, value, disabled, checked, invalid, onChange, className = "", }) {
-    // =========================>
-    // ## initial
-    // =========================>
-    const randomId = (0, _utils_1.useInputRandomId)();
-    const [invalidMessage, setInvalidMessage] = (0, react_1.useState)("");
-    // =========================>
-    // ## invalid handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        setInvalidMessage(invalid || "");
-    }, [invalid]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "radio-container", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "hidden", id: randomId, name: name, onChange: onChange, defaultChecked: checked, value: value, disabled: disabled }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("radio-wrapper", disabled && "radio-wrapper-disabled"), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("radio-input", checked && "radio-input-checked", checked && (0, _utils_1.pcn)(className, "checked"), (0, _utils_1.pcn)(className, "input")) }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("radio-label", checked && "radio-label-checked", (0, _utils_1.pcn)(className, "label"), checked && (0, _utils_1.pcn)(className, "label", "checked"), disabled && (0, _utils_1.pcn)(className, "label", "disabled")), children: label })] }), 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/src/input/Select.component.d.ts

@@ -1,47 +0,0 @@
-import { ReactNode } from "react";
-import { ApiType, ValidationRules } from "@utils";
-export interface SelectOptionProps {
-    label: string | ReactNode;
-    value: string | number;
-    searchable?: string[];
-    customLabel?: ReactNode;
-}
-export interface SelectProps {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    tip?: string | ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
-    value?: string | number | (string | number)[];
-    invalid?: string;
-    disabled?: boolean;
-    validations?: ValidationRules;
-    multiple?: boolean;
-    autoFocus?: boolean;
-    clearable?: boolean;
-    options?: SelectOptionProps[];
-    searchable?: boolean;
-    serverOptionControl?: ApiType & {
-        cacheName?: string | false;
-    };
-    idbOptionControl?: {
-        store: string;
-        labelKey: string;
-        valueKey: string;
-    };
-    serverSearchable?: boolean;
-    includedOptions?: SelectOptionProps[];
-    exceptOptions?: (string | number)[];
-    tempOptions?: SelectOptionProps[];
-    newOption?: SelectOptionProps;
-    maxShowOption?: number;
-    onChange?: (value: string | number | (string | number)[], data?: any) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    /** 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("react").JSX.Element;

package/dist/src/input/Select.component.js

@@ -1,275 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectComponent = SelectComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-;
-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 = "", }) {
-    const [inputShowValue, setInputShowValue] = (0, react_1.useState)("");
-    const [keydown, setKeydown] = (0, react_1.useState)(false);
-    const [useTemp, setUseTemp] = (0, react_1.useState)(true);
-    const [dataOptions, setDataOptions] = (0, react_1.useState)([]);
-    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)([]);
-    const [loadingOption, setLoadingOption] = (0, react_1.useState)(false);
-    const [activeOption, setActiveOption] = (0, react_1.useState)(0);
-    const [showOption, setShowOption] = (0, react_1.useState)(false);
-    const [keyword, setKeyword] = (0, react_1.useState)("");
-    const [keywordSearch] = (0, _utils_1.useLazySearch)(keyword);
-    // =========================>
-    // ## Initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, false);
-    const randomId = (0, _utils_1.useInputRandomId)();
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    // =========================>
-    // ## change value handler
-    // =========================>
-    (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);
-        }
-        else {
-            inputHandler.setValue("");
-            setInputShowValue("");
-        }
-    }, [value, dataOptions]);
-    // =========================>
-    // ## options handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        options?.length && setDataOptions([...options, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value)));
-    }, [options]);
-    const filterOption = (e) => {
-        if (dataOptions?.length) {
-            let newFilteredOptions = [];
-            if (searchable && !serverSearchable) {
-                if (e.target.value) {
-                    newFilteredOptions = dataOptions.filter((Option) => Option.label?.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1).slice(0, maxShowOption);
-                }
-                else {
-                    newFilteredOptions = dataOptions.slice(0, maxShowOption);
-                }
-            }
-            else {
-                newFilteredOptions = dataOptions;
-            }
-            setActiveOption(-1);
-            setFilteredOptions(newFilteredOptions);
-            setShowOption(true);
-        }
-    };
-    const onKeyDownOption = (e) => {
-        if (dataOptions?.length) {
-            if (e.keyCode === 13) {
-                const resultValue = filteredOptions?.at(activeOption);
-                setActiveOption(-1);
-                setFilteredOptions([]);
-                setShowOption(false);
-                if (!multiple) {
-                    setInputShowValue(resultValue?.label || inputShowValue);
-                    inputHandler.setValue(resultValue?.value || inputShowValue);
-                    serverSearchable && setKeyword(resultValue?.label || keyword);
-                }
-                else {
-                    if (resultValue?.value) {
-                        searchable ? setInputShowValue(resultValue.label) : searchable && setInputShowValue("");
-                        serverSearchable && setKeyword(resultValue.label);
-                        const values = Array.isArray(inputHandler.value) ? Array().concat(inputHandler.value)?.filter((val) => val != resultValue?.value) : [];
-                        if (values.find((val) => val == resultValue?.value)) {
-                            inputHandler.setValue(values);
-                        }
-                        else {
-                            inputHandler.setValue([...Array().concat(values), resultValue.value]);
-                        }
-                    }
-                }
-                e.preventDefault();
-            }
-            else if (e.keyCode === 38) {
-                if (activeOption === 0)
-                    return;
-                setActiveOption(activeOption - 1);
-            }
-            else if (e.keyCode === 40) {
-                if (activeOption + 1 >= (filteredOptions?.length || 0))
-                    return;
-                setActiveOption(activeOption + 1);
-            }
-        }
-    };
-    const fetchOptions = async () => {
-        setLoadingOption(true);
-        const serverControl = {
-            ...serverOptionControl,
-            params: serverSearchable ? { search: keywordSearch, ...(serverOptionControl?.params || {}) } : (serverOptionControl?.params || {}),
-            headers: { "X-Option": 1 }
-        };
-        const getCacheOptions = await _utils_1.cavity.get(serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`);
-        const cacheOptions = (getCacheOptions?.data || []);
-        if (cacheOptions?.length) {
-            setDataOptions([...cacheOptions, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value)));
-            setLoadingOption(false);
-        }
-        else {
-            const mutateOptions = await (0, _utils_1.api)(serverControl || {});
-            setDataOptions([...(mutateOptions?.data?.data || []), ...(includedOptions || [])].filter((op) => !exceptOptions?.includes(op.value)));
-            setShowOption(true);
-            if (serverOptionControl?.cacheName != false) {
-                _utils_1.cavity.set({
-                    key: serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`,
-                    data: mutateOptions?.data,
-                    expired: 5,
-                });
-            }
-            setLoadingOption(false);
-        }
-    };
-    const fetchIdbOptions = async () => {
-        setLoadingOption(true);
-        if (idbOptionControl?.store) {
-            const idb = _utils_1.registry.get("idb");
-            if (!idb) {
-                throw new Error("IndexedDB (IDB) extension is not installed.");
-            }
-            const getIdbOptions = await (await idb.query(idbOptionControl?.store)).get();
-            const rows = getIdbOptions.map((row) => {
-                const value = row[idbOptionControl.valueKey] || row["id"];
-                const label = row[idbOptionControl.labelKey] || row["id"];
-                return {
-                    label,
-                    value,
-                    ...row,
-                };
-            });
-            setDataOptions(rows);
-            setLoadingOption(false);
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        if (!serverSearchable) {
-            if (serverOptionControl?.path || serverOptionControl?.url) {
-                fetchOptions();
-            }
-            else if (idbOptionControl?.store) {
-                fetchIdbOptions();
-            }
-            else {
-                !options && setDataOptions([]);
-            }
-        }
-    }, [serverOptionControl?.path, serverOptionControl?.url]);
-    (0, react_1.useEffect)(() => {
-        if (serverSearchable) {
-            if (serverOptionControl?.path || serverOptionControl?.url) {
-                fetchOptions();
-            }
-            else {
-                !options && setDataOptions([]);
-            }
-        }
-    }, [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) => {
-                                setUseTemp(false);
-                                searchable && setInputShowValue(e.target.value);
-                                serverSearchable && setKeyword(e.target.value);
-                                inputHandler.setIdle(false);
-                                dataOptions?.length && filterOption(e);
-                            }, onFocus: (e) => {
-                                setUseTemp(false);
-                                inputHandler.setFocus(true);
-                                onFocus?.();
-                                dataOptions?.length && filterOption(e);
-                                searchable && e.target.select();
-                            }, onBlur: (e) => {
-                                setUseTemp(false);
-                                const value = e.target.value;
-                                const valueOption = dataOptions?.find((option) => option.label?.toLowerCase() == value?.toLowerCase());
-                                if (!keydown) {
-                                    if (!multiple) {
-                                        setTimeout(() => {
-                                            if (valueOption?.value) {
-                                                setInputShowValue(valueOption.label);
-                                                inputHandler.setValue(valueOption.value);
-                                                serverSearchable && setKeyword(valueOption.label);
-                                                onChange?.(valueOption.value, valueOption);
-                                            }
-                                            else {
-                                                setInputShowValue("");
-                                                serverSearchable && setKeyword("");
-                                                inputHandler.setValue("");
-                                                onChange?.("");
-                                            }
-                                        }, 140);
-                                    }
-                                    else {
-                                        setInputShowValue("");
-                                        serverSearchable && setKeyword("");
-                                        onChange?.("");
-                                    }
-                                }
-                                setTimeout(() => {
-                                    inputHandler.setFocus(false);
-                                }, 100);
-                                onBlur?.();
-                            }, onKeyDown: (e) => {
-                                dataOptions?.length && onKeyDownOption(e);
-                            }, autoComplete: "off", autoFocus: autoFocus }), (multiple && !searchable || (searchable && !inputHandler.focus)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("select-multiple-values", leftIcon ? "select-multiple-values-left-icon" : "select-multiple-values-no-icon"), style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "3.2rem"})` }, children: (0, jsx_runtime_1.jsx)("div", { className: "input-values-container", children: multiple && typeof inputHandler.value != "string" && Array().concat(inputHandler.value)?.map((item, key) => {
-                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: dataOptions?.find((option) => option.value == item)?.label }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => {
-                                                    const values = Array().concat(inputHandler.value);
-                                                    const index = values.findIndex((val) => val == item);
-                                                    inputHandler.setValue(values.filter((_, val) => val != index));
-                                                    if (!values.filter((_, val) => val != index)?.length) {
-                                                        setInputShowValue("");
-                                                        serverSearchable && setKeyword("");
-                                                        onChange?.("");
-                                                    }
-                                                } })] }, key));
-                                }) }) })), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { 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: () => {
-                                setInputShowValue("");
-                                inputHandler.setValue("");
-                                onChange?.("");
-                            }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes }) })), (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)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown }) })] }), !!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);
-                                        }
-                                        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)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, 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/src/modal/BottomSheet.component.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-export type BottomSheetProps = {
-    show: boolean;
-    children: ReactNode;
-    onClose: () => void;
-    size?: string | number;
-    maxSize?: string | number;
-    footer?: ReactNode;
-    /** Use custom class with: "backdrop::", "footer::". */
-    className?: string;
-};
-export declare const BottomSheetComponent: import("react").ComponentType<BottomSheetProps>;