@ballistix.digital/react-components 9.9.1 → 9.10.0

package/dist/index.esm.js

@@ -12,7 +12,7 @@ import {FontAwesomeIcon as $4MPRY$FontAwesomeIcon} from "@fortawesome/react-font
 import {useFloating as $4MPRY$useFloating, offset as $4MPRY$offset, flip as $4MPRY$flip, shift as $4MPRY$shift, arrow as $4MPRY$arrow, autoUpdate as $4MPRY$autoUpdate, useHover as $4MPRY$useHover, useFocus as $4MPRY$useFocus, useDismiss as $4MPRY$useDismiss, useRole as $4MPRY$useRole, useInteractions as $4MPRY$useInteractions, FloatingArrow as $4MPRY$FloatingArrow} from "@floating-ui/react";
 import {Menu as $4MPRY$Menu, MenuButton as $4MPRY$MenuButton, Transition as $4MPRY$Transition, MenuItems as $4MPRY$MenuItems, Dialog as $4MPRY$Dialog, TransitionChild as $4MPRY$TransitionChild, Popover as $4MPRY$Popover, PopoverButton as $4MPRY$PopoverButton, PopoverPanel as $4MPRY$PopoverPanel, Switch as $4MPRY$Switch} from "@headlessui/react";
 import {useMask as $4MPRY$useMask} from "@react-input/mask";
-import {useReactTable as $4MPRY$useReactTable, getCoreRowModel as $4MPRY$getCoreRowModel, flexRender as $4MPRY$flexRender, getExpandedRowModel as $4MPRY$getExpandedRowModel, getGroupedRowModel as $4MPRY$getGroupedRowModel, createColumnHelper as $4MPRY$createColumnHelper} from "@tanstack/react-table";
+import {useTable as $4MPRY$useTable, flexRender as $4MPRY$flexRender, tableFeatures as $4MPRY$tableFeatures, rowSortingFeature as $4MPRY$rowSortingFeature, columnVisibilityFeature as $4MPRY$columnVisibilityFeature, columnOrderingFeature as $4MPRY$columnOrderingFeature, columnPinningFeature as $4MPRY$columnPinningFeature, columnSizingFeature as $4MPRY$columnSizingFeature, rowPaginationFeature as $4MPRY$rowPaginationFeature, columnGroupingFeature as $4MPRY$columnGroupingFeature, createGroupedRowModel as $4MPRY$createGroupedRowModel, rowExpandingFeature as $4MPRY$rowExpandingFeature, createExpandedRowModel as $4MPRY$createExpandedRowModel, rowAggregationFeature as $4MPRY$rowAggregationFeature, aggregationFn_sum as $4MPRY$aggregationFn_sum, aggregationFn_min as $4MPRY$aggregationFn_min, aggregationFn_max as $4MPRY$aggregationFn_max, aggregationFn_extent as $4MPRY$aggregationFn_extent, aggregationFn_mean as $4MPRY$aggregationFn_mean, aggregationFn_median as $4MPRY$aggregationFn_median, aggregationFn_unique as $4MPRY$aggregationFn_unique, aggregationFn_uniqueCount as $4MPRY$aggregationFn_uniqueCount, aggregationFn_count as $4MPRY$aggregationFn_count, aggregationFn_first as $4MPRY$aggregationFn_first, aggregationFn_last as $4MPRY$aggregationFn_last, createColumnHelper as $4MPRY$createColumnHelper} from "@tanstack/react-table";
 import $4MPRY$reacttailwindcssselect from "react-tailwindcss-select";
 import {utils as $4MPRY$utils, writeFile as $4MPRY$writeFile} from "xlsx";
 import {useSensors as $4MPRY$useSensors, useSensor as $4MPRY$useSensor, MouseSensor as $4MPRY$MouseSensor, TouchSensor as $4MPRY$TouchSensor, KeyboardSensor as $4MPRY$KeyboardSensor, DndContext as $4MPRY$DndContext, closestCenter as $4MPRY$closestCenter} from "@dnd-kit/core";
@@ -2793,6 +2793,36 @@ var $8239f5cdc1851973$export$2e2bcd8739ae039 = $8239f5cdc1851973$var$PanelPagina
 
 
 
+const $fc6e6482f238e9ea$export$8a456ae7ab58d698 = (0, $4MPRY$tableFeatures)({
+    rowSortingFeature: $4MPRY$rowSortingFeature,
+    columnVisibilityFeature: $4MPRY$columnVisibilityFeature,
+    columnOrderingFeature: $4MPRY$columnOrderingFeature,
+    columnPinningFeature: $4MPRY$columnPinningFeature,
+    columnSizingFeature: $4MPRY$columnSizingFeature,
+    rowPaginationFeature: $4MPRY$rowPaginationFeature,
+    columnGroupingFeature: $4MPRY$columnGroupingFeature,
+    groupedRowModel: (0, $4MPRY$createGroupedRowModel)(),
+    rowExpandingFeature: $4MPRY$rowExpandingFeature,
+    expandedRowModel: (0, $4MPRY$createExpandedRowModel)(),
+    rowAggregationFeature: $4MPRY$rowAggregationFeature,
+    aggregationFns: {
+        sum: (0, $4MPRY$aggregationFn_sum),
+        min: (0, $4MPRY$aggregationFn_min),
+        max: (0, $4MPRY$aggregationFn_max),
+        extent: (0, $4MPRY$aggregationFn_extent),
+        mean: (0, $4MPRY$aggregationFn_mean),
+        median: (0, $4MPRY$aggregationFn_median),
+        unique: (0, $4MPRY$aggregationFn_unique),
+        uniqueCount: (0, $4MPRY$aggregationFn_uniqueCount),
+        count: (0, $4MPRY$aggregationFn_count),
+        first: (0, $4MPRY$aggregationFn_first),
+        last: (0, $4MPRY$aggregationFn_last)
+    }
+});
+const $fc6e6482f238e9ea$export$4b44a5cb9651fe5e = ()=>(0, $4MPRY$createColumnHelper)();
+
+
+
 
 const $382ffb7c1faa0f62$export$4564041bcff0e281 = ()=>{
     const handleFormatRow = (row)=>row.map((cell)=>({
@@ -2808,7 +2838,7 @@ const $382ffb7c1faa0f62$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, $4MPRY$filter)([
             ...columns
         ].sort((a, b)=>(0, $4MPRY$indexOf)(order, a.id ?? (0, $4MPRY$get)(a, 'accessorKey')) - (0, $4MPRY$indexOf)(order, b.id ?? (0, $4MPRY$get)(b, 'accessorKey'))), (column)=>typeof column?.columnDef?.header === 'string' && column?.getIsVisible());
@@ -2971,7 +3001,7 @@ const $fb5a78a09a8b15b6$var$styles = {
 var $fb5a78a09a8b15b6$export$2e2bcd8739ae039 = $fb5a78a09a8b15b6$var$styles;
 
 
-const $4421fdc946e7dd6c$var$TableList = (props)=>{
+function $4421fdc946e7dd6c$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, $382ffb7c1faa0f62$export$4564041bcff0e281)();
     const handleGenerateStyle = ()=>{
@@ -2986,8 +3016,8 @@ const $4421fdc946e7dd6c$var$TableList = (props)=>{
     const [sorting, setSorting] = (0, $4MPRY$useState)([]);
     const [visibility, setVisibility] = (0, $4MPRY$useState)({});
     const [order, setOrder] = (0, $4MPRY$useState)([]);
-    const table = (0, $4MPRY$useReactTable)({
-        getCoreRowModel: (0, $4MPRY$getCoreRowModel)(),
+    const table = (0, $4MPRY$useTable)({
+        features: (0, $fc6e6482f238e9ea$export$8a456ae7ab58d698),
         columns: columns,
         data: data,
         state: {
@@ -3212,7 +3242,7 @@ const $4421fdc946e7dd6c$var$TableList = (props)=>{
                                                 children: table?.getRowModel().rows.map((row, index)=>(0, $4MPRY$jsx)("tr", {
                                                         className: (0, $66c3dcaaa74b5389$export$4370d69198e9314a)(styles.body.table.body.row, isStriped && index % 2 === 0 && 'bg-gray-50'),
                                                         children: row.getVisibleCells().map((cell)=>(0, $4MPRY$jsx)("td", {
-                                                                className: (0, $66c3dcaaa74b5389$export$4370d69198e9314a)(styles.body.table.body.cell, hasStickyHeader && index !== table?.getState()?.pagination?.pageSize - 1 && 'border-b border-gray-200'),
+                                                                className: (0, $66c3dcaaa74b5389$export$4370d69198e9314a)(styles.body.table.body.cell, hasStickyHeader && index !== table.state.pagination.pageSize - 1 && 'border-b border-gray-200'),
                                                                 children: (0, $4MPRY$flexRender)(cell.column.columnDef.cell, cell.getContext())
                                                             }, cell.id))
                                                     }, row.id))
@@ -3250,7 +3280,7 @@ const $4421fdc946e7dd6c$var$TableList = (props)=>{
             ]
         })
     });
-};
+}
 var $4421fdc946e7dd6c$export$2e2bcd8739ae039 = $4421fdc946e7dd6c$var$TableList;
 
 
@@ -3297,6 +3327,7 @@ const $b77b4b93ae627775$var$isValidState = (state)=>{
 
 
 
+
 const $a159f18e2839f1e6$var$base = {
     container: '',
     head: '',
@@ -3305,15 +3336,15 @@ const $a159f18e2839f1e6$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: '',
@@ -3363,7 +3394,7 @@ const $a159f18e2839f1e6$var$base = {
         }
     },
     foot: '',
-    leftSide: 'text-sm text-gray-500'
+    startSide: 'text-sm text-gray-500'
 };
 const $a159f18e2839f1e6$var$styles = {
     base: $a159f18e2839f1e6$var$base,
@@ -3381,7 +3412,7 @@ var $a159f18e2839f1e6$export$2e2bcd8739ae039 = $a159f18e2839f1e6$var$styles;
 
 
 const $df469b72efb8986e$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, $4MPRY$useState)({});
     const [columnOrder, setColumnOrder] = (0, $4MPRY$useState)([]);
     const [sorting, setSorting] = (0, $4MPRY$useState)(config.options?.defaultSorting ?? []);
@@ -3441,10 +3472,8 @@ const $df469b72efb8986e$var$TableList2 = (props)=>{
         config.columns,
         config.options?.defaultVisibility
     ]);
-    const table = (0, $4MPRY$useReactTable)({
-        getExpandedRowModel: (0, $4MPRY$getExpandedRowModel)(),
-        getGroupedRowModel: (0, $4MPRY$getGroupedRowModel)(),
-        getCoreRowModel: (0, $4MPRY$getCoreRowModel)(),
+    const table = (0, $4MPRY$useTable)({
+        features: (0, $fc6e6482f238e9ea$export$8a456ae7ab58d698),
         getSubRows: config.options?.getSubRows,
         autoResetExpanded: false,
         columns: isDraggable ? [
@@ -3476,8 +3505,8 @@ const $df469b72efb8986e$var$TableList2 = (props)=>{
                 ...config.options?.defaultOrder ?? []
             ] : config.options?.defaultOrder,
             columnPinning: {
-                left: (0, $4MPRY$map)(config.options?.columnPinning?.left, 'name') ?? [],
-                right: (0, $4MPRY$map)(config.options?.columnPinning?.right, 'name') ?? []
+                start: (0, $4MPRY$map)(config.options?.columnPinning?.start, 'name') ?? [],
+                end: (0, $4MPRY$map)(config.options?.columnPinning?.end, 'name') ?? []
             },
             grouping: config.options?.grouping?.defaultGrouping,
             expanded: config.options?.grouping?.defaultExpanded
@@ -3522,7 +3551,11 @@ const $df469b72efb8986e$var$TableList2 = (props)=>{
         const savedVisibility = (0, $b77b4b93ae627775$export$63dc08f552326ce2)(id)?.columnVisibility;
         if (savedVisibility && !(0, $4MPRY$isEmpty)(Object.keys(savedVisibility))) setColumnVisibility(savedVisibility);
         else {
-            const columnKeys = (0, $4MPRY$map)(table?.getAllColumns(), (column)=>column.id ?? (0, $4MPRY$get)(column, 'accessorKey'));
+            const mappedColumns = (0, $4MPRY$map)(config.columns, (column)=>column?.id ?? (0, $4MPRY$get)(column, 'accessorKey'));
+            const columnKeys = isDraggable ? [
+                'drag-handle',
+                ...mappedColumns
+            ] : mappedColumns;
             const visibility = {};
             (0, $4MPRY$forEach)(columnKeys, (key)=>{
                 (0, $4MPRY$assign)(visibility, {
@@ -3538,9 +3571,10 @@ const $df469b72efb8986e$var$TableList2 = (props)=>{
             setColumnVisibility(visibility);
         }
     }, [
+        config.columns,
         config?.options?.defaultVisibility,
         id,
-        table
+        isDraggable
     ]);
     (0, $4MPRY$useEffect)(()=>{
         const savedOrder = (0, $b77b4b93ae627775$export$63dc08f552326ce2)(id)?.columnOrder;
@@ -3625,7 +3659,7 @@ const $df469b72efb8986e$var$TableList2 = (props)=>{
                         }, cell.id))
                 })
             }) : (0, $4MPRY$map)(row.getVisibleCells(), (cell)=>(0, $4MPRY$jsx)("td", {
-                    className: (0, $66c3dcaaa74b5389$export$4370d69198e9314a)(styles.body.table.body.cell, config?.options?.hasStickyHeader && index !== table?.getState()?.pagination?.pageSize - 1 && styles.body.table.body.sticky),
+                    className: (0, $66c3dcaaa74b5389$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()
                     },
@@ -3640,36 +3674,36 @@ const $df469b72efb8986e$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, $4MPRY$useCallback)((column)=>{
         const isPinned = column.getIsPinned();
-        const isLastLeftPinnedColumn = column.id == (0, $4MPRY$last)(config.options?.columnPinning?.left)?.name;
-        const isFirstRightPinnedColumn = column.id == (0, $4MPRY$first)(config.options?.columnPinning?.right)?.name;
-        const width = (0, $4MPRY$find)((0, $4MPRY$concat)(config.options?.columnPinning?.left, config.options?.columnPinning?.right), {
+        const isLastStartPinnedColumn = column.id == (0, $4MPRY$last)(config.options?.columnPinning?.start)?.name;
+        const isFirstEndPinnedColumn = column.id == (0, $4MPRY$first)(config.options?.columnPinning?.end)?.name;
+        const width = (0, $4MPRY$find)((0, $4MPRY$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, $4MPRY$useCallback)((column)=>{
@@ -3711,17 +3745,17 @@ const $df469b72efb8986e$var$TableList2 = (props)=>{
                 children: (0, $4MPRY$jsx)("div", {
                     className: styles.body.wrapper,
                     children: (0, $4MPRY$jsxs)("div", {
-                        className: leftSide ? styles.body.styleWrapperWithLeftSide : styles.body.styleWrapper,
+                        className: startSide ? styles.body.styleWrapperWithStartSide : styles.body.styleWrapper,
                         children: [
-                            leftSide && (0, $4MPRY$jsx)("div", {
-                                className: styles.leftSide,
-                                children: leftSide(state)
+                            startSide && (0, $4MPRY$jsx)("div", {
+                                className: styles.startSide,
+                                children: startSide(state)
                             }),
                             (0, $4MPRY$jsxs)("div", {
-                                className: (0, $66c3dcaaa74b5389$export$4370d69198e9314a)(leftSide ? styles.body.tableWrapperWithLeftSide : styles.body.tableWrapper),
+                                className: (0, $66c3dcaaa74b5389$export$4370d69198e9314a)(startSide ? styles.body.tableWrapperWithStartSide : styles.body.tableWrapper),
                                 children: [
                                     (0, $4MPRY$jsxs)("table", {
-                                        className: (0, $66c3dcaaa74b5389$export$4370d69198e9314a)(leftSide ? styles.body.table.container : styles.body.table.container),
+                                        className: (0, $66c3dcaaa74b5389$export$4370d69198e9314a)(startSide ? styles.body.table.container : styles.body.table.container),
                                         children: [
                                             (0, $4MPRY$jsx)("thead", {
                                                 className: styles.body.table.head.container,
@@ -3787,7 +3821,7 @@ const $df469b72efb8986e$var$TableList2 = (props)=>{
                                                                 children: (0, $4MPRY$map)(row.getVisibleCells(), (cell)=>(0, $4MPRY$jsx)("td", {
                                                                         "data-column-id": cell.column.id,
                                                                         "data-row-id": row.id,
-                                                                        className: (0, $66c3dcaaa74b5389$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, $66c3dcaaa74b5389$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)
@@ -3862,9 +3896,6 @@ var $df469b72efb8986e$export$2e2bcd8739ae039 = $df469b72efb8986e$var$TableList2;
 
 
 
-const $fc6e6482f238e9ea$export$4b44a5cb9651fe5e = ()=>(0, $4MPRY$createColumnHelper)();
-
-