reka-ui 2.2.0 → 2.2.1

package/dist/Dialog/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/Dialog/utils.ts"],"sourcesContent":["import { type Ref, onMounted } from 'vue'\n\nconst DEFAULT_TITLE_NAME = 'DialogTitle'\nconst DEFAULT_CONTENT_NAME = 'DialogContent'\n\nexport type WarningProps = {\n  titleName?: string\n  contentName?: string\n  componentLink?: string\n  titleId: string\n  descriptionId: string\n  contentElement: Ref<HTMLElement | undefined>\n}\n\nexport function useWarning({\n  titleName = DEFAULT_TITLE_NAME,\n  contentName = DEFAULT_CONTENT_NAME,\n  componentLink = 'dialog.html#title',\n  titleId,\n  descriptionId,\n  contentElement,\n}: WarningProps) {\n  const TITLE_MESSAGE = `Warning: \\`${contentName}\\` requires a \\`${titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://www.reka-ui.com/docs/components/${componentLink}`\n\n  const DESCRIPTION_MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby=\"undefined\"\\` for ${contentName}.`\n\n  onMounted(() => {\n    const hasTitle = document.getElementById(titleId)\n    if (!hasTitle)\n      console.warn(TITLE_MESSAGE)\n\n    const describedById = contentElement.value?.getAttribute('aria-describedby')\n    // if we have an id and the user hasn't set aria-describedby=\"undefined\"\n    if (descriptionId && describedById) {\n      const hasDescription = document.getElementById(descriptionId)\n      if (!hasDescription)\n        console.warn(DESCRIPTION_MESSAGE)\n    }\n  })\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAqB,GAAA,aAAA;AAC3B,MAAM,oBAAuB,GAAA,eAAA;AAWtB,SAAS,UAAW,CAAA;AAAA,EACzB,SAAY,GAAA,kBAAA;AAAA,EACZ,WAAc,GAAA,oBAAA;AAAA,EACd,aAAgB,GAAA,mBAAA;AAAA,EAChB,OAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAiB,EAAA;AACf,EAAA,MAAM,aAAgB,GAAA,CAAA,WAAA,EAAc,WAAW,CAAA,gBAAA,EAAmB,SAAS,CAAA;;AAAA,0BAAA,EAEjD,SAAS,CAAA;;AAAA,kEAAA,EAE+B,aAAa,CAAA,CAAA;AAE/E,EAAM,MAAA,mBAAA,GAAsB,4EAA4E,WAAW,CAAA,CAAA,CAAA;AAEnH,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,QAAS,CAAA,cAAA,CAAe,OAAO,CAAA;AAChD,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAA,CAAQ,KAAK,aAAa,CAAA;AAE5B,IAAA,MAAM,aAAgB,GAAA,cAAA,CAAe,KAAO,EAAA,YAAA,CAAa,kBAAkB,CAAA;AAE3E,IAAA,IAAI,iBAAiB,aAAe,EAAA;AAClC,MAAM,MAAA,cAAA,GAAiB,QAAS,CAAA,cAAA,CAAe,aAAa,CAAA;AAC5D,MAAA,IAAI,CAAC,cAAA;AACH,QAAA,OAAA,CAAQ,KAAK,mBAAmB,CAAA;AAAA;AACpC,GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/Dialog/utils.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { onMounted } from 'vue'\n\nconst DEFAULT_TITLE_NAME = 'DialogTitle'\nconst DEFAULT_CONTENT_NAME = 'DialogContent'\n\nexport type WarningProps = {\n  titleName?: string\n  contentName?: string\n  componentLink?: string\n  titleId: string\n  descriptionId: string\n  contentElement: Ref<HTMLElement | undefined>\n}\n\nexport function useWarning({\n  titleName = DEFAULT_TITLE_NAME,\n  contentName = DEFAULT_CONTENT_NAME,\n  componentLink = 'dialog.html#title',\n  titleId,\n  descriptionId,\n  contentElement,\n}: WarningProps) {\n  const TITLE_MESSAGE = `Warning: \\`${contentName}\\` requires a \\`${titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://www.reka-ui.com/docs/components/${componentLink}`\n\n  const DESCRIPTION_MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby=\"undefined\"\\` for ${contentName}.`\n\n  onMounted(() => {\n    const hasTitle = document.getElementById(titleId)\n    if (!hasTitle)\n      console.warn(TITLE_MESSAGE)\n\n    const describedById = contentElement.value?.getAttribute('aria-describedby')\n    // if we have an id and the user hasn't set aria-describedby=\"undefined\"\n    if (descriptionId && describedById) {\n      const hasDescription = document.getElementById(descriptionId)\n      if (!hasDescription)\n        console.warn(DESCRIPTION_MESSAGE)\n    }\n  })\n}\n"],"names":[],"mappings":";;AAGA,MAAM,kBAAqB,GAAA,aAAA;AAC3B,MAAM,oBAAuB,GAAA,eAAA;AAWtB,SAAS,UAAW,CAAA;AAAA,EACzB,SAAY,GAAA,kBAAA;AAAA,EACZ,WAAc,GAAA,oBAAA;AAAA,EACd,aAAgB,GAAA,mBAAA;AAAA,EAChB,OAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAiB,EAAA;AACf,EAAA,MAAM,aAAgB,GAAA,CAAA,WAAA,EAAc,WAAW,CAAA,gBAAA,EAAmB,SAAS,CAAA;;AAAA,0BAAA,EAEjD,SAAS,CAAA;;AAAA,kEAAA,EAE+B,aAAa,CAAA,CAAA;AAE/E,EAAM,MAAA,mBAAA,GAAsB,4EAA4E,WAAW,CAAA,CAAA,CAAA;AAEnH,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,QAAS,CAAA,cAAA,CAAe,OAAO,CAAA;AAChD,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAA,CAAQ,KAAK,aAAa,CAAA;AAE5B,IAAA,MAAM,aAAgB,GAAA,cAAA,CAAe,KAAO,EAAA,YAAA,CAAa,kBAAkB,CAAA;AAE3E,IAAA,IAAI,iBAAiB,aAAe,EAAA;AAClC,MAAM,MAAA,cAAA,GAAiB,QAAS,CAAA,cAAA,CAAe,aAAa,CAAA;AAC5D,MAAA,IAAI,CAAC,cAAA;AACH,QAAA,OAAA,CAAQ,KAAK,mBAAmB,CAAA;AAAA;AACpC,GACD,CAAA;AACH;;;;"}

package/dist/DismissableLayer/DismissableLayer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DismissableLayer.cjs","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  computed,\n  nextTick,\n  reactive,\n  watchEffect,\n} from 'vue'\n\nimport type { PrimitiveProps } from '@/Primitive'\nimport type {\n  FocusOutsideEvent,\n  PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  focusOutside: [ event: FocusOutsideEvent]\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  interactOutside: [ event: PointerDownOutsideEvent | FocusOutsideEvent]\n}\n\nexport type DismissableLayerPrivateEmits = DismissableLayerEmits & {\n  /**\n   * Handler called when the `DismissableLayer` should be dismissed\n   */\n  dismiss: []\n}\n\nexport const context = reactive({\n  layersRoot: new Set<HTMLElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),\n  branches: new Set<HTMLElement>(),\n})\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke } from '@vueuse/core'\nimport {\n  useFocusOutside,\n  usePointerDownOutside,\n} from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\n\nconst props = withDefaults(defineProps<DismissableLayerProps>(), {\n  disableOutsidePointerEvents: false,\n})\n\nconst emits = defineEmits<DismissableLayerPrivateEmits>()\n\nconst { forwardRef, currentElement: layerElement } = useForwardExpose()\nconst ownerDocument = computed(\n  () => layerElement.value?.ownerDocument ?? globalThis.document,\n)\n\nconst layers = computed(() => context.layersRoot)\n\nconst index = computed(() => {\n  return layerElement.value\n    ? Array.from(layers.value).indexOf(layerElement.value)\n    : -1\n})\n\nconst isBodyPointerEventsDisabled = computed(() => {\n  return context.layersWithOutsidePointerEventsDisabled.size > 0\n})\n\nconst isPointerEventsEnabled = computed(() => {\n  const localLayers = Array.from(layers.value)\n  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1)\n  const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled)\n\n  return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex\n})\n\nconst pointerDownOutside = usePointerDownOutside(async (event) => {\n  const isPointerDownOnBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (!isPointerEventsEnabled.value || isPointerDownOnBranch)\n    return\n  emits('pointerDownOutside', event)\n  emits('interactOutside', event)\n  await nextTick()\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nconst focusOutside = useFocusOutside((event) => {\n  const isFocusInBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (isFocusInBranch)\n    return\n  emits('focusOutside', event)\n  emits('interactOutside', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nonKeyStroke('Escape', (event) => {\n  const isHighestLayer = index.value === layers.value.size - 1\n  if (!isHighestLayer)\n    return\n  emits('escapeKeyDown', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n})\n\nlet originalBodyPointerEvents: string\nwatchEffect((cleanupFn) => {\n  if (!layerElement.value)\n    return\n  if (props.disableOutsidePointerEvents) {\n    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n      originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents\n      ownerDocument.value.body.style.pointerEvents = 'none'\n    }\n    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)\n  }\n  layers.value.add(layerElement.value)\n\n  cleanupFn(() => {\n    if (\n      props.disableOutsidePointerEvents\n      && context.layersWithOutsidePointerEventsDisabled.size === 1\n    ) {\n      ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents\n    }\n  })\n})\n\nwatchEffect((cleanupFn) => {\n  cleanupFn(() => {\n    if (!layerElement.value)\n      return\n    layers.value.delete(layerElement.value)\n    context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value)\n  })\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    data-dismissable-layer\n    :style=\"{\n      pointerEvents: isBodyPointerEventsDisabled\n        ? isPointerEventsEnabled\n          ? 'auto'\n          : 'none'\n        : undefined,\n    }\"\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["reactive","useForwardExpose","computed","usePointerDownOutside","nextTick","useFocusOutside","onKeyStroke","watchEffect"],"mappings":"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"}
+{"version":3,"file":"DismissableLayer.cjs","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nimport type {\n  FocusOutsideEvent,\n  PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\nimport {\n  computed,\n  nextTick,\n  reactive,\n  watchEffect,\n} from 'vue'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  focusOutside: [ event: FocusOutsideEvent]\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  interactOutside: [ event: PointerDownOutsideEvent | FocusOutsideEvent]\n}\n\nexport type DismissableLayerPrivateEmits = DismissableLayerEmits & {\n  /**\n   * Handler called when the `DismissableLayer` should be dismissed\n   */\n  dismiss: []\n}\n\nexport const context = reactive({\n  layersRoot: new Set<HTMLElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),\n  branches: new Set<HTMLElement>(),\n})\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { onKeyStroke } from '@vueuse/core'\nimport {\n  useFocusOutside,\n  usePointerDownOutside,\n} from './utils'\n\nconst props = withDefaults(defineProps<DismissableLayerProps>(), {\n  disableOutsidePointerEvents: false,\n})\n\nconst emits = defineEmits<DismissableLayerPrivateEmits>()\n\nconst { forwardRef, currentElement: layerElement } = useForwardExpose()\nconst ownerDocument = computed(\n  () => layerElement.value?.ownerDocument ?? globalThis.document,\n)\n\nconst layers = computed(() => context.layersRoot)\n\nconst index = computed(() => {\n  return layerElement.value\n    ? Array.from(layers.value).indexOf(layerElement.value)\n    : -1\n})\n\nconst isBodyPointerEventsDisabled = computed(() => {\n  return context.layersWithOutsidePointerEventsDisabled.size > 0\n})\n\nconst isPointerEventsEnabled = computed(() => {\n  const localLayers = Array.from(layers.value)\n  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1)\n  const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled)\n\n  return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex\n})\n\nconst pointerDownOutside = usePointerDownOutside(async (event) => {\n  const isPointerDownOnBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (!isPointerEventsEnabled.value || isPointerDownOnBranch)\n    return\n  emits('pointerDownOutside', event)\n  emits('interactOutside', event)\n  await nextTick()\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nconst focusOutside = useFocusOutside((event) => {\n  const isFocusInBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (isFocusInBranch)\n    return\n  emits('focusOutside', event)\n  emits('interactOutside', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nonKeyStroke('Escape', (event) => {\n  const isHighestLayer = index.value === layers.value.size - 1\n  if (!isHighestLayer)\n    return\n  emits('escapeKeyDown', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n})\n\nlet originalBodyPointerEvents: string\nwatchEffect((cleanupFn) => {\n  if (!layerElement.value)\n    return\n  if (props.disableOutsidePointerEvents) {\n    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n      originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents\n      ownerDocument.value.body.style.pointerEvents = 'none'\n    }\n    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)\n  }\n  layers.value.add(layerElement.value)\n\n  cleanupFn(() => {\n    if (\n      props.disableOutsidePointerEvents\n      && context.layersWithOutsidePointerEventsDisabled.size === 1\n    ) {\n      ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents\n    }\n  })\n})\n\nwatchEffect((cleanupFn) => {\n  cleanupFn(() => {\n    if (!layerElement.value)\n      return\n    layers.value.delete(layerElement.value)\n    context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value)\n  })\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    data-dismissable-layer\n    :style=\"{\n      pointerEvents: isBodyPointerEventsDisabled\n        ? isPointerEventsEnabled\n          ? 'auto'\n          : 'none'\n        : undefined,\n    }\"\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["reactive","useForwardExpose","computed","usePointerDownOutside","nextTick","useFocusOutside","onKeyStroke","watchEffect"],"mappings":";;;;;;;;AAuDO,MAAM,UAAUA,YAAS,CAAA;AAAA,EAC9B,UAAA,sBAAgB,GAAiB,EAAA;AAAA,EACjC,sCAAA,sBAA4C,GAAiB,EAAA;AAAA,EAC7D,QAAA,sBAAc,GAAiB;AACjC,CAAC;;;;;;;;;;AAaD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AACtE,IAAA,MAAM,aAAgB,GAAAC,YAAA;AAAA,MACpB,MAAM,YAAA,CAAa,KAAO,EAAA,aAAA,IAAiB,UAAW,CAAA;AAAA,KACxD;AAEA,IAAA,MAAM,MAAS,GAAAA,YAAA,CAAS,MAAM,OAAA,CAAQ,UAAU,CAAA;AAEhD,IAAM,MAAA,KAAA,GAAQA,aAAS,MAAM;AAC3B,MAAO,OAAA,YAAA,CAAa,KAChB,GAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,KAAK,CAAE,CAAA,OAAA,CAAQ,YAAa,CAAA,KAAK,CACnD,GAAA,EAAA;AAAA,KACL,CAAA;AAED,IAAM,MAAA,2BAAA,GAA8BA,aAAS,MAAM;AACjD,MAAO,OAAA,OAAA,CAAQ,uCAAuC,IAAO,GAAA,CAAA;AAAA,KAC9D,CAAA;AAED,IAAM,MAAA,sBAAA,GAAyBA,aAAS,MAAM;AAC5C,MAAA,MAAM,WAAc,GAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,KAAK,CAAA;AAC3C,MAAM,MAAA,CAAC,4CAA4C,CAAI,GAAA,CAAC,GAAG,OAAQ,CAAA,sCAAsC,CAAE,CAAA,KAAA,CAAM,EAAE,CAAA;AACnH,MAAM,MAAA,iDAAA,GAAoD,WAAY,CAAA,OAAA,CAAQ,4CAA4C,CAAA;AAE1H,MAAA,OAAO,MAAM,KAAS,IAAA,iDAAA;AAAA,KACvB,CAAA;AAED,IAAM,MAAA,kBAAA,GAAqBC,4CAAsB,CAAA,OAAO,KAAU,KAAA;AAChE,MAAA,MAAM,qBAAwB,GAAA,CAAC,GAAG,OAAA,CAAQ,QAAQ,CAAE,CAAA,IAAA;AAAA,QAAK,CACvD,MAAA,KAAA,MAAA,EAAQ,QAAS,CAAA,KAAA,CAAM,MAAqB;AAAA,OAC9C;AAEA,MAAI,IAAA,CAAC,uBAAuB,KAAS,IAAA,qBAAA;AACnC,QAAA;AACF,MAAA,KAAA,CAAM,sBAAsB,KAAK,CAAA;AACjC,MAAA,KAAA,CAAM,mBAAmB,KAAK,CAAA;AAC9B,MAAA,MAAMC,YAAS,EAAA;AACf,MAAA,IAAI,CAAC,KAAM,CAAA,gBAAA;AACT,QAAA,KAAA,CAAM,SAAS,CAAA;AAAA,OAChB,YAAY,CAAA;AAEf,IAAM,MAAA,YAAA,GAAeC,sCAAgB,CAAA,CAAC,KAAU,KAAA;AAC9C,MAAA,MAAM,eAAkB,GAAA,CAAC,GAAG,OAAA,CAAQ,QAAQ,CAAE,CAAA,IAAA;AAAA,QAAK,CACjD,MAAA,KAAA,MAAA,EAAQ,QAAS,CAAA,KAAA,CAAM,MAAqB;AAAA,OAC9C;AAEA,MAAI,IAAA,eAAA;AACF,QAAA;AACF,MAAA,KAAA,CAAM,gBAAgB,KAAK,CAAA;AAC3B,MAAA,KAAA,CAAM,mBAAmB,KAAK,CAAA;AAC9B,MAAA,IAAI,CAAC,KAAM,CAAA,gBAAA;AACT,QAAA,KAAA,CAAM,SAAS,CAAA;AAAA,OAChB,YAAY,CAAA;AAEf,IAAYC,gBAAA,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AAC/B,MAAA,MAAM,cAAiB,GAAA,KAAA,CAAM,KAAU,KAAA,MAAA,CAAO,MAAM,IAAO,GAAA,CAAA;AAC3D,MAAA,IAAI,CAAC,cAAA;AACH,QAAA;AACF,MAAA,KAAA,CAAM,iBAAiB,KAAK,CAAA;AAC5B,MAAA,IAAI,CAAC,KAAM,CAAA,gBAAA;AACT,QAAA,KAAA,CAAM,SAAS,CAAA;AAAA,KAClB,CAAA;AAED,IAAI,IAAA,yBAAA;AACJ,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,CAAC,YAAa,CAAA,KAAA;AAChB,QAAA;AACF,MAAA,IAAI,MAAM,2BAA6B,EAAA;AACrC,QAAI,IAAA,OAAA,CAAQ,sCAAuC,CAAA,IAAA,KAAS,CAAG,EAAA;AAC7D,UAA4B,yBAAA,GAAA,aAAA,CAAc,KAAM,CAAA,IAAA,CAAK,KAAM,CAAA,aAAA;AAC3D,UAAc,aAAA,CAAA,KAAA,CAAM,IAAK,CAAA,KAAA,CAAM,aAAgB,GAAA,MAAA;AAAA;AAEjD,QAAQ,OAAA,CAAA,sCAAA,CAAuC,GAAI,CAAA,YAAA,CAAa,KAAK,CAAA;AAAA;AAEvE,MAAO,MAAA,CAAA,KAAA,CAAM,GAAI,CAAA,YAAA,CAAa,KAAK,CAAA;AAEnC,MAAA,SAAA,CAAU,MAAM;AACd,QAAA,IACE,KAAM,CAAA,2BAAA,IACH,OAAQ,CAAA,sCAAA,CAAuC,SAAS,CAC3D,EAAA;AACA,UAAc,aAAA,CAAA,KAAA,CAAM,IAAK,CAAA,KAAA,CAAM,aAAgB,GAAA,yBAAA;AAAA;AACjD,OACD,CAAA;AAAA,KACF,CAAA;AAED,IAAAA,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,SAAA,CAAU,MAAM;AACd,QAAA,IAAI,CAAC,YAAa,CAAA,KAAA;AAChB,UAAA;AACF,QAAO,MAAA,CAAA,KAAA,CAAM,MAAO,CAAA,YAAA,CAAa,KAAK,CAAA;AACtC,QAAQ,OAAA,CAAA,sCAAA,CAAuC,MAAO,CAAA,YAAA,CAAa,KAAK,CAAA;AAAA,OACzE,CAAA;AAAA,KACF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DismissableLayer/DismissableLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DismissableLayer.js","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n  computed,\n  nextTick,\n  reactive,\n  watchEffect,\n} from 'vue'\n\nimport type { PrimitiveProps } from '@/Primitive'\nimport type {\n  FocusOutsideEvent,\n  PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  focusOutside: [ event: FocusOutsideEvent]\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  interactOutside: [ event: PointerDownOutsideEvent | FocusOutsideEvent]\n}\n\nexport type DismissableLayerPrivateEmits = DismissableLayerEmits & {\n  /**\n   * Handler called when the `DismissableLayer` should be dismissed\n   */\n  dismiss: []\n}\n\nexport const context = reactive({\n  layersRoot: new Set<HTMLElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),\n  branches: new Set<HTMLElement>(),\n})\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke } from '@vueuse/core'\nimport {\n  useFocusOutside,\n  usePointerDownOutside,\n} from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\n\nconst props = withDefaults(defineProps<DismissableLayerProps>(), {\n  disableOutsidePointerEvents: false,\n})\n\nconst emits = defineEmits<DismissableLayerPrivateEmits>()\n\nconst { forwardRef, currentElement: layerElement } = useForwardExpose()\nconst ownerDocument = computed(\n  () => layerElement.value?.ownerDocument ?? globalThis.document,\n)\n\nconst layers = computed(() => context.layersRoot)\n\nconst index = computed(() => {\n  return layerElement.value\n    ? Array.from(layers.value).indexOf(layerElement.value)\n    : -1\n})\n\nconst isBodyPointerEventsDisabled = computed(() => {\n  return context.layersWithOutsidePointerEventsDisabled.size > 0\n})\n\nconst isPointerEventsEnabled = computed(() => {\n  const localLayers = Array.from(layers.value)\n  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1)\n  const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled)\n\n  return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex\n})\n\nconst pointerDownOutside = usePointerDownOutside(async (event) => {\n  const isPointerDownOnBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (!isPointerEventsEnabled.value || isPointerDownOnBranch)\n    return\n  emits('pointerDownOutside', event)\n  emits('interactOutside', event)\n  await nextTick()\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nconst focusOutside = useFocusOutside((event) => {\n  const isFocusInBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (isFocusInBranch)\n    return\n  emits('focusOutside', event)\n  emits('interactOutside', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nonKeyStroke('Escape', (event) => {\n  const isHighestLayer = index.value === layers.value.size - 1\n  if (!isHighestLayer)\n    return\n  emits('escapeKeyDown', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n})\n\nlet originalBodyPointerEvents: string\nwatchEffect((cleanupFn) => {\n  if (!layerElement.value)\n    return\n  if (props.disableOutsidePointerEvents) {\n    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n      originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents\n      ownerDocument.value.body.style.pointerEvents = 'none'\n    }\n    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)\n  }\n  layers.value.add(layerElement.value)\n\n  cleanupFn(() => {\n    if (\n      props.disableOutsidePointerEvents\n      && context.layersWithOutsidePointerEventsDisabled.size === 1\n    ) {\n      ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents\n    }\n  })\n})\n\nwatchEffect((cleanupFn) => {\n  cleanupFn(() => {\n    if (!layerElement.value)\n      return\n    layers.value.delete(layerElement.value)\n    context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value)\n  })\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    data-dismissable-layer\n    :style=\"{\n      pointerEvents: isBodyPointerEventsDisabled\n        ? isPointerEventsEnabled\n          ? 'auto'\n          : 'none'\n        : undefined,\n    }\"\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DismissableLayer.js","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nimport type {\n  FocusOutsideEvent,\n  PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\nimport {\n  computed,\n  nextTick,\n  reactive,\n  watchEffect,\n} from 'vue'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  focusOutside: [ event: FocusOutsideEvent]\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  interactOutside: [ event: PointerDownOutsideEvent | FocusOutsideEvent]\n}\n\nexport type DismissableLayerPrivateEmits = DismissableLayerEmits & {\n  /**\n   * Handler called when the `DismissableLayer` should be dismissed\n   */\n  dismiss: []\n}\n\nexport const context = reactive({\n  layersRoot: new Set<HTMLElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),\n  branches: new Set<HTMLElement>(),\n})\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { onKeyStroke } from '@vueuse/core'\nimport {\n  useFocusOutside,\n  usePointerDownOutside,\n} from './utils'\n\nconst props = withDefaults(defineProps<DismissableLayerProps>(), {\n  disableOutsidePointerEvents: false,\n})\n\nconst emits = defineEmits<DismissableLayerPrivateEmits>()\n\nconst { forwardRef, currentElement: layerElement } = useForwardExpose()\nconst ownerDocument = computed(\n  () => layerElement.value?.ownerDocument ?? globalThis.document,\n)\n\nconst layers = computed(() => context.layersRoot)\n\nconst index = computed(() => {\n  return layerElement.value\n    ? Array.from(layers.value).indexOf(layerElement.value)\n    : -1\n})\n\nconst isBodyPointerEventsDisabled = computed(() => {\n  return context.layersWithOutsidePointerEventsDisabled.size > 0\n})\n\nconst isPointerEventsEnabled = computed(() => {\n  const localLayers = Array.from(layers.value)\n  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1)\n  const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled)\n\n  return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex\n})\n\nconst pointerDownOutside = usePointerDownOutside(async (event) => {\n  const isPointerDownOnBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (!isPointerEventsEnabled.value || isPointerDownOnBranch)\n    return\n  emits('pointerDownOutside', event)\n  emits('interactOutside', event)\n  await nextTick()\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nconst focusOutside = useFocusOutside((event) => {\n  const isFocusInBranch = [...context.branches].some(branch =>\n    branch?.contains(event.target as HTMLElement),\n  )\n\n  if (isFocusInBranch)\n    return\n  emits('focusOutside', event)\n  emits('interactOutside', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n}, layerElement)\n\nonKeyStroke('Escape', (event) => {\n  const isHighestLayer = index.value === layers.value.size - 1\n  if (!isHighestLayer)\n    return\n  emits('escapeKeyDown', event)\n  if (!event.defaultPrevented)\n    emits('dismiss')\n})\n\nlet originalBodyPointerEvents: string\nwatchEffect((cleanupFn) => {\n  if (!layerElement.value)\n    return\n  if (props.disableOutsidePointerEvents) {\n    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n      originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents\n      ownerDocument.value.body.style.pointerEvents = 'none'\n    }\n    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)\n  }\n  layers.value.add(layerElement.value)\n\n  cleanupFn(() => {\n    if (\n      props.disableOutsidePointerEvents\n      && context.layersWithOutsidePointerEventsDisabled.size === 1\n    ) {\n      ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents\n    }\n  })\n})\n\nwatchEffect((cleanupFn) => {\n  cleanupFn(() => {\n    if (!layerElement.value)\n      return\n    layers.value.delete(layerElement.value)\n    context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value)\n  })\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :as-child=\"asChild\"\n    :as=\"as\"\n    data-dismissable-layer\n    :style=\"{\n      pointerEvents: isBodyPointerEventsDisabled\n        ? isPointerEventsEnabled\n          ? 'auto'\n          : 'none'\n        : undefined,\n    }\"\n    @focus.capture=\"focusOutside.onFocusCapture\"\n    @blur.capture=\"focusOutside.onBlurCapture\"\n    @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/DismissableLayer/utils.cjs

@@ -16,7 +16,7 @@ function isLayerExist(layerElement, targetElement) {
   const nodeList = Array.from(
     layerElement.ownerDocument.querySelectorAll("[data-dismissable-layer]")
   );
-  if (targetLayer && mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)) {
+  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))) {
     return true;
   } else {
     return false;
@@ -32,7 +32,7 @@ function usePointerDownOutside(onPointerDownOutside, element) {
       return;
     const handlePointerDown = async (event) => {
       const target = event.target;
-      if (!element?.value)
+      if (!element?.value || !target)
         return;
       if (isLayerExist(element.value, target)) {
         isPointerInsideDOMTree.value = false;
@@ -85,7 +85,8 @@ function useFocusOutside(onFocusOutside, element) {
         return;
       await vue.nextTick();
       await vue.nextTick();
-      if (!element.value || isLayerExist(element.value, event.target))
+      const target = event.target;
+      if (!element.value || !target || isLayerExist(element.value, target))
         return;
       if (event.target && !isFocusInsideDOMTree.value) {
         const eventDetail = { originalEvent: event };

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      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 type { Ref } from 'vue'\nimport { handleAndDispatchCustomEvent } from '@/shared'\nimport { isClient } from '@vueuse/shared'\nimport { 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  )\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\n  if (targetLayer && (mainLayer === targetLayer || 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 | undefined\n\n      if (!element?.value || !target)\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      const target = event.target as HTMLElement | undefined\n      if (!element.value || !target || isLayerExist(element.value, target))\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

@@ -14,7 +14,7 @@ function isLayerExist(layerElement, targetElement) {
   const nodeList = Array.from(
     layerElement.ownerDocument.querySelectorAll("[data-dismissable-layer]")
   );
-  if (targetLayer && mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer)) {
+  if (targetLayer && (mainLayer === targetLayer || nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))) {
     return true;
   } else {
     return false;
@@ -30,7 +30,7 @@ function usePointerDownOutside(onPointerDownOutside, element) {
       return;
     const handlePointerDown = async (event) => {
       const target = event.target;
-      if (!element?.value)
+      if (!element?.value || !target)
         return;
       if (isLayerExist(element.value, target)) {
         isPointerInsideDOMTree.value = false;
@@ -83,7 +83,8 @@ function useFocusOutside(onFocusOutside, element) {
         return;
       await nextTick();
       await nextTick();
-      if (!element.value || isLayerExist(element.value, event.target))
+      const target = event.target;
+      if (!element.value || !target || isLayerExist(element.value, target))
         return;
       if (event.target && !isFocusInsideDOMTree.value) {
         const eventDetail = { originalEvent: event };

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      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 type { Ref } from 'vue'\nimport { handleAndDispatchCustomEvent } from '@/shared'\nimport { isClient } from '@vueuse/shared'\nimport { 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  )\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\n  if (targetLayer && (mainLayer === targetLayer || 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 | undefined\n\n      if (!element?.value || !target)\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      const target = event.target as HTMLElement | undefined\n      if (!element.value || !target || isLayerExist(element.value, target))\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/DropdownMenuContent.cjs

@@ -4,8 +4,8 @@ const vue = require('vue');
 const Menu_MenuContent = require('../Menu/MenuContent.cjs');
 const shared_useForwardPropsEmits = require('../shared/useForwardPropsEmits.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
-const shared_useId = require('../shared/useId.cjs');
 const DropdownMenu_DropdownMenuRoot = require('./DropdownMenuRoot.cjs');
+const shared_useId = require('../shared/useId.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "DropdownMenuContent",

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,MAAA,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 { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\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

@@ -2,8 +2,8 @@ import { defineComponent, ref, createBlock, openBlock, unref, mergeProps, withCt
 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';
-import { u as useId } from '../shared/useId.js';
 import { i as injectDropdownMenuRootContext } from './DropdownMenuRoot.js';
+import { u as useId } from '../shared/useId.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DropdownMenuContent",

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,MAAA,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 { MenuContent } from '@/Menu'\nimport { useForwardExpose, useForwardPropsEmits, useId } from '@/shared'\nimport { ref } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\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/DropdownMenuRoot.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const vue = require('vue');
-const core = require('@vueuse/core');
 const Menu_MenuRoot = require('../Menu/MenuRoot.cjs');
+const core = require('@vueuse/core');
 const shared_createContext = require('../shared/createContext.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useDirection = require('../shared/useDirection.cjs');

package/dist/DropdownMenu/DropdownMenuRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRoot.cjs","sources":["../../src/DropdownMenu/DropdownMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Direction } from '../shared/types'\nimport type { MenuEmits, MenuProps } from '@/Menu'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface DropdownMenuRootProps extends MenuProps {\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}\nexport type DropdownMenuRootEmits = MenuEmits\n\nexport interface DropdownMenuRootContext {\n  open: Readonly<Ref<boolean>>\n  onOpenChange: (open: boolean) => void\n  onOpenToggle: () => void\n  triggerId: string\n  triggerElement: Ref<HTMLElement | undefined>\n  contentId: string\n  modal: Ref<boolean>\n  dir: Ref<Direction>\n}\n\nexport const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]\n  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { MenuRoot } from '@/Menu'\n\nconst props = withDefaults(defineProps<DropdownMenuRootProps>(), {\n  modal: true,\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\n\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nprovideDropdownMenuRootContext({\n  open,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  onOpenToggle: () => {\n    open.value = !open.value\n  },\n  triggerId: '',\n  triggerElement,\n  contentId: '',\n  modal,\n  dir,\n})\n</script>\n\n<template>\n  <MenuRoot\n    v-model:open=\"open\"\n    :dir=\"dir\"\n    :modal=\"modal\"\n  >\n    <slot :open=\"open\" />\n  </MenuRoot>\n</template>\n"],"names":["createContext","useForwardExpose","useVModel","ref","toRefs","useDirection"],"mappings":";;;;;;;;;AAuBO,MAAM,CAAC,6BAAA,EAA+B,8BAA8B,CAAA,GACvEA,mCAAuC,kBAAkB;;;;;;;;;;;AAQ7D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,iBAAiBC,OAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAChC,IAA+B,8BAAA,CAAA;AAAA,MAC7B,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,cAAc,MAAM;AAClB,QAAK,IAAA,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAA;AAAA,OACrB;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuRoot.cjs","sources":["../../src/DropdownMenu/DropdownMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuEmits, MenuProps } from '@/Menu'\nimport type { Ref } from 'vue'\nimport type { Direction } from '../shared/types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface DropdownMenuRootProps extends MenuProps {\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}\nexport type DropdownMenuRootEmits = MenuEmits\n\nexport interface DropdownMenuRootContext {\n  open: Readonly<Ref<boolean>>\n  onOpenChange: (open: boolean) => void\n  onOpenToggle: () => void\n  triggerId: string\n  triggerElement: Ref<HTMLElement | undefined>\n  contentId: string\n  modal: Ref<boolean>\n  dir: Ref<Direction>\n}\n\nexport const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]\n  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuRoot } from '@/Menu'\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs } from 'vue'\n\nconst props = withDefaults(defineProps<DropdownMenuRootProps>(), {\n  modal: true,\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\n\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nprovideDropdownMenuRootContext({\n  open,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  onOpenToggle: () => {\n    open.value = !open.value\n  },\n  triggerId: '',\n  triggerElement,\n  contentId: '',\n  modal,\n  dir,\n})\n</script>\n\n<template>\n  <MenuRoot\n    v-model:open=\"open\"\n    :dir=\"dir\"\n    :modal=\"modal\"\n  >\n    <slot :open=\"open\" />\n  </MenuRoot>\n</template>\n"],"names":["createContext","useForwardExpose","useVModel","ref","toRefs","useDirection"],"mappings":";;;;;;;;;AAuBO,MAAM,CAAC,6BAAA,EAA+B,8BAA8B,CAAA,GACvEA,mCAAuC,kBAAkB;;;;;;;;;;;AAQ7D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,iBAAiBC,OAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAIC,WAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAMC,iCAAa,OAAO,CAAA;AAChC,IAA+B,8BAAA,CAAA;AAAA,MAC7B,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,cAAc,MAAM;AAClB,QAAK,IAAA,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAA;AAAA,OACrB;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuRoot.js

@@ -1,6 +1,6 @@
 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 { useVModel } from '@vueuse/core';
 import { c as createContext } from '../shared/createContext.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { u as useDirection } from '../shared/useDirection.js';

package/dist/DropdownMenu/DropdownMenuRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRoot.js","sources":["../../src/DropdownMenu/DropdownMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Direction } from '../shared/types'\nimport type { MenuEmits, MenuProps } from '@/Menu'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface DropdownMenuRootProps extends MenuProps {\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}\nexport type DropdownMenuRootEmits = MenuEmits\n\nexport interface DropdownMenuRootContext {\n  open: Readonly<Ref<boolean>>\n  onOpenChange: (open: boolean) => void\n  onOpenToggle: () => void\n  triggerId: string\n  triggerElement: Ref<HTMLElement | undefined>\n  contentId: string\n  modal: Ref<boolean>\n  dir: Ref<Direction>\n}\n\nexport const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]\n  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { MenuRoot } from '@/Menu'\n\nconst props = withDefaults(defineProps<DropdownMenuRootProps>(), {\n  modal: true,\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\n\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nprovideDropdownMenuRootContext({\n  open,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  onOpenToggle: () => {\n    open.value = !open.value\n  },\n  triggerId: '',\n  triggerElement,\n  contentId: '',\n  modal,\n  dir,\n})\n</script>\n\n<template>\n  <MenuRoot\n    v-model:open=\"open\"\n    :dir=\"dir\"\n    :modal=\"modal\"\n  >\n    <slot :open=\"open\" />\n  </MenuRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,CAAC,6BAAA,EAA+B,8BAA8B,CAAA,GACvE,cAAuC,kBAAkB;;;;;;;;;;;AAQ7D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAI,OAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAChC,IAA+B,8BAAA,CAAA;AAAA,MAC7B,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,cAAc,MAAM;AAClB,QAAK,IAAA,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAA;AAAA,OACrB;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropdownMenuRoot.js","sources":["../../src/DropdownMenu/DropdownMenuRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { MenuEmits, MenuProps } from '@/Menu'\nimport type { Ref } from 'vue'\nimport type { Direction } from '../shared/types'\nimport { createContext, useDirection, useForwardExpose } from '@/shared'\n\nexport interface DropdownMenuRootProps extends MenuProps {\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}\nexport type DropdownMenuRootEmits = MenuEmits\n\nexport interface DropdownMenuRootContext {\n  open: Readonly<Ref<boolean>>\n  onOpenChange: (open: boolean) => void\n  onOpenToggle: () => void\n  triggerId: string\n  triggerElement: Ref<HTMLElement | undefined>\n  contentId: string\n  modal: Ref<boolean>\n  dir: Ref<Direction>\n}\n\nexport const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]\n  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { MenuRoot } from '@/Menu'\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs } from 'vue'\n\nconst props = withDefaults(defineProps<DropdownMenuRootProps>(), {\n  modal: true,\n  open: undefined,\n})\nconst emit = defineEmits<DropdownMenuRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst triggerElement = ref<HTMLElement>()\n\nconst { modal, dir: propDir } = toRefs(props)\nconst dir = useDirection(propDir)\nprovideDropdownMenuRootContext({\n  open,\n  onOpenChange: (value) => {\n    open.value = value\n  },\n  onOpenToggle: () => {\n    open.value = !open.value\n  },\n  triggerId: '',\n  triggerElement,\n  contentId: '',\n  modal,\n  dir,\n})\n</script>\n\n<template>\n  <MenuRoot\n    v-model:open=\"open\"\n    :dir=\"dir\"\n    :modal=\"modal\"\n  >\n    <slot :open=\"open\" />\n  </MenuRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,CAAC,6BAAA,EAA+B,8BAA8B,CAAA,GACvE,cAAuC,kBAAkB;;;;;;;;;;;AAQ7D,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,OAAQ,EAAA,GAAI,OAAO,KAAK,CAAA;AAC5C,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAChC,IAA+B,8BAAA,CAAA;AAAA,MAC7B,IAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAU,KAAA;AACvB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,cAAc,MAAM;AAClB,QAAK,IAAA,CAAA,KAAA,GAAQ,CAAC,IAAK,CAAA,KAAA;AAAA,OACrB;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,KAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/DropdownMenu/DropdownMenuSub.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const vue = require('vue');
-const core = require('@vueuse/core');
 const Menu_MenuSub = require('../Menu/MenuSub.cjs');
+const core = require('@vueuse/core');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({

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,MAAA;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 { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\nimport { useVModel } from '@vueuse/core'\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,6 +1,6 @@
 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 { useVModel } from '@vueuse/core';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({

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,MAAA;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 { MenuSub } from '@/Menu'\nimport { useForwardExpose } from '@/shared'\nimport { useVModel } from '@vueuse/core'\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/DropdownMenuTrigger.cjs

@@ -2,10 +2,10 @@
 
 const vue = require('vue');
 const Menu_MenuAnchor = require('../Menu/MenuAnchor.cjs');
-const DropdownMenu_DropdownMenuRoot = require('./DropdownMenuRoot.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_useId = require('../shared/useId.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const DropdownMenu_DropdownMenuRoot = require('./DropdownMenuRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "DropdownMenuTrigger",

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,MAAA,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 { MenuAnchor } from '@/Menu'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { nextTick, onMounted } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\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,9 +1,9 @@
 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';
 import { u as useId } from '../shared/useId.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
+import { i as injectDropdownMenuRootContext } from './DropdownMenuRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DropdownMenuTrigger",

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,MAAA,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 { MenuAnchor } from '@/Menu'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { nextTick, onMounted } from 'vue'\nimport { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'\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/EditableInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableInput.cjs","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { injectEditableRootContext } from './EditableRoot.vue'\nimport { useKbd } from '@/shared'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useKbd","injectEditableRootContext","computed","usePrimitiveElement","onMounted","watch","nextTick"],"mappings":";;;;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAMA,oBAAO,EAAA;AAEnB,IAAA,MAAM,UAAUC,+CAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAAC,YAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAcA,YAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAaC,iDAAoB,EAAA;AAE3E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAMC,SAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAAC,YAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EditableInput.cjs","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useKbd } from '@/shared'\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useKbd","injectEditableRootContext","computed","usePrimitiveElement","onMounted","watch","nextTick"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAMA,oBAAO,EAAA;AAEnB,IAAA,MAAM,UAAUC,+CAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAAC,YAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAcA,YAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAaC,iDAAoB,EAAA;AAE3E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAMC,SAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAAC,YAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Editable/EditableInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableInput.js","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { injectEditableRootContext } from './EditableRoot.vue'\nimport { useKbd } from '@/shared'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAM,MAAO,EAAA;AAEnB,IAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAA,QAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAc,QAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAa,mBAAoB,EAAA;AAE3E,IAAA,SAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAM,KAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,QAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EditableInput.js","sources":["../../src/Editable/EditableInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\n\nexport interface EditableInputProps extends PrimitiveProps {\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { useKbd } from '@/shared'\nimport { computed, nextTick, onMounted, watch } from 'vue'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nconst props = withDefaults(defineProps<EditableInputProps>(), {\n  as: 'input',\n})\n\nconst kbd = useKbd()\n\nconst context = injectEditableRootContext()\n\nconst disabled = computed(() => context.disabled.value)\n\nconst placeholder = computed(() => context.placeholder.value?.edit)\n\nconst { primitiveElement, currentElement: inputRef } = usePrimitiveElement()\n\nonMounted(() => {\n  context.inputRef.value = inputRef.value as HTMLInputElement\n  if (context.startWithEditMode.value) {\n    context.inputRef.value?.focus({ preventScroll: true })\n    if (context.selectOnFocus.value)\n      context.inputRef.value?.select()\n  }\n})\n\nwatch(context.isEditing, (value) => {\n  if (value) {\n    nextTick(() => {\n      context.inputRef.value?.focus({ preventScroll: true })\n      if (context.selectOnFocus.value)\n        context.inputRef.value?.select()\n    })\n  }\n})\n\nfunction handleSubmitKeyDown(event: KeyboardEvent) {\n  if ((context.submitMode.value === 'enter' || context.submitMode.value === 'both') && event.key === kbd.ENTER && !event.shiftKey && !event.metaKey)\n    context.submit()\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    :value=\"context.inputValue.value\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :maxlength=\"context.maxLength.value\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"context.readonly.value ? '' : undefined\"\n    :readonly=\"context.readonly.value\"\n    aria-label=\"editable input\"\n    :hidden=\"context.autoResize.value ? undefined : !context.isEditing.value\"\n    :style=\"context.autoResize.value ? { all: 'unset', gridArea: '1 / 1 / auto / auto', visibility: !context.isEditing.value ? 'hidden' : undefined } : undefined\"\n    @input=\"context.inputValue.value = $event.target.value\"\n    @keydown.enter.space=\"handleSubmitKeyDown\"\n    @keydown.esc=\"context.cancel\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,MAAM,MAAO,EAAA;AAEnB,IAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,IAAA,MAAM,QAAW,GAAA,QAAA,CAAS,MAAM,OAAA,CAAQ,SAAS,KAAK,CAAA;AAEtD,IAAA,MAAM,cAAc,QAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,IAAI,CAAA;AAElE,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,QAAA,KAAa,mBAAoB,EAAA;AAE3E,IAAA,SAAA,CAAU,MAAM;AACd,MAAQ,OAAA,CAAA,QAAA,CAAS,QAAQ,QAAS,CAAA,KAAA;AAClC,MAAI,IAAA,OAAA,CAAQ,kBAAkB,KAAO,EAAA;AACnC,QAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,QAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,UAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA;AACnC,KACD,CAAA;AAED,IAAM,KAAA,CAAA,OAAA,CAAQ,SAAW,EAAA,CAAC,KAAU,KAAA;AAClC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,QAAA,CAAS,MAAM;AACb,UAAA,OAAA,CAAQ,SAAS,KAAO,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AACrD,UAAA,IAAI,QAAQ,aAAc,CAAA,KAAA;AACxB,YAAQ,OAAA,CAAA,QAAA,CAAS,OAAO,MAAO,EAAA;AAAA,SAClC,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,SAAS,oBAAoB,KAAsB,EAAA;AACjD,MAAA,IAAA,CAAK,QAAQ,UAAW,CAAA,KAAA,KAAU,OAAW,IAAA,OAAA,CAAQ,WAAW,KAAU,KAAA,MAAA,KAAW,KAAM,CAAA,GAAA,KAAQ,IAAI,KAAS,IAAA,CAAC,KAAM,CAAA,QAAA,IAAY,CAAC,KAAM,CAAA,OAAA;AACxI,QAAA,OAAA,CAAQ,MAAO,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Editable/EditablePreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditablePreview.cjs","sources":["../../src/Editable/EditablePreview.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectEditableRootContext } from './EditableRoot.vue'\nimport { computed } from 'vue'\n\nexport interface EditablePreviewProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<EditablePreviewProps>(), { as: 'span' })\n\nconst context = injectEditableRootContext()\n\nconst placeholder = computed(() => context.placeholder.value?.preview)\n\nfunction handleFocus() {\n  if (context.activationMode.value === 'focus')\n    context.edit()\n}\nfunction handleDoubleClick() {\n  if (context.activationMode.value === 'dblclick')\n    context.edit()\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    tabindex=\"0\"\n    :data-placeholder-shown=\"context.isEditing.value ? undefined : ''\"\n    :hidden=\"context.autoResize.value ? undefined : context.isEditing.value\"\n    :style=\"context.autoResize.value ? {\n      whiteSpace: 'pre',\n      userSelect: 'none',\n      gridArea: '1 / 1 / auto / auto',\n      visibility: context.isEditing.value ? 'hidden' : undefined,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    } : undefined\"\n    @focusin=\"handleFocus\"\n    @dblclick=\"handleDoubleClick\"\n  >\n    <slot>\n      {{ context.modelValue.value || placeholder }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":["injectEditableRootContext","computed"],"mappings":";;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,UAAUA,+CAA0B,EAAA;AAE1C,IAAA,MAAM,cAAcC,YAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,OAAO,CAAA;AAErE,IAAA,SAAS,WAAc,GAAA;AACrB,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,OAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;AAEjB,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,UAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EditablePreview.cjs","sources":["../../src/Editable/EditablePreview.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nexport interface EditablePreviewProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<EditablePreviewProps>(), { as: 'span' })\n\nconst context = injectEditableRootContext()\n\nconst placeholder = computed(() => context.placeholder.value?.preview)\n\nfunction handleFocus() {\n  if (context.activationMode.value === 'focus')\n    context.edit()\n}\nfunction handleDoubleClick() {\n  if (context.activationMode.value === 'dblclick')\n    context.edit()\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    tabindex=\"0\"\n    :data-placeholder-shown=\"context.isEditing.value ? undefined : ''\"\n    :hidden=\"context.autoResize.value ? undefined : context.isEditing.value\"\n    :style=\"context.autoResize.value ? {\n      whiteSpace: 'pre',\n      userSelect: 'none',\n      gridArea: '1 / 1 / auto / auto',\n      visibility: context.isEditing.value ? 'hidden' : undefined,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    } : undefined\"\n    @focusin=\"handleFocus\"\n    @dblclick=\"handleDoubleClick\"\n  >\n    <slot>\n      {{ context.modelValue.value || placeholder }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":["injectEditableRootContext","computed"],"mappings":";;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,UAAUA,+CAA0B,EAAA;AAE1C,IAAA,MAAM,cAAcC,YAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,OAAO,CAAA;AAErE,IAAA,SAAS,WAAc,GAAA;AACrB,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,OAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;AAEjB,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,UAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Editable/EditablePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditablePreview.js","sources":["../../src/Editable/EditablePreview.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { injectEditableRootContext } from './EditableRoot.vue'\nimport { computed } from 'vue'\n\nexport interface EditablePreviewProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<EditablePreviewProps>(), { as: 'span' })\n\nconst context = injectEditableRootContext()\n\nconst placeholder = computed(() => context.placeholder.value?.preview)\n\nfunction handleFocus() {\n  if (context.activationMode.value === 'focus')\n    context.edit()\n}\nfunction handleDoubleClick() {\n  if (context.activationMode.value === 'dblclick')\n    context.edit()\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    tabindex=\"0\"\n    :data-placeholder-shown=\"context.isEditing.value ? undefined : ''\"\n    :hidden=\"context.autoResize.value ? undefined : context.isEditing.value\"\n    :style=\"context.autoResize.value ? {\n      whiteSpace: 'pre',\n      userSelect: 'none',\n      gridArea: '1 / 1 / auto / auto',\n      visibility: context.isEditing.value ? 'hidden' : undefined,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    } : undefined\"\n    @focusin=\"handleFocus\"\n    @dblclick=\"handleDoubleClick\"\n  >\n    <slot>\n      {{ context.modelValue.value || placeholder }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,IAAA,MAAM,cAAc,QAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,OAAO,CAAA;AAErE,IAAA,SAAS,WAAc,GAAA;AACrB,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,OAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;AAEjB,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,UAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EditablePreview.js","sources":["../../src/Editable/EditablePreview.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\nimport { injectEditableRootContext } from './EditableRoot.vue'\n\nexport interface EditablePreviewProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<EditablePreviewProps>(), { as: 'span' })\n\nconst context = injectEditableRootContext()\n\nconst placeholder = computed(() => context.placeholder.value?.preview)\n\nfunction handleFocus() {\n  if (context.activationMode.value === 'focus')\n    context.edit()\n}\nfunction handleDoubleClick() {\n  if (context.activationMode.value === 'dblclick')\n    context.edit()\n}\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"props\"\n    tabindex=\"0\"\n    :data-placeholder-shown=\"context.isEditing.value ? undefined : ''\"\n    :hidden=\"context.autoResize.value ? undefined : context.isEditing.value\"\n    :style=\"context.autoResize.value ? {\n      whiteSpace: 'pre',\n      userSelect: 'none',\n      gridArea: '1 / 1 / auto / auto',\n      visibility: context.isEditing.value ? 'hidden' : undefined,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n    } : undefined\"\n    @focusin=\"handleFocus\"\n    @dblclick=\"handleDoubleClick\"\n  >\n    <slot>\n      {{ context.modelValue.value || placeholder }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,UAAU,yBAA0B,EAAA;AAE1C,IAAA,MAAM,cAAc,QAAS,CAAA,MAAM,OAAQ,CAAA,WAAA,CAAY,OAAO,OAAO,CAAA;AAErE,IAAA,SAAS,WAAc,GAAA;AACrB,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,OAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;AAEjB,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,OAAA,CAAQ,eAAe,KAAU,KAAA,UAAA;AACnC,QAAA,OAAA,CAAQ,IAAK,EAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}