@phillips/seldon 1.249.0 → 1.251.0

package/dist/components/ComboBox/ComboBox.js

@@ -89,22 +89,22 @@ import "../../assets/formatted/WeChat.js";
 import "../../assets/formatted/Clock.js";
 import "../../assets/formatted/LiveNow.js";
 import { getCommonProps as Ot, useNormalizedInputProps as kt } from "../../utils/index.js";
-import U from "../IconButton/IconButton.js";
-import { ButtonVariants as W } from "../Button/types.js";
+import W from "../IconButton/IconButton.js";
+import { ButtonVariants as X } from "../Button/types.js";
 import { usePrevious as Lt } from "../../utils/usePrevious.js";
 import { TextVariants as Vt } from "../Text/types.js";
 import Dt from "../Text/Text.js";
 const Mt = Nt.forwardRef(function({
   options: n = [],
-  className: X,
-  id: s,
-  labelText: H,
+  className: H,
+  id: l,
+  labelText: S,
   placeholder: J,
   name: k,
   value: p,
   onChange: u,
   onBlur: Q,
-  renderOption: S,
+  renderOption: j,
   ariaLabelDropdown: L,
   ariaLabelInput: Y,
   ariaLabelClear: Z,
@@ -114,15 +114,15 @@ const Mt = Nt.forwardRef(function({
   noOptionsMessage: ot = "No Options.",
   invalid: N = !1,
   invalidText: it,
-  countOfCharsBeforeDropdown: j = 0,
+  countOfCharsBeforeDropdown: q = 0,
   ...at
 }, V) {
-  const { className: e, ...lt } = Ot({ id: s }, "ComboBox"), st = Tt, nt = xt, q = kt({
-    id: s,
+  const { className: e, ...lt } = Ot({ id: l }, "ComboBox"), st = Tt, nt = xt, z = kt({
+    id: l,
     invalid: N,
     invalidText: it,
     type: "text"
-  }), [f, z] = B(!1), [mt, ct] = B(""), G = Lt(p), D = g((t) => t.label || t.value, []), [o, b] = B(() => {
+  }), [f, G] = B(!1), [mt, ct] = B(""), K = Lt(p), D = g((t) => t.label || t.value, []), [o, b] = B(() => {
     if (p !== void 0) {
       const t = n.find((r) => r.value === p);
       return t ? t.displayValue || D(t) : "";
@@ -137,37 +137,37 @@ const Mt = Nt.forwardRef(function({
       let v = !1;
       return r.filterTerms && r.filterTerms.length > 0 && (v = r.filterTerms.some((dt) => dt.toLowerCase().includes(t))), w || P || A || v;
     });
-  }, [o, _, a, m, n]), l = g(
+  }, [o, _, a, m, n]), s = g(
     (t, r) => {
-      const w = (r?.length || o.length) >= j;
-      (!t || t && w) && z(t), t && a && c.length > 5 && requestAnimationFrame(() => {
+      const w = (r?.length || o.length) >= q;
+      (!t || t && w) && G(t), t && a && c.length > 5 && requestAnimationFrame(() => {
         M.current && M.current.scrollIntoView({
           block: "nearest",
           behavior: "auto"
         });
       });
     },
-    [j, o.length, a, c.length]
+    [q, o.length, a, c.length]
   ), I = g(
     (t) => {
       h || ct(t.value);
       const r = t.displayValue || m(t);
-      b(r), u && u(t.value, t), l(!1), $.current = !0, requestAnimationFrame(() => {
+      b(r), u && u(t.value, t), s(!1), $.current = !0, requestAnimationFrame(() => {
         $.current = !1;
       });
     },
-    [h, u, l, m]
+    [h, u, s, m]
   ), pt = (t) => {
-    l(!1), $.current = !0, t.preventDefault(), t.stopPropagation(), u && h && u("", null), b(""), y.current?.focus(), requestAnimationFrame(() => {
+    s(!1), $.current = !0, t.preventDefault(), t.stopPropagation(), u && h && u("", null), b(""), y.current?.focus(), requestAnimationFrame(() => {
       $.current = !1;
     });
   }, ut = () => {
-    z(!f), y.current?.focus();
+    G(!f), y.current?.focus();
   }, ft = (t) => {
-    b(t), t !== "" && c.length > 0 && l(!0, t);
-  }, K = O(() => {
+    b(t), t !== "" && c.length > 0 && s(!0, t);
+  }, U = O(() => {
     if (h) {
-      if (p !== G)
+      if (p !== K)
         return a ? _ : o;
       if (a) {
         const t = _;
@@ -176,10 +176,10 @@ const Mt = Nt.forwardRef(function({
         return o;
     }
     return o;
-  }, [h, o, p, G, a, _]), E = (t) => {
+  }, [h, o, p, K, a, _]), E = (t) => {
     if (a) {
       const r = _;
-      r !== K && b(r);
+      r !== U && b(r);
     } else
       b("");
   }, F = g(() => {
@@ -190,8 +190,8 @@ const Mt = Nt.forwardRef(function({
     t.length === 1 && I(t[0]);
   }, [o, n, I, m]);
   return It(C, (t) => {
-    t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || C.current?.contains(t.target) || t.target === C.current || (F(), E(), l(!1));
-  }), /* @__PURE__ */ T("div", { ref: V, className: d(e, X), id: s, ...lt, ...at, children: [
+    t.target.closest(`.${e}__item`) || t.target.closest(`.${e}__content`) || C.current?.contains(t.target) || t.target === C.current || (F(), E(), s(!1));
+  }), /* @__PURE__ */ T("div", { ref: V, className: d(e, H), id: l, ...lt, ...at, children: [
     k && /* @__PURE__ */ i(
       "input",
       {
@@ -210,13 +210,13 @@ const Mt = Nt.forwardRef(function({
         {
           element: "label",
           variant: Vt.labelMedium,
-          htmlFor: `${s}-input`,
+          htmlFor: `${l}-input`,
           className: d(`${e}__label`, {
             [`${e}__label--hidden`]: et,
             [`${e}__label--invalid`]: N
           }),
-          "data-testid": `${s}-label`,
-          children: H
+          "data-testid": `${l}-label`,
+          children: S
         }
       ),
       /* @__PURE__ */ i(
@@ -225,7 +225,7 @@ const Mt = Nt.forwardRef(function({
           loop: !0,
           onKeyDown: (t) => {
             setTimeout(() => {
-              t.key === "Escape" && l(!1);
+              t.key === "Escape" && s(!1);
             }, 0);
           },
           shouldFilter: !1,
@@ -237,42 +237,45 @@ const Mt = Nt.forwardRef(function({
                 className: d(`${e}__input-wrapper`, {
                   [`${e}__input-wrapper--invalid`]: N
                 }),
+                role: "combobox",
+                "aria-label": S,
                 children: [
                   /* @__PURE__ */ i(
                     yt,
                     {
-                      id: `${s}-input`,
+                      id: `${l}-input`,
                       placeholder: J,
-                      value: K,
+                      value: U,
                       onValueChange: ft,
                       tabIndex: 0,
                       onFocus: () => {
-                        c.length > 0 && !$.current && !f && l(!0);
+                        c.length > 0 && !$.current && !f && s(!0);
                       },
                       onClick: (t) => {
-                        l(!0), t.preventDefault(), t.currentTarget.focus();
+                        s(!0), t.preventDefault(), t.currentTarget.focus();
                       },
                       onKeyDown: (t) => {
-                        t.key === "Tab" ? (l(!1), F(), E()) : t.key === "Enter" && !f ? (u && u(o, null), c.length === 1 && I(c[0])) : t.key === "Escape" ? (l(!1), t.preventDefault(), F(), E()) : (t.key === "ArrowDown" || t.key === "ArrowUp") && !f && c.length > 0 && (l(!0), t.preventDefault());
+                        t.key === "Tab" ? (s(!1), F(), E()) : t.key === "Enter" && !f ? (u && u(o, null), c.length === 1 && I(c[0])) : t.key === "Escape" ? (s(!1), t.preventDefault(), F(), E()) : (t.key === "ArrowDown" || t.key === "ArrowUp") && !f && c.length > 0 && (s(!0), t.preventDefault());
                       },
                       onBlur: Q,
                       className: d(`${e}__input`, {
                         [`${e}__input--invalid`]: N
                       }),
                       "aria-label": Y,
-                      "data-testid": `${s}-input`,
+                      "aria-controls": `${l}-content`,
+                      "data-testid": `${l}-input`,
                       ref: y
                     }
                   ),
                   o && /* @__PURE__ */ i(
-                    U,
+                    W,
                     {
                       className: `${e}__close-button`,
-                      "data-testid": `${s}-clear-button`,
+                      "data-testid": `${l}-clear-button`,
                       onClick: pt,
                       "aria-label": Z,
                       tabIndex: -1,
-                      variant: W.tertiary,
+                      variant: X.tertiary,
                       children: /* @__PURE__ */ i(
                         nt,
                         {
@@ -285,16 +288,16 @@ const Mt = Nt.forwardRef(function({
                     }
                   ),
                   /* @__PURE__ */ i(
-                    U,
+                    W,
                     {
                       "aria-label": L,
                       className: d(`${e}__dropdown-button`, {
                         [`${e}__dropdown-button--open`]: f
                       }),
                       onClick: ut,
-                      "data-testid": `${s}-dropdown`,
+                      "data-testid": `${l}-dropdown`,
                       tabIndex: -1,
-                      variant: W.tertiary,
+                      variant: X.tertiary,
                       children: /* @__PURE__ */ i(
                         st,
                         {
@@ -302,7 +305,7 @@ const Mt = Nt.forwardRef(function({
                           height: 18,
                           width: 18,
                           className: `${e}__icon-button`,
-                          title: L || `${s}-dropdown`
+                          title: L || `${l}-dropdown`
                         }
                       )
                     }
@@ -313,6 +316,7 @@ const Mt = Nt.forwardRef(function({
             f && /* @__PURE__ */ i(vt, { container: rt?.current || document.body, children: /* @__PURE__ */ i(
               bt,
               {
+                id: `${l}-content`,
                 className: `${e}__content`,
                 "aria-label": tt,
                 side: "bottom",
@@ -334,7 +338,7 @@ const Mt = Nt.forwardRef(function({
                     value: t.value,
                     onSelect: () => I(t),
                     ...a?.value === t.value ? { ref: M } : {},
-                    children: S ? S(t) : m(t)
+                    children: j ? j(t) : m(t)
                   },
                   t.value
                 )) }) : /* @__PURE__ */ i("div", { className: `${e}__no-options`, children: ot }) })
@@ -343,7 +347,7 @@ const Mt = Nt.forwardRef(function({
           ] })
         }
       ),
-      q.validation ? q.validation : /* @__PURE__ */ i("p", { className: d(`${e}__empty-validation`), children: " " })
+      z.validation ? z.validation : /* @__PURE__ */ i("p", { className: d(`${e}__empty-validation`), children: " " })
     ] })
   ] });
 });

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

@@ -4,6 +4,16 @@ import { ComboBoxOption } from './types';
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
 };
 export default meta;
 export declare const Playground: {

package/dist/components/Dropdown/Dropdown.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { forwardRef as p, useState as C } from "react";
 import { getCommonProps as D } from "../../utils/index.js";
 import i from "../../_virtual/index.js";
-import { Root as $, Trigger as v, Value as I, Icon as b, Portal as x, Content as S, ScrollUpButton as O, Viewport as P, ScrollDownButton as R, Item as V, ItemText as j } from "../../node_modules/@radix-ui/react-select/dist/index.js";
+import { Root as $, Trigger as v, Value as I, Icon as b, Portal as S, Content as x, ScrollUpButton as O, Viewport as P, ScrollDownButton as R, Item as V, ItemText as j } from "../../node_modules/@radix-ui/react-select/dist/index.js";
 import c from "../Icon/Icon.js";
 const y = p(
   ({ options: a, value: n, onValueChange: l, label: s, className: h, id: m, disabled: _, ...w }, N) => {
@@ -20,7 +20,7 @@ const y = p(
             v,
             {
               className: `${o}__trigger`,
-              "aria-label": s,
+              "aria-label": s ?? "Select option",
               ref: N,
               disabled: _,
               children: [
@@ -37,7 +37,7 @@ const y = p(
               ]
             }
           ),
-          /* @__PURE__ */ e(x, { children: /* @__PURE__ */ t(S, { className: `${o}__content`, position: "popper", children: [
+          /* @__PURE__ */ e(S, { children: /* @__PURE__ */ t(x, { className: `${o}__content`, position: "popper", children: [
             /* @__PURE__ */ e(O, { className: `${o}__scroll-button__up`, children: /* @__PURE__ */ e(c, { icon: "ChevronDown" }) }),
             /* @__PURE__ */ e(P, { className: `${o}__viewport`, children: a.map((r) => /* @__PURE__ */ e(
               d,

package/dist/components/FavoritingTileButton/FavoritingTileButton.js

@@ -1,14 +1,14 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { forwardRef as u } from "react";
 import { getCommonProps as N } from "../../utils/index.js";
-import h from "../../_virtual/index.js";
+import _ from "../../_virtual/index.js";
 import o from "../Text/Text.js";
-const _ = u(
+const $ = u(
   ({
     className: n,
     actionAddText: m = "Add to",
     actionRemoveText: t = "Remove from",
-    isLotInList: e,
+    isLotInList: a,
     listTitle: s,
     numberOfObjects: c,
     onClick: d,
@@ -19,27 +19,26 @@ const _ = u(
       "button",
       {
         ...p,
-        className: h(r, n, {
-          [`${r}--lot-in-list`]: e
+        className: _(r, n, {
+          [`${r}--lot-in-list`]: a
         }),
         onClick: d,
         ref: f,
         id: l?.id,
-        "aria-label": `${e ? t : m} ${s}`,
-        "aria-pressed": e,
-        role: "switch",
+        "aria-label": `${a ? t : m} ${s}`,
+        "aria-pressed": a,
         children: [
           /* @__PURE__ */ i("div", { className: `${r}__text`, children: [
-            /* @__PURE__ */ a(o, { className: `${r}__text--action`, children: e ? t : m }),
-            /* @__PURE__ */ a(o, { children: s })
+            /* @__PURE__ */ e(o, { className: `${r}__text--action`, children: a ? t : m }),
+            /* @__PURE__ */ e(o, { children: s })
           ] }),
-          /* @__PURE__ */ a(o, { className: `${r}__text--number`, children: c })
+          /* @__PURE__ */ e(o, { className: `${r}__text--number`, children: c })
         ]
       }
     );
   }
 );
-_.displayName = "FavoritingTileButton";
+$.displayName = "FavoritingTileButton";
 export {
-  _ as default
+  $ as default
 };

package/dist/components/IconButton/IconButton.js

@@ -1,21 +1,22 @@
-import { jsx as f } from "react/jsx-runtime";
-import c from "../../_virtual/index.js";
-import p from "../Button/Button.js";
-import { getCommonProps as i } from "../../utils/index.js";
-import { ButtonVariants as l } from "../Button/types.js";
-import { forwardRef as u } from "react";
-const B = u(
-  ({ children: r, variant: o = l.primary, isDisabled: s = !1, className: a, ...t }, n) => {
-    const { className: m, ...e } = i(t, "IconButton");
-    return /* @__PURE__ */ f(
-      p,
+import { jsx as c } from "react/jsx-runtime";
+import i from "../../_virtual/index.js";
+import f from "../Button/Button.js";
+import { getCommonProps as u } from "../../utils/index.js";
+import { ButtonVariants as p } from "../Button/types.js";
+import { forwardRef as b } from "react";
+const B = b(
+  ({ children: r, variant: t = p.primary, isDisabled: m = !1, className: s, ...o }, n) => {
+    const { className: a, ...e } = u(o, "IconButton"), l = o["aria-label"] ?? "Icon button";
+    return /* @__PURE__ */ c(
+      f,
       {
         ...e,
-        variant: o,
-        className: c(m, `${m}--${o}`, a),
-        isDisabled: s,
+        variant: t,
+        className: i(a, `${a}--${t}`, s),
+        isDisabled: m,
         ref: n,
-        ...t,
+        ...o,
+        "aria-label": l,
         children: r
       }
     );

package/dist/components/Input/utils.js

@@ -3,6 +3,7 @@ import "react/jsx-runtime";
 import "../../providers/SeldonProvider/utils.js";
 import "react";
 import "../Button/Button.js";
+import "../Card/Card.js";
 import "../IconButton/IconButton.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/AccordionItem.js";
@@ -94,7 +95,7 @@ import "../../patterns/CountryPicker/CountryPicker.js";
 import "../../patterns/ProgressWizard/ProgressWizard.js";
 import "../../patterns/ProgressWizard/types.js";
 import "../../patterns/PhoneNumberInput/PhoneNumberInput.js";
-const Op = () => ({
+const Pp = () => ({
   adornment: `${p}-input__wrapper__adornment`,
   emptyValidation: `${p}-input__empty-validation`,
   input: `${p}-input__input`,
@@ -106,5 +107,5 @@ const Op = () => ({
   wrapperInput: `${p}-input__wrapper__input`
 });
 export {
-  Op as getInputClassNames
+  Pp as getInputClassNames
 };

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

@@ -8,6 +8,7 @@ export declare const Playground: {
     (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
     args: {
         src: string;
+        alt: string;
         aspectRatio: string;
     };
     argTypes: {};
@@ -16,6 +17,7 @@ export declare const CircleImage: {
     (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
     args: {
         src: string;
+        alt: string;
         aspectRatio: string;
         objectFit: string;
         imageStyle: {
@@ -28,6 +30,7 @@ export declare const BlurBackground: {
     (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
     args: {
         src: string;
+        alt: string;
         aspectRatio: string;
         objectFit: string;
         hasBlurBackground: boolean;
@@ -38,6 +41,7 @@ export declare const BrokenImage: {
     (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
     args: {
         src: string;
+        alt: string;
         aspectRatio: string;
         objectFit: string;
     };
@@ -47,6 +51,7 @@ export declare const ImageBlocked: {
     (props: React.ComponentProps<typeof SeldonImage>): import("react/jsx-runtime").JSX.Element;
     args: {
         src: string;
+        alt: string;
         aspectRatio: string;
         objectFit: string;
         imageBlocked: boolean;

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

@@ -11,6 +11,14 @@ export declare const Playground: {
                 story: string;
             };
         };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
     };
 };
 export declare const Interactive: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Video/Video.d.ts

@@ -16,6 +16,10 @@ export interface VideoProps extends ComponentProps<'div'> {
      * The class name for the iframe
      */
     iframeClassName?: string;
+    /**
+     * Accessible name for the iframe.
+     */
+    iframeTitle?: string;
 }
 /**
  * ## Overview

package/dist/components/Video/Video.js

@@ -1,23 +1,24 @@
 import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { getCommonProps as N } from "../../utils/index.js";
+import { forwardRef as N } from "react";
+import { getCommonProps as u } from "../../utils/index.js";
 import t from "../../_virtual/index.js";
-const u = p(
-  ({ aspectRatio: s, className: m, videoSource: i, iframeRef: d, iframeClassName: l, ...e }, c) => {
-    const { className: r, "data-testid": a, ...f } = N(e, "Video"), n = {
+const y = N(
+  ({ aspectRatio: s, className: m, videoSource: d, iframeRef: i, iframeClassName: l, iframeTitle: c = "Embedded video", ...e }, f) => {
+    const { className: r, "data-testid": a, ...n } = u(e, "Video"), p = {
       className: t(r, m),
       "data-testid": a,
       style: { "--aspect-ratio": s },
-      ...f,
+      ...n,
       ...e
     };
-    return /* @__PURE__ */ o("div", { ...n, ref: c, children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o("div", { ...p, ref: f, children: /* @__PURE__ */ o(
       "iframe",
       {
-        ref: d,
+        ref: i,
         "data-testid": `${a}-iframe`,
         className: t(`${r}__iframe`, l),
-        src: i,
+        src: d,
+        title: c,
         allowFullScreen: !0,
         allow: "encrypted-media",
         referrerPolicy: "no-referrer"
@@ -25,7 +26,7 @@ const u = p(
     ) });
   }
 );
-u.displayName = "Video";
+y.displayName = "Video";
 export {
-  u as default
+  y as default
 };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './utils/hooks';
 export * from './types/commonTypes';
 export { default as Button, type ButtonProps } from './components/Button/Button';
 export { ButtonVariants, ButtonSizes } from './components/Button/types';
+export * from './components/Card';
 export { default as IconButton } from './components/IconButton/IconButton';
 export * from './components/Accordion';
 export { Breadcrumb, type BreadcrumbProps } from './components/Breadcrumb';