@sonic-equipment/ui 181.0.0 → 182.0.0

package/dist/styles.css

@@ -2671,19 +2671,28 @@ html {
     --color: var(--color-brand-red);
   }
 
+.data-card-module-OMXIh {
+  container-type: inline-size;
+}
+
 .data-card-module-DMbBO {
   margin-bottom: var(--space-12);
 }
 
 .data-card-module-24uin {
   position: relative;
-  width: 100%;
-  min-height: 150px;
   border: 1px solid var(--color-brand-medium-gray);
   border-radius: var(--border-radius-32);
-  container-type: inline-size;
+  inline-size: 100%;
+  min-block-size: 150px;
+  min-inline-size: 250px;
 }
 
+.data-card-module-24uin,
+  .data-card-module-24uin * {
+    box-sizing: border-box;
+  }
+
 .data-card-module-24uin .data-card-module-j-RFT {
     position: absolute;
     display: grid;
@@ -2702,6 +2711,7 @@ html {
 .data-card-module-24uin .data-card-module-FVD44 {
     position: absolute;
     display: grid;
+    padding: 0;
     inset: 0;
     place-content: center;
   }
@@ -2710,7 +2720,7 @@ html {
     padding: var(--space-32) var(--space-16) var(--space-16) var(--space-32);
   }
 
-@container (max-width: 414px) {
+@container (max-width: 314px) {
 
 .data-card-module-24uin .data-card-module-ZefqY {
       padding: var(--space-20) var(--space-16) var(--space-16)
@@ -2721,59 +2731,81 @@ html {
       visibility: hidden;
     }
 
-.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- {
-      display: grid;
-      margin: 0;
-      gap: var(--space-16);
-      grid-template-areas: 'key value';
-      grid-template-columns:
-        minmax(min-content, max-content)
-        minmax(min-content, 1fr);
-      line-height: 1;
+.data-card-module-24uin .data-card-module-EDbE- {
+    display: grid;
+    margin: 0;
+    gap: var(--space-16);
+    grid-template-columns:
+      minmax(min-content, max-content)
+      minmax(min-content, 1fr);
+    line-height: 1;
+  }
+
+@container (max-width: 314px) {
+
+.data-card-module-24uin .data-card-module-EDbE- {
+      gap: 0;
+      grid-template-areas: unset;
+      grid-template-columns: 1fr;
+      line-height: 1.5
+  }
     }
 
-@container (max-width: 414px) {
+.data-card-module-24uin .data-card-module-EDbE- .data-card-module-CjTal {
+      display: block;
+      grid-column: span 2;
+      text-align: center;
+    }
 
-.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- {
-        grid-template-areas: unset;
-        grid-template-columns: 1fr
+.data-card-module-24uin .data-card-module-EDbE- .data-card-module-QixKJ:not(:last-child) {
+      margin-bottom: var(--space-8);
     }
-      }
 
-.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-FAgmN {
-        margin: 0;
-        font-weight: var(--font-weight-bold);
-        grid-template-areas: 'key';
-        text-align: right;
-      }
+.data-card-module-24uin .data-card-module-EDbE- .data-card-module-FAgmN {
+      margin: 0;
+      font-weight: var(--font-weight-bold);
+      text-align: right;
+    }
 
-@container (max-width: 414px) {
+@container (max-width: 314px) {
 
-.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-FAgmN {
-          text-align: left
+.data-card-module-24uin .data-card-module-EDbE- .data-card-module-FAgmN {
+        text-align: left
+    }
       }
-        }
 
-.data-card-module-24uin .data-card-module-ZefqY .data-card-module-EDbE- .data-card-module-fcSbu {
-        margin: 0;
-        font-weight: var(--font-weight-normal);
-        grid-template-areas: 'value';
-      }
+.data-card-module-24uin .data-card-module-EDbE- .data-card-module-fcSbu {
+      margin: 0;
+      font-weight: var(--font-weight-normal);
 
-.data-card-module-24uin .data-card-module-ZefqY .data-card-module-Qv5iI {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: var(--space-16);
-      gap: var(--space-8);
+      /* grid-area: value; */
     }
 
-@container (max-width: 414px) {
+@container (max-width: 314px) {
 
-.data-card-module-24uin .data-card-module-ZefqY .data-card-module-Qv5iI {
-        flex-direction: column
+.data-card-module-24uin .data-card-module-EDbE- .data-card-module-fcSbu {
+        margin-bottom: var(--space-8)
     }
+
+        .data-card-module-24uin .data-card-module-EDbE- .data-card-module-fcSbu:last-child {
+          margin-bottom: 0;
+        }
       }
 
+.data-card-module-24uin .data-card-module-Qv5iI {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--space-16);
+    gap: var(--space-8);
+  }
+
+@container (max-width: 314px) {
+
+.data-card-module-24uin .data-card-module-Qv5iI {
+      flex-direction: column
+  }
+    }
+
 .confirmation-dialog-module-Up-BC {
   max-width: 425px;
 }
@@ -7999,6 +8031,349 @@ button.swiper-pagination-bullet {
     --transition-duration: 0.3s;
   }
 
+.table-module-pevNG {
+  box-sizing: border-box;
+  container-name: table-container;
+  container-type: inline-size;
+  overflow-x: auto;
+}
+
+.table-module-k47fT {
+  --columns: 1;
+  --border-color: var(--color-gray-200);
+  --bgcolor-odd: var(--color-white);
+  --bgcolor-even: var(--color-gray-50);
+  --bgcolor-col-selected: rgb(0 0 0 / 5%);
+  --bgcolor-row-selected: rgb(0 0 0 / 10%);
+  --bgcolor-col-highlight: rgb(0 0 0 / 2.5%);
+  --bgcolor-row-highlight: rgb(0 0 0 / 2.5%);
+  --cell-padding: var(--space-12);
+  --grid-columns-default: repeat(var(--columns), minmax(min-content, auto));
+  --shadow: rgb(0 0 0 / 12.5%);
+  --z-column: 10;
+  --z-sticky: 11;
+  --z-selected: 12;
+
+  @property --columns {
+    initial-value: 1;
+    syntax: '<integer>';
+  }
+
+  position: relative;
+  display: grid;
+  box-sizing: border-box;
+  align-content: flex-end;
+  padding: 0;
+  background: var(--color-white);
+  grid-template-columns: var(--grid-columns, var(--grid-columns-default));
+  grid-template-rows:
+    [clmns-start thead-start]
+    auto
+    [thead-end tbody-start]
+    auto
+    [tbody-end clmns-end];
+  line-height: 1.25;
+  max-inline-size: -moz-fit-content;
+  max-inline-size: fit-content;
+
+  /* column highlighting (just 10 columns) */
+}
+
+/* columns */
+
+.table-module-k47fT .table-module-1lgqE {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-row: clmns;
+    grid-template-columns: subgrid;
+    pointer-events: none;
+  }
+
+.table-module-k47fT .table-module-dISOo {
+    position: relative;
+    z-index: var(--z-column);
+  }
+
+.table-module-k47fT .table-module-dISOo.table-module-WGz-I {
+      background-blend-mode: multiply;
+      background-color: var(--bgcolor-col-selected);
+    }
+
+.table-module-k47fT .table-module-dISOo.table-module-PQejy {
+      position: sticky;
+      z-index: var(--z-selected);
+      container-name: sticky-column;
+      /* stylelint-disable-next-line declaration-property-value-no-unknown */
+      container-type: scroll-state;
+      inset-inline: 0;
+    }
+
+.table-module-k47fT .table-module-dISOo.table-module-PQejy::before,
+      .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
+        position: absolute;
+        background: linear-gradient(-90deg, var(--shadow) 0%, transparent 100%);
+        content: '';
+        inline-size: var(--space-8);
+        inset-block: 0;
+        opacity: 0;
+        transition: opacity var(--transition-duration-short);
+      }
+
+@supports not (container-type: scroll-state) {
+
+.table-module-k47fT .table-module-dISOo.table-module-PQejy::before,
+      .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
+          background: var(--shadow);
+          inline-size: 1px;
+          opacity: 1
+      }
+        }
+
+.table-module-k47fT .table-module-dISOo.table-module-PQejy::before {
+        inset-inline: auto 100%;
+      }
+
+@container sticky-column scroll-state(stuck: inline-end) {
+
+.table-module-k47fT .table-module-dISOo.table-module-PQejy::before {
+          opacity: 1
+      }
+        }
+
+.table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
+        inset-inline: 100% auto;
+        rotate: 180deg;
+      }
+
+@container sticky-column scroll-state(stuck: inline-start) {
+
+.table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
+          opacity: 1
+      }
+        }
+
+/* cells */
+
+.table-module-k47fT .table-module-jRXnY,
+  .table-module-k47fT .table-module-wJwSq {
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: var(--cell-padding);
+    text-wrap: balance;
+  }
+
+.table-module-k47fT .table-module-jRXnY.table-module-EWdty, .table-module-k47fT .table-module-wJwSq.table-module-EWdty {
+      text-align: start;
+    }
+
+.table-module-k47fT .table-module-jRXnY.table-module-yJD74, .table-module-k47fT .table-module-wJwSq.table-module-yJD74 {
+      text-align: end;
+    }
+
+.table-module-k47fT .table-module-jRXnY.table-module-XAdfy, .table-module-k47fT .table-module-wJwSq.table-module-XAdfy {
+      text-align: center;
+    }
+
+.table-module-k47fT .table-module-jRXnY.table-module-h7qdo, .table-module-k47fT .table-module-wJwSq.table-module-h7qdo {
+      text-wrap: nowrap;
+    }
+
+.table-module-k47fT .table-module-jRXnY.table-module-PQejy, .table-module-k47fT .table-module-wJwSq.table-module-PQejy {
+      position: sticky;
+      z-index: var(--z-sticky);
+      inset-inline: 0;
+    }
+
+/* rows */
+
+.table-module-k47fT .table-module-Nisf1 {
+    display: grid;
+    border-block-end: 1px solid var(--border-color);
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+
+.table-module-k47fT .table-module-Nisf1 .table-module-jRXnY,
+    .table-module-k47fT .table-module-Nisf1 .table-module-wJwSq {
+      background-color: var(--bgcolor-odd);
+    }
+
+.table-module-k47fT .table-module-Nisf1:nth-child(even) .table-module-jRXnY,
+      .table-module-k47fT .table-module-Nisf1:nth-child(even) .table-module-wJwSq {
+        background-color: var(--bgcolor-even);
+      }
+
+:has(.table-module-3zZB6) .table-module-k47fT .table-module-Nisf1::after {
+        z-index: var(--z-selected);
+        background-blend-mode: multiply;
+        background-color: var(--bgcolor-row-highlight);
+        content: '';
+        grid-column: 1 / -1;
+        opacity: 0;
+        pointer-events: none;
+      }
+
+@media (pointer: fine) {
+
+:has(.table-module-3zZB6) .table-module-k47fT .table-module-Nisf1:hover::after {
+          opacity: 1
+      }
+        }
+
+.table-module-k47fT .table-module-Nisf1.table-module-WGz-I::after {
+        z-index: var(--z-selected);
+        background-blend-mode: multiply;
+        background-color: var(--bgcolor-row-selected);
+        content: '';
+        grid-column: 1 / -1;
+        opacity: 1;
+        pointer-events: none;
+      }
+
+.table-module-k47fT .table-module-Nisf1.table-module-qRfjM {
+      cursor: pointer;
+    }
+
+/* table header */
+
+.table-module-k47fT .table-module-DK-wn {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-row: thead;
+    grid-template-columns: subgrid;
+  }
+
+.table-module-k47fT .table-module-DK-wn .table-module-Nisf1 {
+      border-block-start: 0;
+    }
+
+.table-module-k47fT .table-module-DK-wn .table-module-Nisf1 .table-module-jRXnY,
+      .table-module-k47fT .table-module-DK-wn .table-module-Nisf1 .table-module-wJwSq {
+        background-color: var(--bgcolor-even);
+        font-weight: var(--font-weight-bold);
+      }
+
+/* table body */
+
+.table-module-k47fT .table-module-tygZb {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-row: tbody;
+    grid-template-columns: subgrid;
+  }
+
+/* full width table */
+
+.table-module-k47fT.table-module-YnmWV {
+    min-inline-size: 100%;
+  }
+
+.table-module-k47fT.table-module-YnmWV .table-module-skhNZ {
+      text-align: start;
+    }
+
+/* no text wrap for entire table */
+
+.table-module-k47fT.table-module-h7qdo .table-module-Nisf1 .table-module-jRXnY,
+      .table-module-k47fT.table-module-h7qdo .table-module-Nisf1 .table-module-wJwSq {
+        text-wrap: nowrap;
+      }
+
+@media (pointer: fine) {
+
+.table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(1):hover) .table-module-dISOo:nth-child(1),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(2):hover) .table-module-dISOo:nth-child(2),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(3):hover) .table-module-dISOo:nth-child(3),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(4):hover) .table-module-dISOo:nth-child(4),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(5):hover) .table-module-dISOo:nth-child(5),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(6):hover) .table-module-dISOo:nth-child(6),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(7):hover) .table-module-dISOo:nth-child(7),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(8):hover) .table-module-dISOo:nth-child(8),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(9):hover) .table-module-dISOo:nth-child(9),
+  .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th:nth-child(10):hover) .table-module-dISOo:nth-child(10) {
+      background-blend-mode: multiply;
+      background-color: var(--bgcolor-col-highlight)
+  }
+    }
+
+/* table sort buttons */
+
+.table-module-RtOV- {
+  --icon-space: 24px;
+  --icon-size: 12px;
+  --icon-rotation: 0deg;
+  --icon-visibility: hidden;
+
+  all: unset;
+  display: grid;
+  align-items: baseline;
+  padding: var(--cell-padding);
+  cursor: pointer;
+  grid-template-areas: 'label icon .';
+  grid-template-columns: auto var(--icon-space) 1fr;
+  inline-size: 100%;
+  text-align: start;
+}
+
+.table-module-RtOV- .table-module-ukG8s {
+    grid-area: label;
+  }
+
+.table-module-RtOV- .table-module-QdiLJ {
+    grid-area: icon;
+    justify-self: center;
+    rotate: var(--icon-rotation);
+    visibility: var(--icon-visibility);
+  }
+
+.table-module-RtOV-.table-module-gWy-a {
+    --icon-visibility: visible;
+  }
+
+.table-module-RtOV-.table-module-SjJ57 {
+    --icon-rotation: 0deg;
+  }
+
+.table-module-RtOV-.table-module--p8TF {
+    --icon-rotation: 180deg;
+  }
+
+.table-module-RtOV-.table-module-XAdfy {
+    grid-template-areas: '. . label icon .';
+    grid-template-columns: 1fr var(--icon-space) auto var(--icon-space) 1fr;
+    text-align: center;
+  }
+
+.table-module-RtOV-.table-module-yJD74 {
+    grid-template-areas: '. icon label';
+    grid-template-columns: 1fr var(--icon-space) auto;
+    text-align: end;
+  }
+
+.table-module-DK-wn .table-module-RtOV- {
+  margin: calc(var(--cell-padding) * -1);
+}
+
+.truncated-module-bwo1A {
+  display: -webkit-box;
+  text-wrap: balance;
+}
+
+  .truncated-module-bwo1A.truncated-module-JHMUL {
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--lines, 1);
+    line-clamp: var(--lines, 1);
+    text-overflow: ellipsis;
+  }
+
+.data-table-module-7CcZR {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16);
+}
+
 :root {
   --toastify-color-light: #fff;
   --toastify-color-dark: #121212;

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

@@ -0,0 +1,19 @@
+import { TranslationId } from '../intl/translation-id';
+import { TableColumnProperties } from './elements/table-column-properties';
+export interface ColumnBase {
+    key: string;
+    label: TranslationId;
+    props?: TableColumnProperties;
+}
+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 type Column<T extends object> = ColumnProperty<T> | ColumnRender<T>;
+export interface DataTableProps<T extends object> {
+    columns?: Column<T>[];
+    data: T[];
+}
+export declare function DataTable<T extends object>({ columns: _columns, data, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/table/data-table.js

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { DataCard } from '../cards/data-card/data-card.js';
+import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
+import { Table } from './elements/table.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, }) {
+    const isXl = useIsBreakpoint('lg');
+    const columns = useMemo(() => {
+        if (_columns)
+            return _columns;
+        const firstItem = data[0];
+        if (!firstItem)
+            return [];
+        const propertyNames = Object.keys(firstItem);
+        return propertyNames.map(key => ({
+            key,
+            label: key,
+            propertyName: key,
+        }));
+    }, [_columns, data]);
+    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-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
+                ? {
+                    key: column.key,
+                    label: column.label,
+                    value: column.render(item, column, data),
+                }
+                : {
+                    key: column.key,
+                    label: column.label,
+                    value: item[column.propertyName],
+                }) }, index))) }));
+}
+
+export { DataTable };

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

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

@@ -0,0 +1,10 @@
+export type TableColumnAlignment = 'start' | 'center' | 'end';
+export interface TableColumnProperties {
+    align?: TableColumnAlignment;
+    colSpan?: number;
+    nowrap?: boolean;
+    rowSpan?: number;
+    selected?: boolean;
+    sticky?: boolean;
+    truncated?: boolean | number;
+}

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

@@ -0,0 +1,18 @@
+import { TableColumnProperties } from './table-column-properties';
+export type OnColumnChangedHandler = (columnProps: TableColumnProperties) => void;
+export interface TableContextValue {
+    register: {
+        cell: (rowIndex: number, onColumnChanged: OnColumnChangedHandler) => {
+            deregister: VoidFunction;
+        };
+        column: (rowIndex: number, props: TableColumnProperties) => {
+            deregister: VoidFunction;
+            update: OnColumnChangedHandler;
+        };
+        row: () => {
+            deregister: VoidFunction;
+            index: number;
+        };
+    };
+}
+export declare const TableContext: React.Context<TableContextValue>;

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

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

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { TableColumnProperties } from './table-column-properties';
+import { OnColumnChangedHandler } from './table-context';
+export interface ColumnInfo {
+    index: number;
+    props: TableColumnProperties;
+    rowIndex: number;
+}
+export interface CellInfo {
+    index: number;
+    onColumnChanged: OnColumnChangedHandler;
+}
+export interface RowInfo {
+    cells: CellInfo[];
+    index: number;
+}
+export declare function TableProvider({ children, onColumnsChanged, }: {
+    children: ReactNode | ((args: {
+        columnInfos: ColumnInfo[];
+    }) => ReactNode);
+    onColumnsChanged?: (columnInfos: ColumnInfo[]) => void;
+}): import("react/jsx-runtime").JSX.Element;