@phillips/seldon 1.96.1 → 1.97.0

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import { default as flatpickr } from 'flatpickr';
 import { InputProps } from '../Input/Input';
 import * as React from 'react';
-export interface DatePickerProps extends Omit<InputProps, 'defaultValue'>, Record<string, unknown> {
+export interface DatePickerProps extends Omit<InputProps, 'defaultValue' | 'onChange'>, Record<string, unknown> {
     /**
      * Optionally allow manual entry to the date input
      */

package/dist/components/Filter/Filter.d.ts

@@ -0,0 +1,25 @@
+import { ComponentProps, Dispatch, SetStateAction } from 'react';
+export interface FilterProps extends ComponentProps<'div'> {
+    /** Logical name of this filter */
+    name: string;
+    setViewAllFilter?: Dispatch<SetStateAction<string>>;
+    viewAllLimit?: number;
+    isViewingAll?: boolean;
+    isHidden?: boolean;
+    /**
+     *  translatable string for view all button
+     */
+    viewAllLabel?: string;
+}
+/**
+ * ## Overview
+ *
+ * Component to display filtering dimensions
+ *
+ * [Figma Link](https://www.figma.com/design/OvBXAq48blO1r4qYbeBPjW/RW---Sale-Page-(PLP)?node-id=892-71019&node-type=frame&t=AsBDn4UgUEjNUnf7-0)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-filter--overview)
+ */
+declare const Filter: import('react').ForwardRefExoticComponent<Omit<FilterProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export type FilterComponent = ReturnType<typeof Filter>;
+export default Filter;

package/dist/components/Filter/Filter.js

@@ -0,0 +1,62 @@
+import { jsxs as n, jsx as f } from "react/jsx-runtime";
+import { forwardRef as B, useState as S, Children as T, isValidElement as p, cloneElement as h } from "react";
+import { getCommonProps as b, findChildrenOfType as k, findChildrenExcludingTypes as F, px as I } from "../../utils/index.js";
+import O from "../../node_modules/classnames/index.js";
+import C from "./FilterHeader.js";
+import R from "../Button/Button.js";
+import { ButtonVariants as q } from "../Button/types.js";
+import z from "../../assets/chevronNext.svg.js";
+const D = B(
+  ({
+    className: N,
+    children: u,
+    name: t,
+    viewAllLimit: m = 10,
+    isViewingAll: s = !1,
+    isHidden: _ = !1,
+    setViewAllFilter: e,
+    viewAllLabel: v = "View All",
+    ...d
+  }, x) => {
+    var l, c;
+    const [y, g] = S(!1), { className: r, ...$ } = b(d, "Filter"), o = T.toArray(u), E = { isViewingAll: s, setViewAllFilter: e, setIsClosing: g }, i = (l = k(o, C)) == null ? void 0 : l[0], H = p(i) ? h(i, E) : null, P = (c = F(o, [C])) == null ? void 0 : c.map(
+      (a, j) => p(a) ? h(a, { hidden: !s && j + 1 > m }) : a
+    );
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ...$,
+        className: O(r, N, {
+          [`${I}-filter--hidden`]: _,
+          "is-closing": y
+        }),
+        ...d,
+        ref: x,
+        children: [
+          /* @__PURE__ */ n("fieldset", { name: t, className: `${r}__fieldset`, children: [
+            H,
+            /* @__PURE__ */ f("div", { className: `${r}__filters`, children: P })
+          ] }),
+          o.length > m && !s ? /* @__PURE__ */ n(
+            R,
+            {
+              className: `${r}__view-all`,
+              variant: q.tertiary,
+              onClick: () => {
+                e == null || e(t);
+              },
+              children: [
+                v,
+                /* @__PURE__ */ f(z, { className: `${r}__chevron` })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+D.displayName = "Filter";
+export {
+  D as default
+};

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

@@ -0,0 +1,29 @@
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<import('./Filter').FilterProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+type FilterDimension = {
+    label: string;
+    disabled?: boolean | undefined;
+    checked: boolean;
+};
+type FilterType = {
+    label: string;
+    id: string;
+    filterDimensions: FilterDimension[];
+};
+type PropTypes = {
+    filter: FilterType;
+    viewAllLimit: number;
+    isViewingAll: boolean;
+};
+export declare const Playground: {
+    (props: PropTypes): import("react/jsx-runtime").JSX.Element;
+    args: {
+        filter: FilterType;
+        viewAllLimit: number;
+        isViewingAll: boolean;
+    };
+    argTypes: {};
+};

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

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

package/dist/components/Filter/FilterHeader.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps, Dispatch, SetStateAction } from 'react';
+export interface FilterHeaderProps extends ComponentProps<'div'> {
+    heading: string;
+    isViewingAll?: boolean;
+    setViewAllFilter?: Dispatch<SetStateAction<null>>;
+    setIsClosing?: Dispatch<SetStateAction<boolean>>;
+}
+/**
+ * ## Overview
+ *
+ * The header of a filter
+ */
+declare const FilterHeader: import('react').ForwardRefExoticComponent<Omit<FilterHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default FilterHeader;

package/dist/components/Filter/FilterHeader.js

@@ -0,0 +1,36 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { getCommonProps as N } from "../../utils/index.js";
+import l from "../../node_modules/classnames/index.js";
+import { TextVariants as v } from "../Text/types.js";
+import x from "../Text/Text.js";
+import _ from "../Button/Button.js";
+import { ButtonVariants as k } from "../Button/types.js";
+import B from "../../assets/chevronNext.svg.js";
+const H = u(
+  ({ className: c, heading: n, isViewingAll: d = !1, setViewAllFilter: m, setIsClosing: a, ...e }, f) => {
+    const { className: r, ...p } = N(e, "FilterHeader"), i = () => {
+      a == null || a(!0), setTimeout(() => {
+        m == null || m(null), a == null || a(!1);
+      }, 300);
+    };
+    return /* @__PURE__ */ t("div", { ...p, className: l(r, c), ...e, ref: f, children: [
+      /* @__PURE__ */ o(
+        x,
+        {
+          variant: v.heading4,
+          className: `${r}__heading`,
+          element: (h) => /* @__PURE__ */ o("legend", { ...h, children: n })
+        }
+      ),
+      d ? /* @__PURE__ */ t(_, { variant: k.tertiary, onClick: i, className: `${r}__back`, children: [
+        /* @__PURE__ */ o(B, { className: `${r}__chevron` }),
+        "Back to all"
+      ] }) : null
+    ] });
+  }
+);
+H.displayName = "FilterHeader";
+export {
+  H as default
+};

package/dist/components/Filter/FilterInput.d.ts

@@ -0,0 +1,15 @@
+import { InputProps } from '../Input/Input';
+export interface FilterInputProps extends InputProps {
+    /**
+     * Type of input for this filter only radios or checkboxes allowed
+     */
+    type: 'checkbox' | 'radio';
+}
+/**
+ * ## Overview
+ *
+ * A label & input for filtering criteria
+ *
+ */
+declare const FilterInput: import('react').ForwardRefExoticComponent<Omit<FilterInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export default FilterInput;

package/dist/components/Filter/FilterInput.js

@@ -0,0 +1,27 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { getCommonProps as p } from "../../utils/index.js";
+import c from "../Input/Input.js";
+const f = i(
+  ({ className: n, type: a = "checkbox", name: r, hidden: e, onChange: m, ...t }, o) => {
+    const { className: s } = p(t, "FilterInput");
+    return /* @__PURE__ */ l(
+      c,
+      {
+        ...t,
+        onChange: m,
+        ref: o,
+        type: a,
+        className: `${s}__input`,
+        hidden: e,
+        hideLabel: e,
+        name: r,
+        size: "lg"
+      }
+    );
+  }
+);
+f.displayName = "FilterValue";
+export {
+  f as default
+};

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

@@ -0,0 +1,3 @@
+export { default as Filter, type FilterProps } from './Filter';
+export { default as FilterInput, type FilterInputProps as FilterValueProps } from './FilterInput';
+export { default as FilterHeader, type FilterHeaderProps } from './FilterHeader';

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface InputProps extends Record<string, unknown> {
+export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'> {
     /**
      * Optional className to be applied to the `<input>` node
      */
@@ -7,7 +7,7 @@ export interface InputProps extends Record<string, unknown> {
     /**
      * Optionally provide the default value of the `<input>`. Should not be passed into controlled input!
      */
-    defaultValue?: string | number;
+    defaultValue?: string | number | readonly string[];
     /**
      * Booolean to specify whether the `<input>` should be disabled
      */
@@ -19,7 +19,7 @@ export interface InputProps extends Record<string, unknown> {
     /**
      * A custom `id` for the `<input>`
      */
-    id: string;
+    id?: string;
     /**
      * Boolean to dictate whether input is inline with the label or not. `true` to use the inline version.
      */
@@ -39,7 +39,7 @@ export interface InputProps extends Record<string, unknown> {
     /**
      * Optional `onChange` handler that is called whenever `<input>` is updated
      */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Optional `onClick` handler that is called whenever the `<input>` is clicked
      */
@@ -63,7 +63,7 @@ export interface InputProps extends Record<string, unknown> {
     /**
      * Specify the value of the `<input>` for controlled inputs
      */
-    value?: string | number | undefined;
+    value?: string | number | undefined | readonly string[];
     /**
      * Boolean to specify whether the control is currently in warning state
      */

package/dist/components/Input/Input.js

@@ -1,64 +1,78 @@
-import { jsxs as P, jsx as l } from "react/jsx-runtime";
-import * as R from "react";
-import t from "../../node_modules/classnames/index.js";
-import { px as i, useNormalizedInputProps as y } from "../../utils/index.js";
-const z = R.forwardRef(
+import { jsxs as R, jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import a from "../../node_modules/classnames/index.js";
+import { px as i, useNormalizedInputProps as g } from "../../utils/index.js";
+const k = o.forwardRef(
   ({
-    className: p,
-    defaultValue: r,
-    disabled: u,
-    hideLabel: o,
-    id: a,
-    inline: m,
-    invalid: $,
-    invalidText: c,
-    labelText: _,
-    onChange: b,
-    onClick: f,
-    placeholder: h,
-    readOnly: e,
-    size: v = "md",
-    type: s = "text",
-    value: w,
-    warn: x,
-    warnText: N,
-    ...d
-  }, I) => {
-    const n = y({ disabled: u, id: a, invalid: $, invalidText: c, readOnly: e, type: s, warn: x, warnText: N }), j = t(`${i}-${s}-input`, `${i}-input`, `${i}-input--${v}`, {
-      [`${i}-input--inline`]: m,
-      [`${i}-input--readonly`]: e,
-      [`${i}-input--disabled`]: n.disabled,
-      [`${i}-input--invalid`]: n.invalid,
-      [`${i}-input--warn`]: n.warn,
-      [`${p}__wrapper`]: p,
-      [`${i}-input--hidden`]: d.hidden
+    className: e,
+    defaultValue: u,
+    disabled: m,
+    hideLabel: $,
+    id: n,
+    inline: c,
+    invalid: _,
+    invalidText: b,
+    labelText: h,
+    onChange: f,
+    onClick: v,
+    placeholder: x,
+    readOnly: p,
+    size: w = "md",
+    type: l = "text",
+    value: I,
+    warn: N,
+    warnText: y,
+    ...r
+  }, j) => {
+    const d = o.useId(), t = g({
+      disabled: m,
+      id: n || d,
+      invalid: _,
+      invalidText: b,
+      readOnly: p,
+      type: l,
+      warn: N,
+      warnText: y
+    }), P = a(`${i}-${l}-input`, `${i}-input`, `${i}-input--${w}`, {
+      [`${i}-input--inline`]: c,
+      [`${i}-input--readonly`]: p,
+      [`${i}-input--disabled`]: t.disabled,
+      [`${i}-input--invalid`]: t.invalid,
+      [`${i}-input--warn`]: t.warn,
+      [`${e}__wrapper`]: e,
+      [`${i}-input--hidden`]: r.hidden
     });
-    return /* @__PURE__ */ P("div", { className: j, children: [
-      /* @__PURE__ */ l("label", { htmlFor: a, className: t(`${i}-input__label`, { [`${i}-input__label--hidden`]: o }), children: _ }),
-      /* @__PURE__ */ l(
+    return /* @__PURE__ */ R("div", { className: P, children: [
+      /* @__PURE__ */ s(
+        "label",
+        {
+          htmlFor: n || d,
+          className: a(`${i}-input__label`, { [`${i}-input__label--hidden`]: $ }),
+          children: h
+        }
+      ),
+      /* @__PURE__ */ s(
         "input",
         {
-          className: t(`${i}-input__input`, { className: p }),
-          "data-testid": a,
-          defaultValue: r,
-          disabled: n.disabled,
-          id: a,
-          name: d.name,
-          onChange: b,
-          onClick: f,
-          placeholder: h,
-          readOnly: e,
-          ref: I,
-          type: n.type,
-          value: w,
-          ...d
+          className: a(`${i}-input__input`, { className: e }),
+          "data-testid": n,
+          disabled: t.disabled,
+          id: n || d,
+          onChange: f,
+          onClick: v,
+          placeholder: x,
+          readOnly: p,
+          ref: j,
+          type: t.type,
+          ...t.type !== "checkbox" && t.type !== "radio" ? { value: I, defaultValue: u } : {},
+          ...r
         }
       ),
-      n.validation ? n.validation : /* @__PURE__ */ l("p", { className: t(`${i}-input__validation`), children: " " })
+      t.validation ? t.validation : /* @__PURE__ */ s("p", { className: a(`${i}-input__validation`), children: " " })
     ] });
   }
 );
-z.displayName = "Input";
+k.displayName = "Input";
 export {
-  z as default
+  k as default
 };

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

@@ -331,7 +331,6 @@ export declare const Playground: {
         invalid: boolean;
         invalidText: string;
         disabled: boolean;
-        defaultValue: string;
         labelText: string;
         warn: boolean;
         warnText: string;

package/dist/components/Pagination/Pagination.js

@@ -1,55 +1,55 @@
 import { jsxs as O, jsx as i } from "react/jsx-runtime";
-import p from "../../node_modules/classnames/index.js";
+import f from "../../node_modules/classnames/index.js";
 import { getCommonProps as w, px as r } from "../../utils/index.js";
 import V from "../Select/Select.js";
-import f from "../../assets/chevronRight.svg.js";
-import h from "../IconButton/IconButton.js";
-import { ButtonVariants as x } from "../Button/types.js";
+import h from "../../assets/chevronRight.svg.js";
+import x from "../IconButton/IconButton.js";
+import { ButtonVariants as b } from "../Button/types.js";
 import { determineOptionValue as o, findOptionFromSelectString as j } from "./utils.js";
 import { usePendingState as k } from "../../utils/hooks.js";
-const E = ({
-  className: b,
-  onChange: P,
-  variant: $ = "inline",
+const G = ({
+  className: P,
+  onChange: $,
+  variant: S = "inline",
   options: n = [],
   value: g,
   isDisabled: l,
-  previousLabel: S = "Previous",
-  nextLabel: v = "Next",
-  selectLabel: C = "Select",
+  previousLabel: v = "Previous",
+  nextLabel: C = "Next",
+  selectLabel: u = "Select",
   ...s
 }) => {
-  const N = "pagination", { className: u, ...I } = w(s, "Pagination"), { id: c } = s, { pendingState: _, setPendingState: y } = k(o(g)), m = _ || g, d = (t, e) => {
+  const N = "pagination", { className: p, ...I } = w(s, "Pagination"), { id: c } = s, { pendingState: _, setPendingState: y } = k(o(g)), m = _ || g, d = (t, e) => {
     const a = o(t);
-    y(a), P(a, e);
+    y(a), $(a, e);
   };
   return /* @__PURE__ */ O(
     "div",
     {
-      className: p(`${r}-${N}`, { [`${u}__wrapper`]: u }, b),
+      className: f(`${r}-${N}`, { [`${p}__wrapper`]: p }, P),
       ...I,
       ...s,
       children: [
         /* @__PURE__ */ i(
-          h,
+          x,
           {
-            className: p(`${r}__pagination-button`, `${r}-left-arrow`),
+            className: f(`${r}__pagination-button`, `${r}-left-arrow`),
             onClick: () => {
               const t = n.findIndex((a) => o(a) === m) - 1, e = n.at(t) || "";
               d(e);
             },
             "data-testid": `${c}-previous-button`,
             isDisabled: l,
-            "aria-label": S,
-            variant: x.tertiary,
-            children: /* @__PURE__ */ i(f, {})
+            "aria-label": v,
+            variant: b.tertiary,
+            children: /* @__PURE__ */ i(h, {})
           }
         ),
         /* @__PURE__ */ i(
           V,
           {
-            className: $ === "inline" && `${r}--inline-pagination`,
-            "aria-label": C,
+            className: S === "inline" ? `${r}--inline-pagination` : void 0,
+            "aria-label": u,
             value: m,
             onChange: (t) => {
               const e = j(n, t == null ? void 0 : t.currentTarget.value);
@@ -57,6 +57,7 @@ const E = ({
             },
             "data-testid": `${c}-select-button`,
             hideLabel: !0,
+            labelText: u,
             disabled: l,
             showIcon: !1,
             children: n.map((t) => {
@@ -66,7 +67,7 @@ const E = ({
           }
         ),
         /* @__PURE__ */ i(
-          h,
+          x,
           {
             className: `${r}__pagination-button`,
             onClick: () => {
@@ -75,9 +76,9 @@ const E = ({
             },
             "data-testid": `${c}-next-button`,
             isDisabled: l,
-            "aria-label": v,
-            variant: x.tertiary,
-            children: /* @__PURE__ */ i(f, {})
+            "aria-label": C,
+            variant: b.tertiary,
+            children: /* @__PURE__ */ i(h, {})
           }
         )
       ]
@@ -85,5 +86,5 @@ const E = ({
   );
 };
 export {
-  E as default
+  G as default
 };

package/dist/components/Select/Select.d.ts

@@ -1,7 +1,8 @@
 import { InputProps } from '../Input/Input';
+import { Merge } from 'type-fest';
 import { SelectVariants } from './types';
 import * as React from 'react';
-export interface SelectProps extends InputProps {
+export interface SelectProps extends Merge<InputProps, React.ComponentProps<'select'>> {
     /**
      * Option elements that are selectable
      */
@@ -13,7 +14,7 @@ export interface SelectProps extends InputProps {
     /**
      * Determines the variant of the select
      */
-    variant: SelectVariants;
+    variant?: SelectVariants;
 }
 /**
  * ## Overview