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

package/components/container/accordion/accordion-pane/index.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { WmAccordionPaneProps } from "./props";
+export declare const WmAccordionPane: React.MemoExoticComponent<(Props: WmAccordionPaneProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmAccordionPane component represents a single collapsible pane within
+ * an accordion. Used as a child of WmAccordion.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-accordion-accordionpane--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-accordion-accordionpane--docs#tab-overview)
+ *
+ * @param props - {@link WmAccordionPaneProps}
+ */
+declare const _default: React.ComponentType<{
+    title?: string;
+    subheading?: string;
+    iconclass?: string;
+    badgevalue?: string | number;
+    badgetype?: import("./props").AccordionPaneBadgeType;
+    isdefaultpane?: boolean;
+    active: boolean;
+    smoothscroll?: boolean;
+    onExpand?: (event?: Event, props?: WmAccordionPaneProps) => void;
+    onCollapse?: (event?: Event, props?: WmAccordionPaneProps) => void;
+    toggle?: (event?: Event, name?: string) => void;
+    expand?: (event?: Event, name?: string) => void;
+    collapse?: (event?: Event, name?: string) => void;
+    onLoad?: (props: WmAccordionPaneProps, onLoadCallback?: () => void) => void;
+    render?: (props: WmAccordionPaneProps, onLoadCallback?: () => void) => React.ReactNode;
+    tabindex?: number;
+    layoutClassName?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;

package/components/container/accordion/accordion-pane/index.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmAccordionPane = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
+var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
+var _accordion = require("@base-ui-components/react/accordion");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _props = require("./props");
+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 = "app-accordion-panel panel";
+var WmAccordionPane = exports.WmAccordionPane = /*#__PURE__*/(0, _react.memo)(function (Props) {
+  var _props$show, _props$hidden;
+  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PANE_PROPS), Props);
+  var contentRef = (0, _react.useRef)(null);
+  var loadedRef = (0, _react.useRef)(false);
+
+  // Handle expand/collapse
+  var handleToggle = (0, _react.useCallback)(function (event) {
+    var _props$toggle;
+    event.preventDefault();
+    (_props$toggle = props.toggle) === null || _props$toggle === void 0 || _props$toggle.call(props, event.nativeEvent, props.name);
+    if (!props.active) {
+      props.onExpand && props.onExpand(event.nativeEvent, props);
+    } else {
+      props.onCollapse && props.onCollapse(event.nativeEvent, props);
+    }
+  }, [props.toggle, props.onExpand, props.onCollapse]);
+
+  // Handle keyboard navigation
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleToggle(event);
+    }
+  }, [handleToggle]);
+  (0, _react.useEffect)(function () {
+    if (!loadedRef.current && props.onLoad) {
+      props.onLoad(props, function () {});
+      loadedRef.current = true;
+    }
+  }, [props.onLoad]);
+  return __jsx(_accordion.Accordion.Root, {
+    tabIndex: props.tabindex,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className, props.layoutClassName),
+    name: props.name,
+    show: (_props$show = props.show) !== null && _props$show !== void 0 ? _props$show : true,
+    hidden: (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false
+  }, __jsx(_AccordionSummary["default"], {
+    className: (0, _clsx["default"])("panel-heading clearfix", {
+      active: props.active
+    }),
+    onClick: handleToggle,
+    onKeyDown: handleKeyDown,
+    tabIndex: props.tabindex,
+    "aria-expanded": props.active,
+    component: "div"
+  }, __jsx(_Typography["default"], {
+    className: "panel-title",
+    variant: "h3",
+    component: "h3"
+  }, __jsx(_Typography["default"], {
+    className: "accordion-toggle clearfix",
+    component: "a"
+  }, props.iconclass && __jsx("div", {
+    className: "pull-left"
+  }, __jsx("i", {
+    className: (0, _clsx["default"])("app-icon panel-icon", props.iconclass)
+  })), __jsx("div", {
+    className: (0, _clsx["default"])("pull-left", "wm-accordion-pane-title-main")
+  }, __jsx(_Typography["default"], {
+    className: "heading",
+    variant: "h3",
+    component: "h3"
+  }, props.title), props.subheading && __jsx(_Typography["default"], {
+    className: "description",
+    variant: "body2",
+    component: "div"
+  }, props.subheading)), __jsx("div", {
+    className: "panel-actions pull-right"
+  }, props.badgevalue && __jsx(_Typography["default"], {
+    variant: "body2",
+    component: "span",
+    className: "label label-".concat(props.badgetype || "default")
+  }, props.badgevalue), __jsx(_Typography["default"], {
+    component: "span",
+    variant: "body2",
+    className: "app-icon panel-action wi"
+  }, __jsx("i", {
+    className: (0, _clsx["default"])(props.active ? "wi-minus" : "wi-plus")
+  })))))), __jsx(_AccordionDetails["default"], {
+    className: (0, _clsx["default"])("panel-collapse collapse", {
+      "in": props.active
+    })
+  }, __jsx("div", {
+    ref: contentRef,
+    className: "panel-body"
+  }, props.render && props.active ? props.render(props, function () {
+    var _props$onLoad;
+    return (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 ? void 0 : _props$onLoad.call(props, props);
+  }) : props.children)));
+});
+WmAccordionPane.displayName = "WmAccordionPane";
+
+/**
+ * The WmAccordionPane component represents a single collapsible pane within
+ * an accordion. Used as a child of WmAccordion.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/container-accordion-accordionpane--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/container-accordion-accordionpane--docs#tab-overview)
+ *
+ * @param props - {@link WmAccordionPaneProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmAccordionPane);

package/components/container/accordion/accordion-pane/props.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Badge variant for accordion pane header.
+ */
+export type AccordionPaneBadgeType = "default" | "primary" | "success" | "info" | "warning" | "danger";
+/**
+ * Base props specific to the WmAccordionPane component.
+ * Note: active, onExpand, onCollapse, and toggle are injected by WmAccordion parent.
+ */
+export interface AccordionPanePropsBase {
+    /**
+     * Pane header title.
+     * @default "Title"
+     */
+    title?: string;
+    /**
+     * Optional subheading below the title.
+     */
+    subheading?: string;
+    /**
+     * Icon class for the pane header (e.g., "wi wi-home").
+     */
+    iconclass?: string;
+    /**
+     * Badge value displayed in the header.
+     */
+    badgevalue?: string | number;
+    /**
+     * Badge style variant.
+     * @default "default"
+     */
+    badgetype?: AccordionPaneBadgeType;
+    /**
+     * Whether this pane is the default expanded pane.
+     */
+    isdefaultpane?: boolean;
+    /**
+     * Whether the pane is currently expanded. Injected by parent.
+     */
+    active: boolean;
+    /**
+     * Enable smooth scroll when expanding.
+     * @default false
+     */
+    smoothscroll?: boolean;
+    /**
+     * Called when pane expands. Injected by parent.
+     */
+    onExpand?: (event?: Event, props?: WmAccordionPaneProps) => void;
+    /**
+     * Called when pane collapses. Injected by parent.
+     */
+    onCollapse?: (event?: Event, props?: WmAccordionPaneProps) => void;
+    /**
+     * Toggle function. Injected by parent.
+     */
+    toggle?: (event?: Event, name?: string) => void;
+    /**
+     * Expand function. Injected by parent.
+     */
+    expand?: (event?: Event, name?: string) => void;
+    /**
+     * Collapse function. Injected by parent.
+     */
+    collapse?: (event?: Event, name?: string) => void;
+    /**
+     * Called when pane loads.
+     */
+    onLoad?: (props: WmAccordionPaneProps, onLoadCallback?: () => void) => void;
+    /**
+     * Custom render function for pane content. Receives props and onLoad callback.
+     */
+    render?: (props: WmAccordionPaneProps, onLoadCallback?: () => void) => ReactNode;
+    /**
+     * Tab index for keyboard navigation.
+     */
+    tabindex?: number;
+    /**
+     * Utility layout classes from Studio Auto Layout (merged on the pane root).
+     */
+    layoutClassName?: string;
+}
+/**
+ * Combined props for the WmAccordionPane component, including base WaveMaker props.
+ */
+export type WmAccordionPaneProps = Prettify<AccordionPanePropsBase & BaseProps>;
+export declare const DEFAULT_PANE_PROPS: Partial<WmAccordionPaneProps>;

package/components/container/accordion/accordion-pane/props.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PANE_PROPS = void 0;
+/**
+ * Badge variant for accordion pane header.
+ */
+
+/**
+ * Base props specific to the WmAccordionPane component.
+ * Note: active, onExpand, onCollapse, and toggle are injected by WmAccordion parent.
+ */
+
+/**
+ * Combined props for the WmAccordionPane component, including base WaveMaker props.
+ */
+
+var DEFAULT_PANE_PROPS = exports.DEFAULT_PANE_PROPS = {
+  title: "Title",
+  badgetype: "default",
+  smoothscroll: false
+};

package/components/container/accordion/index.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+import { WmAccordionProps } from "./props";
+export declare const WmAccordion: React.MemoExoticComponent<(Props: WmAccordionProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmAccordion component displays collapsible content panes. Supports both
+ * static (children) and dynamic (dataset) modes with state persistence.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-accordion--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-accordion--docs)
+ *
+ * @param props - {@link WmAccordionProps}
+ */
+declare const _default: React.ComponentType<{
+    closeothers?: boolean;
+    defaultpaneindex?: number;
+    statehandler?: import("../props").StateHandler;
+    dataset?: any;
+    nodatamessage?: string;
+    type?: "static" | "dynamic";
+    onChange?: (event: {
+        newPaneIndex: number;
+        oldPaneIndex: number;
+    }) => void;
+    onLoad?: (props: WmAccordionProps, onLoadCallback?: () => void) => void;
+    render?: (item: Record<string, unknown>, index: number, dataset: Record<string, unknown>[]) => React.ReactNode;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    prefabName?: string;
+}>;
+export default _default;

package/components/container/accordion/index.js

@@ -0,0 +1,254 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmAccordion = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _accordionPane = _interopRequireWildcard(require("./accordion-pane"));
+var _props3 = require("./props");
+var _statePersistance = require("@wavemaker-ai/react-runtime/utils/state-persistance");
+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 = "app-accordion panel-group";
+function isStaticAccordionPane(child) {
+  return /*#__PURE__*/_react["default"].isValidElement(child) && (child.type === _accordionPane["default"] || child.type === _accordionPane.WmAccordionPane);
+}
+var WmAccordion = exports.WmAccordion = /*#__PURE__*/(0, _react.memo)(function (Props) {
+  var _ref, _props$id, _props$show;
+  var props = _objectSpread(_objectSpread({}, _props3.DEFAULT_PROPS), Props);
+  var isMounted = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(props.defaultpaneindex || 0),
+    activePaneIndex = _useState[0],
+    setActivePaneIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(new Set()),
+    activePanes = _useState2[0],
+    setActivePanes = _useState2[1];
+  var prevActivePaneIndex = (0, _react.useRef)(null);
+
+  // Initialize active panes based on default pane index
+  (0, _react.useEffect)(function () {
+    var initialIndex = props.defaultpaneindex || 0;
+    setActivePaneIndex(initialIndex);
+    setActivePanes(new Set([initialIndex]));
+  }, [props.defaultpaneindex]);
+
+  // State persistence functions
+  var getStateFromStorage = (0, _react.useCallback)(function () {
+    if (!props.statehandler || props.statehandler === "none") return null;
+    try {
+      var _props$name, _props$statehandler;
+      return (0, _statePersistance.getWidgetState)({
+        name: (_props$name = props.name) !== null && _props$name !== void 0 ? _props$name : "",
+        type: "accordion",
+        storage: (_props$statehandler = props.statehandler) !== null && _props$statehandler !== void 0 ? _props$statehandler : "none"
+      });
+    } catch (error) {
+      console.warn("Error reading accordion state:", error);
+      return null;
+    }
+  }, [props.statehandler, props.name]);
+  var saveStateToStorage = (0, _react.useCallback)(function (currentActiveIndex) {
+    if (!props.statehandler || props.statehandler === "none") return;
+    try {
+      var _props$name2, _props$statehandler2;
+      // Save the current active pane index
+      (0, _statePersistance.setWidgetState)({
+        name: (_props$name2 = props.name) !== null && _props$name2 !== void 0 ? _props$name2 : "",
+        type: "accordion",
+        storage: (_props$statehandler2 = props.statehandler) !== null && _props$statehandler2 !== void 0 ? _props$statehandler2 : "none"
+      }, String(currentActiveIndex));
+    } catch (error) {
+      console.warn("Error saving accordion state:", error);
+    }
+  }, [props.statehandler, props.name]);
+  function updateActivePane(index, name) {
+    var _props$listener;
+    if (props !== null && props !== void 0 && (_props$listener = props.listener) !== null && _props$listener !== void 0 && _props$listener.onChange) {
+      props.listener.onChange(props.name, {
+        activePane: {
+          name: name,
+          index: index
+        },
+        activePaneIndex: index,
+        activePaneName: name
+      });
+    }
+  }
+
+  // Handle pane expand/collapse
+  var handlePaneToggle = (0, _react.useCallback)(function (paneIndex, isExpanding, event, name) {
+    var newActivePanes = new Set(activePanes);
+    if (isExpanding) {
+      if (props.closeothers) {
+        // Close all other panes
+        newActivePanes.clear();
+        newActivePanes.add(paneIndex);
+      } else {
+        // Add this pane to active panes
+        newActivePanes.add(paneIndex);
+      }
+      updateActivePane(paneIndex, name);
+      prevActivePaneIndex.current = activePaneIndex;
+      setActivePaneIndex(paneIndex);
+
+      // Trigger onChange callback
+      if (event && props.onChange) {
+        props.onChange({
+          newPaneIndex: paneIndex,
+          oldPaneIndex: prevActivePaneIndex.current || 0
+        });
+      }
+    } else {
+      // Remove this pane from active panes
+      newActivePanes["delete"](paneIndex);
+
+      // Update active pane index when collapsing
+      if (newActivePanes.size > 0) {
+        var firstActivePaneIndex = Array.from(newActivePanes)[0];
+        setActivePaneIndex(firstActivePaneIndex);
+      }
+    }
+    setActivePanes(newActivePanes);
+
+    // Save state
+    if (event) {
+      if (isExpanding) {
+        // Save the newly activated pane index
+        saveStateToStorage(paneIndex);
+      } else {
+        // When collapsing, save the first remaining active pane or the current one
+        var remainingActivePanes = Array.from(newActivePanes);
+        var indexToSave = remainingActivePanes.length > 0 ? remainingActivePanes[0] : paneIndex;
+        saveStateToStorage(indexToSave);
+      }
+    }
+  }, [activePanes, activePaneIndex, props.closeothers, saveStateToStorage]);
+
+  // Restore state on mount
+  (0, _react.useEffect)(function () {
+    var savedState = getStateFromStorage();
+    if (savedState !== null && typeof savedState === "number") {
+      setActivePaneIndex(savedState);
+      setActivePanes(new Set([savedState]));
+    }
+  }, [getStateFromStorage]);
+
+  // Accordion methods exposed via listener
+
+  var expand = function expand() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    handlePaneToggle(index, true);
+  };
+  var collapse = function collapse() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    handlePaneToggle(index, false);
+  };
+  var toggle = function toggle() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var isActive = activePanes.has(index);
+    handlePaneToggle(index, !isActive);
+  };
+
+  // register the methods
+  (0, _react.useEffect)(function () {
+    var _props$listener2;
+    if (props !== null && props !== void 0 && (_props$listener2 = props.listener) !== null && _props$listener2 !== void 0 && _props$listener2.onChange && !isMounted.current) {
+      var _React$Children$toArr;
+      var activePaneName = (_React$Children$toArr = _react["default"].Children.toArray(props.children)[activePaneIndex]) === null || _React$Children$toArr === void 0 || (_React$Children$toArr = _React$Children$toArr.props) === null || _React$Children$toArr === void 0 ? void 0 : _React$Children$toArr.name;
+      props.listener.onChange(props.name, {
+        expand: expand,
+        collapse: collapse,
+        toggle: toggle,
+        activePane: {
+          name: activePaneName
+        },
+        activePaneIndex: activePaneIndex,
+        activePaneName: activePaneName
+      });
+      isMounted.current = true;
+    }
+  }, [activePaneIndex, expand, collapse, toggle, props.name, props.children]);
+
+  // Render static panes from children
+  var renderPanes = function renderPanes() {
+    if (props.type === "dynamic") {
+      var _props$dataset;
+      if (!(props !== null && props !== void 0 && props.dataset) || (props === null || props === void 0 ? void 0 : props.dataset.length) === 0 || !(0, _isArray["default"])(props === null || props === void 0 ? void 0 : props.dataset)) {
+        return __jsx("div", null, props.nodatamessage);
+      }
+      return props === null || props === void 0 || (_props$dataset = props.dataset) === null || _props$dataset === void 0 ? void 0 : _props$dataset.map(function (item, index) {
+        return __jsx("div", {
+          className: "app-repeat-item",
+          key: "repeat-template-".concat(index, "-").concat((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.id))
+        }, props.render && props.render(_objectSpread(_objectSpread({}, item), {}, {
+          active: activePanes.has(index),
+          toggle: function toggle(event, name) {
+            return handlePaneToggle(index, !activePanes.has(index), event, name);
+          },
+          collapse: function collapse(event, name) {
+            return handlePaneToggle(index, false, event, name);
+          },
+          expand: function expand(event, name) {
+            return handlePaneToggle(index, true, event, name);
+          }
+        }), index, props === null || props === void 0 ? void 0 : props.dataset));
+      });
+    }
+    return props.type === "static" ? _react["default"].Children.map(props.children, function (child, index) {
+      if (isStaticAccordionPane(child)) {
+        var _props, _props2;
+        return /*#__PURE__*/_react["default"].cloneElement(child, {
+          key: "".concat(props.name, "-").concat(index, "-").concat(((_props = child.props) === null || _props === void 0 ? void 0 : _props.name) || ((_props2 = child.props) === null || _props2 === void 0 ? void 0 : _props2.id)),
+          active: activePanes.has(index),
+          toggle: function toggle(event, name) {
+            return handlePaneToggle(index, !activePanes.has(index), event, name);
+          },
+          collapse: function collapse(event, name) {
+            return handlePaneToggle(index, false, event, name);
+          },
+          expand: function expand(event, name) {
+            return handlePaneToggle(index, true, event, name);
+          }
+        });
+      }
+      return child;
+    }) : null;
+  };
+  return __jsx("div", {
+    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className),
+    style: props.styles,
+    id: (_ref = (_props$id = props === null || props === void 0 ? void 0 : props.id) !== null && _props$id !== void 0 ? _props$id : props === null || props === void 0 ? void 0 : props.name) !== null && _ref !== void 0 ? _ref : undefined,
+    "data-type": "accordion",
+    "data-statehandler": props.statehandler,
+    hidden: props.hidden || false,
+    name: props.name,
+    show: (_props$show = props.show) !== null && _props$show !== void 0 ? _props$show : true
+  }, renderPanes());
+}, function (prevProps, nextProps) {
+  var keys = ["dataset", "defaultpaneindex", "closeothers", "children", "hidden", "show"];
+  return keys.every(function (key) {
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmAccordion.displayName = "WmAccordion";
+
+/**
+ * The WmAccordion component displays collapsible content panes. Supports both
+ * static (children) and dynamic (dataset) modes with state persistence.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-accordion--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-accordion--docs)
+ *
+ * @param props - {@link WmAccordionProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmAccordion);