@gunkin/uiify 0.0.1-alpha

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,643 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from "react";
+import { useControllableState, useMergedRefs } from "@gunkin/uiify/hooks";
+import { createPartContext, splitRef } from "@gunkin/uiify/core";
+import { useAnchorPosition } from "@gunkin/uiify/core/anchor-position";
+import { composeEventHandlers } from "@gunkin/uiify/core/compose-event-handlers";
+import { useDirection } from "@gunkin/uiify/core/direction";
+import { createHoverIntentStore } from "@gunkin/uiify/core/hover-intent-store";
+import { usePopover } from "@gunkin/uiify/core/popover";
+import { RovingFocusItem, RovingFocusRoot } from "@gunkin/uiify/core/roving-focus";
+import { useRenderElement } from "@gunkin/uiify/core/render";
+import { createMenuSelectEvent } from "../internal/menu/menu-utils.js";
+import { focusMenuItem } from "../internal/menu/focus-menu-item.js";
+import { MenuGroup, MenuLabel, MenuSeparator } from "../internal/menu/menu-parts.js";
+import { useMenuSurface } from "../internal/menu/use-menu-surface.js";
+import { DropdownMenuBar } from "./DropdownMenuBar.js";
+function mapReason(reason) {
+  if (reason === "escape-key") return "escape";
+  if (reason === "focus-outside") return "focus-out";
+  if (reason === "native-toggle") return "trigger-press";
+  return reason;
+}
+const [DropdownMenuProvider, useDropdownMenuContext] = createPartContext("DropdownMenu");
+function DropdownMenuRoot(props) {
+  const {
+    children,
+    defaultOpen,
+    dir: localDir,
+    disabled = false,
+    loop = true,
+    onOpenChange,
+    open
+  } = props;
+  const dir = useDirection(localDir);
+  const surface = useMenuSurface({
+    mode: "auto",
+    ...defaultOpen !== void 0 ? { defaultOpen } : {},
+    ...open !== void 0 ? { open } : {},
+    ...onOpenChange ? {
+      onOpenChange: (next, details) => onOpenChange(next, { event: details.event, reason: mapReason(details.reason) })
+    } : {}
+  });
+  const intentRef = useRef(null);
+  intentRef.current ??= createHoverIntentStore({ closeDelay: 150, openDelay: 0 });
+  const intent = intentRef.current;
+  const hoverEnabledRef = useRef(false);
+  const openRef = useRef(surface.open);
+  openRef.current = surface.open;
+  const cancelHoverClose = useCallback(() => intent.clearCloseTimer(), [intent]);
+  const scheduleHoverClose = useCallback(() => {
+    intent.scheduleClose(() => {
+      if (openRef.current) surface.close();
+    });
+  }, [intent, surface]);
+  const value = useMemo(
+    () => ({
+      ...surface,
+      cancelHoverClose,
+      dir,
+      disabled,
+      hoverEnabledRef,
+      loop,
+      scheduleHoverClose
+    }),
+    [cancelHoverClose, surface, dir, disabled, loop, scheduleHoverClose]
+  );
+  return /* @__PURE__ */ jsx(DropdownMenuProvider, { value, children });
+}
+function DropdownMenuTrigger(props) {
+  const {
+    as,
+    render,
+    className,
+    openOnHover = false,
+    ...consumerProps
+  } = props;
+  const {
+    anchorProps,
+    cancelHoverClose,
+    close,
+    disabled,
+    focusTrigger,
+    hoverEnabledRef,
+    open,
+    openPopover,
+    openToItem,
+    scheduleHoverClose,
+    setTriggerElement,
+    triggerProps
+  } = useDropdownMenuContext("Trigger");
+  hoverEnabledRef.current = openOnHover;
+  const [consumerRef, withoutRef] = splitRef(consumerProps);
+  const mergedRef = useMergedRefs(setTriggerElement, consumerRef);
+  const nativeButton = !as || as === "button";
+  const {
+    onClick: consumerOnClick,
+    onKeyDown: consumerOnKeyDown,
+    onPointerEnter: consumerOnPointerEnter,
+    onPointerLeave: consumerOnPointerLeave
+  } = withoutRef;
+  const internalOnClick = triggerProps.onClick;
+  const handlePointerEnter = () => {
+    if (disabled) return;
+    cancelHoverClose();
+    if (!open) openPopover();
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (open) close();
+      else openToItem(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      openToItem(event.key === "ArrowUp");
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      close();
+      focusTrigger();
+    }
+  };
+  return useRenderElement({
+    as,
+    defaultTag: "button",
+    render,
+    props: {
+      ...withoutRef,
+      ...triggerProps,
+      ...anchorProps,
+      ref: mergedRef,
+      "aria-haspopup": "menu",
+      "data-part": "trigger",
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled ? "" : void 0,
+      disabled: nativeButton && disabled ? true : void 0,
+      ...nativeButton && !triggerProps.type ? { type: "button" } : {},
+      ...className ? { className } : {},
+      onClick: disabled ? consumerOnClick : composeEventHandlers(consumerOnClick, internalOnClick),
+      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),
+      ...openOnHover && !disabled ? {
+        onPointerEnter: composeEventHandlers(consumerOnPointerEnter, handlePointerEnter),
+        onPointerLeave: composeEventHandlers(consumerOnPointerLeave, scheduleHoverClose)
+      } : {}
+    },
+    state: { open }
+  });
+}
+function DropdownMenuContent(props) {
+  const {
+    align = "start",
+    as,
+    className,
+    side = "bottom",
+    children,
+    render,
+    ...consumerProps
+  } = props;
+  const {
+    cancelHoverClose,
+    close,
+    contentRef,
+    dir,
+    focusTrigger,
+    hoverEnabledRef,
+    loop,
+    open,
+    popupProps,
+    popupRef,
+    positionerProps,
+    scheduleHoverClose
+  } = useDropdownMenuContext("Content");
+  const [consumerRef, withoutRef] = splitRef(consumerProps);
+  const mergedRef = useMergedRefs(popupRef, contentRef, consumerRef);
+  const {
+    onKeyDown: consumerOnKeyDown,
+    onPointerEnter: consumerOnPointerEnter,
+    onPointerLeave: consumerOnPointerLeave
+  } = withoutRef;
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      focusTrigger();
+    }
+  };
+  const contentProps = {
+    ...withoutRef,
+    ...popupProps,
+    ...positionerProps,
+    ref: mergedRef,
+    role: "menu",
+    "data-part": "content",
+    "data-align": align,
+    "data-side": side,
+    "data-state": open ? "open" : "closed",
+    ...className ? { className } : {},
+    onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),
+    ...hoverEnabledRef.current ? {
+      onPointerEnter: composeEventHandlers(consumerOnPointerEnter, cancelHoverClose),
+      onPointerLeave: composeEventHandlers(consumerOnPointerLeave, scheduleHoverClose)
+    } : {},
+    children
+  };
+  if (render)
+    return /* @__PURE__ */ jsx(
+      RovingFocusRoot,
+      {
+        direction: dir,
+        loop,
+        orientation: "vertical",
+        ...contentProps,
+        render: (p) => render(p, { open })
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    RovingFocusRoot,
+    {
+      as: as ?? "div",
+      direction: dir,
+      loop,
+      orientation: "vertical",
+      ...contentProps
+    }
+  );
+}
+function useItemActivation({
+  closeOnSelect,
+  disabled,
+  onSelect,
+  onStateChange
+}) {
+  const { close, focusTrigger } = useDropdownMenuContext("Item");
+  const select = (event) => {
+    if (disabled) return;
+    const selectEvent = createMenuSelectEvent();
+    onSelect?.(selectEvent);
+    if (!selectEvent.defaultPrevented) {
+      onStateChange?.();
+      if (closeOnSelect) {
+        close();
+        focusTrigger();
+      }
+    }
+    event.preventDefault();
+  };
+  return {
+    select,
+    keyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") select(event);
+    }
+  };
+}
+function MenuItem(props) {
+  const {
+    as,
+    render,
+    children,
+    className,
+    closeOnSelect,
+    disabled = false,
+    onSelect,
+    textValue,
+    roleName,
+    checked,
+    state,
+    onStateChange,
+    defaultClose,
+    ...consumerProps
+  } = props;
+  const { onClick: consumerOnClick, onKeyDown: consumerOnKeyDown } = consumerProps;
+  const activation = useItemActivation({
+    closeOnSelect: closeOnSelect ?? defaultClose,
+    disabled,
+    onSelect,
+    ...onStateChange ? { onStateChange } : {}
+  });
+  const itemProps = {
+    ...consumerProps,
+    role: roleName,
+    "aria-checked": checked,
+    "data-part": roleName === "menuitem" ? "item" : roleName.replace("menuitem", "") + "-item",
+    "data-state": state,
+    ...className ? { className } : {},
+    onClick: composeEventHandlers(consumerOnClick, activation.select),
+    onKeyDown: composeEventHandlers(consumerOnKeyDown, activation.keyDown),
+    children
+  };
+  if (render)
+    return /* @__PURE__ */ jsx(
+      RovingFocusItem,
+      {
+        disabled,
+        ...textValue !== void 0 ? { textValue } : {},
+        ...itemProps,
+        render: (p) => render(p, { disabled })
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    RovingFocusItem,
+    {
+      as: as ?? "div",
+      disabled,
+      ...textValue !== void 0 ? { textValue } : {},
+      ...itemProps
+    }
+  );
+}
+function DropdownMenuItem(props) {
+  return /* @__PURE__ */ jsx(MenuItem, { ...props, roleName: "menuitem", defaultClose: true });
+}
+const [SelectionProvider, useSelectionContext] = createPartContext(
+  "DropdownMenu",
+  "ItemIndicator"
+);
+function DropdownMenuCheckboxItem(props) {
+  const { checked: controlled, defaultChecked = false, onCheckedChange, ...itemProps } = props;
+  const [checked, setChecked] = useControllableState({
+    value: controlled,
+    defaultValue: defaultChecked
+  });
+  const next = checked === "indeterminate" ? true : !checked;
+  return /* @__PURE__ */ jsx(SelectionProvider, { value: { checked, kind: "checkbox" }, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ...itemProps,
+      roleName: "menuitemcheckbox",
+      checked: checked === "indeterminate" ? "mixed" : checked,
+      state: checked === "indeterminate" ? "indeterminate" : checked ? "checked" : "unchecked",
+      defaultClose: false,
+      onStateChange: () => {
+        setChecked(next);
+        onCheckedChange?.(next);
+      }
+    }
+  ) });
+}
+const [RadioProvider, useRadioContext] = createPartContext(
+  "DropdownMenu",
+  "RadioGroup"
+);
+function DropdownMenuRadioGroup(props) {
+  const {
+    as,
+    render,
+    children,
+    defaultValue,
+    onValueChange,
+    value: controlled,
+    ...consumerProps
+  } = props;
+  const [value, setValue] = useControllableState({
+    value: controlled,
+    defaultValue,
+    ...onValueChange ? {
+      onChange: (next) => {
+        if (next !== void 0) onValueChange(next);
+      }
+    } : {}
+  });
+  return /* @__PURE__ */ jsx(RadioProvider, { value: { value, setValue }, children: useRenderElement({
+    as,
+    defaultTag: "div",
+    render,
+    props: { ...consumerProps, role: "group", "data-part": "radio-group", children },
+    state: { value }
+  }) });
+}
+function DropdownMenuRadioItem(props) {
+  const { value, ...itemProps } = props;
+  const radio = useRadioContext("RadioItem");
+  const checked = radio.value === value;
+  return /* @__PURE__ */ jsx(SelectionProvider, { value: { checked, kind: "radio" }, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ...itemProps,
+      roleName: "menuitemradio",
+      checked,
+      state: checked ? "checked" : "unchecked",
+      defaultClose: false,
+      onStateChange: () => radio.setValue(value)
+    }
+  ) });
+}
+function Part({
+  part,
+  defaultTag,
+  ...props
+}) {
+  const { as, render, children, className, ...consumerProps } = props;
+  return useRenderElement({
+    as,
+    defaultTag,
+    render,
+    props: { ...consumerProps, "data-part": part, ...className ? { className } : {}, children },
+    state: {}
+  });
+}
+const DropdownMenuItemIcon = (p) => /* @__PURE__ */ jsx(Part, { ...p, part: "item-icon", defaultTag: "span" });
+const DropdownMenuItemText = (p) => /* @__PURE__ */ jsx(Part, { ...p, part: "item-text", defaultTag: "span" });
+const DropdownMenuItemDescription = (p) => /* @__PURE__ */ jsx(Part, { ...p, part: "item-description", defaultTag: "span" });
+const DropdownMenuShortcut = (p) => /* @__PURE__ */ jsx(Part, { ...p, part: "shortcut", defaultTag: "kbd" });
+function DropdownMenuItemIndicator(p) {
+  const s = useSelectionContext("ItemIndicator");
+  return /* @__PURE__ */ jsx(
+    Part,
+    {
+      ...p,
+      part: "item-indicator",
+      defaultTag: "span",
+      "data-state": s.checked === "indeterminate" ? "indeterminate" : s.checked ? "checked" : "unchecked"
+    }
+  );
+}
+function DropdownMenuGroup(p) {
+  return /* @__PURE__ */ jsx(MenuGroup, { ...p });
+}
+function DropdownMenuLabel(p) {
+  return /* @__PURE__ */ jsx(MenuLabel, { ...p });
+}
+function DropdownMenuSeparator(p) {
+  return /* @__PURE__ */ jsx(MenuSeparator, { ...p });
+}
+const [SubProvider, useSubContext] = createPartContext("DropdownMenu", "Sub");
+function DropdownMenuSub(props) {
+  const { children, defaultOpen, onOpenChange, open } = props;
+  const contentRef = useRef(null);
+  const triggerRef = useRef(null);
+  const popover = usePopover({
+    mode: "auto",
+    ...defaultOpen !== void 0 ? { defaultOpen } : {},
+    ...open !== void 0 ? { open } : {},
+    ...onOpenChange ? {
+      onOpenChange: (next, details) => onOpenChange(next, { event: details.event, reason: mapReason(details.reason) })
+    } : {}
+  });
+  const anchor = useAnchorPosition();
+  const clickedRef = useRef(false);
+  const value = useMemo(
+    () => ({ anchor, clickedRef, contentRef, open: popover.open, popover, triggerRef }),
+    [anchor, popover, clickedRef]
+  );
+  return /* @__PURE__ */ jsx(SubProvider, { value, children });
+}
+function DropdownMenuSubTrigger(props) {
+  const {
+    as,
+    render,
+    children,
+    disabled = false,
+    textValue,
+    ...consumerProps
+  } = props;
+  const sub = useSubContext("SubTrigger");
+  const root = useDropdownMenuContext("SubTrigger");
+  const { clickedRef } = sub;
+  const { onClick, onKeyDown, onPointerEnter, ...withoutEvents } = consumerProps;
+  const handleKeyDown = (event) => {
+    const openKey = root.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+    if (event.key === openKey || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      clickedRef.current = true;
+      sub.popover.openPopover();
+      queueMicrotask(() => focusMenuItem(sub.contentRef.current));
+    }
+  };
+  const handlePointerEnter = () => {
+    clickedRef.current = false;
+    sub.popover.openPopover();
+  };
+  const handlePointerLeave = (event) => {
+    if (clickedRef.current) return;
+    const nextTarget = event.relatedTarget;
+    if (nextTarget instanceof Node && sub.contentRef.current?.contains(nextTarget)) return;
+    sub.popover.close();
+  };
+  const handleClick = (event) => {
+    clickedRef.current = true;
+    if (!sub.open) {
+      sub.popover.triggerProps.onClick(event);
+    }
+  };
+  const triggerProps = {
+    ...withoutEvents,
+    ...sub.popover.triggerProps,
+    ...sub.anchor.anchorProps,
+    command: "show-popover",
+    ref: sub.triggerRef,
+    role: "menuitem",
+    "aria-haspopup": "menu",
+    "aria-expanded": sub.open,
+    "data-part": "sub-trigger",
+    "data-state": sub.open ? "open" : "closed",
+    onClick: composeEventHandlers(onClick, handleClick),
+    onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+    onPointerEnter: composeEventHandlers(onPointerEnter, handlePointerEnter),
+    onPointerLeave: handlePointerLeave,
+    children
+  };
+  if (render)
+    return /* @__PURE__ */ jsx(
+      RovingFocusItem,
+      {
+        ...triggerProps,
+        disabled,
+        ...textValue !== void 0 ? { textValue } : {},
+        render: (p) => render(p, { disabled, open: sub.open })
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    RovingFocusItem,
+    {
+      as: as ?? "button",
+      ...triggerProps,
+      disabled,
+      ...textValue !== void 0 ? { textValue } : {}
+    }
+  );
+}
+function DropdownMenuSubContent(props) {
+  const {
+    align = "start",
+    as,
+    render,
+    side = "right",
+    children,
+    ...consumerProps
+  } = props;
+  const sub = useSubContext("SubContent");
+  const root = useDropdownMenuContext("SubContent");
+  const handleKeyDown = (event) => {
+    const closeKey = root.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+    if (event.key === closeKey || event.key === "Escape") {
+      event.preventDefault();
+      sub.popover.close();
+      sub.triggerRef.current?.focus();
+    }
+  };
+  const contentProps = {
+    ...consumerProps,
+    ...sub.popover.popupProps,
+    ...sub.anchor.positionerProps,
+    ref: useMergedRefs(sub.popover.popupRef, sub.contentRef),
+    role: "menu",
+    "data-part": "sub-content",
+    "data-state": sub.open ? "open" : "closed",
+    "data-side": side,
+    "data-align": align,
+    onKeyDown: handleKeyDown,
+    onPointerLeave: (event) => {
+      if (sub.clickedRef.current) return;
+      const nextTarget = event.relatedTarget;
+      if (!(nextTarget instanceof Node) || !sub.triggerRef.current?.contains(nextTarget)) {
+        sub.popover.close();
+      }
+    },
+    children
+  };
+  if (render)
+    return /* @__PURE__ */ jsx(
+      RovingFocusRoot,
+      {
+        direction: root.dir,
+        loop: root.loop,
+        orientation: "vertical",
+        ...contentProps,
+        render: (p) => render(p, { open: sub.open })
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    RovingFocusRoot,
+    {
+      as: as ?? "div",
+      direction: root.dir,
+      loop: root.loop,
+      orientation: "vertical",
+      ...contentProps
+    }
+  );
+}
+DropdownMenuRoot.displayName = "DropdownMenuRoot";
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+DropdownMenuContent.displayName = "DropdownMenuContent";
+MenuItem.displayName = "DropdownMenuItemBase";
+DropdownMenuItem.displayName = "DropdownMenuItem";
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+Part.displayName = "DropdownMenuPart";
+DropdownMenuItemIcon.displayName = "DropdownMenuItemIcon";
+DropdownMenuItemText.displayName = "DropdownMenuItemText";
+DropdownMenuItemDescription.displayName = "DropdownMenuItemDescription";
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+DropdownMenuItemIndicator.displayName = "DropdownMenuItemIndicator";
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+DropdownMenuSub.displayName = "DropdownMenuSub";
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+const DropdownMenu = {
+  Bar: DropdownMenuBar,
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Content: DropdownMenuContent,
+  Group: DropdownMenuGroup,
+  Label: DropdownMenuLabel,
+  Item: DropdownMenuItem,
+  ItemIcon: DropdownMenuItemIcon,
+  ItemText: DropdownMenuItemText,
+  ItemDescription: DropdownMenuItemDescription,
+  Shortcut: DropdownMenuShortcut,
+  Separator: DropdownMenuSeparator,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  ItemIndicator: DropdownMenuItemIndicator,
+  RadioGroup: DropdownMenuRadioGroup,
+  RadioItem: DropdownMenuRadioItem,
+  Sub: DropdownMenuSub,
+  SubTrigger: DropdownMenuSubTrigger,
+  SubContent: DropdownMenuSubContent
+};
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuItemDescription,
+  DropdownMenuItemIcon,
+  DropdownMenuItemIndicator,
+  DropdownMenuItemText,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRoot,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+};
+//# sourceMappingURL=DropdownMenu.js.map