pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/Table/TableProps.d.ts

@@ -1,69 +1,133 @@
 import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from "react";
 import { FilterSidebarProps } from "../FilterSidebar/FilterSidebar";
 import type { FilterValues } from "./filterTypes";
+import type { TableVariant } from "./variants/tokens";
 export type { FilterValues } from "./filterTypes";
+export type { TableVariant, TableVariantTokens } from "./variants/tokens";
 /** Dynamic row shape (cells, styles, callbacks). */
 export type DataObject = Record<string, unknown>;
+/** Row-height preset controlling row height and cell vertical padding. */
 export type TableDensity = "compact" | "normal" | "comfortable";
+/** Empty-state content shown when there are no rows; alternative to a raw ReactNode. */
 export type TableEmptyState = {
+    /** Rendered as the illustration above the title; omit for the default empty-state icon. */
     icon?: ReactNode;
+    /** Headline of the empty state. */
     title?: string;
+    /** Supporting line under the title. */
     description?: string;
 };
+/** Props for the main Table component: data, columns, pagination, selection, filters, and more. */
 export type TableProps = {
+    /** Every row needs a unique `id` — selection, select-all and row keys all read `row.id`. */
     data: DataObject[];
+    /** Memoize this array: an inline one re-installs column state on every render. */
     columns: TableHeaderProps[];
+    /** Hex override per group value; wins over the auto-assigned palette color. Only visible while grouped (Settings > Group). */
     groupColors?: Record<string | number, string>;
+    /** Renders a "+ add item" control in each group's footer row; no-op in flat (ungrouped) mode. */
     onAddItem?: (groupValue: string | number) => void;
+    /** Seeds the initial row height only — Table Settings > Density (or saved preferences.density) takes over after the first change. */
     density?: TableDensity;
+    /** Visual preset. Defaults to `studio`; pass `"classic"` for the banded header and per-column rules. */
+    variant?: TableVariant;
+    /** Content shown under a row when expanded; return null for rows with no detail and they get no chevron. Memoize it: an inline function re-renders every row. */
+    renderRowDetail?: (row: DataObject) => ReactNode | null;
+    /** Controlled expanded row ids; omit for uncontrolled. */
+    expandedRows?: (string | number)[];
+    /** Fires with the full expanded id list on every chevron toggle, controlled or not. */
+    onExpandedRowsChange?: (ids: (string | number)[]) => void;
+    /** Zebra rows: every second row gets the variant's `row.stripeBg` fill. Frozen and selected cells keep their own fill. */
     stripe?: boolean;
+    /** Shown when there are no rows. An object feeds the library `EmptyState`; any other node renders as-is. */
     emptyState?: TableEmptyState | ReactNode;
+    /** Shows the toolbar's global search control. Defaults true; the search only calls `onGlobalSearch`. */
+    isGlobalSearch?: boolean;
+    /** @deprecated Dead — Table renders no export UI and never reads this; no known consumer usage. */
     handleExportChange?: (value: string) => void | undefined;
+    /** @deprecated Dead — same unwired export feature as handleExportChange/exportLabel. */
     exportOptions?: ExportOption[];
+    /** @deprecated Dead — same unwired export feature as handleExportChange/exportOptions. */
     exportLabel?: string;
+    /** Skeleton rows when data is empty, otherwise dims existing rows; also true while onRefresh runs. */
     isLoading?: boolean;
+    /** @deprecated Dead — Table never destructures it; the live prop is `isTableSettings`. */
     isVisiblity?: boolean;
+    /** Adds a row-selection checkbox column plus a select-all header. Defaults false. */
     isCheckbox?: boolean;
+    /** @deprecated Dead — the header paints the variant's `header.bg`; this value is never read. */
     headerBgColor?: string;
+    /** Fill for frozen (isFreeze) and sticky action cells. Defaults to `backgroundColor.secondary`; pass a token. */
     freezedBgColor?: string;
+    /** Ink for frozen/sticky chrome cells (checkbox, action). Defaults to `text[500]`; a hardcoded hex breaks dark mode. */
     freezedTextColor?: string;
+    /** @deprecated Dead — referenced nowhere in the Table tree; no visual effect. */
     tableBorderColor?: string;
+    /** Removes the row rules and header column dividers. */
     noBorders?: boolean;
+    /** Fires with the full selected-id list on every toggle, including select-all. */
     onSelection?: (selected: (string | number)[]) => void;
+    /** Client-side paging. Defaults true; false renders every row with no pager. */
     isPagination?: boolean;
+    /** Controlled selected row ids; a new array replaces the internal selection. */
     selections?: (string | number)[];
+    /** Fires per cell, gated on the column: a column with `node` swallows its clicks. Also makes rows tab stops; Enter or Space fires it for the first column without `node`. A node `label` arrives as its plain text. */
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
+    /** Sticky-positions the trailing action/link column during horizontal scroll. Defaults true. */
     isActionFreeze?: boolean;
+    /** "server" skips client-side slicing entirely — the parent must supply totalRecords and drive paging via onPagination. */
     paginationMode?: "client" | "server";
+    /** Replaces the pager with scroll-to-load: calls `onPagination(..., "next")` within 160px of the bottom; ignored while grouped. */
     infiniteScroll?: boolean;
+    /** Gates further loads; when omitted, derived from data.length < totalRecords. */
     hasMore?: boolean;
+    /** Parent-owned: set true while the next page is fetching — blocks repeat loads and shows the spinner. */
     isLoadingMore?: boolean;
+    /** Shows a Load more button over grouped rows instead of a pager; no effect unless the user has grouped the table. */
     groupLoadMore?: boolean;
+    /** Label and loading text of the grouped Load more button. Defaults "Load more". */
     loadMoreText?: string;
+    /** Where the grouped Load more button sits. Defaults "top". */
     loadMorePosition?: "top" | "bottom";
-    /** @deprecated Ignored — load more always uses the current page size (`noOfRowsPerPage`)
-     *  so page boundaries stay consistent. Kept only for backward compatibility. */
+    /** Last-resort grouped-load-more chunk size, read only when `noOfRowsPerPage` is 0 or unset. */
     loadMoreChunkSize?: number;
+    /** Page size. Defaults 50; changing it later re-syncs the internal page size. */
     noOfRowsPerPage?: number;
+    /** Ignored by client paging; server/infinite/load-more use it for counts and the default hasMore. */
     totalRecords?: number;
+    /** record is the page's last row on "next"/"last", its first row on "prev"/"first" — a cursor for server paging. */
     onPagination?: (page: number, noOfRecords: number, record: DataObject | undefined, direction: "next" | "prev" | "first" | "last") => void;
+    /** Fires when the user picks a page size; the table also resets to page 1. */
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
+    /** Page-size choices; defaults are computed from data length. Server mode hides the picker unless set. */
     paginationSelectOptions?: (number | string)[];
+    /** Explicit pixel height; overrides autoFitViewport and minVisibleRows/maxVisibleRows outright when set. */
     tableMaxHeight?: number;
+    /** Floors the auto-computed row count used for sizing only — doesn't add rows or affect pagination. */
     minVisibleRows?: number;
+    /** Row count above which height is capped and scrolls; at or under it the table grows to fit every row, even wrapped ones. Ignored once tableMaxHeight is set. */
     maxVisibleRows?: number;
+    /** Further clamps computed height to remaining viewport space below the table, recalculated on resize; ignored once tableMaxHeight is set. */
     autoFitViewport?: boolean;
+    /** Hides columns past this index on first render only — a saved preferences.columns list (or a Settings save) wins on every later render. */
     defaultVisibleColumns?: number;
+    /** Skeleton rows shown while loading with no data. Defaults 4, minimum 1. */
     loadingSkeletonRows?: number;
+    /** Toolbar bulk actions; only `isStatic` items show before any row is selected. */
     headerActions?: HeaderActionsProps;
+    /** Debounced 700ms; called with "" when the search box is closed. Filtering is the parent's job. */
     onGlobalSearch?: (searchVal: string) => void;
+    /** @deprecated Dead — Table.tsx never references it; never called, no known consumer usage. */
     onColumnFilter?: (filters: FilterValues) => void;
+    /** Gates the Settings gear (Density / Manage Columns / Group) — the real switch for column-visibility UI, unlike tableSettings or isVisiblity. */
     isTableSettings?: boolean;
+    /** @deprecated Dead — TableSettings receives it but never destructures it; no known consumer usage. */
     tableSettings?: {
         filters?: string[];
         filterSelected?: string[];
         onFilterSelection?: (filters: string[]) => void;
     };
+    /** filterMode defaults to "sidebar"; Clear All in "modal" mode doesn't re-apply filters (see COMPONENT-GOTCHAS.md). */
     filterSidebar?: Partial<FilterSidebarProps> & {
         isFilterSidebar?: boolean;
         handleSidebarFilterClick?: (filters: FilterValues) => void;
@@ -71,25 +135,37 @@ export type TableProps = {
         isApplyLoading?: boolean;
         filterMode?: "sidebar" | "modal";
     };
+    /** Server-persists columns/density/grouping as one JSON blob (GET on mount, POST on every Settings save). Omitting url (the default) makes it a silent no-op, not an error — the table just doesn't persist. */
     preferences?: {
+        /** Base REST endpoint for both GET and POST; empty string (the default) disables persistence entirely. */
         url: string;
+        /** Sent as a raw Authorization header value — not "Bearer "-prefixed. */
         token: string;
+        /** Distinguishes multiple saved blobs at the same url/page/name (e.g. per-view settings). */
         key?: string;
+        /** Sent alongside key/page as a query param — a server-side identifier, not rendered anywhere. */
         name?: string;
+        /** Identifies which page/screen owns this table's preferences; sent as a query param. */
         page?: string;
+        /** Scopes the preference blob per organization; sent on both GET and POST. */
         orgId?: string;
     };
+    /** Shows a Refresh button when set; may return a Promise — the table shows loading until it settles. */
     onRefresh?: () => void;
 };
+/** Config for the bulk-actions toolbar (delete/update/custom items) shown for the current selection. */
 export type HeaderActionsProps = {
+    /** Built-in "Delete" action, shown only while rows are selected and `enabled` is true. */
     isDelete?: {
         enabled?: boolean;
         onClick?: (selection: (string | number)[]) => void;
     };
+    /** Built-in "Mass Update" action, shown only while rows are selected and `enabled` is true. */
     isUpdate?: {
         enabled?: boolean;
         onClick?: (selection: (string | number)[]) => void;
     };
+    /** Custom actions; hidden until a row is selected unless `isStatic`. `customComponent` disables button semantics. */
     items?: ({
         icon?: React.ReactElement;
         name: string;
@@ -102,29 +178,64 @@ export type HeaderActionsProps = {
         type: "divider";
     })[];
 };
+/** Column definition: label, sort/search/freeze flags, and optional status or custom cell renderer. */
 export type TableHeaderProps = {
-    label: string | number;
+    /** Header content. A node (icon, tooltip trigger) renders as-is but is clipped, not ellipsized, when too wide. */
+    label: string | number | ReactNode;
+    /** Plain-text name for a node `label` — used by the sort/filter button names, Manage Columns, Group, filter chips and saved preferences. Ignored for a string/number label. Omitted: the node's text children, else `id`. */
+    labelText?: string;
+    /** Row field this column reads (`row[id]`) and its identity in sort, filter, freeze and saved preferences. */
     id: string | number;
+    /** Enables the multi-column sort control; sorts client-side only — server mode never reorders rows. */
     isSort?: boolean;
+    /** @deprecated Never read — every column gets the filter popover regardless. */
     isSearch?: boolean;
+    /** Sticky-pins the column to the left during horizontal scroll. */
     isFreeze?: boolean;
+    /** Initial visibility only; defaultVisibleColumns and saved preferences override it. */
     isHidden?: boolean;
+    /** "status" renders the cell value as a coloured pill unless the column has a `node` renderer. */
     type?: "status";
+    /** Pre-resolved tone per value — preferred over `statusColors` hex overrides. */
+    statusPalette?: Record<string, import("../../Utils/table").TablePaletteColor>;
+    /** Legacy hex fill seed per value; used only when `statusPalette` lacks that value. */
     statusColors?: Record<string, string>;
+    /** Field data-type; only columns that declare one appear in the Group-by picker. */
     columnType?: TableColumnType;
+    /** Horizontal alignment for both the header label and the body cells. Defaults "start", except a full-bleed status cell, which centres until this is set. */
+    align?: TableColumnAlign;
+    /** Custom cell renderer; a column with `node` never fires onRowClick. */
     node?: (data: DataObject) => JSX.Element | string | number | undefined;
 };
+/** Horizontal alignment shared by a column's header label and its cells. */
+export type TableColumnAlign = "start" | "center" | "end";
 /** Known field data-types (open-ended via the trailing string for forward-compat). */
 export type TableColumnType = "text" | "singleline" | "multiLine" | "description" | "email" | "phone" | "website" | "number" | "integer" | "decimal" | "dropdown" | "multiSelectDropdown" | "user" | "date" | "date_time" | "time" | "not_assigned" | (string & {});
+/** One entry in the export-format dropdown, paired with `handleExportChange`. */
 export type ExportOption = {
+    /** Text shown for the format in the dropdown. */
     label: string;
+    /** Format value passed to `handleExportChange`. */
     id: string;
 };
+/** Current sort direction applied to one column. */
 export type ColumnSortingProps = {
+    /** `id` of the sorted column. */
     column: string | number;
+    /** "none" means the column is not sorted. */
     direction: "asc" | "desc" | "none";
 };
-export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
+/** Internal wiring for the row-detail expander, built once by `Table`. */
+export type TableRowDetail = {
+    /** The `renderRowDetail` callback; a null result renders no detail content. */
+    render: (row: DataObject) => ReactNode | null;
+    /** Expands or collapses the detail of the row with this `id`. */
+    toggle: (id: string | number) => void;
+    /** Unique prefix for the DOM ids that link each toggle to its detail row. */
+    idPrefix: string;
+};
+/** Props for the TableHeader row subcomponent: all columns, sorting, search, freeze, selection. */
+export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
     isPopoverOpen?: boolean;
@@ -133,23 +244,36 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     handleHeaderClick?: (header: string, search: boolean) => void;
     headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnWidths: number[];
+    /** Measures the select-all cell so frozen columns can butt against its real width. */
+    slotRef: React.Ref<HTMLTableCellElement>;
+    slotWidth: number;
     columnsSort: ColumnSortingProps[];
     handleCheckbox: (selection: string | number) => void;
     checked: boolean | "indeterminate";
     isContent: boolean;
     isLink: boolean;
+    /** Adds the empty chevron column header after the checkbox. */
+    hasDetail?: boolean;
     setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
     columnsSearch: Record<string, string>;
     isSelecting?: boolean;
 };
+/** Props for the TableBody subcomponent; renders flat rows or grouped Monday-style board rows. */
 export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze" | "density" | "stripe" | "emptyState"> & {
     startRow: number;
-    endRow: number;
+    /** Page size; a change swaps the rendered rows without moving startRow, so scroll resets. */
+    rowsPerPage: number;
     columnWidths: number[];
+    /** Rendered width of the select-all cell; frozen columns start after it. */
+    slotWidth: number;
     handleCheckbox: (selection: string | number) => void;
     selections: (string | number)[];
     isContent: boolean;
     isLink: boolean;
+    /** Row-detail expander wiring; omitted when `renderRowDetail` is not used. */
+    rowDetail?: TableRowDetail;
+    /** Ids of the rows whose detail is open. */
+    expandedIds?: Set<string | number>;
     scrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
     /** Optional per-row id → accent color (Monday group stripe). */
     accentColors?: Record<string | number, string>;
@@ -157,31 +281,42 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     groups?: TableRenderGroup[];
     onAddItem?: (groupValue: string | number) => void;
 };
+/** One resolved group of rows with its label/accent colors, for grouped board rendering. */
 export type TableRenderGroup = {
+    /** Group key; compared with each row's value in the group column. */
     value: string | number;
+    /** Group header text. */
     label: string;
+    /** `solid` is the left accent stripe on the header and its rows, `soft` the header fill, `text` the header ink; `onSolid` is unused. */
     color: {
         solid: string;
         soft: string;
         text: string;
         onSolid?: string;
     };
+    /** Rows belonging to this group, in display order. */
     rows: DataObject[];
 };
+/** Props for one column's search/filter popover. */
 export type TableFiltersProps = {
     header: TableHeaderProps;
     setColumnsSearch: (searchVal: string) => void;
     columnsSearch: string;
     onClose: () => void;
 };
-export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "headerBgColor" | "freezedBgColor" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
+/** Props for a single column's header cell: sorting, filtering, freeze state, width. */
+export type ColumnHeaderProps = Pick<TableProps, "isCheckbox" | "noBorders"> & Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
     header: TableHeaderProps;
     index: number;
     columnWidths: number[];
+    slotWidth: number;
+    /** Width of the detail chevron column to the left of frozen columns; 0 when absent. */
+    detailWidth?: number;
     headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnsSearch: Record<string, string>;
     setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;
 };
+/** Pairs a column header with its current sort state, e.g. for a sort-icon renderer. */
 export type SortingProps = {
     isSorting: ColumnSortingProps | undefined;
     header: TableHeaderProps;

package/dist/Components/Table/columnLabel.d.ts

@@ -0,0 +1,6 @@
+import type { TableHeaderProps } from "./TableProps";
+export declare const isPrimitiveLabel: (label: unknown) => label is string | number;
+/** Plain-text name of a column, for every place a node cannot go: aria-labels, settings, chips, saved preferences. */
+export declare const columnLabelText: (column: Pick<TableHeaderProps, "id" | "label" | "labelText">) => string;
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+export declare const toSavedColumns: (columns: TableHeaderProps[]) => TableHeaderProps[];

package/dist/Components/Table/columnLabel.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toSavedColumns = exports.columnLabelText = exports.isPrimitiveLabel = void 0;
+const react_1 = require("react");
+const isPrimitiveLabel = (label) => typeof label === "string" || typeof label === "number";
+exports.isPrimitiveLabel = isPrimitiveLabel;
+const textOf = (node) => {
+    if ((0, exports.isPrimitiveLabel)(node))
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(textOf).join("");
+    if ((0, react_1.isValidElement)(node))
+        return textOf(node.props.children);
+    return "";
+};
+/** Plain-text name of a column, for every place a node cannot go: aria-labels, settings, chips, saved preferences. */
+const columnLabelText = (column) => {
+    if ((0, exports.isPrimitiveLabel)(column.label))
+        return String(column.label);
+    if (column.labelText)
+        return column.labelText;
+    return textOf(column.label).replace(/\s+/g, " ").trim() || String(column.id);
+};
+exports.columnLabelText = columnLabelText;
+/** Columns as they may be POSTed: a node label is swapped for its text, since elements are not JSON. */
+const toSavedColumns = (columns) => columns.map((column) => (0, exports.isPrimitiveLabel)(column.label) ? column : { ...column, label: (0, exports.columnLabelText)(column) });
+exports.toSavedColumns = toSavedColumns;

package/dist/Components/Table/components/HeaderActions.js

@@ -10,6 +10,9 @@ const react_2 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const hoverFill = (colors) => (0, planeStep_1.bandOn)(colors.background[100], colors.background[50]);
 const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const styledIcon = icon ? react_2.default.cloneElement(icon, {
@@ -18,12 +21,12 @@ const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hov
     }) : null;
     // A `customComponent` may itself be focusable, and a button must never wrap one.
     const isButton = !!onClick && !customComponent;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: colors.text[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: colors.text[500], px: 2, py: 1, borderRadius: "lg", _hover: isHoverEnabled
             ? {
-                color: hoverColor ? hoverColor : (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[100]),
-                bg: colors.background[100],
+                color: hoverColor ? hoverColor : (0, accentText_1.accentTextOnCanvas)(colors.primary, hoverFill(colors)),
+                bg: hoverFill(colors),
             }
-            : {}, transition: "all 0.2s ease", children: [customComponent, styledIcon, " ", name] }));
+            : {}, transition: (0, motion_1.transitionFor)(["color", "background-color"], "base"), children: [customComponent, styledIcon, " ", name] }));
 };
 const HeaderActions = ({ actions, selections, }) => {
     var _a, _b, _c, _d, _e, _f;
@@ -37,7 +40,7 @@ const HeaderActions = ({ actions, selections, }) => {
                     return ((0, jsx_runtime_1.jsx)(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
                 }
                 return null;
-            }), hasSelections && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[100]) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
+            }), hasSelections && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: (0, accentText_1.accentTextOnCanvas)(colors.primary, hoverFill(colors)) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
                         if ("type" in item && item.type === "divider") {
                             return (0, jsx_runtime_1.jsx)(Divider_1.default, {}, index);
                         }

package/dist/Components/Table/components/Pagination.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { TableProps } from "../TableProps";
-type PaginationProps = Pick<TableProps, "isVisiblity" | "columns" | "paginationSelectOptions"> & {
+type PaginationProps = Pick<TableProps, "paginationSelectOptions"> & {
     paginationText: string;
-    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    handlePageSizeChange: (size: number) => void;
     rowsPerPage: number;
     currentPage: number;
     pages: number;

package/dist/Components/Table/components/Pagination.js

@@ -40,18 +40,29 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const table_1 = require("../../../Utils/table");
+const Select_1 = __importDefault(require("../../Select/Select"));
+const useTable_1 = require("../hooks/useTable");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const lucide_react_1 = require("lucide-react");
+const STEP_SIZE = "1.5rem";
+const STEP_ICON = 16;
 const Pagination = react_1.default.memo(({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }) => {
-    const computedOptions = (0, react_1.useMemo)(() => paginationSelectOptions && paginationSelectOptions.length
-        ? paginationSelectOptions
-        : (0, table_1.pageSizeCalculation)(dataLength), [paginationSelectOptions, dataLength]);
+    const computedOptions = (0, react_1.useMemo)(() => {
+        if (paginationSelectOptions && paginationSelectOptions.length) {
+            return paginationSelectOptions;
+        }
+        const sizes = new Set((0, table_1.pageSizeCalculation)(dataLength));
+        sizes.add(useTable_1.DEFAULT_PAGE_SIZE);
+        sizes.add(rowsPerPage);
+        return [...sizes].sort((a, b) => a - b);
+    }, [paginationSelectOptions, dataLength, rowsPerPage]);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // const isLeftDisabled = currentPage === 0;
-    // const isRightDisabled = currentPage >= pages - 1;
-    const isLeftDisabled = dataLength === 0 || currentPage === 0;
-    const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsxs)(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? (0, jsx_runtime_1.jsx)("option", { value: 0 }) : null, computedOptions.map((size, index) => ((0, jsx_runtime_1.jsx)("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "First", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Previous", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}) }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Next", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Last", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, {}) }) })] }))] }));
+    const lastPage = Math.max(0, pages - 1);
+    // Stepping back is how a user escapes an empty page, so it survives an empty result.
+    const isLeftDisabled = currentPage === 0;
+    const isRightDisabled = dataLength === 0 || currentPage >= lastPage;
+    const step = (label, ariaLabel, icon, isDisabled, onClick) => ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": ariaLabel, icon: icon, variant: "ghost", size: "xs", minW: STEP_SIZE, h: STEP_SIZE, rounded: "full", color: isDisabled ? theme.colors.textMuted : theme.colors.text[500], isDisabled: isDisabled, onClick: onClick, _hover: isDisabled ? {} : { color: theme.colors.accentText } }) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", gap: "0.75rem", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Rows per page", onChange: (option) => option && handlePageSizeChange(Number(option.id)), value: rowsPerPage, size: "xs", width: "3.75rem", isDisabled: dataLength === 0, options: computedOptions.map((size) => ({ id: size, label: String(size) })) })), (dataLength > 0 || currentPage > 0) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.125rem", children: [step("First", "first-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage(0)), step("Previous", "previous-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage((page) => Math.max(0, page - 1))), (0, jsx_runtime_1.jsx)(react_2.Text, { px: "0.375rem", fontSize: "0.75rem", lineHeight: STEP_SIZE, whiteSpace: "nowrap", color: theme.colors.text[500], sx: { fontVariantNumeric: "tabular-nums" }, children: paginationText }), step("Next", "next-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage((page) => Math.min(lastPage, page + 1))), step("Last", "last-page", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage(lastPage))] }))] }));
 });
 exports.default = Pagination;

package/dist/Components/Table/components/TableActions.js

@@ -38,30 +38,47 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+const assignRef = (ref, value) => {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+};
+const TriggerAnchor = (0, react_1.forwardRef)(({ target }, ref) => {
+    (0, react_1.useLayoutEffect)(() => {
+        assignRef(ref, target.current);
+        return () => assignRef(ref, null);
+    }, [ref, target]);
+    return null;
+});
+TriggerAnchor.displayName = "TriggerAnchor";
 const TableActions = react_1.default.memo(({ row }) => {
     var _a;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const popoverId = (0, react_1.useId)();
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // Listen for "close-all-popovers"
-    (0, react_1.useEffect)(() => {
-        const handler = () => setIsOpen(false);
-        window.addEventListener("close-all-popovers", handler);
-        return () => window.removeEventListener("close-all-popovers", handler);
-    }, []);
-    // Detect outside click
     (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const trigger = triggerRef.current;
+        const closeAll = () => setIsOpen(false);
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
-        if (isOpen) {
-            // ✅ Use click instead of mousedown
-            document.addEventListener("click", handleClickOutside);
-        }
+        window.addEventListener("close-all-popovers", closeAll);
+        document.addEventListener("click", handleClickOutside);
         return () => {
+            window.removeEventListener("close-all-popovers", closeAll);
             document.removeEventListener("click", handleClickOutside);
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body)
+                    trigger === null || trigger === void 0 ? void 0 : trigger.focus({ preventScroll: true });
+            });
         };
     }, [isOpen]);
     const handleOpen = () => {
@@ -72,19 +89,19 @@ const TableActions = react_1.default.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
-                                            var _a;
-                                            (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
-                                            var _a;
-                                            (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
-                                            var _a;
-                                            (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) }))] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { ref: triggerRef, id: `popover-trigger-${popoverId}`, "aria-label": "Actions", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": `popover-content-${popoverId}`, color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(TriggerAnchor, { target: triggerRef }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, borderRadius: 0, gap: 2, onClick: () => {
+                                                var _a;
+                                                (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, borderRadius: 0, onClick: () => {
+                                                var _a;
+                                                (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
+                                                var _a;
+                                                (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) })] }))] }));
 });
 TableActions.displayName = "TableActions";
 exports.default = TableActions;

package/dist/Components/Table/components/TableBody.d.ts

@@ -1,3 +1,4 @@
 import { TableBodyPageProps } from "../TableProps";
-declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }: TableBodyPageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const findFirstVisibleIndex: (offsets: number[], total: number, target: number) => number;
+declare const TableBody: ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe, accentColors, groups, onAddItem, emptyState, rowDetail, expandedIds, }: TableBodyPageProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBody;