@phillips/seldon 1.51.0 → 1.52.0

package/dist/components/Search/Search.js

@@ -1,145 +1,157 @@
-import { jsxs as p, Fragment as k, jsx as a } from "react/jsx-runtime";
-import * as f from "react";
-import { getCommonProps as P, px as y, encodeURLSearchParams as N } from "../../utils/index.js";
-import u from "../../node_modules/classnames/index.js";
-import j from "../Input/Input.js";
-import D from "../Link/Link.js";
-import F from "./SearchResults/SearchResults.js";
-import { TextVariants as H } from "../Text/types.js";
-import O from "../Text/Text.js";
-import { useOnClickOutside as V } from "../../node_modules/usehooks-ts/dist/index.js";
-import { HeaderContext as A } from "../Header/Header.js";
-import { SearchButton as K } from "./SearchButton.js";
-import M from "../../node_modules/react-transition-group/esm/CSSTransition.js";
-const re = ({
-  onSearch: S,
-  searchResults: C = [],
-  state: c = "idle",
-  defaultValue: I = "",
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import c, { useEffect as P } from "react";
+import { getCommonProps as y, px as j, encodeURLSearchParams as C } from "../../utils/index.js";
+import p from "../../node_modules/classnames/index.js";
+import D from "../Input/Input.js";
+import H from "../Link/Link.js";
+import O from "./SearchResults/SearchResults.js";
+import { TextVariants as V } from "../Text/types.js";
+import A from "../Text/Text.js";
+import { useOnClickOutside as F } from "../../node_modules/usehooks-ts/dist/index.js";
+import { HeaderContext as K } from "../Header/Header.js";
+import { SearchButton as M } from "./SearchButton.js";
+import U from "../../node_modules/react-transition-group/esm/CSSTransition.js";
+const te = ({
+  onSearch: u,
+  searchResults: E = [],
+  state: i = "idle",
+  defaultValue: N = "",
   className: R,
-  placeholder: b = "",
+  placeholder: I = "",
   searchButtonText: l = "Search",
-  loadingText: w = "Search In Progress...",
-  invalidText: E = "Invalid search",
-  getAllResultsText: L = (e) => `View all results for ${e}`,
-  getAllResultsLink: v = (e) => `/Search?Search=${e}`,
-  ...x
+  loadingText: b = "Search In Progress...",
+  invalidText: w = "Invalid search",
+  getAllResultsText: k = (e) => `View all results for ${e}`,
+  getAllResultsLink: _ = (e) => `/Search?Search=${e}`,
+  ...S
 }) => {
-  var $;
-  const { className: e, "data-testid": m, ...T } = P(x, "Search"), d = f.useContext(A), h = f.useRef(null), o = f.useRef(null), t = d.isSearchExpanded, s = ($ = h.current) == null ? void 0 : $.value;
-  V(o, () => g(!1));
-  const _ = (r) => {
+  var g;
+  const { className: e, "data-testid": d, ...L } = y(S, "Search"), o = c.useContext(K), m = c.useRef(null), f = c.useRef(null), x = c.useRef(null), a = o.isSearchExpanded, s = (g = m.current) == null ? void 0 : g.value;
+  F(x, () => $(!1));
+  const v = (r) => {
     var n;
     if (r.stopPropagation(), r.key === "Enter") {
       if (r.preventDefault(), s && s.length > 2) {
-        const i = N(v(s));
-        window.location.href = i;
+        const T = C(_(s));
+        window.location.href = T;
       }
       r.currentTarget instanceof HTMLAnchorElement && r.currentTarget.click();
     }
-    r.key === "Escape" && (d.setIsSearchExpanded(!1), (n = o.current) == null || n.reset());
-  }, g = (r) => {
-    var n, i;
-    if (d.setIsSearchExpanded(r), r) {
-      (n = h.current) == null || n.focus();
+    r.key === "Escape" && (o.setIsSearchExpanded(!1), (n = f.current) == null || n.reset());
+  };
+  P(() => {
+    var r;
+    if (a) {
+      (r = m.current) == null || r.focus();
       return;
     }
-    (i = o.current) == null || i.reset();
+  }, [a]);
+  const $ = (r) => {
+    var n;
+    o.setIsSearchExpanded(r), (n = f.current) == null || n.reset();
   };
-  return /* @__PURE__ */ p(k, { children: [
-    /* @__PURE__ */ a(O, { variant: H.heading3, className: `${e}__label`, children: l }),
-    /* @__PURE__ */ a(
-      "div",
-      {
-        ...T,
-        className: u(e, R, { [`${e}--active`]: t }),
-        "data-testid": m,
-        role: "search",
-        ...x,
-        children: /* @__PURE__ */ p(
-          "form",
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      onClick: () => o.setIsSearchExpanded(!0),
+      className: `${e}__container`,
+      ref: x,
+      children: [
+        /* @__PURE__ */ t(A, { variant: V.heading4, className: `${e}__container__label`, children: l }),
+        /* @__PURE__ */ t(
+          "div",
           {
-            "data-testid": `${m}-form`,
-            className: u(`${e}__form`, {
-              [`${e}__form--active`]: t
-            }),
-            ref: o,
-            children: [
-              /* @__PURE__ */ p(
-                "div",
-                {
-                  className: u(`${e}__content-wrapper`, {
-                    [`${e}__content-wrapper--active`]: t
-                  }),
-                  role: "combobox",
-                  "aria-haspopup": "listbox",
-                  children: [
-                    /* @__PURE__ */ a(
-                      M,
-                      {
-                        in: t,
-                        classNames: `${y}-input`,
-                        addEndListener: () => {
-                        },
-                        children: /* @__PURE__ */ a(
-                          j,
+            ...L,
+            className: p(e, R, { [`${e}--active`]: a }),
+            "data-testid": d,
+            role: "search",
+            ...S,
+            children: /* @__PURE__ */ h(
+              "form",
+              {
+                "data-testid": `${d}-form`,
+                className: p(`${e}__form`, {
+                  [`${e}__form--active`]: a
+                }),
+                ref: f,
+                children: [
+                  /* @__PURE__ */ h(
+                    "div",
+                    {
+                      className: p(`${e}__content-wrapper`, {
+                        [`${e}__content-wrapper--active`]: a
+                      }),
+                      role: "combobox",
+                      "aria-haspopup": "listbox",
+                      children: [
+                        /* @__PURE__ */ t(
+                          U,
+                          {
+                            in: a,
+                            classNames: `${j}-input`,
+                            addEndListener: () => {
+                            },
+                            children: /* @__PURE__ */ t(
+                              D,
+                              {
+                                "aria-hidden": !a,
+                                className: `${e}__input`,
+                                id: "search-input",
+                                hideLabel: !0,
+                                labelText: l,
+                                placeholder: a ? I : "",
+                                type: "text",
+                                defaultValue: N,
+                                invalid: i === "invalid",
+                                invalidText: w,
+                                onKeyDown: v,
+                                onChange: u ? (r) => {
+                                  u(r.target.value);
+                                } : void 0,
+                                ref: m
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ t(
+                          M,
                           {
-                            "aria-hidden": !t,
-                            className: `${e}__input`,
-                            id: "search-input",
-                            hideLabel: !0,
-                            labelText: l,
-                            placeholder: t ? b : "",
-                            type: "text",
-                            defaultValue: I,
-                            invalid: c === "invalid",
-                            invalidText: E,
-                            onKeyDown: _,
-                            onChange: S ? (r) => {
-                              S(r.target.value);
-                            } : void 0,
-                            ref: h
+                            className: e,
+                            searchButtonText: l,
+                            state: i,
+                            testId: d,
+                            isSearchExpanded: a,
+                            setIsSearchExpanded: $
                           }
                         )
-                      }
-                    ),
-                    /* @__PURE__ */ a(
-                      K,
-                      {
-                        className: e,
-                        searchButtonText: l,
-                        state: c,
-                        testId: m,
-                        isSearchExpanded: t,
-                        setIsSearchExpanded: g
-                      }
-                    )
-                  ]
-                }
-              ),
-              s && s.length > 2 ? /* @__PURE__ */ a(
-                F,
-                {
-                  autoCompleteResults: C,
-                  isLoading: c === "loading",
-                  loadingText: w,
-                  onKeyDown: _,
-                  children: /* @__PURE__ */ a("li", { className: `${e}__result`, children: /* @__PURE__ */ a(
-                    D,
+                      ]
+                    }
+                  ),
+                  s && s.length > 2 ? /* @__PURE__ */ t(
+                    O,
                     {
-                      href: ((r) => N(v(r)))(s),
-                      children: /* @__PURE__ */ a("p", { children: L(s) })
+                      autoCompleteResults: E,
+                      isLoading: i === "loading",
+                      loadingText: b,
+                      onKeyDown: v,
+                      children: /* @__PURE__ */ t("li", { className: `${e}__result`, children: /* @__PURE__ */ t(
+                        H,
+                        {
+                          href: ((r) => C(_(r)))(s),
+                          children: /* @__PURE__ */ t("p", { children: k(s) })
+                        }
+                      ) }, "viewAllSearchResults")
                     }
-                  ) }, "viewAllSearchResults")
-                }
-              ) : null
-            ]
+                  ) : null
+                ]
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    }
+  );
 };
 export {
-  re as default
+  te as default
 };

package/dist/components/Search/SearchButton.js

@@ -1,37 +1,41 @@
 import { jsx as n } from "react/jsx-runtime";
-import b from "../../assets/search.svg.js";
-import l from "../../assets/close.svg.js";
-const f = ({
-  state: e,
-  isSearchExpanded: r,
-  setIsSearchExpanded: i,
-  searchButtonText: _,
+import _ from "../../assets/search.svg.js";
+import b from "../../assets/close.svg.js";
+const m = ({
+  state: l,
+  isSearchExpanded: i,
+  setIsSearchExpanded: u,
+  searchButtonText: e,
   className: t,
   testId: o,
-  ...u
-}) => r ? r && e === "idle" ? /* @__PURE__ */ n(
+  ...a
+}) => i ? i ? /* @__PURE__ */ n(
   "button",
   {
-    ...u,
+    ...a,
     type: "button",
     "data-testid": `${o}-close-button`,
     "aria-label": "Close Search",
     className: `${t}__button ${t}__button--close`,
-    onClick: () => i(!1),
-    children: /* @__PURE__ */ n(l, { "data-testid": `${o}-form-icon`, className: `${t}__button__icon` })
+    onClick: (r) => {
+      u(!1), r.stopPropagation();
+    },
+    children: /* @__PURE__ */ n(b, { "data-testid": `${o}-form-icon`, className: `${t}__button__icon` })
   }
 ) : null : /* @__PURE__ */ n(
   "button",
   {
-    ...u,
+    ...a,
     type: "button",
     "data-testid": `${o}-button`,
-    "aria-label": _,
+    "aria-label": e,
     className: `${t}__button ${t}__button--search`,
-    onClick: () => i(!0),
-    children: /* @__PURE__ */ n(b, { "data-testid": `${o}-button-icon`, className: `${t}__button__icon` })
+    onClick: (r) => {
+      u(!0), r.stopPropagation();
+    },
+    children: /* @__PURE__ */ n(_, { "data-testid": `${o}-button-icon`, className: `${t}__button__icon` })
   }
 );
 export {
-  f as SearchButton
+  m as SearchButton
 };

package/dist/components/Search/SearchResults/SearchResults.js

@@ -1,20 +1,21 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
 import { px as s } from "../../../utils/index.js";
 import d from "../../Link/Link.js";
-const u = ({
-  autoCompleteResults: e = [],
-  isLoading: l,
-  children: c,
-  loadingText: i = "Loading...",
-  onKeyDown: n
+import { LinkVariants as m } from "../../Link/types.js";
+const p = ({
+  autoCompleteResults: a = [],
+  isLoading: i,
+  children: l,
+  loadingText: n = "Loading...",
+  onKeyDown: c
 }) => {
-  const h = Array.isArray(e) && e.length > 0;
-  return /* @__PURE__ */ r("div", { className: `${s}-search__results`, children: /* @__PURE__ */ t("ul", { "data-testid": "search-results", className: `${s}-search__results-container`, children: [
-    l ? /* @__PURE__ */ r("li", { className: `${s}-search__result`, children: i }) : null,
-    h && e.map((a) => /* @__PURE__ */ r("li", { className: `${s}-search__result`, children: /* @__PURE__ */ r(d, { href: a.url, onKeyDown: n, children: /* @__PURE__ */ r("p", { children: a.label }) }) }, a.id)),
-    c
+  const t = Array.isArray(a) && a.length > 0;
+  return /* @__PURE__ */ r("div", { className: `${s}-search__results`, children: /* @__PURE__ */ h("ul", { "data-testid": "search-results", className: `${s}-search__results-container`, children: [
+    i ? /* @__PURE__ */ r("li", { className: `${s}-search__result`, children: n }) : null,
+    t && a.map((e) => /* @__PURE__ */ r("li", { className: `${s}-search__result`, children: /* @__PURE__ */ r(d, { href: e.url, onKeyDown: c, variant: m.snwFlyoutLink, children: e.label }) }, e.id)),
+    l
   ] }) });
 };
 export {
-  u as default
+  p as default
 };

package/dist/components/UserManagement/UserManagement.d.ts

@@ -1,23 +1,31 @@
-import React, { ReactNode } from 'react';
+import { ComponentProps, ElementType, ReactNode } from 'react';
 import { LinkProps } from '../Link/Link';
-import { SupportedLanguages } from '../../types/commonTypes';
 import { AuthState } from './types';
-export interface UserManagementProps extends React.HTMLAttributes<HTMLDivElement> {
-    languageOptions?: {
-        label: string;
-        value: SupportedLanguages;
-    }[];
-    currentLanguage?: SupportedLanguages;
-    onLanguageChange?: (language: SupportedLanguages) => void;
+export interface UserManagementProps extends ComponentProps<'div'> {
     /**
      * The authentication state for the current user
      */
     authState?: AuthState;
+    /**
+     * Triggered when the login button is clicked
+     */
     onLogin?: () => void;
-    onLogout?: () => void;
-    accountDetailsLink?: React.ElementType<LinkProps>;
+    /**
+     * Allows override of the default `<a` element.  Can be used to support Remix `<Link`
+     */
+    accountDetailsLinkComponent?: ElementType<LinkProps>;
+    /**
+     * The href for the account details link
+     */
+    href?: string;
+    /**
+     * The label for the login button
+     */
     loginLabel?: ReactNode;
-    logoutLabel?: ReactNode;
+    /**
+     * The label for the account details link
+     */
+    accountLabel?: ReactNode;
 }
-declare const UserManagement: ({ accountDetailsLink, children, className, currentLanguage, languageOptions, onLanguageChange, onLogin, onLogout, authState, loginLabel, logoutLabel, ...props }: React.PropsWithChildren<UserManagementProps>) => import("react/jsx-runtime").JSX.Element;
+declare const UserManagement: import("react").ForwardRefExoticComponent<Omit<UserManagementProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default UserManagement;

package/dist/components/UserManagement/UserManagement.js

@@ -1,63 +1,33 @@
-import { jsxs as p, jsx as a, Fragment as S } from "react/jsx-runtime";
-import { getCommonProps as j, px as w, noOp as o } from "../../utils/index.js";
-import M from "../Input/Input.js";
-import P from "../../assets/account_circle.svg.js";
-import T from "../Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
-import U from "../Navigation/NavigationList/NavigationList.js";
-import y from "../Navigation/NavigationItem/NavigationItem.js";
-import { SupportedLanguages as m } from "../../types/commonTypes.js";
-import z from "../../node_modules/classnames/index.js";
-import { AuthState as r } from "./types.js";
-const V = ({
-  accountDetailsLink: n,
-  children: v,
-  className: f,
-  currentLanguage: s = m.en,
-  languageOptions: t = [
-    { label: "English", value: m.en },
-    { label: "中文", value: m.zh }
-  ],
-  onLanguageChange: _ = o,
-  onLogin: N = o,
-  onLogout: b = o,
-  authState: i = r.LoggedOut,
-  loginLabel: C = "Login",
-  logoutLabel: $ = "Logout",
-  ...g
-}) => {
-  var u, d;
-  const { className: l, ...x } = j(g, "UserManagement"), I = (d = (u = t.find((e) => e.value === s)) == null ? void 0 : u.label) != null ? d : "English", L = n != null ? n : "a", c = i === r.LoggedIn, A = i !== r.Loading, E = (e) => {
-    var h;
-    (h = document.activeElement) == null || h.blur(), _(e);
-  };
-  return /* @__PURE__ */ p("div", { ...x, className: z(l, f), ...g, children: [
-    /* @__PURE__ */ a("ul", { className: `${l}__account-wrapper`, children: A && /* @__PURE__ */ p(S, { children: [
-      /* @__PURE__ */ a(L, { children: /* @__PURE__ */ a(P, { className: `${l}__account-icon` }) }),
-      /* @__PURE__ */ a(
-        y,
-        {
-          className: `${l}__login`,
-          onClick: c ? b : N,
-          label: c ? $ : C
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ a(T, { className: `${l}__language`, label: I, children: /* @__PURE__ */ a(U, { id: `${w}-langauge-selection-list`, className: `${l}__language__selections`, children: t.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
-      M,
-      {
-        type: "radio",
-        id: `radio-${e.value}`,
-        labelText: e.label,
-        value: e.value,
-        inline: !0,
-        name: "languages",
-        checked: e.value === s,
-        onChange: () => E(e.value)
-      }
-    ) }, e.value)) }) }),
-    v
-  ] });
-};
+import { jsx as o, Fragment as L, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { getCommonProps as C, noOp as b } from "../../utils/index.js";
+import r from "../../assets/account_circle.svg.js";
+import v from "../../node_modules/classnames/index.js";
+import { AuthState as a } from "./types.js";
+import { TextVariants as s } from "../Text/types.js";
+import m from "../Text/Text.js";
+const A = x(
+  ({
+    accountDetailsLinkComponent: i = "a",
+    className: l,
+    onLogin: d = b,
+    authState: e = a.LoggedOut,
+    loginLabel: g = "Login",
+    accountLabel: p = "Account",
+    href: u = "/account",
+    ...t
+  }, f) => {
+    const { className: n, ...h } = C(t, "UserManagement"), N = e === a.LoggedIn, _ = e !== a.Loading;
+    return /* @__PURE__ */ o("div", { ...h, className: v(n, l), ...t, ref: f, children: _ && /* @__PURE__ */ o(L, { children: N ? /* @__PURE__ */ c(i, { className: `${n}__login`, href: u, children: [
+      /* @__PURE__ */ o(r, { className: `${n}__account-icon` }),
+      /* @__PURE__ */ o(m, { variant: s.body3, children: p })
+    ] }) : /* @__PURE__ */ c("button", { className: `${n}__login`, onClick: d, children: [
+      /* @__PURE__ */ o(r, { className: `${n}__account-icon` }),
+      /* @__PURE__ */ o(m, { variant: s.body3, children: g })
+    ] }) }) });
+  }
+);
+A.displayName = "UserManagement";
 export {
-  V as default
+  A as default
 };

package/dist/index.d.ts

@@ -38,3 +38,4 @@ export * from './types/commonTypes';
 export { Breadcrumb, type BreadcrumbProps } from './components/Breadcrumb';
 export * from './components/Dropdown';
 export { default as Video, type VideoProps } from './components/Video/Video';
+export * from './components/LanguageSelector';