@sonic-equipment/ui 212.0.0 → 214.0.0

package/dist/authentication/authenticated-container.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare function AuthenticatedContainer({ children, onUnauthenticated, views, }: {
+    children: React.ReactNode;
+    onUnauthenticated?: () => void;
+    views?: {
+        unauthenticated?: ReactNode;
+        undetermined?: ReactNode;
+    };
+}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null;

package/dist/authentication/authenticated-container.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { useIsAuthenticated } from '../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
+
+function AuthenticatedContainer({ children, onUnauthenticated, views, }) {
+    const isAuthenticated = useIsAuthenticated();
+    const wasAuthenticated = useRef(Boolean(isAuthenticated));
+    useEffect(() => {
+        if (wasAuthenticated.current === true && isAuthenticated === false)
+            onUnauthenticated?.();
+        wasAuthenticated.current = isAuthenticated || false;
+    }, [isAuthenticated, onUnauthenticated]);
+    if (isAuthenticated === false)
+        return views?.unauthenticated ?? null;
+    if (isAuthenticated === undefined)
+        return views?.undetermined ?? null;
+    return jsx(Fragment, { children: children });
+}
+
+export { AuthenticatedContainer };

package/dist/collapsables/accordion/accordion-item.js

@@ -29,7 +29,7 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
                     }), disabled: isDisabled, id: id, onClick: () => {
                         if (allowToggle && allowCollapse)
                             toggle();
-                    }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-hidden": !isOpen, "aria-labelledby": id, className: styles.panel, id: panelId, inert: isOpen ? undefined : 'true', role: "region", children: children })] }));
+                    }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-hidden": !isOpen, "aria-labelledby": id, className: styles.panel, id: panelId, inert: isOpen ? undefined : true, role: "region", children: children })] }));
 }
 
 export { AccordionItem };

package/dist/collapsables/show-all/show-all.js

@@ -23,7 +23,7 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
             [styles['is-open']]: isReallyOpen,
         }), style: contentFits ? undefined : { '--initial-height': `${initialHeight}px` }, children: [jsx("div", { className: styles.panel, children: jsx("div", { className: clsx(styles.content, {
                         [styles['has-transparency']]: !contentFits && hasTransparency,
-                    }), children: jsx("div", { ref: ref, "aria-hidden": !isReallyOpen, inert: isReallyOpen ? undefined : 'true', children: children }) }) }), !contentFits && (jsxs(Link, { className: styles.button, color: "secondary", onClick: () => {
+                    }), children: jsx("div", { ref: ref, "aria-hidden": !isReallyOpen, inert: isReallyOpen ? undefined : true, children: children }) }) }), !contentFits && (jsxs(Link, { className: styles.button, color: "secondary", onClick: () => {
                     if (isControlled)
                         return onToggle(!isControlled);
                     toggle();

package/dist/exports.d.ts

@@ -26,6 +26,7 @@ export * from './algolia/use-algolia-insights';
 export * from './algolia/use-algolia-insights-provider-global-state';
 export * from './algolia/use-algolia-instant-search-state';
 export * from './algolia/use-algolia-search';
+export * from './authentication/authenticated-container';
 export * from './background-overlay/background-overlay';
 export * from './background-overlay/background-overlay-manager';
 export * from './badges/badge/badge';

package/dist/header/buttons/account/connected-account-button.js

@@ -14,7 +14,7 @@ function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelec
     const { href } = useLocation();
     return (jsx(IconButton, { className: className, "data-authenticated": isAuthenticated ? true : false, "data-test-selector": dataTestSelector, href: isAuthenticated
             ? paths.ACCOUNT
-            : `${paths.SIGN_IN}${href ? `?returnUrl=${encodeURIComponent(href)}` : ''}`, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My Sonic') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
+            : `${paths.SIGN_IN}${href ? `?returnUrl=${encodeURIComponent(href)}` : ''}`, isDisabled: isAuthenticated === undefined, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My Sonic') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
 }
 
 export { ConnectedAccountButton };

package/dist/index.js

@@ -31,6 +31,7 @@ export { useAlgoliaInsights } from './algolia/use-algolia-insights.js';
 export { useAlgoliaInsightsGlobalState } from './algolia/use-algolia-insights-provider-global-state.js';
 export { useAlgoliaInstantSearchState, useAlgoliaInstantSearchStateIndex, useAlgoliaInstantSearchStateOnline, useAlgoliaInstantSearchStateQueryId, useAlgoliaInstantSearchStateStatus } from './algolia/use-algolia-instant-search-state.js';
 export { useAlgoliaSearch } from './algolia/use-algolia-search.js';
+export { AuthenticatedContainer } from './authentication/authenticated-container.js';
 export { BackgroundOverlay } from './background-overlay/background-overlay.js';
 export { BackgroundOverlayManager } from './background-overlay/background-overlay-manager.js';
 export { Badge } from './badges/badge/badge.js';

package/dist/navigation/account-icon/account-icon.js

@@ -7,7 +7,7 @@ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 
 function AccountIcon({ 'aria-label': ariaLabel, isAuthenticated, }) {
     const t = useFormattedMessage();
-    return (jsx(IconWithBadge, { "aria-label": ariaLabel, badge: isAuthenticated ? (jsx(Badge, { "aria-label": `(${t('Signed in')})`, variant: "green" })) : (jsx(Badge, { "aria-label": `(${t('Signed out')})`, variant: "red" })), icon: jsx(SolidLoginIcon, { role: "presentation" }) }));
+    return (jsx(IconWithBadge, { "aria-label": ariaLabel, badge: isAuthenticated === undefined ? null : isAuthenticated ? (jsx(Badge, { "aria-label": `(${t('Signed in')})`, variant: "green" })) : (jsx(Badge, { "aria-label": `(${t('Signed out')})`, variant: "red" })), icon: jsx(SolidLoginIcon, { role: "presentation" }) }));
 }
 
 export { AccountIcon };

package/dist/pages/my-sonic/pages/order-history/order-history.js

@@ -66,9 +66,10 @@ function OrderHistory() {
         ...options,
         [status]: t(`orderStatus.${status}`),
     }), { any: t('orderStatus.Any') });
-    return (jsx(Fragment, { children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
+    return (jsx(Fragment, { children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], "data-test-selector": "order-history", children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, "data-test-selector": "order-history-search", label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { "data-test-selector": "order-history-filter", label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
                                 {
-                                    isPrimary: true,
+                                    'data-test-selector': 'order-history-reorder',
+                                    isPrimary: false,
                                     key: 'reorder',
                                     label: 'Reorder',
                                     onAction: order => window?.alert(`Reorder ${order.id}`),
@@ -80,13 +81,13 @@ function OrderHistory() {
                                     },
                                     key: 'webOrderNumber',
                                     props: {
-                                        cssColumn: 'minmax(10ch, min-content)',
+                                        cssColumn: 'minmax(15ch, min-content)',
                                         nowrap: true,
                                         sticky: true,
                                     },
                                     sort: { direction: 'DESC', isEnabled: true },
                                     value: {
-                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", href: `/my-sonic/order-history/${order.id}`, onClick: () => window?.alert(`open ${order.id}`), children: order.webOrderNumber })),
+                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-order-link", href: `/my-sonic/order-history/${order.id}`, onClick: () => window?.alert(`open ${order.id}`), children: order.webOrderNumber })),
                                     },
                                 },
                                 {
@@ -163,7 +164,9 @@ function OrderHistory() {
                                     name: key,
                                     order: direction,
                                 });
-                            } })) : (!isFetching && (jsx("p", { className: styles['no-results'], children: t('No orders found.') }))) }) }), orders && orders.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }) }));
+                            }, row: {
+                                'data-test-selector': (order, _) => `order-${order.id}`,
+                            } })) : (!isFetching && (jsx("p", { className: styles['no-results'], children: t('No orders found.') }))) }) }), orders && orders.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, "data-test-selector": "order-history-pagination", onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }) }));
 }
 
 export { OrderHistory };

package/dist/pages/my-sonic/widgets/connected-address-book-widget.js

@@ -49,11 +49,12 @@ function ConnectedAddressBookWidget() {
         }
     };
     return (jsx(TableCard, { stickyHeader: true, actions: [
-            jsx(SearchField, { isDebounced: true, className: styles['search-field'], label: t('Search'), onChange: searchAddresses, placeholder: t('Search'), showLabel: false, size: "md", variant: "outline" }, "searchAddresses"),
-            jsx(Button, { color: "secondary", href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`, size: "sm", variant: "outline", children: t('Add address') }, "addAddress"),
-        ], className: styles['address-book-widget'], "data-test-selector": "address-book-widget", id: addressBookId, isLoading: isFetching, paging: addresses &&
+            jsx(SearchField, { isDebounced: true, className: styles['search-field'], "data-test-selector": "address-book-search", label: t('Search'), onChange: searchAddresses, placeholder: t('Search'), showLabel: false, size: "md", variant: "outline" }, "searchAddresses"),
+            jsx(Button, { color: "secondary", "data-test-selector": "address-book-add-address", href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`, size: "sm", variant: "outline", children: t('Add address') }, "addAddress"),
+        ], className: styles['address-book-widget'], "data-test-selector": "address-book", id: addressBookId, isLoading: isFetching, paging: addresses &&
             addresses.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), results: addresses ? addresses.length : 0, showError: error, title: "Address book", children: jsx("div", { ref: addressBookRef, "aria-label": "Results", "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: jsx(DataTable, { actions: [
                         {
+                            'data-test-selector': 'edit-address',
                             href: address => `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${address.id}?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`,
                             key: 'edit',
                             label: 'Edit',
@@ -71,7 +72,7 @@ function ConnectedAddressBookWidget() {
                             },
                             value: {
                                 render: address => {
-                                    return (address.isDefault && (jsx(SolidRatingIcon, { "aria-label": `(${t('addressProperty.Default')})`, className: styles['default-icon'] })));
+                                    return (address.isDefault && (jsx(SolidRatingIcon, { "aria-label": `(${t('addressProperty.Default')})`, className: styles['default-icon'], "data-test-selector": "default-address" })));
                                 },
                             },
                         },
@@ -132,8 +133,8 @@ function ConnectedAddressBookWidget() {
                             header: { label: 'addressProperty.Country' },
                             key: 'country.name',
                             props: {
-                                cssColumn: 'minmax(12ch, min-content)',
-                                nowrap: true,
+                                cssColumn: 'minmax(15ch, min-content)',
+                                truncated: 2,
                             },
                             sort: {
                                 isEnabled: true,
@@ -162,6 +163,9 @@ function ConnectedAddressBookWidget() {
                             name: key,
                             order: direction,
                         });
+                    }, row: {
+                        'data-test-selector': (address, _) => `address-${address.id}`,
+                        selected: (address, _) => address.isDefault,
                     } }) }) }) }));
 }
 

package/dist/sidebar/sidebar.js

@@ -14,7 +14,7 @@ function Sidebar({ children, className }) {
             [styles['is-closed']]: !isOpen,
             [styles['is-docked']]: isDocked,
             [styles['is-not-docked']]: !isDocked,
-        }, className), inert: isOpen ? undefined : 'true', children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
+        }, className), inert: isOpen ? undefined : true, children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
 }
 
 export { Sidebar };

package/dist/styles.css

@@ -454,6 +454,7 @@ html {
 
   .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-kYmoe .accordion-module-KZjMo {
         block-size: 0;
+        visibility: hidden;
       }
 
   /* open state */
@@ -485,6 +486,7 @@ html {
         background-color: var(--color-brand-light-gray);
         font-size: var(--font-size-16);
         font-weight: var(--font-weight-normal);
+        transition: border-radius 0s var(--transition-duration-short);
       }
 
   .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-lf9d- .accordion-module--Rwpb svg {
@@ -499,19 +501,24 @@ html {
         }
 
   .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-lf9d- .accordion-module-KZjMo {
-        padding-inline: 1rem;
+        display: grid;
+        padding: 0;
+        border: 1px solid var(--color-brand-medium-gray);
+        margin: 0;
+        border-bottom-left-radius: var(--border-radius-8);
+        border-bottom-right-radius: var(--border-radius-8);
+        grid-template-rows: var(--space-16) auto var(--space-16);
+        padding-inline: var(--space-16);
       }
 
+  .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-lf9d- .accordion-module-KZjMo::before {
+          content: '';
+        }
+
   .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-lf9d-.accordion-module-W0F1z .accordion-module--Rwpb {
           border-bottom-left-radius: 0;
           border-bottom-right-radius: 0;
-        }
-
-  .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-lf9d-.accordion-module-W0F1z .accordion-module-KZjMo {
-          border: 1px solid var(--color-brand-medium-gray);
-          border-bottom-left-radius: var(--border-radius-8);
-          border-bottom-right-radius: var(--border-radius-8);
-          padding-block: 1rem;
+          transition: border-radius 0s 0s;
         }
 
 .heading-module-pMC65 {
@@ -1766,7 +1773,7 @@ html {
     'label .'
     'field info'
     'error .';
-  grid-template-columns: auto;
+  grid-template-columns: 1fr auto;
   grid-template-rows: repeat(3, min-content);
 }
 
@@ -4880,7 +4887,7 @@ button.swiper-pagination-bullet {
     cursor: pointer;
     gap: var(--space-2);
     grid-template-areas: 'icon label .';
-    grid-template-columns: (--space-24) 1fr var(--space-24);
+    grid-template-columns: var(--space-24) 1fr var(--space-24);
     grid-template-rows: minmax(24px, min-content);
     line-height: 1;
     outline: none;
@@ -8447,6 +8454,7 @@ button.swiper-pagination-bullet {
         background-color: var(--bgcolor-row-selected);
         content: '';
         grid-column: 1 / -1;
+        margin-block-end: 1px;
         opacity: 1;
         pointer-events: none;
       }

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

@@ -2,6 +2,7 @@ import { FunctionComponent, ReactNode } from 'react';
 import { TranslationId } from '../intl/translation-id';
 import { SortDirection, SortHanlder, SortOptions, TableColumnProperties } from './elements/types';
 export interface Column<T extends object> {
+    'data-test-selector'?: (column: Column<T>, item: T) => string;
     header: {
         isHidden?: boolean;
         isNarrow?: boolean;
@@ -25,6 +26,7 @@ export interface Column<T extends object> {
     };
 }
 export interface Action<T extends object> {
+    'data-test-selector'?: string;
     href?: (item: T) => string;
     icon?: ReactNode;
     isEnabled?: (item: T) => boolean;
@@ -38,6 +40,11 @@ export interface DataTableProps<T extends object> {
     columns?: Column<T>[];
     data: T[];
     onSort?: SortHanlder;
+    row?: {
+        'data-test-selector'?: (item: T, index: number) => string;
+        onClick?: (item: T) => void;
+        selected?: (item: T, index: number) => boolean;
+    };
 }
 export declare function SortWrapper<T extends object>({ children, column, direction, onSort, }: {
     children: ReactNode;
@@ -45,4 +52,4 @@ export declare function SortWrapper<T extends object>({ children, column, direct
     direction?: SortDirection;
     onSort: SortHanlder;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function DataTable<T extends object>({ actions, columns: _columns, data, onSort: _onSort, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function DataTable<T extends object>({ actions, columns: _columns, data, onSort: _onSort, row: _row, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/table/data-table.js

@@ -19,7 +19,7 @@ function SortWrapper({ children, column, direction, onSort, }) {
         return jsx(Fragment, { children: children });
     return (jsx(TableSortButton, { columnName: column.header.label, direction: direction, onSort: onSort, sortKey: column.sort.columnName || column.key, children: children }));
 }
-function DataTable({ actions, columns: _columns, data, onSort: _onSort, }) {
+function DataTable({ actions, columns: _columns, data, onSort: _onSort, row: _row, }) {
     const isXl = useIsBreakpoint('lg');
     const t = useFormattedMessage();
     const [sortInfo, setSortInfo] = useState(() => {
@@ -70,20 +70,20 @@ function DataTable({ actions, columns: _columns, data, onSort: _onSort, }) {
                                 ? sortInfo?.direction
                                 : 'NONE', onSort: onSort, children: 'render' in column.header && column.header.render
                                 ? column.header.render(column, data)
-                                : t(column.header.label) }))) }, column.key))) }), children: data.map((item, index) => (
+                                : t(column.header.label) }))) }, column.key))) }), children: data.map((item, index) => (jsx(TR
                 // eslint-disable-next-line @eslint-react/no-array-index-key
-                jsx(TR, { children: columns.map(column => {
+                , { "data-test-selector": _row?.['data-test-selector']?.(item, index), onClick: _row?.onClick ? () => _row.onClick?.(item) : undefined, selected: _row?.selected ? _row.selected(item, index) : false, children: columns.map(column => {
                         const actionKey = 'action' in column.value ? column.value.action : undefined;
                         const action = actionKey
                             ? actions?.find(action => action.key === actionKey)
                             : 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", href: action.href?.(item), 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, { "data-key": column.key, children: column.value.render(item, column, data) }, column.key)) : 'propertyName' in column.value ? (jsx(TD, { "data-key": column.key, children: String(item[column.value.propertyName]) }, column.key)) : 'action' in column.value ? (jsx(TD, { "data-key": column.key, children: action && (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": action['data-test-selector'], 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', 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
+        , { actions: actions?.map(action => (jsx(Button, { color: action.isPrimary ? 'primary' : 'secondary', "data-test-selector": action['data-test-selector'], 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,
@@ -97,7 +97,7 @@ function DataTable({ actions, columns: _columns, data, onSort: _onSort, }) {
                         value: item[column.value.propertyName],
                     }
                     : null)
-                .filter(Boolean) }, index))) }));
+                .filter(Boolean), "data-test-selector": _row?.['data-test-selector']?.(item, index) }, index))) }));
 }
 
 export { DataTable, SortWrapper };

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

@@ -13,7 +13,7 @@ function TableSortButton({ align = 'start', children, columnName, direction = 'N
     ${t(columnName)} 
     ${isActive && `(${t('active')}, ${t(`sort.${direction}`)})`}
   `;
-    return (jsxs("button", { "aria-label": ariaLabel, className: clsx(styles['table-sort-button'], isActive && styles['active'], styles[direction.toLowerCase()], styles[align]), onClick: () => onSort(sortKey, direction), type: "button", children: [jsx("span", { className: styles['label'], children: children }), isActive && (jsx(GlyphsChevronsBoldUpIcon, { "aria-label": t(direction), className: styles['icon'] }))] }));
+    return (jsxs("button", { "aria-label": ariaLabel, className: clsx(styles['table-sort-button'], isActive && styles['active'], styles[direction.toLowerCase()], styles[align]), "data-sort-direction": direction, onClick: () => onSort(sortKey, direction), type: "button", children: [jsx("span", { className: styles['label'], children: children }), isActive && (jsx(GlyphsChevronsBoldUpIcon, { "aria-label": t(direction), className: styles['icon'] }))] }));
 }
 
 export { TableSortButton };

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

@@ -2,5 +2,6 @@ import { TableColumnProperties } from './types';
 export interface TDProps extends TableColumnProperties {
     children: React.ReactNode;
     className?: string;
+    'data-key'?: string;
 }
 export declare function TD(props: TDProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/td.js

@@ -7,7 +7,7 @@ import styles from './table.module.css.js';
 
 function TD(props) {
     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) }));
+    return (jsx("td", { className: clsx(styles['td'], styles[align], nowrap && styles['nowrap'], sticky && styles['sticky'], isNarrow && styles['narrow'], className), colSpan: colSpan, "data-key": props['data-key'], rowSpan: rowSpan, children: truncated ? (jsx(Truncated, { lines: typeof truncated === 'number' ? truncated : undefined, children: children })) : (children) }));
 }
 
 export { TD };

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

@@ -1,2 +1,2 @@
 import { TRProps } from './types';
-export declare function TR({ children, className, onClick, selected }: TRProps): import("react/jsx-runtime").JSX.Element;
+export declare function TR({ children, className, 'data-test-selector': dataTestSelector, onClick, selected, }: TRProps): import("react/jsx-runtime").JSX.Element;

package/dist/table/elements/tr.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { TableRowProvider } from './table-row-provider.js';
 import styles from './table.module.css.js';
 
-function TR({ children, className, onClick, selected }) {
-    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 }) }));
+function TR({ children, className, 'data-test-selector': dataTestSelector, onClick, selected, }) {
+    return (jsx(TableRowProvider, { children: jsx("tr", { "aria-selected": selected, className: clsx(styles['tr'], selected && styles['selected'], Boolean(onClick) && styles['clickable'], className), "data-test-selector": dataTestSelector, onClick: onClick, children: children }) }));
 }
 
 export { TR };

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

@@ -32,6 +32,7 @@ export interface THProps extends TableColumnProperties {
 export interface TRProps {
     children: ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
     selected?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "212.0.0",
+  "version": "214.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -15,10 +15,7 @@
       "default": "./dist/index.js"
     }
   },
-  "files": [
-    "dist",
-    "README.md"
-  ],
+  "files": ["dist", "README.md"],
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {