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

package/components/container/tabs/index.js

@@ -1,556 +1,547 @@
-"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 __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 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]);
-  });
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import React, {
+  createContext,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import clsx from "clsx";
+import isEqual from "lodash-es/isEqual";
+import { Tabs } from "@base-ui-components/react/tabs";
+import Typography from "@mui/material/Typography";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import WmTabPane from "./tab-pane";
+import { DEFAULT_PROPS } from "./props";
+import {
+  getWidgetState,
+  setWidgetState
+} from "../../../utils/state-persistance";
+import isArray from "lodash-es/isArray";
+import { filterVisibleChildren, handleRemovePane } from "./utils";
+import { getPendingTabNavigationIntent } from "../../../utils/pending-tab-navigation-intent";
+const DEFAULT_CLASS = "nav nav-tabs";
+const PANE_HEADER_PROP_KEYS = [
+  "name",
+  "title",
+  "disabled",
+  "show",
+  "paneicon",
+  "badgevalue",
+  "badgetype",
+  "className",
+  "onHeaderclick",
+  "onHeaderClick"
+];
+const getPaneHeaderProps = (props) => ({
+  name: props == null ? void 0 : props.name,
+  title: props == null ? void 0 : props.title,
+  disabled: props == null ? void 0 : props.disabled,
+  show: props == null ? void 0 : props.show,
+  paneicon: props == null ? void 0 : props.paneicon,
+  badgevalue: props == null ? void 0 : props.badgevalue,
+  badgetype: props == null ? void 0 : props.badgetype,
+  className: props == null ? void 0 : props.className,
+  onHeaderclick: props == null ? void 0 : props.onHeaderclick,
+  onHeaderClick: props == null ? void 0 : props.onHeaderClick
+});
+const arePaneHeaderPropsEqual = (prev = {}, next = {}) => {
+  return PANE_HEADER_PROP_KEYS.every((key) => 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;
+const isTabPaneComponent = (child) => {
+  var _a, _b;
+  const displayName = (_b = (_a = child == null ? void 0 : child.type) == null ? void 0 : _a.type) == null ? void 0 : _b.displayName;
   return displayName && (displayName.includes("WmTabpane") || displayName.includes("WmTabPane"));
 };
-var TabsContext = /*#__PURE__*/(0, _react.createContext)({
+const TabsContext = createContext({
   selectedIndex: 0,
-  setSelectedIndex: function setSelectedIndex() {},
-  tabsContainerName: undefined,
-  updatePaneHeader: function updatePaneHeader() {}
+  setSelectedIndex: () => {
+  },
+  tabsContainerName: void 0,
+  updatePaneHeader: () => {
+  }
 });
-var useTabsContext = exports.useTabsContext = function useTabsContext() {
-  return (0, _react.useContext)(TabsContext);
+const useTabsContext = () => {
+  return 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;
+const WmTabs = memo(
+  (Props) => {
+    const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), Props);
+    const {
+      defaultpaneindex,
+      statehandler,
+      name,
+      listener,
+      type,
+      dataset,
+      children,
+      render,
+      iconposition,
+      tabsposition = "top",
+      justified,
+      nodatamessage,
+      styles,
+      className,
+      onChange
+    } = props;
+    const initialPendingTabRef = useRef(getPendingTabNavigationIntent());
+    const Widgets = listener == null ? void 0 : listener.Widgets;
+    const panesCount = useRef(0);
+    const prevSelectedIndex = useRef(null);
+    const [selectedIndex, setSelectedIndex] = useState(() => {
+      const 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;
+        const visibleChildren = filterVisibleChildren(children, /* @__PURE__ */ new Set());
+        const matchIndex = visibleChildren.findIndex((c) => {
+          var _a;
+          return ((_a = c == null ? void 0 : c.props) == null ? void 0 : _a.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);
+    const currentSelectedIndex = useRef(selectedIndex);
+    const [hiddenTabNames, setHiddenTabNames] = useState(/* @__PURE__ */ new Set());
+    const [paneHeaderOverrides, setPaneHeaderOverrides] = useState(
+      {}
+    );
+    const [renderedTabIndices, setRenderedTabIndices] = useState(
+      /* @__PURE__ */ new Set([selectedIndex])
+    );
+    const updatePaneHeader = useCallback((paneName, headerProps) => {
+      if (!paneName) return;
+      const nextHeaderProps = getPaneHeaderProps(headerProps);
+      setPaneHeaderOverrides((prev2) => {
+        const prevHeaderProps = prev2[paneName];
+        if (arePaneHeaderPropsEqual(prevHeaderProps, nextHeaderProps)) {
+          return prev2;
         }
-        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;
+        return __spreadProps(__spreadValues({}, prev2), {
+          [paneName]: nextHeaderProps
+        });
       });
-      if (matchIndex !== -1) {
-        setSelectedIndex(matchIndex);
-        currentSelectedIndex.current = matchIndex;
-        return;
+    }, []);
+    useEffect(() => {
+      currentSelectedIndex.current = selectedIndex;
+    }, [selectedIndex]);
+    useEffect(() => {
+      if (type === "dynamic" && (dataset == null ? void 0 : dataset.length) > 0) {
+        setRenderedTabIndices((prev2) => {
+          const newSet = new Set(prev2);
+          if (selectedIndex >= 0 && selectedIndex < dataset.length) {
+            newSet.add(selectedIndex);
+          }
+          return newSet;
+        });
       }
-    }
-    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;
+    }, [selectedIndex, type, dataset]);
+    const changeTab = (newIndex) => {
+      if (newIndex >= 0 && newIndex < panesCount.current && newIndex !== currentSelectedIndex.current) {
+        prevSelectedIndex.current = currentSelectedIndex.current;
+        setSelectedIndex(newIndex);
+        saveStateToStorage(newIndex);
+        return true;
       }
-    }
-    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);
+      return false;
+    };
+    const prev = React.useCallback(() => {
+      const currentIndex = currentSelectedIndex.current;
+      const targetIndex = currentIndex - 1;
+      if (targetIndex >= 0) {
+        changeTab(targetIndex);
+      } else {
+        changeTab(panesCount.current - 1);
+      }
+    }, []);
+    const next = React.useCallback(() => {
+      const currentIndex = currentSelectedIndex.current;
+      const targetIndex = currentIndex + 1;
+      if (targetIndex < panesCount.current) {
+        changeTab(targetIndex);
+      } else {
+        changeTab(0);
+      }
+    }, []);
+    const goToTab = React.useCallback((tabNumber) => {
+      const index = tabNumber - 1;
+      if (tabNumber >= 1 && tabNumber <= panesCount.current && index !== currentSelectedIndex.current) {
+        changeTab(index);
+      }
+    }, []);
+    const getActiveTabNameByIndex = React.useCallback(
+      (currentIndex) => {
+        var _a, _b;
+        if (type === "dynamic" && (dataset == null ? void 0 : dataset.length) > 0) {
+          return ((_a = dataset[currentIndex]) == null ? void 0 : _a.name) || null;
+        }
+        const visibleChildren = filterVisibleChildren(children, hiddenTabNames);
+        const activeChild = visibleChildren[currentIndex];
+        return ((_b = activeChild == null ? void 0 : activeChild.props) == null ? void 0 : _b.name) || null;
+      },
+      [type, dataset, children, hiddenTabNames]
+    );
+    const getActiveTab = React.useCallback(
+      (index = currentSelectedIndex.current) => {
+        var _a;
+        const activeTabName = getActiveTabNameByIndex(index);
+        return activeTabName ? (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[activeTabName] : null;
+      },
+      [getActiveTabNameByIndex, listener]
+    );
+    const updateListener = (activeIndex = currentSelectedIndex.current) => {
+      if (listener && listener.onChange) {
+        listener.onChange(name, {
+          prev,
+          next,
+          activeTab: getActiveTab(activeIndex),
+          panes: { length: panesCount.current },
+          goToTab: (tabNumber) => {
+            goToTab(tabNumber);
+          },
+          getActiveTabIndex: () => {
+            return currentSelectedIndex.current;
+          },
+          removePane: (TabName) => {
+            handleRemovePane({
+              type,
+              dataset,
+              children,
+              hiddenTabNames,
+              TabName,
+              selectedIndex,
+              currentSelectedIndex,
+              panesCountRef: panesCount,
+              setHiddenTabNames,
+              setSelectedIndex,
+              saveStateToStorage
+            });
           }
-        }, 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);
+    const getLatestTabsWidget = (activeIndex) => {
+      var _a;
+      const registeredTabsWidget = name ? (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name] : null;
+      return __spreadProps(__spreadValues({}, registeredTabsWidget || props), {
+        activeTab: getActiveTab(activeIndex)
+      });
+    };
+    useEffect(() => {
+      updateListener();
+    }, [prev, next, goToTab]);
+    const getStateFromStorage = () => {
+      if (!statehandler || statehandler === "none") return null;
+      return getWidgetState({ name, type: "tabs", storage: statehandler });
+    };
+    const saveStateToStorage = (index) => {
+      if (!statehandler || statehandler === "none") return;
+      setWidgetState({ name, type: "tabs", storage: statehandler }, String(index));
+    };
+    useEffect(() => {
+      const pendingTab = initialPendingTabRef.current;
+      if (pendingTab && children) {
+        const visibleChildren = filterVisibleChildren(children, /* @__PURE__ */ new Set());
+        const matchIndex = visibleChildren.findIndex((c) => {
+          var _a;
+          return ((_a = c == null ? void 0 : c.props) == null ? void 0 : _a.name) === pendingTab;
+        });
+        if (matchIndex !== -1) {
+          setSelectedIndex(matchIndex);
+          currentSelectedIndex.current = matchIndex;
+          return;
         }
+      }
+      let targetIndex = defaultpaneindex || 0;
+      const savedState = getStateFromStorage();
+      if (savedState) {
+        targetIndex = savedState;
       } else {
-        addTabHeader(item);
+        if (defaultpaneindex !== void 0) {
+          const parsedIndex = parseInt(defaultpaneindex.toString(), 10);
+          targetIndex = isNaN(parsedIndex) ? 0 : parsedIndex;
+        }
       }
-    });
-    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, {
+      setSelectedIndex(targetIndex);
+      currentSelectedIndex.current = targetIndex;
+    }, [defaultpaneindex, statehandler, name]);
+    const handleTabHeaderClick = React.useCallback(
+      (e, item, index) => {
+        if (item == null ? void 0 : item.disabled) {
+          return;
+        }
+        if (item == null ? void 0 : item.onHeaderclick) {
+          item.onHeaderclick(e, Widgets == null ? void 0 : Widgets[name], index);
+        }
+      },
+      [Widgets, name]
+    );
+    const renderTabHeader = React.useCallback(
+      (item, index) => /* @__PURE__ */ createElement(
+        Tabs.Tab,
+        __spreadProps(__spreadValues({}, item), {
+          title: item.title || item.name || `Tab ${index + 1}`,
+          name: item.name || `Tab ${index + 1}`,
           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
+          value: index,
+          id: `tab-${index}`,
+          "aria-controls": `tabpanel-${index}`,
+          disabled: item == null ? void 0 : item.disabled,
+          className: clsx("tab-header", item.className, {
+            active: selectedIndex === index,
+            disabled: item == null ? void 0 : item.disabled
           }),
-          index: index
-        })));
+          hidden: item.show === false,
+          role: "tab",
+          "aria-selected": selectedIndex === index,
+          tabIndex: selectedIndex === index ? 0 : -1,
+          render: (prop) => /* @__PURE__ */ jsx("li", __spreadProps(__spreadValues({}, prop), { children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx("tab-heading", "wm-tabs-heading", {
+                "wm-tabs-heading-disabled": item.disabled
+              }),
+              "icon-position": iconposition || "left",
+              title: item.title || item.name || `Tab ${index + 1}`,
+              "aria-selected": selectedIndex === index,
+              "aria-disabled": item.disabled,
+              "aria-hidden": item.show === false,
+              "aria-controls": `tabpanel-${index}`,
+              onClick: (e) => handleTabHeaderClick(e, item, index),
+              children: [
+                item.paneicon && /* @__PURE__ */ jsx("i", { className: `app-icon ${item.paneicon}` }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "span", children: item.title || item.name || `Tab ${index + 1}` }),
+                item.badgevalue && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body2",
+                    component: "span",
+                    className: `label label-${item.badgetype || "default"}`,
+                    children: item.badgevalue
+                  }
+                )
+              ]
+            }
+          ) }))
+        })
+      ),
+      [selectedIndex, iconposition, handleTabHeaderClick]
+    );
+    const renderDynamicTabs = React.useCallback(() => {
+      if (!(dataset == null ? void 0 : dataset.length)) return null;
+      const headers = [];
+      let tabIndex = 0;
+      const addTabHeader = (itemProps) => {
+        const paneName = itemProps == null ? void 0 : itemProps.name;
+        const latestWidgetState = paneName ? (Widgets == null ? void 0 : Widgets[paneName]) || {} : {};
+        const headerOverrides = paneName ? paneHeaderOverrides[paneName] || {} : {};
+        const resolvedItemProps = __spreadValues(__spreadValues(__spreadValues({}, itemProps), latestWidgetState), headerOverrides);
+        headers.push(
+          /* @__PURE__ */ jsx(React.Fragment, { children: renderTabHeader(resolvedItemProps, tabIndex) }, tabIndex)
+        );
+        tabIndex++;
+      };
+      dataset.forEach((item, index) => {
+        var _a;
+        if (render) {
+          const rendered = render(item, index, dataset);
+          const children2 = (_a = rendered == null ? void 0 : rendered.props) == null ? void 0 : _a.children;
+          if (isArray(children2)) {
+            children2.filter(isTabPaneComponent).forEach((child) => addTabHeader(child.props));
+          } else if (children2 == null ? void 0 : children2.props) {
+            addTabHeader(children2.props);
+          }
+        } else {
+          addTabHeader(item);
+        }
       });
-    }
-
-    // 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
+      panesCount.current = tabIndex;
+      return headers;
+    }, [dataset, render, renderTabHeader, Widgets, paneHeaderOverrides]);
+    const renderStaticTabs = React.useCallback(() => {
+      const visibleChildren = filterVisibleChildren(children, hiddenTabNames);
+      panesCount.current = visibleChildren.length;
+      return visibleChildren.map((child, index) => {
+        var _a;
+        if (!child) return null;
+        const paneName = (_a = child == null ? void 0 : child.props) == null ? void 0 : _a.name;
+        const latestWidgetState = paneName ? (Widgets == null ? void 0 : Widgets[paneName]) || {} : {};
+        const headerOverrides = paneName ? paneHeaderOverrides[paneName] || {} : {};
+        const itemProps = __spreadValues(__spreadValues(__spreadValues({}, child.props), latestWidgetState), headerOverrides);
+        return /* @__PURE__ */ jsx(React.Fragment, { children: renderTabHeader(itemProps, index) }, index);
       });
+    }, [children, renderTabHeader, hiddenTabNames, Widgets, paneHeaderOverrides]);
+    const renderTabs = React.useMemo(() => {
+      return type === "dynamic" && (dataset == null ? void 0 : dataset.length) > 0 ? renderDynamicTabs() : renderStaticTabs();
+    }, [type, dataset, renderDynamicTabs, renderStaticTabs]);
+    const tabsContextValue = useMemo(
+      () => ({
+        selectedIndex,
+        setSelectedIndex,
+        tabsContainerName: name,
+        updatePaneHeader
+      }),
+      [selectedIndex, name, updatePaneHeader]
+    );
+    const orientation = tabsposition === "left" || tabsposition === "right" ? "vertical" : "horizontal";
+    const renderTabPanels = () => {
+      if (type === "dynamic" && (dataset == null ? void 0 : dataset.length) > 0) {
+        return Array.from(renderedTabIndices).filter((index) => index >= 0 && index < dataset.length).map((index) => {
+          const item = dataset[index];
+          const isActive = selectedIndex === index;
+          return /* @__PURE__ */ jsx(React.Fragment, { children: render ? /* @__PURE__ */ jsx(Fragment, { children: render(item, index, dataset, isActive) }) : /* @__PURE__ */ createElement(
+            WmTabPane,
+            __spreadProps(__spreadValues({}, item), {
+              key: index,
+              value: selectedIndex,
+              listener,
+              className: clsx("tab-pane", {
+                active: isActive,
+                disabled: item.disabled,
+                hidden: item.show === false
+              }),
+              index
+            })
+          ) }, index);
+        });
+      }
+      const visibleChildren = filterVisibleChildren(children, hiddenTabNames);
+      return visibleChildren.map((child, idx) => {
+        if (!(child == null ? void 0 : child.props)) return child;
+        if (child.props.index === idx) return child;
+        return React.cloneElement(child, { index: idx });
+      });
+    };
+    if (type === "dynamic" && (dataset == null ? void 0 : dataset.length) <= 0) {
+      return /* @__PURE__ */ jsx("div", { children: nodatamessage });
+    }
+    const contentFirst = tabsposition === "right" || tabsposition === "bottom";
+    return /* @__PURE__ */ jsx(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ jsx(
+      Tabs.Root,
+      __spreadProps(__spreadValues({
+        style: styles
+      }, { name, tabsposition }), {
+        value: selectedIndex,
+        onValueChange: (value) => {
+          const newIndex = value;
+          const oldIndex = currentSelectedIndex.current;
+          prevSelectedIndex.current = oldIndex;
+          currentSelectedIndex.current = newIndex;
+          setSelectedIndex(newIndex);
+          saveStateToStorage(newIndex);
+          updateListener(newIndex);
+          onChange == null ? void 0 : onChange(null, getLatestTabsWidget(newIndex), newIndex, oldIndex);
+        },
+        orientation,
+        className: clsx("app-tabs clearfix", className, {
+          vertical: orientation === "vertical",
+          justified,
+          inverted: contentFirst
+        }),
+        children: contentFirst ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx("tab-content", "wm-tabs-content", {
+                "tab-stacked": orientation === "vertical",
+                "tab-justified": justified,
+                "wm-tabs-content-vertical": orientation === "vertical"
+              }),
+              children: renderTabPanels()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tabs.List,
+            {
+              className: clsx(DEFAULT_CLASS, {
+                "nav-stacked": orientation === "vertical",
+                "nav-justified": justified
+              }),
+              role: "tablist",
+              render: (props2, state) => {
+                return /* @__PURE__ */ jsx("ul", __spreadProps(__spreadValues({}, props2), { children: renderTabs }));
+              }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Tabs.List,
+            {
+              className: clsx(DEFAULT_CLASS, {
+                "nav-stacked": orientation === "vertical",
+                "nav-justified": justified
+              }),
+              role: "tablist",
+              render: (props2, state) => {
+                return /* @__PURE__ */ jsx("ul", __spreadProps(__spreadValues({}, props2), { children: renderTabs }));
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx("tab-content", "wm-tabs-content", {
+                "tab-stacked": orientation === "vertical",
+                "tab-justified": justified,
+                "wm-tabs-content-vertical": orientation === "vertical"
+              }),
+              children: renderTabPanels()
+            }
+          )
+        ] })
+      })
+    ) });
+  },
+  (prev, next) => {
+    const keys = [
+      "dataset",
+      "defaultpaneindex",
+      "justified",
+      "tabsposition",
+      "nodatamessage",
+      "statehandler",
+      "autotabactivation",
+      "transition",
+      "type",
+      "iconposition",
+      "render",
+      "selectedindex",
+      "children"
+    ];
+    return keys.every((key) => {
+      if (key === "children") {
+        return prev[key] === next[key];
+      }
+      return isEqual(prev[key], next[key]);
     });
-  };
-  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);
+var tabs_default = withBaseWrapper(WmTabs);
+export {
+  WmTabs,
+  tabs_default as default,
+  useTabsContext
+};