@snack-uikit/table 0.23.8 → 0.23.9-preview-71543426.0

package/dist/cjs/components/ServerTable/ServerTable.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ServerTable = ServerTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const helperComponents_1 = require("../../helperComponents");
+const Table_1 = require("../Table");
+const hooks_1 = require("../Table/hooks");
+const constants_1 = require("./constants");
+const utils_1 = require("./utils");
+function ServerTable(_a) {
+  // добавить uncontrolledState
+  var {
+      items,
+      total = constants_1.DEFAULT_PAGINATION_LIMIT,
+      limit = constants_1.DEFAULT_PAGINATION_LIMIT,
+      offset = 0,
+      onChangePage,
+      search: searchProp,
+      pagination,
+      columnFilters,
+      manualSorting = true,
+      manualPagination = true,
+      manualFiltering = true
+    } = _a,
+    rest = __rest(_a, ["items", "total", "limit", "offset", "onChangePage", "search", "pagination", "columnFilters", "manualSorting", "manualPagination", "manualFiltering"]);
+  const {
+    state: search,
+    onStateChange: setSearch
+  } = (0, hooks_1.useStateControl)(searchProp, '');
+  const [tempSearch, setTempSearch] = (0, react_1.useState)(search || '');
+  (0, react_1.useEffect)(() => {
+    var _a;
+    if ((searchProp === null || searchProp === void 0 ? void 0 : searchProp.state) !== tempSearch) {
+      setTempSearch((_a = searchProp === null || searchProp === void 0 ? void 0 : searchProp.state) !== null && _a !== void 0 ? _a : '');
+    }
+    // Needs update only when prop changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchProp === null || searchProp === void 0 ? void 0 : searchProp.state]);
+  const handleSearch = (0, react_1.useCallback)(newValue => {
+    setTempSearch(newValue);
+    (0, utils_1.onSearchDebounced)(newValue.trim(), setSearch);
+  }, [setSearch]);
+  const handlePageChange = (0, react_1.useCallback)(_ref => {
+    let {
+      pageSize,
+      pageIndex
+    } = _ref;
+    return onChangePage(pageIndex * pageSize, pageSize);
+  }, [onChangePage]);
+  const pageIndex = (0, react_1.useMemo)(() => Math.floor(offset / limit), [limit, offset]);
+  const pageCount = (0, react_1.useMemo)(() => Math.ceil(total / limit), [limit, total]);
+  return (0, jsx_runtime_1.jsx)(Table_1.Table, Object.assign({}, rest, {
+    data: items || [],
+    search: {
+      state: tempSearch,
+      onChange: handleSearch,
+      loading: searchProp === null || searchProp === void 0 ? void 0 : searchProp.loading,
+      placeholder: searchProp === null || searchProp === void 0 ? void 0 : searchProp.placeholder
+    },
+    columnFilters: columnFilters,
+    pageCount: pageCount,
+    pagination: Object.assign(Object.assign({}, pagination), {
+      state: {
+        pageIndex,
+        pageSize: limit
+      },
+      onChange: handlePageChange
+    }),
+    pageSize: limit,
+    manualSorting: manualSorting,
+    manualFiltering: manualFiltering,
+    manualPagination: manualPagination
+  }));
+}
+ServerTable.getRowActionsColumnDef = Table_1.Table.getRowActionsColumnDef;
+ServerTable.statusAppearances = helperComponents_1.STATUS_APPEARANCE;
+ServerTable.getStatusColumnDef = Table_1.Table.getStatusColumnDef;

package/dist/cjs/components/ServerTable/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PAGINATION_LIMIT = exports.SEARCH_DELAY = void 0;
+exports.SEARCH_DELAY = 500;
+exports.DEFAULT_PAGINATION_LIMIT = 10;

package/dist/cjs/components/ServerTable/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ServerTable"), exports);

package/dist/cjs/components/ServerTable/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onSearchDebounced = void 0;
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const constants_1 = require("./constants");
+exports.onSearchDebounced = (0, lodash_debounce_1.default)((newValue, onChange) => {
+  onChange(newValue);
+}, constants_1.SEARCH_DELAY);

package/dist/cjs/components/Table/Table.js

@@ -0,0 +1,393 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = Table;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_table_1 = require("@tanstack/react-table");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const locale_1 = require("@snack-uikit/locale");
+const scroll_1 = require("@snack-uikit/scroll");
+const skeleton_1 = require("@snack-uikit/skeleton");
+const toolbar_1 = require("@snack-uikit/toolbar");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const utils_2 = require("../../utils");
+const hooks_1 = require("./hooks");
+const usePageReset_1 = require("./hooks/usePageReset");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_3 = require("./utils");
+/** Компонент таблицы */
+function Table(_a) {
+  var {
+      data,
+      rowPinning = {
+        top: []
+      },
+      columnDefinitions,
+      keepPinnedRows = false,
+      copyPinnedRows = false,
+      enableSelectPinned = false,
+      rowSelection: rowSelectionProp,
+      search,
+      sorting: sortingProp,
+      columnFilters,
+      pagination: paginationProp,
+      className,
+      onRowClick,
+      onRefresh,
+      onDelete,
+      pageSize = constants_1.DEFAULT_PAGE_SIZE,
+      pageCount,
+      loading = false,
+      outline = false,
+      moreActions,
+      exportSettings,
+      dataFiltered,
+      dataError,
+      noDataState,
+      noResultsState,
+      errorDataState,
+      suppressToolbar = false,
+      toolbarBefore,
+      toolbarAfter,
+      suppressPagination = false,
+      manualSorting = false,
+      manualPagination = false,
+      manualFiltering = false,
+      autoResetPageIndex = false,
+      scrollRef,
+      scrollContainerRef,
+      getRowId,
+      enableFuzzySearch,
+      savedState
+    } = _a,
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState"]);
+  const {
+    state: globalFilter,
+    onStateChange: onGlobalFilterChange
+  } = (0, hooks_1.useStateControl)(search, '');
+  const {
+    state: rowSelection,
+    onStateChange: onRowSelectionChange
+  } = (0, hooks_1.useStateControl)(rowSelectionProp, {});
+  const defaultPaginationState = (0, react_1.useMemo)(() => ({
+    pageIndex: 0,
+    pageSize
+  }), [pageSize]);
+  const {
+    state: sorting,
+    onStateChange: onSortingChange
+  } = (0, hooks_1.useStateControl)(sortingProp, []);
+  const {
+    state: pagination,
+    onStateChange: onPaginationChange
+  } = (0, hooks_1.useStateControl)(paginationProp, defaultPaginationState);
+  const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
+  const tableColumns = (0, react_1.useMemo)(() => {
+    let cols = columnDefinitions;
+    if (enableSelection) {
+      cols = [(0, helperComponents_1.getSelectionCellColumnDef)(enableSelectPinned), ...cols];
+    }
+    return cols;
+  }, [columnDefinitions, enableSelection, enableSelectPinned]);
+  const columnPinning = (0, react_1.useMemo)(() => {
+    var _a;
+    const pinningState = {
+      left: [],
+      right: []
+    };
+    for (const col of tableColumns) {
+      const id = (0, helperComponents_1.getColumnId)(col);
+      if (col.pinned && id) {
+        (_a = pinningState[col.pinned]) === null || _a === void 0 ? void 0 : _a.push(id);
+      }
+    }
+    return pinningState;
+  }, [tableColumns]);
+  const table = (0, react_table_1.useReactTable)({
+    data,
+    columns: tableColumns,
+    state: {
+      columnPinning,
+      globalFilter,
+      rowSelection,
+      sorting,
+      pagination,
+      rowPinning
+    },
+    pageCount,
+    defaultColumn: {
+      enableSorting: false,
+      enableResizing: false,
+      minSize: 40,
+      cell: cell => (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        text: String(cell.getValue()),
+        maxLines: 1
+      })
+    },
+    manualSorting,
+    manualPagination,
+    manualFiltering,
+    globalFilterFn: enableFuzzySearch ? utils_2.fuzzyFilter : 'includesString',
+    onGlobalFilterChange,
+    getRowId,
+    onRowSelectionChange,
+    enableRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable,
+    enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
+    enableFilters: true,
+    getFilteredRowModel: (0, react_table_1.getFilteredRowModel)(),
+    enableColumnResizing: true,
+    enableSorting: true,
+    enableMultiSort: true,
+    onSortingChange,
+    getSortedRowModel: (0, react_table_1.getSortedRowModel)(),
+    onPaginationChange,
+    autoResetPageIndex,
+    getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
+    getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+    columnResizeMode: 'onEnd',
+    keepPinnedRows
+  });
+  const {
+    loadingTable
+  } = (0, hooks_1.useLoadingTable)({
+    pageSize: Math.min(Math.max(pageSize, 5), constants_1.DEFAULT_PAGE_SIZE),
+    columnDefinitions: tableColumns,
+    columnPinning
+  });
+  const handleOnRefresh = (0, react_1.useCallback)(() => {
+    table.resetRowSelection();
+    onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh();
+  }, [onRefresh, table]);
+  const handleOnDelete = (0, react_1.useCallback)(() => {
+    if (loading) {
+      return;
+    }
+    if (onDelete) {
+      onDelete(table.getState().rowSelection, table.resetRowSelection);
+    }
+  }, [loading, onDelete, table]);
+  const handleOnCheck = (0, react_1.useCallback)(() => {
+    if (!loading && !enableSelectPinned && table.getTopRows().length) {
+      const centerRows = table.getCenterRows();
+      const isSomeRowsSelected = table.getIsSomePageRowsSelected();
+      const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
+      if (isAllCenterRowsSelected) {
+        table.resetRowSelection();
+        return;
+      }
+      centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
+      return;
+    }
+    if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
+      table.toggleAllPageRowsSelected();
+      return;
+    }
+  }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
+  const columnSizeVarsRef = (0, react_1.useRef)();
+  const headers = table.getFlatHeaders();
+  const columnSizeVars = (0, react_1.useMemo)(() => {
+    var _a;
+    const originalColumnDefs = table._getColumnDefs();
+    const colSizes = {};
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      const {
+        sizeKey,
+        flexKey
+      } = (0, utils_3.getColumnStyleVars)(header.id);
+      const originalColDef = originalColumnDefs.find(col => (0, helperComponents_1.getColumnId)(header) === col.id);
+      if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
+        const indicatorSize = 'var(--size-table-cell-status-indicator-horizontal)';
+        colSizes[sizeKey] = indicatorSize;
+        colSizes[flexKey] = '100%';
+      } else {
+        const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
+        let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+        const prevSize = (_a = columnSizeVarsRef.current) === null || _a === void 0 ? void 0 : _a[sizeKey];
+        const isResizeSavedToStore = (originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableResizing) && (savedState === null || savedState === void 0 ? void 0 : savedState.id) && (savedState === null || savedState === void 0 ? void 0 : savedState.resize) !== false;
+        if (isResizeSavedToStore) {
+          const savedSize = (0, utils_3.getInitColumnSizeFromLocalStorage)({
+            id: savedState.id,
+            columnId: header.id
+          });
+          if (savedSize) {
+            initSize = savedSize;
+          }
+        }
+        let size = initSize;
+        if (header.column.getCanResize()) {
+          const currentSize = header.getSize();
+          const colDefSize = header.column.columnDef.size;
+          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+          if (prevSize === '100%' && currentSize !== colDefSize) {
+            const realSize = (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id);
+            table.setColumnSizing(old => Object.assign(Object.assign({}, old), {
+              [header.id]: realSize
+            }));
+            size = `${realSize}px`;
+          }
+        }
+        if (isResizeSavedToStore) {
+          (0, utils_3.saveStateToLocalStorage)({
+            id: savedState.id,
+            columnId: header.id,
+            size
+          });
+        }
+        colSizes[sizeKey] = size;
+        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+      }
+    }
+    return colSizes;
+    /*
+      effect must be called only on columnSizingInfo.isResizingColumn changes
+      to reduce unnecessary recalculations
+           headers ids can also change, so they also should present here
+           table.getTotalSize() will trigger re-render after double-click size reset
+    */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
+  (0, react_1.useEffect)(() => {
+    columnSizeVarsRef.current = columnSizeVars;
+  }, [columnSizeVars]);
+  const tableRows = table.getRowModel().rows;
+  const tableCenterRows = table.getCenterRows();
+  const tableFilteredRows = table.getFilteredRowModel().rows;
+  const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
+  const topRows = table.getTopRows();
+  const loadingTableRows = loadingTable.getRowModel().rows;
+  const tablePagination = table.getState().pagination;
+  const filteredTopRows = table.getState().globalFilter ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id)) : topRows;
+  const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
+  const {
+    t
+  } = (0, locale_1.useLocale)('Table');
+  const emptyStates = (0, helperComponents_1.useEmptyState)({
+    noDataState,
+    noResultsState,
+    errorDataState
+  });
+  const cssPageSize = (0, react_1.useMemo)(() => {
+    const tempPageSize = (!suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize) + filteredTopRows.length;
+    return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), constants_1.DEFAULT_PAGE_SIZE) : tempPageSize;
+  }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
+  (0, usePageReset_1.usePageReset)({
+    manualPagination,
+    maximumAvailablePage: pageCount || data.length / pagination.pageSize,
+    pagination,
+    onPaginationChange,
+    autoResetPageIndex
+  });
+  return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+    children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
+      style: {
+        '--page-size': cssPageSize
+      },
+      className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
+    }, (0, utils_1.extractSupportProps)(rest), {
+      children: [!suppressToolbar && (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.header,
+        children: [(0, jsx_runtime_1.jsx)(toolbar_1.Toolbar, {
+          search: {
+            value: globalFilter,
+            onChange: onGlobalFilterChange,
+            loading: search === null || search === void 0 ? void 0 : search.loading,
+            placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder')
+          },
+          checked: table.getIsAllPageRowsSelected(),
+          indeterminate: table.getIsSomePageRowsSelected(),
+          className: styles_module_scss_1.default.toolbar,
+          onRefresh: onRefresh ? handleOnRefresh : undefined,
+          onDelete: enableSelection && onDelete ? handleOnDelete : undefined,
+          onCheck: enableSelection ? handleOnCheck : undefined,
+          outline: outline,
+          selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
+          before: toolbarBefore,
+          after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
+              settings: exportSettings,
+              columnDefinitions: columnDefinitions,
+              data: data,
+              topRows: filteredTopRows,
+              centerRows: centerRows
+            })]
+          }) : undefined,
+          moreActions: moreActions
+        }), columnFilters && (0, jsx_runtime_1.jsxs)("div", {
+          className: styles_module_scss_1.default.filtersWrapper,
+          children: [" ", columnFilters, " "]
+        })]
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.scrollWrapper,
+        "data-outline": outline || undefined,
+        children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
+          size: 's',
+          className: styles_module_scss_1.default.table,
+          ref: scrollContainerRef,
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: styles_module_scss_1.default.tableContent,
+            style: columnSizeVars,
+            children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
+              value: {
+                table
+              },
+              children: loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
+                loading: true,
+                children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                  row: row
+                }, row.id))]
+              }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+                children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
+                  className: styles_module_scss_1.default.topRowWrapper,
+                  children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                    row: row,
+                    onRowClick: onRowClick
+                  }, row.id))
+                }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                  row: row,
+                  onRowClick: onRowClick
+                }, row.id)), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
+                  emptyStates: emptyStates,
+                  dataError: dataError,
+                  dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
+                  tableRowsLength: tableRows.length + filteredTopRows.length
+                })]
+              })
+            })
+          }), (0, jsx_runtime_1.jsx)("div", {
+            className: styles_module_scss_1.default.scrollStub,
+            ref: scrollRef
+          })]
+        })
+      }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
+        table: table,
+        options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options,
+        optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel,
+        pageCount: pageCount,
+        optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender
+      })]
+    }))
+  });
+}
+Table.getStatusColumnDef = helperComponents_1.getStatusColumnDef;
+Table.statusAppearances = helperComponents_1.STATUS_APPEARANCE;
+Table.getRowActionsColumnDef = helperComponents_1.getRowActionsColumnDef;

package/dist/cjs/components/Table/hooks/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./useLoadingTable"), exports);
+__exportStar(require("./useStateControl"), exports);

package/dist/cjs/components/Table/hooks/useLoadingTable.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLoadingTable = useLoadingTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = require("react");
+const skeleton_1 = require("@snack-uikit/skeleton");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+function useLoadingTable(_ref) {
+  let {
+    pageSize,
+    columnDefinitions,
+    columnPinning
+  } = _ref;
+  const data = (0, react_1.useMemo)(() => Array.from({
+    length: pageSize
+  }).map(() => '') || [], [pageSize]);
+  const columns = (0, react_1.useMemo)(() => columnDefinitions.map(column => Object.assign(Object.assign({}, column), {
+    cell: () => (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, {
+      className: styles_module_scss_1.default.skeleton,
+      lines: 1,
+      width: '100%'
+    })
+  })), [columnDefinitions]);
+  const loadingTable = (0, react_table_1.useReactTable)({
+    data,
+    columns,
+    state: {
+      columnPinning
+    },
+    getCoreRowModel: (0, react_table_1.getCoreRowModel)()
+  });
+  return {
+    loadingTable
+  };
+}

package/dist/cjs/components/Table/hooks/usePageReset.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePageReset = usePageReset;
+const react_1 = require("react");
+function usePageReset(_ref) {
+  let {
+    manualPagination,
+    pagination,
+    maximumAvailablePage,
+    onPaginationChange,
+    autoResetPageIndex
+  } = _ref;
+  (0, react_1.useEffect)(() => {
+    if (autoResetPageIndex) return;
+    const {
+      pageIndex
+    } = pagination;
+    if (!manualPagination && pageIndex > 0 && pageIndex >= maximumAvailablePage) {
+      onPaginationChange(Object.assign(Object.assign({}, pagination), {
+        pageIndex: 0
+      }));
+    }
+  }, [maximumAvailablePage, manualPagination, onPaginationChange, pagination, autoResetPageIndex]);
+}

package/dist/cjs/components/Table/hooks/useStateControl.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStateControl = useStateControl;
+const uncontrollable_1 = require("uncontrollable");
+function useStateControl(control, defaultState) {
+  var _a, _b;
+  const [state, onStateChange] = (0, uncontrollable_1.useUncontrolledProp)(control === null || control === void 0 ? void 0 : control.state, (_b = (_a = control === null || control === void 0 ? void 0 : control.state) !== null && _a !== void 0 ? _a : control === null || control === void 0 ? void 0 : control.initialState) !== null && _b !== void 0 ? _b : defaultState, controlState => {
+    var _a;
+    const newState = typeof controlState === 'function' ? controlState(state) : controlState;
+    (_a = control === null || control === void 0 ? void 0 : control.onChange) === null || _a === void 0 ? void 0 : _a.call(control, newState);
+  });
+  return {
+    state,
+    onStateChange
+  };
+}

package/dist/cjs/components/Table/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Table"), exports);