@redis-ui/table 2.4.0 → 2.18.0

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { Row } from '@tanstack/react-table';
+import { ChildFree } from '@redislabsdev/redis-ui-components';
+import { TableBodyRowComposeProps } from './components/Compose/Compose';
+export type OwnTableBodyRowProps<T extends object> = {
+    row: Row<T>;
+};
+export type RestTableBodyRowProps = ChildFree<TableBodyRowComposeProps>;
+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;
+    useHandleClickableRow: <T_1 extends object>({ row, onClick, onKeyDown }: {
+        row: Row<T_1>;
+        onClick?: import("react").MouseEventHandler<HTMLTableRowElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLTableRowElement> | undefined;
+    }) => {
+        onClick: import("react").MouseEventHandler<HTMLTableRowElement> | undefined;
+        onKeyDown: ((event: import("react").KeyboardEvent<HTMLTableRowElement>) => void) | undefined;
+    };
+};

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

@@ -0,0 +1,38 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
+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";
+const TableBodyRow = Object.assign(forwardRefWithGenerics(({
+  row,
+  onClick,
+  onKeyDown,
+  ...restProps
+}, ref) => {
+  const {
+    TableBodyCell: Cell
+  } = useComposeContext({
+    TableBodyCell
+  });
+  const clickableProps = useHandleClickableRow({
+    row,
+    onClick,
+    onKeyDown
+  });
+  return jsxRuntimeExports.jsx(TableBodyRow.Compose, {
+    tabIndex: 0,
+    ...restProps,
+    ...clickableProps,
+    ref,
+    children: row.getVisibleCells().map((cell) => jsxRuntimeExports.jsx(Cell, {
+      cell
+    }, cell.id))
+  });
+}), {
+  Compose: TableBodyRowCompose,
+  useHandleClickableRow
+});
+export {
+  TableBodyRow
+};

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

@@ -0,0 +1,33 @@
+"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 ExpandableRowPlugin = require("../../plugins/ExpandableRowPlugin.cjs");
+const TableExpandedRow = require("../TableExpandedRow/TableExpandedRow.cjs");
+require("react");
+require("../TableExpandedRow/TableAnimatedExpandedRow.style.cjs");
+const TableBodyRow = require("./TableBodyRow.cjs");
+const TableBodyRowExpandable = redisUiComponents.forwardRefWithGenerics(({
+  row,
+  ...restProps
+}, ref) => {
+  const {
+    renderExpandedRow,
+    expandedRowComponent: ExpandedRow = TableExpandedRow.TableExpandedRow
+  } = ExpandableRowPlugin.useExpandableRowContext() || {};
+  return jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
+    children: [
+      jsxRuntime.jsxRuntimeExports.jsx(TableBodyRow.TableBodyRow, {
+        ...restProps,
+        row,
+        "data-row-type": "regular",
+        ref
+      }),
+      // 2nd row is a custom 1 cell row for expanded part
+      renderExpandedRow && row.getCanExpand() && jsxRuntime.jsxRuntimeExports.jsx(ExpandedRow, {
+        row
+      })
+    ]
+  });
+});
+exports.TableBodyRowExpandable = TableBodyRowExpandable;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TableBodyRowExpandable: <T extends object>(props: import("./TableBodyRow").OwnTableBodyRowProps<T> & import("./TableBodyRow").RestTableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null;

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

@@ -0,0 +1,33 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
+import { useExpandableRowContext } from "../../plugins/ExpandableRowPlugin.js";
+import { TableExpandedRow } from "../TableExpandedRow/TableExpandedRow.js";
+import "react";
+import "../TableExpandedRow/TableAnimatedExpandedRow.style.js";
+import { TableBodyRow } from "./TableBodyRow.js";
+const TableBodyRowExpandable = forwardRefWithGenerics(({
+  row,
+  ...restProps
+}, ref) => {
+  const {
+    renderExpandedRow,
+    expandedRowComponent: ExpandedRow = TableExpandedRow
+  } = useExpandableRowContext() || {};
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [
+      jsxRuntimeExports.jsx(TableBodyRow, {
+        ...restProps,
+        row,
+        "data-row-type": "regular",
+        ref
+      }),
+      // 2nd row is a custom 1 cell row for expanded part
+      renderExpandedRow && row.getCanExpand() && jsxRuntimeExports.jsx(ExpandedRow, {
+        row
+      })
+    ]
+  });
+});
+export {
+  TableBodyRowExpandable
+};

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

@@ -0,0 +1,17 @@
+"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_context = require("../../../../Table.context.cjs");
+const Table_style = require("../../../../Table.style.cjs");
+const TableBodyRowCompose = redisUiComponents.forwardRefWithGenerics((props, ref) => {
+  const {
+    stripedRows = false
+  } = Table_context.useTableContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.TableBodyRow, {
+    ...props,
+    ref,
+    "$stripedRows": stripedRows
+  });
+});
+exports.TableBodyRowCompose = TableBodyRowCompose;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+export type TableBodyRowComposeProps = ComposeElementProps<HTMLTableRowElement>;
+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/TableBodyRow/components/Compose/Compose.js

@@ -0,0 +1,17 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
+import { useTableContext } from "../../../../Table.context.js";
+import { TableBodyRow } from "../../../../Table.style.js";
+const TableBodyRowCompose = forwardRefWithGenerics((props, ref) => {
+  const {
+    stripedRows = false
+  } = useTableContext();
+  return jsxRuntimeExports.jsx(TableBodyRow, {
+    ...props,
+    ref,
+    "$stripedRows": stripedRows
+  });
+});
+export {
+  TableBodyRowCompose
+};

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

@@ -5,14 +5,14 @@ const React = require("react");
 const index = require("../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 const TableAnimatedExpandedRow_style = require("./TableAnimatedExpandedRow.style.cjs");
 const TableAnimatedExpandedRow = ({
-  expanded,
   rowRef,
   ...restProps
 }) => {
   const innerRowRef = React.useRef(null);
   const composedRowRef = index.useComposedRefs(rowRef, innerRowRef);
+  const isExpanded = restProps.row.getIsExpanded();
   React.useEffect(() => {
-    if (expanded) {
+    if (isExpanded) {
       const timer = setTimeout(() => {
         var _a;
         return (_a = innerRowRef.current) == null ? void 0 : _a.scrollIntoView({
@@ -23,10 +23,9 @@ const TableAnimatedExpandedRow = ({
       return () => clearTimeout(timer);
     }
     return void 0;
-  }, [expanded]);
+  }, [isExpanded]);
   return jsxRuntime.jsxRuntimeExports.jsx(TableAnimatedExpandedRow_style.AnimatedExpandedRow, {
     rowRef: composedRowRef,
-    expanded,
     ...restProps,
     keepInDom: true
   });

package/dist/Table/components/TableExpandedRow/TableAnimatedExpandedRow.d.ts

@@ -1,2 +1,2 @@
 import { TableExpandedRowProps } from './TableExpandedRow.types';
-export declare const TableAnimatedExpandedRow: <T extends object>({ expanded, rowRef, ...restProps }: TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableAnimatedExpandedRow: <T extends object>({ rowRef, ...restProps }: TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,14 +3,14 @@ import { useRef, useEffect } from "react";
 import { useComposedRefs } from "../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { AnimatedExpandedRow } from "./TableAnimatedExpandedRow.style.js";
 const TableAnimatedExpandedRow = ({
-  expanded,
   rowRef,
   ...restProps
 }) => {
   const innerRowRef = useRef(null);
   const composedRowRef = useComposedRefs(rowRef, innerRowRef);
+  const isExpanded = restProps.row.getIsExpanded();
   useEffect(() => {
-    if (expanded) {
+    if (isExpanded) {
       const timer = setTimeout(() => {
         var _a;
         return (_a = innerRowRef.current) == null ? void 0 : _a.scrollIntoView({
@@ -21,10 +21,9 @@ const TableAnimatedExpandedRow = ({
       return () => clearTimeout(timer);
     }
     return void 0;
-  }, [expanded]);
+  }, [isExpanded]);
   return jsxRuntimeExports.jsx(AnimatedExpandedRow, {
     rowRef: composedRowRef,
-    expanded,
     ...restProps,
     keepInDom: true
   });

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.cjs

@@ -3,18 +3,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const index = require("../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
+const ExpandableRowPlugin = require("../../plugins/ExpandableRowPlugin.cjs");
 const TableExpandedRow_style = require("./TableExpandedRow.style.cjs");
 const TableExpandedRow = ({
   row,
-  renderExpandedRow,
   keepInDom,
-  expanded,
   rowRef,
   ...restProps
 }) => {
   const innerRowRef = React.useRef(null);
   const composedRowRef = index.useComposedRefs(rowRef, innerRowRef);
-  const isExpanded = expanded ?? row.getIsExpanded();
+  const {
+    renderExpandedRow
+  } = ExpandableRowPlugin.useExpandableRowContext() || {};
+  const isExpanded = row.getIsExpanded();
   React.useEffect(() => {
     var _a;
     if (isExpanded) {
@@ -24,8 +26,11 @@ const TableExpandedRow = ({
       });
     }
   }, [isExpanded]);
-  return keepInDom || isExpanded ? jsxRuntime.jsxRuntimeExports.jsx(TableExpandedRow_style.ExpandedRow, {
+  return renderExpandedRow && (keepInDom || isExpanded) ? jsxRuntime.jsxRuntimeExports.jsx(TableExpandedRow_style.ExpandedRow, {
     ref: composedRowRef,
+    "data-row-type": "expanded",
+    "data-expanded": isExpanded,
+    "aria-hidden": !isExpanded,
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(TableExpandedRow_style.ExpandedCell, {
       colSpan: row.getVisibleCells().length,

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

@@ -1,2 +1,2 @@
 import { TableExpandedRowProps } from './TableExpandedRow.types';
-export declare const TableExpandedRow: <T extends object>({ row, renderExpandedRow, keepInDom, expanded, rowRef, ...restProps }: TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TableExpandedRow: <T extends object>({ row, keepInDom, rowRef, ...restProps }: TableExpandedRowProps<T>) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,18 +1,20 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { useRef, useEffect } from "react";
 import { useComposedRefs } from "../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
+import { useExpandableRowContext } from "../../plugins/ExpandableRowPlugin.js";
 import { ExpandedRow, ExpandedCell } from "./TableExpandedRow.style.js";
 const TableExpandedRow = ({
   row,
-  renderExpandedRow,
   keepInDom,
-  expanded,
   rowRef,
   ...restProps
 }) => {
   const innerRowRef = useRef(null);
   const composedRowRef = useComposedRefs(rowRef, innerRowRef);
-  const isExpanded = expanded ?? row.getIsExpanded();
+  const {
+    renderExpandedRow
+  } = useExpandableRowContext() || {};
+  const isExpanded = row.getIsExpanded();
   useEffect(() => {
     var _a;
     if (isExpanded) {
@@ -22,8 +24,11 @@ const TableExpandedRow = ({
       });
     }
   }, [isExpanded]);
-  return keepInDom || isExpanded ? jsxRuntimeExports.jsx(ExpandedRow, {
+  return renderExpandedRow && (keepInDom || isExpanded) ? jsxRuntimeExports.jsx(ExpandedRow, {
     ref: composedRowRef,
+    "data-row-type": "expanded",
+    "data-expanded": isExpanded,
+    "aria-hidden": !isExpanded,
     ...restProps,
     children: jsxRuntimeExports.jsx(ExpandedCell, {
       colSpan: row.getVisibleCells().length,

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/TableExpandedRow/TableExpandedRow.types.d.ts

@@ -1,9 +1,7 @@
-import { HTMLAttributes, ReactNode, Ref } from 'react';
-import { RowDefinition } from '../../Table.types';
+import { HTMLAttributes, Ref } from 'react';
+import { Row } from '@tanstack/react-table';
 export type TableExpandedRowProps<T extends object> = {
-    row: RowDefinition<T>;
-    renderExpandedRow: (row: RowDefinition<T>) => ReactNode;
+    row: Row<T>;
     keepInDom?: boolean;
-    expanded?: boolean;
     rowRef?: Ref<HTMLTableRowElement>;
 } & HTMLAttributes<HTMLTableRowElement>;

package/dist/Table/components/TableHeader/TableHeader.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const TableHeaderCell = require("../TableHeaderCell/TableHeaderCell.cjs");
+const Table_context = require("../../Table.context.cjs");
+const TableHeaderRow = require("../TableHeaderRow/TableHeaderRow.cjs");
+const Compose = require("./components/Compose/Compose.cjs");
+const TableHeader = Object.assign((props) => {
+  const {
+    table
+  } = Table_context.useTableContext();
+  const {
+    TableHeaderRow: Row
+  } = Table_context.useComposeContext({
+    TableHeaderRow: TableHeaderRow.TableHeaderRow
+  });
+  return jsxRuntime.jsxRuntimeExports.jsx(TableHeader.Compose, {
+    ...props,
+    children: table.getHeaderGroups().map((headerGroup) => jsxRuntime.jsxRuntimeExports.jsx(Row, {
+      headerGroup
+    }, headerGroup.id))
+  });
+}, {
+  Compose: Compose.TableHeaderCompose,
+  Row: TableHeaderRow.TableHeaderRow,
+  Cell: TableHeaderCell.TableHeaderCell
+});
+exports.TableHeader = TableHeader;

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ChildFree } from '@redislabsdev/redis-ui-components';
+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>;
+    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) & {
+                SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+            };
+            SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        };
+        Heading: (props: import("../TableHeaderCell/components/Heading/Heading").RestTableHeaderCellHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/Table/components/TableHeader/TableHeader.js

@@ -0,0 +1,28 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { TableHeaderCell } from "../TableHeaderCell/TableHeaderCell.js";
+import { useTableContext, useComposeContext } from "../../Table.context.js";
+import { TableHeaderRow } from "../TableHeaderRow/TableHeaderRow.js";
+import { TableHeaderCompose } from "./components/Compose/Compose.js";
+const TableHeader = Object.assign((props) => {
+  const {
+    table
+  } = useTableContext();
+  const {
+    TableHeaderRow: Row
+  } = useComposeContext({
+    TableHeaderRow
+  });
+  return jsxRuntimeExports.jsx(TableHeader.Compose, {
+    ...props,
+    children: table.getHeaderGroups().map((headerGroup) => jsxRuntimeExports.jsx(Row, {
+      headerGroup
+    }, headerGroup.id))
+  });
+}, {
+  Compose: TableHeaderCompose,
+  Row: TableHeaderRow,
+  Cell: TableHeaderCell
+});
+export {
+  TableHeader
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Table_style = require("../../../../Table.style.cjs");
+const TableHeaderCompose = Table_style.TableHead;
+exports.TableHeaderCompose = TableHeaderCompose;

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

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

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

@@ -0,0 +1,5 @@
+import { TableHead } from "../../../../Table.style.js";
+const TableHeaderCompose = TableHead;
+export {
+  TableHeaderCompose
+};

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

@@ -0,0 +1,19 @@
+"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 Table_context = require("../../Table.context.cjs");
+const SortingPlugin = require("../../plugins/SortingPlugin.cjs");
+const TableHeaderCell_utils = require("./TableHeaderCell.utils.cjs");
+function SRSortingNotification() {
+  const {
+    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)
+  });
+}
+exports.SRSortingNotification = SRSortingNotification;

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

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

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

@@ -0,0 +1,19 @@
+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 { useTableContext } from "../../Table.context.js";
+import { useSortingContext } from "../../plugins/SortingPlugin.js";
+import { getTableSortLabel, formatTableSortNotification } from "./TableHeaderCell.utils.js";
+function SRSortingNotification() {
+  const {
+    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)
+  });
+}
+export {
+  SRSortingNotification
+};

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

@@ -0,0 +1,23 @@
+"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 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,
+  ref,
+  children: jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell.SortableHeading, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell.Heading, {})
+  })
+})), {
+  Compose: Compose.TableHeaderCellCompose,
+  SortableHeading: SortableHeading.SortableHeading,
+  Heading: Heading.TableHeaderCellHeading
+});
+exports.TableHeaderCell = TableHeaderCell;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const TableHeaderCellContext = React.createContext(null);
+const useTableHeaderCellContext = () => {
+  const context = React.useContext(TableHeaderCellContext);
+  if (!context) {
+    throw new Error(`TableHeaderCell compound components cannot be rendered outside the TableHeaderCell component`);
+  }
+  return context;
+};
+const TableHeaderCellContextProvider = TableHeaderCellContext.Provider;
+exports.TableHeaderCellContext = TableHeaderCellContext;
+exports.TableHeaderCellContextProvider = TableHeaderCellContextProvider;
+exports.useTableHeaderCellContext = useTableHeaderCellContext;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Header } from '@tanstack/react-table';
+export type TableHeaderCellContextProps<T extends object> = {
+    header: Header<T, unknown>;
+};
+export declare const TableHeaderCellContext: import("react").Context<TableHeaderCellContextProps<any> | null>;
+export declare const useTableHeaderCellContext: <T extends object>() => TableHeaderCellContextProps<T>;
+export declare const TableHeaderCellContextProvider: import("react").Provider<TableHeaderCellContextProps<any> | null>;

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

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+const TableHeaderCellContext = createContext(null);
+const useTableHeaderCellContext = () => {
+  const context = useContext(TableHeaderCellContext);
+  if (!context) {
+    throw new Error(`TableHeaderCell compound components cannot be rendered outside the TableHeaderCell component`);
+  }
+  return context;
+};
+const TableHeaderCellContextProvider = TableHeaderCellContext.Provider;
+export {
+  TableHeaderCellContext,
+  TableHeaderCellContextProvider,
+  useTableHeaderCellContext
+};

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ChildFree } from '@redislabsdev/redis-ui-components';
+import { OwnTableHeaderCellComposeProps, RestTableHeaderCellComposeProps } from './components/Compose/Compose';
+export type OwnTableHeaderCellProps<T extends object> = OwnTableHeaderCellComposeProps<T>;
+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) & {
+            SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        };
+        SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    };
+    Heading: (props: import("./components/Heading/Heading").RestTableHeaderCellHeadingProps) => import("react/jsx-runtime").JSX.Element;
+};