reka-ui/dist/Menu/MenuContentImpl.js

Vue port for Radix UI Primitives.

import { defineComponent, mergeDefaults, toRefs, ref, watch, onUnmounted, createBlock, openBlock, unref, withCtx, createVNode, renderSlot } from 'vue';
import { g as getOpenState, b as isPointerInGraceArea, F as FIRST_LAST_KEYS, L as LAST_KEYS, f as focusFirst, c as isMouseEvent } from './utils.js';
import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
import { _ as _sfc_main$4, P as PopperContentPropsDefaultValue } from '../Popper/PopperContent.js';
import { u as useBodyScrollLock } from '../shared/useBodyScrollLock.js';
import { i as injectMenuContext, a as injectMenuRootContext } from './MenuRoot.js';
import { u as useFocusGuards } from '../shared/useFocusGuards.js';
import { u as useForwardExpose } from '../shared/useForwardExpose.js';
import { u as useTypeahead } from '../shared/useTypeahead.js';
import { c as createContext } from '../shared/createContext.js';
import { _ as _sfc_main$1 } from '../FocusScope/FocusScope.js';
import { _ as _sfc_main$3 } from '../RovingFocus/RovingFocusGroup.js';
import { u as useArrowNavigation } from '../shared/useArrowNavigation.js';
import { g as getActiveElement } from '../shared/getActiveElement.js';

const [injectMenuContentContext, provideMenuContentContext] = createContext("MenuContent");
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "MenuContentImpl",
  props: /* @__PURE__ */ mergeDefaults({
    loop: { type: Boolean },
    disableOutsidePointerEvents: { type: Boolean },
    disableOutsideScroll: { type: Boolean },
    trapFocus: { type: Boolean },
    side: {},
    sideOffset: {},
    align: {},
    alignOffset: {},
    avoidCollisions: { type: Boolean },
    collisionBoundary: {},
    collisionPadding: {},
    arrowPadding: {},
    sticky: {},
    hideWhenDetached: { type: Boolean },
    positionStrategy: {},
    updatePositionStrategy: {},
    disableUpdateOnLayoutShift: { type: Boolean },
    prioritizePosition: { type: Boolean },
    reference: {},
    asChild: { type: Boolean },
    as: {}
  }, {
    ...PopperContentPropsDefaultValue
  }),
  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "entryFocus", "openAutoFocus", "closeAutoFocus", "dismiss"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const menuContext = injectMenuContext();
    const rootContext = injectMenuRootContext();
    const { trapFocus, disableOutsidePointerEvents, loop } = toRefs(props);
    useFocusGuards();
    useBodyScrollLock(disableOutsidePointerEvents.value);
    const searchRef = ref("");
    const timerRef = ref(0);
    const pointerGraceTimerRef = ref(0);
    const pointerGraceIntentRef = ref(null);
    const pointerDirRef = ref("right");
    const lastPointerXRef = ref(0);
    const currentItemId = ref(null);
    const rovingFocusGroupRef = ref();
    const { forwardRef, currentElement: contentElement } = useForwardExpose();
    const { handleTypeaheadSearch } = useTypeahead();
    watch(contentElement, (el) => {
      menuContext.onContentChange(el);
    });
    onUnmounted(() => {
      window.clearTimeout(timerRef.value);
    });
    function isPointerMovingToSubmenu(event) {
      const isMovingTowards = pointerDirRef.value === pointerGraceIntentRef.value?.side;
      return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.value?.area);
    }
    async function handleMountAutoFocus(event) {
      emits("openAutoFocus", event);
      if (event.defaultPrevented)
        return;
      event.preventDefault();
      contentElement.value?.focus({
        preventScroll: true
      });
    }
    function handleKeyDown(event) {
      if (event.defaultPrevented)
        return;
      const target = event.target;
      const isKeyDownInside = target.closest("[data-reka-menu-content]") === event.currentTarget;
      const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
      const isCharacterKey = event.key.length === 1;
      const el = useArrowNavigation(
        event,
        getActiveElement(),
        contentElement.value,
        {
          loop: loop.value,
          arrowKeyOptions: "vertical",
          dir: rootContext?.dir.value,
          focus: true,
          attributeName: "[data-reka-collection-item]:not([data-disabled])"
        }
      );
      if (el)
        return el?.focus();
      if (event.code === "Space")
        return;
      const collectionItems = rovingFocusGroupRef.value?.getItems() ?? [];
      if (isKeyDownInside) {
        if (event.key === "Tab")
          event.preventDefault();
        if (!isModifierKey && isCharacterKey)
          handleTypeaheadSearch(event.key, collectionItems);
      }
      if (event.target !== contentElement.value)
        return;
      if (!FIRST_LAST_KEYS.includes(event.key))
        return;
      event.preventDefault();
      const candidateNodes = [...collectionItems.map((item) => item.ref)];
      if (LAST_KEYS.includes(event.key))
        candidateNodes.reverse();
      focusFirst(candidateNodes);
    }
    function handleBlur(event) {
      if (!event?.currentTarget?.contains?.(event.target)) {
        window.clearTimeout(timerRef.value);
        searchRef.value = "";
      }
    }
    function handlePointerMove(event) {
      if (!isMouseEvent(event))
        return;
      const target = event.target;
      const pointerXHasChanged = lastPointerXRef.value !== event.clientX;
      if (event?.currentTarget?.contains(target) && pointerXHasChanged) {
        const newDir = event.clientX > lastPointerXRef.value ? "right" : "left";
        pointerDirRef.value = newDir;
        lastPointerXRef.value = event.clientX;
      }
    }
    provideMenuContentContext({
      onItemEnter: (event) => {
        if (isPointerMovingToSubmenu(event))
          return true;
        else
          return false;
      },
      onItemLeave: (event) => {
        if (isPointerMovingToSubmenu(event))
          return;
        contentElement.value?.focus();
        currentItemId.value = null;
      },
      onTriggerLeave: (event) => {
        if (isPointerMovingToSubmenu(event))
          return true;
        else
          return false;
      },
      searchRef,
      pointerGraceTimerRef,
      onPointerGraceIntentChange: (intent) => {
        pointerGraceIntentRef.value = intent;
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(_sfc_main$1), {
        "as-child": "",
        trapped: unref(trapFocus),
        onMountAutoFocus: handleMountAutoFocus,
        onUnmountAutoFocus: _cache[7] || (_cache[7] = ($event) => emits("closeAutoFocus", $event))
      }, {
        default: withCtx(() => [
          createVNode(unref(_sfc_main$2), {
            "as-child": "",
            "disable-outside-pointer-events": unref(disableOutsidePointerEvents),
            onEscapeKeyDown: _cache[2] || (_cache[2] = ($event) => emits("escapeKeyDown", $event)),
            onPointerDownOutside: _cache[3] || (_cache[3] = ($event) => emits("pointerDownOutside", $event)),
            onFocusOutside: _cache[4] || (_cache[4] = ($event) => emits("focusOutside", $event)),
            onInteractOutside: _cache[5] || (_cache[5] = ($event) => emits("interactOutside", $event)),
            onDismiss: _cache[6] || (_cache[6] = ($event) => emits("dismiss"))
          }, {
            default: withCtx(() => [
              createVNode(unref(_sfc_main$3), {
                ref_key: "rovingFocusGroupRef",
                ref: rovingFocusGroupRef,
                "current-tab-stop-id": currentItemId.value,
                "onUpdate:currentTabStopId": _cache[0] || (_cache[0] = ($event) => currentItemId.value = $event),
                "as-child": "",
                orientation: "vertical",
                dir: unref(rootContext).dir.value,
                loop: unref(loop),
                onEntryFocus: _cache[1] || (_cache[1] = (event) => {
                  emits("entryFocus", event);
                  if (!unref(rootContext).isUsingKeyboardRef.value) event.preventDefault();
                })
              }, {
                default: withCtx(() => [
                  createVNode(unref(_sfc_main$4), {
                    ref: unref(forwardRef),
                    role: "menu",
                    as: _ctx.as,
                    "as-child": _ctx.asChild,
                    "aria-orientation": "vertical",
                    "data-reka-menu-content": "",
                    "data-state": unref(getOpenState)(unref(menuContext).open.value),
                    dir: unref(rootContext).dir.value,
                    side: _ctx.side,
                    "side-offset": _ctx.sideOffset,
                    align: _ctx.align,
                    "align-offset": _ctx.alignOffset,
                    "avoid-collisions": _ctx.avoidCollisions,
                    "collision-boundary": _ctx.collisionBoundary,
                    "collision-padding": _ctx.collisionPadding,
                    "arrow-padding": _ctx.arrowPadding,
                    "prioritize-position": _ctx.prioritizePosition,
                    "position-strategy": _ctx.positionStrategy,
                    "update-position-strategy": _ctx.updatePositionStrategy,
                    sticky: _ctx.sticky,
                    "hide-when-detached": _ctx.hideWhenDetached,
                    reference: _ctx.reference,
                    onKeydown: handleKeyDown,
                    onBlur: handleBlur,
                    onPointermove: handlePointerMove
                  }, {
                    default: withCtx(() => [
                      renderSlot(_ctx.$slots, "default")
                    ]),
                    _: 3
                  }, 8, ["as", "as-child", "data-state", "dir", "side", "side-offset", "align", "align-offset", "avoid-collisions", "collision-boundary", "collision-padding", "arrow-padding", "prioritize-position", "position-strategy", "update-position-strategy", "sticky", "hide-when-detached", "reference"])
                ]),
                _: 3
              }, 8, ["current-tab-stop-id", "dir", "loop"])
            ]),
            _: 3
          }, 8, ["disable-outside-pointer-events"])
        ]),
        _: 3
      }, 8, ["trapped"]);
    };
  }
});

export { _sfc_main as _, injectMenuContentContext as i };
//# sourceMappingURL=MenuContentImpl.js.map