@redis-ui/table 2.12.0 → 2.22.0

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,18 @@
+"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 SortingPlugin = require("../../plugins/SortingPlugin.cjs");
+const TableHeaderCell_utils = require("./TableHeaderCell.utils.cjs");
+function SRSortingNotification() {
+  const {
+    table
+  } = Table_context.useTableContext();
+  const sorting = SortingPlugin.useSortingContext();
+  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

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

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

@@ -0,0 +1,18 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.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";
+function SRSortingNotification() {
+  const {
+    table
+  } = useTableContext();
+  const sorting = useSortingContext();
+  return jsxRuntimeExports.jsx(ScreenReaderAnnounce, {
+    text: getTableSortLabel(table, formatTableSortNotification),
+    allowAnnounce: sorting == null ? void 0 : sorting.sortedByUser
+  });
+}
+export {
+  SRSortingNotification
+};

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

@@ -1,37 +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 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);
-};
+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((props, ref) => jsxRuntime.jsxRuntimeExports.jsx(TableHeaderCell.Compose, {
+  ...props,
+  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

@@ -1,4 +1,16 @@
-import { Header } from '@tanstack/react-table';
-export declare const TableHeaderCell: <T extends object>({ header }: {
-    header: Header<T, unknown>;
-}) => import("react/jsx-runtime").JSX.Element;
+/// <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<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>>;
+    };
+    Heading: (props: import("./components/Heading/Heading").RestTableHeaderCellHeadingProps) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -1,37 +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 { 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);
-};
+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((props, ref) => jsxRuntimeExports.jsx(TableHeaderCell.Compose, {
+  ...props,
+  ref,
+  children: jsxRuntimeExports.jsx(TableHeaderCell.SortableHeading, {
+    children: jsxRuntimeExports.jsx(TableHeaderCell.Heading, {})
+  })
+})), {
+  Compose: TableHeaderCellCompose,
+  SortableHeading,
+  Heading: TableHeaderCellHeading
+});
 export {
   TableHeaderCell
 };

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

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

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

@@ -4,8 +4,6 @@ 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",
@@ -42,25 +40,6 @@ const getColumnSortLabel = (header, formatLabel) => {
   }
   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";
@@ -95,7 +74,6 @@ 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

@@ -5,7 +5,6 @@ export declare const getSortSign: (header: CommonHeader) => ReactElement<any, st
 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

@@ -1,9 +1,7 @@
 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 { childrenToString } 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",
@@ -40,25 +38,6 @@ const getColumnSortLabel = (header, formatLabel) => {
   }
   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";
@@ -94,7 +73,6 @@ export {
   formatTableSortNotification,
   getColumnSortLabel,
   getCurrentAriaSort,
-  getHeaderContent,
   getSortSign,
   getTableSortLabel,
   normalizeCellSpan

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

@@ -0,0 +1,48 @@
+"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 index = require("../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+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: table_utils.getWidth(column),
+        ...restProps.style,
+        ...columnCellProps == null ? void 0 : columnCellProps.style
+      },
+      "aria-hidden": header.isPlaceholder,
+      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"
+      }) : children
+    })
+  });
+});
+exports.TableHeaderCellCompose = TableHeaderCellCompose;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+import { Header } from '@tanstack/react-table';
+export type OwnTableHeaderCellComposeProps<T extends object> = {
+    header: Header<T, unknown>;
+};
+export type RestTableHeaderCellComposeProps = ComposeElementProps<HTMLTableCellElement>;
+export type TableHeaderCellComposeProps<T extends object> = OwnTableHeaderCellComposeProps<T> & RestTableHeaderCellComposeProps;
+export declare const TableHeaderCellCompose: <T extends object>(props: OwnTableHeaderCellComposeProps<T> & import("@redislabsdev/redis-ui-components").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLTableCellElement>, "content" | "children"> & import("react").RefAttributes<HTMLTableCellElement>) => import("react").ReactElement<any, any> | null;

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

@@ -0,0 +1,48 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
+import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+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: getWidth(column),
+        ...restProps.style,
+        ...columnCellProps == null ? void 0 : columnCellProps.style
+      },
+      "aria-hidden": header.isPlaceholder,
+      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"
+      }) : children
+    })
+  });
+});
+export {
+  TableHeaderCellCompose
+};

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

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

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

@@ -0,0 +1,35 @@
+"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 index$1 = require("../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const TableHeaderCell_context = require("../../TableHeaderCell.context.cjs");
+const Table_style = require("../../../../Table.style.cjs");
+const DEFAULT_HIDDEN_HEADER = "Actions";
+const TableHeaderCellHeading = (props) => {
+  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 = typeof content === "string" ? content.trim() : content;
+  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,
+    ...props,
+    "$isTextual": redisUiComponents.isTextualNode(content),
+    children: content
+  });
+};
+exports.TableHeaderCellHeading = TableHeaderCellHeading;

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

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { ChildFree, Typography } from '@redislabsdev/redis-ui-components';
+export type RestTableHeaderCellHeadingProps = ChildFree<ComponentProps<typeof Typography.Body>>;
+export type TableHeaderCellHeadingProps = RestTableHeaderCellHeadingProps;
+export declare const TableHeaderCellHeading: (props: TableHeaderCellHeadingProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { flexRender } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { isTextualNode } from "@redislabsdev/redis-ui-components";
+import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import { useTableHeaderCellContext } from "../../TableHeaderCell.context.js";
+import { HeaderTitleWrapper } from "../../../../Table.style.js";
+const DEFAULT_HIDDEN_HEADER = "Actions";
+const TableHeaderCellHeading = (props) => {
+  const {
+    header
+  } = useTableHeaderCellContext();
+  const content = flexRender(header.column.columnDef.header, header.getContext());
+  if (header.column.columnDef.isHeaderCustom) {
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+      children: content
+    });
+  }
+  const text = typeof content === "string" ? content.trim() : content;
+  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,
+    ...props,
+    "$isTextual": isTextualNode(content),
+    children: content
+  });
+};
+export {
+  TableHeaderCellHeading
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const SortIndicator = require("./components/SortIndicator/SortIndicator.cjs");
+const Compose = require("./components/Compose/Compose.cjs");
+const SortableHeading = Object.assign(({
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsxs(SortableHeading.Compose, {
+  ...restProps,
+  children: [children, jsxRuntime.jsxRuntimeExports.jsx(SortableHeading.SortIndicator, {})]
+}), {
+  Compose: Compose.SortableHeadingCompose,
+  SortIndicator: SortIndicator.SortIndicator
+});
+exports.SortableHeading = SortableHeading;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+export declare const SortableHeading: (({ children, ...restProps }: ComposeElementProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ((props: 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/components/SortableHeading/SortableHeading.js

@@ -0,0 +1,16 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { SortIndicator } from "./components/SortIndicator/SortIndicator.js";
+import { SortableHeadingCompose } from "./components/Compose/Compose.js";
+const SortableHeading = Object.assign(({
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsxs(SortableHeading.Compose, {
+  ...restProps,
+  children: [children, jsxRuntimeExports.jsx(SortableHeading.SortIndicator, {})]
+}), {
+  Compose: SortableHeadingCompose,
+  SortIndicator
+});
+export {
+  SortableHeading
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
+const TableHeaderCell_utils = require("../../../../TableHeaderCell.utils.cjs");
+const TableHeaderCell_context = require("../../../../TableHeaderCell.context.cjs");
+const SortIndicator = require("../SortIndicator/SortIndicator.cjs");
+const Table_style = require("../../../../../../Table.style.cjs");
+const SortableHeadingCompose = Object.assign((props) => {
+  const {
+    header
+  } = TableHeaderCell_context.useTableHeaderCellContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(
+    Table_style.SortableHeadingCompose,
+    {
+      "aria-description": TableHeaderCell_utils.getColumnSortLabel(header, TableHeaderCell_utils.formatColumnSortNotification),
+      ...props,
+      "$custom": header.column.columnDef.isHeaderCustom || false,
+      as: header.column.getCanSort() ? void 0 : "div"
+    }
+  );
+}, {
+  SortIndicator: SortIndicator.SortIndicator
+});
+exports.SortableHeadingCompose = SortableHeadingCompose;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+export declare const SortableHeadingCompose: ((props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element) & {
+    SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+};