@deque/cauldron-react 6.11.0 → 6.12.0-canary.98683670

package/lib/components/Table/Table.d.ts

@@ -1,9 +1,21 @@
-import React, { TableHTMLAttributes } from 'react';
-interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+import React from 'react';
+export type Column = {
+    align: ColumnAlignment;
+    width?: ColumnWidth;
+};
+export type ColumnAlignment = 'start' | 'center' | 'end';
+export type ColumnWidth = 'auto' | 'min-content' | 'max-content' | `${number}` | `${number}%` | `${number}fr`;
+export type RowAlignment = 'start' | 'center';
+type TableBaseProps = {
+    layout: never;
+    columns: never;
+    variant?: 'border';
+};
+type TableGridProps = {
+    layout: 'grid';
+    columns?: Array<Column> | number;
     variant?: 'border';
-}
-declare const Table: {
-    ({ children, className, variant, ...other }: TableProps): React.JSX.Element;
-    displayName: string;
 };
+type TableProps = (TableBaseProps | Partial<TableGridProps>) & React.TableHTMLAttributes<HTMLTableElement>;
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
 export default Table;

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

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-declare const TableBody: {
-    ({ children, className, ...other }: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & {
+    className?: string | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableBody;

package/lib/components/Table/TableCell.d.ts

@@ -1,6 +1,7 @@
-import React, { TdHTMLAttributes } from 'react';
-declare const TableCell: {
-    ({ children, className, ...other }: TdHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
-    displayName: string;
-};
+import type { ColumnAlignment } from './Table';
+import React from 'react';
+interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableDataCellElement>, 'align'> {
+    align?: ColumnAlignment;
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableCell;

package/lib/components/Table/TableContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Column } from './Table';
+type TableContext = {
+    layout: 'table' | 'grid';
+    columns: Array<Column>;
+};
+type TableProvider = {
+    children: React.ReactNode;
+    layout: 'table' | 'grid';
+    columns: Array<Column>;
+};
+declare const TableContext: React.Context<TableContext>;
+declare function TableProvider({ children, layout, columns }: TableProvider): JSX.Element;
+declare function useTable(): TableContext;
+export { TableProvider, useTable };

package/lib/components/Table/TableFooter.d.ts

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-declare const TableFooter: {
-    ({ children, className, ...other }: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & {
+    className?: string | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableFooter;

package/lib/components/Table/TableHead.d.ts

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-declare const TableHead: {
-    ({ children, className, ...other }: HTMLAttributes<HTMLTableSectionElement>): React.JSX.Element;
-    displayName: string;
-};
+import React from 'react';
+declare const TableHead: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & {
+    className?: string | undefined;
+} & React.RefAttributes<HTMLTableSectionElement>>;
 export default TableHead;

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

@@ -1,13 +1,12 @@
-import React, { ThHTMLAttributes } from 'react';
+import type { ColumnAlignment } from './Table';
+import React from 'react';
 type SortDirection = 'ascending' | 'descending' | 'none';
-interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+interface TableHeaderProps extends Omit<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, 'align'> {
     sortDirection?: SortDirection;
     onSort?: () => void;
     sortAscendingAnnouncement?: string;
     sortDescendingAnnouncement?: string;
+    align?: ColumnAlignment;
 }
-declare const TableHeader: {
-    ({ children, sortDirection, onSort, className, sortAscendingAnnouncement, sortDescendingAnnouncement, ...other }: TableHeaderProps): React.JSX.Element;
-    displayName: string;
-};
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableHeaderCellElement>>;
 export default TableHeader;

package/lib/components/Table/useTableGridStyles.d.ts

@@ -0,0 +1,10 @@
+import type { useTable } from './TableContext';
+import type { Column, ColumnAlignment } from './Table';
+interface useTableGridStylesParameters<E extends HTMLTableCellElement = HTMLTableCellElement> {
+    elementRef: React.RefObject<E | null>;
+    align?: ColumnAlignment;
+    layout: ReturnType<typeof useTable>['layout'];
+    columns: Array<Column>;
+}
+export default function useTableGridStyles<E extends HTMLTableCellElement>({ elementRef, align, layout, columns }: useTableGridStylesParameters<E>): React.CSSProperties;
+export {};

package/lib/index.js

@@ -2783,32 +2783,138 @@ var TagButton = React__default["default"].forwardRef(function (_a, ref) {
 });
 TagButton.displayName = 'TagButton';
 
-var Table = function (_a) {
-    var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
-    return (React__default["default"].createElement("table", tslib.__assign({ className: classNames__default["default"]('Table', variant === 'border' && 'Table--border', className) }, other), children));
-};
+var TableContext = React.createContext({
+    layout: 'table',
+    columns: []
+});
+function TableProvider(_a) {
+    var children = _a.children, layout = _a.layout, columns = _a.columns;
+    var Provider = TableContext.Provider;
+    var contextValue = React.useMemo(function () { return ({
+        layout: layout,
+        columns: columns
+    }); }, [layout, columns]);
+    return React__default["default"].createElement(Provider, { value: contextValue }, children);
+}
+function useTable() {
+    return React.useContext(TableContext);
+}
+
+var Table = React__default["default"].forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, variant = _a.variant, layout = _a.layout, _b = _a.columns, columnsProp = _b === void 0 ? [] : _b, style = _a.style, other = tslib.__rest(_a, ["children", "className", "variant", "layout", "columns", "style"]);
+    var isGridLayout = layout === 'grid';
+    var columns = React.useMemo(function () {
+        if (typeof columnsProp === 'number') {
+            return columnsProp > 0
+                ? Array(columnsProp).fill({ align: 'start' })
+                : [{ align: 'start' }];
+        }
+        return columnsProp;
+    }, [columnsProp]);
+    var styleTemplateColumns = React.useMemo(function () {
+        if (layout !== 'grid') {
+            return;
+        }
+        if (!columns) {
+            return 'auto';
+        }
+        return columns
+            .map(function (_a) {
+            var width = _a.width;
+            return width || 'auto';
+        })
+            .join(' ');
+    }, [layout, columns]);
+    var tableGridStyles = isGridLayout
+        ? {
+            '--table-grid-template-columns': styleTemplateColumns
+        }
+        : {};
+    return (React__default["default"].createElement("table", tslib.__assign({ ref: ref, style: tslib.__assign(tslib.__assign({}, tableGridStyles), style), className: classNames__default["default"]('Table', className, {
+            'Table--border': variant === 'border',
+            TableGrid: isGridLayout
+        }) }, other),
+        React__default["default"].createElement(TableProvider, { layout: isGridLayout ? 'grid' : 'table', columns: columns }, children)));
+});
 Table.displayName = 'Table';
 
-var TableBody = function (_a) {
+var TableBody = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("tbody", tslib.__assign({ className: classNames__default["default"]('TableBody', className) }, other), children));
-};
+    return (React__default["default"].createElement("tbody", tslib.__assign({ ref: ref, className: classNames__default["default"]('TableBody', className) }, other), children));
+});
 TableBody.displayName = 'TableBody';
 
-var TableCell = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("td", tslib.__assign({ className: classNames__default["default"]('TableCell', className) }, other), children));
-};
+function useTableGridStyles(_a) {
+    var elementRef = _a.elementRef, align = _a.align, layout = _a.layout, columns = _a.columns;
+    var isGridLayout = layout === 'grid';
+    var _b = tslib.__read(React.useState(align || 'start'), 2), columnAlignment = _b[0], setColumnAlignment = _b[1];
+    var _c = tslib.__read(React.useState(1), 2), gridColumnSpan = _c[0], setGridColumnSpan = _c[1];
+    var _d = tslib.__read(React.useState(1), 2), gridRowSpan = _d[0], setGridRowSpan = _d[1];
+    React.useEffect(function () {
+        var _a;
+        if (!isGridLayout) {
+            return;
+        }
+        var element = elementRef.current;
+        var column = typeof columns !== 'number' && columns[(_a = element === null || element === void 0 ? void 0 : element.cellIndex) !== null && _a !== void 0 ? _a : -1];
+        if (!column) {
+            setColumnAlignment(align || 'start');
+        }
+        else {
+            setColumnAlignment(column.align);
+        }
+        if (element === null || element === void 0 ? void 0 : element.colSpan) {
+            setGridColumnSpan(element.colSpan);
+        }
+        else {
+            setGridColumnSpan(1);
+        }
+        if (element === null || element === void 0 ? void 0 : element.rowSpan) {
+            setGridRowSpan(element.rowSpan);
+        }
+        else {
+            setGridRowSpan(1);
+        }
+    }, [isGridLayout, columns, align]);
+    return isGridLayout
+        ? {
+            textAlign: columnAlignment,
+            gridColumn: gridColumnSpan > 1 ? "span ".concat(gridColumnSpan) : undefined,
+            gridRow: gridRowSpan > 1 ? "span ".concat(gridRowSpan) : undefined
+        }
+        : {};
+}
+
+var TableCell = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, align = _a.align, style = _a.style, other = tslib.__rest(_a, ["children", "className", "align", "style"]);
+    var tableCellRef = useSharedRef(ref);
+    var _b = useTable(), layout = _b.layout, columns = _b.columns;
+    var tableGridStyles = useTableGridStyles({
+        elementRef: tableCellRef,
+        align: align,
+        columns: columns,
+        layout: layout
+    });
+    return (React__default["default"].createElement("td", tslib.__assign({ ref: tableCellRef, style: tslib.__assign(tslib.__assign({}, tableGridStyles), style), className: classNames__default["default"]('TableCell', className) }, other), children));
+});
 TableCell.displayName = 'TableCell';
 
-var TableHead = function (_a) {
+var TableHead = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("thead", tslib.__assign({ className: classNames__default["default"]('TableHead', className) }, other), children));
-};
+    return (React__default["default"].createElement("thead", tslib.__assign({ ref: ref, className: classNames__default["default"]('TableHead', className) }, other), children));
+});
 TableHead.displayName = 'TableHead';
 
-var TableHeader = function (_a) {
-    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncement, sortDescendingAnnouncement = _c === void 0 ? 'sorted descending' : _c, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement"]);
+var TableHeader = React.forwardRef(function (_a, ref) {
+    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncement, sortDescendingAnnouncement = _c === void 0 ? 'sorted descending' : _c, align = _a.align, style = _a.style, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement", "align", "style"]);
+    var tableHeaderRef = useSharedRef(ref);
+    var _d = useTable(), layout = _d.layout, columns = _d.columns;
+    var tableGridStyles = useTableGridStyles({
+        elementRef: tableHeaderRef,
+        align: align,
+        columns: columns,
+        layout: layout
+    });
     // When the sort direction changes, we want to announce the change in a live region
     // because changes to the sort value is not widely supported yet
     // see: https://a11ysupport.io/tech/aria/aria-sort_attribute
@@ -2817,15 +2923,15 @@ var TableHeader = function (_a) {
         : sortDirection === 'descending'
             ? sortDescendingAnnouncement
             : '';
-    return (React__default["default"].createElement("th", tslib.__assign({ "aria-sort": sortDirection, className: classNames__default["default"]('TableHeader', className, {
+    return (React__default["default"].createElement("th", tslib.__assign({ ref: tableHeaderRef, "aria-sort": sortDirection, className: classNames__default["default"]('TableHeader', className, {
             'TableHeader--sort-ascending': sortDirection === 'ascending',
             'TableHeader--sort-descending': sortDirection === 'descending'
-        }) }, other), !!onSort && !!sortDirection ? (React__default["default"].createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
+        }), style: tslib.__assign(tslib.__assign({}, tableGridStyles), style) }, other), !!onSort && !!sortDirection ? (React__default["default"].createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
         children,
         React__default["default"].createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default["default"].createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default["default"].createElement(Icon, { type: "table-sort-ascending" })) : (React__default["default"].createElement(Icon, { type: "table-sort-descending" }))),
         React__default["default"].createElement(Offscreen, null,
             React__default["default"].createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
-};
+});
 TableHeader.displayName = 'TableHeader';
 
 var TableRow = function (_a) {
@@ -2834,10 +2940,10 @@ var TableRow = function (_a) {
 };
 TableRow.displayName = 'TableRow';
 
-var TableFooter = function (_a) {
+var TableFooter = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("tfoot", tslib.__assign({ className: classNames__default["default"]('TableFooter', className) }, other), children));
-};
+    return (React__default["default"].createElement("tfoot", tslib.__assign({ ref: ref, className: classNames__default["default"]('TableFooter', className) }, other), children));
+});
 TableFooter.displayName = 'TableFooter';
 
 var Tab = React__default["default"].forwardRef(function (_a, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.11.0",
+  "version": "6.12.0-canary.98683670",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",