@sonic-equipment/ui 0.0.119 → 120.0.0

package/dist/shared/fetch/request.d.ts

@@ -53,9 +53,14 @@ type RequestHeadersWithBody = RequestHeaders & {
     'Content-Type': string;
 };
 interface BaseRequestOptions {
+    cache?: RequestCache;
     credentials?: RequestCredentials;
     headers?: RequestHeaders;
     method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS';
+    next?: {
+        revalidate?: number | false;
+        tags?: string[];
+    };
     params?: Record<string, any>;
     timeout?: number;
     url: string;

package/dist/shared/fetch/request.js

@@ -0,0 +1,263 @@
+import qs from 'query-string';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isResponse = (response) => Boolean(response?.json);
+class RequestError extends Error {
+    constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    responseOrError, options, status, statusText) {
+        super(isResponse(responseOrError)
+            ? `${responseOrError.status || status || -1}: ${responseOrError.statusText || statusText}`
+            : responseOrError?.message || responseOrError, {
+            cause: responseOrError,
+        });
+        Object.defineProperty(this, "isRequestError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: -1
+        });
+        Object.defineProperty(this, "statusText", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Object.defineProperty(this, "body", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        if (isResponse(responseOrError)) {
+            this.status = responseOrError.status || status || -1;
+            this.statusText = responseOrError.statusText || statusText;
+        }
+        else {
+            this.status = -1;
+        }
+        this.context = options?.context;
+        this.body = options?.body;
+        this.options = options?.options;
+        // eslint-disable-next-line unicorn/custom-error-definition
+        this.name = this.name || this.constructor.name || 'RequestError';
+    }
+    toJSON() {
+        return {
+            context: this.context,
+            error: {
+                message: this.message,
+                stack: this.stack,
+            },
+            isRequestError: this.isRequestError,
+            request: {
+                ...this.options,
+            },
+            response: {
+                body: this.body,
+                status: this.status,
+                statusText: this.statusText,
+            },
+        };
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isRequestError = (error) => Boolean(error?.isRequestError);
+class BadRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 400, 'bad request');
+        this.name = 'BadRequestError';
+    }
+}
+class UnauthorizedRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 401, 'unauthorized');
+        this.name = 'UnauthorizedRequestError';
+    }
+}
+class ForbiddenRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 403, 'forbidden');
+        this.name = 'ForbiddenRequestError';
+    }
+}
+class NotFoundRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 404, 'not found');
+        this.name = 'NotFoundRequestError';
+    }
+}
+class MethodNotAllowedRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 405, 'method not allowed');
+        this.name = 'MethodNotAllowedRequestError';
+    }
+}
+class UnprocessableContentRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 422, 'unprocessable content');
+        this.name = 'UnprocessableContentRequestError';
+    }
+}
+class TimeoutRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, -1, `timeout occured after ${options?.options?.timeout || 'unknown'}ms`);
+        this.name = 'TimeoutRequestError';
+    }
+}
+class InternalServerErrorRequestError extends RequestError {
+    constructor(responseOrError, options) {
+        super(responseOrError, options, 500, 'internal server error');
+        this.name = 'InternalServerErrorRequestError';
+    }
+}
+const createRequestError = (
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+responseOrError, options, flags) => {
+    if (isResponse(responseOrError)) {
+        switch (responseOrError.status) {
+            case 400:
+                return new BadRequestError(responseOrError, options);
+            case 401:
+                return new UnauthorizedRequestError(responseOrError, options);
+            case 403:
+                return new ForbiddenRequestError(responseOrError, options);
+            case 404:
+                return new NotFoundRequestError(responseOrError, options);
+            case 405:
+                return new MethodNotAllowedRequestError(responseOrError, options);
+            case 422:
+                return new UnprocessableContentRequestError(responseOrError, options);
+            case 500:
+                return new InternalServerErrorRequestError(responseOrError, options);
+            default:
+                return new RequestError(responseOrError, options);
+        }
+    }
+    else if (isRequestError(responseOrError)) {
+        return options
+            ? new RequestError(responseOrError, options)
+            : responseOrError;
+    }
+    else {
+        if (flags?.isTimeout) {
+            throw new TimeoutRequestError(new Error(`timeout occured after ${options?.options?.timeout || 'unknown'}ms`), options);
+        }
+        return new RequestError(responseOrError, options);
+    }
+};
+const isJsonBody = (options) => Boolean(options.headers?.['content-type']?.match(/json/i) ||
+    (options.body && typeof options.body === 'object'));
+const isFormData = (body) => body instanceof FormData;
+const createBody = (options) => {
+    const { body, method, url } = options;
+    if (!body || method === 'GET' || method === 'HEAD')
+        return undefined;
+    if (typeof body === 'string')
+        return body;
+    if (isFormData(body))
+        return body;
+    if (isJsonBody(options))
+        return JSON.stringify(body);
+    throw new Error(`request: Unknown body type for request ${url}. Unable to send request.`);
+};
+const createHeaders = (...headers) => {
+    const allHeaders = {};
+    for (const header of headers) {
+        if (!header)
+            continue;
+        for (const key of Object.keys(header)) {
+            if (header[key])
+                allHeaders[key] = header[key];
+        }
+    }
+    return allHeaders;
+};
+/* Because of a bug in the rollup dts package the following code must be put inside of a IIFE.
+ * The bug occurs when assigning properties to the request function at the top level of this file.
+ * request.headers = {}
+ * TODO: Remove the DTS dependency
+ */
+const request = (function createRequestFunction() {
+    const request = async (options) => {
+        let response;
+        let body;
+        let error;
+        let isTimeout = false;
+        try {
+            options = request._beforeHandlers.reduce((options, handler) => handler(options) || options, options);
+            options.timeout = options.timeout || 1000 * 60 * 2;
+            const url = qs.stringifyUrl({ query: options.params, url: options.url });
+            const controller = new AbortController();
+            const id = options.timeout
+                ? setTimeout(() => {
+                    isTimeout = true;
+                    controller.abort();
+                }, options.timeout)
+                : -1;
+            response = await fetch(url, {
+                body: createBody(options),
+                cache: options.cache,
+                credentials: 'include',
+                // 'include' sends cookies and HTTP authentication to the server
+                headers: createHeaders(request.headers, options.headers),
+                method: options.method || 'GET',
+                // @ts-expect-error - TS doesn't know about the next options
+                next: options.next,
+                signal: controller.signal,
+            });
+            clearTimeout(id);
+            const contentType = response.headers.get('content-type');
+            body = contentType?.includes('json')
+                ? (await response.json())
+                : (await response.text());
+            if (!response.ok)
+                throw response;
+            const result = {
+                body,
+                headers: response.headers,
+                status: response.status,
+                statusText: response.statusText,
+            };
+            return result;
+        }
+        catch (err) {
+            error = createRequestError(err, { body, options }, { isTimeout });
+            throw error;
+        }
+        finally {
+            request._afterHandlers.forEach(handler => handler({ body, error, options, response }));
+        }
+    };
+    request.headers = {};
+    request._afterHandlers = [];
+    request._beforeHandlers = [];
+    request.after = (handler) => {
+        request._afterHandlers.push(handler);
+    };
+    request.before = (handler) => {
+        request._beforeHandlers.push(handler);
+    };
+    return request;
+})();
+
+export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isRequestError, request };

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

@@ -0,0 +1,24 @@
+import { useState, useCallback, useEffect } from 'react';
+import { getCurrentBreakpoints } from '../utils/breakpoints.js';
+
+const useBreakpoint = () => {
+    const [device, setDevice] = useState(getCurrentBreakpoints());
+    const handleResize = useCallback(() => {
+        const breakpoints = getCurrentBreakpoints();
+        setDevice(previousBreakpoints => {
+            if (previousBreakpoints.current === breakpoints.current)
+                return previousBreakpoints;
+            return breakpoints;
+        });
+    }, []);
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window?.removeEventListener('resize', handleResize);
+    }, [handleResize]);
+    return device;
+};
+
+export { useBreakpoint };

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

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import Cookies from 'js-cookie';
+
+function useCookie(name, options) {
+    const cookieValue = Cookies.get()[name];
+    const [stateValue, setStateValue] = useState(cookieValue);
+    useEffect(() => {
+        if (cookieValue === stateValue)
+            return;
+        setStateValue(cookieValue);
+    }, [cookieValue, stateValue]);
+    function setValue(valueOrFn) {
+        setStateValue(oldValue => {
+            const newValue = typeof valueOrFn === 'function' ? valueOrFn(oldValue) : valueOrFn;
+            if (newValue) {
+                Cookies.set(name, newValue, options);
+            }
+            else {
+                Cookies.remove(name);
+            }
+            return newValue;
+        });
+    }
+    return [stateValue, setValue];
+}
+
+export { useCookie };

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

@@ -0,0 +1,18 @@
+import { useRef, useCallback } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useDebouncedCallback(func, delay) {
+    const timeoutId = useRef();
+    return useCallback(function debounced(...args) {
+        return new Promise(resolve => {
+            if (typeof window === 'undefined')
+                return resolve(func(...args));
+            clearTimeout(timeoutId.current);
+            timeoutId.current = setTimeout(() => {
+                resolve(func(...args));
+            }, delay);
+        });
+    }, [delay, func]);
+}
+
+export { useDebouncedCallback };

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

@@ -0,0 +1,24 @@
+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,36 @@
+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-intersection-observer.js

@@ -0,0 +1,66 @@
+import { useState, useRef, useEffect } from 'react';
+
+function useIntersectionObserver({ isDisabled, observables, onIntersectingChange, }) {
+    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);
+                }
+            }, {
+                rootMargin: '0px',
+                threshold: 0,
+                ...observable.options,
+            }),
+        };
+        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,19 @@
+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-local-storage.js

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+function useLocalStorage(key, initialState) {
+    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/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,30 @@
+import { useRef } from 'react';
+
+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);
+    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-scroll-lock.js

@@ -0,0 +1,11 @@
+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-scroll-to.js

@@ -0,0 +1,19 @@
+const scrollToTop = (scrollOptions) => {
+    window?.scrollTo({
+        behavior: scrollOptions?.behavior || 'smooth',
+        top: 0,
+    });
+};
+const useScrollTo = (ref, scrollOptions) => () => {
+    if (!ref.current)
+        return;
+    const rect = ref.current.getBoundingClientRect();
+    const scrollPadding = scrollOptions?.scrollPadding || 12;
+    const scrollY = (window?.scrollY || 0) + rect.top - scrollPadding;
+    window?.scrollTo({
+        behavior: scrollOptions?.behavior || 'smooth',
+        top: scrollY,
+    });
+};
+
+export { scrollToTop, useScrollTo };

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

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+function useSessionStorage(key, initialState) {
+    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/hooks/use-watch-css-property.d.ts

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

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

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+function useWatchCssProperty(property) {
+    const [value, setValue] = useState(document?.body
+        ? getComputedStyle?.(document.body).getPropertyValue(property)
+        : undefined);
+    useEffect(() => {
+        if (typeof MutationObserver === 'undefined' ||
+            typeof document === 'undefined')
+            return;
+        const mutationObserver = new MutationObserver(() => {
+            if (typeof document === 'undefined')
+                return;
+            const propertyValue = getComputedStyle?.(document.body).getPropertyValue(property);
+            setValue(propertyValue);
+        });
+        mutationObserver.observe(document.body, {
+            attributes: true,
+            childList: false,
+            subtree: true,
+        });
+        return () => {
+            mutationObserver.disconnect();
+        };
+    }, [property]);
+    return value;
+}
+
+export { useWatchCssProperty };

package/dist/shared/model/announcement.js

@@ -0,0 +1,18 @@
+const announcementTypes = ['promo', 'service'];
+const announcementSubTypes = [
+    'sales',
+    'news',
+    'critical',
+    'informative',
+    'notice',
+    'event',
+    'new_product_introduction',
+];
+function isAnnouncementType(type) {
+    return announcementTypes.includes(type);
+}
+function isAnnouncementSubtype(subtype) {
+    return announcementSubTypes.includes(subtype);
+}
+
+export { announcementSubTypes, announcementTypes, isAnnouncementSubtype, isAnnouncementType };