@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/container/wizard/props.d.ts

@@ -0,0 +1,295 @@
+import { ReactNode } from "react";
+/**
+ * Navigation and step-state helpers passed to {@link WmWizardActionProps.renderActions}
+ * for standalone / exported UIs.
+ */
+export interface WizardActionsRenderApi {
+    hasNextStep: () => boolean;
+    hasPreviousStep: () => boolean;
+    hasNoNextStep: () => boolean;
+    next: () => void;
+    previous: () => void;
+    prev: () => void;
+    done: () => void;
+    cancel: () => void;
+    skip: () => void;
+    disableNext: () => boolean;
+    disablePrevious: () => boolean;
+    disableDone: () => boolean;
+    getCurrentStepIndex: () => number;
+    gotoStep: (step: string | number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    currentStepIndex: number;
+    currentStep: WizardStepData | null;
+    steps: WizardStepData[];
+}
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Step data structure used internally by the wizard.
+ * Extends Record to allow use where Record<string, unknown> is expected (e.g. render callbacks).
+ */
+export interface WizardStepData extends Record<string, unknown> {
+    name: string;
+    title: string;
+    subtitle?: string;
+    iconclass: string;
+    iconurl?: string;
+    doneiconclass: string;
+    doneiconurl?: string;
+    show: boolean | string;
+    enableskip: boolean;
+    enableNext: boolean;
+    enablePrev: boolean;
+    enableDone: boolean;
+    isDone: boolean;
+    done: boolean;
+    active: boolean;
+    disabled: boolean;
+    isValid: boolean;
+    isInitialized: boolean;
+    content?: ReactNode;
+    render?: (step: WizardStepData, stepIndex?: number, dataset?: Record<string, unknown>[]) => ReactNode;
+    dynamicStepIndex?: number;
+    isdynamic?: boolean;
+    onLoad?: (step: WizardStepData, stepIndex: number) => void;
+    onNext?: (widget: Record<string, unknown>, currentStep: WizardStepData, stepIndex: number) => boolean | Promise<boolean>;
+    onPrev?: (widget: Record<string, unknown>, currentStep: WizardStepData, stepIndex: number) => boolean | Promise<boolean>;
+    onSkip?: (widget: Record<string, unknown>, currentStep: WizardStepData, stepIndex: number) => boolean | Promise<boolean>;
+    className?: string;
+    props?: Record<string, unknown>;
+    listener?: Record<string, unknown>;
+    children?: ReactNode;
+}
+/**
+ * Wizard context value provided to children.
+ */
+export interface WizardContextType {
+    steps: WizardStepData[];
+    currentStep: WizardStepData | null;
+    currentStepIndex: number;
+    hasNextStep: boolean;
+    hasPrevStep: boolean;
+    showDoneBtn: boolean;
+    enableNext: boolean;
+    enablePrev: boolean;
+    enableDone: boolean;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isInsideWizard?: boolean;
+    registerStep: (step: WizardStepData) => void;
+    updateStep: (stepName: string, updates: Partial<WizardStepData>) => void;
+    next: (eventName?: string) => void;
+    prev: () => void;
+    skip: () => void;
+    done: () => void;
+    cancel: () => void;
+    gotoStep: (step: string | number) => void;
+    onStepHeaderClick: (event: React.MouseEvent, step: WizardStepData) => void;
+    addStep: (wizardSteps: WizardStepData[]) => string[];
+}
+/**
+ * Base props specific to the WmWizard component.
+ */
+export interface WizardPropsBase {
+    /**
+     * Step indicator style.
+     * @default "auto"
+     */
+    stepstyle?: "auto" | "justified";
+    /**
+     * Alignment of navigation buttons.
+     * @default "right"
+     */
+    actionsalignment?: "left" | "center" | "right";
+    /**
+     * Name of the default step to show (by step name).
+     */
+    defaultstep?: string;
+    /**
+     * Index of the default step to show (0-based).
+     * @default 0
+     */
+    defaultstepindex?: number;
+    /**
+     * Show cancel button.
+     * @default true
+     */
+    cancelable?: boolean;
+    /**
+     * Allow next without validation.
+     * @default false
+     */
+    enablenext?: boolean | string;
+    /**
+     * Label for next button.
+     * @default "Next"
+     */
+    nextbtnlabel?: string;
+    /**
+     * Label for previous button.
+     * @default "Previous"
+     */
+    previousbtnlabel?: string;
+    /**
+     * Label for done button.
+     * @default "Done"
+     */
+    donebtnlabel?: string;
+    /**
+     * Label for cancel button.
+     * @default "Cancel"
+     */
+    cancelbtnlabel?: string;
+    /**
+     * Wizard type: static (children) or dynamic (dataset).
+     * @default "static"
+     */
+    type?: "static" | "dynamic";
+    /**
+     * Data source for dynamic wizard.
+     */
+    dataset?: Record<string, unknown>[];
+    /**
+     * Message when dataset is empty in dynamic mode.
+     * @default "No Data Found"
+     */
+    nodatamessage?: string;
+    /**
+     * Field definitions for wizard.
+     */
+    fieldDefs?: Record<string, unknown>[];
+    /**
+     * Message object for wizard status.
+     */
+    message?: {
+        caption: string;
+        type: string;
+    };
+    /**
+     * Step indicator style class.
+     */
+    stepClass?: string;
+    /**
+     * Stepper orientation.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Use alternative label layout for stepper.
+     * @default false
+     */
+    alternativeLabel?: boolean;
+    /**
+     * Allow non-linear navigation (jump to completed steps).
+     * @default true
+     */
+    nonLinear?: boolean;
+    /**
+     * Custom connector element between steps.
+     */
+    connector?: ReactNode;
+    /**
+     * Wizard width.
+     */
+    width?: string | number;
+    /**
+     * Wizard height.
+     */
+    height?: string | number;
+    /**
+     * Render function for dynamic wizard steps.
+     */
+    render?: (item: Record<string, unknown>, index: number, dataset: Record<string, unknown>[]) => ReactNode;
+    /**
+     * Called when cancel is clicked.
+     */
+    onCancel?: (currentStep: WizardStepData | null, steps: WizardStepData[]) => void;
+    /**
+     * Called when done is clicked.
+     */
+    onDone?: (currentStep: WizardStepData, steps: WizardStepData[]) => void;
+    /**
+     * Whether the wizard is standalone.
+     * @default false
+     */
+    standalone?: boolean;
+    /**
+     * Number of skeleton step indicators shown while loading.
+     * @default 4
+     */
+    skeletonRows?: number;
+    /**
+     * Number of skeleton content fields shown in the step body while loading.
+     * @default 3
+     */
+    skeletonColumns?: number;
+}
+/**
+ * Combined props for the WmWizard component, including base WaveMaker props.
+ */
+export type WmWizardProps = Prettify<WizardPropsBase & BaseProps>;
+/**
+ * Props for WmWizardStep child component.
+ */
+export interface WmWizardStepProps {
+    name?: string;
+    title?: string;
+    subtitle?: string;
+    iconclass?: string;
+    iconurl?: string;
+    doneiconclass?: string;
+    doneiconurl?: string;
+    enableskip?: boolean;
+    disablenext?: boolean;
+    disabledone?: boolean;
+    disableprevious?: boolean;
+    show?: boolean | string;
+    content?: ReactNode;
+    children?: ReactNode;
+    dynamicStepIndex?: number;
+    isdynamic?: boolean;
+    onLoad?: (step: WizardStepData, stepIndex: number) => void;
+    onNext?: (widget: Record<string, unknown>, currentStep: WizardStepData, stepIndex: number) => boolean | Promise<boolean>;
+    onPrev?: (widget: Record<string, unknown>, currentStep: WizardStepData, stepIndex: number) => boolean | Promise<boolean>;
+    onSkip?: (widget: Record<string, unknown>, currentStep: WizardStepData, stepIndex: number) => boolean | Promise<boolean>;
+    ref?: React.Ref<unknown>;
+    className?: string;
+    props?: Record<string, unknown>;
+    render?: (item: Record<string, unknown>, index?: number, dataset?: Record<string, unknown>[]) => ReactNode;
+    listener?: Record<string, unknown>;
+}
+/**
+ * Props for WmWizardAction child component.
+ */
+export interface WmWizardActionProps {
+    children?: ReactNode;
+    className?: string;
+    props?: Record<string, unknown>;
+    /**
+     * Render custom action controls; receives {@link WizardActionsRenderApi} from internal context (no public `useWizardContext` required).
+     * Must be a descendant of {@link WmWizard}.
+     */
+    renderActions?: (wizardActions: WizardActionsRenderApi) => ReactNode;
+}
+/**
+ * Props for default wizard actions.
+ */
+export interface DefaultActionsProps {
+    actionsalignment?: string;
+    children?: ReactNode;
+    listener?: Record<string, unknown>;
+    renderActions?: (wizardActions: WizardActionsRenderApi) => ReactNode;
+}
+/**
+ * Props for WizardStep internal component.
+ */
+export interface WizardStepProps {
+    step: WizardStepData;
+    index: number;
+    className?: string;
+    nonLinear?: boolean;
+    orientation?: "horizontal" | "vertical";
+    onStepClick: (index: number) => void;
+    current: boolean;
+}

package/components/container/wizard/utils.d.ts

@@ -0,0 +1,12 @@
+import { WizardStepData } from "./props";
+export declare const isPromise: (obj: any) => obj is Promise<any>;
+export declare const getNextValidStep: (fromIndex: number, visibleSteps: WizardStepData[]) => WizardStepData | null;
+export declare const getPrevValidStep: (fromIndex: number, visibleSteps: WizardStepData[]) => WizardStepData | null;
+export declare const getStepByName: (stepName: string, steps: WizardStepData[]) => WizardStepData | null;
+export declare const getStepByIndex: (index: number, visibleSteps: WizardStepData[]) => WizardStepData | null;
+export declare const updateStepFocus: () => void;
+export declare const handleNavigation: (response: boolean | Promise<boolean>, action: () => void) => Promise<void>;
+export declare const extendNextFn: (currentStep: WizardStepData, currentStepIndex: number, visibleSteps: WizardStepData[], setSteps: (updater: (prevSteps: WizardStepData[]) => WizardStepData[]) => void) => void;
+export declare const extendPrevFn: (currentStep: WizardStepData, currentStepIndex: number, visibleSteps: WizardStepData[], setSteps: (updater: (prevSteps: WizardStepData[]) => WizardStepData[]) => void) => void;
+export declare const appendDatasetSteps: (prev: WizardStepData[], incoming: WizardStepData[]) => WizardStepData[];
+export declare const trimStepsToLength: (prev: WizardStepData[], targetLen: number) => WizardStepData[];

package/components/container/wizard/utils.js

@@ -0,0 +1,144 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const isPromise = (obj) => {
+  return obj instanceof Promise || obj !== null && typeof obj === "object" && typeof obj.then === "function" && typeof obj.catch === "function";
+};
+const getNextValidStep = (fromIndex, visibleSteps) => {
+  for (let i = fromIndex; i < visibleSteps.length; i++) {
+    if (visibleSteps[i].show) {
+      return visibleSteps[i];
+    }
+  }
+  return null;
+};
+const getPrevValidStep = (fromIndex, visibleSteps) => {
+  for (let i = fromIndex; i >= 0; i--) {
+    if (visibleSteps[i].show) {
+      return visibleSteps[i];
+    }
+  }
+  return null;
+};
+const getStepByName = (stepName, steps) => {
+  return steps.find((step) => step.name === stepName) || steps[0];
+};
+const getStepByIndex = (index, visibleSteps) => {
+  return visibleSteps[index] || null;
+};
+const updateStepFocus = () => {
+  setTimeout(() => {
+    const currentStepElement = document.querySelector(
+      ".MuiStepButton-root[aria-current='step']"
+    );
+    currentStepElement == null ? void 0 : currentStepElement.focus();
+  }, 100);
+};
+const handleNavigation = async (response, action) => {
+  if (isPromise(response)) {
+    try {
+      const result = await response;
+      if (result !== false) action();
+    } catch (error) {
+      console.error("Navigation error:", error);
+    }
+  } else {
+    if (response !== false) action();
+  }
+};
+const extendNextFn = (currentStep, currentStepIndex, visibleSteps, setSteps) => {
+  const nextStep = getNextValidStep(currentStepIndex + 1, visibleSteps);
+  if (nextStep) {
+    setSteps(
+      (prevSteps) => prevSteps.map((step) => __spreadProps(__spreadValues({}, step), {
+        active: step.name === nextStep.name,
+        isDone: step.name === currentStep.name ? true : step.isDone,
+        done: step.name === currentStep.name ? true : step.done,
+        disabled: false,
+        isInitialized: step.name === nextStep.name ? true : step.isInitialized
+      }))
+    );
+    updateStepFocus();
+  }
+};
+const extendPrevFn = (currentStep, currentStepIndex, visibleSteps, setSteps) => {
+  const prevStep = getPrevValidStep(currentStepIndex - 1, visibleSteps);
+  if (prevStep) {
+    setSteps(
+      (prevSteps) => prevSteps.map((step) => {
+        const stepIndex = prevSteps.findIndex((ps) => ps.name === step.name);
+        const targetIndex = prevSteps.findIndex((ps) => ps.name === prevStep.name);
+        return __spreadProps(__spreadValues({}, step), {
+          active: step.name === prevStep.name,
+          isDone: currentStep.name === step.name ? false : step.isDone,
+          done: stepIndex < targetIndex,
+          disabled: false
+        });
+      })
+    );
+    updateStepFocus();
+  }
+};
+const appendDatasetSteps = (prev, incoming) => {
+  if (!incoming || incoming.length === 0) {
+    return prev;
+  }
+  const existingNames = new Set(prev.map((s) => s.name));
+  const deduped = incoming.filter((s) => {
+    if (existingNames.has(s.name)) {
+      return false;
+    }
+    existingNames.add(s.name);
+    return true;
+  });
+  return deduped.length ? [...prev, ...deduped] : prev;
+};
+const trimStepsToLength = (prev, targetLen) => {
+  const sliced = prev.slice(0, targetLen);
+  if (sliced.length === 0) {
+    return sliced;
+  }
+  let activeIndex = sliced.findIndex((s) => s.active);
+  if (activeIndex === -1 || activeIndex >= targetLen) {
+    activeIndex = Math.max(0, targetLen - 1);
+  }
+  return sliced.map((s, idx) => __spreadProps(__spreadValues({}, s), {
+    active: idx === activeIndex,
+    isDone: false,
+    done: idx < activeIndex,
+    disabled: false,
+    isInitialized: idx === activeIndex ? true : s.isInitialized,
+    enableNext: idx === activeIndex ? true : s.enableNext,
+    isValid: idx === activeIndex ? true : s.isValid,
+    dynamicStepIndex: typeof s.dynamicStepIndex === "number" ? idx : s.dynamicStepIndex
+  }));
+};
+export {
+  appendDatasetSteps,
+  extendNextFn,
+  extendPrevFn,
+  getNextValidStep,
+  getPrevValidStep,
+  getStepByIndex,
+  getStepByName,
+  handleNavigation,
+  isPromise,
+  trimStepsToLength,
+  updateStepFocus
+};

package/components/container/wizard/wizard-action/index.d.ts

@@ -0,0 +1,18 @@
+import { DefaultActionsProps, WizardActionsRenderApi } from "../props";
+export declare const WmWizardAction: import("react").MemoExoticComponent<({ children, actionsalignment, renderActions }: DefaultActionsProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmWizardAction component is a container for wizard navigation actions (Next, Prev, Done).
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-wizard--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-wizard--docs#tab-overview)
+ *
+ * @param props - {@link DefaultActionsProps}
+ */
+declare const _default: import("react").ComponentType<{
+    actionsalignment?: string;
+    children?: import("react").ReactNode;
+    listener?: Record<string, unknown>;
+    renderActions?: (wizardActions: WizardActionsRenderApi) => import("react").ReactNode;
+}>;
+export default _default;

package/components/container/wizard/wizard-action/index.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import clsx from "clsx";
+import { withBaseWrapper } from "../../../../higherOrder/withBaseWrapper";
+import { memo, useContext, useMemo } from "react";
+import WizardContext from "../WizardContext";
+const ACTIONS_CLASS = "app-wizard-actions panel-footer";
+function wizardActions(ctx) {
+  return {
+    hasNextStep: () => ctx.hasNextStep,
+    hasPreviousStep: () => ctx.hasPrevStep,
+    hasNoNextStep: () => ctx.showDoneBtn,
+    next: () => {
+      void ctx.next("next");
+    },
+    previous: () => {
+      void ctx.prev();
+    },
+    prev: () => {
+      void ctx.prev();
+    },
+    done: () => ctx.done(),
+    cancel: () => ctx.cancel(),
+    skip: () => ctx.skip(),
+    disableNext: () => !ctx.enableNext,
+    disablePrevious: () => !ctx.enablePrev,
+    disableDone: () => !ctx.enableDone,
+    getCurrentStepIndex: () => ctx.currentStepIndex,
+    gotoStep: (step) => ctx.gotoStep(step),
+    isFirstStep: ctx.isFirstStep,
+    isLastStep: ctx.isLastStep,
+    currentStepIndex: ctx.currentStepIndex,
+    currentStep: ctx.currentStep,
+    steps: ctx.steps
+  };
+}
+const WmWizardAction = memo(
+  ({ children, actionsalignment = "right", renderActions }) => {
+    const wizardContext = useContext(WizardContext);
+    const content = useMemo(() => {
+      if (renderActions && wizardContext) {
+        return renderActions(wizardActions(wizardContext));
+      }
+      return children;
+    }, [renderActions, wizardContext, children]);
+    return /* @__PURE__ */ jsx(Box, { className: clsx(ACTIONS_CLASS, actionsalignment), children: content });
+  },
+  (prev, next) => {
+    return prev.actionsalignment === next.actionsalignment && prev.children === next.children && prev.listener === next.listener && prev.renderActions === next.renderActions;
+  }
+);
+WmWizardAction.displayName = "WmWizardAction";
+var wizard_action_default = withBaseWrapper(WmWizardAction);
+export {
+  WmWizardAction,
+  wizard_action_default as default
+};

package/components/container/wizard/wizard-step/index.d.ts

@@ -0,0 +1,66 @@
+import { WmWizardStepProps } from "../props";
+export declare const WmWizardstep: import("react").MemoExoticComponent<(props: WmWizardStepProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmWizardstep component represents a single step within WmWizard.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-wizard--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-wizard--docs#tab-overview)
+ *
+ * @param props - {@link WmWizardStepProps}
+ */
+declare const _default: import("react").ComponentType<{
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: import("react").CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: import("react").CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;