@skalfa/skalfa-component 1.0.2 → 1.0.3

package/dist/src/supervision/TableSupervision.component.js

@@ -1,273 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableSupervisionComponent = TableSupervisionComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-const _contexts_1 = require("@contexts");
-const _components_1 = require("@components");
-const ExportExcel = _utils_1.registry.get("ExportExcel");
-const ImportExcel = _utils_1.registry.get("ImportExcel");
-function TableSupervisionComponent({ title, id, fetchControl, columnControl, formControl, detailControl, actionControl, actionBulkingControl, block, controlBar, noIndex, responsiveControl, urlParam, importControl, }) {
-    const { tableKey, tableControl, data, selected, setSelected, checks, setChecks, reset, focus } = (0, _utils_1.useTable)(fetchControl, id, title, (urlParam || true));
-    const { setToggle, toggle } = (0, _contexts_1.useToggleContext)();
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const isDetailControlObject = detailControl && typeof detailControl === "object" && !Array.isArray(detailControl);
-    const detailAction = isDetailControlObject
-        ? detailControl?.action
-        : (typeof detailControl === "function" ? detailControl : undefined);
-    const detailContent = isDetailControlObject
-        ? detailControl?.content
-        : (typeof detailControl === "function" ? undefined : detailControl);
-    const detailModalProps = isDetailControlObject
-        ? detailControl?.modal
-        : undefined;
-    const toggleKey = (0, react_1.useMemo)(() => _utils_1.conversion.strSnake(tableKey).toUpperCase(), [tableKey]);
-    // ============================
-    // ## Shortcut register
-    // ============================
-    (0, react_1.useEffect)(() => {
-        if (!isSm) {
-            if (controlBar == undefined || controlBar?.includes("CREATE")) {
-                _utils_1.shortcut.register("alt+n", () => {
-                    setToggle(`MODAL_FORM_${toggleKey}`);
-                    setSelected(null);
-                }, "Tambah Data Baru");
-            }
-            if (controlBar?.includes("IMPORT")) {
-                _utils_1.shortcut.register("alt+i", () => {
-                    setToggle(`MODAL_IMPORT_${toggleKey}`);
-                }, "Import Data Dari Excel");
-            }
-            if (controlBar?.includes("EXPORT")) {
-                _utils_1.shortcut.register("alt+e", () => {
-                    setToggle(`MODAL_EXPORT_${toggleKey}`);
-                }, "Export Data Ke Excel");
-            }
-        }
-        return () => {
-            if (!isSm) {
-                _utils_1.shortcut.unregister("alt+n");
-                _utils_1.shortcut.unregister("alt+i");
-                _utils_1.shortcut.unregister("alt+e");
-            }
-        };
-    }, [controlBar, isSm]);
-    (0, react_1.useEffect)(() => {
-        if (actionControl && Array.isArray(actionControl) && selected) {
-            actionControl.filter((ac) => typeof ac == "object")?.forEach((ac) => {
-                if (typeof ac == "object" && ac?.shortcut) {
-                    _utils_1.shortcut.register(ac.shortcut.key, () => {
-                        setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`);
-                    }, ac.shortcut.description);
-                }
-            });
-        }
-        return () => {
-            if (actionControl && Array.isArray(actionControl)) {
-                actionControl.filter((ac) => typeof ac == "object")?.forEach((ac) => {
-                    if (typeof ac == "object" && ac?.shortcut) {
-                        _utils_1.shortcut.unregister(ac.shortcut.key);
-                    }
-                });
-            }
-        };
-    }, [actionControl, selected]);
-    const columns = (0, react_1.useMemo)(() => {
-        return columnControl ? columnControl.map((col) => {
-            if (typeof col == "string") {
-                return {
-                    selector: col,
-                    label: col,
-                };
-            }
-            else {
-                return { ...col };
-            }
-        })
-            : data?.columns || data?.data?.at(0) ? Object.keys(data.data[0]).map((col) => {
-                return {
-                    selector: col,
-                    label: col,
-                };
-            })
-                : [];
-    }, [columnControl, data]);
-    const renderTableAction = (actions, item, options) => {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-supervision-action-list", options?.className), children: (Array.isArray(actions) ? actions : (actions || actions == undefined) ? ['EDIT', "DELETE"] : [])?.map((action, key) => {
-                    if (action == "EDIT") {
-                        return ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEdit, label: "Ubah", variant: "outline", paint: "warning", size: options?.size || "xs", rounded: true, onClick: () => {
-                                setToggle(`MODAL_FORM_${toggleKey}`);
-                                item && setSelected?.(item);
-                            } }, key));
-                    }
-                    if (action == "DELETE") {
-                        return ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTrash, label: "Hapus", variant: "outline", paint: "danger", size: options?.size || "xs", rounded: true, onClick: () => {
-                                setToggle(`MODAL_DELETE_${toggleKey}`);
-                                item && setSelected?.(item);
-                            } }, key));
-                    }
-                    if (typeof action == "object") {
-                        return ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: action.label, variant: "outline", paint: "primary", size: options?.size || "xs", rounded: true, onClick: () => {
-                                setToggle(`MODAL_${_utils_1.conversion.strSnake(action.label).toUpperCase()}_${toggleKey}`);
-                                item && setSelected?.(item);
-                            }, ...action.button }, key));
-                    }
-                    if (typeof action == "function") {
-                        return ((0, jsx_runtime_1.jsx)("div", { children: action(item || {}, (type) => {
-                                setToggle(`MODAL_${type}_${toggleKey}`);
-                                item && setSelected?.(item);
-                            }, () => item && setSelected?.(item)) }, key));
-                    }
-                }) }) }));
-    };
-    // ============================
-    // ## Render detail page 
-    // ============================
-    const detailPage = (0, react_1.useMemo)(() => {
-        if (detailContent === false || detailContent === undefined)
-            return null;
-        return ((0, jsx_runtime_1.jsx)("div", { className: "table-supervision-detail-container", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-detail-body", children: !!selected && (typeof detailContent === "object" && Array.isArray(detailContent) ? detailContent?.map((column, key) => {
-                    if (typeof column === "string") {
-                        return ((0, jsx_runtime_1.jsx)(_components_1.TypographyColumnComponent, { title: columns?.find((c) => c.selector == column)?.label, content: selected[column] }, key));
-                    }
-                    else if (typeof column === "object" && column !== null) {
-                        const colObj = column;
-                        const rawContent = typeof colObj.item === "string" ? selected[colObj.item] : colObj.item(selected);
-                        const conversionKey = colObj.conversion;
-                        const content = conversionKey && _utils_1.conversion[conversionKey] ? _utils_1.conversion[conversionKey](rawContent) : rawContent;
-                        return ((0, jsx_runtime_1.jsx)(_components_1.TypographyColumnComponent, { title: colObj.label, content: content }, key));
-                    }
-                    else {
-                        return column?.(selected);
-                    }
-                }) : typeof detailContent === "function" ? detailContent(selected) : columns?.map((column, key) => ((0, jsx_runtime_1.jsx)(_components_1.TypographyColumnComponent, { title: column.label, content: selected[column.selector] }, key)))) }) }));
-    }, [selected, detailContent, columns]);
-    // ============================
-    // ## Form preparation
-    // ============================
-    const fields = (0, react_1.useMemo)(() => {
-        return formControl?.fields?.length ? formControl?.fields.map((form) => {
-            return typeof form === "string" ? {
-                label: form,
-                name: _utils_1.conversion.strSnake(form),
-                type: "text",
-                visibility: "*"
-            } : {
-                ...form,
-                visibility: form.visibility || "*"
-            };
-        }) : [];
-    }, [formControl]);
-    const formPage = (0, react_1.useMemo)(() => {
-        return ((0, jsx_runtime_1.jsx)(_components_1.FormSupervisionComponent, { fields: fields, defaultValue: formControl?.defaultValue, payload: formControl?.payload, submitControl: fetchControl, onSuccess: () => {
-                setToggle(`MODAL_FORM_${toggleKey}`, false);
-                reset();
-            } }));
-    }, [selected, fields]);
-    const dataTables = (0, react_1.useMemo)(() => {
-        return data?.data?.map((item) => {
-            return {
-                ...item,
-                action: renderTableAction(actionControl, item)
-            };
-        }) || [];
-    }, [actionControl, data]);
-    (0, react_1.useEffect)(() => {
-        if (toggle[`REFRESH_${toggleKey}`] != undefined)
-            reset();
-    }, [toggle[`REFRESH_${toggleKey}`]]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: [title && (0, jsx_runtime_1.jsx)("h1", { className: "table-supervision-title", children: title }), (0, jsx_runtime_1.jsx)(_components_1.TableComponent, { id: tableKey, controlBar: controlBar?.map((cb) => {
-                        if (cb == "CREATE") {
-                            if (isSm)
-                                return;
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
-                                        setToggle(`MODAL_FORM_${toggleKey}`);
-                                        setSelected(null);
-                                    } }) }, "button-add"));
-                        }
-                        if (cb == "IMPORT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Import", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_IMPORT_${toggleKey}`), size: "sm" }) }, "import"));
-                        }
-                        if (cb == "EXPORT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFileExcel, label: "Export", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_EXPORT_${toggleKey}`), size: "sm" }) }, "export-excel"));
-                        }
-                        if (cb == "PRINT") {
-                            return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faFilePdf, label: "Cetak", variant: "outline", className: "table-supervision-control-button", onClick: () => setToggle(`MODAL_PRINT_${toggleKey}`), size: "sm" }) }, "export-pdf"));
-                        }
-                        return cb;
-                    }) || [
-                        ...(!isSm ? [
-                            (0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => {
-                                        setToggle(`MODAL_FORM_${toggleKey}`);
-                                        setSelected(null);
-                                    } }) }, "button-add")
-                        ] : []),
-                        "SEARCH",
-                        ...(columns?.filter((c) => !!c.filterable)?.length ? ["FILTER"] : []),
-                        ...(columns?.filter((c) => !!c.sortable)?.length ? ["SORT"] : []),
-                        "SELECTABLE", "REFRESH",
-                    ], columns: columns, data: dataTables, onRowClick: detailAction ? detailAction : (detailContent !== false && detailContent !== undefined) ? (e) => {
-                        setToggle(`MODAL_SHOW_${toggleKey}`);
-                        setSelected(e);
-                    } : undefined, actionBulking: actionBulkingControl, checks: checks || [], onChangeChecks: (e) => setChecks(e), block: block, focus: focus, noIndex: noIndex, responsiveControl: responsiveControl ? {
-                        mobile: responsiveControl?.mobile == true ? {
-                            leftActionControl: (Array.isArray(actionControl) ? actionControl : (actionControl || actionControl == undefined) ? ['EDIT', "DELETE"] : []).includes('EDIT') ? {
-                                icon: free_solid_svg_icons_1.faEdit,
-                                onAction: (item) => {
-                                    setToggle(`MODAL_FORM_${toggleKey}`);
-                                    item && setSelected?.(item);
-                                }
-                            } : undefined,
-                            rightActionControl: (Array.isArray(actionControl) ? actionControl : (actionControl || actionControl == undefined) ? ['EDIT', "DELETE"] : []).includes('DELETE') ? {
-                                icon: free_solid_svg_icons_1.faTrash,
-                                onAction: (item) => {
-                                    setToggle(`MODAL_DELETE_${toggleKey}`);
-                                    item && setSelected?.(item);
-                                }
-                            } : undefined
-                        } : responsiveControl?.mobile || undefined,
-                    } : undefined, ...tableControl }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, className: "table-supervision-mobile-add-btn", size: "lg", rounded: true, onClick: () => {
-                        setToggle(`MODAL_FORM_${toggleKey}`);
-                        setSelected(null);
-                    } }), (detailContent !== false && detailContent !== undefined) && (isSm ? ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), size: "98vh", ...detailModalProps, children: detailPage })) : ((0, jsx_runtime_1.jsx)(_components_1.FloatingPageComponent, { show: !!toggle[`MODAL_SHOW_${toggleKey}`], onClose: () => setToggle(`MODAL_SHOW_${toggleKey}`, false), title: "Detail", className: "table-supervision-modal", footer: renderTableAction(actionControl, undefined, { className: isSm ? "justify-end p-2 bg-background" : "justify-end", size: isSm ? "sm" : "md" }), ...detailModalProps, children: detailPage }))), isSm ? ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), size: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-mobile-container", children: formPage }) })) : ((0, jsx_runtime_1.jsx)(_components_1.FloatingPageComponent, { show: !!toggle[`MODAL_FORM_${toggleKey}`], onClose: () => setToggle(`MODAL_FORM_${toggleKey}`, false), title: !!selected ? "Ubah Data" : "Tambah Data", className: (0, _utils_1.cn)("table-supervision-modal", formControl?.modalControl?.className), children: (0, jsx_runtime_1.jsx)("div", { className: "table-supervision-form-container", children: formPage }) })), ExportExcel && ((0, jsx_runtime_1.jsx)(_components_1.FloatingPageComponent, { show: !!toggle[`MODAL_EXPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_EXPORT_${toggleKey}`, false), title: "Export Ke Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ExportExcel, { fetchControl: fetchControl, filename: "Export - " + title, columnControl: columns?.map((cc) => ({
-                            label: cc.label || "",
-                            selector: cc.selector || "",
-                            status: cc.exportable === false ? "hidden" : cc.exportable === true ? "default" : typeof cc.exportable === "string" ? cc.exportable : undefined,
-                        })) }) })), ImportExcel && ((0, jsx_runtime_1.jsx)(_components_1.FloatingPageComponent, { show: !!toggle[`MODAL_IMPORT_${toggleKey}`], onClose: () => setToggle(`MODAL_IMPORT_${toggleKey}`, false), title: "Import Dari Excel", className: "table-supervision-large-modal", children: (0, jsx_runtime_1.jsx)(ImportExcel, { submitControl: importControl, fetchControl: fetchControl.path ? {
-                            path: fetchControl.path,
-                        } : undefined, columnControl: columns?.filter((cc) => cc.importable !== false).map((cc) => ({
-                            label: cc.label || "",
-                            selector: cc.selector || "",
-                        })) }) })), (0, jsx_runtime_1.jsx)(_components_1.ModalConfirmComponent, { show: !!toggle[`MODAL_DELETE_${toggleKey}`], onClose: () => setToggle(`MODAL_DELETE_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `Menghapus Data?`, submitControl: {
-                        onSubmit: {
-                            ...(fetchControl.path
-                                ? { path: `${fetchControl.path}/${selected?.id || ""}` }
-                                : fetchControl.url ? { url: `${fetchControl.url}/${selected?.id || ""}` }
-                                    : { idb: { ...fetchControl?.idb, id: selected?.id || "" } }),
-                            method: "DELETE",
-                        },
-                        onSuccess: () => {
-                            reset();
-                            setToggle(`MODAL_DELETE_${toggleKey}`, false);
-                        },
-                    }, children: columns?.at(0)?.selector && selected ? ((0, jsx_runtime_1.jsxs)("p", { className: "table-supervision-confirm-text", children: ["Yakin menghapus ", (0, jsx_runtime_1.jsxs)("span", { className: "table-supervision-confirm-item-name", children: ["\"", selected[columns?.at(0)?.selector || ""], "\""] }), "?"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "table-supervision-confirm-text", children: "Yakin yang dihapus sudah benar?" })) }), actionControl && Array.isArray(actionControl) && actionControl.filter((ac) => typeof ac == "object")?.map((ac, acKey) => {
-                    const submitControl = ac.modal?.submitControl?.onSubmit;
-                    return ((0, jsx_runtime_1.jsx)(_components_1.ModalConfirmComponent, { show: !!toggle[`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`], onClose: () => setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false), icon: free_regular_svg_icons_1.faQuestionCircle, title: `${ac.label} Data?`, submitControl: {
-                            onSubmit: {
-                                ...(submitControl?.path
-                                    ? { path: `${submitControl.path}/${selected?.id || ""}` }
-                                    : submitControl?.url ? { url: `${submitControl.url}/${selected?.id || ""}` }
-                                        : { idb: { ...submitControl?.idb, id: selected?.id || "" } }),
-                                ...ac.modal?.submitControl?.onSubmit,
-                            },
-                            onSuccess: () => {
-                                reset();
-                                setToggle(`MODAL_${_utils_1.conversion.strSnake(ac.label).toUpperCase()}_${toggleKey}`, false);
-                            },
-                        }, ...ac.modal, children: columns?.at(0)?.selector && selected ? ((0, jsx_runtime_1.jsxs)("p", { className: "table-supervision-confirm-text", children: ["Yakin melakukan aksi untuk data ", (0, jsx_runtime_1.jsxs)("span", { className: "table-supervision-confirm-item-name", children: ["\"", selected[columns?.at(0)?.selector || ""], "\""] }), "?"] })) : ((0, jsx_runtime_1.jsx)("p", { className: "table-supervision-confirm-text", children: "Yakin aksi yang dilakukan sudah benar?" })) }, acKey));
-                })] }) }));
-}

package/dist/src/table/ControlBar.component.d.ts

@@ -1,34 +0,0 @@
-import { ReactNode } from 'react';
-import { ApiFilterType } from '@utils';
-import { FilterColumnOption } from '@components';
-export type ControlBarOptionType = "SEARCH" | "SEARCHABLE" | "FILTER" | "SELECTABLE" | "REFRESH" | ReactNode;
-export interface ControlBarProps {
-    id?: string;
-    options?: ControlBarOptionType[];
-    className?: string;
-    search?: string;
-    onSearch?: (searchable: string) => void;
-    searchableOptions?: {
-        label: string | ReactNode;
-        selector: string;
-    }[];
-    searchable?: string[];
-    onSearchable?: (searchable: string[]) => void;
-    selectableOptions?: {
-        label: string | ReactNode;
-        selector: string;
-    }[];
-    selectable?: string[];
-    onSelectable?: (searchable: string[]) => void;
-    sortableOptions?: {
-        label: string | ReactNode;
-        selector: string;
-    }[];
-    sort?: string[];
-    onSort?: (sort: string[]) => void;
-    filterableColumns?: FilterColumnOption[];
-    onFilter?: (filters: ApiFilterType[]) => void;
-    filter?: ApiFilterType[];
-    onRefresh?: () => void;
-}
-export declare function ControlBarComponent({ id, options, className, search, onSearch, searchableOptions, searchable, onSearchable, selectableOptions, selectable, onSelectable, sortableOptions, sort, onSort, filterableColumns, onFilter, filter, onRefresh }: ControlBarProps): import("react").JSX.Element;

package/dist/src/table/ControlBar.component.js

@@ -1,205 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlBarComponent = ControlBarComponent;
-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");
-const _contexts_1 = require("@contexts");
-const _components_1 = require("@components");
-function ControlBarComponent({ id = "", options, className, search, onSearch, searchableOptions, searchable, onSearchable, selectableOptions, selectable, onSelectable, sortableOptions, sort, onSort, filterableColumns, onFilter, filter, onRefresh }) {
-    const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const searchRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (options?.includes("SEARCH")) {
-            _utils_1.shortcut.register("ctrl+s", () => {
-                searchRef.current?.focus();
-            }, "Cari");
-        }
-        if (options?.includes("FILTER")) {
-            _utils_1.shortcut.register("ctrl+f", () => {
-                setToggle("FILTER");
-            }, "Filter");
-        }
-        if (options?.includes("SORT")) {
-            _utils_1.shortcut.register("ctrl+o", () => {
-                setToggle("SORT");
-            }, "Urutkan");
-        }
-        if (options?.includes("SELECTABLE")) {
-            _utils_1.shortcut.register("ctrl+l", () => {
-                setToggle("SELECTABLE");
-            }, "Kolom Ditampilkan");
-        }
-        if (options?.includes("REFRESH")) {
-            _utils_1.shortcut.register("ctrl+shift+r", () => {
-                onRefresh?.();
-            }, "Refresh Tabel");
-        }
-        return () => {
-            options?.includes("SEARCH") && _utils_1.shortcut.unregister("ctrl+s");
-            options?.includes("FILTER") && _utils_1.shortcut.unregister("ctrl+f");
-            options?.includes("SORT") && _utils_1.shortcut.unregister("ctrl+o");
-            options?.includes("SELECTABLE") && _utils_1.shortcut.unregister("ctrl+l");
-            options?.includes("REFRESH") && _utils_1.shortcut.unregister("ctrl+shift+r");
-        };
-    }, [options]);
-    const onChangeSort = (item) => {
-        if (!!sort?.find((s) => s.split(" ")?.at(0) == item)) {
-            const findSort = sort.find((s) => s.split(" ")?.at(0) == item);
-            if (findSort?.split(" ")?.at(1) == "desc") {
-                onSort?.(sort.filter((s) => s != findSort));
-            }
-            else {
-                const newSorts = [...sort];
-                newSorts[newSorts?.findIndex((s) => s == findSort)] = `${item} desc`;
-                onSort?.(newSorts);
-            }
-        }
-        else {
-            onSort?.([...(sort || []), `${item} asc`]);
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("control-bar", className), children: (isSm ? [
-                    ...(options?.filter((op, iop) => iop == 0 || op == "REFRESH") || []),
-                    ...(options && options?.length > 1 ? ['MOBILE_OPTION'] : [])
-                ] : options)?.map((option, key) => {
-                    {
-                        // =========================>
-                        // ## Create button 
-                        // =========================>
-                    }
-                    if (option == "CREATE") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-create-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, label: "Tambah Data", size: "sm", onClick: () => setToggle(`MODAL_FORM_${_utils_1.conversion.strSnake(id).toUpperCase()}`) }) }, "button-add"));
-                    }
-                    {
-                        // =========================>
-                        // ## Search Field
-                        // =========================>
-                    }
-                    if (option == "SEARCH") {
-                        const searchable = !!options?.find((option) => option == "SEARCHABLE");
-                        return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("control-bar-search-wrapper", searchable ? "control-bar-search-wrapper-searchable" : "control-bar-search-wrapper-standalone"), children: (0, jsx_runtime_1.jsx)(_components_1.InputComponent, { ref: searchRef, name: "search", placeholder: "Cari disini...", rightIcon: free_solid_svg_icons_1.faMagnifyingGlass, value: search, onChange: (e) => onSearch?.(e), className: (0, _utils_1.cn)("control-bar-search-input", searchable && "control-bar-search-input-searchable") }) }, key));
-                    }
-                    {
-                        // =========================>
-                        // ## Searchable Field
-                        // =========================>
-                    }
-                    if (option == "SEARCHABLE") {
-                        return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-searchable-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: "searchableColumn", leftIcon: free_solid_svg_icons_1.faSearch, options: searchableOptions?.map((column) => {
-                                    return {
-                                        label: column.label,
-                                        value: column.selector,
-                                    };
-                                }) || [], value: searchable, onChange: (e) => onSearchable?.(e), className: "control-bar-searchable-select", multiple: true }) }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                    }
-                    {
-                        // =========================>
-                        // ## Selectable Button
-                        // =========================>
-                    }
-                    if (option == "SELECTABLE") {
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEyeLowVision, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SELECTABLE"), size: "sm" }), (0, jsx_runtime_1.jsx)(_components_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SELECTABLE", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SELECTABLE && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(_components_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
-                                                    return {
-                                                        label: option.label,
-                                                        value: option.selector,
-                                                    };
-                                                }), onChange: (e) => onSelectable?.(Array().concat(e).map((val) => String(val))), value: selectable, className: 'control-bar-selectable-checkbox-list', classNameCheckbox: 'control-bar-selectable-checkbox label::text-xs' })] }) })] }, key));
-                    }
-                    {
-                        // =========================>
-                        // ## Sort Button
-                        // =========================>
-                    }
-                    if (option == "SORT") {
-                        return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { className: "control-bar-button-wrapper", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faSort, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("SORT"), size: "sm" }), (0, jsx_runtime_1.jsx)(_components_1.OutsideClickComponent, { onOutsideClick: () => setToggle("SORT", false), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("control-bar-dropdown", !toggle.SORT && "control-bar-dropdown-hidden"), children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-dropdown-title', children: "Urut Berdasarkan" }), (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-sort-list', children: sortableOptions?.map((option, key) => {
-                                                    const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
-                                                    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)('control-bar-sort-item', !!sortBy && "control-bar-sort-item-active"), onClick: () => onChangeSort(option.selector), children: [(0, jsx_runtime_1.jsx)("p", { children: option.label }), sortBy && ((0, jsx_runtime_1.jsxs)("div", { className: 'control-bar-sort-active-icon', children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: sortBy == "desc" ? free_solid_svg_icons_1.faArrowDownZA : free_solid_svg_icons_1.faArrowUpAZ, className: 'control-bar-sort-icon' }), sort?.length && sort?.length > 1 && (0, jsx_runtime_1.jsx)("span", { className: 'control-bar-sort-badge', children: sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1 })] }))] }, key));
-                                                }) })] }) })] }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                    }
-                    {
-                        // =========================>
-                        // ## Refresh Button 
-                        // =========================>
-                    }
-                    if (option == "REFRESH") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper-refresh", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faRefresh, variant: "outline", className: "control-bar-icon-button", onClick: () => onRefresh?.(), size: "sm" }) }, key));
-                    }
-                    {
-                        // =========================>
-                        // ## Filter Button 
-                        // =========================>
-                    }
-                    if (option == "FILTER") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faSliders, label: "Filter", variant: "outline", className: "control-bar-filter-button", onClick: () => setToggle("FILTER"), size: "sm" }) }, key));
-                    }
-                    {
-                        // =========================>
-                        // ## Mobile option button
-                        // =========================>
-                    }
-                    if (option == "MOBILE_OPTION") {
-                        return ((0, jsx_runtime_1.jsx)("div", { className: "control-bar-button-wrapper", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEllipsisV, variant: "outline", className: "control-bar-icon-button", onClick: () => setToggle("MOBILE_OPTION"), size: "sm" }) }, key));
-                    }
-                    return option;
-                }) }), !!filterableColumns && !!filterableColumns?.length && ((0, jsx_runtime_1.jsx)(_components_1.FilterComponent, { className: (0, _utils_1.cn)(!toggle.FILTER ? "control-bar-filter-panel-hidden" : "control-bar-filter-panel"), columns: filterableColumns, onChange: onFilter, value: filter, onMinimize: () => setToggle("FILTER") })), isSm && ((0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: !!toggle["MOBILE_OPTION"], onClose: () => setToggle("MOBILE_OPTION", false), maxSize: "98vh", children: (0, jsx_runtime_1.jsx)("div", { className: 'control-bar-mobile-container', children: options?.filter((op, iop) => (iop != 0 && op != "CREATE" && op != "REFRESH"))?.map((option, key) => {
-                        {
-                            // =========================>
-                            // ## Search Field
-                            // =========================>
-                        }
-                        if (option == "SEARCH") {
-                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: "search", placeholder: "Cari disini...", rightIcon: free_solid_svg_icons_1.faMagnifyingGlass, value: search, onChange: (e) => onSearch?.(e) }) }, key));
-                        }
-                        {
-                            // =========================>
-                            // ## Searchable Field
-                            // =========================>
-                        }
-                        if (option == "SEARCHABLE") {
-                            return searchableOptions?.length ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: "searchableColumn", leftIcon: free_solid_svg_icons_1.faSearch, options: searchableOptions?.map((column) => {
-                                        return {
-                                            label: column.label,
-                                            value: column.selector,
-                                        };
-                                    }) || [], value: searchable, onChange: (e) => onSearchable?.(e), multiple: true }) }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                        }
-                        {
-                            // =========================>
-                            // ## Selectable Button
-                            // =========================>
-                        }
-                        if (option == "SELECTABLE") {
-                            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "Kolom Ditampilkan" }), (0, jsx_runtime_1.jsx)(_components_1.InputCheckboxComponent, { vertical: true, name: "show_column", options: selectableOptions?.map((option) => {
-                                            return {
-                                                label: option.label,
-                                                value: option.selector,
-                                            };
-                                        }), onChange: (e) => onSelectable?.(Array().concat(e).map((val) => String(val))), value: selectable, className: 'control-bar-mobile-checkbox-list', classNameCheckbox: 'control-bar-selectable-checkbox label::text-xs' })] }, key));
-                        }
-                        {
-                            // =========================>
-                            // ## Sort Button
-                            // =========================>
-                        }
-                        if (option == "SORT") {
-                            return sortableOptions?.length ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: 'control-bar-mobile-title', children: "Urut Berdasarkan" }), (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-col', children: sortableOptions?.map((option, key) => {
-                                            const sortBy = sort?.find((s) => s.split(" ")?.at(0) == option?.selector)?.split(" ")?.at(1) || "";
-                                            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)('control-bar-mobile-sort-item', !!sortBy && "control-bar-mobile-sort-item-active"), onClick: () => onChangeSort(option.selector), children: [(0, jsx_runtime_1.jsx)("p", { children: option.label }), sortBy && ((0, jsx_runtime_1.jsxs)("div", { className: 'text-primary', children: [(0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: sortBy == "desc" ? free_solid_svg_icons_1.faArrowDownZA : free_solid_svg_icons_1.faArrowUpAZ, className: 'text-xs' }), sort?.length && sort?.length > 1 && (0, jsx_runtime_1.jsx)("span", { className: 'text-[9px] ml-1', children: sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1 })] }))] }, key));
-                                        }) })] }, key)) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-                        }
-                        {
-                            // =========================>
-                            // ## Filter 
-                            // =========================>
-                        }
-                        if (option == "FILTER") {
-                            return ((0, jsx_runtime_1.jsx)("div", { children: filterableColumns && filterableColumns?.length && ((0, jsx_runtime_1.jsx)(_components_1.FilterComponent, { className: 'control-bar-mobile-filter title::text-xs', columns: filterableColumns, onChange: onFilter, value: filter })) }, key));
-                        }
-                        return option;
-                    }) }) }))] }));
-}

package/dist/src/table/FilterComponent.d.ts

@@ -1,45 +0,0 @@
-import { ApiFilterType } from "@utils";
-export type FilterColumnOption = {
-    label: string;
-    selector: string;
-    type: "text" | "number" | "currency" | "date";
-} | {
-    label: string;
-    selector: string;
-    type: "select";
-    options: {
-        label: string;
-        value: any;
-    }[];
-};
-export type FilterBookmark = {
-    id: string;
-    name: string;
-    filters: ApiFilterType[];
-    createdAt: number;
-};
-export interface AdvancedFilterProps {
-    columns: FilterColumnOption[];
-    onChange?: (filters: ApiFilterType[]) => void;
-    value?: ApiFilterType[];
-    onMinimize?: () => void;
-    /** Use custom class with: "title::". */
-    className?: string;
-}
-export declare function FilterComponent({ columns, onChange, value, onMinimize, className, }: AdvancedFilterProps): import("react").JSX.Element;
-interface FilterInputProps {
-    type?: string | null;
-    name: string;
-    value: string | number | number[] | string[] | null;
-    onChange: (value: any) => void;
-    options?: {
-        label: string;
-        value: any;
-    }[];
-    placeholder?: string;
-    className?: string;
-    between?: boolean;
-    multiple?: boolean;
-}
-export declare function InputFilterValueComponent({ type, name, value, onChange, options, placeholder, className, between, multiple, }: FilterInputProps): import("react").JSX.Element;
-export {};