@ballistix.digital/react-components 0.5.8 → 0.5.10

package/dist/index.d.ts

@@ -411,13 +411,10 @@ type TTableListProps<TData> = {
     table: {
         columns: ColumnDef<TData>[];
         data: TData[];
-        pages: {
-            current: number;
-            total: number;
-        };
         options?: {
             defaultOrder?: string[];
             defaultVisibility?: string[];
+            defaultSorting?: SortingState;
             emptyComponent?: ReactNode;
             isStriped?: boolean;
             hasStickyHeader?: boolean;
@@ -514,8 +511,9 @@ declare const base$b: {
     };
     desktop: {
         container: string;
-        leftButton: string;
-        rightButton: string;
+        outerRightButton: string;
+        outerLeftButton: string;
+        innerButton: string;
         navigation: string;
     };
     button: {
@@ -844,14 +842,14 @@ type TProps$1 = {
 };
 declare const TableColumnOptionsCustom: FC<TProps$1>;
 
-type TProps = {
-    table: Table<any>;
+type TProps<TData> = {
+    table: Table<TData>;
     fileName: string;
-    children: ({ handleExport }: {
-        handleExport: () => void;
+    children: ({ handleExport, }: {
+        handleExport: (exportData?: TData[]) => void;
     }) => ReactNode;
 };
-declare const TableExcelExportCustom: FC<TProps>;
+declare const TableExcelExportCustom: <TData extends object>(props: TProps<TData>) => react_jsx_runtime.JSX.Element;
 
 type TSelectMenuFormProps = {
     name: string;
@@ -1160,10 +1158,10 @@ type TExcelSheet = {
 type TOptions = {
     fileName: string;
 };
-type TReturn = {
-    generate: (tables: Table<any>) => TExcelSheet[];
+type TReturn<TData> = {
+    generate: (table: Table<TData>, exportData?: TData[]) => TExcelSheet[];
     write: (sheets: TExcelSheet[], options: TOptions) => void;
 };
-declare const useExcel: () => TReturn;
+declare const useExcel: <TData extends object>() => TReturn<TData>;
 
 export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputGroupForm, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, type TAddressInputGroupFormProps, type TAddressInputGroupFormStyles, type TAddressInputGroupFormValue, type TButtonElementProps, type TCheckboxInputGroupFormProps, type TCheckboxInputGroupFormStyles, type TDateMenuFormProps, type TDateMenuFormStyles, type TExcelCell, type TExcelRow, type TExcelSheet, type TFileInputGroupFormProps, type TFileInputGroupFormStyles, type TInputGroupFormProps, type TInputGroupStyles, type TModalOverlayProps, type TOpeningsHourInputGroupFormProps, type TOpeningsHourInputGroupFormStyles, type TSelectMenuFormProps, type TSelectMenuFormStyles, type TTableListProps as TTableList2Props, type TTableListProps$1 as TTableListProps, type TTableListStyles$1 as TTableListStyles, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, VerticalNavigation, useExcel };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
+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, pick, isEmpty, some, forEach, assign } from 'lodash';
 import get$1 from 'lodash/get';
 import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, useReducer, createElement, PureComponent, Component } from 'react';
@@ -1102,11 +1102,11 @@ var useExcel = function () {
             });
         });
     };
-    var generate = function (table) {
+    var generate = function (table, exportData) {
         var _a, _b, _c, _d;
         var sheets = [];
         var columns = table.getAllColumns();
-        var rows = (_b = (_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.flatRows) === null || _b === void 0 ? void 0 : _b.map(function (row) { return row.original; });
+        var rows = exportData !== null && exportData !== void 0 ? exportData : (_b = (_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.flatRows) === null || _b === void 0 ? void 0 : _b.map(function (row) { return row.original; });
         var order = table.getState().columnOrder;
         var headerNames = (_d = (_c = columns === null || columns === void 0 ? void 0 : columns.sort(function (a, b) {
             var _a, _b;
@@ -1154,7 +1154,7 @@ var useExcel = function () {
             })
                 .forEach(function (key) {
                 var _a, _b;
-                var cell = (_b = (_a = columns === null || columns === void 0 ? void 0 : columns.find(function (column) { return column.id === key; })) === null || _a === void 0 ? void 0 : _a.columnDef.meta) === null || _b === void 0 ? void 0 : _b.excel(row[key]);
+                var cell = (_b = (_a = columns === null || columns === void 0 ? void 0 : columns.find(function (column) { return column.id === key; })) === null || _a === void 0 ? void 0 : _a.columnDef.meta) === null || _b === void 0 ? void 0 : _b.excel(get(row, key));
                 result[key] = cell;
             });
             return result;
@@ -1234,7 +1234,7 @@ var PanelPaginationNavigation = function (props) {
             component = (jsxs(Fragment$1, { children: [jsx("button", { className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); }, children: min }), max >= min + 1 && (jsx("button", { className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); }, children: min + 1 })), max >= min + 2 && (jsx("button", { className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); }, children: min + 2 })), max >= min + 3 && (jsx("button", { className: toClassName(styles.button.default, current === min + 3 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 3); }, children: min + 3 }))] }));
             break;
     }
-    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), jsx("button", { className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: "Next" })] }), jsxs("div", { className: styles.desktop.container, children: [jsx("div", { children: jsx("div", { className: "text-sm text-gray-700", children: children && children({ min: min, max: max, current: current }) }) }), jsx("div", { children: jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxs("button", { className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsx("span", { className: styles.label, children: "Previous" }), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxs("button", { className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsx("span", { className: styles.label, children: "Next" }), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
+    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), jsx("button", { className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: "Next" })] }), jsxs("div", { className: styles.desktop.container, children: [jsx("div", { children: jsx("div", { className: "text-sm text-gray-700", children: children && children({ min: min, max: max, current: current }) }) }), jsx("div", { children: jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxs("button", { className: toClassName(styles.desktop.outerLeftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(1); }, children: [jsx("span", { className: styles.label, children: "First" }), jsx(ChevronDoubleLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxs("button", { className: toClassName(styles.desktop.innerButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsx("span", { className: styles.label, children: "Previous" }), jsx(ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxs("button", { className: toClassName(styles.desktop.innerButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsx("span", { className: styles.label, children: "Next" }), jsx(ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }), jsxs("button", { className: toClassName(styles.desktop.outerRightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(max); }, children: [jsx("span", { className: styles.label, children: "Last" }), jsx(ChevronDoubleRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
 };
 
 var base$e = {
@@ -1245,8 +1245,9 @@ var base$e = {
     },
     desktop: {
         container: 'hidden sm:flex sm:flex-1 sm:items-center sm:justify-between',
-        leftButton: 'relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
-        rightButton: 'relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
+        outerRightButton: 'relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
+        outerLeftButton: 'relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
+        innerButton: 'relative inline-flex items-center border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20',
         navigation: 'isolate inline-flex -space-x-px rounded-md shadow-sm',
     },
     button: {
@@ -1555,11 +1556,11 @@ var isValidState = function (state) {
 };
 
 var TableList2 = function (props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     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 _e = useState([]), sorting = _e[0], setSorting = _e[1];
-    var _f = useState({}), columnVisibility = _f[0], setColumnVisibility = _f[1];
-    var _g = useState([]), columnOrder = _g[0], setColumnOrder = _g[1];
+    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 handleGenerateStyle = function () {
         var result = deepCopyObject(styles$f.base);
         var keys = calculateNestedKeys(styles$f.base);
@@ -1631,7 +1632,7 @@ var TableList2 = function (props) {
             }
             setColumnVisibility(visibility_1);
         }
-    }, [(_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility, id, table]);
+    }, [(_c = config === null || config === void 0 ? void 0 : config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility, id, table]);
     useEffect(function () {
         var _a, _b, _c;
         var savedOrder = (_a = getTableState(id)) === null || _a === void 0 ? void 0 : _a.columnOrder;
@@ -1644,7 +1645,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, (_b = config === null || config === void 0 ? void 0 : config.options) === null || _b === void 0 ? void 0 : _b.defaultOrder, id]);
+    }, [config.columns, (_d = config === null || config === void 0 ? void 0 : config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder, id]);
     // Write state to local storage when it changes
     useEffect(function () {
         if (state) {
@@ -1685,7 +1686,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: ((_c = config === null || config === void 0 ? void 0 : config.options) === null || _c === void 0 ? void 0 : _c.emptyComponent) ? ((_d = config === null || config === void 0 ? void 0 : config.options) === null || _d === void 0 ? void 0 : _d.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: ((_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) })] }));
 };
 
 var base$c = {
@@ -2454,8 +2455,8 @@ var styles$7 = {
 var TableExcelExportCustom = function (props) {
     var table = props.table, fileName = props.fileName, children = props.children;
     var _a = useExcel(), generate = _a.generate, write = _a.write;
-    var handleExport = function () {
-        var sheets = generate(table);
+    var handleExport = function (exportData) {
+        var sheets = generate(table, exportData);
         write(sheets, { fileName: fileName });
     };
     return jsx("div", { children: children({ handleExport: handleExport }) });