@phillips/seldon 1.174.0 → 1.176.0

package/dist/patterns/CountryPicker/CountryPicker.js

@@ -0,0 +1,71 @@
+import { jsxs as h, Fragment as v, jsx as e } from "react/jsx-runtime";
+import { forwardRef as N, useState as j } from "react";
+import M from "./CountryPickerTrigger.js";
+import O from "./CountryPickerModal.js";
+import { getCommonProps as T } from "../../utils/index.js";
+import { toConfig as m } from "./types.js";
+const w = N(
+  ({
+    triggerLabelText: l,
+    hasTriggerError: c,
+    triggerErrorMsg: u,
+    triggerDisplayValue: f,
+    modalTitle: p,
+    searchInputLabel: d,
+    searchInputPlaceholder: C,
+    selectButtonLabel: y,
+    inputName: o,
+    baseClassName: k = "CountryPicker",
+    value: t,
+    onChange: s,
+    isPhone: P,
+    ...a
+  }, g) => {
+    const [x, i] = j(!1), { className: n } = T(a, k), b = {
+      modalTitle: p,
+      searchInputLabel: d,
+      searchInputPlaceholder: C,
+      selectButtonLabel: y,
+      inputName: o,
+      ...a
+    }, r = P ? m(!0, t, s) : m(!1, t, s);
+    return /* @__PURE__ */ h(v, { children: [
+      /* @__PURE__ */ e(
+        M,
+        {
+          ref: g,
+          labelText: l,
+          displayValue: f,
+          onClick: () => i(!0),
+          hasError: c,
+          errorMsg: u,
+          variantConfig: r,
+          baseClassName: n
+        }
+      ),
+      /* @__PURE__ */ e(
+        O,
+        {
+          ...b,
+          isOpen: x,
+          onClose: () => i(!1),
+          variantConfig: r,
+          baseClassName: n
+        }
+      ),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "hidden",
+          name: o || "value",
+          value: r.value ?? "",
+          "data-testid": "country-picker-hidden-input"
+        }
+      )
+    ] });
+  }
+);
+w.displayName = "CountryPicker";
+export {
+  w as default
+};

package/dist/patterns/CountryPicker/CountryPicker.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/react';
+import { default as CountryPicker, CountryPickerProps } from './CountryPicker';
+declare const meta: Meta<typeof CountryPicker>;
+export default meta;
+export declare const Playground: {
+    (props: CountryPickerProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        modalTitle: string;
+        searchLabel: string;
+        searchPlaceholder: string;
+        selectButtonLabel: string;
+    };
+};
+export declare const CountryPhoneCodePicker: (props: CountryPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/CountryPicker/CountryPicker.test.d.ts

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

package/dist/patterns/CountryPicker/CountryPickerCountryList.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { CommonProps, Country } from './types';
+/**
+ * Props for the country list in the picker modal.
+ * Includes prioritized and grouped countries, styling, and refs for keyboard navigation.
+ */
+type CountryPickerCountryListProps = CommonProps & {
+    /**
+     * List of prioritized countries to display first (e.g., US, GB).
+     */
+    filteredPrioritized: Country[];
+    /**
+     * Grouped countries by first letter for display with headers.
+     */
+    groupedCountries: Record<string, Country[]>;
+    /**
+     * Base class name for styling.
+     */
+    baseClassName?: string;
+    /**
+     * Title for the modal, used for aria-label.
+     */
+    modalTitle: string;
+    /**
+     * Ref to the list container for keyboard navigation.
+     */
+    listRef: React.RefObject<HTMLDivElement>;
+    /**
+     * Name attribute for radio inputs.
+     */
+    inputName: string;
+};
+export declare const CountryPickerCountryList: ({ filteredPrioritized, groupedCountries, baseClassName, modalTitle, listRef, variantConfig, inputName, }: CountryPickerCountryListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/patterns/CountryPicker/CountryPickerCountryList.js

@@ -0,0 +1,66 @@
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import x from "../../components/Text/Text.js";
+import { TextVariants as k } from "../../components/Text/types.js";
+import { CountryPickerOption as v } from "./CountryPickerOption.js";
+const j = ({
+  filteredPrioritized: y,
+  groupedCountries: f,
+  baseClassName: e,
+  modalTitle: m,
+  listRef: i,
+  variantConfig: c,
+  inputName: d
+}) => {
+  const { isPhone: p, value: h } = c, s = a(
+    (r) => r.map(({ name: t, code: n }) => /* @__PURE__ */ l(
+      v,
+      {
+        code: n,
+        name: t,
+        isChecked: h === (p ? n : t),
+        inputName: d,
+        baseClassName: e,
+        variantConfig: c
+      },
+      n
+    )),
+    [h, p, d, e, c]
+  ), _ = (r) => {
+    if (!i.current) return;
+    const t = Array.from(i.current.querySelectorAll('input[type="radio"]')), n = t.findIndex((o) => o === document.activeElement);
+    if (r.key === "ArrowDown" || r.key === "ArrowRight") {
+      r.preventDefault();
+      const o = (n + 1) % t.length;
+      t[o]?.focus();
+    } else if (r.key === "ArrowUp" || r.key === "ArrowLeft") {
+      r.preventDefault();
+      const o = (n - 1 + t.length) % t.length;
+      t[o]?.focus();
+    }
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: `${e}__list`,
+      ref: i,
+      tabIndex: -1,
+      onKeyDown: _,
+      role: "radiogroup",
+      "aria-label": m,
+      children: [
+        s(y),
+        Object.entries(f).map(([r, t]) => /* @__PURE__ */ u("div", { className: `${e}__group`, children: [
+          /* @__PURE__ */ u("div", { className: `${e}__letter-header`, children: [
+            /* @__PURE__ */ l(x, { variant: k.heading2, className: `${e}__letter-text`, children: r }),
+            /* @__PURE__ */ l("div", { className: `${e}__letter-line` })
+          ] }),
+          s(t)
+        ] }, r))
+      ]
+    }
+  );
+};
+export {
+  j as CountryPickerCountryList
+};

package/dist/patterns/CountryPicker/CountryPickerCountryList.test.d.ts

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

package/dist/patterns/CountryPicker/CountryPickerModal.d.ts

@@ -0,0 +1,24 @@
+export type CountryPickerModalProps = {
+    /**
+     * The title displayed at the top of the modal.
+     */
+    modalTitle: string;
+    /**
+     * The label for the search input field.
+     */
+    searchInputLabel: string;
+    /**
+     * Placeholder text for the search input field.
+     */
+    searchInputPlaceholder: string;
+    /**
+     * Label for the button used to confirm the selection.
+     */
+    selectButtonLabel: string;
+    /**
+     * The name attribute for a hidden input field, if applicable.
+     */
+    inputName?: string;
+};
+declare const CountryPickerModal: import('react').ForwardRefExoticComponent<import('./types').CommonProps & import('./types').ModalStateProps & CountryPickerModalProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CountryPickerModal;

package/dist/patterns/CountryPicker/CountryPickerModal.js

@@ -0,0 +1,117 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as j, useState as S, useEffect as H, useRef as V, useMemo as f } from "react";
+import N from "../../components/Button/Button.js";
+import U from "../../components/Input/Input.js";
+import G from "../../components/Modal/Modal.js";
+import K from "../../components/Text/Text.js";
+import { TextVariants as L } from "../../components/Text/types.js";
+import { countries as v } from "./constants.js";
+import { getSafeCountryCallingCode as O } from "./utils.js";
+import { ButtonVariants as Z } from "../../components/Button/types.js";
+import q from "../../components/Icon/Icon.js";
+import { CountryPickerCountryList as A } from "./CountryPickerCountryList.js";
+const w = ["US", "GB", "HK", "CH"], z = (n, l) => {
+  if (!l) return n;
+  const d = l.replace(/[.*?^${}()|[\]\\]/g, "\\$&").replace(/\+/g, "");
+  if (!d) return n;
+  const i = new RegExp(d, "gi");
+  return n.filter((u) => {
+    const h = u.name, t = u.code, p = O(t).replace(/\+/g, "");
+    return i.test(h) || i.test(t) || i.test(p) || i.test("+" + p);
+  });
+}, J = j(
+  ({
+    isOpen: n = !1,
+    onClose: l,
+    modalTitle: m,
+    searchInputLabel: d,
+    searchInputPlaceholder: i,
+    selectButtonLabel: u,
+    inputName: h = "value",
+    baseClassName: t,
+    variantConfig: _
+  }, p) => {
+    const { value: g, onChange: C, isPhone: E } = _, [c, I] = S(g), x = (e) => v.some((a) => a.code === e);
+    H(() => {
+      I(g);
+    }, [n, g]);
+    const [s, B] = S(""), D = V(null), F = V(null), [P, R] = f(() => {
+      const e = w.map((r) => v.filter(($) => $.code === r)).flat(), a = v.filter((r) => !w.includes(r.code));
+      return [
+        e,
+        // keep original order for prioritized
+        a.sort((r, $) => r.name.localeCompare($.name))
+      ];
+    }, []), M = f(() => z(P, s), [P, s]), k = f(() => z(R, s), [R, s]), T = f(() => {
+      const e = {};
+      return k.forEach((a) => {
+        const r = a.name[0].toUpperCase();
+        e[r] || (e[r] = []), e[r].push(a);
+      }), e;
+    }, [k]);
+    return /* @__PURE__ */ o(
+      G,
+      {
+        isOpen: n,
+        onClose: l,
+        "data-testid": "country-picker-modal",
+        className: `${t}__modal`,
+        ref: p,
+        children: /* @__PURE__ */ y("div", { className: `${t}__wrapper`, children: [
+          /* @__PURE__ */ y("div", { className: `${t}__header`, children: [
+            /* @__PURE__ */ o(K, { variant: L.heading3, className: `${t}__header-text`, children: m }),
+            /* @__PURE__ */ y("div", { className: `${t}__input-wrapper`, children: [
+              /* @__PURE__ */ o("span", { className: `${t}__input-icon`, "aria-hidden": "true", children: /* @__PURE__ */ o(q, { icon: "Search", width: 16, height: 16, color: "currentColor" }) }),
+              /* @__PURE__ */ o(
+                U,
+                {
+                  id: "countrySearch",
+                  type: "search",
+                  labelText: d,
+                  placeholder: i,
+                  value: s,
+                  onChange: (e) => {
+                    B(e.target.value);
+                  },
+                  autoFocus: !0,
+                  className: `${t}__input`
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ o(
+            A,
+            {
+              filteredPrioritized: M,
+              groupedCountries: T,
+              baseClassName: t,
+              modalTitle: m,
+              listRef: F,
+              variantConfig: _,
+              inputName: h
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: `${t}__button-container`, children: /* @__PURE__ */ o(
+            N,
+            {
+              onClick: () => {
+                c && (E ? x(c) && C(c) : x(c) || C(c), l?.());
+              },
+              className: `${t}__button`,
+              "data-testid": "country-picker-modal-select-button",
+              ref: D,
+              type: "button",
+              variant: Z.secondary,
+              isDisabled: !c,
+              children: u
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+J.displayName = "CountryPickerModal";
+export {
+  J as default
+};

package/dist/patterns/CountryPicker/CountryPickerModal.test.d.ts

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

package/dist/patterns/CountryPicker/CountryPickerOption.d.ts

@@ -0,0 +1,20 @@
+import { Country, ModalBaseProps } from './types';
+/**
+ * Props for a single country option in the picker.
+ * Extends Country and adds selection state and input name.
+ */
+export type CountryPickerOptionProps = Country & {
+    /**
+     * Indicates whether the option is currently selected.
+     */
+    isChecked: boolean;
+    /**
+     * The name attribute for the input element.
+     */
+    inputName: string;
+};
+/**
+ * Renders a single country option for selection.
+ * Handles both country and phone picker modes via discriminated union.
+ */
+export declare const CountryPickerOption: ({ code, name, isChecked, inputName, baseClassName, variantConfig, }: ModalBaseProps & CountryPickerOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/patterns/CountryPicker/CountryPickerOption.js

@@ -0,0 +1,62 @@
+import { jsxs as _, jsx as p } from "react/jsx-runtime";
+import $ from "../../components/Text/Text.js";
+import { TextVariants as d } from "../../components/Text/types.js";
+import e from "../../node_modules/classnames/index.js";
+import { getSafeCountryCallingCode as g } from "./utils.js";
+const v = ({
+  code: t,
+  name: n,
+  isChecked: r,
+  inputName: f,
+  baseClassName: o,
+  variantConfig: h
+}) => {
+  const c = `${o}__radio-${t}`, { isPhone: i, onChange: l } = h;
+  return /* @__PURE__ */ _(
+    "label",
+    {
+      htmlFor: c,
+      className: e(`${o}__option`, {
+        [`${o}__option--selected`]: r,
+        [`${o}__option--is-phone`]: i
+      }),
+      "aria-label": i ? `${n} +${g(t)}` : n,
+      children: [
+        /* @__PURE__ */ p(
+          "input",
+          {
+            type: "radio",
+            id: c,
+            name: f,
+            checked: r,
+            className: e(`${o}__radio`, {
+              [`${o}__radio--selected`]: r,
+              [`${o}__radio--visually-hidden`]: i
+            }),
+            onChange: () => {
+              l(i ? t : n);
+            }
+          }
+        ),
+        /* @__PURE__ */ _("span", { className: `${o}__option-content`, children: [
+          /* @__PURE__ */ p($, { variant: d.string2, className: `${o}__option-name`, children: n }),
+          i && /* @__PURE__ */ _($, { variant: d.string2, className: `${o}__option-code`, children: [
+            "+",
+            g(t)
+          ] })
+        ] }),
+        /* @__PURE__ */ p(
+          "img",
+          {
+            src: `https://flagcdn.com/24x18/${t.toLowerCase()}.png`,
+            alt: `${n} flag`,
+            className: `${o}__option-flag`
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  v as CountryPickerOption
+};

package/dist/patterns/CountryPicker/CountryPickerOption.test.d.ts

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

package/dist/patterns/CountryPicker/CountryPickerTrigger.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export type CountryPickerTriggerProps = {
+    /**
+     * The label text displayed above the button.
+     */
+    labelText: string;
+    /**
+     * The value displayed inside the button (e.g., selected country name or phone code).
+     */
+    displayValue: string;
+    /**
+     * Optional flag to indicate if there is an error.
+     */
+    hasError?: boolean;
+    /**
+     * Optional error message to display when there is an error.
+     */
+    errorMsg?: string;
+};
+declare const CountryPickerTrigger: React.ForwardRefExoticComponent<import('./types').CommonProps & import('./types').ModalStateProps & CountryPickerTriggerProps & Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+export default CountryPickerTrigger;

package/dist/patterns/CountryPicker/CountryPickerTrigger.js

@@ -0,0 +1,67 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import x from "../../components/Icon/Icon.js";
+import { TextVariants as m } from "../../components/Text/types.js";
+import p from "../../components/Text/Text.js";
+import i from "../../node_modules/classnames/index.js";
+import { countries as y } from "./constants.js";
+import { forwardRef as k } from "react";
+const w = k(
+  ({ labelText: c, displayValue: f, onClick: $, hasError: e = !1, errorMsg: o, id: n, className: h, baseClassName: r, variantConfig: u }, v) => {
+    const { isPhone: l, value: g } = u, d = o ? `${r}__trigger-error-msg` : void 0, _ = l ? g : y.filter((s) => s.name === g)?.[0]?.code;
+    return /* @__PURE__ */ a("div", { className: i(`${r}__trigger`, h), children: [
+      /* @__PURE__ */ t(
+        p,
+        {
+          variant: m.string2,
+          className: i(`${r}__trigger-label`, {
+            [`${r}__trigger-label--error`]: e
+          }),
+          id: n ? `${n}-label` : void 0,
+          children: c
+        }
+      ),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          ref: v,
+          type: "button",
+          "aria-label": c,
+          "aria-invalid": e,
+          "aria-describedby": d,
+          className: i(`${r}__trigger-btn`, {
+            [`${r}__trigger-btn--error`]: e,
+            [`${r}__trigger-btn--is-phone`]: l
+          }),
+          onClick: $,
+          "data-testid": "country-picker-trigger",
+          id: n,
+          children: [
+            _ && /* @__PURE__ */ t(
+              "img",
+              {
+                src: `https://flagcdn.com/24x18/${_.toLowerCase()}.png`,
+                alt: `${g} flag`,
+                className: `${r}__trigger-flag`
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: i(`${r}__trigger-text`), children: f }),
+            /* @__PURE__ */ t("span", { className: i(`${r}__trigger-icon`), children: /* @__PURE__ */ t(x, { icon: "ChevronDown", color: "$pure-black", width: 16, height: 16 }) })
+          ]
+        }
+      ),
+      e && o && /* @__PURE__ */ t(
+        p,
+        {
+          variant: m.string2,
+          className: i(`${r}__trigger-error-msg`),
+          id: d,
+          children: o
+        }
+      )
+    ] });
+  }
+);
+w.displayName = "CountryPickerTrigger";
+export {
+  w as default
+};

package/dist/patterns/CountryPicker/CountryPickerTrigger.test.d.ts

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