@phillips/seldon 1.164.2 → 1.165.0

package/dist/components/Navigation/Navigation.stories.d.ts

@@ -1,6 +1,7 @@
+import { default as React } from 'react';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<Omit<import('./Navigation').NavigationProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    component: React.ForwardRefExoticComponent<Omit<import('./Navigation').NavigationProps, "ref"> & React.RefAttributes<HTMLElement>>;
     tags: string[];
     parameters: {
         docs: {

package/dist/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.d.ts

@@ -4,6 +4,10 @@ export interface NavigationItemTriggerProps extends ComponentProps<'li'> {
      * Label for the navigation item
      */
     label: string;
+    /**
+     * ID for the trigger - required for context-based submenu management
+     */
+    id?: string;
 }
 /**
  * ## Overview

package/dist/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js

@@ -1,62 +1,73 @@
-import { jsx as n, Fragment as _, jsxs as f } from "react/jsx-runtime";
-import k from "../../../node_modules/classnames/index.js";
-import i, { forwardRef as $, useState as I } from "react";
-import M from "../../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
-import { SSRMediaQuery as g } from "../../../providers/SeldonProvider/utils.js";
-import { HeaderContext as v } from "../../../site-furniture/Header/Header.js";
-import { getCommonProps as O, findChildrenOfType as S, focusElementById as y, px as h } from "../../../utils/index.js";
-import E from "../../Accordion/Accordion.js";
-import R from "../../Accordion/AccordionItem.js";
-import { AccordionItemVariant as w } from "../../Accordion/types.js";
-import { TextVariants as C } from "../../Text/types.js";
+import { jsx as o, Fragment as $, jsxs as h } from "react/jsx-runtime";
+import M from "../../../node_modules/classnames/index.js";
+import t, { forwardRef as y, useEffect as E } from "react";
+import O from "../../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
+import { SSRMediaQuery as v } from "../../../providers/SeldonProvider/utils.js";
+import { HeaderContext as C } from "../../../site-furniture/Header/Header.js";
+import { getCommonProps as w, findChildrenOfType as A, focusElementById as L, px as T } from "../../../utils/index.js";
+import H from "../../Accordion/Accordion.js";
+import P from "../../Accordion/AccordionItem.js";
+import { AccordionItemVariant as j } from "../../Accordion/types.js";
+import { TextVariants as b } from "../../Text/types.js";
 import N from "../../Text/Text.js";
-import L from "../NavigationList/NavigationList.js";
-const A = ({ id: a, label: o, children: l }) => {
-  const { isMenuOpen: c } = i.useContext(v);
-  return /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(
-    R,
+import B from "../NavigationList/NavigationList.js";
+const V = ({ id: r, label: i, children: s }) => {
+  const { isMenuOpen: u } = t.useContext(C);
+  return /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o(
+    P,
     {
       hasTransition: !0,
-      id: `accordion-item-${a}`,
-      label: /* @__PURE__ */ n(N, { variant: C.snwHeaderLink, children: o }),
-      variant: w.lg,
-      children: l
+      id: `accordion-item-${r}`,
+      label: /* @__PURE__ */ o(N, { variant: b.snwHeaderLink, children: i }),
+      variant: j.lg,
+      children: s
     },
-    `accordion-key-${o}`
-  ) }, `accordion-key-${o}-${c}`);
-}, H = $(
-  ({ id: a, label: o, children: l, className: c, onClick: b, ...x }, t) => {
-    const { className: m, ...u } = O({ id: a }, "NavigationItemTrigger"), [d, s] = I(!1), e = S(l, L), { closeMenu: p } = i.useContext(v), T = i.useCallback(() => {
-      s(!0), e && e[0]?.props?.id && y(e[0].props.id, !0);
-      const r = t && "current" in t ? t.current : null;
-      r && r.focus();
-    }, [e, t]);
-    return /* @__PURE__ */ n(_, { children: /* @__PURE__ */ f(M, { enabled: d, allowPinchZoom: !0, removeScrollBar: !1, children: [
-      /* @__PURE__ */ n(g.Media, { lessThan: "md", children: /* @__PURE__ */ n(A, { id: a, label: o, ...u, children: e ? i.cloneElement(e[0], {
+    `accordion-key-${i}`
+  ) }, `accordion-key-${i}-${u}`);
+}, q = y(
+  ({ id: r, label: i, children: s, className: u, onClick: x, ...k }, c) => {
+    const { className: m, ...f } = w({ id: r }, "NavigationItemTrigger"), e = A(s, B), {
+      closeMenu: g,
+      activeSubmenuId: R,
+      setActiveSubmenuId: l,
+      closeTimeoutRef: d
+    } = t.useContext(C), _ = t.useRef(null), n = d || _, p = R === r, I = t.useCallback(() => {
+      n.current && (clearTimeout(n.current), n.current = null), l?.(r || null), e && e[0]?.props?.id && L(e[0].props.id, !0);
+      const a = c && "current" in c ? c.current : null;
+      a && a.focus();
+    }, [e, c, r, l, n]), S = t.useCallback(() => {
+      n.current = setTimeout(() => {
+        l?.(null), n.current = null;
+      }, 200);
+    }, [l, n]);
+    return E(() => () => {
+      !d && n.current && clearTimeout(n.current);
+    }, [d, n]), /* @__PURE__ */ o($, { children: /* @__PURE__ */ h(O, { enabled: p, allowPinchZoom: !0, removeScrollBar: !1, children: [
+      /* @__PURE__ */ o(v.Media, { lessThan: "md", children: /* @__PURE__ */ o(V, { id: r, label: i, ...f, children: e ? t.cloneElement(e[0], {
         className: `${m}__submenu--mobile`,
-        onClick: (r) => {
-          e[0].props?.onClick?.(r), s?.(!1), p?.();
+        onClick: (a) => {
+          e[0].props?.onClick?.(a), l?.(null), g?.();
         }
       }) : null }) }),
-      /* @__PURE__ */ n(g.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ f(
+      /* @__PURE__ */ o(v.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ h(
         "li",
         {
-          ...u,
-          ref: t,
-          "aria-expanded": d,
-          className: k(c, m, `${h}-nav__item`, {
-            [`${m}--hovered`]: d
+          ...f,
+          ref: c,
+          "aria-expanded": p,
+          className: M(u, m, `${T}-nav__item`, {
+            [`${m}--hovered`]: p
           }),
-          onClick: b,
-          onMouseOver: T,
-          onMouseOut: () => s(!1),
-          ...x,
+          onClick: x,
+          onMouseOver: I,
+          onMouseOut: S,
+          ...k,
           children: [
-            /* @__PURE__ */ n("button", { className: `${h}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ n(N, { variant: C.snwHeaderLink, children: o }) }),
-            e ? i.cloneElement(e[0], {
+            /* @__PURE__ */ o("button", { className: `${T}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ o(N, { variant: b.snwHeaderLink, children: i }) }),
+            e ? t.cloneElement(e[0], {
               className: `${m}__submenu`,
-              onClick: (r) => {
-                e[0].props?.onClick?.(r), s?.(!1), p?.();
+              onClick: (a) => {
+                e[0].props?.onClick?.(a), l?.(null), g?.();
               }
             }) : null
           ]
@@ -65,7 +76,7 @@ const A = ({ id: a, label: o, children: l }) => {
     ] }) });
   }
 );
-H.displayName = "NavigationItemTrigger";
+q.displayName = "NavigationItemTrigger";
 export {
-  H as default
+  q as default
 };

package/dist/scss/components/ExitGateCard/_exitGateCard.scss

@@ -40,6 +40,7 @@
 
     &-title {
       margin: 0;
+      text-transform: none;
     }
 
     &-description {

package/dist/site-furniture/Header/Header.d.ts

@@ -42,6 +42,18 @@ export type HeaderContextType = {
      * Close the mobile menu
      * */
     closeMenu?: () => void;
+    /**
+     * Active submenu ID for navigation
+     */
+    activeSubmenuId: string | null;
+    /**
+     * Set the active submenu ID
+     */
+    setActiveSubmenuId: (id: string | null) => void;
+    /**
+     * Reference to timeout for submenu closing
+     */
+    closeTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
 };
 export declare const HeaderContext: React.Context<HeaderContextType>;
 /**

package/dist/site-furniture/Header/Header.js

@@ -1,85 +1,88 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import r, { createContext as j, forwardRef as R, useState as V } from "react";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import e, { createContext as w, forwardRef as A, useState as g } from "react";
 import l from "../../node_modules/classnames/index.js";
-import { findChildrenOfType as s, findChildrenExcludingTypes as w, px as e } from "../../utils/index.js";
-import u from "../../patterns/UserManagement/UserManagement.js";
-import f from "../../patterns/LanguageSelector/LanguageSelector.js";
-import _ from "../../components/Navigation/Navigation.js";
-import { defaultHeaderContext as I } from "./utils.js";
-import { SSRMediaQuery as L } from "../../providers/SeldonProvider/utils.js";
-import { useMobileMenu as k } from "./hooks.js";
-import q from "../../components/Icon/Icon.js";
-const A = j(I), Q = R(
+import { findChildrenOfType as d, findChildrenExcludingTypes as L, px as a } from "../../utils/index.js";
+import f from "../../patterns/UserManagement/UserManagement.js";
+import _ from "../../patterns/LanguageSelector/LanguageSelector.js";
+import v from "../../components/Navigation/Navigation.js";
+import { defaultHeaderContext as k } from "./utils.js";
+import { SSRMediaQuery as q } from "../../providers/SeldonProvider/utils.js";
+import { useMobileMenu as Q } from "./hooks.js";
+import U from "../../components/Icon/Icon.js";
+const z = w(k), B = A(
   ({
-    logo: i = /* @__PURE__ */ a(q, { icon: "PhillipsLogo" }),
+    logo: i = /* @__PURE__ */ t(U, { icon: "PhillipsLogo" }),
     logoHref: E = "/",
-    className: v,
-    children: t,
-    toggleOpenText: C = "Open Menu",
-    toggleCloseText: M = "Close Menu",
-    logoText: x = "Home Page",
+    className: C,
+    children: n,
+    toggleOpenText: M = "Open Menu",
+    toggleCloseText: x = "Close Menu",
+    logoText: b = "Home Page",
     disabled: m,
-    ...y
-  }, $) => {
-    const c = s(t, u), b = r.isValidElement(c?.[0]) ? r.cloneElement(c[0], { disabled: m }) : "", h = s(t, f), p = r.isValidElement(h?.[0]) ? r.cloneElement(h[0], { disabled: m }) : "", [g, N] = V(!1), S = s(t, _), H = w(t, [_, u, f]), { closeMenu: T, handleMenuToggle: O, isMenuOpen: d, toggleText: P } = k({ toggleOpenText: C, toggleCloseText: M });
-    return /* @__PURE__ */ o("header", { ...y, className: l(`${e}-header`, v), ref: $, children: [
-      /* @__PURE__ */ o("div", { className: `${e}-header__top-row`, children: [
-        /* @__PURE__ */ a(L.Media, { greaterThanOrEqual: "md", children: p }),
+    ...S
+  }, y) => {
+    const c = d(n, f), $ = e.isValidElement(c?.[0]) ? e.cloneElement(c[0], { disabled: m }) : "", h = d(n, _), u = e.isValidElement(h?.[0]) ? e.cloneElement(h[0], { disabled: m }) : "", [p, N] = g(!1), T = d(n, v), H = L(n, [v, f, _]), { closeMenu: R, handleMenuToggle: I, isMenuOpen: s, toggleText: O } = Q({ toggleOpenText: M, toggleCloseText: x }), [P, j] = g(null), V = e.useRef(null);
+    return /* @__PURE__ */ o("header", { ...S, className: l(`${a}-header`, C), ref: y, children: [
+      /* @__PURE__ */ o("div", { className: `${a}-header__top-row`, children: [
+        /* @__PURE__ */ t(q.Media, { greaterThanOrEqual: "md", children: u }),
         /* @__PURE__ */ o(
           "button",
           {
-            "aria-label": P,
+            "aria-label": O,
             "data-testid": "mobile-menu-toggle",
             type: "button",
-            onClick: O,
-            className: l(`${e}-header__toggle-btn`, {
-              [`${e}-header__toggle-btn--open`]: d
+            onClick: I,
+            className: l(`${a}-header__toggle-btn`, {
+              [`${a}-header__toggle-btn--open`]: s
             }),
             children: [
-              /* @__PURE__ */ a("span", {}),
+              /* @__PURE__ */ t("span", {}),
               " "
             ]
           }
         ),
-        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: E, "aria-label": x, children: typeof i == "object" ? i : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i }) }) }),
-        b
+        /* @__PURE__ */ t("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, children: /* @__PURE__ */ t("a", { href: E, "aria-label": b, children: typeof i == "object" ? i : /* @__PURE__ */ t("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i }) }) }),
+        $
       ] }),
-      /* @__PURE__ */ a("div", { className: l(`${e}-header__nav`, { [`${e}-header__nav--closed`]: !d }), children: /* @__PURE__ */ o(
-        A.Provider,
+      /* @__PURE__ */ t("div", { className: l(`${a}-header__nav`, { [`${a}-header__nav--closed`]: !s }), children: /* @__PURE__ */ o(
+        z.Provider,
         {
           value: {
-            isMenuOpen: d,
-            isSearchExpanded: g,
+            activeSubmenuId: P,
+            setActiveSubmenuId: j,
+            closeTimeoutRef: V,
+            isMenuOpen: s,
+            isSearchExpanded: p,
             setIsSearchExpanded: N,
-            closeMenu: T
+            closeMenu: R
           },
           children: [
-            r.Children.map(
-              S,
-              (n) => r.isValidElement(n) ? r.cloneElement(n, {
+            e.Children.map(
+              T,
+              (r) => e.isValidElement(r) ? e.cloneElement(r, {
                 children: [
-                  ...r.Children.toArray(n.props.children),
-                  p
+                  ...e.Children.toArray(r.props.children),
+                  u
                 ]
-              }) : n
+              }) : r
             ),
             H
           ]
         }
       ) }),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ t(
         "div",
         {
-          className: l(`${e}-header__overlay`, {
-            [`${e}-header__overlay--active`]: g
+          className: l(`${a}-header__overlay`, {
+            [`${a}-header__overlay--active`]: p
           })
         }
       )
     ] });
   }
 );
-Q.displayName = "Header";
+B.displayName = "Header";
 export {
-  A as HeaderContext,
-  Q as default
+  z as HeaderContext,
+  B as default
 };

package/dist/site-furniture/Header/utils.js

@@ -1,10 +1,13 @@
 import { noOp as e } from "../../utils/index.js";
-const n = {
+const t = {
   isMenuOpen: !1,
   isSearchExpanded: !1,
   setIsSearchExpanded: e,
-  closeMenu: e
+  closeMenu: e,
+  activeSubmenuId: null,
+  setActiveSubmenuId: e,
+  closeTimeoutRef: { current: null }
 };
 export {
-  n as defaultHeaderContext
+  t as defaultHeaderContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.164.2",
+  "version": "1.165.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"