@sonic-equipment/ui 169.0.0 → 171.0.0

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

@@ -0,0 +1,8 @@
+function buildHref({ basePath, href, }) {
+    if (basePath && href.startsWith('/') && !href.startsWith(`/${basePath}`)) {
+        return `/${basePath}${href}`;
+    }
+    return href;
+}
+
+export { buildHref };

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

@@ -1,10 +1,18 @@
+import { ElementType } from 'react';
 export interface RouteContext {
+    Link?: ElementType<RouteLinkElementProps>;
     basePath?: string;
     navigate: NavigateFunction;
 }
+export interface RouteLinkElementProps extends React.HTMLProps<HTMLAnchorElement> {
+    href: string;
+    onNavigate: () => void;
+    route?: NavigateOptions;
+}
 export interface NavigateOptions {
     prefetch?: boolean;
     reload?: boolean;
     replace?: boolean;
+    scroll?: boolean;
 }
 export type NavigateFunction = (href: string, options?: NavigateOptions) => void;

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { buildHref } from './route-utils.js';
+import { useBasePath } from './use-base-path.js';
+import { useOnNavigate } from './use-on-navigate.js';
+import { useRouteLinkElement } from './use-route-link-element.js';
+
+function useRouteLink() {
+    const basePath = useBasePath();
+    const RouteLinkElement = useRouteLinkElement();
+    const triggerCallbacks = useOnNavigate();
+    const getRouteLinkProps = useCallback((href, route) => {
+        href = buildHref({ basePath, href });
+        return {
+            href,
+            onNavigate: () => triggerCallbacks(href, route),
+        };
+    }, [basePath, triggerCallbacks]);
+    return {
+        RouteLinkElement,
+        getRouteLinkProps,
+    };
+}
+
+export { useRouteLink };

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

@@ -1,10 +1,7 @@
-import { ComponentProps, ComponentType, MouseEventHandler } from 'react';
-import { NavigateOptions } from './types';
+import { ElementType } from 'react';
+import { NavigateOptions, RouteLinkElementProps } from './types';
 export interface WithRoutingProps {
     href?: string;
     route?: NavigateOptions;
 }
-export declare function withRouting<TComponent extends ComponentType<TProps>, TProps extends {
-    children: React.ReactNode;
-    onClick?: MouseEventHandler<TElement> | undefined;
-}, TElement extends HTMLElement>(component: TComponent): React.ForwardRefExoticComponent<React.PropsWithoutRef<ComponentProps<TComponent> & WithRoutingProps> & React.RefAttributes<HTMLElement>>;
+export declare function withRouting(component: ElementType<RouteLinkElementProps>): React.FunctionComponent<RouteLinkElementProps>;

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

@@ -1,9 +1,9 @@
-import { forwardRef, createElement } from 'react';
+import { createElement } from 'react';
 import { useBasePath } from './use-base-path.js';
 import { useNavigate } from './use-navigate.js';
 
 function withRouting(component) {
-    const Component = forwardRef(({ href, onClick, route, ...rest }, ref) => {
+    const Component = ({ href, onClick, route, ...rest }) => {
         const { navigate } = useNavigate();
         const basePath = useBasePath();
         if (basePath &&
@@ -15,7 +15,7 @@ function withRouting(component) {
         const props = {
             ...rest,
             href,
-            onClick(e) {
+            onClick: (e) => {
                 onClick?.(e);
                 if (!href)
                     return;
@@ -28,11 +28,11 @@ function withRouting(component) {
                 }
                 return navigate(href, route);
             },
-            ref,
+            route,
         };
         return createElement(component, props);
-    });
-    Component.displayName = `WithRouting(${component.displayName || component.name})`;
+    };
+    Component.displayName = `WithRouting(${component.toString()})`;
     return Component;
 }