@skalfa/skalfa-component 1.0.0 → 1.0.3

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 {};

package/dist/src/table/FilterComponent.js

@@ -1,132 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterComponent = FilterComponent;
-exports.InputFilterValueComponent = InputFilterValueComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-const _contexts_1 = require("@contexts");
-const free_regular_svg_icons_1 = require("@fortawesome/free-regular-svg-icons");
-const FILTER_OPERATORS = [
-    { label: "Cari", value: "li" },
-    { label: "Sama", value: "eq" },
-    { label: "Tidak Sama", value: "ne" },
-    { label: "Termasuk", value: "in" },
-    { label: "Tidak Termasuk", value: "ni" },
-    { label: "Antara", value: "bw" },
-];
-const LOGIC_OPTIONS = [
-    { label: "Dan", value: "and" },
-    { label: "Atau", value: "or" },
-];
-const BOOKMARK_KEY = "filter-bookmarks";
-function FilterComponent({ columns, onChange, value, onMinimize, className = "", }) {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
-    const [filters, setFilters] = (0, react_1.useState)([]);
-    const [bookmarks, setBookmarks] = (0, react_1.useState)([]);
-    const handleChange = (index, key, value) => {
-        const updated = [...filters];
-        updated[index][key] = value;
-        if (key === "column") {
-            updated[index].type = "";
-            updated[index].value = "";
-        }
-        setFilters(updated);
-    };
-    const addFilter = () => {
-        setFilters([
-            ...filters,
-            { column: "", type: "", value: "", logic: filters.length ? "and" : undefined },
-        ]);
-    };
-    const removeFilter = (index) => {
-        const updated = filters.filter((_, i) => i !== index);
-        setFilters(updated);
-    };
-    (0, react_1.useEffect)(() => {
-        if (onChange)
-            onChange(filters);
-    }, [filters]);
-    (0, react_1.useEffect)(() => { }, [value]);
-    (0, react_1.useEffect)(() => {
-        setBookmarks(JSON.parse(localStorage.getItem(BOOKMARK_KEY) || "[]"));
-    }, []);
-    (0, react_1.useEffect)(() => {
-        localStorage.setItem(BOOKMARK_KEY, JSON.stringify(bookmarks));
-    }, [bookmarks]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("filter-panel", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-header", children: [(0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)((0, _utils_1.pcn)(className, "title")), children: "Filter" }), (0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-controls", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-panel-bookmarks-wrapper", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_regular_svg_icons_1.faBookmark, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK", { bookmark_id: "new" }) }), !!bookmarks?.length && ((0, jsx_runtime_1.jsx)(_components_1.ChipComponent, { items: bookmarks.slice(0, 5).map((b) => b.name), onClick: (_, index) => setFilters(bookmarks[index]?.filters), onDelete: (_, index) => setBookmarks(bookmarks.filter((_, bi) => bi != index)) })), bookmarks?.length > 5 && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faEllipsisH, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setToggle("MODAL_BOOKMARK_LIST") }))] }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faRotate, label: "Bersihkan", variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: () => setFilters([]) }), onMinimize && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronUp, variant: "outline", paint: "primary", className: "filter-panel-bookmark-btn icon::text-slate-400", size: "xs", onClick: onMinimize }))] })] }), filters.map((f, i) => {
-                        const column = columns.find((c) => c.selector === f.column);
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-row", children: [i > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-logic", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_logic_${i}`, options: LOGIC_OPTIONS, placeholder: "Dan/Atau", value: f.logic, onChange: (e) => handleChange(i, "logic", e), className: "filter-input-field" }) })), (0, jsx_runtime_1.jsx)("div", { className: i > 0 ? "filter-col-column-with-logic" : "filter-col-column", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_column_${i}`, options: columns.map((c) => ({
-                                            label: c.label,
-                                            value: c.selector,
-                                        })), placeholder: "Kolom", value: f.column, onChange: (e) => handleChange(i, "column", e), className: "filter-input-field" }) }), (0, jsx_runtime_1.jsx)("div", { className: "filter-col-operator", children: (0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `filter_operator_${i}`, options: FILTER_OPERATORS, placeholder: "Operator", value: f.type, onChange: (e) => handleChange(i, "type", e), className: "filter-input-field" }) }), isSm && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" })), column && ((0, jsx_runtime_1.jsx)("div", { className: "filter-col-value", children: (0, jsx_runtime_1.jsx)(InputFilterValueComponent, { type: column.type, name: `filter_value_${i}`, placeholder: "...", value: f.value || "", onChange: (e) => handleChange(i, "value", e), options: column.type === "select" && column.options ? column.options : [], className: "filter-input-field", between: f.type === "bw", multiple: ["in", "ni"].includes(f.type || "") }) })), !isSm && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, paint: "danger", variant: "outline", onClick: () => removeFilter(i), size: "xs" }))] }, i));
-                    }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Tambahkan", icon: free_solid_svg_icons_1.faPlus, variant: "outline", paint: "primary", size: isSm ? "xs" : "sm", onClick: addFilter, className: "filter-add-btn" })] }), (0, jsx_runtime_1.jsx)(_components_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK_LIST"], onClose: () => setToggle("MODAL_BOOKMARK_LIST", false), title: "Bookmark Filter", children: (0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-list-container", children: bookmarks?.length ? bookmarks?.map((b, key) => ((0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-row", children: [(0, jsx_runtime_1.jsx)("p", { className: "filter-bookmark-name", children: b.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faPlus, variant: "outline", paint: "primary", className: "", size: "xs", onClick: () => {
-                                            setFilters(b.filters);
-                                            setToggle("MODAL_BOOKMARK_LIST", false);
-                                        } }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "outline", paint: "danger", className: "", size: "xs", onClick: () => setBookmarks(bookmarks.filter((_, bi) => bi != key)) })] })] }, key))) : ((0, jsx_runtime_1.jsx)("div", { className: "filter-bookmark-empty-text", children: " -- Tidak ada Bookmark --" })) }) }), (0, jsx_runtime_1.jsx)(_components_1.ModalComponent, { show: !!toggle["MODAL_BOOKMARK"], onClose: () => setToggle("MODAL_BOOKMARK", false), title: "Bookmark Filter", footer: (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end", children: (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Terapkan", onClick: () => {
-                            let updated = [];
-                            if (toggle["MODAL_BOOKMARK"]?.bookmark_id == "new") {
-                                const newBookmark = {
-                                    id: crypto.randomUUID(),
-                                    name: toggle["MODAL_BOOKMARK"]?.bookmark_name || "Tanpa Nama",
-                                    filters,
-                                    createdAt: Date.now(),
-                                };
-                                updated = [newBookmark, ...bookmarks];
-                            }
-                            else {
-                                updated = bookmarks.map(b => b.id === toggle["MODAL_BOOKMARK"]?.bookmark_id
-                                    ? { ...b, filters, createdAt: Date.now() }
-                                    : b);
-                            }
-                            setBookmarks(updated);
-                            setToggle("MODAL_BOOKMARK", false);
-                        } }) }), children: (0, jsx_runtime_1.jsxs)("div", { className: "filter-bookmark-form-container", children: [(0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: `bookmark_id`, placeholder: "Pilih bookmark filter...", value: toggle["MODAL_BOOKMARK"]?.bookmark_id ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_id: e }), options: [
-                                {
-                                    label: "-- BOOKMARK BARU --",
-                                    value: "new",
-                                },
-                                ...bookmarks.map((b) => ({
-                                    label: b.name,
-                                    value: b.id,
-                                }))
-                            ] }), toggle["MODAL_BOOKMARK"]?.bookmark_id == "new" && ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: "bookmark_name", placeholder: "Masukkan nama bookmark...", value: toggle["MODAL_BOOKMARK"]?.bookmark_name ?? "", onChange: e => setToggle("MODAL_BOOKMARK", { ...toggle["MODAL_BOOKMARK"], bookmark_name: e }), className: "filter-bookmark-form-input" }))] }) })] }));
-}
-function InputFilterValueComponent({ type, name, value, onChange, options = [], placeholder = "", className = "", between, multiple, }) {
-    const resolvedType = type || "text";
-    if (!between) {
-        switch (resolvedType) {
-            case "select":
-                return ((0, jsx_runtime_1.jsx)(_components_1.SelectComponent, { name: name, options: options, placeholder: placeholder, value: options.find((o) => o.value === value)?.label, onChange: onChange, className: className }));
-            case "number":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputNumberComponent, { name: name, value: Number(value) || 0, onChange: onChange, placeholder: placeholder, className: className, multiple: multiple }));
-            case "currency":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputCurrencyComponent, { name: name, value: Number(value) || 0, onChange: onChange, placeholder: placeholder, className: className }));
-            case "date":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputDateComponent, { name: name, value: value || "", onChange: onChange, placeholder: placeholder, className: className }));
-            default:
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: name, value: value || "", onChange: onChange, placeholder: placeholder, className: className, multiple: multiple }));
-        }
-    }
-    const val = Array.isArray(value) ? value : ["", ""];
-    const [from, to] = val;
-    const renderInput = (pos) => {
-        const currentValue = pos === "from" ? from : to;
-        const handle = (v) => onChange(pos === "from" ? [v, to] : [from, v]);
-        switch (resolvedType) {
-            case "number":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputNumberComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
-            case "currency":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputCurrencyComponent, { name: `${name}_${pos}`, value: Number(currentValue) || 0, onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
-            case "date":
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputDateComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: handle, placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
-            default:
-                return ((0, jsx_runtime_1.jsx)(_components_1.InputComponent, { name: `${name}_${pos}`, value: currentValue || "", onChange: (e) => handle(e.target.value), placeholder: pos === "from" ? "Dari" : "Sampai", className: className }));
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "filter-between-container", children: [renderInput("from"), (0, jsx_runtime_1.jsx)("span", { children: "s/d" }), renderInput("to")] }));
-}

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

@@ -1,8 +0,0 @@
-export interface PaginationProps {
-    totalRow: number;
-    paginate: number;
-    page: number;
-    onChange?: (totalRow: number, paginate: number, page: number) => void;
-    className?: string;
-}
-export declare function PaginationComponent({ paginate, page, totalRow, onChange, className, }: PaginationProps): import("react").JSX.Element | null;

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

@@ -1,32 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationComponent = PaginationComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-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");
-const _components_1 = require("@components");
-function PaginationComponent({ paginate = 10, page = 1, totalRow = 0, onChange, className = "", }) {
-    const [pages, setPages] = (0, react_1.useState)([]);
-    const lastPage = Math.ceil(totalRow / paginate);
-    (0, react_1.useEffect)(() => {
-        let newPages = [];
-        if (totalRow > paginate) {
-            const start = Math.max(1, page - 1);
-            const end = Math.min(lastPage, page + 1);
-            newPages = Array.from({ length: end - start + 1 }, (_, i) => start + i);
-        }
-        else {
-            newPages = [1];
-        }
-        setPages(newPages);
-    }, [totalRow, page, paginate]);
-    if (!totalRow)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("pagination-container", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: "pagination-desktop-wrapper", children: [(0, jsx_runtime_1.jsx)(_components_1.InputRadioComponent, { name: "paginate", options: [10, 20, 50].map((val) => ({
-                            value: val,
-                            label: String(val),
-                        })), value: paginate, onChange: (e) => onChange?.(totalRow, Number(e), 1), className: "pagination-paginate-select" }), totalRow > paginate && ((0, jsx_runtime_1.jsxs)("div", { className: "pagination-desktop-pages", children: [page > 1 && ((0, jsx_runtime_1.jsx)("button", { className: "pagination-overflow", onClick: () => onChange?.(totalRow, paginate, page - 1), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronLeft }) })), page > 2 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item")), onClick: () => onChange?.(totalRow, paginate, 1), children: "1" }), page > 3 && (0, jsx_runtime_1.jsx)("span", { className: "pagination-overflow", children: "..." })] })), pages.map((p) => ((0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item"), p === page && (0, _utils_1.cn)("pagination-item-active", (0, _utils_1.pcn)(className, "active"))), onClick: () => onChange?.(totalRow, paginate, p), children: p }, p))), page < lastPage - 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [page < lastPage - 2 && ((0, jsx_runtime_1.jsx)("span", { className: "pagination-overflow", children: "..." })), (0, jsx_runtime_1.jsx)("button", { className: (0, _utils_1.cn)("pagination-item", (0, _utils_1.pcn)(className, "item")), onClick: () => onChange?.(totalRow, paginate, lastPage), children: lastPage })] })), page < lastPage && ((0, jsx_runtime_1.jsx)("button", { className: "pagination-overflow", onClick: () => onChange?.(totalRow, paginate, page + 1), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight }) }))] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "pagination-desktop-info", children: [Math.min(totalRow, paginate * (page - 1) + 1), " - ", Math.min(totalRow, paginate * page), " / ", totalRow] }), (0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-wrapper", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-info", children: [Math.min(totalRow, paginate * (page - 1) + 1), " - ", Math.min(totalRow, paginate * page), " / ", totalRow] }), totalRow > paginate && ((0, jsx_runtime_1.jsxs)("div", { className: "pagination-mobile-controls", children: [page > 1 && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronLeft, onClick: () => onChange?.(totalRow, paginate, page - 1), size: "sm" })), page < lastPage && ((0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faChevronRight, onClick: () => onChange?.(totalRow, paginate, page + 1), size: "sm" }))] }))] })] }));
-}

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

@@ -1,61 +0,0 @@
-import { ReactNode } from "react";
-import { ApiFilterType } from "@utils";
-import { ControlBarOptionType, PaginationProps, SwipeActionType } from "@components";
-export interface TableColumnType {
-    selector: string;
-    label: string | ReactNode;
-    width?: string;
-    sortable?: boolean;
-    searchable?: boolean;
-    filterable?: boolean | {
-        type: "text" | "number" | "currency" | "date";
-    } | {
-        type: "select";
-        options: {
-            label: string;
-            value: any;
-        }[];
-    };
-    className?: string;
-    item?: (data: any) => string | ReactNode;
-    tip?: string | ((data: any) => string);
-}
-export interface TableProps {
-    id?: string;
-    controlBar?: false | ControlBarOptionType[];
-    columns: TableColumnType[];
-    data: Record<string, any>[];
-    pagination?: PaginationProps | false;
-    loading?: boolean;
-    sortBy?: string[];
-    onChangeSortBy?: (sort: string[]) => void;
-    search?: string;
-    onChangeSearch?: (search: string) => void;
-    searchableColumn?: string[];
-    onChangeSearchableColumn?: (column: string) => void;
-    filter?: ApiFilterType[];
-    onChangeFilter?: (filters: ApiFilterType[]) => void;
-    checks?: (string | number)[];
-    onChangeChecks?: (checks: (string | number)[]) => void;
-    actionBulking?: ((checks: (string | number)[]) => ReactNode) | false;
-    focus?: number | null;
-    setFocus?: (focus: number | null) => void;
-    onRowClick?: (data: Record<string, any>, key: number) => void;
-    onRefresh?: () => void;
-    block?: boolean;
-    noIndex?: boolean;
-    responsiveControl?: {
-        mobile?: {
-            item?: (item: Record<string, any>, key: number) => ReactNode;
-            leftActionControl?: Omit<SwipeActionType, "onAction"> & {
-                onAction?: (item: Record<string, any>, key?: number) => void;
-            };
-            rightActionControl?: Omit<SwipeActionType, "onAction"> & {
-                onAction?: (item: Record<string, any>, key?: number) => void;
-            };
-        };
-    };
-    /** Use custom class with: "controller-bar::", "head-column::", "column::", "floating-action::", "row::". */
-    className?: string;
-}
-export declare function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className, }: TableProps): import("react").JSX.Element;

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

@@ -1,101 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableComponent = TableComponent;
-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 _components_1 = require("@components");
-function TableComponent({ id, controlBar, columns, data, pagination, loading, sortBy, onChangeSortBy, search, onChangeSearch, searchableColumn, onChangeSearchableColumn, filter, onChangeFilter, checks, onChangeChecks, actionBulking, focus, onRowClick, onRefresh, block, noIndex, responsiveControl, className = "", }) {
-    const [displayColumns, setDisplayColumns] = (0, react_1.useState)([]);
-    const [showFloatingAction, setShowFloatingAction] = (0, react_1.useState)(false);
-    const [floatingActionActive, setFloatingActionActive] = (0, react_1.useState)(false);
-    const [keyword, setKeyword] = (0, react_1.useState)("");
-    const [keywordSearch] = (0, _utils_1.useLazySearch)(keyword);
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const actionColumnRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (columns)
-            setDisplayColumns([...columns.map((column) => column.selector)]);
-    }, [columns]);
-    (0, react_1.useEffect)(() => {
-        setKeyword(search || "");
-    }, [search]);
-    (0, react_1.useEffect)(() => {
-        keywordSearch ? onChangeSearch?.(keywordSearch) : onChangeSearch?.("");
-        if (pagination != false) {
-            pagination?.onChange?.(pagination.totalRow, pagination.paginate, 1);
-        }
-    }, [keywordSearch]);
-    const columnMapping = (0, react_1.useMemo)(() => {
-        return (columns?.filter((column) => displayColumns.includes(column.selector)) || []);
-    }, [columns, displayColumns]);
-    const numberOfRow = (key) => pagination && (pagination?.page || 1) != 1 ? pagination?.paginate * ((pagination?.page || 1) - 1) + key + 1 : key + 1;
-    function renderHead() {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: columnMapping?.map((column, key) => {
-                const sortColumn = sortBy?.find((e) => e.split(" ")?.at(0) == column.selector)?.split(" ")?.at(0) || "";
-                const sortDirection = sortBy?.find((e) => e.split(" ")?.at(0) == column.selector)?.split(" ")?.at(1) || "";
-                return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-column", column.sortable && "cursor-pointer", (0, _utils_1.pcn)(className, "head-column")), style: { width: column.width ? column.width : 200 }, onClick: () => column.sortable && onChangeSortBy?.([`${column.selector} ${sortDirection == "desc" ? "asc" : "desc"}`]), children: [column.label, !!sortColumn && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: sortDirection == "desc" ? free_solid_svg_icons_1.faArrowDownZA : free_solid_svg_icons_1.faArrowUpAZ, className: "text-light-foreground/70" }))] }, key));
-            }) }));
-    }
-    function renderItem(item, itemKey) {
-        const itemMapping = columnMapping.map((column) => {
-            if (column?.item) {
-                return column.item(item);
-            }
-            const value = item[column.selector];
-            if ((0, react_1.isValidElement)(value)) {
-                return value;
-            }
-            if (value === null || value === undefined) {
-                return "-";
-            }
-            if (typeof value === "object") {
-                return JSON.stringify(value);
-            }
-            return value;
-        });
-        if (!isSm || !responsiveControl?.mobile) {
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: itemMapping?.map((one, key) => {
-                    const column = columnMapping?.[key];
-                    let title = one;
-                    if (column?.tip) {
-                        if (typeof column.tip === "string") {
-                            title = item[column.tip]?.toString() || "-";
-                        }
-                        else if (typeof column.tip === "function") {
-                            title = column.tip(item);
-                        }
-                    }
-                    return ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-body-column", onRowClick && "cursor-pointer", (0, _utils_1.pcn)(className, "column")), style: { width: columnMapping?.at(key)?.width || 200 }, onClick: () => onRowClick?.(item, itemKey), title: title, children: one }, key));
-                }) }));
-        }
-        else {
-            const { onAction: onLeftAction, ...restLeftAction } = responsiveControl?.mobile?.leftActionControl || {};
-            const { onAction: onRightAction, ...restRightAction } = responsiveControl?.mobile?.rightActionControl || {};
-            return ((0, jsx_runtime_1.jsx)(_components_1.SwipeComponent, { className: "rounded-lg", leftActionControl: !!responsiveControl?.mobile?.leftActionControl ? {
-                    ...restLeftAction,
-                    ...(onLeftAction ? { onAction: () => onLeftAction?.(item, itemKey) } : {})
-                } : undefined, rightActionControl: !!responsiveControl?.mobile?.rightActionControl ? {
-                    ...restRightAction,
-                    ...(onRightAction ? { onAction: () => onRightAction?.(item, itemKey) } : {})
-                } : undefined, children: (0, jsx_runtime_1.jsx)("div", { onClick: () => onRowClick?.(item, itemKey), children: responsiveControl?.mobile?.item ? responsiveControl?.mobile?.item(item, itemKey) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "font-semibold", children: Object.values(itemMapping)[0] }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: Object.values(itemMapping)[1] })] })) }) }));
-        }
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("relative", (0, _utils_1.pcn)(className, "base")), children: [controlBar != false && ((0, jsx_runtime_1.jsx)(_components_1.ControlBarComponent, { id: id, options: !controlBar ? ["SEARCH", "SELECTABLE", "REFRESH"] : controlBar, searchableOptions: columns?.filter((c) => c.searchable), onSearchable: (e) => onChangeSearchableColumn?.(String(e)), searchable: searchableColumn || [], onSearch: (e) => setKeyword(e), search: keyword, selectableOptions: columns, onSelectable: (e) => setDisplayColumns(e), selectable: displayColumns, sortableOptions: columns?.filter((c) => c.sortable), sort: sortBy, onSort: (sort) => onChangeSortBy?.(sort), onRefresh: () => onRefresh?.(), filterableColumns: columns?.filter((c) => !!c?.filterable)?.map((c) => ({
-                    label: c.label,
-                    selector: c.selector,
-                    type: typeof c?.filterable == "object" ? c?.filterable?.type : "text",
-                    options: typeof c?.filterable == "object" && c?.filterable?.type == "select" ? c?.filterable?.options : undefined
-                })), onFilter: (filters) => onChangeFilter?.(filters), filter: filter, className: (0, _utils_1.pcn)(className, "controller-bar") || "" })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(_components_1.ScrollContainerComponent, { scrollFloating: !isSm && block, className: "w-full", onScroll: (e) => {
-                        actionColumnRef.current?.clientWidth && e.scrollLeft &&
-                            setShowFloatingAction(e.scrollLeft + e.clientWidth <= e.scrollWidth - actionColumnRef.current?.clientWidth);
-                    }, footer: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: block && pagination && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "py-6" }), (0, jsx_runtime_1.jsx)("div", { className: "my-2 absolute bottom-0 w-full", children: (0, jsx_runtime_1.jsx)(_components_1.PaginationComponent, { ...pagination }) })] })) }), children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "w-max min-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "table-loading-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-loading-text", children: "Memuat data..." }) }) })) : !data || !data.length ? ((0, jsx_runtime_1.jsx)("div", { className: "table-empty-container", children: (0, jsx_runtime_1.jsx)("h1", { className: "table-empty-text", children: "Belum Ada Data" }) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isSm || !responsiveControl?.mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: "w-max min-w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-head-row", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: "table-head-column w-max", children: (0, jsx_runtime_1.jsx)(_components_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: data.length > 0 && checks?.length === data.length, onChange: () => data.length > 0 && checks?.length === data.length ? onChangeChecks?.([]) : onChangeChecks?.(data.map((d) => d.id)) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-head-column w-8", (0, _utils_1.pcn)(className, "head-column")), children: "#" }), renderHead()] }), (0, jsx_runtime_1.jsx)("div", { className: "table-body", children: data.map((item, key) => {
-                                        return ((0, jsx_runtime_1.jsxs)("div", { style: { animationDelay: `${(key + 1) * 0.05}s` }, className: (0, _utils_1.cn)("table-body-row", key % 2 ? "bg-light-primary/10" : "bg-white", focus == key && "bg-light-primary/30", (0, _utils_1.pcn)(className, "row")), children: [!!actionBulking && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-body-column w-max", (0, _utils_1.pcn)(className, "column")), children: (0, jsx_runtime_1.jsx)(_components_1.CheckboxComponent, { name: "selected_table", className: "w-5 h-5", checked: checks?.includes(item?.id), onChange: () => checks?.includes(item?.id) ? onChangeChecks?.(checks.filter((i) => i !== item?.id)) : onChangeChecks?.([...(checks || []), item?.id]) }) })), !noIndex && (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-body-column w-8", (0, _utils_1.pcn)(className, "column")), children: numberOfRow(key) }), renderItem(item, key), (0, jsx_runtime_1.jsx)("div", { ref: actionColumnRef, className: "table-action-column", children: item["action"] }), item["action"] && showFloatingAction && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("table-floating-action", (0, _utils_1.pcn)(className, "floating-action")), onClick: () => floatingActionActive !== false &&
-                                                        floatingActionActive == key ? setFloatingActionActive(false) : setFloatingActionActive(key), children: [(0, jsx_runtime_1.jsx)("div", { className: "table-floating-action-icon-wrapper", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: floatingActionActive === false || floatingActionActive != key ? free_solid_svg_icons_1.faChevronLeft : free_solid_svg_icons_1.faChevronRight }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("table-floating-action-content", floatingActionActive === key && "table-floating-action-content-active"), children: item["action"] })] }))] }, key));
-                                    }) })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "table-mobile-list", children: data.map((item, key) => {
-                                return ((0, jsx_runtime_1.jsx)("div", { style: { animationDelay: `${(key + 1) * 0.05}s` }, children: renderItem(item, key) }, key));
-                            }) })) })) }) }), !!actionBulking && !!checks?.length && ((0, jsx_runtime_1.jsxs)("div", { className: "table-bulk-actions-bar", children: [(0, jsx_runtime_1.jsxs)("div", { className: "table-bulk-actions-title", children: [checks?.length, " Data Terpilih"] }), (0, jsx_runtime_1.jsx)("div", { className: "table-bulk-actions-buttons", children: actionBulking?.(checks) })] })), !block && pagination && ((0, jsx_runtime_1.jsx)("div", { className: "table-pagination-desktop", children: (0, jsx_runtime_1.jsx)(_components_1.PaginationComponent, { ...pagination }) })), pagination && ((0, jsx_runtime_1.jsx)("div", { className: "table-pagination-mobile", children: (0, jsx_runtime_1.jsx)(_components_1.PaginationComponent, { ...pagination }) }))] }));
-}