@redis-ui/table 2.18.0 → 2.23.2

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

@@ -7,6 +7,7 @@ const HeaderMultiRowSelectionButton = ({
   managePage,
   ...restProps
 }) => {
+  if (!table.options.enableMultiRowSelection) return null;
   const props = {
     checked: false,
     label: "unselected all rows",

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

@@ -4,4 +4,4 @@ export interface HeaderMultiRowSelectionButtonProps<T extends object> extends Om
     table: Table<T>;
     managePage?: boolean;
 }
-export declare const HeaderMultiRowSelectionButton: <T extends object>({ table, managePage, ...restProps }: HeaderMultiRowSelectionButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderMultiRowSelectionButton: <T extends object>({ table, managePage, ...restProps }: HeaderMultiRowSelectionButtonProps<T>) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -5,6 +5,7 @@ const HeaderMultiRowSelectionButton = ({
   managePage,
   ...restProps
 }) => {
+  if (!table.options.enableMultiRowSelection) return null;
   const props = {
     checked: false,
     label: "unselected all rows",

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

@@ -0,0 +1,26 @@
+"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 HeaderMultiRowSelectionButton = require("./HeaderMultiRowSelectionButton.cjs");
+const RowSelectionButton = require("./RowSelectionButton.cjs");
+const useRowSelectionColumn = ({
+  disableSelectAll,
+  managePage,
+  ...colDef
+} = {}) => ({
+  id: "row-selection",
+  size: 4.2,
+  minSize: 4.2,
+  sizeUnit: "rem",
+  header: (props) => !disableSelectAll && props.table.options.enableMultiRowSelection ? jsxRuntime.jsxRuntimeExports.jsx(HeaderMultiRowSelectionButton.HeaderMultiRowSelectionButton, {
+    ...props,
+    managePage
+  }) : jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
+    children: "row selection"
+  }),
+  isHeaderCustom: true,
+  cell: RowSelectionButton.RowSelectionButton,
+  ...colDef
+});
+exports.useRowSelectionColumn = useRowSelectionColumn;

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

@@ -0,0 +1,8 @@
+import { ColumnDef } from '@tanstack/react-table';
+export type UseRowSelectionColumnParams<T extends object> = Partial<ColumnDef<T>> & {
+    /** Disable Select All checkbox in header, even if multi-select is enabled */
+    disableSelectAll?: boolean;
+    /** Force Select All checkbox toggle selection on current page only, if pagination is enabled  */
+    managePage?: boolean;
+};
+export declare const useRowSelectionColumn: <T extends object>({ disableSelectAll, managePage, ...colDef }?: UseRowSelectionColumnParams<T>) => ColumnDef<T, unknown>;

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

@@ -0,0 +1,26 @@
+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 { HeaderMultiRowSelectionButton } from "./HeaderMultiRowSelectionButton.js";
+import { RowSelectionButton } from "./RowSelectionButton.js";
+const useRowSelectionColumn = ({
+  disableSelectAll,
+  managePage,
+  ...colDef
+} = {}) => ({
+  id: "row-selection",
+  size: 4.2,
+  minSize: 4.2,
+  sizeUnit: "rem",
+  header: (props) => !disableSelectAll && props.table.options.enableMultiRowSelection ? jsxRuntimeExports.jsx(HeaderMultiRowSelectionButton, {
+    ...props,
+    managePage
+  }) : jsxRuntimeExports.jsx(VisuallyHidden, {
+    children: "row selection"
+  }),
+  isHeaderCustom: true,
+  cell: RowSelectionButton,
+  ...colDef
+});
+export {
+  useRowSelectionColumn
+};

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

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

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

@@ -4,8 +4,10 @@ const _styled = require("styled-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ShowOnRowHover = _styled__default.default.div`
+  table:where([tabindex='0']) & {
+    visibility: hidden;
+  }
   opacity: 0;
-  visibility: hidden;
   transition: opacity 0.3s ease-in-out;
 `;
 exports.ShowOnRowHover = ShowOnRowHover;

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

@@ -1,7 +1,9 @@
 import _styled from "styled-components";
 const ShowOnRowHover = _styled.div`
+  table:where([tabindex='0']) & {
+    visibility: hidden;
+  }
   opacity: 0;
-  visibility: hidden;
   transition: opacity 0.3s ease-in-out;
 `;
 export {

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

@@ -18,6 +18,6 @@ export declare const TableBody: (<T extends object>(props: TableBodyProps) => im
     };
     ExpandableRow: <T_3 extends object>(props: import("../TableBodyRow/TableBodyRow").OwnTableBodyRowProps<T_3> & import("../TableBodyRow/TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;
     Cell: (<T_4 extends object>(props: import("../TableBodyCell/TableBodyCell").OwnTableBodyCellProps<T_4> & import("../TableBodyCell/TableBodyCell").RestTableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-        Compose: import("styled-components").StyledComponent<"td", any, {}, never>;
+        Compose: <T_5 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("../TableBodyCell/components/Compose/Compose").OwnTableBodyCellComposeProps<T_5> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
     };
 };

package/dist/Table/components/TableBody/components/Compose/Compose.cjs

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const Table_style = require("../../../../Table.style.cjs");
-const Table_context = require("../../../../Table.context.cjs");
 const TableBodyCompose = (props) => jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBody, {
-  ...props,
-  maxHeight: Table_context.useTableContext().maxHeight
+  "data-role": "table-body",
+  ...props
 });
 exports.TableBodyCompose = TableBodyCompose;

package/dist/Table/components/TableBody/components/Compose/Compose.js

@@ -1,9 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { TableBody } from "../../../../Table.style.js";
-import { useTableContext } from "../../../../Table.context.js";
 const TableBodyCompose = (props) => jsxRuntimeExports.jsx(TableBody, {
-  ...props,
-  maxHeight: useTableContext().maxHeight
+  "data-role": "table-body",
+  ...props
 });
 export {
   TableBodyCompose

package/dist/Table/components/TableBodyCell/TableBodyCell.cjs

@@ -6,15 +6,11 @@ const redisUiComponents = require("@redislabsdev/redis-ui-components");
 const Compose = require("./components/Compose/Compose.cjs");
 const TableBodyCell = Object.assign(redisUiComponents.forwardRefWithGenerics(({
   cell,
-  style,
   ...restProps
 }, ref) => jsxRuntime.jsxRuntimeExports.jsx(TableBodyCell.Compose, {
   ...restProps,
+  cell,
   ref,
-  style: {
-    width: cell.column.getSize(),
-    ...style
-  },
   children: index.flexRender(cell.column.columnDef.cell, cell.getContext())
 })), {
   Compose: Compose.TableBodyCellCompose

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

@@ -1,12 +1,9 @@
 /// <reference types="react" />
-import { Cell } from '@tanstack/react-table';
 import { ChildFree } from '@redislabsdev/redis-ui-components';
-import { TableBodyCellComposeProps } from './components/Compose/Compose';
-export type OwnTableBodyCellProps<T extends object> = {
-    cell: Cell<T, unknown>;
-};
-export type RestTableBodyCellProps = ChildFree<TableBodyCellComposeProps>;
+import { OwnTableBodyCellComposeProps, RestTableBodyCellComposeProps } from './components/Compose/Compose';
+export type OwnTableBodyCellProps<T extends object> = OwnTableBodyCellComposeProps<T>;
+export type RestTableBodyCellProps = ChildFree<RestTableBodyCellComposeProps>;
 export type TableBodyCellProps<T extends object> = OwnTableBodyCellProps<T> & RestTableBodyCellProps;
 export declare const TableBodyCell: (<T extends object>(props: OwnTableBodyCellProps<T> & RestTableBodyCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
-    Compose: import("styled-components").StyledComponent<"td", any, {}, never>;
+    Compose: <T_1 extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & OwnTableBodyCellComposeProps<T_1> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
 };

package/dist/Table/components/TableBodyCell/TableBodyCell.js

@@ -4,15 +4,11 @@ import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
 import { TableBodyCellCompose } from "./components/Compose/Compose.js";
 const TableBodyCell = Object.assign(forwardRefWithGenerics(({
   cell,
-  style,
   ...restProps
 }, ref) => jsxRuntimeExports.jsx(TableBodyCell.Compose, {
   ...restProps,
+  cell,
   ref,
-  style: {
-    width: cell.column.getSize(),
-    ...style
-  },
   children: flexRender(cell.column.columnDef.cell, cell.getContext())
 })), {
   Compose: TableBodyCellCompose

package/dist/Table/components/TableBodyCell/components/Compose/Compose.cjs

@@ -1,5 +1,25 @@
 "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 table_utils = require("../../../../utils/table.utils.cjs");
 const Table_style = require("../../../../Table.style.cjs");
-const TableBodyCellCompose = Table_style.TableBodyCell;
+const TableBodyCellCompose = redisUiComponents.forwardRefWithGenerics(({
+  cell,
+  style,
+  ...restProps
+}, ref) => {
+  var _a, _b;
+  const columnCellProps = (_b = (_a = cell.column.columnDef).getCellProps) == null ? void 0 : _b.call(_a, cell.row.original, cell);
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyCell, {
+    ...restProps,
+    ...columnCellProps,
+    ref,
+    style: {
+      width: table_utils.getWidth(cell.column),
+      ...style,
+      ...columnCellProps == null ? void 0 : columnCellProps.style
+    }
+  });
+});
 exports.TableBodyCellCompose = TableBodyCellCompose;

package/dist/Table/components/TableBodyCell/components/Compose/Compose.d.ts

@@ -1,3 +1,9 @@
+/// <reference types="react" />
 import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
-export type TableBodyCellComposeProps = ComposeElementProps<HTMLTableCellElement>;
-export declare const TableBodyCellCompose: import("styled-components").StyledComponent<"td", any, {}, never>;
+import { Cell } from '@tanstack/react-table';
+export type OwnTableBodyCellComposeProps<T extends object> = {
+    cell: Cell<T, unknown>;
+};
+export type RestTableBodyCellComposeProps = ComposeElementProps<HTMLTableCellElement>;
+export type TableBodyCellComposeProps<T extends object> = RestTableBodyCellComposeProps & OwnTableBodyCellComposeProps<T>;
+export declare const TableBodyCellCompose: <T extends object>(props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & OwnTableBodyCellComposeProps<T> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;

package/dist/Table/components/TableBodyCell/components/Compose/Compose.js

@@ -1,5 +1,25 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
+import { getWidth } from "../../../../utils/table.utils.js";
 import { TableBodyCell } from "../../../../Table.style.js";
-const TableBodyCellCompose = TableBodyCell;
+const TableBodyCellCompose = forwardRefWithGenerics(({
+  cell,
+  style,
+  ...restProps
+}, ref) => {
+  var _a, _b;
+  const columnCellProps = (_b = (_a = cell.column.columnDef).getCellProps) == null ? void 0 : _b.call(_a, cell.row.original, cell);
+  return jsxRuntimeExports.jsx(TableBodyCell, {
+    ...restProps,
+    ...columnCellProps,
+    ref,
+    style: {
+      width: getWidth(cell.column),
+      ...style,
+      ...columnCellProps == null ? void 0 : columnCellProps.style
+    }
+  });
+});
 export {
   TableBodyCellCompose
 };

package/dist/Table/components/TableBodyCell/components/Compose/Compose.test.d.ts

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

package/dist/Table/components/TableBodyRow/TableBodyRow.cjs

@@ -6,10 +6,12 @@ const Table_context = require("../../Table.context.cjs");
 const TableBodyCell = require("../TableBodyCell/TableBodyCell.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const ClickableRowPlugin = require("../../plugins/ClickableRowPlugin.cjs");
+const RowNavigationPlugin = require("../../plugins/RowNavigationPlugin.cjs");
 const TableBodyRow = Object.assign(redisUiComponents.forwardRefWithGenerics(({
   row,
   onClick,
   onKeyDown,
+  onFocus,
   ...restProps
 }, ref) => {
   const {
@@ -22,11 +24,19 @@ const TableBodyRow = Object.assign(redisUiComponents.forwardRefWithGenerics(({
     onClick,
     onKeyDown
   });
+  const {
+    ref: comboRef,
+    ...navigationProps
+  } = RowNavigationPlugin.useHandleRowNavigationOnRow({
+    row,
+    ref,
+    onFocus
+  });
   return jsxRuntime.jsxRuntimeExports.jsx(TableBodyRow.Compose, {
-    tabIndex: 0,
     ...restProps,
     ...clickableProps,
-    ref,
+    ...navigationProps,
+    ref: comboRef,
     children: row.getVisibleCells().map((cell) => jsxRuntime.jsxRuntimeExports.jsx(Cell, {
       cell
     }, cell.id))

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { Row } from '@tanstack/react-table';
 import { ChildFree } from '@redislabsdev/redis-ui-components';
-import { TableBodyRowComposeProps } from './components/Compose/Compose';
+import { Row } from '@tanstack/react-table';
+import { RestTableBodyRowComposeProps } from './components/Compose/Compose';
 export type OwnTableBodyRowProps<T extends object> = {
     row: Row<T>;
 };
-export type RestTableBodyRowProps = ChildFree<TableBodyRowComposeProps>;
+export type RestTableBodyRowProps = ChildFree<RestTableBodyRowComposeProps>;
 export type TableBodyRowProps<T extends object> = OwnTableBodyRowProps<T> & RestTableBodyRowProps;
 export declare const TableBodyRow: (<T extends object>(props: OwnTableBodyRowProps<T> & RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
     Compose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;

package/dist/Table/components/TableBodyRow/TableBodyRow.js

@@ -4,10 +4,12 @@ import { useComposeContext } from "../../Table.context.js";
 import { TableBodyCell } from "../TableBodyCell/TableBodyCell.js";
 import { TableBodyRowCompose } from "./components/Compose/Compose.js";
 import { useHandleClickableRow } from "../../plugins/ClickableRowPlugin.js";
+import { useHandleRowNavigationOnRow } from "../../plugins/RowNavigationPlugin.js";
 const TableBodyRow = Object.assign(forwardRefWithGenerics(({
   row,
   onClick,
   onKeyDown,
+  onFocus,
   ...restProps
 }, ref) => {
   const {
@@ -20,11 +22,19 @@ const TableBodyRow = Object.assign(forwardRefWithGenerics(({
     onClick,
     onKeyDown
   });
+  const {
+    ref: comboRef,
+    ...navigationProps
+  } = useHandleRowNavigationOnRow({
+    row,
+    ref,
+    onFocus
+  });
   return jsxRuntimeExports.jsx(TableBodyRow.Compose, {
-    tabIndex: 0,
     ...restProps,
     ...clickableProps,
-    ref,
+    ...navigationProps,
+    ref: comboRef,
     children: row.getVisibleCells().map((cell) => jsxRuntimeExports.jsx(Cell, {
       cell
     }, cell.id))

package/dist/Table/components/TableBodyRow/components/Compose/Compose.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
-export type TableBodyRowComposeProps = ComposeElementProps<HTMLTableRowElement>;
+export type RestTableBodyRowComposeProps = ComposeElementProps<HTMLTableRowElement>;
+export type TableBodyRowComposeProps = RestTableBodyRowComposeProps;
 export declare const TableBodyRowCompose: (props: import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableRowElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;

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

@@ -4,14 +4,14 @@ import { TableHeaderComposeProps } from './components/Compose/Compose';
 export type RestTableHeaderProps = ChildFree<TableHeaderComposeProps>;
 export type TableHeaderProps = RestTableHeaderProps;
 export declare const TableHeader: (<T extends object>(props: TableHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: import("styled-components").StyledComponent<"thead", any, {}, never>;
+    Compose: import("react").FC<TableHeaderComposeProps>;
     Row: (<T_1 extends object>(props: import("../TableHeaderRow/TableHeaderRow").OwnTableHeaderRowProps<T_1> & import("../TableHeaderRow/TableHeaderRow").RestTableHeaderRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
         Compose: import("styled-components").StyledComponent<"tr", any, {}, never>;
     };
     Cell: (<T_2 extends object>(props: import("../TableHeaderCell/TableHeaderCell").OwnTableHeaderCellProps<T_2> & import("../TableHeaderCell/TableHeaderCell").RestTableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
         Compose: <T_3 extends object>(props: import("../TableHeaderCell/components/Compose/Compose").OwnTableHeaderCellComposeProps<T_3> & import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
-        SortableHeading: (({ children, ...restProps }: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
-            Compose: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+        SortableHeading: (({ children, ...restProps }: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element) & {
+            Compose: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element) & {
                 SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
             };
             SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/Table/components/TableHeader/components/Compose/Compose.d.ts

@@ -1,3 +1,4 @@
+import { FC } from 'react';
 import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
 export type TableHeaderComposeProps = ComposeElementProps<HTMLTableSectionElement>;
-export declare const TableHeaderCompose: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export declare const TableHeaderCompose: FC<TableHeaderComposeProps>;

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

@@ -1,7 +1,7 @@
 "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 redisUiComponents = require("@redislabsdev/redis-ui-components");
 const Table_context = require("../../Table.context.cjs");
 const SortingPlugin = require("../../plugins/SortingPlugin.cjs");
 const TableHeaderCell_utils = require("./TableHeaderCell.utils.cjs");
@@ -10,10 +10,9 @@ function SRSortingNotification() {
     table
   } = Table_context.useTableContext();
   const sorting = SortingPlugin.useSortingContext();
-  if (!(sorting == null ? void 0 : sorting.sortedByUser)) return null;
-  return jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
-    "aria-live": "polite",
-    children: TableHeaderCell_utils.getTableSortLabel(table, TableHeaderCell_utils.formatTableSortNotification)
+  return jsxRuntime.jsxRuntimeExports.jsx(redisUiComponents.ScreenReaderAnnounce, {
+    text: TableHeaderCell_utils.getTableSortLabel(table, TableHeaderCell_utils.formatTableSortNotification),
+    allowAnnounce: sorting == null ? void 0 : sorting.sortedByUser
   });
 }
 exports.SRSortingNotification = SRSortingNotification;

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

@@ -1 +1 @@
-export declare function SRSortingNotification(): import("react/jsx-runtime").JSX.Element | null;
+export declare function SRSortingNotification(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 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 { ScreenReaderAnnounce } from "@redislabsdev/redis-ui-components";
 import { useTableContext } from "../../Table.context.js";
 import { useSortingContext } from "../../plugins/SortingPlugin.js";
 import { getTableSortLabel, formatTableSortNotification } from "./TableHeaderCell.utils.js";
@@ -8,10 +8,9 @@ function SRSortingNotification() {
     table
   } = useTableContext();
   const sorting = useSortingContext();
-  if (!(sorting == null ? void 0 : sorting.sortedByUser)) return null;
-  return jsxRuntimeExports.jsx(VisuallyHidden, {
-    "aria-live": "polite",
-    children: getTableSortLabel(table, formatTableSortNotification)
+  return jsxRuntimeExports.jsx(ScreenReaderAnnounce, {
+    text: getTableSortLabel(table, formatTableSortNotification),
+    allowAnnounce: sorting == null ? void 0 : sorting.sortedByUser
   });
 }
 export {

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

@@ -5,12 +5,8 @@ const redisUiComponents = require("@redislabsdev/redis-ui-components");
 const Compose = require("./components/Compose/Compose.cjs");
 const SortableHeading = require("./components/SortableHeading/SortableHeading.cjs");
 const Heading = require("./components/Heading/Heading.cjs");
-const TableHeaderCell = Object.assign(redisUiComponents.forwardRefWithGenerics(({
-  header,
-  ...restProps
-}, ref) => jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell.Compose, {
-  header,
-  ...restProps,
+const TableHeaderCell = Object.assign(redisUiComponents.forwardRefWithGenerics((props, ref) => jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell.Compose, {
+  ...props,
   ref,
   children: jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell.SortableHeading, {
     children: jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell.Heading, {})

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

@@ -6,8 +6,8 @@ export type RestTableHeaderCellProps = ChildFree<RestTableHeaderCellComposeProps
 export type TableHeaderCellProps<T extends object> = OwnTableHeaderCellProps<T> & RestTableHeaderCellProps;
 export declare const TableHeaderCell: (<T extends object>(props: OwnTableHeaderCellProps<T> & RestTableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null) & {
     Compose: <T_1 extends object>(props: OwnTableHeaderCellComposeProps<T_1> & import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;
-    SortableHeading: (({ children, ...restProps }: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+    SortableHeading: (({ children, ...restProps }: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ((props: import("@redislabsdev/redis-ui-components").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element) & {
             SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         };
         SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

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

@@ -3,12 +3,8 @@ import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
 import { TableHeaderCellCompose } from "./components/Compose/Compose.js";
 import { SortableHeading } from "./components/SortableHeading/SortableHeading.js";
 import { TableHeaderCellHeading } from "./components/Heading/Heading.js";
-const TableHeaderCell = Object.assign(forwardRefWithGenerics(({
-  header,
-  ...restProps
-}, ref) => jsxRuntimeExports.jsx(TableHeaderCell.Compose, {
-  header,
-  ...restProps,
+const TableHeaderCell = Object.assign(forwardRefWithGenerics((props, ref) => jsxRuntimeExports.jsx(TableHeaderCell.Compose, {
+  ...props,
   ref,
   children: jsxRuntimeExports.jsx(TableHeaderCell.SortableHeading, {
     children: jsxRuntimeExports.jsx(TableHeaderCell.Heading, {})

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

@@ -6,30 +6,38 @@ const index = require("../../../../../node_modules/@radix-ui/react-visually-hidd
 const React = require("react");
 const TableHeaderCell_utils = require("../../TableHeaderCell.utils.cjs");
 const TableHeaderCell_context = require("../../TableHeaderCell.context.cjs");
+const table_utils = require("../../../../utils/table.utils.cjs");
 const Table_style = require("../../../../Table.style.cjs");
 const TableHeaderCellCompose = redisUiComponents.forwardRefWithGenerics(({
   header,
   children,
   ...restProps
 }, ref) => {
+  var _a, _b;
   const colSpan = TableHeaderCell_utils.normalizeCellSpan(header.colSpan);
   const rowSpan = TableHeaderCell_utils.normalizeCellSpan(header.rowSpan);
+  const {
+    column
+  } = header;
+  const columnCellProps = (_b = (_a = column.columnDef).getHeaderCellProps) == null ? void 0 : _b.call(_a, header);
   return jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell_context.TableHeaderCellContextProvider, {
     value: React.useMemo(() => ({
       header
     }), [header]),
     children: jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableTh, {
       ...restProps,
+      ...columnCellProps,
       ref,
       colSpan,
       rowSpan,
       style: {
-        width: header.column.getSize(),
-        ...restProps.style
+        width: table_utils.getWidth(column),
+        ...restProps.style,
+        ...columnCellProps == null ? void 0 : columnCellProps.style
       },
-      "aria-hidden": header.isPlaceholder,
-      onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
-      "aria-sort": header.column.getCanSort() ? TableHeaderCell_utils.getCurrentAriaSort(header) : void 0,
+      "aria-hidden": header.isPlaceholder ? true : void 0,
+      onClick: column.getCanSort() ? column.getToggleSortingHandler() : void 0,
+      "aria-sort": column.getCanSort() ? TableHeaderCell_utils.getCurrentAriaSort(header) : void 0,
       scope: "col",
       children: header.isPlaceholder ? jsxRuntime.jsxRuntimeExports.jsx(index.VisuallyHidden, {
         children: "Placeholder"

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

@@ -4,30 +4,38 @@ import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visu
 import { useMemo } from "react";
 import { normalizeCellSpan, getCurrentAriaSort } from "../../TableHeaderCell.utils.js";
 import { TableHeaderCellContextProvider } from "../../TableHeaderCell.context.js";
+import { getWidth } from "../../../../utils/table.utils.js";
 import { TableTh } from "../../../../Table.style.js";
 const TableHeaderCellCompose = forwardRefWithGenerics(({
   header,
   children,
   ...restProps
 }, ref) => {
+  var _a, _b;
   const colSpan = normalizeCellSpan(header.colSpan);
   const rowSpan = normalizeCellSpan(header.rowSpan);
+  const {
+    column
+  } = header;
+  const columnCellProps = (_b = (_a = column.columnDef).getHeaderCellProps) == null ? void 0 : _b.call(_a, header);
   return jsxRuntimeExports.jsx(TableHeaderCellContextProvider, {
     value: useMemo(() => ({
       header
     }), [header]),
     children: jsxRuntimeExports.jsx(TableTh, {
       ...restProps,
+      ...columnCellProps,
       ref,
       colSpan,
       rowSpan,
       style: {
-        width: header.column.getSize(),
-        ...restProps.style
+        width: getWidth(column),
+        ...restProps.style,
+        ...columnCellProps == null ? void 0 : columnCellProps.style
       },
-      "aria-hidden": header.isPlaceholder,
-      onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
-      "aria-sort": header.column.getCanSort() ? getCurrentAriaSort(header) : void 0,
+      "aria-hidden": header.isPlaceholder ? true : void 0,
+      onClick: column.getCanSort() ? column.getToggleSortingHandler() : void 0,
+      "aria-sort": column.getCanSort() ? getCurrentAriaSort(header) : void 0,
       scope: "col",
       children: header.isPlaceholder ? jsxRuntimeExports.jsx(VisuallyHidden, {
         children: "Placeholder"

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

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

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

@@ -8,15 +8,16 @@ const TableHeaderCell_context = require("../../TableHeaderCell.context.cjs");
 const Table_style = require("../../../../Table.style.cjs");
 const DEFAULT_HIDDEN_HEADER = "Actions";
 const TableHeaderCellHeading = (props) => {
-  var _a;
   const {
     header
   } = TableHeaderCell_context.useTableHeaderCellContext();
   const content = index.flexRender(header.column.columnDef.header, header.getContext());
-  if (header.column.columnDef.isHeaderCustom) return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
-    children: content
-  });
-  const text = (_a = redisUiComponents.childrenToString(content)) == null ? void 0 : _a.trim();
+  if (header.column.columnDef.isHeaderCustom) {
+    return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
+      children: content
+    });
+  }
+  const text = typeof content === "string" ? content.trim() : content;
   if (!text || header.column.columnDef.isHeaderHidden) {
     return jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
       children: text || DEFAULT_HIDDEN_HEADER