@phillips/seldon 1.51.1 → 1.52.0

package/dist/components/Navigation/Navigation.js

@@ -1,54 +1,37 @@
-import { jsxs as r, jsx as c } from "react/jsx-runtime";
-import * as l from "react";
-import { findChildrenOfType as m, px as a } from "../../utils/index.js";
-import b from "../../node_modules/classnames/index.js";
-import { HeaderContext as _ } from "../Header/Header.js";
-import p from "./NavigationList/NavigationList.js";
-const g = ({
-  backBtnLabel: f,
-  children: i,
-  className: v,
-  id: e,
-  visible: s = !0
-}) => {
-  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);
-  return /* @__PURE__ */ r(
-    "nav",
-    {
-      role: "navigation",
-      "aria-labelledby": `${e}-label`,
-      "data-testid": e,
-      id: e,
-      className: b(`${a}-nav`, v, { [`${a}-nav--expanded`]: d }),
-      children: [
-        /* @__PURE__ */ c(
-          "button",
-          {
-            "data-testid": `${e}-back-btn`,
-            tabIndex: d ? 0 : -1,
-            className: `${a}-nav__back-btn`,
-            onClick: h,
-            children: f
-          }
-        ),
-        /* @__PURE__ */ c(
-          "h2",
-          {
-            id: `${e}-label`,
-            "data-testid": `${e}-label`,
-            className: b(`${a}-nav__label`, { [`${a}-nav__label--hidden`]: !s }),
-            style: { "--visible": s ? "visible" : "hidden" },
-            children: n || "Main Menu"
-          }
-        ),
-        /* @__PURE__ */ r("div", { className: `${a}-nav__list-container`, children: [
-          l.isValidElement(t == null ? void 0 : t[0]) ? l.cloneElement(t[0], { isOffScreen: $ }) : void 0,
-          u
+import { jsx as x, jsxs as h } from "react/jsx-runtime";
+import e, { forwardRef as E } from "react";
+import { findChildrenOfType as l, findChildrenExcludingTypes as N, px as d } from "../../utils/index.js";
+import C from "../../node_modules/classnames/index.js";
+import { HeaderContext as y } from "../Header/Header.js";
+import m from "./NavigationList/NavigationList.js";
+import c from "../LanguageSelector/LanguageSelector.js";
+const S = E(
+  ({ children: i, className: f, id: n, visible: p = !0, ...v }, g) => {
+    var r, s;
+    const { isSearchExpanded: a } = e.useContext(y), o = (r = l(i, m)) == null ? void 0 : r[0], u = N(i, [m, c]), t = (s = l(i, c)) == null ? void 0 : s[0];
+    return /* @__PURE__ */ x(
+      "nav",
+      {
+        role: "navigation",
+        "data-testid": n,
+        id: n,
+        style: { "--visible": p ? "visible" : "hidden" },
+        className: C(`${d}-nav`, f),
+        ...v,
+        ref: g,
+        children: /* @__PURE__ */ h("div", { className: `${d}-nav__list-container`, children: [
+          u,
+          e.isValidElement(o) ? e.cloneElement(o, { isOffScreen: a }) : void 0,
+          /* This is not visible through css when in desktop breakpoint */
+          e.isValidElement(t) && t ? e.cloneElement(t, {
+            isHidden: a
+          }) : void 0
         ] })
-      ]
-    }
-  );
-};
+      }
+    );
+  }
+);
+S.displayName = "Navigation";
 export {
-  g as default
+  S as default
 };

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

@@ -1,23 +1,19 @@
-import * as React from 'react';
 import { LinkProps } from '../../Link/Link';
 import { LinkVariants } from '../../Link/types';
-export interface NavigationItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
+import { ComponentProps, ElementType, ReactNode } from 'react';
+export interface NavigationItemProps extends ComponentProps<'li'> {
     /**
      * Optional badge for navigation item. Used currently for location of auctions
      */
-    badge?: React.ReactNode;
+    badge?: ReactNode;
     /**
      * href link
      */
     href?: string;
-    /**
-     * Optional listen to onClick event
-     */
-    onClick?: (event: React.MouseEvent<HTMLLIElement>) => void;
     /**
      * Label for the navigation item
      */
-    label?: React.ReactNode;
+    label?: ReactNode;
     /**
      * Optional group for navigation items
      */
@@ -29,7 +25,16 @@ export interface NavigationItemProps extends Omit<React.HTMLAttributes<HTMLLIEle
     /**
      * Element to render within the navigation item, renders <Link> by default
      */
-    element?: React.ElementType<LinkProps>;
+    element?: ElementType<LinkProps>;
 }
-declare const NavigationItem: ({ badge, className, href, label, navGroup, navType, onClick, element: Component, ...props }: React.PropsWithChildren<NavigationItemProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ## Overview
+ *
+ * Renders a styled link within the Header->Navigation component.  It supports both mobile and desktop layouts.  It can be used with Remix links as well.
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10570-6295&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-languageselector--overview)
+ */
+declare const NavigationItem: import("react").ForwardRefExoticComponent<Omit<NavigationItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
 export default NavigationItem;

package/dist/components/Navigation/NavigationItem/NavigationItem.js

@@ -1,44 +1,26 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import * as f from "react";
-import { px as t } from "../../../utils/index.js";
-import x from "../../../node_modules/classnames/index.js";
-import _ from "../../Link/Link.js";
-import { LinkVariants as v } from "../../Link/types.js";
-import { HeaderContext as $ } from "../../Header/Header.js";
-const j = ({
-  badge: a,
-  className: r = "",
-  href: i,
-  label: n,
-  navGroup: s,
-  navType: m,
-  onClick: o,
-  element: l = _,
-  ...d
-}) => {
-  const { expandedItem: c } = f.useContext($);
-  return /* @__PURE__ */ e(
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import { px as i } from "../../../utils/index.js";
+import f from "../../../node_modules/classnames/index.js";
+import v from "../../Link/Link.js";
+import { LinkVariants as N } from "../../Link/types.js";
+import { forwardRef as _ } from "react";
+const $ = _(
+  ({ badge: e, className: t = "", href: n, label: m, navGroup: s, navType: r, onClick: o, element: l = v, ...d }, p) => /* @__PURE__ */ a(
     "li",
     {
       ...d,
       onClick: o,
-      "data-testid": `nav-item-${n}`,
-      className: x(`${t}-nav__item`, s, r),
-      children: /* @__PURE__ */ p(
-        l,
-        {
-          href: i,
-          variant: m || v.snwHeaderLink,
-          tabIndex: c === "" ? 0 : -1,
-          children: [
-            /* @__PURE__ */ e("span", { className: `${t}-nav__item--label`, children: n }),
-            a ? /* @__PURE__ */ e("span", { className: `${t}-nav__item--badge `, children: ` • ${a}` }) : null
-          ]
-        }
-      )
+      "data-testid": `nav-item-${m}`,
+      className: f(`${i}-nav__item`, s, t),
+      ref: p,
+      children: /* @__PURE__ */ c(l, { href: n, variant: r || N.snwHeaderLink, children: [
+        /* @__PURE__ */ a("span", { className: `${i}-nav__item--label`, children: m }),
+        e ? /* @__PURE__ */ a("span", { className: `${i}-nav__item--badge `, children: ` • ${e}` }) : null
+      ] })
     }
-  );
-};
+  )
+);
+$.displayName = "NavigationItem";
 export {
-  j as default
+  $ as default
 };

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

@@ -1,9 +1,18 @@
-import * as React from 'react';
-export interface NavigationItemTriggerProps extends React.HTMLAttributes<HTMLElement> {
+import React, { ComponentProps } from 'react';
+export interface NavigationItemTriggerProps extends ComponentProps<'li'> {
     /**
      * Label for the navigation item
      */
     label: string;
 }
-declare const NavigationItemTrigger: ({ id, label, children, className, ...props }: React.PropsWithChildren<NavigationItemTriggerProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ## Overview
+ *
+ * Supports clicking in mobile mode and hovering in desktop mode to expand the child navigation lists
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10570-6295&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-languageselector--overview)
+ */
+declare const NavigationItemTrigger: React.ForwardRefExoticComponent<Omit<NavigationItemTriggerProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 export default NavigationItemTrigger;

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

@@ -1,31 +1,35 @@
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import * as l from "react";
-import { px as t } from "../../../utils/index.js";
-import p from "../../../node_modules/classnames/index.js";
-import { HeaderContext as x } from "../../Header/Header.js";
-const u = ({
-  id: r,
-  label: e,
-  children: i,
-  className: m,
-  ...o
-}) => {
-  const { expandedItem: a, onSelect: s } = l.useContext(x), c = () => s(e);
-  return /* @__PURE__ */ d(
-    "li",
-    {
-      "aria-expanded": a === e,
-      "data-testid": `nav-item-trigger-${r}`,
-      className: p(m, `${t}-nav__item`, { [`${t}-nav__item--expanded`]: a === e }),
-      onClick: c,
-      ...o,
-      children: [
-        /* @__PURE__ */ n("button", { className: `${t}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ n("label", { className: `${t}-nav__item--label`, children: e }) }),
-        i
-      ]
-    }
-  );
-};
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { getCommonProps as g, findChildrenOfType as v, px as s } from "../../../utils/index.js";
+import N from "../../../node_modules/classnames/index.js";
+import _, { forwardRef as x, useState as b } from "react";
+import { TextVariants as T } from "../../Text/types.js";
+import h from "../../Text/Text.js";
+import O from "../NavigationList/NavigationList.js";
+const I = x(
+  ({ id: n, label: i, children: m, className: l, onClick: p, ...d }, u) => {
+    const { className: e, ...c } = g({ id: n }, "NavigationItemTrigger"), [t, a] = b(!1), r = v(m, O);
+    return /* @__PURE__ */ f(
+      "li",
+      {
+        ...c,
+        ref: u,
+        "aria-expanded": t,
+        className: N(l, e, `${s}-nav__item`, {
+          [`${e}--hovered`]: t
+        }),
+        onClick: p,
+        onMouseOver: () => a(!0),
+        onMouseOut: () => a(!1),
+        ...d,
+        children: [
+          /* @__PURE__ */ o("button", { className: `${s}-nav__item-trigger`, type: "button", children: /* @__PURE__ */ o(h, { variant: T.snwHeaderLink, children: i }) }),
+          r ? _.cloneElement(r[0], { className: `${e}__submenu` }) : void 0
+        ]
+      }
+    );
+  }
+);
+I.displayName = "NavigationItemTrigger";
 export {
-  u as default
+  I as default
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface NavigationListProps extends React.HTMLAttributes<HTMLElement> {
+export interface NavigationListProps extends React.ComponentProps<'ul'> {
     /**
      * id for the navigation list
      */
@@ -9,5 +9,5 @@ export interface NavigationListProps extends React.HTMLAttributes<HTMLElement> {
      */
     isOffScreen?: boolean;
 }
-declare const NavigationList: React.FC<NavigationListProps>;
+declare const NavigationList: React.ForwardRefExoticComponent<Omit<NavigationListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export default NavigationList;

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

@@ -1,36 +1,35 @@
-import { jsxs as c, jsx as _ } from "react/jsx-runtime";
+import { jsxs as p, jsx as _ } from "react/jsx-runtime";
 import * as r from "react";
 import { px as a } from "../../../utils/index.js";
-import l from "../../../node_modules/classnames/index.js";
-import { HeaderContext as f } from "../../Header/Header.js";
-const $ = ({ id: o, children: n, className: m, isOffScreen: p, ...v }) => {
-  const { isExpanded: i } = r.useContext(f), s = r.Children.toArray(n).filter((t) => {
-    if (t && t.props.navGroup === "nav-link-lg")
-      return t;
-  }), e = r.Children.toArray(n).filter((t) => {
-    if (t && t.props.navGroup === "nav-link-sm")
-      return t;
-  });
-  return /* @__PURE__ */ c(
-    "ul",
-    {
-      id: o,
-      "data-testid": o,
-      role: "list",
-      "aria-expanded": i,
-      className: l(m, `${a}-nav__list`, {
-        [`${a}-nav__list--expanded`]: i,
-        [`${a}-nav__list--offscreen`]: p
-      }),
-      ...v,
-      children: [
-        s.length > 0 ? /* @__PURE__ */ _("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--large-cta`), children: s }) : null,
-        e.length > 0 ? /* @__PURE__ */ _("div", { className: l(`${a}-nav__list__section`, `${a}-nav__list__section--small-cta`), children: e }) : null,
-        !s.length && !e.length ? n : null
-      ]
-    }
-  );
-};
+import e from "../../../node_modules/classnames/index.js";
+const c = r.forwardRef(
+  ({ id: i, children: s, className: m, isOffScreen: o }, v) => {
+    const n = r.Children.toArray(s).filter((t) => {
+      if (t && t.props.navGroup === "nav-link-lg")
+        return t;
+    }), l = r.Children.toArray(s).filter((t) => {
+      if (t && t.props.navGroup === "nav-link-sm")
+        return t;
+    });
+    return /* @__PURE__ */ p(
+      "ul",
+      {
+        "aria-hidden": o,
+        id: i,
+        "data-testid": i,
+        role: "list",
+        className: e(m, `${a}-nav__list`, { [`${a}-nav__list--offscreen`]: o }),
+        ref: v,
+        children: [
+          n.length > 0 ? /* @__PURE__ */ _("div", { className: e(`${a}-nav__list__section`, `${a}-nav__list__section--large-cta`), children: n }) : null,
+          l.length > 0 ? /* @__PURE__ */ _("div", { className: e(`${a}-nav__list__section`, `${a}-nav__list__section--small-cta`), children: l }) : null,
+          !n.length && !l.length ? s : null
+        ]
+      }
+    );
+  }
+);
+c.displayName = "NavigationList";
 export {
-  $ as default
+  c as default
 };

package/dist/components/Search/Search.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { type SearchResultsProps } from './SearchResults/SearchResults';
 export interface SearchProps extends React.HTMLAttributes<HTMLDivElement> {
     /**