@phillips/seldon 1.205.2 → 1.207.0

package/dist/patterns/ProgressWizard/ProgressWizard.js

@@ -0,0 +1,78 @@
+import { jsxs as j, jsx as s } from "react/jsx-runtime";
+import { forwardRef as B, useState as q, useCallback as E, useMemo as d, Children as R } from "react";
+import { LoadingState as l } from "./types.js";
+import { useHistoryManagement as T } from "./hooks/useHistoryManagement.js";
+import { getCommonProps as Y } from "../../utils/index.js";
+import { ProgressWizardFooter as D } from "./components/ProgressWizardFooter.js";
+import G from "../../components/ProgressIndicator/ProgressIndicator.js";
+import { isControlled as c, getLabelsFromChildren as J, wrapChildren as K } from "./utils.js";
+const O = B((g, f) => {
+  const {
+    customHeader: S,
+    hideNavigation: a,
+    hideProgressIndicator: h,
+    isEnableHistoryManagement: p = !1,
+    currentStepIndex: r,
+    defaultStepIndex: I,
+    shouldAllowContinue: x = !0,
+    loadingState: C = l.Idle,
+    buttonLabels: b,
+    onBack: P,
+    onCancel: w,
+    onContinue: v,
+    onFormSubmit: y,
+    children: z,
+    ...W
+  } = g, { className: o, ...N } = Y(W, "ProgressWizard");
+  let i = I;
+  i !== void 0 && r !== void 0 && (console.warn(
+    "ProgressWizard: Both defaultStepIndex and currentStepIndex props are provided. defaultStepIndex will be ignored."
+  ), i = void 0);
+  const [m, H] = q(i ?? 0), u = E(
+    (A) => {
+      !a && !c(r) && H(A);
+    },
+    [a, r]
+  ), e = d(
+    () => r ?? m,
+    [r, m]
+  );
+  p && c(r) && console.warn(
+    "ProgressWizard: History management is disabled in controlled mode (currentStepIndex prop). To enable history management, remove the currentStepIndex prop. You may also import and use the useHistoryManagement hook directly in your controlling component."
+  );
+  const t = R.toArray(z), L = d(() => J(t), [t]), _ = d(
+    () => K(t, e, o),
+    [t, e, o]
+  ), n = t.length;
+  (!t || n === 0) && console.warn(
+    "ProgressWizard: No children provided. At least one child is required to render steps, two for normal behavior."
+  ), t[e] || console.warn(`ProgressWizard: currentStepIndex ${e} is out of bounds (0 to ${n - 1})`), T({
+    enabled: !c(r) && p,
+    currentStepIndex: e,
+    stepCount: n,
+    setCurrentStepIndex: u
+  });
+  const F = e === 0, M = e === n - 1, $ = _, k = {
+    setCurrentStepIndex: u,
+    isFirstStep: F,
+    isLastStep: M,
+    baseClassName: o,
+    shouldAllowContinue: x,
+    isLoading: [l.Loading, l.Submitting].includes(C),
+    labels: b,
+    onContinue: v,
+    onBack: P,
+    onCancel: w,
+    onFormSubmit: y
+  };
+  return /* @__PURE__ */ j("section", { ...N, className: o, ref: f, "aria-label": "Progress Wizard", children: [
+    S,
+    h ? null : /* @__PURE__ */ s(G, { totalSteps: n, currentStep: e + 1, labels: L }),
+    /* @__PURE__ */ s("div", { className: `${o}__content`, children: $ }),
+    a ? null : /* @__PURE__ */ s("div", { className: `${o}__footer`, children: /* @__PURE__ */ s(D, { ...k }) })
+  ] });
+});
+O.displayName = "ProgressWizard";
+export {
+  O as default
+};

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

@@ -0,0 +1,469 @@
+import { ProgressWizardProps } from './ProgressWizard';
+import { ArgTypes } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<ProgressWizardProps & {
+        children?: import('react').ReactNode | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const BasicWizard: {
+    (): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        readonly customHeader: {
+            readonly control: {
+                readonly type: "text";
+            };
+        };
+        readonly hideNavigation: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly hideProgressIndicator: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly isEnableHistoryManagement: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly currentStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly defaultStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly shouldAllowContinue: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly loadingState: {
+            readonly control: {
+                readonly type: "select";
+            };
+            readonly options: readonly ["idle", "submitting", "loading"];
+        };
+        readonly buttonLabels: {
+            readonly control: {
+                readonly type: "object";
+            };
+            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
+        };
+        readonly onContinue: {
+            readonly action: "onContinue";
+        };
+        readonly onBack: {
+            readonly action: "onBack";
+        };
+        readonly onCancel: {
+            readonly action: "onCancel";
+        };
+        readonly onFormSubmit: {
+            readonly action: "onFormSubmit";
+        };
+    };
+};
+export declare const ValidationWizardWithOnBack: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    argTypes: {
+        readonly customHeader: {
+            readonly control: {
+                readonly type: "text";
+            };
+        };
+        readonly hideNavigation: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly hideProgressIndicator: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly isEnableHistoryManagement: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly currentStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly defaultStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly shouldAllowContinue: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly loadingState: {
+            readonly control: {
+                readonly type: "select";
+            };
+            readonly options: readonly ["idle", "submitting", "loading"];
+        };
+        readonly buttonLabels: {
+            readonly control: {
+                readonly type: "object";
+            };
+            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
+        };
+        readonly onContinue: {
+            readonly action: "onContinue";
+        };
+        readonly onBack: {
+            readonly action: "onBack";
+        };
+        readonly onCancel: {
+            readonly action: "onCancel";
+        };
+        readonly onFormSubmit: {
+            readonly action: "onFormSubmit";
+        };
+    };
+};
+export declare const AsyncValidationWizardWithAllCallbacks: {
+    (): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        readonly customHeader: {
+            readonly control: {
+                readonly type: "text";
+            };
+        };
+        readonly hideNavigation: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly hideProgressIndicator: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly isEnableHistoryManagement: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly currentStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly defaultStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly shouldAllowContinue: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly loadingState: {
+            readonly control: {
+                readonly type: "select";
+            };
+            readonly options: readonly ["idle", "submitting", "loading"];
+        };
+        readonly buttonLabels: {
+            readonly control: {
+                readonly type: "object";
+            };
+            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
+        };
+        readonly onContinue: {
+            readonly action: "onContinue";
+        };
+        readonly onBack: {
+            readonly action: "onBack";
+        };
+        readonly onCancel: {
+            readonly action: "onCancel";
+        };
+        readonly onFormSubmit: {
+            readonly action: "onFormSubmit";
+        };
+    };
+};
+export declare const ShouldAllowContinue: {
+    (): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        readonly customHeader: {
+            readonly control: {
+                readonly type: "text";
+            };
+        };
+        readonly hideNavigation: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly hideProgressIndicator: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly isEnableHistoryManagement: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly currentStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly defaultStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly shouldAllowContinue: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly loadingState: {
+            readonly control: {
+                readonly type: "select";
+            };
+            readonly options: readonly ["idle", "submitting", "loading"];
+        };
+        readonly buttonLabels: {
+            readonly control: {
+                readonly type: "object";
+            };
+            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
+        };
+        readonly onContinue: {
+            readonly action: "onContinue";
+        };
+        readonly onBack: {
+            readonly action: "onBack";
+        };
+        readonly onCancel: {
+            readonly action: "onCancel";
+        };
+        readonly onFormSubmit: {
+            readonly action: "onFormSubmit";
+        };
+    };
+};
+export declare const ExternalStepControlWizard: {
+    (): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        readonly customHeader: {
+            readonly control: {
+                readonly type: "text";
+            };
+        };
+        readonly hideNavigation: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly hideProgressIndicator: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly isEnableHistoryManagement: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly currentStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly defaultStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly shouldAllowContinue: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly loadingState: {
+            readonly control: {
+                readonly type: "select";
+            };
+            readonly options: readonly ["idle", "submitting", "loading"];
+        };
+        readonly buttonLabels: {
+            readonly control: {
+                readonly type: "object";
+            };
+            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
+        };
+        readonly onContinue: {
+            readonly action: "onContinue";
+        };
+        readonly onBack: {
+            readonly action: "onBack";
+        };
+        readonly onCancel: {
+            readonly action: "onCancel";
+        };
+        readonly onFormSubmit: {
+            readonly action: "onFormSubmit";
+        };
+    };
+};
+export declare const TraditionalFormWizard: {
+    (): import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        readonly customHeader: {
+            readonly control: {
+                readonly type: "text";
+            };
+        };
+        readonly hideNavigation: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly hideProgressIndicator: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly isEnableHistoryManagement: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly currentStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly defaultStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly shouldAllowContinue: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly loadingState: {
+            readonly control: {
+                readonly type: "select";
+            };
+            readonly options: readonly ["idle", "submitting", "loading"];
+        };
+        readonly buttonLabels: {
+            readonly control: {
+                readonly type: "object";
+            };
+            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
+        };
+        readonly onContinue: {
+            readonly action: "onContinue";
+        };
+        readonly onBack: {
+            readonly action: "onBack";
+        };
+        readonly onCancel: {
+            readonly action: "onCancel";
+        };
+        readonly onFormSubmit: {
+            readonly action: "onFormSubmit";
+        };
+    };
+};
+export declare const MobileFormStory: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+    };
+    argTypes: {
+        readonly customHeader: {
+            readonly control: {
+                readonly type: "text";
+            };
+        };
+        readonly hideNavigation: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly hideProgressIndicator: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly isEnableHistoryManagement: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly currentStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly defaultStepIndex: {
+            readonly control: {
+                readonly type: "number";
+            };
+        };
+        readonly shouldAllowContinue: {
+            readonly control: {
+                readonly type: "boolean";
+            };
+        };
+        readonly loadingState: {
+            readonly control: {
+                readonly type: "select";
+            };
+            readonly options: readonly ["idle", "submitting", "loading"];
+        };
+        readonly buttonLabels: {
+            readonly control: {
+                readonly type: "object";
+            };
+            readonly description: "Object of button labels. Keys are start / cancel / back / continue / submit";
+        };
+        readonly onContinue: {
+            readonly action: "onContinue";
+        };
+        readonly onBack: {
+            readonly action: "onBack";
+        };
+        readonly onCancel: {
+            readonly action: "onCancel";
+        };
+        readonly onFormSubmit: {
+            readonly action: "onFormSubmit";
+        };
+    };
+};
+export declare const Playground: {
+    render: (props: ProgressWizardProps) => JSX.Element;
+    args: ProgressWizardProps;
+    argTypes: ArgTypes;
+};

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

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

package/dist/patterns/ProgressWizard/components/ProgressWizardFooter.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { SetCurrentStepIndex, CallbackProps, ButtonLabels } from '../types';
+/**
+ * Props for the ProgressWizard Footer component. Controls navigation and button states.
+ * @property setCurrentStepIndex - Setter used for relative step moves
+ * @property isFirstStep - True if this is the first step (renders Cancel instead of Back)
+ * @property toFirstStep - Jump helper to go directly to the first step
+ * @property isLastStep - True if this is the last step (renders Submit instead of Continue)
+ * @property toLastStep - Jump helper to go directly to the last step
+ * @property baseClassName - Base class for styling overrides
+ * @property labels - Button labels for navigation (see ButtonLabels)
+ * @property shouldAllowContinue - Whether the primary button should be enabled (e.g. validation passed)
+ * @property isLoading - Whether a loading/submitting state should be shown (disables buttons and shows loader on primary)
+ * Inherits navigation callbacks from CallbackProps (onCancel, onBack, onContinue, onFormSubmit)
+ */
+export interface ProgressWizardFooterProps extends CallbackProps {
+    setCurrentStepIndex: SetCurrentStepIndex;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    baseClassName?: string;
+    labels?: ButtonLabels;
+    shouldAllowContinue: boolean;
+    isLoading: boolean;
+}
+/**
+ * Footer component for ProgressWizard. Renders navigation buttons (Back/Cancel, Continue/Submit) and handles their states.
+ *
+ * This is the default navigation footer for the ProgressWizard. It will call the appropriate handler props when buttons are clicked.
+ * It can be disabled by passing `hideNavigation` to the main ProgressWizard component, in case you'd like to use a custom nav solution.
+ *
+ * @param props - ProgressWizardFooterProps
+ * @returns ReactElement with navigation buttons
+ */
+export declare const ProgressWizardFooter: FC<ProgressWizardFooterProps>;
+export default ProgressWizardFooter;

package/dist/patterns/ProgressWizard/components/ProgressWizardFooter.js

@@ -0,0 +1,56 @@
+import { jsxs as O, Fragment as P, jsx as i } from "react/jsx-runtime";
+import f from "../../../components/Button/Button.js";
+import { ButtonVariants as b } from "../../../components/Button/types.js";
+import _ from "../../../components/Loader/Loader.js";
+import { DefaultButtonLabels as $ } from "../types.js";
+const A = ({
+  setCurrentStepIndex: d,
+  isFirstStep: e,
+  isLastStep: o,
+  baseClassName: s = "progress-wizard-footer",
+  labels: u,
+  shouldAllowContinue: y,
+  isLoading: c,
+  onBack: p,
+  onCancel: k,
+  onContinue: v,
+  onFormSubmit: g
+}) => {
+  const t = ({ fn: r, distance: n = 0 }) => async (j) => {
+    (r ? await Promise.resolve(r(j)) : void 0) !== !1 && n && d((z) => z + n);
+  }, a = {
+    ...Object.fromEntries(Object.entries($).map(([r, n]) => [r.toLowerCase(), n])),
+    ...u
+  }, l = e ? a.cancel : a.back, w = t(e ? { fn: k, distance: 0 } : { fn: p, distance: -1 }), m = o ? a.submit : e ? a.start : a.continue, C = t(o ? { fn: g } : { fn: v, distance: 1 });
+  return /* @__PURE__ */ O(P, { children: [
+    /* @__PURE__ */ i(
+      f,
+      {
+        variant: b.secondary,
+        type: "button",
+        className: `${s}__btn`,
+        "aria-label": `Progress Wizard: ${l}`,
+        onClick: async (r) => await w(r),
+        children: l
+      }
+    ),
+    /* @__PURE__ */ i(
+      f,
+      {
+        variant: b.primary,
+        type: o ? "submit" : "button",
+        className: `${s}__btn`,
+        "aria-label": `Progress Wizard: ${m}`,
+        onClick: async (r) => {
+          o || r.preventDefault(), await C(r);
+        },
+        isDisabled: !y || c,
+        children: c ? /* @__PURE__ */ i(_, {}) : m
+      }
+    )
+  ] });
+};
+export {
+  A as ProgressWizardFooter,
+  A as default
+};

package/dist/patterns/ProgressWizard/components/ProgressWizardFooter.test.d.ts

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

package/dist/patterns/ProgressWizard/hooks/useHistoryManagement.d.ts

@@ -0,0 +1,28 @@
+import { SetCurrentStepIndex } from '../types';
+/**
+ * Hook to manage browser history state for a multi-step wizard.
+ *
+ * This hook (when enabled) pushes a new history entry whenever the user advances
+ * to a later step, and listens for `popstate` events so the wizard can respond
+ * to back/forward navigation by restoring the step index from history state.
+ *
+ * Notes:
+ * - Only numeric step indices within [0, stepsLength) are accepted from history state.
+ * - History entries are only pushed when `enabled` is true and the current
+ *   step index is greater than the previous one (i.e. moving forward).
+ *
+ * @param params - Configuration object for the hook
+ * @param params.enabled - When false, the hook is inert (does not push or listen).
+ * @param params.currentStepIndex - The current step index of the wizard. When this
+ *   value increases the hook will push a new history state (if enabled).
+ * @param params.stepCount - Total number of steps in the wizard. Used to validate
+ *   indices read from history state before applying them via `setCurrentStepIndex`.
+ * @param params.setCurrentStepIndex - Setter callback used to update the current
+ *   step index when a valid index is found in the popstate event state.
+ */
+export declare const useHistoryManagement: ({ enabled, currentStepIndex, stepCount, setCurrentStepIndex, }: {
+    enabled: boolean;
+    currentStepIndex: number;
+    stepCount: number;
+    setCurrentStepIndex: SetCurrentStepIndex;
+}) => void;

package/dist/patterns/ProgressWizard/hooks/useHistoryManagement.js

@@ -0,0 +1,24 @@
+import { useRef as f, useEffect as a } from "react";
+const c = ({
+  enabled: o,
+  currentStepIndex: e,
+  stepCount: s,
+  setCurrentStepIndex: i
+}) => {
+  const n = f(0);
+  a(() => {
+    o && (e > n.current && window.history.pushState({ step: e }, "", window.location.pathname + window.location.search), n.current = e);
+  }, [e, o]), a(() => {
+    if (!o) return;
+    const r = (p) => {
+      const t = p.state;
+      t && typeof t.step == "number" && t.step >= 0 && t.step < s && i(t.step);
+    };
+    return window.addEventListener("popstate", r), () => {
+      window.removeEventListener("popstate", r);
+    };
+  }, [o, s, i]);
+};
+export {
+  c as useHistoryManagement
+};

package/dist/patterns/ProgressWizard/hooks/useHistoryManagement.test.d.ts

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