@sonic-equipment/ui 181.0.0 → 182.0.0

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

@@ -0,0 +1,59 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import { TableContext } from './table-context.js';
+
+function TableProvider({ children, onColumnsChanged, }) {
+    const columnsRef = useRef([]);
+    const rowsRef = useRef([]);
+    const value = useMemo(() => ({
+        register: {
+            cell: (rowIndex, onColumnChanged) => {
+                const row = rowsRef.current[rowIndex];
+                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: () => {
+                        row.cells = row.cells.filter(c => c.index !== cell.index);
+                    },
+                };
+            },
+            column: (rowIndex, props) => {
+                const column = { index: -1, props, rowIndex };
+                column.index = columnsRef.current.push(column) - 1;
+                onColumnsChanged?.(columnsRef.current);
+                return {
+                    deregister: () => {
+                        columnsRef.current = columnsRef.current.filter(c => c.index !== column.index);
+                        onColumnsChanged?.(columnsRef.current);
+                    },
+                    update: (props) => {
+                        const updatedColumn = columnsRef.current.find(c => c.index === column.index);
+                        if (!updatedColumn)
+                            throw new Error(`Column with index ${column.index} does not exist.`);
+                        updatedColumn.props = props;
+                        rowsRef.current.forEach(row => row.cells
+                            .find(cell => cell.index === column.index)
+                            ?.onColumnChanged(props));
+                    },
+                };
+            },
+            row: () => {
+                const row = { cells: [], index: -1 };
+                row.index = rowsRef.current.push(row) - 1;
+                return {
+                    deregister: () => {
+                        rowsRef.current = rowsRef.current.filter(r => r.index !== row.index);
+                    },
+                    index: row.index,
+                };
+            },
+        },
+    }), [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 { TableColumnProperties } from './table-column-properties';
+import { OnColumnChangedHandler } from './table-context';
+export interface TableRowContextValue {
+    register: {
+        cell: (onColumnChanged: OnColumnChangedHandler) => {
+            deregister: VoidFunction;
+        };
+        column: (props: TableColumnProperties) => {
+            deregister: VoidFunction;
+            update: OnColumnChangedHandler;
+        };
+    };
+}
+export declare const TableRowContext: React.Context<TableRowContextValue>;

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

@@ -0,0 +1,16 @@
+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,25 @@
+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, index }] = useState(() => register.row());
+    useEffect(() => {
+        return deregister;
+    }, [deregister]);
+    const value = useMemo(() => ({
+        register: {
+            cell: onColumnChanged => {
+                return register.cell(index, onColumnChanged);
+            },
+            column: props => {
+                return register.column(index, props);
+            },
+        },
+    }), [index, register]);
+    return (jsx(TableRowContext.Provider, { value: value, children: children }));
+}
+
+export { TableRowProvider };

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

@@ -0,0 +1,11 @@
+import { TableColumnAlignment } from './table-column-properties';
+type SortDirection = 'ascending' | 'descending';
+export interface TableSortButtonProps {
+    active?: boolean;
+    align?: TableColumnAlignment;
+    children: string;
+    direction?: SortDirection;
+    onClick: (direction: SortDirection) => void;
+}
+export declare function TableSortButton({ active, align, children, direction, onClick, }: TableSortButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { GlyphsChevronsBoldUpIcon } from '../../icons/glyph/glyphs-chevrons-bold-up-icon.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import styles from './table.module.css.js';
+
+function TableSortButton({ active, align = 'start', children, direction = 'descending', onClick, }) {
+    const t = useFormattedMessage();
+    const ariaLabel = `
+    ${t('Sort by')} 
+    ${children} 
+    ${active && `(${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'] })] }));
+}
+
+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,23 @@
+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.index));
+        }));
+    }, []);
+    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: {
+                    '--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","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"};
+
+export { styles as default };

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

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

package/dist/table/elements/td.js

@@ -0,0 +1,12 @@
+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, nowrap, rowSpan, sticky, truncated, } = useTD(props);
+    return (jsx("td", { className: clsx(styles['td'], styles[align], nowrap && styles['nowrap'], sticky && styles['sticky'], className), colSpan: colSpan, 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,8 @@
+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';
+}
+export declare function TH(props: THProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/th.js

@@ -0,0 +1,12 @@
+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) }));
+}
+
+export { TH };

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

@@ -0,0 +1,8 @@
+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;

package/dist/table/elements/tr.js

@@ -0,0 +1,12 @@
+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);
+    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 }) }));
+}
+
+export { TR };

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,8 @@
+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,13 @@
+import { useContext } from 'react';
+import { TableContext } from './table-context.js';
+
+function useTable() {
+    const context = useContext(TableContext);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    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 './table-column-properties';
+export declare function useTD<TProps extends TableColumnProperties>(props: TProps): TProps;

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

@@ -0,0 +1,26 @@
+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);
+    }, []);
+    const [{ deregister }] = useState(register.cell(onColumnChanged));
+    useEffect(() => {
+        return deregister;
+    }, [deregister]);
+    return {
+        ...props,
+        align: columnProps?.align ?? props.align ?? 'start',
+        colSpan: columnProps?.colSpan ?? props.colSpan ?? 1,
+        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 };

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

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

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

@@ -0,0 +1,22 @@
+import { useRef, useEffect } from 'react';
+import { useTableRow } from './use-table-row.js';
+
+function useTH(props) {
+    const { register } = useTableRow();
+    const updateRef = useRef();
+    useEffect(() => {
+        const { deregister, update } = register.column(props);
+        updateRef.current = update;
+        return () => {
+            deregister();
+            updateRef.current = undefined;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [register]);
+    useEffect(() => {
+        updateRef.current?.(props);
+    }, [props]);
+    return props;
+}
+
+export { useTH };

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

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

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

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+import { useTableRow } from './use-table-row.js';
+
+function useTR(props) {
+    const { register } = useTableRow();
+    const [{ deregister, update }] = useState(register.column(props));
+    useEffect(() => {
+        return deregister;
+    }, [deregister]);
+    useEffect(() => {
+        update(props);
+    }, [props, update]);
+    return props;
+}
+
+export { useTR };

package/dist/text/truncated/truncated.d.ts

@@ -0,0 +1,6 @@
+export interface TruncatedProps {
+    active?: boolean;
+    children: React.ReactNode;
+    lines?: number;
+}
+export declare function Truncated({ active, children, lines, }: TruncatedProps): import("react/jsx-runtime").JSX.Element;

package/dist/text/truncated/truncated.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './truncated.module.css.js';
+
+function Truncated({ active = true, children, lines = 1, }) {
+    return (jsx("div", { className: clsx(styles['truncated'], active && styles['active']), style: { '--lines': lines }, title: children?.toString(), children: children }));
+}
+
+export { Truncated };

package/dist/text/truncated/truncated.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"truncated":"truncated-module-bwo1A","active":"truncated-module-JHMUL"};
+
+export { styles as default };

package/package.json

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