reka-ui 2.1.0 → 2.2.0

package/dist/Dialog/DialogContentImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentImpl.js","sources":["../../src/Dialog/DialogContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DismissableLayerEmits,\n  DismissableLayerProps,\n} from '@/DismissableLayer'\nimport { getActiveElement, useForwardExpose, useId } from '@/shared'\n\nexport type DialogContentImplEmits = DismissableLayerEmits & {\n  /**\n   * Event handler called when auto-focusing on open.\n   * Can be prevented.\n   */\n  openAutoFocus: [event: Event]\n  /**\n   * Event handler called when auto-focusing on close.\n   * Can be prevented.\n   */\n  closeAutoFocus: [event: Event]\n}\n\nexport interface DialogContentImplProps extends DismissableLayerProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling transntion with Vue native transition or other animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * When `true`, focus cannot escape the `Content` via keyboard,\n   * pointer, or a programmatic focus.\n   * @defaultValue false\n   */\n  trapFocus?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectDialogRootContext } from './DialogRoot.vue'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { FocusScope } from '@/FocusScope'\nimport { getOpenState } from '@/Menu/utils'\nimport { useWarning } from './utils'\nimport { onMounted } from 'vue'\n\nconst props = defineProps<DialogContentImplProps>()\nconst emits = defineEmits<DialogContentImplEmits>()\n\nconst rootContext = injectDialogRootContext()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nrootContext.titleId ||= useId(undefined, 'reka-dialog-title')\nrootContext.descriptionId ||= useId(undefined, 'reka-dialog-description')\n\nonMounted(() => {\n  rootContext.contentElement = contentElement\n\n  // Preserve the `DialogTrigger` element in case it was triggered programmatically\n  if (getActiveElement() !== document.body)\n    rootContext.triggerElement.value = getActiveElement() as HTMLElement\n})\n\nif (process.env.NODE_ENV !== 'production') {\n  useWarning({\n    titleName: 'DialogTitle',\n    contentName: 'DialogContent',\n    componentLink: 'dialog.html#title',\n    titleId: rootContext.titleId,\n    descriptionId: rootContext.descriptionId,\n    contentElement,\n  })\n}\n</script>\n\n<template>\n  <FocusScope\n    as-child\n    loop\n    :trapped=\"props.trapFocus\"\n    @mount-auto-focus=\"emits('openAutoFocus', $event)\"\n    @unmount-auto-focus=\"emits('closeAutoFocus', $event)\"\n  >\n    <DismissableLayer\n      :id=\"rootContext.contentId\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      role=\"dialog\"\n      :aria-describedby=\"rootContext.descriptionId\"\n      :aria-labelledby=\"rootContext.titleId\"\n      :data-state=\"getOpenState(rootContext.open.value)\"\n      v-bind=\"$attrs\"\n      @dismiss=\"rootContext.onOpenChange(false)\"\n      @escape-key-down=\"emits('escapeKeyDown', $event)\"\n      @focus-outside=\"emits('focusOutside', $event)\"\n      @interact-outside=\"emits('interactOutside', $event)\"\n      @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n    >\n      <slot />\n    </DismissableLayer>\n  </FocusScope>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2CA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAY,WAAA,CAAA,OAAA,KAAY,KAAM,CAAA,SAAA,EAAW,mBAAmB,CAAA;AAC5D,IAAY,WAAA,CAAA,aAAA,KAAkB,KAAM,CAAA,SAAA,EAAW,yBAAyB,CAAA;AAExE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAG7B,MAAI,IAAA,gBAAA,OAAuB,QAAS,CAAA,IAAA;AAClC,QAAY,WAAA,CAAA,cAAA,CAAe,QAAQ,gBAAiB,EAAA;AAAA,KACvD,CAAA;AAED,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAW,UAAA,CAAA;AAAA,QACT,SAAW,EAAA,aAAA;AAAA,QACX,WAAa,EAAA,eAAA;AAAA,QACb,aAAe,EAAA,mBAAA;AAAA,QACf,SAAS,WAAY,CAAA,OAAA;AAAA,QACrB,eAAe,WAAY,CAAA,aAAA;AAAA,QAC3B;AAAA,OACD,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DialogContentImpl.js","sources":["../../src/Dialog/DialogContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DismissableLayerEmits,\n  DismissableLayerProps,\n} from '@/DismissableLayer'\nimport { getActiveElement, useForwardExpose, useId } from '@/shared'\n\nexport type DialogContentImplEmits = DismissableLayerEmits & {\n  /**\n   * Event handler called when auto-focusing on open.\n   * Can be prevented.\n   */\n  openAutoFocus: [event: Event]\n  /**\n   * Event handler called when auto-focusing on close.\n   * Can be prevented.\n   */\n  closeAutoFocus: [event: Event]\n}\n\nexport interface DialogContentImplProps extends DismissableLayerProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling transntion with Vue native transition or other animation libraries.\n   */\n  forceMount?: boolean\n  /**\n   * When `true`, focus cannot escape the `Content` via keyboard,\n   * pointer, or a programmatic focus.\n   * @defaultValue false\n   */\n  trapFocus?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectDialogRootContext } from './DialogRoot.vue'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { FocusScope } from '@/FocusScope'\nimport { getOpenState } from '@/Menu/utils'\nimport { useWarning } from './utils'\nimport { onMounted } from 'vue'\n\nconst props = defineProps<DialogContentImplProps>()\nconst emits = defineEmits<DialogContentImplEmits>()\n\nconst rootContext = injectDialogRootContext()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nrootContext.titleId ||= useId(undefined, 'reka-dialog-title')\nrootContext.descriptionId ||= useId(undefined, 'reka-dialog-description')\n\nonMounted(() => {\n  rootContext.contentElement = contentElement\n\n  // Preserve the `DialogTrigger` element in case it was triggered programmatically\n  if (getActiveElement() !== document.body)\n    rootContext.triggerElement.value = getActiveElement() as HTMLElement\n})\n\nif (process.env.NODE_ENV !== 'production') {\n  useWarning({\n    titleName: 'DialogTitle',\n    contentName: 'DialogContent',\n    componentLink: 'dialog.html#title',\n    titleId: rootContext.titleId,\n    descriptionId: rootContext.descriptionId,\n    contentElement,\n  })\n}\n</script>\n\n<template>\n  <FocusScope\n    as-child\n    loop\n    :trapped=\"props.trapFocus\"\n    @mount-auto-focus=\"emits('openAutoFocus', $event)\"\n    @unmount-auto-focus=\"emits('closeAutoFocus', $event)\"\n  >\n    <DismissableLayer\n      :id=\"rootContext.contentId\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      role=\"dialog\"\n      :aria-describedby=\"rootContext.descriptionId\"\n      :aria-labelledby=\"rootContext.titleId\"\n      :data-state=\"getOpenState(rootContext.open.value)\"\n      v-bind=\"$attrs\"\n      @dismiss=\"rootContext.onOpenChange(false)\"\n      @escape-key-down=\"emits('escapeKeyDown', $event)\"\n      @focus-outside=\"emits('focusOutside', $event)\"\n      @interact-outside=\"emits('interactOutside', $event)\"\n      @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n    >\n      <slot />\n    </DismissableLayer>\n  </FocusScope>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2CA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;AAExE,IAAY,WAAA,CAAA,OAAA,KAAY,KAAM,CAAA,MAAA,EAAW,mBAAmB,CAAA;AAC5D,IAAY,WAAA,CAAA,aAAA,KAAkB,KAAM,CAAA,MAAA,EAAW,yBAAyB,CAAA;AAExE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,cAAiB,GAAA,cAAA;AAG7B,MAAI,IAAA,gBAAA,OAAuB,QAAS,CAAA,IAAA;AAClC,QAAY,WAAA,CAAA,cAAA,CAAe,QAAQ,gBAAiB,EAAA;AAAA,KACvD,CAAA;AAED,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAW,UAAA,CAAA;AAAA,QACT,SAAW,EAAA,aAAA;AAAA,QACX,WAAa,EAAA,eAAA;AAAA,QACb,aAAe,EAAA,mBAAA;AAAA,QACf,SAAS,WAAY,CAAA,OAAA;AAAA,QACrB,eAAe,WAAY,CAAA,aAAA;AAAA,QAC3B;AAAA,OACD,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Dialog/DialogContentModal.js

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

package/dist/Dialog/DialogContentNonModal.js

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

package/dist/Dialog/DialogDescription.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 { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { i as injectDialogRootContext } from './DialogRoot.js';

package/dist/Dialog/DialogOverlay.js

@@ -1,4 +1,4 @@
-import { defineComponent, unref, openBlock, createBlock, withCtx, createVNode, mergeProps, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, createBlock, createCommentVNode, unref, openBlock, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './DialogOverlayImpl.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Presence } from '../Presence/Presence.js';

package/dist/Dialog/DialogOverlayImpl.js

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

package/dist/Dialog/DialogPortal.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 '../Teleport/Teleport.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/Dialog/DialogRoot.cjs

@@ -11,7 +11,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "DialogRoot",
   props: {
-    open: { type: Boolean, default: undefined },
+    open: { type: Boolean, default: void 0 },
     defaultOpen: { type: Boolean, default: false },
     modal: { type: Boolean, default: true }
   },
@@ -21,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const open = core.useVModel(props, "open", emit, {
       defaultValue: props.defaultOpen,
-      passive: props.open === undefined
+      passive: props.open === void 0
     });
     const triggerElement = vue.ref();
     const contentElement = vue.ref();

package/dist/Dialog/DialogRoot.js

@@ -9,7 +9,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "DialogRoot",
   props: {
-    open: { type: Boolean, default: undefined },
+    open: { type: Boolean, default: void 0 },
     defaultOpen: { type: Boolean, default: false },
     modal: { type: Boolean, default: true }
   },
@@ -19,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const open = useVModel(props, "open", emit, {
       defaultValue: props.defaultOpen,
-      passive: props.open === undefined
+      passive: props.open === void 0
     });
     const triggerElement = ref();
     const contentElement = ref();

package/dist/Dialog/DialogTitle.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 { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
 import { i as injectDialogRootContext } from './DialogRoot.js';

package/dist/Dialog/DialogTrigger.cjs

@@ -16,17 +16,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const rootContext = Dialog_DialogRoot.injectDialogRootContext();
     const { forwardRef, currentElement } = shared_useForwardExpose.useForwardExpose();
-    rootContext.contentId ||= shared_useId.useId(undefined, "reka-dialog-content");
+    rootContext.contentId ||= shared_useId.useId(void 0, "reka-dialog-content");
     vue.onMounted(() => {
       rootContext.triggerElement.value = currentElement.value;
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Primitive_Primitive.Primitive), vue.mergeProps(props, {
         ref: vue.unref(forwardRef),
-        type: _ctx.as === "button" ? "button" : undefined,
+        type: _ctx.as === "button" ? "button" : void 0,
         "aria-haspopup": "dialog",
         "aria-expanded": vue.unref(rootContext).open.value || false,
-        "aria-controls": vue.unref(rootContext).open.value ? vue.unref(rootContext).contentId : undefined,
+        "aria-controls": vue.unref(rootContext).open.value ? vue.unref(rootContext).contentId : void 0,
         "data-state": vue.unref(rootContext).open.value ? "open" : "closed",
         onClick: vue.unref(rootContext).onOpenToggle
       }), {

package/dist/Dialog/DialogTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTrigger.cjs","sources":["../../src/Dialog/DialogTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface DialogTriggerProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { injectDialogRootContext } from './DialogRoot.vue'\nimport { useForwardExpose, useId } from '@/shared'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<DialogTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectDialogRootContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nrootContext.contentId ||= useId(undefined, 'reka-dialog-content')\nonMounted(() => {\n  rootContext.triggerElement.value = currentElement.value\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    aria-haspopup=\"dialog\"\n    :aria-expanded=\"rootContext.open.value || false\"\n    :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n    :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n    @click=\"rootContext.onOpenToggle\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectDialogRootContext","useForwardExpose","useId","onMounted"],"mappings":";;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,SAAA,EAAW,qBAAqB,CAAA;AAChE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,QAAQ,cAAe,CAAA,KAAA;AAAA,KACnD,CAAA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DialogTrigger.cjs","sources":["../../src/Dialog/DialogTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface DialogTriggerProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { injectDialogRootContext } from './DialogRoot.vue'\nimport { useForwardExpose, useId } from '@/shared'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<DialogTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectDialogRootContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nrootContext.contentId ||= useId(undefined, 'reka-dialog-content')\nonMounted(() => {\n  rootContext.triggerElement.value = currentElement.value\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    aria-haspopup=\"dialog\"\n    :aria-expanded=\"rootContext.open.value || false\"\n    :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n    :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n    @click=\"rootContext.onOpenToggle\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectDialogRootContext","useForwardExpose","useId","onMounted"],"mappings":";;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAY,WAAA,CAAA,SAAA,KAAcC,kBAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,QAAQ,cAAe,CAAA,KAAA;AAAA,KACnD,CAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Dialog/DialogTrigger.js

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
+import { defineComponent, onMounted, createBlock, openBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { i as injectDialogRootContext } from './DialogRoot.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useId } from '../shared/useId.js';
@@ -14,17 +14,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const rootContext = injectDialogRootContext();
     const { forwardRef, currentElement } = useForwardExpose();
-    rootContext.contentId ||= useId(undefined, "reka-dialog-content");
+    rootContext.contentId ||= useId(void 0, "reka-dialog-content");
     onMounted(() => {
       rootContext.triggerElement.value = currentElement.value;
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Primitive), mergeProps(props, {
         ref: unref(forwardRef),
-        type: _ctx.as === "button" ? "button" : undefined,
+        type: _ctx.as === "button" ? "button" : void 0,
         "aria-haspopup": "dialog",
         "aria-expanded": unref(rootContext).open.value || false,
-        "aria-controls": unref(rootContext).open.value ? unref(rootContext).contentId : undefined,
+        "aria-controls": unref(rootContext).open.value ? unref(rootContext).contentId : void 0,
         "data-state": unref(rootContext).open.value ? "open" : "closed",
         onClick: unref(rootContext).onOpenToggle
       }), {

package/dist/Dialog/DialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTrigger.js","sources":["../../src/Dialog/DialogTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface DialogTriggerProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { injectDialogRootContext } from './DialogRoot.vue'\nimport { useForwardExpose, useId } from '@/shared'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<DialogTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectDialogRootContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nrootContext.contentId ||= useId(undefined, 'reka-dialog-content')\nonMounted(() => {\n  rootContext.triggerElement.value = currentElement.value\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    aria-haspopup=\"dialog\"\n    :aria-expanded=\"rootContext.open.value || false\"\n    :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n    :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n    @click=\"rootContext.onOpenToggle\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,SAAA,EAAW,qBAAqB,CAAA;AAChE,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,QAAQ,cAAe,CAAA,KAAA;AAAA,KACnD,CAAA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DialogTrigger.js","sources":["../../src/Dialog/DialogTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface DialogTriggerProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { injectDialogRootContext } from './DialogRoot.vue'\nimport { useForwardExpose, useId } from '@/shared'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<DialogTriggerProps>(), {\n  as: 'button',\n})\nconst rootContext = injectDialogRootContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nrootContext.contentId ||= useId(undefined, 'reka-dialog-content')\nonMounted(() => {\n  rootContext.triggerElement.value = currentElement.value\n})\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    :ref=\"forwardRef\"\n    :type=\"as === 'button' ? 'button' : undefined\"\n    aria-haspopup=\"dialog\"\n    :aria-expanded=\"rootContext.open.value || false\"\n    :aria-controls=\"rootContext.open.value ? rootContext.contentId : undefined\"\n    :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n    @click=\"rootContext.onOpenToggle\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAY,WAAA,CAAA,SAAA,KAAc,KAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AAChE,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,cAAA,CAAe,QAAQ,cAAe,CAAA,KAAA;AAAA,KACnD,CAAA;;;;;;;;;;;;;;;;;;;;;;"}

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":";;;;AAWO,MAAM,oBAAuB,GAAA,qCAAA;AAC7B,MAAM,aAAgB,GAAA,+BAAA;AAE7B,SAAS,YAAA,CAAa,cAA2B,aAA4B,EAAA;AAC3E,EAAA,MAAM,cAAc,aAAc,CAAA,OAAA;AAAA,IAChC;AAAA,GACF;AAEA,EAAA,MAAM,YAAY,YAAa,CAAA,OAAA,CAAQ,gBAAqB,KAAA,EAAA,GACxD,eACA,YAAa,CAAA,aAAA;AAAA,IACb;AAAA,GACF;AAEF,EAAA,MAAM,WAAW,KAAM,CAAA,IAAA;AAAA,IACrB,YAAA,CAAa,aAAc,CAAA,gBAAA,CAAiB,0BAA0B;AAAA,GACxE;AACA,EACG,IAAA,WAAA,IACI,SAAc,KAAA,WAAA,IACd,QAAS,CAAA,OAAA,CAAQ,SAAS,CAAI,GAAA,QAAA,CAAS,OAAQ,CAAA,WAAW,CAC/D,EAAA;AACA,IAAO,OAAA,IAAA;AAAA,GAEJ,MAAA;AACH,IAAO,OAAA,KAAA;AAAA;AAEX;AAOgB,SAAA,qBAAA,CACd,sBACA,OACA,EAAA;AACA,EAAA,MAAM,aACF,GAAA,OAAA,EAAS,KAAO,EAAA,aAAA,IAAiB,UAAY,EAAA,QAAA;AAEjD,EAAM,MAAA,sBAAA,GAAyB,IAAI,KAAK,CAAA;AACxC,EAAM,MAAA,cAAA,GAAiB,IAAI,MAAM;AAAA,GAAE,CAAA;AAEnC,EAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,IAAA,IAAI,CAAC,QAAA;AACH,MAAA;AACF,IAAM,MAAA,iBAAA,GAAoB,OAAO,KAAwB,KAAA;AACvD,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AAErB,MAAA,IAAI,CAAC,OAAS,EAAA,KAAA;AACZ,QAAA;AAEF,MAAA,IAAI,YAAa,CAAA,OAAA,CAAQ,KAAO,EAAA,MAAM,CAAG,EAAA;AACvC,QAAA,sBAAA,CAAuB,KAAQ,GAAA,KAAA;AAC/B,QAAA;AAAA;AAGF,MAAA,IAAI,KAAM,CAAA,MAAA,IAAU,CAAC,sBAAA,CAAuB,KAAO,EAAA;AAGjD,QAAA,IAAS,2CAAT,WAAoD;AAClD,UAAA,4BAAA;AAAA,YACE,oBAAA;AAAA,YACA,oBAAA;AAAA,YACA;AAAA,WACF;AAAA,SACF;AARA,QAAM,MAAA,WAAA,GAAc,EAAE,aAAA,EAAe,KAAM,EAAA;AAsB3C,QAAI,IAAA,KAAA,CAAM,gBAAgB,OAAS,EAAA;AACjC,UAAc,aAAA,CAAA,mBAAA,CAAoB,OAAS,EAAA,cAAA,CAAe,KAAK,CAAA;AAC/D,UAAA,cAAA,CAAe,KAAQ,GAAA,wCAAA;AACvB,UAAc,aAAA,CAAA,gBAAA,CAAiB,OAAS,EAAA,cAAA,CAAe,KAAO,EAAA;AAAA,YAC5D,IAAM,EAAA;AAAA,WACP,CAAA;AAAA,SAEE,MAAA;AACH,UAAyC,wCAAA,EAAA;AAAA;AAC3C,OAEG,MAAA;AAGH,QAAc,aAAA,CAAA,mBAAA,CAAoB,OAAS,EAAA,cAAA,CAAe,KAAK,CAAA;AAAA;AAEjE,MAAA,sBAAA,CAAuB,KAAQ,GAAA,KAAA;AAAA,KACjC;AAcA,IAAM,MAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AACtC,MAAc,aAAA,CAAA,gBAAA,CAAiB,eAAe,iBAAiB,CAAA;AAAA,OAC9D,CAAC,CAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAA,CAAO,aAAa,OAAO,CAAA;AAC3B,MAAc,aAAA,CAAA,mBAAA,CAAoB,eAAe,iBAAiB,CAAA;AAClE,MAAc,aAAA,CAAA,mBAAA,CAAoB,OAAS,EAAA,cAAA,CAAe,KAAK,CAAA;AAAA,KAChE,CAAA;AAAA,GACF,CAAA;AAED,EAAO,OAAA;AAAA,IACL,oBAAA,EAAsB,MAAO,sBAAA,CAAuB,KAAQ,GAAA;AAAA,GAC9D;AACF;AAMgB,SAAA,eAAA,CACd,gBACA,OACA,EAAA;AACA,EAAA,MAAM,aACF,GAAA,OAAA,EAAS,KAAO,EAAA,aAAA,IAAiB,UAAY,EAAA,QAAA;AAEjD,EAAM,MAAA,oBAAA,GAAuB,IAAI,KAAK,CAAA;AACtC,EAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,IAAA,IAAI,CAAC,QAAA;AACH,MAAA;AACF,IAAM,MAAA,WAAA,GAAc,OAAO,KAAsB,KAAA;AAC/C,MAAA,IAAI,CAAC,OAAS,EAAA,KAAA;AACZ,QAAA;AAEF,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,IAAI,CAAC,OAAQ,CAAA,KAAA,IAAS,aAAa,OAAQ,CAAA,KAAA,EAAO,MAAM,MAAqB,CAAA;AAC3E,QAAA;AAEF,MAAA,IAAI,KAAM,CAAA,MAAA,IAAU,CAAC,oBAAA,CAAqB,KAAO,EAAA;AAC/C,QAAM,MAAA,WAAA,GAAc,EAAE,aAAA,EAAe,KAAM,EAAA;AAC3C,QAAA,4BAAA;AAAA,UACE,aAAA;AAAA,UACA,cAAA;AAAA,UACA;AAAA,SACF;AAAA;AACF,KACF;AAEA,IAAc,aAAA,CAAA,gBAAA,CAAiB,WAAW,WAAW,CAAA;AAErD,IAAA,SAAA,CAAU,MAAM,aAAA,CAAc,mBAAoB,CAAA,SAAA,EAAW,WAAW,CAAC,CAAA;AAAA,GAC1E,CAAA;AAED,EAAO,OAAA;AAAA,IACL,cAAA,EAAgB,MAAO,oBAAA,CAAqB,KAAQ,GAAA,IAAA;AAAA,IACpD,aAAA,EAAe,MAAO,oBAAA,CAAqB,KAAQ,GAAA;AAAA,GACrD;AACF;;;;"}

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();