@vkontakte/vkui 7.2.1 → 7.3.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableProps } from '../Tappable/Tappable';\nimport { RadioInput } from './RadioInput/RadioInput';\nimport styles from './Radio.module.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n  /**\n   * Позволяет передавать data-* аттрибуты элементу label\n   **/\n  labelProps?: HasDataAttribute;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  labelProps,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  ...restProps\n}: RadioProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      style={style}\n      className={classNames(styles.host, className)}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      {...labelProps}\n    >\n      <RadioInput {...restProps} getRef={getRef} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\nRadio.Input = RadioInput;\n"],"names":["React","classNames","SelectionControl","SelectionControlLabel","RadioInput","styles","Radio","children","description","style","className","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","host","disabled","Input"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,UAAU,QAAQ,6BAA0B;AACrD,OAAOC,YAAY,qBAAqB;AAkBxC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACQ;IACX,qBACE,MAAClB;QACCO,OAAOA;QACPC,WAAWT,WAAWI,OAAOgB,IAAI,EAAEX;QACnCY,UAAUF,UAAUE,QAAQ;QAC5BX,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QACjB,GAAGL,UAAU;;0BAEd,KAACV;gBAAY,GAAGgB,SAAS;gBAAEP,QAAQA;;0BACnC,KAACV;gBAAsBS,YAAYA;gBAAYJ,aAAaA;0BACzDD;;;;AAIT,EAAE;AAEFD,MAAMiB,KAAK,GAAGnB"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableProps } from '../Tappable/Tappable';\nimport { RadioInput } from './RadioInput/RadioInput';\nimport styles from './Radio.module.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Дополнительное описание под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Элемент после основного текста.\n   */\n  titleAfter?: React.ReactNode;\n  /**\n   * Позволяет передавать data-* аттрибуты элементу label.\n   **/\n  labelProps?: HasDataAttribute;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  labelProps,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  ...restProps\n}: RadioProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      style={style}\n      className={classNames(styles.host, className)}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      {...labelProps}\n    >\n      <RadioInput {...restProps} getRef={getRef} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\nRadio.Input = RadioInput;\n"],"names":["React","classNames","SelectionControl","SelectionControlLabel","RadioInput","styles","Radio","children","description","style","className","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","host","disabled","Input"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,UAAU,QAAQ,6BAA0B;AACrD,OAAOC,YAAY,qBAAqB;AAwBxC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACQ;IACX,qBACE,MAAClB;QACCO,OAAOA;QACPC,WAAWT,WAAWI,OAAOgB,IAAI,EAAEX;QACnCY,UAAUF,UAAUE,QAAQ;QAC5BX,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QACjB,GAAGL,UAAU;;0BAEd,KAACV;gBAAY,GAAGgB,SAAS;gBAAEP,QAAQA;;0BACnC,KAACV;gBAAsBS,YAAYA;gBAAYJ,aAAaA;0BACzDD;;;;AAIT,EAAE;AAEFD,MAAMiB,KAAK,GAAGnB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  ...restProps\n}: RadioGroupProps): React.ReactNode => (\n  <RootComponent\n    baseClassName={classNames(\n      styles.host,\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles.modeHorizontal,\n    )}\n    role=\"radiogroup\"\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","styles","RadioGroup","mode","restProps","baseClassName","host","modeHorizontal","role"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,UAAU,EACjB,GAAGC,WACa,iBAChB,KAACJ;QACCK,eAAeN,WACbE,OAAOK,IAAI,EACX,0BACAH,SAAS,gBAAgBF,OAAOM,cAAc;QAEhDC,MAAK;QACJ,GAAGJ,SAAS;OAEf"}
+{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Режим расположения элементов.\n   */\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  ...restProps\n}: RadioGroupProps): React.ReactNode => (\n  <RootComponent\n    baseClassName={classNames(\n      styles.host,\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles.modeHorizontal,\n    )}\n    role=\"radiogroup\"\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","styles","RadioGroup","mode","restProps","baseClassName","host","modeHorizontal","role"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAS7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,UAAU,EACjB,GAAGC,WACa,iBAChB,KAACJ;QACCK,eAAeN,WACbE,OAAOK,IAAI,EACX,0BACAH,SAAS,gBAAgBF,OAAOM,cAAc;QAEhDC,MAAK;QACJ,GAAGJ,SAAS;OAEf"}

package/dist/cssm/components/Removable/Removable.js

@@ -13,7 +13,7 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Tappable } from "../Tappable/Tappable.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import styles from "./Removable.module.css";
-/**
+/* eslint-enable jsdoc/require-jsdoc */ /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
  */ const RemovableIos = ({ onRemove, removePlaceholder, removePlaceholderString, children: childrenProp, toggleButtonTestId, removeButtonTestId, disabled })=>{
     const direction = useConfigDirection();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n  /**\n   * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only)\n   */\n  toggleButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки удаления\n   */\n  removeButtonTestId?: string;\n  /**\n   * Ячейка превращается в неактивную\n   */\n  disabled?: boolean;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n}: RemovableIosOwnProps) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  const style: CSSCustomProperties = {\n    '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0),\n  };\n\n  return (\n    <div\n      className={classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content')}\n      style={style}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        className={classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action')}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0 || disabled}\n        data-testid={toggleButtonTestId}\n      >\n        <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n        <i className={styles.toggleIn} role=\"presentation\" />\n      </IconButton>\n      {typeof childrenProp === 'function'\n        ? childrenProp({ isRemoving: removeOffset > 0 })\n        : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles.remove}\n        onClick={onRemove}\n        data-testid={removeButtonTestId}\n      >\n        <span className={styles.removeIn}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableIosRenderProps {\n  /**\n   * Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n   * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n   * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n   * Когда контент сдвинут `isRemoving = true`.\n   */\n  isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n    RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n  /**\n   * Убирает базовые отступы для базовой платформы\n   */\n  noPadding?: boolean;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n  noPadding,\n  ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove?.(e);\n  };\n\n  const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === 'ios' && styles.ios,\n        align === 'start' && styles.alignStart,\n        indent && styles.indent,\n      )}\n    >\n      {platform !== 'ios' && (\n        <div\n          className={classNames(\n            styles.content,\n            !noPadding && styles.withPadding,\n            'vkuiInternalRemovable__content',\n          )}\n        >\n          {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={classNames(styles.action, 'vkuiInternalRemovable__action')}\n            onClick={onRemoveClick}\n            label={removePlaceholderString}\n            data-testid={removeButtonTestId}\n            disabled={disabled}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles.offset} aria-hidden />\n        </div>\n      )}\n\n      {platform === 'ios' && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n          disabled={disabled}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useConfigDirection","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","direction","isRtl","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","style","String","div","className","content","rtl","onTransitionEnd","hasActive","hasHover","action","toggle","onClick","data-testid","i","toggleIn","role","isRemoving","span","offset","aria-hidden","Component","getRootRef","remove","removeIn","Removable","align","indent","noPadding","restProps","platform","onRemoveClick","preventDefault","baseClassName","ios","alignStart","withPadding","activeMode","hoverMode","label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Обработчик, срабатывающий при нажатии на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n  /**\n   * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only).\n   */\n  toggleButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки удаления.\n   */\n  removeButtonTestId?: string;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n}\n/* eslint-disable jsdoc/require-jsdoc */\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n}: RemovableIosOwnProps) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  const style: CSSCustomProperties = {\n    '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0),\n  };\n\n  return (\n    <div\n      className={classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content')}\n      style={style}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        className={classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action')}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0 || disabled}\n        data-testid={toggleButtonTestId}\n      >\n        <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n        <i className={styles.toggleIn} role=\"presentation\" />\n      </IconButton>\n      {typeof childrenProp === 'function'\n        ? childrenProp({ isRemoving: removeOffset > 0 })\n        : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles.remove}\n        onClick={onRemove}\n        data-testid={removeButtonTestId}\n      >\n        <span className={styles.removeIn}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableIosRenderProps {\n  /**\n   * Показывает состояние Removable на платформе iOS при нажатии на иконку удаления.\n   * Для имитации поведения на iOS при нажатии на иконку удаления самого удаление не происходит,\n   * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n   * Когда контент сдвинут `isRemoving = true`.\n   */\n  isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n    RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n  /**\n   * Убирает базовые отступы для базовой платформы.\n   */\n  noPadding?: boolean;\n  /**\n   * Содержимое. Можно передать функцию для отрисовки.\n   */\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n  noPadding,\n  ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove?.(e);\n  };\n\n  const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === 'ios' && styles.ios,\n        align === 'start' && styles.alignStart,\n        indent && styles.indent,\n      )}\n    >\n      {platform !== 'ios' && (\n        <div\n          className={classNames(\n            styles.content,\n            !noPadding && styles.withPadding,\n            'vkuiInternalRemovable__content',\n          )}\n        >\n          {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={classNames(styles.action, 'vkuiInternalRemovable__action')}\n            onClick={onRemoveClick}\n            label={removePlaceholderString}\n            data-testid={removeButtonTestId}\n            disabled={disabled}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles.offset} aria-hidden />\n        </div>\n      )}\n\n      {platform === 'ios' && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n          disabled={disabled}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useConfigDirection","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","direction","isRtl","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","style","String","div","className","content","rtl","onTransitionEnd","hasActive","hasHover","action","toggle","onClick","data-testid","i","toggleIn","role","isRemoving","span","offset","aria-hidden","Component","getRootRef","remove","removeIn","Removable","align","indent","noPadding","restProps","platform","onRemoveClick","preventDefault","baseClassName","ios","alignStart","withPadding","activeMode","hoverMode","label"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst alignAfterClassNames = {\n  start: styles.alignAfterStart,\n  center: styles.alignAfterCenter,\n  end: styles.alignAfterEnd,\n};\n\nconst alignBeforeClassNames = {\n  start: styles.alignBeforeStart,\n  center: styles.alignBeforeCenter,\n  end: styles.alignBeforeEnd,\n};\n\nconst alignContentClassNames = {\n  start: styles.contentAlignStart,\n  center: styles.contentAlignCenter,\n  end: styles.contentAlignEnd,\n};\n\ntype Align = 'start' | 'center' | 'end';\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Выравнивание before компонента по вертикали\n   */\n  beforeAlign?: Align;\n  /**\n   * Выравнивание центрального контента по вертикали\n   */\n  contentAlign?: Align;\n  /**\n   * Выравнивание after компонента по вертикали\n   */\n  afterAlign?: Align;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  overTitle,\n  children,\n  subtitle,\n  extraSubtitle,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  beforeAlign = 'start',\n  contentAlign = 'start',\n  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const withAfter = after || afterCaption;\n\n  const afterRender = () => {\n    if (!withAfter) {\n      return;\n    }\n    return (\n      <div className={styles.contentAfter}>\n        {after && <div className={styles.afterChildren}>{after}</div>}\n        {afterCaption && <div className={styles.afterCaption}>{afterCaption}</div>}\n      </div>\n    );\n  };\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        !multiline && styles.textEllipsis,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withAfter && styles.withAfter,\n        withAfter && alignAfterClassNames[afterAlign],\n        before && alignBeforeClassNames[beforeAlign],\n        alignContentClassNames[contentAlign],\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <div className={styles.in}>\n        <div className={styles.content}>\n          <div className={styles.contentBefore}>\n            {overTitle && (\n              <Subhead Component=\"div\" className={styles.overTitle}>\n                {overTitle}\n              </Subhead>\n            )}\n            <div className={styles.children}>{children}</div>\n            {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n            {extraSubtitle && (\n              <Subhead Component=\"div\" className={styles.extraSubtitle}>\n                {extraSubtitle}\n              </Subhead>\n            )}\n          </div>\n          {afterAlign === 'start' && afterRender()}\n        </div>\n        {bottom && <div className={styles.bottom}>{bottom}</div>}\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {afterAlign !== 'start' && afterRender()}\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","alignAfterClassNames","start","alignAfterStart","center","alignAfterCenter","end","alignAfterEnd","alignBeforeClassNames","alignBeforeStart","alignBeforeCenter","alignBeforeEnd","alignContentClassNames","contentAlignStart","contentAlignCenter","contentAlignEnd","RichCell","overTitle","children","subtitle","extraSubtitle","before","after","afterCaption","bottom","actions","multiline","beforeAlign","contentAlign","afterAlign","restProps","sizeY","withAfter","afterRender","div","className","contentAfter","afterChildren","baseClassName","host","textEllipsis","in","content","contentBefore","Component","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,uBAAuB;IAC3BC,OAAOP,OAAOQ,eAAe;IAC7BC,QAAQT,OAAOU,gBAAgB;IAC/BC,KAAKX,OAAOY,aAAa;AAC3B;AAEA,MAAMC,wBAAwB;IAC5BN,OAAOP,OAAOc,gBAAgB;IAC9BL,QAAQT,OAAOe,iBAAiB;IAChCJ,KAAKX,OAAOgB,cAAc;AAC5B;AAEA,MAAMC,yBAAyB;IAC7BV,OAAOP,OAAOkB,iBAAiB;IAC/BT,QAAQT,OAAOmB,kBAAkB;IACjCR,KAAKX,OAAOoB,eAAe;AAC7B;AAkEA;;CAEC,GACD,OAAO,MAAMC,WAET,CAAC,EACHC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,cAAc,OAAO,EACrBC,eAAe,OAAO,EACtBC,aAAa,OAAO,EACpB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGxC;IAC3B,MAAMyC,YAAYV,SAASC;IAE3B,MAAMU,cAAc;QAClB,IAAI,CAACD,WAAW;YACd;QACF;QACA,qBACE,MAACE;YAAIC,WAAWxC,OAAOyC,YAAY;;gBAChCd,uBAAS,KAACY;oBAAIC,WAAWxC,OAAO0C,aAAa;8BAAGf;;gBAChDC,8BAAgB,KAACW;oBAAIC,WAAWxC,OAAO4B,YAAY;8BAAGA;;;;IAG7D;IAEA,qBACE,MAAC/B;QACE,GAAGsC,SAAS;QACbQ,eAAehD,WACbK,OAAO4C,IAAI,EACX,CAACb,aAAa/B,OAAO6C,YAAY,EACjCT,UAAU,aAAanC,eAAe,CAACmC,MAAM,EAC7CC,aAAarC,OAAOqC,SAAS,EAC7BA,aAAa/B,oBAAoB,CAAC4B,WAAW,EAC7CR,UAAUb,qBAAqB,CAACmB,YAAY,EAC5Cf,sBAAsB,CAACgB,aAAa;;YAGrCP,wBAAU,KAACa;gBAAIC,WAAWxC,OAAO0B,MAAM;0BAAGA;;0BAC3C,MAACa;gBAAIC,WAAWxC,OAAO8C,EAAE;;kCACvB,MAACP;wBAAIC,WAAWxC,OAAO+C,OAAO;;0CAC5B,MAACR;gCAAIC,WAAWxC,OAAOgD,aAAa;;oCACjC1B,2BACC,KAACxB;wCAAQmD,WAAU;wCAAMT,WAAWxC,OAAOsB,SAAS;kDACjDA;;kDAGL,KAACiB;wCAAIC,WAAWxC,OAAOuB,QAAQ;kDAAGA;;oCACjCC,0BAAY,KAACe;wCAAIC,WAAWxC,OAAOwB,QAAQ;kDAAGA;;oCAC9CC,+BACC,KAAC3B;wCAAQmD,WAAU;wCAAMT,WAAWxC,OAAOyB,aAAa;kDACrDA;;;;4BAINS,eAAe,WAAWI;;;oBAE5BT,wBAAU,KAACU;wBAAIC,WAAWxC,OAAO6B,MAAM;kCAAGA;;oBAC1CC,yBAAW,KAACS;wBAAIC,WAAWxC,OAAO8B,OAAO;kCAAGA;;;;YAE9CI,eAAe,WAAWI;;;AAGjC,EAAE;AAEFjB,SAAS6B,IAAI,GAAGnD"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst alignAfterClassNames = {\n  start: styles.alignAfterStart,\n  center: styles.alignAfterCenter,\n  end: styles.alignAfterEnd,\n};\n\nconst alignBeforeClassNames = {\n  start: styles.alignBeforeStart,\n  center: styles.alignBeforeCenter,\n  end: styles.alignBeforeEnd,\n};\n\nconst alignContentClassNames = {\n  start: styles.contentAlignStart,\n  center: styles.contentAlignCenter,\n  end: styles.contentAlignEnd,\n};\n\ntype Align = 'start' | 'center' | 'end';\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`.\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Выравнивание before компонента по вертикали.\n   */\n  beforeAlign?: Align;\n  /**\n   * Выравнивание центрального контента по вертикали.\n   */\n  contentAlign?: Align;\n  /**\n   * Выравнивание after компонента по вертикали.\n   */\n  afterAlign?: Align;\n  /**\n   * Блокировка взаимодействия с компонентом. Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  overTitle,\n  children,\n  subtitle,\n  extraSubtitle,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  beforeAlign = 'start',\n  contentAlign = 'start',\n  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const withAfter = after || afterCaption;\n\n  const afterRender = () => {\n    if (!withAfter) {\n      return;\n    }\n    return (\n      <div className={styles.contentAfter}>\n        {after && <div className={styles.afterChildren}>{after}</div>}\n        {afterCaption && <div className={styles.afterCaption}>{afterCaption}</div>}\n      </div>\n    );\n  };\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        !multiline && styles.textEllipsis,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withAfter && styles.withAfter,\n        withAfter && alignAfterClassNames[afterAlign],\n        before && alignBeforeClassNames[beforeAlign],\n        alignContentClassNames[contentAlign],\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <div className={styles.in}>\n        <div className={styles.content}>\n          <div className={styles.contentBefore}>\n            {overTitle && (\n              <Subhead Component=\"div\" className={styles.overTitle}>\n                {overTitle}\n              </Subhead>\n            )}\n            <div className={styles.children}>{children}</div>\n            {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n            {extraSubtitle && (\n              <Subhead Component=\"div\" className={styles.extraSubtitle}>\n                {extraSubtitle}\n              </Subhead>\n            )}\n          </div>\n          {afterAlign === 'start' && afterRender()}\n        </div>\n        {bottom && <div className={styles.bottom}>{bottom}</div>}\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {afterAlign !== 'start' && afterRender()}\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","alignAfterClassNames","start","alignAfterStart","center","alignAfterCenter","end","alignAfterEnd","alignBeforeClassNames","alignBeforeStart","alignBeforeCenter","alignBeforeEnd","alignContentClassNames","contentAlignStart","contentAlignCenter","contentAlignEnd","RichCell","overTitle","children","subtitle","extraSubtitle","before","after","afterCaption","bottom","actions","multiline","beforeAlign","contentAlign","afterAlign","restProps","sizeY","withAfter","afterRender","div","className","contentAfter","afterChildren","baseClassName","host","textEllipsis","in","content","contentBefore","Component","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,uBAAuB;IAC3BC,OAAOP,OAAOQ,eAAe;IAC7BC,QAAQT,OAAOU,gBAAgB;IAC/BC,KAAKX,OAAOY,aAAa;AAC3B;AAEA,MAAMC,wBAAwB;IAC5BN,OAAOP,OAAOc,gBAAgB;IAC9BL,QAAQT,OAAOe,iBAAiB;IAChCJ,KAAKX,OAAOgB,cAAc;AAC5B;AAEA,MAAMC,yBAAyB;IAC7BV,OAAOP,OAAOkB,iBAAiB;IAC/BT,QAAQT,OAAOmB,kBAAkB;IACjCR,KAAKX,OAAOoB,eAAe;AAC7B;AAkEA;;CAEC,GACD,OAAO,MAAMC,WAET,CAAC,EACHC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,cAAc,OAAO,EACrBC,eAAe,OAAO,EACtBC,aAAa,OAAO,EACpB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGxC;IAC3B,MAAMyC,YAAYV,SAASC;IAE3B,MAAMU,cAAc;QAClB,IAAI,CAACD,WAAW;YACd;QACF;QACA,qBACE,MAACE;YAAIC,WAAWxC,OAAOyC,YAAY;;gBAChCd,uBAAS,KAACY;oBAAIC,WAAWxC,OAAO0C,aAAa;8BAAGf;;gBAChDC,8BAAgB,KAACW;oBAAIC,WAAWxC,OAAO4B,YAAY;8BAAGA;;;;IAG7D;IAEA,qBACE,MAAC/B;QACE,GAAGsC,SAAS;QACbQ,eAAehD,WACbK,OAAO4C,IAAI,EACX,CAACb,aAAa/B,OAAO6C,YAAY,EACjCT,UAAU,aAAanC,eAAe,CAACmC,MAAM,EAC7CC,aAAarC,OAAOqC,SAAS,EAC7BA,aAAa/B,oBAAoB,CAAC4B,WAAW,EAC7CR,UAAUb,qBAAqB,CAACmB,YAAY,EAC5Cf,sBAAsB,CAACgB,aAAa;;YAGrCP,wBAAU,KAACa;gBAAIC,WAAWxC,OAAO0B,MAAM;0BAAGA;;0BAC3C,MAACa;gBAAIC,WAAWxC,OAAO8C,EAAE;;kCACvB,MAACP;wBAAIC,WAAWxC,OAAO+C,OAAO;;0CAC5B,MAACR;gCAAIC,WAAWxC,OAAOgD,aAAa;;oCACjC1B,2BACC,KAACxB;wCAAQmD,WAAU;wCAAMT,WAAWxC,OAAOsB,SAAS;kDACjDA;;kDAGL,KAACiB;wCAAIC,WAAWxC,OAAOuB,QAAQ;kDAAGA;;oCACjCC,0BAAY,KAACe;wCAAIC,WAAWxC,OAAOwB,QAAQ;kDAAGA;;oCAC9CC,+BACC,KAAC3B;wCAAQmD,WAAU;wCAAMT,WAAWxC,OAAOyB,aAAa;kDACrDA;;;;4BAINS,eAAe,WAAWI;;;oBAE5BT,wBAAU,KAACU;wBAAIC,WAAWxC,OAAO6B,MAAM;kCAAGA;;oBAC1CC,yBAAW,KAACS;wBAAIC,WAAWxC,OAAO8B,OAAO;kCAAGA;;;;YAE9CI,eAAe,WAAWI;;;AAGjC,EAAE;AAEFjB,SAAS6B,IAAI,GAAGnD"}

package/dist/cssm/components/Root/Root.js

@@ -14,7 +14,7 @@ import { NavTransitionDirectionProvider } from "../NavTransitionDirectionContext
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { SplitColContext } from "../SplitCol/SplitColContext.js";
 import styles from "./Root.module.css";
-const warn = warnOnce('Root');
+/* eslint-enable jsdoc/require-jsdoc */ const warn = warnOnce('Root');
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */ export const Root = ({ children, activeView: _activeView, onTransition, nav, ...restProps })=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, type NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps): React.ReactNode => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>;\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  React.useEffect(\n    function onAnimationEndFallback() {\n      if (transition && disableAnimation) {\n        finishTransition();\n      }\n    },\n    [transition, disableAnimation, finishTransition],\n  );\n\n  const onAnimationEnd = () => {\n    finishTransition();\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        transition && styles.transition,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => {\n              viewId && (viewNodes[viewId] = e);\n            }}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles.view,\n              transition && viewId === prevView && isBack && styles.viewHideBack,\n              transition && viewId === prevView && !isBack && styles.viewHideForward,\n              transition && viewId === activeView && isBack && styles.viewShowBack,\n              transition && viewId === activeView && !isBack && styles.viewShowForward,\n            )}\n          >\n            <NavTransitionDirectionProvider isBack={isBack}>\n              <NavTransitionProvider entering={transition && viewId === activeView}>\n                <div\n                  className={styles.scrollCompensation}\n                  style={{\n                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                  }}\n                >\n                  {view}\n                </div>\n              </NavTransitionProvider>\n            </NavTransitionDirectionProvider>\n          </div>\n        );\n      })}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useDOM","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","baseClassName","host","ios","viewId","isTransitionTarget","compensateScroll","div","ref","e","undefined","className","viewHideBack","viewHideForward","viewShowBack","viewShowForward","entering","scrollCompensation","style","marginTop"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,QAAQ,QAAyB,wBAAqB;AAC/D,SAASC,yBAAyB,QAAQ,yCAAsC;AAChF,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,qBAAqB,QAAQ,kDAA+C;AACrF,SAASC,8BAA8B,QAAQ,oEAAiE;AAChH,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,OAAOC,YAAY,oBAAoB;AAevC,MAAMC,OAAOR,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMS,OAAO,CAAC,EACnBC,QAAQ,EACRC,YAAYC,WAAW,EACvBC,YAAY,EACZC,GAAG,EACH,GAAGC,WACO;IACV,MAAMC,SAAStB,MAAMuB,UAAU,CAAChB;IAChC,MAAMiB,WAAWtB;IACjB,MAAM,EAAEuB,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAU1B,MAAM2B,MAAM,CAAyB,CAAC,GAAGC,OAAO;IAChE,MAAMC,YAAY7B,MAAM2B,MAAM,CAAqC,CAAC,GAAGC,OAAO;IAE9E,MAAM,EAAEE,0BAA0B,IAAI,EAAE,GAAGtB;IAC3C,MAAM,EAAEuB,OAAO,EAAE,GAAG/B,MAAMuB,UAAU,CAACX;IACrC,MAAMoB,mBAAmB,CAACF,2BAA2B,CAACC;IAEtD,MAAME,QAAQjC,MAAMkC,QAAQ,CAACC,OAAO,CAACnB;IAErC,MAAM,CAAC,EAAEoB,QAAQ,EAAEnB,UAAU,EAAEoB,UAAU,EAAEC,MAAM,EAAE,EAAEC,UAAU,GAAGvC,MAAMwC,QAAQ,CAAY;QAC1FvB,YAAYC;QACZmB,YAAY;IACd;IACA,MAAMI,eAAe,CAACC;QACpB,IAAIA,UAAUzB,YAAY;YACxB,MAAM0B,UAAUV,MAAMW,GAAG,CAAC,CAACC,OAASzC,SAASyC,KAAKC,KAAK,EAAEhC;YACzD,MAAMwB,SAASK,QAAQI,OAAO,CAACL,SAASC,QAAQI,OAAO,CAAC9B;YACxDS,OAAO,CAACT,WAAW,GAAGK,OAAO0B,SAAS,GAAGC,CAAC;YAC1CV,UAAU;gBACRtB,YAAYyB;gBACZN,UAAUnB;gBACVoB,YAAY,CAACL;gBACbM;YACF;QACF;IACF;IACA,MAAMY,mBAAmBlD,MAAMmD,WAAW,CACxC,IAAMZ,UAAU;YAAEtB;YAAYmB;YAAUE;YAAQD,YAAY;QAAM,IAClE;QAACpB;QAAYqB;QAAQF;KAAS;IAGhC/B,0BAA0B;QACvBoB,SAAU2B,aAAa,CAAiBC,IAAI;IAC/C,GAAG;QAACpC;KAAW;IAEf,gBAAgB;IAChBZ,0BAA0B,IAAMoC,aAAavB,cAAc;QAACA;KAAY;IACxEb,0BAA0B;QACxB,IAAI,CAACgC,cAAcD,UAAU;YAC3B,qBAAqB;YACrBd,OAAOgC,QAAQ,CAAC,GAAGhB,SAASZ,OAAO,CAACT,WAAW,GAAG;YAClDE,gBACEA,aAAa;gBACXmB,QAAQiB,QAAQjB;gBAChBkB,MAAMpB;gBACNqB,IAAIxC;YACN;QACJ;IACF,GAAG;QAACoB;QAAYD;KAAS;IAEzBpC,MAAM0D,SAAS,CACb,SAASC;QACP,IAAItB,cAAcL,kBAAkB;YAClCkB;QACF;IACF,GACA;QAACb;QAAYL;QAAkBkB;KAAiB;IAGlD,MAAMU,iBAAiB;QACrBV;IACF;IAEA,qBACE,KAACvC;QACE,GAAGU,SAAS;QACbwC,eAAe5D,WACbY,OAAOiD,IAAI,EACXtC,aAAa,SAASX,OAAOkD,GAAG,EAChC1B,cAAcxB,OAAOwB,UAAU;kBAGhCJ,MAAMW,GAAG,CAAC,CAACC;YACV,MAAMmB,SAAS5D,SAASyC,KAAKC,KAAK,EAAEhC;YACpC,IAAIkD,WAAW/C,cAAc,CAAEoB,CAAAA,cAAc2B,WAAW5B,QAAO,GAAI;gBACjE,OAAO;YACT;YACA,MAAM6B,qBAAqB5B,cAAc2B,WAAY1B,CAAAA,SAASF,WAAWnB,UAAS;YAClF,MAAMiD,mBACJ7B,cAAe2B,CAAAA,WAAW5B,YAAaE,UAAU0B,WAAW/C,UAAU;YACxE,qBACE,KAACkD;gBAECC,KAAK,CAACC;oBACJL,UAAWnC,CAAAA,SAAS,CAACmC,OAAO,GAAGK,CAAAA;gBACjC;gBACAT,gBAAgBK,qBAAqBL,iBAAiBU;gBACtDC,WAAWtE,WACTY,OAAOgC,IAAI,EACXR,cAAc2B,WAAW5B,YAAYE,UAAUzB,OAAO2D,YAAY,EAClEnC,cAAc2B,WAAW5B,YAAY,CAACE,UAAUzB,OAAO4D,eAAe,EACtEpC,cAAc2B,WAAW/C,cAAcqB,UAAUzB,OAAO6D,YAAY,EACpErC,cAAc2B,WAAW/C,cAAc,CAACqB,UAAUzB,OAAO8D,eAAe;0BAG1E,cAAA,KAACjE;oBAA+B4B,QAAQA;8BACtC,cAAA,KAAC7B;wBAAsBmE,UAAUvC,cAAc2B,WAAW/C;kCACxD,cAAA,KAACkD;4BACCI,WAAW1D,OAAOgE,kBAAkB;4BACpCC,OAAO;gCACLC,WAAWb,mBAAmBF,UAAU,CAAEtC,CAAAA,OAAO,CAACsC,OAAO,IAAI,CAAA,IAAKM;4BACpE;sCAECzB;;;;eArBFmB;QA2BX;;AAGN,EAAE"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, type NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  /**\n   * `id` активной `View`.\n   */\n  activeView: string;\n  /**\n   * Обработчик, который вызывается при завершении анимации смены активной `View`.\n   */\n  onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n  /**\n   * Коллекция `View`. У каждой `View` должен быть `id`.\n   */\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps): React.ReactNode => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as Array<React.ReactElement<NavIdProps>>;\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  React.useEffect(\n    function onAnimationEndFallback() {\n      if (transition && disableAnimation) {\n        finishTransition();\n      }\n    },\n    [transition, disableAnimation, finishTransition],\n  );\n\n  const onAnimationEnd = () => {\n    finishTransition();\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        transition && styles.transition,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => {\n              viewId && (viewNodes[viewId] = e);\n            }}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles.view,\n              transition && viewId === prevView && isBack && styles.viewHideBack,\n              transition && viewId === prevView && !isBack && styles.viewHideForward,\n              transition && viewId === activeView && isBack && styles.viewShowBack,\n              transition && viewId === activeView && !isBack && styles.viewShowForward,\n            )}\n          >\n            <NavTransitionDirectionProvider isBack={isBack}>\n              <NavTransitionProvider entering={transition && viewId === activeView}>\n                <div\n                  className={styles.scrollCompensation}\n                  style={{\n                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                  }}\n                >\n                  {view}\n                </div>\n              </NavTransitionProvider>\n            </NavTransitionDirectionProvider>\n          </div>\n        );\n      })}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useDOM","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","baseClassName","host","ios","viewId","isTransitionTarget","compensateScroll","div","ref","e","undefined","className","viewHideBack","viewHideForward","viewShowBack","viewShowForward","entering","scrollCompensation","style","marginTop"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport styles from './RootComponent.module.css';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  baseClassName?: string | false;\n  baseStyle?: React.CSSProperties;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  baseStyle,\n  style,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>): React.ReactNode => (\n  <Component\n    ref={getRootRef}\n    className={classNames(\n      className,\n      baseClassName,\n      styles.host,\n      restProps.hidden === true && styles.hidden,\n    )}\n    style={mergeStyle(baseStyle, style)}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","mergeStyle","styles","RootComponent","Component","baseClassName","className","baseStyle","style","getRootRef","restProps","ref","host","hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,OAAOC,YAAY,6BAA6B;AAUhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,UAAU,EACV,GAAGC,WACmB,iBACtB,KAACN;QACCO,KAAKF;QACLH,WAAWN,WACTM,WACAD,eACAH,OAAOU,IAAI,EACXF,UAAUG,MAAM,KAAK,QAAQX,OAAOW,MAAM;QAE5CL,OAAOP,WAAWM,WAAWC;QAC5B,GAAGE,SAAS;OAEf"}
+{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport styles from './RootComponent.module.css';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  /**\n   * @deprecated Since 7.3.0.\n   *\n   * Свойство устарело и будет удалено в `v8`, используйте свойство `className`.\n   */\n  baseClassName?: string | false; // TODO:  Перенести свойство в RootComponentInternalProps, в непубличное API\n  /**\n   * @deprecated Since 7.3.0.\n   *\n   * Свойство устарело и будет удалено в `v8`, используйте свойство `style`.\n   */\n  baseStyle?: React.CSSProperties; // TODO:  Перенести свойство в RootComponentInternalProps, в непубличное API\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  baseStyle,\n  style,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>): React.ReactNode => (\n  <Component\n    ref={getRootRef}\n    className={classNames(\n      className,\n      baseClassName,\n      styles.host,\n      restProps.hidden === true && styles.hidden,\n    )}\n    style={mergeStyle(baseStyle, style)}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","mergeStyle","styles","RootComponent","Component","baseClassName","className","baseStyle","style","getRootRef","restProps","ref","host","hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,OAAOC,YAAY,6BAA6B;AAoBhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,UAAU,EACV,GAAGC,WACmB,iBACtB,KAACN;QACCO,KAAKF;QACLH,WAAWN,WACTM,WACAD,eACAH,OAAOU,IAAI,EACXF,UAAUG,MAAM,KAAK,QAAQX,OAAOW,MAAM;QAE5CL,OAAOP,WAAWM,WAAWC;QAC5B,GAAGE,SAAS;OAEf"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper.js";
@@ -36,12 +37,13 @@ import { ScreenSpinnerSwapIcon } from "./ScreenSpinnerSwapIcon.js";
         })
     });
 };
-ScreenSpinner.displayName = 'ScreenSpinner';
 ScreenSpinner.Container = ScreenSpinnerContainer;
-ScreenSpinner.Container.displayName = 'ScreenSpinner.Container';
 ScreenSpinner.Loader = ScreenSpinnerLoader;
-ScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';
 ScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;
-ScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(ScreenSpinner.Container, 'ScreenSpinner.Container');
+    defineComponentDisplayNames(ScreenSpinner.Loader, 'ScreenSpinner.Loader');
+    defineComponentDisplayNames(ScreenSpinner.SwapIcon, 'ScreenSpinner.SwapIcon');
+}
 
 //# sourceMappingURL=ScreenSpinner.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground strategy=\"fixed\">\n        <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","AppRootPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","restProps","noBackground","strategy","displayName","Container","Loader","SwapIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACT,GAAGC,WACgB;IACnBf;IAEA,qBACE,KAACD;QAAce,WAAWA;kBACxB,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOU,YAAY;YAACC,UAAS;sBACvE,cAAA,MAACf;gBAAuBM,OAAOA;gBAAOG,MAAMA;gBAAMC,OAAOA;gBAAOC,YAAYA;;kCAC1E,KAACV;wBAAqB,GAAGY,SAAS;;kCAClC,KAACX;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAca,WAAW,GAAG;AAE5Bb,cAAcc,SAAS,GAAGjB;AAC1BG,cAAcc,SAAS,CAACD,WAAW,GAAG;AAEtCb,cAAce,MAAM,GAAGjB;AACvBE,cAAce,MAAM,CAACF,WAAW,GAAG;AAEnCb,cAAcgB,QAAQ,GAAGjB;AACzBC,cAAcgB,QAAQ,CAACH,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground strategy=\"fixed\">\n        <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ScreenSpinner.Container, 'ScreenSpinner.Container');\n  defineComponentDisplayNames(ScreenSpinner.Loader, 'ScreenSpinner.Loader');\n  defineComponentDisplayNames(ScreenSpinner.SwapIcon, 'ScreenSpinner.SwapIcon');\n}\n"],"names":["React","defineComponentDisplayNames","AppRootPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","restProps","noBackground","strategy","Container","Loader","SwapIcon","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACT,GAAGC,WACgB;IACnBf;IAEA,qBACE,KAACD;QAAce,WAAWA;kBACxB,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOU,YAAY;YAACC,UAAS;sBACvE,cAAA,MAACf;gBAAuBM,OAAOA;gBAAOG,MAAMA;gBAAMC,OAAOA;gBAAOC,YAAYA;;kCAC1E,KAACV;wBAAqB,GAAGY,SAAS;;kCAClC,KAACX;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAca,SAAS,GAAGhB;AAC1BG,cAAcc,MAAM,GAAGhB;AACvBE,cAAce,QAAQ,GAAGhB;AAEzB,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCzB,4BAA4BO,cAAca,SAAS,EAAE;IACrDpB,4BAA4BO,cAAcc,MAAM,EAAE;IAClDrB,4BAA4BO,cAAce,QAAQ,EAAE;AACtD"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinnerContainer.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
@@ -39,6 +38,5 @@ export const ScreenSpinnerContainer = ({ state = 'loading', mode = 'shadow', cus
         })
     });
 };
-ScreenSpinnerContainer.displayName = 'ScreenSpinnerContainer';
 
 //# sourceMappingURL=ScreenSpinnerContainer.js.map

package/dist/cssm/components/ScreenSpinner/ScreenSpinnerContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\nconst stateClassNames = {\n  cancelable: styles.stateCancelable,\n  done: styles.stateDone,\n  error: styles.stateError,\n  custom: styles.stateCustom,\n};\n\nconst modeClassNames = {\n  shadow: styles.modeShadow,\n  overlay: styles.modeOverlay,\n};\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state' | 'mode' | 'label' | 'customIcon'>;\n\nexport const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps> = ({\n  state = 'loading',\n  mode = 'shadow',\n  customIcon,\n  label,\n  children,\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state, label, customIcon }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles.host,\n          modeClassNames[mode],\n          state !== 'loading' && stateClassNames[state],\n          hasReactNode(label) && styles.hasLabel,\n        )}\n        {...restProps}\n      >\n        <div className={styles.iconSlot}>{children}</div>\n        {hasReactNode(label) && (\n          <Footnote className={styles.label} aria-hidden>\n            {label}\n          </Footnote>\n        )}\n      </RootComponent>\n    </ScreenSpinnerContext.Provider>\n  );\n};\n\nScreenSpinnerContainer.displayName = 'ScreenSpinnerContainer';\n"],"names":["React","classNames","hasReactNode","RootComponent","Footnote","ScreenSpinnerContext","styles","stateClassNames","cancelable","stateCancelable","done","stateDone","error","stateError","custom","stateCustom","modeClassNames","shadow","modeShadow","overlay","modeOverlay","ScreenSpinnerContainer","state","mode","customIcon","label","children","restProps","Provider","value","baseClassName","host","hasLabel","div","className","iconSlot","aria-hidden","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,oBAAoB,QAAQ,eAAY;AAEjD,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,kBAAkB;IACtBC,YAAYF,OAAOG,eAAe;IAClCC,MAAMJ,OAAOK,SAAS;IACtBC,OAAON,OAAOO,UAAU;IACxBC,QAAQR,OAAOS,WAAW;AAC5B;AAEA,MAAMC,iBAAiB;IACrBC,QAAQX,OAAOY,UAAU;IACzBC,SAASb,OAAOc,WAAW;AAC7B;AAKA,OAAO,MAAMC,yBAAgE,CAAC,EAC5EC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACfC,UAAU,EACVC,KAAK,EACLC,QAAQ,EACR,GAAGC,WACyB;IAC5B,qBACE,KAACtB,qBAAqBuB,QAAQ;QAACC,OAAO;YAAEP;YAAOG;YAAOD;QAAW;kBAC/D,cAAA,MAACrB;YACC2B,eAAe7B,WACbK,OAAOyB,IAAI,EACXf,cAAc,CAACO,KAAK,EACpBD,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CpB,aAAauB,UAAUnB,OAAO0B,QAAQ;YAEvC,GAAGL,SAAS;;8BAEb,KAACM;oBAAIC,WAAW5B,OAAO6B,QAAQ;8BAAGT;;gBACjCxB,aAAauB,wBACZ,KAACrB;oBAAS8B,WAAW5B,OAAOmB,KAAK;oBAAEW,aAAW;8BAC3CX;;;;;AAMb,EAAE;AAEFJ,uBAAuBgB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"sourcesContent":["import { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\nconst stateClassNames = {\n  cancelable: styles.stateCancelable,\n  done: styles.stateDone,\n  error: styles.stateError,\n  custom: styles.stateCustom,\n};\n\nconst modeClassNames = {\n  shadow: styles.modeShadow,\n  overlay: styles.modeOverlay,\n};\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state' | 'mode' | 'label' | 'customIcon'>;\n\nexport const ScreenSpinnerContainer = ({\n  state = 'loading',\n  mode = 'shadow',\n  customIcon,\n  label,\n  children,\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state, label, customIcon }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles.host,\n          modeClassNames[mode],\n          state !== 'loading' && stateClassNames[state],\n          hasReactNode(label) && styles.hasLabel,\n        )}\n        {...restProps}\n      >\n        <div className={styles.iconSlot}>{children}</div>\n        {hasReactNode(label) && (\n          <Footnote className={styles.label} aria-hidden>\n            {label}\n          </Footnote>\n        )}\n      </RootComponent>\n    </ScreenSpinnerContext.Provider>\n  );\n};\n"],"names":["classNames","hasReactNode","RootComponent","Footnote","ScreenSpinnerContext","styles","stateClassNames","cancelable","stateCancelable","done","stateDone","error","stateError","custom","stateCustom","modeClassNames","shadow","modeShadow","overlay","modeOverlay","ScreenSpinnerContainer","state","mode","customIcon","label","children","restProps","Provider","value","baseClassName","host","hasLabel","div","className","iconSlot","aria-hidden"],"mappings":";AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,oBAAoB,QAAQ,eAAY;AAEjD,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,kBAAkB;IACtBC,YAAYF,OAAOG,eAAe;IAClCC,MAAMJ,OAAOK,SAAS;IACtBC,OAAON,OAAOO,UAAU;IACxBC,QAAQR,OAAOS,WAAW;AAC5B;AAEA,MAAMC,iBAAiB;IACrBC,QAAQX,OAAOY,UAAU;IACzBC,SAASb,OAAOc,WAAW;AAC7B;AAKA,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACfC,UAAU,EACVC,KAAK,EACLC,QAAQ,EACR,GAAGC,WACyB;IAC5B,qBACE,KAACtB,qBAAqBuB,QAAQ;QAACC,OAAO;YAAEP;YAAOG;YAAOD;QAAW;kBAC/D,cAAA,MAACrB;YACC2B,eAAe7B,WACbK,OAAOyB,IAAI,EACXf,cAAc,CAACO,KAAK,EACpBD,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CpB,aAAauB,UAAUnB,OAAO0B,QAAQ;YAEvC,GAAGL,SAAS;;8BAEb,KAACM;oBAAIC,WAAW5B,OAAO6B,QAAQ;8BAAGT;;gBACjCxB,aAAauB,wBACZ,KAACrB;oBAAS8B,WAAW5B,OAAOmB,KAAK;oBAAEW,aAAW;8BAC3CX;;;;;AAMb,EAAE"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinnerLoader.js

@@ -16,6 +16,5 @@ export const ScreenSpinnerLoader = ({ children, ...restProps })=>{
         children: a11yText
     });
 };
-ScreenSpinnerLoader.displayName = 'ScreenSpinnerLoader';
 
 //# sourceMappingURL=ScreenSpinnerLoader.js.map

package/dist/cssm/components/ScreenSpinner/ScreenSpinnerLoader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinnerLoader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Spinner } from '../Spinner/Spinner';\nimport type { SpinnerProps } from '../Spinner/Spinner';\nimport { ScreenSpinnerContext } from './context';\nimport styles from './ScreenSpinner.module.css';\n\nexport const ScreenSpinnerLoader: React.FC<Omit<SpinnerProps, 'size'>> = ({\n  children,\n  ...restProps\n}) => {\n  const { label } = React.useContext(ScreenSpinnerContext);\n  const a11yText = children ?? label;\n  return (\n    <Spinner\n      className={classNames(styles.spinner, !label && styles.spinnerTransition)}\n      size=\"xl\"\n      noColor\n      {...restProps}\n    >\n      {a11yText}\n    </Spinner>\n  );\n};\n\nScreenSpinnerLoader.displayName = 'ScreenSpinnerLoader';\n"],"names":["React","classNames","Spinner","ScreenSpinnerContext","styles","ScreenSpinnerLoader","children","restProps","label","useContext","a11yText","className","spinner","spinnerTransition","size","noColor","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,OAAO,QAAQ,wBAAqB;AAE7C,SAASC,oBAAoB,QAAQ,eAAY;AACjD,OAAOC,YAAY,6BAA6B;AAEhD,OAAO,MAAMC,sBAA4D,CAAC,EACxEC,QAAQ,EACR,GAAGC,WACJ;IACC,MAAM,EAAEC,KAAK,EAAE,GAAGR,MAAMS,UAAU,CAACN;IACnC,MAAMO,WAAWJ,YAAYE;IAC7B,qBACE,KAACN;QACCS,WAAWV,WAAWG,OAAOQ,OAAO,EAAE,CAACJ,SAASJ,OAAOS,iBAAiB;QACxEC,MAAK;QACLC,OAAO;QACN,GAAGR,SAAS;kBAEZG;;AAGP,EAAE;AAEFL,oBAAoBW,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinnerLoader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Spinner } from '../Spinner/Spinner';\nimport type { SpinnerProps } from '../Spinner/Spinner';\nimport { ScreenSpinnerContext } from './context';\nimport styles from './ScreenSpinner.module.css';\n\ntype ScreenSpinnerLoaderProps = Omit<SpinnerProps, 'size'>;\n\nexport const ScreenSpinnerLoader = ({ children, ...restProps }: ScreenSpinnerLoaderProps) => {\n  const { label } = React.useContext(ScreenSpinnerContext);\n  const a11yText = children ?? label;\n  return (\n    <Spinner\n      className={classNames(styles.spinner, !label && styles.spinnerTransition)}\n      size=\"xl\"\n      noColor\n      {...restProps}\n    >\n      {a11yText}\n    </Spinner>\n  );\n};\n"],"names":["React","classNames","Spinner","ScreenSpinnerContext","styles","ScreenSpinnerLoader","children","restProps","label","useContext","a11yText","className","spinner","spinnerTransition","size","noColor"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,OAAO,QAAQ,wBAAqB;AAE7C,SAASC,oBAAoB,QAAQ,eAAY;AACjD,OAAOC,YAAY,6BAA6B;AAIhD,OAAO,MAAMC,sBAAsB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAqC;IACtF,MAAM,EAAEC,KAAK,EAAE,GAAGR,MAAMS,UAAU,CAACN;IACnC,MAAMO,WAAWJ,YAAYE;IAC7B,qBACE,KAACN;QACCS,WAAWV,WAAWG,OAAOQ,OAAO,EAAE,CAACJ,SAASJ,OAAOS,iBAAiB;QACxEC,MAAK;QACLC,OAAO;QACN,GAAGR,SAAS;kBAEZG;;AAGP,EAAE"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinnerSwapIcon.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 import { Icon24Cancel } from "@vkontakte/icons";
 import { mergeCalls } from "../../lib/mergeCalls.js";
 import { clickByKeyboardHandler } from "../../lib/utils.js";
@@ -28,7 +28,6 @@ const ScreenSpinnerCancelIcon = ({ onKeyDown, 'aria-label': ariaLabel = 'Отм
         children: /*#__PURE__*/ _jsx(Icon24Cancel, {})
     });
 };
-ScreenSpinnerCancelIcon.displayName = 'ScreenSpinnerCancelIcon';
 export const ScreenSpinnerSwapIcon = ({ cancelLabel, ...restProps })=>{
     const { state, customIcon } = React.useContext(ScreenSpinnerContext);
     if (state === 'cancelable') {
@@ -54,6 +53,5 @@ export const ScreenSpinnerSwapIcon = ({ cancelLabel, ...restProps })=>{
         children: getContent()
     });
 };
-ScreenSpinnerSwapIcon.displayName = 'ScreenSpinnerSwapIcon';
 
 //# sourceMappingURL=ScreenSpinnerSwapIcon.js.map

package/dist/cssm/components/ScreenSpinner/ScreenSpinnerSwapIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinnerSwapIcon.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\ntype ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {\n  cancelLabel?: ScreenSpinnerProps['cancelLabel'];\n};\n\nconst ScreenSpinnerCancelIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n  onKeyDown,\n  'aria-label': ariaLabel = 'Отменить',\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const handlers = mergeCalls(\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onKeyDown,\n    },\n  );\n  let clickableProps: React.HTMLAttributes<HTMLSpanElement> = {\n    ...handlers,\n    'tabIndex': 0,\n    'role': 'button',\n    'aria-label': ariaLabel,\n  };\n\n  return (\n    <RootComponent baseClassName={styles.icon} {...clickableProps} {...restProps}>\n      <Icon24Cancel />\n    </RootComponent>\n  );\n};\n\nScreenSpinnerCancelIcon.displayName = 'ScreenSpinnerCancelIcon';\n\nexport const ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n  cancelLabel,\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const { state, customIcon } = React.useContext(ScreenSpinnerContext);\n\n  if (state === 'cancelable') {\n    return <ScreenSpinnerCancelIcon aria-label={cancelLabel} {...restProps} />;\n  }\n\n  const getContent = () => {\n    if (state === 'custom') {\n      return customIcon;\n    }\n\n    const Icon = {\n      loading: () => null,\n      done: Icon48DoneOutline,\n      error: Icon48CancelCircle,\n    }[state];\n\n    return <Icon />;\n  };\n\n  return (\n    <RootComponent baseClassName={styles.icon} {...restProps}>\n      {getContent()}\n    </RootComponent>\n  );\n};\n\nScreenSpinnerSwapIcon.displayName = 'ScreenSpinnerSwapIcon';\n"],"names":["React","Icon24Cancel","mergeCalls","clickByKeyboardHandler","RootComponent","Icon48CancelCircle","Icon48DoneOutline","ScreenSpinnerContext","styles","ScreenSpinnerCancelIcon","onKeyDown","ariaLabel","restProps","handlers","clickableProps","baseClassName","icon","displayName","ScreenSpinnerSwapIcon","cancelLabel","state","customIcon","useContext","aria-label","getContent","Icon","loading","done","error"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,sBAAsB,QAAQ,qBAAkB;AAEzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,kBAAkB,QAAQ,0BAAuB;AAC1D,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,SAASC,oBAAoB,QAAQ,eAAY;AAEjD,OAAOC,YAAY,6BAA6B;AAMhD,MAAMC,0BAAgE,CAAC,EACrEC,SAAS,EACT,cAAcC,YAAY,UAAU,EACpC,GAAGC,WACwB;IAC3B,MAAMC,WAAWX,WACf;QAAEQ,WAAWP;IAAuB,GACpC;QACEO;IACF;IAEF,IAAII,iBAAwD;QAC1D,GAAGD,QAAQ;QACX,YAAY;QACZ,QAAQ;QACR,cAAcF;IAChB;IAEA,qBACE,KAACP;QAAcW,eAAeP,OAAOQ,IAAI;QAAG,GAAGF,cAAc;QAAG,GAAGF,SAAS;kBAC1E,cAAA,KAACX;;AAGP;AAEAQ,wBAAwBQ,WAAW,GAAG;AAEtC,OAAO,MAAMC,wBAA8D,CAAC,EAC1EC,WAAW,EACX,GAAGP,WACwB;IAC3B,MAAM,EAAEQ,KAAK,EAAEC,UAAU,EAAE,GAAGrB,MAAMsB,UAAU,CAACf;IAE/C,IAAIa,UAAU,cAAc;QAC1B,qBAAO,KAACX;YAAwBc,cAAYJ;YAAc,GAAGP,SAAS;;IACxE;IAEA,MAAMY,aAAa;QACjB,IAAIJ,UAAU,UAAU;YACtB,OAAOC;QACT;QAEA,MAAMI,OAAO;YACXC,SAAS,IAAM;YACfC,MAAMrB;YACNsB,OAAOvB;QACT,CAAC,CAACe,MAAM;QAER,qBAAO,KAACK;IACV;IAEA,qBACE,KAACrB;QAAcW,eAAeP,OAAOQ,IAAI;QAAG,GAAGJ,SAAS;kBACrDY;;AAGP,EAAE;AAEFN,sBAAsBD,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinnerSwapIcon.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\ntype ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {\n  cancelLabel?: ScreenSpinnerProps['cancelLabel'];\n};\n\nconst ScreenSpinnerCancelIcon = ({\n  onKeyDown,\n  'aria-label': ariaLabel = 'Отменить',\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const handlers = mergeCalls(\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onKeyDown,\n    },\n  );\n  let clickableProps: React.HTMLAttributes<HTMLSpanElement> = {\n    ...handlers,\n    'tabIndex': 0,\n    'role': 'button',\n    'aria-label': ariaLabel,\n  };\n\n  return (\n    <RootComponent baseClassName={styles.icon} {...clickableProps} {...restProps}>\n      <Icon24Cancel />\n    </RootComponent>\n  );\n};\n\nexport const ScreenSpinnerSwapIcon = ({\n  cancelLabel,\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const { state, customIcon } = React.useContext(ScreenSpinnerContext);\n\n  if (state === 'cancelable') {\n    return <ScreenSpinnerCancelIcon aria-label={cancelLabel} {...restProps} />;\n  }\n\n  const getContent = () => {\n    if (state === 'custom') {\n      return customIcon;\n    }\n\n    const Icon = {\n      loading: () => null,\n      done: Icon48DoneOutline,\n      error: Icon48CancelCircle,\n    }[state];\n\n    return <Icon />;\n  };\n\n  return (\n    <RootComponent baseClassName={styles.icon} {...restProps}>\n      {getContent()}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","mergeCalls","clickByKeyboardHandler","RootComponent","Icon48CancelCircle","Icon48DoneOutline","ScreenSpinnerContext","styles","ScreenSpinnerCancelIcon","onKeyDown","ariaLabel","restProps","handlers","clickableProps","baseClassName","icon","ScreenSpinnerSwapIcon","cancelLabel","state","customIcon","useContext","aria-label","getContent","Icon","loading","done","error"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,0BAAuB;AAClD,SAASC,sBAAsB,QAAQ,qBAAkB;AAEzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,kBAAkB,QAAQ,0BAAuB;AAC1D,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,SAASC,oBAAoB,QAAQ,eAAY;AAEjD,OAAOC,YAAY,6BAA6B;AAMhD,MAAMC,0BAA0B,CAAC,EAC/BC,SAAS,EACT,cAAcC,YAAY,UAAU,EACpC,GAAGC,WACwB;IAC3B,MAAMC,WAAWX,WACf;QAAEQ,WAAWP;IAAuB,GACpC;QACEO;IACF;IAEF,IAAII,iBAAwD;QAC1D,GAAGD,QAAQ;QACX,YAAY;QACZ,QAAQ;QACR,cAAcF;IAChB;IAEA,qBACE,KAACP;QAAcW,eAAeP,OAAOQ,IAAI;QAAG,GAAGF,cAAc;QAAG,GAAGF,SAAS;kBAC1E,cAAA,KAACX;;AAGP;AAEA,OAAO,MAAMgB,wBAAwB,CAAC,EACpCC,WAAW,EACX,GAAGN,WACwB;IAC3B,MAAM,EAAEO,KAAK,EAAEC,UAAU,EAAE,GAAGpB,MAAMqB,UAAU,CAACd;IAE/C,IAAIY,UAAU,cAAc;QAC1B,qBAAO,KAACV;YAAwBa,cAAYJ;YAAc,GAAGN,SAAS;;IACxE;IAEA,MAAMW,aAAa;QACjB,IAAIJ,UAAU,UAAU;YACtB,OAAOC;QACT;QAEA,MAAMI,OAAO;YACXC,SAAS,IAAM;YACfC,MAAMpB;YACNqB,OAAOtB;QACT,CAAC,CAACc,MAAM;QAER,qBAAO,KAACK;IACV;IAEA,qBACE,KAACpB;QAAcW,eAAeP,OAAOQ,IAAI;QAAG,GAAGJ,SAAS;kBACrDW;;AAGP,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/context.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type ScreenSpinnerProps } from './types';\n\nexport interface ScreenSpinnerContextProps {\n  state: NonNullable<ScreenSpinnerProps['state']>;\n  label?: ScreenSpinnerProps['label'];\n  customIcon?: ScreenSpinnerProps['customIcon'];\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n    label: undefined,\n    customIcon: undefined,\n  });\n"],"names":["React","ScreenSpinnerContext","createContext","state","label","undefined","customIcon"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAS/B,OAAO,MAAMC,uBACXD,MAAME,aAAa,CAA4B;IAC7CC,OAAO;IACPC,OAAOC;IACPC,YAAYD;AACd,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/context.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type ScreenSpinnerProps } from './types';\n\nexport interface ScreenSpinnerContextProps {\n  /**\n   * Тип отображения спиннера.\n   */\n  state: NonNullable<ScreenSpinnerProps['state']>;\n  /**\n   * Текст под иконкой.\n   */\n  label?: ScreenSpinnerProps['label'];\n  /**\n   * Кастомная иконка, работает совместно со `state=\"custom\"`.\n   */\n  customIcon?: ScreenSpinnerProps['customIcon'];\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n    label: undefined,\n    customIcon: undefined,\n  });\n"],"names":["React","ScreenSpinnerContext","createContext","state","label","undefined","customIcon"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAkB/B,OAAO,MAAMC,uBACXD,MAAME,aAAa,CAA4B;IAC7CC,OAAO;IACPC,OAAOC;IACPC,YAAYD;AACd,GAAG"}

package/dist/cssm/components/ScreenSpinner/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/types.tsx"],"sourcesContent":["import type * as React from 'react';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport type { SpinnerProps } from '../Spinner/Spinner';\n\nexport type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> & {\n  state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom';\n  /**\n   * Кастомная иконка, работает совместно со `state=\"custom\"`\n   */\n  customIcon?: React.ReactNode;\n  mode?: 'shadow' | 'overlay';\n  /**\n   * Текст под иконкой\n   */\n  label?: React.ReactNode;\n  cancelLabel?: string;\n  usePortal?: AppRootPortalProps['usePortal'];\n};\n"],"names":[],"mappings":"AAIA,WAaE"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/types.tsx"],"sourcesContent":["import type * as React from 'react';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport type { SpinnerProps } from '../Spinner/Spinner';\n\nexport type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> &\n  Pick<AppRootPortalProps, 'usePortal'> & {\n    /**\n     * Тип отображения спиннера.\n     */\n    state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom';\n    /**\n     * Кастомная иконка, работает совместно со `state=\"custom\"`.\n     */\n    customIcon?: React.ReactNode;\n    /**\n     * Внешний вид отображения спиннера.\n     */\n    mode?: 'shadow' | 'overlay';\n    /**\n     * Текст под иконкой.\n     */\n    label?: React.ReactNode;\n    /**\n     * Используется при `state='cancelable'`. Делает доступным для ассистивных технологий.\n     */\n    cancelLabel?: string;\n  };\n"],"names":[],"mappings":"AAIA,WAsBI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport type { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nconst stylesDirection = {\n  up: styles.directionUp,\n  right: styles.directionRight,\n  down: styles.directionDown,\n  left: styles.directionLeft,\n};\n\nconst labelDirection = {\n  up: 'Назад',\n  right: 'Вперед',\n  down: 'Вперед',\n  left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n  let Icon = Icon24Chevron;\n  if (size === 's') {\n    Icon = Icon16Chevron;\n  }\n\n  return <Icon className={styles.defaultIcon} />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'up' | 'right' | 'down' | 'left';\n  /**\n   * Размер стрелки\n   */\n  size?: 's' | 'm';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n  label?: string;\n}\n\n/**\n * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'm',\n  offsetY,\n  direction,\n  label: labelProp,\n  children = <ArrowIcon size={size} />,\n  ...restProps\n}: ScrollArrowProps): React.ReactNode => {\n  const textDirection = useConfigDirection();\n  const label = labelProp ?? labelDirection[direction];\n\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesDirection[direction],\n        textDirection === 'rtl' && styles.rtl,\n      )}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      <span className={styles.icon} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon24Chevron","classNames","useConfigDirection","RootComponent","VisuallyHidden","styles","stylesSize","s","sizeS","m","sizeM","stylesDirection","up","directionUp","right","directionRight","down","directionDown","left","directionLeft","labelDirection","ArrowIcon","size","Icon","className","defaultIcon","ScrollArrow","offsetY","direction","label","labelProp","children","restProps","textDirection","Component","type","baseClassName","host","rtl","span","icon","style","top","undefined"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AAEpE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,IAAIP,OAAOQ,WAAW;IACtBC,OAAOT,OAAOU,cAAc;IAC5BC,MAAMX,OAAOY,aAAa;IAC1BC,MAAMb,OAAOc,aAAa;AAC5B;AAEA,MAAMC,iBAAiB;IACrBR,IAAI;IACJE,OAAO;IACPE,MAAM;IACNE,MAAM;AACR;AAEA,MAAMG,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOvB;IACX,IAAIsB,SAAS,KAAK;QAChBC,OAAOxB;IACT;IAEA,qBAAO,KAACwB;QAAKC,WAAWnB,OAAOoB,WAAW;;AAC5C;AAoBA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BJ,OAAO,GAAG,EACVK,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,KAACV;IAAUC,MAAMA;EAAQ,EACpC,GAAGU,WACc;IACjB,MAAMC,gBAAgB/B;IACtB,MAAM2B,QAAQC,aAAaV,cAAc,CAACQ,UAAU;IAEpD,qBACE,MAACzB;QACC+B,WAAU;QACVC,MAAK;QACLC,eAAenC,WACbI,OAAOgC,IAAI,EACX/B,UAAU,CAACgB,KAAK,EAChBX,eAAe,CAACiB,UAAU,EAC1BK,kBAAkB,SAAS5B,OAAOiC,GAAG;QAEtC,GAAGN,SAAS;;YAEZH,uBAAS,KAACzB;0BAAgByB;;0BAC3B,KAACU;gBAAKf,WAAWnB,OAAOmC,IAAI;gBAAEC,OAAOd,UAAU;oBAAEe,KAAKf;gBAAQ,IAAIgB;0BAC/DZ;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport type { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nconst stylesDirection = {\n  up: styles.directionUp,\n  right: styles.directionRight,\n  down: styles.directionDown,\n  left: styles.directionLeft,\n};\n\nconst labelDirection = {\n  up: 'Назад',\n  right: 'Вперед',\n  down: 'Вперед',\n  left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n  let Icon = Icon24Chevron;\n  if (size === 's') {\n    Icon = Icon16Chevron;\n  }\n\n  return <Icon className={styles.defaultIcon} />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки.\n   */\n  direction: 'up' | 'right' | 'down' | 'left';\n  /**\n   * Размер стрелки.\n   */\n  size?: 's' | 'm';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n  /**\n   * [a11y]: Используется для ассистивных технологий.\n   */\n  label?: string;\n}\n\n/**\n * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'm',\n  offsetY,\n  direction,\n  label: labelProp,\n  children = <ArrowIcon size={size} />,\n  ...restProps\n}: ScrollArrowProps): React.ReactNode => {\n  const textDirection = useConfigDirection();\n  const label = labelProp ?? labelDirection[direction];\n\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesDirection[direction],\n        textDirection === 'rtl' && styles.rtl,\n      )}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      <span className={styles.icon} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon24Chevron","classNames","useConfigDirection","RootComponent","VisuallyHidden","styles","stylesSize","s","sizeS","m","sizeM","stylesDirection","up","directionUp","right","directionRight","down","directionDown","left","directionLeft","labelDirection","ArrowIcon","size","Icon","className","defaultIcon","ScrollArrow","offsetY","direction","label","labelProp","children","restProps","textDirection","Component","type","baseClassName","host","rtl","span","icon","style","top","undefined"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AAEpE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,IAAIP,OAAOQ,WAAW;IACtBC,OAAOT,OAAOU,cAAc;IAC5BC,MAAMX,OAAOY,aAAa;IAC1BC,MAAMb,OAAOc,aAAa;AAC5B;AAEA,MAAMC,iBAAiB;IACrBR,IAAI;IACJE,OAAO;IACPE,MAAM;IACNE,MAAM;AACR;AAEA,MAAMG,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOvB;IACX,IAAIsB,SAAS,KAAK;QAChBC,OAAOxB;IACT;IAEA,qBAAO,KAACwB;QAAKC,WAAWnB,OAAOoB,WAAW;;AAC5C;AAuBA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BJ,OAAO,GAAG,EACVK,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,KAACV;IAAUC,MAAMA;EAAQ,EACpC,GAAGU,WACc;IACjB,MAAMC,gBAAgB/B;IACtB,MAAM2B,QAAQC,aAAaV,cAAc,CAACQ,UAAU;IAEpD,qBACE,MAACzB;QACC+B,WAAU;QACVC,MAAK;QACLC,eAAenC,WACbI,OAAOgC,IAAI,EACX/B,UAAU,CAACgB,KAAK,EAChBX,eAAe,CAACiB,UAAU,EAC1BK,kBAAkB,SAAS5B,OAAOiC,GAAG;QAEtC,GAAGN,SAAS;;YAEZH,uBAAS,KAACzB;0BAAgByB;;0BAC3B,KAACU;gBAAKf,WAAWnB,OAAOmC,IAAI;gBAAEC,OAAOd,UAAU;oBAAEe,KAAKf;gBAAQ,IAAIgB;0BAC/DZ;;;;AAIT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n  icon: React.ReactNode,\n  props?: Partial<IconButtonProps>,\n) => React.ReactNode;\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  defaultValue?: string;\n  iconLabel?: string;\n  clearLabel?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки\n   */\n  clearButtonTestId?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти\n   */\n  findButtonText?: string;\n  /**\n   * Коллбэк для кнопки Найти\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Передает атрибут `data-testid` для кнопки поиска\n   */\n  findButtonTestId?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  id: idProp,\n  before = <Icon16SearchOutline />,\n  className,\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon: iconProp,\n  onIconClick,\n  style,\n  autoComplete = 'off',\n  onChange,\n  iconLabel,\n  clearLabel = 'Очистить',\n  clearButtonTestId,\n  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  findButtonTestId,\n  onFindButtonClick,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n  const generatedId = React.useId();\n  const inputId = idProp ? idProp : `search-${generatedId}`;\n\n  const [hasValue, setHasValue] = React.useState<boolean>(() =>\n    Boolean(inputProps.value || inputProps.defaultValue),\n  );\n  const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n    setHasValue(Boolean(e.currentTarget.value));\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n  const platform = usePlatform();\n\n  const hasAfter = platform === 'ios' && hasReactNode(after);\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => onIconClick?.(e),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (inputProps.value !== undefined) {\n      setHasValue(Boolean(inputProps.value));\n    }\n  }, [inputProps.value]);\n\n  useNativeFormResetListener(inputRef, () => {\n    setHasValue(Boolean(inputProps.defaultValue));\n  });\n\n  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n    <IconButton\n      hoverMode=\"opacity\"\n      onPointerDown={onIconClickStart}\n      className={styles.icon}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles.host,\n        sizeY === 'none' && styles.sizeYNone,\n        sizeY === 'compact' && styles.sizeYCompact,\n        isFocused && styles.focused,\n        hasValue && styles.hasValue,\n        hasAfter && styles.hasAfter,\n        iconProp && styles.hasIcon,\n        inputProps.disabled && styles.disabled,\n        !noPadding && styles.withPadding,\n        isRtl && styles.rtl,\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <div className={styles.field}>\n        <label htmlFor={inputId} className={styles.label}>\n          {placeholder}\n        </label>\n        <div className={styles.input}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            id={inputId}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles.nativeInput}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        <div className={styles.controls}>\n          {iconProp &&\n            (typeof iconProp === 'function'\n              ? iconProp(renderIconButton)\n              : renderIconButton(iconProp))}\n          <IconButton\n            hoverMode=\"opacity\"\n            onPointerDown={onIconCancelClickStart}\n            onClick={onCancel}\n            className={styles.icon}\n            tabIndex={hasValue ? undefined : -1}\n            disabled={inputProps.disabled}\n            data-testid={clearButtonTestId}\n          >\n            <VisuallyHidden>{clearLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n          </IconButton>\n          {adaptiveSizeY.compact && onFindButtonClick && (\n            <Button\n              mode=\"primary\"\n              size=\"m\"\n              className={classNames(styles.findButton, adaptiveSizeY.compact.className)}\n              focusVisibleMode=\"inside\"\n              onClick={onFindButtonClick}\n              tabIndex={hasValue ? undefined : -1}\n              data-testid={findButtonTestId}\n            >\n              {findButtonText}\n            </Button>\n          )}\n        </div>\n      </div>\n      {hasAfter && (\n        <div className={styles.after}>\n          <Button\n            mode=\"tertiary\"\n            size=\"m\"\n            focusVisibleMode=\"inside\"\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCancel}\n            onFocus={setFocusedTrue}\n            onBlur={setFocusedFalse}\n          >\n            <span className={styles.afterTextClip}>{after}</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","hasReactNode","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useConfigDirection","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","styles","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","clearButtonTestId","noPadding","getRootRef","findButtonText","findButtonTestId","onFindButtonClick","inputProps","direction","isRtl","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","hasAfter","onFocus","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","div","host","sizeYNone","sizeYCompact","focused","hasIcon","disabled","withPadding","rtl","ref","field","label","htmlFor","input","Component","type","level","weight","nativeInput","controls","tabIndex","data-testid","compact","mode","size","findButton","focusVisibleMode","activeMode","span","afterTextClip"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { touchEnabled } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton, type IconButtonProps } from '../IconButton/IconButton';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Search.module.css';\n\nexport type RenderIconButtonFn = (\n  icon: React.ReactNode,\n  props?: Partial<IconButtonProps>,\n) => React.ReactNode;\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * Only iOS. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  /**\n   * Контент, отображаемый перед полем ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка поиска. Может быть React-элементом или функцией, возвращающей элемент.\n   */\n  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);\n  /**\n   * Обработчик нажатия на иконку поиска.\n   */\n  onIconClick?: React.PointerEventHandler<HTMLElement>;\n  /**\n   * Значение поля ввода по умолчанию.\n   */\n  defaultValue?: string;\n  /**\n   * Текст для скринридеров, описывающий иконку поиска.\n   */\n  iconLabel?: string;\n  /**\n   * Текст для скринридеров, описывающий кнопку очистки.\n   */\n  clearLabel?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки.\n   */\n  clearButtonTestId?: string;\n  /**\n   * Удаляет отступы у компонента.\n   */\n  noPadding?: boolean;\n  /**\n   * Текст для кнопки Найти.\n   */\n  findButtonText?: string;\n  /**\n   * Обработчик, при нажатии на кнопку \"Найти\".\n   */\n  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Передает атрибут `data-testid` для кнопки поиска.\n   */\n  findButtonTestId?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  id: idProp,\n  before = <Icon16SearchOutline />,\n  className,\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon: iconProp,\n  onIconClick,\n  style,\n  autoComplete = 'off',\n  onChange,\n  iconLabel,\n  clearLabel = 'Очистить',\n  clearButtonTestId,\n  noPadding,\n  getRootRef,\n  findButtonText = 'Найти',\n  findButtonTestId,\n  onFindButtonClick,\n  ...inputProps\n}: SearchProps): React.ReactNode => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n  const generatedId = React.useId();\n  const inputId = idProp ? idProp : `search-${generatedId}`;\n\n  const [hasValue, setHasValue] = React.useState<boolean>(() =>\n    Boolean(inputProps.value || inputProps.defaultValue),\n  );\n  const checkHasValue: React.ChangeEventHandler<HTMLInputElement> = (e) =>\n    setHasValue(Boolean(e.currentTarget.value));\n\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n  const platform = usePlatform();\n\n  const hasAfter = platform === 'ios' && hasReactNode(after);\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => onIconClick?.(e),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart: React.PointerEventHandler<HTMLElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (inputProps.value !== undefined) {\n      setHasValue(Boolean(inputProps.value));\n    }\n  }, [inputProps.value]);\n\n  useNativeFormResetListener(inputRef, () => {\n    setHasValue(Boolean(inputProps.defaultValue));\n  });\n\n  const renderIconButton: RenderIconButtonFn = (icon, props = {}) => (\n    <IconButton\n      hoverMode=\"opacity\"\n      onPointerDown={onIconClickStart}\n      className={styles.icon}\n      onFocus={setFocusedTrue}\n      onBlur={setFocusedFalse}\n      onClick={noop}\n      {...props}\n    >\n      <VisuallyHidden>{iconLabel}</VisuallyHidden>\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles.host,\n        sizeY === 'none' && styles.sizeYNone,\n        sizeY === 'compact' && styles.sizeYCompact,\n        isFocused && styles.focused,\n        hasValue && styles.hasValue,\n        hasAfter && styles.hasAfter,\n        iconProp && styles.hasIcon,\n        inputProps.disabled && styles.disabled,\n        !noPadding && styles.withPadding,\n        isRtl && styles.rtl,\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <div className={styles.field}>\n        <label htmlFor={inputId} className={styles.label}>\n          {placeholder}\n        </label>\n        <div className={styles.input}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            id={inputId}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles.nativeInput}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={callMultiple(onChange, checkHasValue)}\n          />\n        </div>\n        <div className={styles.controls}>\n          {iconProp &&\n            (typeof iconProp === 'function'\n              ? iconProp(renderIconButton)\n              : renderIconButton(iconProp))}\n          <IconButton\n            hoverMode=\"opacity\"\n            onPointerDown={onIconCancelClickStart}\n            onClick={onCancel}\n            className={styles.icon}\n            tabIndex={hasValue ? undefined : -1}\n            disabled={inputProps.disabled}\n            data-testid={clearButtonTestId}\n          >\n            <VisuallyHidden>{clearLabel}</VisuallyHidden>\n            {platform === 'ios' ? <Icon16Clear /> : <Icon24Cancel />}\n          </IconButton>\n          {adaptiveSizeY.compact && onFindButtonClick && (\n            <Button\n              mode=\"primary\"\n              size=\"m\"\n              className={classNames(styles.findButton, adaptiveSizeY.compact.className)}\n              focusVisibleMode=\"inside\"\n              onClick={onFindButtonClick}\n              tabIndex={hasValue ? undefined : -1}\n              data-testid={findButtonTestId}\n            >\n              {findButtonText}\n            </Button>\n          )}\n        </div>\n      </div>\n      {hasAfter && (\n        <div className={styles.after}>\n          <Button\n            mode=\"tertiary\"\n            size=\"m\"\n            focusVisibleMode=\"inside\"\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCancel}\n            onFocus={setFocusedTrue}\n            onBlur={setFocusedFalse}\n          >\n            <span className={styles.afterTextClip}>{after}</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","hasReactNode","noop","useAdaptivity","useAdaptivityConditionalRender","useBooleanState","useConfigDirection","useExternRef","useNativeFormResetListener","usePlatform","callMultiple","touchEnabled","useIsomorphicLayoutEffect","Button","IconButton","Headline","VisuallyHidden","styles","Search","id","idProp","before","className","placeholder","after","getRef","icon","iconProp","onIconClick","style","autoComplete","onChange","iconLabel","clearLabel","clearButtonTestId","noPadding","getRootRef","findButtonText","findButtonTestId","onFindButtonClick","inputProps","direction","isRtl","inputRef","value","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","generatedId","useId","inputId","hasValue","setHasValue","useState","Boolean","defaultValue","checkHasValue","e","currentTarget","sizeY","adaptiveSizeY","platform","hasAfter","onFocus","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","onIconCancelClickStart","preventDefault","focus","undefined","renderIconButton","props","hoverMode","onPointerDown","onClick","div","host","sizeYNone","sizeYCompact","focused","hasIcon","disabled","withPadding","rtl","ref","field","label","htmlFor","input","Component","type","level","weight","nativeInput","controls","tabIndex","data-testid","compact","mode","size","findButton","focusVisibleMode","activeMode","span","afterTextClip"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport {\n  SegmentedControlOption,\n  type SegmentedControlOptionProps,\n} from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20\n   */\n  before?: React.ReactNode;\n  label: React.ReactNode;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  role = 'radiogroup',\n  ...restProps\n}: SegmentedControlProps): React.ReactNode => {\n  const id = React.useId();\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const { tabsRef } = useTabsNavigation(role === 'tablist', isRtl);\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const sliderStyle: CSSCustomProperties = {\n    '--vkui_internal--SegmentedControl_actual_index': String(actualIndex),\n    '--vkui_internal--SegmentedControl_options': String(options.length),\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        size === 'l' && styles.sizeL,\n        isRtl && styles.rtl,\n      )}\n    >\n      <div role={role} ref={tabsRef} className={styles.in}>\n        {actualIndex > -1 && <div aria-hidden className={styles.slider} style={sliderStyle} />}\n        {options.map(({ label, before, ...optionProps }) => {\n          const selected = value === optionProps.value;\n          const onSelect = () => onChange(optionProps.value);\n          const optionRootProps: SegmentedControlOptionProps['rootProps'] =\n            role === 'tablist'\n              ? {\n                  'role': 'tab',\n                  'aria-selected': selected,\n                  'onClick': onSelect,\n                  'tabIndex': optionProps.tabIndex ?? (selected ? 0 : -1),\n                  ...optionProps,\n                }\n              : undefined;\n\n          const optionInputProps: SegmentedControlOptionProps['inputProps'] =\n            role !== 'tablist'\n              ? {\n                  role: optionProps.role || (role === 'radiogroup' ? 'radio' : undefined),\n                  checked: selected,\n                  onChange: onSelect,\n                  name: name ?? id,\n                  ...optionProps,\n                }\n              : undefined;\n\n          return (\n            <SegmentedControlOption\n              key={`${optionProps.value}`}\n              before={before}\n              rootProps={optionRootProps}\n              inputProps={optionInputProps}\n            >\n              {label}\n            </SegmentedControlOption>\n          );\n        })}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useConfigDirection","useCustomEnsuredControl","useTabsNavigation","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","role","restProps","id","useId","direction","isRtl","sizeY","tabsRef","actualIndex","findIndex","option","process","env","NODE_ENV","sliderStyle","String","length","baseClassName","host","sizeL","rtl","div","ref","className","in","aria-hidden","slider","style","map","label","before","optionProps","selected","onSelect","optionRootProps","tabIndex","undefined","optionInputProps","checked","rootProps","inputProps"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport {\n  SegmentedControlOption,\n  type SegmentedControlOptionProps,\n} from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  /**\n   * Вставляет элемент перед основным контентом.\n   * Рекомендуется использовать только иконки с размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Текст или React-элемент, отображаемый в качестве метки опции.\n   */\n  label: React.ReactNode;\n  /**\n   * Значение опции, которое будет передано в обработчик onChange при выборе.\n   */\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  /**\n   * Массив опций для отображения в компоненте.\n   */\n  options: SegmentedControlOptionInterface[];\n  /**\n   * Размер компонента.\n   */\n  size?: 'm' | 'l';\n  /**\n   * Имя для input-элементов внутри компонента.\n   */\n  name?: string;\n  /**\n   * Обработчик изменения выбранного значения.\n   */\n  onChange?: (value: SegmentedControlValue) => void;\n  /**\n   * Текущее выбранное значение (для контролируемого компонента).\n   */\n  value?: SegmentedControlValue;\n  /**\n   * Значение по умолчанию (для неконтролируемого компонента).\n   */\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  role = 'radiogroup',\n  ...restProps\n}: SegmentedControlProps): React.ReactNode => {\n  const id = React.useId();\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const { tabsRef } = useTabsNavigation(role === 'tablist', isRtl);\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const sliderStyle: CSSCustomProperties = {\n    '--vkui_internal--SegmentedControl_actual_index': String(actualIndex),\n    '--vkui_internal--SegmentedControl_options': String(options.length),\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        size === 'l' && styles.sizeL,\n        isRtl && styles.rtl,\n      )}\n    >\n      <div role={role} ref={tabsRef} className={styles.in}>\n        {actualIndex > -1 && <div aria-hidden className={styles.slider} style={sliderStyle} />}\n        {options.map(({ label, before, ...optionProps }) => {\n          const selected = value === optionProps.value;\n          const onSelect = () => onChange(optionProps.value);\n          const optionRootProps: SegmentedControlOptionProps['rootProps'] =\n            role === 'tablist'\n              ? {\n                  'role': 'tab',\n                  'aria-selected': selected,\n                  'onClick': onSelect,\n                  'tabIndex': optionProps.tabIndex ?? (selected ? 0 : -1),\n                  ...optionProps,\n                }\n              : undefined;\n\n          const optionInputProps: SegmentedControlOptionProps['inputProps'] =\n            role !== 'tablist'\n              ? {\n                  role: optionProps.role || (role === 'radiogroup' ? 'radio' : undefined),\n                  checked: selected,\n                  onChange: onSelect,\n                  name: name ?? id,\n                  ...optionProps,\n                }\n              : undefined;\n\n          return (\n            <SegmentedControlOption\n              key={`${optionProps.value}`}\n              before={before}\n              rootProps={optionRootProps}\n              inputProps={optionInputProps}\n            >\n              {label}\n            </SegmentedControlOption>\n          );\n        })}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useConfigDirection","useCustomEnsuredControl","useTabsNavigation","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","styles","sizeYClassNames","none","sizeYNone","regular","sizeYRegular","warn","SegmentedControl","size","name","options","defaultValue","value","children","onChange","onChangeProp","valueProp","role","restProps","id","useId","direction","isRtl","sizeY","tabsRef","actualIndex","findIndex","option","process","env","NODE_ENV","sliderStyle","String","length","baseClassName","host","sizeL","rtl","div","ref","className","in","aria-hidden","slider","style","map","label","before","optionProps","selected","onSelect","optionRootProps","tabIndex","undefined","optionInputProps","checked","rootProps","inputProps"],"mappings":"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"}

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

@@ -29,8 +29,8 @@
   border-radius: inherit;
   box-shadow:
     inset 0 0 0 0.5px var(--vkui--color_image_border_alpha),
-    0 3px 8px rgba(0, 0, 0, 0.12),
-    0 3px 1px rgba(0, 0, 0, 0.04);
+    0 3px 8px rgb(0, 0, 0, 0.12),
+    0 3px 1px rgb(0, 0, 0, 0.04);
   transform: translateX(calc(var(--vkui_internal--SegmentedControl_actual_index) * 100%));
   transform-origin: 0 0;
   transition: transform 150ms;