@sonic-equipment/ui 1.0.0 → 1.1.0

package/dist/algolia/algolia-insights-provider.d.ts

@@ -4,7 +4,7 @@ export interface AlgoliaInsightsProviderState extends AlgoliaInsightsProviderGlo
     objectId?: string | string[] | undefined;
     position?: number | number[] | undefined;
 }
-export declare const AlgoliaInsightsProviderContext: React.Context<AlgoliaInsightsProviderState>;
+export declare const AlgoliaInsightsProviderContext: import("react").Context<AlgoliaInsightsProviderState>;
 export declare function AlgoliaInsightsProvider({ children, value, }: {
     children?: ReactNode;
     value?: AlgoliaInsightsProviderState;

package/dist/algolia/use-algolia-search.d.ts

@@ -25,10 +25,10 @@ export declare function useAlgoliaSearch(): {
     quickAccess: AutocompleteCollection<QuickAccessHit> | undefined;
     recentSearches: ExtendedAutoCompleteCollection<RecentSearchHit> | undefined;
     autocomplete: import("..").Autocomplete;
-    formRef: React.RefObject<HTMLFormElement>;
+    formRef: React.RefObject<HTMLFormElement | null>;
     indexes: import("./algolia-index-config").Indexes;
-    inputRef: React.RefObject<HTMLInputElement>;
-    panelRef: React.RefObject<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    panelRef: React.RefObject<HTMLDivElement | null>;
     productsIndexName: string;
     productsQuerySuggestionsIndexName: string;
     searchClient: import("algoliasearch").SearchClient;

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

@@ -6,4 +6,4 @@ export declare function AuthenticatedContainer({ children, onUnauthenticated, vi
         unauthenticated?: ReactNode;
         undetermined?: ReactNode;
     };
-}): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null;
+}): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;

package/dist/buttons/button/button.d.ts

@@ -26,4 +26,9 @@ export interface ButtonProps {
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: {
+    ({ _pseudo, "aria-label": ariaLabel, children: _children, className, color, condensed, "data-test-selector": dataTestSelector, download, form, href, icon, iconPosition, isDisabled, isLoading, isValidating, light, name, onClick, ref, route, size, type, value, variant, withArrow, }: ButtonProps & {
+        ref?: React.RefObject<HTMLButtonElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/buttons/button/button.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, isValidElement } from 'react';
+import { isValidElement } from 'react';
 import clsx from 'clsx';
 import { Icon } from '../../icon/icon.js';
 import { ProgressCircle } from '../../loading/progress-circle.js';
 import { useRouteLink } from '../../shared/routing/use-route-link.js';
 import buttonStyles from './button.module.css.js';
 
-const Button = forwardRef(({ _pseudo = 'none', 'aria-label': ariaLabel, children: _children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, download, form, href, icon, iconPosition = 'left', isDisabled, isLoading = false, isValidating = true, light = false, name, onClick, route, size = 'lg', type = 'button', value, variant = 'solid', withArrow = false, }, ref) => {
+const Button = ({ _pseudo = 'none', 'aria-label': ariaLabel, children: _children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, download, form, href, icon, iconPosition = 'left', isDisabled, isLoading = false, isValidating = true, light = false, name, onClick, ref, route, size = 'lg', type = 'button', value, variant = 'solid', withArrow = false, }) => {
     const { getRouteLinkProps, RouteLinkElement } = useRouteLink();
     const handleButtonClick = (e) => {
         if (onClick)
@@ -30,7 +30,7 @@ const Button = forwardRef(({ _pseudo = 'none', 'aria-label': ariaLabel, children
         return (jsx(RouteLinkElement, { "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, download: download, onClick: onClick, type: type, ...getRouteLinkProps(href, route), children: children }));
     }
     return (jsx("button", { ref: ref, "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, form: form, formNoValidate: isValidating ? undefined : true, name: name, onClick: handleButtonClick, type: type, value: value, children: children }));
-});
+};
 Button.displayName = 'Button';
 
 export { Button };

package/dist/buttons/icon-button/icon-button.d.ts

@@ -22,4 +22,4 @@ export interface IconButtonProps {
     theme?: 'default' | 'secondary' | 'light';
     type?: 'button' | 'submit' | 'reset';
 }
-export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/buttons/link/link.d.ts

@@ -20,4 +20,9 @@ export interface LinkProps {
     target?: string;
     title?: string;
 }
-export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLElement>>;
+export declare const Link: {
+    ({ children, className: _className, color, hasUnderline, href, hrefLang, id, ignoreLocalePrefix, isDisabled, lang, onClick, onKeyUp, ref, rel, role, route, tabIndex, target, title, ...rest }: LinkProps & {
+        ref?: React.RefObject<HTMLElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/buttons/link/link.js

@@ -1,18 +1,17 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useRouteLink } from '../../shared/routing/use-route-link.js';
 import styles from './link.module.css.js';
 
-const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, hrefLang, id, ignoreLocalePrefix, isDisabled, lang, onClick, onKeyUp, rel, role, route, tabIndex, target, title, ...rest }, ref) => {
+const Link = ({ children, className: _className, color, hasUnderline, href, hrefLang, id, ignoreLocalePrefix, isDisabled, lang, onClick, onKeyUp, ref, rel, role, route, tabIndex, target, title, ...rest }) => {
     const { getRouteLinkProps, RouteLinkElement } = useRouteLink(ignoreLocalePrefix);
     const className = clsx(styles['link'], hasUnderline && styles['has-underline'], color && styles[color], _className);
     if (href) {
         return (jsx(RouteLinkElement, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, hrefLang: hrefLang, id: id, lang: lang, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
     }
     return (jsx("button", { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, lang: lang, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
-});
+};
 Link.displayName = 'Link';
 
 export { Link };

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

@@ -12,4 +12,4 @@ export interface TableCardProps {
     stickyHeader?: boolean;
     title?: TranslationId;
 }
-export declare const TableCard: React.ForwardRefExoticComponent<TableCardProps & React.RefAttributes<HTMLElement>>;
+export declare const TableCard: import("react").ForwardRefExoticComponent<TableCardProps & import("react").RefAttributes<HTMLElement>>;

package/dist/carousel/carousel-navigation-button.d.ts

@@ -4,5 +4,5 @@ interface CarouselNavigationButtonProps {
     direction: SwipeDirection;
     onClick?: (direction: SwipeDirection) => void;
 }
-export declare const CarouselNavigationButton: React.ForwardRefExoticComponent<CarouselNavigationButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const CarouselNavigationButton: import("react").ForwardRefExoticComponent<CarouselNavigationButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/collapsables/cascading-component/cascading-component-container-context.d.ts

@@ -1,2 +1,2 @@
 import { CascadingComponentContainerContextType } from './types';
-export declare const CascadingComponentContainerContext: React.Context<CascadingComponentContainerContextType | null>;
+export declare const CascadingComponentContainerContext: import("react").Context<CascadingComponentContainerContextType | null>;

package/dist/collapsables/unmounter/unmounter.d.ts

@@ -4,7 +4,7 @@ export interface UnmounterContextType {
     unmount: boolean;
     unregisterChild: () => void;
 }
-export declare const UnmounterContext: React.Context<UnmounterContextType | null>;
+export declare const UnmounterContext: import("react").Context<UnmounterContextType | null>;
 export declare function useUnmount(): UnmounterContextType | null;
 export declare function Unmounter({ children: children, onUnmounted, onUnmountReady, unmount: _unmount, }: {
     children: ReactNode;

package/dist/collapsables/unmounter/unmounter.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useMemo, useContext } from 'react';
+import { createContext, useContext, useState, useEffect, useMemo } from 'react';
 
 const UnmounterContext = createContext(null);
 function useUnmount() {

package/dist/cookies/cookie-context.d.ts

@@ -1,2 +1,2 @@
 import { CookieContextValue } from './types';
-export declare const CookieContext: React.Context<CookieContextValue | undefined>;
+export declare const CookieContext: import("react").Context<CookieContextValue | undefined>;

package/dist/country-language-selector/country-language-selector.js

@@ -19,7 +19,7 @@ function CountryLanguageSelector({ className, defaultSelectedOption, isOpen, onC
         const height = size.height;
         document?.documentElement.style.setProperty('--clselector-height', `${height}px`);
     });
-    const focusTimeoutRef = useRef();
+    const focusTimeoutRef = useRef(undefined);
     useEffect(() => {
         // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
         setIsInitialized(true);

package/dist/forms/elements/textarea/textarea.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { useContextProps, TextAreaContext, TextArea as TextArea$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import styles from './textarea.module.css.js';
@@ -11,7 +11,7 @@ import styles from './textarea.module.css.js';
  * The initial height is calculated based on the style of the textarea.
  * The height is updated everytime the user types.
  */
-const TextArea = forwardRef(({ autoGrow, className, label, size, variant = 'solid', ...textAreaProps }, _ref) => {
+const TextArea = ({ autoGrow, className, label, ref: _ref, size, variant = 'solid', ...textAreaProps }) => {
     const textAreaRef = useRef(null);
     const [props, ref] = useContextProps(textAreaProps, textAreaRef, TextAreaContext);
     const initialHeight = useRef(null);
@@ -42,14 +42,13 @@ const TextArea = forwardRef(({ autoGrow, className, label, size, variant = 'soli
         updateHeight();
     }, [ref, autoGrow, updateHeight, size]);
     return (jsx(Fragment, { children: jsx("div", { className: clsx(className, styles['input-container'], styles[variant]), children: jsx(TextArea$1, { "aria-label": label, ...textAreaProps, ref: node => {
-                    ref.current =
-                        node;
-                    return (textAreaRef.current = node);
+                    ref.current = node;
+                    textAreaRef.current = node;
                 }, onInput: e => {
                     updateHeight();
                     props.onInput?.(e);
                 } }) }) }));
-});
+};
 TextArea.displayName = 'TextArea';
 
 export { TextArea };

package/dist/forms/fields/number-field/number-field.d.ts

@@ -1,4 +1,4 @@
-import { FocusEvent, FormEventHandler } from 'react';
+import { FocusEvent, SyntheticEvent } from 'react';
 import { ValidateFunction } from '../../elements/field-error/field-error';
 export interface NumberFieldProps {
     autoFocus?: boolean;
@@ -21,7 +21,7 @@ export interface NumberFieldProps {
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
     onChange?: (value: number) => void;
     onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
-    onInput?: FormEventHandler<HTMLInputElement>;
+    onInput?: (e: SyntheticEvent<HTMLInputElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
     showLabel?: boolean;
@@ -31,4 +31,9 @@ export interface NumberFieldProps {
     value?: number;
     withButtons?: boolean;
 }
-export declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
+export declare const NumberField: {
+    ({ autoGrow, className, "data-test-selector": dataTestSelector, defaultValue, formatOptions, info, inputMode, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onBlur, onChange, onFocus, onInput, onKeyUp, placeholder, ref, showLabel, size, step, value, withButtons, }: NumberFieldProps & {
+        ref?: React.RefObject<HTMLInputElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/forms/fields/number-field/number-field.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { NumberField as NumberField$1, Button } from 'react-aria-components';
 import clsx from 'clsx';
 import { Icon } from '../../../icon/icon.js';
@@ -24,7 +24,7 @@ function NumberFieldControls({ active, children, isDisabled, showReset, }) {
 }
 let debouncedChange;
 let debouncedKeyup;
-const NumberField = forwardRef(({ autoGrow, className, 'data-test-selector': dataTestSelector, defaultValue, formatOptions = defaultFormatOptions, info, inputMode = 'numeric', isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue = 0, name, onBlur, onChange, onFocus, onInput, onKeyUp, placeholder, showLabel, size = 'lg', step = 1, value, withButtons, }, ref) => {
+const NumberField = ({ autoGrow, className, 'data-test-selector': dataTestSelector, defaultValue, formatOptions = defaultFormatOptions, info, inputMode = 'numeric', isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue = 0, name, onBlur, onChange, onFocus, onInput, onKeyUp, placeholder, ref, showLabel, size = 'lg', step = 1, value, withButtons, }) => {
     const t = useFormattedMessage();
     const inputRef = useRef(null);
     const [showControlsReset, setShowControlsReset] = useState((defaultValue || value || 0) - step <= minValue);
@@ -49,7 +49,7 @@ const NumberField = forwardRef(({ autoGrow, className, 'data-test-selector': dat
     return (jsx(NumberField$1, { "aria-label": label, className: clsx(styles['number-field'], styles[size], className), "data-test-selector": dataTestSelector, decrementAriaLabel: t('Decrease'), defaultValue: defaultValue, formatOptions: formatOptions, incrementAriaLabel: t('Increase'), isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: value => {
             handleChange(value);
         }, onInput: onInput, onKeyUp: handleKeyUp, step: step, value: value, children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: jsx(NumberFieldControls, { active: withButtons, isDisabled: isDisabled, showReset: showControlsReset, children: jsx(Input, { ref: multiRef(inputRef, ref), autoGrow: autoGrow, "data-test-selector": "value", inputMode: inputMode, label: label, maxLength: maxLength, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, size: size }) }) }) }));
-});
+};
 NumberField.displayName = 'NumberField';
 
 export { NumberField };

package/dist/forms/fields/text-field/text-field.d.ts

@@ -1,4 +1,4 @@
-import { FocusEvent, FormEventHandler } from 'react';
+import { FocusEvent, SyntheticEvent } from 'react';
 import { ValidateFunction } from '../../elements/field-error/field-error';
 interface TextFieldPropsBase {
     autoComplete?: string;
@@ -19,7 +19,7 @@ interface TextFieldPropsBase {
     minLength?: number;
     name?: string;
     onChange?: (value: string) => void;
-    onInput?: FormEventHandler<HTMLInputElement>;
+    onInput?: (e: SyntheticEvent<HTMLInputElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
     role?: string;

package/dist/global-search/search-input/search-input.d.ts

@@ -1,8 +1,8 @@
 import { Autocomplete } from '../types';
 export interface SearchInputProps {
     autocomplete?: Autocomplete;
-    formRef: React.RefObject<HTMLFormElement>;
-    inputRef: React.RefObject<HTMLInputElement>;
+    formRef: React.RefObject<HTMLFormElement | null>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     onCancel?: VoidFunction;
     onSubmit?: VoidFunction;
     placeholder?: string;

package/dist/global-search/types.d.ts

@@ -13,10 +13,10 @@ export type Autocomplete = AutocompleteApi<AutocompleteItem, React.BaseSynthetic
 export type AutocompleteState = _AutocompleteState<AutocompleteItem>;
 export type GlobalSearchContextValue = {
     autocomplete: Autocomplete;
-    formRef: React.RefObject<HTMLFormElement>;
+    formRef: React.RefObject<HTMLFormElement | null>;
     indexes: Indexes;
-    inputRef: React.RefObject<HTMLInputElement>;
-    panelRef: React.RefObject<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    panelRef: React.RefObject<HTMLDivElement | null>;
     productsIndexName: string;
     productsQuerySuggestionsIndexName: string;
     searchClient: SearchClient;

package/dist/intl/intl-context.d.ts

@@ -13,4 +13,4 @@ export interface IntlContextType {
     updateCultureCode?: UpdateCultureCode;
     updateCurrencyCode?: UpdateCurrencyCode;
 }
-export declare const IntlContext: React.Context<IntlContextType | undefined>;
+export declare const IntlContext: import("react").Context<IntlContextType | undefined>;

package/dist/intl/missing-translation-provider.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from 'react';
 interface MissingTranslationProviderProps {
     children: ReactNode;
 }
-export declare function MissingTranslationProvider({ children, }: MissingTranslationProviderProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export declare function MissingTranslationProvider({ children, }: MissingTranslationProviderProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 export {};

package/dist/lists/menu-list/menu-list-provider.d.ts

@@ -3,7 +3,7 @@ export interface MenuListContextValue {
     canCollapse: boolean;
     registerCanCollapse: (canCollapse: boolean) => () => void;
 }
-export declare const MenuListContext: React.Context<MenuListContextValue | undefined>;
+export declare const MenuListContext: import("react").Context<MenuListContextValue | undefined>;
 export declare function MenuListProvider({ children, }: {
     children: ReactNode | ((args: {
         canCollapse: boolean;

package/dist/navigation/panel-navigation/panel-navigation.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import { CascadingComponent } from '../../collapsables/cascading-component/cascading-component.js';
 import { CascadingComponentContainer } from '../../collapsables/cascading-component/cascading-component-container.js';
@@ -19,8 +19,8 @@ const focusableSelectors = [
     'select:not([disabled])',
     '[tabindex]:not([tabindex="-1"])',
 ].join(',');
-const NavigationMenu = forwardRef(({ allowBack, back, children, className, header, id, isNarrow, linkItems, scrollable, variant, }, ref) => {
-    const menuRef = useRef();
+const NavigationMenu = ({ allowBack, back, children, className, header, id, isNarrow, linkItems, ref, scrollable, variant, }) => {
+    const menuRef = useRef(null);
     const submenuRef = useRef(null);
     const [selectedNavigationLink, setSelectedNavigationLink] = useState();
     const [selectedNavigationVisible, setSelectedNavigationVisible] = useState(false);
@@ -35,9 +35,7 @@ const NavigationMenu = forwardRef(({ allowBack, back, children, className, heade
         setSelectedNavigationVisible(Boolean(selectedNavigationLink));
     }, [selectedNavigationLink]);
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), "data-test-selector": "panelNavigation", id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: linkItems?.map(link => link.type === 'link-group' && link.items.length > 0 ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, "data-test-selector": "panelNavigationItem", image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key
-                                ? undefined
-                                : link), children: link.label }, link.key)) : (jsx(MenuListItem, { "data-test-selector": "panelNavigationItem", href: link.href, image: link.image, openInNewTab: link.openInNewTab, children: link.label }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: () => {
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: multiRef(ref, menuRef), className: clsx(styles['panel'], isNarrow && styles['narrow'], className), "data-test-selector": "panelNavigation", id: id, children: [jsx(MenuList, { back: back, header: header, scrollable: scrollable, variant: variant, children: linkItems?.map(link => link.type === 'link-group' && link.items.length > 0 ? (jsx(MenuListItem, { hasChildren: true, "aria-controls": `menu-${link.key}`, "data-test-selector": "panelNavigationItem", image: link.image, isSelected: selectedNavigationLink?.key === link.key, onClick: () => setSelectedNavigationLink(selectedNavigationLink?.key === link.key ? undefined : link), children: link.label }, link.key)) : (jsx(MenuListItem, { "data-test-selector": "panelNavigationItem", href: link.href, image: link.image, openInNewTab: link.openInNewTab, children: link.label }, link.key))) }), children] }), jsx(CascadingComponent, { isVisible: selectedNavigationVisible, nodeRef: submenuRef, onEntered: onFocus(submenuRef), onExited: () => {
                     onFocus(menuRef);
                     setSelectedNavigationLink(undefined);
                 }, children: jsx(NavigationMenu, { ref: submenuRef, allowBack: allowBack, back: allowBack
@@ -57,7 +55,7 @@ const NavigationMenu = forwardRef(({ allowBack, back, children, className, heade
                         isNavigationLinkGroup(selectedNavigationLink)
                         ? selectedNavigationLink.items
                         : [] }, selectedNavigationLink?.key) })] }));
-});
+};
 NavigationMenu.displayName = 'NavigationMenu';
 function PanelNavigation({ allowBack, children, className, 'data-test-selector': dataTestSelector, header, id, isNarrow, linkItems, variant, }) {
     return (jsx("section", { className: clsx(styles['panel-navigation'], className), "data-test-selector": dataTestSelector, id: id, children: jsx(CascadingComponentContainer, { children: jsx("div", { className: clsx(styles['panels'], isNarrow && styles['narrow']), children: jsx(NavigationMenu, { allowBack: allowBack, className: children ? styles['top-panel'] : undefined, header: header, id: "panel-navigation-first-level", isNarrow: isNarrow, linkItems: linkItems, scrollable: children ? false : undefined, variant: variant, children: children }) }) }) }));

package/dist/notifications/announcements/announcement.d.ts

@@ -4,4 +4,4 @@ export interface AnnouncementProps {
     className?: string;
     onDismiss?: (id: string) => void;
 }
-export declare const Announcement: React.ForwardRefExoticComponent<AnnouncementProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Announcement: import("react").ForwardRefExoticComponent<AnnouncementProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/observers/intersection-observer.d.ts

@@ -12,5 +12,5 @@ interface IntersectionObserverProps {
     /** Callback when the intersection state changes */
     onIntersectingChange?: (isIntersecting: boolean) => void;
 }
-export declare function IntersectionObserverComponent({ children, intersectionObserverInit, isDisabled, isPlaceholder, onIntersectingChange, }: IntersectionObserverProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export declare function IntersectionObserverComponent({ children, intersectionObserverInit, isDisabled, isPlaceholder, onIntersectingChange, }: IntersectionObserverProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 export {};

package/dist/pages/account/sign-in-page/sign-in-page.d.ts

@@ -1,3 +1,4 @@
-export declare function SignInPage({ returnUrl }?: {
+export declare function SignInPage({ onSuccess, returnUrl, }?: {
+    onSuccess?: () => Promise<string | undefined> | string | undefined;
     returnUrl?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/pages/account/sign-in-page/sign-in-page.js

@@ -18,7 +18,7 @@ import { ChangePasswordDialog } from '../../my-sonic/actions/change-password/cha
 import { SignInForm } from '../components/sign-in-form/sign-in-form.js';
 import { SignInPageLayout } from '../layouts/sign-in-page-layout/sign-in-page-layout.js';
 
-function SignInPage({ returnUrl } = {}) {
+function SignInPage({ onSuccess, returnUrl, } = {}) {
     const paths = usePaths();
     const { navigate } = useNavigate();
     const [userName, setUserName] = useState();
@@ -48,9 +48,10 @@ function SignInPage({ returnUrl } = {}) {
         }
         return 'Unexpected error';
     }, [errorCreateGuest, errorSignIn, setChangePasswordDialogOpen]);
-    const onSignInSuccess = () => {
+    const onSignInSuccess = async () => {
         setIsSuccess(true);
-        navigate(returnUrl || paths.HOME, { reload: true });
+        const overrideUrl = await onSuccess?.();
+        navigate(overrideUrl ?? returnUrl ?? paths.HOME, { reload: true });
     };
     const decodedReturnUrl = returnUrl
         ? decodeURIComponent(returnUrl).toLowerCase()
@@ -61,8 +62,10 @@ function SignInPage({ returnUrl } = {}) {
         resetSignIn();
         resetCreateGuest();
         if (data.guestSignIn) {
-            if (session?.isGuest && session.isAuthenticated)
-                return onSignInSuccess();
+            if (session?.isGuest && session.isAuthenticated) {
+                void onSignInSuccess();
+                return;
+            }
             createGuest(void undefined, { onSuccess: onSignInSuccess });
         }
         else {

package/dist/pages/checkout/payment-page/components/adyen-payment.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import { RefObject } from 'react';
 import Dropin from '@adyen/adyen-web/dist/types/components/Dropin';
 import { CountryCode, CurrencyCode } from '../../../../intl/types';
 import { AdyenPaymentModel } from '../../../../shared/api/storefront/model/storefront.model';
@@ -9,7 +9,7 @@ interface AdyenPaymentProps {
     countryCode: CountryCode;
     currencyCode: CurrencyCode;
     customerId: string;
-    dropinRef: MutableRefObject<Dropin | null>;
+    dropinRef: RefObject<Dropin | null>;
     environment: 'test' | 'live' | 'live-us' | 'live-au' | 'live-apse' | 'live-in';
     isDisabled?: boolean;
     onComplete: (result: AdyenPaymentModel) => Promise<void>;

package/dist/pages/checkout/shipping-page/shipping-page.js

@@ -34,7 +34,7 @@ function ShippingPage() {
         ? countries.find(country => country.id === cart.billTo?.country?.id)
         : selectedCountry;
     const { close: closeCurrencyWarningDialog, isOpen: currencyWarningDialogIsOpen, open: openCurrencyWarningDialog, toggle: toggleCurrencyWarningDialog, } = useDisclosure();
-    const formData = useRef();
+    const formData = useRef(undefined);
     const { data: fulfillmentMethods, isLoading: isLoadingFulfillmentMethods } = useFetchFulfillmentMethodsForCurrentCart();
     const { isLoading: isPatchingSession, mutate: patchSession } = usePatchSession();
     const { error: errorPatchBillingAddress, isError, isLoading: isPatching, isSuccess, mutate: patchShippingDetails, } = usePatchShippingDetails();

package/dist/pages/product/product-listing-page/product-listing-page-provider/product-listing-page-context.d.ts

@@ -5,4 +5,4 @@ export interface ProductListingPageContextType {
     isError?: boolean;
     isLoading?: boolean;
 }
-export declare const ProductListingPageContext: React.Context<ProductListingPageContextType>;
+export declare const ProductListingPageContext: import("react").Context<ProductListingPageContextType>;

package/dist/shared/hooks/use-debounced-callback.js

@@ -3,7 +3,7 @@ import { useRef, useCallback } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useDebouncedCallback(func, delay) {
-    const timeoutId = useRef();
+    const timeoutId = useRef(undefined);
     const debounced = (...args) => new Promise(resolve => {
         if (typeof window === 'undefined')
             return resolve(func(...args));

package/dist/shared/hooks/use-inert.d.ts

@@ -1,3 +1,3 @@
 export declare const useInert: <T extends HTMLElement>(isEnabled: boolean | undefined | null) => {
-    ref: React.MutableRefObject<T | null>;
+    ref: import("react").RefObject<T | null>;
 };

package/dist/shared/hooks/use-intersection-observer.d.ts

@@ -1,6 +1,6 @@
 interface Observable {
     options?: IntersectionObserverInit;
-    ref: React.RefObject<HTMLElement>;
+    ref: React.RefObject<HTMLElement | null>;
 }
 export interface UseIntersectionObserverProps {
     intersectionObserverInit?: IntersectionObserverInit;

package/dist/shared/local-storage/local-storage-context.d.ts

@@ -1,2 +1,2 @@
 import { LocalStorageContextValue } from './types';
-export declare const LocalStorageContext: React.Context<LocalStorageContextValue | undefined>;
+export declare const LocalStorageContext: import("react").Context<LocalStorageContextValue | undefined>;

package/dist/shared/providers/global-state-provider.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, RefObject } from 'react';
 import { EventEmitter } from '../utils/event-emitter';
 declare class State<T> extends EventEmitter<T | undefined> {
     private _state;
@@ -10,12 +10,12 @@ declare class State<T> extends EventEmitter<T | undefined> {
 }
 declare class GlobalState {
     private states;
-    constructor(states: MutableRefObject<Record<string | symbol, State<any>>>);
+    constructor(states: RefObject<Record<string | symbol, State<any>>>);
     get<T>(key: string | symbol): State<T>;
     get<T>(key: string | symbol, initialState: T | undefined): State<T>;
     set<T>(key: string | symbol, state: State<T>): void;
 }
-export declare const GlobalStateProviderContext: React.Context<GlobalState>;
+export declare const GlobalStateProviderContext: import("react").Context<GlobalState>;
 interface GlobalStateProviderProps {
     children: ReactNode;
 }

package/dist/shared/routing/route-context.d.ts

@@ -1,2 +1,2 @@
 import { RouteContextValue } from './types';
-export declare const RouteContext: React.Context<RouteContextValue | undefined>;
+export declare const RouteContext: import("react").Context<RouteContextValue | undefined>;

package/dist/shared/routing/use-route-link-element.d.ts

@@ -1 +1 @@
-export declare function useRouteLinkElement(): React.ElementType<import("./types").RouteLinkElementProps>;
+export declare function useRouteLinkElement(): import("react").ElementType<import("./types").RouteLinkElementProps>;

package/dist/shared/routing/use-route-link.d.ts

@@ -1,6 +1,6 @@
 import { NavigateOptions } from './types';
 export declare function useRouteLink(ignoreLocalePrefix?: boolean): {
-    RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps>;
+    RouteLinkElement: import("react").ElementType<import("./types").RouteLinkElementProps>;
     getRouteLinkProps: (href: string, route?: NavigateOptions) => {
         href: string;
         onNavigate: () => void;

package/dist/shared/routing/with-routing.d.ts

@@ -4,5 +4,5 @@ export interface WithRoutingProps {
     href?: string;
     route?: NavigateOptions;
 }
-export declare function withRouting(component: ElementType<RouteLinkElementProps>): React.FunctionComponent<RouteLinkElementProps>;
-export declare const FallbackRouteLink: React.FunctionComponent<RouteLinkElementProps>;
+export declare function withRouting(component: ElementType<RouteLinkElementProps>): import("react").FunctionComponent<RouteLinkElementProps>;
+export declare const FallbackRouteLink: import("react").FunctionComponent<RouteLinkElementProps>;

package/dist/shared/utils/refs.d.ts

@@ -1,2 +1,2 @@
-import { ForwardedRef, LegacyRef, MutableRefObject } from 'react';
-export declare function multiRef<T extends HTMLElement>(...refs: (ForwardedRef<T> | MutableRefObject<T | undefined>)[]): LegacyRef<T>;
+import { ForwardedRef, Ref, RefObject } from 'react';
+export declare function multiRef<T extends HTMLElement>(...refs: (ForwardedRef<T> | RefObject<T | null | undefined> | null | undefined)[]): Ref<T>;

package/dist/shared/utils/refs.js

@@ -1,10 +1,12 @@
 function multiRef(...refs) {
     return function (el) {
         for (const ref of refs) {
-            if (ref && ref instanceof Function) {
+            if (!ref)
+                continue;
+            if (ref instanceof Function) {
                 ref(el);
             }
-            else if (ref) {
+            else {
                 ref.current = el;
             }
         }

package/dist/shared/utils/scrolling.d.ts

@@ -4,5 +4,5 @@ interface ScrollOptions {
     scrollPadding?: number;
 }
 export declare const scrollToTop: (scrollOptions?: ScrollToOptions) => void;
-export declare const scrollIntoViewRef: (ref: RefObject<HTMLElement>, scrollOptions?: ScrollOptions) => void;
+export declare const scrollIntoViewRef: (ref: RefObject<HTMLElement | null>, scrollOptions?: ScrollOptions) => void;
 export {};

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

@@ -16,4 +16,4 @@ export interface TableContextValue {
         };
     };
 }
-export declare const TableContext: React.Context<TableContextValue | undefined>;
+export declare const TableContext: import("react").Context<TableContextValue | undefined>;

package/dist/table/elements/table-row-context.d.ts

@@ -11,4 +11,4 @@ export interface TableRowContextValue {
         };
     };
 }
-export declare const TableRowContext: React.Context<TableRowContextValue>;
+export declare const TableRowContext: import("react").Context<TableRowContextValue>;

package/dist/toast/toast.d.ts

@@ -5,4 +5,4 @@ export interface ToastProps {
     onClose?: (id: string) => void;
     toastMessage: ToastMessage;
 }
-export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/toast/use-toast.js

@@ -10,7 +10,10 @@ function useToast() {
     return {
         addToast(toastMessage, toastOptions) {
             const id = createUUID();
-            toast(jsx(Toast, { ref: el => el && (el.style.zIndex = (count.current++).toString()), id: id, onClose: id => toast.dismiss(id), toastMessage: toastMessage }), {
+            toast(jsx(Toast, { ref: el => {
+                    if (el)
+                        el.style.zIndex = (count.current++).toString();
+                }, id: id, onClose: id => toast.dismiss(id), toastMessage: toastMessage }), {
                 toastId: id,
                 ...toastOptions,
             });

package/dist/typography/heading/heading.d.ts

@@ -15,9 +15,9 @@ export interface HeadingProps {
     tag?: Tag;
     uppercase?: boolean;
 }
-export declare function Heading({ bold, breakpoints, children, className, 'data-test-selector': dataTestSelector, id, italic, size, tag, uppercase, }: HeadingProps): React.ReactElement<{
+export declare function Heading({ bold, breakpoints, children, className, 'data-test-selector': dataTestSelector, id, italic, size, tag, uppercase, }: HeadingProps): import("react").ReactElement<{
     className: string;
     'data-test-selector': string;
     id: string | undefined;
-}, string | React.JSXElementConstructor<any>>;
+}, string | import("react").JSXElementConstructor<any>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -67,8 +67,8 @@
     "@types/js-cookie": "3.0.6",
     "@types/node": "24.3.0",
     "@types/postcss-import": "14.0.3",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "8.41.0",
     "@typescript-eslint/parser": "8.41.0",
     "@typescript/lib-dom": "npm:typescript-partial-lib-dom@^1.1.0",
@@ -106,8 +106,8 @@
     "postcss-import": "16.1.1",
     "postcss-nested": "7.0.2",
     "prettier": "3.6.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-json-view": "1.21.3",
     "rimraf": "6.0.1",
     "rollup": "4.49.0",