reka-ui 2.1.1 → 2.2.0

package/dist/DismissableLayer/DismissableLayer.cjs

@@ -103,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         as: _ctx.as,
         "data-dismissable-layer": "",
         style: vue.normalizeStyle({
-          pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value ? "auto" : "none" : undefined
+          pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value ? "auto" : "none" : void 0
         }),
         onFocusCapture: vue.unref(focusOutside).onFocusCapture,
         onBlurCapture: vue.unref(focusOutside).onBlurCapture,

package/dist/DismissableLayer/DismissableLayer.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, watchEffect, openBlock, createBlock, unref, normalizeStyle, withCtx, renderSlot, reactive, nextTick } from 'vue';
+import { defineComponent, computed, reactive, watchEffect, createBlock, openBlock, unref, normalizeStyle, withCtx, renderSlot, nextTick } from 'vue';
 import { onKeyStroke } from '@vueuse/core';
 import { u as usePointerDownOutside, a as useFocusOutside } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
@@ -101,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         as: _ctx.as,
         "data-dismissable-layer": "",
         style: normalizeStyle({
-          pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value ? "auto" : "none" : undefined
+          pointerEvents: isBodyPointerEventsDisabled.value ? isPointerEventsEnabled.value ? "auto" : "none" : void 0
         }),
         onFocusCapture: unref(focusOutside).onFocusCapture,
         onBlurCapture: unref(focusOutside).onBlurCapture,

package/dist/DismissableLayer/DismissableLayerBranch.js

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, onUnmounted, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, onMounted, onUnmounted, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { c as context } from './DismissableLayer.js';
 import { P as Primitive } from '../Primitive/Primitive.js';

package/dist/DismissableLayer/utils.cjs

@@ -84,6 +84,7 @@ function useFocusOutside(onFocusOutside, element) {
       if (!element?.value)
         return;
       await vue.nextTick();
+      await vue.nextTick();
       if (!element.value || isLayerExist(element.value, event.target))
         return;
       if (event.target && !isFocusInsideDOMTree.value) {

package/dist/DismissableLayer/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import { isClient } from '@vueuse/shared'\nimport { handleAndDispatchCustomEvent } from '@/shared'\nimport { type Ref, nextTick, ref, watchEffect } from 'vue'\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent\n}>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\nexport const DISMISSABLE_LAYER_NAME = 'DismissableLayer'\nexport const CONTEXT_UPDATE = 'dismissableLayer.update'\nexport const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'\nexport const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\n    '[data-dismissable-layer]',\n  ) as HTMLElement\n\n  const mainLayer = layerElement.dataset.dismissableLayer === ''\n    ? layerElement\n    : layerElement.querySelector(\n      '[data-dismissable-layer]',\n    ) as HTMLElement\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),\n  )\n  if (\n    (targetLayer\n      && mainLayer === targetLayer)\n      || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)\n  ) {\n    return true\n  }\n  else {\n    return false\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isPointerInsideDOMTree = ref(false)\n  const handleClickRef = ref(() => {})\n\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement\n\n      if (!element?.value)\n        return\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false\n        return\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.value)\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent\n          ownerDocument.addEventListener('click', handleClickRef.value, {\n            once: true,\n          })\n        }\n        else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.value)\n      }\n      isPointerInsideDOMTree.value = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId)\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown)\n      ownerDocument.removeEventListener('click', handleClickRef.value)\n    })\n  })\n\n  return {\n    onPointerDownCapture: () => (isPointerInsideDOMTree.value = true),\n  }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isFocusInsideDOMTree = ref(false)\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value)\n        return\n\n      await nextTick()\n      if (!element.value || isLayerExist(element.value, event.target as HTMLElement))\n        return\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        )\n      }\n    }\n\n    ownerDocument.addEventListener('focusin', handleFocus)\n\n    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))\n  })\n\n  return {\n    onFocusCapture: () => (isFocusInsideDOMTree.value = true),\n    onBlurCapture: () => (isFocusInsideDOMTree.value = false),\n  }\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n"],"names":["ref","watchEffect","isClient","handleAndDispatchCustomEvent","nextTick"],"mappings":"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"}
+{"version":3,"file":"utils.cjs","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import { isClient } from '@vueuse/shared'\nimport { handleAndDispatchCustomEvent } from '@/shared'\nimport { type Ref, nextTick, ref, watchEffect } from 'vue'\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent\n}>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\nexport const DISMISSABLE_LAYER_NAME = 'DismissableLayer'\nexport const CONTEXT_UPDATE = 'dismissableLayer.update'\nexport const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'\nexport const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\n    '[data-dismissable-layer]',\n  ) as HTMLElement\n\n  const mainLayer = layerElement.dataset.dismissableLayer === ''\n    ? layerElement\n    : layerElement.querySelector(\n      '[data-dismissable-layer]',\n    ) as HTMLElement\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),\n  )\n  if (\n    (targetLayer\n      && mainLayer === targetLayer)\n      || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)\n  ) {\n    return true\n  }\n  else {\n    return false\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isPointerInsideDOMTree = ref(false)\n  const handleClickRef = ref(() => {})\n\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement\n\n      if (!element?.value)\n        return\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false\n        return\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.value)\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent\n          ownerDocument.addEventListener('click', handleClickRef.value, {\n            once: true,\n          })\n        }\n        else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.value)\n      }\n      isPointerInsideDOMTree.value = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId)\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown)\n      ownerDocument.removeEventListener('click', handleClickRef.value)\n    })\n  })\n\n  return {\n    onPointerDownCapture: () => (isPointerInsideDOMTree.value = true),\n  }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isFocusInsideDOMTree = ref(false)\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value)\n        return\n\n      await nextTick()\n      await nextTick()\n      if (!element.value || isLayerExist(element.value, event.target as HTMLElement))\n        return\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        )\n      }\n    }\n\n    ownerDocument.addEventListener('focusin', handleFocus)\n\n    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))\n  })\n\n  return {\n    onFocusCapture: () => (isFocusInsideDOMTree.value = true),\n    onBlurCapture: () => (isFocusInsideDOMTree.value = false),\n  }\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n"],"names":["ref","watchEffect","isClient","handleAndDispatchCustomEvent","nextTick"],"mappings":"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"}

package/dist/DismissableLayer/utils.js

@@ -82,6 +82,7 @@ function useFocusOutside(onFocusOutside, element) {
       if (!element?.value)
         return;
       await nextTick();
+      await nextTick();
       if (!element.value || isLayerExist(element.value, event.target))
         return;
       if (event.target && !isFocusInsideDOMTree.value) {

package/dist/DismissableLayer/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import { isClient } from '@vueuse/shared'\nimport { handleAndDispatchCustomEvent } from '@/shared'\nimport { type Ref, nextTick, ref, watchEffect } from 'vue'\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent\n}>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\nexport const DISMISSABLE_LAYER_NAME = 'DismissableLayer'\nexport const CONTEXT_UPDATE = 'dismissableLayer.update'\nexport const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'\nexport const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\n    '[data-dismissable-layer]',\n  ) as HTMLElement\n\n  const mainLayer = layerElement.dataset.dismissableLayer === ''\n    ? layerElement\n    : layerElement.querySelector(\n      '[data-dismissable-layer]',\n    ) as HTMLElement\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),\n  )\n  if (\n    (targetLayer\n      && mainLayer === targetLayer)\n      || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)\n  ) {\n    return true\n  }\n  else {\n    return false\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isPointerInsideDOMTree = ref(false)\n  const handleClickRef = ref(() => {})\n\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement\n\n      if (!element?.value)\n        return\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false\n        return\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.value)\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent\n          ownerDocument.addEventListener('click', handleClickRef.value, {\n            once: true,\n          })\n        }\n        else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.value)\n      }\n      isPointerInsideDOMTree.value = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId)\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown)\n      ownerDocument.removeEventListener('click', handleClickRef.value)\n    })\n  })\n\n  return {\n    onPointerDownCapture: () => (isPointerInsideDOMTree.value = true),\n  }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isFocusInsideDOMTree = ref(false)\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value)\n        return\n\n      await nextTick()\n      if (!element.value || isLayerExist(element.value, event.target as HTMLElement))\n        return\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        )\n      }\n    }\n\n    ownerDocument.addEventListener('focusin', handleFocus)\n\n    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))\n  })\n\n  return {\n    onFocusCapture: () => (isFocusInsideDOMTree.value = true),\n    onBlurCapture: () => (isFocusInsideDOMTree.value = false),\n  }\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../src/DismissableLayer/utils.ts"],"sourcesContent":["import { isClient } from '@vueuse/shared'\nimport { handleAndDispatchCustomEvent } from '@/shared'\nimport { type Ref, nextTick, ref, watchEffect } from 'vue'\n\nexport type PointerDownOutsideEvent = CustomEvent<{\n  originalEvent: PointerEvent\n}>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\nexport const DISMISSABLE_LAYER_NAME = 'DismissableLayer'\nexport const CONTEXT_UPDATE = 'dismissableLayer.update'\nexport const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'\nexport const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'\n\nfunction isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {\n  const targetLayer = targetElement.closest(\n    '[data-dismissable-layer]',\n  ) as HTMLElement\n\n  const mainLayer = layerElement.dataset.dismissableLayer === ''\n    ? layerElement\n    : layerElement.querySelector(\n      '[data-dismissable-layer]',\n    ) as HTMLElement\n\n  const nodeList = Array.from(\n    layerElement.ownerDocument.querySelectorAll('[data-dismissable-layer]'),\n  )\n  if (\n    (targetLayer\n      && mainLayer === targetLayer)\n      || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)\n  ) {\n    return true\n  }\n  else {\n    return false\n  }\n}\n\n/**\n * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nexport function usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isPointerInsideDOMTree = ref(false)\n  const handleClickRef = ref(() => {})\n\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handlePointerDown = async (event: PointerEvent) => {\n      const target = event.target as HTMLElement\n\n      if (!element?.value)\n        return\n\n      if (isLayerExist(element.value, target)) {\n        isPointerInsideDOMTree.value = false\n        return\n      }\n\n      if (event.target && !isPointerInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            onPointerDownOutside,\n            eventDetail,\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executes events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.value)\n          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent\n          ownerDocument.addEventListener('click', handleClickRef.value, {\n            once: true,\n          })\n        }\n        else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.value)\n      }\n      isPointerInsideDOMTree.value = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n\n    cleanupFn(() => {\n      window.clearTimeout(timerId)\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown)\n      ownerDocument.removeEventListener('click', handleClickRef.value)\n    })\n  })\n\n  return {\n    onPointerDownCapture: () => (isPointerInsideDOMTree.value = true),\n  }\n}\n\n/**\n * Listens for when focus happens outside a DOM subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nexport function useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  element?: Ref<HTMLElement | undefined>,\n) {\n  const ownerDocument: Document\n    = element?.value?.ownerDocument ?? globalThis?.document\n\n  const isFocusInsideDOMTree = ref(false)\n  watchEffect((cleanupFn) => {\n    if (!isClient)\n      return\n    const handleFocus = async (event: FocusEvent) => {\n      if (!element?.value)\n        return\n\n      await nextTick()\n      await nextTick()\n      if (!element.value || isLayerExist(element.value, event.target as HTMLElement))\n        return\n\n      if (event.target && !isFocusInsideDOMTree.value) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(\n          FOCUS_OUTSIDE,\n          onFocusOutside,\n          eventDetail,\n        )\n      }\n    }\n\n    ownerDocument.addEventListener('focusin', handleFocus)\n\n    cleanupFn(() => ownerDocument.removeEventListener('focusin', handleFocus))\n  })\n\n  return {\n    onFocusCapture: () => (isFocusInsideDOMTree.value = true),\n    onBlurCapture: () => (isFocusInsideDOMTree.value = false),\n  }\n}\n\nexport function dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n"],"names":[],"mappings":"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"}

package/dist/DropdownMenu/DropdownMenuArrow.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuArrow.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 

package/dist/DropdownMenu/DropdownMenuCheckboxItem.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuCheckboxItem.js';
 import { u as useEmitAsProps } from '../shared/useEmitAsProps.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';

package/dist/DropdownMenu/DropdownMenuContent.cjs

@@ -49,7 +49,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       hasInteractedOutsideRef.value = false;
       event.preventDefault();
     }
-    rootContext.contentId ||= shared_useId.useId(undefined, "reka-dropdown-menu-content");
+    rootContext.contentId ||= shared_useId.useId(void 0, "reka-dropdown-menu-content");
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Menu_MenuContent._sfc_main), vue.mergeProps(vue.unref(forwarded), {
         id: vue.unref(rootContext).contentId,

package/dist/DropdownMenu/DropdownMenuContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContent.cjs","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentEmits,\n  MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n  if (event.defaultPrevented)\n    return\n  if (!hasInteractedOutsideRef.value) {\n    setTimeout(() => {\n      rootContext.triggerElement.value?.focus()\n    }, 0)\n  }\n  hasInteractedOutsideRef.value = false\n\n  // Always prevent auto focus because we either focus manually or want user agent focus\n  event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n  <MenuContent\n    v-bind=\"forwarded\"\n    :id=\"rootContext.contentId\"\n    :aria-labelledby=\"rootContext?.triggerId\"\n    :style=\"{\n      '--reka-dropdown-menu-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n      '--reka-dropdown-menu-content-available-width':\n        'var(--reka-popper-available-width)',\n      '--reka-dropdown-menu-content-available-height':\n        'var(--reka-popper-available-height)',\n      '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n      '--reka-dropdown-menu-trigger-height':\n        'var(--reka-popper-anchor-height)',\n    }\"\n    @close-auto-focus=\"handleCloseAutoFocus\"\n    @interact-outside=\"(event) => {\n      if (event.defaultPrevented) return\n\n      const originalEvent = event.detail.originalEvent as PointerEvent;\n      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n    }\"\n  >\n    <slot />\n  </MenuContent>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose","injectDropdownMenuRootContext","ref","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,cAAcC,2DAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0BC,QAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,SAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuContent.cjs","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentEmits,\n  MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n  if (event.defaultPrevented)\n    return\n  if (!hasInteractedOutsideRef.value) {\n    setTimeout(() => {\n      rootContext.triggerElement.value?.focus()\n    }, 0)\n  }\n  hasInteractedOutsideRef.value = false\n\n  // Always prevent auto focus because we either focus manually or want user agent focus\n  event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n  <MenuContent\n    v-bind=\"forwarded\"\n    :id=\"rootContext.contentId\"\n    :aria-labelledby=\"rootContext?.triggerId\"\n    :style=\"{\n      '--reka-dropdown-menu-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n      '--reka-dropdown-menu-content-available-width':\n        'var(--reka-popper-available-width)',\n      '--reka-dropdown-menu-content-available-height':\n        'var(--reka-popper-available-height)',\n      '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n      '--reka-dropdown-menu-trigger-height':\n        'var(--reka-popper-anchor-height)',\n    }\"\n    @close-auto-focus=\"handleCloseAutoFocus\"\n    @interact-outside=\"(event) => {\n      if (event.defaultPrevented) return\n\n      const originalEvent = event.detail.originalEvent as PointerEvent;\n      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n    }\"\n  >\n    <slot />\n  </MenuContent>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose","injectDropdownMenuRootContext","ref","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,cAAcC,2DAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0BC,QAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuContent.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuContent.js';
 import { u as useForwardPropsEmits } from '../shared/useForwardPropsEmits.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
@@ -47,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       hasInteractedOutsideRef.value = false;
       event.preventDefault();
     }
-    rootContext.contentId ||= useId(undefined, "reka-dropdown-menu-content");
+    rootContext.contentId ||= useId(void 0, "reka-dropdown-menu-content");
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(unref(forwarded), {
         id: unref(rootContext).contentId,

package/dist/DropdownMenu/DropdownMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContent.js","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentEmits,\n  MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n  if (event.defaultPrevented)\n    return\n  if (!hasInteractedOutsideRef.value) {\n    setTimeout(() => {\n      rootContext.triggerElement.value?.focus()\n    }, 0)\n  }\n  hasInteractedOutsideRef.value = false\n\n  // Always prevent auto focus because we either focus manually or want user agent focus\n  event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n  <MenuContent\n    v-bind=\"forwarded\"\n    :id=\"rootContext.contentId\"\n    :aria-labelledby=\"rootContext?.triggerId\"\n    :style=\"{\n      '--reka-dropdown-menu-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n      '--reka-dropdown-menu-content-available-width':\n        'var(--reka-popper-available-width)',\n      '--reka-dropdown-menu-content-available-height':\n        'var(--reka-popper-available-height)',\n      '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n      '--reka-dropdown-menu-trigger-height':\n        'var(--reka-popper-anchor-height)',\n    }\"\n    @close-auto-focus=\"handleCloseAutoFocus\"\n    @interact-outside=\"(event) => {\n      if (event.defaultPrevented) return\n\n      const originalEvent = event.detail.originalEvent as PointerEvent;\n      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n    }\"\n  >\n    <slot />\n  </MenuContent>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,cAAc,6BAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0B,IAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,SAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuContent.js","sources":["../../src/DropdownMenu/DropdownMenuContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  MenuContentEmits,\n  MenuContentProps,\n} from '@/Menu'\n\nexport type DropdownMenuContentEmits = MenuContentEmits\n\nexport interface DropdownMenuContentProps extends MenuContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\n\nconst props = defineProps<DropdownMenuContentProps>()\nconst emits = defineEmits<DropdownMenuContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst hasInteractedOutsideRef = ref(false)\n\nfunction handleCloseAutoFocus(event: Event) {\n  if (event.defaultPrevented)\n    return\n  if (!hasInteractedOutsideRef.value) {\n    setTimeout(() => {\n      rootContext.triggerElement.value?.focus()\n    }, 0)\n  }\n  hasInteractedOutsideRef.value = false\n\n  // Always prevent auto focus because we either focus manually or want user agent focus\n  event.preventDefault()\n}\n\nrootContext.contentId ||= useId(undefined, 'reka-dropdown-menu-content')\n</script>\n\n<template>\n  <MenuContent\n    v-bind=\"forwarded\"\n    :id=\"rootContext.contentId\"\n    :aria-labelledby=\"rootContext?.triggerId\"\n    :style=\"{\n      '--reka-dropdown-menu-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n      '--reka-dropdown-menu-content-available-width':\n        'var(--reka-popper-available-width)',\n      '--reka-dropdown-menu-content-available-height':\n        'var(--reka-popper-available-height)',\n      '--reka-dropdown-menu-trigger-width': 'var(--reka-popper-anchor-width)',\n      '--reka-dropdown-menu-trigger-height':\n        'var(--reka-popper-anchor-height)',\n    }\"\n    @close-auto-focus=\"handleCloseAutoFocus\"\n    @interact-outside=\"(event) => {\n      if (event.defaultPrevented) return\n\n      const originalEvent = event.detail.originalEvent as PointerEvent;\n      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;\n      if (rootContext.triggerElement.value?.contains(event.target as HTMLElement)) event.preventDefault()\n    }\"\n  >\n    <slot />\n  </MenuContent>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,cAAc,6BAA8B,EAAA;AAElD,IAAM,MAAA,uBAAA,GAA0B,IAAI,KAAK,CAAA;AAEzC,IAAA,SAAS,qBAAqB,KAAc,EAAA;AAC1C,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,CAAC,wBAAwB,KAAO,EAAA;AAClC,QAAA,UAAA,CAAW,MAAM;AACf,UAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,WACvC,CAAC,CAAA;AAAA;AAEN,MAAA,uBAAA,CAAwB,KAAQ,GAAA,KAAA;AAGhC,MAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGvB,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuGroup.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuGroup.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 

package/dist/DropdownMenu/DropdownMenuItem.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuItem.js';
 import { u as useEmitAsProps } from '../shared/useEmitAsProps.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';

package/dist/DropdownMenu/DropdownMenuItemIndicator.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuItemIndicator.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 

package/dist/DropdownMenu/DropdownMenuLabel.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuLabel.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 

package/dist/DropdownMenu/DropdownMenuPortal.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuPortal.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/DropdownMenu/DropdownMenuRadioGroup.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuRadioGroup.js';
 import { u as useEmitAsProps } from '../shared/useEmitAsProps.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';

package/dist/DropdownMenu/DropdownMenuRadioItem.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuRadioItem.js';
 import { u as useForwardPropsEmits } from '../shared/useForwardPropsEmits.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';

package/dist/DropdownMenu/DropdownMenuRoot.cjs

@@ -3,16 +3,16 @@
 const vue = require('vue');
 const core = require('@vueuse/core');
 const Menu_MenuRoot = require('../Menu/MenuRoot.cjs');
+const shared_createContext = require('../shared/createContext.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useDirection = require('../shared/useDirection.cjs');
-const shared_createContext = require('../shared/createContext.cjs');
 
 const [injectDropdownMenuRootContext, provideDropdownMenuRootContext] = shared_createContext.createContext("DropdownMenuRoot");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "DropdownMenuRoot",
   props: {
     defaultOpen: { type: Boolean },
-    open: { type: Boolean, default: undefined },
+    open: { type: Boolean, default: void 0 },
     dir: {},
     modal: { type: Boolean, default: true }
   },
@@ -23,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     shared_useForwardExpose.useForwardExpose();
     const open = core.useVModel(props, "open", emit, {
       defaultValue: props.defaultOpen,
-      passive: props.open === undefined
+      passive: props.open === void 0
     });
     const triggerElement = vue.ref();
     const { modal, dir: propDir } = vue.toRefs(props);

package/dist/DropdownMenu/DropdownMenuRoot.js

@@ -1,16 +1,16 @@
-import { defineComponent, ref, toRefs, openBlock, createBlock, unref, isRef, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, toRefs, createBlock, openBlock, unref, isRef, withCtx, renderSlot } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { _ as _sfc_main$1 } from '../Menu/MenuRoot.js';
+import { c as createContext } from '../shared/createContext.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useDirection } from '../shared/useDirection.js';
-import { c as createContext } from '../shared/createContext.js';
 
 const [injectDropdownMenuRootContext, provideDropdownMenuRootContext] = createContext("DropdownMenuRoot");
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DropdownMenuRoot",
   props: {
     defaultOpen: { type: Boolean },
-    open: { type: Boolean, default: undefined },
+    open: { type: Boolean, default: void 0 },
     dir: {},
     modal: { type: Boolean, default: true }
   },
@@ -21,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     useForwardExpose();
     const open = useVModel(props, "open", emit, {
       defaultValue: props.defaultOpen,
-      passive: props.open === undefined
+      passive: props.open === void 0
     });
     const triggerElement = ref();
     const { modal, dir: propDir } = toRefs(props);

package/dist/DropdownMenu/DropdownMenuSeparator.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuSeparator.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 

package/dist/DropdownMenu/DropdownMenuSub.cjs

@@ -9,14 +9,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "DropdownMenuSub",
   props: {
     defaultOpen: { type: Boolean },
-    open: { type: Boolean, default: undefined }
+    open: { type: Boolean, default: void 0 }
   },
   emits: ["update:open"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const open = core.useVModel(props, "open", emit, {
-      passive: props.open === undefined,
+      passive: props.open === void 0,
       defaultValue: props.defaultOpen ?? false
     });
     shared_useForwardExpose.useForwardExpose();

package/dist/DropdownMenu/DropdownMenuSub.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSub.cjs","sources":["../../src/DropdownMenu/DropdownMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuSubEmits, MenuSubProps } from '@/Menu'\nimport type { Ref } from 'vue'\n\nexport type DropdownMenuSubEmits = MenuSubEmits\nexport interface DropdownMenuSubProps extends MenuSubProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<DropdownMenuSubProps>(), {\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuSubEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst open = useVModel(props, 'open', emit, {\n  passive: (props.open === undefined) as false,\n  defaultValue: props.defaultOpen ?? false,\n}) as Ref<boolean>\n\nuseForwardExpose()\n</script>\n\n<template>\n  <MenuSub v-model:open=\"open\">\n    <slot :open=\"open\" />\n  </MenuSub>\n</template>\n"],"names":["useVModel","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,IAAO,GAAAA,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,OAAA,EAAU,MAAM,IAAS,KAAA,SAAA;AAAA,MACzB,YAAA,EAAc,MAAM,WAAe,IAAA;AAAA,KACpC,CAAA;AAED,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuSub.cjs","sources":["../../src/DropdownMenu/DropdownMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuSubEmits, MenuSubProps } from '@/Menu'\nimport type { Ref } from 'vue'\n\nexport type DropdownMenuSubEmits = MenuSubEmits\nexport interface DropdownMenuSubProps extends MenuSubProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<DropdownMenuSubProps>(), {\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuSubEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst open = useVModel(props, 'open', emit, {\n  passive: (props.open === undefined) as false,\n  defaultValue: props.defaultOpen ?? false,\n}) as Ref<boolean>\n\nuseForwardExpose()\n</script>\n\n<template>\n  <MenuSub v-model:open=\"open\">\n    <slot :open=\"open\" />\n  </MenuSub>\n</template>\n"],"names":["useVModel","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,IAAO,GAAAA,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,OAAA,EAAU,MAAM,IAAS,KAAA,MAAA;AAAA,MACzB,YAAA,EAAc,MAAM,WAAe,IAAA;AAAA,KACpC,CAAA;AAED,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuSub.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, isRef, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, isRef, withCtx, renderSlot } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { _ as _sfc_main$1 } from '../Menu/MenuSub.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
@@ -7,14 +7,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DropdownMenuSub",
   props: {
     defaultOpen: { type: Boolean },
-    open: { type: Boolean, default: undefined }
+    open: { type: Boolean, default: void 0 }
   },
   emits: ["update:open"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const open = useVModel(props, "open", emit, {
-      passive: props.open === undefined,
+      passive: props.open === void 0,
       defaultValue: props.defaultOpen ?? false
     });
     useForwardExpose();

package/dist/DropdownMenu/DropdownMenuSub.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSub.js","sources":["../../src/DropdownMenu/DropdownMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuSubEmits, MenuSubProps } from '@/Menu'\nimport type { Ref } from 'vue'\n\nexport type DropdownMenuSubEmits = MenuSubEmits\nexport interface DropdownMenuSubProps extends MenuSubProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<DropdownMenuSubProps>(), {\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuSubEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst open = useVModel(props, 'open', emit, {\n  passive: (props.open === undefined) as false,\n  defaultValue: props.defaultOpen ?? false,\n}) as Ref<boolean>\n\nuseForwardExpose()\n</script>\n\n<template>\n  <MenuSub v-model:open=\"open\">\n    <slot :open=\"open\" />\n  </MenuSub>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,OAAA,EAAU,MAAM,IAAS,KAAA,SAAA;AAAA,MACzB,YAAA,EAAc,MAAM,WAAe,IAAA;AAAA,KACpC,CAAA;AAED,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuSub.js","sources":["../../src/DropdownMenu/DropdownMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuSubEmits, MenuSubProps } from '@/Menu'\nimport type { Ref } from 'vue'\n\nexport type DropdownMenuSubEmits = MenuSubEmits\nexport interface DropdownMenuSubProps extends MenuSubProps {\n  /** The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<DropdownMenuSubProps>(), {\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuSubEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst open = useVModel(props, 'open', emit, {\n  passive: (props.open === undefined) as false,\n  defaultValue: props.defaultOpen ?? false,\n}) as Ref<boolean>\n\nuseForwardExpose()\n</script>\n\n<template>\n  <MenuSub v-model:open=\"open\">\n    <slot :open=\"open\" />\n  </MenuSub>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,OAAA,EAAU,MAAM,IAAS,KAAA,MAAA;AAAA,MACzB,YAAA,EAAc,MAAM,WAAe,IAAA;AAAA,KACpC,CAAA;AAED,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuSubContent.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuSubContent.js';
 import '@floating-ui/vue';
 import { u as useForwardPropsEmits } from '../shared/useForwardPropsEmits.js';

package/dist/DropdownMenu/DropdownMenuSubTrigger.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, normalizeProps, guardReactiveProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuSubTrigger.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 

package/dist/DropdownMenu/DropdownMenuTrigger.cjs

@@ -21,20 +21,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       rootContext.triggerElement = triggerElement;
     });
-    rootContext.triggerId ||= shared_useId.useId(undefined, "reka-dropdown-menu-trigger");
+    rootContext.triggerId ||= shared_useId.useId(void 0, "reka-dropdown-menu-trigger");
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Menu_MenuAnchor._sfc_main), { "as-child": "" }, {
         default: vue.withCtx(() => [
           vue.createVNode(vue.unref(Primitive_Primitive.Primitive), {
             id: vue.unref(rootContext).triggerId,
             ref: vue.unref(forwardRef),
-            type: _ctx.as === "button" ? "button" : undefined,
+            type: _ctx.as === "button" ? "button" : void 0,
             "as-child": props.asChild,
             as: _ctx.as,
             "aria-haspopup": "menu",
             "aria-expanded": vue.unref(rootContext).open.value,
-            "aria-controls": vue.unref(rootContext).open.value ? vue.unref(rootContext).contentId : undefined,
-            "data-disabled": _ctx.disabled ? "" : undefined,
+            "aria-controls": vue.unref(rootContext).open.value ? vue.unref(rootContext).contentId : void 0,
+            "data-disabled": _ctx.disabled ? "" : void 0,
             disabled: _ctx.disabled,
             "data-state": vue.unref(rootContext).open.value ? "open" : "closed",
             onClick: _cache[0] || (_cache[0] = async (event) => {

package/dist/DropdownMenu/DropdownMenuTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuTrigger.cjs","sources":["../../src/DropdownMenu/DropdownMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose, useId } from '@/shared'\n\nexport interface DropdownMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { MenuAnchor } from '@/Menu'\n\nconst props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nonMounted(() => {\n  rootContext.triggerElement = triggerElement\n})\n\nrootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')\n</script>\n\n<template>\n  <MenuAnchor as-child>\n    <Primitive\n      :id=\"rootContext.triggerId\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      aria-haspopup=\"menu\"\n      :aria-expanded=\"rootContext.open.value\"\n      :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :disabled=\"disabled\"\n      :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n      @click=\"\n        async (event) => {\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (!disabled && event.button === 0 && event.ctrlKey === false) {\n            rootContext?.onOpenToggle();\n            await nextTick()\n            // prevent trigger focusing when opening\n            // this allows the content to be given focus without competition\n            if (rootContext.open.value) event.preventDefault();\n          }\n        }\n      \"\n      @keydown.enter.space.arrow-down=\"\n        (event) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();\n          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);\n          // prevent keydown from scrolling window / first focused item to execute\n          // that keydown (inadvertently closing the menu)\n          if (['Enter', ' ', 'ArrowDown'].includes(event.key))\n            event.preventDefault();\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </MenuAnchor>\n</template>\n"],"names":["injectDropdownMenuRootContext","useForwardExpose","onMounted","useId"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,2DAA8B,EAAA;AAElD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;AAED,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,SAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuTrigger.cjs","sources":["../../src/DropdownMenu/DropdownMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose, useId } from '@/shared'\n\nexport interface DropdownMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { MenuAnchor } from '@/Menu'\n\nconst props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nonMounted(() => {\n  rootContext.triggerElement = triggerElement\n})\n\nrootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')\n</script>\n\n<template>\n  <MenuAnchor as-child>\n    <Primitive\n      :id=\"rootContext.triggerId\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      aria-haspopup=\"menu\"\n      :aria-expanded=\"rootContext.open.value\"\n      :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :disabled=\"disabled\"\n      :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n      @click=\"\n        async (event) => {\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (!disabled && event.button === 0 && event.ctrlKey === false) {\n            rootContext?.onOpenToggle();\n            await nextTick()\n            // prevent trigger focusing when opening\n            // this allows the content to be given focus without competition\n            if (rootContext.open.value) event.preventDefault();\n          }\n        }\n      \"\n      @keydown.enter.space.arrow-down=\"\n        (event) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();\n          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);\n          // prevent keydown from scrolling window / first focused item to execute\n          // that keydown (inadvertently closing the menu)\n          if (['Enter', ' ', 'ArrowDown'].includes(event.key))\n            event.preventDefault();\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </MenuAnchor>\n</template>\n"],"names":["injectDropdownMenuRootContext","useForwardExpose","onMounted","useId"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,2DAA8B,EAAA;AAElD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;AAExE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;AAED,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuTrigger.js

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, openBlock, createBlock, unref, withCtx, createVNode, nextTick, withKeys, renderSlot } from 'vue';
+import { defineComponent, onMounted, createBlock, openBlock, unref, withCtx, createVNode, withKeys, nextTick, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Menu/MenuAnchor.js';
 import { i as injectDropdownMenuRootContext } from './DropdownMenuRoot.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
@@ -19,20 +19,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       rootContext.triggerElement = triggerElement;
     });
-    rootContext.triggerId ||= useId(undefined, "reka-dropdown-menu-trigger");
+    rootContext.triggerId ||= useId(void 0, "reka-dropdown-menu-trigger");
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$1), { "as-child": "" }, {
         default: withCtx(() => [
           createVNode(unref(Primitive), {
             id: unref(rootContext).triggerId,
             ref: unref(forwardRef),
-            type: _ctx.as === "button" ? "button" : undefined,
+            type: _ctx.as === "button" ? "button" : void 0,
             "as-child": props.asChild,
             as: _ctx.as,
             "aria-haspopup": "menu",
             "aria-expanded": unref(rootContext).open.value,
-            "aria-controls": unref(rootContext).open.value ? unref(rootContext).contentId : undefined,
-            "data-disabled": _ctx.disabled ? "" : undefined,
+            "aria-controls": unref(rootContext).open.value ? unref(rootContext).contentId : void 0,
+            "data-disabled": _ctx.disabled ? "" : void 0,
             disabled: _ctx.disabled,
             "data-state": unref(rootContext).open.value ? "open" : "closed",
             onClick: _cache[0] || (_cache[0] = async (event) => {

package/dist/DropdownMenu/DropdownMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuTrigger.js","sources":["../../src/DropdownMenu/DropdownMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose, useId } from '@/shared'\n\nexport interface DropdownMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { MenuAnchor } from '@/Menu'\n\nconst props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nonMounted(() => {\n  rootContext.triggerElement = triggerElement\n})\n\nrootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')\n</script>\n\n<template>\n  <MenuAnchor as-child>\n    <Primitive\n      :id=\"rootContext.triggerId\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      aria-haspopup=\"menu\"\n      :aria-expanded=\"rootContext.open.value\"\n      :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :disabled=\"disabled\"\n      :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n      @click=\"\n        async (event) => {\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (!disabled && event.button === 0 && event.ctrlKey === false) {\n            rootContext?.onOpenToggle();\n            await nextTick()\n            // prevent trigger focusing when opening\n            // this allows the content to be given focus without competition\n            if (rootContext.open.value) event.preventDefault();\n          }\n        }\n      \"\n      @keydown.enter.space.arrow-down=\"\n        (event) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();\n          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);\n          // prevent keydown from scrolling window / first focused item to execute\n          // that keydown (inadvertently closing the menu)\n          if (['Enter', ' ', 'ArrowDown'].includes(event.key))\n            event.preventDefault();\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </MenuAnchor>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,6BAA8B,EAAA;AAElD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;AAED,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,SAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuTrigger.js","sources":["../../src/DropdownMenu/DropdownMenuTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose, useId } from '@/shared'\n\nexport interface DropdownMenuTriggerProps extends PrimitiveProps {\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { MenuAnchor } from '@/Menu'\n\nconst props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {\n  as: 'button',\n})\n\nconst rootContext = injectDropdownMenuRootContext()\n\nconst { forwardRef, currentElement: triggerElement } = useForwardExpose()\n\nonMounted(() => {\n  rootContext.triggerElement = triggerElement\n})\n\nrootContext.triggerId ||= useId(undefined, 'reka-dropdown-menu-trigger')\n</script>\n\n<template>\n  <MenuAnchor as-child>\n    <Primitive\n      :id=\"rootContext.triggerId\"\n      :ref=\"forwardRef\"\n      :type=\"as === 'button' ? 'button' : undefined\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      aria-haspopup=\"menu\"\n      :aria-expanded=\"rootContext.open.value\"\n      :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :disabled=\"disabled\"\n      :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n      @click=\"\n        async (event) => {\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (!disabled && event.button === 0 && event.ctrlKey === false) {\n            rootContext?.onOpenToggle();\n            await nextTick()\n            // prevent trigger focusing when opening\n            // this allows the content to be given focus without competition\n            if (rootContext.open.value) event.preventDefault();\n          }\n        }\n      \"\n      @keydown.enter.space.arrow-down=\"\n        (event) => {\n          if (disabled) return;\n          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();\n          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);\n          // prevent keydown from scrolling window / first focused item to execute\n          // that keydown (inadvertently closing the menu)\n          if (['Enter', ' ', 'ArrowDown'].includes(event.key))\n            event.preventDefault();\n        }\n      \"\n    >\n      <slot />\n    </Primitive>\n  </MenuAnchor>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,6BAA8B,EAAA;AAElD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAAA,KAC9B,CAAA;AAED,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,4BAA4B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Editable/EditableArea.cjs

@@ -15,13 +15,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const context = Editable_EditableRoot.injectEditableRootContext();
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Primitive_Primitive.Primitive), vue.mergeProps(props, {
-        "data-placeholder-shown": vue.unref(context).isEditing.value ? undefined : "",
-        "data-focus": vue.unref(context).isEditing.value ? "" : undefined,
-        "data-focused": vue.unref(context).isEditing.value ? "" : undefined,
-        "data-empty": vue.unref(context).isEmpty.value ? "" : undefined,
-        "data-readonly": vue.unref(context).readonly.value ? "" : undefined,
-        "data-disabled": vue.unref(context).disabled.value ? "" : undefined,
-        style: vue.unref(context).autoResize.value ? { display: "inline-grid" } : undefined
+        "data-placeholder-shown": vue.unref(context).isEditing.value ? void 0 : "",
+        "data-focus": vue.unref(context).isEditing.value ? "" : void 0,
+        "data-focused": vue.unref(context).isEditing.value ? "" : void 0,
+        "data-empty": vue.unref(context).isEmpty.value ? "" : void 0,
+        "data-readonly": vue.unref(context).readonly.value ? "" : void 0,
+        "data-disabled": vue.unref(context).disabled.value ? "" : void 0,
+        style: vue.unref(context).autoResize.value ? { display: "inline-grid" } : void 0
       }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")

package/dist/Editable/EditableArea.js

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { i as injectEditableRootContext } from './EditableRoot.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 
@@ -13,13 +13,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const context = injectEditableRootContext();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Primitive), mergeProps(props, {
-        "data-placeholder-shown": unref(context).isEditing.value ? undefined : "",
-        "data-focus": unref(context).isEditing.value ? "" : undefined,
-        "data-focused": unref(context).isEditing.value ? "" : undefined,
-        "data-empty": unref(context).isEmpty.value ? "" : undefined,
-        "data-readonly": unref(context).readonly.value ? "" : undefined,
-        "data-disabled": unref(context).disabled.value ? "" : undefined,
-        style: unref(context).autoResize.value ? { display: "inline-grid" } : undefined
+        "data-placeholder-shown": unref(context).isEditing.value ? void 0 : "",
+        "data-focus": unref(context).isEditing.value ? "" : void 0,
+        "data-focused": unref(context).isEditing.value ? "" : void 0,
+        "data-empty": unref(context).isEmpty.value ? "" : void 0,
+        "data-readonly": unref(context).readonly.value ? "" : void 0,
+        "data-disabled": unref(context).disabled.value ? "" : void 0,
+        style: unref(context).autoResize.value ? { display: "inline-grid" } : void 0
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")