@react-fabric/core 1.0.0-beta.0

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

@@ -0,0 +1,106 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var SvgTextSize = ["", ".875em", ".525em", ".35em", ".25em"];
+var SizeMap = {
+  xs: "0.625rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem"
+};
+
+/**
+ * An icon is a display component for svg icon path / image
+ */
+var Icon = function Icon(_ref) {
+  var ref = _ref.ref,
+    icon = _ref.icon,
+    bg = _ref.bg,
+    color = _ref.color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "" : _ref$size,
+    rtlFlip = _ref.rtlFlip,
+    animate = _ref.animate,
+    rounded = _ref.rounded,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? "0 0 24 24" : _ref$viewBox,
+    className = _ref.className,
+    onClick = _ref.onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  /** ***************** style map *******************/
+  var styles = useEffectDebugger.useMemoDebugger(function () {
+    var s = {};
+    if (bg) {
+      s.backgroundColor = getColor.getColor(bg);
+    }
+    if (color) {
+      s.color = getColor.getColor(color);
+    }
+    if (size && !(size in SizeMap)) {
+      s.fontSize = size;
+    }
+    if (size && size in SizeMap) {
+      s.fontSize = SizeMap[size];
+    }
+    return s;
+  }, [bg, color, size], "Icon styles");
+
+  /** ***************** check if icon is svg path *******************/
+  var isSvg = useEffectDebugger.useMemoDebugger(function () {
+    return utilities.isSvgPath(icon);
+  }, [icon], "Icon isSvg");
+
+  /** ***************** render icon *******************/
+  var iconEl = useEffectDebugger.useMemoDebugger(function () {
+    var _SvgTextSize$icon$len;
+    if (!utilities.isString(icon)) {
+      throw Error("Invalid icon expected string");
+    }
+    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$len = SvgTextSize[icon.length]) !== null && _SvgTextSize$icon$len !== void 0 ? _SvgTextSize$icon$len : "1em"
+        },
+        children: icon
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsx("i", {
+      className: "".concat(icon)
+    });
+  }, [icon, isSvg, viewBox], "Icon el");
+  return /*#__PURE__*/jsxRuntime.jsx("dfn", _objectSpread(_objectSpread({}, rest), {}, {
+    ref: ref,
+    role: "presentation",
+    className: classNames(Icon_module.icon, className, "select-none overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), !rounded && "rounded", rounded && "rounded-full", animate && "animate-".concat(animate)),
+    onClick: onClick,
+    "data-flip": rtlFlip,
+    style: styles,
+    "data-clickable": !!onClick,
+    children: iconEl
+  }));
+};
+
+exports.Icon = Icon;

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

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

package/dist/cjs/components/media/Media.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var icons = require('../../types/icons.js');
+var Button = require('../button/Button.js');
+var Media_module = require('./Media.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["src", "alt", "reel", "fit", "className"],
+  _excluded2 = ["src", "poster", "reel", "autoPlay", "playOnHover", "fit", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Image = function Image(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    reel = _ref.reel,
+    _ref$fit = _ref.fit,
+    fit = _ref$fit === void 0 ? "cover" : _ref$fit,
+    className = _ref.className,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useState = react.useState("light"),
+    _useState2 = _slicedToArray(_useState, 2),
+    colorSet = _useState2[0],
+    setColorSet = _useState2[1];
+  var loadIndicator = react.useMemo(function () {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames(Media_module.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-gray animate-pulse"),
+      children: "\u25CF\u25CF\u25CF"
+    });
+  }, [src]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    "data-ref": "image",
+    className: classNames(Media_module.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && Media_module.mediaReel, className),
+    "data-colorset": colorSet
+  }, aria), {}, {
+    children: [loadIndicator, /*#__PURE__*/jsxRuntime.jsx("img", {
+      alt: alt !== null && alt !== void 0 ? alt : src,
+      src: src,
+      loading: "lazy",
+      crossOrigin: "anonymous",
+      className: classNames(Media_module.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      onLoad: function onLoad(e) {
+        var _e$currentTarget$prev;
+        (_e$currentTarget$prev = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev === void 0 || _e$currentTarget$prev.remove();
+        setColorSet(utilities.getImageColorset(e.currentTarget));
+      }
+    })]
+  }));
+};
+var Video = function Video(_ref2) {
+  var src = _ref2.src,
+    poster = _ref2.poster,
+    reel = _ref2.reel,
+    autoPlay = _ref2.autoPlay,
+    playOnHover = _ref2.playOnHover,
+    _ref2$fit = _ref2.fit,
+    fit = _ref2$fit === void 0 ? "cover" : _ref2$fit,
+    className = _ref2.className,
+    aria = _objectWithoutProperties(_ref2, _excluded2);
+  var videoRef = react.useRef(null);
+  var _useState3 = react.useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    volume = _useState6[0],
+    setVolume = _useState6[1];
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    "data-ref": "video",
+    className: classNames(Media_module.mediaContainer, "relative overflow-hidden bg-gray inline-block", reel && Media_module.mediaReel, className),
+    onMouseEnter: function onMouseEnter() {
+      var _videoRef$current;
+      playOnHover && ((_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play());
+    },
+    onMouseLeave: function onMouseLeave() {
+      var _videoRef$current2;
+      playOnHover && ((_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause());
+    }
+  }, aria), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames(Media_module.mediaPlaceholder, "absolute z-1 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-5xl animate-pulse"),
+      children: "\u25CF\u25CF\u25CF"
+    }), /*#__PURE__*/jsxRuntime.jsxs("video", {
+      loop: true,
+      ref: videoRef,
+      controls: false,
+      poster: poster,
+      autoPlay: autoPlay,
+      className: classNames(Media_module.media, "pointer-events-none w-full h-full", fit && "object-".concat(fit)),
+      onPlay: function onPlay() {
+        return setState(true);
+      },
+      onPause: function onPause() {
+        return setState(false);
+      },
+      onVolumeChange: function onVolumeChange(e) {
+        return setVolume(!!e.currentTarget.volume);
+      },
+      onLoadedData: function onLoadedData(e) {
+        var _e$currentTarget$prev2;
+        e.currentTarget.volume = 0;
+        (_e$currentTarget$prev2 = e.currentTarget.previousElementSibling) === null || _e$currentTarget$prev2 === void 0 || _e$currentTarget$prev2.remove();
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("source", {
+        src: src
+      }), /*#__PURE__*/jsxRuntime.jsx("track", {
+        kind: "captions"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-inner-clickable": true,
+      className: classNames(Media_module.mediaControls, "absolute bottom-6 end-6 rounded-full flex flex-col"),
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+        rounded: true,
+        variant: "link",
+        className: Media_module.mediaControlPlaceholder,
+        icon: icons.CoreIcons.ellipsis,
+        "aria-label": "controls"
+      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+        rounded: true,
+        variant: "link",
+        "aria-label": "controls",
+        className: Media_module.mediaControlAction,
+        onClick: function onClick() {
+          videoRef.current && (videoRef.current.volume = videoRef.current.volume ? 0 : 1);
+        },
+        icon: volume ? icons.CoreIcons.volumeOn : icons.CoreIcons.volumeOff
+      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+        rounded: true,
+        variant: "link",
+        "aria-label": "controls",
+        className: Media_module.mediaControlAction,
+        onClick: function onClick() {
+          var _videoRef$current3, _videoRef$current4, _videoRef$current5;
+          (_videoRef$current3 = videoRef.current) !== null && _videoRef$current3 !== void 0 && _videoRef$current3.paused ? (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.play() : (_videoRef$current5 = videoRef.current) === null || _videoRef$current5 === void 0 ? void 0 : _videoRef$current5.pause();
+        },
+        icon: state ? icons.CoreIcons.pause : icons.CoreIcons.play
+      })]
+    })]
+  }));
+};
+
+exports.Image = Image;
+exports.Video = Video;

package/dist/cjs/components/media/Media.module.css

@@ -0,0 +1 @@
+@layer comp{.mediaContainer{&.mediaReel{&:after,&:before{background-image:linear-gradient(90deg,#222c 0,#222c .25rem,#fff8 0,#fff8 .75rem,#222c 0,#222c 1rem);background-position:50%;background-repeat:repeat-x;background-size:1rem;border:.125rem solid #222c;content:"";height:.5rem;inset-inline:0;position:absolute}&:before{top:0}&:after{bottom:0}}& .mediaControls{& [data-ref=button]{margin:0;&>:first-child{background-color:theme(colors.black/50%);color:#fff;&:hover{background-color:theme(colors.black/80%);color:theme(colors.primary.600)}}}& .mediaControlAction>:first-child{background-color:theme(colors.black/70%)}& .mediaControlAction+.mediaControlAction{margin-top:8px}}}}@layer util{& .mediaControls{&:hover{& .mediaControlPlaceholder{display:none}}&:not(:hover){& .mediaControlAction{display:none}}}}

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

@@ -0,0 +1,84 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react$1 = require('@floating-ui/react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ContextMenu = function ContextMenu(_ref) {
+  var children = _ref.children,
+    menu = _ref.menu;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useFloating = react$1.useFloating({
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      strategy: "fixed",
+      placement: "bottom-start",
+      whileElementsMounted: react$1.autoUpdate,
+      middleware: [react$1.offset(8), react$1.flip()]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var click = react$1.useClick(context, {});
+  var dismiss = react$1.useDismiss(context, {});
+  var _useInteractions = react$1.useInteractions([dismiss, click]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClick = react.useRef(function (e) {
+    var virtual = {
+      getBoundingClientRect: function getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          left: e.clientX,
+          right: e.clientX,
+          bottom: e.clientY
+        };
+      }
+    };
+    refs.setReference(virtual);
+    setIsOpen(true);
+    e.stopImmediatePropagation();
+    e.preventDefault();
+    return false;
+  });
+  var wrapperRef = react.useRef(function (el) {
+    var _el$parentElement, _el$parentElement2;
+    el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || _el$parentElement.removeEventListener("contextmenu", handleClick.current);
+    el === null || el === void 0 || (_el$parentElement2 = el.parentElement) === null || _el$parentElement2 === void 0 || _el$parentElement2.addEventListener("contextmenu", handleClick.current);
+  });
+  var tryClosing = react.useRef(function (e) {
+    var _e$target;
+    if ((_e$target = e.target) !== null && _e$target !== void 0 && _e$target.closest("[data-dropdown-dismiss='true']")) setTimeout(function () {
+      return setIsOpen(false);
+    }, 50);
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "contents",
+    ref: wrapperRef.current,
+    onMouseUpCapture: tryClosing.current,
+    children: [children, isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      children: /*#__PURE__*/react.cloneElement(menu, _objectSpread(_objectSpread({}, getFloatingProps()), {}, {
+        style: _objectSpread(_objectSpread({}, floatingStyles), {}, {
+          borderRadius: "var(--rounding)",
+          zIndex: "var(--z-popover)",
+          fontSize: "0.875rem"
+        }),
+        className: "bg-base outline rounded-capped shadow-lg",
+        ref: refs.setFloating,
+        onMouseUp: tryClosing.current
+      }))
+    })]
+  });
+};
+
+exports.ContextMenu = ContextMenu;

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

@@ -0,0 +1,204 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('@floating-ui/react');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react$1 = require('react');
+var icons = require('../../types/icons.js');
+var nodeCheck = require('../../utils/nodeCheck.js');
+var MenuItem = require('./MenuItem.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,
+    minimal = _ref.minimal,
+    menuClassName = _ref.menuClassName,
+    onClick = _ref.onClick,
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = react$1.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = react$1.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeIndex = _useState4[0],
+    setActiveIndex = _useState4[1];
+  var elementsRef = react$1.useRef([]);
+  var labelsRef = react$1.useRef([]);
+  var tree = react.useFloatingTree();
+  var nodeId = react.useFloatingNodeId();
+  var parentId = react.useFloatingParentNodeId();
+  var isNested = parentId !== null;
+  var _useFloating = react.useFloating({
+      nodeId: nodeId,
+      open: !isNested || isOpen,
+      onOpenChange: function onOpenChange(open, event, reason) {
+        isNested && setIsOpen(open);
+      },
+      placement: isNested ? "right-start" : "bottom-start",
+      middleware: [react.offset({
+        mainAxis: isNested ? 0 : 4,
+        alignmentAxis: isNested ? -4 : 0
+      }), react.flip(), react.shift()],
+      whileElementsMounted: react.autoUpdate
+    }),
+    floatingStyles = _useFloating.floatingStyles,
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var hover = react.useHover(context, {
+    delay: {
+      open: 75
+    },
+    handleClose: react.safePolygon({
+      blockPointerEvents: true
+    })
+  });
+  var click = react.useClick(context, {
+    toggle: true,
+    ignoreMouse: true
+  });
+  var role = react.useRole(context, {
+    role: "menu"
+  });
+  var dismiss = react.useDismiss(context, {
+    bubbles: true
+  });
+  var listNavigation = react.useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex: activeIndex,
+    nested: isNested,
+    onNavigate: setActiveIndex
+  });
+  var typeahead = react.useTypeahead(context, {
+    listRef: labelsRef,
+    onMatch: isOpen ? setActiveIndex : undefined,
+    activeIndex: activeIndex
+  });
+  var _useInteractions = react.useInteractions([click, hover, role, dismiss, listNavigation, typeahead]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps,
+    getItemProps = _useInteractions.getItemProps;
+
+  // Event emitter allows you to communicate across tree components.
+  // This effect closes all menus when an item gets clicked anywhere
+  // in the tree.
+  react$1.useEffect(function () {
+    if (!tree || !parentId) return;
+    function handleTreeClick() {
+      setIsOpen(false);
+    }
+    function onSubMenuOpen(event) {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setIsOpen(false);
+      }
+    }
+    tree.events.on("click", handleTreeClick);
+    tree.events.on("close", handleTreeClick);
+    tree.events.on("menuopen", onSubMenuOpen);
+    return function () {
+      tree.events.off("click", handleTreeClick);
+      tree.events.off("close", handleTreeClick);
+      tree.events.off("menuopen", onSubMenuOpen);
+    };
+  }, [tree, nodeId, parentId]);
+  react$1.useEffect(function () {
+    if (isOpen && tree) {
+      tree.events.emit("menuopen", {
+        parentId: parentId,
+        nodeId: nodeId
+      });
+    }
+  }, [tree, isOpen, nodeId, parentId]);
+  var handleClick = react$1.useCallback(function (e) {
+    var el = e.target;
+    if (el.dataset.id) {
+      onClick === null || onClick === void 0 || onClick(el.dataset.id);
+    }
+  }, [onClick]);
+  var Wrapper = isNested ? react.FloatingPortal : react$1.Fragment;
+  var wrapperProps = isNested ? {
+    root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined
+  } : {};
+  react$1.useEffect(function () {
+    setTimeout(function () {
+      var _refs$floating$curren;
+      return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[data-active=\"true\"]")) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.scrollIntoView({
+        block: "nearest"
+      });
+    }, 100);
+  }, [isOpen]);
+  return /*#__PURE__*/jsxRuntime.jsxs(react.FloatingNode, {
+    id: nodeId,
+    children: [isNested && /*#__PURE__*/jsxRuntime.jsx(MenuItem.MenuItem, _objectSpread(_objectSpread({}, getReferenceProps(_objectSpread(_objectSpread({}, rest), {}, {
+      id: undefined,
+      "data-dropdown-dismiss": false,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        return false;
+      }
+    }))), {}, {
+      "data-open": isOpen,
+      minimal: minimal,
+      altIcon: icons.CoreIcons.chevronRight,
+      ref: utilities.mergeRefs(refs.setReference, ref)
+    })), /*#__PURE__*/jsxRuntime.jsx(react.FloatingList, {
+      elementsRef: elementsRef,
+      labelsRef: labelsRef,
+      children: (!isNested || isOpen) && /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+        children: [isNested && /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {}), /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+          context: context,
+          modal: !isNested,
+          initialFocus: isNested ? -1 : 0,
+          returnFocus: !isNested,
+          children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+            className: classNames(menuClassName, "flex flex-col bg-base p-1 menu-list", isNested && "outline shadow-lg rounded-capped max-h-96 overflow-auto scroll-thin z-[var(--z-popover)]"),
+            autoFocus: true,
+            ref: utilities.mergeRefs(refs.setFloating, isNested ? undefined : ref)
+          }, getFloatingProps({
+            onClick: isNested ? undefined : handleClick
+          })), {}, {
+            style: !isNested ? rest.style : floatingStyles,
+            children: react$1.Children.map(children, function (child, index) {
+              if (child) {
+                labelsRef.current[index] = child.props.label;
+                return /*#__PURE__*/react$1.cloneElement(child, nodeCheck.nodeCheck(child, MenuItem.MenuItem, Menu, MenuComponent) ? _objectSpread({
+                  minimal: !isNested && minimal,
+                  "data-focus": activeIndex === index,
+                  ref: function ref(el) {
+                    return elementsRef.current[index] = el;
+                  }
+                }, getItemProps({
+                  onClick: child.props.onClick,
+                  tabIndex: activeIndex === index ? 0 : -1
+                })) : {});
+              }
+            })
+          }))
+        })]
+      }))
+    })]
+  });
+};
+var Menu = function Menu(props) {
+  var parentId = react.useFloatingParentNodeId();
+  if (parentId === null) {
+    return /*#__PURE__*/jsxRuntime.jsx(react.FloatingTree, {
+      children: /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread(_objectSpread({}, props), {}, {
+        menuClassName: props.className
+      }))
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(MenuComponent, _objectSpread({}, props));
+};
+
+exports.Menu = Menu;

package/dist/cjs/components/menu/Menu.module.css

@@ -0,0 +1 @@
+@layer comp{.menuItem{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}}}@layer var{.menuItem{color:color-mix(in lab,var(--color) 80%,var(--fabric-text));>*{pointer-events:none}&[data-focus=true]{background-color:color(from var(--color) srgb r g b/15%)}&:active{background-color:color(from var(--color) srgb r g b/35%)}&[data-open=true]{background-color:color(from var(--color) srgb r g b/10%)}&.active,&:global(.active){background-color:color(from var(--color) srgb r g b/20%);pointer-events:none;&>div{box-shadow:4px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:-4px 0 0 var(--color) inset}}}&.disabled{color:theme(textColor.tint.500);opacity:.5;pointer-events:none;&>label~*{display:none}}}.menuIcon{font-size:1.25em;padding:.3em;&.minimal{font-size:1.5em;font-weight:500;padding:.375em}}:global(.menu-list.hide-icons) .menuIcon{width:.125em}}