@phillips/seldon 1.47.0 → 1.49.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/_virtual/_commonjsHelpers.js +15 -13
  2. package/dist/assets/PhillipsLogo.svg.js +1 -1
  3. package/dist/assets/close.svg.js +1 -1
  4. package/dist/components/Header/Header.d.ts +13 -4
  5. package/dist/components/Header/Header.js +53 -48
  6. package/dist/components/Header/utils.d.ts +9 -0
  7. package/dist/components/Header/utils.js +13 -0
  8. package/dist/components/Navigation/Navigation.js +35 -31
  9. package/dist/components/Navigation/NavigationList/NavigationList.d.ts +5 -1
  10. package/dist/components/Navigation/NavigationList/NavigationList.js +11 -7
  11. package/dist/components/Search/Search.js +121 -113
  12. package/dist/components/Search/SearchButton.d.ts +7 -0
  13. package/dist/components/Search/SearchButton.js +37 -0
  14. package/dist/components/Subscribe/Subscribe.js +12 -13
  15. package/dist/node_modules/@babel/runtime/helpers/esm/extends.js +13 -0
  16. package/dist/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js +7 -0
  17. package/dist/node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js +10 -0
  18. package/dist/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js +8 -0
  19. package/dist/node_modules/dom-helpers/esm/addClass.js +7 -0
  20. package/dist/node_modules/dom-helpers/esm/hasClass.js +6 -0
  21. package/dist/node_modules/dom-helpers/esm/removeClass.js +9 -0
  22. package/dist/node_modules/lodash.debounce/index.js +3 -0
  23. package/dist/node_modules/prop-types/index.js +11 -8
  24. package/dist/node_modules/react-transition-group/esm/CSSTransition.js +207 -0
  25. package/dist/node_modules/react-transition-group/esm/Transition.js +336 -0
  26. package/dist/node_modules/react-transition-group/esm/TransitionGroupContext.js +5 -0
  27. package/dist/node_modules/react-transition-group/esm/config.js +6 -0
  28. package/dist/node_modules/react-transition-group/esm/utils/PropTypes.js +21 -0
  29. package/dist/node_modules/react-transition-group/esm/utils/reflow.js +6 -0
  30. package/dist/node_modules/usehooks-ts/dist/index.js +37 -0
  31. package/dist/scss/_vars.scss +3 -0
  32. package/dist/scss/componentStyles.scss +1 -0
  33. package/dist/scss/components/Drawer/_drawer.scss +1 -1
  34. package/dist/scss/components/Header/_header.scss +30 -3
  35. package/dist/scss/components/Input/_input.scss +1 -2
  36. package/dist/scss/components/Navigation/NavigationItem/_navigationItem.scss +2 -2
  37. package/dist/scss/components/Navigation/NavigationList/_navigationList.scss +14 -2
  38. package/dist/scss/components/Navigation/_navigation.scss +6 -16
  39. package/dist/scss/components/Search/SearchResults/_searchResults.scss +10 -19
  40. package/dist/scss/components/Search/_search.scss +52 -74
  41. package/dist/scss/components/Search/_searchButton.scss +41 -0
  42. package/dist/scss/components/Subscribe/_subscribe.scss +3 -14
  43. package/dist/utils/index.d.ts +1 -1
  44. package/dist/utils/index.js +1 -1
  45. package/package.json +5 -2
  46. package/dist/assets/loading_spinner.svg.js +0 -7
@@ -1,26 +1,28 @@
1
- function n(e) {
1
+ var u = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : {};
2
+ function f(e) {
2
3
  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
3
4
  }
4
- function c(e) {
5
+ function l(e) {
5
6
  if (e.__esModule) return e;
6
- var o = e.default;
7
- if (typeof o == "function") {
8
- var t = function r() {
9
- return this instanceof r ? Reflect.construct(o, arguments, this.constructor) : o.apply(this, arguments);
7
+ var r = e.default;
8
+ if (typeof r == "function") {
9
+ var t = function o() {
10
+ return this instanceof o ? Reflect.construct(r, arguments, this.constructor) : r.apply(this, arguments);
10
11
  };
11
- t.prototype = o.prototype;
12
+ t.prototype = r.prototype;
12
13
  } else t = {};
13
- return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(r) {
14
- var u = Object.getOwnPropertyDescriptor(e, r);
15
- Object.defineProperty(t, r, u.get ? u : {
14
+ return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(o) {
15
+ var n = Object.getOwnPropertyDescriptor(e, o);
16
+ Object.defineProperty(t, o, n.get ? n : {
16
17
  enumerable: !0,
17
18
  get: function() {
18
- return e[r];
19
+ return e[o];
19
20
  }
20
21
  });
21
22
  }), t;
22
23
  }
23
24
  export {
24
- c as getAugmentedNamespace,
25
- n as getDefaultExportFromCjs
25
+ u as commonjsGlobal,
26
+ l as getAugmentedNamespace,
27
+ f as getDefaultExportFromCjs
26
28
  };
@@ -1,5 +1,5 @@
1
1
  import * as e from "react";
2
- const l = (t) => /* @__PURE__ */ e.createElement("svg", { "data-testid": "header-logo-svg", width: 131, height: 18, viewBox: "0 0 131 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Logo/ HP Button", clipPath: "url(#clip0_3288_4057)" }, /* @__PURE__ */ e.createElement("path", { id: "Phillips Logo", d: "M54.8166 0.274027H52.6224V13.726H63.7504V11.6083H54.8166V0.274027ZM41.3171 13.7273H43.5119V0.274027H41.3171V13.7273ZM21.276 0.274027H19.1214V13.726H21.2566V8.86215H30.0526V13.726H32.2079V0.274027H30.0526V6.80339H21.2566L21.276 0.274027ZM87.8477 13.7273H90.0425V0.274027H87.8477V13.7273ZM118.23 10.402L117.489 12.3843C119.214 13.3651 122.153 14 124.23 14C128.07 14 130.48 12.4912 130.48 9.84295C130.48 6.72565 127.521 6.17565 124.309 5.86211C122.252 5.66647 120.096 5.50969 120.096 4.01971C120.096 2.86206 121.135 2.11772 123.898 2.11772C125.543 2.11772 127.444 2.49021 129.031 3.15747L129.716 1.157C127.953 0.39193 125.817 0 123.936 0C120.058 0 117.863 1.52885 117.863 4.01971C117.863 7.1571 120.861 7.7058 124.034 7.99991C126.091 8.1962 128.227 8.37305 128.227 9.8436C128.227 11.0401 127.15 11.8829 124.25 11.8829C122.467 11.8823 120.004 11.3485 118.23 10.402ZM72.4298 0.274027H70.2357V13.726H81.3637V11.6083H72.4298V0.274027ZM106.676 0.274027H99.1724V13.726H101.367V9.27417H106.676C109.811 9.27417 111.614 7.39161 111.614 4.76406C111.614 2.15659 109.85 0.274027 106.676 0.274027ZM106.421 7.1571H101.367V2.39174H106.421C108.321 2.39174 109.379 3.27407 109.379 4.7647C109.38 6.25533 108.361 7.1571 106.421 7.1571ZM7.50343 0.274027H0V13.726H2.19414V9.27417H7.50343C10.638 9.27417 12.4399 7.39161 12.4399 4.76406C12.4406 2.15659 10.6775 0.274027 7.50343 0.274027ZM7.24907 7.1571H2.19414V2.39174H7.24907C9.14936 2.39174 10.2069 3.27407 10.2069 4.7647C10.2063 6.25533 9.18819 7.1571 7.24907 7.1571Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_3288_4057" }, /* @__PURE__ */ e.createElement("rect", { width: 130.667, height: 14, fill: "white" }))));
2
+ const l = (t) => /* @__PURE__ */ e.createElement("svg", { "data-testid": "header-logo-svg", viewBox: "0 0 131 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Logo/ HP Button", clipPath: "url(#clip0_3288_4057)" }, /* @__PURE__ */ e.createElement("path", { id: "Phillips Logo", d: "M54.8166 0.274027H52.6224V13.726H63.7504V11.6083H54.8166V0.274027ZM41.3171 13.7273H43.5119V0.274027H41.3171V13.7273ZM21.276 0.274027H19.1214V13.726H21.2566V8.86215H30.0526V13.726H32.2079V0.274027H30.0526V6.80339H21.2566L21.276 0.274027ZM87.8477 13.7273H90.0425V0.274027H87.8477V13.7273ZM118.23 10.402L117.489 12.3843C119.214 13.3651 122.153 14 124.23 14C128.07 14 130.48 12.4912 130.48 9.84295C130.48 6.72565 127.521 6.17565 124.309 5.86211C122.252 5.66647 120.096 5.50969 120.096 4.01971C120.096 2.86206 121.135 2.11772 123.898 2.11772C125.543 2.11772 127.444 2.49021 129.031 3.15747L129.716 1.157C127.953 0.39193 125.817 0 123.936 0C120.058 0 117.863 1.52885 117.863 4.01971C117.863 7.1571 120.861 7.7058 124.034 7.99991C126.091 8.1962 128.227 8.37305 128.227 9.8436C128.227 11.0401 127.15 11.8829 124.25 11.8829C122.467 11.8823 120.004 11.3485 118.23 10.402ZM72.4298 0.274027H70.2357V13.726H81.3637V11.6083H72.4298V0.274027ZM106.676 0.274027H99.1724V13.726H101.367V9.27417H106.676C109.811 9.27417 111.614 7.39161 111.614 4.76406C111.614 2.15659 109.85 0.274027 106.676 0.274027ZM106.421 7.1571H101.367V2.39174H106.421C108.321 2.39174 109.379 3.27407 109.379 4.7647C109.38 6.25533 108.361 7.1571 106.421 7.1571ZM7.50343 0.274027H0V13.726H2.19414V9.27417H7.50343C10.638 9.27417 12.4399 7.39161 12.4399 4.76406C12.4406 2.15659 10.6775 0.274027 7.50343 0.274027ZM7.24907 7.1571H2.19414V2.39174H7.24907C9.14936 2.39174 10.2069 3.27407 10.2069 4.7647C10.2063 6.25533 9.18819 7.1571 7.24907 7.1571Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_3288_4057" }, /* @__PURE__ */ e.createElement("rect", { width: 130.667, height: 14, fill: "white" }))));
3
3
  export {
4
4
  l as default
5
5
  };
@@ -1,5 +1,5 @@
1
1
  import * as e from "react";
2
- const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.28261 7.93223C8.72892 7.48592 9.44554 7.47892 9.88322 7.9166L24.1481 22.1814C24.5857 22.6191 24.5787 23.3357 24.1324 23.782C23.6861 24.2284 22.9695 24.2354 22.5318 23.7977L8.26698 9.53285C7.8293 9.09517 7.8363 8.37855 8.28261 7.93223Z", fill: "#323232" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24.1324 7.93222C24.5787 8.37854 24.5857 9.09515 24.148 9.53283L9.8832 23.7977C9.44552 24.2353 8.7289 24.2284 8.28259 23.782C7.83627 23.3357 7.82928 22.6191 8.26696 22.1814L22.5318 7.91659C22.9695 7.47891 23.6861 7.48591 24.1324 7.93222Z", fill: "#323232" }));
2
+ const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.28261 7.93223C8.72892 7.48592 9.44554 7.47892 9.88322 7.9166L24.1481 22.1814C24.5857 22.6191 24.5787 23.3357 24.1324 23.782C23.6861 24.2284 22.9695 24.2354 22.5318 23.7977L8.26698 9.53285C7.8293 9.09517 7.8363 8.37855 8.28261 7.93223Z", fill: "#000" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M24.1324 7.93222C24.5787 8.37854 24.5857 9.09515 24.148 9.53283L9.8832 23.7977C9.44552 24.2353 8.7289 24.2284 8.28259 23.782C7.83627 23.3357 7.82928 22.6191 8.26696 22.1814L22.5318 7.91659C22.9695 7.47891 23.6861 7.48591 24.1324 7.93222Z", fill: "#000" }));
3
3
  export {
4
4
  t as default
5
5
  };
@@ -21,12 +21,21 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
21
21
  */
22
22
  logoText?: string;
23
23
  }
24
- export declare const HeaderContext: React.Context<{
24
+ export type HeaderContextType = {
25
25
  defaultMobileMenuLabel: string;
26
26
  expandedItem: string;
27
- setExpandedItem: (_item: string) => void;
27
+ setExpandedItem: (item: string) => void;
28
28
  isExpanded: boolean;
29
- onSelect: (_label: string) => void;
30
- }>;
29
+ onSelect: (label: string) => void;
30
+ /**
31
+ * Is the user within the search input and searching
32
+ */
33
+ isSearchExpanded: boolean;
34
+ /**
35
+ * Set the search expanded state
36
+ */
37
+ setIsSearchExpanded: React.Dispatch<React.SetStateAction<boolean>>;
38
+ };
39
+ export declare const HeaderContext: React.Context<HeaderContextType>;
31
40
  declare const Header: ({ defaultMobileMenuLabel, logo, className, children, toggleOpenText, toggleCloseText, logoText, ...props }: React.PropsWithChildren<HeaderProps>) => import("react/jsx-runtime").JSX.Element;
32
41
  export default Header;
@@ -1,74 +1,79 @@
1
- import { jsxs as N, jsx as e } from "react/jsx-runtime";
2
- import r from "../../node_modules/classnames/index.js";
3
- import * as i from "react";
4
- import { findChildrenOfType as _, px as a } from "../../utils/index.js";
5
- import x from "../Search/Search.js";
6
- import P from "../../assets/PhillipsLogo.svg.js";
7
- const j = i.createContext({
8
- defaultMobileMenuLabel: "",
9
- expandedItem: "",
10
- // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
11
- setExpandedItem: (t) => {
12
- },
13
- isExpanded: !1,
14
- // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
15
- onSelect: (t) => {
16
- }
17
- }), R = ({
18
- defaultMobileMenuLabel: t = "Main Menu",
19
- logo: s = /* @__PURE__ */ e(P, {}),
20
- className: v,
21
- children: l,
22
- toggleOpenText: m = "Open Menu",
23
- toggleCloseText: h = "Close Menu",
1
+ import { jsxs as _, jsx as t } from "react/jsx-runtime";
2
+ import s from "../../node_modules/classnames/index.js";
3
+ import * as o from "react";
4
+ import { findChildrenOfType as x, px as a } from "../../utils/index.js";
5
+ import v from "../Search/Search.js";
6
+ import k from "../../assets/PhillipsLogo.svg.js";
7
+ import { defaultHeaderContext as T } from "./utils.js";
8
+ const w = o.createContext(T), D = ({
9
+ defaultMobileMenuLabel: r = "Main Menu",
10
+ logo: d = /* @__PURE__ */ t(k, {}),
11
+ className: S,
12
+ children: h,
13
+ toggleOpenText: l = "Open Menu",
14
+ toggleCloseText: m = "Close Menu",
24
15
  logoText: f = "Home Page",
25
- ...S
16
+ ...E
26
17
  }) => {
27
- const $ = _(l, x), u = _(l, x, !0), [d, E] = i.useState(!1), [p, c] = i.useState(t), o = d ? h : m, y = p !== t, g = function() {
28
- E((n) => !n), c(t);
29
- }, I = function(n) {
30
- c((C) => C === t ? n : t);
18
+ const $ = x(h, v), u = x(h, v, !0), [c, y] = o.useState(!1), [p, i] = o.useState(r), [C, I] = o.useState(!1), n = c ? m : l, N = p !== r, g = function() {
19
+ y((e) => !e), i(r);
20
+ }, H = function(e) {
21
+ i((j) => j === r ? e : r);
22
+ }, P = (e) => {
23
+ I(e);
31
24
  };
32
- return /* @__PURE__ */ N("header", { ...S, className: r(`${a}-header`, v), children: [
33
- /* @__PURE__ */ e(
25
+ return /* @__PURE__ */ _("header", { ...E, className: s(`${a}-header`, S), children: [
26
+ /* @__PURE__ */ t("div", { className: `${a}-header__top-row`, children: /* @__PURE__ */ t(
27
+ "h1",
28
+ {
29
+ "data-testid": "header-logo",
30
+ className: `${a}-header__logo`,
31
+ tabIndex: n === l ? 0 : -1,
32
+ children: /* @__PURE__ */ t("a", { href: "/", "aria-label": f, children: typeof d == "object" ? d : /* @__PURE__ */ t("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d, height: "14" }) })
33
+ }
34
+ ) }),
35
+ /* @__PURE__ */ t(
34
36
  "div",
35
37
  {
36
- className: r(`${a}-header__overlay`, { [`${a}-header__overlay--active`]: d }),
38
+ className: s(`${a}-header__overlay`, { [`${a}-header__overlay--active`]: c }),
37
39
  "data-testid": "header-overlay",
38
40
  onClick: g
39
41
  }
40
42
  ),
41
- /* @__PURE__ */ e(
43
+ /* @__PURE__ */ t(
42
44
  "button",
43
45
  {
44
- "aria-label": o,
46
+ "aria-label": n,
45
47
  "data-testid": "mobile-menu-toggle",
46
48
  type: "button",
47
49
  onClick: g,
48
- className: r(`${a}-header__toggle-btn`, {
49
- [`${a}-header__toggle-btn--open`]: o === h
50
+ className: s(`${a}-header__toggle-btn`, {
51
+ [`${a}-header__toggle-btn--open`]: n === m
50
52
  }),
51
- children: /* @__PURE__ */ e("span", { children: o })
53
+ children: /* @__PURE__ */ t("span", { children: n })
52
54
  }
53
55
  ),
54
- /* @__PURE__ */ e("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, tabIndex: o === m ? 0 : -1, children: /* @__PURE__ */ e("a", { href: "/", "aria-label": f, children: typeof s == "object" ? s : /* @__PURE__ */ e("img", { alt: "Phillips", "data-testid": "header-logo-img", src: s, height: "14" }) }) }),
55
- /* @__PURE__ */ e("div", { className: r(`${a}-header__nav`, { [`${a}-header__nav--open`]: d }), children: /* @__PURE__ */ e(
56
- j.Provider,
56
+ /* @__PURE__ */ _(
57
+ w.Provider,
57
58
  {
58
59
  value: {
59
- defaultMobileMenuLabel: t,
60
+ defaultMobileMenuLabel: r,
60
61
  expandedItem: p,
61
- setExpandedItem: (n) => c(n),
62
- isExpanded: y,
63
- onSelect: (n) => I(n)
62
+ setExpandedItem: (e) => i(e),
63
+ isExpanded: N,
64
+ onSelect: (e) => H(e),
65
+ isSearchExpanded: C,
66
+ setIsSearchExpanded: P
64
67
  },
65
- children: u
68
+ children: [
69
+ /* @__PURE__ */ t("div", { className: s(`${a}-header__nav`, { [`${a}-header__nav--open`]: c }), children: u }),
70
+ $
71
+ ]
66
72
  }
67
- ) }),
68
- $
73
+ )
69
74
  ] });
70
75
  };
71
76
  export {
72
- j as HeaderContext,
73
- R as default
77
+ w as HeaderContext,
78
+ D as default
74
79
  };
@@ -0,0 +1,9 @@
1
+ export declare const defaultHeaderContext: {
2
+ defaultMobileMenuLabel: string;
3
+ expandedItem: string;
4
+ setExpandedItem: () => void;
5
+ isExpanded: boolean;
6
+ onSelect: () => void;
7
+ isSearchExpanded: boolean;
8
+ setIsSearchExpanded: () => void;
9
+ };
@@ -0,0 +1,13 @@
1
+ import { noOp as e } from "../../utils/index.js";
2
+ const d = {
3
+ defaultMobileMenuLabel: "",
4
+ expandedItem: "",
5
+ setExpandedItem: e,
6
+ isExpanded: !1,
7
+ onSelect: e,
8
+ isSearchExpanded: !1,
9
+ setIsSearchExpanded: e
10
+ };
11
+ export {
12
+ d as defaultHeaderContext
13
+ };
@@ -1,50 +1,54 @@
1
- import { jsxs as p, jsx as o } from "react/jsx-runtime";
2
- import * as x from "react";
3
- import { px as e } from "../../utils/index.js";
4
- import d from "../../node_modules/classnames/index.js";
5
- import { HeaderContext as v } from "../Header/Header.js";
6
- const _ = ({
7
- backBtnLabel: i,
8
- children: r,
9
- className: b,
10
- id: a,
11
- visible: n = !0
1
+ import { jsxs as r, jsx as c } from "react/jsx-runtime";
2
+ import * as l from "react";
3
+ import { findChildrenOfType as m, px as a } from "../../utils/index.js";
4
+ import b from "../../node_modules/classnames/index.js";
5
+ import { HeaderContext as _ } from "../Header/Header.js";
6
+ import p from "./NavigationList/NavigationList.js";
7
+ const g = ({
8
+ backBtnLabel: f,
9
+ children: i,
10
+ className: v,
11
+ id: e,
12
+ visible: s = !0
12
13
  }) => {
13
- const { defaultMobileMenuLabel: l, isExpanded: s, expandedItem: t, setExpandedItem: m } = x.useContext(v), c = () => m(t === l ? t : l);
14
- return /* @__PURE__ */ p(
14
+ const { defaultMobileMenuLabel: o, isExpanded: d, expandedItem: n, setExpandedItem: x, isSearchExpanded: $ } = l.useContext(_), h = () => x(n === o ? n : o), t = m(i, p), u = m(i, p, !0);
15
+ return /* @__PURE__ */ r(
15
16
  "nav",
16
17
  {
17
18
  role: "navigation",
18
- "aria-labelledby": `${a}-label`,
19
- "data-testid": a,
20
- id: a,
21
- className: d(`${e}-nav`, b, { [`${e}-nav--expanded`]: s }),
19
+ "aria-labelledby": `${e}-label`,
20
+ "data-testid": e,
21
+ id: e,
22
+ className: b(`${a}-nav`, v, { [`${a}-nav--expanded`]: d }),
22
23
  children: [
23
- /* @__PURE__ */ o(
24
+ /* @__PURE__ */ c(
24
25
  "button",
25
26
  {
26
- "data-testid": `${a}-back-btn`,
27
- tabIndex: s ? 0 : -1,
28
- className: `${e}-nav__back-btn`,
29
- onClick: c,
30
- children: i
27
+ "data-testid": `${e}-back-btn`,
28
+ tabIndex: d ? 0 : -1,
29
+ className: `${a}-nav__back-btn`,
30
+ onClick: h,
31
+ children: f
31
32
  }
32
33
  ),
33
- /* @__PURE__ */ o(
34
+ /* @__PURE__ */ c(
34
35
  "h2",
35
36
  {
36
- id: `${a}-label`,
37
- "data-testid": `${a}-label`,
38
- className: d(`${e}-nav__label`, { [`${e}-nav__label--hidden`]: !n }),
39
- style: { "--visible": n ? "visible" : "hidden" },
40
- children: t || "Main Menu"
37
+ id: `${e}-label`,
38
+ "data-testid": `${e}-label`,
39
+ className: b(`${a}-nav__label`, { [`${a}-nav__label--hidden`]: !s }),
40
+ style: { "--visible": s ? "visible" : "hidden" },
41
+ children: n || "Main Menu"
41
42
  }
42
43
  ),
43
- r
44
+ /* @__PURE__ */ r("div", { className: `${a}-nav__list-container`, children: [
45
+ l.isValidElement(t == null ? void 0 : t[0]) ? l.cloneElement(t[0], { isOffScreen: $ }) : void 0,
46
+ u
47
+ ] })
44
48
  ]
45
49
  }
46
50
  );
47
51
  };
48
52
  export {
49
- _ as default
53
+ g as default
50
54
  };
@@ -4,6 +4,10 @@ export interface NavigationListProps extends React.HTMLAttributes<HTMLElement> {
4
4
  * id for the navigation list
5
5
  */
6
6
  id: string;
7
+ /**
8
+ * Is the nav list offscreen?
9
+ */
10
+ isOffScreen?: boolean;
7
11
  }
8
- declare const NavigationList: ({ id, children, className }: React.PropsWithChildren<NavigationListProps>) => import("react/jsx-runtime").JSX.Element;
12
+ declare const NavigationList: React.FC<NavigationListProps>;
9
13
  export default NavigationList;
@@ -1,24 +1,28 @@
1
- import { jsxs as p, jsx as _ } from "react/jsx-runtime";
1
+ import { jsxs as c, jsx as _ } from "react/jsx-runtime";
2
2
  import * as r from "react";
3
3
  import { px as a } from "../../../utils/index.js";
4
4
  import l from "../../../node_modules/classnames/index.js";
5
- import { HeaderContext as v } from "../../Header/Header.js";
6
- const x = ({ id: o, children: n, className: m }) => {
7
- const { isExpanded: i } = r.useContext(v), s = r.Children.toArray(n).filter((t) => {
5
+ import { HeaderContext as f } from "../../Header/Header.js";
6
+ const $ = ({ id: o, children: n, className: m, isOffScreen: p, ...v }) => {
7
+ const { isExpanded: i } = r.useContext(f), s = r.Children.toArray(n).filter((t) => {
8
8
  if (t && t.props.navGroup === "nav-link-lg")
9
9
  return t;
10
10
  }), e = r.Children.toArray(n).filter((t) => {
11
11
  if (t && t.props.navGroup === "nav-link-sm")
12
12
  return t;
13
13
  });
14
- return /* @__PURE__ */ p(
14
+ return /* @__PURE__ */ c(
15
15
  "ul",
16
16
  {
17
17
  id: o,
18
18
  "data-testid": o,
19
19
  role: "list",
20
20
  "aria-expanded": i,
21
- className: l(m, `${a}-nav__list`, { [`${a}-nav__list--expanded`]: i }),
21
+ className: l(m, `${a}-nav__list`, {
22
+ [`${a}-nav__list--expanded`]: i,
23
+ [`${a}-nav__list--offscreen`]: p
24
+ }),
25
+ ...v,
22
26
  children: [
23
27
  s.length > 0 ? /* @__PURE__ */ _("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--large-cta`), children: s }) : null,
24
28
  e.length > 0 ? /* @__PURE__ */ _("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--small-cta`), children: e }) : null,
@@ -28,5 +32,5 @@ const x = ({ id: o, children: n, className: m }) => {
28
32
  );
29
33
  };
30
34
  export {
31
- x as default
35
+ $ as default
32
36
  };