@ballistix.digital/react-components 0.4.3 → 0.4.5

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';
@@ -17,7 +17,7 @@ declare const base$i: {
 };
 type TAvatarElementStyles = DeepPartial$1<typeof base$i>;
 
-type TProps$h = {
+type TProps$g = {
     src?: string | undefined;
     placeholder?: string | undefined;
     children?: ReactNode | ReactNode[] | string;
@@ -29,7 +29,7 @@ type TProps$h = {
     isLoading?: boolean;
     styles?: TAvatarElementStyles;
 };
-declare const AvatarElement: FC<TProps$h>;
+declare const AvatarElement: FC<TProps$g>;
 
 declare const base$h: {
     container: string;
@@ -38,7 +38,7 @@ declare const base$h: {
 };
 type TBadgeElementStyles = DeepPartial$1<typeof base$h>;
 
-type TProps$g = {
+type TProps$f = {
     children: string | ReactNode;
     color?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
     type?: 'normal' | 'indicator' | 'close';
@@ -49,7 +49,7 @@ type TProps$g = {
     onClose?: () => void;
     styles?: TBadgeElementStyles;
 };
-declare const BadgeElement: FC<TProps$g>;
+declare const BadgeElement: FC<TProps$f>;
 
 declare const base$g: {
     container: string;
@@ -59,7 +59,7 @@ declare const base$g: {
 };
 type TButtonElementStyles = DeepPartial$1<typeof base$g>;
 
-type TProps$f = {
+type TProps$e = {
     children: string | ReactNode;
     innerRef?: RefObject<HTMLButtonElement>;
     htmlType?: 'button' | 'submit';
@@ -71,7 +71,7 @@ type TProps$f = {
     styles?: TButtonElementStyles;
     onClick: () => void;
 };
-declare const ButtonElement: FC<TProps$f>;
+declare const ButtonElement: FC<TProps$e>;
 
 declare const base$f: {
     container: string;
@@ -81,11 +81,11 @@ declare const base$f: {
 };
 type TButtonGroupElementStyles = DeepPartial$1<typeof base$f>;
 
-type TProps$e = {
+type TProps$d = {
     children: ReactElement[];
     styles?: TButtonGroupElementStyles;
 };
-declare const ButtonGroupElement: FC<TProps$e>;
+declare const ButtonGroupElement: FC<TProps$d>;
 
 declare const base$e: {
     container: string;
@@ -96,7 +96,7 @@ declare const base$e: {
 };
 type TDropdownElementStyles = DeepPartial$1<typeof base$e>;
 
-type TProps$d = {
+type TProps$c = {
     children: ReactElement | ReactElement[];
     label: string | ReactElement;
     type?: 'button' | 'compact';
@@ -104,16 +104,16 @@ type TProps$d = {
     styles?: TDropdownElementStyles;
 };
 declare const DropdownElement: {
-    Container: FC<TProps$d>;
+    Container: FC<TProps$c>;
     Item: typeof Menu.Item;
 };
 
-type TProps$c = {
+type TProps$b = {
     accessor: IconName;
     type: 'brands' | 'light' | 'regular' | 'solid';
     className?: string;
 };
-declare const IconElement: FC<TProps$c>;
+declare const IconElement: FC<TProps$b>;
 
 declare const base$d: {
     container: string;
@@ -130,7 +130,7 @@ declare const base$d: {
 };
 type TInputGroupStyles = DeepPartial$1<typeof base$d>;
 
-type TProps$b = {
+type TProps$a = {
     name: string;
     htmlType: HTMLInputTypeAttribute;
     label?: string | ReactNode;
@@ -157,7 +157,7 @@ type TProps$b = {
     onBlur: any;
     styles?: TInputGroupStyles;
 };
-declare const InputGroupForm: FC<TProps$b>;
+declare const InputGroupForm: FC<TProps$a>;
 
 declare const base$c: {
     container: string;
@@ -165,12 +165,12 @@ declare const base$c: {
 };
 type TContainerLayoutStyles = DeepPartial$1<typeof base$c>;
 
-type TProps$a = {
+type TProps$9 = {
     children: ReactNode;
     type?: 'break' | 'center' | 'fill';
     styles?: TContainerLayoutStyles;
 };
-declare const ContainerLayout: FC<TProps$a>;
+declare const ContainerLayout: FC<TProps$9>;
 
 declare const base$b: {
     container: string;
@@ -181,12 +181,12 @@ declare const base$b: {
 };
 type TDividerLayoutStyles = DeepPartial$1<typeof base$b>;
 
-type TProps$9 = {
+type TProps$8 = {
     children?: ReactNode;
     type?: 'left' | 'center' | 'right';
     styles?: TDividerLayoutStyles;
 };
-declare const DividerLayout: FC<TProps$9>;
+declare const DividerLayout: FC<TProps$8>;
 
 declare const base$a: {
     container: string;
@@ -195,12 +195,12 @@ declare const base$a: {
 };
 type TListContainerLayoutStyles = DeepPartial$1<typeof base$a>;
 
-type TProps$8 = {
+type TProps$7 = {
     children: ReactElement | ReactElement[];
     type?: 'fill' | 'fill-sticky' | 'center' | 'center-sticky' | 'card' | 'card-sticky';
     styles?: TListContainerLayoutStyles;
 };
-declare const ListContainerLayout: FC<TProps$8>;
+declare const ListContainerLayout: FC<TProps$7>;
 
 declare const base$9: {
     container: string;
@@ -211,14 +211,14 @@ declare const base$9: {
 };
 type TMediaObjectLayoutStyles = DeepPartial$1<typeof base$9>;
 
-type TProps$7 = {
+type TProps$6 = {
     title: string;
     paragraph: string;
     figure?: ReactNode;
     type?: 'top' | 'top-reversed' | 'center' | 'center-reversed' | 'bottom' | 'bottom-reversed' | 'stretch' | 'stretch-reversed' | 'responsive' | 'responsive-reversed' | 'wide' | 'wide-reversed';
     styles?: TMediaObjectLayoutStyles;
 };
-declare const MediaObjectLayout: FC<TProps$7>;
+declare const MediaObjectLayout: FC<TProps$6>;
 
 declare const base$8: {
     container: string;
@@ -242,6 +242,43 @@ declare const LayoutPanel: {
     Section: React.FC<TSectionProps>;
 };
 
+type TData = any;
+type VisibilityState = {
+    [key: string]: boolean;
+};
+type TTableListProps<TData> = {
+    id: string;
+    columns: ColumnDef<TData>[];
+    data: TData[];
+    page: {
+        total: number;
+    };
+    defaultOrder?: string[];
+    children: ({ min, max, current, }: {
+        min: number;
+        max: number;
+        current: number;
+    }) => ReactNode;
+    type?: 'normal' | 'panel' | 'full';
+    isStriped?: boolean;
+    hasStickyHeader?: boolean;
+    hasVerticalSeparators?: boolean;
+    areControlsVisible?: boolean;
+    styles?: TTableListStyles & {
+        components: {
+            buttonElement: TButtonElementStyles$1;
+            dropdownElement: TDropdownElementStyles$1;
+            panelPaginationNavigation: TPagePaginationNavigationStyles$1;
+        };
+    };
+    onChange?: ({ sorting, visibility, order, }: {
+        sorting: SortingState;
+        visibility: VisibilityState;
+        order: ColumnOrderState;
+    }) => void;
+};
+declare const TableList: FC<TTableListProps<TData>>;
+
 declare const base$7: {
     container: string;
     head: {
@@ -296,34 +333,6 @@ declare const base$7: {
 };
 type TTableListStyles = DeepPartial$1<typeof base$7>;
 
-type TData = any;
-type TProps$6<TData> = {
-    id: string;
-    columns: ColumnDef<TData>[];
-    data: TData[];
-    page: {
-        total: number;
-    };
-    children: ({ min, max, current, }: {
-        min: number;
-        max: number;
-        current: number;
-    }) => ReactNode;
-    type?: 'normal' | 'panel' | 'full';
-    isStriped?: boolean;
-    hasStickyHeader?: boolean;
-    hasVerticalSeparators?: boolean;
-    areControlsVisible?: boolean;
-    styles?: TTableListStyles & {
-        components: {
-            buttonElement: TButtonElementStyles$1;
-            dropdownElement: TDropdownElementStyles$1;
-            panelPaginationNavigation: TPagePaginationNavigationStyles$1;
-        };
-    };
-};
-declare const TableList: FC<TProps$6<TData>>;
-
 declare const base$6: {
     container: string;
     list: string;
@@ -685,4 +694,4 @@ type TProps = {
 };
 declare const SlideOverOverlay: FC<TProps>;
 
-export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TabNavigation, TableList, VerticalNavigation };
+export { AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, ContainerLayout, DividerLayout, DropdownElement, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SlideOverOverlay, TTableListProps, TTableListStyles, TabNavigation, TableList, VerticalNavigation };

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);