@sonic-equipment/ui 189.0.0 → 191.0.0

package/dist/pages/checkout/payment-page/components/payment.js

@@ -244,7 +244,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                     MA: t('industry.MA'),
                     OT: t('industry.OT'),
                     /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "customerVatNumber" }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: environment === 'production' ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
+                }, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "customerVatNumber" }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: environment === 'production' ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
                 /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
                 typeof window === 'undefined'
                     ? ''

package/dist/styles.css

@@ -7976,7 +7976,6 @@ button.swiper-pagination-bullet {
 .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;
@@ -7997,7 +7996,7 @@ button.swiper-pagination-bullet {
         inset-inline: auto 100%;
       }
 
-@container sticky-column scroll-state(stuck: inline-end) {
+@container scroll-state(stuck: inline-end) {
 
 .table-module-k47fT .table-module-dISOo.table-module-PQejy::before {
           opacity: 1
@@ -8009,7 +8008,7 @@ button.swiper-pagination-bullet {
         rotate: 180deg;
       }
 
-@container sticky-column scroll-state(stuck: inline-start) {
+@container scroll-state(stuck: inline-start) {
 
 .table-module-k47fT .table-module-dISOo.table-module-PQejy::after {
           opacity: 1
@@ -8157,10 +8156,6 @@ button.swiper-pagination-bullet {
         text-wrap: nowrap;
       }
 
-.table-module-k47fT col:hover {
-    background-color: red;
-  }
-
 @media (pointer: fine) {
 
 .table-module-k47fT.table-module-JEp5f:has(.table-module-DK-wn th.table-module-hyPmy:nth-child(1):hover) .table-module-dISOo:nth-child(1),
@@ -8266,9 +8261,10 @@ button.swiper-pagination-bullet {
 
   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'
@@ -8352,7 +8348,6 @@ button.swiper-pagination-bullet {
     margin: calc(var(--gap-row) * -1)
       calc(var(--page-container-padding-inline) * -1);
     background-color: var(--color-white);
-    container-name: sticky-bar;
     /* stylelint-disable-next-line declaration-property-value-no-unknown */
     container-type: scroll-state;
     grid-area: bar;
@@ -8376,7 +8371,7 @@ button.swiper-pagination-bullet {
       transition: opacity var(--transition-duration-short);
     }
 
-  @container sticky-bar scroll-state(stuck: block-start) {
+  @container scroll-state(stuck: block-start) {
 
   .order-history-module-LrkiZ .order-history-module-98Tvf::after {
         opacity: 1

package/dist/table/data-table.js

@@ -64,7 +64,7 @@ function DataTable({ actions, columns: _columns, data, onSort: _onSort, }) {
     if (data.length === 0 || columns.length === 0)
         return null;
     if (isXl)
-        return (jsx("div", { className: styles['data-table'], children: jsx(Table, { className: styles['content'], cssColumns: cssColumns, highlight: "col", stretch: true, thead: jsx(TR, { children: columns.map(column => (jsx(TH, { ...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 ||
+        return (jsx("div", { className: styles['data-table'], children: jsx(Table, { className: styles['content'], cssColumns: cssColumns, highlight: "col", stretch: true, thead: jsx(TR, { children: columns.map(column => (jsx(TH, { scope: "col", ...column.props, sortable: !!column.sort?.isEnabled, children: 'Icon' in column.header ? (jsx(column.header.Icon, { 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

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

@@ -4,11 +4,14 @@ import { OnColumnChangedHandler } from './table-context';
 import { TableColumnProperties } from './types';
 export interface ColumnInfo {
     id: UUID;
+    index: number | null;
     props: TableColumnProperties;
     rowId: UUID;
 }
 export interface CellInfo {
+    columnId: UUID | null;
     id: UUID;
+    index: number | null;
     onColumnChanged: OnColumnChangedHandler;
 }
 export interface RowInfo {

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

@@ -13,9 +13,19 @@ function TableProvider({ children, onColumnsChanged, }) {
             cell: (rowId, onColumnChanged) => {
                 const row = rowsRef.current.find(row => row.id === rowId);
                 if (!row)
-                    return { deregister: voidFunction }; // throw new Error(`Row with id ${id} does not exist.`)
-                const cell = { id: createUUID(), onColumnChanged };
-                row.cells.push(cell);
+                    return { deregister: voidFunction };
+                const cell = {
+                    columnId: null,
+                    id: createUUID(),
+                    index: null,
+                    onColumnChanged,
+                };
+                cell.index = row.cells.push(cell);
+                const columnInfo = columnsRef.current.find(column => column.index === cell.index);
+                if (!columnInfo)
+                    throw new Error(`Column with index ${cell.index} does not exist.`);
+                cell.columnId = columnInfo.id;
+                onColumnChanged(columnInfo.props);
                 return {
                     deregister: () => {
                         row.cells = row.cells.filter(c => c.id !== cell.id);
@@ -25,10 +35,11 @@ function TableProvider({ children, onColumnsChanged, }) {
             column: (rowId, props) => {
                 const column = {
                     id: createUUID(),
+                    index: null,
                     props,
                     rowId,
                 };
-                columnsRef.current.push(column);
+                column.index = columnsRef.current.push(column);
                 onColumnsChanged?.(columnsRef.current);
                 return {
                     deregister: () => {
@@ -36,13 +47,11 @@ function TableProvider({ children, onColumnsChanged, }) {
                         onColumnsChanged?.(columnsRef.current);
                     },
                     update: (props) => {
-                        const updatedColumn = columnsRef.current.find(c => c.id === column.id);
-                        if (!updatedColumn)
-                            throw new Error(`Column with id ${column.id} does not exist.`);
-                        updatedColumn.props = props;
-                        rowsRef.current.forEach(row => row.cells
-                            .find(cell => cell.id === column.id)
-                            ?.onColumnChanged(props));
+                        column.props = { ...column.props, ...props };
+                        rowsRef.current.forEach(row => row.cells.forEach(cell => {
+                            if (cell.columnId === column.id)
+                                cell.onColumnChanged(props);
+                        }));
                     },
                 };
             },

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

@@ -7,10 +7,10 @@ function useTD(props) {
     const onColumnChanged = useCallback((columnProps) => {
         setColumnProps(columnProps);
     }, []);
-    const [{ deregister }] = useState(register.cell(onColumnChanged));
     useEffect(() => {
+        const { deregister } = register.cell(onColumnChanged);
         return deregister;
-    }, [deregister]);
+    }, [onColumnChanged, register]);
     return {
         ...props,
         align: columnProps?.align ?? props.align ?? 'start',

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

@@ -1,21 +1,19 @@
-import { useRef, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useTableRow } from './use-table-row.js';
 
 function useTH(props) {
     const { register } = useTableRow();
-    const updateRef = useRef();
+    const [update, setUpdate] = useState(null);
     useEffect(() => {
         const { deregister, update } = register.column(props);
-        updateRef.current = update;
-        return () => {
-            deregister();
-            updateRef.current = undefined;
-        };
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setUpdate(update);
+        return deregister;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [register]);
     useEffect(() => {
-        updateRef.current?.(props);
-    }, [props]);
+        update?.(props);
+    }, [update, props]);
     return props;
 }
 

package/package.json

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