@central-design-system/components 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/es/src/components/CdsOverlay/composables/useActivator.js

@@ -7,9 +7,15 @@ import { b as bindProps, u as unbindProps } from "../../../utils/dom/bindProps.j
 import { a as IN_BROWSER } from "../../../utils/dom/globals.js";
 import { ref, computed, unref, inject, watch, watchEffect, nextTick, effectScope, onScopeDispose, mergeProps } from "vue";
 const defineActivatorProps = propsFactory({
-  /** Элемент, который будет активировать компонент */
+  /**
+   * Элемент, который будет активировать компонент
+   * @en The element that activates the component
+   */
   activator: [String, Object],
-  /** Свойства для элемента активатора */
+  /**
+   * Свойства для элемента активатора
+   * @en Props for the activator element
+   */
   activatorProps: {
     type: Object,
     default: () => ({})
@@ -17,21 +23,34 @@ const defineActivatorProps = propsFactory({
   /**
    * Если для параметра locationStrategy задано значение «connected», необходимо указать элемент или массив координат x, y, относительно которых должен располагаться оверлей.
    * По умолчанию в качестве такого элемента используется элемент-активатор.
+   * @en When `locationStrategy` is set to "connected", specify the element or the array of x, y coordinates the overlay is positioned against. By default the activator element is used.
    */
   target: [String, Object],
-  /** Показать компонент по клику на активатор */
+  /**
+   * Показать компонент по клику на активатор
+   * @en Show the component on a click on the activator
+   */
   openOnClick: {
     type: Boolean,
     default: void 0
   },
-  /** Показать компонент по наведению на активатор */
+  /**
+   * Показать компонент по наведению на активатор
+   * @en Show the component on hover over the activator
+   */
   openOnHover: Boolean,
-  /** Показать компонент по фокусу на активатор */
+  /**
+   * Показать компонент по фокусу на активатор
+   * @en Show the component when the activator gets focus
+   */
   openOnFocus: {
     type: Boolean,
     default: void 0
   },
-  /** Скрыть компонент по клику на контент */
+  /**
+   * Скрыть компонент по клику на контент
+   * @en Hide the component on a click on the content
+   */
   closeOnContentClick: Boolean,
   ...defineDelayProps()
 }, "activator");

package/dist/es/src/components/CdsOverlay/composables/useActivator.js.map

@@ -1 +1 @@
-{"version":3,"file":"useActivator.js","sources":["../../../../../../src/components/CdsOverlay/composables/useActivator.tsx"],"sourcesContent":["import { CdsMenuSymbol } from '@cds/components/CdsMenu/api/CdsMenu.constants';\nimport { defineDelayProps, useDelay } from '@cds/composables/useDelay';\nimport { getCurrentInstance, propsFactory } from '@cds/core';\nimport { bindProps, IN_BROWSER, matchesSelector, templateRef, unbindProps } from '@cds/utils';\nimport {\n  type ComponentInternalInstance,\n  type ComponentPublicInstance,\n  computed,\n  type EffectScope,\n  effectScope,\n  type ExtractPublicPropTypes,\n  inject,\n  mergeProps,\n  nextTick,\n  onScopeDispose,\n  type PropType,\n  type Ref,\n  ref,\n  unref,\n  watch,\n  watchEffect\n} from 'vue';\n\nexport const defineActivatorProps = propsFactory(\n  {\n    /** Элемент, который будет активировать компонент */\n    activator: [String, Object] as PropType<'parent' | (string & {}) | Element | ComponentPublicInstance | undefined>,\n    /** Свойства для элемента активатора */\n    activatorProps: {\n      type: Object as PropType<Record<string, any>>,\n      default: () => ({})\n    },\n    /**\n     * Если для параметра locationStrategy задано значение «connected», необходимо указать элемент или массив координат x, y, относительно которых должен располагаться оверлей.\n     * По умолчанию в качестве такого элемента используется элемент-активатор.\n     */\n    target: [String, Object] as PropType<\n      'parent' | 'cursor' | (string & {}) | Element | ComponentPublicInstance | [x: number, y: number] | undefined\n    >,\n    /** Показать компонент по клику на активатор */\n    openOnClick: {\n      type: Boolean,\n      default: undefined\n    },\n    /** Показать компонент по наведению на активатор */\n    openOnHover: Boolean,\n    /** Показать компонент по фокусу на активатор */\n    openOnFocus: {\n      type: Boolean,\n      default: undefined\n    },\n    /** Скрыть компонент по клику на контент */\n    closeOnContentClick: Boolean,\n\n    ...defineDelayProps()\n  },\n  'activator'\n);\n\nexport interface ActivatorProps extends ExtractPublicPropTypes<ReturnType<typeof defineActivatorProps>> {}\n\n/**\n * A composable function that sets up activator behavior for elements. It manages events, states, and delays\n * necessary to facilitate interaction with activators and their associated content.\n *\n * @param {ActivatorProps} props - The properties defining the behavior of the activator, such as open and close conditions.\n * @param {Object} context - The reactive context used for managing activator states and elements.\n * @param {Ref<boolean>} context.isActive - Reactive boolean indicating whether the activator is active.\n * @param {Ref<boolean>} context.isTop - Reactive boolean indicating whether the activator is at the highest z-index.\n * @param {Ref<HTMLElement | undefined>} context.contentEl - Reactive reference to the content DOM element associated with the activator.\n * @return {Object} Returns the necessary reactive references, computed values, and event handlers for setting up the activator:\n *         - `activatorEl`: Reactive reference to the activator DOM element.\n *         - `activatorRef`: Template reference for the activator element.\n *         - `target`: Computed reference resolving the target of the activator.\n *         - `targetEl`: Computed reference resolving the target DOM element.\n *         - `targetRef`: Template reference for the target element.\n *         - `activatorEvents`: Computed object containing the event handlers for the activator.\n *         - `contentEvents`: Computed object containing the event handlers for the content associated with the activator.\n *         - `scrimEvents`: Computed object containing the event handlers for any scrim elements related to the activator.\n */\nexport function useActivator(\n  props: ActivatorProps,\n  {\n    isActive,\n    isTop,\n    contentEl\n  }: {\n    isActive: Ref<boolean>;\n    isTop: Ref<boolean>;\n    contentEl: Ref<HTMLElement | undefined>;\n  }\n) {\n  const vm = getCurrentInstance('useActivator');\n  const activatorEl = ref<HTMLElement>();\n\n  let isHovered = false;\n  let isFocused = false;\n  let firstEnter = true;\n\n  const openOnFocus = computed(() => props.openOnFocus || (props.openOnFocus == null && props.openOnHover));\n  const openOnClick = computed(\n    () => props.openOnClick || (props.openOnClick == null && !props.openOnHover && !unref(openOnFocus))\n  );\n\n  const { runOpenDelay, runCloseDelay } = useDelay(props, (value) => {\n    if (\n      value === ((props.openOnHover && isHovered) || (unref(openOnFocus) && isFocused)) &&\n      !(props.openOnHover && unref(isActive) && !unref(isTop))\n    ) {\n      if (unref(isActive) !== value) {\n        firstEnter = true;\n      }\n      isActive.value = value;\n    }\n  });\n\n  const cursorTarget = ref<[x: number, y: number]>();\n\n  const availableEvents = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation();\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement;\n      if (!isActive.value) {\n        cursorTarget.value = [e.clientX, e.clientY];\n      }\n      isActive.value = !isActive.value;\n    },\n    onMouseenter: (e: MouseEvent) => {\n      isHovered = true;\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement;\n      runOpenDelay();\n    },\n    onMouseleave: () => {\n      isHovered = false;\n      runCloseDelay();\n    },\n    onFocus: (e: FocusEvent) => {\n      if (matchesSelector(e.target as HTMLElement, ':focus-visible') === false) return;\n\n      isFocused = true;\n      e.stopPropagation();\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement;\n\n      runOpenDelay();\n    },\n    onBlur: (e: FocusEvent) => {\n      isFocused = false;\n      e.stopPropagation();\n\n      runCloseDelay({ minDelay: 1 });\n    }\n  };\n\n  const activatorEvents = computed(() => {\n    const events: Partial<typeof availableEvents> = {};\n\n    if (openOnClick.value) {\n      events.onClick = availableEvents.onClick;\n    }\n    if (props.openOnHover) {\n      events.onMouseenter = availableEvents.onMouseenter;\n      events.onMouseleave = availableEvents.onMouseleave;\n    }\n    if (openOnFocus.value) {\n      events.onFocus = availableEvents.onFocus;\n      events.onBlur = availableEvents.onBlur;\n    }\n\n    return events;\n  });\n\n  const contentEvents = computed(() => {\n    const events: Record<string, EventListener> = {};\n\n    if (props.openOnHover) {\n      events.onMouseenter = () => {\n        isHovered = true;\n        runOpenDelay();\n      };\n      events.onMouseleave = () => {\n        isHovered = false;\n        runCloseDelay();\n      };\n    }\n\n    if (openOnFocus.value) {\n      events.onFocusin = (e: Event) => {\n        if (!(e.target as HTMLElement).matches(':focus-visible')) return;\n        isFocused = true;\n        runOpenDelay();\n      };\n      events.onFocusout = () => {\n        isFocused = false;\n        runCloseDelay({ minDelay: 1 });\n      };\n    }\n\n    if (props.closeOnContentClick) {\n      const menu = inject(CdsMenuSymbol, null);\n      events.onClick = () => {\n        isActive.value = false;\n        menu?.closeParents();\n      };\n    }\n\n    return events;\n  });\n\n  const scrimEvents = computed(() => {\n    const events: Record<string, EventListener> = {};\n\n    if (props.openOnHover) {\n      events.onMouseenter = () => {\n        if (firstEnter) {\n          isHovered = true;\n          firstEnter = false;\n          runOpenDelay();\n        }\n      };\n      events.onMouseleave = () => {\n        isHovered = false;\n        runCloseDelay();\n      };\n    }\n\n    return events;\n  });\n\n  watch(isTop, (val) => {\n    if (\n      val &&\n      ((props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused)) ||\n        (openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered))) &&\n      !contentEl.value?.contains(document.activeElement)\n    ) {\n      isActive.value = false;\n    }\n  });\n\n  watch(\n    isActive,\n    (val) => {\n      if (!val) {\n        setTimeout(() => {\n          cursorTarget.value = undefined;\n        });\n      }\n    },\n    { flush: 'post' }\n  );\n\n  const activatorRef = templateRef();\n  watchEffect(() => {\n    if (!activatorRef.value) return;\n\n    nextTick(() => {\n      activatorEl.value = activatorRef.el;\n    });\n  });\n\n  const targetRef = templateRef();\n  const target = computed(() => {\n    if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;\n    if (targetRef.value) return targetRef.el;\n    return getTarget(props.target, vm) || activatorEl.value;\n  });\n  const targetEl = computed(() => {\n    return Array.isArray(target.value) ? undefined : target.value;\n  });\n\n  let scope: EffectScope;\n  watch(\n    () => !!props.activator,\n    (val) => {\n      if (val && IN_BROWSER) {\n        scope = effectScope();\n        scope.run(() => {\n          _useActivator(props, vm, { activatorEl, activatorEvents });\n        });\n      } else if (scope) {\n        scope.stop();\n      }\n    },\n    { flush: 'post', immediate: true }\n  );\n\n  onScopeDispose(() => {\n    scope?.stop();\n  });\n\n  return { activatorEl, activatorRef, target, targetEl, targetRef, activatorEvents, contentEvents, scrimEvents };\n}\n\nfunction _useActivator(\n  props: ActivatorProps,\n  vm: ComponentInternalInstance,\n  { activatorEl, activatorEvents }: Pick<ReturnType<typeof useActivator>, 'activatorEl' | 'activatorEvents'>\n) {\n  watch(\n    () => props.activator,\n    (val, oldVal) => {\n      if (oldVal && val !== oldVal) {\n        const activator = getActivator(oldVal);\n        activator && unbindActivatorProps(activator);\n      }\n      if (val) {\n        nextTick(() => bindActivatorProps());\n      }\n    },\n    { immediate: true }\n  );\n\n  watch(\n    () => props.activatorProps,\n    () => {\n      bindActivatorProps();\n    }\n  );\n\n  onScopeDispose(() => {\n    unbindActivatorProps();\n  });\n\n  function bindActivatorProps(el = getActivator(), _props = props.activatorProps) {\n    if (!el) return;\n\n    bindProps(el, mergeProps(activatorEvents.value, _props!));\n  }\n\n  function unbindActivatorProps(el = getActivator(), _props = props.activatorProps) {\n    if (!el) return;\n\n    unbindProps(el, mergeProps(activatorEvents.value, _props!));\n  }\n\n  function getActivator(selector = props.activator): HTMLElement | undefined {\n    const activator = getTarget(selector, vm);\n\n    // The activator should only be a valid element (Ignore comments and text nodes)\n    activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined;\n\n    return activatorEl.value;\n  }\n}\n\nfunction getTarget<\n  T extends 'parent' | string | Element | ComponentPublicInstance | [x: number, y: number] | undefined\n>(\n  selector: T,\n  vm: ComponentInternalInstance\n): HTMLElement | undefined | (T extends any[] ? [x: number, y: number] : never) {\n  if (!selector) return;\n\n  let target;\n  if (selector === 'parent') {\n    let el = vm?.proxy?.$el?.parentNode;\n    while (el?.hasAttribute('data-no-activator')) {\n      el = el.parentNode;\n    }\n    target = el;\n  } else if (typeof selector === 'string') {\n    // Selector\n    target = document.querySelector(selector);\n  } else if ('$el' in selector) {\n    // Component (ref)\n    target = selector.$el;\n  } else {\n    // HTMLElement | Element | [x, y]\n    target = selector;\n  }\n\n  return target;\n}\n"],"names":["defineActivatorProps","propsFactory","activator","String","Object","activatorProps","type","default","target","openOnClick","Boolean","undefined","openOnHover","openOnFocus","closeOnContentClick","defineDelayProps","useActivator","props","isActive","isTop","contentEl","vm","getCurrentInstance","activatorEl","ref","isHovered","isFocused","firstEnter","computed","unref","runOpenDelay","runCloseDelay","useDelay","value","cursorTarget","availableEvents","onClick","e","stopPropagation","currentTarget","clientX","clientY","onMouseenter","onMouseleave","onFocus","matchesSelector","onBlur","minDelay","activatorEvents","events","contentEvents","onFocusin","matches","onFocusout","menu","inject","CdsMenuSymbol","closeParents","scrimEvents","watch","val","contains","document","activeElement","setTimeout","flush","activatorRef","templateRef","watchEffect","nextTick","el","targetRef","getTarget","targetEl","Array","isArray","scope","IN_BROWSER","effectScope","run","_useActivator","stop","immediate","onScopeDispose","oldVal","getActivator","unbindActivatorProps","bindActivatorProps","_props","bindProps","mergeProps","unbindProps","selector","nodeType","Node","ELEMENT_NODE","proxy","$el","parentNode","hasAttribute","querySelector"],"mappings":"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"}
+{"version":3,"file":"useActivator.js","sources":["../../../../../../src/components/CdsOverlay/composables/useActivator.tsx"],"sourcesContent":["import { CdsMenuSymbol } from '@cds/components/CdsMenu/api/CdsMenu.constants';\nimport { defineDelayProps, useDelay } from '@cds/composables/useDelay';\nimport { getCurrentInstance, propsFactory } from '@cds/core';\nimport { bindProps, IN_BROWSER, matchesSelector, templateRef, unbindProps } from '@cds/utils';\nimport {\n  type ComponentInternalInstance,\n  type ComponentPublicInstance,\n  computed,\n  type EffectScope,\n  effectScope,\n  type ExtractPublicPropTypes,\n  inject,\n  mergeProps,\n  nextTick,\n  onScopeDispose,\n  type PropType,\n  type Ref,\n  ref,\n  unref,\n  watch,\n  watchEffect\n} from 'vue';\n\nexport const defineActivatorProps = propsFactory(\n  {\n    /**\n     * Элемент, который будет активировать компонент\n     * @en The element that activates the component\n     */\n    activator: [String, Object] as PropType<'parent' | (string & {}) | Element | ComponentPublicInstance | undefined>,\n    /**\n     * Свойства для элемента активатора\n     * @en Props for the activator element\n     */\n    activatorProps: {\n      type: Object as PropType<Record<string, any>>,\n      default: () => ({})\n    },\n    /**\n     * Если для параметра locationStrategy задано значение «connected», необходимо указать элемент или массив координат x, y, относительно которых должен располагаться оверлей.\n     * По умолчанию в качестве такого элемента используется элемент-активатор.\n     * @en When `locationStrategy` is set to \"connected\", specify the element or the array of x, y coordinates the overlay is positioned against. By default the activator element is used.\n     */\n    target: [String, Object] as PropType<\n      'parent' | 'cursor' | (string & {}) | Element | ComponentPublicInstance | [x: number, y: number] | undefined\n    >,\n    /**\n     * Показать компонент по клику на активатор\n     * @en Show the component on a click on the activator\n     */\n    openOnClick: {\n      type: Boolean,\n      default: undefined\n    },\n    /**\n     * Показать компонент по наведению на активатор\n     * @en Show the component on hover over the activator\n     */\n    openOnHover: Boolean,\n    /**\n     * Показать компонент по фокусу на активатор\n     * @en Show the component when the activator gets focus\n     */\n    openOnFocus: {\n      type: Boolean,\n      default: undefined\n    },\n    /**\n     * Скрыть компонент по клику на контент\n     * @en Hide the component on a click on the content\n     */\n    closeOnContentClick: Boolean,\n\n    ...defineDelayProps()\n  },\n  'activator'\n);\n\nexport interface ActivatorProps extends ExtractPublicPropTypes<ReturnType<typeof defineActivatorProps>> {}\n\n/**\n * A composable function that sets up activator behavior for elements. It manages events, states, and delays\n * necessary to facilitate interaction with activators and their associated content.\n *\n * @param {ActivatorProps} props - The properties defining the behavior of the activator, such as open and close conditions.\n * @param {Object} context - The reactive context used for managing activator states and elements.\n * @param {Ref<boolean>} context.isActive - Reactive boolean indicating whether the activator is active.\n * @param {Ref<boolean>} context.isTop - Reactive boolean indicating whether the activator is at the highest z-index.\n * @param {Ref<HTMLElement | undefined>} context.contentEl - Reactive reference to the content DOM element associated with the activator.\n * @return {Object} Returns the necessary reactive references, computed values, and event handlers for setting up the activator:\n *         - `activatorEl`: Reactive reference to the activator DOM element.\n *         - `activatorRef`: Template reference for the activator element.\n *         - `target`: Computed reference resolving the target of the activator.\n *         - `targetEl`: Computed reference resolving the target DOM element.\n *         - `targetRef`: Template reference for the target element.\n *         - `activatorEvents`: Computed object containing the event handlers for the activator.\n *         - `contentEvents`: Computed object containing the event handlers for the content associated with the activator.\n *         - `scrimEvents`: Computed object containing the event handlers for any scrim elements related to the activator.\n */\nexport function useActivator(\n  props: ActivatorProps,\n  {\n    isActive,\n    isTop,\n    contentEl\n  }: {\n    isActive: Ref<boolean>;\n    isTop: Ref<boolean>;\n    contentEl: Ref<HTMLElement | undefined>;\n  }\n) {\n  const vm = getCurrentInstance('useActivator');\n  const activatorEl = ref<HTMLElement>();\n\n  let isHovered = false;\n  let isFocused = false;\n  let firstEnter = true;\n\n  const openOnFocus = computed(() => props.openOnFocus || (props.openOnFocus == null && props.openOnHover));\n  const openOnClick = computed(\n    () => props.openOnClick || (props.openOnClick == null && !props.openOnHover && !unref(openOnFocus))\n  );\n\n  const { runOpenDelay, runCloseDelay } = useDelay(props, (value) => {\n    if (\n      value === ((props.openOnHover && isHovered) || (unref(openOnFocus) && isFocused)) &&\n      !(props.openOnHover && unref(isActive) && !unref(isTop))\n    ) {\n      if (unref(isActive) !== value) {\n        firstEnter = true;\n      }\n      isActive.value = value;\n    }\n  });\n\n  const cursorTarget = ref<[x: number, y: number]>();\n\n  const availableEvents = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation();\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement;\n      if (!isActive.value) {\n        cursorTarget.value = [e.clientX, e.clientY];\n      }\n      isActive.value = !isActive.value;\n    },\n    onMouseenter: (e: MouseEvent) => {\n      isHovered = true;\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement;\n      runOpenDelay();\n    },\n    onMouseleave: () => {\n      isHovered = false;\n      runCloseDelay();\n    },\n    onFocus: (e: FocusEvent) => {\n      if (matchesSelector(e.target as HTMLElement, ':focus-visible') === false) return;\n\n      isFocused = true;\n      e.stopPropagation();\n      activatorEl.value = (e.currentTarget || e.target) as HTMLElement;\n\n      runOpenDelay();\n    },\n    onBlur: (e: FocusEvent) => {\n      isFocused = false;\n      e.stopPropagation();\n\n      runCloseDelay({ minDelay: 1 });\n    }\n  };\n\n  const activatorEvents = computed(() => {\n    const events: Partial<typeof availableEvents> = {};\n\n    if (openOnClick.value) {\n      events.onClick = availableEvents.onClick;\n    }\n    if (props.openOnHover) {\n      events.onMouseenter = availableEvents.onMouseenter;\n      events.onMouseleave = availableEvents.onMouseleave;\n    }\n    if (openOnFocus.value) {\n      events.onFocus = availableEvents.onFocus;\n      events.onBlur = availableEvents.onBlur;\n    }\n\n    return events;\n  });\n\n  const contentEvents = computed(() => {\n    const events: Record<string, EventListener> = {};\n\n    if (props.openOnHover) {\n      events.onMouseenter = () => {\n        isHovered = true;\n        runOpenDelay();\n      };\n      events.onMouseleave = () => {\n        isHovered = false;\n        runCloseDelay();\n      };\n    }\n\n    if (openOnFocus.value) {\n      events.onFocusin = (e: Event) => {\n        if (!(e.target as HTMLElement).matches(':focus-visible')) return;\n        isFocused = true;\n        runOpenDelay();\n      };\n      events.onFocusout = () => {\n        isFocused = false;\n        runCloseDelay({ minDelay: 1 });\n      };\n    }\n\n    if (props.closeOnContentClick) {\n      const menu = inject(CdsMenuSymbol, null);\n      events.onClick = () => {\n        isActive.value = false;\n        menu?.closeParents();\n      };\n    }\n\n    return events;\n  });\n\n  const scrimEvents = computed(() => {\n    const events: Record<string, EventListener> = {};\n\n    if (props.openOnHover) {\n      events.onMouseenter = () => {\n        if (firstEnter) {\n          isHovered = true;\n          firstEnter = false;\n          runOpenDelay();\n        }\n      };\n      events.onMouseleave = () => {\n        isHovered = false;\n        runCloseDelay();\n      };\n    }\n\n    return events;\n  });\n\n  watch(isTop, (val) => {\n    if (\n      val &&\n      ((props.openOnHover && !isHovered && (!openOnFocus.value || !isFocused)) ||\n        (openOnFocus.value && !isFocused && (!props.openOnHover || !isHovered))) &&\n      !contentEl.value?.contains(document.activeElement)\n    ) {\n      isActive.value = false;\n    }\n  });\n\n  watch(\n    isActive,\n    (val) => {\n      if (!val) {\n        setTimeout(() => {\n          cursorTarget.value = undefined;\n        });\n      }\n    },\n    { flush: 'post' }\n  );\n\n  const activatorRef = templateRef();\n  watchEffect(() => {\n    if (!activatorRef.value) return;\n\n    nextTick(() => {\n      activatorEl.value = activatorRef.el;\n    });\n  });\n\n  const targetRef = templateRef();\n  const target = computed(() => {\n    if (props.target === 'cursor' && cursorTarget.value) return cursorTarget.value;\n    if (targetRef.value) return targetRef.el;\n    return getTarget(props.target, vm) || activatorEl.value;\n  });\n  const targetEl = computed(() => {\n    return Array.isArray(target.value) ? undefined : target.value;\n  });\n\n  let scope: EffectScope;\n  watch(\n    () => !!props.activator,\n    (val) => {\n      if (val && IN_BROWSER) {\n        scope = effectScope();\n        scope.run(() => {\n          _useActivator(props, vm, { activatorEl, activatorEvents });\n        });\n      } else if (scope) {\n        scope.stop();\n      }\n    },\n    { flush: 'post', immediate: true }\n  );\n\n  onScopeDispose(() => {\n    scope?.stop();\n  });\n\n  return { activatorEl, activatorRef, target, targetEl, targetRef, activatorEvents, contentEvents, scrimEvents };\n}\n\nfunction _useActivator(\n  props: ActivatorProps,\n  vm: ComponentInternalInstance,\n  { activatorEl, activatorEvents }: Pick<ReturnType<typeof useActivator>, 'activatorEl' | 'activatorEvents'>\n) {\n  watch(\n    () => props.activator,\n    (val, oldVal) => {\n      if (oldVal && val !== oldVal) {\n        const activator = getActivator(oldVal);\n        activator && unbindActivatorProps(activator);\n      }\n      if (val) {\n        nextTick(() => bindActivatorProps());\n      }\n    },\n    { immediate: true }\n  );\n\n  watch(\n    () => props.activatorProps,\n    () => {\n      bindActivatorProps();\n    }\n  );\n\n  onScopeDispose(() => {\n    unbindActivatorProps();\n  });\n\n  function bindActivatorProps(el = getActivator(), _props = props.activatorProps) {\n    if (!el) return;\n\n    bindProps(el, mergeProps(activatorEvents.value, _props!));\n  }\n\n  function unbindActivatorProps(el = getActivator(), _props = props.activatorProps) {\n    if (!el) return;\n\n    unbindProps(el, mergeProps(activatorEvents.value, _props!));\n  }\n\n  function getActivator(selector = props.activator): HTMLElement | undefined {\n    const activator = getTarget(selector, vm);\n\n    // The activator should only be a valid element (Ignore comments and text nodes)\n    activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined;\n\n    return activatorEl.value;\n  }\n}\n\nfunction getTarget<\n  T extends 'parent' | string | Element | ComponentPublicInstance | [x: number, y: number] | undefined\n>(\n  selector: T,\n  vm: ComponentInternalInstance\n): HTMLElement | undefined | (T extends any[] ? [x: number, y: number] : never) {\n  if (!selector) return;\n\n  let target;\n  if (selector === 'parent') {\n    let el = vm?.proxy?.$el?.parentNode;\n    while (el?.hasAttribute('data-no-activator')) {\n      el = el.parentNode;\n    }\n    target = el;\n  } else if (typeof selector === 'string') {\n    // Selector\n    target = document.querySelector(selector);\n  } else if ('$el' in selector) {\n    // Component (ref)\n    target = selector.$el;\n  } else {\n    // HTMLElement | Element | [x, y]\n    target = selector;\n  }\n\n  return target;\n}\n"],"names":["defineActivatorProps","propsFactory","activator","String","Object","activatorProps","type","default","target","openOnClick","Boolean","undefined","openOnHover","openOnFocus","closeOnContentClick","defineDelayProps","useActivator","props","isActive","isTop","contentEl","vm","getCurrentInstance","activatorEl","ref","isHovered","isFocused","firstEnter","computed","unref","runOpenDelay","runCloseDelay","useDelay","value","cursorTarget","availableEvents","onClick","e","stopPropagation","currentTarget","clientX","clientY","onMouseenter","onMouseleave","onFocus","matchesSelector","onBlur","minDelay","activatorEvents","events","contentEvents","onFocusin","matches","onFocusout","menu","inject","CdsMenuSymbol","closeParents","scrimEvents","watch","val","contains","document","activeElement","setTimeout","flush","activatorRef","templateRef","watchEffect","nextTick","el","targetRef","getTarget","targetEl","Array","isArray","scope","IN_BROWSER","effectScope","run","_useActivator","stop","immediate","onScopeDispose","oldVal","getActivator","unbindActivatorProps","bindActivatorProps","_props","bindProps","mergeProps","unbindProps","selector","nodeType","Node","ELEMENT_NODE","proxy","$el","parentNode","hasAttribute","querySelector"],"mappings":";;;;;;;;AAuBO,MAAMA,uBAAuBC,aAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKEC,WAAW,CAACC,QAAQC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAK1BC,gBAAgB;AAAA,IACdC,MAAMF;AAAAA,IACNG,SAASA,OAAO,CAAA;AAAA;;;;;;EAOlBC,QAAQ,CAACL,QAAQC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvBK,aAAa;AAAA,IACXH,MAAMI;AAAAA,IACNH,SAASI;AAAAA;;;;;EAMXC,aAAaF;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKbG,aAAa;AAAA,IACXP,MAAMI;AAAAA,IACNH,SAASI;AAAAA;;;;;EAMXG,qBAAqBJ;AAAAA,EAErB,GAAGK,iBAAgB;AACrB,GACA,WACF;AAuBO,SAASC,aACdC,OACA;AAAA,EACEC;AAAAA,EACAC;AAAAA,EACAC;AAKF,GACA;AACA,QAAMC,KAAKC,mBAAmB,cAAc;AAC5C,QAAMC,cAAcC,IAAG;AAEvB,MAAIC,YAAY;AAChB,MAAIC,YAAY;AAChB,MAAIC,aAAa;AAEjB,QAAMd,cAAce,SAAS,MAAMX,MAAMJ,eAAgBI,MAAMJ,eAAe,QAAQI,MAAML,WAAY;AACxG,QAAMH,cAAcmB,SAClB,MAAMX,MAAMR,eAAgBQ,MAAMR,eAAe,QAAQ,CAACQ,MAAML,eAAe,CAACiB,MAAMhB,WAAW,CACnG;AAEA,QAAM;AAAA,IAAEiB;AAAAA,IAAcC;AAAAA,EAAc,IAAIC,SAASf,OAAQgB,WAAU;AACjE,QACEA,WAAYhB,MAAML,eAAea,aAAeI,MAAMhB,WAAW,KAAKa,cACtE,EAAET,MAAML,eAAeiB,MAAMX,QAAQ,KAAK,CAACW,MAAMV,KAAK,IACtD;AACA,UAAIU,MAAMX,QAAQ,MAAMe,OAAO;AAC7BN,qBAAa;AAAA,MACf;AACAT,eAASe,QAAQA;AAAAA,IACnB;AAAA,EACF,CAAC;AAED,QAAMC,eAAeV,IAAG;AAExB,QAAMW,kBAAkB;AAAA,IACtBC,SAAUC,OAAkB;AAC1BA,QAAEC,gBAAe;AACjBf,kBAAYU,QAASI,EAAEE,iBAAiBF,EAAE7B;AAC1C,UAAI,CAACU,SAASe,OAAO;AACnBC,qBAAaD,QAAQ,CAACI,EAAEG,SAASH,EAAEI,OAAO;AAAA,MAC5C;AACAvB,eAASe,QAAQ,CAACf,SAASe;AAAAA,IAC7B;AAAA,IACAS,cAAeL,OAAkB;AAC/BZ,kBAAY;AACZF,kBAAYU,QAASI,EAAEE,iBAAiBF,EAAE7B;AAC1CsB,mBAAY;AAAA,IACd;AAAA,IACAa,cAAcA,MAAM;AAClBlB,kBAAY;AACZM,oBAAa;AAAA,IACf;AAAA,IACAa,SAAUP,OAAkB;AAC1B,UAAIQ,gBAAgBR,EAAE7B,QAAuB,gBAAgB,MAAM,MAAO;AAE1EkB,kBAAY;AACZW,QAAEC,gBAAe;AACjBf,kBAAYU,QAASI,EAAEE,iBAAiBF,EAAE7B;AAE1CsB,mBAAY;AAAA,IACd;AAAA,IACAgB,QAAST,OAAkB;AACzBX,kBAAY;AACZW,QAAEC,gBAAe;AAEjBP,oBAAc;AAAA,QAAEgB,UAAU;AAAA,MAAE,CAAC;AAAA,IAC/B;AAAA;AAGF,QAAMC,kBAAkBpB,SAAS,MAAM;AACrC,UAAMqB,SAA0C,CAAA;AAEhD,QAAIxC,YAAYwB,OAAO;AACrBgB,aAAOb,UAAUD,gBAAgBC;AAAAA,IACnC;AACA,QAAInB,MAAML,aAAa;AACrBqC,aAAOP,eAAeP,gBAAgBO;AACtCO,aAAON,eAAeR,gBAAgBQ;AAAAA,IACxC;AACA,QAAI9B,YAAYoB,OAAO;AACrBgB,aAAOL,UAAUT,gBAAgBS;AACjCK,aAAOH,SAASX,gBAAgBW;AAAAA,IAClC;AAEA,WAAOG;AAAAA,EACT,CAAC;AAED,QAAMC,gBAAgBtB,SAAS,MAAM;AACnC,UAAMqB,SAAwC,CAAA;AAE9C,QAAIhC,MAAML,aAAa;AACrBqC,aAAOP,eAAe,MAAM;AAC1BjB,oBAAY;AACZK,qBAAY;AAAA,MACd;AACAmB,aAAON,eAAe,MAAM;AAC1BlB,oBAAY;AACZM,sBAAa;AAAA,MACf;AAAA,IACF;AAEA,QAAIlB,YAAYoB,OAAO;AACrBgB,aAAOE,YAAad,OAAa;AAC/B,YAAI,CAAEA,EAAE7B,OAAuB4C,QAAQ,gBAAgB,EAAG;AAC1D1B,oBAAY;AACZI,qBAAY;AAAA,MACd;AACAmB,aAAOI,aAAa,MAAM;AACxB3B,oBAAY;AACZK,sBAAc;AAAA,UAAEgB,UAAU;AAAA,QAAE,CAAC;AAAA,MAC/B;AAAA,IACF;AAEA,QAAI9B,MAAMH,qBAAqB;AAC7B,YAAMwC,OAAOC,OAAOC,eAAe,IAAI;AACvCP,aAAOb,UAAU,MAAM;AACrBlB,iBAASe,QAAQ;AACjBqB,qCAAMG;AAAAA,MACR;AAAA,IACF;AAEA,WAAOR;AAAAA,EACT,CAAC;AAED,QAAMS,cAAc9B,SAAS,MAAM;AACjC,UAAMqB,SAAwC,CAAA;AAE9C,QAAIhC,MAAML,aAAa;AACrBqC,aAAOP,eAAe,MAAM;AAC1B,YAAIf,YAAY;AACdF,sBAAY;AACZE,uBAAa;AACbG,uBAAY;AAAA,QACd;AAAA,MACF;AACAmB,aAAON,eAAe,MAAM;AAC1BlB,oBAAY;AACZM,sBAAa;AAAA,MACf;AAAA,IACF;AAEA,WAAOkB;AAAAA,EACT,CAAC;AAEDU,QAAMxC,OAAQyC,SAAQ;;AACpB,QACEA,QACE3C,MAAML,eAAe,CAACa,cAAc,CAACZ,YAAYoB,SAAS,CAACP,cAC1Db,YAAYoB,SAAS,CAACP,cAAc,CAACT,MAAML,eAAe,CAACa,eAC9D,GAACL,eAAUa,UAAVb,mBAAiByC,SAASC,SAASC,iBACpC;AACA7C,eAASe,QAAQ;AAAA,IACnB;AAAA,EACF,CAAC;AAED0B,QACEzC,UACC0C,SAAQ;AACP,QAAI,CAACA,KAAK;AACRI,iBAAW,MAAM;AACf9B,qBAAaD,QAAQtB;AAAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF,GACA;AAAA,IAAEsD,OAAO;AAAA,EAAO,CAClB;AAEA,QAAMC,eAAeC,YAAW;AAChCC,cAAY,MAAM;AAChB,QAAI,CAACF,aAAajC,MAAO;AAEzBoC,aAAS,MAAM;AACb9C,kBAAYU,QAAQiC,aAAaI;AAAAA,IACnC,CAAC;AAAA,EACH,CAAC;AAED,QAAMC,YAAYJ,YAAW;AAC7B,QAAM3D,SAASoB,SAAS,MAAM;AAC5B,QAAIX,MAAMT,WAAW,YAAY0B,aAAaD,MAAO,QAAOC,aAAaD;AACzE,QAAIsC,UAAUtC,MAAO,QAAOsC,UAAUD;AACtC,WAAOE,UAAUvD,MAAMT,QAAQa,EAAE,KAAKE,YAAYU;AAAAA,EACpD,CAAC;AACD,QAAMwC,WAAW7C,SAAS,MAAM;AAC9B,WAAO8C,MAAMC,QAAQnE,OAAOyB,KAAK,IAAItB,SAAYH,OAAOyB;AAAAA,EAC1D,CAAC;AAED,MAAI2C;AACJjB,QACE,MAAM,CAAC,CAAC1C,MAAMf,WACb0D,SAAQ;AACP,QAAIA,OAAOiB,YAAY;AACrBD,cAAQE,YAAW;AACnBF,YAAMG,IAAI,MAAM;AACdC,sBAAc/D,OAAOI,IAAI;AAAA,UAAEE;AAAAA,UAAayB;AAAAA,QAAgB,CAAC;AAAA,MAC3D,CAAC;AAAA,IACH,WAAW4B,OAAO;AAChBA,YAAMK,KAAI;AAAA,IACZ;AAAA,EACF,GACA;AAAA,IAAEhB,OAAO;AAAA,IAAQiB,WAAW;AAAA,EAAK,CACnC;AAEAC,iBAAe,MAAM;AACnBP,mCAAOK;AAAAA,EACT,CAAC;AAED,SAAO;AAAA,IAAE1D;AAAAA,IAAa2C;AAAAA,IAAc1D;AAAAA,IAAQiE;AAAAA,IAAUF;AAAAA,IAAWvB;AAAAA,IAAiBE;AAAAA,IAAeQ;AAAAA;AACnG;AAEA,SAASsB,cACP/D,OACAI,IACA;AAAA,EAAEE;AAAAA,EAAayB;AAA0F,GACzG;AACAW,QACE,MAAM1C,MAAMf,WACZ,CAAC0D,KAAKwB,WAAW;AACf,QAAIA,UAAUxB,QAAQwB,QAAQ;AAC5B,YAAMlF,YAAYmF,aAAaD,MAAM;AACrClF,mBAAaoF,qBAAqBpF,SAAS;AAAA,IAC7C;AACA,QAAI0D,KAAK;AACPS,eAAS,MAAMkB,oBAAoB;AAAA,IACrC;AAAA,EACF,GACA;AAAA,IAAEL,WAAW;AAAA,EAAK,CACpB;AAEAvB,QACE,MAAM1C,MAAMZ,gBACZ,MAAM;AACJkF,uBAAkB;AAAA,EACpB,CACF;AAEAJ,iBAAe,MAAM;AACnBG,yBAAoB;AAAA,EACtB,CAAC;AAED,WAASC,mBAAmBjB,KAAKe,aAAY,GAAIG,SAASvE,MAAMZ,gBAAgB;AAC9E,QAAI,CAACiE,GAAI;AAETmB,cAAUnB,IAAIoB,WAAW1C,gBAAgBf,OAAOuD,MAAO,CAAC;AAAA,EAC1D;AAEA,WAASF,qBAAqBhB,KAAKe,aAAY,GAAIG,SAASvE,MAAMZ,gBAAgB;AAChF,QAAI,CAACiE,GAAI;AAETqB,gBAAYrB,IAAIoB,WAAW1C,gBAAgBf,OAAOuD,MAAO,CAAC;AAAA,EAC5D;AAEA,WAASH,aAAaO,WAAW3E,MAAMf,WAAoC;AACzE,UAAMA,YAAYsE,UAAUoB,UAAUvE,EAAE;AAGxCE,gBAAYU,SAAQ/B,uCAAW2F,cAAaC,KAAKC,eAAe7F,YAAYS;AAE5E,WAAOY,YAAYU;AAAAA,EACrB;AACF;AAEA,SAASuC,UAGPoB,UACAvE,IAC8E;;AAC9E,MAAI,CAACuE,SAAU;AAEf,MAAIpF;AACJ,MAAIoF,aAAa,UAAU;AACzB,QAAItB,MAAKjD,oCAAI2E,UAAJ3E,mBAAW4E,QAAX5E,mBAAgB6E;AACzB,WAAO5B,yBAAI6B,aAAa,sBAAsB;AAC5C7B,WAAKA,GAAG4B;AAAAA,IACV;AACA1F,aAAS8D;AAAAA,EACX,WAAW,OAAOsB,aAAa,UAAU;AAEvCpF,aAASsD,SAASsC,cAAcR,QAAQ;AAAA,EAC1C,WAAW,SAASA,UAAU;AAE5BpF,aAASoF,SAASK;AAAAA,EACpB,OAAO;AAELzF,aAASoF;AAAAA,EACX;AAEA,SAAOpF;AACT;"}

package/dist/es/src/components/CdsOverlay/composables/useLocationStrategies.js

@@ -20,13 +20,17 @@ const defineLocationStrategiesProps = propsFactory(
     /**
      * Определяет способ позиционирования содержимого оверлея. По умолчанию используется значение static, при котором содержимое центрируется в контейнере.
      * Используйте connected для привязки к элементу-активатору.
+     * @en Sets the way the overlay content is positioned. By default static is used, which centers the content in its container. Use connected to attach the content to the activator element.
      */
     locationStrategy: {
       type: [String, Function],
       default: "static",
       validator: (val) => typeof val === "function" || val in locationStrategies
     },
-    /** Указывает точку привязки для позиционирования компонента с использованием ориентиров для выравнивания по горизонтали, по вертикали или по обоим направлениям */
+    /**
+     * Указывает точку привязки для позиционирования компонента с использованием ориентиров для выравнивания по горизонтали, по вертикали или по обоим направлениям
+     * @en Sets the anchor point used to position the component, aligning it horizontally, vertically or in both directions
+     */
     location: {
       type: String,
       default: "bottom"
@@ -36,16 +40,26 @@ const defineLocationStrategiesProps = propsFactory(
      * При значении «auto» используется противоположная сторона точки «location».
      * При значении «overlap» используется та же точка привязки, в результате чего наложение перекрывает объект-цель.
      * Также задает значение CSS-свойства `transform-origin` для transitions enter/leave.
+     * @en Sets the anchor point of the overlay content that is aligned with the `location` anchor of the target. With "auto" the opposite side of the `location` point is used. With "overlap" the same anchor point is used, so the overlay overlaps the target. It also sets the CSS `transform-origin` property for the enter/leave transitions.
      */
     origin: {
       type: String,
       default: "auto"
     },
-    /** Увеличивает расстояние до цели. Если передать два числа, второе значение смещает анкер вбок и в сторону от цели. */
+    /**
+     * Увеличивает расстояние до цели. Если передать два числа, второе значение смещает анкер вбок и в сторону от цели.
+     * @en Increases the distance to the target. If two numbers are passed, the second one shifts the anchor sideways, away from the target.
+     */
     offset: [Number, String, Array],
-    /** Позволяет контенту наложения выходить за пределы экрана при прокрутке. */
+    /**
+     * Позволяет контенту наложения выходить за пределы экрана при прокрутке.
+     * @en Lets the overlay content go off screen while scrolling.
+     */
     stickToTarget: Boolean,
-    /** Устанавливает пользовательские viewport margin для содержимого наложения */
+    /**
+     * Устанавливает пользовательские viewport margin для содержимого наложения
+     * @en Sets a custom viewport margin for the overlay content
+     */
     viewportMargin: {
       type: [Number, String],
       default: 12

package/dist/es/src/components/CdsOverlay/composables/useLocationStrategies.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLocationStrategies.js","sources":["../../../../../../src/components/CdsOverlay/composables/useLocationStrategies.ts"],"sourcesContent":["import { anchorToPoint, getOffset } from '@cds/components/CdsOverlay/utils/point';\nimport { propsFactory, useToggleScope } from '@cds/core';\nimport {\n  type Anchor,\n  Box,\n  CircularBuffer,\n  clamp,\n  convertToUnit,\n  deepEqual,\n  destructComputed,\n  error,\n  flipAlign,\n  flipCorner,\n  flipSide,\n  getAxis,\n  getElementBox,\n  getOverflow,\n  getScrollParents,\n  getTargetBox,\n  IN_BROWSER,\n  isFixedPosition,\n  nullifyTransforms,\n  parseAnchor\n} from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  nextTick,\n  onScopeDispose,\n  type PropType,\n  type Ref,\n  ref,\n  unref,\n  watch\n} from 'vue';\n\nexport interface LocationStrategyData {\n  contentEl: Ref<HTMLElement | undefined>;\n  target: Ref<HTMLElement | [x: number, y: number] | undefined>;\n  isActive: Ref<boolean>;\n  isRtl: Ref<boolean>;\n}\n\nexport type LocationStrategyFunction = (\n  data: LocationStrategyData,\n  props: StrategyProps,\n  contentStyles: Ref<Record<string, string>>\n) => undefined | { updateLocation: (e?: Event) => void };\n\nconst locationStrategies = {\n  static: staticLocationStrategy, // specific viewport position, usually centered\n  connected: connectedLocationStrategy // connected to a certain element\n};\n\n/**\n * Configuration for defining location strategies properties.\n * This object contains properties related to the positioning and behavior of elements\n * in relation to their specified target or viewport.\n *\n * Properties:\n *\n * @property {string|Function} locationStrategy\n *   Defines the strategy for positioning the element.\n *   Can be either a predefined key from `locationStrategies` or a custom function.\n *   Default is `'static'`.\n *   Validates whether the value is a function or a key defined in `locationStrategies`.\n *\n * @property {string} location\n *   Specifies the primary location or alignment of the element in relation to its anchor.\n *   Default is `'bottom'`.\n *\n * @property {string} origin\n *   Determines the transformation origin for the placement of the element.\n *   Can be one of the predefined anchors, `'auto'`, or `'overlap'`.\n *   Default is `'auto'`.\n *\n * @property {number|string|Array} offset\n *   Specifies the offset adjustments for the element's placement.\n *   Can be a number, string, or an array of numbers.\n *\n * @property {boolean} stickToTarget\n *   Indicates whether the element should stay attached to its target.\n *\n * @property {number|string} viewportMargin\n *   Determines the margin spacing from the viewport to prevent clipping.\n *   Default is `12`.\n */\nexport const defineLocationStrategiesProps = propsFactory(\n  {\n    /**\n     * Определяет способ позиционирования содержимого оверлея. По умолчанию используется значение static, при котором содержимое центрируется в контейнере.\n     * Используйте connected для привязки к элементу-активатору.\n     */\n    locationStrategy: {\n      type: [String, Function] as PropType<keyof typeof locationStrategies | LocationStrategyFunction>,\n      default: 'static',\n      validator: (val: any) => typeof val === 'function' || val in locationStrategies\n    },\n    /** Указывает точку привязки для позиционирования компонента с использованием ориентиров для выравнивания по горизонтали, по вертикали или по обоим направлениям */\n    location: {\n      type: String as PropType<Anchor>,\n      default: 'bottom'\n    },\n    /**\n     * Устанавливает точку привязки для содержимого наложения, которая выравнивается по точке привязки «location» на объекте-цели.\n     * При значении «auto» используется противоположная сторона точки «location».\n     * При значении «overlap» используется та же точка привязки, в результате чего наложение перекрывает объект-цель.\n     * Также задает значение CSS-свойства `transform-origin` для transitions enter/leave.\n     */\n    origin: {\n      type: String as PropType<Anchor | 'auto' | 'overlap'>,\n      default: 'auto'\n    },\n    /** Увеличивает расстояние до цели. Если передать два числа, второе значение смещает анкер вбок и в сторону от цели. */\n    offset: [Number, String, Array] as PropType<number | string | number[]>,\n    /** Позволяет контенту наложения выходить за пределы экрана при прокрутке. */\n    stickToTarget: Boolean,\n    /** Устанавливает пользовательские viewport margin для содержимого наложения */\n    viewportMargin: {\n      type: [Number, String],\n      default: 12\n    }\n  },\n  'locationStrategies'\n);\n\ninterface StrategyProps extends ExtractPublicPropTypes<ReturnType<typeof defineLocationStrategiesProps>> {\n  maxHeight?: number | string;\n  maxWidth?: number | string;\n  minHeight?: number | string;\n  minWidth?: number | string;\n}\n\n/**\n * Manages and applies location strategies based on the provided properties and data.\n * This function dynamically handles event listeners and updates styles or positions\n * based on the selected location strategy.\n *\n * @param {StrategyProps} props - The properties object containing configuration for the location strategy. Includes details such as the type of strategy to use.\n * @param {LocationStrategyData} data - The reactive data object used to determine and update the active state and positional information of elements.\n * @return {Object} An object containing:\n *                  - `contentStyles` (Ref<Object>): A reactive reference to the computed styles for the content.\n *                  - `updateLocation` (Ref<function|undefined>): A reactive reference to the update function for the location,\n *                    or `undefined` if no location strategy is active.\n */\nexport function useLocationStrategies(props: StrategyProps, data: LocationStrategyData) {\n  const contentStyles = ref({});\n  const updateLocation = ref<(e: Event) => void>();\n\n  if (IN_BROWSER) {\n    useToggleScope(\n      () => !!(data.isActive.value && props.locationStrategy),\n      (reset) => {\n        watch(() => props.locationStrategy, reset);\n        onScopeDispose(() => {\n          window.removeEventListener('resize', onResize);\n          visualViewport?.removeEventListener('resize', onVisualResize);\n          visualViewport?.removeEventListener('scroll', onVisualScroll);\n          updateLocation.value = undefined;\n        });\n\n        window.addEventListener('resize', onResize, { passive: true });\n        visualViewport?.addEventListener('resize', onVisualResize, { passive: true });\n        visualViewport?.addEventListener('scroll', onVisualScroll, { passive: true });\n\n        if (typeof props.locationStrategy === 'function') {\n          updateLocation.value = props.locationStrategy(data, props, contentStyles)?.updateLocation;\n        } else {\n          updateLocation.value = locationStrategies[props.locationStrategy!](\n            data,\n            props,\n            contentStyles\n          )?.updateLocation;\n        }\n      }\n    );\n  }\n\n  function onResize(event: Event) {\n    unref(updateLocation)?.(event);\n  }\n\n  function onVisualResize(event: Event) {\n    unref(updateLocation)?.(event);\n  }\n\n  function onVisualScroll(event: Event) {\n    unref(updateLocation)?.(event);\n  }\n\n  return {\n    contentStyles,\n    updateLocation\n  };\n}\n\n/**\n * Defines a static location strategy and manages the target position and styles for a connected element.\n *\n * @param {LocationStrategyData} data - Provides data related to the positioning strategy, such as orientation and RTL settings.\n * @param {StrategyProps} props - Defines properties for the strategy, including location and origin settings.\n * @param {Ref<Record<string, string>>} contentStyles - A reactive reference that holds the styles to be applied to the connected element.\n *\n * @return {Object} An object containing the `updateLocation` method which recalculates the position and updates styles for the target element.\n */\nfunction staticLocationStrategy(\n  data: LocationStrategyData,\n  props: StrategyProps,\n  contentStyles: Ref<Record<string, string>>\n) {\n  const target = ref<[x: number, y: number]>();\n  const connectedStyles = ref<Record<string, string>>({});\n  const connected = connectedLocationStrategy({ ...data, target }, { ...props, origin: 'auto' }, connectedStyles);\n\n  function updateStyles() {\n    if (props.origin !== 'auto' && props.origin !== 'overlap') {\n      const { side, align } = parseAnchor(props.origin!, unref(data.isRtl));\n      contentStyles.value = { ...unref(connectedStyles), transformOrigin: `${side} ${align}` };\n    } else {\n      contentStyles.value = unref(connectedStyles);\n    }\n  }\n\n  watch(connectedStyles, updateStyles, { deep: true });\n  watch([() => props.origin, data.isRtl], updateStyles);\n\n  function updateTarget() {\n    const viewportBox = new Box({\n      x: visualViewport?.offsetLeft ?? 0,\n      y: visualViewport?.offsetTop ?? 0,\n      width: visualViewport?.width ?? window.innerWidth,\n      height: visualViewport?.height ?? window.innerHeight\n    });\n\n    const point = anchorToPoint(parseAnchor(props.location!, unref(data.isRtl)), viewportBox);\n    target.value = [point.x, point.y];\n  }\n\n  function updateLocation() {\n    updateTarget();\n    connected.updateLocation();\n  }\n\n  watch(\n    () => [props.location, unref(data.isRtl)],\n    () => {\n      updateLocation();\n    }\n  );\n\n  nextTick(() => {\n    updateLocation();\n  });\n\n  return { updateLocation };\n}\n\n/**\n * Adjusts the position and placement of a target element in relation to a connected content element\n * based on specified location and origin strategies, ensuring adaptability to viewport constraints\n * and user-defined offsets.\n *\n * @param {LocationStrategyData} data - Reactive data object containing target and content element references,\n *                                       and other positioning metadata.\n * @param {StrategyProps} props - Properties defining the positioning preferences such as location, origin, offset,\n *                                and viewport margin.\n * @param {Ref<Record<string, string>>} contentStyles - Reference to a reactive object holding dynamic styling properties\n *                                                      for the content element's positioning.\n * @return {void} No return value. This function manages side-effects related to positioning and performs updates\n *                on DOM elements and reactive objects to achieve the desired layout behavior.\n */\nfunction connectedLocationStrategy(\n  data: LocationStrategyData,\n  props: StrategyProps,\n  contentStyles: Ref<Record<string, string>>\n) {\n  const activatorFixed = Array.isArray(data.target.value) || isFixedPosition(data.target.value);\n  if (activatorFixed) {\n    Object.assign(unref(contentStyles), {\n      position: 'fixed',\n      top: 0,\n      [unref(data.isRtl) ? 'right' : 'left']: 0\n    });\n  }\n\n  const { preferredAnchor, preferredOrigin } = destructComputed(() => {\n    const parsedAnchor = parseAnchor(props.location!, unref(data.isRtl));\n    const parsedOrigin =\n      props.origin === 'overlap'\n        ? parsedAnchor\n        : props.origin === 'auto'\n          ? flipSide(parsedAnchor)\n          : parseAnchor(props.origin!, unref(data.isRtl));\n\n    // Some combinations of props may produce an invalid origin\n    if (parsedAnchor.side === parsedOrigin.side && parsedAnchor.align === flipAlign(parsedOrigin).align) {\n      return {\n        preferredAnchor: flipCorner(parsedAnchor),\n        preferredOrigin: flipCorner(parsedOrigin)\n      };\n    } else {\n      return {\n        preferredAnchor: parsedAnchor,\n        preferredOrigin: parsedOrigin\n      };\n    }\n  });\n\n  const [minWidth, minHeight, maxWidth, maxHeight] = (['minWidth', 'minHeight', 'maxWidth', 'maxHeight'] as const).map(\n    (key) => {\n      return computed(() => {\n        const val = parseFloat(props[key]!);\n        return isNaN(val) ? Infinity : val;\n      });\n    }\n  );\n\n  const offset = computed(() => {\n    if (Array.isArray(props.offset)) {\n      return props.offset;\n    }\n    if (typeof props.offset === 'string') {\n      const offset = props.offset.split(' ').map(parseFloat);\n      if (offset.length < 2) offset.push(0);\n      return offset;\n    }\n    return typeof props.offset === 'number' ? [props.offset, 0] : [0, 0];\n  });\n\n  let observe = false;\n  let lastFrame = -1;\n  const flipped = new CircularBuffer<{ x: boolean; y: boolean }>(4);\n\n  const observer = new ResizeObserver(() => {\n    if (!observe) return;\n\n    // Detect consecutive frames\n    requestAnimationFrame((newTime) => {\n      if (newTime !== lastFrame) flipped.clear();\n      requestAnimationFrame((newNewTime) => {\n        lastFrame = newNewTime;\n      });\n    });\n\n    if (flipped.isFull) {\n      const values = flipped.values();\n      if (deepEqual(values.at(-1), values.at(-3)) && !deepEqual(values.at(-1), values.at(-2))) {\n        // Flipping is causing a container resize loop\n        return;\n      }\n    }\n\n    const result = updateLocation();\n    if (result) flipped.push(result.flipped);\n  });\n\n  let targetBox = new Box({ x: 0, y: 0, width: 0, height: 0 });\n\n  watch(\n    data.target,\n    (newTarget, oldTarget) => {\n      if (oldTarget && !Array.isArray(oldTarget)) observer.unobserve(oldTarget);\n      if (!Array.isArray(newTarget)) {\n        if (newTarget) observer.observe(newTarget);\n      } else if (!deepEqual(newTarget, oldTarget)) {\n        updateLocation();\n      }\n    },\n    { immediate: true }\n  );\n\n  watch(\n    data.contentEl,\n    (newContentEl, oldContentEl) => {\n      if (oldContentEl) observer.unobserve(oldContentEl);\n      if (newContentEl) observer.observe(newContentEl);\n    },\n    { immediate: true }\n  );\n\n  onScopeDispose(() => {\n    observer.disconnect();\n  });\n\n  function updateLocation() {\n    observe = false;\n    requestAnimationFrame(() => (observe = true));\n\n    if (!data.target.value || !data.contentEl.value) return;\n\n    if (\n      Array.isArray(data.target.value) ||\n      data.target.value.offsetParent ||\n      data.target.value.getClientRects().length\n    ) {\n      targetBox = getTargetBox(data.target.value);\n    }\n\n    const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);\n    const scrollParents = getScrollParents(data.contentEl.value);\n    const viewportMargin = Number(props.viewportMargin);\n\n    if (!scrollParents.length) {\n      scrollParents.push(document.documentElement);\n      if (!(data.contentEl.value.style.top && data.contentEl.value.style.left)) {\n        contentBox.x -= parseFloat(document.documentElement.style.getPropertyValue('--cds-body-scroll-x') || 0);\n        contentBox.y -= parseFloat(document.documentElement.style.getPropertyValue('--cds-body-scroll-y') || 0);\n      }\n    }\n\n    const viewport = scrollParents.reduce<Box>((box: Box | undefined, el) => {\n      const scrollBox = getElementBox(el);\n\n      if (box) {\n        return new Box({\n          x: Math.max(box.left, scrollBox.left),\n          y: Math.max(box.top, scrollBox.top),\n          width: Math.min(box.right, scrollBox.right) - Math.max(box.left, scrollBox.left),\n          height: Math.min(box.bottom, scrollBox.bottom) - Math.max(box.top, scrollBox.top)\n        });\n      }\n      return scrollBox;\n    }, undefined!);\n\n    if (props.stickToTarget) {\n      viewport.x += Math.min(viewportMargin, targetBox.x);\n      viewport.y += Math.min(viewportMargin, targetBox.y);\n      viewport.width = Math.max(viewport.width - viewportMargin * 2, targetBox.x + targetBox.width - viewportMargin);\n      viewport.height = Math.max(viewport.height - viewportMargin * 2, targetBox.y + targetBox.height - viewportMargin);\n    } else {\n      viewport.x += viewportMargin;\n      viewport.y += viewportMargin;\n      viewport.width -= viewportMargin * 2;\n      viewport.height -= viewportMargin * 2;\n    }\n\n    let placement = {\n      anchor: preferredAnchor.value,\n      origin: preferredOrigin.value\n    };\n\n    function checkOverflow(_placement: typeof placement) {\n      const box = new Box(contentBox);\n      const targetPoint = anchorToPoint(_placement.anchor, targetBox);\n      const contentPoint = anchorToPoint(_placement.origin, box);\n\n      let { x, y } = getOffset(targetPoint, contentPoint);\n\n      switch (_placement.anchor.side) {\n        case 'top':\n          y -= offset.value[0];\n          break;\n        case 'bottom':\n          y += offset.value[0];\n          break;\n        case 'left':\n          x -= offset.value[0];\n          break;\n        case 'right':\n          x += offset.value[0];\n          break;\n      }\n\n      switch (_placement.anchor.align) {\n        case 'top':\n          y -= offset.value[1];\n          break;\n        case 'bottom':\n          y += offset.value[1];\n          break;\n        case 'left':\n          x -= offset.value[1];\n          break;\n        case 'right':\n          x += offset.value[1];\n          break;\n      }\n\n      box.x += x;\n      box.y += y;\n\n      box.width = Math.min(box.width, maxWidth.value);\n      box.height = Math.min(box.height, maxHeight.value);\n\n      const overflows = getOverflow(box, viewport);\n\n      return { overflows, x, y };\n    }\n\n    let x = 0;\n    let y = 0;\n    const available = { x: 0, y: 0 };\n    const flipped = { x: false, y: false };\n    let resets = -1;\n\n    while (true) {\n      if (resets++ > 10) {\n        error('Infinite loop detected in connectedLocationStrategy');\n        break;\n      }\n\n      const { x: _x, y: _y, overflows } = checkOverflow(placement);\n\n      x += _x;\n      y += _y;\n\n      contentBox.x += _x;\n      contentBox.y += _y;\n\n      // flip\n      {\n        const axis = getAxis(placement.anchor);\n        const hasOverflowX = overflows.x.before || overflows.x.after;\n        const hasOverflowY = overflows.y.before || overflows.y.after;\n\n        let reset = false;\n        ['x', 'y'].forEach((key) => {\n          if ((key === 'x' && hasOverflowX && !flipped.x) || (key === 'y' && hasOverflowY && !flipped.y)) {\n            const newPlacement = { anchor: { ...placement.anchor }, origin: { ...placement.origin } };\n            const flip = key === 'x' ? (axis === 'y' ? flipAlign : flipSide) : axis === 'y' ? flipSide : flipAlign;\n            newPlacement.anchor = flip(newPlacement.anchor);\n            newPlacement.origin = flip(newPlacement.origin);\n            const { overflows: newOverflows } = checkOverflow(newPlacement);\n            if (\n              (newOverflows[key].before <= overflows[key].before && newOverflows[key].after <= overflows[key].after) ||\n              newOverflows[key].before + newOverflows[key].after < (overflows[key].before + overflows[key].after) / 2\n            ) {\n              placement = newPlacement;\n              reset = flipped[key] = true;\n            }\n          }\n        });\n        if (reset) continue;\n      }\n\n      // shift\n      if (overflows.x.before) {\n        x += overflows.x.before;\n        contentBox.x += overflows.x.before;\n      }\n      if (overflows.x.after) {\n        x -= overflows.x.after;\n        contentBox.x -= overflows.x.after;\n      }\n      if (overflows.y.before) {\n        y += overflows.y.before;\n        contentBox.y += overflows.y.before;\n      }\n      if (overflows.y.after) {\n        y -= overflows.y.after;\n        contentBox.y -= overflows.y.after;\n      }\n\n      // size\n      {\n        const overflows = getOverflow(contentBox, viewport);\n        available.x = viewport.width - overflows.x.before - overflows.x.after;\n        available.y = viewport.height - overflows.y.before - overflows.y.after;\n\n        x += overflows.x.before;\n        contentBox.x += overflows.x.before;\n        y += overflows.y.before;\n        contentBox.y += overflows.y.before;\n      }\n\n      break;\n    }\n\n    const axis = getAxis(placement.anchor);\n    const transformOrigin =\n      props.origin !== 'auto' && props.origin !== 'overlap'\n        ? parseAnchor(props.origin!, data.isRtl.value)\n        : placement.origin;\n\n    Object.assign(contentStyles.value, {\n      '--cds-overlay-anchor-origin': `${placement.anchor.side} ${placement.anchor.align}`,\n      transformOrigin: `${transformOrigin.side} ${transformOrigin.align}`,\n      top: convertToUnit(pixelRound(y)),\n      left: data.isRtl.value ? undefined : convertToUnit(pixelRound(x)),\n      right: data.isRtl.value ? convertToUnit(pixelRound(-x)) : undefined,\n      minWidth: convertToUnit(axis === 'y' ? Math.min(minWidth.value, targetBox.width) : minWidth.value),\n      maxWidth: convertToUnit(\n        pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))\n      ),\n      maxHeight: convertToUnit(\n        pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value))\n      )\n    });\n\n    return {\n      available,\n      contentBox,\n      flipped\n    };\n  }\n\n  watch(\n    () => [\n      preferredAnchor.value,\n      preferredOrigin.value,\n      props.origin,\n      props.offset,\n      props.minWidth,\n      props.minHeight,\n      props.maxWidth,\n      props.maxHeight\n    ],\n    () => updateLocation()\n  );\n\n  nextTick(() => {\n    const result = updateLocation();\n\n    // TODO: overflowing content should only require a single updateLocation call\n    // Icky hack to make sure the content is positioned consistently\n    if (!result) return;\n    const { available, contentBox } = result;\n    if (contentBox.height > available.y) {\n      requestAnimationFrame(() => {\n        updateLocation();\n        requestAnimationFrame(() => {\n          updateLocation();\n        });\n      });\n    }\n  });\n\n  return { updateLocation };\n}\n\nfunction getIntrinsicSize(el: HTMLElement, isRtl: boolean) {\n  const contentBox = nullifyTransforms(el);\n\n  if (isRtl) {\n    contentBox.x += parseFloat(el.style.right || 0);\n  } else {\n    contentBox.x -= parseFloat(el.style.left || 0);\n  }\n  contentBox.y -= parseFloat(el.style.top || 0);\n\n  return contentBox;\n}\n\nfunction pixelRound(val: number) {\n  return Math.round(val * devicePixelRatio) / devicePixelRatio;\n}\n\nfunction pixelCeil(val: number) {\n  return Math.ceil(val * devicePixelRatio) / devicePixelRatio;\n}\n"],"names":["offset","x","y","flipped","axis","overflows"],"mappings":"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"}
+{"version":3,"file":"useLocationStrategies.js","sources":["../../../../../../src/components/CdsOverlay/composables/useLocationStrategies.ts"],"sourcesContent":["import { anchorToPoint, getOffset } from '@cds/components/CdsOverlay/utils/point';\nimport { propsFactory, useToggleScope } from '@cds/core';\nimport {\n  type Anchor,\n  Box,\n  CircularBuffer,\n  clamp,\n  convertToUnit,\n  deepEqual,\n  destructComputed,\n  error,\n  flipAlign,\n  flipCorner,\n  flipSide,\n  getAxis,\n  getElementBox,\n  getOverflow,\n  getScrollParents,\n  getTargetBox,\n  IN_BROWSER,\n  isFixedPosition,\n  nullifyTransforms,\n  parseAnchor\n} from '@cds/utils';\nimport {\n  computed,\n  type ExtractPublicPropTypes,\n  nextTick,\n  onScopeDispose,\n  type PropType,\n  type Ref,\n  ref,\n  unref,\n  watch\n} from 'vue';\n\nexport interface LocationStrategyData {\n  contentEl: Ref<HTMLElement | undefined>;\n  target: Ref<HTMLElement | [x: number, y: number] | undefined>;\n  isActive: Ref<boolean>;\n  isRtl: Ref<boolean>;\n}\n\nexport type LocationStrategyFunction = (\n  data: LocationStrategyData,\n  props: StrategyProps,\n  contentStyles: Ref<Record<string, string>>\n) => undefined | { updateLocation: (e?: Event) => void };\n\nconst locationStrategies = {\n  static: staticLocationStrategy, // specific viewport position, usually centered\n  connected: connectedLocationStrategy // connected to a certain element\n};\n\n/**\n * Configuration for defining location strategies properties.\n * This object contains properties related to the positioning and behavior of elements\n * in relation to their specified target or viewport.\n *\n * Properties:\n *\n * @property {string|Function} locationStrategy\n *   Defines the strategy for positioning the element.\n *   Can be either a predefined key from `locationStrategies` or a custom function.\n *   Default is `'static'`.\n *   Validates whether the value is a function or a key defined in `locationStrategies`.\n *\n * @property {string} location\n *   Specifies the primary location or alignment of the element in relation to its anchor.\n *   Default is `'bottom'`.\n *\n * @property {string} origin\n *   Determines the transformation origin for the placement of the element.\n *   Can be one of the predefined anchors, `'auto'`, or `'overlap'`.\n *   Default is `'auto'`.\n *\n * @property {number|string|Array} offset\n *   Specifies the offset adjustments for the element's placement.\n *   Can be a number, string, or an array of numbers.\n *\n * @property {boolean} stickToTarget\n *   Indicates whether the element should stay attached to its target.\n *\n * @property {number|string} viewportMargin\n *   Determines the margin spacing from the viewport to prevent clipping.\n *   Default is `12`.\n */\nexport const defineLocationStrategiesProps = propsFactory(\n  {\n    /**\n     * Определяет способ позиционирования содержимого оверлея. По умолчанию используется значение static, при котором содержимое центрируется в контейнере.\n     * Используйте connected для привязки к элементу-активатору.\n     * @en Sets the way the overlay content is positioned. By default static is used, which centers the content in its container. Use connected to attach the content to the activator element.\n     */\n    locationStrategy: {\n      type: [String, Function] as PropType<keyof typeof locationStrategies | LocationStrategyFunction>,\n      default: 'static',\n      validator: (val: any) => typeof val === 'function' || val in locationStrategies\n    },\n    /**\n     * Указывает точку привязки для позиционирования компонента с использованием ориентиров для выравнивания по горизонтали, по вертикали или по обоим направлениям\n     * @en Sets the anchor point used to position the component, aligning it horizontally, vertically or in both directions\n     */\n    location: {\n      type: String as PropType<Anchor>,\n      default: 'bottom'\n    },\n    /**\n     * Устанавливает точку привязки для содержимого наложения, которая выравнивается по точке привязки «location» на объекте-цели.\n     * При значении «auto» используется противоположная сторона точки «location».\n     * При значении «overlap» используется та же точка привязки, в результате чего наложение перекрывает объект-цель.\n     * Также задает значение CSS-свойства `transform-origin` для transitions enter/leave.\n     * @en Sets the anchor point of the overlay content that is aligned with the `location` anchor of the target. With \"auto\" the opposite side of the `location` point is used. With \"overlap\" the same anchor point is used, so the overlay overlaps the target. It also sets the CSS `transform-origin` property for the enter/leave transitions.\n     */\n    origin: {\n      type: String as PropType<Anchor | 'auto' | 'overlap'>,\n      default: 'auto'\n    },\n    /**\n     * Увеличивает расстояние до цели. Если передать два числа, второе значение смещает анкер вбок и в сторону от цели.\n     * @en Increases the distance to the target. If two numbers are passed, the second one shifts the anchor sideways, away from the target.\n     */\n    offset: [Number, String, Array] as PropType<number | string | number[]>,\n    /**\n     * Позволяет контенту наложения выходить за пределы экрана при прокрутке.\n     * @en Lets the overlay content go off screen while scrolling.\n     */\n    stickToTarget: Boolean,\n    /**\n     * Устанавливает пользовательские viewport margin для содержимого наложения\n     * @en Sets a custom viewport margin for the overlay content\n     */\n    viewportMargin: {\n      type: [Number, String],\n      default: 12\n    }\n  },\n  'locationStrategies'\n);\n\ninterface StrategyProps extends ExtractPublicPropTypes<ReturnType<typeof defineLocationStrategiesProps>> {\n  maxHeight?: number | string;\n  maxWidth?: number | string;\n  minHeight?: number | string;\n  minWidth?: number | string;\n}\n\n/**\n * Manages and applies location strategies based on the provided properties and data.\n * This function dynamically handles event listeners and updates styles or positions\n * based on the selected location strategy.\n *\n * @param {StrategyProps} props - The properties object containing configuration for the location strategy. Includes details such as the type of strategy to use.\n * @param {LocationStrategyData} data - The reactive data object used to determine and update the active state and positional information of elements.\n * @return {Object} An object containing:\n *                  - `contentStyles` (Ref<Object>): A reactive reference to the computed styles for the content.\n *                  - `updateLocation` (Ref<function|undefined>): A reactive reference to the update function for the location,\n *                    or `undefined` if no location strategy is active.\n */\nexport function useLocationStrategies(props: StrategyProps, data: LocationStrategyData) {\n  const contentStyles = ref({});\n  const updateLocation = ref<(e: Event) => void>();\n\n  if (IN_BROWSER) {\n    useToggleScope(\n      () => !!(data.isActive.value && props.locationStrategy),\n      (reset) => {\n        watch(() => props.locationStrategy, reset);\n        onScopeDispose(() => {\n          window.removeEventListener('resize', onResize);\n          visualViewport?.removeEventListener('resize', onVisualResize);\n          visualViewport?.removeEventListener('scroll', onVisualScroll);\n          updateLocation.value = undefined;\n        });\n\n        window.addEventListener('resize', onResize, { passive: true });\n        visualViewport?.addEventListener('resize', onVisualResize, { passive: true });\n        visualViewport?.addEventListener('scroll', onVisualScroll, { passive: true });\n\n        if (typeof props.locationStrategy === 'function') {\n          updateLocation.value = props.locationStrategy(data, props, contentStyles)?.updateLocation;\n        } else {\n          updateLocation.value = locationStrategies[props.locationStrategy!](\n            data,\n            props,\n            contentStyles\n          )?.updateLocation;\n        }\n      }\n    );\n  }\n\n  function onResize(event: Event) {\n    unref(updateLocation)?.(event);\n  }\n\n  function onVisualResize(event: Event) {\n    unref(updateLocation)?.(event);\n  }\n\n  function onVisualScroll(event: Event) {\n    unref(updateLocation)?.(event);\n  }\n\n  return {\n    contentStyles,\n    updateLocation\n  };\n}\n\n/**\n * Defines a static location strategy and manages the target position and styles for a connected element.\n *\n * @param {LocationStrategyData} data - Provides data related to the positioning strategy, such as orientation and RTL settings.\n * @param {StrategyProps} props - Defines properties for the strategy, including location and origin settings.\n * @param {Ref<Record<string, string>>} contentStyles - A reactive reference that holds the styles to be applied to the connected element.\n *\n * @return {Object} An object containing the `updateLocation` method which recalculates the position and updates styles for the target element.\n */\nfunction staticLocationStrategy(\n  data: LocationStrategyData,\n  props: StrategyProps,\n  contentStyles: Ref<Record<string, string>>\n) {\n  const target = ref<[x: number, y: number]>();\n  const connectedStyles = ref<Record<string, string>>({});\n  const connected = connectedLocationStrategy({ ...data, target }, { ...props, origin: 'auto' }, connectedStyles);\n\n  function updateStyles() {\n    if (props.origin !== 'auto' && props.origin !== 'overlap') {\n      const { side, align } = parseAnchor(props.origin!, unref(data.isRtl));\n      contentStyles.value = { ...unref(connectedStyles), transformOrigin: `${side} ${align}` };\n    } else {\n      contentStyles.value = unref(connectedStyles);\n    }\n  }\n\n  watch(connectedStyles, updateStyles, { deep: true });\n  watch([() => props.origin, data.isRtl], updateStyles);\n\n  function updateTarget() {\n    const viewportBox = new Box({\n      x: visualViewport?.offsetLeft ?? 0,\n      y: visualViewport?.offsetTop ?? 0,\n      width: visualViewport?.width ?? window.innerWidth,\n      height: visualViewport?.height ?? window.innerHeight\n    });\n\n    const point = anchorToPoint(parseAnchor(props.location!, unref(data.isRtl)), viewportBox);\n    target.value = [point.x, point.y];\n  }\n\n  function updateLocation() {\n    updateTarget();\n    connected.updateLocation();\n  }\n\n  watch(\n    () => [props.location, unref(data.isRtl)],\n    () => {\n      updateLocation();\n    }\n  );\n\n  nextTick(() => {\n    updateLocation();\n  });\n\n  return { updateLocation };\n}\n\n/**\n * Adjusts the position and placement of a target element in relation to a connected content element\n * based on specified location and origin strategies, ensuring adaptability to viewport constraints\n * and user-defined offsets.\n *\n * @param {LocationStrategyData} data - Reactive data object containing target and content element references,\n *                                       and other positioning metadata.\n * @param {StrategyProps} props - Properties defining the positioning preferences such as location, origin, offset,\n *                                and viewport margin.\n * @param {Ref<Record<string, string>>} contentStyles - Reference to a reactive object holding dynamic styling properties\n *                                                      for the content element's positioning.\n * @return {void} No return value. This function manages side-effects related to positioning and performs updates\n *                on DOM elements and reactive objects to achieve the desired layout behavior.\n */\nfunction connectedLocationStrategy(\n  data: LocationStrategyData,\n  props: StrategyProps,\n  contentStyles: Ref<Record<string, string>>\n) {\n  const activatorFixed = Array.isArray(data.target.value) || isFixedPosition(data.target.value);\n  if (activatorFixed) {\n    Object.assign(unref(contentStyles), {\n      position: 'fixed',\n      top: 0,\n      [unref(data.isRtl) ? 'right' : 'left']: 0\n    });\n  }\n\n  const { preferredAnchor, preferredOrigin } = destructComputed(() => {\n    const parsedAnchor = parseAnchor(props.location!, unref(data.isRtl));\n    const parsedOrigin =\n      props.origin === 'overlap'\n        ? parsedAnchor\n        : props.origin === 'auto'\n          ? flipSide(parsedAnchor)\n          : parseAnchor(props.origin!, unref(data.isRtl));\n\n    // Some combinations of props may produce an invalid origin\n    if (parsedAnchor.side === parsedOrigin.side && parsedAnchor.align === flipAlign(parsedOrigin).align) {\n      return {\n        preferredAnchor: flipCorner(parsedAnchor),\n        preferredOrigin: flipCorner(parsedOrigin)\n      };\n    } else {\n      return {\n        preferredAnchor: parsedAnchor,\n        preferredOrigin: parsedOrigin\n      };\n    }\n  });\n\n  const [minWidth, minHeight, maxWidth, maxHeight] = (['minWidth', 'minHeight', 'maxWidth', 'maxHeight'] as const).map(\n    (key) => {\n      return computed(() => {\n        const val = parseFloat(props[key]!);\n        return isNaN(val) ? Infinity : val;\n      });\n    }\n  );\n\n  const offset = computed(() => {\n    if (Array.isArray(props.offset)) {\n      return props.offset;\n    }\n    if (typeof props.offset === 'string') {\n      const offset = props.offset.split(' ').map(parseFloat);\n      if (offset.length < 2) offset.push(0);\n      return offset;\n    }\n    return typeof props.offset === 'number' ? [props.offset, 0] : [0, 0];\n  });\n\n  let observe = false;\n  let lastFrame = -1;\n  const flipped = new CircularBuffer<{ x: boolean; y: boolean }>(4);\n\n  const observer = new ResizeObserver(() => {\n    if (!observe) return;\n\n    // Detect consecutive frames\n    requestAnimationFrame((newTime) => {\n      if (newTime !== lastFrame) flipped.clear();\n      requestAnimationFrame((newNewTime) => {\n        lastFrame = newNewTime;\n      });\n    });\n\n    if (flipped.isFull) {\n      const values = flipped.values();\n      if (deepEqual(values.at(-1), values.at(-3)) && !deepEqual(values.at(-1), values.at(-2))) {\n        // Flipping is causing a container resize loop\n        return;\n      }\n    }\n\n    const result = updateLocation();\n    if (result) flipped.push(result.flipped);\n  });\n\n  let targetBox = new Box({ x: 0, y: 0, width: 0, height: 0 });\n\n  watch(\n    data.target,\n    (newTarget, oldTarget) => {\n      if (oldTarget && !Array.isArray(oldTarget)) observer.unobserve(oldTarget);\n      if (!Array.isArray(newTarget)) {\n        if (newTarget) observer.observe(newTarget);\n      } else if (!deepEqual(newTarget, oldTarget)) {\n        updateLocation();\n      }\n    },\n    { immediate: true }\n  );\n\n  watch(\n    data.contentEl,\n    (newContentEl, oldContentEl) => {\n      if (oldContentEl) observer.unobserve(oldContentEl);\n      if (newContentEl) observer.observe(newContentEl);\n    },\n    { immediate: true }\n  );\n\n  onScopeDispose(() => {\n    observer.disconnect();\n  });\n\n  function updateLocation() {\n    observe = false;\n    requestAnimationFrame(() => (observe = true));\n\n    if (!data.target.value || !data.contentEl.value) return;\n\n    if (\n      Array.isArray(data.target.value) ||\n      data.target.value.offsetParent ||\n      data.target.value.getClientRects().length\n    ) {\n      targetBox = getTargetBox(data.target.value);\n    }\n\n    const contentBox = getIntrinsicSize(data.contentEl.value, data.isRtl.value);\n    const scrollParents = getScrollParents(data.contentEl.value);\n    const viewportMargin = Number(props.viewportMargin);\n\n    if (!scrollParents.length) {\n      scrollParents.push(document.documentElement);\n      if (!(data.contentEl.value.style.top && data.contentEl.value.style.left)) {\n        contentBox.x -= parseFloat(document.documentElement.style.getPropertyValue('--cds-body-scroll-x') || 0);\n        contentBox.y -= parseFloat(document.documentElement.style.getPropertyValue('--cds-body-scroll-y') || 0);\n      }\n    }\n\n    const viewport = scrollParents.reduce<Box>((box: Box | undefined, el) => {\n      const scrollBox = getElementBox(el);\n\n      if (box) {\n        return new Box({\n          x: Math.max(box.left, scrollBox.left),\n          y: Math.max(box.top, scrollBox.top),\n          width: Math.min(box.right, scrollBox.right) - Math.max(box.left, scrollBox.left),\n          height: Math.min(box.bottom, scrollBox.bottom) - Math.max(box.top, scrollBox.top)\n        });\n      }\n      return scrollBox;\n    }, undefined!);\n\n    if (props.stickToTarget) {\n      viewport.x += Math.min(viewportMargin, targetBox.x);\n      viewport.y += Math.min(viewportMargin, targetBox.y);\n      viewport.width = Math.max(viewport.width - viewportMargin * 2, targetBox.x + targetBox.width - viewportMargin);\n      viewport.height = Math.max(viewport.height - viewportMargin * 2, targetBox.y + targetBox.height - viewportMargin);\n    } else {\n      viewport.x += viewportMargin;\n      viewport.y += viewportMargin;\n      viewport.width -= viewportMargin * 2;\n      viewport.height -= viewportMargin * 2;\n    }\n\n    let placement = {\n      anchor: preferredAnchor.value,\n      origin: preferredOrigin.value\n    };\n\n    function checkOverflow(_placement: typeof placement) {\n      const box = new Box(contentBox);\n      const targetPoint = anchorToPoint(_placement.anchor, targetBox);\n      const contentPoint = anchorToPoint(_placement.origin, box);\n\n      let { x, y } = getOffset(targetPoint, contentPoint);\n\n      switch (_placement.anchor.side) {\n        case 'top':\n          y -= offset.value[0];\n          break;\n        case 'bottom':\n          y += offset.value[0];\n          break;\n        case 'left':\n          x -= offset.value[0];\n          break;\n        case 'right':\n          x += offset.value[0];\n          break;\n      }\n\n      switch (_placement.anchor.align) {\n        case 'top':\n          y -= offset.value[1];\n          break;\n        case 'bottom':\n          y += offset.value[1];\n          break;\n        case 'left':\n          x -= offset.value[1];\n          break;\n        case 'right':\n          x += offset.value[1];\n          break;\n      }\n\n      box.x += x;\n      box.y += y;\n\n      box.width = Math.min(box.width, maxWidth.value);\n      box.height = Math.min(box.height, maxHeight.value);\n\n      const overflows = getOverflow(box, viewport);\n\n      return { overflows, x, y };\n    }\n\n    let x = 0;\n    let y = 0;\n    const available = { x: 0, y: 0 };\n    const flipped = { x: false, y: false };\n    let resets = -1;\n\n    while (true) {\n      if (resets++ > 10) {\n        error('Infinite loop detected in connectedLocationStrategy');\n        break;\n      }\n\n      const { x: _x, y: _y, overflows } = checkOverflow(placement);\n\n      x += _x;\n      y += _y;\n\n      contentBox.x += _x;\n      contentBox.y += _y;\n\n      // flip\n      {\n        const axis = getAxis(placement.anchor);\n        const hasOverflowX = overflows.x.before || overflows.x.after;\n        const hasOverflowY = overflows.y.before || overflows.y.after;\n\n        let reset = false;\n        ['x', 'y'].forEach((key) => {\n          if ((key === 'x' && hasOverflowX && !flipped.x) || (key === 'y' && hasOverflowY && !flipped.y)) {\n            const newPlacement = { anchor: { ...placement.anchor }, origin: { ...placement.origin } };\n            const flip = key === 'x' ? (axis === 'y' ? flipAlign : flipSide) : axis === 'y' ? flipSide : flipAlign;\n            newPlacement.anchor = flip(newPlacement.anchor);\n            newPlacement.origin = flip(newPlacement.origin);\n            const { overflows: newOverflows } = checkOverflow(newPlacement);\n            if (\n              (newOverflows[key].before <= overflows[key].before && newOverflows[key].after <= overflows[key].after) ||\n              newOverflows[key].before + newOverflows[key].after < (overflows[key].before + overflows[key].after) / 2\n            ) {\n              placement = newPlacement;\n              reset = flipped[key] = true;\n            }\n          }\n        });\n        if (reset) continue;\n      }\n\n      // shift\n      if (overflows.x.before) {\n        x += overflows.x.before;\n        contentBox.x += overflows.x.before;\n      }\n      if (overflows.x.after) {\n        x -= overflows.x.after;\n        contentBox.x -= overflows.x.after;\n      }\n      if (overflows.y.before) {\n        y += overflows.y.before;\n        contentBox.y += overflows.y.before;\n      }\n      if (overflows.y.after) {\n        y -= overflows.y.after;\n        contentBox.y -= overflows.y.after;\n      }\n\n      // size\n      {\n        const overflows = getOverflow(contentBox, viewport);\n        available.x = viewport.width - overflows.x.before - overflows.x.after;\n        available.y = viewport.height - overflows.y.before - overflows.y.after;\n\n        x += overflows.x.before;\n        contentBox.x += overflows.x.before;\n        y += overflows.y.before;\n        contentBox.y += overflows.y.before;\n      }\n\n      break;\n    }\n\n    const axis = getAxis(placement.anchor);\n    const transformOrigin =\n      props.origin !== 'auto' && props.origin !== 'overlap'\n        ? parseAnchor(props.origin!, data.isRtl.value)\n        : placement.origin;\n\n    Object.assign(contentStyles.value, {\n      '--cds-overlay-anchor-origin': `${placement.anchor.side} ${placement.anchor.align}`,\n      transformOrigin: `${transformOrigin.side} ${transformOrigin.align}`,\n      top: convertToUnit(pixelRound(y)),\n      left: data.isRtl.value ? undefined : convertToUnit(pixelRound(x)),\n      right: data.isRtl.value ? convertToUnit(pixelRound(-x)) : undefined,\n      minWidth: convertToUnit(axis === 'y' ? Math.min(minWidth.value, targetBox.width) : minWidth.value),\n      maxWidth: convertToUnit(\n        pixelCeil(clamp(available.x, minWidth.value === Infinity ? 0 : minWidth.value, maxWidth.value))\n      ),\n      maxHeight: convertToUnit(\n        pixelCeil(clamp(available.y, minHeight.value === Infinity ? 0 : minHeight.value, maxHeight.value))\n      )\n    });\n\n    return {\n      available,\n      contentBox,\n      flipped\n    };\n  }\n\n  watch(\n    () => [\n      preferredAnchor.value,\n      preferredOrigin.value,\n      props.origin,\n      props.offset,\n      props.minWidth,\n      props.minHeight,\n      props.maxWidth,\n      props.maxHeight\n    ],\n    () => updateLocation()\n  );\n\n  nextTick(() => {\n    const result = updateLocation();\n\n    // TODO: overflowing content should only require a single updateLocation call\n    // Icky hack to make sure the content is positioned consistently\n    if (!result) return;\n    const { available, contentBox } = result;\n    if (contentBox.height > available.y) {\n      requestAnimationFrame(() => {\n        updateLocation();\n        requestAnimationFrame(() => {\n          updateLocation();\n        });\n      });\n    }\n  });\n\n  return { updateLocation };\n}\n\nfunction getIntrinsicSize(el: HTMLElement, isRtl: boolean) {\n  const contentBox = nullifyTransforms(el);\n\n  if (isRtl) {\n    contentBox.x += parseFloat(el.style.right || 0);\n  } else {\n    contentBox.x -= parseFloat(el.style.left || 0);\n  }\n  contentBox.y -= parseFloat(el.style.top || 0);\n\n  return contentBox;\n}\n\nfunction pixelRound(val: number) {\n  return Math.round(val * devicePixelRatio) / devicePixelRatio;\n}\n\nfunction pixelCeil(val: number) {\n  return Math.ceil(val * devicePixelRatio) / devicePixelRatio;\n}\n"],"names":["offset","x","y","flipped","axis","overflows"],"mappings":"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"}

package/dist/es/src/components/CdsOverlay/composables/useScrollStrategies.js

@@ -12,7 +12,10 @@ const scrollStrategies = {
 };
 const defineScrollStrategiesProps = propsFactory(
   {
-    /** Стратегия, применяемая при активации компонента и прокрутке страницы пользователем. */
+    /**
+     * Стратегия, применяемая при активации компонента и прокрутке страницы пользователем.
+     * @en Strategy applied when the component is active and the user scrolls the page.
+     */
     scrollStrategy: {
       type: [String, Function],
       default: "block",

package/dist/es/src/components/CdsOverlay/composables/useScrollStrategies.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollStrategies.js","sources":["../../../../../../src/components/CdsOverlay/composables/useScrollStrategies.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER } from '@cds/utils';\nimport {\n  type EffectScope,\n  effectScope,\n  type ExtractPublicPropTypes,\n  onScopeDispose,\n  type PropType,\n  type Ref,\n  watchEffect\n} from 'vue';\n\nimport { requestNewFrame } from '../utils/requestNewFrame';\n\nexport interface ScrollStrategyData {\n  root: Ref<HTMLElement | undefined>;\n  contentEl: Ref<HTMLElement | undefined>;\n  targetEl: Ref<HTMLElement | undefined>;\n  target: Ref<HTMLElement | [x: number, y: number] | undefined>;\n  isActive: Ref<boolean>;\n  updateLocation: Ref<((e: Event) => void) | undefined>;\n}\n\nexport type ScrollStrategyFunction = (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void;\n\nconst scrollStrategies = {\n  none: null,\n  close: closeScrollStrategy,\n  block: blockScrollStrategy,\n  reposition: repositionScrollStrategy\n};\n\nexport const defineScrollStrategiesProps = propsFactory(\n  {\n    /** Стратегия, применяемая при активации компонента и прокрутке страницы пользователем. */\n    scrollStrategy: {\n      type: [String, Function] as PropType<keyof typeof scrollStrategies | ScrollStrategyFunction>,\n      default: 'block',\n      validator: (val: any) => typeof val === 'function' || val in scrollStrategies\n    }\n  },\n  'scroll-strategies'\n);\n\nexport interface StrategyProps extends ExtractPublicPropTypes<ReturnType<typeof defineScrollStrategiesProps>> {\n  contained: boolean | undefined;\n}\n\n/**\n * Manages scroll strategies based on the given properties and data. This function is responsible for dynamically\n * applying a scroll strategy when the active state and strategy are specified.\n *\n * @param {StrategyProps} props - The properties that define the scroll strategy to be applied, including details\n * relevant to the specific strategy.\n * @param {ScrollStrategyData} data - Reactive data that provides context for the scroll strategy, including an\n * active state and other necessary parameters.\n * @return {void} This function does not return a value.\n */\nexport function useScrollStrategies(props: StrategyProps, data: ScrollStrategyData) {\n  if (!IN_BROWSER) return;\n\n  let scope: EffectScope | undefined;\n  watchEffect(async () => {\n    scope?.stop();\n\n    if (!(data.isActive.value && props.scrollStrategy)) return;\n\n    scope = effectScope();\n    await new Promise((resolve) => setTimeout(resolve));\n    scope.active &&\n      scope.run(() => {\n        if (typeof props.scrollStrategy === 'function') {\n          props.scrollStrategy(data, props, scope!);\n        } else {\n          scrollStrategies[props.scrollStrategy!]?.(data, props, scope!);\n        }\n      });\n  });\n\n  onScopeDispose(() => {\n    scope?.stop();\n  });\n}\n\nfunction closeScrollStrategy(data: ScrollStrategyData) {\n  function onScroll() {\n    data.isActive.value = false;\n  }\n\n  bindScroll(getTargetEl(data.target.value, data.contentEl.value), onScroll);\n}\n\nfunction blockScrollStrategy(data: ScrollStrategyData, props: StrategyProps) {\n  const offsetParent = data.root.value?.offsetParent;\n  const target = getTargetEl(data.target.value, data.contentEl.value);\n  const scrollElements = [\n    ...new Set([\n      ...getScrollParents(target, props.contained ? offsetParent : undefined),\n      ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)\n    ])\n  ].filter((el) => !el.classList.contains('cds-overlay-scroll-blocked'));\n  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;\n\n  const scrollableParent = ((el) => hasScrollbar(el) && el)(offsetParent || document.documentElement);\n  if (scrollableParent) {\n    data.root.value!.classList.add('cds-overlay--scroll-blocked');\n  }\n\n  scrollElements.forEach((el) => {\n    el.style.setProperty('--cds-body-scroll-x', convertToUnit(-el.scrollLeft));\n    el.style.setProperty('--cds-body-scroll-y', convertToUnit(-el.scrollTop));\n\n    if (el !== document.documentElement || getComputedStyle(el).overflowY !== 'scroll') {\n      el.style.setProperty('--cds-scrollbar-offset', convertToUnit(scrollbarWidth));\n    }\n\n    el.classList.add('cds-overlay-scroll-blocked');\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el) => {\n      const x = parseFloat(el.style.getPropertyValue('--cds-body-scroll-x'));\n      const y = parseFloat(el.style.getPropertyValue('--cds-body-scroll-y'));\n\n      const scrollBehavior = el.style.scrollBehavior;\n\n      el.style.scrollBehavior = 'auto';\n      el.style.removeProperty('--cds-body-scroll-x');\n      el.style.removeProperty('--cds-body-scroll-y');\n      el.style.removeProperty('--cds-scrollbar-offset');\n      el.classList.remove('cds-overlay-scroll-blocked');\n\n      el.scrollLeft = -x;\n      el.scrollTop = -y;\n\n      el.style.scrollBehavior = scrollBehavior;\n    });\n    if (scrollableParent) {\n      data.root.value!.classList.remove('cds-overlay--scroll-blocked');\n    }\n  });\n}\n\nfunction repositionScrollStrategy(data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) {\n  let slow = false;\n  let raf = -1;\n  let ric = -1;\n\n  function update(e: Event) {\n    requestNewFrame(() => {\n      const start = performance.now();\n      data.updateLocation.value?.(e);\n      const time = performance.now() - start;\n      slow = time / (1000 / 60) > 2;\n    });\n  }\n\n  ric = (typeof requestIdleCallback === 'undefined' ? (cb: Function) => cb() : requestIdleCallback)(() => {\n    scope.run(() => {\n      bindScroll(getTargetEl(data.target.value, data.contentEl.value), (e) => {\n        if (slow) {\n          // If the position calculation is slow,\n          // defer updates until scrolling is finished.\n          // Browsers usually fire one scroll event per frame so\n          // we just wait until we've got two frames without an event\n          cancelAnimationFrame(raf);\n          raf = requestAnimationFrame(() => {\n            raf = requestAnimationFrame(() => {\n              update(e);\n            });\n          });\n        } else {\n          update(e);\n        }\n      });\n    });\n  });\n\n  onScopeDispose(() => {\n    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);\n    cancelAnimationFrame(raf);\n  });\n}\n\nfunction getTargetEl(target: HTMLElement | [x: number, y: number] | undefined, contentEl: HTMLElement | undefined) {\n  return Array.isArray(target)\n    ? document.elementsFromPoint(...target).find((el) => !contentEl?.contains(el))\n    : (target ?? contentEl);\n}\n\nfunction bindScroll(el: Element | undefined, onScroll: (e: Event) => void) {\n  const scrollElements = [document, ...getScrollParents(el)];\n  scrollElements.forEach((el) => {\n    el.addEventListener('scroll', onScroll, { passive: true });\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el) => {\n      el.removeEventListener('scroll', onScroll);\n    });\n  });\n}\n"],"names":["el"],"mappings":"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"}
+{"version":3,"file":"useScrollStrategies.js","sources":["../../../../../../src/components/CdsOverlay/composables/useScrollStrategies.ts"],"sourcesContent":["import { propsFactory } from '@cds/core';\nimport { convertToUnit, getScrollParents, hasScrollbar, IN_BROWSER } from '@cds/utils';\nimport {\n  type EffectScope,\n  effectScope,\n  type ExtractPublicPropTypes,\n  onScopeDispose,\n  type PropType,\n  type Ref,\n  watchEffect\n} from 'vue';\n\nimport { requestNewFrame } from '../utils/requestNewFrame';\n\nexport interface ScrollStrategyData {\n  root: Ref<HTMLElement | undefined>;\n  contentEl: Ref<HTMLElement | undefined>;\n  targetEl: Ref<HTMLElement | undefined>;\n  target: Ref<HTMLElement | [x: number, y: number] | undefined>;\n  isActive: Ref<boolean>;\n  updateLocation: Ref<((e: Event) => void) | undefined>;\n}\n\nexport type ScrollStrategyFunction = (data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void;\n\nconst scrollStrategies = {\n  none: null,\n  close: closeScrollStrategy,\n  block: blockScrollStrategy,\n  reposition: repositionScrollStrategy\n};\n\nexport const defineScrollStrategiesProps = propsFactory(\n  {\n    /**\n     * Стратегия, применяемая при активации компонента и прокрутке страницы пользователем.\n     * @en Strategy applied when the component is active and the user scrolls the page.\n     */\n    scrollStrategy: {\n      type: [String, Function] as PropType<keyof typeof scrollStrategies | ScrollStrategyFunction>,\n      default: 'block',\n      validator: (val: any) => typeof val === 'function' || val in scrollStrategies\n    }\n  },\n  'scroll-strategies'\n);\n\nexport interface StrategyProps extends ExtractPublicPropTypes<ReturnType<typeof defineScrollStrategiesProps>> {\n  contained: boolean | undefined;\n}\n\n/**\n * Manages scroll strategies based on the given properties and data. This function is responsible for dynamically\n * applying a scroll strategy when the active state and strategy are specified.\n *\n * @param {StrategyProps} props - The properties that define the scroll strategy to be applied, including details\n * relevant to the specific strategy.\n * @param {ScrollStrategyData} data - Reactive data that provides context for the scroll strategy, including an\n * active state and other necessary parameters.\n * @return {void} This function does not return a value.\n */\nexport function useScrollStrategies(props: StrategyProps, data: ScrollStrategyData) {\n  if (!IN_BROWSER) return;\n\n  let scope: EffectScope | undefined;\n  watchEffect(async () => {\n    scope?.stop();\n\n    if (!(data.isActive.value && props.scrollStrategy)) return;\n\n    scope = effectScope();\n    await new Promise((resolve) => setTimeout(resolve));\n    scope.active &&\n      scope.run(() => {\n        if (typeof props.scrollStrategy === 'function') {\n          props.scrollStrategy(data, props, scope!);\n        } else {\n          scrollStrategies[props.scrollStrategy!]?.(data, props, scope!);\n        }\n      });\n  });\n\n  onScopeDispose(() => {\n    scope?.stop();\n  });\n}\n\nfunction closeScrollStrategy(data: ScrollStrategyData) {\n  function onScroll() {\n    data.isActive.value = false;\n  }\n\n  bindScroll(getTargetEl(data.target.value, data.contentEl.value), onScroll);\n}\n\nfunction blockScrollStrategy(data: ScrollStrategyData, props: StrategyProps) {\n  const offsetParent = data.root.value?.offsetParent;\n  const target = getTargetEl(data.target.value, data.contentEl.value);\n  const scrollElements = [\n    ...new Set([\n      ...getScrollParents(target, props.contained ? offsetParent : undefined),\n      ...getScrollParents(data.contentEl.value, props.contained ? offsetParent : undefined)\n    ])\n  ].filter((el) => !el.classList.contains('cds-overlay-scroll-blocked'));\n  const scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;\n\n  const scrollableParent = ((el) => hasScrollbar(el) && el)(offsetParent || document.documentElement);\n  if (scrollableParent) {\n    data.root.value!.classList.add('cds-overlay--scroll-blocked');\n  }\n\n  scrollElements.forEach((el) => {\n    el.style.setProperty('--cds-body-scroll-x', convertToUnit(-el.scrollLeft));\n    el.style.setProperty('--cds-body-scroll-y', convertToUnit(-el.scrollTop));\n\n    if (el !== document.documentElement || getComputedStyle(el).overflowY !== 'scroll') {\n      el.style.setProperty('--cds-scrollbar-offset', convertToUnit(scrollbarWidth));\n    }\n\n    el.classList.add('cds-overlay-scroll-blocked');\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el) => {\n      const x = parseFloat(el.style.getPropertyValue('--cds-body-scroll-x'));\n      const y = parseFloat(el.style.getPropertyValue('--cds-body-scroll-y'));\n\n      const scrollBehavior = el.style.scrollBehavior;\n\n      el.style.scrollBehavior = 'auto';\n      el.style.removeProperty('--cds-body-scroll-x');\n      el.style.removeProperty('--cds-body-scroll-y');\n      el.style.removeProperty('--cds-scrollbar-offset');\n      el.classList.remove('cds-overlay-scroll-blocked');\n\n      el.scrollLeft = -x;\n      el.scrollTop = -y;\n\n      el.style.scrollBehavior = scrollBehavior;\n    });\n    if (scrollableParent) {\n      data.root.value!.classList.remove('cds-overlay--scroll-blocked');\n    }\n  });\n}\n\nfunction repositionScrollStrategy(data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) {\n  let slow = false;\n  let raf = -1;\n  let ric = -1;\n\n  function update(e: Event) {\n    requestNewFrame(() => {\n      const start = performance.now();\n      data.updateLocation.value?.(e);\n      const time = performance.now() - start;\n      slow = time / (1000 / 60) > 2;\n    });\n  }\n\n  ric = (typeof requestIdleCallback === 'undefined' ? (cb: Function) => cb() : requestIdleCallback)(() => {\n    scope.run(() => {\n      bindScroll(getTargetEl(data.target.value, data.contentEl.value), (e) => {\n        if (slow) {\n          // If the position calculation is slow,\n          // defer updates until scrolling is finished.\n          // Browsers usually fire one scroll event per frame so\n          // we just wait until we've got two frames without an event\n          cancelAnimationFrame(raf);\n          raf = requestAnimationFrame(() => {\n            raf = requestAnimationFrame(() => {\n              update(e);\n            });\n          });\n        } else {\n          update(e);\n        }\n      });\n    });\n  });\n\n  onScopeDispose(() => {\n    typeof cancelIdleCallback !== 'undefined' && cancelIdleCallback(ric);\n    cancelAnimationFrame(raf);\n  });\n}\n\nfunction getTargetEl(target: HTMLElement | [x: number, y: number] | undefined, contentEl: HTMLElement | undefined) {\n  return Array.isArray(target)\n    ? document.elementsFromPoint(...target).find((el) => !contentEl?.contains(el))\n    : (target ?? contentEl);\n}\n\nfunction bindScroll(el: Element | undefined, onScroll: (e: Event) => void) {\n  const scrollElements = [document, ...getScrollParents(el)];\n  scrollElements.forEach((el) => {\n    el.addEventListener('scroll', onScroll, { passive: true });\n  });\n\n  onScopeDispose(() => {\n    scrollElements.forEach((el) => {\n      el.removeEventListener('scroll', onScroll);\n    });\n  });\n}\n"],"names":["el"],"mappings":"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"}

package/dist/es/src/components/CdsPage/CdsPage.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-page--padding {
     padding: var(--cds-spacing-400);

package/dist/es/src/components/CdsPage/api/CdsPage.props.js

@@ -3,7 +3,10 @@ import { p as propsFactory } from "../../../core/propsFactory.js";
 import { C as CdsPageConstants } from "./CdsPage.constants.js";
 const defineCdsPageProps = propsFactory(
   {
-    /** Добавляет внутренние отступы странице. */
+    /**
+     * Добавляет внутренние отступы странице.
+     * @en Adds paddings to the page.
+     */
     padding: {
       type: Boolean,
       default: false
@@ -11,6 +14,7 @@ const defineCdsPageProps = propsFactory(
     /**
      * Функция вычисления стилей страницы. Получает суммарный offset
      * (header + footer) и высоту области, возвращает строку стилей.
+     * @en Function that computes the styles of the page. It receives the total offset (header + footer) and the height of the area, and returns a style string.
      */
     styleFn: {
       type: Function,

package/dist/es/src/components/CdsPage/api/CdsPage.props.js.map

@@ -1 +1 @@
-{"version":3,"file":"CdsPage.props.js","sources":["../../../../../../src/components/CdsPage/api/CdsPage.props.ts"],"sourcesContent":["import { defineComponentProps, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport { CdsPageConstants } from './CdsPage.constants';\n\nexport const defineCdsPageProps = propsFactory(\n  {\n    /** Добавляет внутренние отступы странице. */\n    padding: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    /**\n     * Функция вычисления стилей страницы. Получает суммарный offset\n     * (header + footer) и высоту области, возвращает строку стилей.\n     */\n    styleFn: {\n      type: Function as PropType<(offset: number, height: number) => string>,\n      default: undefined\n    },\n    ...defineComponentProps()\n  },\n  CdsPageConstants.name\n);\n"],"names":[],"mappings":";;;AAKO,MAAM,qBAAqB;AAAA,EAChC;AAAA;AAAA,IAEE,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,IAEX,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,iBAAiB;AACnB;"}
+{"version":3,"file":"CdsPage.props.js","sources":["../../../../../../src/components/CdsPage/api/CdsPage.props.ts"],"sourcesContent":["import { defineComponentProps, propsFactory } from '@cds/core';\nimport type { PropType } from 'vue';\n\nimport { CdsPageConstants } from './CdsPage.constants';\n\nexport const defineCdsPageProps = propsFactory(\n  {\n    /**\n     * Добавляет внутренние отступы странице.\n     * @en Adds paddings to the page.\n     */\n    padding: {\n      type: Boolean as PropType<boolean>,\n      default: false\n    },\n    /**\n     * Функция вычисления стилей страницы. Получает суммарный offset\n     * (header + footer) и высоту области, возвращает строку стилей.\n     * @en Function that computes the styles of the page. It receives the total offset (header + footer) and the height of the area, and returns a style string.\n     */\n    styleFn: {\n      type: Function as PropType<(offset: number, height: number) => string>,\n      default: undefined\n    },\n    ...defineComponentProps()\n  },\n  CdsPageConstants.name\n);\n"],"names":[],"mappings":";;;AAKO,MAAM,qBAAqB;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,IAEX,GAAG,qBAAA;AAAA,EAAqB;AAAA,EAE1B,iBAAiB;AACnB;"}

package/dist/es/src/components/CdsPagination/CdsPagination.css

@@ -1,21 +1,3 @@
-@charset "UTF-8";
-/*
-* Easing component
-* @type Map
-*/
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
 @layer cds-components {
   .cds-pagination__list {
     display: flex;

package/dist/es/src/components/CdsPagination/CdsPagination.vue_vue_type_script_setup_true_lang.js

@@ -185,9 +185,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       inputPageModel.value = "";
     }
     __expose({
+      /**
+       * Переходит на первую страницу.
+       * @en Jumps to the first page.
+       */
       setFirst: () => setValue(unref(start), "first"),
+      /**
+       * Переходит на последнюю страницу.
+       * @en Jumps to the last page.
+       */
       setLast: () => setValue(unref(start) + unref(length) - 1, "last"),
+      /**
+       * Переходит на следующую страницу.
+       * @en Jumps to the next page.
+       */
       setNext: () => setValue(unref(page) + 1, "next"),
+      /**
+       * Переходит на предыдущую страницу.
+       * @en Jumps to the previous page.
+       */
       setPrev: () => setValue(unref(page) - 1, "prev")
     });
     return () => {