@sonic-equipment/ui 0.0.119 → 1.0.0

package/dist/shared/hooks/use-disclosure.js

@@ -0,0 +1,25 @@
+"use client";
+import { useState, useCallback } from 'react';
+
+const useDisclosure = (initialState = false) => {
+    const [isOpen, setIsOpen] = useState(initialState);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const toggle = useCallback(() => {
+        setIsOpen(prevIsOpen => !prevIsOpen);
+    }, []);
+    return {
+        close,
+        isClosed: !isOpen,
+        isOpen,
+        open,
+        setIsOpen,
+        toggle,
+    };
+};
+
+export { useDisclosure };

package/dist/shared/hooks/use-enable-mobile-zoom.js

@@ -0,0 +1,37 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+function useEnableMobileZoom({ isEnabled }) {
+    const metaRef = useRef(null);
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const meta = document.querySelector('meta[name="viewport"]');
+        if (meta) {
+            metaRef.current = meta.outerHTML;
+        }
+        return () => {
+            if (typeof document === 'undefined' || !metaRef.current)
+                return;
+            const meta = document.querySelector('meta[name="viewport"]');
+            if (meta) {
+                meta.outerHTML = metaRef.current;
+            }
+            else {
+                document.head.outerHTML += metaRef.current;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (typeof document === 'undefined' || !metaRef.current)
+            return;
+        const meta = document.querySelector('meta[name="viewport"]');
+        if (!meta)
+            return;
+        meta.outerHTML = isEnabled
+            ? '<meta name="viewport" content="width=device-width, initial-scale=1" />'
+            : metaRef.current;
+    }, [isEnabled]);
+}
+
+export { useEnableMobileZoom };

package/dist/shared/hooks/use-global-disclosure.d.ts

@@ -0,0 +1,10 @@
+interface UseDisclosureReturnType {
+    close: VoidFunction;
+    isClosed: boolean;
+    isOpen: boolean;
+    open: VoidFunction;
+    setIsOpen: (isOpen: boolean) => void;
+    toggle: VoidFunction;
+}
+export declare const useGlobalDisclosure: (key: string, isInitialOpen?: boolean) => UseDisclosureReturnType;
+export {};

package/dist/shared/hooks/use-global-disclosure.js

@@ -0,0 +1,26 @@
+"use client";
+import { useCallback } from 'react';
+import { useGlobalState } from '../providers/global-state-provider.js';
+
+const useGlobalDisclosure = (key, isInitialOpen = false) => {
+    const [isOpen, setIsOpen] = useGlobalState(key, isInitialOpen);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const toggle = useCallback(() => {
+        setIsOpen(prevIsOpen => !prevIsOpen);
+    }, [setIsOpen]);
+    return {
+        close,
+        isClosed: !isOpen,
+        isOpen,
+        open,
+        setIsOpen,
+        toggle,
+    };
+};
+
+export { useGlobalDisclosure };

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

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

package/dist/shared/hooks/use-inert.js

@@ -0,0 +1,16 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+// TODO: when moving to React 19, we should simply set the inert attribute on the element (boolean value)
+const useInert = (isEnabled) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isEnabled)
+            ref.current?.removeAttribute('inert');
+        else
+            ref.current?.setAttribute('inert', '');
+    }, [isEnabled]);
+    return { ref };
+};
+
+export { useInert };

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

@@ -3,11 +3,14 @@ interface Observable {
     ref: React.RefObject<HTMLElement>;
 }
 export interface UseIntersectionObserverProps {
+    intersectionObserverInit?: IntersectionObserverInit;
     isDisabled?: boolean;
     observables: Observable[];
+    onCallback?: (entries: IntersectionObserverEntry[]) => void;
     onIntersectingChange?: (isIntersecting: boolean) => void;
+    threshold?: number[] | number;
 }
-export declare function useIntersectionObserver({ isDisabled, observables, onIntersectingChange, }: UseIntersectionObserverProps): {
+export declare function useIntersectionObserver({ intersectionObserverInit, isDisabled, observables, onCallback, onIntersectingChange, threshold, }: UseIntersectionObserverProps): {
     isIntersecting: boolean;
 };
 export {};

package/dist/shared/hooks/use-intersection-observer.js

@@ -0,0 +1,69 @@
+"use client";
+import { useState, useRef, useEffect } from 'react';
+
+function useIntersectionObserver({ intersectionObserverInit, isDisabled, observables, onCallback, onIntersectingChange, threshold = 0, }) {
+    const [isIntersecting, setIntersecting] = useState(false);
+    const state = useRef([]);
+    function disconnectObservers() {
+        state.current.forEach(entry => entry.observer.disconnect());
+        state.current = [];
+    }
+    function createObserverEntry(observable) {
+        if (typeof IntersectionObserver === 'undefined' || !observable.ref.current)
+            return;
+        const result = {
+            isIntersecting: false,
+            observable,
+            observer: new IntersectionObserver(entries => {
+                result.isIntersecting = entries.some(entry => entry.isIntersecting);
+                const isCurrentlyAnyIntersecting = state.current.some(entry => entry.isIntersecting);
+                setIntersecting(isCurrentlyAnyIntersecting);
+                if (isCurrentlyAnyIntersecting !== isIntersecting) {
+                    onIntersectingChange?.(isCurrentlyAnyIntersecting);
+                }
+                onCallback?.(entries);
+            }, {
+                rootMargin: '0px',
+                threshold,
+                ...observable.options,
+                ...intersectionObserverInit,
+            }),
+        };
+        result.observer.observe(observable.ref.current);
+        return result;
+    }
+    useEffect(() => {
+        if (isDisabled)
+            return disconnectObservers();
+        if (state.current.length === 0) {
+            if (observables.length === 0)
+                return;
+            state.current = observables.map(createObserverEntry).filter(Boolean);
+        }
+        else {
+            // Find all new observables
+            observables.forEach(observable => {
+                if (!state.current.some(entry => entry.observable === observable)) {
+                    const entry = createObserverEntry(observable);
+                    if (entry)
+                        state.current.push(entry);
+                }
+            });
+            // Find all removed observables
+            const removedEntries = state.current.find(entry => {
+                return !observables.includes(entry.observable);
+            });
+            removedEntries?.observer.disconnect();
+            state.current = state.current.filter(entry => {
+                return observables.includes(entry.observable);
+            });
+        }
+        return () => {
+            disconnectObservers();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [observables, isDisabled]);
+    return { isIntersecting };
+}
+
+export { useIntersectionObserver };

package/dist/shared/hooks/use-is-breakpoint.js

@@ -0,0 +1,20 @@
+"use client";
+import { useCallback, useState, useEffect } from 'react';
+import { getCurrentBreakpoints } from '../utils/breakpoints.js';
+
+function useIsBreakpoint(breakpoint) {
+    const checkIsMatch = useCallback(() => getCurrentBreakpoints()[breakpoint], [breakpoint]);
+    const [isMatch, setIsMatch] = useState(checkIsMatch);
+    const handleResize = useCallback(() => setIsMatch(checkIsMatch()), [checkIsMatch]);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window?.removeEventListener('resize', handleResize);
+        };
+    }, [handleResize]);
+    return isMatch;
+}
+
+export { useIsBreakpoint };

package/dist/shared/hooks/use-is-scrolled-beyond-element.d.ts

@@ -0,0 +1 @@
+export declare function useIsScrolledBeyondElement(element: HTMLElement | undefined): boolean;

package/dist/shared/hooks/use-is-scrolled-beyond-element.js

@@ -0,0 +1,27 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+function getElementYPosition(element) {
+    if (!element)
+        return undefined;
+    const rect = element.getBoundingClientRect();
+    return rect.top + (window?.scrollY || 0);
+}
+function useIsScrolledBeyondElement(element) {
+    const [isScrolledBeyond, setIsScrolledBeyond] = useState(() => (window?.scrollY || 0) > (getElementYPosition(element) || 0));
+    useEffect(() => {
+        if (!element)
+            return;
+        function handleScroll() {
+            const elementY = getElementYPosition(element);
+            setIsScrolledBeyond((window?.scrollY || 0) + (window?.innerHeight || 0) > (elementY || 0));
+        }
+        window?.addEventListener('scroll', handleScroll);
+        return () => {
+            window?.removeEventListener('scroll', handleScroll);
+        };
+    }, [element]);
+    return isScrolledBeyond;
+}
+
+export { useIsScrolledBeyondElement };

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

@@ -0,0 +1,3 @@
+export declare function useMutationObserver<T extends Node>(onChange: MutationCallback, options: MutationObserverInit): {
+    ref: (el: T | null) => void;
+};

package/dist/shared/hooks/use-mutation-observer.js

@@ -0,0 +1,28 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+function useMutationObserver(onChange, options) {
+    const mutationObserver = useRef(typeof MutationObserver === 'undefined'
+        ? undefined
+        : new MutationObserver(onChange));
+    const ref = useRef(document?.body);
+    useEffect(() => {
+        if (ref.current)
+            mutationObserver.current?.observe(ref.current, options);
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            mutationObserver.current?.disconnect();
+        };
+    }, [options]);
+    return {
+        ref: (el) => {
+            ref.current = el;
+            mutationObserver.current?.disconnect();
+            if (!ref.current)
+                return;
+            mutationObserver.current?.observe(ref.current, options);
+        },
+    };
+}
+
+export { useMutationObserver };

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

@@ -1,4 +1,4 @@
-export declare function useResizeObserver(resizeCallback: (target: Element, size: DOMRectReadOnly, position: DOMRectReadOnly | undefined) => void): {
-    ref: <T extends HTMLElement>(el: T | null) => void;
+export declare function useResizeObserver<T extends HTMLElement>(resizeCallback: (target: T, size: DOMRectReadOnly, position: DOMRectReadOnly | undefined) => void): {
+    ref: (el: T | null) => void;
     size: DOMRectReadOnly | undefined;
 };

package/dist/shared/hooks/use-resize-observer.js

@@ -0,0 +1,38 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+// Note on this hook: it does not seem to work on a component that is mounted conditionally
+function useResizeObserver(resizeCallback) {
+    let size;
+    function onResize(entries, _observer) {
+        const entry = entries[0];
+        const position = entry?.target.getClientRects()[0];
+        size = entry?.contentRect;
+        const target = entry?.target;
+        if (!size || !target)
+            return;
+        resizeCallback(target, size, position);
+    }
+    const resizeObserver = useRef(typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(onResize));
+    const ref = useRef(null);
+    useEffect(() => {
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            resizeObserver.current?.disconnect();
+        };
+    }, []);
+    return {
+        ref: (el) => {
+            ref.current = el;
+            resizeObserver.current?.disconnect();
+            if (!ref.current)
+                return;
+            resizeObserver.current?.observe(ref.current);
+        },
+        size,
+    };
+}
+
+export { useResizeObserver };

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

@@ -0,0 +1,15 @@
+interface UseScriptCodePropsBase {
+    async?: boolean;
+    enabled?: boolean;
+    type?: 'module' | 'text/javascript';
+}
+interface UseScriptCodeProps extends UseScriptCodePropsBase {
+    code: string;
+    nonce?: string;
+}
+interface UseScriptUrlProps extends UseScriptCodePropsBase {
+    src: string;
+}
+type UseScriptProps = UseScriptUrlProps | UseScriptCodeProps;
+export declare function useScript(args: UseScriptProps): void;
+export {};

package/dist/shared/hooks/use-script.js

@@ -0,0 +1,34 @@
+"use client";
+import { useEffect } from 'react';
+
+const loadedScripts = {};
+const injectedCode = [];
+function useScript(args) {
+    useEffect(() => {
+        if (!document || args.enabled === false)
+            return;
+        const script = document.createElement('script');
+        script.type = args.type || '';
+        script.async = args.async || false;
+        if ('code' in args) {
+            if (injectedCode.includes(args.code))
+                return;
+            script.innerHTML = args.code;
+            if (args.nonce)
+                script.setAttribute('nonce', args.nonce);
+            injectedCode.push(args.code);
+        }
+        else {
+            if (loadedScripts[args.src])
+                return;
+            script.src = args.src;
+            loadedScripts[args.src] = true;
+        }
+        document.body.append(script);
+        return () => {
+            script.remove();
+        };
+    }, [args]);
+}
+
+export { useScript };

package/dist/shared/hooks/use-scroll-lock.js

@@ -0,0 +1,12 @@
+"use client";
+import { useEffect } from 'react';
+
+const useScrollLock = (lock) => {
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        document.body.style.overflow = lock ? 'hidden' : 'auto';
+    }, [lock]);
+};
+
+export { useScrollLock };

package/dist/shared/hooks/use-watch-css-property.d.ts

@@ -0,0 +1 @@
+export declare function useWatchCssProperty(property: string): string | number | undefined;

package/dist/shared/hooks/use-watch-css-property.js

@@ -0,0 +1,37 @@
+"use client";
+import { useState, useEffect } from 'react';
+import { getCssPropertyValue } from '../utils/css.js';
+
+function useWatchCssProperty(property) {
+    const [value, setValue] = useState(() => {
+        try {
+            return getCssPropertyValue(property);
+        }
+        catch {
+            // If the property can not be retrieved, return undefined
+            return;
+        }
+    });
+    useEffect(() => {
+        if (typeof MutationObserver === 'undefined' ||
+            typeof document === 'undefined')
+            return;
+        const mutationObserver = new MutationObserver(() => {
+            if (typeof document === 'undefined')
+                return;
+            const propertyValue = getCssPropertyValue(property);
+            setValue(propertyValue);
+        });
+        mutationObserver.observe(document.body, {
+            attributes: true,
+            childList: false,
+            subtree: true,
+        });
+        return () => {
+            mutationObserver.disconnect();
+        };
+    }, [property]);
+    return value;
+}
+
+export { useWatchCssProperty };

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

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

package/dist/shared/local-storage/local-storage-context.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const LocalStorageContext = createContext(undefined);
+
+export { LocalStorageContext };

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

@@ -0,0 +1,5 @@
+export declare function LocalStorageProvider({ children, localStorage, sessionStorage, }: {
+    children: React.ReactNode;
+    localStorage: Storage;
+    sessionStorage: Storage;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/shared/local-storage/local-storage-provider.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { LocalStorageContext } from './local-storage-context.js';
+
+function LocalStorageProvider({ children, localStorage, sessionStorage, }) {
+    const value = useMemo(() => ({
+        localStorage,
+        sessionStorage,
+    }), [localStorage, sessionStorage]);
+    return (jsx(LocalStorageContext.Provider, { value: value, children: children }));
+}
+
+export { LocalStorageProvider };

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

@@ -0,0 +1,10 @@
+export declare class MockStorage implements Storage {
+    private _state;
+    constructor();
+    get length(): number;
+    clear(): void;
+    getItem(key: string): string | null;
+    key(index: number): string | null;
+    removeItem(key: string): void;
+    setItem(key: string, value: string): void;
+}

package/dist/shared/local-storage/storage-mock.js

@@ -0,0 +1,34 @@
+class MockStorage {
+    constructor() {
+        Object.defineProperty(this, "_state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+    }
+    get length() {
+        return Object.keys(this._state).length;
+    }
+    clear() {
+        this._state = {};
+    }
+    getItem(key) {
+        return Object.prototype.hasOwnProperty.call(this._state, key)
+            ? this._state[key] || null
+            : null;
+    }
+    key(index) {
+        const keys = Object.keys(this._state);
+        return index >= 0 && index < keys.length ? keys[index] || null : null;
+    }
+    removeItem(key) {
+        if (Object.prototype.hasOwnProperty.call(this._state, key))
+            delete this._state[key];
+    }
+    setItem(key, value) {
+        this._state[key] = value;
+    }
+}
+
+export { MockStorage };

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

@@ -0,0 +1,4 @@
+export interface LocalStorageContextValue {
+    localStorage: Storage;
+    sessionStorage: Storage;
+}

package/dist/shared/local-storage/use-local-storage.js

@@ -0,0 +1,24 @@
+"use client";
+import { useContext, useState } from 'react';
+import { LocalStorageContext } from './local-storage-context.js';
+
+function useLocalStorage(key, initialState) {
+    const { localStorage } = useContext(LocalStorageContext) ?? {
+        localStorage: typeof window === 'undefined' ? undefined : window.localStorage,
+    };
+    const storedValue = localStorage?.getItem(key);
+    const [internalValue, setInternalValue] = useState(storedValue ? JSON.parse(storedValue) : initialState);
+    function setValue(value) {
+        const valueToStore = value instanceof Function ? value(internalValue) : value;
+        if (valueToStore === undefined) {
+            localStorage?.removeItem(key);
+        }
+        else {
+            setInternalValue(valueToStore);
+            localStorage?.setItem(key, JSON.stringify(valueToStore));
+        }
+    }
+    return [internalValue, setValue];
+}
+
+export { useLocalStorage };

package/dist/shared/local-storage/use-session-storage.js

@@ -0,0 +1,24 @@
+"use client";
+import { useContext, useState } from 'react';
+import { LocalStorageContext } from './local-storage-context.js';
+
+function useSessionStorage(key, initialState) {
+    const { sessionStorage } = useContext(LocalStorageContext) ?? {
+        sessionStorage: typeof window === 'undefined' ? undefined : window.sessionStorage,
+    };
+    const storedValue = sessionStorage?.getItem(key);
+    const [internalValue, setInternalValue] = useState(storedValue ? JSON.parse(storedValue) : initialState);
+    function setValue(value) {
+        const valueToStore = value instanceof Function ? value(internalValue) : value;
+        if (valueToStore === undefined) {
+            sessionStorage?.removeItem(key);
+        }
+        else {
+            setInternalValue(valueToStore);
+            sessionStorage?.setItem(key, JSON.stringify(valueToStore));
+        }
+    }
+    return [internalValue, setValue];
+}
+
+export { useSessionStorage };

package/dist/shared/model/account.d.ts

@@ -0,0 +1,19 @@
+export declare const validatePassword: (value: string) => boolean;
+export interface AccountBase {
+    email: string;
+    firstName?: string;
+    isSubscribed: boolean;
+    lastName: string;
+    password: string;
+}
+export interface PrivateAccount extends AccountBase {
+    companyName?: string | undefined;
+    countryCode: string;
+    isPrivateAccount: true;
+}
+export interface BusinessAccount extends AccountBase {
+    companyName: string;
+    countryCode: string;
+    isPrivateAccount: false;
+}
+export type Account = PrivateAccount | BusinessAccount;

package/dist/shared/model/account.js

@@ -0,0 +1,4 @@
+const passwordRequirementsRegExp = new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*\W).{8,}$/);
+const validatePassword = (value) => passwordRequirementsRegExp.test(value);
+
+export { validatePassword };

package/dist/shared/model/address.d.ts

@@ -0,0 +1,30 @@
+import { Country } from './countries-languages';
+export declare const validatePhone: (value: string) => boolean;
+export declare const validateEmail: (value: string) => boolean;
+export interface AddressCountry {
+    abbreviation: string;
+    id: string;
+    name: string;
+    states: {
+        abbreviation: string;
+        id: string;
+        name: string;
+    }[] | null;
+}
+export interface Address {
+    address1: string;
+    address2: string;
+    address3: string;
+    attention: string;
+    city: string;
+    companyName: string;
+    country: AddressCountry | null | undefined | string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    phone: string;
+    postalCode: string;
+}
+export interface ValidAddress extends Omit<Address, 'country'> {
+    country: Country;
+}

package/dist/shared/model/address.js

@@ -0,0 +1,7 @@
+// Source: src/FrontEnd/modules/client-framework/src/Store/CommonHandlers/ValidateAddress.ts
+const phoneRegex = /^([\s()+./-]*\d\s?(ext)?[\s()+./-]*){10,}$/;
+const validatePhone = (value) => phoneRegex.test(value);
+const emailRegex = /^\w+(["+.-]\w+)*@\w+([.-]\w+)*\.\w+([.-]\w+)*$/;
+const validateEmail = (value) => emailRegex.test(value);
+
+export { validateEmail, validatePhone };