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

package/components/container/tabs/index.js

@@ -0,0 +1,569 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import React, {
+  createContext,
+  memo,
+  Suspense,
+  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 { WmAppIcon } from "../../common/WmAppIcon";
+import WmTabPane from "./tab-pane";
+import { DEFAULT_PROPS } from "./props";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY
+} from "../../common/wm-skeleton";
+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",
+  "paneiconurl",
+  "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,
+  paneiconurl: props == null ? void 0 : props.paneiconurl,
+  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]));
+};
+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"));
+};
+const TabsContext = createContext({
+  selectedIndex: 0,
+  setSelectedIndex: () => {
+  },
+  tabsContainerName: void 0,
+  updatePaneHeader: () => {
+  }
+});
+const useTabsContext = () => {
+  return useContext(TabsContext);
+};
+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) {
+        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;
+    });
+    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 __spreadProps(__spreadValues({}, prev2), {
+          [paneName]: nextHeaderProps
+        });
+      });
+    }, []);
+    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;
+        });
+      }
+    }, [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;
+      }
+      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
+            });
+          }
+        });
+      }
+    };
+    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 {
+        if (defaultpaneindex !== void 0) {
+          const parsedIndex = parseInt(defaultpaneindex.toString(), 10);
+          targetIndex = isNaN(parsedIndex) ? 0 : parsedIndex;
+        }
+      }
+      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: 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
+          }),
+          hidden: item.show === false || 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 || item.show === "false",
+              "aria-controls": `tabpanel-${index}`,
+              onClick: (e) => handleTabHeaderClick(e, item, index),
+              children: [
+                (item.paneicon || item.paneiconurl) && /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: item.paneicon,
+                    iconurl: item.paneiconurl,
+                    prefabName: props.prefabName,
+                    alt: "Tab icon"
+                  }
+                ),
+                /* @__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);
+        }
+      });
+      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__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(WmSkeleton, __spreadValues({}, SKELETON_REGISTRY["WmTabs"])), children: /* @__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",
+      "loading",
+      "showSkeleton",
+      "skeletonRows",
+      "skeletonColumns",
+      "className",
+      "styles"
+    ];
+    return keys.every((key) => {
+      if (key === "children") {
+        return prev[key] === next[key];
+      }
+      return isEqual(prev[key], next[key]);
+    });
+  }
+);
+WmTabs.displayName = "WmTabs";
+var tabs_default = withBaseWrapper(WmTabs);
+export {
+  WmTabs,
+  tabs_default as default,
+  useTabsContext
+};

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

@@ -0,0 +1,115 @@
+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;
+    paneiconurl?: 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;
+    /**
+     * Number of skeleton tab headers shown while loading.
+     * @default 4
+     */
+    skeletonRows?: number;
+    /**
+     * Number of skeleton content lines shown in the active tab panel while loading.
+     * @default 3
+     */
+    skeletonColumns?: number;
+}
+/**
+ * Combined props for the WmTabs component, including base WaveMaker props.
+ */
+export type WmTabsProps = Prettify<TabsPropsBase & BaseProps>;
+export declare const DEFAULT_PROPS: Partial<WmTabsProps>;

package/components/container/tabs/props.js

@@ -0,0 +1,17 @@
+const 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: ""
+};
+export {
+  DEFAULT_PROPS
+};