@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/dist/esm/components/modal/Modal.js

@@ -0,0 +1,152 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import { cn } from '@react-fabric/utilities';
+import { useId, use, useEffect, Activity } from 'react';
+import { LoadingLine } from '../animations/LoadingLine.js';
+import { Icon } from '../icon/Icon.js';
+import { ModalContext } from '../../context/context.js';
+import { Titlebar } from '../titlebar/Titlebar.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var _excluded = ["icon", "className", "classNames", "title", "actions", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth", "closeOnEscape"];
+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), true).forEach(function (r) { _defineProperty(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; }
+function Modal(_ref) {
+  var icon = _ref.icon,
+    className = _ref.className,
+    classNames = _ref.classNames,
+    title = _ref.title,
+    actions = _ref.actions,
+    onClose = _ref.onClose,
+    onBeforeClose = _ref.onBeforeClose,
+    children = _ref.children,
+    loading = _ref.loading,
+    root = _ref.root,
+    size = _ref.size,
+    hideMask = _ref.hideMask,
+    width = _ref.width,
+    height = _ref.height,
+    minHeight = _ref.minHeight,
+    minWidth = _ref.minWidth,
+    closeOnEscape = _ref.closeOnEscape,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var id = useId();
+  var _use = use(ModalContext),
+    activeModal = _use.activeModal,
+    registerModal = _use.registerModal,
+    removeModal = _use.removeModal;
+  var _useFloating = useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        if (id === activeModal) handleClose(null);
+      }
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: closeOnEscape,
+    enabled: id === activeModal
+  });
+  var role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClose = function handleClose(args) {
+    void Promise.resolve(onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose(args)).then(function (ret) {
+      if (ret !== false) {
+        if (refs.floating.current) refs.floating.current.dataset.show = "false";
+        setTimeout(function () {
+          onClose === null || onClose === void 0 || onClose(args);
+        }, 250);
+      }
+      if (ret === false) setTimeout(function () {
+        var _refs$floating$curren;
+        return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[role='dialog']")) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.focus();
+      }, 50);
+    });
+  };
+  useEffect(function () {
+    if (activeModal === id) {
+      var tmr = setTimeout(function () {
+        if (refs.floating.current) refs.floating.current.dataset.show = "true";
+      }, 50);
+      return function () {
+        clearTimeout(tmr);
+      };
+    }
+  }, [activeModal, id, refs.floating]);
+  useEffect(function () {
+    registerModal === null || registerModal === void 0 || registerModal(id, function () {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(null);
+    });
+    return function () {
+      removeModal === null || removeModal === void 0 || removeModal(id);
+    };
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [id]);
+  return /*#__PURE__*/jsx(Activity, {
+    mode: id === activeModal ? "visible" : "hidden",
+    children: /*#__PURE__*/jsx(FloatingPortal, {
+      root: root,
+      children: /*#__PURE__*/jsx(FloatingOverlay, {
+        lockScroll: true,
+        style: {
+          zIndex: "var(--z-overlay-mask)",
+          position: "absolute",
+          overflow: "hidden"
+        },
+        className: cn("grid place-items-center p-16", !hideMask && "bg-tint-100/20 backdrop-blur-sm"),
+        children: /*#__PURE__*/jsx(FloatingFocusManager, {
+          context: context,
+          modal: true,
+          children: /*#__PURE__*/jsxs("dialog", _objectSpread(_objectSpread(_objectSpread({
+            className: cn("fabric-modal", className, classNames === null || classNames === void 0 ? void 0 : classNames.root, "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-160", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+            style: {
+              width: width,
+              height: height,
+              minHeight: minHeight,
+              minWidth: minWidth
+            },
+            ref: function ref(el) {
+              return refs.setFloating(el);
+            }
+          }, getFloatingProps()), props), {}, {
+            children: [/*#__PURE__*/jsx(Titlebar, {
+              title: title,
+              icon: icon,
+              actions: /*#__PURE__*/jsxs(Fragment, {
+                children: [/*#__PURE__*/jsx("div", {
+                  className: "px-1 leading-none",
+                  children: actions
+                }), /*#__PURE__*/jsx("button", {
+                  className: "size-fit cursor-pointer leading-none outline-none",
+                  onClick: function onClick() {
+                    return handleClose(null);
+                  },
+                  children: /*#__PURE__*/jsx(Icon, {
+                    "data-ref": "panelClose",
+                    className: cn("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
+                    icon: "icon-[mdi--close]"
+                  })
+                })]
+              }),
+              className: cn(classNames === null || classNames === void 0 ? void 0 : classNames.titlebar),
+              classNames: classNames
+            }), loading && /*#__PURE__*/jsx(LoadingLine, {}), /*#__PURE__*/jsx("div", {
+              role: "dialog",
+              className: cn("fabric-modalBody", classNames === null || classNames === void 0 ? void 0 : classNames.body, "flex-1 grid overflow-hidden"),
+              children: children
+            })]
+          }))
+        })
+      })
+    })
+  });
+}
+
+export { Modal };

package/dist/esm/components/navigator/Navigator.js

@@ -2,55 +2,100 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
-import { HotKey } from '../../hotkeys/HotKey.js';
-import { CoreIcons } from '../../types/icons.js';
+import { isEmpty, cn } from '@react-fabric/utilities';
+import { useHotkeys } from '@tanstack/react-hotkeys';
 import { Icon } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["className", "onNavigate", "color"];
+var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
 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) { _defineProperty(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 Navigator = function Navigator(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(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 buttonClassName = "not-disabled:cursor-pointer not-disabled:hover:bg-tint-500/20 rounded leading-0 inline-block disabled:text-tint-500/50 disabled:cursor-not-allowed";
+
+/**
+ * A component that provides navigation controls for traversing through items.
+ * It includes previous and next buttons, and supports keyboard navigation.
+ *
+ * @example
+ * ```jsx
+ * <Navigator
+ *   className="my-navigator"
+ *   onNavigate={(dir) => console.log(`Navigate ${dir === -1 ? 'previous' : 'next'}`)}
+ *   color="blue"
+ *   length={10}
+ *   current={0}
+ * >
+ *   <span>Current Item: 1</span>
+ * </Navigator>
+ * ```
+ */
+function Navigator(_ref) {
   var className = _ref.className,
     onNavigate = _ref.onNavigate,
     color = _ref.color,
+    children = _ref.children,
+    length = _ref.length,
+    current = _ref.current,
+    disableKeyHandlers = _ref.disableKeyHandlers,
     aria = _objectWithoutProperties(_ref, _excluded);
+  var navPrev = function navPrev() {
+    return (isEmpty(current) || current !== 0) && onNavigate(-1);
+  };
+  var navNext = function navNext() {
+    return (isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(1);
+  };
+  useHotkeys([{
+    hotkey: "ArrowLeft",
+    callback: navPrev,
+    options: {
+      enabled: !disableKeyHandlers
+    }
+  }, {
+    hotkey: "ArrowRight",
+    callback: navNext,
+    options: {
+      enabled: !disableKeyHandlers
+    }
+  }]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, "inline-block leading-none")
+    "data-ref": "navigator",
+    className: cn(className, "inline-flex gap-1 items-center leading-none")
   }, aria), {}, {
-    children: [/*#__PURE__*/jsx(HotKey, {
-      keyCombo: "left",
-      handler: function handler() {
-        return onNavigate(-1);
-      }
-    }), /*#__PURE__*/jsx(HotKey, {
-      keyCombo: "right",
-      handler: function handler() {
-        return onNavigate(1);
-      }
-    }), /*#__PURE__*/jsx(Icon, {
-      rtlFlip: true,
-      color: color,
-      className: "text-[1em] p-1",
-      "aria-label": "previous",
-      "data-testid": "previous",
-      icon: CoreIcons.chevronLeft,
+    children: [/*#__PURE__*/jsx("button", {
+      type: "button",
+      className: buttonClassName,
+      disabled: !isEmpty(current) && current === 0,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(-1)];
-      }
-    }), /*#__PURE__*/jsx(Icon, {
-      rtlFlip: true,
-      className: "text-[1em] p-1",
-      color: color,
-      "aria-label": "next",
-      "data-testid": "next",
-      icon: CoreIcons.chevronRight,
+        return [e.stopPropagation(), navPrev()];
+      },
+      children: /*#__PURE__*/jsx(Icon, {
+        rtlFlip: true,
+        color: color,
+        className: "text-[1.25em] p-[0.125em]",
+        "aria-label": "previous",
+        "data-ref": "previous",
+        icon: "icon-[mdi--chevron-left]"
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "text-[1em]",
+      children: children
+    }), /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: buttonClassName,
+      disabled: !isEmpty(current) && current + 1 === length,
       onClick: function onClick(e) {
-        return [e.stopPropagation(), onNavigate(1)];
-      }
+        return [e.stopPropagation(), navNext()];
+      },
+      children: /*#__PURE__*/jsx(Icon, {
+        rtlFlip: true,
+        className: "text-[1.25em] p-[0.125em]",
+        color: color,
+        "aria-label": "next",
+        "data-ref": "next",
+        icon: "icon-[mdi--chevron-right]"
+      })
     })]
   }));
-};
+}
 
 export { Navigator };

package/dist/esm/components/panel/Panel.js

@@ -3,29 +3,55 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
-import { useMemo } from 'react';
+import { cn } from '@react-fabric/utilities';
+import { useHotkeySequences } from '@tanstack/react-hotkeys';
+import { useMemo, Activity } from 'react';
 import { usePropToggle } from '../../hooks/usePropToggle.js';
-import { CoreIcons } from '../../types/icons.js';
-import { Loading } from '../animations/Animations.js';
+import { LoadingLine } from '../animations/LoadingLine.js';
 import { Icon } from '../icon/Icon.js';
-import classes from './Panel.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { Titlebar } from '../titlebar/Titlebar.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "iconBg", "iconColor", "rtlFlip", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
+var _excluded = ["children", "className", "classNames", "title", "actions", "icon", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
 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) { _defineProperty(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 Panel = function Panel(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(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; }
+/**
+ * A component that represents a panel with a header, body, and optional actions.
+ * It supports expandable and collapsible functionality, loading state, and customizable styles.
+ * The panel can be resized and has a fixed position when expanded.
+ * It can be customized with different colors, icons, and behaviors.
+ * This component is useful for displaying content in a structured way, allowing users to interact with it through actions and toggles.
+ * It can be used in various applications where panels are needed, such as dashboards, settings pages, or content management systems.
+ *
+ * @example
+ * ```jsx
+ * <Panel
+ *   title="Panel Title"
+ *   icon="icon-[mdi--info]"
+ *   actions={<button>Action</button>}
+ *   expandable
+ *   collapsable
+ *   onExpand={() => console.log("Expanded")}
+ *   onCollapse={() => console.log("Collapsed")}
+ *   onClose={() => console.log("Closed")}
+ *   height="400px"
+ *   width="300px"
+ *   minHeight="200px"
+ *   minWidth="200px"
+ *   maxHeight="600px"
+ *   maxWidth="600px"
+ * >
+ *   <p>This is the content of the panel.</p>
+ * </Panel>
+ * ```
+ */
+function Panel(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    titleClassName = _ref.titleClassName,
-    headerClassName = _ref.headerClassName,
+    classNames = _ref.classNames,
     title = _ref.title,
     actions = _ref.actions,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     panelId = _ref.panelId,
     height = _ref.height,
     width = _ref.width,
@@ -54,8 +80,18 @@ var Panel = function Panel(_ref) {
   var hasTools = useMemo(function () {
     return !!expandable || !!collapsable || !!onClose;
   }, [expandable, collapsable, onClose]);
+  useHotkeySequences([{
+    sequence: ["Escape"],
+    callback: function callback() {
+      return toggleExpand();
+    },
+    options: {
+      enabled: expanded,
+      conflictBehavior: "allow"
+    }
+  }]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(classes.panel, className, "rounded-capped overflow-hidden outline grid", expanded ? "fixed inset-4 z-50" : "relative"),
+    className: cn("fabric-panel", className, "rounded-capped overflow-hidden outline grid group", expanded ? "fixed inset-4 z-50" : "relative", !collapsed && "not-last:border-b"),
     "data-ref": "panel",
     "data-collapsed": collapsed,
     style: expanded ? {} : collapsed ? {
@@ -71,57 +107,76 @@ var Panel = function Panel(_ref) {
       maxHeight: maxHeight
     }
   }, aria), {}, {
-    children: [/*#__PURE__*/jsxs("header", {
-      role: "none",
-      className: classNames(classes.panelHeader, headerClassName, "flex flex-nowrap items-center area-head"),
-      "data-testid": "panel-header",
-      onClick: collapsable ? toggleCollapse : undefined,
-      children: [onBack && /*#__PURE__*/jsx(Icon, {
+    children: [/*#__PURE__*/jsx(Titlebar, {
+      title: title,
+      icon: icon,
+      onClick: function onClick() {
+        return toggleCollapse();
+      },
+      prepend: !!onBack && /*#__PURE__*/jsx(Icon, {
+        rtlFlip: true,
         "data-ref": "panelBack",
-        className: classNames(classes.panelAction, "cursor-pointer"),
-        icon: CoreIcons.chevronLeft,
+        className: cn("fabric-panelAction", "cursor-pointer pointer-events-auto"),
+        icon: "icon-[mdi--chevron-left]"
+        // @ts-expect-error ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        ,
         onClick: onBack
-      }), icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
-        className: "p-2 text-md select-none pointer-events-none"
-      }), /*#__PURE__*/jsx("div", {
-        className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
-        children: title
-      }), /*#__PURE__*/jsx("div", {
-        className: "px-1",
-        children: actions
-      }), hasTools && /*#__PURE__*/jsxs("div", {
-        role: "none",
-        className: "px-1 gap-px flex",
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        },
-        children: [expandable && /*#__PURE__*/jsx(Icon, {
-          "data-ref": "panelExpand",
-          className: classNames(classes.panelAction, "cursor-pointer"),
-          icon: expanded ? CoreIcons.minimize : CoreIcons.maximize,
-          onClick: toggleExpand
-        }), !expanded && collapsable && /*#__PURE__*/jsx(Icon, {
-          "data-ref": "panelCollapse",
-          className: classNames(classes.panelAction, "cursor-pointer"),
-          icon: collapsed ? CoreIcons.expand : CoreIcons.collapse,
-          onClick: toggleCollapse
-        }), !expanded && onClose && /*#__PURE__*/jsx(Icon, {
-          "data-ref": "panelClose",
-          className: classNames(classes.panelAction, "cursor-pointer"),
-          icon: CoreIcons.close,
-          onClick: onClose
+      }),
+      actions: /*#__PURE__*/jsxs(Fragment, {
+        children: [actions, hasTools && /*#__PURE__*/jsxs("div", {
+          role: "none",
+          className: "px-1 gap-px flex",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          },
+          children: [expandable && /*#__PURE__*/jsx("button", {
+            type: "button",
+            className: "size-fit cursor-pointer leading-none outline-none",
+            onClick: function onClick() {
+              return toggleExpand();
+            },
+            children: /*#__PURE__*/jsx(Icon, {
+              "data-ref": "panelExpand",
+              className: cn("fabric-panelAction", "cursor-pointer pointer-events-auto"),
+              icon: expanded ? "icon-[mdi--fullscreen-exit]" : "icon-[mdi--fullscreen]"
+            })
+          }), !expanded && collapsable && /*#__PURE__*/jsx("button", {
+            type: "button",
+            className: "size-fit cursor-pointer leading-none outline-none",
+            onClick: function onClick() {
+              return toggleCollapse();
+            },
+            children: /*#__PURE__*/jsx(Icon, {
+              "data-ref": "panelCollapse",
+              className: cn("fabric-panelAction", "cursor-pointer pointer-events-auto"),
+              icon: collapsed ? "icon-[mdi--plus-box-outline]" : "icon-[mdi--minus-box-outline]"
+            })
+          }), !expanded && onClose && /*#__PURE__*/jsx("button", {
+            type: "button",
+            className: "size-fit cursor-pointer leading-none outline-none",
+            onClick: function onClick() {
+              return onClose();
+            },
+            children: /*#__PURE__*/jsx(Icon, {
+              "data-ref": "panelClose",
+              className: cn("fabric-panelAction", "cursor-pointer pointer-events-auto"),
+              icon: "icon-[mdi--close]"
+            })
+          })]
         })]
-      })]
-    }), (!collapsed || expanded) && /*#__PURE__*/jsxs("div", {
-      "data-testid": "panel-body",
-      className: classNames(classes.panelBody, "area-content grid overflow-hidden"),
-      children: [loading && /*#__PURE__*/jsx(Loading, {}), children]
+      }),
+      className: cn(classNames === null || classNames === void 0 ? void 0 : classNames.titlebar),
+      classNames: classNames
+    }), /*#__PURE__*/jsx(Activity, {
+      mode: !collapsed || expanded ? "visible" : "hidden",
+      children: /*#__PURE__*/jsxs("div", {
+        "data-ref": "panelBody",
+        className: cn("fabric-panelBody", classNames === null || classNames === void 0 ? void 0 : classNames.body, "area-content grid overflow-hidden"),
+        children: [loading && /*#__PURE__*/jsx(LoadingLine, {}), children]
+      })
     })]
   }));
-};
+}
 
 export { Panel };

package/dist/esm/components/panel/PanelGroup.js

@@ -1,13 +1,33 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import classNames from 'classnames';
-import { useState, Children, useCallback, cloneElement } from 'react';
+import { cn } from '@react-fabric/utilities';
+import { useState, cloneElement, Children, isValidElement } from 'react';
 import { useMemoDebugger, useEffectDebugger } from '../../hooks/useEffectDebugger.js';
-import classes from './Panel.module.css';
+import { cloneChildren } from '../../utils/cloneElement.js';
 import { jsx } from 'react/jsx-runtime';
 
-var PanelGroup = function PanelGroup(_ref) {
+/**
+ * A component that groups multiple panels together, allowing for one panel to be expanded at a time.
+ * This component allows you to manage a group of panels where only one can be expanded at a time.
+ * It accepts an `activePanel` prop to control which panel is currently expanded,
+ * and an `onActiveChange` callback that is triggered when the active panel changes.
+ * It uses the `Panel` component to render each individual panel within the group.
+ *
+ * @example
+ * ```jsx
+ * <PanelGroup
+ *   activePanel="panel1"
+ *   onActiveChange={(panelId) => console.log(`Active panel changed to: ${panelId}`)}
+ * >
+ *   <Panel panelId="panel1" title="Panel 1">Content for Panel 1</Panel>
+ *   <Panel panelId="panel2" title="Panel 2">Content for Panel 2</Panel>
+ *   <Panel panelId="panel3" title="Panel 3">Content for Panel 3</Panel>
+ * </PanelGroup>
+ * ```
+ */
+function PanelGroup(_ref) {
+  var _cloneChildren;
   var children = _ref.children,
     activePanel = _ref.activePanel,
     onActiveChange = _ref.onActiveChange;
@@ -16,35 +36,41 @@ var PanelGroup = function PanelGroup(_ref) {
     expandedPanel = _useState2[0],
     setExpandedPanel = _useState2[1];
   var panels = useMemoDebugger(function () {
-    return Children.toArray(children).map(function (child, index) {
-      return child.props.panelId || index;
-    });
+    return (
+      // eslint-disable-next-line @eslint-react/no-children-to-array
+      Children.toArray(children).map(function (child, index) {
+        var _child$props;
+        return (/*#__PURE__*/isValidElement(child) ? (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.panelId : "") || index;
+      })
+    );
   }, [children], "PanelGroup children");
   useEffectDebugger(function () {
     setExpandedPanel(activePanel !== null && activePanel !== void 0 ? activePanel : panels[0]);
   }, [activePanel, panels], "PanelGroup setActive");
-  var changeExpanded = useCallback(function (collapsed, id, handler) {
+  var changeExpanded = function changeExpanded(collapsed, id, handler) {
     if (!collapsed) {
       setExpandedPanel(id);
       onActiveChange === null || onActiveChange === void 0 || onActiveChange(id);
     }
     handler === null || handler === void 0 || handler(collapsed);
     return id !== expandedPanel;
-  }, [onActiveChange, expandedPanel]);
+  };
   return /*#__PURE__*/jsx("div", {
     "data-ref": "panelGroup",
-    className: classNames(classes.panelGroup, "flex flex-col overflow-auto area-content p-px"),
-    children: Children.toArray(children).map(function (child, index) {
-      return /*#__PURE__*/cloneElement(child, {
-        panelId: child.props.panelId || index,
+    className: cn("fabric-panelGroup", "flex flex-col overflow-auto scroll-thin area-content p-px"),
+    children: (_cloneChildren = cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child, index) {
+      var childEl = child;
+      var id = childEl.props.panelId || index;
+      return /*#__PURE__*/cloneElement(childEl, {
+        panelId: id,
         collapsable: true,
-        onCollapse: function onCollapse(b, id) {
-          return changeExpanded(b, id, child.props.onCollapse);
+        onCollapse: function onCollapse(b) {
+          return changeExpanded(b, id, childEl.props.onCollapse);
         },
-        collapsed: expandedPanel !== (child.props.panelId || index)
+        collapsed: expandedPanel !== (childEl.props.panelId || index)
       });
     })
   });
-};
+}
 
 export { PanelGroup };