@phillips/seldon 1.42.1 → 1.44.0

package/dist/assets/chevronDown.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.1313 18.2525L24.4194 9.96438C24.7123 9.67148 25.4883 9.61908 25.9346 10.0654C26.3809 10.5117 26.3285 11.2877 26.0356 11.5806L16.8432 20.773C16.6948 20.9215 16.4222 21.0081 16.1313 20.9994C15.8404 21.0081 15.5678 20.9215 15.4194 20.773L6.227 11.5806C5.9341 11.2877 5.8817 10.5117 6.32801 10.0654C6.77432 9.61908 7.55035 9.67148 7.84324 9.96438L16.1313 18.2525Z", fill: "#323232" }));
+export {
+  l as default
+};

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,32 @@
+import React, { ComponentProps } from 'react';
+import * as DropdownSelect from '@radix-ui/react-select';
+import { DropdownItem } from './types';
+export interface DropdownProps extends Omit<DropdownSelect.SelectProps, 'defaultValue' | 'dir'>, Omit<ComponentProps<'div'>, 'ref'> {
+    /**
+     * All options to be listed in the dropdown
+     */
+    options: DropdownItem[];
+    /**
+     * Current selected value
+     */
+    value: DropdownSelect.SelectProps['defaultValue'];
+    /**
+     * Pass a call back that triggers once a new value is selected
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Aria-label for specific dropdown use, e.g. Select your language
+     */
+    label: string;
+}
+/**
+ * ## Overview
+ *
+ * Overview of this component
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=10570-6295&t=EnYSS6Hk58EiWaVg-4)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-dropdown--overview)
+ */
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
+export default Dropdown;

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,49 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import d, { useState as g } from "react";
+import { getCommonProps as C } from "../../utils/index.js";
+import i from "../../node_modules/classnames/index.js";
+import { Root as D, Trigger as $, Value as b, Icon as v, Portal as I, Content as S, ScrollUpButton as x, Viewport as R, ScrollDownButton as O, Item as P, ItemText as V } from "../../node_modules/@radix-ui/react-select/dist/index.js";
+import c from "../../assets/chevronDown.svg.js";
+const j = d.forwardRef(
+  ({ options: l, value: a, onValueChange: s, label: t, className: _, id: m, ...h }, f) => {
+    const { className: o, ...u } = C({ id: m }, "Dropdown"), [N, w] = g(!1);
+    return /* @__PURE__ */ e("div", { className: i(o, _), id: m, ...u, ...h, children: /* @__PURE__ */ n(
+      D,
+      {
+        value: a,
+        onValueChange: (r) => {
+          s(r);
+        },
+        onOpenChange: w,
+        children: [
+          /* @__PURE__ */ n($, { className: `${o}__trigger`, "aria-label": t, ref: f, children: [
+            /* @__PURE__ */ e(b, { placeholder: a }),
+            /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(c, { className: i({ [`${o}__trigger-icon-expanded`]: N }) }) })
+          ] }),
+          /* @__PURE__ */ e(I, { children: /* @__PURE__ */ n(S, { className: `${o}__content`, position: "popper", children: [
+            /* @__PURE__ */ e(x, { className: `${o}__scroll-button__up`, children: /* @__PURE__ */ e(c, {}) }),
+            /* @__PURE__ */ e(R, { className: `${o}__viewport`, children: l.map((r) => /* @__PURE__ */ e(
+              p,
+              {
+                value: r.value,
+                disabled: r.value === a,
+                className: o,
+                children: r.label
+              },
+              r.value
+            )) }),
+            /* @__PURE__ */ e(O, { className: `${o}__scroll-button`, children: /* @__PURE__ */ e(c, {}) })
+          ] }) })
+        ]
+      }
+    ) });
+  }
+);
+j.displayName = "Dropdown";
+const p = d.forwardRef(
+  ({ children: l, className: a, ...s }, t) => /* @__PURE__ */ e(P, { className: `${a}__item`, ...s, ref: t, children: /* @__PURE__ */ e(V, { children: l }) })
+);
+p.displayName = "DropdownSelectItem";
+export {
+  j as default
+};

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { default as Dropdown, type DropdownProps } from './Dropdown';

package/dist/components/Dropdown/types.d.ts

@@ -0,0 +1,4 @@
+export interface DropdownItem {
+    label: string;
+    value: string;
+}

package/dist/components/ViewingsList/ViewingsListCard.js

@@ -1,13 +1,13 @@
-import { jsxs as u, jsx as t, Fragment as E } from "react/jsx-runtime";
+import { jsxs as m, jsx as t, Fragment as $ } from "react/jsx-runtime";
 import * as a from "react";
 import mt from "../../node_modules/classnames/index.js";
-import { px as d } from "../../utils/index.js";
+import { px as u } from "../../utils/index.js";
 import y from "../Input/Input.js";
 import c from "../Button/Button.js";
 import { ButtonVariants as l } from "../Button/types.js";
 import ft from "./ViewingsListCardForm.js";
-const i = `${d}-viewings-list-card`, $t = ({
-  address1: $,
+const i = `${u}-viewings-list-card`, dt = ({
+  address1: d,
   address1Label: C,
   addressUrl: O,
   addressUrlLabel: w,
@@ -19,8 +19,8 @@ const i = `${d}-viewings-list-card`, $t = ({
   cardTitle: T = "Add New Viewing",
   deleteBtnLabel: V = "DELETE",
   editBtnLabel: _ = "EDIT",
-  isEditState: s,
-  enableOnSite: m = "false",
+  isEditState: o,
+  enableOnSite: f = "false",
   enableOnSiteToggleLabel: k = "Enabled on website",
   email: I,
   emailLabel: N = "Email",
@@ -32,10 +32,10 @@ const i = `${d}-viewings-list-card`, $t = ({
   invalidFields: n,
   location: R,
   locationLabel: q = "Location",
-  onCancel: f,
-  onEdit: p,
-  onDelete: h,
-  onSave: b,
+  onCancel: p,
+  onEdit: h,
+  onDelete: b,
+  onSave: g,
   previewDates: G,
   previewDatesLabel: H,
   previewHours1: J,
@@ -52,37 +52,37 @@ const i = `${d}-viewings-list-card`, $t = ({
   viewingDates: tt,
   viewingDatesLabel: et,
   viewingHours1: nt,
-  viewingHours1Label: st,
-  viewingHours2: ot,
-  viewingHours2Label: rt
+  viewingHours1Label: ot,
+  viewingHours2: rt,
+  viewingHours2Label: st
 }) => {
-  const [at, ct] = a.useState(m === "true"), r = a.useRef(null);
+  const [at, ct] = a.useState(f === "true"), s = a.useRef(null);
   a.useEffect(() => {
-    s && r.current && r.current.focus();
-  }, [s]), a.useEffect(() => {
-    var o, g;
-    n && r.current && ((g = (o = r.current.closest(".phillips-viewings-list-card")) == null ? void 0 : o.querySelector(".phillips-input--invalid input")) == null || g.focus());
+    o && s.current && s.current.focus();
+  }, [o]), a.useEffect(() => {
+    var r, E;
+    n && s.current && ((E = (r = s.current.closest(`.${u}-viewings-list-card`)) == null ? void 0 : r.querySelector(`.${u}-input--invalid input`)) == null || E.focus());
   }, [n]);
   const lt = () => {
-    typeof f == "function" && f();
-  }, it = () => {
     typeof p == "function" && p();
-  }, ut = (o) => {
-    typeof b == "function" && b(o);
+  }, it = () => {
+    typeof h == "function" && h();
+  }, ut = (r) => {
+    typeof g == "function" && g(r);
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     "section",
     {
       "data-testid": `viewings-list-card-${e}`,
       id: e,
-      className: mt(`${i}`, { [`${i}--edit-state`]: s }),
+      className: mt(`${i}`, { [`${i}--edit-state`]: o }),
       children: [
         /* @__PURE__ */ t("h3", { className: `${i}__title`, children: T }),
         /* @__PURE__ */ t("input", { type: "hidden", name: "id", value: e }),
         /* @__PURE__ */ t(
           y,
           {
-            ref: r,
+            ref: s,
             id: `location-${e}`,
             defaultValue: R,
             labelText: q,
@@ -90,13 +90,13 @@ const i = `${d}-viewings-list-card`, $t = ({
             name: "location",
             invalid: n == null ? void 0 : n.location,
             invalidText: n == null ? void 0 : n.location,
-            readOnly: !s
+            readOnly: !o
           }
         ),
-        s ? /* @__PURE__ */ t(
+        o ? /* @__PURE__ */ t(
           ft,
           {
-            address1: $,
+            address1: d,
             address1Label: C,
             addressUrl: O,
             addressUrlLabel: w,
@@ -127,9 +127,9 @@ const i = `${d}-viewings-list-card`, $t = ({
             viewingDates: tt,
             viewingDatesLabel: et,
             viewingHours1: nt,
-            viewingHours1Label: st,
-            viewingHours2: ot,
-            viewingHours2Label: rt
+            viewingHours1Label: ot,
+            viewingHours2: rt,
+            viewingHours2Label: st
           }
         ) : null,
         /* @__PURE__ */ t(
@@ -137,19 +137,19 @@ const i = `${d}-viewings-list-card`, $t = ({
           {
             id: `enableOnSite-${e}`,
             type: "toggle",
-            defaultChecked: m === "true",
+            defaultChecked: f === "true",
             labelText: k,
             size: "md",
             inline: !0,
             value: "true",
             name: "enableOnSite",
-            onChange: () => ct((o) => !o),
-            readOnly: !s
+            onChange: () => ct((r) => !r),
+            readOnly: !o
           }
         ),
         at ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
         /* @__PURE__ */ t("hr", {}),
-        /* @__PURE__ */ t("div", { className: `${i}__btn-group ${d}-button__group`, children: s ? /* @__PURE__ */ u(E, { children: [
+        /* @__PURE__ */ t("div", { className: `${i}__btn-group ${u}-button__group`, children: o ? /* @__PURE__ */ m($, { children: [
           /* @__PURE__ */ t(
             c,
             {
@@ -172,7 +172,7 @@ const i = `${d}-viewings-list-card`, $t = ({
               children: L
             }
           )
-        ] }) : /* @__PURE__ */ u(E, { children: [
+        ] }) : /* @__PURE__ */ m($, { children: [
           /* @__PURE__ */ t(
             c,
             {
@@ -191,7 +191,7 @@ const i = `${d}-viewings-list-card`, $t = ({
               variant: l.ghost,
               type: "button",
               size: "sm",
-              onClick: () => typeof h == "function" && h(e),
+              onClick: () => typeof b == "function" && b(e),
               children: V
             }
           )
@@ -201,5 +201,5 @@ const i = `${d}-viewings-list-card`, $t = ({
   );
 };
 export {
-  $t as default
+  dt as default
 };

package/dist/index.d.ts

@@ -36,4 +36,5 @@ export { default as UserManagement, type UserManagementProps } from './component
 export { AuthState } from './components/UserManagement/types';
 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';

package/dist/index.js

@@ -1,17 +1,17 @@
-import { PaddingTokens as a, defaultYear as f, emailValidation as m, encodeURLSearchParams as p, findChildrenOfType as d, generatePaddingClassName as s, getCommonProps as u, noOp as i, px as l, useNormalizedInputProps as x } from "./utils/index.js";
+import { PaddingTokens as a, defaultYear as f, emailValidation as m, encodeURLSearchParams as p, findChildrenOfType as d, generatePaddingClassName as s, getCommonProps as u, noOp as l, px as i, useNormalizedInputProps as x } from "./utils/index.js";
 import { default as g } from "./pages/Page.js";
 import { default as S } from "./components/Button/Button.js";
 import { ButtonVariants as I } from "./components/Button/types.js";
 import { default as P } from "./components/IconButton/IconButton.js";
 import { default as k } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as T } from "./components/Footer/Footer.js";
-import { Grid as h } from "./components/Grid/Grid.js";
-import { default as w } from "./components/Header/Header.js";
+import { default as w } from "./components/Footer/Footer.js";
+import { Grid as b } from "./components/Grid/Grid.js";
+import { default as v } from "./components/Header/Header.js";
 import { default as C } from "./components/Navigation/Navigation.js";
 import { default as y } from "./components/Navigation/NavigationItem/NavigationItem.js";
-import { default as M } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
-import { default as R } from "./components/Navigation/NavigationList/NavigationList.js";
-import { default as z } from "./components/HeroBanner/HeroBanner.js";
+import { default as H } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import { default as O } from "./components/Navigation/NavigationList/NavigationList.js";
+import { default as U } from "./components/HeroBanner/HeroBanner.js";
 import { default as E } from "./components/Input/Input.js";
 import { default as Y } from "./components/Link/Link.js";
 import { LinkVariants as q } from "./components/Link/types.js";
@@ -20,42 +20,44 @@ import { default as W } from "./components/LinkList/LinkList.js";
 import { default as Z } from "./components/Row/Row.js";
 import { default as $ } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as re } from "./components/GridItem/types.js";
-import { default as oe } from "./components/Search/Search.js";
+import { default as te } from "./components/Search/Search.js";
 import { default as fe } from "./components/Select/Select.js";
 import { default as pe } from "./components/SplitPanel/SplitPanel.js";
 import { default as se } from "./components/Subscribe/Subscribe.js";
-import { SubscriptionState as ie } from "./components/Subscribe/types.js";
+import { SubscriptionState as le } from "./components/Subscribe/types.js";
 import { default as xe } from "./components/Social/Social.js";
 import { default as ge } from "./components/ViewingsList/ViewingsList.js";
 import { default as Se } from "./components/Modal/Modal.js";
 import { default as Ie } from "./components/Drawer/Drawer.js";
 import { default as Pe } from "./components/ViewingsList/StatefulViewingsList.js";
 import { TextVariants as ke } from "./components/Text/types.js";
-import { default as Te } from "./components/Text/Text.js";
-import { default as he } from "./components/Accordion/Accordion.js";
-import { default as we } from "./components/Accordion/AccordionItem.js";
+import { default as we } from "./components/Text/Text.js";
+import { default as be } from "./components/Accordion/Accordion.js";
+import { default as ve } from "./components/Accordion/AccordionItem.js";
 import { default as Ce } from "./components/UserManagement/UserManagement.js";
 import { AuthState as ye } from "./components/UserManagement/types.js";
-import { SupportedLanguages as Me } from "./types/commonTypes.js";
-import { default as Re } from "./components/Breadcrumb/Breadcrumb.js";
+import { SupportedLanguages as He } from "./types/commonTypes.js";
+import { default as Oe } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
-import { default as ze } from "./components/Video/Video.js";
+import { default as Ue } from "./components/Dropdown/Dropdown.js";
+import { default as Ee } from "./components/Video/Video.js";
 export {
-  he as Accordion,
-  we as AccordionItem,
+  be as Accordion,
+  ve as AccordionItem,
   ye as AuthState,
-  Re as Breadcrumb,
+  Oe as Breadcrumb,
   S as Button,
   I as ButtonVariants,
   Ie as Drawer,
+  Ue as Dropdown,
   k as ErrorBoundary,
-  T as Footer,
-  h as Grid,
+  w as Footer,
+  b as Grid,
   $ as GridItem,
   re as GridItemAlign,
-  w as Header,
-  z as HeroBanner,
+  v as Header,
+  U as HeroBanner,
   P as IconButton,
   E as Input,
   Y as Link,
@@ -65,23 +67,23 @@ export {
   Se as Modal,
   C as Navigation,
   y as NavigationItem,
-  M as NavigationItemTrigger,
-  R as NavigationList,
+  H as NavigationItemTrigger,
+  O as NavigationList,
   a as PaddingTokens,
   g as Page,
   Z as Row,
-  oe as Search,
+  te as Search,
   fe as Select,
   xe as Social,
   pe as SplitPanel,
   Pe as StatefulViewingsList,
   se as Subscribe,
-  ie as SubscriptionState,
-  Me as SupportedLanguages,
-  Te as Text,
+  le as SubscriptionState,
+  He as SupportedLanguages,
+  we as Text,
   ke as TextVariants,
   Ce as UserManagement,
-  ze as Video,
+  Ee as Video,
   ge as ViewingsList,
   f as defaultYear,
   m as emailValidation,
@@ -89,7 +91,7 @@ export {
   d as findChildrenOfType,
   s as generatePaddingClassName,
   u as getCommonProps,
-  i as noOp,
-  l as px,
+  l as noOp,
+  i as px,
   x as useNormalizedInputProps
 };