@react-fabric/core 1.0.0-beta.23 → 1.0.0-beta.25

package/css/reset/_reset.css

@@ -135,7 +135,7 @@
     }
 
     ::selection {
-      background-color: color-mix(in lab, var(--accent) 35%, var(--fabric-bg));
+      background-color: color(from var(--accent) srgb r g b / 30%);
     }
 
     *,

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

@@ -5,10 +5,10 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Animations_module = require('./Animations.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["className", "color", "strokeColor", "type"],
   _excluded2 = ["className"];

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

@@ -7,9 +7,9 @@ var utilities = require('@react-fabric/utilities');
 var BoringAvatar = require('boring-avatars');
 var classNames = require('classnames');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 var Avatar_module = require('./Avatar.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "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; }

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

@@ -2,9 +2,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 react = require('react');
+var cloneElement = require('../../utils/cloneElement.js');
+require('@react-fabric/utilities');
 var Button_module = require('./Button.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -26,7 +27,7 @@ var ButtonGroup = function ButtonGroup(_ref) {
     "data-ref": "buttonGroup",
     className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && Button_module.vertical, vertical && "flex-col items-stretch")
   }, aria), {}, {
-    children: utilities.cloneChildren(children, function (child) {
+    children: cloneElement.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread({
         color: color,
         size: size,

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

@@ -7,6 +7,7 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var useControlledValue = require('../../hooks/useControlledValue.js');
+var cloneElement = require('../../utils/cloneElement.js');
 var Button_module = require('./Button.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -48,7 +49,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && Button_module.vertical, vertical && "flex-col")
   }, aria), {}, {
-    children: utilities.cloneChildren(children, function (child) {
+    children: cloneElement.cloneChildren(children, function (child) {
       return /*#__PURE__*/react.cloneElement(child, _objectSpread(_objectSpread({
         color: color,
         size: size,

package/dist/cjs/components/callout/Callout.js

@@ -4,10 +4,11 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var icons = require('../../types/icons.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Icon = require('../icon/Icon.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "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; }

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

@@ -7,10 +7,10 @@ var classNames = require('classnames');
 var react = require('react');
 var ErrorBoundary = require('../../core/boundary/ErrorBoundary.js');
 var HeadFoot = require('../../core/headfoot/HeadFoot.js');
+var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 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", "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; }

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

@@ -5,11 +5,11 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var Media = require('../media/Media.js');
 var Card_module = require('./Card.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["className", "children", "height", "justify", "colorScheme"];
 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; }

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

@@ -5,11 +5,11 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Icon = require('../icon/Icon.js');
 var Chip_module = require('./Chip.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "stopPropagation", "as"];
 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; }

package/dist/cjs/components/divider/Divider.js

@@ -2,10 +2,10 @@
 
 var classNames = require('classnames');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Divider_module = require('./Divider.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric

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

@@ -5,9 +5,9 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 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; }

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

@@ -7,15 +7,18 @@ 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 HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "minimal", "menuClassName", "onClick", "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; }
+// FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
+
 var MenuComponent = function MenuComponent(_ref) {
   var _refs$domReference$cu, _refs$domReference$cu2;
   var children = _ref.children,
@@ -63,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"
@@ -178,7 +182,7 @@ var MenuComponent = function MenuComponent(_ref) {
               onClick: isNested ? undefined : handleClick
             })), {}, {
               style: !isNested ? rest.style : floatingStyles,
-              children: utilities.cloneChildren(children, function (child, index) {
+              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,

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

@@ -19,7 +19,7 @@ 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; }
@@ -41,6 +41,8 @@ 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,
@@ -50,6 +52,10 @@ var MenuItem = function MenuItem(_ref) {
   var badgeProps = react.useMemo(function () {
     return Badge.getBadgeProps(badge);
   }, [badge]);
+  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;
@@ -109,6 +115,7 @@ 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"));
       }
@@ -116,8 +123,8 @@ var MenuItem = function MenuItem(_ref) {
       children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
         keyCombo: hotKey,
         handler: function handler() {
-          var _elRef$current, _elRef$current$click;
-          return (_elRef$current = elRef.current) === null || _elRef$current === void 0 || (_elRef$current$click = _elRef$current.click) === null || _elRef$current$click === void 0 ? void 0 : _elRef$current$click.call(_elRef$current);
+          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/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

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

@@ -3,11 +3,11 @@
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classNames = require('classnames');
 var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 require('@react-fabric/utilities');
 var nodeCheck = require('../../utils/nodeCheck.js');
 var Tab = require('./Tab.js');
 var TabPanel_module = require('./TabPanel.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 // TODO: implement append/prepend tab-bar items
 

package/dist/cjs/core/headfoot/HeadFoot.js

@@ -4,10 +4,11 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var HeadFoot_module = require('./HeadFoot.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["as", "children", "className", "bg", "color", "flex", "area", "dir", "align", "justify"];
 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; }

package/dist/cjs/index.js

@@ -51,6 +51,7 @@ require('react');
 require('react-i18next');
 var icons = require('./types/icons.js');
 var Title = require('./typography/Title.js');
+var cloneElement = require('./utils/cloneElement.js');
 require('@react-fabric/utilities');
 require('react/jsx-runtime');
 var Flyout = require('./overlays/flyout/Flyout.js');
@@ -136,6 +137,7 @@ Object.defineProperty(exports, "CoreIcons", {
   get: function () { return icons.CoreIcons; }
 });
 exports.Title = Title.Title;
+exports.cloneChildren = cloneElement.cloneChildren;
 exports.Flyout = Flyout.Flyout;
 exports.Modal = Modal.Modal;
 exports.Tooltip = Tooltip.Tooltip;

package/dist/cjs/overlays/alert/Alert.js

@@ -11,10 +11,10 @@ var Button = require('../../components/button/Button.js');
 var Icon = require('../../components/icon/Icon.js');
 var icons = require('../../types/icons.js');
 var Title = require('../../typography/Title.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Alert_module = require('./Alert.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/overlays/message/Message.js

@@ -3,10 +3,10 @@
 var classNames = require('classnames');
 var react = require('react');
 var Icon = require('../../components/icon/Icon.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Message_module = require('./Message.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric

package/dist/cjs/overlays/toast/Toast.js

@@ -7,10 +7,10 @@ var Animations = require('../../components/animations/Animations.js');
 var Button = require('../../components/button/Button.js');
 var Icon = require('../../components/icon/Icon.js');
 var icons = require('../../types/icons.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
 var Toast_module = require('./Toast.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 /*
  * React Fabric

package/dist/cjs/typography/Abbr.js

@@ -7,9 +7,9 @@ var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var Tooltip = require('../overlays/tooltip/Tooltip.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 var Typography_module = require('./Typography.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/typography/Anchor.js

@@ -4,10 +4,11 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 require('@react-fabric/utilities');
 var types = require('./types.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "as", "children", "className", "bg", "color", "family", "size"];
 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; }

package/dist/cjs/typography/Mark.js

@@ -6,9 +6,9 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 var Typography_module = require('./Typography.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/typography/Text.js

@@ -10,10 +10,10 @@ var reactI18next = require('react-i18next');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var usePropToggle = require('../hooks/usePropToggle.js');
 var calculateDimensions = require('../utils/calculateDimensions.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 var Typography_module = require('./Typography.module.css');
 var types = require('./types.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "align"];
 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; }

package/dist/cjs/typography/Title.js

@@ -4,11 +4,12 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 require('@react-fabric/utilities');
 var types = require('./types.js');
 var Typography_module = require('./Typography.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
 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; }

package/dist/cjs/utils/cloneElement.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var cloneChildren = function cloneChildren(children, callback) {
+  var _Children$map;
+  return (_Children$map = react.Children.map(children, function (c) {
+    if ( /*#__PURE__*/react.isValidElement(c)) {
+      if (c.type === jsxRuntime.Fragment) {
+        var _c$props;
+        // just compare to `Fragment`
+        return cloneChildren((_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
+};
+
+exports.cloneChildren = cloneChildren;

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

@@ -5,10 +5,10 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Animations.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["className", "color", "strokeColor", "type"],
   _excluded2 = ["className"];

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

@@ -7,9 +7,9 @@ import { isSvgPath } from '@react-fabric/utilities';
 import BoringAvatar from 'boring-avatars';
 import classNames from 'classnames';
 import { useState, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
 import classes from './Avatar.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "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; }

package/dist/esm/components/button/ButtonGroup.js

@@ -2,9 +2,10 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { cloneChildren } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { cloneElement } from 'react';
+import { cloneChildren } from '../../utils/cloneElement.js';
+import '@react-fabric/utilities';
 import classes from './Button.module.css';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/esm/components/button/ToggleButtonGroup.js

@@ -3,10 +3,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isArray, EMPTY_ARRAY, cloneChildren } from '@react-fabric/utilities';
+import { isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, useCallback, cloneElement } from 'react';
 import { useControlledValue } from '../../hooks/useControlledValue.js';
+import { cloneChildren } from '../../utils/cloneElement.js';
 import classes from './Button.module.css';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/esm/components/callout/Callout.js

@@ -4,10 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { CoreIcons } from '../../types/icons.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getBgClass, getColorClass, getBorderClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "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; }

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

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 import { useMemo, Children } from 'react';
 import { ErrorBoundary } from '../../core/boundary/ErrorBoundary.js';
 import { Header, Footer } from '../../core/headfoot/HeadFoot.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import classes from './Card.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 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; }

package/dist/esm/components/card/CardCover.js

@@ -5,11 +5,11 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemo, Children } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { Image, Video } from '../media/Media.js';
 import classes from './Card.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["className", "children", "height", "justify", "colorScheme"];
 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; }

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

@@ -5,11 +5,11 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColor, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
 import classes from './Chip.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "stopPropagation", "as"];
 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; }

package/dist/esm/components/divider/Divider.js

@@ -2,10 +2,10 @@
 
 import classNames from 'classnames';
 import { useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getBorderClass, getBgClass, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Divider.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 /*
  * React Fabric

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

@@ -5,9 +5,9 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { isSvgPath, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
 import classes from './Icon.module.css';
-import { jsx } from '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; }

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

@@ -4,18 +4,21 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloatingParentNodeId, useFloatingTree, FloatingTree, useFloatingNodeId, useFloating, offset, flip, shift, autoUpdate, useHover, safePolygon, useClick, useRole, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingList, FloatingOverlay, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
-import { mergeRefs, cloneChildren } from '@react-fabric/utilities';
+import { mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useState, useRef, useEffect, useCallback, cloneElement, Fragment } from 'react';
+import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { CoreIcons } from '../../types/icons.js';
+import { cloneChildren } from '../../utils/cloneElement.js';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
-import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["children", "minimal", "menuClassName", "onClick", "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; }
+// FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
+
 var MenuComponent = function MenuComponent(_ref) {
   var _refs$domReference$cu, _refs$domReference$cu2;
   var children = _ref.children,
@@ -63,8 +66,9 @@ var MenuComponent = function MenuComponent(_ref) {
     })
   });
   var click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true
+    event: "mousedown",
+    toggle: !isNested,
+    ignoreMouse: isNested
   });
   var role = useRole(context, {
     role: "menu"

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

@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { useFloatingTree } from '@floating-ui/react';
 import { iconToken, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useRef, useMemo, useCallback, Fragment } from 'react';
+import { useRef, useMemo, useEffect, useCallback, Fragment } from 'react';
 import { HotKey } from '../../hotkeys/HotKey.js';
 import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
 import '@babel/runtime/helpers/slicedToArray';
@@ -19,7 +19,7 @@ import '../../types/icons.js';
 import '../../hotkeys/HotKeyWrapper.js';
 import classes from './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; }
@@ -41,6 +41,8 @@ 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,
@@ -50,6 +52,10 @@ var MenuItem = function MenuItem(_ref) {
   var badgeProps = useMemo(function () {
     return getBadgeProps(badge);
   }, [badge]);
+  useEffect(function () {
+    var _elRef$current;
+    tabIndex === 0 && ((_elRef$current = elRef.current) === null || _elRef$current === void 0 ? void 0 : _elRef$current.focus());
+  }, [tabIndex]);
   var iconEl = useMemo(function () {
     var _path;
     var path = icon;
@@ -109,6 +115,7 @@ 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"));
       }
@@ -116,8 +123,8 @@ var MenuItem = function MenuItem(_ref) {
       children: [hotKey && /*#__PURE__*/jsx(HotKey, {
         keyCombo: hotKey,
         handler: function handler() {
-          var _elRef$current, _elRef$current$click;
-          return (_elRef$current = elRef.current) === null || _elRef$current === void 0 || (_elRef$current$click = _elRef$current.click) === null || _elRef$current$click === void 0 ? void 0 : _elRef$current$click.call(_elRef$current);
+          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/esm/components/progress/ProgressBar.js

@@ -4,9 +4,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getColorClass } from '../../utils/getColor.js';
 import classes from './Progress.module.css';
-import { jsxs, jsx } from '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/esm/components/progress/ProgressCircle.js

@@ -3,8 +3,9 @@
 import { Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { getColorClass } from '../../utils/getColor.js';
+import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColorClass } from '../../utils/getColor.js';
 
 /*
  * React Fabric

package/dist/esm/components/tabpanel/TabPanel.js

@@ -3,11 +3,11 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import { useState, useMemo, Children, useEffect, useCallback, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@react-fabric/utilities';
 import { nodeCheck } from '../../utils/nodeCheck.js';
 import { Tab } from './Tab.js';
 import classes from './TabPanel.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 // TODO: implement append/prepend tab-bar items
 

package/dist/esm/core/headfoot/HeadFoot.js

@@ -4,10 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './HeadFoot.module.css';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["as", "children", "className", "bg", "color", "flex", "area", "dir", "align", "justify"];
 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; }

package/dist/esm/index.js

@@ -51,6 +51,7 @@ import 'react';
 import 'react-i18next';
 export { CoreIcons } from './types/icons.js';
 export { Title } from './typography/Title.js';
+export { cloneChildren } from './utils/cloneElement.js';
 import '@react-fabric/utilities';
 import 'react/jsx-runtime';
 export { Flyout } from './overlays/flyout/Flyout.js';

package/dist/esm/overlays/alert/Alert.js

@@ -11,10 +11,10 @@ import { Button } from '../../components/button/Button.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { CoreIcons } from '../../types/icons.js';
 import { Title } from '../../typography/Title.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColorClass, getBorderClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Alert.module.css';
-import { jsx, jsxs } from '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/esm/overlays/message/Message.js

@@ -3,10 +3,10 @@
 import classNames from 'classnames';
 import { useRef, useCallback, useLayoutEffect } from 'react';
 import { Icon } from '../../components/icon/Icon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getBgClass, getColorClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Message.module.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
  * React Fabric

package/dist/esm/overlays/toast/Toast.js

@@ -7,10 +7,10 @@ import { AnimationIndicator } from '../../components/animations/Animations.js';
 import { Button } from '../../components/button/Button.js';
 import { Icon } from '../../components/icon/Icon.js';
 import { CoreIcons } from '../../types/icons.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColorClass, getBorderClass, getBgClass } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
 import classes from './Toast.module.css';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 /*
  * React Fabric

package/dist/esm/typography/Abbr.js

@@ -7,9 +7,9 @@ import classNames from 'classnames';
 import { useCallback, Fragment, useMemo } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { Tooltip, getTooltipProps } from '../overlays/tooltip/Tooltip.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColorClass, getColor } from '../utils/getColor.js';
 import classes from './Typography.module.css';
-import { jsx, jsxs } from '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/esm/typography/Anchor.js

@@ -4,10 +4,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TextSizeMap } from './types.js';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "as", "children", "className", "bg", "color", "family", "size"];
 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; }

package/dist/esm/typography/Mark.js

@@ -6,9 +6,9 @@ import { isString, isEmpty, tokenize } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, Fragment } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getBgClass, getColor } from '../utils/getColor.js';
 import classes from './Typography.module.css';
-import { jsx, jsxs } from '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/esm/typography/Text.js

@@ -10,10 +10,10 @@ import { useTranslation } from 'react-i18next';
 import { useLayoutEffectDebugger, useMemoDebugger } from '../hooks/useEffectDebugger.js';
 import { usePropToggle } from '../hooks/usePropToggle.js';
 import { calculateTextHeight } from '../utils/calculateDimensions.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
 import classes from './Typography.module.css';
 import { TextSizeMap } from './types.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "align"];
 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; }

package/dist/esm/typography/Title.js

@@ -4,11 +4,12 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
 import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
 import '@react-fabric/utilities';
 import { TitleSizeMap } from './types.js';
 import classes from './Typography.module.css';
-import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
 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; }

package/dist/esm/utils/cloneElement.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { Children, isValidElement } from 'react';
+import { Fragment } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var cloneChildren = function cloneChildren(children, callback) {
+  var _Children$map;
+  return (_Children$map = Children.map(children, function (c) {
+    if ( /*#__PURE__*/isValidElement(c)) {
+      if (c.type === Fragment) {
+        var _c$props;
+        // just compare to `Fragment`
+        return cloneChildren((_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
+};
+
+export { cloneChildren };

package/dist/types/components/menu/MenuItem.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type PolymorphicProps } from "../../types";
 import { type MenuItemProps } from "./types";
-export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, tabIndex, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/index.d.ts

@@ -18,4 +18,5 @@ export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
 export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
+export { cloneChildren } from "./utils";
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";

package/dist/types/utils/cloneElement.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from "react";
+export declare const cloneChildren: (children: ReactNode, callback: (child: ReactNode, index: number) => ReactNode) => ReactNode;

package/dist/types/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.25",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.23",
+    "@react-fabric/utilities": "^1.0.0-beta.25",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "96cac942a837ec03886660d398de74b8bcb2dbac"
+  "gitHead": "34640e2473c7823254e82aa7aed920c9c6f8f503"
 }

package/src/components/button/ButtonGroup.tsx

@@ -21,7 +21,6 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { cloneChildren } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement } from "react";
 import {
@@ -33,6 +32,7 @@ import {
   type SizeType,
   type TestProps,
 } from "../../types";
+import { cloneChildren } from "../../utils";
 import { type Button } from "./Button";
 import classes from "./Button.module.css";
 

package/src/components/button/ToggleButtonGroup.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { cloneChildren, EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
+import { EMPTY_ARRAY, isArray } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement, useCallback, useMemo } from "react";
 import { useControlledValue } from "../../hooks/useControlledValue";
@@ -32,6 +32,7 @@ import {
   type CssProp,
   type SizeType,
 } from "../../types";
+import { cloneChildren } from "../../utils";
 import { type ButtonProps } from "./Button";
 import classes from "./Button.module.css";
 

package/src/components/menu/Menu.tsx

@@ -45,7 +45,7 @@ import {
   useRole,
   useTypeahead,
 } from "@floating-ui/react";
-import { cloneChildren, mergeRefs } from "@react-fabric/utilities";
+import { mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
@@ -55,11 +55,11 @@ import {
   useRef,
   useState,
 } from "react";
+import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 import { CoreIcons } from "../../types/icons";
-import { nodeCheck } from "../../utils";
+import { cloneChildren, nodeCheck } from "../../utils";
 import { MenuItem } from "./MenuItem";
 import { type MenuProps } from "./types";
-import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
 
 // FIXME: refactor menu implementation to differentiate between static and floating menus, implement context wrapper for each menu level
 
@@ -104,8 +104,9 @@ const MenuComponent = ({
     handleClose: safePolygon({ blockPointerEvents: true }),
   });
   const click = useClick(context, {
-    toggle: true,
-    ignoreMouse: true,
+    event: "mousedown",
+    toggle: !isNested,
+    ignoreMouse: isNested,
   });
   const role = useRole(context, { role: "menu" });
   const dismiss = useDismiss(context, { bubbles: true });

package/src/components/menu/MenuItem.tsx

@@ -24,7 +24,7 @@
 import { useFloatingTree } from "@floating-ui/react";
 import { iconToken, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Fragment, useCallback, useMemo, useRef } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef } from "react";
 import { HotKey } from "../../hotkeys/HotKey";
 import { HotKeyLabel } from "../../hotkeys/HotKeyLabel";
 import { Tooltip } from "../../overlays";
@@ -51,6 +51,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
   onClick,
   badge,
   hotKey,
+  tabIndex = -1,
   // @ts-expect-error ignore
   minimal,
   // @ts-expect-error ignore
@@ -65,6 +66,10 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
     return getBadgeProps(badge);
   }, [badge]);
 
+  useEffect(() => {
+    tabIndex === 0 && elRef.current?.focus();
+  }, [tabIndex]);
+
   const iconEl = useMemo(() => {
     let path = icon;
     if (minimal && !path) {
@@ -152,6 +157,7 @@ export const MenuItem = <Tag extends React.ElementType = "button">({
         data-open={childOpen}
         disabled={disabled}
         data-id={id}
+        tabIndex={tabIndex}
         onClick={(e) => {
           onClick?.(e) !== false && tree?.events.emit("click");
         }}

package/src/index.ts

@@ -45,6 +45,8 @@ export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
 
+export { cloneChildren } from "./utils";
+
 export {
   ApplicationProvider,
   useApplicationContext,

package/src/utils/cloneElement.ts

@@ -0,0 +1,44 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { type ReactNode, Children, isValidElement } from "react";
+import { Fragment } from "react/jsx-runtime";
+
+export const cloneChildren = (
+  children: ReactNode,
+  callback: (child: ReactNode, index: number) => ReactNode,
+): ReactNode => {
+  return Children.map(children, (c: ReactNode) => {
+    if (isValidElement(c)) {
+      if (c.type === Fragment) {
+        // just compare to `Fragment`
+        return cloneChildren(c.props?.children, callback);
+      }
+      return c;
+    }
+    return c;
+  })
+    ?.flat()
+    .filter(Boolean)
+    .map(callback);
+};

package/src/utils/index.ts

@@ -24,5 +24,6 @@
 /* istanbul ignore file */
 
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";