@phillips/seldon 1.154.0 → 1.155.0

package/dist/_virtual/index5.js

@@ -1,4 +1,4 @@
-var r = {};
+var e = { exports: {} };
 export {
-  r as __exports
+  e as __module
 };

package/dist/_virtual/index6.js

@@ -1,4 +1,4 @@
-var e = {};
+var e = { exports: {} };
 export {
-  e as __exports
+  e as __module
 };

package/dist/_virtual/index7.js

@@ -1,4 +1,4 @@
-var e = { exports: {} };
+var r = {};
 export {
-  e as __module
+  r as __exports
 };

package/dist/_virtual/index8.js

@@ -1,4 +1,4 @@
-var e = { exports: {} };
+var e = {};
 export {
-  e as __module
+  e as __exports
 };

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { ComboBoxOption } from './types';
 export interface ComboBoxProps {
     /**
      * Boolean to specify whether you want the underlying label to be visually hidden
@@ -7,10 +8,7 @@ export interface ComboBoxProps {
     /**
      * List of options to be displayed in the ComboBox.
      */
-    options: {
-        label?: string;
-        value: string;
-    }[];
+    options: ComboBoxOption[];
     /**
      * Unique id for the ComboBox.
      */
@@ -28,13 +26,31 @@ export interface ComboBoxProps {
      */
     placeholder?: string;
     /**
-     * Input value for the ComboBox.
+     * Name attribute for form submission
      */
-    inputValue: string;
+    name?: string;
     /**
-     * Passed in function to handle input value changes.
+     * Value for the selected option for controlled usage.
      */
-    setInputValue: (value: string) => void;
+    value?: string;
+    /**
+     * Handler for value changes for controlled usage
+     */
+    onChange?: (value: string, option: ComboBoxOption | null) => void;
+    /**
+     * Function to render custom option content
+     * Similar to MUI's renderOption
+     */
+    renderOption?: (option: ComboBoxOption) => React.ReactNode;
+    /**
+     * Sets the invalid state of the input
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Text to display when input is invalid
+     */
+    invalidText?: string;
     /**
      * aria-label optional input label
      */
@@ -51,25 +67,26 @@ export interface ComboBoxProps {
      * 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;
     /**
      * popoverContainer ref for the ComboBox
      */
     popoverContainerRef?: React.RefObject<HTMLElement>;
     /**
      * No options message translation
+     * @default "No Options."
      */
     noOptionsMessage?: string;
+    /**
+     * Handler called when the combobox loses focus
+     */
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
 }
 /**
  * ## 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
+ * [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)
  */

package/dist/components/ComboBox/ComboBox.js

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { Root as T, Trigger as j, Portal as F, Content as K } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
-import p from "../../node_modules/classnames/index.js";
-import { Command as w, CommandInput as G, CommandList as X, CommandGroup as q, CommandItem as z } from "../../node_modules/cmdk/dist/index.js";
-import l from "react";
-import { useOnClickOutside as A } from "../../node_modules/usehooks-ts/dist/index.js";
+import { jsxs as T, jsx as o } from "react/jsx-runtime";
+import { Root as dt, Trigger as ht, Portal as _t, Content as vt } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import d from "../../node_modules/classnames/index.js";
+import { Command as $t, CommandInput as yt, CommandList as wt, CommandGroup as Ct, CommandItem as bt } from "../../node_modules/cmdk/dist/index.js";
+import gt, { useState as S, useCallback as b, useRef as k, useMemo as x } from "react";
+import { useOnClickOutside as Nt } from "../../node_modules/usehooks-ts/dist/index.js";
 import "../../assets/formatted/AccountActive.js";
 import "../../assets/formatted/Account.js";
 import "../../assets/formatted/Add.js";
@@ -14,11 +14,11 @@ import "../../assets/formatted/ArrowRight.js";
 import "../../assets/formatted/ArrowUp.js";
 import "../../assets/formatted/Bag.js";
 import "../../assets/formatted/Calendar.js";
-import H from "../../assets/formatted/ChevronDown.js";
+import It from "../../assets/formatted/ChevronDown.js";
 import "../../assets/formatted/ChevronLeft.js";
 import "../../assets/formatted/ChevronRight.js";
 import "../../assets/formatted/ChevronUp.js";
-import J from "../../assets/formatted/CloseX.js";
+import Ot from "../../assets/formatted/CloseX.js";
 import "../../assets/formatted/ConditionReport.js";
 import "../../assets/formatted/Delete.js";
 import "../../assets/formatted/Download.js";
@@ -68,156 +68,261 @@ import "../../assets/formatted/VolumeMaximum.js";
 import "../../assets/formatted/VolumeMid.js";
 import "../../assets/formatted/VolumeMinimum.js";
 import "../../assets/formatted/WeChat.js";
-import { getCommonProps as M } from "../../utils/index.js";
-import { getScssVar as N } from "../../utils/scssUtils.js";
-const Q = l.forwardRef(function({
-  options: v = [],
-  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,
-  popoverContainerRef: k,
-  noOptionsMessage: y = "No Options.",
-  ...I
-}, B) {
-  const { className: e, ...P } = M({ id: r }, "ComboBox"), [C, s] = l.useState(!1), $ = l.useRef(null), S = H, D = J, b = l.useRef(null), E = l.useRef({}), n = v.filter(
-    (o) => o.value.toLowerCase().includes(m.toLowerCase()) || o.label && o.label.toLowerCase().includes(m.toLowerCase())
-  );
-  return A(b, (o) => {
-    if (o.target.closest(`.${e}__item`) || o.target.closest(`.${e}__content`))
-      return;
-    !n.some(
-      (a) => a.value.toLowerCase() === m.toLowerCase()
-    ) && O && i(""), s(!1), o.stopPropagation();
-  }), /* @__PURE__ */ t("div", { ref: B, className: p(e, g), id: r, ...P, ...I, children: /* @__PURE__ */ c("div", { ref: b, children: [
-    /* @__PURE__ */ t(
-      "label",
+import { getCommonProps as Tt, useNormalizedInputProps as kt } from "../../utils/index.js";
+import X from "../IconButton/IconButton.js";
+import { ButtonVariants as H } from "../Button/types.js";
+import { usePrevious as xt } from "../../utils/usePrevious.js";
+const Vt = gt.forwardRef(function({
+  options: a = [],
+  className: J,
+  id: s,
+  labelText: Q,
+  placeholder: Y,
+  name: V,
+  value: u,
+  onChange: p,
+  onBlur: Z,
+  renderOption: j,
+  ariaLabelDropdown: g,
+  ariaLabelInput: q,
+  ariaLabelClear: N,
+  ariaLabelContent: z,
+  hideLabel: tt = !1,
+  popoverContainerRef: et,
+  noOptionsMessage: rt = "No Options.",
+  invalid: I = !1,
+  invalidText: ot,
+  ...st
+}, D) {
+  const { className: e, ...lt } = Tt({ id: s }, "ComboBox"), it = It, nt = Ot, G = kt({
+    id: s,
+    invalid: I,
+    invalidText: ot,
+    type: "text"
+  }), [f, K] = S(!1), [at, ct] = S(""), U = xt(u), R = b((t) => t.label || t.value, []), [l, $] = S(() => {
+    if (u !== void 0) {
+      const t = a.find((r) => r.value === u);
+      return t ? t.displayValue || R(t) : "";
+    }
+    return "";
+  }), y = k(null), w = k(null), C = k(!1), E = k(null), c = b((t) => R(t), [R]), h = u !== void 0, F = h ? u : at, i = x(() => a.find((t) => t.value === F) || null, [a, F]), _ = x(() => i ? i.displayValue || c(i) : "", [i, c]), m = x(() => {
+    if (!l || i && l === _)
+      return a;
+    const t = l.toLowerCase().trim();
+    return a.filter((r) => {
+      const B = c(r).toLowerCase().includes(t), L = r.value.toLowerCase().includes(t), A = r.displayValue?.toLowerCase().includes(t) || !1;
+      let v = !1;
+      return r.filterTerms && r.filterTerms.length > 0 && (v = r.filterTerms.some((ft) => ft.toLowerCase().includes(t))), B || L || A || v;
+    });
+  }, [l, _, i, c, a]), n = b(
+    (t) => {
+      K(t), t && i && m.length > 5 && requestAnimationFrame(() => {
+        E.current && E.current.scrollIntoView({
+          block: "nearest",
+          behavior: "auto"
+        });
+      });
+    },
+    [i, m.length]
+  ), O = b(
+    (t) => {
+      h || ct(t.value);
+      const r = t.displayValue || c(t);
+      $(r), p && p(t.value, t), n(!1), C.current = !0, requestAnimationFrame(() => {
+        C.current = !1;
+      });
+    },
+    [h, p, n, c]
+  ), mt = (t) => {
+    n(!1), C.current = !0, t.preventDefault(), t.stopPropagation(), p && h && p("", null), $(""), w.current?.focus(), requestAnimationFrame(() => {
+      C.current = !1;
+    });
+  }, ut = () => {
+    K(!f), w.current?.focus();
+  }, pt = (t) => {
+    $(t), t !== "" && m.length > 0 && n(!0);
+  }, W = x(() => {
+    if (h) {
+      if (u !== U)
+        return i ? _ : l;
+      if (i) {
+        const t = _;
+        return t !== l ? l : t;
+      } else
+        return l;
+    }
+    return l;
+  }, [h, l, u, U, i, _]), M = (t) => {
+    if (i) {
+      const r = _;
+      r !== W && !t && $(r);
+    } else
+      $("");
+  }, P = b(() => {
+    const t = a.filter((r) => {
+      const B = c(r).toLowerCase(), L = r.value.toLowerCase(), A = r.displayValue?.toLowerCase(), v = l.toLowerCase();
+      return B === v || L === v || A === v;
+    });
+    t.length === 1 && O(t[0]);
+  }, [l, a, O, c]);
+  return Nt(y, (t) => {
+    t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || y.current?.contains(t.target) || t.target === y.current || (P(), M(), n(!1));
+  }), /* @__PURE__ */ T("div", { ref: D, className: d(e, J), id: s, ...lt, ...st, children: [
+    V && /* @__PURE__ */ o(
+      "input",
       {
-        htmlFor: `${r}-input`,
-        className: p(`${e}__label`, {
-          [`${e}__label--hidden`]: R
-        }),
-        "data-testid": `${r}-label`,
-        children: L
+        type: "hidden",
+        name: V,
+        id: V,
+        value: F || "",
+        ref: (t) => {
+          typeof D == "function" && t && D(t);
+        }
       }
     ),
-    /* @__PURE__ */ t(
-      w,
-      {
-        loop: !0,
-        onKeyDown: (o) => {
-          setTimeout(() => {
-            o.key === "Escape" && s(!1);
-          }, 0);
-        },
-        children: /* @__PURE__ */ c(T, { open: !0, children: [
-          /* @__PURE__ */ c("div", { className: `${e}__input-wrapper`, children: [
-            /* @__PURE__ */ t(j, { asChild: !0, children: /* @__PURE__ */ t(
-              G,
+    /* @__PURE__ */ T("div", { ref: y, className: `${e}__wrapper`, children: [
+      /* @__PURE__ */ o(
+        "label",
+        {
+          htmlFor: `${s}-input`,
+          className: d(`${e}__label`, {
+            [`${e}__label--hidden`]: tt,
+            [`${e}__label--invalid`]: I
+          }),
+          "data-testid": `${s}-label`,
+          children: Q
+        }
+      ),
+      /* @__PURE__ */ o(
+        $t,
+        {
+          loop: !0,
+          onKeyDown: (t) => {
+            setTimeout(() => {
+              t.key === "Escape" && n(!1);
+            }, 0);
+          },
+          shouldFilter: !1,
+          className: `${e}__command-wrapper`,
+          children: /* @__PURE__ */ T(dt, { open: f, modal: !1, children: [
+            /* @__PURE__ */ o(ht, { asChild: !0, children: /* @__PURE__ */ T(
+              "div",
               {
-                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`
+                className: d(`${e}__input-wrapper`, {
+                  [`${e}__input-wrapper--invalid`]: I
+                }),
+                children: [
+                  /* @__PURE__ */ o(
+                    yt,
+                    {
+                      id: `${s}-input`,
+                      placeholder: Y,
+                      value: W,
+                      onValueChange: pt,
+                      tabIndex: 0,
+                      onFocus: () => {
+                        m.length > 0 && !C.current && !f && n(!0);
+                      },
+                      onClick: (t) => {
+                        n(!0), t.preventDefault(), t.currentTarget.focus();
+                      },
+                      onKeyDown: (t) => {
+                        t.key === "Tab" ? (n(!1), P(), M()) : t.key === "Enter" && !f ? (p && p(l, null), m.length === 1 && O(m[0])) : t.key === "Escape" ? (n(!1), t.preventDefault(), P(), M()) : (t.key === "ArrowDown" || t.key === "ArrowUp") && !f && m.length > 0 && (n(!0), t.preventDefault());
+                      },
+                      onBlur: Z,
+                      className: d(`${e}__input`, {
+                        [`${e}__input--invalid`]: I
+                      }),
+                      "aria-label": q || `${s}-input`,
+                      "data-testid": `${s}-input`,
+                      ref: w
+                    }
+                  ),
+                  l && /* @__PURE__ */ o(
+                    X,
+                    {
+                      className: `${e}__close-button`,
+                      "data-testid": `${s}-clear-button`,
+                      onClick: mt,
+                      "aria-label": N || `${s}-clear`,
+                      tabIndex: -1,
+                      variant: H.tertiary,
+                      children: /* @__PURE__ */ o(
+                        nt,
+                        {
+                          color: "currentColor",
+                          height: 18,
+                          width: 18,
+                          className: `${e}__icon-button`,
+                          title: N || `${s}-clear`
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ o(
+                    X,
+                    {
+                      "aria-label": g || `${s}-dropdown`,
+                      className: d(`${e}__dropdown-button`, {
+                        [`${e}__dropdown-button--open`]: f
+                      }),
+                      onClick: ut,
+                      "data-testid": `${s}-dropdown`,
+                      tabIndex: -1,
+                      variant: H.tertiary,
+                      children: /* @__PURE__ */ o(
+                        it,
+                        {
+                          color: "currentColor",
+                          height: 18,
+                          width: 18,
+                          className: `${e}__icon-button`,
+                          title: g || `${s}-dropdown`
+                        }
+                      )
+                    }
+                  )
+                ]
               }
             ) }),
-            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(
-                  D,
-                  {
-                    color: N("", "$primary-black"),
-                    height: 18,
-                    width: 18,
-                    className: `${e}__icon-button`
-                  }
-                ) })
-              }
-            ),
-            /* @__PURE__ */ t(
-              "button",
+            f && /* @__PURE__ */ o(_t, { container: et?.current || document.body, children: /* @__PURE__ */ o(
+              vt,
               {
-                "aria-label": d || `${r}-dropdown`,
-                className: `${e}__dropdown-button`,
-                onClick: () => $.current?.focus(),
-                "data-testid": `${r}-dropdown`,
-                tabIndex: -1,
-                children: /* @__PURE__ */ t(
-                  "div",
+                className: `${e}__content`,
+                "aria-label": z || `${s}-content`,
+                side: "bottom",
+                sideOffset: -5,
+                align: "start",
+                alignOffset: 0,
+                onFocus: () => {
+                  document.activeElement !== w.current && w.current?.focus();
+                },
+                style: {
+                  width: y.current?.offsetWidth || "100%"
+                },
+                children: /* @__PURE__ */ o(wt, { className: `${e}__list`, children: m.length > 0 ? /* @__PURE__ */ o(Ct, { className: `${e}__group`, children: m.map((t) => /* @__PURE__ */ o(
+                  bt,
                   {
-                    className: p(`${e}__icon`, {
-                      [`${e}__icon--flipped`]: C
+                    className: d(`${e}__item`, {
+                      [`${e}__item--selected`]: i?.value === t.value
                     }),
-                    children: /* @__PURE__ */ t(
-                      S,
-                      {
-                        color: N("", "$pure-black"),
-                        height: 18,
-                        width: 18,
-                        className: `${e}__icon-button`
-                      }
-                    )
-                  }
-                )
-              }
-            )
-          ] }),
-          /* @__PURE__ */ t(F, { container: k?.current, children: /* @__PURE__ */ t(
-            K,
-            {
-              className: `${e}__content`,
-              "aria-label": _ || `${r}-content`,
-              children: C && /* @__PURE__ */ t(X, { className: `${e}__list`, children: n.some(
-                (o) => o.value.toLowerCase().includes(m.toLowerCase()) || o.label && o.label.toLowerCase().includes(m.toLowerCase())
-              ) ? /* @__PURE__ */ t(q, { children: n.map(
-                (o, h) => (o.value.toLowerCase().includes(m.toLowerCase()) || o.label && o.label.toLowerCase().includes(m.toLowerCase())) && /* @__PURE__ */ t(
-                  z,
-                  {
-                    className: `${e}__item`,
-                    value: o.label ? `${o.label} ${o.value}` : o.value,
-                    ref: (a) => E.current[o.value] = a,
-                    onSelect: (a) => {
-                      i(a), s(!1);
-                    },
-                    children: o.label ? `${o.label} ${o.value}` : o.value
+                    value: t.value,
+                    onSelect: () => O(t),
+                    ...i?.value === t.value ? { ref: E } : {},
+                    children: j ? j(t) : c(t)
                   },
-                  `${o.value}-${h}`
-                )
-              ) }) : /* @__PURE__ */ t(w.Empty, { children: y }) })
-            }
-          ) })
-        ] })
-      }
-    )
-  ] }) });
+                  t.value
+                )) }) : /* @__PURE__ */ o("div", { className: `${e}__no-options`, children: rt }) })
+              }
+            ) })
+          ] })
+        }
+      ),
+      G.validation ? G.validation : /* @__PURE__ */ o("p", { className: d(`${e}__validation`), children: " " })
+    ] })
+  ] });
 });
-Q.displayName = "ComboBox";
+Vt.displayName = "ComboBox";
 export {
-  Q as default
+  Vt as default
 };

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { ComboBoxProps } from './ComboBox';
+import { ComboBoxOption } from './types';
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;
@@ -8,12 +9,53 @@ export default meta;
 export declare const Playground: {
     (props: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
     args: {
-        options: {
-            value: string;
-        }[];
+        options: ComboBoxOption[];
         id: string;
         labelText: string;
     };
-    argTypes: {};
+    argTypes: {
+        options: {
+            control: string;
+        };
+        id: {
+            control: string;
+        };
+        labelText: {
+            control: string;
+        };
+        invalid: {
+            control: string;
+        };
+        invalidText: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        ariaLabelInput: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        readOnly: {
+            control: string;
+        };
+        popoverContainerRef: {
+            control: boolean;
+        };
+        renderOption: {
+            control: boolean;
+        };
+        onChange: {
+            control: boolean;
+        };
+        value: {
+            control: boolean;
+        };
+    };
 };
 export declare const ComboBoxInDrawer: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomRendering: () => import("react/jsx-runtime").JSX.Element;
+export declare const FilterTermsExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const Phone: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+export interface ComboBoxOption {
+    /**
+     * The label or display text
+     */
+    label?: string;
+    /**
+     * The option value (used for selection)
+     */
+    value: string;
+    /**
+     * Display value shown in input when selected (defaults to label)
+     */
+    displayValue?: string;
+    /**
+     * Additional terms for filtering
+     */
+    filterTerms?: string[];
+}