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

package/components/container/accordion/index.js

@@ -1,254 +1,236 @@
-"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";
+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 { jsx } from "react/jsx-runtime";
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import isArray from "lodash-es/isArray";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import WmAccordionPaneWithBase, { WmAccordionPane } from "./accordion-pane";
+import { DEFAULT_PROPS } from "./props";
+import {
+  getWidgetState,
+  setWidgetState
+} from "../../../utils/state-persistance";
+const DEFAULT_CLASS = "app-accordion panel-group";
 function isStaticAccordionPane(child) {
-  return /*#__PURE__*/_react["default"].isValidElement(child) && (child.type === _accordionPane["default"] || child.type === _accordionPane.WmAccordionPane);
+  return React.isValidElement(child) && (child.type === WmAccordionPaneWithBase || child.type === 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
+const WmAccordion = memo(
+  (Props) => {
+    var _a, _b, _c;
+    const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), Props);
+    const isMounted = useRef(false);
+    const [activePaneIndex, setActivePaneIndex] = useState(props.defaultpaneindex || 0);
+    const [activePanes, setActivePanes] = useState(/* @__PURE__ */ new Set());
+    const prevActivePaneIndex = useRef(null);
+    useEffect(() => {
+      const initialIndex = props.defaultpaneindex || 0;
+      setActivePaneIndex(initialIndex);
+      setActivePanes(/* @__PURE__ */ new Set([initialIndex]));
+    }, [props.defaultpaneindex]);
+    const getStateFromStorage = useCallback(() => {
+      var _a2, _b2;
+      if (!props.statehandler || props.statehandler === "none") return null;
+      try {
+        return getWidgetState({
+          name: (_a2 = props.name) != null ? _a2 : "",
+          type: "accordion",
+          storage: (_b2 = props.statehandler) != null ? _b2 : "none"
         });
+      } catch (error) {
+        console.warn("Error reading accordion state:", error);
+        return null;
       }
-    } 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);
+    }, [props.statehandler, props.name]);
+    const saveStateToStorage = useCallback(
+      (currentActiveIndex) => {
+        var _a2, _b2;
+        if (!props.statehandler || props.statehandler === "none") return;
+        try {
+          setWidgetState(
+            {
+              name: (_a2 = props.name) != null ? _a2 : "",
+              type: "accordion",
+              storage: (_b2 = props.statehandler) != null ? _b2 : "none"
+            },
+            String(currentActiveIndex)
+          );
+        } catch (error) {
+          console.warn("Error saving accordion state:", error);
+        }
+      },
+      [props.statehandler, props.name]
+    );
+    function updateActivePane(index, name) {
+      var _a2;
+      if ((_a2 = props == null ? void 0 : props.listener) == null ? void 0 : _a2.onChange) {
+        props.listener.onChange(props.name, {
+          activePane: { name, index },
+          activePaneIndex: index,
+          activePaneName: name
+        });
       }
     }
-  }, [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);
+    const handlePaneToggle = useCallback(
+      (paneIndex, isExpanding, event, name) => {
+        const newActivePanes = new Set(activePanes);
+        if (isExpanding) {
+          if (props.closeothers) {
+            newActivePanes.clear();
+            newActivePanes.add(paneIndex);
+          } else {
+            newActivePanes.add(paneIndex);
           }
-        }), 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);
+          updateActivePane(paneIndex, name);
+          prevActivePaneIndex.current = activePaneIndex;
+          setActivePaneIndex(paneIndex);
+          if (event && props.onChange) {
+            props.onChange({
+              newPaneIndex: paneIndex,
+              oldPaneIndex: prevActivePaneIndex.current || 0
+            });
+          }
+        } else {
+          newActivePanes.delete(paneIndex);
+          if (newActivePanes.size > 0) {
+            const firstActivePaneIndex = Array.from(newActivePanes)[0];
+            setActivePaneIndex(firstActivePaneIndex);
+          }
+        }
+        setActivePanes(newActivePanes);
+        if (event) {
+          if (isExpanding) {
+            saveStateToStorage(paneIndex);
+          } else {
+            const remainingActivePanes = Array.from(newActivePanes);
+            const indexToSave = remainingActivePanes.length > 0 ? remainingActivePanes[0] : paneIndex;
+            saveStateToStorage(indexToSave);
           }
+        }
+      },
+      [activePanes, activePaneIndex, props.closeothers, saveStateToStorage]
+    );
+    useEffect(() => {
+      const savedState = getStateFromStorage();
+      if (savedState !== null && typeof savedState === "number") {
+        setActivePaneIndex(savedState);
+        setActivePanes(/* @__PURE__ */ new Set([savedState]));
+      }
+    }, [getStateFromStorage]);
+    const expand = (index = 0) => {
+      handlePaneToggle(index, true);
+    };
+    const collapse = (index = 0) => {
+      handlePaneToggle(index, false);
+    };
+    const toggle = (index = 0) => {
+      const isActive = activePanes.has(index);
+      handlePaneToggle(index, !isActive);
+    };
+    useEffect(() => {
+      var _a2, _b2, _c2;
+      if (((_a2 = props == null ? void 0 : props.listener) == null ? void 0 : _a2.onChange) && !isMounted.current) {
+        const activePaneName = (_c2 = (_b2 = React.Children.toArray(props.children)[activePaneIndex]) == null ? void 0 : _b2.props) == null ? void 0 : _c2.name;
+        props.listener.onChange(props.name, {
+          expand,
+          collapse,
+          toggle,
+          activePane: {
+            name: activePaneName
+          },
+          activePaneIndex,
+          activePaneName
+        });
+        isMounted.current = true;
+      }
+    }, [activePaneIndex, expand, collapse, toggle, props.name, props.children]);
+    const renderPanes = () => {
+      var _a2;
+      if (props.type === "dynamic") {
+        if (!(props == null ? void 0 : props.dataset) || (props == null ? void 0 : props.dataset.length) === 0 || !isArray(props == null ? void 0 : props.dataset)) {
+          return /* @__PURE__ */ jsx("div", { children: props.nodatamessage });
+        }
+        return (_a2 = props == null ? void 0 : props.dataset) == null ? void 0 : _a2.map((item, index) => {
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "app-repeat-item",
+              children: props.render && props.render(
+                __spreadProps(__spreadValues({}, item), {
+                  active: activePanes.has(index),
+                  toggle: (event, name) => handlePaneToggle(index, !activePanes.has(index), event, name),
+                  collapse: (event, name) => handlePaneToggle(index, false, event, name),
+                  expand: (event, name) => handlePaneToggle(index, true, event, name)
+                }),
+                index,
+                props == null ? void 0 : props.dataset
+              )
+            },
+            `repeat-template-${index}-${(item == null ? void 0 : item.name) || (item == null ? void 0 : item.id)}`
+          );
         });
       }
-      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];
-  });
-});
+      return props.type === "static" ? React.Children.map(props.children, (child, index) => {
+        var _a3, _b2;
+        if (isStaticAccordionPane(child)) {
+          return React.cloneElement(child, {
+            key: `${props.name}-${index}-${((_a3 = child.props) == null ? void 0 : _a3.name) || ((_b2 = child.props) == null ? void 0 : _b2.id)}`,
+            active: activePanes.has(index),
+            toggle: (event, name) => handlePaneToggle(index, !activePanes.has(index), event, name),
+            collapse: (event, name) => handlePaneToggle(index, false, event, name),
+            expand: (event, name) => handlePaneToggle(index, true, event, name)
+          });
+        }
+        return child;
+      }) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(DEFAULT_CLASS, props.className),
+        style: props.styles,
+        id: (_b = (_a = props == null ? void 0 : props.id) != null ? _a : props == null ? void 0 : props.name) != null ? _b : void 0,
+        "data-type": "accordion",
+        "data-statehandler": props.statehandler,
+        hidden: props.hidden || false,
+        name: props.name,
+        show: (_c = props.show) != null ? _c : true,
+        children: renderPanes()
+      }
+    );
+  },
+  (prevProps, nextProps) => {
+    const keys = [
+      "dataset",
+      "defaultpaneindex",
+      "closeothers",
+      "children",
+      "hidden",
+      "show"
+    ];
+    return keys.every((key) => 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);
+var accordion_default = withBaseWrapper(WmAccordion);
+export {
+  WmAccordion,
+  accordion_default as default
+};

package/components/container/accordion/props.js

@@ -1,21 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEFAULT_PROPS = void 0;
-/**
- * Base props specific to the WmAccordion component.
- */
-
-/**
- * Combined props for the WmAccordion component, including base WaveMaker props.
- */
-
-var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+const DEFAULT_PROPS = {
   closeothers: true,
   defaultpaneindex: 0,
   statehandler: "none",
   nodatamessage: "No Data Found",
   type: "static"
-};
+};
+export {
+  DEFAULT_PROPS
+};