@ballistix.digital/react-components 1.0.2 → 1.1.0

package/dist/index.d.ts

@@ -843,10 +843,33 @@ type TProps$2 = {
 };
 declare const SlideOverOverlay: FC<TProps$2>;
 
+declare const styles: {
+    controls: {
+        container: string;
+        content: string;
+        head: string;
+        body: string;
+        dropdown: {
+            reset: string;
+            container: string;
+            input: string;
+            label: string;
+            actions: string;
+            upIcon: string;
+            downIcon: string;
+        };
+    };
+    label: string;
+    icon: string;
+};
+
+type TTableColumnOptionsStyles = DeepPartialType$1<typeof styles>;
+
 type TProps$1 = {
     table: Table<any>;
     setColumnOrder: Dispatch<SetStateAction<ColumnOrderState>>;
     trigger: ReactNode;
+    styles?: TTableColumnOptionsStyles;
     resetConfig?: {
         tableId: string;
         label?: string;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
-import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, forEach, assign, intersection, trim, lastIndexOf } from 'lodash';
+import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, intersection, trim, lastIndexOf } from 'lodash';
 import get$1 from 'lodash/get';
 import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, useReducer, createElement, PureComponent, Component } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -1754,11 +1754,11 @@ var isValidState = function (state) {
 };
 
 var TableList2 = function (props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var id = props.id, config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onRowClick = props.onRowClick, onChange = props.onChange, stylesOverrides = props.styles;
-    var _g = useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _g[0], setSorting = _g[1];
-    var _h = useState({}), columnVisibility = _h[0], setColumnVisibility = _h[1];
-    var _j = useState([]), columnOrder = _j[0], setColumnOrder = _j[1];
+    var _j = useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _j[0], setSorting = _j[1];
+    var _k = useState({}), columnVisibility = _k[0], setColumnVisibility = _k[1];
+    var _l = useState([]), columnOrder = _l[0], setColumnOrder = _l[1];
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$f.base);
         var keys = calculateNestedKeys(styles$f.base);
@@ -1773,6 +1773,32 @@ var TableList2 = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    var initialVisibilityState = useMemo(function () {
+        var _a;
+        var columnAccessorKeys = compact$1(map(config.columns, 'accessorKey'));
+        var columnIds = compact$1(map(config.columns, 'id'));
+        var visibilityState = {};
+        if ((_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility) {
+            forEach(columnAccessorKeys, function (key) {
+                var _a;
+                var _b;
+                visibilityState = assign(visibilityState, (_a = {},
+                    _a[key] = includes((_b = config.options) === null || _b === void 0 ? void 0 : _b.defaultVisibility, key),
+                    _a));
+            });
+        }
+        else {
+            forEach(columnAccessorKeys, function (key) {
+                var _a;
+                visibilityState = assign(visibilityState, (_a = {}, _a[key] = true, _a));
+            });
+        }
+        forEach(columnIds, function (key) {
+            var _a;
+            visibilityState = assign(visibilityState, (_a = {}, _a[key] = true, _a));
+        });
+        return visibilityState;
+    }, [config.columns, (_c = config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility]);
     var table = useReactTable({
         getCoreRowModel: getCoreRowModel(),
         columns: config.columns,
@@ -1782,6 +1808,10 @@ var TableList2 = function (props) {
             columnVisibility: columnVisibility,
             columnOrder: columnOrder,
         },
+        initialState: {
+            columnVisibility: initialVisibilityState,
+            columnOrder: (_d = config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder,
+        },
         manualPagination: true,
         manualSorting: true,
         onSortingChange: setSorting,
@@ -1830,7 +1860,7 @@ var TableList2 = function (props) {
             }
             setColumnVisibility(visibility_1);
         }
-    }, [(_c = config === null || config === void 0 ? void 0 : config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility, id, table]);
+    }, [(_e = config === null || config === void 0 ? void 0 : config.options) === null || _e === void 0 ? void 0 : _e.defaultVisibility, id, table]);
     useEffect(function () {
         var _a, _b, _c;
         var savedOrder = (_a = getTableState(id)) === null || _a === void 0 ? void 0 : _a.columnOrder;
@@ -1843,7 +1873,7 @@ var TableList2 = function (props) {
         else if (some(config.columns, function (column) { return (column === null || column === void 0 ? void 0 : column.id) || get(column, 'accessorKey'); })) {
             setColumnOrder(map(config.columns, function (column) { var _a; return ((_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : get(column, 'accessorKey')); }));
         }
-    }, [config.columns, (_d = config === null || config === void 0 ? void 0 : config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder, id]);
+    }, [config.columns, (_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.defaultOrder, id]);
     // Write state to local storage when it changes
     useEffect(function () {
         if (state) {
@@ -1884,7 +1914,7 @@ var TableList2 = function (props) {
                                                                     ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
                                                                 'border-b border-gray-200'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                     }) }, row.id));
-                                            }) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment$1, { children: ((_e = config === null || config === void 0 ? void 0 : config.options) === null || _e === void 0 ? void 0 : _e.emptyComponent) ? ((_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.emptyComponent) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
+                                            }) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment$1, { children: ((_g = config === null || config === void 0 ? void 0 : config.options) === null || _g === void 0 ? void 0 : _g.emptyComponent) ? ((_h = config === null || config === void 0 ? void 0 : config.options) === null || _h === void 0 ? void 0 : _h.emptyComponent) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
 var base$c = {
@@ -2607,7 +2637,7 @@ var styles$8 = {
 
 var TableColumnOptionsCustom = function (props) {
     var _a;
-    var table = props.table, trigger = props.trigger, setColumnOrder = props.setColumnOrder, resetConfig = props.resetConfig;
+    var table = props.table, trigger = props.trigger, setColumnOrder = props.setColumnOrder, stylesOverrides = props.styles, resetConfig = props.resetConfig;
     var handleUpdateColumnOrder = useCallback(function (table, column, location, setColumnOrder) {
         var _a;
         var ids = (_a = table
@@ -2619,18 +2649,27 @@ var TableColumnOptionsCustom = function (props) {
         ids.splice(location, 0, column.id);
         setColumnOrder(ids);
     }, []);
-    return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsxs(Popover.Panel, { className: styles$7.controls.content, children: [resetConfig && (jsxs("div", { className: styles$7.controls.dropdown.reset, onClick: function () {
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$7);
+        var keys = calculateNestedKeys(styles$7);
+        keys.forEach(function (key) {
+            set(result, key, toClassName(get(styles$7, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsxs(Popover.Panel, { className: styles.controls.content, children: [resetConfig && (jsxs("div", { className: styles.controls.dropdown.reset, onClick: function () {
                             removeTableState(resetConfig.tableId);
-                            table.resetColumnVisibility(true);
+                            table.resetColumnVisibility();
                             table.resetColumnOrder();
                             resetConfig.onReset && resetConfig.onReset();
                         }, children: [jsx(IconElement, { accessor: "rotate-left" }), jsx("p", { children: (_a = resetConfig.label) !== null && _a !== void 0 ? _a : 'Reset' })] })), table
                         .getAllLeafColumns()
                         .map(function (column, index) {
                         var isAccessorColumn = !!(column === null || column === void 0 ? void 0 : column.accessorFn);
-                        return (jsxs("div", { className: toClassName(styles$7.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsx("input", { className: styles$7.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", { className: styles$7.controls.dropdown.label, children: column.columnDef.header }), jsxs("div", { className: styles$7.controls.dropdown.actions, children: [jsx(ChevronDownIcon$1, { className: styles$7.controls.dropdown.upIcon, onClick: function () {
+                        return (jsxs("div", { className: toClassName(styles.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", { className: styles.controls.dropdown.label, children: column.columnDef.header }), jsxs("div", { className: styles.controls.dropdown.actions, children: [jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.upIcon, onClick: function () {
                                                 return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
-                                            } }), jsx(ChevronDownIcon$1, { className: styles$7.controls.dropdown.downIcon, onClick: function () {
+                                            } }), jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.downIcon, onClick: function () {
                                                 return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
                                             } })] })] }, column.id));
                     })] })] }));