@hopper-ui/components 1.5.16 → 1.6.0

package/dist/chunk-ZSOUOAD4.js

@@ -0,0 +1,98 @@
+import { _PopoverBase } from './chunk-WDZO4L7Z.js';
+import { MenuContext, InternalMenuContext } from './chunk-U4LYXB7W.js';
+import { MenuItemContext } from './chunk-OGC6BUEX.js';
+import { InternalMenuTriggerContext } from './chunk-ERUOMTWL.js';
+import { DividerContext } from './chunk-AB4BRU6Z.js';
+import { HeaderContext } from './chunk-FOQ7KN4V.js';
+import { SlotProvider } from './chunk-M36KANKC.js';
+import { cssModule } from './chunk-KVDXQMWI.js';
+import { useStyledSystem } from '@hopper-ui/styled-system';
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { useContextProps, Menu as Menu$1 } from 'react-aria-components';
+import { jsx } from 'react/jsx-runtime';
+
+// css-module:./Menu.module.css#css-module
+var Menu_module_default = { "hop-Menu": "Menu-module__hop-Menu___FgwQR", "hop-Menu__popover": "Menu-module__hop-Menu__popover___5EIMV", "hop-Menu__header": "Menu-module__hop-Menu__header___vxEhp", "hop-Menu__divider": "Menu-module__hop-Menu__divider___LzWEK" };
+var GlobalMenuCssSelector = "hop-Menu";
+function Menu(props, ref) {
+  [props, ref] = useContextProps(props, ref, MenuContext);
+  const { isSubmenu } = useContext(InternalMenuContext);
+  const menuTriggerContext = useContext(InternalMenuTriggerContext);
+  const { stylingProps, ...ownProps } = useStyledSystem(props);
+  const { align = "start", direction = "bottom", allowFlip } = menuTriggerContext != null ? menuTriggerContext : {};
+  let initialPlacement = `${direction} ${align}`;
+  if (isSubmenu) {
+    initialPlacement = "end top";
+  }
+  const {
+    className,
+    style,
+    children,
+    popoverProps,
+    slot,
+    size,
+    ...otherProps
+  } = ownProps;
+  const classNames = clsx(
+    className,
+    GlobalMenuCssSelector,
+    cssModule(
+      Menu_module_default,
+      GlobalMenuCssSelector
+    ),
+    stylingProps.className
+  );
+  const mergedStyles = {
+    ...style,
+    ...stylingProps.style
+  };
+  const content = /* @__PURE__ */ jsx(InternalMenuContext.Provider, { value: { isSubmenu: true }, children: /* @__PURE__ */ jsx(
+    SlotProvider,
+    {
+      values: [
+        [HeaderContext, {
+          className: Menu_module_default["hop-Menu__header"]
+        }],
+        [DividerContext, {
+          className: Menu_module_default["hop-Menu__divider"]
+        }],
+        [MenuItemContext, {
+          size
+        }]
+      ],
+      children: /* @__PURE__ */ jsx(
+        Menu$1,
+        {
+          slot,
+          className: classNames,
+          style: mergedStyles,
+          ...otherProps,
+          children
+        }
+      )
+    }
+  ) });
+  if (menuTriggerContext || isSubmenu) {
+    return /* @__PURE__ */ jsx(
+      _PopoverBase,
+      {
+        ref,
+        slot,
+        placement: initialPlacement,
+        shouldFlip: allowFlip,
+        outline: "none",
+        offset: isSubmenu ? 12 : 8,
+        crossOffset: isSubmenu ? -10 : 0,
+        className: clsx(popoverProps == null ? void 0 : popoverProps.className, Menu_module_default["hop-Menu__popover"]),
+        ...popoverProps,
+        children: content
+      }
+    );
+  }
+  return content;
+}
+var _Menu = forwardRef(Menu);
+_Menu.displayName = "Menu";
+
+export { GlobalMenuCssSelector, _Menu };