@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/cjs/components/animations/Animations.js

@@ -10,7 +10,8 @@ require('@react-fabric/utilities');
 var Animations_module = require('./Animations.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["className", "color", "strokeColor", "type"];
+var _excluded = ["className", "color", "strokeColor", "type"],
+  _excluded2 = ["className"];
 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 AnimationIndicator = function AnimationIndicator(_ref) {
@@ -81,6 +82,7 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
     size = _ref3$size === void 0 ? "2rem" : _ref3$size;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
+    "data-testid": "spinner",
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -95,14 +97,19 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
 var Loading = function Loading() {
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: classNames(Animations_module.loader, "area-[loader] relative overflow-x-clip"),
+    "data-testid": "loading",
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"
     })
   });
 };
-var Skeleton = function Skeleton() {
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("p-2 animate-pulse flex gap-2 max-w-lg"),
+var Skeleton = function Skeleton(_ref4) {
+  var className = _ref4.className,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(className, "p-2 animate-pulse flex gap-2 max-w-lg"),
+    "data-testid": "skeleton"
+  }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "bg-tint-100 rounded aspect-square h-12"
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -125,7 +132,7 @@ var Skeleton = function Skeleton() {
         })]
       })]
     })]
-  });
+  }));
 };
 
 exports.AnimationBars = AnimationBars;

package/dist/cjs/components/avatar/Avatar.js

@@ -7,7 +7,6 @@ var utilities = require('@react-fabric/utilities');
 var BoringAvatar = require('boring-avatars');
 var classNames = require('classnames');
 var react = require('react');
-var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
 var getColor = require('../../utils/getColor.js');
 var Avatar_module = require('./Avatar.module.css');
 var jsxRuntime = require('react/jsx-runtime');
@@ -49,7 +48,7 @@ var Avatar = function Avatar(_ref) {
     setFallback = _useState2[1];
 
   /** ***************** style map *******************/
-  var styles = useEffectDebugger.useMemoDebugger(function () {
+  var styles = react.useMemo(function () {
     var s = {};
     if (bg) {
       s.backgroundColor = getColor.getColor(bg);
@@ -64,10 +63,10 @@ var Avatar = function Avatar(_ref) {
       s.fontSize = SizeMap[size];
     }
     return s;
-  }, [bg, color, size], "Avatar styles");
+  }, [bg, color, size]);
 
   /** ***************** render icon *******************/
-  var avatarImage = useEffectDebugger.useMemoDebugger(function () {
+  var avatarImage = react.useMemo(function () {
     setFallback(!avatar);
     return avatar && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "contents",
@@ -86,8 +85,8 @@ var Avatar = function Avatar(_ref) {
         }
       })]
     });
-  }, [avatar], "Avatar icon");
-  var fallbackAvatar = useEffectDebugger.useMemoDebugger(function () {
+  }, [avatar]);
+  var fallbackAvatar = react.useMemo(function () {
     if (fallbackIcon) {
       return utilities.isSvgPath(fallbackIcon) ? /*#__PURE__*/jsxRuntime.jsx("svg", {
         viewBox: viewBox,
@@ -128,7 +127,7 @@ var Avatar = function Avatar(_ref) {
       variant: variant,
       name: name
     });
-  }, [name, variant, fallbackIcon], "Avatar fallback");
+  }, [name, variant, fallbackIcon]);
   return /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
     role: "presentation",
     className: classNames(Avatar_module.avatar, className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), !rounded && "rounded", rounded && "rounded-full"),

package/dist/cjs/components/button/ConfirmButton.js

@@ -11,7 +11,7 @@ var reactI18next = require('react-i18next');
 var Button = require('./Button.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "message", "color", "okLabel", "cancelLabel", "onClick", "loading", "actionMessage", "showActionDone", "showActionDoneEvent"],
+var _excluded = ["ref", "message", "color", "okLabel", "cancelLabel", "onClick", "loading", "placement", "actionMessage", "showActionDone", "showActionDoneEvent"],
   _excluded2 = ["ref"];
 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; }
@@ -26,6 +26,8 @@ var ConfirmButton = function ConfirmButton(_ref) {
     cancelLabel = _ref.cancelLabel,
     onClick = _ref.onClick,
     loading = _ref.loading,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
     actionMessage = _ref.actionMessage,
     showActionDone = _ref.showActionDone,
     _ref$showActionDoneEv = _ref.showActionDoneEvent,
@@ -77,7 +79,7 @@ var ConfirmButton = function ConfirmButton(_ref) {
         }
       },
       strategy: "fixed",
-      placement: "bottom",
+      placement: placement,
       whileElementsMounted: react$1.autoUpdate,
       middleware: [react$1.shift({
         padding: 8

package/dist/cjs/components/card/Card.js

@@ -12,7 +12,7 @@ var nodeCheck = require('../../utils/nodeCheck.js');
 var Card_module = require('./Card.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData"];
+var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData", "ref"];
 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 Card = function Card(_ref) {
@@ -26,6 +26,7 @@ var Card = function Card(_ref) {
     draggable = _ref.draggable,
     dragKey = _ref.dragKey,
     dragData = _ref.dragData,
+    ref = _ref.ref,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useMemo = react.useMemo(function () {
       return react.Children.toArray(children).reduce(function (ret, node) {
@@ -46,7 +47,8 @@ var Card = function Card(_ref) {
         onDragStart: !draggable ? undefined : function (e) {
           var _e$dataTransfer;
           return dragKey && ((_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 ? void 0 : _e$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
-        }
+        },
+        ref: ref
       }, aria), {}, {
         children: [header, /*#__PURE__*/jsxRuntime.jsx("div", {
           role: "none",

package/dist/cjs/components/chip/Chip.js

@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm leading-none rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
+    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,
@@ -80,7 +80,7 @@ var Chip = function Chip(_ref) {
       color: iconColor,
       rtlFlip: rtlFlip
     }), children && /*#__PURE__*/jsxRuntime.jsx("label", {
-      className: classNames(Chip_module.chipLabel, "leading-none truncate"),
+      className: classNames(Chip_module.chipLabel, "truncate"),
       children: children
     }), onRemove && /*#__PURE__*/jsxRuntime.jsx("span", {
       role: "none",

package/dist/cjs/components/chip/Chip.module.css

@@ -1 +1 @@
-@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:.25em .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
+@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

package/dist/cjs/components/collapsable/Collapsable.js

@@ -11,7 +11,7 @@ var Icon = require('../icon/Icon.js');
 var Collapsable_module = require('./Collapsable.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "stickyHeader", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
 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 Collapsable = function Collapsable(_ref) {
@@ -22,6 +22,7 @@ var Collapsable = function Collapsable(_ref) {
     headerClassName = _ref.headerClassName,
     children = _ref.children,
     iconAlign = _ref.iconAlign,
+    stickyHeader = _ref.stickyHeader,
     _ref$iconClosed = _ref.iconClosed,
     iconClosed = _ref$iconClosed === void 0 ? icons.CoreIcons.chevronRight : _ref$iconClosed,
     _ref$iconOpen = _ref.iconOpen,
@@ -62,7 +63,7 @@ var Collapsable = function Collapsable(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames(Collapsable_module.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: classNames(Collapsable_module.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },

package/dist/cjs/components/dropdown/Dropdown.js

@@ -131,7 +131,8 @@ var DropdownElement = function DropdownElement(_ref) {
           style: _objectSpread({
             minWidth: minWidth,
             zIndex: "var(--z-popover)"
-          }, floatingStyles)
+          }, floatingStyles),
+          "data-testid": "dropdown-body"
         }, getFloatingProps({
           onClick: function onClick(e) {
             return e.stopPropagation();

package/dist/cjs/components/dropdown/DropdownTool.js

@@ -8,17 +8,18 @@ var Icon = require('../icon/Icon.js');
 var Dropdown = require('./Dropdown.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "className", "groupHover"];
+var _excluded = ["children", "className", "groupHover", "icon"];
 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 DropdownTool = function DropdownTool(_ref) {
   var children = _ref.children,
     className = _ref.className,
     groupHover = _ref.groupHover,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs(Dropdown.Dropdown, _objectSpread(_objectSpread({}, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      icon: icons.CoreIcons.caretDown,
+      icon: icon !== null && icon !== void 0 ? icon : icons.CoreIcons.caretDown,
       className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));

package/dist/cjs/components/icon/Icon.js

@@ -4,7 +4,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
-var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var react = require('react');
 var getColor = require('../../utils/getColor.js');
 var Icon_module = require('./Icon.module.css');
 var jsxRuntime = require('react/jsx-runtime');
@@ -40,7 +40,7 @@ var Icon = function Icon(_ref) {
     onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   /** ***************** style map *******************/
-  var styles = useEffectDebugger.useMemoDebugger(function () {
+  var styles = react.useMemo(function () {
     var s = {};
     if (bg) {
       s.backgroundColor = getColor.getColor(bg);
@@ -55,15 +55,15 @@ var Icon = function Icon(_ref) {
       s.fontSize = SizeMap[size];
     }
     return s;
-  }, [bg, color, size], "Icon styles");
+  }, [bg, color, size]);
 
   /** ***************** check if icon is svg path *******************/
-  var isSvg = useEffectDebugger.useMemoDebugger(function () {
+  var isSvg = react.useMemo(function () {
     return utilities.isSvgPath(icon);
-  }, [icon], "Icon isSvg");
+  }, [icon]);
 
   /** ***************** render icon *******************/
-  var iconEl = useEffectDebugger.useMemoDebugger(function () {
+  var iconEl = react.useMemo(function () {
     var _SvgTextSize$icon$len;
     if (!utilities.isString(icon)) {
       throw Error("Invalid icon expected string");
@@ -90,7 +90,7 @@ var Icon = function Icon(_ref) {
     }) : /*#__PURE__*/jsxRuntime.jsx("i", {
       className: "".concat(icon)
     });
-  }, [icon, isSvg, viewBox], "Icon el");
+  }, [icon, isSvg, viewBox]);
   return /*#__PURE__*/jsxRuntime.jsx("dfn", _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
     role: "presentation",

package/dist/cjs/components/menu/ContextMenu.js

@@ -9,15 +9,22 @@ var jsxRuntime = require('react/jsx-runtime');
 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 ContextMenu = function ContextMenu(_ref) {
+  var _refs$domReference$cu, _refs$domReference$cu2;
   var children = _ref.children,
-    menu = _ref.menu;
+    menu = _ref.menu,
+    disabled = _ref.disabled;
   var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var nodeId = react$1.useFloatingNodeId();
   var _useFloating = react$1.useFloating({
       open: isOpen,
-      onOpenChange: setIsOpen,
+      nodeId: nodeId,
+      onOpenChange: function onOpenChange(open, evt, reason) {
+        var target = evt === null || evt === void 0 ? void 0 : evt.target;
+        if (!(target !== null && target !== void 0 && target.closest(".menu-list"))) setIsOpen(open);
+      },
       strategy: "fixed",
       placement: "bottom-start",
       whileElementsMounted: react$1.autoUpdate,
@@ -26,8 +33,13 @@ var ContextMenu = function ContextMenu(_ref) {
     refs = _useFloating.refs,
     floatingStyles = _useFloating.floatingStyles,
     context = _useFloating.context;
-  var click = react$1.useClick(context, {});
-  var dismiss = react$1.useDismiss(context, {});
+  var click = react$1.useClick(context, {
+    toggle: true,
+    ignoreMouse: true
+  });
+  var dismiss = react$1.useDismiss(context, {
+    bubbles: true
+  });
   var _useInteractions = react$1.useInteractions([dismiss, click]),
     getFloatingProps = _useInteractions.getFloatingProps;
   var handleClick = react.useRef(function (e) {
@@ -51,11 +63,18 @@ var ContextMenu = function ContextMenu(_ref) {
     e.preventDefault();
     return false;
   });
-  var wrapperRef = react.useRef(function (el) {
-    var _el$parentElement, _el$parentElement2;
-    el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || _el$parentElement.removeEventListener("contextmenu", handleClick.current);
-    el === null || el === void 0 || (_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 || _el$parentElement2.addEventListener("contextmenu", handleClick.current);
-  });
+  var wrapperRef = react.useRef(null);
+  react.useEffect(function () {
+    var el = wrapperRef.current;
+    if (el && !disabled) {
+      var _el$parentElement;
+      el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || _el$parentElement.addEventListener("contextmenu", handleClick.current);
+      return function () {
+        var _el$parentElement2;
+        el === null || el === void 0 || (_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 || _el$parentElement2.removeEventListener("contextmenu", handleClick.current);
+      };
+    }
+  }, [disabled]);
   var tryClosing = react.useRef(function (e) {
     var _e$target;
     if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='true']")) setTimeout(function () {
@@ -64,9 +83,10 @@ var ContextMenu = function ContextMenu(_ref) {
   });
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "contents",
-    ref: wrapperRef.current,
+    ref: wrapperRef,
     onMouseUpCapture: tryClosing.current,
     children: [children, isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
       children: /*#__PURE__*/react.cloneElement(menu, _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
         style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
           borderRadius: "var(--rounding)",

package/dist/cjs/components/menu/Menu.js

@@ -163,7 +163,7 @@ var MenuComponent = function MenuComponent(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
             className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
             autoFocus: true,
-            ref: utilities.mergeRefs(refs.setFloating, isNested ? undefined : ref)
+            ref: utilities.mergeRefs(isNested ? refs.setFloating : ref)
           }, getFloatingProps({
             onClick: isNested ? undefined : handleClick
           })), {}, {

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

@@ -34,6 +34,7 @@ var Navigator = function Navigator(_ref) {
       color: color,
       className: "text-[1em] p-1",
       "aria-label": "previous",
+      "data-testid": "previous",
       icon: icons.CoreIcons.chevronLeft,
       onClick: function onClick(e) {
         return [e.stopPropagation(), onNavigate(-1)];
@@ -43,6 +44,7 @@ var Navigator = function Navigator(_ref) {
       className: "text-[1em] p-1",
       color: color,
       "aria-label": "next",
+      "data-testid": "next",
       icon: icons.CoreIcons.chevronRight,
       onClick: function onClick(e) {
         return [e.stopPropagation(), onNavigate(1)];

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

@@ -74,6 +74,7 @@ var Panel = function Panel(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
       role: "none",
       className: classNames(Panel_module.panelHeader, headerClassName, "flex flex-nowrap items-center area-head"),
+      "data-testid": "panel-header",
       onClick: collapsable ? toggleCollapse : undefined,
       children: [onBack && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         "data-ref": "panelBack",
@@ -116,6 +117,7 @@ var Panel = function Panel(_ref) {
         })]
       })]
     }), (!collapsed || expanded) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-testid": "panel-body",
       className: classNames(Panel_module.panelBody, "area-content grid overflow-hidden"),
       children: [loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
     })]

package/dist/cjs/components/tabpanel/Tab.js

@@ -2,15 +2,23 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
+require('@babel/runtime/helpers/slicedToArray');
+require('@floating-ui/react');
+require('react-i18next');
+require('../../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('../../hotkeys/HotKeyWrapper.js');
+var Tooltip = require('../../overlays/tooltip/Tooltip.js');
 var Badge = require('../badge/Badge.js');
-var DropdownTool = require('../dropdown/DropdownTool.js');
 var Icon = require('../icon/Icon.js');
+require('../../types/icons.js');
+var DropdownTool = require('../dropdown/DropdownTool.js');
 var TabPanel_module = require('./TabPanel.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "minimal", "onClick", "tabFlex", "color", "actions", "activeClassName"];
+var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "minimal", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
 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 Tab = function Tab(_ref) {
@@ -32,46 +40,56 @@ var Tab = function Tab(_ref) {
     tabFlex = _ref.tabFlex,
     color = _ref.color,
     actions = _ref.actions,
+    tooltip = _ref.tooltip,
     activeClassName = _ref.activeClassName,
     aria = _objectWithoutProperties(_ref, _excluded);
   var badgeProps = react.useMemo(function () {
     return Badge.getBadgeProps(badge);
   }, [badge]);
+  var tooltipProps = react.useMemo(function () {
+    if (utilities.isString(tooltip)) return {
+      content: tooltip
+    };
+    return tooltip !== null && tooltip !== void 0 ? tooltip : {};
+  }, [tooltip]);
   var E = as !== null && as !== void 0 ? as : "button";
-  return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
-    "data-id": id,
-    disabled: disabled,
-    "data-color": color,
-    className: classNames(TabPanel_module.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24", "flex items-center justify-center px-1 rounded overflow-hidden"),
-    onClick: function onClick() {
-      return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
-    },
-    ref: ref
-  }, aria), {}, {
-    children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      icon: icon,
-      bg: iconBg,
-      color: iconColor,
-      rtlFlip: rtlFlip,
-      className: "flex-content"
-    }), !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
-      className: "flex-initial truncate text-center px-1 py-1",
-      children: label
-    }), badge && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
-      placement: minimal ? "end" : "",
-      className: classNames("me-1", badgeProps.className)
-    })), actions && active && /*#__PURE__*/jsxRuntime.jsx(DropdownTool.DropdownTool, {
-      className: "bg-base/20 me-1 z-5",
-      children: actions
-    }), onClose && /*#__PURE__*/jsxRuntime.jsx("span", {
-      role: "none",
-      className: classNames("cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto"),
-      onClick: function onClick(e) {
-        onClose === null || onClose === void 0 || onClose();
-        e.stopPropagation();
+  var W = tooltip ? Tooltip.Tooltip : react.Fragment;
+  return /*#__PURE__*/jsxRuntime.jsx(W, _objectSpread(_objectSpread({}, tooltipProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
+      "data-id": id,
+      disabled: disabled,
+      "data-color": color,
+      className: classNames(TabPanel_module.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24", "flex items-center justify-center px-1 rounded overflow-hidden"),
+      onClick: function onClick() {
+        return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },
-      children: "\xD7"
-    })]
+      ref: ref
+    }, aria), {}, {
+      children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip,
+        className: "flex-content"
+      }), !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
+        className: "flex-initial truncate text-center px-1 py-1",
+        children: label
+      }), badge && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+        placement: minimal ? "end" : "",
+        className: classNames("me-1", badgeProps.className)
+      })), actions && active && /*#__PURE__*/jsxRuntime.jsx(DropdownTool.DropdownTool, {
+        className: "bg-base/20 me-1 z-5",
+        children: actions
+      }), onClose && /*#__PURE__*/jsxRuntime.jsx("span", {
+        role: "none",
+        className: classNames("cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto"),
+        onClick: function onClick(e) {
+          onClose === null || onClose === void 0 || onClose();
+          e.stopPropagation();
+        },
+        children: "\xD7"
+      })]
+    }))
   }));
 };
 

package/dist/cjs/core/aside/Aside.js

@@ -106,12 +106,14 @@ var Aside = function Aside(_ref) {
     className: classNames(Aside_module.aside, className, "overflow-hidden grid"),
     "data-align": align,
     "data-flyout": peek,
+    "data-loading": loading,
     "data-collapsed": isCollapsed,
     style: isCollapsed ? undefined : widthStyles,
     "data-testid": testId,
     "data-test-value": testValue,
     children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
       className: classNames(Aside_module.asideHeader, headerClassName, "grid area-head items-center"),
+      "data-testid": "aside-header",
       children: [title && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: classNames(Aside_module.asideTitle, "truncate py-0.5 px-1 select-none pointer-events-none"),
         children: title
@@ -142,6 +144,7 @@ var Aside = function Aside(_ref) {
       "data-ref": "asideBody",
       className: classNames(Aside_module.asideBody, bodyClassName, "overflow-hidden grid"),
       style: isCollapsed ? widthStyles : undefined,
+      "data-testid": "aside-body",
       children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
         children: children
       })

package/dist/cjs/core/content/Content.js

@@ -44,12 +44,15 @@ var Content = function Content(_ref) {
     testValue = _ref["data-test-value"];
   var resizeHandle = useResizeObserver.useResizeObserver(onResize);
   var scrollHandler = useDebounce.useDebounce(function (e) {
+    var el = e.target;
     onScroll === null || onScroll === void 0 || onScroll({
-      // @ts-expect-error ignore
-      left: e.target.scrollLeft,
-      // @ts-expect-error ignore
-      top: e.target.scrollTop
-    });
+      left: el.scrollLeft,
+      top: el.scrollTop,
+      scrollHeight: el.scrollHeight,
+      scrollWidth: el.scrollWidth,
+      width: el.offsetWidth,
+      height: el.offsetHeight
+    }, e);
   }, [onScroll]);
   react.useImperativeHandle(ref, function () {
     return resizeHandle.current;

package/dist/cjs/core/page/Page.js

@@ -47,6 +47,7 @@ var Page = function Page(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     "data-testid": testId,
     "data-test-value": testValue,
+    "data-loading": loading,
     className: classNames(Page_module.page, "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
     children: [title && /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-ref": "pageTitle",

package/dist/cjs/typography/Typography.module.css

@@ -1 +1 @@
-@layer comp{.title{line-height:1.125}.moreLink{margin:-.25rem 0 1rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--accent);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}
+@layer comp{.title{line-height:1.125}.moreLink{margin:-.25rem 0 1rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--primary);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}