@sonic-equipment/ui 190.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/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": "190.0.0",
+  "version": "191.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {