@phillips/seldon 1.176.1 → 1.177.0

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

@@ -80,6 +80,11 @@ export interface ComboBoxProps {
      * Handler called when the combobox loses focus
      */
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    /**
+     * Number of characters required in the input before the dropdown options are shown.
+     * @default 0
+     */
+    countOfCharsBeforeDropdown?: number;
 }
 /**
  * ## Overview

package/dist/components/ComboBox/ComboBox.js

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

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

@@ -12,6 +12,7 @@ export declare const Playground: {
         options: ComboBoxOption[];
         id: string;
         labelText: string;
+        noOptionsMessage: string;
     };
     argTypes: {
         options: {
@@ -53,6 +54,12 @@ export declare const Playground: {
         value: {
             control: boolean;
         };
+        countOfCharsBeforeDropdown: {
+            control: string;
+        };
+        noOptionsMessage: {
+            control: string;
+        };
     };
 };
 export declare const ComboBoxInDrawer: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toast/useToast.js

@@ -1,10 +1,14 @@
-import { useToastContext as s } from "./useToastContext.js";
-const l = () => {
-  const { addToast: e } = s();
-  return (t) => {
-    typeof t == "object" && t !== null && "title" in t ? e(t) : e({ title: t });
-  };
+import { useToastContext as a } from "./useToastContext.js";
+import { useCallback as o } from "react";
+const c = () => {
+  const { addToast: e } = a();
+  return o(
+    (t) => {
+      typeof t == "object" && t !== null && "title" in t ? e(t) : e({ title: t });
+    },
+    [e]
+  );
 };
 export {
-  l as useToast
+  c as useToast
 };

package/dist/scss/components/ComboBox/_combobox.scss

@@ -176,6 +176,10 @@
     margin-top: $spacing-xsm;
   }
 
+  &__no-options {
+    padding-left: $padding-xsm;
+  }
+
   @keyframes fade-in {
     from {
       opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.176.1",
+  "version": "1.177.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"