@ballistix.digital/react-components 0.4.3 → 0.4.4

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import React, { FC, ReactNode, RefObject, ReactElement, HTMLInputTypeAttribute,
 import { DeepPartial as DeepPartial$1 } from 'types/DeepPartial';
 import { Menu } from '@headlessui/react';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, SortingState, ColumnOrderState } from '@tanstack/react-table';
 import { TButtonElementStyles as TButtonElementStyles$1 } from 'components/Element/Button';
 import { TDropdownElementStyles as TDropdownElementStyles$1 } from 'components/Element/Dropdown';
 import { TPagePaginationNavigationStyles as TPagePaginationNavigationStyles$1 } from 'components/Navigation/PagePagination';
@@ -297,6 +297,9 @@ declare const base$7: {
 type TTableListStyles = DeepPartial$1<typeof base$7>;
 
 type TData = any;
+type VisibilityState = {
+    [key: string]: boolean;
+};
 type TProps$6<TData> = {
     id: string;
     columns: ColumnDef<TData>[];
@@ -304,6 +307,7 @@ type TProps$6<TData> = {
     page: {
         total: number;
     };
+    defaultOrder?: string[];
     children: ({ min, max, current, }: {
         min: number;
         max: number;
@@ -321,6 +325,11 @@ type TProps$6<TData> = {
             panelPaginationNavigation: TPagePaginationNavigationStyles$1;
         };
     };
+    onChange?: ({ sorting, visibility, order, }: {
+        sorting: SortingState;
+        visibility: VisibilityState;
+        order: ColumnOrderState;
+    }) => void;
 };
 declare const TableList: FC<TProps$6<TData>>;
 

package/dist/index.esm.js

@@ -328,7 +328,7 @@ var ButtonElement = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ArrowPathIcon, { className: styles.spinner }), jsx("p", { children: children })] }))), status === 'error' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ExclamationCircleIcon, { className: styles.icon }), jsx("p", { children: children })] }))), status === 'success' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(CheckIcon, { className: styles.icon }), jsx("p", { children: children })] })))] })));
+    return (jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ArrowPathIcon, { className: styles.spinner }), jsx("div", { children: children })] }))), status === 'error' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(ExclamationCircleIcon, { className: styles.icon }), jsx("div", { children: children })] }))), status === 'success' && (jsxs("div", __assign({ className: styles.content }, { children: [jsx(CheckIcon, { className: styles.icon }), jsx("div", { children: children })] })))] })));
 };
 
 var base$g = {
@@ -16868,7 +16868,7 @@ var PanelPaginationNavigation = function (props) {
             component = (jsxs(Fragment$1, { children: [jsx("button", __assign({ className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); } }, { children: min })), jsx("button", __assign({ className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); } }, { children: min + 1 })), jsx("button", __assign({ className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); } }, { children: min + 2 }))] }));
             break;
     }
-    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsx("button", __assign({ className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: "Previous" })), jsx("button", __assign({ className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: "Next" }))] })), jsxs("div", __assign({ className: styles.desktop.container }, { children: [jsx("div", { children: jsx("p", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsx("div", { children: jsxs("nav", __assign({ className: styles.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxs("button", __assign({ className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: [jsx("span", __assign({ className: styles.label }, { children: "Previous" })), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] })), component, jsxs("button", __assign({ className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: [jsx("span", __assign({ className: styles.label }, { children: "Next" })), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }))] })) })] }))] })));
+    return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsx("button", __assign({ className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: "Previous" })), jsx("button", __assign({ className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: "Next" }))] })), jsxs("div", __assign({ className: styles.desktop.container }, { children: [jsx("div", { children: jsx("div", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsx("div", { children: jsxs("nav", __assign({ className: styles.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxs("button", __assign({ className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: [jsx("span", __assign({ className: styles.label }, { children: "Previous" })), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] })), component, jsxs("button", __assign({ className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: [jsx("span", __assign({ className: styles.label }, { children: "Next" })), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }))] })) })] }))] })));
 };
 
 var base$7 = {
@@ -16897,7 +16897,7 @@ var styles$8 = {
 };
 
 var TableList = function (props) {
-    var id = props.id, columns = props.columns, data = props.data, page = props.page, children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, _b = props.isStriped, isStriped = _b === void 0 ? false : _b, _c = props.hasStickyHeader, hasStickyHeader = _c === void 0 ? false : _c, _d = props.hasVerticalSeparators, hasVerticalSeparators = _d === void 0 ? false : _d, _e = props.areControlsVisible, areControlsVisible = _e === void 0 ? true : _e, stylesOverrides = props.styles;
+    var id = props.id, columns = props.columns, data = props.data, page = props.page, children = props.children, defaultOrder = props.defaultOrder, _a = props.type, type = _a === void 0 ? 'normal' : _a, _b = props.isStriped, isStriped = _b === void 0 ? false : _b, _c = props.hasStickyHeader, hasStickyHeader = _c === void 0 ? false : _c, _d = props.hasVerticalSeparators, hasVerticalSeparators = _d === void 0 ? false : _d, _e = props.areControlsVisible, areControlsVisible = _e === void 0 ? true : _e, stylesOverrides = props.styles, onChange = props.onChange;
     var write = useExcel().write;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$7.base);
@@ -16926,6 +16926,12 @@ var TableList = function (props) {
         onColumnVisibilityChange: setVisibility,
         onColumnOrderChange: setOrder,
     });
+    useEffect(function () {
+        if (sorting || visibility || order) {
+            onChange && onChange({ sorting: sorting, visibility: visibility, order: order });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sorting || visibility || order]);
     var handleCalculateExcelTypeFromValue = function (value) {
         var _a;
         var result = 'string';
@@ -16972,8 +16978,7 @@ var TableList = function (props) {
     var handleUpdateColumnOrder = useCallback(function (column, location) {
         var _a;
         var ids = (_a = table
-            .getAllLeafColumns()
-            .filter(function (column) { return column === null || column === void 0 ? void 0 : column.getCanSort(); })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
+            .getAllLeafColumns()) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
         var currentIndexOfId = ids.findIndex(function (id) { return id === column.id; });
         // Remove id from array.
         ids.splice(currentIndexOfId, 1);
@@ -16986,6 +16991,9 @@ var TableList = function (props) {
         var _a;
         var state = window === null || window === void 0 ? void 0 : window.localStorage.getItem("TableList.".concat(id, ".state"));
         if (!state) {
+            if (defaultOrder && (defaultOrder === null || defaultOrder === void 0 ? void 0 : defaultOrder.length) > 0) {
+                return setOrder(defaultOrder);
+            }
             return setOrder(columns.map(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : ''; }));
         }
         var savedColumnOrder = (_a = state === null || state === void 0 ? void 0 : state.split(',').map(function (id) { return id.replace('-', ''); })) !== null && _a !== void 0 ? _a : [];
@@ -16995,7 +17003,7 @@ var TableList = function (props) {
         });
         setOrder(savedColumnOrder);
         setVisibility(savedColumnVisibility);
-    }, [columns, id]);
+    }, [columns, defaultOrder, id]);
     // Save state to local storage when column visibility or order updates.
     useEffect(function () {
         var _a;
@@ -17003,8 +17011,7 @@ var TableList = function (props) {
         var isMounted = order.length > 0;
         if (isMounted && (order || visibility)) {
             var ids = (_a = table
-                .getAllLeafColumns()
-                .filter(function (column) { return column === null || column === void 0 ? void 0 : column.getCanSort(); })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
+                .getAllLeafColumns()) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
             var idsWithVisibilityIndicator = ids.map(function (id) {
                 // Hardcoding `false` here since `undefined` is allowed.
                 if (visibility[id] === false) {
@@ -17017,9 +17024,10 @@ var TableList = function (props) {
     }, [id, table, order, visibility]);
     return (jsx(Fragment$1, { children: jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: styles.controls.container }, { children: [jsx(DropdownElement.Container, __assign({ styles: stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.components.dropdownElement, label: jsx(ViewColumnsIcon, { className: "w-6 h-6" }) }, { children: jsx("div", __assign({ className: styles.controls.content }, { children: table
                                     .getAllLeafColumns()
-                                    .filter(function (column) { return column === null || column === void 0 ? void 0 : column.getCanSort(); })
+                                    // .filter((column) => column?.getCanSort())
                                     .map(function (column, index) {
-                                    return (jsx(DropdownElement.Item, { children: function () { return (jsxs("div", __assign({ className: styles.controls.dropdown.container }, { children: [jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", __assign({ className: styles.controls.dropdown.label }, { children: column.columnDef.header })), jsxs("div", __assign({ className: styles.controls.dropdown.actions }, { children: [jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.upIcon, onClick: function () {
+                                    var canSort = column === null || column === void 0 ? void 0 : column.getCanSort();
+                                    return (jsx(DropdownElement.Item, { children: function () { return (jsxs("div", __assign({ className: toClassName(styles.controls.dropdown.container, !canSort && 'hidden') }, { children: [jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", __assign({ className: styles.controls.dropdown.label }, { children: column.columnDef.header })), jsxs("div", __assign({ className: styles.controls.dropdown.actions }, { children: [jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.upIcon, onClick: function () {
                                                                 return handleUpdateColumnOrder(column, index - 1);
                                                             } }), jsx(ChevronDownIcon$1, { className: styles.controls.dropdown.downIcon, onClick: function () {
                                                                 return handleUpdateColumnOrder(column, index + 1);