@wavemaker-ai/react-runtime 1.0.0-rc.647499 → 1.0.0-rc.647565

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

@@ -1,149 +1,169 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _material = require("@mui/material");
-var _dompurify = _interopRequireDefault(require("dompurify"));
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _ExpandLess = _interopRequireDefault(require("@mui/icons-material/ExpandLess"));
-var _Fullscreen = _interopRequireDefault(require("@mui/icons-material/Fullscreen"));
-var _FullscreenExit = _interopRequireDefault(require("@mui/icons-material/FullscreenExit"));
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
-var _menu = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/navigation/menu"));
-var _styleUtils = require("@wavemaker-ai/react-runtime/utils/style-utils");
-var __jsx = _react["default"].createElement; // Icons
-var PanelHeader = function PanelHeader(_ref) {
-  var _listener$appLocale$L, _listener$appLocale, _listener$appLocale$L2, _listener$appLocale2, _listener$appLocale$L3, _listener$appLocale3, _listener$appLocale$L4, _listener$appLocale4;
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? "Title" : _ref$title,
-    subheading = _ref.subheading,
-    iconclass = _ref.iconclass,
-    iconurl = _ref.iconurl,
-    iconwidth = _ref.iconwidth,
-    iconheight = _ref.iconheight,
-    iconmargin = _ref.iconmargin,
-    badgevalue = _ref.badgevalue,
-    _ref$badgetype = _ref.badgetype,
-    badgetype = _ref$badgetype === void 0 ? "default" : _ref$badgetype,
-    actions = _ref.actions,
-    helptext = _ref.helptext,
-    isExpanded = _ref.isExpanded,
-    isFullscreen = _ref.isFullscreen,
-    collapsible = _ref.collapsible,
-    enablefullscreen = _ref.enablefullscreen,
-    closable = _ref.closable,
-    itemlabel = _ref.itemlabel,
-    itemlink = _ref.itemlink,
-    itemicon = _ref.itemicon,
-    itemchildren = _ref.itemchildren,
-    listener = _ref.listener,
-    onToggleExpand = _ref.onToggleExpand,
-    onToggleFullScreen = _ref.onToggleFullScreen,
-    onToggleHelp = _ref.onToggleHelp,
-    onClose = _ref.onClose,
-    onActionsclick = _ref.onActionsclick;
-  var handleActionItemClick = function handleActionItemClick(item) {
-    onActionsclick === null || onActionsclick === void 0 || onActionsclick(item);
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Box, IconButton } from "@mui/material";
+import DOMPurify from "dompurify";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import CloseIcon from "@mui/icons-material/Close";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+import WmMenu from "../../../../navigation/menu";
+import { toCssLength } from "../../../../../utils/style-utils";
+const PanelHeader = ({
+  title = "Title",
+  subheading,
+  iconclass,
+  iconurl,
+  iconwidth,
+  iconheight,
+  iconmargin,
+  badgevalue,
+  badgetype = "default",
+  actions,
+  helptext,
+  isExpanded,
+  isFullscreen,
+  collapsible,
+  enablefullscreen,
+  closable,
+  itemlabel,
+  itemlink,
+  itemicon,
+  itemchildren,
+  listener,
+  onToggleExpand,
+  onToggleFullScreen,
+  onToggleHelp,
+  onClose,
+  onActionsclick
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const handleActionItemClick = (item) => {
+    onActionsclick == null ? void 0 : onActionsclick(item);
   };
-
-  /** Matches legacy inline: width/height `|| "auto"`, margin `|| "0"` whenever icon image renders. */
-  var panelIconImgStyle = iconurl ? {
-    "--wm-panel-icon-width": iconwidth ? (0, _styleUtils.toCssLength)(iconwidth) : "auto",
-    "--wm-panel-icon-height": iconheight ? (0, _styleUtils.toCssLength)(iconheight) : "auto",
+  const panelIconImgStyle = iconurl ? {
+    "--wm-panel-icon-width": iconwidth ? toCssLength(iconwidth) : "auto",
+    "--wm-panel-icon-height": iconheight ? toCssLength(iconheight) : "auto",
     "--wm-panel-icon-margin": iconmargin ? iconmargin : "0"
-  } : undefined;
-  return __jsx(_material.Box, {
-    className: "panel-title"
-  }, __jsx(_material.Box, {
-    component: "a",
-    className: "panel-toggle",
-    onClick: onToggleExpand,
-    "aria-expanded": isExpanded
-  }, __jsx(_material.Box, {
-    className: "pull-left"
-  }, iconclass && !iconurl && __jsx(_material.Box, {
-    component: "i",
-    className: "app-icon panel-icon ".concat(iconclass)
-  }), iconurl && __jsx(_material.Box, {
-    component: "img",
-    "data-identifier": "img",
-    title: "iconurl",
-    alt: "Panel icon",
-    className: (0, _clsx["default"])("panel-image-icon", "wm-panel-header-icon-img"),
-    src: iconurl,
-    style: panelIconImgStyle
-  })), __jsx(_material.Box, {
-    className: "pull-left"
-  }, title && __jsx(_material.Box, {
-    className: "heading",
-    title: title,
-    dangerouslySetInnerHTML: {
-      __html: _dompurify["default"].sanitize(title)
-    }
-  }), subheading && __jsx(_material.Box, {
-    className: "description",
-    dangerouslySetInnerHTML: {
-      __html: _dompurify["default"].sanitize(subheading)
-    }
-  }))), __jsx(_material.Box, {
-    className: "panel-actions"
-  }, badgevalue && __jsx(_material.Box, {
-    component: "span",
-    className: "app-badge label label-".concat(badgetype),
-    color: badgetype === "default" ? "primary" : badgetype
-  }, badgevalue), actions && actions.length > 0 && __jsx(_menu["default"], {
-    type: "anchor",
-    dataset: actions,
-    itemicon: itemicon,
-    itemlabel: itemlabel,
-    itemlink: itemlink,
-    itemchildren: itemchildren,
-    panelPosition: "left",
-    iconclass: "wi wi-more-vert",
-    name: "panel-actions",
-    className: "icon-position-left dropdown-menu pull-right",
-    onActionsclick: handleActionItemClick,
-    listener: listener !== null && listener !== void 0 ? listener : {},
-    arialabel: "dropdown"
-  }), helptext && __jsx(_material.IconButton, {
-    "aria-label": "Help",
-    className: "app-icon panel-action wi",
-    title: "Help",
-    onClick: onToggleHelp
-  }, __jsx(_HelpOutline["default"], {
-    className: "wi-question"
-  })), collapsible && __jsx(_material.IconButton, {
-    "aria-label": "Collapse/Expand",
-    className: "app-icon panel-action wi",
-    title: "".concat((_listener$appLocale$L = listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_COLLAPSE) !== null && _listener$appLocale$L !== void 0 ? _listener$appLocale$L : "Collapse", "/").concat((_listener$appLocale$L2 = listener === null || listener === void 0 || (_listener$appLocale2 = listener.appLocale) === null || _listener$appLocale2 === void 0 ? void 0 : _listener$appLocale2.LABEL_EXPAND) !== null && _listener$appLocale$L2 !== void 0 ? _listener$appLocale$L2 : "Expand"),
-    onClick: onToggleExpand,
-    "aria-expanded": isExpanded
-  }, isExpanded ? __jsx(_ExpandLess["default"], {
-    className: "wi-minus"
-  }) : __jsx(_ExpandMore["default"], {
-    className: "wi-plus"
-  })), enablefullscreen && __jsx(_material.IconButton, {
-    "aria-label": "Fullscreen/Exit",
-    className: "app-icon panel-action wi",
-    title: "".concat((_listener$appLocale$L3 = listener === null || listener === void 0 || (_listener$appLocale3 = listener.appLocale) === null || _listener$appLocale3 === void 0 ? void 0 : _listener$appLocale3.LABEL_FULLSCREEN) !== null && _listener$appLocale$L3 !== void 0 ? _listener$appLocale$L3 : "Fullscreen", "/").concat((_listener$appLocale$L4 = listener === null || listener === void 0 || (_listener$appLocale4 = listener.appLocale) === null || _listener$appLocale4 === void 0 ? void 0 : _listener$appLocale4.LABEL_EXITFULLSCREEN) !== null && _listener$appLocale$L4 !== void 0 ? _listener$appLocale$L4 : "Exit Fullscreen"),
-    onClick: onToggleFullScreen
-  }, isFullscreen ? __jsx(_FullscreenExit["default"], {
-    className: "wi-fullscreen-exit"
-  }) : __jsx(_Fullscreen["default"], {
-    className: "wi-fullscreen"
-  })), closable && __jsx(_material.IconButton, {
-    "aria-label": "Close",
-    className: "app-icon panel-action",
-    title: "Close",
-    onClick: onClose
-  }, __jsx(_Close["default"], {
-    className: "wi wi-close"
-  }))));
+  } : void 0;
+  return /* @__PURE__ */ jsxs(Box, { className: "panel-title", children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "a",
+        className: "panel-toggle",
+        onClick: onToggleExpand,
+        "aria-expanded": isExpanded,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: "pull-left", children: [
+            iconclass && !iconurl && /* @__PURE__ */ jsx(Box, { component: "i", className: `app-icon panel-icon ${iconclass}` }),
+            iconurl && /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "img",
+                "data-identifier": "img",
+                title: "iconurl",
+                alt: "Panel icon",
+                className: clsx("panel-image-icon", "wm-panel-header-icon-img"),
+                src: iconurl,
+                style: panelIconImgStyle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { className: "pull-left", children: [
+            title && /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "heading",
+                title,
+                dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(title) }
+              }
+            ),
+            subheading && /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "description",
+                dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(subheading) }
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { className: "panel-actions", children: [
+      badgevalue && /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          className: `app-badge label label-${badgetype}`,
+          color: badgetype === "default" ? "primary" : badgetype,
+          children: badgevalue
+        }
+      ),
+      actions && actions.length > 0 && /* @__PURE__ */ jsx(
+        WmMenu,
+        {
+          type: "anchor",
+          dataset: actions,
+          itemicon,
+          itemlabel,
+          itemlink,
+          itemchildren,
+          panelPosition: "left",
+          iconclass: "wi wi-more-vert",
+          name: "panel-actions",
+          className: "icon-position-left dropdown-menu pull-right",
+          onActionsclick: handleActionItemClick,
+          listener: listener != null ? listener : {},
+          arialabel: "dropdown"
+        }
+      ),
+      helptext && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "Help",
+          className: "app-icon panel-action wi",
+          title: "Help",
+          onClick: onToggleHelp,
+          children: /* @__PURE__ */ jsx(HelpOutlineIcon, { className: "wi-question" })
+        }
+      ),
+      collapsible && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "Collapse/Expand",
+          className: "app-icon panel-action wi",
+          title: `${(_b = (_a = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _a.LABEL_COLLAPSE) != null ? _b : "Collapse"}/${(_d = (_c = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _c.LABEL_EXPAND) != null ? _d : "Expand"}`,
+          onClick: onToggleExpand,
+          "aria-expanded": isExpanded,
+          children: isExpanded ? /* @__PURE__ */ jsx(ExpandLessIcon, { className: "wi-minus" }) : /* @__PURE__ */ jsx(ExpandMoreIcon, { className: "wi-plus" })
+        }
+      ),
+      enablefullscreen && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "Fullscreen/Exit",
+          className: "app-icon panel-action wi",
+          title: `${(_f = (_e = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _e.LABEL_FULLSCREEN) != null ? _f : "Fullscreen"}/${(_h = (_g = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _g.LABEL_EXITFULLSCREEN) != null ? _h : "Exit Fullscreen"}`,
+          onClick: onToggleFullScreen,
+          children: isFullscreen ? /* @__PURE__ */ jsx(FullscreenExitIcon, { className: "wi-fullscreen-exit" }) : /* @__PURE__ */ jsx(FullscreenIcon, { className: "wi-fullscreen" })
+        }
+      ),
+      closable && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "Close",
+          className: "app-icon panel-action",
+          title: "Close",
+          onClick: onClose,
+          children: /* @__PURE__ */ jsx(CloseIcon, { className: "wi wi-close" })
+        }
+      )
+    ] })
+  ] });
+};
+var panel_header_default = PanelHeader;
+export {
+  panel_header_default as default
 };
-var _default = exports["default"] = PanelHeader;

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

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

package/components/container/panel/hooks.js

@@ -1,144 +1,118 @@
-"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 () {
+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]);
-
-  // Update ref whenever state changes from external sources
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     isExpandedRef.current = isExpanded;
   }, [isExpanded]);
-  return {
-    isExpanded: isExpanded,
-    toggleExpand: toggleExpand,
-    isExpandedRef: isExpandedRef
-  };
+  return { isExpanded, toggleExpand, 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 () {
+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]);
-  (0, _react.useEffect)(function () {
-    return function () {
+  useEffect(() => {
+    return () => {
       if (isFullscreen) {
         document.body.style.overflow = "";
       }
     };
   }, [isFullscreen]);
-  return {
-    isFullscreen: isFullscreen,
-    toggleFullScreen: toggleFullScreen
-  };
+  return { isFullscreen, toggleFullScreen };
 };
-var usePanelDimensions = exports.usePanelDimensions = function usePanelDimensions(height, isFullscreen, hideFooter, panelRef, panelContentRef, panelHeaderRef) {
-  var computeDimensions = (0, _react.useCallback)(function () {
-    var _panelHeaderRef$curre, _panelRef$current;
+const usePanelDimensions = (height, isFullscreen, hideFooter, panelRef, panelContentRef, panelHeaderRef) => {
+  const computeDimensions = useCallback(() => {
+    var _a, _b;
     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 = "";
+    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" ? "".concat(inlineHeight, "px") : inlineHeight.toString();
+      content.style.height = typeof inlineHeight === "number" ? `${inlineHeight}px` : inlineHeight.toString();
     }
   }, [height, isFullscreen, hideFooter]);
-  (0, _react.useEffect)(function () {
-    var handleResize = function handleResize() {
+  useEffect(() => {
+    const handleResize = () => {
       computeDimensions();
     };
     window.addEventListener("resize", handleResize);
-    return function () {
-      return window.removeEventListener("resize", handleResize);
-    };
+    return () => window.removeEventListener("resize", handleResize);
   }, [computeDimensions]);
-  return {
-    computeDimensions: computeDimensions
-  };
+  return { computeDimensions };
 };
-var useChildrenClassification = exports.useChildrenClassification = function useChildrenClassification(children) {
-  var isWmPanelFooter = function isWmPanelFooter(element) {
-    var elementType = element.type;
-    var props = element.props;
+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") {
-      var component = elementType;
+      const 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;
+    bodyContent: React.Children.toArray(children).filter((child) => {
+      if (!React.isValidElement(child)) return true;
       return !isWmPanelFooter(child);
     }),
-    footerContent: _react["default"].Children.toArray(children).filter(function (child) {
-      if (! /*#__PURE__*/_react["default"].isValidElement(child)) return false;
+    footerContent: React.Children.toArray(children).filter((child) => {
+      if (!React.isValidElement(child)) return false;
       return isWmPanelFooter(child);
     })
   };
-};
+};
+export {
+  useChildrenClassification,
+  usePanelDimensions,
+  usePanelExpansion,
+  usePanelFullscreen
+};