@ballistix.digital/react-components 9.9.1 → 9.10.0

package/dist/index.js

@@ -2861,6 +2861,36 @@ var $95221514662ef6ef$export$2e2bcd8739ae039 = $95221514662ef6ef$var$PanelPagina
 
 
 
+const $def42fb278b4e54a$export$8a456ae7ab58d698 = (0, $iA2ta$tanstackreacttable.tableFeatures)({
+    rowSortingFeature: $iA2ta$tanstackreacttable.rowSortingFeature,
+    columnVisibilityFeature: $iA2ta$tanstackreacttable.columnVisibilityFeature,
+    columnOrderingFeature: $iA2ta$tanstackreacttable.columnOrderingFeature,
+    columnPinningFeature: $iA2ta$tanstackreacttable.columnPinningFeature,
+    columnSizingFeature: $iA2ta$tanstackreacttable.columnSizingFeature,
+    rowPaginationFeature: $iA2ta$tanstackreacttable.rowPaginationFeature,
+    columnGroupingFeature: $iA2ta$tanstackreacttable.columnGroupingFeature,
+    groupedRowModel: (0, $iA2ta$tanstackreacttable.createGroupedRowModel)(),
+    rowExpandingFeature: $iA2ta$tanstackreacttable.rowExpandingFeature,
+    expandedRowModel: (0, $iA2ta$tanstackreacttable.createExpandedRowModel)(),
+    rowAggregationFeature: $iA2ta$tanstackreacttable.rowAggregationFeature,
+    aggregationFns: {
+        sum: (0, $iA2ta$tanstackreacttable.aggregationFn_sum),
+        min: (0, $iA2ta$tanstackreacttable.aggregationFn_min),
+        max: (0, $iA2ta$tanstackreacttable.aggregationFn_max),
+        extent: (0, $iA2ta$tanstackreacttable.aggregationFn_extent),
+        mean: (0, $iA2ta$tanstackreacttable.aggregationFn_mean),
+        median: (0, $iA2ta$tanstackreacttable.aggregationFn_median),
+        unique: (0, $iA2ta$tanstackreacttable.aggregationFn_unique),
+        uniqueCount: (0, $iA2ta$tanstackreacttable.aggregationFn_uniqueCount),
+        count: (0, $iA2ta$tanstackreacttable.aggregationFn_count),
+        first: (0, $iA2ta$tanstackreacttable.aggregationFn_first),
+        last: (0, $iA2ta$tanstackreacttable.aggregationFn_last)
+    }
+});
+const $def42fb278b4e54a$export$4b44a5cb9651fe5e = ()=>(0, $iA2ta$tanstackreacttable.createColumnHelper)();
+
+
+
 
 const $22d7e244b9ff5d8c$export$4564041bcff0e281 = ()=>{
     const handleFormatRow = (row)=>row.map((cell)=>({
@@ -2876,7 +2906,7 @@ const $22d7e244b9ff5d8c$export$4564041bcff0e281 = ()=>{
         const sheets = [];
         const columns = table.getAllColumns();
         const rows = exportData ?? table.getRowModel()?.flatRows?.map((row)=>row.original);
-        const order = table.getState().columnOrder;
+        const order = table.state.columnOrder;
         const sortedColumns = (0, $iA2ta$lodash.filter)([
             ...columns
         ].sort((a, b)=>(0, $iA2ta$lodash.indexOf)(order, a.id ?? (0, $iA2ta$lodash.get)(a, 'accessorKey')) - (0, $iA2ta$lodash.indexOf)(order, b.id ?? (0, $iA2ta$lodash.get)(b, 'accessorKey'))), (column)=>typeof column?.columnDef?.header === 'string' && column?.getIsVisible());
@@ -3039,7 +3069,7 @@ const $77914cd9d098713a$var$styles = {
 var $77914cd9d098713a$export$2e2bcd8739ae039 = $77914cd9d098713a$var$styles;
 
 
-const $0c769a920d1734cb$var$TableList = (props)=>{
+function $0c769a920d1734cb$var$TableList(props) {
     const { id: id, columns: columns, data: data, page: page, children: children, defaultOrder: defaultOrder, defaultVisibility: defaultVisibility, type: type = 'normal', isLoading: isLoading, isStriped: isStriped = false, hasStickyHeader: hasStickyHeader = false, hasVerticalSeparators: hasVerticalSeparators = false, areControlsVisible: areControlsVisible = true, customControls: customControls, exportFileName: exportFileName = 'table-export', styles: stylesOverrides, onChange: onChange, onPaginate: onPaginate } = props;
     const { generate: generate, write: write } = (0, $22d7e244b9ff5d8c$export$4564041bcff0e281)();
     const handleGenerateStyle = ()=>{
@@ -3054,8 +3084,8 @@ const $0c769a920d1734cb$var$TableList = (props)=>{
     const [sorting, setSorting] = (0, $iA2ta$react.useState)([]);
     const [visibility, setVisibility] = (0, $iA2ta$react.useState)({});
     const [order, setOrder] = (0, $iA2ta$react.useState)([]);
-    const table = (0, $iA2ta$tanstackreacttable.useReactTable)({
-        getCoreRowModel: (0, $iA2ta$tanstackreacttable.getCoreRowModel)(),
+    const table = (0, $iA2ta$tanstackreacttable.useTable)({
+        features: (0, $def42fb278b4e54a$export$8a456ae7ab58d698),
         columns: columns,
         data: data,
         state: {
@@ -3280,7 +3310,7 @@ const $0c769a920d1734cb$var$TableList = (props)=>{
                                                 children: table?.getRowModel().rows.map((row, index)=>(0, $iA2ta$reactjsxruntime.jsx)("tr", {
                                                         className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.body.table.body.row, isStriped && index % 2 === 0 && 'bg-gray-50'),
                                                         children: row.getVisibleCells().map((cell)=>(0, $iA2ta$reactjsxruntime.jsx)("td", {
-                                                                className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.body.table.body.cell, hasStickyHeader && index !== table?.getState()?.pagination?.pageSize - 1 && 'border-b border-gray-200'),
+                                                                className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.body.table.body.cell, hasStickyHeader && index !== table.state.pagination.pageSize - 1 && 'border-b border-gray-200'),
                                                                 children: (0, $iA2ta$tanstackreacttable.flexRender)(cell.column.columnDef.cell, cell.getContext())
                                                             }, cell.id))
                                                     }, row.id))
@@ -3318,7 +3348,7 @@ const $0c769a920d1734cb$var$TableList = (props)=>{
             ]
         })
     });
-};
+}
 var $0c769a920d1734cb$export$2e2bcd8739ae039 = $0c769a920d1734cb$var$TableList;
 
 
@@ -3365,6 +3395,7 @@ const $9ed0b3989f82e70a$var$isValidState = (state)=>{
 
 
 
+
 const $ad4435d9ab2ba956$var$base = {
     container: '',
     head: '',
@@ -3373,15 +3404,15 @@ const $ad4435d9ab2ba956$var$base = {
         wrapper: 'flow-root relative',
         content: '',
         styleWrapper: 'flex overflow-x-scroll overflow-y-visible',
-        styleWrapperWithLeftSide: 'flex',
+        styleWrapperWithStartSide: 'flex',
         tableWrapper: 'inline-block min-w-full align-middle',
-        tableWrapperWithLeftSide: 'w-full overflow-x-scroll',
+        tableWrapperWithStartSide: 'w-full overflow-x-scroll',
         table: {
             container: 'min-w-full border-separate border-spacing-0',
-            containerWithLeftSide: 'border-separate border-spacing-0',
+            containerWithStartSide: 'border-separate border-spacing-0',
             pinnedColumns: {
-                left: '-4px 0 4px -4px gray inset',
-                right: '4px 0 4px -4px gray inset'
+                start: '4px 0 4px -4px gray inset',
+                end: '-4px 0 4px -4px gray inset'
             },
             head: {
                 container: '',
@@ -3431,7 +3462,7 @@ const $ad4435d9ab2ba956$var$base = {
         }
     },
     foot: '',
-    leftSide: 'text-sm text-gray-500'
+    startSide: 'text-sm text-gray-500'
 };
 const $ad4435d9ab2ba956$var$styles = {
     base: $ad4435d9ab2ba956$var$base,
@@ -3449,7 +3480,7 @@ var $ad4435d9ab2ba956$export$2e2bcd8739ae039 = $ad4435d9ab2ba956$var$styles;
 
 
 const $51d5596368acf759$var$TableList2 = (props)=>{
-    const { id: id, table: config, head: head, foot: foot, leftSide: leftSide, renderSubComponent: renderSubComponent, isLoading: isLoading, onRowClick: onRowClick, onChange: onChange, styles: stylesOverrides, dragConfig: dragConfig } = props;
+    const { id: id, table: config, head: head, foot: foot, startSide: startSide, renderSubComponent: renderSubComponent, isLoading: isLoading, onRowClick: onRowClick, onChange: onChange, styles: stylesOverrides, dragConfig: dragConfig } = props;
     const [columnVisibility, setColumnVisibility] = (0, $iA2ta$react.useState)({});
     const [columnOrder, setColumnOrder] = (0, $iA2ta$react.useState)([]);
     const [sorting, setSorting] = (0, $iA2ta$react.useState)(config.options?.defaultSorting ?? []);
@@ -3509,10 +3540,8 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
         config.columns,
         config.options?.defaultVisibility
     ]);
-    const table = (0, $iA2ta$tanstackreacttable.useReactTable)({
-        getExpandedRowModel: (0, $iA2ta$tanstackreacttable.getExpandedRowModel)(),
-        getGroupedRowModel: (0, $iA2ta$tanstackreacttable.getGroupedRowModel)(),
-        getCoreRowModel: (0, $iA2ta$tanstackreacttable.getCoreRowModel)(),
+    const table = (0, $iA2ta$tanstackreacttable.useTable)({
+        features: (0, $def42fb278b4e54a$export$8a456ae7ab58d698),
         getSubRows: config.options?.getSubRows,
         autoResetExpanded: false,
         columns: isDraggable ? [
@@ -3544,8 +3573,8 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
                 ...config.options?.defaultOrder ?? []
             ] : config.options?.defaultOrder,
             columnPinning: {
-                left: (0, $iA2ta$lodash.map)(config.options?.columnPinning?.left, 'name') ?? [],
-                right: (0, $iA2ta$lodash.map)(config.options?.columnPinning?.right, 'name') ?? []
+                start: (0, $iA2ta$lodash.map)(config.options?.columnPinning?.start, 'name') ?? [],
+                end: (0, $iA2ta$lodash.map)(config.options?.columnPinning?.end, 'name') ?? []
             },
             grouping: config.options?.grouping?.defaultGrouping,
             expanded: config.options?.grouping?.defaultExpanded
@@ -3590,7 +3619,11 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
         const savedVisibility = (0, $9ed0b3989f82e70a$export$63dc08f552326ce2)(id)?.columnVisibility;
         if (savedVisibility && !(0, $iA2ta$lodash.isEmpty)(Object.keys(savedVisibility))) setColumnVisibility(savedVisibility);
         else {
-            const columnKeys = (0, $iA2ta$lodash.map)(table?.getAllColumns(), (column)=>column.id ?? (0, $iA2ta$lodash.get)(column, 'accessorKey'));
+            const mappedColumns = (0, $iA2ta$lodash.map)(config.columns, (column)=>column?.id ?? (0, $iA2ta$lodash.get)(column, 'accessorKey'));
+            const columnKeys = isDraggable ? [
+                'drag-handle',
+                ...mappedColumns
+            ] : mappedColumns;
             const visibility = {};
             (0, $iA2ta$lodash.forEach)(columnKeys, (key)=>{
                 (0, $iA2ta$lodash.assign)(visibility, {
@@ -3606,9 +3639,10 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
             setColumnVisibility(visibility);
         }
     }, [
+        config.columns,
         config?.options?.defaultVisibility,
         id,
-        table
+        isDraggable
     ]);
     (0, $iA2ta$react.useEffect)(()=>{
         const savedOrder = (0, $9ed0b3989f82e70a$export$63dc08f552326ce2)(id)?.columnOrder;
@@ -3693,7 +3727,7 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
                         }, cell.id))
                 })
             }) : (0, $iA2ta$lodash.map)(row.getVisibleCells(), (cell)=>(0, $iA2ta$reactjsxruntime.jsx)("td", {
-                    className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.body.table.body.cell, config?.options?.hasStickyHeader && index !== table?.getState()?.pagination?.pageSize - 1 && styles.body.table.body.sticky),
+                    className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.body.table.body.cell, config?.options?.hasStickyHeader && index !== table.state.pagination.pageSize - 1 && styles.body.table.body.sticky),
                     style: {
                         width: cell.column.getSize()
                     },
@@ -3708,36 +3742,36 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
             name: id
         });
         if (pinnedColumnIndex === -1) return null;
-        const startIndex = side === 'left' ? 0 : pinnedColumnIndex + 1;
-        const endIndex = side === 'left' ? pinnedColumnIndex : pinnedColumns.length - pinnedColumnIndex + 1;
+        const startIndex = side === 'start' ? 0 : pinnedColumnIndex + 1;
+        const endIndex = side === 'start' ? pinnedColumnIndex : pinnedColumns.length - pinnedColumnIndex + 1;
         return pinnedColumns.slice(startIndex, endIndex).reduce((acc, size)=>acc + size, 0);
     }, [
         config.options?.columnPinning
     ]);
     const getCommonPinningStyles = (0, $iA2ta$react.useCallback)((column)=>{
         const isPinned = column.getIsPinned();
-        const isLastLeftPinnedColumn = column.id == (0, $iA2ta$lodash.last)(config.options?.columnPinning?.left)?.name;
-        const isFirstRightPinnedColumn = column.id == (0, $iA2ta$lodash.first)(config.options?.columnPinning?.right)?.name;
-        const width = (0, $iA2ta$lodash.find)((0, $iA2ta$lodash.concat)(config.options?.columnPinning?.left, config.options?.columnPinning?.right), {
+        const isLastStartPinnedColumn = column.id == (0, $iA2ta$lodash.last)(config.options?.columnPinning?.start)?.name;
+        const isFirstEndPinnedColumn = column.id == (0, $iA2ta$lodash.first)(config.options?.columnPinning?.end)?.name;
+        const width = (0, $iA2ta$lodash.find)((0, $iA2ta$lodash.concat)(config.options?.columnPinning?.start, config.options?.columnPinning?.end), {
             name: column.id
         })?.size;
         const customBoxShadow = config?.options?.columnPinning?.customShadow;
-        const boxShadow = isLastLeftPinnedColumn ? customBoxShadow ?? styles.body.table.pinnedColumns.left : isFirstRightPinnedColumn ? customBoxShadow ?? styles.body.table.pinnedColumns.right : undefined;
+        const boxShadow = isLastStartPinnedColumn ? customBoxShadow ?? styles.body.table.pinnedColumns.start : isFirstEndPinnedColumn ? customBoxShadow ?? styles.body.table.pinnedColumns.end : undefined;
         return {
             width: width,
             maxWidth: width,
             minWidth: width,
             boxShadow: config.options?.columnPinning?.disableShadow ? undefined : boxShadow,
-            left: isPinned === 'left' ? `${getPinnedColumnsWidth('left', column.id)}px` : undefined,
-            right: isPinned === 'right' ? `${getPinnedColumnsWidth('right', column.id)}px` : undefined
+            left: isPinned === 'end' ? `${getPinnedColumnsWidth('end', column.id)}px` : undefined,
+            right: isPinned === 'start' ? `${getPinnedColumnsWidth('start', column.id)}px` : undefined
         };
     }, [
         config.options?.columnPinning?.customShadow,
         config.options?.columnPinning?.disableShadow,
-        config.options?.columnPinning?.left,
-        config.options?.columnPinning?.right,
-        styles.body.table.pinnedColumns.left,
-        styles.body.table.pinnedColumns.right,
+        config.options?.columnPinning?.start,
+        config.options?.columnPinning?.end,
+        styles.body.table.pinnedColumns.start,
+        styles.body.table.pinnedColumns.end,
         getPinnedColumnsWidth
     ]);
     const getSortIcon = (0, $iA2ta$react.useCallback)((column)=>{
@@ -3779,17 +3813,17 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
                 children: (0, $iA2ta$reactjsxruntime.jsx)("div", {
                     className: styles.body.wrapper,
                     children: (0, $iA2ta$reactjsxruntime.jsxs)("div", {
-                        className: leftSide ? styles.body.styleWrapperWithLeftSide : styles.body.styleWrapper,
+                        className: startSide ? styles.body.styleWrapperWithStartSide : styles.body.styleWrapper,
                         children: [
-                            leftSide && (0, $iA2ta$reactjsxruntime.jsx)("div", {
-                                className: styles.leftSide,
-                                children: leftSide(state)
+                            startSide && (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                                className: styles.startSide,
+                                children: startSide(state)
                             }),
                             (0, $iA2ta$reactjsxruntime.jsxs)("div", {
-                                className: (0, $622cd2936b18c771$export$4370d69198e9314a)(leftSide ? styles.body.tableWrapperWithLeftSide : styles.body.tableWrapper),
+                                className: (0, $622cd2936b18c771$export$4370d69198e9314a)(startSide ? styles.body.tableWrapperWithStartSide : styles.body.tableWrapper),
                                 children: [
                                     (0, $iA2ta$reactjsxruntime.jsxs)("table", {
-                                        className: (0, $622cd2936b18c771$export$4370d69198e9314a)(leftSide ? styles.body.table.container : styles.body.table.container),
+                                        className: (0, $622cd2936b18c771$export$4370d69198e9314a)(startSide ? styles.body.table.container : styles.body.table.container),
                                         children: [
                                             (0, $iA2ta$reactjsxruntime.jsx)("thead", {
                                                 className: styles.body.table.head.container,
@@ -3855,7 +3889,7 @@ const $51d5596368acf759$var$TableList2 = (props)=>{
                                                                 children: (0, $iA2ta$lodash.map)(row.getVisibleCells(), (cell)=>(0, $iA2ta$reactjsxruntime.jsx)("td", {
                                                                         "data-column-id": cell.column.id,
                                                                         "data-row-id": row.id,
-                                                                        className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.body.table.body.cell, config?.options?.hasStickyHeader && index !== table?.getState()?.pagination?.pageSize - 1 && styles.body.table.body.sticky, cell.column.getIsPinned() && styles.body.table.body.column.pinned.cell),
+                                                                        className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.body.table.body.cell, config?.options?.hasStickyHeader && index !== table.state.pagination.pageSize - 1 && styles.body.table.body.sticky, cell.column.getIsPinned() && styles.body.table.body.column.pinned.cell),
                                                                         style: {
                                                                             width: cell.column.getSize(),
                                                                             ...getCommonPinningStyles(cell.column)
@@ -3930,9 +3964,6 @@ var $51d5596368acf759$export$2e2bcd8739ae039 = $51d5596368acf759$var$TableList2;
 
 
 
-const $def42fb278b4e54a$export$4b44a5cb9651fe5e = ()=>(0, $iA2ta$tanstackreacttable.createColumnHelper)();
-
-