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

package/components/container/tabs/index.js

@@ -0,0 +1,556 @@
+"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"] = exports.WmTabs = 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-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _tabPane = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/container/tabs/tab-pane"));
+var _props = require("./props");
+var _statePersistance = require("@wavemaker-ai/react-runtime/utils/state-persistance");
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _utils = require("./utils");
+var _pendingTabNavigationIntent = require("@wavemaker-ai/react-runtime/utils/pending-tab-navigation-intent");
+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";
+var PANE_HEADER_PROP_KEYS = ["name", "title", "disabled", "show", "paneicon", "badgevalue", "badgetype", "className", "onHeaderclick", "onHeaderClick"];
+var getPaneHeaderProps = function getPaneHeaderProps(props) {
+  return {
+    name: props === null || props === void 0 ? void 0 : props.name,
+    title: props === null || props === void 0 ? void 0 : props.title,
+    disabled: props === null || props === void 0 ? void 0 : props.disabled,
+    show: props === null || props === void 0 ? void 0 : props.show,
+    paneicon: props === null || props === void 0 ? void 0 : props.paneicon,
+    badgevalue: props === null || props === void 0 ? void 0 : props.badgevalue,
+    badgetype: props === null || props === void 0 ? void 0 : props.badgetype,
+    className: props === null || props === void 0 ? void 0 : props.className,
+    onHeaderclick: props === null || props === void 0 ? void 0 : props.onHeaderclick,
+    onHeaderClick: props === null || props === void 0 ? void 0 : props.onHeaderClick
+  };
+};
+var arePaneHeaderPropsEqual = function arePaneHeaderPropsEqual() {
+  var prev = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var next = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return PANE_HEADER_PROP_KEYS.every(function (key) {
+    return Object.is(prev[key], next[key]);
+  });
+};
+
+// 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() {},
+  tabsContainerName: undefined,
+  updatePaneHeader: function updatePaneHeader() {}
+});
+var useTabsContext = exports.useTabsContext = function useTabsContext() {
+  return (0, _react.useContext)(TabsContext);
+};
+var WmTabs = exports.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;
+
+  // Pending tab from NavigateTo (cross-page); mirrored from Redux via store middleware so this works without Provider
+  var initialPendingTabRef = (0, _react.useRef)((0, _pendingTabNavigationIntent.getPendingTabNavigationIntent)());
+  var Widgets = listener === null || listener === void 0 ? void 0 : listener.Widgets;
+  var panesCount = (0, _react.useRef)(0);
+  var prevSelectedIndex = (0, _react.useRef)(null);
+
+  // Initialize selectedIndex to the pending tab index if a navigation target is set,
+  // so the first render shows the correct tab without flashing through tab 0.
+  var _useState = (0, _react.useState)(function () {
+      var pendingTab = initialPendingTabRef.current;
+      if (pendingTab && children) {
+        var visibleChildren = (0, _utils.filterVisibleChildren)(children, new Set());
+        var matchIndex = visibleChildren.findIndex(function (c) {
+          var _c$props;
+          return (c === null || c === void 0 || (_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.name) === pendingTab;
+        });
+        if (matchIndex !== -1) return matchIndex;
+      }
+      return defaultpaneindex || 0;
+    }),
+    selectedIndex = _useState[0],
+    setSelectedIndex = _useState[1];
+  var currentSelectedIndex = (0, _react.useRef)(selectedIndex);
+  var _useState2 = (0, _react.useState)(new Set()),
+    hiddenTabNames = _useState2[0],
+    setHiddenTabNames = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    paneHeaderOverrides = _useState3[0],
+    setPaneHeaderOverrides = _useState3[1];
+  // Track which tab indices have been rendered at least once (for dynamic tabs)
+  var _useState4 = (0, _react.useState)(new Set([selectedIndex])),
+    renderedTabIndices = _useState4[0],
+    setRenderedTabIndices = _useState4[1];
+  var updatePaneHeader = (0, _react.useCallback)(function (paneName, headerProps) {
+    if (!paneName) return;
+    var nextHeaderProps = getPaneHeaderProps(headerProps);
+    setPaneHeaderOverrides(function (prev) {
+      var prevHeaderProps = prev[paneName];
+      if (arePaneHeaderPropsEqual(prevHeaderProps, nextHeaderProps)) {
+        return prev;
+      }
+      return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2["default"])({}, paneName, nextHeaderProps));
+    });
+  }, []);
+
+  // Keep currentSelectedIndex ref in sync with state
+  (0, _react.useEffect)(function () {
+    currentSelectedIndex.current = selectedIndex;
+  }, [selectedIndex]);
+
+  // Track which tabs have been rendered (for dynamic tabs to maintain state)
+  (0, _react.useEffect)(function () {
+    if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0) {
+      setRenderedTabIndices(function (prev) {
+        var newSet = new Set(prev);
+        if (selectedIndex >= 0 && selectedIndex < dataset.length) {
+          newSet.add(selectedIndex);
+        }
+        return newSet;
+      });
+    }
+  }, [selectedIndex, type, dataset]);
+
+  // 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 active tab name for a given index
+  var getActiveTabNameByIndex = _react["default"].useCallback(function (currentIndex) {
+    var _activeChild$props;
+    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, compute from visible children
+    var visibleChildren = (0, _utils.filterVisibleChildren)(children, hiddenTabNames);
+    var activeChild = visibleChildren[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, hiddenTabNames]);
+
+  // get the active tab widget from listener
+  var getActiveTab = _react["default"].useCallback(function () {
+    var _listener$Widgets;
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentSelectedIndex.current;
+    var activeTabName = getActiveTabNameByIndex(index);
+    return activeTabName ? listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[activeTabName] : null;
+  }, [getActiveTabNameByIndex, listener]);
+  var updateListener = function updateListener() {
+    var activeIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentSelectedIndex.current;
+    if (listener && listener.onChange) {
+      listener.onChange(name, {
+        prev: prev,
+        next: next,
+        activeTab: getActiveTab(activeIndex),
+        panes: {
+          length: panesCount.current
+        },
+        goToTab: function goToTab(tabNumber) {
+          _goToTab(tabNumber);
+        },
+        getActiveTabIndex: function getActiveTabIndex() {
+          return currentSelectedIndex.current;
+        },
+        removePane: function removePane(TabName) {
+          (0, _utils.handleRemovePane)({
+            type: type,
+            dataset: dataset,
+            children: children,
+            hiddenTabNames: hiddenTabNames,
+            TabName: TabName,
+            selectedIndex: selectedIndex,
+            currentSelectedIndex: currentSelectedIndex,
+            panesCountRef: panesCount,
+            setHiddenTabNames: setHiddenTabNames,
+            setSelectedIndex: setSelectedIndex,
+            saveStateToStorage: saveStateToStorage
+          });
+        }
+      });
+    }
+  };
+  var getLatestTabsWidget = function getLatestTabsWidget(activeIndex) {
+    var _listener$Widgets2;
+    var registeredTabsWidget = name ? listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name] : null;
+    return _objectSpread(_objectSpread({}, registeredTabsWidget || props), {}, {
+      activeTab: getActiveTab(activeIndex)
+    });
+  };
+
+  // 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 () {
+    // If a tab was targeted via navigation (NavigateTo action with tabName),
+    // honour that selection and skip the default/saved-state logic entirely.
+    var pendingTab = initialPendingTabRef.current;
+    if (pendingTab && children) {
+      var visibleChildren = (0, _utils.filterVisibleChildren)(children, new Set());
+      var matchIndex = visibleChildren.findIndex(function (c) {
+        var _c$props2;
+        return (c === null || c === void 0 || (_c$props2 = c.props) === null || _c$props2 === void 0 ? void 0 : _c$props2.name) === pendingTab;
+      });
+      if (matchIndex !== -1) {
+        setSelectedIndex(matchIndex);
+        currentSelectedIndex.current = matchIndex;
+        return;
+      }
+    }
+    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 handleTabHeaderClick = _react["default"].useCallback(function (e, item, index) {
+    if (item !== null && item !== void 0 && item.disabled) {
+      return;
+    }
+    if (item !== null && item !== void 0 && item.onHeaderclick) {
+      item.onHeaderclick(e, Widgets === null || Widgets === void 0 ? void 0 : Widgets[name], index);
+    }
+  }, [Widgets, name]);
+  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", {
+          className: (0, _clsx["default"])("tab-heading", "wm-tabs-heading", {
+            "wm-tabs-heading-disabled": item.disabled
+          }),
+          "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),
+          onClick: function onClick(e) {
+            return handleTabHeaderClick(e, item, 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, handleTabHeaderClick]);
+  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) {
+      var paneName = itemProps === null || itemProps === void 0 ? void 0 : itemProps.name;
+      var latestWidgetState = paneName ? (Widgets === null || Widgets === void 0 ? void 0 : Widgets[paneName]) || {} : {};
+      var headerOverrides = paneName ? paneHeaderOverrides[paneName] || {} : {};
+      var resolvedItemProps = _objectSpread(_objectSpread(_objectSpread({}, itemProps), latestWidgetState), headerOverrides);
+      headers.push(__jsx(_react["default"].Fragment, {
+        key: tabIndex
+      }, renderTabHeader(resolvedItemProps, 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, Widgets, paneHeaderOverrides]);
+  var renderStaticTabs = _react["default"].useCallback(function () {
+    // Consider only panes with show !== false and not hidden via internal state
+    var visibleChildren = (0, _utils.filterVisibleChildren)(children, hiddenTabNames);
+    panesCount.current = visibleChildren.length;
+    return visibleChildren.map(function (child, index) {
+      var _child$props;
+      if (!child) return null;
+      var paneName = child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.name;
+      var latestWidgetState = paneName ? (Widgets === null || Widgets === void 0 ? void 0 : Widgets[paneName]) || {} : {};
+      var headerOverrides = paneName ? paneHeaderOverrides[paneName] || {} : {};
+      var itemProps = _objectSpread(_objectSpread(_objectSpread({}, child.props), latestWidgetState), headerOverrides);
+      return __jsx(_react["default"].Fragment, {
+        key: index
+      }, renderTabHeader(itemProps, index));
+    });
+  }, [children, renderTabHeader, hiddenTabNames, Widgets, paneHeaderOverrides]);
+  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]);
+  var tabsContextValue = (0, _react.useMemo)(function () {
+    return {
+      selectedIndex: selectedIndex,
+      setSelectedIndex: setSelectedIndex,
+      tabsContainerName: name,
+      updatePaneHeader: updatePaneHeader
+    };
+  }, [selectedIndex, name, updatePaneHeader]);
+
+  // for vertical tabs, we need to set the flex direction to row
+  var orientation = tabsposition === "left" || tabsposition === "right" ? "vertical" : "horizontal";
+  var renderTabPanels = function renderTabPanels() {
+    if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) > 0) {
+      // Render all previously visited tabs, but hide inactive ones to maintain state
+      return Array.from(renderedTabIndices).filter(function (index) {
+        return index >= 0 && index < dataset.length;
+      }).map(function (index) {
+        var item = dataset[index];
+        var isActive = selectedIndex === index;
+        return __jsx(_react["default"].Fragment, {
+          key: index
+        }, render ? __jsx(_react["default"].Fragment, null, render(item, index, dataset, isActive)) : __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: isActive,
+            disabled: item.disabled,
+            hidden: item.show === false
+          }),
+          index: index
+        })));
+      });
+    }
+
+    // For static tabs, render only visible panes with corrected indices
+    // so they match the sequential header indices assigned by renderStaticTabs
+    var visibleChildren = (0, _utils.filterVisibleChildren)(children, hiddenTabNames);
+    return visibleChildren.map(function (child, idx) {
+      if (!(child !== null && child !== void 0 && child.props)) return child;
+      if (child.props.index === idx) return child;
+      return /*#__PURE__*/_react["default"].cloneElement(child, {
+        index: idx
+      });
+    });
+  };
+  if (type === "dynamic" && (dataset === null || dataset === void 0 ? void 0 : dataset.length) <= 0) {
+    return __jsx("div", null, nodatamessage);
+  }
+  //  moves tab list to end for right/bottom (appendNode), so content is first in DOM.
+  var contentFirst = tabsposition === "right" || tabsposition === "bottom";
+  return __jsx(TabsContext.Provider, {
+    value: tabsContextValue
+  }, __jsx(_tabs.Tabs.Root, {
+    style: styles,
+    name: name,
+    tabsposition: tabsposition,
+    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);
+
+      // Publish activeTab before external handlers read wm.Widgets[name].activeTab.
+      updateListener(newIndex);
+      onChange === null || onChange === void 0 || onChange(null, getLatestTabsWidget(newIndex), newIndex, oldIndex);
+    },
+    orientation: orientation,
+    className: (0, _clsx["default"])("app-tabs clearfix", className, {
+      vertical: orientation === "vertical",
+      justified: justified,
+      inverted: contentFirst
+    })
+  }, contentFirst ? __jsx(_react["default"].Fragment, null, __jsx("div", {
+    className: (0, _clsx["default"])("tab-content", "wm-tabs-content", {
+      "tab-stacked": orientation === "vertical",
+      "tab-justified": justified,
+      "wm-tabs-content-vertical": orientation === "vertical"
+    })
+  }, renderTabPanels()), __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(_react["default"].Fragment, null, __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: (0, _clsx["default"])("tab-content", "wm-tabs-content", {
+      "tab-stacked": orientation === "vertical",
+      "tab-justified": justified,
+      "wm-tabs-content-vertical": orientation === "vertical"
+    })
+  }, renderTabPanels()))));
+}, function (prev, next) {
+  var keys = ["dataset", "defaultpaneindex", "justified", "tabsposition", "nodatamessage", "statehandler", "autotabactivation", "transition", "type", "iconposition", "render", "selectedindex", "children"];
+  return keys.every(function (key) {
+    // Never deep-compare children; treat as referential bcz the children will have listener props attached cause infinite comparion.
+    if (key === "children") {
+      return prev[key] === next[key];
+    }
+    return (0, _isEqual["default"])(prev[key], next[key]);
+  });
+});
+WmTabs.displayName = "WmTabs";
+
+/**
+ * The WmTabs component displays tabbed content with support for static
+ * (children) and dynamic (dataset) modes with state persistence.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-tabs--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-tabs--docs)
+ *
+ * @param props - {@link WmTabsProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmTabs);

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

@@ -0,0 +1,104 @@
+import { ReactNode } from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+import { StateHandler } from "../props";
+/**
+ * Tab position/orientation.
+ */
+export type TabsPosition = "top" | "bottom" | "left" | "right";
+/**
+ * Icon position relative to tab label.
+ */
+export type TabIconPosition = "top" | "start" | "end" | "bottom" | "left";
+/**
+ * Transition effect when switching tabs.
+ */
+export type TabTransition = "none" | "slide" | "fade";
+export type PaneHeaderProps = {
+    name?: string;
+    title?: string;
+    disabled?: boolean;
+    show?: string | boolean;
+    paneicon?: string;
+    badgevalue?: string | number;
+    badgetype?: string;
+    className?: string;
+    onHeaderclick?: (...args: any[]) => void;
+    onHeaderClick?: (...args: any[]) => void;
+};
+/**
+ * Base props specific to the WmTabs component.
+ */
+export interface TabsPropsBase {
+    /**
+     * Data source for dynamic tabs. Each item renders a tab.
+     * @default []
+     */
+    dataset?: Record<string, unknown>[];
+    /**
+     * Index of the tab to show by default (0-based).
+     * @default 0
+     */
+    defaultpaneindex?: number;
+    /**
+     * Whether tabs are justified (equal width).
+     * @default false
+     */
+    justified?: boolean;
+    /**
+     * Tab list position.
+     * @default "top"
+     */
+    tabsposition?: TabsPosition;
+    /**
+     * Message shown when dataset is empty in dynamic mode.
+     * @default "No Data Found"
+     */
+    nodatamessage?: string;
+    /**
+     * Where to persist selected tab index.
+     * @default "none"
+     */
+    statehandler?: StateHandler;
+    /**
+     * Whether tab content activates on focus.
+     * @default true
+     */
+    autotabactivation?: boolean;
+    /**
+     * Transition effect when switching tabs.
+     * @default "none"
+     */
+    transition?: TabTransition;
+    /**
+     * Tabs type: static (children) or dynamic (dataset).
+     * @default "static"
+     */
+    type?: "static" | "dynamic";
+    /**
+     * Icon position relative to tab label.
+     * @default "left"
+     */
+    iconposition?: TabIconPosition;
+    /**
+     * Whether to enable scroll for many tabs.
+     * @default false
+     */
+    enablescroll?: boolean;
+    /**
+     * Render function for dynamic tabs. Receives item, index, dataset, and isActive.
+     */
+    render?: (item: Record<string, unknown>, index: number, dataset: Record<string, unknown>[], isActive?: boolean) => ReactNode;
+    /**
+     * Controlled selected tab index (optional).
+     */
+    selectedindex?: number;
+    /**
+     * Called when the active tab changes.
+     */
+    onChange?: (event: React.SyntheticEvent | null, props: WmTabsProps, newPaneIndex: number, oldPaneIndex: number) => void;
+}
+/**
+ * Combined props for the WmTabs component, including base WaveMaker props.
+ */
+export type WmTabsProps = Prettify<TabsPropsBase & BaseProps>;
+export declare const DEFAULT_PROPS: Partial<WmTabsProps>;