@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/container/tabs/props.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = void 0;
+/**
+ * Tab position/orientation.
+ */
+
+/**
+ * Icon position relative to tab label.
+ */
+
+/**
+ * Transition effect when switching tabs.
+ */
+
+/**
+ * Base props specific to the WmTabs component.
+ */
+
+/**
+ * Combined props for the WmTabs component, including base WaveMaker props.
+ */
+
+var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  type: "static",
+  dataset: [],
+  defaultpaneindex: 0,
+  tabsposition: "top",
+  nodatamessage: "No Data Found",
+  statehandler: "none",
+  autotabactivation: true,
+  transition: "none",
+  iconposition: "left",
+  enablescroll: false,
+  listener: {},
+  name: ""
+};

package/components/container/tabs/tab-pane/index.d.ts

@@ -0,0 +1,91 @@
+import React from "react";
+import { WmTabPaneProps } from "./props";
+export declare const WmTabpane: {
+    (props: WmTabPaneProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const WmTabpaneStandalone: {
+    (props: WmTabPaneProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { WmTabpaneStandalone as WmTabPane };
+/**
+ * The WmTabPane component represents a single tab content panel within
+ * WmTabs. Used as a child of WmTabs.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-tabs-tabpane--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-tabs-tabpane--docs#tab-overview)
+ *
+ * @param props - {@link WmTabPaneProps}
+ */
+declare const _default: React.ComponentType<{
+    caption?: string;
+    smoothscroll?: boolean;
+    content?: string;
+    heading?: string;
+    title?: string;
+    disabled?: boolean;
+    badgevalue?: string | number;
+    badgetype?: string;
+    paneicon?: string;
+    isdynamic?: boolean;
+    index?: number;
+    item?: Record<string, unknown>;
+    onSelect?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>, paneIndex?: number) => void;
+    onDeselect?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>, paneIndex?: number) => void;
+    onLoad?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>) => void;
+    onHeaderClick?: (event: React.SyntheticEvent, props: WmTabPaneProps, paneIndex: number) => void;
+    renderPartial?: (props: WmTabPaneProps, onLoad?: (widget?: WmTabPaneProps) => void) => React.ReactNode;
+    layoutClassName?: string;
+    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?: 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?: 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;
+}>;
+export default _default;

package/components/container/tabs/tab-pane/index.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTabpane = exports.WmTabPane = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx2 = _interopRequireDefault(require("clsx"));
+var _tabs = require("@base-ui-components/react/tabs");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _ = require("..");
+var _widgetInstanceUtils = require("@wavemaker-ai/react-runtime/components/data/list/utils/widget-instance-utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
+  var className = props.className,
+    disabled = props.disabled,
+    renderPartial = props.renderPartial,
+    name = props.name,
+    index = props.index,
+    listener = props.listener,
+    item = props.item,
+    layoutClassName = props.layoutClassName;
+  var onHeaderclick = props.onHeaderclick;
+  var _useTabsContext = (0, _.useTabsContext)(),
+    selectedIndex = _useTabsContext.selectedIndex,
+    setSelectedIndex = _useTabsContext.setSelectedIndex,
+    tabsContainerName = _useTabsContext.tabsContainerName,
+    updatePaneHeader = _useTabsContext.updatePaneHeader;
+  var wasActiveRef = _react["default"].useRef(false);
+  var loadedRef = _react["default"].useRef(false);
+  var hasReportedHeaderRef = _react["default"].useRef(false);
+  (0, _react.useEffect)(function () {
+    var _props$listener;
+    var isActive = selectedIndex === index;
+    if (listener && listener.onChange) {
+      listener.onChange(name, {
+        select: function select() {
+          return setSelectedIndex(index);
+        },
+        isActive: isActive,
+        deselect: function deselect() {
+          return setSelectedIndex(-1);
+        }
+      });
+    }
+
+    // Read widgetInstance AFTER registration above so it carries select/deselect/isActive
+    var widgetInstance = props === null || props === void 0 || (_props$listener = props.listener) === null || _props$listener === void 0 || (_props$listener = _props$listener.Widgets) === null || _props$listener === void 0 ? void 0 : _props$listener[name];
+    (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, [item], item);
+    if (isActive && tabsContainerName) {
+      listener.onChange(tabsContainerName, {
+        activeTab: widgetInstance
+      });
+    }
+    if (isActive) {
+      if (!loadedRef.current) {
+        var _props$onLoad;
+        props === null || props === void 0 || (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 || _props$onLoad.call(props, null, widgetInstance);
+        loadedRef.current = true;
+      }
+      if (!wasActiveRef.current) {
+        var _props$onSelect;
+        props === null || props === void 0 || (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, null, widgetInstance, index);
+        wasActiveRef.current = true;
+      }
+    } else if (wasActiveRef.current) {
+      var _props$onDeselect;
+      props === null || props === void 0 || (_props$onDeselect = props.onDeselect) === null || _props$onDeselect === void 0 || _props$onDeselect.call(props, null, widgetInstance, index);
+      wasActiveRef.current = false;
+    }
+  }, [selectedIndex, name]);
+  var isHidden = (0, _react.useMemo)(function () {
+    return item === undefined ? false : (item === null || item === void 0 ? void 0 : item.show) === false;
+  }, [item]);
+  var headerProps = (0, _react.useMemo)(function () {
+    return {
+      name: name,
+      title: props.title,
+      disabled: disabled,
+      show: props.show,
+      paneicon: props.paneicon,
+      badgevalue: props.badgevalue,
+      badgetype: props.badgetype,
+      className: className,
+      onHeaderclick: onHeaderclick,
+      onHeaderClick: props.onHeaderClick
+    };
+  }, [name, props.title, disabled, props.show, props.paneicon, props.badgevalue, props.badgetype, className, onHeaderclick, props.onHeaderClick]);
+  (0, _react.useEffect)(function () {
+    if (!hasReportedHeaderRef.current) {
+      hasReportedHeaderRef.current = true;
+      return;
+    }
+    updatePaneHeader(name, headerProps);
+  }, [name, headerProps, updatePaneHeader]);
+  return __jsx(_tabs.Tabs.Panel, {
+    value: index,
+    keepMounted: true,
+    className: (0, _clsx2["default"])("tab-pane", "wm-tab-pane-root", layoutClassName, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+      disabled: disabled
+    }, className, !!className), "active", selectedIndex === index), "hidden", isHidden), "wm-tab-pane-active", selectedIndex === index), "wm-tab-pane-inactive", selectedIndex !== index)),
+    role: "tabpanel",
+    style: props === null || props === void 0 ? void 0 : props.styles,
+    "data-pane-name": name,
+    title: props === null || props === void 0 ? void 0 : props.title,
+    name: name
+  }, __jsx("div", {
+    className: "tab-body",
+    "data-widget-id": props["data-widget-id"]
+  }, renderPartial ? renderPartial(props, function () {
+    var _props$onLoad2;
+    return (_props$onLoad2 = props.onLoad) === null || _props$onLoad2 === void 0 ? void 0 : _props$onLoad2.call(props, new Event("load"), props);
+  }) : props.children));
+};
+WmTabpane.displayName = "WmTabpane";
+var WmTabpaneStandalone = exports.WmTabPane = WmTabpane;
+/**
+ * The WmTabPane component represents a single tab content panel within
+ * WmTabs. Used as a child of WmTabs.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-tabs-tabpane--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-tabs-tabpane--docs#tab-overview)
+ *
+ * @param props - {@link WmTabPaneProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmTabpane);

package/components/container/tabs/tab-pane/props.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Base props specific to the WmTabPane component.
+ */
+export interface TabPanePropsBase {
+    /**
+     * Tab caption/title (alternative to title).
+     */
+    caption?: string;
+    /**
+     * Enable smooth scroll when tab is selected.
+     */
+    smoothscroll?: boolean;
+    /**
+     * Tab content (legacy).
+     */
+    content?: string;
+    /**
+     * Tab heading (alternative to title).
+     */
+    heading?: string;
+    /**
+     * Tab title displayed in the tab header.
+     */
+    title?: string;
+    /**
+     * Whether the tab is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Badge value displayed in the tab header.
+     */
+    badgevalue?: string | number;
+    /**
+     * Badge style variant.
+     */
+    badgetype?: string;
+    /**
+     * Icon class for the tab header.
+     */
+    paneicon?: string;
+    /**
+     * Whether this pane is from dynamic tabs (injected).
+     */
+    isdynamic?: boolean;
+    /**
+     * Tab index (injected by parent).
+     */
+    index?: number;
+    /**
+     * Dynamic tab item data (injected for dynamic tabs).
+     */
+    item?: Record<string, unknown>;
+    /**
+     * Called when tab is selected.
+     */
+    onSelect?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>, paneIndex?: number) => void;
+    /**
+     * Called when tab is deselected.
+     */
+    onDeselect?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>, paneIndex?: number) => void;
+    /**
+     * Called when tab content loads.
+     */
+    onLoad?: (event: React.SyntheticEvent | null, widgetOrProps: Record<string, unknown>) => void;
+    /**
+     * Called when tab header is clicked.
+     */
+    onHeaderClick?: (event: React.SyntheticEvent, props: WmTabPaneProps, paneIndex: number) => void;
+    /**
+     * Custom render function for tab content.
+     */
+    renderPartial?: (props: WmTabPaneProps, onLoad?: (widget?: WmTabPaneProps) => void) => ReactNode;
+    /**
+     * Utility layout classes from Studio Auto Layout (merged on the outer tab-pane wrapper).
+     */
+    layoutClassName?: string;
+}
+/**
+ * Combined props for the WmTabPane component, including base WaveMaker props.
+ */
+export type WmTabPaneProps = Prettify<TabPanePropsBase & BaseProps>;

package/components/container/tabs/tab-pane/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,17 @@
+import React from "react";
+export declare const filterVisibleChildren: (children: React.ReactNode, hiddenTabNames: Set<string>) => any[];
+type RemovePaneParams = {
+    type?: string;
+    dataset?: any[];
+    children: React.ReactNode;
+    hiddenTabNames: Set<string>;
+    TabName: string;
+    selectedIndex: number;
+    currentSelectedIndex: React.MutableRefObject<number>;
+    panesCountRef: React.MutableRefObject<number>;
+    setHiddenTabNames: React.Dispatch<React.SetStateAction<Set<string>>>;
+    setSelectedIndex: (index: number) => void;
+    saveStateToStorage: (index: number) => void;
+};
+export declare const handleRemovePane: ({ type, dataset, children, hiddenTabNames, TabName, selectedIndex, currentSelectedIndex, panesCountRef, setHiddenTabNames, setSelectedIndex, saveStateToStorage, }: RemovePaneParams) => void;
+export {};

package/components/container/tabs/utils.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleRemovePane = exports.filterVisibleChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var filterVisibleChildren = exports.filterVisibleChildren = function filterVisibleChildren(children, hiddenTabNames) {
+  return _react["default"].Children.toArray(children).filter(function (c) {
+    var _c$props;
+    var nm = c === null || c === void 0 || (_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.name;
+    var isHidden = nm ? hiddenTabNames.has(nm) : false;
+    return c && c.props && c.props.show !== false && !isHidden;
+  });
+};
+var handleRemovePane = exports.handleRemovePane = function handleRemovePane(_ref) {
+  var _visibleBefore$select;
+  var type = _ref.type,
+    dataset = _ref.dataset,
+    children = _ref.children,
+    hiddenTabNames = _ref.hiddenTabNames,
+    TabName = _ref.TabName,
+    selectedIndex = _ref.selectedIndex,
+    currentSelectedIndex = _ref.currentSelectedIndex,
+    panesCountRef = _ref.panesCountRef,
+    setHiddenTabNames = _ref.setHiddenTabNames,
+    setSelectedIndex = _ref.setSelectedIndex,
+    saveStateToStorage = _ref.saveStateToStorage;
+  // Dynamic mode: mutate dataset
+  if (type === "dynamic" && dataset) {
+    return;
+  }
+
+  // Static mode: mark hidden in internal state and adjust selection if needed
+  var visibleBefore = filterVisibleChildren(children, hiddenTabNames);
+  var activeName = (_visibleBefore$select = visibleBefore[selectedIndex]) === null || _visibleBefore$select === void 0 || (_visibleBefore$select = _visibleBefore$select.props) === null || _visibleBefore$select === void 0 ? void 0 : _visibleBefore$select.name;
+  setHiddenTabNames(function (prev) {
+    var next = new Set(prev);
+    next.add(TabName);
+    return next;
+  });
+  if (activeName === TabName) {
+    var newIndex = Math.max(0, currentSelectedIndex.current - 1);
+    currentSelectedIndex.current = newIndex;
+    setSelectedIndex(newIndex);
+    saveStateToStorage(newIndex);
+  } else {
+    setSelectedIndex(currentSelectedIndex.current);
+  }
+};

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

@@ -0,0 +1,4 @@
+import { WizardContextType } from "./props";
+declare const WizardContext: import("react").Context<WizardContextType>;
+export declare const useWizardContext: () => WizardContextType;
+export default WizardContext;

package/components/container/wizard/WizardContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWizardContext = exports["default"] = void 0;
+var _react = require("react");
+var WizardContext = /*#__PURE__*/(0, _react.createContext)(null);
+var useWizardContext = exports.useWizardContext = function useWizardContext() {
+  var context = (0, _react.useContext)(WizardContext);
+  if (!context) {
+    throw new Error("useWizardContext must be used within a WizardProvider");
+  }
+  return context;
+};
+var _default = exports["default"] = WizardContext;

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

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { StepIconProps } from "@mui/material";
+import { WizardStepData } from "../props";
+export declare const CustomStepIcon: import("react").MemoExoticComponent<(props: StepIconProps & {
+    step?: WizardStepData;
+    index?: number;
+    wizardClass?: string;
+    active?: boolean;
+    completed?: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const CustomStepLabel: import("react").MemoExoticComponent<(props: {
+    step: WizardStepData;
+    index: number;
+    wizardClass: string;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element>;

package/components/container/wizard/components/StepComponents.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomStepLabel = exports.CustomStepIcon = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+// Custom Step Icon Component
+var CustomStepIcon = exports.CustomStepIcon = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var step = props.step,
+    _props$index = props.index,
+    index = _props$index === void 0 ? 0 : _props$index,
+    _props$wizardClass = props.wizardClass,
+    wizardClass = _props$wizardClass === void 0 ? "" : _props$wizardClass,
+    active = props.active,
+    completed = props.completed;
+  if (!step) return null;
+  var isNumber = wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("number");
+  var isDottedStepper = wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("dottedstepper");
+  var isTextInline = wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("text-inline");
+  var isIconStepper = (wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("iconstepper")) || (wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("tabstepper"));
+  var isCompleted = step.isDone;
+  var iconContent = (0, _react.useMemo)(function () {
+    if (isCompleted && (isDottedStepper || isNumber)) {
+      return __jsx(_material.Box, {
+        component: "i",
+        className: "app-icon wi wi-done"
+      });
+    }
+    if (isNumber && !isCompleted) {
+      return __jsx(_material.Box, {
+        component: "span",
+        className: "count"
+      }, index + 1);
+    }
+    if ((isDottedStepper || isTextInline && !isIconStepper) && !isCompleted) {
+      return __jsx(_material.Box, {
+        component: "span",
+        className: "dottedstepper"
+      });
+    }
+    if (isIconStepper && step.iconclass && (!isCompleted || isCompleted && !step.doneiconclass)) {
+      return __jsx(_material.Box, {
+        component: "span",
+        className: "app-icon ".concat(step.iconclass)
+      });
+    }
+    if (step.doneiconclass && isCompleted && isIconStepper) {
+      return __jsx(_material.Box, {
+        component: "span",
+        className: "app-icon ".concat(step.doneiconclass)
+      });
+    }
+    return null;
+  }, [step, index, isCompleted, isDottedStepper, isNumber, isTextInline, isIconStepper]);
+  return __jsx(_material.Box, {
+    component: "span",
+    className: (0, _clsx["default"])("wizard-step-number", {
+      active: active,
+      finished: isCompleted,
+      "default": !active && !isCompleted
+    }, isDottedStepper && !completed && "has-dotted-stepper")
+  }, iconContent);
+});
+CustomStepIcon.displayName = "CustomStepIcon";
+
+// Custom Step Label Component
+var CustomStepLabel = exports.CustomStepLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var step = props.step,
+    index = props.index,
+    wizardClass = props.wizardClass,
+    children = props.children;
+  var isTextInline = wizardClass === null || wizardClass === void 0 ? void 0 : wizardClass.includes("text-inline");
+  return __jsx(_react["default"].Fragment, null, __jsx(_material.Box, {
+    component: "span",
+    className: "title-wrapper"
+  }, isTextInline && __jsx(_material.Typography, {
+    component: "span",
+    className: "step-number",
+    variant: "caption"
+  }, "0".concat(index + 1)), __jsx(_material.Typography, {
+    component: "span",
+    variant: "body2",
+    className: "step-title"
+  }, step.title)), step.subtitle && __jsx(_material.Typography, {
+    component: "span",
+    className: "subtitle-wrapper",
+    variant: "caption",
+    title: step.subtitle
+  }, __jsx(_material.Box, {
+    component: "span",
+    className: "step-title"
+  }, step.subtitle)), children);
+});
+CustomStepLabel.displayName = "CustomStepLabel";

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

@@ -0,0 +1,5 @@
+import { WizardStepProps } from "../props";
+export declare const WizardStep: {
+    ({ step, index, className, nonLinear, orientation, onStepClick, current, }: WizardStepProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/components/container/wizard/components/WizardStep.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WizardStep = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _StepComponents = require("./StepComponents");
+var __jsx = _react["default"].createElement;
+var STEP_CLASS = "app-wizard-step";
+var WizardStep = exports.WizardStep = function WizardStep(_ref) {
+  var step = _ref.step,
+    index = _ref.index,
+    className = _ref.className,
+    _ref$nonLinear = _ref.nonLinear,
+    nonLinear = _ref$nonLinear === void 0 ? false : _ref$nonLinear,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
+    onStepClick = _ref.onStepClick,
+    current = _ref.current;
+  var stepProps = {};
+  var labelProps = {};
+  if (step.disabled) {
+    stepProps.disabled = true;
+  }
+  if (step.done || step.isDone) {
+    stepProps.completed = true;
+  }
+  if (step.show === false || step.show === "false") {
+    stepProps.hidden = true;
+  }
+  var isClassic = className === null || className === void 0 ? void 0 : className.includes("classic");
+  return __jsx(_material.Step, (0, _extends2["default"])({
+    key: step.name
+  }, stepProps, {
+    className: (0, _clsx["default"])(STEP_CLASS, current ? "active" : step.done || step.isDone ? "finished" : "default")
+  }, stepProps), nonLinear || step.done || step.isDone ? __jsx(_material.Box, {
+    component: "a",
+    onClick: function onClick() {
+      return onStepClick(index);
+    },
+    className: (0, _clsx["default"])({
+      active: current,
+      finished: step.done || step.isDone,
+      "default": !current && !(step.done || step.isDone),
+      "title-center-align": isClassic && !step.subtitle
+    }),
+    "aria-current": step.active ? "step" : undefined,
+    "aria-label": step.subtitle ? "step ".concat(index + 1, " ").concat(step.title, " ").concat(step.subtitle) : "step ".concat(index + 1, " ").concat(step.title),
+    "aria-disabled": step.disabled,
+    title: step.title
+  }, isClassic && __jsx("span", {
+    className: "arrow"
+  }), __jsx(_material.StepLabel, (0, _extends2["default"])({}, labelProps, {
+    slots: {
+      stepIcon: _StepComponents.CustomStepIcon
+    },
+    slotProps: {
+      stepIcon: {
+        step: step,
+        index: index,
+        wizardClass: className,
+        active: step.active,
+        completed: step.done || step.isDone
+      }
+    }
+  }), __jsx(_StepComponents.CustomStepLabel, {
+    step: step,
+    index: index,
+    wizardClass: className || ""
+  }))) : __jsx(_react["default"].Fragment, null, isClassic && __jsx("span", {
+    className: "arrow"
+  }), __jsx(_material.StepLabel, (0, _extends2["default"])({}, labelProps, {
+    slots: {
+      stepIcon: _StepComponents.CustomStepIcon
+    },
+    slotProps: {
+      stepIcon: {
+        step: step,
+        index: index,
+        wizardClass: className,
+        active: step.active,
+        completed: step.done || step.isDone
+      }
+    }
+  }), __jsx(_StepComponents.CustomStepLabel, {
+    step: step,
+    index: index,
+    wizardClass: className || ""
+  }))), orientation === "vertical" && __jsx(_material.StepContent, null, step.active && step.content));
+};
+WizardStep.displayName = "WizardStep";