@phillips/seldon 1.143.2 → 1.144.0

package/dist/components/ComboBox/ComboBox.d.ts

@@ -0,0 +1,69 @@
+import { default as React } from 'react';
+export interface ComboBoxProps {
+    /**
+     * Boolean to specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * List of options to be displayed in the ComboBox.
+     */
+    options: {
+        label?: string;
+        value: string;
+    }[];
+    /**
+     * Unique id for the ComboBox.
+     */
+    id: string;
+    /**
+     * Optional className for custom styling.
+     */
+    className?: string;
+    /**
+     * Label for the ComboBox.
+     */
+    labelText: string;
+    /**
+     * Optional placeholder text for the input.
+     */
+    placeholder?: string;
+    /**
+     * Input value for the ComboBox.
+     */
+    inputValue: string;
+    /**
+     * Passed in function to handle input value changes.
+     */
+    setInputValue: (value: string) => void;
+    /**
+     * aria-label optional input label
+     */
+    ariaLabelInput?: string;
+    /**
+     * aria-label for the clear button
+     */
+    ariaLabelClear?: string;
+    /**
+     * aria-label for the dropdown button
+     */
+    ariaLabelDropdown?: string;
+    /**
+     * aria-label for content
+     */
+    ariaLabelContent?: string;
+    /**
+     * If true, the input will be cleared when the user clicks away when the input value is not in the options list.
+     */
+    autoClearInput?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * This is a ComboBox component that allows users to select from a list of options or enter a custom value.
+ *
+ * [Figma Link] https://www.figma.com/design/rIefa3bRPyZbZmtyV9PSQv/My-Account?node-id=1-3&p=f&m=dev
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-comboBox--overview)
+ */
+declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;
+export default ComboBox;

package/dist/components/ComboBox/ComboBox.js

@@ -0,0 +1,221 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Root as D, Trigger as E, Portal as T, Content as j } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import p from "../../node_modules/classnames/index.js";
+import { Command as w, CommandInput as F, CommandList as K, CommandGroup as G, CommandItem as X } from "../../node_modules/cmdk/dist/index.js";
+import l from "react";
+import { useOnClickOutside as q } from "../../node_modules/usehooks-ts/dist/index.js";
+import "../../assets/formatted/AccountActive.js";
+import "../../assets/formatted/Account.js";
+import "../../assets/formatted/Add.js";
+import "../../assets/formatted/AppleAppStoreBadge.js";
+import "../../assets/formatted/ArrowDown.js";
+import "../../assets/formatted/ArrowLeft.js";
+import "../../assets/formatted/ArrowRight.js";
+import "../../assets/formatted/ArrowUp.js";
+import "../../assets/formatted/Bag.js";
+import "../../assets/formatted/Calendar.js";
+import z from "../../assets/formatted/ChevronDown.js";
+import "../../assets/formatted/ChevronLeft.js";
+import "../../assets/formatted/ChevronRight.js";
+import "../../assets/formatted/ChevronUp.js";
+import A from "../../assets/formatted/CloseX.js";
+import "../../assets/formatted/ConditionReport.js";
+import "../../assets/formatted/Delete.js";
+import "../../assets/formatted/Download.js";
+import "../../assets/formatted/Edit.js";
+import "../../assets/formatted/Email.js";
+import "../../assets/formatted/Error.js";
+import "../../assets/formatted/ExternalLink.js";
+import "../../assets/formatted/Facebook.js";
+import "../../assets/formatted/FavoriteActive.js";
+import "../../assets/formatted/Favorite.js";
+import "../../assets/formatted/Filters.js";
+import "../../assets/formatted/Fullscreen.js";
+import "../../assets/formatted/FullscreenExit.js";
+import "../../assets/formatted/GavelActive.js";
+import "../../assets/formatted/Gavel.js";
+import "../../assets/formatted/Grid.js";
+import "../../assets/formatted/Hide.js";
+import "../../assets/formatted/HomeActive.js";
+import "../../assets/formatted/Home.js";
+import "../../assets/formatted/IconGreenCircle.js";
+import "../../assets/formatted/IconRedCircle.js";
+import "../../assets/formatted/Icon.js";
+import "../../assets/formatted/Instagram.js";
+import "../../assets/formatted/LinkedIn.js";
+import "../../assets/formatted/List.js";
+import "../../assets/formatted/Lock.js";
+import "../../assets/formatted/MagnificentSeven.js";
+import "../../assets/formatted/Menu.js";
+import "../../assets/formatted/Mute.js";
+import "../../assets/formatted/Pause.js";
+import "../../assets/formatted/PhillipsAppIcon.js";
+import "../../assets/formatted/PhillipsLogo.js";
+import "../../assets/formatted/Play.js";
+import "../../assets/formatted/Red.js";
+import "../../assets/formatted/Refresh.js";
+import "../../assets/formatted/Search.js";
+import "../../assets/formatted/SellActive.js";
+import "../../assets/formatted/Sell.js";
+import "../../assets/formatted/Share.js";
+import "../../assets/formatted/Subtract.js";
+import "../../assets/formatted/Success.js";
+import "../../assets/formatted/Tooltip.js";
+import "../../assets/formatted/TwitterX.js";
+import "../../assets/formatted/Upload.js";
+import "../../assets/formatted/View.js";
+import "../../assets/formatted/VolumeMaximum.js";
+import "../../assets/formatted/VolumeMid.js";
+import "../../assets/formatted/VolumeMinimum.js";
+import "../../assets/formatted/WeChat.js";
+import { getCommonProps as H } from "../../utils/index.js";
+import { getScssVar as v } from "../../utils/scssUtils.js";
+const J = l.forwardRef(function({
+  options: N = [],
+  className: g,
+  id: r,
+  labelText: L,
+  placeholder: x,
+  inputValue: m = "",
+  setInputValue: i,
+  ariaLabelDropdown: d,
+  ariaLabelInput: f,
+  ariaLabelClear: u,
+  ariaLabelContent: _,
+  hideLabel: R = !1,
+  autoClearInput: O = !0,
+  ...k
+}, y) {
+  const { className: e, ...I } = H({ id: r }, "ComboBox"), [C, s] = l.useState(!1), $ = l.useRef(null), S = z, B = A, b = l.useRef(null), P = l.useRef({}), c = N.filter(
+    (o) => o.value.toLowerCase().includes(m.toLowerCase()) || o.label && o.label.toLowerCase().includes(m.toLowerCase())
+  );
+  return q(b, (o) => {
+    if (o.target.closest(`.${e}__item`) || o.target.closest(`.${e}__content`))
+      return;
+    !c.some(
+      (a) => a.value.toLowerCase() === m.toLowerCase()
+    ) && O && i(""), s(!1), o.stopPropagation();
+  }), /* @__PURE__ */ t("div", { ref: y, className: p(e, g), id: r, ...I, ...k, children: /* @__PURE__ */ n("div", { ref: b, children: [
+    /* @__PURE__ */ t(
+      "label",
+      {
+        htmlFor: `${r}-input`,
+        className: p(`${e}__label`, {
+          [`${e}__label--hidden`]: R
+        }),
+        "data-testid": `${r}-label`,
+        children: L
+      }
+    ),
+    /* @__PURE__ */ t(
+      w,
+      {
+        loop: !0,
+        onKeyDown: (o) => {
+          setTimeout(() => {
+            o.key === "Escape" && s(!1);
+          }, 0);
+        },
+        children: /* @__PURE__ */ n(D, { open: !0, children: [
+          /* @__PURE__ */ n("div", { className: `${e}__input-wrapper`, children: [
+            /* @__PURE__ */ t(E, { asChild: !0, children: /* @__PURE__ */ t(
+              F,
+              {
+                ref: $,
+                placeholder: x,
+                value: m,
+                onValueChange: (o) => {
+                  i(o), s(!0);
+                },
+                onKeyDown: (o) => {
+                  o.key === "Tab" && s(!1);
+                },
+                onFocus: () => {
+                  s((o) => !o), i(m);
+                },
+                className: `${e}__input`,
+                tabIndex: 0,
+                "aria-label": f || `${r}-input`,
+                "data-testid": `${r}-input`
+              }
+            ) }),
+            m.length > 0 && /* @__PURE__ */ t(
+              "button",
+              {
+                className: `${e}__close-button`,
+                "data-testid": `${r}-item-close-button`,
+                onClick: () => i(""),
+                "aria-label": u || `${r}-clear`,
+                tabIndex: -1,
+                children: /* @__PURE__ */ t("div", { className: `${e}__icon`, children: /* @__PURE__ */ t(
+                  B,
+                  {
+                    color: v("", "$primary-black"),
+                    height: 18,
+                    width: 18,
+                    className: `${e}__icon-button`
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ t(
+              "button",
+              {
+                "aria-label": d || `${r}-dropdown`,
+                className: `${e}__dropdown-button`,
+                onClick: () => $.current?.focus(),
+                "data-testid": `${r}-dropdown`,
+                tabIndex: -1,
+                children: /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: p(`${e}__icon`, {
+                      [`${e}__icon--flipped`]: C
+                    }),
+                    children: /* @__PURE__ */ t(
+                      S,
+                      {
+                        color: v("", "$pure-black"),
+                        height: 18,
+                        width: 18,
+                        className: `${e}__icon-button`
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(
+            j,
+            {
+              className: `${e}__content`,
+              "aria-label": _ || `${r}-content`,
+              children: C && /* @__PURE__ */ t(K, { className: `${e}__list`, children: c.some(
+                (o) => o.value.toLowerCase().includes(m.toLowerCase()) || o.label && o.label.toLowerCase().includes(m.toLowerCase())
+              ) ? /* @__PURE__ */ t(G, { children: c.map(
+                (o, h) => (o.value.toLowerCase().includes(m.toLowerCase()) || o.label && o.label.toLowerCase().includes(m.toLowerCase())) && /* @__PURE__ */ t(
+                  X,
+                  {
+                    className: `${e}__item`,
+                    value: o.label ? `${o.label} ${o.value}` : o.value,
+                    ref: (a) => P.current[o.value] = a,
+                    onSelect: (a) => {
+                      i(a), s(!1);
+                    },
+                    children: o.label ? `${o.label} ${o.value}` : o.value
+                  },
+                  `${o.value}-${h}`
+                )
+              ) }) : /* @__PURE__ */ t(w.Empty, { children: "No Options." }) })
+            }
+          ) })
+        ] })
+      }
+    )
+  ] }) });
+});
+J.displayName = "ComboBox";
+export {
+  J as default
+};

package/dist/components/ComboBox/ComboBox.stories.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { ComboBoxProps } from './ComboBox';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        options: {
+            value: string;
+        }[];
+        id: string;
+        labelText: string;
+    };
+    argTypes: {};
+};

package/dist/components/ComboBox/ComboBox.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/PhoneNumberPicker/PhoneNumberPicker.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface PhoneNumberPickerProps {
+    /**
+     * Unique id for the ComboBox.
+     */
+    id: string;
+    /**
+     * Optional className for custom styling.
+     */
+    className?: string;
+    /**
+     * Label for the ComboBox.
+     */
+    labelText: string;
+    /**
+     * Optional placeholder text for the input.
+     */
+    placeholder?: string;
+    /**
+     * Input value for the ComboBox.
+     */
+    inputValue: string;
+    /**
+     * Passed in function to handle input value changes.
+     */
+    setInputValue: (value: string) => void;
+}
+/**
+ * ## Overview
+ *
+ * Overview of PhoneNumberPicker component
+ *
+ * [Figma Link] https://www.figma.com/design/rIefa3bRPyZbZmtyV9PSQv/My-Account?node-id=1-3&p=f&m=dev
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-PhoneNumberPicker--overview)
+ */
+declare const PhoneNumberPicker: React.ForwardRefExoticComponent<PhoneNumberPickerProps & React.RefAttributes<HTMLDivElement>>;
+export default PhoneNumberPicker;

package/dist/components/PhoneNumberPicker/PhoneNumberPicker.stories.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { PhoneNumberPickerProps } from './PhoneNumberPicker';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<PhoneNumberPickerProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    ({ ...props }: PhoneNumberPickerProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        labelText: string;
+        id: string;
+    };
+};

package/dist/components/PhoneNumberPicker/PhoneNumberPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -28,7 +28,6 @@ export { default as Navigation, type NavigationProps } from './components/Naviga
 export { default as NavigationItem, type NavigationItemProps, } from './components/Navigation/NavigationItem/NavigationItem';
 export { default as NavigationItemTrigger, type NavigationItemTriggerProps, } from './components/Navigation/NavigationItemTrigger/NavigationItemTrigger';
 export { default as NavigationList, type NavigationListProps, } from './components/Navigation/NavigationList/NavigationList';
-export { default as PageContentWrapper } from './components/PageContentWrapper/PageContentWrapper';
 export { default as Pagination, type PaginationOption, type PaginationOptionValue, type PaginationProps, } from './components/Pagination/Pagination';
 export * from './components/PinchZoom';
 export { default as Row, type RowProps } from './components/Row/Row';
@@ -55,6 +54,15 @@ export { default as UserManagement, type UserManagementProps } from './patterns/
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './patterns/ViewingsList/StatefulViewingsList';
 export { default as ViewingsList, type ViewingsListProps } from './patterns/ViewingsList/ViewingsList';
 export * from './providers/SeldonProvider/SeldonProvider';
+export * from './components/Carousel';
+export * from './components/ComboBox';
+export * from './components/Detail';
+export { default as PageContentWrapper } from './components/PageContentWrapper/PageContentWrapper';
+export * from './components/PinchZoom';
+export * from './components/SeldonImage';
+export * from './components/Tabs';
+export * from './patterns/DetailList';
+export * from './patterns/SaleHeaderBanner';
 export { default as Footer, type FooterProps } from './site-furniture/Footer/Footer';
 export { default as Header, type HeaderProps } from './site-furniture/Header/Header';
 export * from './types/commonTypes';