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

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/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,118 @@
+import React, { useEffect, useState, useCallback, useRef } from "react";
+const usePanelExpansion = (initialExpanded = true, onExpand, onCollapse, name, listener) => {
+  const [isExpanded, setIsExpanded] = useState(initialExpanded);
+  const isExpandedRef = useRef(initialExpanded);
+  const toggleExpand = useCallback(
+    (event) => {
+      var _a, _b;
+      if (event && event.preventDefault) {
+        event.preventDefault();
+      }
+      const newExpanded = !isExpandedRef.current;
+      isExpandedRef.current = newExpanded;
+      setIsExpanded(newExpanded);
+      if (newExpanded) {
+        onExpand == null ? void 0 : onExpand(event || {}, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+      } else {
+        onCollapse == null ? void 0 : onCollapse(event || {}, (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name]);
+      }
+    },
+    [onExpand, onCollapse, name, listener]
+  );
+  useEffect(() => {
+    setIsExpanded(initialExpanded);
+    isExpandedRef.current = initialExpanded;
+  }, [initialExpanded]);
+  useEffect(() => {
+    isExpandedRef.current = isExpanded;
+  }, [isExpanded]);
+  return { isExpanded, toggleExpand, isExpandedRef };
+};
+const usePanelFullscreen = (initialFullscreen = false, enablefullscreen = false, onFullscreen, onExitfullscreen, name, listener) => {
+  const [isFullscreen, setIsFullscreen] = useState(initialFullscreen);
+  const toggleFullScreen = useCallback(
+    (event) => {
+      var _a, _b;
+      if (!enablefullscreen) return;
+      const newFullscreen = !isFullscreen;
+      setIsFullscreen(newFullscreen);
+      if (newFullscreen) {
+        onFullscreen == null ? void 0 : onFullscreen(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+        document.body.style.overflow = "hidden";
+      } else {
+        onExitfullscreen == null ? void 0 : onExitfullscreen(event, (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name]);
+        document.body.style.overflow = "";
+      }
+    },
+    [isFullscreen, enablefullscreen, onFullscreen, onExitfullscreen, name, listener]
+  );
+  useEffect(() => {
+    setIsFullscreen(initialFullscreen);
+  }, [initialFullscreen]);
+  useEffect(() => {
+    return () => {
+      if (isFullscreen) {
+        document.body.style.overflow = "";
+      }
+    };
+  }, [isFullscreen]);
+  return { isFullscreen, toggleFullScreen };
+};
+const usePanelDimensions = (height, isFullscreen, hideFooter, panelRef, panelContentRef, panelHeaderRef) => {
+  const computeDimensions = useCallback(() => {
+    var _a, _b;
+    if (!panelRef || !panelContentRef || !panelHeaderRef) return;
+    const headerHeight = ((_a = panelHeaderRef.current) == null ? void 0 : _a.offsetHeight) || 0;
+    const footer = (_b = panelRef.current) == null ? void 0 : _b.querySelector(".panel-footer");
+    const footerHeight = (footer == null ? void 0 : footer.offsetHeight) || 0;
+    const content = panelContentRef.current;
+    const vHeight = window.innerHeight;
+    let inlineHeight = "";
+    if (isFullscreen) {
+      inlineHeight = hideFooter ? vHeight - headerHeight : vHeight - (footerHeight + headerHeight);
+    } else {
+      inlineHeight = height || "";
+    }
+    if (content) {
+      content.style.height = typeof inlineHeight === "number" ? `${inlineHeight}px` : inlineHeight.toString();
+    }
+  }, [height, isFullscreen, hideFooter]);
+  useEffect(() => {
+    const handleResize = () => {
+      computeDimensions();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [computeDimensions]);
+  return { computeDimensions };
+};
+const useChildrenClassification = (children) => {
+  const isWmPanelFooter = (element) => {
+    const elementType = element.type;
+    const props = element.props;
+    if (props.WmPanelFooter || props["data-wm-panel-footer"]) {
+      return true;
+    }
+    if (typeof elementType === "function") {
+      const component = elementType;
+      return !!(component.WmPanelFooter || component.displayName === "WmPanelFooter");
+    }
+    return false;
+  };
+  return {
+    bodyContent: React.Children.toArray(children).filter((child) => {
+      if (!React.isValidElement(child)) return true;
+      return !isWmPanelFooter(child);
+    }),
+    footerContent: React.Children.toArray(children).filter((child) => {
+      if (!React.isValidElement(child)) return false;
+      return isWmPanelFooter(child);
+    })
+  };
+};
+export {
+  useChildrenClassification,
+  usePanelDimensions,
+  usePanelExpansion,
+  usePanelFullscreen
+};

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

@@ -0,0 +1,121 @@
+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;
+    loading?: boolean;
+    showSkeleton?: boolean;
+    widget?: string;
+}>;
+export default _default;

package/components/container/panel/index.js

@@ -0,0 +1,344 @@
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { Box, Typography } from "@mui/material";
+import DOMPurify from "dompurify";
+import {
+  usePanelExpansion,
+  usePanelFullscreen,
+  usePanelDimensions,
+  useChildrenClassification
+} from "./hooks";
+import PanelHeader from "./components/panel-header";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const WmPanel = (props) => {
+  const _a = props, {
+    actions,
+    badgetype = "default",
+    badgevalue,
+    closable = false,
+    collapsible = false,
+    enablefullscreen = false,
+    expanded = true,
+    fullscreen = false,
+    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: onPropertyChange,
+    listener,
+    Widgets
+  } = _a, restProps = __objRest(_a, [
+    "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",
+    // HOC related props - extract to prevent passing to DOM
+    "onPropertyChange",
+    "listener",
+    "Widgets"
+  ]);
+  const [helpVisible, setHelpVisible] = useState(false);
+  const panelRef = useRef(null);
+  const panelHeaderRef = useRef(null);
+  const panelContentRef = useRef(null);
+  const [show, setShow] = useState(true);
+  const hasTriggeredOnLoadRef = useRef(false);
+  const { isExpanded, toggleExpand, isExpandedRef } = usePanelExpansion(
+    expanded,
+    onExpand,
+    onCollapse,
+    name,
+    listener
+  );
+  const { isFullscreen, toggleFullScreen } = usePanelFullscreen(
+    fullscreen,
+    enablefullscreen,
+    onFullscreen,
+    onExitfullscreen,
+    name,
+    listener
+  );
+  const { bodyContent, footerContent } = useChildrenClassification(children);
+  const hideFooter = !footerContent.length || !isExpanded;
+  const { computeDimensions } = usePanelDimensions(
+    height,
+    isFullscreen,
+    hideFooter,
+    panelRef,
+    panelContentRef,
+    panelHeaderRef
+  );
+  const handleClose = (event) => {
+    var _a2;
+    setShow(false);
+    if (onPropertyChange) {
+      onPropertyChange("show", false);
+    }
+    if (onClose) {
+      onClose(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+    }
+  };
+  const toggleHelp = () => setHelpVisible(!helpVisible);
+  const handleMouseEnter = (event) => {
+    var _a2;
+    onMouseEnter == null ? void 0 : onMouseEnter(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+  };
+  const handleMouseLeave = (event) => {
+    var _a2;
+    onMouseLeave == null ? void 0 : onMouseLeave(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+  };
+  const handleMouseOver = (event) => {
+    var _a2;
+    onMouseOver == null ? void 0 : onMouseOver(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+  };
+  const handleMouseOut = (event) => {
+    var _a2;
+    onMouseOut == null ? void 0 : onMouseOut(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+  };
+  useEffect(() => {
+    var _a2;
+    if (hasTriggeredOnLoadRef.current || !isExpanded) return;
+    hasTriggeredOnLoadRef.current = true;
+    onLoad == null ? void 0 : onLoad((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+  }, [isExpanded]);
+  useEffect(() => {
+    if (isExpanded) {
+      computeDimensions();
+    }
+  }, [isExpanded, height, isFullscreen, hideFooter, computeDimensions]);
+  useEffect(() => {
+    const handleEscKey = (event) => {
+      if (closable && event.key === "Escape") {
+        handleClose({});
+      }
+    };
+    if (closable) {
+      window.addEventListener("keydown", handleEscKey);
+      return () => window.removeEventListener("keydown", handleEscKey);
+    }
+  }, [closable]);
+  const showHeader = Boolean(
+    iconurl || iconclass || collapsible || actions && (Array.isArray(actions) ? actions.length > 0 : true) || title || subheading || enablefullscreen
+  );
+  const collapse = () => {
+    if (isExpandedRef.current) {
+      toggleExpand();
+    }
+  };
+  const expand = () => {
+    if (!isExpandedRef.current) {
+      toggleExpand();
+    }
+  };
+  const close = () => {
+    if (show) {
+      handleClose({});
+    }
+  };
+  const toggle = () => {
+    toggleExpand();
+  };
+  useEffect(() => {
+    if (listener == null ? void 0 : listener.onChange) {
+      listener.onChange(name, {
+        collapse,
+        expand,
+        close,
+        toggle,
+        toggleExpand,
+        isExpanded,
+        isFullscreen,
+        toggleFullScreen,
+        show
+      });
+    }
+  }, []);
+  const componentProps = {
+    subheading,
+    iconclass,
+    autoclose: props.autoclose,
+    title,
+    name,
+    badgevalue,
+    badgetype,
+    hint,
+    enablefullscreen: enablefullscreen.toString(),
+    animation: props.animation,
+    show: props.show,
+    "data-widget-id": props["data-widget-id"]
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    __spreadProps(__spreadValues({
+      ref: panelRef,
+      className: clsx("app-panel panel", className, {
+        fullscreen: isFullscreen,
+        "show-help": helpVisible
+      }),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseOver: handleMouseOver,
+      onMouseOut: handleMouseOut,
+      hidden: !show,
+      component: "div"
+    }, removeInvalidAttributes(componentProps)), {
+      style: __spreadValues(__spreadValues({}, props.styles), props.conditionalstyle),
+      children: [
+        showHeader && /* @__PURE__ */ jsx(Box, { className: clsx("panel-heading", { "show-help": helpVisible }), ref: panelHeaderRef, children: /* @__PURE__ */ jsx(
+          PanelHeader,
+          {
+            title,
+            subheading,
+            iconclass,
+            iconurl,
+            iconwidth,
+            iconheight,
+            iconmargin,
+            badgevalue,
+            badgetype,
+            actions,
+            helptext,
+            isExpanded,
+            isFullscreen,
+            collapsible,
+            enablefullscreen,
+            closable,
+            listener,
+            itemlabel,
+            itemlink,
+            itemicon,
+            itemchildren,
+            onToggleExpand: toggleExpand,
+            onToggleFullScreen: toggleFullScreen,
+            onToggleHelp: toggleHelp,
+            onClose: handleClose,
+            onActionsclick
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Box, { hidden: !isExpanded, className: "panel-content", ref: panelContentRef, children: [
+          /* @__PURE__ */ jsx(Box, { className: clsx("panel-body", { "show-help": helpVisible }), children: props.renderPartial ? props.renderPartial(props) : bodyContent }),
+          helptext && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              component: "aside",
+              className: clsx("panel-help-message", { "show-help": helpVisible }),
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "panel-help-header", children: "Help" }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    className: "panel-help-content",
+                    dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(helptext) }
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        !hideFooter && footerContent
+      ]
+    })
+  );
+};
+const WmPanelFooter = ({ children, name }) => {
+  return /* @__PURE__ */ jsx("div", { className: "app-panel-footer panel-footer clearfix", "aria-label": name, name, children });
+};
+WmPanelFooter.displayName = "WmPanelFooter";
+WmPanel.displayName = "WmPanel";
+var panel_default = withBaseWrapper(WmPanel);
+export {
+  WmPanel,
+  WmPanelFooter,
+  panel_default as default
+};