@sonic-equipment/ui 204.0.0 → 205.0.0

package/dist/styles.css

@@ -1896,6 +1896,10 @@ html {
     padding-inline: var(--space-24);
   }
 
+  .pagination-module-k4OgY button[disabled], .pagination-module-oq89A button[disabled] {
+      pointer-events: none;
+    }
+
   .pagination-module-k4OgY button svg, .pagination-module-oq89A button svg {
       width: 12px;
       height: 12px;
@@ -3467,6 +3471,141 @@ html {
     }
   }
 
+.table-card-module-8spto {
+  --gap-row: var(--space-12);
+  --gap-col: var(--space-12);
+  --height-title: 22px;
+  --shadow: rgb(0 0 0 / 12.5%);
+  --sticky-z-index: 10;
+  --sticky-top: var(--header-bottom, 0px);
+  --sticky-title-top: calc(var(--sticky-top, 0px) + var(--gap-row));
+  --sticky-actions-top: calc(
+    var(--sticky-top, 0px) + var(--gap-row) * 2 + var(--height-title)
+  );
+
+  display: grid;
+  container-type: inline-size;
+  gap: var(--gap-row) var(--gap-col);
+  grid-template:
+    [card-start bar-start] repeat(2, minmax(0, min-content))
+    [bar-end] auto minmax(0, min-content)
+    [card-end] /
+    [card-start bar-start] 1fr [card-end bar-end];
+  grid-template-areas:
+    'title'
+    'actions'
+    'data'
+    'paging';
+}
+
+  @container (min-width: 636px) {.table-card-module-8spto {
+    --sticky-actions-top: calc(var(--sticky-top, 0px) + var(--gap-row));
+
+    grid-template:
+      [card-start bar-start] minmax(0, min-content) [bar-end] auto minmax(
+        0,
+        min-content
+      )
+      [card-end] /
+      [card-start bar-start] 1fr minmax(0, max-content) [card-end bar-end];
+    grid-template-areas:
+      'title actions'
+      'data data'
+      'paging paging'
+}
+  }
+
+  .table-card-module-8spto .table-card-module-RCFdp {
+    z-index: 2;
+    display: grid;
+    align-content: end;
+    grid-area: title;
+  }
+
+  .table-card-module-8spto .table-card-module-dFDCi {
+    display: grid;
+    grid-column: card;
+    grid-row: card;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+
+  .table-card-module-8spto .table-card-module-dFDCi .table-card-module-Gk7io {
+      display: grid;
+      padding: var(--space-16);
+      color: var(--color-brand-red);
+      grid-area: data;
+      place-content: center;
+    }
+
+  .table-card-module-8spto .table-card-module-dFDCi .table-card-module-lBFsJ {
+      display: grid;
+      padding: var(--space-16);
+      grid-area: data;
+      place-content: center;
+    }
+
+  .table-card-module-8spto .table-card-module-dFDCi .table-card-module-5iT-f {
+      display: grid;
+      grid-area: data;
+    }
+
+  .table-card-module-8spto .table-card-module-dFDCi .table-card-module-q5yPF {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      align-self: end;
+      justify-content: space-between;
+      gap: var(--space-8);
+      grid-area: actions;
+    }
+
+  .table-card-module-8spto .table-card-module-dFDCi .table-card-module-cZW-k {
+      grid-area: paging;
+    }
+
+  .table-card-module-8spto.table-card-module-aPwB9 .table-card-module-RCFdp {
+      position: sticky;
+      z-index: var(--sticky-z-index);
+      inset-block-start: var(--sticky-title-top);
+    }
+
+  .table-card-module-8spto.table-card-module-aPwB9 .table-card-module-q5yPF {
+      position: sticky;
+      z-index: var(--sticky-z-index);
+      inset-block-start: var(--sticky-actions-top);
+    }
+
+  /* white bar behind sticky elements */
+
+  .table-card-module-8spto.table-card-module-aPwB9 .table-card-module-4Vwgi {
+      position: sticky;
+      z-index: calc(var(--sticky-z-index) - 1);
+      background-color: var(--color-white);
+      /* stylelint-disable-next-line declaration-property-value-no-unknown */
+      container-type: scroll-state;
+      grid-area: bar;
+      inset-block: var(--sticky-top, 0);
+      margin-block: calc(var(--gap-row) * -1);
+    }
+
+  .table-card-module-8spto.table-card-module-aPwB9 .table-card-module-4Vwgi::after {
+        position: absolute;
+        background: linear-gradient(180deg, var(--shadow) 0%, transparent 100%);
+        block-size: var(--space-8);
+        content: '';
+        inset: 100% 0 auto;
+        opacity: 0;
+        transition: opacity var(--transition-duration-short);
+      }
+
+  @container scroll-state(stuck: block-start) {
+
+  .table-card-module-8spto.table-card-module-aPwB9 .table-card-module-4Vwgi::after {
+          opacity: 1
+      }
+        }
+
 @keyframes product-overview-grid-module-r-wvY {
   99.999% {
     opacity: 0;
@@ -6784,11 +6923,12 @@ button.swiper-pagination-bullet {
   display: grid;
   container-type: inline-size;
   gap: 24px 18px;
-  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
 }
 
   .widget-grid-module-GdtqD .widget-grid-module-y2wM2 {
     display: grid;
+    container-type: inline-size;
   }
 
   .widget-grid-module-GdtqD .widget-grid-module-y2wM2.widget-grid-module-Pladu {
@@ -6805,7 +6945,7 @@ button.swiper-pagination-bullet {
 
 .dynamic-loading-overlay-module-CAecM {
   --content-opacity: 0.35;
-  --indicator-min-size: 176px;
+  --indicator-min-size: 90px;
   --intersected-height: 0px;
   --transition-duration: var(--transition-duration-short);
   --transition-delay: var(--transition-duration-short);
@@ -6827,7 +6967,6 @@ button.swiper-pagination-bullet {
     position: sticky;
     z-index: 2;
     box-sizing: border-box;
-    block-size: var(--intersected-height);
     grid-column: 1;
     grid-row: 1;
     inset: 0;
@@ -6853,6 +6992,7 @@ button.swiper-pagination-bullet {
     }
 
   .dynamic-loading-overlay-module-CAecM.dynamic-loading-overlay-module-3bed- .dynamic-loading-overlay-module-lhL5i {
+      block-size: var(--intersected-height);
       opacity: 1;
       transition-delay: var(--transition-delay);
       visibility: visible;
@@ -8028,15 +8168,11 @@ button.swiper-pagination-bullet {
   }
 
 .table-module-pevNG {
-  position: relative;
-  box-sizing: border-box;
-  container-name: table-container;
-  container-type: inline-size;
-  overflow-x: auto;
-}
+  @property --columns {
+    initial-value: 1;
+    syntax: '<integer>';
+  }
 
-.table-module-k47fT {
-  --columns: 1;
   --border-color: var(--color-gray-200);
   --bgcolor-odd: var(--color-white);
   --bgcolor-even: var(--color-gray-50);
@@ -8045,22 +8181,75 @@ button.swiper-pagination-bullet {
   --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));
+  --cell-padding-narrow: var(--space-8);
   --shadow: rgb(0 0 0 / 12.5%);
   --z-column: 10;
   --z-sticky: 11;
   --z-selected: 12;
+  --ghost-gradient-z-index: 10;
+  --ghost-gradient-size: 32px;
 
-  @property --columns {
-    initial-value: 1;
-    syntax: '<integer>';
+  position: relative;
+  display: grid;
+  box-sizing: border-box;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  container-type: inline-size scroll-state;
+  overflow-x: auto;
+}
+
+  /* scrolling overflow ghost gradients */
+  .table-module-pevNG::before,
+  .table-module-pevNG::after {
+    position: sticky;
+    z-index: var(--ghost-gradient-z-index);
+    content: '';
+    grid-column: 1;
+    grid-row: 1;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-duration-short);
   }
+  /* ghost gradient start */
+  .table-module-pevNG::before {
+    background: linear-gradient(
+      90deg,
+      #fff 0%,
+      transparent var(--ghost-gradient-size)
+    );
+  }
+  @container scroll-state(scrollable: inline-start) {
+  .table-module-pevNG::before {
+      opacity: 1
+  }
+    }
+  /* ghost gradient end */
+  .table-module-pevNG::after {
+    background: linear-gradient(
+      90deg,
+      transparent calc(100% - var(--ghost-gradient-size)),
+      #fff 100%
+    );
+  }
+  @container scroll-state(scrollable: inline-end) {
+  .table-module-pevNG::after {
+      opacity: 1
+  }
+    }
+
+/* table */
+
+.table-module-k47fT {
+  --columns: 1;
+  --grid-columns-default: repeat(var(--columns), minmax(min-content, auto));
 
   position: relative;
   display: grid;
   box-sizing: border-box;
   padding: 0;
   background: var(--color-white);
+  grid-column: 1;
+  grid-row: 1;
   grid-template-columns: var(--grid-columns, var(--grid-columns-default));
   grid-template-rows:
     [clmns-start thead-start]
@@ -8101,6 +8290,8 @@ button.swiper-pagination-bullet {
       /* stylelint-disable-next-line declaration-property-value-no-unknown */
       container-type: scroll-state;
       inset-inline: 0;
+
+      /* drop shadows on the sides */
     }
 
 .table-module-k47fT .table-module-dISOo.table-module-PQejy::before,
@@ -8137,6 +8328,11 @@ button.swiper-pagination-bullet {
       }
         }
 
+.table-module-k47fT .table-module-dISOo.table-module-PQejy:first-child::before,
+      .table-module-k47fT .table-module-dISOo.table-module-PQejy:last-child::after {
+        content: none;
+      }
+
 /* cells */
 
 .table-module-k47fT .table-module-jRXnY,
@@ -8158,6 +8354,10 @@ button.swiper-pagination-bullet {
       inset-inline: 0;
     }
 
+.table-module-k47fT .table-module-jRXnY.table-module-QHBAG, .table-module-k47fT .table-module-wJwSq.table-module-QHBAG {
+      padding: var(--cell-padding) var(--cell-padding-narrow);
+    }
+
 .table-module-k47fT thead th {
     position: relative;
   }
@@ -8185,7 +8385,6 @@ button.swiper-pagination-bullet {
 
 .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;
@@ -8194,6 +8393,7 @@ button.swiper-pagination-bullet {
 .table-module-k47fT .table-module-Nisf1 .table-module-jRXnY,
     .table-module-k47fT .table-module-Nisf1 .table-module-wJwSq {
       background-color: var(--bgcolor-odd);
+      border-block-end: 1px solid var(--border-color);
     }
 
 .table-module-k47fT .table-module-Nisf1:nth-child(even) .table-module-jRXnY,
@@ -8350,7 +8550,7 @@ button.swiper-pagination-bullet {
 
 .truncated-module-bwo1A {
   display: -webkit-box;
-  text-wrap: auto;
+  text-wrap: pretty;
 }
 
   .truncated-module-bwo1A.truncated-module-JHMUL {
@@ -8377,16 +8577,15 @@ button.swiper-pagination-bullet {
 .order-history-module-LrkiZ {
   --gap-col: var(--space-8);
   --gap-row: var(--space-8);
-  --z-index-sticky: 10;
-  --sticky-top: var(--header-bottom, 0);
+  --sticky-z-index: 10;
+  --sticky-top: var(--header-bottom, 0px);
   --shadow: rgb(0 0 0 / 12.5%);
 
   display: grid;
   gap: var(--gap-row) var(--gap-col);
-  grid-template: [bar-start] auto [bar-end] repeat(
-      3,
-      auto
-    ) / [bar-start] 1fr [bar-end];
+  grid-template:
+    [bar-start] auto [bar-end] repeat(3, auto)
+    / [bar-start] 1fr [bar-end];
   grid-template-areas:
     'search'
     'filter'
@@ -8424,7 +8623,7 @@ button.swiper-pagination-bullet {
 
   .order-history-module-LrkiZ .order-history-module-Y18m7 {
     position: sticky;
-    z-index: var(--z-index-sticky);
+    z-index: var(--sticky-z-index);
     grid-area: search;
     inset-block-start: calc(var(--sticky-top, 0) + var(--gap-row));
   }
@@ -8439,7 +8638,7 @@ button.swiper-pagination-bullet {
 
   .order-history-module-LrkiZ .order-history-module-tBrZG {
       position: sticky;
-      z-index: var(--z-index-sticky);
+      z-index: var(--sticky-z-index);
       inset-block-start: calc(var(--sticky-top) + var(--gap-row))
   }
     }
@@ -8466,7 +8665,7 @@ button.swiper-pagination-bullet {
 
   .order-history-module-LrkiZ .order-history-module-98Tvf {
     position: sticky;
-    z-index: calc(var(--z-index-sticky) - 1);
+    z-index: calc(var(--sticky-z-index) - 1);
     margin: calc(var(--gap-row) * -1)
       calc(var(--page-container-padding-inline) * -1);
     background-color: var(--color-white);
@@ -8500,6 +8699,40 @@ button.swiper-pagination-bullet {
     }
       }
 
+.connected-address-book-widget-module-Xd9WN {
+  --height-actions: 42px;
+  --height-title: 22px;
+}
+
+  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-9mOgI {
+    --scroll-margin-block-start: calc(
+      var(--header-bottom, 0px) + var(--space-12) * 3 + var(--height-actions) +
+        var(--height-title)
+    );
+
+    scroll-margin-block-start: var(--scroll-margin-block-start, 0);
+  }
+
+  @container (min-width: 636px) {
+
+  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-9mOgI {
+      --scroll-margin-block-start: calc(
+        var(--header-bottom, 0px) + var(--space-12) * 2 + var(--height-actions)
+      )
+  }
+    }
+
+  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-g9kHi {
+    block-size: 1em;
+    inline-size: 1em;
+    margin-inline-end: -8px;
+    vertical-align: -0.2em;
+  }
+
+  .connected-address-book-widget-module-Xd9WN .connected-address-book-widget-module-3ir-C {
+    flex-grow: 1;
+  }
+
 .product-details-page-layout-module-pPtZX {
   display: flex;
   flex-direction: column;

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

@@ -4,6 +4,7 @@ import { SortDirection, SortHanlder, SortOptions, TableColumnProperties } from '
 export interface Column<T extends object> {
     header: {
         isHidden?: boolean;
+        isNarrow?: boolean;
         label: TranslationId;
         render?: (column: Column<T>, data: T[]) => React.ReactNode;
     } | {
@@ -24,12 +25,13 @@ export interface Column<T extends object> {
     };
 }
 export interface Action<T extends object> {
+    href?: (item: T) => string;
     icon?: ReactNode;
     isEnabled?: (item: T) => boolean;
     isPrimary?: boolean;
     key: string;
     label: TranslationId;
-    onAction: (item: T) => void;
+    onAction?: (item: T) => void;
 }
 export interface DataTableProps<T extends object> {
     actions?: Action<T>[];

package/dist/table/data-table.js

@@ -79,11 +79,11 @@ function DataTable({ actions, columns: _columns, data, onSort: _onSort, }) {
                             : 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;
+                        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", 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', 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
+        , { actions: actions?.map(action => (jsx(Button, { color: action.isPrimary ? 'primary' : 'secondary', 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,

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","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"};
+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.js

@@ -6,8 +6,8 @@ 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) }));
+    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, rowSpan: rowSpan, children: truncated ? (jsx(Truncated, { lines: typeof truncated === 'number' ? truncated : undefined, children: children })) : (children) }));
 }
 
 export { TD };

package/dist/table/elements/th.js

@@ -5,8 +5,8 @@ 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, 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 }));
+    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/types.d.ts

@@ -15,6 +15,7 @@ export interface TableColumnProperties {
     align?: TableColumnAlignment;
     colSpan?: number;
     cssColumn?: string;
+    isNarrow?: boolean;
     nowrap?: boolean;
     rowSpan?: number;
     selected?: boolean;

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

@@ -16,6 +16,7 @@ function useTD(props) {
         ...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,

package/dist/text/truncated/truncated.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { childrenToText } from '../../shared/utils/children-to-text.js';
 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 }));
+    const title = childrenToText(children);
+    return (jsx("div", { className: clsx(styles['truncated'], active && styles['active']), style: { '--lines': lines }, title: title, children: children }));
 }
 
 export { Truncated };

package/package.json

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