@phillips/seldon 1.91.1 → 1.92.0

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

@@ -1,54 +1,68 @@
-import { jsxs as c, Fragment as T, jsx as e } from "react/jsx-runtime";
-import { getCommonProps as _, findChildrenOfType as b, px as d } from "../../../utils/index.js";
-import x from "../../../node_modules/classnames/index.js";
-import l, { forwardRef as I, useState as $ } from "react";
-import { TextVariants as u } from "../../Text/types.js";
-import f from "../../Text/Text.js";
-import M from "../NavigationList/NavigationList.js";
-import O from "../../Accordion/Accordion.js";
-import y from "../../Accordion/AccordionItem.js";
-import { SSRMediaQuery as p } from "../../../providers/SeldonProvider/utils.js";
-import { AccordionItemVariant as S } from "../../Accordion/types.js";
-const C = ({ id: i, label: r, children: t }) => /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(
-  y,
-  {
-    hasTransition: !0,
-    id: `accordion-item-${i}`,
-    label: /* @__PURE__ */ e(f, { variant: u.snwHeaderLink, children: r }),
-    variant: S.lg,
-    children: t
-  },
-  `accordion-key-${r}`
-) }), E = I(
-  ({ id: i, label: r, children: t, className: g, onClick: v, ...h }, N) => {
-    const { className: n, ...a } = _({ id: i }, "NavigationItemTrigger"), [m, s] = $(!1), o = b(t, M);
-    return /* @__PURE__ */ c(T, { children: [
-      /* @__PURE__ */ e(p.Media, { lessThan: "md", children: /* @__PURE__ */ e(C, { id: i, label: r, ...a, children: o ? l.cloneElement(o[0], {
-        className: `${n}__submenu--mobile`
-      }) : void 0 }) }),
-      /* @__PURE__ */ e(p.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ c(
+import { jsxs as u, Fragment as k, jsx as o } from "react/jsx-runtime";
+import { getCommonProps as y, findChildrenOfType as E, px as h } from "../../../utils/index.js";
+import L from "../../../node_modules/classnames/index.js";
+import c, { forwardRef as M, useState as b } from "react";
+import { TextVariants as N } from "../../Text/types.js";
+import C from "../../Text/Text.js";
+import w from "../NavigationList/NavigationList.js";
+import A from "../../Accordion/Accordion.js";
+import H from "../../Accordion/AccordionItem.js";
+import { SSRMediaQuery as v } from "../../../providers/SeldonProvider/utils.js";
+import { AccordionItemVariant as I } from "../../Accordion/types.js";
+import { HeaderContext as x } from "../../../site-furniture/Header/Header.js";
+const O = ({ id: m, label: i, children: l }) => {
+  const { isMenuOpen: d } = c.useContext(x);
+  return /* @__PURE__ */ o(A, { children: /* @__PURE__ */ o(
+    H,
+    {
+      hasTransition: !0,
+      id: `accordion-item-${m}`,
+      label: /* @__PURE__ */ o(C, { variant: N.snwHeaderLink, children: i }),
+      variant: I.lg,
+      children: l
+    },
+    `accordion-key-${i}`
+  ) }, `accordion-key-${i}-${d}`);
+}, R = M(
+  ({ id: m, label: i, children: l, className: d, onClick: T, ..._ }, $) => {
+    const { className: s, ...f } = y({ id: m }, "NavigationItemTrigger"), [g, e] = b(!1), t = E(l, w), { closeMenu: n } = c.useContext(x);
+    return /* @__PURE__ */ u(k, { children: [
+      /* @__PURE__ */ o(v.Media, { lessThan: "md", children: /* @__PURE__ */ o(O, { id: m, label: i, ...f, children: t ? c.cloneElement(t[0], {
+        className: `${s}__submenu--mobile`,
+        onClick: (p) => {
+          var r, a;
+          (a = (r = t[0].props) == null ? void 0 : r.onClick) == null || a.call(r, p), e == null || e(!1), n == null || n();
+        }
+      }) : null }) }),
+      /* @__PURE__ */ o(v.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ u(
         "li",
         {
-          ...a,
-          ref: N,
-          "aria-expanded": m,
-          className: x(g, n, `${d}-nav__item`, {
-            [`${n}--hovered`]: m
+          ...f,
+          ref: $,
+          "aria-expanded": g,
+          className: L(d, s, `${h}-nav__item`, {
+            [`${s}--hovered`]: g
           }),
-          onClick: v,
-          onMouseOver: () => s(!0),
-          onMouseOut: () => s(!1),
-          ...h,
+          onClick: T,
+          onMouseOver: () => e(!0),
+          onMouseOut: () => e(!1),
+          ..._,
           children: [
-            /* @__PURE__ */ e("button", { className: `${d}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ e(f, { variant: u.snwHeaderLink, children: r }) }),
-            o ? l.cloneElement(o[0], { className: `${n}__submenu` }) : void 0
+            /* @__PURE__ */ o("button", { className: `${h}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ o(C, { variant: N.snwHeaderLink, children: i }) }),
+            t ? c.cloneElement(t[0], {
+              className: `${s}__submenu`,
+              onClick: (p) => {
+                var r, a;
+                (a = (r = t[0].props) == null ? void 0 : r.onClick) == null || a.call(r, p), e == null || e(!1), n == null || n();
+              }
+            }) : null
           ]
         }
       ) })
     ] });
   }
 );
-E.displayName = "NavigationItemTrigger";
+R.displayName = "NavigationItemTrigger";
 export {
-  E as default
+  R as default
 };

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

@@ -16,6 +16,10 @@ export interface NavigationListProps extends React.ComponentProps<'ul'> {
      * Optional right section heading
      */
     rightSectionHeading?: string;
+    /**
+     * Rewrite the onClick event
+     * */
+    onClick?: React.MouseEventHandler<HTMLElement>;
 }
 declare const NavigationList: React.ForwardRefExoticComponent<Omit<NavigationListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export default NavigationList;

package/dist/components/Navigation/NavigationList/NavigationList.js

@@ -1,43 +1,53 @@
-import { jsxs as e, jsx as c } from "react/jsx-runtime";
-import * as i from "react";
-import { px as t } from "../../../utils/index.js";
-import l from "../../../node_modules/classnames/index.js";
-import { TextVariants as p } from "../../Text/types.js";
-import f from "../../Text/Text.js";
-const h = i.forwardRef(
-  ({ id: o, children: n, className: d, isOffScreen: _, leftSectionHeading: m, rightSectionHeading: v }, u) => {
-    const s = i.Children.toArray(n).filter((a) => {
-      if (a && a.props.navGroup === "nav-link-start")
-        return a;
-    }), r = i.Children.toArray(n).filter((a) => {
-      if (a && a.props.navGroup === "nav-link-end")
-        return a;
-    });
-    return /* @__PURE__ */ e(
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import * as n from "react";
+import { px as e } from "../../../utils/index.js";
+import p from "../../../node_modules/classnames/index.js";
+import { TextVariants as N } from "../../Text/types.js";
+import $ from "../../Text/Text.js";
+const x = n.forwardRef(
+  ({ id: v, children: i, className: g, isOffScreen: f, leftSectionHeading: d, rightSectionHeading: u, onClick: s }, h) => {
+    const o = n.Children.toArray(i).map((t) => {
+      if (n.isValidElement(t) && t.props.navGroup === "nav-link-start")
+        return n.cloneElement(t, {
+          onClick: (r) => {
+            var a, l;
+            s == null || s(r), (l = (a = t.props) == null ? void 0 : a.onClick) == null || l.call(a, r);
+          }
+        });
+    }).filter(Boolean), _ = n.Children.toArray(i).map((t) => {
+      if (n.isValidElement(t) && t.props.navGroup === "nav-link-end")
+        return n.cloneElement(t, {
+          onClick: (r) => {
+            var a, l;
+            s == null || s(r), (l = (a = t.props) == null ? void 0 : a.onClick) == null || l.call(a, r);
+          }
+        });
+    }).filter(Boolean);
+    return /* @__PURE__ */ m(
       "ul",
       {
-        "aria-hidden": _,
-        id: o,
-        "data-testid": o,
+        "aria-hidden": f,
+        id: v,
+        "data-testid": v,
         role: "list",
-        className: l(d, `${t}-nav__list`, { [`${t}-nav__list--offscreen`]: _ }),
-        ref: u,
+        className: p(g, `${e}-nav__list`, { [`${e}-nav__list--offscreen`]: f }),
+        ref: h,
         children: [
-          s.length > 0 ? /* @__PURE__ */ e("div", { className: l(`${t}-nav__list__section`, `${t}-nav__list__section--start`), children: [
-            m ? /* @__PURE__ */ c(f, { variant: p.heading4, className: `${t}-nav__list__section--start__title`, children: m }) : null,
-            s
+          o.length > 0 ? /* @__PURE__ */ m("div", { className: p(`${e}-nav__list__section`, `${e}-nav__list__section--start`), children: [
+            d ? /* @__PURE__ */ c($, { variant: N.heading4, className: `${e}-nav__list__section--start__title`, children: d }) : null,
+            o
           ] }) : null,
-          r.length > 0 ? /* @__PURE__ */ e("div", { className: l(`${t}-nav__list__section`, `${t}-nav__list__section--end`), children: [
-            v ? /* @__PURE__ */ c(f, { variant: p.heading4, className: `${t}-nav__list__section--end__title`, children: v }) : null,
-            r
+          _.length > 0 ? /* @__PURE__ */ m("div", { className: p(`${e}-nav__list__section`, `${e}-nav__list__section--end`), children: [
+            u ? /* @__PURE__ */ c($, { variant: N.heading4, className: `${e}-nav__list__section--end__title`, children: u }) : null,
+            _
           ] }) : null,
-          !s.length && !r.length ? n : null
+          !o.length && !_.length ? i : null
         ]
       }
     );
   }
 );
-h.displayName = "NavigationList";
+x.displayName = "NavigationList";
 export {
-  h as default
+  x as default
 };

package/dist/patterns/LanguageSelector/LanguageSelector.js

@@ -1,72 +1,72 @@
-import { jsxs as b, Fragment as L, jsx as e } from "react/jsx-runtime";
-import { forwardRef as S } from "react";
-import { getCommonProps as N, noOp as T } from "../../utils/index.js";
-import x from "../../node_modules/classnames/index.js";
-import { SupportedLanguages as s } from "../../types/commonTypes.js";
-import C from "../../components/Dropdown/Dropdown.js";
-import k from "../../components/Accordion/Accordion.js";
-import w from "../../components/Accordion/AccordionItem.js";
-import { AccordionItemVariant as y } from "../../components/Accordion/types.js";
-import M from "../../components/Navigation/NavigationItem/NavigationItem.js";
-import { LinkVariants as V } from "../../components/Link/types.js";
-import { TextVariants as A } from "../../components/Text/types.js";
-import E from "../../components/Text/Text.js";
-import I from "../../components/Navigation/NavigationList/NavigationList.js";
-import { SSRMediaQuery as f } from "../../providers/SeldonProvider/utils.js";
+import { jsxs as h, Fragment as v, jsx as e } from "react/jsx-runtime";
+import { forwardRef as L } from "react";
+import { getCommonProps as b, noOp as S } from "../../utils/index.js";
+import N from "../../node_modules/classnames/index.js";
+import { SupportedLanguages as i } from "../../types/commonTypes.js";
+import T from "../../components/Dropdown/Dropdown.js";
+import x from "../../components/Accordion/Accordion.js";
+import C from "../../components/Accordion/AccordionItem.js";
+import { AccordionItemVariant as k } from "../../components/Accordion/types.js";
+import w from "../../components/Navigation/NavigationItem/NavigationItem.js";
+import { LinkVariants as y } from "../../components/Link/types.js";
+import { TextVariants as M } from "../../components/Text/types.js";
+import V from "../../components/Text/Text.js";
+import A from "../../components/Navigation/NavigationList/NavigationList.js";
+import { SSRMediaQuery as g } from "../../providers/SeldonProvider/utils.js";
+import { getLanguageLabel as I } from "./utils.js";
 const P = ({
   id: a,
-  value: l,
+  value: t,
   // can't be passed to the accordion
   onValueChange: o,
-  label: t,
+  label: l,
   options: n,
   ...m
-}) => /* @__PURE__ */ e(k, { ...m, children: /* @__PURE__ */ e(
-  w,
+}) => /* @__PURE__ */ e(x, { ...m, children: /* @__PURE__ */ e(
+  C,
   {
     hasTransition: !0,
     id: a != null ? a : "language-selector-accordion",
-    label: /* @__PURE__ */ e(E, { variant: A.snwHeaderLink, children: t }),
-    variant: y.lg,
-    children: /* @__PURE__ */ e(I, { id: `${a}-navlist`, children: n.map((r) => /* @__PURE__ */ e(
-      M,
+    label: /* @__PURE__ */ e(V, { variant: M.snwHeaderLink, children: l }),
+    variant: k.lg,
+    children: /* @__PURE__ */ e(A, { id: `${a}-navlist`, children: n.map((r) => /* @__PURE__ */ e(
+      w,
       {
         label: r.label,
         onClick: () => o(r.value),
-        navType: V.snwFlyoutLink
+        navType: y.snwFlyoutLink
       },
       r.value
     )) })
   }
-) }), j = S(
+) }), j = L(
   ({
     className: a,
-    currentLanguage: l = s.en,
+    currentLanguage: t = i.en,
     languageOptions: o = [
-      { label: "English", value: s.en },
-      { label: "中文", value: s.zh }
+      { label: "English", value: i.en },
+      { label: "中文", value: i.zh }
     ],
-    onLanguageChange: t = T,
+    onLanguageChange: l = S,
     id: n,
     isHidden: m,
     ...r
-  }, c) => {
-    var u, g;
-    const { className: p, ...h } = N({ id: n }, "LanguageSelector"), v = (g = (u = o.find((i) => i.value === l)) == null ? void 0 : u.label) != null ? g : "English", d = {
-      ...h,
+  }, s) => {
+    const { className: c, ...u } = b({ id: n }, "LanguageSelector"), d = I({ languageOptions: o, currentLanguage: t }), p = {
+      ...u,
       ...r,
       id: n,
-      className: x(p, a, {
-        [`${p}--hidden`]: m
+      className: N(c, a, {
+        [`${c}--hidden`]: m
       }),
       options: o,
-      value: l,
-      onValueChange: (i) => t(i),
-      label: v
+      value: t,
+      onValueChange: (f) => l(f),
+      label: d
     };
-    return /* @__PURE__ */ b(L, { children: [
-      /* @__PURE__ */ e(f.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ e(C, { ...d, ref: c }) }),
-      /* @__PURE__ */ e(f.Media, { lessThan: "md", children: /* @__PURE__ */ e(P, { ...d, ref: c }) })
+    return /* @__PURE__ */ h(v, { children: [
+      /* @__PURE__ */ e(g.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ e(T, { ...p, ref: s }) }),
+      /* @__PURE__ */ e(g.Media, { lessThan: "md", children: /* @__PURE__ */ e(P, { ...p, ref: s }) })
     ] });
   }
 );

package/dist/patterns/LanguageSelector/utils.d.ts

@@ -0,0 +1,7 @@
+import { LanguageSelectorProps } from './LanguageSelector';
+interface GetLanguageLabelProps {
+    languageOptions: LanguageSelectorProps['languageOptions'];
+    currentLanguage: LanguageSelectorProps['currentLanguage'];
+}
+export declare const getLanguageLabel: ({ languageOptions, currentLanguage }: GetLanguageLabelProps) => string;
+export {};

package/dist/patterns/LanguageSelector/utils.js

@@ -0,0 +1,7 @@
+const f = ({ languageOptions: b, currentLanguage: c }) => {
+  var e, L;
+  return (L = (e = b == null ? void 0 : b.find((d) => d.value === c)) == null ? void 0 : e.label) != null ? L : "English";
+};
+export {
+  f as getLanguageLabel
+};

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

@@ -34,6 +34,10 @@ export type HeaderContextType = {
      * Set the search expanded state
      */
     setIsSearchExpanded: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Close the mobile menu
+     * */
+    closeMenu?: () => void;
 };
 export declare const HeaderContext: React.Context<HeaderContextType>;
 /**

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

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

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

@@ -0,0 +1,9 @@
+import { HeaderProps } from './Header';
+type UseMobileMenuProps = Pick<HeaderProps, 'toggleCloseText' | 'toggleOpenText'>;
+export declare const useMobileMenu: ({ toggleCloseText, toggleOpenText }: UseMobileMenuProps) => {
+    isMenuOpen: boolean;
+    handleMenuToggle: () => void;
+    closeMenu: () => void;
+    toggleText: string | undefined;
+};
+export {};

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

@@ -0,0 +1,8 @@
+import { useState as l } from "react";
+const a = ({ toggleCloseText: o, toggleOpenText: t }) => {
+  const [e, n] = l(!1);
+  return { isMenuOpen: e, handleMenuToggle: () => n((s) => !s), closeMenu: () => n(!1), toggleText: e ? o : t };
+};
+export {
+  a as useMobileMenu
+};

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

@@ -2,7 +2,8 @@ import { noOp as e } from "../../utils/index.js";
 const n = {
   isMenuOpen: !1,
   isSearchExpanded: !1,
-  setIsSearchExpanded: e
+  setIsSearchExpanded: e,
+  closeMenu: e
 };
 export {
   n as defaultHeaderContext

package/package.json

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