{"version":3,"file":"OzOverlay-d48832ee.js","sources":["../../../app/javascript/library/v4/components/OzFocusTrap.vue","../../../app/javascript/library/v4/components/OzOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport window from '@@/bits/global'\nimport { nextTick, onMounted, onBeforeUnmount, ref } from 'vue'\nimport { uniqueId } from 'es-toolkit/compat'\n\nconst FOCUSABLE_ELEMENTS_QUERY = [\n  'a[href]',\n  'area[href]',\n  'input:not([disabled]):not([type=\"hidden\"]):not([aria-hidden])',\n  'select:not([disabled]):not([aria-hidden])',\n  'textarea:not([disabled]):not([aria-hidden])',\n  'button:not([disabled]):not([aria-hidden])',\n  'iframe',\n  'object',\n  'embed',\n  '[contenteditable]',\n  '[tabindex]:not([tabindex^=\"-\"])',\n].join(', ')\n\nfunction isElementContained(rootElement: HTMLElement, activeElement: Element | null): boolean {\n  if (!activeElement) return false\n\n  const activeElementRelativePosition = rootElement.compareDocumentPosition(activeElement)\n  if (!activeElementRelativePosition) return false\n\n  const isContained = (activeElementRelativePosition & Node.DOCUMENT_POSITION_CONTAINED_BY) > 0\n  return isContained\n}\n\nconst root = ref<HTMLDivElement>()\nconst lastFocusedElement = ref<Element | null>(window.document.activeElement)\nconst focusTrapId = uniqueId('focusTrap')\n\nconst afterFocusShiftsFlushed = (callback): void => {\n  // Only check and ensure focus is contained after a 1ms `setTimeout`.\n  // This is to allow `focus()` calls on child elements to take place first.\n  // For that to happen, these calls should happen immediately or by a 0ms `setTimeout` at the latest.\n  setTimeout(() => nextTick(callback), 1)\n}\n\nconst getFocusTarget = (event: KeyboardEvent): HTMLElement | null => {\n  const isTabPressed = event.key === 'Tab'\n  const isShiftPressed = event.shiftKey\n\n  // Prevent DOM searching if the user is not navigating with the keyboard.\n  if (!isTabPressed) return null\n\n  const rootElement = root.value as HTMLElement\n  const activeElement = document.activeElement\n  const isAlreadyTrapped = isElementContained(rootElement, activeElement)\n  const focusableElements = rootElement.querySelectorAll(FOCUSABLE_ELEMENTS_QUERY)\n\n  const firstFocusableElement = focusableElements[0] as HTMLElement\n  const lastFocusableElement = focusableElements[focusableElements.length - 1] as HTMLElement\n\n  if (isShiftPressed) {\n    // Shift + Tab\n    if (activeElement === firstFocusableElement || !isAlreadyTrapped) {\n      event.preventDefault()\n      return lastFocusableElement || rootElement\n    }\n  } else {\n    // Tab\n    if (activeElement === lastFocusableElement || !isAlreadyTrapped) {\n      event.preventDefault()\n      return firstFocusableElement || rootElement\n    }\n  }\n\n  return null\n}\n\nconst ensureFocusTrapped = (event: KeyboardEvent): void => {\n  const isLatestDialog = allFocusTraps[0] === focusTrapId\n  if (!isLatestDialog) return\n\n  const focusTarget = getFocusTarget(event)\n  if (focusTarget) focusTarget.focus()\n}\n\nonMounted((): void => {\n  allFocusTraps.unshift(focusTrapId)\n\n  // Focus dialog first.\n  afterFocusShiftsFlushed(() => {\n    const rootElement = root.value as HTMLElement\n    const previousActiveElement = document.activeElement as HTMLElement | null\n\n    if (rootElement && !isElementContained(rootElement, previousActiveElement)) {\n      rootElement.focus()\n    }\n  })\n\n  window.addEventListener('keydown', ensureFocusTrapped)\n})\n\nonBeforeUnmount((): void => {\n  const currentFocusTrapIndex = allFocusTraps.indexOf(focusTrapId)\n\n  // Remove current FocusTrap instance from array.\n  allFocusTraps.splice(currentFocusTrapIndex, 1)\n\n  /**\n   *  Restore focus to latest focused element.\n   */\n  if (lastFocusedElement.value instanceof HTMLElement) {\n    lastFocusedElement.value.focus()\n  }\n\n  window.removeEventListener('keydown', ensureFocusTrapped)\n})\n</script>\n\n<script lang=\"ts\">\n/**\n * We use this array to track all instances of `FocusTrap`.\n * We need to define the array outside the `setup` script\n * since otherwise there will be one array per instance.\n */\nconst allFocusTraps: any[] = []\n\nexport default {}\n</script>\n\n<template>\n  <!-- tabindex=\"-1\" makes the element focusable via JS, but not focusable by the user -->\n  <div ref=\"root\" tabindex=\"-1\">\n    <!-- @slot Content to be focus-trapped. -->\n    <slot></slot>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport device from '@@/bits/device'\nimport { awaitTransitionEnd } from '@@/bits/dom'\nimport { __ } from '@@/bits/intl'\nimport OzFocusTrap from '@@/library/v4/components/OzFocusTrap.vue'\nimport postMessage from '@@/native_bridge/post_message'\nimport { uniqueId } from 'es-toolkit/compat'\nimport type { ComponentPublicInstance } from 'vue'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    // Selects type of scrim. If none is selected, elements covered by the overlay will be fully visible.\n    scrim?: 'modal' | 'popover' | null\n\n    // Dark mode. This has no effect if scrim is turned off.\n    darkMode?: true | false | 'auto'\n\n    // Fade the overlay and its contents in. Turn this off if you are showing a series of modals.\n    shouldFadeIn?: boolean\n\n    // Decides if scrim is not really there and can be clicked through.\n    isSpectral?: boolean\n\n    // Determines CSS position.\n    position?: 'fixed' | 'absolute'\n\n    /**\n     *  TailwindCSS z-index class.\n     *\n     *  - `z-modal2` is for all dialogs\n     *  - `z-sidepanel` is for surface sidepanels\n     *  - `z-dropdown` is for reaction dropdowns and drafts in surface\n     *  - `z-modal-dropdown` is for reaction dropdowns in surface\n     *  - `z-alert` is for all alerts\n     *  - `z-mentions-box` is for mention box\n     */\n    zIndexClass?: 'z-modal2' | 'z-sidepanel' | 'z-dropdown' | 'z-modal-dropdown' | 'z-mentions-box' | 'z-alert'\n  }>(),\n  {\n    scrim: 'modal',\n    darkMode: 'auto',\n    shouldFadeIn: true,\n    isSpectral: false,\n    position: 'fixed',\n    zIndexClass: 'z-modal2',\n  },\n)\nconst emit = defineEmits(['scrim-click', 'scrim-esc'])\n\nconst mouseDownTarget = ref<EventTarget | null>(null)\nconst mouseUpTarget = ref<EventTarget | null>(null)\nconst focusTrapDescriptionId = uniqueId('focusTrap')\n\n// We want to unset the `fade` class after the animation is finished\n// so we keep the value in an internal ref.\nconst internalShouldFadeIn = ref(props.shouldFadeIn)\n\nconst overlayClasses = computed(() => [\n  // Covers other elements on page\n  props.position,\n  'inset-0',\n  props.zIndexClass,\n  // Transitions\n  { fade: internalShouldFadeIn.value },\n\n  // Scrim\n  props.scrim === 'modal' && {\n    'bg-modal-overlay-light': props.darkMode === false,\n    'bg-modal-overlay-dark': props.darkMode === true,\n    'bg-modal-overlay-light dark:bg-modal-overlay-dark': props.darkMode === 'auto',\n  },\n  props.scrim === 'popover' && {\n    'bg-popover-overlay-light': props.darkMode === false,\n    'bg-popover-overlay-dark': props.darkMode === true,\n    'bg-popover-overlay-light dark:bg-popover-overlay-dark': props.darkMode === 'auto',\n  },\n\n  // Misc\n  'touch-action-manipulation',\n])\n\n// These colors are taken from the TW config.\nconst overlayColor = computed(() =>\n  props.scrim === 'modal'\n    ? props.darkMode === true\n      ? 'rgba(36, 37, 39, 0.8)' // modal-overlay-dark | modal-overlay-light\n      : 'rgba(0, 0, 0, 0.2)'\n    : props.scrim === 'popover'\n    ? props.darkMode === true\n      ? 'rgba(255, 255, 255, 0.05)' // popover-overlay-dark | popover-overlay-light\n      : 'rgba(0, 0, 0, 0.15)'\n    : 'transparent',\n)\n\nconst scrimClick = (e: MouseEvent) => {\n  // Emits if and only if the mouse down and mouse up events\n  // are both on the same element and is outside of the overlay.\n  // This ensures click and drag between overlay does not hide overlay.\n  if (mouseDownTarget.value === mouseUpTarget.value && mouseDownTarget.value === e.target) {\n    /**\n     * Emitted with overlay scrim is clicked. Can be used to trigger closure of drawer.\n     */\n    emit('scrim-click')\n  }\n}\n/**\n * Emitted when an escape keydown event is propagated to the overlay.\n * Since focus is trapped, it is effectively a global listener.\n */\nconst scrimEsc = () => {\n  emit('scrim-esc')\n}\n\nconst mouseDown = (e: MouseEvent) => {\n  mouseDownTarget.value = e.target\n}\n\nconst mouseUp = (e: MouseEvent) => {\n  mouseUpTarget.value = e.target\n}\n\nconst root = ref<HTMLElement | ComponentPublicInstance>()\nconst rootEl = computed(() => (root.value instanceof HTMLElement ? root.value : root.value?.$el))\n\n/**\n * We send native bridge overlay messages so the mobile app can show\n * an overlay on the native elements for consistency.\n */\nconst shouldSendNativeOverlayMessages = computed(() => {\n  return device.app && props.scrim !== null\n})\n\nonMounted(async () => {\n  if (shouldSendNativeOverlayMessages.value) {\n    overlaysCount++\n    postMessage({\n      message_type: 'overlay_show',\n      payload: {\n        overlayColor: overlayColor.value,\n      },\n    })\n  }\n  if (rootEl.value == null) return\n  await awaitTransitionEnd(rootEl.value)\n  internalShouldFadeIn.value = false\n})\n\nonBeforeUnmount(() => {\n  if (shouldSendNativeOverlayMessages.value) {\n    overlaysCount--\n\n    // Only send `overlay_hide` if there are no more overlays.\n    // Otherwise, the app may hide the native overlay prematurely.\n    if (overlaysCount === 0) {\n      postMessage({\n        message_type: 'overlay_hide',\n      })\n    }\n  }\n})\n</script>\n\n<script lang=\"ts\">\n// This is shared across all `OzOverlay` instances.\nlet overlaysCount = 0\n</script>\n\n<template>\n  <OzFocusTrap\n    v-if=\"!isSpectral\"\n    ref=\"root\"\n    :class=\"[overlayClasses, 'oz-overlay pointer-events-auto']\"\n    :aria-describedby=\"focusTrapDescriptionId\"\n    @click.native.self.stop.prevent=\"scrimClick\"\n    @keydown.native.esc.stop.prevent=\"scrimEsc\"\n    @mousedown.native=\"mouseDown\"\n    @mouseup.native=\"mouseUp\"\n  >\n    <!--\n      `self` in `@click.self` ensures that clicking on overlaid context doesn't tigger a scrimClick\n      but only clicking on the overlay itself does.\n\n      Supposing that `scrimClick` and `scrimEsc` attempt to close a modal, `stop` ensures one is closed\n      at a time when multiple modals are open.\n    -->\n    <!-- @slot Content to be overlaid. -->\n\n    <slot></slot>\n    <p :id=\"focusTrapDescriptionId\" class=\"sr-only\">{{ __('Press the Escape key to exit this dialog') }}</p>\n  </OzFocusTrap>\n  <div v-else ref=\"root\" :class=\"[overlayClasses, 'pointer-events-none']\" @keydown.esc.stop.prevent=\"scrimEsc\">\n    <div :class=\"['contents', 'pointer-events-auto']\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n/*\n  Avoid page zooming on double tap\n*/\n.touch-action-manipulation {\n  touch-action: manipulation;\n}\n\n.fade {\n  animation-name: oz-overlay-fade;\n  animation-duration: 0.2s;\n\n  /*\n    Mitigates choppy animation on some browsers, e.g. Chrome on iOS\n  */\n  will-change: opacity;\n}\n\n@keyframes oz-overlay-fade {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n</style>\n"],"names":["allFocusTraps","__default__","FOCUSABLE_ELEMENTS_QUERY","join","isElementContained","rootElement","activeElement","activeElementRelativePosition","compareDocumentPosition","Node","DOCUMENT_POSITION_CONTAINED_BY","root","ref","lastFocusedElement","window","document","focusTrapId","uniqueId","afterFocusShiftsFlushed","callback","setTimeout","nextTick","getFocusTarget","event","isTabPressed","key","isShiftPressed","shiftKey","value","isAlreadyTrapped","focusableElements","querySelectorAll","firstFocusableElement","lastFocusableElement","length","preventDefault","ensureFocusTrapped","focusTarget","focus","onMounted","unshift","previousActiveElement","addEventListener","onBeforeUnmount","currentFocusTrapIndex","indexOf","splice","HTMLElement","removeEventListener","overlaysCount","mouseDownTarget","mouseUpTarget","focusTrapDescriptionId","internalShouldFadeIn","props","shouldFadeIn","overlayClasses","computed","position","zIndexClass","fade","scrim","darkMode","overlayColor","scrimClick","e","target","emit","scrimEsc","mouseDown","mouseUp","rootEl","$el","shouldSendNativeOverlayMessages","device","app","postMessage","message_type","payload","awaitTransitionEnd"],"mappings":"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"}