@wavemaker/react-runtime 11.14.1-15.6409

package/components/container/tabs/index.js

@@ -0,0 +1,379 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTabsContext = exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _tabs = require("@base-ui-components/react/tabs");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _tabPane = _interopRequireDefault(require("@wavemaker/react-runtime/components/container/tabs/tab-pane"));
+var _props = require("./props");
+var _statePersistance = require("@wavemaker/react-runtime/utils/state-persistance");
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+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;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "nav nav-tabs";
+
+// Helper function to check if a component is WmTabPane
+var isTabPaneComponent = function isTabPaneComponent(child) {
+  var _child$type;
+  var displayName = child === null || child === void 0 || (_child$type = child.type) === null || _child$type === void 0 || (_child$type = _child$type.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName;
+  return displayName && (displayName.includes("WmTabpane") || displayName.includes("WmTabPane"));
+};
+var TabsContext = /*#__PURE__*/(0, _react.createContext)({
+  selectedIndex: 0,
+  setSelectedIndex: function setSelectedIndex() {}
+});
+var useTabsContext = exports.useTabsContext = function useTabsContext() {
+  return (0, _react.useContext)(TabsContext);
+};
+var WmTabs = /*#__PURE__*/(0, _react.memo)(function (Props) {
+  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), Props);
+
+  // Destructure all used props
+  var defaultpaneindex = props.defaultpaneindex,
+    statehandler = props.statehandler,
+    name = props.name,
+    listener = props.listener,
+    type = props.type,
+    dataset = props.dataset,
+    children = props.children,
+    render = props.render,
+    iconposition = props.iconposition,
+    _props$tabsposition = props.tabsposition,
+    tabsposition = _props$tabsposition === void 0 ? "top" : _props$tabsposition,
+    justified = props.justified,
+    nodatamessage = props.nodatamessage,
+    styles = props.styles,
+    className = props.className,
+    onChange = props.onChange;
+  var panesCount = (0, _react.useRef)(0);
+  var prevSelectedIndex = (0, _react.useRef)(null);
+  var currentSelectedIndex = (0, _react.useRef)(defaultpaneindex || 0);
+  var _useState = (0, _react.useState)(defaultpaneindex || 0),
+    selectedIndex = _useState[0],
+    setSelectedIndex = _useState[1];
+
+  // Keep currentSelectedIndex ref in sync with state
+  (0, _react.useEffect)(function () {
+    currentSelectedIndex.current = selectedIndex;
+  }, [selectedIndex]);
+
+  // Helper function to change tab with proper state management
+  var changeTab = function changeTab(newIndex) {
+    if (newIndex >= 0 && newIndex < panesCount.current && newIndex !== currentSelectedIndex.current) {
+      prevSelectedIndex.current = currentSelectedIndex.current;
+      setSelectedIndex(newIndex);
+      saveStateToStorage(newIndex);
+      return true;
+    }
+    return false;
+  };
+
+  // go to previous tab - using useCallback to ensure fresh closure
+  var prev = _react["default"].useCallback(function () {
+    var currentIndex = currentSelectedIndex.current;
+    var targetIndex = currentIndex - 1;
+    if (targetIndex >= 0) {
+      changeTab(targetIndex);
+    } else {
+      // Wrap around to the last tab when at the first tab
+      changeTab(panesCount.current - 1);
+    }
+  }, []);
+
+  // go to next tab - using useCallback to ensure fresh closure
+  var next = _react["default"].useCallback(function () {
+    var currentIndex = currentSelectedIndex.current;
+    var targetIndex = currentIndex + 1;
+    if (targetIndex < panesCount.current) {
+      changeTab(targetIndex);
+    } else {
+      // Wrap around to the first tab when at the last tab
+      changeTab(0);
+    }
+  }, []);
+
+  // go to specific tab - using useCallback to ensure fresh closure
+  // Accepts 1-based index (1 = first tab, 2 = second tab, etc.)
+  var _goToTab = _react["default"].useCallback(function (tabNumber) {
+    // Convert from 1-based to 0-based index
+    var index = tabNumber - 1;
+
+    // Validate the tab number is within valid range
+    if (tabNumber >= 1 && tabNumber <= panesCount.current && index !== currentSelectedIndex.current) {
+      changeTab(index);
+    }
+  }, []);
+
+  // get the current active tab name
+  var getActiveTabName = _react["default"].useCallback(function () {
+    var _activeChild$props;
+    var currentIndex = currentSelectedIndex.current;
+    if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0) {
+      var _dataset$currentIndex;
+      return ((_dataset$currentIndex = dataset[currentIndex]) === null || _dataset$currentIndex === void 0 ? void 0 : _dataset$currentIndex.name) || null;
+    }
+
+    // For static tabs, get the child at the current index
+    var childrenArray = _react["default"].Children.toArray(children);
+    var activeChild = childrenArray[currentIndex];
+    return (activeChild === null || activeChild === void 0 || (_activeChild$props = activeChild.props) === null || _activeChild$props === void 0 ? void 0 : _activeChild$props.name) || null;
+  }, [type, dataset, children]);
+
+  // get the active tab widget from listener
+  var getActiveTab = _react["default"].useCallback(function () {
+    var _listener$Widgets;
+    var activeTabName = getActiveTabName();
+    return activeTabName ? listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[activeTabName] : null;
+  }, [getActiveTabName, listener]);
+  var updateListener = function updateListener() {
+    if (listener && listener.onChange) {
+      listener.onChange(name, {
+        prev: prev,
+        next: next,
+        activeTab: getActiveTab(),
+        panes: {
+          length: panesCount.current
+        },
+        goToTab: function goToTab(tabNumber) {
+          _goToTab(tabNumber);
+        }
+      });
+    }
+  };
+
+  // register the methods
+  (0, _react.useEffect)(function () {
+    updateListener();
+  }, [prev, next, _goToTab]); // Add dependencies to ensure fresh functions
+
+  // State handler functions
+  var getStateFromStorage = function getStateFromStorage() {
+    if (!statehandler || statehandler === "none") return null;
+    return (0, _statePersistance.getWidgetState)({
+      name: name,
+      type: "tabs",
+      storage: statehandler
+    });
+  };
+  var saveStateToStorage = function saveStateToStorage(index) {
+    if (!statehandler || statehandler === "none") return;
+    (0, _statePersistance.setWidgetState)({
+      name: name,
+      type: "tabs",
+      storage: statehandler
+    }, String(index));
+  };
+  (0, _react.useEffect)(function () {
+    var targetIndex = defaultpaneindex || 0;
+
+    // Try to restore from state handler first
+    var savedState = getStateFromStorage();
+    if (savedState) {
+      targetIndex = savedState;
+    } else {
+      // Convert defaultpaneindex to number if it's a string
+      if (defaultpaneindex !== undefined) {
+        var parsedIndex = parseInt(defaultpaneindex.toString(), 10);
+        targetIndex = isNaN(parsedIndex) ? 0 : parsedIndex;
+      }
+    }
+    setSelectedIndex(targetIndex);
+    currentSelectedIndex.current = targetIndex;
+    // Don't set prevSelectedIndex here as it should remain null for initial state
+  }, [defaultpaneindex, statehandler, name]);
+
+  // ============================================================================
+  // Rendering Helpers
+  // ============================================================================
+
+  var renderTabHeader = _react["default"].useCallback(function (item, index) {
+    return __jsx(_tabs.Tabs.Tab, (0, _extends2["default"])({}, item, {
+      title: item.title || item.name || "Tab ".concat(index + 1),
+      name: item.name || "Tab ".concat(index + 1),
+      key: index,
+      value: index,
+      id: "tab-".concat(index),
+      "aria-controls": "tabpanel-".concat(index),
+      disabled: item === null || item === void 0 ? void 0 : item.disabled,
+      className: (0, _clsx["default"])("tab-header", item.className, {
+        active: selectedIndex === index,
+        disabled: item === null || item === void 0 ? void 0 : item.disabled
+      }),
+      hidden: item.show === false,
+      role: "tab",
+      "aria-selected": selectedIndex === index,
+      tabIndex: selectedIndex === index ? 0 : -1,
+      render: function render(prop) {
+        return __jsx("li", prop, __jsx("div", {
+          style: {
+            cursor: item.disabled ? "not-allowed" : "pointer",
+            gap: "var(--wm-anchor-gap)"
+          },
+          className: "tab-heading",
+          "icon-position": iconposition || "left",
+          title: item.title || item.name || "Tab ".concat(index + 1),
+          "aria-selected": selectedIndex === index,
+          "aria-disabled": item.disabled,
+          "aria-hidden": item.show === false,
+          "aria-controls": "tabpanel-".concat(index)
+        }, item.paneicon && __jsx("i", {
+          className: "app-icon ".concat(item.paneicon)
+        }), __jsx(_Typography["default"], {
+          variant: "body2",
+          component: "span"
+        }, item.title || item.name || "Tab ".concat(index + 1)), item.badgevalue && __jsx(_Typography["default"], {
+          variant: "body2",
+          component: "span",
+          className: "label label-".concat(item.badgetype || "default")
+        }, item.badgevalue)));
+      }
+    }));
+  }, [selectedIndex, iconposition]);
+  var renderDynamicTabs = _react["default"].useCallback(function () {
+    if (!(dataset !== null && dataset !== void 0 && dataset.length)) return null;
+    var headers = [];
+    var tabIndex = 0;
+    var addTabHeader = function addTabHeader(itemProps) {
+      headers.push(__jsx(_react["default"].Fragment, {
+        key: tabIndex
+      }, renderTabHeader(itemProps, tabIndex)));
+      tabIndex++;
+    };
+    dataset.forEach(function (item, index) {
+      if (render) {
+        var _rendered$props;
+        var rendered = render(item, index, dataset);
+        var _children = rendered === null || rendered === void 0 || (_rendered$props = rendered.props) === null || _rendered$props === void 0 ? void 0 : _rendered$props.children;
+        if ((0, _isArray["default"])(_children)) {
+          _children.filter(isTabPaneComponent).forEach(function (child) {
+            return addTabHeader(child.props);
+          });
+        } else if (_children !== null && _children !== void 0 && _children.props) {
+          addTabHeader(_children.props);
+        }
+      } else {
+        addTabHeader(item);
+      }
+    });
+    panesCount.current = tabIndex;
+    return headers;
+  }, [dataset, render, renderTabHeader]);
+  var renderStaticTabs = _react["default"].useCallback(function () {
+    panesCount.current = _react["default"].Children.count(children);
+    return _react["default"].Children.map(children, function (child, index) {
+      if (!child) return null;
+      return __jsx(_react["default"].Fragment, {
+        key: index
+      }, renderTabHeader(child.props, index));
+    });
+  }, [children, renderTabHeader]);
+  var renderTabs = _react["default"].useMemo(function () {
+    return type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0 ? renderDynamicTabs() : renderStaticTabs();
+  }, [type, dataset, renderDynamicTabs, renderStaticTabs]);
+
+  // for vertical tabs, we need to set the flex direction to row
+  var orientation = tabsposition === "left" || tabsposition === "right" ? "vertical" : "horizontal";
+
+  // Get the proper flex direction based on tab position
+  var getFlexDirection = function getFlexDirection() {
+    switch (tabsposition) {
+      case "left":
+        return "row";
+      case "right":
+        return "row-reverse";
+      case "bottom":
+        return "column-reverse";
+      case "top":
+      default:
+        return "column";
+    }
+  };
+  var renderTabPanels = function renderTabPanels() {
+    if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0) {
+      return dataset === null || dataset === void 0 ? void 0 : dataset.map(function (item, index) {
+        return __jsx(_react["default"].Fragment, {
+          key: index
+        }, render ? render(item, index, dataset) : __jsx(_tabPane["default"], (0, _extends2["default"])({}, item, {
+          key: index,
+          value: selectedIndex,
+          listener: listener // Pass the updated listener context
+          ,
+          className: (0, _clsx["default"])("tab-pane", {
+            active: selectedIndex === index,
+            disabled: item.disabled,
+            hidden: item.show === false
+          })
+        })));
+      });
+    }
+    return children;
+  };
+  if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) <= 0) {
+    return __jsx("div", null, nodatamessage);
+  }
+  return __jsx(TabsContext.Provider, {
+    value: {
+      selectedIndex: selectedIndex,
+      setSelectedIndex: setSelectedIndex
+    }
+  }, __jsx(_tabs.Tabs.Root, {
+    style: _objectSpread(_objectSpread({}, styles), {}, {
+      display: "flex",
+      flexDirection: getFlexDirection()
+    }),
+    value: selectedIndex,
+    onValueChange: function onValueChange(value) {
+      var newIndex = value;
+      var oldIndex = currentSelectedIndex.current;
+
+      // Update refs and state
+      prevSelectedIndex.current = oldIndex;
+      currentSelectedIndex.current = newIndex;
+      setSelectedIndex(newIndex);
+      saveStateToStorage(newIndex);
+      onChange === null || onChange === void 0 || onChange(null, props, newIndex, oldIndex);
+
+      // Notify listener about tab change
+      updateListener();
+    },
+    orientation: orientation,
+    className: (0, _clsx["default"])("app-tabs clearfix", className, {
+      vertical: orientation === "vertical",
+      justified: justified
+    })
+  }, __jsx(_tabs.Tabs.List, {
+    className: (0, _clsx["default"])(DEFAULT_CLASS, {
+      "nav-stacked": orientation === "vertical",
+      "nav-justified": justified
+    }),
+    role: "tablist",
+    render: function render(props, state) {
+      return __jsx("ul", props, renderTabs);
+    }
+  }), __jsx("div", {
+    className: "tab-content",
+    style: {
+      flex: orientation === "vertical" ? 1 : undefined,
+      minWidth: orientation === "vertical" ? 0 : undefined
+    }
+  }, renderTabPanels())));
+}, function (prev, next) {
+  var keys = ["dataset", "defaultpaneindex", "justified", "tabsposition", "nodatamessage", "statehandler", "autotabactivation", "transition", "type", "iconposition", "render", "selectedindex", "children"];
+  return keys.every(function (key) {
+    return (0, _isEqual["default"])(prev[key], next[key]);
+  });
+});
+WmTabs.displayName = "WmTabs";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmTabs);

package/components/container/tabs/props.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = void 0;
+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.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmTabpane = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx2 = _interopRequireDefault(require("clsx"));
+var _tabs = require("@base-ui-components/react/tabs");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _ = require("..");
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var WmTabpane = exports.WmTabpane = function WmTabpane(props) {
+  var _clsx;
+  var className = props.className,
+    disabled = props.disabled,
+    renderPartial = props.renderPartial,
+    name = props.name,
+    index = props.index;
+  var _useTabsContext = (0, _.useTabsContext)(),
+    selectedIndex = _useTabsContext.selectedIndex;
+  return __jsx(_tabs.Tabs.Panel, {
+    value: index,
+    className: (0, _clsx2["default"])((_clsx = {
+      disabled: disabled
+    }, (0, _defineProperty2["default"])(_clsx, className, !!className), (0, _defineProperty2["default"])(_clsx, "active", selectedIndex === index), _clsx)),
+    role: "tabpanel",
+    style: _objectSpread({
+      width: "100%"
+    }, props === null || props === void 0 ? void 0 : props.styles),
+    "data-pane-name": name
+  }, __jsx("div", {
+    className: "tab-body",
+    "data-widget-id": props["data-widget-id"]
+  }, renderPartial ? renderPartial(props, props.onLoad) : props.children));
+};
+WmTabpane.displayName = "WmTabpane";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmTabpane);

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

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

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.js

@@ -0,0 +1,100 @@
+"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");
+  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,
+      completed: isCompleted,
+      disabled: step.disabled
+    }, 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"
+  }, __jsx(_material.Box, {
+    component: "span",
+    className: "step-title"
+  }, step.subtitle)), children);
+});
+CustomStepLabel.displayName = "CustomStepLabel";

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

@@ -0,0 +1,89 @@
+"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;
+  }
+  return __jsx(_material.Step, (0, _extends2["default"])({
+    key: step.name
+  }, stepProps, {
+    className: (0, _clsx["default"])(STEP_CLASS, current ? "current" : step.done || step.isDone ? "active" : "disabled")
+  }, stepProps), nonLinear || step.done || step.isDone ? __jsx(_material.Box, {
+    component: "a",
+    onClick: function onClick() {
+      return onStepClick(index);
+    },
+    className: (0, _clsx["default"])({
+      current: current,
+      active: step.done || step.isDone,
+      disabled: !current && !(step.done || step.isDone)
+    }),
+    "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
+  }, __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(_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";