@bigbinary/neeto-atoms 1.0.5 → 1.0.6

package/dist/components/DataTable/DataTable.d.ts

@@ -1,2 +1,2 @@
 import type { DataTableProps } from "./types";
-export declare const DataTable: <TData>({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting, enableURLSort, totalCount, pageSize, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize, enableColumnFreeze, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading, fixedHeight, bordered, className, scroll, emptyMessage, onRowClick, allowRowClick, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <TData>({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting, enableURLSort, totalCount, pageSize, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize, enableColumnFreeze, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading, bordered, className, emptyMessage, onRowClick, allowRowClick, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/types.d.ts

@@ -56,13 +56,8 @@ export interface DataTableProps<TData> {
     onMoreActionClick?: (actionType: string, columnId: string) => void;
     enableHeaderMenu?: boolean;
     loading?: boolean;
-    fixedHeight?: boolean;
     bordered?: boolean;
     className?: string;
-    scroll?: {
-        x?: number | string;
-        y?: number | string;
-    };
     emptyMessage?: string | React.ReactNode;
     onRowClick?: (event: React.MouseEvent, row: TData, index: number) => void;
     allowRowClick?: boolean;

package/dist/components/Table.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
-import { Table as ShadcnTable, TableHeader as ShadcnTableHeader, TableBody as ShadcnTableBody, TableFooter as ShadcnTableFooter, TableHead as ShadcnTableHead, TableRow as ShadcnTableRow, TableCell as ShadcnTableCell, TableCaption as ShadcnTableCaption } from "src/shadcn/components/table";
-declare const Table: (props: React.ComponentProps<typeof ShadcnTable>) => import("react/jsx-runtime").JSX.Element;
+import { TableHeader as ShadcnTableHeader, TableBody as ShadcnTableBody, TableFooter as ShadcnTableFooter, TableHead as ShadcnTableHead, TableRow as ShadcnTableRow, TableCell as ShadcnTableCell, TableCaption as ShadcnTableCaption } from "src/shadcn/components/table";
+declare const Table: ({ className, ...props }: React.ComponentProps<"table">) => import("react/jsx-runtime").JSX.Element;
 declare const TableHeader: (props: React.ComponentProps<typeof ShadcnTableHeader>) => import("react/jsx-runtime").JSX.Element;
 declare const TableBody: (props: React.ComponentProps<typeof ShadcnTableBody>) => import("react/jsx-runtime").JSX.Element;
 declare const TableFooter: (props: React.ComponentProps<typeof ShadcnTableFooter>) => import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -59697,9 +59697,6 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
-function Table$1({ className, ...props }) {
-    return (jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: jsx("table", { "data-slot": "table", className: cn$1("w-full caption-bottom text-sm", className), ...props }) }));
-}
 function TableHeader$1({ className, ...props }) {
     return (jsx("thead", { "data-slot": "table-header", className: cn$1("[&_tr]:border-b", className), ...props }));
 }
@@ -59722,10 +59719,10 @@ function TableCaption$1({ className, ...props }) {
     return (jsx("caption", { "data-slot": "table-caption", className: cn$1("mt-4 text-sm text-muted-foreground", className), ...props }));
 }
 
-const Table = (props) => (jsx(Table$1, { ...props }));
-const TableHeader = (props) => jsx(TableHeader$1, { ...props });
+const Table = ({ className, ...props }) => (jsx("div", { "data-slot": "table-container", className: "relative w-full", children: jsx("table", { "data-slot": "table", className: cn$1("w-full caption-bottom text-sm", className), ...props }) }));
+const TableHeader = (props) => (jsx(TableHeader$1, { ...props }));
 const TableBody = (props) => (jsx(TableBody$1, { ...props }));
-const TableFooter = (props) => jsx(TableFooter$1, { ...props });
+const TableFooter = (props) => (jsx(TableFooter$1, { ...props }));
 const TableHead = (props) => (jsx(TableHead$1, { ...props }));
 const TableRow = (props) => (jsx(TableRow$1, { ...props }));
 const TableCell = (props) => (jsx(TableCell$1, { ...props }));
@@ -60126,7 +60123,7 @@ const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBu
     if (!isAllPageRowsSelected)
         return null;
     const { selectAllRowMessage, selectAllRowButtonLabel, setBulkSelectedAllRows, allRowsSelectedMessage, clearSelectionButtonLabel, } = bulkSelectAllRowsProps;
-    return (jsx("div", { className: "flex items-center justify-center gap-2 border-b bg-muted/50 px-4 py-2 text-sm", children: isBulkAllSelected ? (jsxs(Fragment, { children: [jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }), clearSelectionButtonLabel && (jsx(Button$1, { variant: "link", onClick: () => setBulkSelectedAllRows(false), children: clearSelectionButtonLabel }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: selectAllRowMessage }), jsx(Button$1, { variant: "link", onClick: () => setBulkSelectedAllRows(true), children: selectAllRowButtonLabel })] })) }));
+    return (jsx("div", { className: "mb-2 flex items-center justify-center gap-1 rounded-lg bg-primary/10 px-4 py-1.5 text-sm text-primary", children: isBulkAllSelected ? (jsxs(Fragment, { children: [jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }), clearSelectionButtonLabel && (jsx(Button$1, { variant: "link", onClick: () => setBulkSelectedAllRows(false), children: clearSelectionButtonLabel }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: selectAllRowMessage }), jsx(Button$1, { variant: "link", onClick: () => setBulkSelectedAllRows(true), children: selectAllRowButtonLabel })] })) }));
 };
 
 function Pagination$1({ className, ...props }) {
@@ -60266,7 +60263,7 @@ const HeaderCellMenu = ({ column, enableAddColumn, enableColumnFreeze, isColumnP
                             }) }))] })] }) }));
 };
 
-const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting = true, enableURLSort = true, totalCount, pageSize = DEFAULT_PAGE_SIZE, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination = true, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize = true, enableColumnFreeze = true, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder = false, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn = false, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading = false, fixedHeight = false, bordered = true, className, scroll, emptyMessage, onRowClick, allowRowClick = true, }) => {
+const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting = true, enableURLSort = true, totalCount, pageSize = DEFAULT_PAGE_SIZE, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination = true, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize = true, enableColumnFreeze = true, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder = false, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn = false, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading = false, bordered = true, className, emptyMessage, onRowClick, allowRowClick = true, }) => {
     const getRowId = useMemo(() => getRowIdProp ??
         ((row) => row.id), [getRowIdProp]);
     const { sorting, onSortingChange } = useTableSort({
@@ -60325,6 +60322,14 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
         }
         return columnOrder;
     }, [columnOrder, selectionColumn]);
+    const resolvedColumnPinning = useMemo(() => {
+        if (!selectionColumn || !enableColumnFreeze)
+            return columnPinning;
+        const left = columnPinning.left ?? [];
+        if (left.includes("_selection"))
+            return columnPinning;
+        return { ...columnPinning, left: ["_selection", ...left] };
+    }, [columnPinning, selectionColumn, enableColumnFreeze]);
     const table = useReactTable({
         data,
         columns: allColumns,
@@ -60336,7 +60341,7 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
             sorting,
             pagination: paginationState,
             rowSelection,
-            columnPinning,
+            columnPinning: resolvedColumnPinning,
             columnVisibility,
             columnOrder: resolvedColumnOrder,
         },
@@ -60364,17 +60369,7 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
             onSortingChange([{ id: columnId, desc }]);
         }
     };
-    const scrollStyle = {};
-    if (scroll?.x) {
-        scrollStyle.minWidth =
-            typeof scroll.x === "number" ? `${scroll.x}px` : scroll.x;
-    }
-    if (scroll?.y) {
-        scrollStyle.maxHeight =
-            typeof scroll.y === "number" ? `${scroll.y}px` : scroll.y;
-        scrollStyle.overflowY = "auto";
-    }
-    return (jsxs("div", { className: cn$1("relative w-full", fixedHeight && "flex flex-1 flex-col overflow-hidden", className), children: [loading && jsx(LoadingOverlay, {}), bulkSelectAllRowsProps && (jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: table.getIsAllPageRowsSelected(), isBulkAllSelected: isBulkAllSelected })), jsx("div", { className: cn$1("overflow-auto", fixedHeight && "flex-1", bordered && "overflow-hidden rounded-lg border"), style: scrollStyle, children: jsxs(Table, { style: scroll?.x ? { minWidth: scrollStyle.minWidth } : undefined, children: [jsx(TableHeader, { className: "bg-muted", children: table.getHeaderGroups().map(headerGroup => (jsx(TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
+    return (jsxs("div", { className: cn$1("relative flex min-h-0 w-full flex-col", className), children: [loading && jsx(LoadingOverlay, {}), bulkSelectAllRowsProps && (jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: table.getIsAllPageRowsSelected(), isBulkAllSelected: isBulkAllSelected })), jsx("div", { className: cn$1("min-h-0 flex-1 overflow-auto", bordered && "rounded-lg border"), children: jsxs(Table, { children: [jsx(TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map(headerGroup => (jsx(TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
                                     const isPinned = header.column.getIsPinned();
                                     const isSelectionCol = header.column.id === "_selection";
                                     const visibleHeaders = headerGroup.headers.filter(h => h.column.id !== "_selection");