@react-fabric/core 1.0.0-beta.61 → 1.0.0-beta.62

package/css/components/_breadcrumbs.css

@@ -54,6 +54,8 @@
 
   .fabric-breadcrumbs[data-variant="classic"] {
     & > .fabric-breadcrumbLink {
+      display: flex;
+      align-items: center;
       list-style: none;
 
       &::after {

package/css/components/_button.css

@@ -23,7 +23,8 @@
 
 @layer components {
   .fabric-buttonWrapper {
-    --color: var(--color-tint-700);
+    --color: var(--color-tint-600);
+    --color-muted: var(--color-tint-300);
 
     font-size: 1rem;
     border-radius: var(--rounding);
@@ -99,6 +100,11 @@
       flex: 0 1 1em;
     }
   }
+
+  [data-color-scheme="dark"] .fabric-buttonWrapper {
+    --color: var(--color-tint-500);
+    --color-muted: var(--color-tint-200);
+  }
 }
 
 @layer utilities {
@@ -157,7 +163,7 @@
     }
 
     &[data-color="muted"] {
-      --color: var(--color-tint-300);
+      --color: var(--color-muted);
     }
 
     &[data-variant="outline"] {

package/css/components/_modal.css

@@ -26,8 +26,8 @@
     z-index: var(--z-overlay);
 
     width: 32rem;
-    max-width: 100%;
-    max-height: 100%;
+    max-width: calc(100vw - 8rem);
+    max-height: calc(100vh - 8rem);
     margin-top: -100%;
 
     opacity: 0;

package/css/core/_theme.css

@@ -24,7 +24,7 @@
 @layer components {
   .fabric-themeProvider {
     & > * {
-      background-color: var(--bg-color-base);
+      background-color: var(--bg-color-content);
     }
   }
 }

package/css/reset/_reset.css

@@ -78,6 +78,10 @@
     border-color: color-mix(in oklab, var(--fabric-bg) 65%, var(--color-tint));
   }
 
+  [class*="shadow"] {
+    --tw-shadow-color: var(--fabric-shadow);
+  }
+
   [class*="ring"] {
     --tw-ring-color: color-mix(
       in oklab,
@@ -223,7 +227,7 @@
     unicode-bidi: plaintext;
   }
 
-  [dir="rtl"] {
+  [dir="rtl"] :not:where(:dir(ltr), [dir="ltr"]) {
     p,
     pre,
     h1,
@@ -233,7 +237,7 @@
     h5,
     h6,
     .mixed-lang {
-      text-align: start;
+      text-align: right;
     }
   }
 }

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

@@ -142,7 +142,7 @@ var Button = function Button(_ref) {
     "data-size": size,
     "data-loading": busy || loading,
     "data-disabled": disabled,
-    children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+    children: [!disabled && hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
       keyCombo: hotKey,
       handler: hotKeyHandler.current
     }), /*#__PURE__*/jsxRuntime.jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {

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

@@ -32,6 +32,7 @@ var DropdownElement = function DropdownElement(_ref) {
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var tree = react.useFloatingTree();
+  var nodeId = react.useFloatingNodeId();
   var _useMemo = react$1.useMemo(function () {
       return react$1.Children.toArray(children);
     }, [children]),
@@ -39,6 +40,7 @@ var DropdownElement = function DropdownElement(_ref) {
     anchor = _useMemo2[0],
     panel = _useMemo2[1];
   var _useFloating = react.useFloating({
+      nodeId: "dropdown-".concat(nodeId),
       open: isOpen,
       onOpenChange: function onOpenChange(open, _, reason) {
         var _ref2;
@@ -80,6 +82,10 @@ var DropdownElement = function DropdownElement(_ref) {
     }
     return undefined;
   }, [refs, isOpen, fitToParent]);
+  var dismissDropdown = react$1.useCallback(function () {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 || onClose();
+  }, []);
   var tryClosing = react$1.useCallback(function (e) {
     var _refs$floating$curren, _refs$floating$curren2;
     if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target.closest("[data-dropdown-dismiss='false']"))) && (!!closeOnClick || (_refs$floating$curren2 = refs.floating.current) !== null && _refs$floating$curren2 !== void 0 && _refs$floating$curren2.contains(e.target.closest("[data-dropdown-dismiss='true']")))) {
@@ -139,7 +145,9 @@ var DropdownElement = function DropdownElement(_ref) {
             role: "none",
             className: classNames("fabric-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
+            children: /*#__PURE__*/react$1.cloneElement(panel, {
+              dismiss: dismissDropdown
+            })
           }), showArrow && /*#__PURE__*/jsxRuntime.jsx(react.FloatingArrow, {
             ref: arrowRef,
             context: context,
@@ -184,6 +192,10 @@ var DropdownElement = function DropdownElement(_ref) {
  * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
  */
 var Dropdown = function Dropdown(props) {
+  var tree = react.useFloatingTree();
+  if (tree) {
+    return /*#__PURE__*/jsxRuntime.jsx(DropdownElement, _objectSpread({}, props));
+  }
   return /*#__PURE__*/jsxRuntime.jsx(react.FloatingTree, {
     children: /*#__PURE__*/jsxRuntime.jsx(DropdownElement, _objectSpread({}, props))
   });

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

@@ -114,31 +114,31 @@ var Icon = function Icon(_ref) {
   /** ***************** render icon *******************/
   var iconEl = react.useMemo(function () {
     if ( /*#__PURE__*/react.isValidElement(icon)) return icon;
-    if (!utilities.isString(icon)) {
-      throw Error("Invalid icon expected string");
+    if (utilities.isString(icon)) {
+      return isSvg ? /*#__PURE__*/jsxRuntime.jsx("svg", {
+        viewBox: viewBox,
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          fill: "currentColor",
+          d: icon.toString()
+        })
+      }) : (icon === null || icon === void 0 ? void 0 : icon.toString().length) <= 4 ? /*#__PURE__*/jsxRuntime.jsx("svg", {
+        role: "img",
+        children: /*#__PURE__*/jsxRuntime.jsx("text", {
+          x: "50%",
+          y: "50%",
+          dy: ".1em",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          style: {
+            fontSize: SvgTextSize[icon.length]
+          },
+          children: icon
+        })
+      }) : /*#__PURE__*/jsxRuntime.jsx("i", {
+        className: "".concat(icon)
+      });
     }
-    return isSvg ? /*#__PURE__*/jsxRuntime.jsx("svg", {
-      viewBox: viewBox,
-      children: /*#__PURE__*/jsxRuntime.jsx("path", {
-        fill: "currentColor",
-        d: icon.toString()
-      })
-    }) : (icon === null || icon === void 0 ? void 0 : icon.toString().length) <= 4 ? /*#__PURE__*/jsxRuntime.jsx("svg", {
-      role: "img",
-      children: /*#__PURE__*/jsxRuntime.jsx("text", {
-        x: "50%",
-        y: "50%",
-        dy: ".1em",
-        dominantBaseline: "middle",
-        textAnchor: "middle",
-        style: {
-          fontSize: SvgTextSize[icon.length]
-        },
-        children: icon
-      })
-    }) : /*#__PURE__*/jsxRuntime.jsx("i", {
-      className: "".concat(icon)
-    });
+    throw Error("Invalid icon expected string");
   }, [icon, isSvg, viewBox]);
   return /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
     "data-ref": "icon",

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

@@ -13,7 +13,7 @@ var nodeCheck = require('../../utils/nodeCheck.js');
 var MenuItem = require('./MenuItem.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "ref"];
+var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "ref", "forDropdown"];
 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
@@ -27,6 +27,7 @@ var MenuComponent = function MenuComponent(_ref) {
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
     ref = _ref.ref,
+    forDropdown = _ref.forDropdown,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = react$1.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -41,9 +42,9 @@ var MenuComponent = function MenuComponent(_ref) {
   var tree = react.useFloatingTree();
   var nodeId = react.useFloatingNodeId();
   var parentId = react.useFloatingParentNodeId();
-  var isNested = parentId !== null;
+  var isNested = parentId !== null && !forDropdown;
   var _useFloating = react.useFloating({
-      nodeId: nodeId,
+      nodeId: "menu-".concat(nodeId),
       open: !isNested || isOpen,
       onOpenChange: function onOpenChange(open, event, reason) {
         isNested && setIsOpen(open);

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

@@ -132,7 +132,7 @@ var MenuItem = function MenuItem(_ref) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
     }, minimal ? {} : aria), {}, {
-      children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+      children: [!disabled && hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
         keyCombo: hotKey,
         handler: function handler() {
           var _elRef$current2, _elRef$current2$click;

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

@@ -2,11 +2,11 @@
 
 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 HotKey = require('../../hotkeys/HotKey.js');
 var Icon = require('../icon/Icon.js');
-var utilities = require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
@@ -45,7 +45,7 @@ var Navigator = function Navigator(_ref) {
     aria = _objectWithoutProperties(_ref, _excluded);
   var navPrev = react.useCallback(function () {
     return (utilities.isEmpty(current) || current !== 0) && onNavigate(-1);
-  }, [onNavigate, current]);
+  }, [onNavigate, current, length]);
   var navNext = react.useCallback(function () {
     return (utilities.isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(+1);
   }, [onNavigate, current, length]);

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

@@ -1,10 +1,10 @@
 'use strict';
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
 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');
 
@@ -73,7 +73,8 @@ var TabPanel = function TabPanel(_ref) {
     tabs = _useMemo2[0],
     rest = _useMemo2[1];
   react.useEffect(function () {
-    setActive(activeTab);
+    var _tabs$;
+    setActive(utilities.getValue(activeTab !== null && activeTab !== void 0 ? activeTab : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.props.id));
   }, [activeTab]);
   var activeTabPanel = react.useMemo(function () {
     var _tabs$find;

package/dist/cjs/core/theme/ThemeProvider.js

@@ -59,7 +59,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
     accentColor = _ref.accentColor,
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
-    rounding = _ref.rounding;
+    rounding = _ref.rounding,
+    className = _ref.className;
   var _useApplicationContex = Global.useApplicationContext(),
     currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = react.useMemo(function () {
@@ -88,7 +89,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
     style: styles,
     "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
-    className: classNames("fabric-themeProvider", "contents theme-base", branding),
+    className: classNames("fabric-themeProvider", "contents theme-base", branding, className),
     children: children
   });
 };

package/dist/cjs/hooks/useNavigator.js

@@ -11,15 +11,16 @@ var useNavigator = function useNavigator() {
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
-  var refCurrent = react.useRef(defaultIndex);
   var onNavigate = react.useCallback(function (dir) {
-    if (dir === -1) {
-      refCurrent.current = refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
-    }
-    if (dir === 1) {
-      refCurrent.current = refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
-    }
-    setCurrentIndex(refCurrent.current);
+    setCurrentIndex(function (prevValue) {
+      if (dir === -1) {
+        return prevValue > 0 ? prevValue - 1 : totalCount - 1;
+      }
+      if (dir === 1) {
+        return prevValue + 1 < totalCount ? prevValue + 1 : 0;
+      }
+      return prevValue;
+    });
   }, [totalCount]);
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {

package/dist/cjs/hooks/useOverlayService.js

@@ -11,6 +11,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var _excluded = ["onClose"];
 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; }
+// return the blank function since state functionality will execute if the value is function
+var EMPTY_FC = function EMPTY_FC() {
+  return function () {
+    return null;
+  };
+};
+
 /**
  * Hook to manage overlay components like modals or flyouts.
  * It provides a way to open an overlay with specified properties and handle its closure.
@@ -21,7 +28,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
  *
  * @param ModalOrFlyout - The component to be used as an overlay.
- * @returns An array containing the current overlay and a function to open it.
+ * @param toggleOpen - If true, calling `openOverlay` while an overlay is already open will close the existing one instead of opening a new one.
+ * @returns An array containing the current overlay, a function to open it, and a boolean indicating if the overlay is open.
  *
  * @example
  * ```jsx
@@ -36,34 +44,47 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```
  */
 var useOverlayService = function useOverlayService(ModalOrFlyout) {
-  var _useState = react.useState(null),
+  var _useState = react.useState(EMPTY_FC),
     _useState2 = _slicedToArray(_useState, 2),
     Overlay = _useState2[0],
     setOverlay = _useState2[1];
+  var existingOpenPromise = react.useRef(null);
   var openOverlay = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _ref2,
         onClose,
-        props,
+        outerProps,
         _args = arguments;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, props = _objectWithoutProperties(_ref2, _excluded);
-            _context.next = 3;
+            _ref2 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, onClose = _ref2.onClose, outerProps = _objectWithoutProperties(_ref2, _excluded);
+            if (!existingOpenPromise.current) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            _context.next = 5;
             return new Promise(function (resolve) {
-              var handleClose = function handleClose(args) {
-                setOverlay(null);
+              existingOpenPromise.current = function (args) {
+                setOverlay(EMPTY_FC);
                 resolve(args);
                 onClose === null || onClose === void 0 || onClose(args);
+                existingOpenPromise.current = null;
               };
-              setOverlay( /*#__PURE__*/jsxRuntime.jsx(ModalOrFlyout, _objectSpread(_objectSpread({}, props), {}, {
-                onClose: handleClose
-              })));
+              // eslint-disable-next-line react/display-name
+              setOverlay(function () {
+                return function (overrideProps) {
+                  return /*#__PURE__*/jsxRuntime.jsx(ModalOrFlyout, _objectSpread(_objectSpread(_objectSpread({}, outerProps), overrideProps), {}, {
+                    onClose: existingOpenPromise.current
+                  }));
+                };
+              });
             });
-          case 3:
+          case 5:
             return _context.abrupt("return", _context.sent);
-          case 4:
+          case 6:
           case "end":
             return _context.stop();
         }
@@ -73,7 +94,7 @@ var useOverlayService = function useOverlayService(ModalOrFlyout) {
       return _ref.apply(this, arguments);
     };
   }();
-  return [Overlay, openOverlay];
+  return [Overlay, openOverlay, existingOpenPromise.current];
 };
 
 exports.useOverlayService = useOverlayService;

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var i18next = require('i18next');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var core$1 = require('./ar/core.json.js');
+var core = require('./en/core.json.js');
 
 /*
  * React Fabric
@@ -48,8 +48,8 @@ var addTranslationBundle = function addTranslationBundle(key, languageBundles) {
   }
 };
 addTranslationBundle("core", {
-  en: en.default,
-  ar: ar.default
+  en: core.default,
+  ar: core$1.default
 });
 
 exports.addTranslationBundle = addTranslationBundle;

package/dist/cjs/index.js

@@ -82,6 +82,7 @@ var Global = require('./context/Global.js');
 
 exports.ActionLabel = ActionLabel.ActionLabel;
 exports.AnimationIndicator = Animations.AnimationIndicator;
+exports.AnimationLoader = Animations.AnimationLoader;
 exports.LoadingBars = Animations.LoadingBars;
 exports.LoadingLine = Animations.LoadingLine;
 exports.LoadingSpinner = Animations.LoadingSpinner;

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

@@ -142,7 +142,7 @@ var Button = function Button(_ref) {
     "data-size": size,
     "data-loading": busy || loading,
     "data-disabled": disabled,
-    children: [hotKey && /*#__PURE__*/jsx(HotKey, {
+    children: [!disabled && hotKey && /*#__PURE__*/jsx(HotKey, {
       keyCombo: hotKey,
       handler: hotKeyHandler.current
     }), /*#__PURE__*/jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {

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

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { FloatingTree, useFloatingTree, useFloating, autoUpdate, shift, flip, offset, arrow, safePolygon, useDismiss, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingArrow, useHover, useClick } from '@floating-ui/react';
+import { useFloatingTree, FloatingTree, useFloatingNodeId, useFloating, autoUpdate, shift, flip, offset, arrow, safePolygon, useDismiss, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingArrow, useHover, useClick } from '@floating-ui/react';
 import { mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useState, useMemo, Children, useCallback, useEffect, Fragment, cloneElement } from 'react';
@@ -32,6 +32,7 @@ var DropdownElement = function DropdownElement(_ref) {
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var tree = useFloatingTree();
+  var nodeId = useFloatingNodeId();
   var _useMemo = useMemo(function () {
       return Children.toArray(children);
     }, [children]),
@@ -39,6 +40,7 @@ var DropdownElement = function DropdownElement(_ref) {
     anchor = _useMemo2[0],
     panel = _useMemo2[1];
   var _useFloating = useFloating({
+      nodeId: "dropdown-".concat(nodeId),
       open: isOpen,
       onOpenChange: function onOpenChange(open, _, reason) {
         var _ref2;
@@ -80,6 +82,10 @@ var DropdownElement = function DropdownElement(_ref) {
     }
     return undefined;
   }, [refs, isOpen, fitToParent]);
+  var dismissDropdown = useCallback(function () {
+    setIsOpen(false);
+    onClose === null || onClose === void 0 || onClose();
+  }, []);
   var tryClosing = useCallback(function (e) {
     var _refs$floating$curren, _refs$floating$curren2;
     if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target.closest("[data-dropdown-dismiss='false']"))) && (!!closeOnClick || (_refs$floating$curren2 = refs.floating.current) !== null && _refs$floating$curren2 !== void 0 && _refs$floating$curren2.contains(e.target.closest("[data-dropdown-dismiss='true']")))) {
@@ -139,7 +145,9 @@ var DropdownElement = function DropdownElement(_ref) {
             role: "none",
             className: classNames("fabric-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
+            children: /*#__PURE__*/cloneElement(panel, {
+              dismiss: dismissDropdown
+            })
           }), showArrow && /*#__PURE__*/jsx(FloatingArrow, {
             ref: arrowRef,
             context: context,
@@ -184,6 +192,10 @@ var DropdownElement = function DropdownElement(_ref) {
  * @see {@link https://floating-ui.com/docs/react} for more details on Floating UI.
  */
 var Dropdown = function Dropdown(props) {
+  var tree = useFloatingTree();
+  if (tree) {
+    return /*#__PURE__*/jsx(DropdownElement, _objectSpread({}, props));
+  }
   return /*#__PURE__*/jsx(FloatingTree, {
     children: /*#__PURE__*/jsx(DropdownElement, _objectSpread({}, props))
   });

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

@@ -114,31 +114,31 @@ var Icon = function Icon(_ref) {
   /** ***************** render icon *******************/
   var iconEl = useMemo(function () {
     if ( /*#__PURE__*/isValidElement(icon)) return icon;
-    if (!isString(icon)) {
-      throw Error("Invalid icon expected string");
+    if (isString(icon)) {
+      return isSvg ? /*#__PURE__*/jsx("svg", {
+        viewBox: viewBox,
+        children: /*#__PURE__*/jsx("path", {
+          fill: "currentColor",
+          d: icon.toString()
+        })
+      }) : (icon === null || icon === void 0 ? void 0 : icon.toString().length) <= 4 ? /*#__PURE__*/jsx("svg", {
+        role: "img",
+        children: /*#__PURE__*/jsx("text", {
+          x: "50%",
+          y: "50%",
+          dy: ".1em",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          style: {
+            fontSize: SvgTextSize[icon.length]
+          },
+          children: icon
+        })
+      }) : /*#__PURE__*/jsx("i", {
+        className: "".concat(icon)
+      });
     }
-    return isSvg ? /*#__PURE__*/jsx("svg", {
-      viewBox: viewBox,
-      children: /*#__PURE__*/jsx("path", {
-        fill: "currentColor",
-        d: icon.toString()
-      })
-    }) : (icon === null || icon === void 0 ? void 0 : icon.toString().length) <= 4 ? /*#__PURE__*/jsx("svg", {
-      role: "img",
-      children: /*#__PURE__*/jsx("text", {
-        x: "50%",
-        y: "50%",
-        dy: ".1em",
-        dominantBaseline: "middle",
-        textAnchor: "middle",
-        style: {
-          fontSize: SvgTextSize[icon.length]
-        },
-        children: icon
-      })
-    }) : /*#__PURE__*/jsx("i", {
-      className: "".concat(icon)
-    });
+    throw Error("Invalid icon expected string");
   }, [icon, isSvg, viewBox]);
   return /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
     "data-ref": "icon",

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

@@ -13,7 +13,7 @@ import { nodeCheck } from '../../utils/nodeCheck.js';
 import { MenuItem } from './MenuItem.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "ref"];
+var _excluded = ["children", "minimal", "menuClassName", "onClick", "trigger", "ref", "forDropdown"];
 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
@@ -27,6 +27,7 @@ var MenuComponent = function MenuComponent(_ref) {
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
     ref = _ref.ref,
+    forDropdown = _ref.forDropdown,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -41,9 +42,9 @@ var MenuComponent = function MenuComponent(_ref) {
   var tree = useFloatingTree();
   var nodeId = useFloatingNodeId();
   var parentId = useFloatingParentNodeId();
-  var isNested = parentId !== null;
+  var isNested = parentId !== null && !forDropdown;
   var _useFloating = useFloating({
-      nodeId: nodeId,
+      nodeId: "menu-".concat(nodeId),
       open: !isNested || isOpen,
       onOpenChange: function onOpenChange(open, event, reason) {
         isNested && setIsOpen(open);

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

@@ -132,7 +132,7 @@ var MenuItem = function MenuItem(_ref) {
         (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
       }
     }, minimal ? {} : aria), {}, {
-      children: [hotKey && /*#__PURE__*/jsx(HotKey, {
+      children: [!disabled && hotKey && /*#__PURE__*/jsx(HotKey, {
         keyCombo: hotKey,
         handler: function handler() {
           var _elRef$current2, _elRef$current2$click;

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

@@ -2,11 +2,11 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { HotKey } from '../../hotkeys/HotKey.js';
 import { Icon } from '../icon/Icon.js';
-import { isEmpty } from '@react-fabric/utilities';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["className", "onNavigate", "color", "children", "length", "current", "disableKeyHandlers"];
@@ -45,7 +45,7 @@ var Navigator = function Navigator(_ref) {
     aria = _objectWithoutProperties(_ref, _excluded);
   var navPrev = useCallback(function () {
     return (isEmpty(current) || current !== 0) && onNavigate(-1);
-  }, [onNavigate, current]);
+  }, [onNavigate, current, length]);
   var navNext = useCallback(function () {
     return (isEmpty(current) || current + 1 < (length !== null && length !== void 0 ? length : 0)) && onNavigate(+1);
   }, [onNavigate, current, length]);