hrm_ui_lib 2.0.3 → 2.1.1

package/components/Table/utils.js

@@ -1,78 +1,19 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import React from 'react';
-import { IndeterminateCheckbox } from './IndeterminateCheckbox.js';
-import '../../Alert-V_kH4Snn.js';
-import '@babel/runtime/helpers/extends';
-import '../Alert/consts.js';
-import 'classnames';
-import '../Text/Text.js';
-import '../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/slicedToArray';
-import '../../consts/index.js';
-import '../../type/file-upload.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../FileUpload/types.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import '../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-
-var CHECKBOX_HEADER_ID = 'selection';
-var CHECKBOX_DEFAULT_WIDTH = 48;
-function setSelectedRows(hooks, withSelect) {
-  if (withSelect) {
-    hooks.visibleColumns.push(function (columns) {
-      return [{
-        id: CHECKBOX_HEADER_ID,
-        Header: function Header(_ref) {
-          var getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps;
-          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, getToggleAllRowsSelectedProps());
-        },
-        Cell: function Cell(_ref2) {
-          var row = _ref2.row;
-          return /*#__PURE__*/React.createElement(IndeterminateCheckbox, row.getToggleRowSelectedProps());
-        }
-      }].concat(_toConsumableArray(columns));
-    });
-  }
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IndeterminateCheckbox } from './IndeterminateCheckbox';
+export const CHECKBOX_HEADER_ID = 'selection';
+export const CHECKBOX_DEFAULT_WIDTH = 48;
+export function setSelectedRows(hooks, withSelect) {
+    if (withSelect) {
+        hooks.visibleColumns.push((columns) => [
+            {
+                id: CHECKBOX_HEADER_ID,
+                Header: ({ getToggleAllRowsSelectedProps }) => (_jsx(IndeterminateCheckbox, Object.assign({}, getToggleAllRowsSelectedProps()))),
+                Cell: ({ row }) => _jsx(IndeterminateCheckbox, Object.assign({}, row.getToggleRowSelectedProps()))
+            },
+            ...columns
+        ]);
+    }
 }
-function calcColumnWidth(percent, tableWidth) {
-  return percent * tableWidth / 100;
+export function calcColumnWidth(percent, tableWidth) {
+    return (percent * tableWidth) / 100;
 }
-
-export { CHECKBOX_DEFAULT_WIDTH, CHECKBOX_HEADER_ID, calcColumnWidth, setSelectedRows };

package/components/TableV2/AdvancedPagination.d.ts

@@ -0,0 +1,8 @@
+import type { Table } from '@tanstack/react-table';
+interface PaginationProps<T> {
+    table: Table<T>;
+    totalCount: number;
+    buttonText?: string;
+}
+export declare function AdvancedPagination<TData>({ table, totalCount, buttonText }: PaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/TableV2/AdvancedPagination.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Input } from '../Input';
+import { Button } from '../Button';
+import { Select } from '../Select';
+import { Text } from '../Text';
+import classnames from 'classnames';
+import { OPTIONS } from './constants';
+import IconChevronLeft from '../SVGIcons/IconChevronLeft';
+import IconChevronRight from '../SVGIcons/IconChevronRight';
+import IconChevronDoubleLeft from '../SVGIcons/IconChevronDoubleLeft';
+import IconChevronDoubleRight from '../SVGIcons/IconChevronDoubleRight';
+import IconMore from '../SVGIcons/IconMore';
+export function AdvancedPagination({ table, totalCount, buttonText }) {
+    const [navigatePage, setNavigatePage] = useState('1');
+    const pageIndex = table.getState().pagination.pageIndex;
+    const pageSize = table.getState().pagination.pageSize;
+    const onNavigateToPage = (page) => {
+        if (!page || (/^[1-9]\d*$/.test(page) && table.getPageCount() >= Number(page))) {
+            setNavigatePage(page);
+        }
+    };
+    const onGoToPage = () => {
+        const page = navigatePage ? Number(navigatePage) - 1 : 0;
+        table.setPageIndex(page);
+    };
+    const onRowCountChange = (value) => {
+        if (value) {
+            table.setPagination({
+                pageIndex: 0,
+                pageSize: Number(value)
+            });
+        }
+    };
+    const getVisiblePageNumbers = () => {
+        const currentPage = pageIndex;
+        const totalPages = table.getPageCount();
+        const visiblePages = [];
+        if (totalPages <= 7) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        visiblePages.push(1);
+        if (currentPage <= 3) {
+            visiblePages.push(2, 3, 4, 5, '+++', totalPages);
+        }
+        else if (currentPage > totalPages - 5) {
+            visiblePages.push('---', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
+        }
+        else {
+            visiblePages.push('---', currentPage, currentPage + 1, currentPage + 2, '+++', totalPages);
+        }
+        return visiblePages;
+    };
+    useEffect(() => {
+        if (table.getPageCount() < Number(navigatePage)) {
+            setNavigatePage('1');
+        }
+    }, [table.getPageCount(), table.getState().pagination]);
+    return (_jsxs("div", { className: "advanced-table__pagination", children: [_jsx(Select, { setSelectedItem: (value) => onRowCountChange(value), selectedItem: `${pageSize}`, className: 'no-border', options: OPTIONS }), _jsxs("div", { className: 'advanced-table__pagination__right', children: [_jsxs(Text, { type: 'tertiary', children: [pageIndex * pageSize + 1, " - ", (pageIndex + 1) * pageSize, " / ", totalCount] }), _jsxs("div", { className: "flexbox align-items--center", children: [_jsx(Input, { currentValue: navigatePage, size: "small", onChange: (e) => onNavigateToPage(e.target.value), className: "advanced-table__pagination__right__input mr-8" }), _jsx(Button, { onClick: onGoToPage, type: "secondary", size: "medium", buttonText: buttonText !== null && buttonText !== void 0 ? buttonText : 'Go to page' })] }), _jsxs("ul", { className: "pagination", children: [_jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.firstPage(), children: _jsx(IconChevronDoubleLeft, { size: 'small' }) }) }), _jsx("li", { className: `previous ${!table.getCanPreviousPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'prev', role: 'button', onClick: () => table.previousPage(), children: _jsx(IconChevronLeft, { size: 'small' }) }) }), getVisiblePageNumbers().map((pageNumber, index) => pageNumber === '---' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex - 3), children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : pageNumber === '+++' ? (_jsx("li", { className: 'pagination__more', children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageIndex + 3), children: _jsx(IconMore, { size: 'small' }) }) }, `ellipsis-${index}`)) : (_jsx("li", { className: classnames({
+                                    ['active']: pageNumber === pageIndex + 1
+                                }), children: _jsx("a", { role: 'button', onClick: () => table.setPageIndex(+pageNumber - 1), children: pageNumber }) }, pageNumber))), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.nextPage(), children: _jsx(IconChevronRight, { size: 'small' }) }) }), _jsx("li", { className: `next ${!table.getCanNextPage() ? 'disabled' : ''}`, children: _jsx("a", { rel: 'next', role: 'button', onClick: () => table.lastPage(), children: _jsx(IconChevronDoubleRight, { size: 'small' }) }) })] })] })] }));
+}

package/components/TableV2/ColumnHeader.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+import type { Header } from '@tanstack/react-table';
+interface DraggableColumnHeaderProps<TData> {
+    header: Header<TData, unknown>;
+    isPinned?: boolean;
+    pinnedStyles: CSSProperties;
+}
+export declare function ColumnHeader<TData>({ header, pinnedStyles }: DraggableColumnHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/TableV2/ColumnHeader.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { useSortable } from '@dnd-kit/sortable';
+import IconArrowDown from '../SVGIcons/IconArrowDown';
+import IconArrowSort from '../SVGIcons/IconArrowSort';
+import IconArrowUp from '../SVGIcons/IconArrowUp';
+import { Text } from '../Text';
+import classnames from 'classnames';
+export function ColumnHeader({ header, pinnedStyles }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: header.id
+    });
+    const style = transform
+        ? {
+            transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+            transition,
+            minWidth: header.getSize(),
+            position: 'relative',
+            zIndex: isDragging ? 1 : 0
+        }
+        : {
+            minWidth: header.getSize(),
+            position: 'relative',
+            zIndex: isDragging ? 1 : 0
+        };
+    return (_jsxs("th", Object.assign({ ref: setNodeRef, style: Object.assign(Object.assign({}, style), pinnedStyles), className: classnames('select-none', {
+            ['with-checkbox']: header.column.id === 'select',
+            ['actions-header']: header.column.id === 'actions',
+            ['cursor-pointer']: header.column.getCanSort()
+        }) }, attributes, { children: [_jsxs("div", { onClick: header.column.getToggleSortingHandler(), className: "flexbox align-items--center", children: [_jsx("div", Object.assign({}, listeners, { children: _jsx(Text, { className: "text-left", weight: 'bold', children: flexRender(header.column.columnDef.header, header.getContext()) }) })), _jsx("span", { className: "ml-4", children: header.column.getCanSort() &&
+                            (header.column.getIsSorted() === 'asc' ? (_jsx(IconArrowUp, { size: "xsmall" })) : header.column.getIsSorted() === 'desc' ? (_jsx(IconArrowDown, { size: "xsmall" })) : (_jsx(IconArrowSort, { size: "xsmall" }))) })] }), _jsx("div", { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), className: "resize-icon select-none touch-none" })] })));
+}

package/components/TableV2/ColumnSettings.d.ts

@@ -0,0 +1,9 @@
+import type { Table } from '@tanstack/react-table';
+interface ColumnSettingsProps<T> {
+    table: Table<T>;
+    tooltipText?: string;
+    hiddenColumns?: string[];
+    allToggleText?: string;
+}
+export declare function ColumnSettings<T>({ table, tooltipText, hiddenColumns, allToggleText }: ColumnSettingsProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/TableV2/ColumnSettings.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../Button';
+import { IconSettings } from '../SVGIcons';
+import { Switcher } from '../Switcher';
+import { Menu } from '../Menu';
+import { Tooltip } from '../Tooltip';
+import { Positions } from '../Tooltip/types';
+const defaultHiddenColumnSettings = ['select', 'actions', 'expand'];
+export function ColumnSettings({ table, tooltipText, hiddenColumns = [], allToggleText = 'All' }) {
+    const [ref, setRef] = useState(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const closeUserMenu = () => {
+        setIsOpen(false);
+    };
+    const handleClick = (column) => {
+        const toggle = column.getToggleVisibilityHandler();
+        if (toggle) {
+            toggle({ target: { checked: !column.getIsVisible() } });
+        }
+    };
+    const hiddenColumnSettings = defaultHiddenColumnSettings.concat(hiddenColumns);
+    return (_jsxs("div", { ref: setRef, children: [_jsx(Button, { type: "secondary", iconProps: {
+                    Component: IconSettings
+                }, onClick: () => setIsOpen((prev) => !prev) }), _jsx(Menu, { className: "settings-menu", position: "top-left", onClose: closeUserMenu, isOpen: isOpen, parentRef: ref, children: _jsxs("div", { className: "settings-menu__dropdown", children: [_jsx("div", { className: "relative", children: _jsx("div", { className: "settings-menu__dropdown__option sticky", children: _jsx(Switcher, { label: allToggleText, selectedValue: table.getIsAllColumnsVisible(), onClick: () => table.toggleAllColumnsVisible(), inlineType: true, size: 'small' }) }) }), _jsx("div", { className: "scrollbar--content scrollbar scrollbar--vertical", children: table.getAllLeafColumns().map((column) => {
+                                if (!(hiddenColumnSettings === null || hiddenColumnSettings === void 0 ? void 0 : hiddenColumnSettings.includes(column.id))) {
+                                    const label = typeof column.columnDef.header === 'string'
+                                        ? column.columnDef.header
+                                        : column.columnDef.id;
+                                    return (_jsxs("div", { className: 'settings-menu__dropdown__option', children: [tooltipText && !column.getCanHide() && (_jsx(Tooltip, { position: Positions.TOP_CENTER, text: tooltipText, id: column.columnDef.id })), _jsx(Switcher, { label: label, id: column.columnDef.id, selectedValue: column.getIsVisible(), onClick: () => handleClick(column), disabled: !column.getCanHide(), inlineType: true, size: 'small' })] }, column.id));
+                                }
+                            }) })] }) })] }));
+}

package/components/TableV2/IndeterminateCheckbox.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type IndeterminateCheckboxProps = {
+    indeterminate: boolean;
+    checked: boolean;
+    onChange: (e: {
+        target: {
+            checked: boolean;
+        };
+    }) => void;
+    disabled?: boolean;
+};
+export declare const IndeterminateCheckbox: React.ForwardRefExoticComponent<IndeterminateCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/components/TableV2/IndeterminateCheckbox.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { Checkbox } from '../Checkbox';
+import classNames from 'classnames';
+export const IndeterminateCheckbox = forwardRef(({ indeterminate, checked, onChange, disabled }, ref) => {
+    const defaultRef = useRef(null);
+    const resolvedRef = ref !== null && ref !== void 0 ? ref : defaultRef;
+    useEffect(() => {
+        resolvedRef.current.indeterminate = indeterminate;
+    }, [resolvedRef, indeterminate]);
+    const handleChange = (v) => {
+        onChange({ target: { checked: v } });
+    };
+    return (_jsx("div", { className: 'actions-list', children: _jsx(Checkbox, { className: classNames('actions-list__checkbox', { 'active-checkbox': checked }), value: checked, disabled: disabled, onClick: handleChange, ref: resolvedRef }) }));
+});
+IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';

package/components/TableV2/Table.d.ts

@@ -0,0 +1,3 @@
+import type { TTableProps } from './types';
+import 'react-loading-skeleton/dist/skeleton.css';
+export declare function Table<TData>({ data, columns, isLoading, hasError, isActionsVisible, totalCount, emptyTitle, emptySubTitle, emptyIllustration, withSelect, withBorder, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): import("react/jsx-runtime").JSX.Element;

package/components/TableV2/Table.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useMemo } from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { DndContext, DragOverlay, closestCenter } from '@dnd-kit/core';
+import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { ColumnHeader } from './ColumnHeader';
+import Skeleton from 'react-loading-skeleton';
+import { useTableControl } from './hooks/useTableControl';
+import { Text } from '../Text';
+import classnames from 'classnames';
+import { Empty } from '../Empty';
+import { Button } from '../Button';
+import { IconChevronDown } from '../SVGIcons/IconChevronDown';
+import { IconChevronUp } from '../SVGIcons/IconChevronUp';
+import 'react-loading-skeleton/dist/skeleton.css';
+var ColumnId;
+(function (ColumnId) {
+    ColumnId["Select"] = "select";
+    ColumnId["Actions"] = "actions";
+    ColumnId["Expand"] = "expand";
+})(ColumnId || (ColumnId = {}));
+const ExpandColumn = ({ row, expandedRows, onToggle }) => {
+    var _a, _b, _c;
+    const hasSubRows = ((_a = row.original) === null || _a === void 0 ? void 0 : _a.subRows) && ((_c = (_b = row.original) === null || _b === void 0 ? void 0 : _b.subRows) === null || _c === void 0 ? void 0 : _c.length) > 0;
+    if (!hasSubRows)
+        return null;
+    return (_jsx(Button, { type: "tertiary", size: "medium", className: classnames('advanced-table__expand-button'), iconProps: {
+            Component: expandedRows.has(row.id) ? IconChevronUp : IconChevronDown
+        }, onClick: (e) => {
+            e.stopPropagation();
+            onToggle(row.id);
+        } }));
+};
+export function Table({ data, columns, isLoading, hasError, isActionsVisible = false, totalCount = 0, emptyTitle, emptySubTitle, emptyIllustration, withSelect = false, withBorder = true, defaultPageIndex, defaultPageSize, defaultHiddenColumns, collapsibleRows = false, renderExpandedContent, renderHeader, renderFooter, onSortChange, onRowClick, tableSettings, onRowSelection, onColumnSizing, onPaginationChange }) {
+    const [expandedRows, setExpandedRows] = useState(new Set());
+    const handleToggleRow = useCallback((rowId) => {
+        setExpandedRows((prev) => {
+            const next = new Set(prev);
+            if (next.has(rowId)) {
+                next.delete(rowId);
+            }
+            else {
+                next.add(rowId);
+            }
+            return next;
+        });
+    }, []);
+    const expandColumn = useMemo(() => ({
+        id: ColumnId.Expand,
+        accessorKey: 'expand',
+        header: () => _jsx("span", { style: { display: 'none' }, children: "Expand" }),
+        size: 50,
+        minSize: 50,
+        maxSize: 50,
+        cell: ({ row }) => (_jsx(ExpandColumn, { row: row, expandedRows: expandedRows, onToggle: handleToggleRow })),
+        meta: {
+            enableHiding: false,
+            enableColumnDragging: false,
+            enablePinning: true,
+            enableResizing: false,
+            headerVisible: false,
+            enableSorting: false
+        }
+    }), [expandedRows, handleToggleRow]);
+    const { table, sensors, handleDragStart, handleDragEnd, handleDragCancel, activeHeader } = useTableControl({
+        data,
+        tableSettings,
+        columns: collapsibleRows ? [expandColumn, ...columns] : columns,
+        withSelect,
+        totalCount,
+        defaultPageIndex,
+        defaultPageSize,
+        defaultHiddenColumns,
+        onSortChange,
+        onRowSelection,
+        onColumnSizing,
+        onPaginationChange
+    });
+    const header = renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader(table);
+    const footer = renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter(table);
+    const getCommonPinningStyles = (column) => {
+        const isPinned = column.getIsPinned();
+        return {
+            left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+            right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+            position: isPinned ? 'sticky' : 'relative',
+            backgroundColor: isPinned ? 'white' : undefined,
+            minWidth: column.getSize(),
+            zIndex: isPinned ? 1 : 0
+        };
+    };
+    const handleRowClick = (column, row) => {
+        if (column.id !== ColumnId.Actions && column.id !== ColumnId.Select && onRowClick) {
+            onRowClick(row);
+        }
+    };
+    const tableStyle = useMemo(() => ({
+        minWidth: (data === null || data === void 0 ? void 0 : data.length) ? table.getCenterTotalSize() : undefined
+    }), [data === null || data === void 0 ? void 0 : data.length, table]);
+    const skeletonRowSize = useMemo(() => {
+        return Array.from({ length: table.getState().pagination.pageSize });
+    }, [table.getState().pagination.pageSize]);
+    return (_jsxs("div", { className: classnames('advanced-table', {
+            'with-border': withBorder
+        }), children: [header, _jsx("div", { className: classnames('advanced-table__inner scrollbar scrollbar--horizontal scrollbar--vertical'), children: _jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [_jsx("div", { children: _jsx("table", { style: tableStyle, children: !isLoading && (!(data === null || data === void 0 ? void 0 : data.length) || hasError) ? (_jsx(Empty, { mainMessage: emptyTitle, paragraphMessage: emptySubTitle, illustration: emptyIllustration })) : (_jsxs(_Fragment, { children: [_jsx("thead", { className: classnames('advanced-table__thead'), children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: _jsx(SortableContext, { items: headerGroup.headers.map((header) => header.id), strategy: horizontalListSortingStrategy, children: headerGroup.headers.map((header) => {
+                                                        if (header.id === ColumnId.Actions && !isActionsVisible)
+                                                            return null;
+                                                        return (_jsx(ColumnHeader, { pinnedStyles: Object.assign({}, getCommonPinningStyles(header.column)), header: header }, header.id));
+                                                    }) }) }, headerGroup.id))) }), _jsx("tbody", { children: isLoading
+                                                ? skeletonRowSize.map((_, i) => (_jsx("tr", { children: table.getVisibleFlatColumns().map((column) => (_jsx("td", { className: classnames({
+                                                            'with-checkbox': column.id === ColumnId.Select,
+                                                            'pinned-cell': column.getIsPinned(),
+                                                            'action-column': column.id === ColumnId.Actions && !isActionsVisible
+                                                        }), style: Object.assign({}, getCommonPinningStyles(column)), children: _jsx(Skeleton, {}) }, column.id))) }, `skeleton-row-${i}`)))
+                                                : table.getRowModel().rows.map((row) => (_jsxs(React.Fragment, { children: [_jsx("tr", { className: classnames({ selected: row.getIsSelected() }), children: row.getVisibleCells().map((cell) => (_jsx("td", { className: classnames({
+                                                                    'with-checkbox': cell.column.id === ColumnId.Select,
+                                                                    'pinned-cell': cell.column.getIsPinned(),
+                                                                    'action-column': cell.column.id === ColumnId.Actions && !isActionsVisible,
+                                                                    'expand-column': cell.column.id === ColumnId.Expand
+                                                                }), id: cell.id, onClick: () => handleRowClick(cell.column, row), style: Object.assign({}, getCommonPinningStyles(cell.column)), children: cell.column.id === ColumnId.Actions && !isActionsVisible ? (_jsx("div", { className: classnames('actions-list__right'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) })) : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }), collapsibleRows &&
+                                                            expandedRows.has(row.id) &&
+                                                            renderExpandedContent && (_jsx("tr", { className: classnames('advanced-table__expanded-row'), children: _jsx("td", { colSpan: row.getVisibleCells().length, children: renderExpandedContent(row) }) }))] }, row.id))) })] })) }) }), _jsx(DragOverlay, { dropAnimation: null, children: activeHeader && (_jsx("table", { style: { width: activeHeader.getSize() }, children: _jsx("thead", { children: _jsx("tr", { children: _jsx("th", { className: classnames('draggable-col'), style: { width: activeHeader.getSize() }, children: _jsx(Text, { weight: 'bold', children: flexRender(activeHeader.column.columnDef.header, activeHeader.getContext()) }) }) }) }) })) })] }) }), !!data.length && !hasError && footer] }));
+}

package/components/TableV2/constants/index.d.ts

@@ -0,0 +1,6 @@
+export declare const STORAGE_TYPE: {
+    LOCAL: string;
+    EXTERNAL: string;
+};
+export declare const TABLE_NAME_PREFIX = "table-settings";
+export declare const OPTIONS: TSelectOptions;

package/components/TableV2/constants/index.js

@@ -0,0 +1,27 @@
+export const STORAGE_TYPE = {
+    LOCAL: 'localStorage',
+    EXTERNAL: 'external'
+};
+export const TABLE_NAME_PREFIX = 'table-settings';
+export const OPTIONS = [
+    {
+        value: '10',
+        label: '10'
+    },
+    {
+        value: '20',
+        label: '20'
+    },
+    {
+        value: '30',
+        label: '30'
+    },
+    {
+        value: '40',
+        label: '40'
+    },
+    {
+        value: '50',
+        label: '50'
+    }
+];

package/components/TableV2/hooks/useTableColumnSettings.d.ts

@@ -0,0 +1,2 @@
+import type { Table } from '@tanstack/react-table';
+export declare const useTableColumnSettings: <T>(table: Table<T>, tableName: string, shouldPersistToStorage: boolean) => void;

package/components/TableV2/hooks/useTableColumnSettings.js

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+export const useTableColumnSettings = (table, tableName, shouldPersistToStorage) => {
+    const prevSettings = useRef(null);
+    const state = table.getState();
+    useEffect(() => {
+        const settings = {
+            columnVisibility: state.columnVisibility,
+            columnOrder: state.columnOrder,
+            columnSizing: state.columnSizing
+        };
+        const serialized = JSON.stringify(settings);
+        if (prevSettings.current !== serialized && shouldPersistToStorage) {
+            localStorage.setItem(tableName, serialized);
+            prevSettings.current = serialized;
+        }
+    }, [state.columnVisibility, state.columnOrder, state.columnSizing, tableName]);
+};

package/components/TableV2/hooks/useTableControl.d.ts

@@ -0,0 +1,11 @@
+import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
+import type { Column, TTableProps } from '../types';
+export declare function useTableControl<TData>({ withSelect, columns, data, tableSettings, totalCount, defaultPageSize, defaultPageIndex, defaultHiddenColumns, onSortChange, onRowSelection, onColumnSizing, onPaginationChange }: TTableProps<TData>): {
+    table: import("@tanstack/react-table").Table<TData>;
+    activeHeader: import("@tanstack/react-table").Header<TData, unknown> | null | undefined;
+    sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    memoizedColumns: Column<TData>[];
+    handleDragCancel: () => void;
+    handleDragEnd: (event: DragEndEvent) => void;
+    handleDragStart: (event: DragStartEvent) => void;
+};