@vkontakte/vkui 6.1.2 → 6.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import { AllHTMLAttributes, useContext, useRef } 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';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\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  timeout?: number;\n  onClose?: () => void;\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  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n  const { document } = useDOM();\n\n  const { keyboardInput } = useContext(AppRootContext);\n  const focusableNodesRef = useRef<HTMLElement[]>([]);\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 || !keyboardInput) {\n        return;\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, keyboardInput],\n  );\n\n  useIsomorphicLayoutEffect(\n    function tryToRestoreFocusOnUnmount() {\n      if (!ref.current || !restoreFocus) {\n        return;\n      }\n\n      const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n      return () => {\n        const shouldRestoreFocus =\n          typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n        if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n          return;\n        }\n\n        setTimeout(() => {\n          if (restoreFocusTo) {\n            restoreFocusTo.focus();\n          }\n        }, timeout);\n      };\n    },\n    [restoreFocus, timeout],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const onDocumentKeydown = (event: KeyboardEvent) => {\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]);\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["useContext","useRef","useExternRef","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","contains","getActiveElementByAnotherElement","getWindow","isHTMLElement","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","document","keyboardInput","focusableNodesRef","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","onDocumentKeydown","event","pressedKeyResult","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","addEventListener","capture","removeEventListener","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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":["useCallback","useRef","useState","useExternRef","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","contains","getActiveElementByAnotherElement","getWindow","isHTMLElement","useDOM","useIsomorphicLayoutEffect","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","autoFocus","restoreFocus","disabled","mount","timeout","getRootRef","children","restProps","ref","document","focusableNodesRef","restoreFocusTo","setRestoreFocusTo","focusNodeByIndex","nodeIndex","element","current","focus","recalculateFocusableNodesRef","parentNode","newFocusableElements","querySelectorAll","nodes","forEach","focusableEl","display","visibility","getComputedStyle","push","length","onMutateParentHandler","activeElement","currentElementIndex","Math","max","indexOf","collectFocusableNodesRef","observer","MutationObserver","observe","subtree","childList","disconnect","tryToAutoFocusToFirstNode","autoFocusToFirstNode","timeoutId","setTimeout","clearTimeout","restoreFocusImpl","shouldRestoreFocus","calculateRestoreFocusTo","tryToRestoreFocusOnUnmount","tryToRestoreFocusWhenFakeUnmount","onDocumentKeydown","event","pressedKeyResult","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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"}

package/dist/cssm/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"names":["React","classNames","Footnote","styles","Footer","children","className","restProps","Component"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAwB;IACvE,qBACE,KAACL;QAASM,WAAU;QAAU,GAAGD,SAAS;QAAED,WAAWL,WAAWE,MAAM,CAAC,SAAS,EAAEG;kBACjFD;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"names":["React","classNames","Footnote","styles","Footer","children","className","restProps","Component"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAwB;IACvE,qBACE,KAACL;QAASM,WAAU;QAAU,GAAGD,SAAS;QAAED,WAAWL,WAAWE,MAAM,CAAC,SAAS,EAAEG;kBACjFD;;AAGP,EAAE"}

package/dist/cssm/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n  error: styles['FormField--status-error'],\n  valid: styles['FormField--status-valid'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  /**\n   * Режим отображения.\n   *\n   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n   * - `plain` — показывает только текст-подсказку.\n   */\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const focusWithin = useFocusWithin(elRef);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible: focusWithin,\n    mode: styles['FormField--focus-visible'],\n  });\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        focusVisibleClassNames,\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusVisibleClassName","useFocusWithin","styles","sizeYClassNames","none","stylesStatus","error","valid","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAAC,UAAU,EAAEA,MAAM,CAAC,2BAA2B;AACjD;AAEA,MAAMG,eAAe;IACnBC,OAAOJ,MAAM,CAAC,0BAA0B;IACxCK,OAAOL,MAAM,CAAC,0BAA0B;AAC1C;AAuCA;;CAEC,GACD,OAAO,MAAMM,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQpB,aAAaa;IAC3B,MAAM,EAAEQ,QAAQ,MAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAC;IAEzC,MAAMC,cAAcvB,eAAekB;IACnC,MAAMM,yBAAyBzB,yBAAyB;QACtD0B,cAAcF;QACdR,MAAMd,MAAM,CAAC,2BAA2B;IAC1C;IAEA,MAAMyB,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAACb;QACE,GAAGS,SAAS;QACba,KAAKZ;QACLa,cAAcL;QACdM,cAAcH;QACdb,WAAWpB,WACTK,MAAM,CAAC,YAAY,EACnBc,SAAS,aAAad,MAAM,CAAC,0BAA0B,EACvDQ,WAAW,aAAaL,YAAY,CAACK,OAAO,EAC5CU,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CL,YAAYb,MAAM,CAAC,sBAAsB,EACzC,CAACa,YAAYM,SAASnB,MAAM,CAAC,mBAAmB,EAChDuB,wBACAR;;YAGDJ,wBAAU,KAACqB;gBAAKjB,WAAWf,MAAM,CAAC,oBAAoB;0BAAGW;;YACzDF;YACAG,uBACC,KAACoB;gBAAKjB,WAAWpB,WAAWK,MAAM,CAAC,mBAAmB,EAAE;0BACrDY;;0BAGL,KAACoB;gBAAKC,aAAW;gBAAClB,WAAWf,MAAM,CAAC,oBAAoB;;;;AAG9D,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n  error: styles['FormField--status-error'],\n  valid: styles['FormField--status-valid'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  /**\n   * Режим отображения.\n   *\n   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n   * - `plain` — показывает только текст-подсказку.\n   */\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const focusWithin = useFocusWithin(elRef);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible: focusWithin,\n    mode: styles['FormField--focus-visible'],\n  });\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        focusVisibleClassNames,\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusVisibleClassName","useFocusWithin","styles","sizeYClassNames","none","stylesStatus","error","valid","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","span","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAAC,UAAU,EAAEA,MAAM,CAAC,2BAA2B;AACjD;AAEA,MAAMG,eAAe;IACnBC,OAAOJ,MAAM,CAAC,0BAA0B;IACxCK,OAAOL,MAAM,CAAC,0BAA0B;AAC1C;AAuCA;;CAEC,GACD,OAAO,MAAMM,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQpB,aAAaa;IAC3B,MAAM,EAAEQ,QAAQ,MAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAC;IAEzC,MAAMC,cAAcvB,eAAekB;IACnC,MAAMM,yBAAyBzB,yBAAyB;QACtD0B,cAAcF;QACdR,MAAMd,MAAM,CAAC,2BAA2B;IAC1C;IAEA,MAAMyB,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAACb;QACE,GAAGS,SAAS;QACba,KAAKZ;QACLa,cAAcL;QACdM,cAAcH;QACdb,WAAWpB,WACTK,MAAM,CAAC,YAAY,EACnBc,SAAS,aAAad,MAAM,CAAC,0BAA0B,EACvDQ,WAAW,aAAaL,YAAY,CAACK,OAAO,EAC5CU,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CL,YAAYb,MAAM,CAAC,sBAAsB,EACzC,CAACa,YAAYM,SAASnB,MAAM,CAAC,mBAAmB,EAChDuB,wBACAR;;YAGDJ,wBAAU,KAACqB;gBAAKjB,WAAWf,MAAM,CAAC,oBAAoB;0BAAGW;;YACzDF;YACAG,uBACC,KAACoB;gBAAKjB,WAAWpB,WAAWK,MAAM,CAAC,mBAAmB,EAAE;0BACrDY;;0BAGL,KAACoB;gBAAKC,aAAW;gBAAClB,WAAWf,MAAM,CAAC,oBAAoB;;;;AAG9D,EAAE"}

package/dist/cssm/components/FormItem/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n  error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),\n  valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  /**\n   * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n   */\n  topMultiline?: boolean;\n  /**\n   * Позволяет поменять тег используемый для top\n   * Если оставить пустым, то тег top будет span.\n   * Если оставить пустым и использовать htmlFor, то тег top будет label.\n   */\n  topComponent?: React.ElementType;\n  /**\n   * Позволяет полностью заменить шапку поля пользовательским компонентом.\n   *\n   * @since 6.1.0\n   *\n   * TODO [>=7]: удалить и использовать top - оно будет принимать либо строку, либо подкомпонент\n   */\n  topNode?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n  /**\n   * Удаляет внешние отступы вокруг компонента\n   * @since 5.8.0\n   */\n  noPadding?: boolean;\n  /**\n   * Помечает поле обязательным\n   */\n  required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  topMultiline,\n  topComponent: topComponentProp,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  topNode,\n  required = false,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(topNode) ? (\n        topNode\n      ) : hasReactNode(top) ? (\n        <FormItemTop>\n          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} multiline={topMultiline}>\n            {top}\n          </FormItemTopLabel>\n        </FormItemTop>\n      ) : null}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  const context = useObjectMemo({ required, topMultiline });\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        styles['FormItem'],\n        !noPadding && styles['FormItem--withPadding'],\n        'vkuiInternalFormItem',\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      <FormItemContext.Provider value={context}>\n        {removable ? (\n          <Removable\n            align=\"start\"\n            onRemove={(e) => {\n              if (rootEl?.current) {\n                onRemove(e, rootEl.current);\n              }\n            }}\n            removePlaceholder={removePlaceholder}\n            indent={removable === 'indent'}\n          >\n            <div\n              className={classNames(\n                styles['FormItem__removable'],\n                'vkuiInternalFormItem__removable',\n              )}\n            >\n              {wrappedChildren}\n            </div>\n          </Removable>\n        ) : (\n          wrappedChildren\n        )}\n      </FormItemContext.Provider>\n    </RootComponent>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","useObjectMemo","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","styles","sizeYClassNames","none","stylesStatus","error","valid","FormItem","children","top","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","topNode","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","multiline","className","id","role","undefined","context","baseClassName","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  ['compact']: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n  error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),\n  valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  /**\n   * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n   */\n  topMultiline?: boolean;\n  /**\n   * Позволяет поменять тег используемый для top\n   * Если оставить пустым, то тег top будет span.\n   * Если оставить пустым и использовать htmlFor, то тег top будет label.\n   */\n  topComponent?: React.ElementType;\n  /**\n   * Позволяет полностью заменить шапку поля пользовательским компонентом.\n   *\n   * @since 6.1.0\n   *\n   * TODO [>=7]: удалить и использовать top - оно будет принимать либо строку, либо подкомпонент\n   */\n  topNode?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n  /**\n   * Удаляет внешние отступы вокруг компонента\n   * @since 5.8.0\n   */\n  noPadding?: boolean;\n  /**\n   * Помечает поле обязательным\n   */\n  required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  topMultiline,\n  topComponent: topComponentProp,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  topNode,\n  required = false,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(topNode) ? (\n        topNode\n      ) : hasReactNode(top) ? (\n        <FormItemTop>\n          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} multiline={topMultiline}>\n            {top}\n          </FormItemTopLabel>\n        </FormItemTop>\n      ) : null}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  const context = useObjectMemo({ required, topMultiline });\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        styles['FormItem'],\n        !noPadding && styles['FormItem--withPadding'],\n        'vkuiInternalFormItem',\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      <FormItemContext.Provider value={context}>\n        {removable ? (\n          <Removable\n            align=\"start\"\n            onRemove={(e) => {\n              if (rootEl?.current) {\n                onRemove(e, rootEl.current);\n              }\n            }}\n            removePlaceholder={removePlaceholder}\n            indent={removable === 'indent'}\n          >\n            <div\n              className={classNames(\n                styles['FormItem__removable'],\n                'vkuiInternalFormItem__removable',\n              )}\n            >\n              {wrappedChildren}\n            </div>\n          </Removable>\n        ) : (\n          wrappedChildren\n        )}\n      </FormItemContext.Provider>\n    </RootComponent>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","useObjectMemo","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","styles","sizeYClassNames","none","stylesStatus","error","valid","FormItem","children","top","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","topNode","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","multiline","className","id","role","undefined","context","baseClassName","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"mappings":"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"}

package/dist/cssm/components/FormItem/FormItemTop/FormItemTop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTop.tsx"],"sourcesContent":["import { HasComponent, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {}\n\n/**\n * Служит оберткой для составной шапки поля, отвечая за выравнивание контента и расстановку отступов.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTop = (props: FormItemTopProps) => (\n  <RootComponent {...props} baseClassName={styles.FormItem__top} />\n);\n\nFormItemTop.displayName = 'FormItemTop';\n"],"names":["RootComponent","styles","FormItemTop","props","baseClassName","FormItem__top","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":";AACA,SAASA,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,yBAAyB;AAI5C;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAACC,sBAC1B,KAACH;QAAe,GAAGG,KAAK;QAAEC,eAAeH,OAAOI,aAAa;OAC7D;AAEFH,YAAYI,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTop.tsx"],"sourcesContent":["import { HasComponent, HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {}\n\n/**\n * Служит оберткой для составной шапки поля, отвечая за выравнивание контента и расстановку отступов.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTop = (props: FormItemTopProps) => (\n  <RootComponent {...props} baseClassName={styles.FormItem__top} />\n);\n\nFormItemTop.displayName = 'FormItemTop';\n"],"names":["RootComponent","styles","FormItemTop","props","baseClassName","FormItem__top","displayName"],"mappings":";AACA,SAASA,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,yBAAyB;AAI5C;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAACC,sBAC1B,KAACH;QAAe,GAAGG,KAAK;QAAEC,eAAeH,OAAOI,aAAa;OAC7D;AAEFH,YAAYI,WAAW,GAAG"}

package/dist/cssm/components/FormItem/FormItemTop/FormItemTopAside.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTopAside.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopAsideProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * Отвечает за отрисовку дополнительного контента справа от заголовка поля.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {\n  return (\n    <Subhead className={styles['FormItemTop__aside']} {...restProps}>\n      {children}\n    </Subhead>\n  );\n};\n\nFormItemTopAside.displayName = 'FormItemTopAside';\n"],"names":["React","Subhead","styles","FormItemTopAside","children","restProps","className","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,mCAAmC;AAC3D,OAAOC,YAAY,yBAAyB;AAO5C;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAkC;IAChF,qBACE,KAACJ;QAAQK,WAAWJ,MAAM,CAAC,qBAAqB;QAAG,GAAGG,SAAS;kBAC5DD;;AAGP,EAAE;AAEFD,iBAAiBI,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTopAside.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopAsideProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * Отвечает за отрисовку дополнительного контента справа от заголовка поля.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopAside = ({ children, ...restProps }: FormItemTopAsideProps) => {\n  return (\n    <Subhead className={styles['FormItemTop__aside']} {...restProps}>\n      {children}\n    </Subhead>\n  );\n};\n\nFormItemTopAside.displayName = 'FormItemTopAside';\n"],"names":["React","Subhead","styles","FormItemTopAside","children","restProps","className","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,OAAO,QAAQ,mCAAmC;AAC3D,OAAOC,YAAY,yBAAyB;AAO5C;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAkC;IAChF,qBACE,KAACJ;QAAQK,WAAWJ,MAAM,CAAC,qBAAqB;QAAG,GAAGG,SAAS;kBAC5DD;;AAGP,EAAE;AAEFD,iBAAiBI,WAAW,GAAG"}

package/dist/cssm/components/FormItem/FormItemTop/FormItemTopLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTopLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport { FormItemContext } from '../context';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopLabelProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Многострочный вывод заголовка.\n   * TODO [>=7]: удалить и вседа брать из контекста\n   */\n  multiline?: boolean;\n}\n\n/**\n * Отвечает за отрисовку заголовка поля. По умолчанию компонент представлен тегом `label`, если передано свойство `htmlFor`.\n * Можно переопределить через свойство `Component`.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopLabel = ({\n  children,\n  Component: componentProp,\n  htmlFor,\n  multiline,\n  ...restProps\n}: FormItemTopLabelProps) => {\n  const component = componentProp || (htmlFor && 'label') || 'span';\n  const { required, topMultiline: multilineContext } = React.useContext(FormItemContext);\n\n  return (\n    <Subhead\n      className={classNames(\n        styles['FormItemTop__label'],\n        (multiline ?? multilineContext) && styles['FormItemTop__label--multiline'],\n      )}\n      Component={component}\n      htmlFor={htmlFor}\n      {...restProps}\n    >\n      {children}\n      {required && (\n        <span className={styles['FormItemTop__label--required']} aria-hidden>\n          *\n        </span>\n      )}\n    </Subhead>\n  );\n};\n\nFormItemTopLabel.displayName = 'FormItemTopLabel';\n"],"names":["React","classNames","Subhead","FormItemContext","styles","FormItemTopLabel","children","Component","componentProp","htmlFor","multiline","restProps","component","required","topMultiline","multilineContext","useContext","className","span","aria-hidden","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,mCAAmC;AAC3D,SAASC,eAAe,QAAQ,aAAa;AAC7C,OAAOC,YAAY,yBAAyB;AAa5C;;;;;;CAMC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,OAAO,EACPC,SAAS,EACT,GAAGC,WACmB;IACtB,MAAMC,YAAYJ,iBAAkBC,WAAW,WAAY;IAC3D,MAAM,EAAEI,QAAQ,EAAEC,cAAcC,gBAAgB,EAAE,GAAGf,MAAMgB,UAAU,CAACb;IAEtE,qBACE,MAACD;QACCe,WAAWhB,WACTG,MAAM,CAAC,qBAAqB,EAC5B,AAACM,CAAAA,aAAaK,gBAAe,KAAMX,MAAM,CAAC,gCAAgC;QAE5EG,WAAWK;QACXH,SAASA;QACR,GAAGE,SAAS;;YAEZL;YACAO,0BACC,KAACK;gBAAKD,WAAWb,MAAM,CAAC,+BAA+B;gBAAEe,aAAW;0BAAC;;;;AAM7E,EAAE;AAEFd,iBAAiBe,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/FormItem/FormItemTop/FormItemTopLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../../types';\nimport { Subhead } from '../../Typography/Subhead/Subhead';\nimport { FormItemContext } from '../context';\nimport styles from '../FormItem.module.css';\n\nexport interface FormItemTopLabelProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Многострочный вывод заголовка.\n   * TODO [>=7]: удалить и вседа брать из контекста\n   */\n  multiline?: boolean;\n}\n\n/**\n * Отвечает за отрисовку заголовка поля. По умолчанию компонент представлен тегом `label`, если передано свойство `htmlFor`.\n * Можно переопределить через свойство `Component`.\n *\n * @since 6.1.0\n *\n */\nexport const FormItemTopLabel = ({\n  children,\n  Component: componentProp,\n  htmlFor,\n  multiline,\n  ...restProps\n}: FormItemTopLabelProps) => {\n  const component = componentProp || (htmlFor && 'label') || 'span';\n  const { required, topMultiline: multilineContext } = React.useContext(FormItemContext);\n\n  return (\n    <Subhead\n      className={classNames(\n        styles['FormItemTop__label'],\n        (multiline ?? multilineContext) && styles['FormItemTop__label--multiline'],\n      )}\n      Component={component}\n      htmlFor={htmlFor}\n      {...restProps}\n    >\n      {children}\n      {required && (\n        <span className={styles['FormItemTop__label--required']} aria-hidden>\n          *\n        </span>\n      )}\n    </Subhead>\n  );\n};\n\nFormItemTopLabel.displayName = 'FormItemTopLabel';\n"],"names":["React","classNames","Subhead","FormItemContext","styles","FormItemTopLabel","children","Component","componentProp","htmlFor","multiline","restProps","component","required","topMultiline","multilineContext","useContext","className","span","aria-hidden","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,mCAAmC;AAC3D,SAASC,eAAe,QAAQ,aAAa;AAC7C,OAAOC,YAAY,yBAAyB;AAa5C;;;;;;CAMC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,QAAQ,EACRC,WAAWC,aAAa,EACxBC,OAAO,EACPC,SAAS,EACT,GAAGC,WACmB;IACtB,MAAMC,YAAYJ,iBAAkBC,WAAW,WAAY;IAC3D,MAAM,EAAEI,QAAQ,EAAEC,cAAcC,gBAAgB,EAAE,GAAGf,MAAMgB,UAAU,CAACb;IAEtE,qBACE,MAACD;QACCe,WAAWhB,WACTG,MAAM,CAAC,qBAAqB,EAC5B,AAACM,CAAAA,aAAaK,gBAAe,KAAMX,MAAM,CAAC,gCAAgC;QAE5EG,WAAWK;QACXH,SAASA;QACR,GAAGE,SAAS;;YAEZL;YACAO,0BACC,KAACK;gBAAKD,WAAWb,MAAM,CAAC,+BAA+B;gBAAEe,aAAW;0BAAC;;;;AAM7E,EAAE;AAEFd,iBAAiBe,WAAW,GAAG"}

package/dist/cssm/components/FormItem/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/context.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface FormItemContextProps {\n  required?: boolean;\n  topMultiline?: boolean;\n}\n\nexport const FormItemContext = React.createContext<FormItemContextProps>({\n  required: false,\n  topMultiline: false,\n});\n"],"names":["React","FormItemContext","createContext","required","topMultiline"],"rangeMappings":";;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,kBAAkBD,MAAME,aAAa,CAAuB;IACvEC,UAAU;IACVC,cAAc;AAChB,GAAG"}
+{"version":3,"sources":["../../../../src/components/FormItem/context.ts"],"sourcesContent":["import * as React from 'react';\n\ninterface FormItemContextProps {\n  required?: boolean;\n  topMultiline?: boolean;\n}\n\nexport const FormItemContext = React.createContext<FormItemContextProps>({\n  required: false,\n  topMultiline: false,\n});\n"],"names":["React","FormItemContext","createContext","required","topMultiline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,kBAAkBD,MAAME,aAAa,CAAuB;IACvEC,UAAU;IACVC,cAAc;AAChB,GAAG"}

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  ['compact']: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    RemovableProps {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <RootComponent\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        mode === 'vertical' &&\n          classNames(\n            styles['FormLayoutGroup--mode-vertical'],\n            'vkuiInternalFormLayoutGroup--mode-vertical',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        segmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","Removable","RootComponent","styles","sizeYClassNames","none","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","rootEl","baseClassName","className","align","e","current","indent","Fragment","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAAC,UAAU,EAAEN,WACXM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAmBA;;CAEC,GACD,OAAO,MAAMG,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWd,IAAI,EACfe,UAAU,EACV,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGhB;IAC3B,MAAMiB,cAAcP,aAAaD,SAAS;IAC1C,MAAMS,SAASjB,aAAaa;IAE5B,qBACE,KAACX;QACCW,YAAYI;QACZC,eAAerB,WACbkB,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CP,SAAS,gBACPX,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJK,SAAS,cACPX,WACEM,MAAM,CAAC,iCAAiC,EACxC,+CAEJa,eACEnB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJO,aACEb,WACEM,MAAM,CAAC,6BAA6B,EACpC;QAGL,GAAGW,SAAS;kBAEZE,4BACC,KAACf;YACCkB,WAAWhB,MAAM,CAAC,6BAA6B;YAC/CiB,OAAM;YACNT,mBAAmBA;YACnBC,UAAU,CAACS;gBACT,IAAIJ,QAAQK,SAAS;oBACnBV,SAASS,GAAGJ,OAAOK,OAAO;gBAC5B;YACF;YACAC,QAAQd,cAAc;sBAErBF;2BAGH,MAACX,MAAM4B,QAAQ;;gBACZjB;8BACD,KAACkB;oBAAKN,WAAWhB,MAAM,CAAC,0BAA0B;oBAAEuB,aAAW;;;;;AAKzE,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  ['compact']: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    RemovableProps {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <RootComponent\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        mode === 'vertical' &&\n          classNames(\n            styles['FormLayoutGroup--mode-vertical'],\n            'vkuiInternalFormLayoutGroup--mode-vertical',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        segmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useExternRef","Removable","RootComponent","styles","sizeYClassNames","none","FormLayoutGroup","children","mode","removable","segmented","removePlaceholder","onRemove","getRootRef","restProps","sizeY","isRemovable","rootEl","baseClassName","className","align","e","current","indent","Fragment","span","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AAExD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,+BAA+B;AAElD,MAAMC,kBAAkB;IACtBC,MAAMR,WACJM,MAAM,CAAC,8BAA8B,EACrC;IAEF,CAAC,UAAU,EAAEN,WACXM,MAAM,CAAC,iCAAiC,EACxC;AAEJ;AAmBA;;CAEC,GACD,OAAO,MAAMG,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,OAAO,UAAU,EACjBC,SAAS,EACTC,SAAS,EACTC,oBAAoB,SAAS,EAC7BC,WAAWd,IAAI,EACfe,UAAU,EACV,GAAGC,WACkB;IACrB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGhB;IAC3B,MAAMiB,cAAcP,aAAaD,SAAS;IAC1C,MAAMS,SAASjB,aAAaa;IAE5B,qBACE,KAACX;QACCW,YAAYI;QACZC,eAAerB,WACbkB,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CP,SAAS,gBACPX,WACEM,MAAM,CAAC,mCAAmC,EAC1C,iDAEJK,SAAS,cACPX,WACEM,MAAM,CAAC,iCAAiC,EACxC,+CAEJa,eACEnB,WACEM,MAAM,CAAC,6BAA6B,EACpC,2CAEJO,aACEb,WACEM,MAAM,CAAC,6BAA6B,EACpC;QAGL,GAAGW,SAAS;kBAEZE,4BACC,KAACf;YACCkB,WAAWhB,MAAM,CAAC,6BAA6B;YAC/CiB,OAAM;YACNT,mBAAmBA;YACnBC,UAAU,CAACS;gBACT,IAAIJ,QAAQK,SAAS;oBACnBV,SAASS,GAAGJ,OAAOK,OAAO;gBAC5B;YACF;YACAC,QAAQd,cAAc;sBAErBF;2BAGH,MAACX,MAAM4B,QAAQ;;gBACZjB;8BACD,KAACkB;oBAAKN,WAAWhB,MAAM,CAAC,0BAA0B;oBAAEuB,aAAW;;;;;AAKzE,EAAE"}

package/dist/cssm/components/FormStatus/FormStatus.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({\n  mode,\n  children,\n  className,\n  role = mode === 'error' ? 'alert' : 'status',\n  ...restProps\n}: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      role={role}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","role","restProps","subheader"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAOH,SAAS,UAAU,UAAU,QAAQ,EAC5C,GAAGI,WACa;IAChB,qBACE,KAACP;QACE,GAAGO,SAAS;QACbD,MAAMA;QACNE,WAAWJ;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({\n  mode,\n  children,\n  className,\n  role = mode === 'error' ? 'alert' : 'status',\n  ...restProps\n}: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      role={role}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","role","restProps","subheader"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAOH,SAAS,UAAU,UAAU,QAAQ,EAC5C,GAAGI,WACa;IAChB,qBACE,KAACP;QACE,GAAGO,SAAS;QACbD,MAAMA;QACNE,WAAWJ;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}

package/dist/cssm/components/Gallery/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["React","clamp","useIsClient","BaseGallery","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","handleChange","useCallback","current","safeSlideIndex","useEffect","Component","dragDisabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,YAAY,QAAQ,2CAA2C;AAExE,SAASC,WAAW,QAAQ,UAAU;AAStC;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACN,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGf,MAAMgB,QAAQ,CAACT;IACxD,MAAMU,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,UAAU,IAAI,IAAIJ;IAC1D,MAAMK,SAASnB,MAAMoB,OAAO,CAC1B,IAAMpB,MAAMqB,QAAQ,CAACC,OAAO,CAACd,UAAUe,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAAChB;KAAS;IAEZ,MAAMkB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAW1B;IAEjB,MAAM2B,eAAyC7B,MAAM8B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BrB,YAAYA,SAASqB;IACvB,GACA;QAACd;QAAcP;QAAUQ;KAAW;IAGtCb,YAAYI,SAASS,YAAY,IAAMW,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKQ;IAEvE,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMM,iBAAiBN,aAAa,IAAIzB,MAAMiB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnClB,MAAMiC,SAAS,CAAC;QACd,IAAIvB,YAAYsB,mBAAmBd,YAAY;YAC7CR,SAASsB;QACX;QACAjB,cAAciB;IAChB,GAAG;QAACtB;QAAUsB;QAAgBd;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,MAAMM,YAAYtB,SAASR,eAAeD;IAE1C,qBACE,KAAC+B;QACCC,cAAclB,gBAAgB,CAACP;QAC9B,GAAGG,KAAK;QACTF,SAASe,aAAa,KAAKf;QAC3BO,YAAYc;QACZtB,UAAUmB;kBAETV;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["React","clamp","useIsClient","BaseGallery","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","handleChange","useCallback","current","safeSlideIndex","useEffect","Component","dragDisabled"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,YAAY,QAAQ,2CAA2C;AAExE,SAASC,WAAW,QAAQ,UAAU;AAStC;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACN,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGf,MAAMgB,QAAQ,CAACT;IACxD,MAAMU,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,UAAU,IAAI,IAAIJ;IAC1D,MAAMK,SAASnB,MAAMoB,OAAO,CAC1B,IAAMpB,MAAMqB,QAAQ,CAACC,OAAO,CAACd,UAAUe,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAAChB;KAAS;IAEZ,MAAMkB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAW1B;IAEjB,MAAM2B,eAAyC7B,MAAM8B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BrB,YAAYA,SAASqB;IACvB,GACA;QAACd;QAAcP;QAAUQ;KAAW;IAGtCb,YAAYI,SAASS,YAAY,IAAMW,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKQ;IAEvE,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMM,iBAAiBN,aAAa,IAAIzB,MAAMiB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnClB,MAAMiC,SAAS,CAAC;QACd,IAAIvB,YAAYsB,mBAAmBd,YAAY;YAC7CR,SAASsB;QACX;QACAjB,cAAciB;IAChB,GAAG;QAACtB;QAAUsB;QAAgBd;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,MAAMM,YAAYtB,SAASR,eAAeD;IAE1C,qBACE,KAAC+B;QACCC,cAAclB,gBAAgB,CAACP;QAC9B,GAAGG,KAAK;QACTF,SAASe,aAAa,KAAKf;QAC3BO,YAAYc;QACZtB,UAAUmB;kBAETV;;AAGP,EAAE"}

package/dist/cssm/components/Gallery/hooks.d.ts

@@ -1,2 +1,2 @@
-export declare function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction): void;
+export declare function useAutoPlay(timeout: number, slideIndex: number, callbackFnProp: VoidFunction): void;
 //# sourceMappingURL=hooks.d.ts.map

package/dist/cssm/components/Gallery/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/hooks.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,QAkCxF"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/Gallery/hooks.ts"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,QAyC5F"}

package/dist/cssm/components/Gallery/hooks.js

@@ -1,38 +1,41 @@
 import * as React from 'react';
-import { useTimeout } from '../../hooks/useTimeout';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useDOM } from '../../lib/dom';
-export function useAutoPlay(timeout, slideIndex, callbackFn) {
-    const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);
+export function useAutoPlay(timeout, slideIndex, callbackFnProp) {
     const { document } = useDOM();
-    React.useEffect(()=>timeout ? setAutoPlay() : clearAutoPlay(), [
-        timeout,
-        slideIndex,
-        clearAutoPlay,
-        setAutoPlay
-    ]);
-    // Отключаем прокрутку слайдов при неактивной вкладке
-    React.useEffect(function preventSlideChange() {
+    const callbackFn = useStableCallback(callbackFnProp);
+    React.useEffect(function initializeAutoPlay() {
         if (!document || !timeout) {
             return;
         }
-        const changeAutoPlay = ()=>{
-            if (document.visibilityState === 'visible') {
-                clearAutoPlay();
-                setAutoPlay();
+        let timeoutId = null;
+        const stop = ()=>{
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
             }
-            if (document.visibilityState === 'hidden') {
-                clearAutoPlay();
+        };
+        const start = ()=>{
+            switch(document.visibilityState){
+                case 'visible':
+                    stop();
+                    timeoutId = setTimeout(callbackFn, timeout);
+                    break;
+                case 'hidden':
+                    stop();
             }
         };
-        document.addEventListener('visibilitychange', changeAutoPlay);
+        start();
+        document.addEventListener('visibilitychange', start);
         return ()=>{
-            document.removeEventListener('visibilitychange', changeAutoPlay);
+            stop();
+            document.removeEventListener('visibilitychange', start);
         };
     }, [
         document,
         timeout,
-        clearAutoPlay,
-        setAutoPlay
+        slideIndex,
+        callbackFn
     ]);
 }
 

package/dist/cssm/components/Gallery/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gallery/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\n\nexport function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction) {\n  const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);\n  const { document } = useDOM();\n\n  React.useEffect(\n    () => (timeout ? setAutoPlay() : clearAutoPlay()),\n    [timeout, slideIndex, clearAutoPlay, setAutoPlay],\n  );\n\n  // Отключаем прокрутку слайдов при неактивной вкладке\n  React.useEffect(\n    function preventSlideChange() {\n      if (!document || !timeout) {\n        return;\n      }\n\n      const changeAutoPlay = () => {\n        if (document.visibilityState === 'visible') {\n          clearAutoPlay();\n          setAutoPlay();\n        }\n        if (document.visibilityState === 'hidden') {\n          clearAutoPlay();\n        }\n      };\n\n      document.addEventListener('visibilitychange', changeAutoPlay);\n\n      return () => {\n        document.removeEventListener('visibilitychange', changeAutoPlay);\n      };\n    },\n    [document, timeout, clearAutoPlay, setAutoPlay],\n  );\n}\n"],"names":["React","useTimeout","useDOM","useAutoPlay","timeout","slideIndex","callbackFn","clear","clearAutoPlay","set","setAutoPlay","document","useEffect","preventSlideChange","changeAutoPlay","visibilityState","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,OAAO,SAASC,YAAYC,OAAe,EAAEC,UAAkB,EAAEC,UAAwB;IACvF,MAAM,EAAEC,OAAOC,aAAa,EAAEC,KAAKC,WAAW,EAAE,GAAGT,WAAWK,YAAYF;IAC1E,MAAM,EAAEO,QAAQ,EAAE,GAAGT;IAErBF,MAAMY,SAAS,CACb,IAAOR,UAAUM,gBAAgBF,iBACjC;QAACJ;QAASC;QAAYG;QAAeE;KAAY;IAGnD,qDAAqD;IACrDV,MAAMY,SAAS,CACb,SAASC;QACP,IAAI,CAACF,YAAY,CAACP,SAAS;YACzB;QACF;QAEA,MAAMU,iBAAiB;YACrB,IAAIH,SAASI,eAAe,KAAK,WAAW;gBAC1CP;gBACAE;YACF;YACA,IAAIC,SAASI,eAAe,KAAK,UAAU;gBACzCP;YACF;QACF;QAEAG,SAASK,gBAAgB,CAAC,oBAAoBF;QAE9C,OAAO;YACLH,SAASM,mBAAmB,CAAC,oBAAoBH;QACnD;IACF,GACA;QAACH;QAAUP;QAASI;QAAeE;KAAY;AAEnD"}
+{"version":3,"sources":["../../../../src/components/Gallery/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useDOM } from '../../lib/dom';\nimport { TimeoutId } from '../../types';\n\nexport function useAutoPlay(timeout: number, slideIndex: number, callbackFnProp: VoidFunction) {\n  const { document } = useDOM();\n  const callbackFn = useStableCallback(callbackFnProp);\n\n  React.useEffect(\n    function initializeAutoPlay() {\n      if (!document || !timeout) {\n        return;\n      }\n\n      let timeoutId: TimeoutId = null;\n\n      const stop = () => {\n        if (timeoutId) {\n          clearTimeout(timeoutId);\n          timeoutId = null;\n        }\n      };\n\n      const start = () => {\n        switch (document.visibilityState) {\n          case 'visible':\n            stop();\n            timeoutId = setTimeout(callbackFn, timeout);\n            break;\n          case 'hidden':\n            stop();\n        }\n      };\n\n      start();\n\n      document.addEventListener('visibilitychange', start);\n\n      return () => {\n        stop();\n        document.removeEventListener('visibilitychange', start);\n      };\n    },\n    [document, timeout, slideIndex, callbackFn],\n  );\n}\n"],"names":["React","useStableCallback","useDOM","useAutoPlay","timeout","slideIndex","callbackFnProp","document","callbackFn","useEffect","initializeAutoPlay","timeoutId","stop","clearTimeout","start","visibilityState","setTimeout","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,MAAM,QAAQ,gBAAgB;AAGvC,OAAO,SAASC,YAAYC,OAAe,EAAEC,UAAkB,EAAEC,cAA4B;IAC3F,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IACrB,MAAMM,aAAaP,kBAAkBK;IAErCN,MAAMS,SAAS,CACb,SAASC;QACP,IAAI,CAACH,YAAY,CAACH,SAAS;YACzB;QACF;QAEA,IAAIO,YAAuB;QAE3B,MAAMC,OAAO;YACX,IAAID,WAAW;gBACbE,aAAaF;gBACbA,YAAY;YACd;QACF;QAEA,MAAMG,QAAQ;YACZ,OAAQP,SAASQ,eAAe;gBAC9B,KAAK;oBACHH;oBACAD,YAAYK,WAAWR,YAAYJ;oBACnC;gBACF,KAAK;oBACHQ;YACJ;QACF;QAEAE;QAEAP,SAASU,gBAAgB,CAAC,oBAAoBH;QAE9C,OAAO;YACLF;YACAL,SAASW,mBAAmB,CAAC,oBAAoBJ;QACnD;IACF,GACA;QAACP;QAAUH;QAASC;QAAYG;KAAW;AAE/C"}

package/dist/cssm/components/Gradient/Gradient.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({ mode = 'default', to = 'top', ...restProps }: GradientProps) => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Gradient'],\n        mode !== 'default' && styles['Gradient--mode-tint'],\n        to === 'bottom' && styles['Gradient--to-bottom'],\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","Gradient","mode","to","restProps","role","baseClassName"],"rangeMappings":";;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EAAEC,OAAO,SAAS,EAAEC,KAAK,KAAK,EAAE,GAAGC,WAA0B;IACpF,qBACE,KAACL;QACCM,MAAK;QACJ,GAAGD,SAAS;QACbE,eAAeR,WACbE,MAAM,CAAC,WAAW,EAClBE,SAAS,aAAaF,MAAM,CAAC,sBAAsB,EACnDG,OAAO,YAAYH,MAAM,CAAC,sBAAsB;;AAIxD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({ mode = 'default', to = 'top', ...restProps }: GradientProps) => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Gradient'],\n        mode !== 'default' && styles['Gradient--mode-tint'],\n        to === 'bottom' && styles['Gradient--to-bottom'],\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","styles","Gradient","mode","to","restProps","role","baseClassName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EAAEC,OAAO,SAAS,EAAEC,KAAK,KAAK,EAAE,GAAGC,WAA0B;IACpF,qBACE,KAACL;QACCM,MAAK;QACJ,GAAGD,SAAS;QACbE,eAAeR,WACbE,MAAM,CAAC,WAAW,EAClBE,SAAS,aAAaF,MAAM,CAAC,sBAAsB,EACnDG,OAAO,YAAYH,MAAM,CAAC,sBAAsB;;AAIxD,EAAE"}

package/dist/cssm/components/GridAvatar/GridAvatar.d.ts

@@ -14,6 +14,6 @@ export interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackI
  */
 export declare const GridAvatar: {
     ({ src, size, className, children, ...restProps }: GridAvatarProps): import("react/jsx-runtime").JSX.Element;
-    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => import("react/jsx-runtime").JSX.Element;
+    Badge: ({ className, ...restProps }: GridAvatarBadgeProps) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=GridAvatar.d.ts.map

package/dist/cssm/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":["classNames","warnOnce","ImageBase","GridAvatarBadge","styles","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","style","backgroundImage","Badge"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,eAAe,QAAmC,oCAAoC;AAC/F,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,2BAA2B,GAAG;AAE3C,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EACzBC,MAAM,EAAE,EACRC,OAAOL,wBAAwB,EAC/BM,SAAS,EACTC,QAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,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,MAACJ;QAAW,GAAGW,SAAS;QAAEH,MAAMA;QAAMC,WAAWX,WAAWI,MAAM,CAAC,aAAa,EAAEO;;0BAChF,KAACO;gBAAIP,WAAWP,MAAM,CAAC,iBAAiB;gBAAEe,aAAW;0BAClDV,IAAIW,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQhB,gCACN,KAACY;wBAECP,WAAWP,MAAM,CAAC,mBAAmB;wBACrCmB,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAFnCA,OAIL;;YAGPT;;;AAGP,EAAE;AAEFJ,WAAWiB,KAAK,GAAGtB"}
+{"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":["classNames","warnOnce","ImageBase","GridAvatarBadge","styles","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","style","backgroundImage","Badge"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,eAAe,QAAmC,oCAAoC;AAC/F,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,2BAA2B,GAAG;AAE3C,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EACzBC,MAAM,EAAE,EACRC,OAAOL,wBAAwB,EAC/BM,SAAS,EACTC,QAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,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,MAACJ;QAAW,GAAGW,SAAS;QAAEH,MAAMA;QAAMC,WAAWX,WAAWI,MAAM,CAAC,aAAa,EAAEO;;0BAChF,KAACO;gBAAIP,WAAWP,MAAM,CAAC,iBAAiB;gBAAEe,aAAW;0BAClDV,IAAIW,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQhB,gCACN,KAACY;wBAECP,WAAWP,MAAM,CAAC,mBAAmB;wBACrCmB,OAAO;4BAAEC,iBAAiB,CAAC,IAAI,EAAEH,IAAI,CAAC,CAAC;wBAAC;uBAFnCA,OAIL;;YAGPT;;;AAGP,EAAE;AAEFJ,WAAWiB,KAAK,GAAGtB"}

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","GridAvatarBadge","className","restProps","size","useContext","Badge"],"rangeMappings":";;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAiC;IAC/E,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,kBAAkB,EACzBI,OAAO,MAAMJ,MAAM,CAAC,2BAA2B,EAC/CE;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","GridAvatarBadge","className","restProps","size","useContext","Badge"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAiC;IAC/E,MAAM,EAAEC,IAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,KAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,kBAAkB,EACzBI,OAAO,MAAMJ,MAAM,CAAC,2BAA2B,EAC/CE;;AAIR,EAAE"}

package/dist/cssm/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  ['compact']: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` - разделитель всегда показывается,\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен `card`, выглядит как карточка c\n   * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n   * В модальных окнах по умолчанию `plain`.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме `card`.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          isInsideModal && styles['Group--inside-modal'],\n          sizeX !== 'regular' && sizeXClassNames[sizeX],\n          mode && stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {hasReactNode(header) && <div className={styles['Group__header']}>{header}</div>}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </RootComponent>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <div\n            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n          />\n          <Separator\n            className={classNames(\n              styles['Group__separator'],\n              styles['Group__separator--separator'],\n              separator === 'show' && styles['Group__separator--force'],\n            )}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","Separator","Footnote","styles","sizeXClassNames","none","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","Group","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","Component","baseClassName","div","className","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  ['compact']: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` - разделитель всегда показывается,\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен `card`, выглядит как карточка c\n   * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n   * В модальных окнах по умолчанию `plain`.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме `card`.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          isInsideModal && styles['Group--inside-modal'],\n          sizeX !== 'regular' && sizeXClassNames[sizeX],\n          mode && stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {hasReactNode(header) && <div className={styles['Group__header']}>{header}</div>}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </RootComponent>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <div\n            className={classNames(styles['Group__separator'], styles['Group__separator--spacing'])}\n          />\n          <Separator\n            className={classNames(\n              styles['Group__separator'],\n              styles['Group__separator--separator'],\n              separator === 'show' && styles['Group__separator--force'],\n            )}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","Separator","Footnote","styles","sizeXClassNames","none","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","Group","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","Component","baseClassName","div","className","Fragment"],"mappings":"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"}

package/dist/cssm/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /* Позволяет задать тип элемента в который будет обёрнут subtitle */\n  subtitleComponent?: React.ElementType;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === 'ios') {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  Component = 'h2',\n  children,\n  subtitle,\n  subtitleComponent = 'span',\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        stylesMode[mode],\n        size === 'large' && styles['Header--large'],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component={Component}\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component={subtitleComponent}\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","Component","children","subtitle","subtitleComponent","indicator","aside","multiline","baseClassName","div","className","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /* Позволяет задать тип элемента в который будет обёрнут subtitle */\n  subtitleComponent?: React.ElementType;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === 'ios') {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\nconst stylesMode = {\n  primary: styles['Header--mode-primary'],\n  secondary: styles['Header--mode-secondary'],\n  tertiary: styles['Header--mode-tertiary'],\n};\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  Component = 'h2',\n  children,\n  subtitle,\n  subtitleComponent = 'span',\n  indicator,\n  aside,\n  multiline,\n  ...restProps\n}: HeaderProps) => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Header'],\n        stylesMode[mode],\n        size === 'large' && styles['Header--large'],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component={Component}\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead\n            className={classNames(\n              styles['Header__subtitle'],\n              multiline && styles['Header__content--multiline'],\n            )}\n            Component={subtitleComponent}\n          >\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","RootComponent","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","level","weight","caps","stylesMode","primary","secondary","tertiary","Header","Component","children","subtitle","subtitleComponent","indicator","aside","multiline","baseClassName","div","className","span"],"mappings":"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"}

package/dist/cssm/components/Header/Header.module.css

@@ -3,10 +3,6 @@
   align-items: flex-start;
   padding: 0;
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
   font-family: var(--vkui--font_family_base);
 }
 

package/dist/cssm/components/HorizontalCell/HorizontalCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        {(header || subtitle || extraSubtitle) && (\n          <div className={styles['HorizontalCell__content']}>\n            {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n            {hasReactNode(subtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n            )}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,yBAAyB;IACnCG,GAAGH,MAAM,CAAC,yBAAyB;IACnCI,GAAGJ,MAAM,CAAC,yBAAyB;AACrC;AAMA,MAAMK,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,KAACT;QAAS,GAAGW,SAAS;kBAAGD;uBAEzB,KAACR;QAAS,GAAGS,SAAS;kBAAGD;;AAE7B;AAqBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACZ;IAAOW,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACb,GAAGR,WACiB;IACpB,qBACE,KAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWjB,WAAWO,MAAM,CAAC,iBAAiB,EAAEC,UAAU,CAACK,KAAK,EAAEI;kBAElE,cAAA,MAACd;YAASc,WAAWV,MAAM,CAAC,uBAAuB;YAAEc,YAAYC;YAAS,GAAGP,SAAS;;gBACnFd,aAAaa,2BACZ,KAACU;oBAAIP,WAAWV,MAAM,CAAC,wBAAwB;8BAAGO;;gBAElDI,CAAAA,UAAUE,YAAYG,aAAY,mBAClC,MAACC;oBAAIP,WAAWV,MAAM,CAAC,0BAA0B;;wBAC9CN,aAAaiB,yBAAW,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACrDjB,aAAamB,2BACZ,KAACf;4BAASY,WAAWV,MAAM,CAAC,2BAA2B;sCAAGa;;wBAE3DnB,aAAasB,gCACZ,KAAClB;4BAASY,WAAWV,MAAM,CAAC,2BAA2B;sCAAGgB;;;;;;;AAOxE,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends Omit<TappableProps, 'size' | 'getRootRef'>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        {(header || subtitle || extraSubtitle) && (\n          <div className={styles['HorizontalCell__content']}>\n            {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n            {hasReactNode(subtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n            )}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,yBAAyB;IACnCG,GAAGH,MAAM,CAAC,yBAAyB;IACnCI,GAAGJ,MAAM,CAAC,yBAAyB;AACrC;AAMA,MAAMK,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,KAACT;QAAS,GAAGW,SAAS;kBAAGD;uBAEzB,KAACR;QAAS,GAAGS,SAAS;kBAAGD;;AAE7B;AAqBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,KAACZ;IAAOW,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACb,GAAGR,WACiB;IACpB,qBACE,KAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWjB,WAAWO,MAAM,CAAC,iBAAiB,EAAEC,UAAU,CAACK,KAAK,EAAEI;kBAElE,cAAA,MAACd;YAASc,WAAWV,MAAM,CAAC,uBAAuB;YAAEc,YAAYC;YAAS,GAAGP,SAAS;;gBACnFd,aAAaa,2BACZ,KAACU;oBAAIP,WAAWV,MAAM,CAAC,wBAAwB;8BAAGO;;gBAElDI,CAAAA,UAAUE,YAAYG,aAAY,mBAClC,MAACC;oBAAIP,WAAWV,MAAM,CAAC,0BAA0B;;wBAC9CN,aAAaiB,yBAAW,KAACN;4BAAeC,MAAMA;sCAAOK;;wBACrDjB,aAAamB,2BACZ,KAACf;4BAASY,WAAWV,MAAM,CAAC,2BAA2B;sCAAGa;;wBAE3DnB,aAAasB,gCACZ,KAAClB;4BAASY,WAAWV,MAAM,CAAC,2BAA2B;sCAAGgB;;;;;;;AAOxE,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,0BAA0B;AAClE,SAASC,OAAO,QAAsB,mCAAmC;AACzE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,MAAM,CAAC,iCAAiC;IAC3CG,GAAGH,MAAM,CAAC,iCAAiC;IAC3CI,GAAGJ,MAAM,CAAC,iCAAiC;AAC7C;AAmCA,OAAO,MAAMK,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChD,GAAGE,WACyB;IAC5B,qBACE,KAACC;QACCR,OAAOA;QACPD,WAAWT,WACTG,MAAM,CAAC,yBAAyB,EAChCU,4BAA4BV,MAAM,CAAC,sDAAsD,EACzFC,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;kBAEL,cAAA,MAACX;YACCS,OAAOK,SAAS,MAAMK,YAAY;gBAAEN;YAAO;YAC3CL,WAAWN,MAAM,CAAC,+BAA+B;YACjDS,YAAYD;YACZU,YAAW;YACXC,WAAU;YACT,GAAGL,SAAS;;8BAEb,KAAClB;oBACCU,WAAWN,MAAM,CAAC,+BAA+B;oBACjDoB,MAAK;;8BAGP,KAACrB;oBAAQO,WAAWN,MAAM,CAAC,+BAA+B;oBAAEqB,QAAO;8BAChER;;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../../src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../../types';\nimport type { ImageBaseSize } from '../../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"mappings":";AAAA,SAASA,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,0BAA0B;AAClE,SAASC,OAAO,QAAsB,mCAAmC;AACzE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,MAAM,CAAC,iCAAiC;IAC3CG,GAAGH,MAAM,CAAC,iCAAiC;IAC3CI,GAAGJ,MAAM,CAAC,iCAAiC;AAC7C;AAmCA,OAAO,MAAMK,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChD,GAAGE,WACyB;IAC5B,qBACE,KAACC;QACCR,OAAOA;QACPD,WAAWT,WACTG,MAAM,CAAC,yBAAyB,EAChCU,4BAA4BV,MAAM,CAAC,sDAAsD,EACzFC,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;kBAEL,cAAA,MAACX;YACCS,OAAOK,SAAS,MAAMK,YAAY;gBAAEN;YAAO;YAC3CL,WAAWN,MAAM,CAAC,+BAA+B;YACjDS,YAAYD;YACZU,YAAW;YACXC,WAAU;YACT,GAAGL,SAAS;;8BAEb,KAAClB;oBACCU,WAAWN,MAAM,CAAC,+BAA+B;oBACjDoB,MAAK;;8BAGP,KAACrB;oBAAQO,WAAWN,MAAM,CAAC,+BAA+B;oBAAEqB,QAAO;8BAChER;;;;;AAKX,EAAE"}