@redis-ui/table 2.4.0 → 2.12.0

package/dist/Table/components/ExpandRowButton/ExpandRowButton.cjs

@@ -11,6 +11,7 @@ const ExpandRowButton = ({
 }) => row.getCanExpand() ? jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.IconButton, {
   ...restProps,
   icon: row.getIsExpanded() ? expandedIcon ?? redisUiIcons.ChevronUpIcon : collapsedIcon ?? redisUiIcons.ChevronDownIcon,
+  "aria-label": row.getIsExpanded() ? "expanded" : "collapsed",
   onClick: (e) => {
     var _a;
     e.stopPropagation();

package/dist/Table/components/ExpandRowButton/ExpandRowButton.js

@@ -9,6 +9,7 @@ const ExpandRowButton = ({
 }) => row.getCanExpand() ? jsxRuntimeExports.jsx(IconButton, {
   ...restProps,
   icon: row.getIsExpanded() ? expandedIcon ?? ChevronUpIcon : collapsedIcon ?? ChevronDownIcon,
+  "aria-label": row.getIsExpanded() ? "expanded" : "collapsed",
   onClick: (e) => {
     var _a;
     e.stopPropagation();

package/dist/Table/components/RowSelection/HeaderMultiRowSelectionButton.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const HeaderMultiRowSelectionButton = ({
+  table,
+  managePage,
+  ...restProps
+}) => {
+  const props = {
+    checked: false,
+    label: "unselected all rows",
+    onCheckedChange: managePage ? table.toggleAllPageRowsSelected : table.toggleAllRowsSelected
+  };
+  if (managePage ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected()) {
+    props.checked = true;
+    props.label = "selected all rows";
+  } else if (managePage ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected()) {
+    props.checked = "indeterminate";
+    props.label = "selected some rows";
+  }
+  return jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.Checkbox, {
+    ...restProps,
+    checked: props.checked,
+    onCheckedChange: props.onCheckedChange,
+    "aria-label": props.label
+  });
+};
+exports.HeaderMultiRowSelectionButton = HeaderMultiRowSelectionButton;

package/dist/Table/components/RowSelection/HeaderMultiRowSelectionButton.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxProps } from '@redislabsdev/redis-ui-components';
+import { Table } from '@tanstack/react-table';
+export interface HeaderMultiRowSelectionButtonProps<T extends object> extends Omit<CheckboxProps, 'onClick'> {
+    table: Table<T>;
+    managePage?: boolean;
+}
+export declare const HeaderMultiRowSelectionButton: <T extends object>({ table, managePage, ...restProps }: HeaderMultiRowSelectionButtonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/RowSelection/HeaderMultiRowSelectionButton.js

@@ -0,0 +1,29 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { Checkbox } from "@redislabsdev/redis-ui-components";
+const HeaderMultiRowSelectionButton = ({
+  table,
+  managePage,
+  ...restProps
+}) => {
+  const props = {
+    checked: false,
+    label: "unselected all rows",
+    onCheckedChange: managePage ? table.toggleAllPageRowsSelected : table.toggleAllRowsSelected
+  };
+  if (managePage ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected()) {
+    props.checked = true;
+    props.label = "selected all rows";
+  } else if (managePage ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected()) {
+    props.checked = "indeterminate";
+    props.label = "selected some rows";
+  }
+  return jsxRuntimeExports.jsx(Checkbox, {
+    ...restProps,
+    checked: props.checked,
+    onCheckedChange: props.onCheckedChange,
+    "aria-label": props.label
+  });
+};
+export {
+  HeaderMultiRowSelectionButton
+};

package/dist/Table/components/RowSelection/HeaderMultiRowSelectionButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Table/components/RowSelection/RowSelectionButton.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const RowSelectionButton = ({
+  row,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.Checkbox, {
+  ...restProps,
+  disabled: !row.getCanSelect(),
+  checked: row.getIsSelected(),
+  onCheckedChange: (checked) => row.toggleSelected(checked),
+  "aria-label": row.getIsSelected() ? "selected" : "unselected"
+});
+exports.RowSelectionButton = RowSelectionButton;

package/dist/Table/components/RowSelection/RowSelectionButton.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxProps } from '@redislabsdev/redis-ui-components';
+import { Row } from '@tanstack/react-table';
+export interface RowSelectionButtonProps<T extends object> extends Omit<CheckboxProps, 'onClick'> {
+    row: Row<T>;
+}
+export declare const RowSelectionButton: <T extends object>({ row, ...restProps }: RowSelectionButtonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/RowSelection/RowSelectionButton.js

@@ -0,0 +1,15 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { Checkbox } from "@redislabsdev/redis-ui-components";
+const RowSelectionButton = ({
+  row,
+  ...restProps
+}) => jsxRuntimeExports.jsx(Checkbox, {
+  ...restProps,
+  disabled: !row.getCanSelect(),
+  checked: row.getIsSelected(),
+  onCheckedChange: (checked) => row.toggleSelected(checked),
+  "aria-label": row.getIsSelected() ? "selected" : "unselected"
+});
+export {
+  RowSelectionButton
+};

package/dist/Table/components/RowSelection/RowSelectionButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.style.cjs

@@ -6,6 +6,6 @@ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const AnimatedExpandedRow = _styled__default.default(TableExpandedRow.TableExpandedRow).withConfig({
   displayName: "TableAnimatedExpandedRowstyle__AnimatedExpandedRow",
-  componentId: "sc-l3awb3-0"
+  componentId: "RedisUI__sc-l3awb3-0"
 })(["&&{display:grid;}visibility:hidden;grid-template-rows:0fr;transition:all 0.5s;&[data-expanded='true']{visibility:visible;grid-template-rows:1fr;}"]);
 exports.AnimatedExpandedRow = AnimatedExpandedRow;

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.style.js

@@ -2,7 +2,7 @@ import _styled from "styled-components";
 import { TableExpandedRow } from "./TableExpandedRow.js";
 const AnimatedExpandedRow = _styled(TableExpandedRow).withConfig({
   displayName: "TableAnimatedExpandedRowstyle__AnimatedExpandedRow",
-  componentId: "sc-l3awb3-0"
+  componentId: "RedisUI__sc-l3awb3-0"
 })(["&&{display:grid;}visibility:hidden;grid-template-rows:0fr;transition:all 0.5s;&[data-expanded='true']{visibility:visible;grid-template-rows:1fr;}"]);
 export {
   AnimatedExpandedRow

package/dist/Table/components/TableExpandedRow/TableExpandedRow.style.cjs

@@ -5,11 +5,11 @@ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ExpandedRow = _styled__default.default.tr.withConfig({
   displayName: "TableExpandedRowstyle__ExpandedRow",
-  componentId: "sc-2hwl98-0"
+  componentId: "RedisUI__sc-2hwl98-0"
 })(["display:grid;width:100%;&[data-expanded='false']{display:none;}"]);
 const ExpandedCell = _styled__default.default.td.withConfig({
   displayName: "TableExpandedRowstyle__ExpandedCell",
-  componentId: "sc-2hwl98-1"
+  componentId: "RedisUI__sc-2hwl98-1"
 })(["width:100%;padding:0;overflow:hidden;"]);
 exports.ExpandedCell = ExpandedCell;
 exports.ExpandedRow = ExpandedRow;

package/dist/Table/components/TableExpandedRow/TableExpandedRow.style.js

@@ -1,11 +1,11 @@
 import _styled from "styled-components";
 const ExpandedRow = _styled.tr.withConfig({
   displayName: "TableExpandedRowstyle__ExpandedRow",
-  componentId: "sc-2hwl98-0"
+  componentId: "RedisUI__sc-2hwl98-0"
 })(["display:grid;width:100%;&[data-expanded='false']{display:none;}"]);
 const ExpandedCell = _styled.td.withConfig({
   displayName: "TableExpandedRowstyle__ExpandedCell",
-  componentId: "sc-2hwl98-1"
+  componentId: "RedisUI__sc-2hwl98-1"
 })(["width:100%;padding:0;overflow:hidden;"]);
 export {
   ExpandedCell,

package/dist/Table/components/TableHeaderCell/TableHeaderCell.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const TableHeaderCell_utils = require("./TableHeaderCell.utils.cjs");
+const Table_style = require("../../Table.style.cjs");
+const TableHeaderCell = ({
+  header
+}) => {
+  const colSpan = TableHeaderCell_utils.normalizeCellSpan(header.colSpan);
+  const rowSpan = TableHeaderCell_utils.normalizeCellSpan(header.rowSpan);
+  return header.isPlaceholder ? jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableTh, {
+    colSpan,
+    rowSpan,
+    style: {
+      width: header.column.getSize()
+    },
+    "aria-hidden": true,
+    children: jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
+      children: "Placeholder"
+    })
+  }, header.placeholderId) : jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableTh, {
+    colSpan,
+    rowSpan,
+    onClick: header.column.getToggleSortingHandler(),
+    style: {
+      width: header.column.getSize()
+    },
+    "aria-sort": TableHeaderCell_utils.getCurrentAriaSort(header),
+    children: jsxRuntime.jsxRuntimeExports.jsxs(Table_style.HeaderCellInnerWrapper, {
+      as: header.column.getCanSort() ? void 0 : "div",
+      "aria-description": TableHeaderCell_utils.getColumnSortLabel(header, TableHeaderCell_utils.formatColumnSortNotification),
+      children: [TableHeaderCell_utils.getHeaderContent(header), TableHeaderCell_utils.getSortSign(header)]
+    })
+  }, header.id);
+};
+exports.TableHeaderCell = TableHeaderCell;

package/dist/Table/components/TableHeaderCell/TableHeaderCell.d.ts

@@ -0,0 +1,4 @@
+import { Header } from '@tanstack/react-table';
+export declare const TableHeaderCell: <T extends object>({ header }: {
+    header: Header<T, unknown>;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/TableHeaderCell/TableHeaderCell.js

@@ -0,0 +1,37 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { VisuallyHidden } from "../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import { normalizeCellSpan, getCurrentAriaSort, getColumnSortLabel, getHeaderContent, getSortSign, formatColumnSortNotification } from "./TableHeaderCell.utils.js";
+import { TableTh, HeaderCellInnerWrapper } from "../../Table.style.js";
+const TableHeaderCell = ({
+  header
+}) => {
+  const colSpan = normalizeCellSpan(header.colSpan);
+  const rowSpan = normalizeCellSpan(header.rowSpan);
+  return header.isPlaceholder ? jsxRuntimeExports.jsx(TableTh, {
+    colSpan,
+    rowSpan,
+    style: {
+      width: header.column.getSize()
+    },
+    "aria-hidden": true,
+    children: jsxRuntimeExports.jsx(VisuallyHidden, {
+      children: "Placeholder"
+    })
+  }, header.placeholderId) : jsxRuntimeExports.jsx(TableTh, {
+    colSpan,
+    rowSpan,
+    onClick: header.column.getToggleSortingHandler(),
+    style: {
+      width: header.column.getSize()
+    },
+    "aria-sort": getCurrentAriaSort(header),
+    children: jsxRuntimeExports.jsxs(HeaderCellInnerWrapper, {
+      as: header.column.getCanSort() ? void 0 : "div",
+      "aria-description": getColumnSortLabel(header, formatColumnSortNotification),
+      children: [getHeaderContent(header), getSortSign(header)]
+    })
+  }, header.id);
+};
+export {
+  TableHeaderCell
+};

package/dist/Table/components/TableHeaderCell/TableHeaderCell.types.d.ts

@@ -0,0 +1,13 @@
+import { Header } from '@tanstack/react-table';
+import { AriaAttributes } from 'react';
+export type CommonHeader = Header<any, any>;
+export type AllowedAriaSort = Exclude<AriaAttributes['aria-sort'], 'other'>;
+export type FormatColumnSortNotification = (params: {
+    title: string;
+    direction: AllowedAriaSort;
+    nextDirection: AllowedAriaSort;
+}) => string;
+export type FormatTableSortNotification = (params: {
+    title: string;
+    direction: 'descending' | 'ascending';
+}[] | undefined) => string;

package/dist/Table/components/TableHeaderCell/TableHeaderCell.utils.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../node_modules/@tanstack/react-table/build/lib/index.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const index$1 = require("../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const Table_style = require("../../Table.style.cjs");
+const sortSign = {
+  asc: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ArrowUpIcon, {
+    size: "S",
+    color: "neutral700",
+    "aria-hidden": true
+  }),
+  desc: jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ArrowDownIcon, {
+    size: "S",
+    color: "neutral700",
+    "aria-hidden": true
+  })
+};
+const getSortSign = (header) => sortSign[header.column.getIsSorted()] ?? null;
+const ariaSort = {
+  asc: "ascending",
+  desc: "descending"
+};
+const getAriaSort = (sort) => ariaSort[sort] ?? "none";
+const getCurrentAriaSort = (header) => getAriaSort(header.column.getIsSorted());
+const formatColumnSortNotification = ({
+  title,
+  nextDirection
+}) => `Sort by ${title}, activate to ${nextDirection === "none" ? "unsort" : `sort ${nextDirection}`}`;
+const getColumnSortLabel = (header, formatLabel) => {
+  var _a;
+  if (header.column.getCanSort()) {
+    const content = index.flexRender(header.column.columnDef.header, header.getContext());
+    const text = (_a = redisUiComponents.childrenToString(content)) == null ? void 0 : _a.trim();
+    return formatLabel({
+      title: text || "actions",
+      direction: getAriaSort(header.column.getIsSorted()),
+      nextDirection: getAriaSort(header.column.getNextSortingOrder())
+    });
+  }
+  return void 0;
+};
+const DEFAULT_HIDDEN_HEADER = "Actions";
+const getHeaderContent = (header) => {
+  var _a;
+  const content = index.flexRender(header.column.columnDef.header, header.getContext());
+  if (header.column.columnDef.isHeaderCustom) return content;
+  const text = (_a = redisUiComponents.childrenToString(content)) == null ? void 0 : _a.trim();
+  if (!text || header.column.columnDef.isHeaderHidden) {
+    return jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
+      children: text || DEFAULT_HIDDEN_HEADER
+    });
+  }
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.HeaderTitleWrapper, {
+    variant: "semiBold",
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    "$isTextual": redisUiComponents.isTextualNode(content),
+    children: content
+  });
+};
+const formatTableSortNotification = (sortings) => {
+  if (!(sortings == null ? void 0 : sortings.length)) {
+    return "Unsorted";
+  }
+  const parts = sortings.map(({
+    title,
+    direction
+  }) => `by ${title} ${direction}`);
+  return `Sorted ${parts.join(", then ")}`;
+};
+const getTableSortLabel = (table, formatLabel) => {
+  var _a;
+  return formatLabel((_a = table.getState().sorting) == null ? void 0 : _a.map(({
+    desc,
+    id
+  }) => {
+    var _a2, _b;
+    const column = table.getColumn(id);
+    const header = (_a2 = column == null ? void 0 : column.columnDef) == null ? void 0 : _a2.header;
+    const title = column && (header && ((_b = redisUiComponents.childrenToString(index.flexRender(header, {
+      table,
+      column
+    }))) == null ? void 0 : _b.trim()) || `column ${column.getIndex() + 1} `) || "unknown column";
+    return {
+      direction: desc ? "descending" : "ascending",
+      title
+    };
+  }).filter((sort) => sort.title));
+};
+const normalizeCellSpan = (span) => span > 1 ? span : void 0;
+exports.formatColumnSortNotification = formatColumnSortNotification;
+exports.formatTableSortNotification = formatTableSortNotification;
+exports.getColumnSortLabel = getColumnSortLabel;
+exports.getCurrentAriaSort = getCurrentAriaSort;
+exports.getHeaderContent = getHeaderContent;
+exports.getSortSign = getSortSign;
+exports.getTableSortLabel = getTableSortLabel;
+exports.normalizeCellSpan = normalizeCellSpan;

package/dist/Table/components/TableHeaderCell/TableHeaderCell.utils.d.ts

@@ -0,0 +1,11 @@
+import { Table } from '@tanstack/react-table';
+import { ReactElement } from 'react';
+import { AllowedAriaSort, CommonHeader, FormatColumnSortNotification, FormatTableSortNotification } from './TableHeaderCell.types';
+export declare const getSortSign: (header: CommonHeader) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const getCurrentAriaSort: (header: CommonHeader) => AllowedAriaSort;
+export declare const formatColumnSortNotification: FormatColumnSortNotification;
+export declare const getColumnSortLabel: (header: CommonHeader, formatLabel: FormatColumnSortNotification) => string | undefined;
+export declare const getHeaderContent: (header: CommonHeader) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const formatTableSortNotification: FormatTableSortNotification;
+export declare const getTableSortLabel: <T extends object>(table: Table<T>, formatLabel: FormatTableSortNotification) => string;
+export declare const normalizeCellSpan: (span: number) => number | undefined;

package/dist/Table/components/TableHeaderCell/TableHeaderCell.utils.js

@@ -0,0 +1,101 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { flexRender } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { childrenToString, isTextualNode } from "@redislabsdev/redis-ui-components";
+import { ArrowUpIcon, ArrowDownIcon } from "@redislabsdev/redis-ui-icons";
+import { VisuallyHidden } from "../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import { HeaderTitleWrapper } from "../../Table.style.js";
+const sortSign = {
+  asc: jsxRuntimeExports.jsx(ArrowUpIcon, {
+    size: "S",
+    color: "neutral700",
+    "aria-hidden": true
+  }),
+  desc: jsxRuntimeExports.jsx(ArrowDownIcon, {
+    size: "S",
+    color: "neutral700",
+    "aria-hidden": true
+  })
+};
+const getSortSign = (header) => sortSign[header.column.getIsSorted()] ?? null;
+const ariaSort = {
+  asc: "ascending",
+  desc: "descending"
+};
+const getAriaSort = (sort) => ariaSort[sort] ?? "none";
+const getCurrentAriaSort = (header) => getAriaSort(header.column.getIsSorted());
+const formatColumnSortNotification = ({
+  title,
+  nextDirection
+}) => `Sort by ${title}, activate to ${nextDirection === "none" ? "unsort" : `sort ${nextDirection}`}`;
+const getColumnSortLabel = (header, formatLabel) => {
+  var _a;
+  if (header.column.getCanSort()) {
+    const content = flexRender(header.column.columnDef.header, header.getContext());
+    const text = (_a = childrenToString(content)) == null ? void 0 : _a.trim();
+    return formatLabel({
+      title: text || "actions",
+      direction: getAriaSort(header.column.getIsSorted()),
+      nextDirection: getAriaSort(header.column.getNextSortingOrder())
+    });
+  }
+  return void 0;
+};
+const DEFAULT_HIDDEN_HEADER = "Actions";
+const getHeaderContent = (header) => {
+  var _a;
+  const content = flexRender(header.column.columnDef.header, header.getContext());
+  if (header.column.columnDef.isHeaderCustom) return content;
+  const text = (_a = childrenToString(content)) == null ? void 0 : _a.trim();
+  if (!text || header.column.columnDef.isHeaderHidden) {
+    return jsxRuntimeExports.jsx(VisuallyHidden, {
+      children: text || DEFAULT_HIDDEN_HEADER
+    });
+  }
+  return jsxRuntimeExports.jsx(HeaderTitleWrapper, {
+    variant: "semiBold",
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    "$isTextual": isTextualNode(content),
+    children: content
+  });
+};
+const formatTableSortNotification = (sortings) => {
+  if (!(sortings == null ? void 0 : sortings.length)) {
+    return "Unsorted";
+  }
+  const parts = sortings.map(({
+    title,
+    direction
+  }) => `by ${title} ${direction}`);
+  return `Sorted ${parts.join(", then ")}`;
+};
+const getTableSortLabel = (table, formatLabel) => {
+  var _a;
+  return formatLabel((_a = table.getState().sorting) == null ? void 0 : _a.map(({
+    desc,
+    id
+  }) => {
+    var _a2, _b;
+    const column = table.getColumn(id);
+    const header = (_a2 = column == null ? void 0 : column.columnDef) == null ? void 0 : _a2.header;
+    const title = column && (header && ((_b = childrenToString(flexRender(header, {
+      table,
+      column
+    }))) == null ? void 0 : _b.trim()) || `column ${column.getIndex() + 1} `) || "unknown column";
+    return {
+      direction: desc ? "descending" : "ascending",
+      title
+    };
+  }).filter((sort) => sort.title));
+};
+const normalizeCellSpan = (span) => span > 1 ? span : void 0;
+export {
+  formatColumnSortNotification,
+  formatTableSortNotification,
+  getColumnSortLabel,
+  getCurrentAriaSort,
+  getHeaderContent,
+  getSortSign,
+  getTableSortLabel,
+  normalizeCellSpan
+};

package/dist/Table/components/TablePagination/TablePagination.cjs

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const index = require("../../../node_modules/@radix-ui/react-id/dist/index.cjs");
 const Table_context = require("../../Table.context.cjs");
 const TablePagination_style = require("./TablePagination.style.cjs");
 const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
@@ -11,6 +12,8 @@ const TablePagination = ({
   const {
     table
   } = Table_context.useTableContext();
+  const perPageId = index.useId();
+  const pageNumId = index.useId();
   if (!table._getPaginationRowModel) {
     return null;
   }
@@ -23,8 +26,8 @@ const TablePagination = ({
   const handlePageSizeChange = (value) => {
     table.setPageSize(Number(value));
   };
-  const handlePageIndexChange = (index) => {
-    table.setPageIndex(index);
+  const handlePageIndexChange = (index2) => {
+    table.setPageIndex(index2);
   };
   return jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PaginationRow, {
     "data-role": "pagination",
@@ -38,8 +41,12 @@ const TablePagination = ({
           gap: "1rem"
         },
         children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.ItemPerPageText, {
-          children: "Items per page:"
+          children: jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.Label, {
+            htmlFor: perPageId,
+            children: "Items per page:"
+          })
         }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.Select, {
+          id: perPageId,
           value: pageSize.toString(),
           onChange: handlePageSizeChange,
           disabled: pageSizes[0] > totalRowCount,
@@ -52,12 +59,16 @@ const TablePagination = ({
           icon: redisUiIcons.DoubleChevronLeftIcon,
           size: "S",
           onClick: () => handlePageIndexChange(0),
-          disabled: pageIndex === 0
+          disabled: pageIndex === 0,
+          title: "First page",
+          "aria-label": "first page"
         }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PaginationIconButton, {
           icon: redisUiIcons.ChevronLeftIcon,
           size: "S",
           onClick: () => handlePageIndexChange(pageIndex - 1),
-          disabled: pageIndex === 0
+          disabled: pageIndex === 0,
+          title: "Previous page",
+          "aria-label": "previous page"
         }), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination_style.PaginationIndexText, {
           size: "S",
           children: [pageIndex + 1, " of ", pageCount]
@@ -65,17 +76,25 @@ const TablePagination = ({
           icon: redisUiIcons.ChevronRightIcon,
           size: "S",
           onClick: () => handlePageIndexChange(pageIndex + 1),
-          disabled: pageIndex === pageCount - 1
+          disabled: pageIndex === pageCount - 1,
+          title: "Next page",
+          "aria-label": "next page"
         }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PaginationIconButton, {
           icon: redisUiIcons.DoubleChevronRightIcon,
           size: "S",
           onClick: () => handlePageIndexChange(pageCount - 1),
-          disabled: pageIndex === pageCount - 1
+          disabled: pageIndex === pageCount - 1,
+          title: "Last page",
+          "aria-label": "last page"
         })]
       }), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination_style.PaginationActions, {
         children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PageLabelText, {
-          children: "Page"
+          children: jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.Label, {
+            htmlFor: pageNumId,
+            children: "Page"
+          })
         }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.Select, {
+          id: pageNumId,
           value: (pageIndex + 1).toString(),
           onChange: (value) => handlePageIndexChange(Number(value) - 1),
           options: Array.from({