@sonic-equipment/ui 205.0.0 → 207.0.0

package/dist/cards/table-card/table-card.d.ts

@@ -4,9 +4,12 @@ export interface TableCardProps {
     children?: React.ReactNode;
     className?: string;
     'data-test-selector'?: string;
+    id?: string;
+    isLoading?: boolean;
     paging?: React.ReactNode;
+    results?: number;
     showError?: Error | TranslationId | boolean | null;
     stickyHeader?: boolean;
     title?: TranslationId;
 }
-export declare function TableCard({ actions, children, className, 'data-test-selector': dataTestSelector, paging, showError, stickyHeader, title, }: TableCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableCard({ actions, children, className, 'data-test-selector': dataTestSelector, id, isLoading, paging, results, showError, stickyHeader, title, }: TableCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/table-card/table-card.js

@@ -5,10 +5,8 @@ import { UnauthorizedRequestError } from '../../shared/fetch/request.js';
 import { Heading } from '../../typography/heading/heading.js';
 import styles from './table-card.module.css.js';
 
-function TableCard({ actions, children, className, 'data-test-selector': dataTestSelector, 
-// rendering,
-paging, showError = false, stickyHeader = false, title, }) {
-    return (jsxs("section", { className: clsx(styles['table-card-container'], stickyHeader && styles['sticky-header'], className), "data-test-selector": dataTestSelector, children: [title && (jsx(Heading, { className: styles.title, size: "xxs", tag: "h3", children: jsx(FormattedMessage, { id: title }) })), jsx("div", { className: styles['table-card'], children: showError ? (jsx("div", { className: styles['error-container'], children: showError instanceof UnauthorizedRequestError ? (jsx(FormattedMessage, { id: "You are not authorized to access this information." })) : typeof showError === 'string' ? (jsx(FormattedMessage, { id: showError })) : (jsx(FormattedMessage, { id: "An unexpected error occured" })) })) : children ? (jsxs(Fragment, { children: [Boolean(actions?.length) && (jsx("div", { className: styles['actions'], children: actions })), jsx("div", { className: styles['data'], children: children }), paging && jsx("div", { className: styles['paging'], children: paging })] })) : (jsx("div", { className: clsx(styles['no-data-container']), children: jsx(FormattedMessage, { id: "There is no information to display" }) })) }), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }));
+function TableCard({ actions, children, className, 'data-test-selector': dataTestSelector, id, isLoading, paging, results = 0, showError = false, stickyHeader = false, title, }) {
+    return (jsxs("section", { className: clsx(styles['table-card-container'], stickyHeader && styles['sticky-header'], className), "data-test-selector": dataTestSelector, id: id, children: [title && (jsx(Heading, { className: styles.title, size: "xxs", tag: "h3", children: jsx(FormattedMessage, { id: title }) })), jsx("div", { className: styles['table-card'], children: showError ? (jsx("div", { className: styles['error-container'], children: showError instanceof UnauthorizedRequestError ? (jsx(FormattedMessage, { id: "You are not authorized to access this information." })) : typeof showError === 'string' ? (jsx(FormattedMessage, { id: showError })) : (jsx(FormattedMessage, { id: "An unexpected error occured" })) })) : (jsxs(Fragment, { children: [Boolean(actions?.length) && (jsx("div", { className: styles['actions'], children: actions })), results === 0 && !isLoading && (jsx("div", { className: clsx(styles['no-data-container']), children: jsx(FormattedMessage, { id: "There is no information to display" }) })), jsx("div", { className: styles['data'], children: children }), paging && jsx("div", { className: styles['paging'], children: paging })] })) }), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }));
 }
 
 export { TableCard };

package/dist/loading/dynamic-loading-overlay.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import { useIntersectionObserver } from '../shared/hooks/use-intersection-observer.js';
 import { ProgressCircle } from './progress-circle.js';
@@ -21,6 +21,12 @@ function DynamicLoadingOverlay({ children, className, isLoading, }) {
         },
         threshold,
     });
+    useEffect(() => {
+        if (!isLoading) {
+            // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+            setIntersectedHeight(0);
+        }
+    }, [isLoading]);
     return (jsxs("div", { ref: container, className: clsx(styles['dynamic-loading-overlay'], isLoading && styles['is-loading'], className), style: { '--intersected-height': `${intersectedHeight}px` }, children: [jsx("div", { className: styles['content'], children: children }), jsx("div", { className: styles['loading-indicator'], children: jsx(ProgressCircle, { className: styles['spinner'], variant: "gray" }) })] }));
 }
 

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

@@ -18,15 +18,17 @@ import styles from './connected-address-book-widget.module.css.js';
 
 function ConnectedAddressBookWidget() {
     const t = useFormattedMessage();
+    const { pathname, search: searchParams } = useLocation();
+    const href = `${pathname}${searchParams}`;
+    const paths = usePaths();
+    const addressBookId = 'address-book';
     const [sort, setSort] = useState({
         name: 'companyName',
-        order: 'DESC',
+        order: 'ASC',
     });
     const [search, setSearch] = useState('');
     const [page, setPage] = useState(1);
     const addressBookRef = useRef(null);
-    const { href } = useLocation();
-    const paths = usePaths();
     const { data, error, isFetching } = useFetchPagedShipToAddresses({
         page,
         pageSize: 20,
@@ -48,11 +50,11 @@ 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)}`, size: "sm", variant: "outline", children: t('Add address') }, "addAddress"),
-        ], className: styles['address-book-widget'], "data-test-selector": "address-book-widget", 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 }) })), 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: addresses && addresses.length > 0 && (jsx(DataTable, { actions: [
+            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 &&
+            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: [
                         {
-                            href: address => `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${address.id}?returnUrl=${encodeURIComponent(href)}`,
+                            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',
                         },
@@ -83,7 +85,7 @@ function ConnectedAddressBookWidget() {
                                 sticky: true,
                                 truncated: 3,
                             },
-                            sort: { direction: 'DESC', isEnabled: true },
+                            sort: { direction: sort.order, isEnabled: true },
                             value: {
                                 propertyName: 'companyName',
                             },
@@ -153,14 +155,14 @@ function ConnectedAddressBookWidget() {
                                 action: 'edit',
                             },
                         },
-                    ], data: addresses, onSort: (key, direction) => {
+                    ], data: addresses && addresses.length > 0 ? addresses : [], onSort: (key, direction) => {
                         if (direction === 'NONE')
                             return;
                         setSort({
                             name: key,
                             order: direction,
                         });
-                    } })) }) }) }));
+                    } }) }) }) }));
 }
 
 export { ConnectedAddressBookWidget };

package/package.json

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