@skalfa/skalfa-component 1.0.0

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

@@ -0,0 +1,205 @@
+"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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,132 @@
+"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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,32 @@
+"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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,101 @@
+"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 }) }))] }));
+}