@sonic-equipment/ui 188.0.0 → 189.0.0

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

@@ -1,19 +1,46 @@
+import { FunctionComponent, ReactNode } from 'react';
 import { TranslationId } from '../intl/translation-id';
-import { TableColumnProperties } from './elements/table-column-properties';
-export interface ColumnBase {
+import { SortDirection, SortHanlder, SortOptions, TableColumnProperties } from './elements/types';
+export interface Column<T extends object> {
+    header: {
+        isHidden?: boolean;
+        label: TranslationId;
+        render?: (column: Column<T>, data: T[]) => React.ReactNode;
+    } | {
+        Icon: FunctionComponent<{
+            className?: string;
+        }>;
+        label: TranslationId;
+    };
     key: string;
-    label: TranslationId;
     props?: TableColumnProperties;
+    sort?: SortOptions;
+    value: {
+        action: string;
+    } | {
+        propertyName: keyof T;
+    } | {
+        render: (row: T, column: Column<T>, data: T[]) => React.ReactNode;
+    };
 }
-export interface ColumnRender<T extends object> extends ColumnBase {
-    render: (row: T, column: Column<T>, data: T[]) => React.ReactNode;
-}
-export interface ColumnProperty<T extends object> extends ColumnBase {
-    propertyName: keyof T;
+export interface Action<T extends object> {
+    icon?: ReactNode;
+    isEnabled?: (item: T) => boolean;
+    isPrimary?: boolean;
+    key: string;
+    label: TranslationId;
+    onAction: (item: T) => void;
 }
-export type Column<T extends object> = ColumnProperty<T> | ColumnRender<T>;
 export interface DataTableProps<T extends object> {
+    actions?: Action<T>[];
     columns?: Column<T>[];
     data: T[];
+    onSort?: SortHanlder;
 }
-export declare function DataTable<T extends object>({ columns: _columns, data, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element | null;
+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, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/table/data-table.js

@@ -1,16 +1,39 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+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 DataTable({ columns: _columns, data, }) {
+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, }) {
     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;
@@ -19,30 +42,62 @@ function DataTable({ columns: _columns, data, }) {
             return [];
         const propertyNames = Object.keys(firstItem);
         return propertyNames.map(key => ({
+            header: { label: key },
             key,
-            label: key,
-            propertyName: 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(Table, { thead: jsx(TR, { children: columns.map(column => (jsx(TH, { ...column.props, children: column.label }, column.key))) }), children: data.map((item, index) => (
-            // eslint-disable-next-line @eslint-react/no-array-index-key
-            jsx(TR, { children: columns.map(column => 'render' in column ? (jsx(TD, { children: column.render(item, column, data) }, column.key)) : (jsx(TD, { children: String(item[column.propertyName]) }, column.key))) }, index))) }));
+        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, { ...column.props, sortable: !!column.sort?.isEnabled, children: 'Icon' in column.header ? (jsx(column.header.Icon, { 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) => (
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                jsx(TR, { 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, { children: column.value.render(item, column, data) }, column.key)) : 'propertyName' in column.value ? (jsx(TD, { children: String(item[column.value.propertyName]) }, column.key)) : 'action' in column.value ? (jsx(TD, { children: action && (jsx(Link, { hasUnderline: true, color: "secondary", 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
-        , { data: columns.map(column => 'render' in column
+        , { actions: actions?.map(action => (jsx(Button, { color: action.isPrimary ? 'primary' : 'secondary', 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.label,
-                    value: column.render(item, column, data),
+                    label: column.header.label,
+                    value: column.value.render(item, column, data),
                 }
-                : {
-                    key: column.key,
-                    label: column.label,
-                    value: item[column.propertyName],
-                }) }, index))) }));
+                : 'propertyName' in column.value
+                    ? {
+                        key: column.key,
+                        label: column.header.label,
+                        value: item[column.value.propertyName],
+                    }
+                    : null)
+                .filter(Boolean) }, index))) }));
 }
 
-export { DataTable };
+export { DataTable, SortWrapper };

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

@@ -1,3 +1,3 @@
-var styles = {"data-card-list":"data-table-module-7CcZR"};
+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/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

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

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

@@ -1,21 +1,6 @@
 "use client";
 import { createContext } from 'react';
-import { voidFunction } from '../../shared/model/defaults.js';
 
-const TableContext = createContext({
-    register: {
-        cell: () => ({
-            deregister: voidFunction,
-        }),
-        column: () => ({
-            deregister: voidFunction,
-            update: voidFunction,
-        }),
-        row: () => ({
-            deregister: voidFunction,
-            index: -1,
-        }),
-    },
-});
+const TableContext = createContext(undefined);
 
 export { TableContext };

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

@@ -1,18 +1,19 @@
 import { ReactNode } from 'react';
-import { TableColumnProperties } from './table-column-properties';
+import { UUID } from '../../shared/utils/uuid';
 import { OnColumnChangedHandler } from './table-context';
+import { TableColumnProperties } from './types';
 export interface ColumnInfo {
-    index: number;
+    id: UUID;
     props: TableColumnProperties;
-    rowIndex: number;
+    rowId: UUID;
 }
 export interface CellInfo {
-    index: number;
+    id: UUID;
     onColumnChanged: OnColumnChangedHandler;
 }
 export interface RowInfo {
     cells: CellInfo[];
-    index: number;
+    id: UUID;
 }
 export declare function TableProvider({ children, onColumnsChanged, }: {
     children: ReactNode | ((args: {

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

@@ -1,6 +1,8 @@
 "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, }) {
@@ -8,46 +10,50 @@ function TableProvider({ children, onColumnsChanged, }) {
     const rowsRef = useRef([]);
     const value = useMemo(() => ({
         register: {
-            cell: (rowIndex, onColumnChanged) => {
-                const row = rowsRef.current[rowIndex];
+            cell: (rowId, onColumnChanged) => {
+                const row = rowsRef.current.find(row => row.id === rowId);
                 if (!row)
-                    throw new Error(`Row with index ${rowIndex} does not exist.`);
-                const cell = { index: -1, onColumnChanged };
-                cell.index = row.cells.push(cell) - 1;
+                    return { deregister: voidFunction }; // throw new Error(`Row with id ${id} does not exist.`)
+                const cell = { id: createUUID(), onColumnChanged };
+                row.cells.push(cell);
                 return {
                     deregister: () => {
-                        row.cells = row.cells.filter(c => c.index !== cell.index);
+                        row.cells = row.cells.filter(c => c.id !== cell.id);
                     },
                 };
             },
-            column: (rowIndex, props) => {
-                const column = { index: -1, props, rowIndex };
-                column.index = columnsRef.current.push(column) - 1;
+            column: (rowId, props) => {
+                const column = {
+                    id: createUUID(),
+                    props,
+                    rowId,
+                };
+                columnsRef.current.push(column);
                 onColumnsChanged?.(columnsRef.current);
                 return {
                     deregister: () => {
-                        columnsRef.current = columnsRef.current.filter(c => c.index !== column.index);
+                        columnsRef.current = columnsRef.current.filter(c => c.id !== column.id);
                         onColumnsChanged?.(columnsRef.current);
                     },
                     update: (props) => {
-                        const updatedColumn = columnsRef.current.find(c => c.index === column.index);
+                        const updatedColumn = columnsRef.current.find(c => c.id === column.id);
                         if (!updatedColumn)
-                            throw new Error(`Column with index ${column.index} does not exist.`);
+                            throw new Error(`Column with id ${column.id} does not exist.`);
                         updatedColumn.props = props;
                         rowsRef.current.forEach(row => row.cells
-                            .find(cell => cell.index === column.index)
+                            .find(cell => cell.id === column.id)
                             ?.onColumnChanged(props));
                     },
                 };
             },
             row: () => {
-                const row = { cells: [], index: -1 };
-                row.index = rowsRef.current.push(row) - 1;
+                const row = { cells: [], id: createUUID() };
+                rowsRef.current.push(row);
                 return {
                     deregister: () => {
-                        rowsRef.current = rowsRef.current.filter(r => r.index !== row.index);
+                        rowsRef.current = rowsRef.current.filter(r => r.id !== row.id);
                     },
-                    index: row.index,
+                    id: row.id,
                 };
             },
         },

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

@@ -1,11 +1,11 @@
-import { TableColumnProperties } from './table-column-properties';
 import { OnColumnChangedHandler } from './table-context';
+import { THProps } from './types';
 export interface TableRowContextValue {
     register: {
         cell: (onColumnChanged: OnColumnChangedHandler) => {
             deregister: VoidFunction;
         };
-        column: (props: TableColumnProperties) => {
+        column: (props: THProps) => {
             deregister: VoidFunction;
             update: OnColumnChangedHandler;
         };

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

@@ -6,20 +6,20 @@ import { useTable } from './use-table.js';
 
 function TableRowProvider({ children }) {
     const { register } = useTable();
-    const [{ deregister, index }] = useState(() => register.row());
+    const [{ deregister, id }] = useState(() => register.row());
     useEffect(() => {
         return deregister;
     }, [deregister]);
     const value = useMemo(() => ({
         register: {
             cell: onColumnChanged => {
-                return register.cell(index, onColumnChanged);
+                return register.cell(id, onColumnChanged);
             },
             column: props => {
-                return register.column(index, props);
+                return register.column(id, props);
             },
         },
-    }), [index, register]);
+    }), [id, register]);
     return (jsx(TableRowContext.Provider, { value: value, children: children }));
 }
 

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

@@ -1,11 +1,12 @@
-import { TableColumnAlignment } from './table-column-properties';
-type SortDirection = 'ascending' | 'descending';
+import { ReactNode } from 'react';
+import { TranslationId } from '../../intl/translation-id';
+import { SortDirection, SortHanlder, TableColumnAlignment } from './types';
 export interface TableSortButtonProps {
-    active?: boolean;
     align?: TableColumnAlignment;
-    children: string;
+    children: ReactNode;
+    columnName: TranslationId;
     direction?: SortDirection;
-    onClick: (direction: SortDirection) => void;
+    onSort: SortHanlder;
+    sortKey: string;
 }
-export declare function TableSortButton({ active, align, children, direction, onClick, }: TableSortButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};
+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

@@ -5,14 +5,15 @@ import { GlyphsChevronsBoldUpIcon } from '../../icons/glyph/glyphs-chevrons-bold
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import styles from './table.module.css.js';
 
-function TableSortButton({ active, align = 'start', children, direction = 'descending', onClick, }) {
+function TableSortButton({ align = 'start', children, columnName, direction = 'NONE', onSort, sortKey, }) {
     const t = useFormattedMessage();
+    const isActive = direction !== 'NONE';
     const ariaLabel = `
     ${t('Sort by')} 
-    ${children} 
-    ${active && `(${t('active')}, ${t(direction)})`}
+    ${t(columnName)} 
+    ${isActive && `(${t('active')}, ${t(direction)})`}
   `;
-    return (jsxs("button", { "aria-label": ariaLabel, className: clsx(styles['table-sort-button'], active && styles['active'], styles[direction], styles[align]), onClick: () => onClick(direction), type: "button", children: [jsx("span", { className: styles['label'], children: children }), jsx(GlyphsChevronsBoldUpIcon, { "aria-label": t(direction), className: styles['icon'] })] }));
+    return (jsxs("button", { "aria-label": ariaLabel, className: clsx(styles['table-sort-button'], isActive && styles['active'], styles[direction.toLowerCase()], styles[align]), onClick: () => onSort(sortKey, direction), type: "button", children: [jsx("span", { className: styles['label'], children: children }), isActive && (jsx(GlyphsChevronsBoldUpIcon, { "aria-label": t(direction), className: styles['icon'] }))] }));
 }
 
 export { TableSortButton };

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

@@ -2,7 +2,7 @@ export interface TableProps {
     'aria-describedby'?: string;
     'aria-label'?: string;
     'aria-rowcount'?: number;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     className?: string;
     cssColumns?: string;
     'data-test-selector'?: string;

package/dist/table/elements/table.js

@@ -12,10 +12,10 @@ function Table({ 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, '
     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.index));
+            return (jsx(Col, { selected: col.props.selected, span: col.props.colSpan, sticky: col.props.sticky }, col.id));
         }));
     }, []);
-    return (jsx("div", { className: styles['table-container'], 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'], className), "data-test-selector": dataTestSelector, style: {
+    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 })] }) }) }));

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

@@ -1,3 +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","start":"table-module-EWdty","end":"table-module-yJD74","center":"table-module-XAdfy","nowrap":"table-module-h7qdo","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","table-sort-button":"table-module-RtOV-","label":"table-module-ukG8s","icon":"table-module-QdiLJ","active":"table-module-gWy-a","ascending":"table-module-SjJ57","descending":"table-module--p8TF"};
+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","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

@@ -1,4 +1,4 @@
-import { TableColumnProperties } from './table-column-properties';
+import { TableColumnProperties } from './types';
 export interface TDProps extends TableColumnProperties {
     children: React.ReactNode;
     className?: string;

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

@@ -1,8 +1,2 @@
-import { TableColumnProperties } from './table-column-properties';
-export interface THProps extends TableColumnProperties {
-    'aria-sort'?: 'ascending' | 'descending' | 'none' | 'other';
-    children: React.ReactNode;
-    className?: string;
-    scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
-}
+import { THProps } from './types';
 export declare function TH(props: THProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/th.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { Truncated } from '../../text/truncated/truncated.js';
 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, nowrap, rowSpan, scope, sticky, truncated, } = useTH(props);
-    return (jsx("th", { "aria-sort": ariaSort, className: clsx(styles['th'], styles[align], nowrap && styles['nowrap'], sticky && styles['sticky'], className), colSpan: colSpan, rowSpan: rowSpan, scope: scope, children: truncated ? (jsx(Truncated, { lines: typeof truncated === 'number' ? truncated : undefined, children: children })) : (children) }));
+    const { align = 'start', 'aria-sort': ariaSort, children, className, colSpan, 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'], className), colSpan: colSpan, rowSpan: rowSpan, scope: scope, children: children }));
 }
 
 export { TH };

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

@@ -1,8 +1,2 @@
-import { ReactNode } from 'react';
-import { TableColumnProperties } from './table-column-properties';
-export interface TRProps extends TableColumnProperties {
-    children: ReactNode;
-    className?: string;
-    onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
-}
-export declare function TR(props: TRProps): import("react/jsx-runtime").JSX.Element;
+import { TRProps } from './types';
+export declare function TR({ children, className, onClick, selected }: TRProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/tr.js

@@ -2,11 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { TableRowProvider } from './table-row-provider.js';
-import { useTR } from './use-tr.js';
 import styles from './table.module.css.js';
 
-function TR(props) {
-    const { children, className, onClick, selected } = useTR(props);
+function TR({ children, className, onClick, selected }) {
     return (jsx(TableRowProvider, { children: jsx("tr", { "aria-selected": selected, className: clsx(styles['tr'], selected && styles['selected'], Boolean(onClick) && styles['clickable'], className), onClick: onClick, children: children }) }));
 }
 

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

@@ -0,0 +1,36 @@
+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;
+    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;
+    onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+    selected?: boolean;
+}

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

@@ -3,10 +3,8 @@ import { TableContext } from './table-context.js';
 
 function useTable() {
     const context = useContext(TableContext);
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (!context) {
+    if (!context)
         throw new Error('useTable must be used within a TableProvider');
-    }
     return context;
 }
 

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

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

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

@@ -1,2 +1,2 @@
-import { TableColumnProperties } from './table-column-properties';
-export declare function useTH<TProps extends TableColumnProperties>(props: TProps): TProps;
+import { THProps } from './types';
+export declare function useTH<TProps extends THProps>(props: TProps): TProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "188.0.0",
+  "version": "189.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/shared/hooks/use-scroll-to.js

@@ -1,19 +0,0 @@
-const scrollToTop = (scrollOptions) => {
-    window?.scrollTo({
-        behavior: scrollOptions?.behavior || 'smooth',
-        top: 0,
-    });
-};
-const scrollTo = (ref, scrollOptions) => () => {
-    if (!ref.current)
-        return;
-    const rect = ref.current.getBoundingClientRect();
-    const scrollPadding = scrollOptions?.scrollPadding || 12;
-    const scrollY = (window?.scrollY || 0) + rect.top - scrollPadding;
-    window?.scrollTo({
-        behavior: scrollOptions?.behavior || 'smooth',
-        top: scrollY,
-    });
-};
-
-export { scrollTo, scrollToTop };