@sonic-equipment/ui 260.0.0 → 260.0.2

package/dist/buttons/link/link.d.ts

@@ -8,6 +8,7 @@ export interface LinkProps {
     href?: string;
     hrefLang?: string;
     id?: string;
+    ignoreLocalePrefix?: boolean;
     isDisabled?: boolean;
     lang?: string;
     onClick?: MouseEventHandler<HTMLElement>;

package/dist/buttons/link/link.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import { useRouteLink } from '../../shared/routing/use-route-link.js';
 import styles from './link.module.css.js';
 
-const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, hrefLang, id, isDisabled, lang, onClick, onKeyUp, rel, role, route, tabIndex, target, title, ...rest }, ref) => {
-    const { getRouteLinkProps, RouteLinkElement } = useRouteLink();
+const Link = forwardRef(({ children, className: _className, color, hasUnderline, href, hrefLang, id, ignoreLocalePrefix, isDisabled, lang, onClick, onKeyUp, rel, role, route, tabIndex, target, title, ...rest }, ref) => {
+    const { getRouteLinkProps, RouteLinkElement } = useRouteLink(ignoreLocalePrefix);
     const className = clsx(styles['link'], hasUnderline && styles['has-underline'], color && styles[color], _className);
     if (href) {
         return (jsx(RouteLinkElement, { ref: ref, className: className, "data-disabled": isDisabled ? true : undefined, hrefLang: hrefLang, id: id, lang: lang, onClick: onClick, onKeyUp: onKeyUp, rel: rel, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...getRouteLinkProps(href, route), ...rest, children: children }));

package/dist/country-language-selector/connected-country-language-selector.d.ts

@@ -2,6 +2,7 @@ import { CountryCode, LanguageCode } from '../intl/types';
 export interface ConnectedCountryLanguageSelectorProps {
     className?: string;
     countries?: CountryCode[];
+    currentPath?: string;
     isOpen?: boolean;
     selectedCountry?: CountryCode;
     selectedLanguage?: LanguageCode;

package/dist/country-language-selector/connected-country-language-selector.js

@@ -1,11 +1,14 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { useCookie } from '../cookies/use-cookie.js';
 import { useCountriesLanguages } from '../country-selector/use-countries-languages.js';
+import { isCountryLanguageCode } from '../intl/types.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { useIntl } from '../intl/use-intl.js';
 import { useNavigate } from '../shared/routing/use-navigate.js';
+import { useRouter } from '../shared/routing/use-router.js';
+import { environment } from '../shared/utils/environment.js';
 import { CountryLanguageSelector } from './country-language-selector.js';
 
 /* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
@@ -28,6 +31,7 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
     });
     const [isOpen, setIsOpen] = useState(_isOpen ?? !CLSelectorCookie?.includes('closed=true'));
     const { countries } = useCountriesLanguages({});
+    const router = useRouter();
     // options for the selector menu
     const menuOptions = {
         other: t('Choose your country or region…'),
@@ -65,16 +69,36 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
             const optionKey = `${languageCode}-${countryCode}`;
             const optionCountryLabel = `clselector.country.${countryCode}.${languageCode}`;
             const optionLanguageLabel = `clselector.language.${languageCode}.${languageCode}`;
-            // add option key/value to menu options
-            menuOptions[optionKey] = (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` }));
             // add option key to group's options
             options.push(optionKey);
+            const { alternativeHrefs, pathname } = router.url;
+            let path;
+            if (alternativeHrefs && alternativeHrefs[optionKey]) {
+                path = `/${optionKey}${alternativeHrefs[optionKey]}`;
+            }
+            else if (!alternativeHrefs ||
+                Object.keys(alternativeHrefs).length === 0) {
+                const currentCountryLanguage = pathname.split('/')[1]?.toLowerCase();
+                path = isCountryLanguageCode(currentCountryLanguage)
+                    ? pathname
+                        .toLowerCase()
+                        .replace(`${currentCountryLanguage}`, `${optionKey}`)
+                    : `/${optionKey}${pathname}`;
+            }
+            else {
+                path = `/${optionKey}`;
+            }
+            // add option key/value to menu options
+            menuOptions[optionKey] =
+                environment === 'next-production' ? (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` })) : (
+                // in development, show the path to help identify the correct option
+                jsxs("span", { lang: languageCode, children: [`${t(optionCountryLabel)} - ${t(optionLanguageLabel)}`, jsx("code", { style: { fontSize: '12px' }, children: path })] }));
             // add to option data
             optionData.push({
                 country: countryCode,
                 key: optionKey,
                 language: languageCode,
-                path: `/${languageCode}-${countryCode}`,
+                path,
             });
         });
         // push new group to groups
@@ -105,7 +129,9 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
         setIsOpen(false);
         if (selectedOption === 'other') {
             setCLSelectorCookie('closed=true');
-            navigate(pathToCLSelectionList);
+            navigate(pathToCLSelectionList, {
+                ignoreLocalePrefix: true,
+            });
         }
         else {
             const option = optionData.find(option => option.key === selectedOption);
@@ -113,7 +139,7 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
                 return;
             const { country, language, path } = option;
             setCLSelectorCookie(`closed=true;language=${language};country=${country}`);
-            navigate(path);
+            navigate(path, { ignoreLocalePrefix: true, reload: true });
         }
     };
     // react to CountryLanguageSelectorButton clicked

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

@@ -6,6 +6,7 @@ export interface RouteProviderProps {
     navigate: NavigateFunction;
     paths: Paths;
     url: {
+        alternativeHrefs?: Record<string, string>;
         basePathname?: string;
         href: string;
         pathname: string;

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

@@ -1,4 +1,5 @@
-export declare function buildHref({ basePathname, href, }: {
+export declare function buildHref({ basePathname, href, ignoreLocalePrefix, }: {
     basePathname?: string;
     href: string;
+    ignoreLocalePrefix?: boolean;
 }): string;

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

@@ -1,7 +1,8 @@
-function buildHref({ basePathname, href, }) {
+function buildHref({ basePathname, href, ignoreLocalePrefix, }) {
     if (!href.startsWith('http') &&
         basePathname &&
         basePathname !== '/' &&
+        !ignoreLocalePrefix &&
         !href.startsWith(`/${basePathname}`)) {
         return `/${basePathname.replace(/^\//, '')}/${href.replace(/^\//, '')}`;
     }

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

@@ -24,6 +24,7 @@ export interface RouteContextValue {
     navigate: NavigateFunction;
     paths: Paths;
     url: {
+        alternativeHrefs?: Record<string, string>;
         basePathname?: string;
         href: string;
         pathname: string;
@@ -36,6 +37,7 @@ export interface RouteLinkElementProps extends React.HTMLProps<HTMLAnchorElement
     route?: NavigateOptions;
 }
 export interface NavigateOptions {
+    ignoreLocalePrefix?: boolean;
     prefetch?: boolean;
     reload?: boolean;
     replace?: boolean;

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

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

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

@@ -5,18 +5,18 @@ import { useLocation } from './use-location.js';
 import { useOnNavigate } from './use-on-navigate.js';
 import { useRouteLinkElement } from './use-route-link-element.js';
 
-function useRouteLink() {
+function useRouteLink(ignoreLocalePrefix) {
     const { basePathname } = useLocation();
     const RouteLinkElement = useRouteLinkElement();
     const triggerCallbacks = useOnNavigate();
     const getRouteLinkProps = useCallback((href, route) => {
-        href = buildHref({ basePathname, href });
+        href = buildHref({ basePathname, href, ignoreLocalePrefix });
         return {
             href,
             onNavigate: () => triggerCallbacks(href, route),
             route,
         };
-    }, [basePathname, triggerCallbacks]);
+    }, [basePathname, triggerCallbacks, ignoreLocalePrefix]);
     return {
         RouteLinkElement,
         getRouteLinkProps,

package/dist/shared/utils/css.js

@@ -1,61 +1,17 @@
-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')
+    if (typeof document === 'undefined' || !getComputedStyle)
         return;
-    const rawValue = getComputedStyle?.(document.body).getPropertyValue(property);
+    const rawValue = getComputedStyle(document.body).getPropertyValue(property);
     if (!rawValue)
         return undefined;
     if (/calc/i.test(rawValue)) {
-        return `${evaluateCssCalc(rawValue, { baseFontSize: 16, percentBase: 100 })}px`;
+        const el = document.createElement('div');
+        el.style.cssText = 'position:fixed;visibility:hidden;pointer-events:none';
+        el.style.top = rawValue;
+        document.body.append(el);
+        const px = Number.parseFloat(getComputedStyle(el).top);
+        el.remove();
+        return Number.isNaN(px) ? undefined : `${px}px`;
     }
     if (rawValue && !/\D/.test(rawValue)) {
         const valueAsNumber = Number.parseFloat(rawValue);

package/package.json

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