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

package/components/container/panel/components/panel-header/props.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Action item for panel header actions menu.
+ */
+export interface ActionItem {
+    itemicon?: string;
+    itemlabel?: string;
+    label?: string;
+    [key: string]: unknown;
+}
+export type BadgeType = "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+export interface PanelHeaderProps {
+    title?: string;
+    subheading?: string;
+    iconclass?: string;
+    iconurl?: string;
+    iconwidth?: string | number;
+    iconheight?: string | number;
+    iconmargin?: string;
+    badgevalue?: string | number;
+    badgetype?: BadgeType;
+    actions?: ActionItem[];
+    helptext?: string;
+    isExpanded: boolean;
+    isFullscreen: boolean;
+    collapsible?: boolean;
+    enablefullscreen?: boolean | string;
+    closable?: boolean;
+    itemlabel?: string;
+    itemlink?: string;
+    itemicon?: string;
+    itemchildren?: string | React.ReactNode;
+    listener?: Record<string, any> & {
+        appLocale?: {
+            LABEL_COLLAPSE?: string;
+            LABEL_EXPAND?: string;
+            LABEL_FULLSCREEN?: string;
+            LABEL_EXITFULLSCREEN?: string;
+        };
+    };
+    onToggleExpand: (event: React.MouseEvent) => void;
+    onToggleFullScreen: (event: React.MouseEvent) => void;
+    onToggleHelp: () => void;
+    onClose: (event: React.MouseEvent) => void;
+    onActionsclick?: (item: ActionItem) => void;
+}
+export type PanelIconImgStyle = React.CSSProperties & {
+    "--wm-panel-icon-width": string;
+    "--wm-panel-icon-height": string;
+    "--wm-panel-icon-margin": string;
+};

package/components/container/panel/components/panel-header/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/container/panel/hooks.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { PanelWidget } from "./props";
+export declare const usePanelExpansion: (initialExpanded?: boolean, onExpand?: (event: React.MouseEvent, widget?: PanelWidget) => void, onCollapse?: (event: React.MouseEvent, widget?: PanelWidget) => void, name?: string, listener?: {
+    Widgets?: Record<string, PanelWidget>;
+}) => {
+    isExpanded: boolean;
+    toggleExpand: (event?: React.MouseEvent) => void;
+    isExpandedRef: React.RefObject<boolean>;
+};
+export declare const usePanelFullscreen: (initialFullscreen?: boolean, enablefullscreen?: boolean, onFullscreen?: (event: React.MouseEvent, widget?: PanelWidget) => void, onExitfullscreen?: (event: React.MouseEvent, widget?: PanelWidget) => void, name?: string, listener?: {
+    Widgets?: Record<string, PanelWidget>;
+}) => {
+    isFullscreen: boolean;
+    toggleFullScreen: (event: React.MouseEvent) => void;
+};
+export declare const usePanelDimensions: (height: string | number | undefined, isFullscreen: boolean, hideFooter: boolean, panelRef: React.RefObject<HTMLDivElement | null>, panelContentRef: React.RefObject<HTMLDivElement | null>, panelHeaderRef: React.RefObject<HTMLDivElement | null>) => {
+    computeDimensions: () => void;
+};
+export declare const useChildrenClassification: (children: React.ReactNode) => {
+    bodyContent: (string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>>)[];
+    footerContent: (string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>>)[];
+};

package/components/container/panel/hooks.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePanelFullscreen = exports.usePanelExpansion = exports.usePanelDimensions = exports.useChildrenClassification = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 usePanelExpansion = exports.usePanelExpansion = function usePanelExpansion() {
+  var initialExpanded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var onExpand = arguments.length > 1 ? arguments[1] : undefined;
+  var onCollapse = arguments.length > 2 ? arguments[2] : undefined;
+  var name = arguments.length > 3 ? arguments[3] : undefined;
+  var listener = arguments.length > 4 ? arguments[4] : undefined;
+  var _useState = (0, _react.useState)(initialExpanded),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var isExpandedRef = (0, _react.useRef)(initialExpanded);
+  var toggleExpand = (0, _react.useCallback)(function (event) {
+    if (event && event.preventDefault) {
+      event.preventDefault();
+    }
+    var newExpanded = !isExpandedRef.current;
+    isExpandedRef.current = newExpanded;
+    setIsExpanded(newExpanded);
+    if (newExpanded) {
+      var _listener$Widgets;
+      onExpand === null || onExpand === void 0 || onExpand(event || {}, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
+    } else {
+      var _listener$Widgets2;
+      onCollapse === null || onCollapse === void 0 || onCollapse(event || {}, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
+    }
+  }, [onExpand, onCollapse, name, listener]);
+  (0, _react.useEffect)(function () {
+    setIsExpanded(initialExpanded);
+    isExpandedRef.current = initialExpanded;
+  }, [initialExpanded]);
+
+  // Update ref whenever state changes from external sources
+  (0, _react.useEffect)(function () {
+    isExpandedRef.current = isExpanded;
+  }, [isExpanded]);
+  return {
+    isExpanded: isExpanded,
+    toggleExpand: toggleExpand,
+    isExpandedRef: isExpandedRef
+  };
+};
+var usePanelFullscreen = exports.usePanelFullscreen = function usePanelFullscreen() {
+  var initialFullscreen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var enablefullscreen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var onFullscreen = arguments.length > 2 ? arguments[2] : undefined;
+  var onExitfullscreen = arguments.length > 3 ? arguments[3] : undefined;
+  var name = arguments.length > 4 ? arguments[4] : undefined;
+  var listener = arguments.length > 5 ? arguments[5] : undefined;
+  var _useState2 = (0, _react.useState)(initialFullscreen),
+    isFullscreen = _useState2[0],
+    setIsFullscreen = _useState2[1];
+  var toggleFullScreen = (0, _react.useCallback)(function (event) {
+    if (!enablefullscreen) return;
+    var newFullscreen = !isFullscreen;
+    setIsFullscreen(newFullscreen);
+    if (newFullscreen) {
+      var _listener$Widgets3;
+      onFullscreen === null || onFullscreen === void 0 || onFullscreen(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+      document.body.style.overflow = "hidden";
+    } else {
+      var _listener$Widgets4;
+      onExitfullscreen === null || onExitfullscreen === void 0 || onExitfullscreen(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+      document.body.style.overflow = "";
+    }
+  }, [isFullscreen, enablefullscreen, onFullscreen, onExitfullscreen, name, listener]);
+  (0, _react.useEffect)(function () {
+    setIsFullscreen(initialFullscreen);
+  }, [initialFullscreen]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (isFullscreen) {
+        document.body.style.overflow = "";
+      }
+    };
+  }, [isFullscreen]);
+  return {
+    isFullscreen: isFullscreen,
+    toggleFullScreen: toggleFullScreen
+  };
+};
+var usePanelDimensions = exports.usePanelDimensions = function usePanelDimensions(height, isFullscreen, hideFooter, panelRef, panelContentRef, panelHeaderRef) {
+  var computeDimensions = (0, _react.useCallback)(function () {
+    var _panelHeaderRef$curre, _panelRef$current;
+    if (!panelRef || !panelContentRef || !panelHeaderRef) return;
+    var headerHeight = ((_panelHeaderRef$curre = panelHeaderRef.current) === null || _panelHeaderRef$curre === void 0 ? void 0 : _panelHeaderRef$curre.offsetHeight) || 0;
+    var footer = (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.querySelector(".panel-footer");
+    var footerHeight = (footer === null || footer === void 0 ? void 0 : footer.offsetHeight) || 0;
+    var content = panelContentRef.current;
+    var vHeight = window.innerHeight;
+    var inlineHeight = "";
+    if (isFullscreen) {
+      inlineHeight = hideFooter ? vHeight - headerHeight : vHeight - (footerHeight + headerHeight);
+    } else {
+      inlineHeight = height || "";
+    }
+    if (content) {
+      content.style.height = typeof inlineHeight === "number" ? "".concat(inlineHeight, "px") : inlineHeight.toString();
+    }
+  }, [height, isFullscreen, hideFooter]);
+  (0, _react.useEffect)(function () {
+    var handleResize = function handleResize() {
+      computeDimensions();
+    };
+    window.addEventListener("resize", handleResize);
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, [computeDimensions]);
+  return {
+    computeDimensions: computeDimensions
+  };
+};
+var useChildrenClassification = exports.useChildrenClassification = function useChildrenClassification(children) {
+  var isWmPanelFooter = function isWmPanelFooter(element) {
+    var elementType = element.type;
+    var props = element.props;
+    if (props.WmPanelFooter || props["data-wm-panel-footer"]) {
+      return true;
+    }
+    if (typeof elementType === "function") {
+      var component = elementType;
+      return !!(component.WmPanelFooter || component.displayName === "WmPanelFooter");
+    }
+    return false;
+  };
+  return {
+    bodyContent: _react["default"].Children.toArray(children).filter(function (child) {
+      if (! /*#__PURE__*/_react["default"].isValidElement(child)) return true;
+      return !isWmPanelFooter(child);
+    }),
+    footerContent: _react["default"].Children.toArray(children).filter(function (child) {
+      if (! /*#__PURE__*/_react["default"].isValidElement(child)) return false;
+      return isWmPanelFooter(child);
+    })
+  };
+};

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

@@ -0,0 +1,118 @@
+import React from "react";
+import { ActionItem, WmPanelProps } from "./props";
+export declare const WmPanel: {
+    (props: WmPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const WmPanelFooter: {
+    ({ children, name }: {
+        children: React.ReactNode;
+        name?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmPanel component is a collapsible container with header, optional
+ * fullscreen mode, and action menu support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-panel--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-panel--docs)
+ *
+ * @param props - {@link WmPanelProps}
+ */
+declare const _default: React.ComponentType<{
+    actions?: ActionItem[];
+    badgetype?: import("./components/panel-header/props").BadgeType;
+    badgevalue?: string | number;
+    closable?: boolean;
+    collapsible?: boolean;
+    enablefullscreen?: boolean;
+    expanded?: boolean;
+    fullscreen?: boolean;
+    helptext?: string;
+    iconclass?: string;
+    iconheight?: string | number;
+    iconmargin?: string;
+    iconurl?: string;
+    iconwidth?: string | number;
+    subheading?: string;
+    title?: string;
+    height?: string | number;
+    itemlabel?: string;
+    itemicon?: string;
+    itemlink?: string;
+    itemaction?: string;
+    itemchildren?: React.ReactNode;
+    userrole?: string;
+    binditemlabel?: string;
+    binditemicon?: string;
+    binditemaction?: string;
+    binditemlink?: string;
+    binditemchildren?: string;
+    binduserrole?: string;
+    onActionsclick?: (item: ActionItem) => void;
+    onClose?: (event: React.MouseEvent, widget?: import("./props").PanelWidget) => void;
+    onCollapse?: (event: React.MouseEvent, widget?: import("./props").PanelWidget) => void;
+    onExpand?: (event: React.MouseEvent, widget?: import("./props").PanelWidget) => void;
+    onExitfullscreen?: (event: React.MouseEvent, widget?: import("./props").PanelWidget) => void;
+    onFullscreen?: (event: React.MouseEvent, widget?: import("./props").PanelWidget) => void;
+    onLoad?: (widget?: import("./props").PanelWidget) => void;
+    onPropertyChange?: (prop: string, value: unknown) => void;
+    menuRefQL?: unknown;
+    menuRef?: unknown;
+    Widgets?: Record<string, import("./props").PanelWidget>;
+    content?: unknown;
+    renderPartial?: (props: WmPanelProps) => React.ReactNode;
+    style?: React.CSSProperties;
+    autoclose?: boolean | string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: 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;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;

package/components/container/panel/index.js

@@ -0,0 +1,307 @@
+"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.WmPanelFooter = exports.WmPanel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _material = require("@mui/material");
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var _hooks = require("./hooks");
+var _panelHeader = _interopRequireDefault(require("./components/panel-header"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["actions", "badgetype", "badgevalue", "closable", "collapsible", "enablefullscreen", "expanded", "fullscreen", "helptext", "hint", "iconclass", "iconheight", "iconmargin", "iconurl", "iconwidth", "subheading", "title", "className", "style", "children", "height", "name", "itemlabel", "itemlink", "itemicon", "itemchildren", "onActionsclick", "onClose", "onCollapse", "onExpand", "onExitfullscreen", "onFullscreen", "onLoad", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver", "onPropertyChange", "listener", "Widgets"];
+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 WmPanel = exports.WmPanel = function WmPanel(props) {
+  var actions = props.actions,
+    _props$badgetype = props.badgetype,
+    badgetype = _props$badgetype === void 0 ? "default" : _props$badgetype,
+    badgevalue = props.badgevalue,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? false : _props$closable,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
+    _props$enablefullscre = props.enablefullscreen,
+    enablefullscreen = _props$enablefullscre === void 0 ? false : _props$enablefullscre,
+    _props$expanded = props.expanded,
+    expanded = _props$expanded === void 0 ? true : _props$expanded,
+    _props$fullscreen = props.fullscreen,
+    fullscreen = _props$fullscreen === void 0 ? false : _props$fullscreen,
+    helptext = props.helptext,
+    hint = props.hint,
+    iconclass = props.iconclass,
+    iconheight = props.iconheight,
+    iconmargin = props.iconmargin,
+    iconurl = props.iconurl,
+    iconwidth = props.iconwidth,
+    subheading = props.subheading,
+    title = props.title,
+    className = props.className,
+    style = props.style,
+    children = props.children,
+    height = props.height,
+    name = props.name,
+    itemlabel = props.itemlabel,
+    itemlink = props.itemlink,
+    itemicon = props.itemicon,
+    itemchildren = props.itemchildren,
+    onActionsclick = props.onActionsclick,
+    onClose = props.onClose,
+    onCollapse = props.onCollapse,
+    onExpand = props.onExpand,
+    onExitfullscreen = props.onExitfullscreen,
+    onFullscreen = props.onFullscreen,
+    onLoad = props.onLoad,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onMouseOut = props.onMouseOut,
+    onMouseOver = props.onMouseOver,
+    onPropertyChange = props.onPropertyChange,
+    listener = props.listener,
+    Widgets = props.Widgets,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(false),
+    helpVisible = _useState[0],
+    setHelpVisible = _useState[1];
+  var panelRef = (0, _react.useRef)(null);
+  var panelHeaderRef = (0, _react.useRef)(null);
+  var panelContentRef = (0, _react.useRef)(null);
+  var _useState2 = (0, _react.useState)(true),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  var hasTriggeredOnLoadRef = (0, _react.useRef)(false);
+
+  //   Manages expand/collapse state
+  var _usePanelExpansion = (0, _hooks.usePanelExpansion)(expanded, onExpand, onCollapse, name, listener),
+    isExpanded = _usePanelExpansion.isExpanded,
+    toggleExpand = _usePanelExpansion.toggleExpand,
+    isExpandedRef = _usePanelExpansion.isExpandedRef;
+
+  //   Handles fullscreen functionality
+  var _usePanelFullscreen = (0, _hooks.usePanelFullscreen)(fullscreen, enablefullscreen, onFullscreen, onExitfullscreen, name, listener),
+    isFullscreen = _usePanelFullscreen.isFullscreen,
+    toggleFullScreen = _usePanelFullscreen.toggleFullScreen;
+  //  Classifies children into body and footer content
+  var _useChildrenClassific = (0, _hooks.useChildrenClassification)(children),
+    bodyContent = _useChildrenClassific.bodyContent,
+    footerContent = _useChildrenClassific.footerContent;
+  var hideFooter = !footerContent.length || !isExpanded;
+
+  //   Calculates panel dimensions
+  var _usePanelDimensions = (0, _hooks.usePanelDimensions)(height, isFullscreen, hideFooter, panelRef, panelContentRef, panelHeaderRef),
+    computeDimensions = _usePanelDimensions.computeDimensions;
+
+  // Event handlers
+  var handleClose = function handleClose(event) {
+    setShow(false);
+    if (onPropertyChange) {
+      onPropertyChange("show", false);
+    }
+
+    // Call the onClose callback if provided
+    if (onClose) {
+      var _listener$Widgets;
+      onClose(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name]);
+    }
+  };
+  var toggleHelp = function toggleHelp() {
+    return setHelpVisible(!helpVisible);
+  };
+  var handleMouseEnter = function handleMouseEnter(event) {
+    var _listener$Widgets2;
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event, listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name]);
+  };
+  var handleMouseLeave = function handleMouseLeave(event) {
+    var _listener$Widgets3;
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event, listener === null || listener === void 0 || (_listener$Widgets3 = listener.Widgets) === null || _listener$Widgets3 === void 0 ? void 0 : _listener$Widgets3[name]);
+  };
+  var handleMouseOver = function handleMouseOver(event) {
+    var _listener$Widgets4;
+    onMouseOver === null || onMouseOver === void 0 || onMouseOver(event, listener === null || listener === void 0 || (_listener$Widgets4 = listener.Widgets) === null || _listener$Widgets4 === void 0 ? void 0 : _listener$Widgets4[name]);
+  };
+  var handleMouseOut = function handleMouseOut(event) {
+    var _listener$Widgets5;
+    onMouseOut === null || onMouseOut === void 0 || onMouseOut(event, listener === null || listener === void 0 || (_listener$Widgets5 = listener.Widgets) === null || _listener$Widgets5 === void 0 ? void 0 : _listener$Widgets5[name]);
+  };
+
+  // onLoad handler
+  (0, _react.useEffect)(function () {
+    var _listener$Widgets6;
+    if (hasTriggeredOnLoadRef.current || !isExpanded) return;
+    hasTriggeredOnLoadRef.current = true;
+    onLoad === null || onLoad === void 0 || onLoad(listener === null || listener === void 0 || (_listener$Widgets6 = listener.Widgets) === null || _listener$Widgets6 === void 0 ? void 0 : _listener$Widgets6[name]);
+  }, [isExpanded]);
+  (0, _react.useEffect)(function () {
+    if (isExpanded) {
+      computeDimensions();
+    }
+  }, [isExpanded, height, isFullscreen, hideFooter, computeDimensions]);
+
+  // Handle ESC key for closing panel
+  (0, _react.useEffect)(function () {
+    var handleEscKey = function handleEscKey(event) {
+      if (closable && event.key === "Escape") {
+        handleClose({});
+      }
+    };
+    if (closable) {
+      window.addEventListener("keydown", handleEscKey);
+      return function () {
+        return window.removeEventListener("keydown", handleEscKey);
+      };
+    }
+  }, [closable]);
+  var showHeader = Boolean(iconurl || iconclass || collapsible || actions && (Array.isArray(actions) ? actions.length > 0 : true) || title || subheading || enablefullscreen);
+
+  // Panel methods exposed via listener
+  var collapse = function collapse() {
+    if (isExpandedRef.current) {
+      toggleExpand();
+    }
+  };
+  var expand = function expand() {
+    if (!isExpandedRef.current) {
+      toggleExpand();
+    }
+  };
+  var close = function close() {
+    if (show) {
+      handleClose({});
+    }
+  };
+  var toggle = function toggle() {
+    toggleExpand();
+  };
+
+  // Register the methods
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        collapse: collapse,
+        expand: expand,
+        close: close,
+        toggle: toggle,
+        toggleExpand: toggleExpand,
+        isExpanded: isExpanded,
+        isFullscreen: isFullscreen,
+        toggleFullScreen: toggleFullScreen,
+        show: show
+      });
+    }
+  }, []);
+  var componentProps = {
+    subheading: subheading,
+    iconclass: iconclass,
+    autoclose: props.autoclose,
+    title: title,
+    name: name,
+    badgevalue: badgevalue,
+    badgetype: badgetype,
+    hint: hint,
+    enablefullscreen: enablefullscreen.toString(),
+    animation: props.animation,
+    show: props.show,
+    "data-widget-id": props["data-widget-id"]
+  };
+  return __jsx(_material.Box, (0, _extends2["default"])({
+    ref: panelRef,
+    className: (0, _clsx["default"])("app-panel panel", className, {
+      fullscreen: isFullscreen,
+      "show-help": helpVisible
+    }),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    hidden: !show,
+    component: "div"
+  }, (0, _attr.removeInvalidAttributes)(componentProps), {
+    style: _objectSpread(_objectSpread({}, props.styles), props.conditionalstyle)
+  }), showHeader && __jsx(_material.Box, {
+    className: (0, _clsx["default"])("panel-heading", {
+      "show-help": helpVisible
+    }),
+    ref: panelHeaderRef
+  }, __jsx(_panelHeader["default"], {
+    title: title,
+    subheading: subheading,
+    iconclass: iconclass,
+    iconurl: iconurl,
+    iconwidth: iconwidth,
+    iconheight: iconheight,
+    iconmargin: iconmargin,
+    badgevalue: badgevalue,
+    badgetype: badgetype,
+    actions: actions,
+    helptext: helptext,
+    isExpanded: isExpanded,
+    isFullscreen: isFullscreen,
+    collapsible: collapsible,
+    enablefullscreen: enablefullscreen,
+    closable: closable,
+    listener: listener,
+    itemlabel: itemlabel,
+    itemlink: itemlink,
+    itemicon: itemicon,
+    itemchildren: itemchildren,
+    onToggleExpand: toggleExpand,
+    onToggleFullScreen: toggleFullScreen,
+    onToggleHelp: toggleHelp,
+    onClose: handleClose,
+    onActionsclick: onActionsclick
+  })), __jsx(_material.Box, {
+    hidden: !isExpanded,
+    className: "panel-content",
+    ref: panelContentRef
+  }, __jsx(_material.Box, {
+    className: (0, _clsx["default"])("panel-body", {
+      "show-help": helpVisible
+    })
+  }, props.renderPartial ? props.renderPartial(props) : bodyContent), helptext && __jsx(_material.Box, {
+    component: "aside",
+    className: (0, _clsx["default"])("panel-help-message", {
+      "show-help": helpVisible
+    })
+  }, __jsx(_material.Typography, {
+    variant: "h5",
+    className: "panel-help-header"
+  }, "Help"), __jsx(_material.Box, {
+    className: "panel-help-content",
+    dangerouslySetInnerHTML: {
+      __html: _dompurify["default"].sanitize(helptext)
+    }
+  }))), !hideFooter && footerContent);
+};
+var WmPanelFooter = exports.WmPanelFooter = function WmPanelFooter(_ref) {
+  var children = _ref.children,
+    name = _ref.name;
+  return __jsx("div", {
+    className: "app-panel-footer panel-footer clearfix",
+    "aria-label": name,
+    name: name
+  }, children);
+};
+WmPanelFooter.displayName = "WmPanelFooter";
+WmPanel.displayName = "WmPanel";
+
+/**
+ * The WmPanel component is a collapsible container with header, optional
+ * fullscreen mode, and action menu support.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/containers-panel--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/containers-panel--docs)
+ *
+ * @param props - {@link WmPanelProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmPanel);