@sonic-equipment/ui 201.0.0 → 202.0.0

package/dist/buttons/button/button.js

@@ -27,8 +27,7 @@ const Button = forwardRef(({ _pseudo = 'none', 'aria-label': ariaLabel, children
     const children = (jsxs(Fragment, { children: [showIconOnLeft && iconElement, jsx("span", { className: buttonStyles.children, children: isLoading ? (isLoading === true ? _children : isLoading) : _children }), withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && iconElement, isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }));
     if (href) {
         // TODO: only button currently supports ref for now
-        const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, type: type, ...getRouteLinkProps(href, route), children: children }));
+        return (jsx(RouteLinkElement, { "aria-label": ariaLabel, className: classNames, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, 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 }));
 });

package/dist/buttons/icon-button/icon-button.js

@@ -13,8 +13,7 @@ function IconButton({ children, className: _className, color = 'primary', 'data-
     };
     const className = clsx(styles['icon-button'], styles[size], styles[color], _className);
     if (href) {
-        const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
+        return (jsx(RouteLinkElement, { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, onClick: onClick, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
     }
     return (jsx("button", { className: className, "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: handleButtonClick, title: title, type: type, ...rest, children: children }));
 }

package/dist/buttons/link/link.js

@@ -12,8 +12,7 @@ const Link = forwardRef(({ children, className: _className, color, hasUnderline,
         [styles['has-underline']]: hasUnderline,
     }, styles['link'], color && styles[color], _className);
     if (href) {
-        const Element = RouteLinkElement || 'a';
-        return (jsx(Element, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));
+        return (jsx(RouteLinkElement, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, 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, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
 });

package/dist/exports.d.ts

@@ -404,6 +404,7 @@ export * from './shared/providers/cart-provider';
 export * from './shared/providers/favorite-provider';
 export * from './shared/providers/global-state-provider';
 export * from './shared/providers/react-query-container';
+export * from './shared/routing/route-context';
 export * from './shared/routing/route-provider';
 export * from './shared/routing/route-utils';
 export * from './shared/routing/types';
@@ -413,6 +414,7 @@ export * from './shared/routing/use-on-navigate';
 export * from './shared/routing/use-paths';
 export * from './shared/routing/use-route-link';
 export * from './shared/routing/use-route-link-element';
+export * from './shared/routing/use-router';
 export * from './shared/routing/with-routing';
 export * from './shared/utils/array';
 export * from './shared/utils/breakpoints';

package/dist/index.js

@@ -404,6 +404,7 @@ export { CartProvider, useCartEvents } from './shared/providers/cart-provider.js
 export { FavoriteProvider, useFavorite, useFavoriteProduct } from './shared/providers/favorite-provider.js';
 export { GlobalStateProvider, GlobalStateProviderContext, useGlobalState } from './shared/providers/global-state-provider.js';
 export { ReactQueryContainer } from './shared/providers/react-query-container.js';
+export { RouteContext } from './shared/routing/route-context.js';
 export { RouteProvider } from './shared/routing/route-provider.js';
 export { buildHref } from './shared/routing/route-utils.js';
 export { useLocation } from './shared/routing/use-location.js';
@@ -412,7 +413,8 @@ export { useOnNavigate } from './shared/routing/use-on-navigate.js';
 export { usePaths } from './shared/routing/use-paths.js';
 export { useRouteLink } from './shared/routing/use-route-link.js';
 export { useRouteLinkElement } from './shared/routing/use-route-link-element.js';
-export { withRouting } from './shared/routing/with-routing.js';
+export { useRouter } from './shared/routing/use-router.js';
+export { FallbackRouteLink, withRouting } from './shared/routing/with-routing.js';
 export { ensureArray } from './shared/utils/array.js';
 export { breakpoints, getCurrentBreakpoints } from './shared/utils/breakpoints.js';
 export { getCssPropertyValue } from './shared/utils/css.js';

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

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

package/dist/shared/routing/route-context.js

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

package/dist/shared/routing/route-provider.js

@@ -1,17 +1,16 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useGlobalState } from '../providers/global-state-provider.js';
-import { withRouting } from './with-routing.js';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { RouteContext } from './route-context.js';
 
-function RouteProvider({ children, Link = FallbackRouteLink, navigate, paths, url, }) {
-    useGlobalState('routing', {
+function RouteProvider({ children, Link, navigate, paths, url, }) {
+    const value = useMemo(() => ({
         Link,
         navigate,
         paths,
         url,
-    });
-    return jsx(Fragment, { children: children });
+    }), [Link, navigate, paths, url]);
+    return jsx(RouteContext.Provider, { value: value, children: children });
 }
-const FallbackRouteLink = withRouting('a');
 
 export { RouteProvider };

package/dist/shared/routing/types.d.ts

@@ -18,7 +18,7 @@ export interface Paths {
     REVIEW_AND_SUBMIT: string;
     SIGN_IN: string;
 }
-export interface RouteContext {
+export interface RouteContextValue {
     Link?: ElementType<RouteLinkElementProps>;
     navigate: NavigateFunction;
     paths: Paths;

package/dist/shared/routing/use-location.d.ts

@@ -1,9 +1,9 @@
 import qs from 'query-string';
 export declare function useLocation(): {
     basePathname: string | undefined;
-    fullPathname: string | undefined;
+    fullPathname: string;
     href: string;
-    pathname: string | undefined;
+    pathname: string;
     query: qs.ParsedQuery<string>;
-    search: string | undefined;
+    search: string;
 };

package/dist/shared/routing/use-location.js

@@ -1,15 +1,15 @@
+"use client";
 import qs from 'query-string';
-import { useGlobalState } from '../providers/global-state-provider.js';
+import { useRouter } from './use-router.js';
 
 function useLocation() {
-    const [routeState] = useGlobalState('routing');
-    const { url: { basePathname, pathname, search }, } = routeState || { url: {} };
+    const { url: { basePathname, pathname, search }, } = useRouter();
     const query = qs.parse(search || '');
     return {
         basePathname,
         fullPathname: pathname,
         href: `${pathname}${search}`,
-        pathname: pathname?.replace(new RegExp(`^${basePathname}`), ''),
+        pathname: pathname.replace(new RegExp(`^${basePathname}`), ''),
         query,
         search,
     };

package/dist/shared/routing/use-navigate.js

@@ -1,22 +1,19 @@
 "use client";
 import { useRef, useCallback } from 'react';
-import { useGlobalState } from '../providers/global-state-provider.js';
 import { useOnNavigate } from './use-on-navigate.js';
+import { useRouter } from './use-router.js';
 
 function useNavigate() {
     const isNavigatingRef = useRef(false);
-    const [state] = useGlobalState('routing');
+    const routeState = useRouter();
     const trigger = useOnNavigate(() => {
         isNavigatingRef.current = false;
     });
-    if (!state) {
-        throw new Error('RouteProvider not found');
-    }
     const navigate = useCallback((href, options) => {
         trigger(href, options);
         isNavigatingRef.current = true;
-        return state.navigate(href, options);
-    }, [state, trigger]);
+        return routeState.navigate(href, options);
+    }, [routeState, trigger]);
     return { isNavigating: isNavigatingRef.current, navigate };
 }
 

package/dist/shared/routing/use-paths.js

@@ -1,10 +1,9 @@
-import { useGlobalState } from '../providers/global-state-provider.js';
+"use client";
+import { useRouter } from './use-router.js';
 
 function usePaths() {
-    const [routeState] = useGlobalState('routing');
-    if (!routeState)
-        throw new Error('usePaths must be used within a RouteProvider context');
-    return routeState.paths;
+    const { paths } = useRouter();
+    return paths;
 }
 
 export { usePaths };

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

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

package/dist/shared/routing/use-route-link-element.js

@@ -1,11 +1,10 @@
-import { useGlobalState } from '../providers/global-state-provider.js';
+"use client";
+import { useRouter } from './use-router.js';
+import { FallbackRouteLink } from './with-routing.js';
 
 function useRouteLinkElement() {
-    const [state] = useGlobalState('routing');
-    if (!state) {
-        throw new Error('RouteProvider not found');
-    }
-    return state.Link;
+    const { Link } = useRouter();
+    return Link || FallbackRouteLink;
 }
 
 export { useRouteLinkElement };

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

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

package/dist/shared/routing/use-route-link.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from 'react';
 import { buildHref } from './route-utils.js';
 import { useLocation } from './use-location.js';

package/dist/shared/routing/use-router.d.ts

@@ -0,0 +1 @@
+export declare function useRouter(): import("./types").RouteContextValue;

package/dist/shared/routing/use-router.js

@@ -0,0 +1,13 @@
+"use client";
+import { useContext } from 'react';
+import { RouteContext } from './route-context.js';
+
+function useRouter() {
+    const context = useContext(RouteContext);
+    if (!context) {
+        throw new Error('useRouter must be used within a RouteProvider');
+    }
+    return context;
+}
+
+export { useRouter };

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

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

package/dist/shared/routing/with-routing.js

@@ -29,5 +29,6 @@ function withRouting(component) {
     Component.displayName = `WithRouting(${component.toString()})`;
     return Component;
 }
+const FallbackRouteLink = withRouting('a');
 
-export { withRouting };
+export { FallbackRouteLink, withRouting };

package/package.json

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