@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/table/data-table.d.ts

@@ -0,0 +1,55 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { TranslationId } from '../intl/translation-id';
+import { SortDirection, SortHanlder, SortOptions, TableColumnProperties } from './elements/types';
+export interface Column<T extends object> {
+    'data-test-selector'?: (column: Column<T>, item: T) => string;
+    header: {
+        isHidden?: boolean;
+        isNarrow?: boolean;
+        label: TranslationId;
+        render?: (column: Column<T>, data: T[]) => React.ReactNode;
+    } | {
+        Icon: FunctionComponent<{
+            className?: string;
+        }>;
+        label: TranslationId;
+    };
+    key: string;
+    props?: TableColumnProperties;
+    sort?: SortOptions;
+    value: {
+        action: string;
+    } | {
+        propertyName: keyof T;
+    } | {
+        render: (row: T, column: Column<T>, data: T[]) => React.ReactNode;
+    };
+}
+export interface Action<T extends object> {
+    'data-test-selector'?: string;
+    href?: (item: T) => string;
+    icon?: ReactNode;
+    isEnabled?: (item: T) => boolean;
+    isPrimary?: boolean;
+    key: string;
+    label: TranslationId;
+    onAction?: (item: T) => void;
+}
+export interface DataTableProps<T extends object> {
+    actions?: Action<T>[];
+    columns?: Column<T>[];
+    data: T[];
+    onSort?: SortHanlder;
+    row?: {
+        'data-test-selector'?: (item: T, index: number) => string;
+        onClick?: (item: T) => void;
+        selected?: (item: T, index: number) => boolean;
+    };
+}
+export declare function SortWrapper<T extends object>({ children, column, direction, onSort, }: {
+    children: ReactNode;
+    column: Column<T>;
+    direction?: SortDirection;
+    onSort: SortHanlder;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T extends object>({ actions, columns: _columns, data, onSort: _onSort, row: _row, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/table/data-table.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
+import { Button } from '../buttons/button/button.js';
+import { Link } from '../buttons/link/link.js';
+import { DataCard } from '../cards/data-card/data-card.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
+import { switchSortDirection } from './elements/switch-sort-direction.js';
+import { Table } from './elements/table.js';
+import { TableSortButton } from './elements/table-sort-button.js';
+import { TD } from './elements/td.js';
+import { TH } from './elements/th.js';
+import { TR } from './elements/tr.js';
+import styles from './data-table.module.css.js';
+
+function SortWrapper({ children, column, direction, onSort, }) {
+    if (!column.sort?.isEnabled)
+        return jsx(Fragment, { children: children });
+    return (jsx(TableSortButton, { columnName: column.header.label, direction: direction, onSort: onSort, sortKey: column.sort.columnName || column.key, children: children }));
+}
+function DataTable({ actions, columns: _columns, data, onSort: _onSort, row: _row, }) {
+    const isXl = useIsBreakpoint('lg');
+    const t = useFormattedMessage();
+    const [sortInfo, setSortInfo] = useState(() => {
+        const sortColumn = _columns?.find(column => column.sort?.isEnabled);
+        if (!sortColumn ||
+            !sortColumn.sort?.isEnabled ||
+            !sortColumn.sort.direction ||
+            sortColumn.sort.direction === 'NONE')
+            return null;
+        return {
+            direction: sortColumn.sort.direction,
+            key: sortColumn.key,
+        };
+    });
+    const columns = useMemo(() => {
+        if (_columns)
+            return _columns;
+        const firstItem = data[0];
+        if (!firstItem)
+            return [];
+        const propertyNames = Object.keys(firstItem);
+        return propertyNames.map(key => ({
+            header: { label: key },
+            key,
+            value: { propertyName: key },
+        }));
+    }, [_columns, data]);
+    const onSort = useCallback((key, direction) => {
+        const newDirection = switchSortDirection(direction);
+        setSortInfo({ direction: newDirection, key });
+        _onSort?.(key, newDirection);
+    }, [_onSort]);
+    const cssColumns = useMemo(() => {
+        if (!_columns?.some(column => column.props?.cssColumn))
+            return;
+        return _columns
+            .map(column => {
+            return column.props?.cssColumn || 'minmax(min-content, auto)';
+        })
+            .join(' ');
+    }, [_columns]);
+    if (data.length === 0 || columns.length === 0)
+        return null;
+    if (isXl)
+        return (jsx("div", { className: styles['data-table'], children: jsx(Table, { className: styles['content'], cssColumns: cssColumns, highlight: "col", stretch: true, thead: jsx(TR, { children: columns.map(column => (jsx(TH, { scope: "col", ...column.props, sortable: !!column.sort?.isEnabled, children: 'Icon' in column.header ? (jsx(column.header.Icon, { "aria-label": t(column.header.label), className: styles['th-icon'] })) : (!column.header.isHidden && (jsx(SortWrapper, { column: column, direction: sortInfo?.key === column.key ||
+                                (column.sort?.isEnabled &&
+                                    sortInfo?.key === column.sort.columnName)
+                                ? sortInfo?.direction
+                                : 'NONE', onSort: onSort, children: 'render' in column.header && column.header.render
+                                ? column.header.render(column, data)
+                                : t(column.header.label) }))) }, column.key))) }), children: data.map((item, index) => (jsx(TR
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                , { "data-test-selector": _row?.['data-test-selector']?.(item, index), onClick: _row?.onClick ? () => _row.onClick?.(item) : undefined, selected: _row?.selected ? _row.selected(item, index) : false, children: columns.map(column => {
+                        const actionKey = 'action' in column.value ? column.value.action : undefined;
+                        const action = actionKey
+                            ? actions?.find(action => action.key === actionKey)
+                            : undefined;
+                        if (actionKey && !action)
+                            throw new Error(`Action "${actionKey}" not found`);
+                        return 'render' in column.value ? (jsx(TD, { "data-key": column.key, children: column.value.render(item, column, data) }, column.key)) : 'propertyName' in column.value ? (jsx(TD, { "data-key": column.key, children: String(item[column.value.propertyName]) }, column.key)) : 'action' in column.value ? (jsx(TD, { "data-key": column.key, children: action && (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": action['data-test-selector'], href: action.href?.(item), isDisabled: action.isEnabled ? !action.isEnabled(item) : false, onClick: () => action.onAction?.(item), children: t(action.label) })) }, column.key)) : null;
+                    }) }, index))) }) }));
+    return (jsx("div", { className: styles['data-card-list'], children: data.map((item, index) => (jsx(DataCard
+        // eslint-disable-next-line @eslint-react/no-array-index-key
+        , { actions: actions?.map(action => (jsx(Button, { color: action.isPrimary ? 'primary' : 'secondary', "data-test-selector": action['data-test-selector'], href: action.href?.(item), isDisabled: action.isEnabled ? !action.isEnabled(item) : false, onClick: () => action.onAction?.(item), size: "sm", variant: action.isPrimary ? undefined : 'outline', children: t(action.label) }, action.key))), data: columns
+                .map(column => 'render' in column.value
+                ? {
+                    key: column.key,
+                    label: column.header.label,
+                    value: column.value.render(item, column, data),
+                }
+                : 'propertyName' in column.value
+                    ? {
+                        key: column.key,
+                        label: column.header.label,
+                        value: item[column.value.propertyName],
+                    }
+                    : null)
+                .filter(Boolean), "data-test-selector": _row?.['data-test-selector']?.(item, index) }, index))) }));
+}
+
+export { DataTable, SortWrapper };

package/dist/table/data-table.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"data-card-list":"data-table-module-7CcZR","data-table":"data-table-module-WFG32","th-icon":"data-table-module-9UZ8I"};
+
+export { styles as default };

package/dist/table/elements/col.d.ts

@@ -0,0 +1,7 @@
+export interface ColProps {
+    className?: string;
+    selected?: boolean;
+    span?: number;
+    sticky?: boolean;
+}
+export declare function Col({ className, selected, span, sticky }: ColProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/col.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './table.module.css.js';
+
+function Col({ className, selected, span, sticky }) {
+    return (jsx("col", { className: clsx(styles['col'], selected && styles['selected'], sticky && styles['sticky'], className), span: span }));
+}
+
+export { Col };

package/dist/table/elements/switch-sort-direction.d.ts

@@ -0,0 +1,2 @@
+import { SortDirection } from './types';
+export declare function switchSortDirection(direction: SortDirection | undefined): SortDirection;

package/dist/table/elements/switch-sort-direction.js

@@ -0,0 +1,11 @@
+function switchSortDirection(direction) {
+    if (direction === 'ASC')
+        return 'DESC';
+    if (direction === 'DESC')
+        return 'ASC';
+    if (direction === 'NONE')
+        return 'ASC';
+    return 'NONE';
+}
+
+export { switchSortDirection };

package/dist/table/elements/table-context.d.ts

@@ -0,0 +1,19 @@
+import { UUID } from '../../shared/utils/uuid';
+import { TableColumnProperties, THProps } from './types';
+export type OnColumnChangedHandler = (columnProps: TableColumnProperties) => void;
+export interface TableContextValue {
+    register: {
+        cell: (rowId: UUID, onColumnChanged: OnColumnChangedHandler) => {
+            deregister: VoidFunction;
+        };
+        column: (rowId: UUID, props: THProps) => {
+            deregister: VoidFunction;
+            update: OnColumnChangedHandler;
+        };
+        row: () => {
+            deregister: VoidFunction;
+            id: UUID;
+        };
+    };
+}
+export declare const TableContext: React.Context<TableContextValue | undefined>;

package/dist/table/elements/table-context.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const TableContext = createContext(undefined);
+
+export { TableContext };

package/dist/table/elements/table-provider.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { UUID } from '../../shared/utils/uuid';
+import { OnColumnChangedHandler } from './table-context';
+import { TableColumnProperties } from './types';
+export interface ColumnInfo {
+    id: UUID;
+    index: number | null;
+    props: TableColumnProperties;
+    rowId: UUID;
+}
+export interface CellInfo {
+    columnId: UUID | null;
+    id: UUID;
+    index: number | null;
+    onColumnChanged: OnColumnChangedHandler;
+}
+export interface RowInfo {
+    cells: CellInfo[];
+    id: UUID;
+}
+export declare function TableProvider({ children, onColumnsChanged, }: {
+    children: ReactNode | ((args: {
+        columnInfos: ColumnInfo[];
+    }) => ReactNode);
+    onColumnsChanged?: (columnInfos: ColumnInfo[]) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/table-provider.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import { voidFunction } from '../../shared/model/defaults.js';
+import { createUUID } from '../../shared/utils/uuid.js';
+import { TableContext } from './table-context.js';
+
+function TableProvider({ children, onColumnsChanged, }) {
+    const columnsRef = useRef([]);
+    const rowsRef = useRef([]);
+    const value = useMemo(() => ({
+        register: {
+            cell: (rowId, onColumnChanged) => {
+                const row = rowsRef.current.find(row => row.id === rowId);
+                if (!row)
+                    return { deregister: voidFunction };
+                const cell = {
+                    columnId: null,
+                    id: createUUID(),
+                    index: null,
+                    onColumnChanged,
+                };
+                cell.index = row.cells.push(cell);
+                const columnInfo = columnsRef.current.find(column => column.index === cell.index);
+                if (!columnInfo)
+                    throw new Error(`Column with index ${cell.index} does not exist.`);
+                cell.columnId = columnInfo.id;
+                onColumnChanged(columnInfo.props);
+                return {
+                    deregister: () => {
+                        row.cells = row.cells.filter(c => c.id !== cell.id);
+                    },
+                };
+            },
+            column: (rowId, props) => {
+                const column = {
+                    id: createUUID(),
+                    index: null,
+                    props,
+                    rowId,
+                };
+                column.index = columnsRef.current.push(column);
+                onColumnsChanged?.(columnsRef.current);
+                return {
+                    deregister: () => {
+                        columnsRef.current = columnsRef.current.filter(c => c.id !== column.id);
+                        onColumnsChanged?.(columnsRef.current);
+                    },
+                    update: (props) => {
+                        column.props = { ...column.props, ...props };
+                        rowsRef.current.forEach(row => row.cells.forEach(cell => {
+                            if (cell.columnId === column.id)
+                                cell.onColumnChanged(props);
+                        }));
+                    },
+                };
+            },
+            row: () => {
+                const row = { cells: [], id: createUUID() };
+                rowsRef.current.push(row);
+                return {
+                    deregister: () => {
+                        rowsRef.current = rowsRef.current.filter(r => r.id !== row.id);
+                    },
+                    id: row.id,
+                };
+            },
+        },
+    }), [onColumnsChanged]);
+    return (jsx(TableContext.Provider, { value: value, children: children instanceof Function
+            ? children({ columnInfos: columnsRef.current })
+            : children }));
+}
+
+export { TableProvider };

package/dist/table/elements/table-row-context.d.ts

@@ -0,0 +1,14 @@
+import { OnColumnChangedHandler } from './table-context';
+import { THProps } from './types';
+export interface TableRowContextValue {
+    register: {
+        cell: (onColumnChanged: OnColumnChangedHandler) => {
+            deregister: VoidFunction;
+        };
+        column: (props: THProps) => {
+            deregister: VoidFunction;
+            update: OnColumnChangedHandler;
+        };
+    };
+}
+export declare const TableRowContext: React.Context<TableRowContextValue>;

package/dist/table/elements/table-row-context.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext } from 'react';
+import { voidFunction } from '../../shared/model/defaults.js';
+
+const TableRowContext = createContext({
+    register: {
+        cell: () => ({
+            deregister: voidFunction,
+        }),
+        column: () => ({
+            deregister: voidFunction,
+            update: voidFunction,
+        }),
+    },
+});
+
+export { TableRowContext };

package/dist/table/elements/table-row-provider.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function TableRowProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/table-row-provider.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { TableRowContext } from './table-row-context.js';
+import { useTable } from './use-table.js';
+
+function TableRowProvider({ children }) {
+    const { register } = useTable();
+    const [{ deregister, id }] = useState(() => register.row());
+    useEffect(() => {
+        return deregister;
+    }, [deregister]);
+    const value = useMemo(() => ({
+        register: {
+            cell: onColumnChanged => {
+                return register.cell(id, onColumnChanged);
+            },
+            column: props => {
+                return register.column(id, props);
+            },
+        },
+    }), [id, register]);
+    return (jsx(TableRowContext.Provider, { value: value, children: children }));
+}
+
+export { TableRowProvider };

package/dist/table/elements/table-sort-button.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { TranslationId } from '../../intl/translation-id';
+import { SortDirection, SortHanlder, TableColumnAlignment } from './types';
+export interface TableSortButtonProps {
+    align?: TableColumnAlignment;
+    children: ReactNode;
+    columnName: TranslationId;
+    direction?: SortDirection;
+    onSort: SortHanlder;
+    sortKey: string;
+}
+export declare function TableSortButton({ align, children, columnName, direction, onSort, sortKey, }: TableSortButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/table-sort-button.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Icon } from '../../icon/icon.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import styles from './table.module.css.js';
+
+function TableSortButton({ align = 'start', children, columnName, direction = 'NONE', onSort, sortKey, }) {
+    const t = useFormattedMessage();
+    const isActive = direction !== 'NONE';
+    const ariaLabel = `
+    ${t('Sort by')} 
+    ${t(columnName)} 
+    ${isActive && `(${t('active')}, ${t(`sort.${direction}`)})`}
+  `;
+    return (jsxs("button", { "aria-label": ariaLabel, className: clsx(styles['table-sort-button'], isActive && styles['active'], styles[direction.toLowerCase()], styles[align]), "data-sort-direction": direction, onClick: () => onSort(sortKey, direction), type: "button", children: [jsx("span", { className: styles['label'], children: children }), isActive && (jsx(Icon, { className: styles['icon'], label: t(direction), name: "ArrowUpBold", size: "xxs" }))] }));
+}
+
+export { TableSortButton };

package/dist/table/elements/table.d.ts

@@ -0,0 +1,14 @@
+export interface TableProps {
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-rowcount'?: number;
+    children?: React.ReactNode;
+    className?: string;
+    cssColumns?: string;
+    'data-test-selector'?: string;
+    highlight?: 'row' | 'col' | 'both';
+    nowrap?: boolean;
+    stretch?: boolean;
+    thead?: React.ReactNode;
+}
+export declare function Table({ 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-rowcount': ariaRowCount, children, className, cssColumns, 'data-test-selector': dataTestSelector, highlight, nowrap, stretch, thead, }: TableProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/table.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback } from 'react';
+import clsx from 'clsx';
+import { Col } from './col.js';
+import { TableProvider } from './table-provider.js';
+import styles from './table.module.css.js';
+
+function Table({ 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, 'aria-rowcount': ariaRowCount, children, className, cssColumns, 'data-test-selector': dataTestSelector, highlight, nowrap, stretch, thead, }) {
+    const tableRef = useRef(null);
+    const [colgroup, setColgroup] = useState([]);
+    const onColumnsChanged = useCallback((columnInfos) => {
+        tableRef.current?.style.setProperty('--columns', columnInfos.length.toString());
+        setColgroup(columnInfos.map(col => {
+            return (jsx(Col, { selected: col.props.selected, span: col.props.colSpan, sticky: col.props.sticky }, col.id));
+        }));
+    }, []);
+    return (jsx("div", { className: clsx(styles['table-container'], className), children: jsx(TableProvider, { onColumnsChanged: onColumnsChanged, children: jsxs("table", { ref: tableRef, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-rowcount": ariaRowCount, className: clsx(styles['table'], stretch && styles.stretch, nowrap && styles['nowrap'], (highlight === 'row' || highlight === 'both') && styles['hl-row'], (highlight === 'col' || highlight === 'both') && styles['hl-col']), "data-test-selector": dataTestSelector, style: {
+                    '--columns': 0,
+                    '--grid-columns': cssColumns,
+                }, children: [colgroup && (jsx("colgroup", { className: styles['colgroup'], children: colgroup })), thead && jsx("thead", { className: styles['thead'], children: thead }), jsx("tbody", { className: styles['tbody'], children: children })] }) }) }));
+}
+
+export { Table };

package/dist/table/elements/table.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"table-container":"table-module-pevNG","table":"table-module-k47fT","colgroup":"table-module-1lgqE","col":"table-module-dISOo","selected":"table-module-WGz-I","sticky":"table-module-PQejy","th":"table-module-jRXnY","td":"table-module-wJwSq","nowrap":"table-module-h7qdo","narrow":"table-module-QHBAG","start":"table-module-EWdty","end":"table-module-yJD74","center":"table-module-XAdfy","tr":"table-module-Nisf1","hl-row":"table-module-3zZB6","clickable":"table-module-qRfjM","thead":"table-module-DK-wn","tbody":"table-module-tygZb","stretch":"table-module-YnmWV","caption":"table-module-skhNZ","hl-col":"table-module-JEp5f","sortable":"table-module-hyPmy","table-sort-button":"table-module-RtOV-","label":"table-module-ukG8s","icon":"table-module-QdiLJ","active":"table-module-gWy-a","asc":"table-module-9AwNp","desc":"table-module-aYS8r"};
+
+export { styles as default };

package/dist/table/elements/td.d.ts

@@ -0,0 +1,7 @@
+import { TableColumnProperties } from './types';
+export interface TDProps extends TableColumnProperties {
+    children: React.ReactNode;
+    className?: string;
+    'data-key'?: string;
+}
+export declare function TD(props: TDProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/td.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Truncated } from '../../text/truncated/truncated.js';
+import { useTD } from './use-td.js';
+import styles from './table.module.css.js';
+
+function TD(props) {
+    const { align = 'start', children, className, colSpan, isNarrow, nowrap, rowSpan, sticky, truncated, } = useTD(props);
+    return (jsx("td", { className: clsx(styles['td'], styles[align], nowrap && styles['nowrap'], sticky && styles['sticky'], isNarrow && styles['narrow'], className), colSpan: colSpan, "data-key": props['data-key'], rowSpan: rowSpan, children: truncated ? (jsx(Truncated, { lines: typeof truncated === 'number' ? truncated : undefined, children: children })) : (children) }));
+}
+
+export { TD };

package/dist/table/elements/th.d.ts

@@ -0,0 +1,2 @@
+import { THProps } from './types';
+export declare function TH(props: THProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/th.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useTH } from './use-th.js';
+import styles from './table.module.css.js';
+
+function TH(props) {
+    const { align = 'start', 'aria-sort': ariaSort, children, className, colSpan, isNarrow, nowrap, rowSpan, scope, sortable, sticky, } = useTH(props);
+    return (jsx("th", { "aria-sort": ariaSort, className: clsx(styles['th'], styles[align], nowrap && styles['nowrap'], sticky && styles['sticky'], sortable && styles['sortable'], isNarrow && styles['narrow'], className), colSpan: colSpan, rowSpan: rowSpan, scope: scope, children: children }));
+}
+
+export { TH };

package/dist/table/elements/tr.d.ts

@@ -0,0 +1,2 @@
+import { TRProps } from './types';
+export declare function TR({ children, className, 'data-test-selector': dataTestSelector, onClick, selected, }: TRProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/tr.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { TableRowProvider } from './table-row-provider.js';
+import styles from './table.module.css.js';
+
+function TR({ children, className, 'data-test-selector': dataTestSelector, onClick, selected, }) {
+    return (jsx(TableRowProvider, { children: jsx("tr", { "aria-selected": selected, className: clsx(styles['tr'], selected && styles['selected'], Boolean(onClick) && styles['clickable'], className), "data-test-selector": dataTestSelector, onClick: onClick, children: children }) }));
+}
+
+export { TR };

package/dist/table/elements/types.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+export type SortDirection = 'ASC' | 'DESC' | 'NONE';
+export type TableColumnAlignment = 'start' | 'center' | 'end';
+export type SortHanlder = (key: string, direction: SortDirection) => void;
+export interface SortOptionsEnabled {
+    columnName?: string;
+    direction?: SortDirection;
+    isEnabled: true;
+}
+export interface SortOptionsDisabled {
+    isEnabled: false;
+}
+export type SortOptions = SortOptionsEnabled | SortOptionsDisabled;
+export interface TableColumnProperties {
+    align?: TableColumnAlignment;
+    colSpan?: number;
+    cssColumn?: string;
+    'data-test-selector'?: string;
+    isNarrow?: boolean;
+    nowrap?: boolean;
+    rowSpan?: number;
+    selected?: boolean;
+    sticky?: boolean;
+    truncated?: boolean | number;
+}
+export interface THProps extends TableColumnProperties {
+    'aria-sort'?: 'ascending' | 'descending' | 'none' | 'other';
+    children: ReactNode;
+    className?: string;
+    scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+    sortable?: boolean;
+}
+export interface TRProps {
+    children: ReactNode;
+    className?: string;
+    'data-test-selector'?: string;
+    onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+    selected?: boolean;
+}

package/dist/table/elements/use-table-row.d.ts

@@ -0,0 +1 @@
+export declare function useTableRow(): import("./table-row-context").TableRowContextValue;

package/dist/table/elements/use-table-row.js

@@ -0,0 +1,9 @@
+"use client";
+import { useContext } from 'react';
+import { TableRowContext } from './table-row-context.js';
+
+function useTableRow() {
+    return useContext(TableRowContext);
+}
+
+export { useTableRow };

package/dist/table/elements/use-table.d.ts

@@ -0,0 +1,2 @@
+import { TableContextValue } from './table-context';
+export declare function useTable(): TableContextValue;

package/dist/table/elements/use-table.js

@@ -0,0 +1,12 @@
+"use client";
+import { useContext } from 'react';
+import { TableContext } from './table-context.js';
+
+function useTable() {
+    const context = useContext(TableContext);
+    if (!context)
+        throw new Error('useTable must be used within a TableProvider');
+    return context;
+}
+
+export { useTable };

package/dist/table/elements/use-td.d.ts

@@ -0,0 +1,2 @@
+import { TableColumnProperties } from './types';
+export declare function useTD<TProps extends TableColumnProperties>(props: TProps): TProps;

package/dist/table/elements/use-td.js

@@ -0,0 +1,28 @@
+"use client";
+import { useState, useCallback, useEffect } from 'react';
+import { useTableRow } from './use-table-row.js';
+
+function useTD(props) {
+    const [columnProps, setColumnProps] = useState(null);
+    const { register } = useTableRow();
+    const onColumnChanged = useCallback((columnProps) => {
+        setColumnProps(columnProps);
+    }, []);
+    useEffect(() => {
+        const { deregister } = register.cell(onColumnChanged);
+        return deregister;
+    }, [onColumnChanged, register]);
+    return {
+        ...props,
+        align: columnProps?.align ?? props.align ?? 'start',
+        colSpan: columnProps?.colSpan ?? props.colSpan ?? 1,
+        isNarrow: columnProps?.isNarrow ?? props.isNarrow ?? false,
+        nowrap: columnProps?.nowrap ?? props.nowrap ?? false,
+        rowSpan: columnProps?.rowSpan ?? props.rowSpan ?? 1,
+        selected: columnProps?.selected ?? props.selected ?? false,
+        sticky: columnProps?.sticky ?? props.sticky ?? false,
+        truncated: columnProps?.truncated ?? props.truncated ?? false,
+    };
+}
+
+export { useTD };