@vkontakte/vkui 6.2.0 → 6.2.2

package/dist/cjs/components/FocusTrap/FocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  mount?: boolean;\n  timeout?: number;\n  onClose?: () => void;\n  /**\n   * Форсированное отключение захвата фокуса\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  disabled = false,\n  mount = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus();\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    recalculateFocusableNodesRef(parentNode);\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || disabled) {\n        return;\n      }\n\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, disabled],\n  );\n\n  const restoreFocusImpl = useCallback(() => {\n    const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n    if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {\n      return;\n    }\n\n    setTimeout(() => {\n      if (restoreFocusTo) {\n        restoreFocusTo.focus();\n        setRestoreFocusTo(null);\n      }\n    }, timeout);\n  }, [restoreFocus, restoreFocusTo, timeout]);\n\n  useIsomorphicLayoutEffect(\n    function calculateRestoreFocusTo() {\n      if (!ref.current || !restoreFocus || !mount) {\n        setRestoreFocusTo(null);\n        return;\n      }\n      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));\n    },\n    [ref, mount, restoreFocus],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      return () => restoreFocusImpl();\n    },\n    [restoreFocusImpl],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusWhenFakeUnmount() {\n      if (!mount) {\n        restoreFocusImpl();\n      }\n    },\n    [mount, restoreFocusImpl],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      if (disabled) {\n        return;\n      }\n\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref, disabled]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","focusableNodesRef","useRef","restoreFocusTo","setRestoreFocusTo","useState","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","useCallback","shouldRestoreFocus","isHTMLElement","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';\nimport { arraysEquals } from '../../helpers/array';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n  contains,\n  getActiveElementByAnotherElement,\n  getWindow,\n  isHTMLElement,\n  useDOM,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  autoFocus?: boolean;\n  restoreFocus?: boolean | (() => boolean);\n  mount?: boolean;\n  timeout?: number;\n  onClose?: () => void;\n  /**\n   * Форсированное отключение захвата фокуса\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  autoFocus = true,\n  restoreFocus = true,\n  disabled = false,\n  mount = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\n\n  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);\n\n  const focusNodeByIndex = (nodeIndex: number) => {\n    const element = focusableNodesRef.current[nodeIndex];\n\n    if (element) {\n      element.focus({\n        preventScroll: true,\n      });\n    }\n  };\n\n  const recalculateFocusableNodesRef = (parentNode: HTMLElement) => {\n    // eslint-disable-next-line no-restricted-properties\n    const newFocusableElements = parentNode.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS);\n\n    const nodes: HTMLElement[] = [];\n    newFocusableElements.forEach((focusableEl) => {\n      const { display, visibility } = getComputedStyle(focusableEl);\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl);\n      }\n    });\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(parentNode);\n    }\n    focusableNodesRef.current = nodes;\n  };\n\n  const onMutateParentHandler = (parentNode: HTMLElement) => {\n    const oldFocusableNodes = [...focusableNodesRef.current];\n\n    recalculateFocusableNodesRef(parentNode);\n\n    if (arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {\n      return;\n    }\n\n    if (document) {\n      const activeElement = document.activeElement as HTMLElement;\n      const currentElementIndex = Math.max(\n        document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1,\n        0,\n      );\n      focusNodeByIndex(currentElementIndex);\n    }\n  };\n\n  useIsomorphicLayoutEffect(\n    function collectFocusableNodesRef() {\n      if (!ref.current) {\n        return;\n      }\n      const parentNode = ref.current;\n      const observer = new MutationObserver(() => onMutateParentHandler(parentNode));\n      observer.observe(ref.current, {\n        subtree: true,\n        childList: true,\n      });\n      recalculateFocusableNodesRef(parentNode);\n      return () => observer.disconnect();\n    },\n    [ref],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToAutoFocusToFirstNode() {\n      if (!ref.current || !autoFocus || disabled) {\n        return;\n      }\n\n      const autoFocusToFirstNode = () => {\n        if (!ref.current || !focusableNodesRef.current.length) {\n          return;\n        }\n        const activeElement = getActiveElementByAnotherElement(ref.current);\n        if (!contains(ref.current, activeElement)) {\n          focusableNodesRef.current[0].focus();\n        }\n      };\n      const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n      return () => {\n        clearTimeout(timeoutId);\n      };\n    },\n    [autoFocus, timeout, disabled],\n  );\n\n  const restoreFocusImpl = useCallback(() => {\n    const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n    if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {\n      return;\n    }\n\n    setTimeout(() => {\n      if (restoreFocusTo) {\n        restoreFocusTo.focus();\n        setRestoreFocusTo(null);\n      }\n    }, timeout);\n  }, [restoreFocus, restoreFocusTo, timeout]);\n\n  useIsomorphicLayoutEffect(\n    function calculateRestoreFocusTo() {\n      if (!ref.current || !restoreFocus || !mount) {\n        setRestoreFocusTo(null);\n        return;\n      }\n      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));\n    },\n    [ref, mount, restoreFocus],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      return () => restoreFocusImpl();\n    },\n    [restoreFocusImpl],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusWhenFakeUnmount() {\n      if (!mount) {\n        restoreFocusImpl();\n      }\n    },\n    [mount, restoreFocusImpl],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\n      if (disabled) {\n        return;\n      }\n\n      const pressedKeyResult = pressedKey(event);\n\n      switch (pressedKeyResult) {\n        case Keys.TAB: {\n          if (!focusableNodesRef.current.length) {\n            return false;\n          }\n\n          const lastIdx = focusableNodesRef.current.length - 1;\n          const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n          const shouldFocusFirstNode =\n            targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n          if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n            event.preventDefault();\n\n            const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n            if (node !== getActiveElementByAnotherElement(node)) {\n              node.focus();\n            }\n\n            return false;\n          }\n\n          break;\n        }\n        case Keys.ESCAPE: {\n          if (onClose) {\n            event.preventDefault();\n            onClose();\n          }\n        }\n      }\n\n      return true;\n    };\n\n    const doc = getWindow(ref.current).document;\n    doc.addEventListener('keydown', onDocumentKeydown, {\n      capture: true,\n    });\n    return () => {\n      doc.removeEventListener('keydown', onDocumentKeydown, true);\n    };\n  }, [onClose, ref, disabled]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","useExternRef","document","useDOM","focusableNodesRef","useRef","restoreFocusTo","setRestoreFocusTo","useState","focusNodeByIndex","nodeIndex","element","current","focus","preventScroll","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","oldFocusableNodes","arraysEquals","activeElement","currentElementIndex","Math","max","indexOf","useIsomorphicLayoutEffect","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","getActiveElementByAnotherElement","contains","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","useCallback","shouldRestoreFocus","isHTMLElement","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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"}

package/dist/cjs/components/GridAvatar/GridAvatar.js

@@ -54,7 +54,7 @@ const GridAvatar = (_param)=>{
                         style: {
                             backgroundImage: `url(${url})`
                         }
-                    }, url) : null)
+                    }, index) : null)
             }),
             children
         ]

package/dist/cjs/components/GridAvatar/GridAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["GRID_AVATAR_DEFAULT_SIZE","GridAvatar","MAX_GRID_LENGTH","warn","warnOnce","src","size","className","children","restProps","process","env","NODE_ENV","length","ImageBase","classNames","div","aria-hidden","map","url","index","style","backgroundImage","Badge","GridAvatarBadge"],"mappings":";;;;;;;;;;;IAQaA,wBAAwB;eAAxBA;;IAgBAC,UAAU;eAAVA;;IAdAC,eAAe;eAAfA;;;;;;;sBAVc;0BACF;2BACsB;iCACY;AAKpD,MAAMF,2BAA2B;AAEjC,MAAME,kBAAkB;AAS/B,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMH,aAAa;QAAC,EACzBI,MAAM,EAAE,EACRC,OAAON,wBAAwB,EAC/BO,SAAS,EACTC,QAAQ,EAEQ,WADbC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,sBAACY,oBAAS,8CAAKL;QAAWH,MAAMA;QAAMC,WAAWQ,IAAAA,gBAAU,oBAAuBR;;0BAChF,qBAACS;gBAAIT,SAAS;gBAA4BU,aAAW;0BAClDZ,IAAIa,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQlB,gCACN,qBAACc;wBAECT,SAAS;wBACTc,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAFnCA,OAIL;;YAGPX;;;AAGP;AAEAP,WAAWsB,KAAK,GAAGC,gCAAe"}
+{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={index}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["GRID_AVATAR_DEFAULT_SIZE","GridAvatar","MAX_GRID_LENGTH","warn","warnOnce","src","size","className","children","restProps","process","env","NODE_ENV","length","ImageBase","classNames","div","aria-hidden","map","url","index","style","backgroundImage","Badge","GridAvatarBadge"],"mappings":";;;;;;;;;;;IAQaA,wBAAwB;eAAxBA;;IAgBAC,UAAU;eAAVA;;IAdAC,eAAe;eAAfA;;;;;;;sBAVc;0BACF;2BACsB;iCACY;AAKpD,MAAMF,2BAA2B;AAEjC,MAAME,kBAAkB;AAS/B,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMH,aAAa;QAAC,EACzBI,MAAM,EAAE,EACRC,OAAON,wBAAwB,EAC/BO,SAAS,EACTC,QAAQ,EAEQ,WADbC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,sBAACY,oBAAS,8CAAKL;QAAWH,MAAMA;QAAMC,WAAWQ,IAAAA,gBAAU,oBAAuBR;;0BAChF,qBAACS;gBAAIT,SAAS;gBAA4BU,aAAW;0BAClDZ,IAAIa,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQlB,gCACN,qBAACc;wBAECT,SAAS;wBACTc,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAFnCC,SAIL;;YAGPZ;;;AAGP;AAEAP,WAAWsB,KAAK,GAAGC,gCAAe"}

package/dist/cjs/components/Image/Image.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { type ImageBadgeProps } from './ImageBadge/ImageBadge';
 export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
@@ -18,9 +19,6 @@ export declare const Image: {
         ({ className, ...restProps }: ImageBadgeProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Overlay: {
-        ({ className, theme: themeProp, visibility: visibilityProp, children, onClick: onClickProp, ...restProps }: ImageBaseOverlayProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+    Overlay: React.FC<ImageBaseOverlayProps>;
 };
 //# sourceMappingURL=Image.d.ts.map

package/dist/cjs/components/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAE5E,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAChC;AA0DD;;GAEG;AACH,eAAO,MAAM,KAAK;+EAMf,UAAU;;;;;;;;;;CAcZ,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAE5E,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAChC;AA0DD;;GAEG;AACH,eAAO,MAAM,KAAK;+EAMf,UAAU;;;;;;;CAcZ,CAAC"}

package/dist/cjs/components/ImageBase/ImageBase.d.ts

@@ -58,9 +58,6 @@ export declare const ImageBase: {
         ({ background, ...restProps }: ImageBaseBadgeProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
-    Overlay: {
-        ({ className, theme: themeProp, visibility: visibilityProp, children, onClick: onClickProp, ...restProps }: ImageBaseOverlayProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+    Overlay: React.FC<ImageBaseOverlayProps>;
 };
 //# sourceMappingURL=ImageBase.d.ts.map

package/dist/cjs/components/ImageBase/ImageBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;iTAyBnB,cAAc;;;;;;;;;;CA2FhB,CAAC"}
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAO5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC9D;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;iTAyBnB,cAAc;;;;;;;CA2FhB,CAAC"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts

@@ -1,42 +1,8 @@
 import * as React from 'react';
-import type { ImageBaseExpectedIconProps } from '../types';
-export interface ImageBaseOverlayProps extends React.AriaAttributes {
-    /**
-     * Задаёт тему оформления.
-     *
-     * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
-     */
-    theme?: 'dark' | 'light';
-    /**
-     * Определяет каким образом должен показываться оверлей.
-     *
-     * - `"on-hover"` – на наведение указателя мыши.
-     * - `"always"` – всегда показывать.
-     *
-     * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
-     */
-    visibility?: 'on-hover' | 'always';
-    /**
-     * Принимает иконку.
-     *
-     *
-     * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.
-     *
-     * > Предпочтительней использовать иконки из `@vkontakte/icons`.
-     *
-     * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же
-     * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы
-     * > использовали иконку.
-     */
-    children: React.ReactElement<ImageBaseExpectedIconProps>;
-    className?: string;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-}
+import type { ImageBaseOverlayInteractiveProps, ImageBaseOverlayNonInteractiveProps } from './types';
+export type ImageBaseOverlayProps = ImageBaseOverlayInteractiveProps | ImageBaseOverlayNonInteractiveProps;
 /**
- * Интерактивный оверлей над картинкой.
+ * Оверлей над картинкой.
  */
-export declare const ImageBaseOverlay: {
-    ({ className, theme: themeProp, visibility: visibilityProp, children, onClick: onClickProp, ...restProps }: ImageBaseOverlayProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const ImageBaseOverlay: React.FC<ImageBaseOverlayProps>;
 //# sourceMappingURL=ImageBaseOverlay.d.ts.map

package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAI3D,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc;IACjE;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB;gHAO1B,qBAAqB;;CAsCvB,CAAC"}
+{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AAiExC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6B5D,CAAC"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js

@@ -15,24 +15,31 @@ const _object_without_properties = require("@swc/helpers/_/_object_without_prope
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
+const _useKeyboard = require("../../../components/Clickable/useKeyboard");
 const _useAdaptivityHasPointer = require("../../../hooks/useAdaptivityHasPointer");
 const _useAppearance = require("../../../hooks/useAppearance");
+const _useExternRef = require("../../../hooks/useExternRef");
+const _useFocusVisible = require("../../../hooks/useFocusVisible");
 const _useFocusVisibleClassName = require("../../../hooks/useFocusVisibleClassName");
-const _Tappable = require("../../Tappable/Tappable");
 const _context = require("../context");
 const _validators = require("../validators");
-const ImageBaseOverlay = (_param)=>{
-    var { className, theme: themeProp, visibility: visibilityProp, children, onClick: onClickProp } = _param, restProps = _object_without_properties._(_param, [
-        "className",
-        "theme",
-        "visibility",
+const _hooks = require("./hooks");
+const ImageBaseOverlayInteractive = (_param)=>{
+    var { children, className, getRootRef, disableInteractive, overlayShown } = _param, restProps = _object_without_properties._(_param, [
         "children",
-        "onClick"
+        "className",
+        "getRootRef",
+        "disableInteractive",
+        "overlayShown"
     ]);
-    const appearance = (0, _useAppearance.useAppearance)();
-    const hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
-    const theme = themeProp !== null && themeProp !== void 0 ? themeProp : appearance;
-    const visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : hasPointer ? 'on-hover' : 'always';
+    const _useFocusVisible1 = (0, _useFocusVisible.useFocusVisible)(), { focusVisible } = _useFocusVisible1, focusEvents = _object_without_properties._(_useFocusVisible1, [
+        "focusVisible"
+    ]);
+    const focusVisibleClassNames = (0, _useFocusVisibleClassName.useFocusVisibleClassName)({
+        focusVisible,
+        mode: 'inside'
+    });
+    const keyboardHandlers = (0, _useKeyboard.useKeyboard)();
     if (process.env.NODE_ENV === 'development') {
         if (children) {
             // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -43,17 +50,51 @@ const ImageBaseOverlay = (_param)=>{
             });
         }
     }
-    const onClick = (onClickProp !== null && onClickProp !== void 0 ? onClickProp : visibility === 'on-hover') ? _vkjs.noop : undefined;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiImageBaseOverlay", visibility === 'always' && "vkuiImageBaseOverlay--visible", theme === 'light' && "vkuiImageBaseOverlay--theme-light", theme === 'dark' && "vkuiImageBaseOverlay--theme-dark", className),
-        hasHover: visibility === 'on-hover',
-        hoverMode: visibility === 'on-hover' ? "vkuiImageBaseOverlay--visible" : undefined,
-        focusVisibleMode: (0, _vkjs.classNames)(_useFocusVisibleClassName.focusVisiblePresetModeClassNames['inside'], "vkuiImageBaseOverlay--visible"),
-        hasActive: false,
-        onClick: onClick,
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._(_object_spread_props._(_object_spread._({}, restProps), {
+        tabIndex: 0,
+        role: "button",
+        className: (0, _vkjs.classNames)("vkuiImageBaseOverlay--clickable", (focusVisible || overlayShown) && "vkuiImageBaseOverlay--visible", focusVisibleClassNames, className),
+        ref: getRootRef
+    }), focusEvents, keyboardHandlers), {
         children: children
     }));
 };
+const ImageBaseOverlayNonInteractive = (_param)=>{
+    var { className, getRootRef, disableInteractive, overlayShown: overlayShownProps } = _param, restProps = _object_without_properties._(_param, [
+        "className",
+        "getRootRef",
+        "disableInteractive",
+        "overlayShown"
+    ]);
+    const rootRef = (0, _useExternRef.useExternRef)(getRootRef);
+    const { shown: overlayShown, onClick: onOverlayClick } = (0, _hooks.useNonInteractiveOverlayProps)(rootRef);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({}, restProps), {
+        ref: rootRef,
+        className: (0, _vkjs.classNames)((overlayShown || overlayShownProps) && "vkuiImageBaseOverlay--visible", className),
+        onClick: onOverlayClick
+    }));
+};
+const ImageBaseOverlay = (_param)=>{
+    var { className, theme: themeProp, visibility: visibilityProp } = _param, restProps = _object_without_properties._(_param, [
+        "className",
+        "theme",
+        "visibility"
+    ]);
+    const appearance = (0, _useAppearance.useAppearance)();
+    const hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
+    const theme = themeProp !== null && themeProp !== void 0 ? themeProp : appearance;
+    const visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : hasPointer ? 'on-hover' : 'always';
+    const commonClassNames = (0, _vkjs.classNames)("vkuiImageBaseOverlay", theme === 'light' && "vkuiImageBaseOverlay--theme-light", theme === 'dark' && "vkuiImageBaseOverlay--theme-dark", className);
+    const commonProps = {
+        className: commonClassNames,
+        overlayShown: visibility === 'always'
+    };
+    // Не делаем деструктуризацию пропа, потому что Typescript не вывозит
+    if (restProps.disableInteractive) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(ImageBaseOverlayNonInteractive, _object_spread._({}, restProps, commonProps));
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ImageBaseOverlayInteractive, _object_spread._({}, restProps, commonProps));
+};
 ImageBaseOverlay.displayName = 'ImageBaseOverlay';
 
 //# sourceMappingURL=ImageBaseOverlay.js.map

package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { focusVisiblePresetModeClassNames } from '../../../hooks/useFocusVisibleClassName';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: 'on-hover' | 'always';\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/**\n * Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  children,\n  onClick: onClickProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  const onClick = onClickProp ?? visibility === 'on-hover' ? noop : undefined;\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['ImageBaseOverlay'],\n        visibility === 'always' && styles['ImageBaseOverlay--visible'],\n        theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n        theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n        className,\n      )}\n      hasHover={visibility === 'on-hover'}\n      hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n      focusVisibleMode={classNames(\n        focusVisiblePresetModeClassNames['inside'],\n        styles['ImageBaseOverlay--visible'],\n      )}\n      hasActive={false}\n      onClick={onClick}\n    >\n      {children}\n    </Tappable>\n  );\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["ImageBaseOverlay","className","theme","themeProp","visibility","visibilityProp","children","onClick","onClickProp","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateOverlayIcon","name","value","noop","undefined","Tappable","classNames","hasHover","hoverMode","focusVisibleMode","focusVisiblePresetModeClassNames","hasActive","displayName"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;iEA/CU;sBACU;yCACO;+BACV;0CACmB;0BACxB;yBACQ;4BAEG;AAuC7B,MAAMA,mBAAmB;QAAC,EAC/BC,SAAS,EACTC,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1BC,QAAQ,EACRC,SAASC,WAAW,EAEE,WADnBC;QALHR;QACAC;QACAE;QACAE;QACAC;;IAGA,MAAMG,aAAaC,IAAAA,4BAAa;IAChC,MAAMC,aAAaC,IAAAA,gDAAuB;IAC1C,MAAMX,QAAQC,sBAAAA,uBAAAA,YAAaO;IAC3B,MAAMN,aAAaC,2BAAAA,4BAAAA,iBAAmBO,aAAa,aAAa;IAEhE,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIV,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEW,IAAI,EAAE,GAAGC,OAAMC,UAAU,CAACC,yBAAgB;YAClDC,IAAAA,+BAAmB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOjB;YAAS;QAChE;IACF;IAEA,MAAMC,UAAUC,CAAAA,wBAAAA,yBAAAA,cAAeJ,eAAe,UAAS,IAAIoB,UAAI,GAAGC;IAElE,qBACE,qBAACC,kBAAQ,8CACHjB;QACJR,WAAW0B,IAAAA,gBAAU,0BAEnBvB,eAAe,6CACfF,UAAU,gDACVA,UAAU,8CACVD;QAEF2B,UAAUxB,eAAe;QACzByB,WAAWzB,eAAe,+CAAmDqB;QAC7EK,kBAAkBH,IAAAA,gBAAU,EAC1BI,0DAAgC,CAAC,SAAS;QAG5CC,WAAW;QACXzB,SAASA;kBAERD;;AAGP;AAEAN,iBAAiBiC,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboard } from '../../../components/Clickable/useKeyboard';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n  const keyboardHandlers = useKeyboard();\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      const { size } = React.useContext(ImageBaseContext);\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return (\n    <div\n      {...restProps}\n      tabIndex={0}\n      role=\"button\"\n      className={classNames(\n        styles['ImageBaseOverlay--clickable'],\n        (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],\n        focusVisibleClassNames,\n        className,\n      )}\n      ref={getRootRef}\n      {...focusEvents}\n      {...keyboardHandlers}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames(\n        (overlayShown || overlayShownProps) && styles['ImageBaseOverlay--visible'],\n        className,\n      )}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  const commonClassNames = classNames(\n    styles['ImageBaseOverlay'],\n    theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n    theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n    className,\n  );\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (restProps.disableInteractive) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["ImageBaseOverlay","ImageBaseOverlayInteractive","children","className","getRootRef","disableInteractive","overlayShown","restProps","useFocusVisible","focusVisible","focusEvents","focusVisibleClassNames","useFocusVisibleClassName","mode","keyboardHandlers","useKeyboard","process","env","NODE_ENV","size","React","useContext","ImageBaseContext","validateOverlayIcon","name","value","div","tabIndex","role","classNames","ref","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","useExternRef","shown","onClick","onOverlayClick","useNonInteractiveOverlayProps","theme","themeProp","visibility","visibilityProp","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","commonClassNames","commonProps","displayName"],"mappings":";;;;+BAuFaA;;;eAAAA;;;;;;;;iEAvFU;sBACI;6BACC;yCACY;+BACV;8BACD;iCACG;0CACS;yBACR;4BACG;uBACU;AAW9C,MAAMC,8BAA8B;QAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,YAAY,EAEkD,WAD3DC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAyCE,oBAAAA,IAAAA,gCAAe,KAAlD,EAAEC,YAAY,EAAkB,GAAGD,mBAAhBE,2CAAgBF;QAAjCC;;IACR,MAAME,yBAAyBC,IAAAA,kDAAwB,EAAC;QAAEH;QAAcI,MAAM;IAAS;IACvF,MAAMC,mBAAmBC,IAAAA,wBAAW;IAEpC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIhB,UAAU;YACZ,sDAAsD;YACtD,MAAM,EAAEiB,IAAI,EAAE,GAAGC,OAAMC,UAAU,CAACC,yBAAgB;YAClDC,IAAAA,+BAAmB,EAACJ,MAAM;gBAAEK,MAAM;gBAAYC,OAAOvB;YAAS;QAChE;IACF;IAEA,qBACE,qBAACwB,2FACKnB;QACJoB,UAAU;QACVC,MAAK;QACLzB,WAAW0B,IAAAA,gBAAU,qCAEnB,AAACpB,CAAAA,gBAAgBH,YAAW,sCAC5BK,wBACAR;QAEF2B,KAAK1B;QACDM,aACAI;kBAEHZ;;AAGP;AAEA,MAAM6B,iCAAiC;QAAC,EACtC5B,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,cAAc0B,iBAAiB,EAEkC,WAD9DzB;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAM2B,UAAUC,IAAAA,0BAAY,EAAC9B;IAC7B,MAAM,EAAE+B,OAAO7B,YAAY,EAAE8B,SAASC,cAAc,EAAE,GAAGC,IAAAA,oCAA6B,EAACL;IAEvF,qBACE,qBAACP,mDACKnB;QACJuB,KAAKG;QACL9B,WAAW0B,IAAAA,gBAAU,EACnB,AAACvB,CAAAA,gBAAgB0B,iBAAgB,sCACjC7B;QAEFiC,SAASC;;AAGf;AAKO,MAAMrC,mBAAoD;QAAC,EAChEG,SAAS,EACToC,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAEJ,WADnBnC;QAHHJ;QACAoC;QACAE;;IAGA,MAAME,aAAaC,IAAAA,4BAAa;IAChC,MAAMC,aAAaC,IAAAA,gDAAuB;IAC1C,MAAMP,QAAQC,sBAAAA,uBAAAA,YAAaG;IAC3B,MAAMF,aAAaC,2BAAAA,4BAAAA,iBAAmBG,aAAa,aAAa;IAEhE,MAAME,mBAAmBlB,IAAAA,gBAAU,0BAEjCU,UAAU,gDACVA,UAAU,8CACVpC;IAGF,MAAM6C,cAAc;QAClB7C,WAAW4C;QACXzC,cAAcmC,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAIlC,UAAUF,kBAAkB,EAAE;QAChC,qBAAO,qBAAC0B,qDAAmCxB,WAAeyC;IAC5D;IAEA,qBAAO,qBAAC/C,kDAAgCM,WAAeyC;AACzD;AAEAhD,iBAAiBiD,WAAW,GAAG"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/hooks.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare function useNonInteractiveOverlayProps(rootRef: React.MutableRefObject<HTMLElement | null>): {
+    shown: boolean;
+    onClick: (event: React.MouseEvent) => void;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/cjs/components/ImageBase/ImageBaseOverlay/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;qBAIvE,KAAK,CAAC,UAAU;EAiBzC"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/hooks.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useNonInteractiveOverlayProps", {
+    enumerable: true,
+    get: function() {
+        return useNonInteractiveOverlayProps;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useFocusWithin = require("../../../hooks/useFocusWithin");
+const _useIsomorphicLayoutEffect = require("../../../lib/useIsomorphicLayoutEffect");
+function useNonInteractiveOverlayProps(rootRef) {
+    const focusWithin = (0, _useFocusWithin.useFocusWithin)(rootRef);
+    const [nonInteractiveFocusShown, setNonInteractiveFocusShown] = _react.useState(false);
+    function onClick(event) {
+        if (event.detail > 0) {
+            // Если мы попали на вложенный в оверлей элемент через focus,
+            // то при клике мышкой мы должны начать реагировать на hover-состояние,
+            // даже если фокус всё ещё остался на вложенном элементе (был по нему клик)
+            setNonInteractiveFocusShown(false);
+        }
+    }
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
+        setNonInteractiveFocusShown(focusWithin);
+    }, [
+        focusWithin
+    ]);
+    return {
+        shown: nonInteractiveFocusShown && focusWithin,
+        onClick
+    };
+}
+
+//# sourceMappingURL=hooks.js.map

package/dist/cjs/components/ImageBase/ImageBaseOverlay/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusWithin } from '../../../hooks/useFocusWithin';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\n\nexport function useNonInteractiveOverlayProps(rootRef: React.MutableRefObject<HTMLElement | null>) {\n  const focusWithin = useFocusWithin(rootRef);\n  const [nonInteractiveFocusShown, setNonInteractiveFocusShown] = React.useState(false);\n\n  function onClick(event: React.MouseEvent) {\n    if (event.detail > 0) {\n      // Если мы попали на вложенный в оверлей элемент через focus,\n      // то при клике мышкой мы должны начать реагировать на hover-состояние,\n      // даже если фокус всё ещё остался на вложенном элементе (был по нему клик)\n      setNonInteractiveFocusShown(false);\n    }\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    setNonInteractiveFocusShown(focusWithin);\n  }, [focusWithin]);\n\n  return {\n    shown: nonInteractiveFocusShown && focusWithin,\n    onClick,\n  };\n}\n"],"names":["useNonInteractiveOverlayProps","rootRef","focusWithin","useFocusWithin","nonInteractiveFocusShown","setNonInteractiveFocusShown","React","useState","onClick","event","detail","useIsomorphicLayoutEffect","shown"],"mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;gCACQ;2CACW;AAEnC,SAASA,8BAA8BC,OAAmD;IAC/F,MAAMC,cAAcC,IAAAA,8BAAc,EAACF;IACnC,MAAM,CAACG,0BAA0BC,4BAA4B,GAAGC,OAAMC,QAAQ,CAAC;IAE/E,SAASC,QAAQC,KAAuB;QACtC,IAAIA,MAAMC,MAAM,GAAG,GAAG;YACpB,6DAA6D;YAC7D,uEAAuE;YACvE,2EAA2E;YAC3EL,4BAA4B;QAC9B;IACF;IAEAM,IAAAA,oDAAyB,EAAC;QACxBN,4BAA4BH;IAC9B,GAAG;QAACA;KAAY;IAEhB,OAAO;QACLU,OAAOR,4BAA4BF;QACnCM;IACF;AACF"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/types.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { HasRootRef } from '../../../types';
+import type { ImageBaseExpectedIconProps } from '../types';
+export interface ImageBaseOverlayCommonProps extends React.AriaAttributes, HasRootRef<HTMLDivElement> {
+    /**
+     * Задаёт тему оформления.
+     *
+     * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.
+     */
+    theme?: 'dark' | 'light';
+    /**
+     * Определяет каким образом должен показываться оверлей.
+     *
+     * - `"on-hover"` – на наведение указателя мыши.
+     * - `"always"` – всегда показывать.
+     *
+     * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
+     */
+    visibility?: 'on-hover' | 'always';
+    className?: string;
+}
+export interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {
+    /**
+     * Обработчик взаимодействия с элементом.
+     * Свойство несовместимо с `nonInteractive={true}`.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Принимает иконку.
+     *
+     *
+     * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.
+     *
+     * > Предпочтительней использовать иконки из `@vkontakte/icons`.
+     *
+     * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же
+     * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы
+     * > использовали иконку.
+     */
+    children: React.ReactElement<ImageBaseExpectedIconProps>;
+    disableInteractive?: false;
+}
+export interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCommonProps {
+    /**
+     * По умолчанию сам компонент является интерактивным элементом. Передав значение `true`, можно отключить
+     * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.
+     *
+     * TODO [>=7]: для определения интерактивности завязываться на св-во `onClick`
+     */
+    disableInteractive: true;
+    onClick?: undefined;
+    children: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/cjs/components/ImageBase/ImageBaseOverlay/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAE3D,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,EAC1B,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gCAAiC,SAAQ,2BAA2B;IACnF;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IACzD,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,mCAAoC,SAAQ,2BAA2B;IACtF;;;;;OAKG;IACH,kBAAkB,EAAE,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/types.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/ImageBase/ImageBaseOverlay/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../../types';\nimport type { ImageBaseExpectedIconProps } from '../types';\n\nexport interface ImageBaseOverlayCommonProps\n  extends React.AriaAttributes,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт тему оформления.\n   *\n   * > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n   */\n  theme?: 'dark' | 'light';\n  /**\n   * Определяет каким образом должен показываться оверлей.\n   *\n   * - `\"on-hover\"` – на наведение указателя мыши.\n   * - `\"always\"` – всегда показывать.\n   *\n   * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n   */\n  visibility?: 'on-hover' | 'always';\n  className?: string;\n}\n\nexport interface ImageBaseOverlayInteractiveProps extends ImageBaseOverlayCommonProps {\n  /**\n   * Обработчик взаимодействия с элементом.\n   * Свойство несовместимо с `nonInteractive={true}`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Принимает иконку.\n   *\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   */\n  children: React.ReactElement<ImageBaseExpectedIconProps>;\n  disableInteractive?: false;\n}\n\nexport interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCommonProps {\n  /**\n   * По умолчанию сам компонент является интерактивным элементом. Передав значение `true`, можно отключить\n   * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.\n   *\n   * TODO [>=7]: для определения интерактивности завязываться на св-во `onClick`\n   */\n  disableInteractive: true;\n  onClick?: undefined;\n  children: React.ReactNode;\n}\n"],"names":[],"mappings":";;;;;iEAAuB"}

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContext.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAW7D,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,2DAM5B,uBAAuB,mDAwDzB,CAAC"}
+{"version":3,"file":"PanelHeaderContext.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAW7D,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,2DAM5B,uBAAuB,mDA0DzB,CAAC"}

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js

@@ -36,7 +36,7 @@ const PanelHeaderContext = (_param)=>{
     const platform = (0, _usePlatform.usePlatform)();
     const { sizeX = 'none' } = (0, _useAdaptivity.useAdaptivity)();
     const elementRef = _react.useRef(null);
-    const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(opened ? 'enter' : 'exit');
+    const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(opened ? 'enter' : 'exit', undefined, true);
     const visible = animationState !== 'exited';
     (0, _ScrollContext.useScrollLock)(platform !== 'vkcom' && visible);
     const handleGlobalOnClickOutside = _react.useCallback((event)=>{

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  compact: styles['PanelHeaderContext--sizeX-compact'],\n  regular: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  opened = false,\n  className,\n  onClose,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    opened ? 'enter' : 'exit',\n  );\n  const visible = animationState !== 'exited';\n\n  useScrollLock(platform !== 'vkcom' && visible);\n\n  const handleGlobalOnClickOutside = React.useCallback(\n    (event: MouseEvent) => {\n      if (opened) {\n        event.stopPropagation();\n        onClose();\n      }\n    },\n    [opened, onClose],\n  );\n\n  useGlobalOnClickOutside(handleGlobalOnClickOutside, visible ? elementRef : null);\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === 'ios' && styles['PanelHeaderContext--ios'],\n        opened ? styles['PanelHeaderContext--opened'] : styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      <div\n        onClick={(event) => {\n          event.stopPropagation();\n          onClose();\n        }}\n        className={styles['PanelHeaderContext__fade']}\n      />\n      <div\n        data-testid={process.env.NODE_ENV === 'test' ? 'content' : undefined}\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        {...animationHandlers}\n      >\n        <div className={styles['PanelHeaderContext__content']}>{children}</div>\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["PanelHeaderContext","sizeXClassNames","none","compact","regular","children","opened","className","onClose","restProps","platform","usePlatform","sizeX","useAdaptivity","elementRef","React","useRef","animationState","animationHandlers","useCSSKeyframesAnimationController","visible","useScrollLock","handleGlobalOnClickOutside","useCallback","event","stopPropagation","useGlobalOnClickOutside","FixedLayout","classNames","vertical","div","onClick","data-testid","process","env","NODE_ENV","undefined","ref"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;+BACG;yCACU;6BACZ;2BACuB;+BAErB;6BACF;AAG5B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;IACPC,OAAO;AACT;AAUO,MAAMJ,qBAAqB;QAAC,EACjCK,QAAQ,EACRC,SAAS,KAAK,EACdC,SAAS,EACTC,OAAO,EAEiB,WADrBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,aAAaC,OAAMC,MAAM,CAAiB;IAChD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,6CAAkC,EAC5Eb,SAAS,UAAU;IAErB,MAAMc,UAAUH,mBAAmB;IAEnCI,IAAAA,4BAAa,EAACX,aAAa,WAAWU;IAEtC,MAAME,6BAA6BP,OAAMQ,WAAW,CAClD,CAACC;QACC,IAAIlB,QAAQ;YACVkB,MAAMC,eAAe;YACrBjB;QACF;IACF,GACA;QAACF;QAAQE;KAAQ;IAGnBkB,IAAAA,gDAAuB,EAACJ,4BAA4BF,UAAUN,aAAa;IAE3E,IAAI,CAACM,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,sBAACO,wBAAW,8CACNlB;QACJF,WAAWqB,IAAAA,gBAAU,4BAEnBlB,aAAa,wCACbJ,+EACAL,eAAe,CAACW,MAAM,EACtBL;QAEFsB,UAAS;;0BAET,qBAACC;gBACCC,SAAS,CAACP;oBACRA,MAAMC,eAAe;oBACrBjB;gBACF;gBACAD,SAAS;;0BAEX,qBAACuB;gBACCE,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,YAAYC;gBAC3D7B,SAAS;gBACT8B,KAAKvB;eACDI;0BAEJ,cAAA,qBAACY;oBAAIvB,SAAS;8BAA0CF;;;;;AAIhE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  compact: styles['PanelHeaderContext--sizeX-compact'],\n  regular: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  opened = false,\n  className,\n  onClose,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    opened ? 'enter' : 'exit',\n    undefined,\n    true,\n  );\n  const visible = animationState !== 'exited';\n\n  useScrollLock(platform !== 'vkcom' && visible);\n\n  const handleGlobalOnClickOutside = React.useCallback(\n    (event: MouseEvent) => {\n      if (opened) {\n        event.stopPropagation();\n        onClose();\n      }\n    },\n    [opened, onClose],\n  );\n\n  useGlobalOnClickOutside(handleGlobalOnClickOutside, visible ? elementRef : null);\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === 'ios' && styles['PanelHeaderContext--ios'],\n        opened ? styles['PanelHeaderContext--opened'] : styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      <div\n        onClick={(event) => {\n          event.stopPropagation();\n          onClose();\n        }}\n        className={styles['PanelHeaderContext__fade']}\n      />\n      <div\n        data-testid={process.env.NODE_ENV === 'test' ? 'content' : undefined}\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        {...animationHandlers}\n      >\n        <div className={styles['PanelHeaderContext__content']}>{children}</div>\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["PanelHeaderContext","sizeXClassNames","none","compact","regular","children","opened","className","onClose","restProps","platform","usePlatform","sizeX","useAdaptivity","elementRef","React","useRef","animationState","animationHandlers","useCSSKeyframesAnimationController","undefined","visible","useScrollLock","handleGlobalOnClickOutside","useCallback","event","stopPropagation","useGlobalOnClickOutside","FixedLayout","classNames","vertical","div","onClick","data-testid","process","env","NODE_ENV","ref"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;+BACG;yCACU;6BACZ;2BACuB;+BAErB;6BACF;AAG5B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;IACPC,OAAO;AACT;AAUO,MAAMJ,qBAAqB;QAAC,EACjCK,QAAQ,EACRC,SAAS,KAAK,EACdC,SAAS,EACTC,OAAO,EAEiB,WADrBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,aAAaC,OAAMC,MAAM,CAAiB;IAChD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,6CAAkC,EAC5Eb,SAAS,UAAU,QACnBc,WACA;IAEF,MAAMC,UAAUJ,mBAAmB;IAEnCK,IAAAA,4BAAa,EAACZ,aAAa,WAAWW;IAEtC,MAAME,6BAA6BR,OAAMS,WAAW,CAClD,CAACC;QACC,IAAInB,QAAQ;YACVmB,MAAMC,eAAe;YACrBlB;QACF;IACF,GACA;QAACF;QAAQE;KAAQ;IAGnBmB,IAAAA,gDAAuB,EAACJ,4BAA4BF,UAAUP,aAAa;IAE3E,IAAI,CAACO,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,sBAACO,wBAAW,8CACNnB;QACJF,WAAWsB,IAAAA,gBAAU,4BAEnBnB,aAAa,wCACbJ,+EACAL,eAAe,CAACW,MAAM,EACtBL;QAEFuB,UAAS;;0BAET,qBAACC;gBACCC,SAAS,CAACP;oBACRA,MAAMC,eAAe;oBACrBlB;gBACF;gBACAD,SAAS;;0BAEX,qBAACwB;gBACCE,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,YAAYhB;gBAC3Db,SAAS;gBACT8B,KAAKvB;eACDI;0BAEJ,cAAA,qBAACa;oBAAIxB,SAAS;8BAA0CF;;;;;AAIhE"}

package/dist/cjs/components/Popover/Popover.d.ts

@@ -16,7 +16,7 @@ export type PopoverOnShownChange = OnShownChange;
  * @public
  */
 export type PopoverContentRenderProp = FloatingContentRenderProp;
-type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowHeight' | 'arrowPadding' | 'placement' | 'onPlacementChange' | 'trigger' | 'content' | 'hoverDelay' | 'closeAfterClick' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'shown' | 'onShownChange' | 'usePortal' | 'sameWidth' | 'hideWhenReferenceHidden' | 'disabled' | 'disableInteractive' | 'disableCloseOnClickOutside' | 'disableCloseOnEscKey' | 'autoFocus' | 'restoreFocus' | 'children' | 'zIndex' | 'disableFlipMiddleware'>;
+type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowHeight' | 'arrowPadding' | 'placement' | 'onPlacementChange' | 'trigger' | 'content' | 'hoverDelay' | 'closeAfterClick' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'shown' | 'onShownChange' | 'usePortal' | 'sameWidth' | 'hideWhenReferenceHidden' | 'disabled' | 'disableInteractive' | 'disableCloseOnClickOutside' | 'disableCloseOnEscKey' | 'autoFocus' | 'restoreFocus' | 'children' | 'zIndex' | 'disableFlipMiddleware' | 'customMiddlewares'>;
 /**
  * @public
  */
@@ -62,6 +62,6 @@ export interface PopoverProps extends AllowedFloatingComponentProps, Omit<HTMLAt
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
-export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted, defaultShown, shown: shownProp, onShownChange, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted, customMiddlewares, defaultShown, shown: shownProp, onShownChange, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Popover.d.ts.map

package/dist/cjs/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAEjE,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,OAAO,GACP,eAAe,GACf,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,UAAU,GACV,oBAAoB,GACpB,4BAA4B,GAC5B,sBAAsB,GACtB,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,GACR,uBAAuB,CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC;IAC/E;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,8fA4CjB,YAAY,4CA2Gd,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAEjE,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,OAAO,GACP,eAAe,GACf,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,UAAU,GACV,oBAAoB,GACpB,4BAA4B,GAC5B,sBAAsB,GACtB,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,GACR,uBAAuB,GACvB,mBAAmB,CACtB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC;IAC/E;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,ihBA6CjB,YAAY,4CA4Gd,CAAC"}

package/dist/cjs/components/Popover/Popover.js

@@ -25,7 +25,7 @@ const _FloatingArrow = require("../FloatingArrow/FloatingArrow");
 const _FocusTrap = require("../FocusTrap/FocusTrap");
 const Popover = (_param)=>{
     var { // UsePopoverProps
-    arrow: withArrow, arrowHeight = _DefaultIcon.DEFAULT_ARROW_HEIGHT, arrowPadding = _DefaultIcon.DEFAULT_ARROW_PADDING, placement: expectedPlacement = 'bottom-start', onPlacementChange, disableFlipMiddleware = false, trigger = 'click', content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted = false, // uncontrolled
+    arrow: withArrow, arrowHeight = _DefaultIcon.DEFAULT_ARROW_HEIGHT, arrowPadding = _DefaultIcon.DEFAULT_ARROW_PADDING, placement: expectedPlacement = 'bottom-start', onPlacementChange, disableFlipMiddleware = false, trigger = 'click', content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted = false, customMiddlewares, // uncontrolled
     defaultShown = false, // controlled
     shown: shownProp, onShownChange, // Для AppRootPortal
     usePortal = true, // Для FloatingArrow
@@ -51,6 +51,7 @@ const Popover = (_param)=>{
         "disableCloseOnClickOutside",
         "disableCloseOnEscKey",
         "keepMounted",
+        "customMiddlewares",
         "defaultShown",
         "shown",
         "onShownChange",
@@ -76,7 +77,8 @@ const Popover = (_param)=>{
         offsetByCrossAxis,
         sameWidth,
         hideWhenReferenceHidden,
-        disableFlipMiddleware
+        disableFlipMiddleware,
+        customMiddlewares
     });
     const { placement: resolvedPlacement, shown, willBeHide, refs, referenceProps, floatingProps, middlewareData, onClose, onRestoreFocus, onEscapeKeyDown } = (0, _floating.useFloatingWithInteractions)({
         middlewares,