@hina-ui/vue 1.7.5 → 1.7.7

package/dist/shared/primitives/accordion/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/accordion/index.ts

@@ -0,0 +1,34 @@
+import { arrowNavigation } from '../arrow-navigation'
+
+export const ACCORDION_NAVIGATION_KEYS = [
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'Home',
+  'End',
+]
+
+export function isAccordionItemOpen(isSingle: boolean, modelValue: unknown, value: string) {
+  return isSingle ? value === modelValue : Array.isArray(modelValue) && modelValue.includes(value)
+}
+
+export function isAccordionTriggerLocked(isSingle: boolean, open: boolean, collapsible: boolean) {
+  return isSingle && open && !collapsible
+}
+
+export function navigateAccordion(
+  event: KeyboardEvent,
+  parent: HTMLElement | null | undefined,
+  options: { orientation: 'vertical' | 'horizontal'; dir: 'ltr' | 'rtl'; attributeName: string },
+) {
+  const target = event.target as HTMLElement
+  const items = Array.from(parent?.querySelectorAll(options.attributeName) ?? [])
+  if (!items.includes(target)) return
+  arrowNavigation(event, target, parent ?? undefined, {
+    arrowKeyOptions: options.orientation,
+    dir: options.dir,
+    focus: true,
+    attributeName: options.attributeName,
+  })
+}

package/dist/shared/primitives/arrow-navigation/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/arrow-navigation/index.ts

@@ -0,0 +1,90 @@
+import { COLLECTION_ITEM } from '../collection'
+
+const IGNORED = ['INPUT', 'TEXTAREA']
+
+export interface ArrowNavigationOptions {
+  arrowKeyOptions?: 'horizontal' | 'vertical' | 'both'
+  attributeName?: string
+  itemsArray?: HTMLElement[]
+  loop?: boolean
+  dir?: 'ltr' | 'rtl'
+  preventScroll?: boolean
+  enableIgnoredElement?: boolean
+  focus?: boolean
+}
+
+export function arrowNavigation(
+  event: KeyboardEvent,
+  currentElement: HTMLElement | null | undefined,
+  parentElement: HTMLElement | null | undefined,
+  options: ArrowNavigationOptions = {},
+): HTMLElement | null {
+  if (
+    !currentElement ||
+    (options.enableIgnoredElement && IGNORED.includes(currentElement.nodeName))
+  )
+    return null
+  const {
+    arrowKeyOptions = 'both',
+    attributeName = `[${COLLECTION_ITEM}]`,
+    itemsArray = [],
+    loop = true,
+    dir = 'ltr',
+    preventScroll = true,
+    focus = false,
+  } = options
+  const right = event.key === 'ArrowRight'
+  const left = event.key === 'ArrowLeft'
+  const up = event.key === 'ArrowUp'
+  const down = event.key === 'ArrowDown'
+  const home = event.key === 'Home'
+  const end = event.key === 'End'
+  const goingVertical = up || down
+  const goingHorizontal = right || left
+  if (
+    !home &&
+    !end &&
+    ((!goingVertical && !goingHorizontal) ||
+      (arrowKeyOptions === 'vertical' && goingHorizontal) ||
+      (arrowKeyOptions === 'horizontal' && goingVertical))
+  )
+    return null
+  const items = parentElement
+    ? Array.from(parentElement.querySelectorAll<HTMLElement>(attributeName))
+    : itemsArray
+  if (!items.length) return null
+  if (preventScroll) event.preventDefault()
+  let item: HTMLElement | null = null
+  if (goingHorizontal || goingVertical) {
+    const goForward = goingVertical ? down : dir === 'ltr' ? right : left
+    item = findNextFocusableElement(items, currentElement, { goForward, loop })
+  } else if (home) item = items.at(0) || null
+  else if (end) item = items.at(-1) || null
+  if (focus) item?.focus()
+  return item
+}
+
+function findNextFocusableElement(
+  elements: HTMLElement[],
+  currentElement: HTMLElement,
+  options: { goForward: boolean; loop: boolean },
+  iterations = elements.includes(currentElement) ? elements.length : elements.length + 1,
+): HTMLElement | null {
+  if (--iterations === 0) return null
+  const index = elements.indexOf(currentElement)
+  const newIndex =
+    index === -1
+      ? options.goForward
+        ? 0
+        : elements.length - 1
+      : options.goForward
+        ? index + 1
+        : index - 1
+  if (!options.loop && (newIndex < 0 || newIndex >= elements.length)) return null
+  const candidate = elements[(newIndex + elements.length) % elements.length]
+  if (!candidate) return null
+  const disabled =
+    candidate.hasAttribute('disabled') && candidate.getAttribute('disabled') !== 'false'
+  if (disabled) return findNextFocusableElement(elements, candidate, options, iterations)
+  return candidate
+}

package/dist/shared/primitives/body-scroll-lock/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/body-scroll-lock/index.ts

@@ -0,0 +1,115 @@
+import { blockingLayerCount } from '../dismissable-layer'
+
+export interface ScrollBodyOption {
+  padding?: boolean | number | string
+  margin?: boolean | number | string
+}
+
+export type ScrollBody = boolean | ScrollBodyOption
+
+const locks = new Map<symbol, boolean>()
+let initialOverflow: string | undefined
+let releaseTouchMove: (() => void) | undefined
+let active = false
+
+const isIOS =
+  typeof navigator !== 'undefined' &&
+  (/iP(?:ad|hone|od)/.test(navigator.userAgent) ||
+    (navigator.maxTouchPoints > 2 && /iPad|Macintosh/.test(navigator.userAgent)))
+
+function scrollable(element: Element): boolean {
+  const style = getComputedStyle(element)
+  if (
+    style.overflowX === 'scroll' ||
+    style.overflowY === 'scroll' ||
+    (style.overflowX === 'auto' && element.clientWidth < element.scrollWidth) ||
+    (style.overflowY === 'auto' && element.clientHeight < element.scrollHeight)
+  )
+    return true
+  const parent = element.parentNode
+  if (!(parent instanceof Element) || parent.tagName === 'BODY') return false
+  return scrollable(parent)
+}
+
+function preventTouchMove(event: TouchEvent) {
+  const target = event.target
+  if (target instanceof Element && scrollable(target)) return
+  if (event.touches.length > 1) return
+  if (event.cancelable) event.preventDefault()
+}
+
+function locked() {
+  for (const value of locks.values()) if (value) return true
+  return false
+}
+
+function size(value: boolean | number | string) {
+  return typeof value === 'number' ? `${value}px` : String(value)
+}
+
+function offsets(scrollBody: ScrollBody, scrollbar: number) {
+  if (!scrollBody) return { padding: 0, margin: 0 }
+  if (typeof scrollBody !== 'object') return { padding: scrollbar, margin: 0 }
+  const pick = (value: boolean | number | string | undefined, fallback: number) =>
+    value === true ? scrollbar : (value ?? fallback)
+  return { padding: pick(scrollBody.padding, scrollbar), margin: pick(scrollBody.margin, 0) }
+}
+
+function reset() {
+  const body = document.body
+  body.style.paddingRight = ''
+  body.style.marginRight = ''
+  if (blockingLayerCount() === 0) body.style.pointerEvents = ''
+  document.documentElement.style.removeProperty('--scrollbar-width')
+  body.style.overflow = initialOverflow ?? ''
+  releaseTouchMove?.()
+  releaseTouchMove = undefined
+  initialOverflow = undefined
+}
+
+function apply(scrollBody: ScrollBody, defer: (callback: () => void) => void) {
+  const body = document.body
+  if (initialOverflow === undefined) initialOverflow = body.style.overflow
+  const scrollbar = window.innerWidth - document.documentElement.clientWidth
+  const { padding, margin } = offsets(scrollBody, scrollbar)
+  if (scrollbar > 0) {
+    body.style.paddingRight = size(padding)
+    body.style.marginRight = size(margin)
+    document.documentElement.style.setProperty('--scrollbar-width', `${scrollbar}px`)
+    body.style.overflow = 'hidden'
+  }
+  if (isIOS) {
+    document.addEventListener('touchmove', preventTouchMove, { passive: false })
+    releaseTouchMove = () => document.removeEventListener('touchmove', preventTouchMove)
+  }
+  defer(() => {
+    if (!locked()) return
+    body.style.pointerEvents = 'none'
+    body.style.overflow = 'hidden'
+  })
+}
+
+function sync(scrollBody: ScrollBody, defer: (callback: () => void) => void) {
+  const next = locked()
+  if (next === active) return
+  active = next
+  if (next) apply(scrollBody, defer)
+  else reset()
+}
+
+export function createScrollLock(
+  scrollBody: () => ScrollBody,
+  defer: (callback: () => void) => void = queueMicrotask,
+) {
+  const id = Symbol('scroll-lock')
+  return {
+    set(value: boolean) {
+      locks.set(id, value)
+      sync(scrollBody(), defer)
+    },
+    release() {
+      locks.delete(id)
+      sync(scrollBody(), defer)
+    },
+  }
+}

package/dist/shared/primitives/checkbox/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/checkbox/index.ts

@@ -0,0 +1,23 @@
+export type CheckedState = boolean | 'indeterminate'
+
+export function isIndeterminate(checked: unknown): checked is 'indeterminate' {
+  return checked === 'indeterminate'
+}
+
+export function getCheckedState(checked: unknown) {
+  return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'
+}
+
+export function ariaChecked(state: CheckedState) {
+  return isIndeterminate(state) ? 'mixed' : state
+}
+
+export function nextCheckedValue<T>(
+  current: unknown,
+  checked: boolean,
+  trueValue: T,
+  falseValue: T,
+) {
+  if (isIndeterminate(current)) return trueValue
+  return checked ? falseValue : trueValue
+}

package/dist/shared/primitives/collapsible/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/collapsible/index.ts

@@ -0,0 +1,31 @@
+export interface CollapsibleMotion {
+  transitionDuration: string
+  animationName: string
+}
+
+export function openState(open: unknown) {
+  return open ? 'open' : 'closed'
+}
+
+export function measureCollapsibleContent(
+  node: HTMLElement,
+  saved: CollapsibleMotion | undefined,
+  suppressed: boolean,
+) {
+  const motion = saved || {
+    transitionDuration: node.style.transitionDuration,
+    animationName: node.style.animationName,
+  }
+  node.style.transitionDuration = '0s'
+  node.style.animationName = 'none'
+  const rect = node.getBoundingClientRect()
+  if (!suppressed) {
+    node.style.transitionDuration = motion.transitionDuration
+    node.style.animationName = motion.animationName
+  }
+  return { motion, width: rect.width, height: rect.height }
+}
+
+export function isCollapsibleContentRendered(present: boolean, unmountOnHide: boolean) {
+  return unmountOnHide ? present : true
+}

package/dist/shared/primitives/collection/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/collection/index.ts

@@ -0,0 +1,19 @@
+export const COLLECTION_ITEM = 'data-reka-collection-item'
+
+export interface CollectionEntry {
+  ref: HTMLElement
+}
+
+export function orderCollectionItems<T extends CollectionEntry>(
+  root: HTMLElement | null | undefined,
+  items: Iterable<T>,
+  includeDisabled = false,
+) {
+  if (!root) return []
+  const nodes = Array.from(root.querySelectorAll(`[${COLLECTION_ITEM}]`))
+  const order = new Map(nodes.map((node, index) => [node, index]))
+  const ordered = Array.from(items).sort(
+    (a, b) => (order.get(a.ref) ?? -1) - (order.get(b.ref) ?? -1),
+  )
+  return includeDisabled ? ordered : ordered.filter(item => item.ref.dataset.disabled !== '')
+}

package/dist/shared/primitives/dismissable-layer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/dismissable-layer/index.ts

@@ -0,0 +1,203 @@
+export type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>
+export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>
+
+export const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'
+export const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'
+
+const layers = new Set<HTMLElement>()
+const blocking = new Set<HTMLElement>()
+const branches = new Set<HTMLElement>()
+const listeners = new Set<() => void>()
+let originalBodyPointerEvents: string | undefined
+let version = 0
+
+function changed() {
+  version += 1
+  for (const listener of listeners) listener()
+}
+
+export function subscribeLayers(listener: () => void) {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+export function layersVersion() {
+  return version
+}
+
+export function addLayer(element: HTMLElement) {
+  layers.add(element)
+  changed()
+  return () => {
+    if (layers.delete(element)) changed()
+  }
+}
+
+export function addBranch(element: HTMLElement) {
+  branches.add(element)
+  changed()
+  return () => {
+    if (branches.delete(element)) changed()
+  }
+}
+
+export function blockOutsidePointerEvents(element: HTMLElement) {
+  const body = element.ownerDocument.body
+  if (blocking.size === 0) {
+    originalBodyPointerEvents = body.style.pointerEvents
+    body.style.pointerEvents = 'none'
+  }
+  blocking.add(element)
+  changed()
+  return () => {
+    if (!blocking.delete(element)) return
+    if (blocking.size === 0 && originalBodyPointerEvents != null)
+      body.style.pointerEvents = originalBodyPointerEvents
+    changed()
+  }
+}
+
+export function releaseLayer(element: HTMLElement) {
+  const removed = layers.delete(element)
+  const unblocked = blocking.delete(element)
+  if (removed || unblocked) changed()
+}
+
+export function blockingLayerCount() {
+  return blocking.size
+}
+
+export function layerIndex(element: HTMLElement | null | undefined) {
+  return element ? [...layers].indexOf(element) : -1
+}
+
+export function isHighestLayer(element: HTMLElement | null | undefined) {
+  return layerIndex(element) === layers.size - 1
+}
+
+export function bodyPointerEventsDisabled() {
+  return blocking.size > 0
+}
+
+export function pointerEventsEnabled(element: HTMLElement | null | undefined) {
+  const highest = [...blocking].at(-1)
+  return layerIndex(element) >= (highest ? [...layers].indexOf(highest) : -1)
+}
+
+export function layerPointerEvents(element: HTMLElement | null | undefined) {
+  if (!bodyPointerEventsDisabled()) return undefined
+  return pointerEventsEnabled(element) ? 'auto' : 'none'
+}
+
+export function inBranch(target: EventTarget | null) {
+  return [...branches].some(branch => branch.contains(target as Node | null))
+}
+
+export function isLayerExist(layer: HTMLElement, target: EventTarget | null) {
+  if (!(target instanceof Element)) return false
+  const targetLayer = target.closest('[data-dismissable-layer]')
+  const mainLayer =
+    layer.dataset.dismissableLayer === ''
+      ? layer
+      : layer.querySelector<HTMLElement>('[data-dismissable-layer]')
+  const all = Array.from(layer.ownerDocument.querySelectorAll('[data-dismissable-layer]'))
+  return (
+    !!targetLayer &&
+    !!mainLayer &&
+    (mainLayer === targetLayer || all.indexOf(mainLayer) < all.indexOf(targetLayer))
+  )
+}
+
+export function handleAndDispatchCustomEvent<E extends CustomEvent<{ originalEvent: Event }>>(
+  name: string,
+  handler: ((event: E) => void) | undefined,
+  detail: E['detail'],
+) {
+  const target = detail.originalEvent.target as EventTarget
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail })
+  if (handler) target.addEventListener(name, handler as EventListener, { once: true })
+  target.dispatchEvent(event)
+}
+
+export interface OutsideWatcher<E> {
+  element: () => HTMLElement | null | undefined
+  onOutside: (event: E) => void
+}
+
+export function watchPointerDownOutside({
+  element,
+  onOutside,
+}: OutsideWatcher<PointerDownOutsideEvent>) {
+  const ownerDocument = element()?.ownerDocument ?? globalThis.document
+  let inside = false
+  let pendingClick: () => void = () => {}
+
+  const handlePointerDown = (event: PointerEvent) => {
+    const layer = element()
+    const target = event.target as HTMLElement | null
+    if (!layer || !target) return
+    if (isLayerExist(layer, target)) {
+      inside = false
+      return
+    }
+    if (!inside) {
+      const dispatch = () =>
+        handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, onOutside, { originalEvent: event })
+      if (event.pointerType === 'touch') {
+        ownerDocument.removeEventListener('click', pendingClick)
+        pendingClick = dispatch
+        ownerDocument.addEventListener('click', pendingClick, { once: true })
+      } else dispatch()
+    } else ownerDocument.removeEventListener('click', pendingClick)
+    inside = false
+  }
+
+  const timer = window.setTimeout(() => {
+    ownerDocument.addEventListener('pointerdown', handlePointerDown)
+  }, 0)
+
+  return {
+    onPointerDownCapture() {
+      inside = true
+    },
+    stop() {
+      window.clearTimeout(timer)
+      ownerDocument.removeEventListener('pointerdown', handlePointerDown)
+      ownerDocument.removeEventListener('click', pendingClick)
+    },
+  }
+}
+
+export function watchFocusOutside({
+  element,
+  onOutside,
+  settle,
+}: OutsideWatcher<FocusOutsideEvent> & { settle?: () => Promise<void> }) {
+  const ownerDocument = element()?.ownerDocument ?? globalThis.document
+  let inside = false
+
+  const handleFocus = async (event: FocusEvent) => {
+    if (!element()) return
+    if (settle) await settle()
+    const layer = element()
+    const target = event.target as HTMLElement | null
+    if (!layer || !target || isLayerExist(layer, target)) return
+    if (!inside) handleAndDispatchCustomEvent(FOCUS_OUTSIDE, onOutside, { originalEvent: event })
+  }
+
+  ownerDocument.addEventListener('focusin', handleFocus)
+
+  return {
+    onFocusCapture() {
+      inside = true
+    },
+    onBlurCapture() {
+      inside = false
+    },
+    stop() {
+      ownerDocument.removeEventListener('focusin', handleFocus)
+    },
+  }
+}