@react-fabric/core 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -115,6 +115,7 @@ var DropdownElement = function DropdownElement(_ref) {
         e.stopPropagation();
       }
     })), {}, {
+      "data-inner-clickable": "true",
       "data-dropdown-open": isOpen ? true : undefined,
       ref: innerRef
     })), isOpen && /*#__PURE__*/jsxRuntime.jsxs(react.FloatingPortal, {
@@ -131,7 +132,8 @@ var DropdownElement = function DropdownElement(_ref) {
           style: _objectSpread({
             minWidth: minWidth,
             zIndex: "var(--z-popover)"
-          }, floatingStyles)
+          }, floatingStyles),
+          "data-ref": "dropdownBody"
         }, getFloatingProps({
           onClick: function onClick(e) {
             return e.stopPropagation();
@@ -139,7 +141,7 @@ var DropdownElement = function DropdownElement(_ref) {
         })), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             role: "none",
-            className: classNames(Dropdown_module.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg shadow-base bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
+            className: classNames(Dropdown_module.dropdownBody, dropdownClassName, !plainDropdown && "shadow-lg bg-base ring-1 ring-tint-100", "rounded-capped overflow-auto scroll-thin grid max-h-[70vh]"),
             onMouseUpCapture: tryClosing,
             children: panel
           }), showArrow && /*#__PURE__*/jsxRuntime.jsx(react.FloatingArrow, {

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

@@ -8,18 +8,19 @@ 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,
-      className: classNames(className, "outline bg-base flex-content pointer-events-auto cursor-pointer", groupHover && "hidden group-hover:inline-block data-[dropdown-open]:inline-block")
+      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/tool:inline-block data-[dropdown-open]:inline-block")
     }), children]
   }));
 };

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

@@ -4,10 +4,10 @@ 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 jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 var Icon_module = require('./Icon.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "icon", "bg", "color", "size", "rtlFlip", "animate", "rounded", "viewBox", "className", "onClick"];
 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; }
@@ -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,16 +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 _SvgTextSize$icon$len;
+  var iconEl = react.useMemo(function () {
     if (!utilities.isString(icon)) {
       throw Error("Invalid icon expected string");
     }
@@ -83,22 +82,25 @@ var Icon = function Icon(_ref) {
         dominantBaseline: "middle",
         textAnchor: "middle",
         style: {
-          fontSize: (_SvgTextSize$icon$len = SvgTextSize[icon.length]) !== null && _SvgTextSize$icon$len !== void 0 ? _SvgTextSize$icon$len : "1em"
+          fontSize: SvgTextSize[icon.length]
         },
         children: icon
       })
     }) : /*#__PURE__*/jsxRuntime.jsx("i", {
       className: "".concat(icon)
     });
-  }, [icon, isSvg, viewBox], "Icon el");
-  return /*#__PURE__*/jsxRuntime.jsx("dfn", _objectSpread(_objectSpread({}, rest), {}, {
-    ref: ref,
+  }, [icon, isSvg, viewBox]);
+  return /*#__PURE__*/jsxRuntime.jsx("dfn", _objectSpread(_objectSpread({
+    "data-ref": "icon",
+    ref: ref
+  }, rest), {}, {
     role: "presentation",
     className: classNames(Icon_module.icon, className, "select-none 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", animate && "animate-".concat(animate)),
     onClick: onClick,
     "data-flip": rtlFlip,
     style: styles,
     "data-clickable": !!onClick,
+    "data-inner-clickable": !!onClick,
     children: iconEl
   }));
 };

package/dist/cjs/components/icon/Icon.module.css

@@ -1 +1 @@
-@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
+@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}

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

@@ -7,7 +7,9 @@ var react = require('@floating-ui/react');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
+var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var icons = require('../../types/icons.js');
+var cloneElement = require('../../utils/cloneElement.js');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var MenuItem = require('./MenuItem.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -64,8 +66,9 @@ var MenuComponent = function MenuComponent(_ref) {
     })
   });
   var click = react.useClick(context, {
-    toggle: true,
-    ignoreMouse: true
+    event: "mousedown",
+    toggle: !isNested,
+    ignoreMouse: isNested
   });
   var role = react.useRole(context, {
     role: "menu"
@@ -137,6 +140,16 @@ var MenuComponent = function MenuComponent(_ref) {
       });
     }, 100);
   }, [isOpen]);
+  react$1.useEffect(function () {
+    if ((!isNested || isOpen) && activeIndex) {
+      setTimeout(function () {
+        var _elementsRef$current$;
+        (_elementsRef$current$ = elementsRef.current[activeIndex]) === null || _elementsRef$current$ === void 0 || _elementsRef$current$.scrollIntoView({
+          block: "nearest"
+        });
+      }, 100);
+    }
+  }, [isOpen, activeIndex]);
   return /*#__PURE__*/jsxRuntime.jsxs(react.FloatingNode, {
     id: nodeId,
     children: [isNested && /*#__PURE__*/jsxRuntime.jsx(MenuItem.MenuItem, _objectSpread(_objectSpread({}, getReferenceProps(_objectSpread(_objectSpread({}, rest), {}, {
@@ -155,21 +168,21 @@ var MenuComponent = function MenuComponent(_ref) {
       elementsRef: elementsRef,
       labelsRef: labelsRef,
       children: (!isNested || isOpen) && /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
-        children: [isNested && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
-          context: context,
-          modal: !isNested,
-          initialFocus: isNested ? -1 : 0,
-          returnFocus: !isNested,
-          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)
-          }, getFloatingProps({
-            onClick: isNested ? undefined : handleClick
-          })), {}, {
-            style: !isNested ? rest.style : floatingStyles,
-            children: react$1.Children.map(children, function (child, index) {
-              if (child) {
+        children: [isNested && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(HotKeyWrapper.HotKeyWrapper, {
+          children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+            context: context,
+            modal: !isNested,
+            initialFocus: isNested ? -1 : 0,
+            returnFocus: !isNested,
+            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(isNested ? refs.setFloating : ref)
+            }, getFloatingProps({
+              onClick: isNested ? undefined : handleClick
+            })), {}, {
+              style: !isNested ? rest.style : floatingStyles,
+              children: cloneElement.cloneChildren(children, function (child, index) {
                 labelsRef.current[index] = child.props.label;
                 return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
                   minimal: !isNested && minimal,
@@ -181,9 +194,9 @@ var MenuComponent = function MenuComponent(_ref) {
                   onClick: child.props.onClick,
                   tabIndex: activeIndex === index ? 0 : -1
                 })) : {});
-              }
-            })
-          }))
+              })
+            }))
+          })
         })]
       }))
     })]
@@ -191,6 +204,7 @@ var MenuComponent = function MenuComponent(_ref) {
 };
 var Menu = function Menu(props) {
   var parentId = react.useFloatingParentNodeId();
+  var tree = react.useFloatingTree();
   if (parentId === null) {
     return /*#__PURE__*/jsxRuntime.jsx(react.FloatingTree, {
       children: /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
@@ -198,6 +212,11 @@ var Menu = function Menu(props) {
       }))
     });
   }
+  if (tree) {
+    return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+      menuClassName: props.className
+    }));
+  }
   return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread({}, props));
 };
 

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

@@ -2,23 +2,24 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var react = require('@floating-ui/react');
+var react$1 = require('@floating-ui/react');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
-var react$1 = require('react');
+var react = require('react');
+var HotKey = require('../../hotkeys/HotKey.js');
 var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
+require('@babel/runtime/helpers/slicedToArray');
 require('react-i18next');
 require('../../hooks/useEffectDebugger.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('@babel/runtime/helpers/slicedToArray');
-require('../../hotkeys/HotKeyWrapper.js');
 var Tooltip = require('../../overlays/tooltip/Tooltip.js');
 var Badge = require('../badge/Badge.js');
 var Icon = require('../icon/Icon.js');
 require('../../types/icons.js');
+require('../../hotkeys/HotKeyWrapper.js');
 var Menu_module = require('./Menu.module.css');
 
-var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
+var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "tabIndex", "minimal", "data-open", "ref"],
   _excluded2 = ["children"];
 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; }
@@ -40,15 +41,22 @@ var MenuItem = function MenuItem(_ref) {
     _onClick = _ref.onClick,
     badge = _ref.badge,
     hotKey = _ref.hotKey,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? -1 : _ref$tabIndex,
     minimal = _ref.minimal,
     childOpen = _ref["data-open"],
     ref = _ref.ref,
     aria = _objectWithoutProperties(_ref, _excluded);
-  var tree = react.useFloatingTree();
-  var badgeProps = react$1.useMemo(function () {
+  var elRef = react.useRef(null);
+  var tree = react$1.useFloatingTree();
+  var badgeProps = react.useMemo(function () {
     return Badge.getBadgeProps(badge);
   }, [badge]);
-  var iconEl = react$1.useMemo(function () {
+  react.useEffect(function () {
+    var _elRef$current;
+    tabIndex === 0 && ((_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.focus());
+  }, [tabIndex]);
+  var iconEl = react.useMemo(function () {
     var _path;
     var path = icon;
     if (minimal && !path) {
@@ -62,7 +70,7 @@ var MenuItem = function MenuItem(_ref) {
       rtlFlip: rtlFlip
     });
   }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
-  var Wrapper = react$1.useCallback(function (_ref2) {
+  var Wrapper = react.useCallback(function (_ref2) {
     var children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, _excluded2);
     return minimal ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, _objectSpread(_objectSpread({
@@ -71,11 +79,11 @@ var MenuItem = function MenuItem(_ref) {
       disabled: childOpen
     }, rest), {}, {
       children: children
-    })) : /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
+    })) : /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
       children: children
     });
   }, [minimal, label, childOpen]);
-  var menuLabel = react$1.useMemo(function () {
+  var menuLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-nowrap text-start items-center",
       children: [iconEl, !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
@@ -98,8 +106,8 @@ var MenuItem = function MenuItem(_ref) {
   }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
   var E = as !== null && as !== void 0 ? as : "button";
   return /*#__PURE__*/jsxRuntime.jsx(Wrapper, _objectSpread(_objectSpread({}, aria), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-      ref: ref,
+    children: /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
+      ref: utilities.mergeRefs(ref, elRef),
       "data-dropdown-dismiss": true,
       "data-color": color,
       className: classNames(Menu_module.menuItem, className, active && Menu_module.active, minimal && Menu_module.minimal, disabled && Menu_module.disabled, "rounded-capped relative max-w-[50vw] my-0.5"),
@@ -107,11 +115,18 @@ var MenuItem = function MenuItem(_ref) {
       "data-open": childOpen,
       disabled: disabled,
       "data-id": id,
+      tabIndex: tabIndex,
       onClick: function onClick(e) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
     }, minimal ? {} : aria), {}, {
-      children: menuLabel
+      children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+        keyCombo: hotKey,
+        handler: function handler() {
+          var _elRef$current2, _elRef$current2$click;
+          return (_elRef$current2 = elRef.current) === null || _elRef$current2 === void 0 || (_elRef$current2$click = _elRef$current2.click) === null || _elRef$current2$click === void 0 ? void 0 : _elRef$current2$click.call(_elRef$current2);
+        }
+      }), menuLabel]
     }))
   }));
 };

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

@@ -6,43 +6,50 @@ var classNames = require('classnames');
 var HotKey = require('../../hotkeys/HotKey.js');
 var icons = require('../../types/icons.js');
 var Icon = require('../icon/Icon.js');
+var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["className", "onNavigate", "color"];
+var _excluded = ["className", "onNavigate", "color", "children"];
 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) {
   var className = _ref.className,
     onNavigate = _ref.onNavigate,
     color = _ref.color,
+    children = _ref.children,
     aria = _objectWithoutProperties(_ref, _excluded);
+  var navPrev = react.useCallback(function () {
+    return onNavigate(-1);
+  }, [onNavigate]);
+  var navNext = react.useCallback(function () {
+    return onNavigate(+1);
+  }, [onNavigate]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, "inline-block leading-none")
+    "data-ref": "navigator",
+    className: classNames(className, "inline-flex items-center leading-none")
   }, aria), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: "left",
-      handler: function handler() {
-        return onNavigate(-1);
-      }
+      handler: navPrev
     }), /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: "right",
-      handler: function handler() {
-        return onNavigate(1);
-      }
+      handler: navNext
     }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       rtlFlip: true,
       color: color,
       className: "text-[1em] p-1",
       "aria-label": "previous",
+      "data-ref": "previous",
       icon: icons.CoreIcons.chevronLeft,
       onClick: function onClick(e) {
         return [e.stopPropagation(), onNavigate(-1)];
       }
-    }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+    }), children, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       rtlFlip: true,
       className: "text-[1em] p-1",
       color: color,
       "aria-label": "next",
+      "data-ref": "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-ref": "panelHeader",
       onClick: collapsable ? toggleCollapse : undefined,
       children: [onBack && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         "data-ref": "panelBack",
@@ -90,7 +91,7 @@ var Panel = function Panel(_ref) {
         className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
         children: title
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-1",
+        className: "px-1 leading-none",
         children: actions
       }), hasTools && /*#__PURE__*/jsxRuntime.jsxs("div", {
         role: "none",
@@ -116,6 +117,7 @@ var Panel = function Panel(_ref) {
         })]
       })]
     }), (!collapsed || expanded) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-ref": "panelBody",
       className: classNames(Panel_module.panelBody, "area-content grid overflow-hidden"),
       children: [loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
     })]

package/dist/cjs/components/progress/ProgressBar.js

@@ -4,9 +4,10 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 var Progress_module = require('./Progress.module.css');
-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; }

package/dist/cjs/components/progress/ProgressCircle.js

@@ -3,8 +3,9 @@
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
-var getColor = require('../../utils/getColor.js');
+require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
 
 /*
  * React Fabric