@sonic-equipment/ui 168.0.0 → 170.0.0

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

@@ -1,8 +1,9 @@
-import { ReactNode } from 'react';
-import { NavigateFunction } from './types';
+import { ElementType, ReactNode } from 'react';
+import { NavigateFunction, RouteLinkElementProps } from './types';
 export interface RouteProviderProps {
+    Link?: ElementType<RouteLinkElementProps>;
     basePath?: string;
     children: ReactNode;
     navigate: NavigateFunction;
 }
-export declare function RouteProvider({ basePath, children, navigate, }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function RouteProvider({ basePath, children, Link, navigate, }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,12 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useGlobalState } from '../providers/global-state-provider.js';
+import { withRouting } from './with-routing.js';
 
-function RouteProvider({ basePath, children, navigate, }) {
-    useGlobalState('routing', { basePath, navigate });
+function RouteProvider({ basePath, children, Link = FallbackRouteLink, navigate, }) {
+    useGlobalState('routing', { Link, basePath, navigate });
     return jsx(Fragment, { children: children });
 }
+const FallbackRouteLink = withRouting('a');
 
 export { RouteProvider };

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

@@ -0,0 +1,4 @@
+export declare function buildHref({ basePath, href, }: {
+    basePath?: string;
+    href: string;
+}): string;

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,17 @@
+import { ElementType } from 'react';
 export interface RouteContext {
+    Link?: ElementType<RouteLinkElementProps>;
     basePath?: string;
     navigate: NavigateFunction;
 }
+export interface RouteLinkElementProps extends React.HTMLProps<HTMLAnchorElement> {
+    href: string;
+    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/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;
 }
 

package/dist/shared/utils/css.js

@@ -1,9 +1,62 @@
+function evaluateCssCalc(expression, options = {}) {
+    const baseFontSize = options.baseFontSize ?? 16;
+    const percentBase = options.percentBase ?? 100;
+    const expr = expression
+        .replace(/^calc\(/, '')
+        .replace(/\)$/, '')
+        .trim();
+    const tokens = expr.split(/([*+/-])/).map(token => token.trim());
+    const toPx = (value = '0px') => {
+        const match = value.match(/^([+-]?[\d.]+)(px|rem|em|%)?$/);
+        if (!match)
+            throw new Error(`Unsupported or invalid token: "${value}"`);
+        const num = Number.parseFloat(match[1] || '0');
+        const unit = match[2] || 'px';
+        switch (unit) {
+            case 'px':
+                return num;
+            case 'rem':
+            case 'em':
+                return num * baseFontSize;
+            case '%':
+                return (num / 100) * percentBase;
+            default:
+                throw new Error(`Unsupported unit: ${unit}`);
+        }
+    };
+    // Evaluate left-to-right (no operator precedence)
+    let result = toPx(tokens[0]);
+    for (let i = 1; i < tokens.length; i += 2) {
+        const operator = tokens[i];
+        const nextValue = toPx(tokens[i + 1]);
+        switch (operator) {
+            case '+':
+                result += nextValue;
+                break;
+            case '-':
+                result -= nextValue;
+                break;
+            case '*':
+                result *= nextValue;
+                break;
+            case '/':
+                result /= nextValue;
+                break;
+            default:
+                throw new Error(`Unsupported operator: ${operator}`);
+        }
+    }
+    return result;
+}
 function getCssPropertyValue(property) {
     if (typeof document === 'undefined')
         return;
     const rawValue = getComputedStyle?.(document.body).getPropertyValue(property);
     if (!rawValue)
         return undefined;
+    if (/calc/i.test(rawValue)) {
+        return `${evaluateCssCalc(rawValue, { baseFontSize: 16, percentBase: 100 })}px`;
+    }
     if (rawValue && !/\D/.test(rawValue)) {
         const valueAsNumber = Number.parseFloat(rawValue);
         if (!Number.isNaN(valueAsNumber))