@vkontakte/vkui 8.0.2 → 8.1.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { RemovableIos } from './RemovableIos';\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 RemovableCommonOwnProps\n  extends Pick<\n    RemovableOwnProps,\n    'noPadding' | 'children' | 'removeButtonTestId' | 'disabled' | 'indent'\n  > {\n  removePlaceholderString?: string;\n  onRemoveClick: (e: React.MouseEvent) => void;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst RemovableCommon = ({\n  noPadding,\n  children,\n  removePlaceholderString,\n  onRemoveClick,\n  removeButtonTestId,\n  disabled,\n  indent,\n}: RemovableCommonOwnProps) => {\n  return (\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      {indent ? (\n        <div className={classNames(styles.action, styles.indentation)} />\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\nexport interface 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\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        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n          disabled={disabled}\n          indent={indent}\n        >\n          {children}\n        </RemovableIos>\n      ) : (\n        <RemovableCommon\n          onRemoveClick={onRemoveClick}\n          noPadding={noPadding}\n          removeButtonTestId={removeButtonTestId}\n          removePlaceholderString={removePlaceholderString}\n          disabled={disabled}\n          indent={indent}\n        >\n          {children}\n        </RemovableCommon>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["Icon24Cancel","classNames","usePlatform","getTextFromChildren","IconButton","RootComponent","RemovableIos","RemovableCommon","noPadding","children","removePlaceholderString","onRemoveClick","removeButtonTestId","disabled","indent","div","className","isRemoving","activeMode","hoverMode","onClick","label","data-testid","role","span","aria-hidden","Removable","onRemove","removePlaceholder","align","toggleButtonTestId","restProps","platform","e","preventDefault","baseClassName"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,mBAAmB,QAAQ,wBAAqB;AAEzD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,YAAY,QAAQ,oBAAiB;AAkC9C,qCAAqC,GAErC,MAAMC,kBAAkB,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,uBAAuB,EACvBC,aAAa,EACbC,kBAAkB,EAClBC,QAAQ,EACRC,MAAM,EACkB;IACxB,qBACE,MAACC;QACCC,WAAWf,qCAET,CAACO,2CACD;;YAGD,OAAOC,aAAa,aAAaA,SAAS;gBAAEQ,YAAY;YAAM,KAAKR;YAEnEK,uBACC,KAACC;gBAAIC,WAAWf;+BAEhB,KAACG;gBACCc,YAAW;gBACXC,WAAU;gBACVH,WAAWf,oCAA0B;gBACrCmB,SAAST;gBACTU,OAAOX;gBACPY,eAAaV;gBACbC,UAAUA;0BAEV,cAAA,KAACb;oBAAauB,MAAK;;;0BAGvB,KAACC;gBAAKR,SAAS;gBAAiBS,aAAW;;;;AAGjD;AAkCA,OAAO,MAAMC,YAAY,CAAC,EACxBjB,QAAQ,EACRkB,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,QAAQ,QAAQ,EAChBf,SAAS,KAAK,EACdgB,kBAAkB,EAClBlB,kBAAkB,EAClBC,QAAQ,EACRL,SAAS,EACT,GAAGuB,WACe;IAClB,MAAMC,WAAW9B;IAEjB,MAAMS,gBAAgB,CAACsB;QACrBA,EAAEC,cAAc;QAChBP,WAAWM;IACb;IAEA,MAAMvB,0BAAkCP,oBAAoByB;IAE5D,qBACE,KAACvB;QACE,GAAG0B,SAAS;QACbI,eAAelC,WACb+B,aAAa,+BACbH,UAAU,wCACVf;kBAGDkB,aAAa,sBACZ,KAAC1B;YACCqB,UAAUhB;YACViB,mBAAmBA;YACnBlB,yBAAyBA;YACzBoB,oBAAoBA;YACpBlB,oBAAoBA;YACpBC,UAAUA;YACVC,QAAQA;sBAEPL;2BAGH,KAACF;YACCI,eAAeA;YACfH,WAAWA;YACXI,oBAAoBA;YACpBF,yBAAyBA;YACzBG,UAAUA;YACVC,QAAQA;sBAEPL;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { RemovableIos } from './RemovableIos';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode | undefined;\n  /**\n   * Обработчик, срабатывающий при нажатии на контрол удаления.\n   */\n  onRemove?: ((e: React.MouseEvent, rootEl?: HTMLElement | null) => void) | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only).\n   */\n  toggleButtonTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки удаления.\n   */\n  removeButtonTestId?: string | undefined;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean | undefined;\n}\n/* eslint-disable jsdoc/require-jsdoc */\ninterface RemovableCommonOwnProps\n  extends Pick<\n    RemovableOwnProps,\n    'noPadding' | 'children' | 'removeButtonTestId' | 'disabled' | 'indent'\n  > {\n  removePlaceholderString?: string | undefined;\n  onRemoveClick: (e: React.MouseEvent) => void;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst RemovableCommon = ({\n  noPadding,\n  children,\n  removePlaceholderString,\n  onRemoveClick,\n  removeButtonTestId,\n  disabled,\n  indent,\n}: RemovableCommonOwnProps) => {\n  return (\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      {indent ? (\n        <div className={classNames(styles.action, styles.indentation)} />\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\nexport interface 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' | undefined;\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean | undefined;\n  /**\n   * Убирает базовые отступы для базовой платформы.\n   */\n  noPadding?: boolean | undefined;\n  /**\n   * Содержимое. Можно передать функцию для отрисовки.\n   */\n  children?:\n    | React.ReactNode\n    | ((renderProps: RemovableIosRenderProps) => React.ReactNode)\n    | undefined;\n}\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        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n          disabled={disabled}\n          indent={indent}\n        >\n          {children}\n        </RemovableIos>\n      ) : (\n        <RemovableCommon\n          onRemoveClick={onRemoveClick}\n          noPadding={noPadding}\n          removeButtonTestId={removeButtonTestId}\n          removePlaceholderString={removePlaceholderString}\n          disabled={disabled}\n          indent={indent}\n        >\n          {children}\n        </RemovableCommon>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["Icon24Cancel","classNames","usePlatform","getTextFromChildren","IconButton","RootComponent","RemovableIos","RemovableCommon","noPadding","children","removePlaceholderString","onRemoveClick","removeButtonTestId","disabled","indent","div","className","isRemoving","activeMode","hoverMode","onClick","label","data-testid","role","span","aria-hidden","Removable","onRemove","removePlaceholder","align","toggleButtonTestId","restProps","platform","e","preventDefault","baseClassName"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,mBAAmB,QAAQ,wBAAqB;AAEzD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,YAAY,QAAQ,oBAAiB;AAkC9C,qCAAqC,GAErC,MAAMC,kBAAkB,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,uBAAuB,EACvBC,aAAa,EACbC,kBAAkB,EAClBC,QAAQ,EACRC,MAAM,EACkB;IACxB,qBACE,MAACC;QACCC,WAAWf,qCAET,CAACO,2CACD;;YAGD,OAAOC,aAAa,aAAaA,SAAS;gBAAEQ,YAAY;YAAM,KAAKR;YAEnEK,uBACC,KAACC;gBAAIC,WAAWf;+BAEhB,KAACG;gBACCc,YAAW;gBACXC,WAAU;gBACVH,WAAWf,oCAA0B;gBACrCmB,SAAST;gBACTU,OAAOX;gBACPY,eAAaV;gBACbC,UAAUA;0BAEV,cAAA,KAACb;oBAAauB,MAAK;;;0BAGvB,KAACC;gBAAKR,SAAS;gBAAiBS,aAAW;;;;AAGjD;AAqCA,OAAO,MAAMC,YAAY,CAAC,EACxBjB,QAAQ,EACRkB,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,QAAQ,QAAQ,EAChBf,SAAS,KAAK,EACdgB,kBAAkB,EAClBlB,kBAAkB,EAClBC,QAAQ,EACRL,SAAS,EACT,GAAGuB,WACe;IAClB,MAAMC,WAAW9B;IAEjB,MAAMS,gBAAgB,CAACsB;QACrBA,EAAEC,cAAc;QAChBP,WAAWM;IACb;IAEA,MAAMvB,0BAAkCP,oBAAoByB;IAE5D,qBACE,KAACvB;QACE,GAAG0B,SAAS;QACbI,eAAelC,WACb+B,aAAa,+BACbH,UAAU,wCACVf;kBAGDkB,aAAa,sBACZ,KAAC1B;YACCqB,UAAUhB;YACViB,mBAAmBA;YACnBlB,yBAAyBA;YACzBoB,oBAAoBA;YACpBlB,oBAAoBA;YACpBC,UAAUA;YACVC,QAAQA;sBAEPL;2BAGH,KAACF;YACCI,eAAeA;YACfH,WAAWA;YACXI,oBAAoBA;YACpBF,yBAAyBA;YACzBG,UAAUA;YACVC,QAAQA;sBAEPL;;;AAKX,EAAE"}

package/dist/components/Removable/RemovableIos.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { RemovableIosRenderProps, RemovableProps } from './Removable';
 interface RemovableIosOwnProps extends RemovableProps {
-    indent?: boolean;
-    removePlaceholderString?: string;
-    children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);
+    indent?: boolean | undefined;
+    removePlaceholderString?: string | undefined;
+    children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode) | undefined;
 }
 declare const RemovableIos: ({ indent, children, ...restProps }: RemovableIosOwnProps) => import("react/jsx-runtime").JSX.Element;
 export { RemovableIos };

package/dist/components/Removable/RemovableIos.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemovableIos.d.ts","sourceRoot":"","sources":["../../../src/components/Removable/RemovableIos.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI3E,UAAU,oBAAqB,SAAQ,cAAc;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC1F;AA6GD,QAAA,MAAM,YAAY,GAAI,oCAAoC,oBAAoB,4CAM7E,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"RemovableIos.d.ts","sourceRoot":"","sources":["../../../src/components/Removable/RemovableIos.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI3E,UAAU,oBAAqB,SAAQ,cAAc;IACnD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,uBAAuB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,WAAW,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,GAC3D,SAAS,CAAC;CACf;AA6GD,QAAA,MAAM,YAAY,GAAI,oCAAoC,oBAAoB,4CAM7E,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Removable/RemovableIos.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport type { RemovableIosRenderProps, RemovableProps } from './Removable';\nimport styles from './Removable.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface RemovableIosOwnProps extends RemovableProps {\n  indent?: boolean;\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst RemovableIosWithRemove = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n}: Omit<RemovableIosOwnProps, 'indent'>) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const [removeButtonDisabled, setRemoveButtonDisabled] = React.useState(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  React.useEffect(() => {\n    const listener = () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    };\n\n    window!.addEventListener('click', listener, { capture: true });\n\n    return () => window!.removeEventListener('click', listener, { capture: true });\n  }, [removeOffset, window]);\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n      return;\n    }\n\n    setRemoveButtonDisabled(true);\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    setRemoveButtonDisabled(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={removeButtonDisabled}\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\nconst RemovableIosWithIndent = ({\n  children: childrenProp,\n}: Pick<RemovableIosOwnProps, 'children'>) => {\n  return (\n    <div className={classNames(styles.content, 'vkuiInternalRemovable__content')}>\n      <div\n        className={classNames(styles.action, styles.indentation, 'vkuiInternalRemovable__action')}\n      />\n      {typeof childrenProp === 'function' ? childrenProp({ isRemoving: false }) : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n    </div>\n  );\n};\n\nconst RemovableIos = ({ indent, children, ...restProps }: RemovableIosOwnProps) => {\n  return indent ? (\n    <RemovableIosWithIndent>{children}</RemovableIosWithIndent>\n  ) : (\n    <RemovableIosWithRemove {...restProps}>{children}</RemovableIosWithRemove>\n  );\n};\n\nexport { RemovableIos };\n"],"names":["React","classNames","useConfigDirection","useDOM","IconButton","Tappable","VisuallyHidden","RemovableIosWithRemove","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","direction","isRtl","window","removeButtonRef","useRef","removeButtonDisabled","setRemoveButtonDisabled","useState","removeOffset","updateRemoveOffset","useEffect","listener","addEventListener","capture","removeEventListener","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","style","String","div","className","onTransitionEnd","hasActive","hasHover","onClick","data-testid","i","role","isRemoving","span","aria-hidden","Component","getRootRef","RemovableIosWithIndent","RemovableIos","indent","restProps"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Removable/RemovableIos.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport type { RemovableIosRenderProps, RemovableProps } from './Removable';\nimport styles from './Removable.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface RemovableIosOwnProps extends RemovableProps {\n  indent?: boolean | undefined;\n  removePlaceholderString?: string | undefined;\n  children?:\n    | React.ReactNode\n    | ((renderProps: RemovableIosRenderProps) => React.ReactNode)\n    | undefined;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst RemovableIosWithRemove = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n}: Omit<RemovableIosOwnProps, 'indent'>) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const [removeButtonDisabled, setRemoveButtonDisabled] = React.useState(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  React.useEffect(() => {\n    const listener = () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    };\n\n    window!.addEventListener('click', listener, { capture: true });\n\n    return () => window!.removeEventListener('click', listener, { capture: true });\n  }, [removeOffset, window]);\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n      return;\n    }\n\n    setRemoveButtonDisabled(true);\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    setRemoveButtonDisabled(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={removeButtonDisabled}\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\nconst RemovableIosWithIndent = ({\n  children: childrenProp,\n}: Pick<RemovableIosOwnProps, 'children'>) => {\n  return (\n    <div className={classNames(styles.content, 'vkuiInternalRemovable__content')}>\n      <div\n        className={classNames(styles.action, styles.indentation, 'vkuiInternalRemovable__action')}\n      />\n      {typeof childrenProp === 'function' ? childrenProp({ isRemoving: false }) : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n    </div>\n  );\n};\n\nconst RemovableIos = ({ indent, children, ...restProps }: RemovableIosOwnProps) => {\n  return indent ? (\n    <RemovableIosWithIndent>{children}</RemovableIosWithIndent>\n  ) : (\n    <RemovableIosWithRemove {...restProps}>{children}</RemovableIosWithRemove>\n  );\n};\n\nexport { RemovableIos };\n"],"names":["React","classNames","useConfigDirection","useDOM","IconButton","Tappable","VisuallyHidden","RemovableIosWithRemove","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","direction","isRtl","window","removeButtonRef","useRef","removeButtonDisabled","setRemoveButtonDisabled","useState","removeOffset","updateRemoveOffset","useEffect","listener","addEventListener","capture","removeEventListener","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","style","String","div","className","onTransitionEnd","hasActive","hasHover","onClick","data-testid","i","role","isRemoving","span","aria-hidden","Component","getRootRef","RemovableIosWithIndent","RemovableIos","indent","restProps"],"mappings":"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"}

package/dist/components/RichCell/RichCell.d.ts

@@ -6,19 +6,19 @@ export interface RichCellProps extends TappableOmitProps {
     /**
      * Контейнер для текста над `children`.
      */
-    overTitle?: React.ReactNode;
+    overTitle?: React.ReactNode | undefined;
     /**
      * Контейнер для текста под `children`.
      */
-    subtitle?: React.ReactNode;
+    subtitle?: React.ReactNode | undefined;
     /**
      * Контейнер для текста под `subtitle`.
      */
-    extraSubtitle?: React.ReactNode;
+    extraSubtitle?: React.ReactNode | undefined;
     /**
      * Контейнер для контента под `caption`. Например `<UsersStack size="m" />`.
      */
-    bottom?: React.ReactNode;
+    bottom?: React.ReactNode | undefined;
     /**
      * Кнопки-действия. Принимает [`Button`](https://vkui.io/components/button) с параметрами:
      *
@@ -29,52 +29,52 @@ export interface RichCellProps extends TappableOmitProps {
      *
      * - `mode="horizontal" gap="s" stretched`.
      */
-    actions?: React.ReactNode;
+    actions?: React.ReactNode | undefined;
     /**
      * `<Avatar size={40|48|72} />`.
      */
-    before?: React.ReactNode;
+    before?: React.ReactNode | undefined;
     /**
      * Иконка 28 или текст после центрального контента.
      */
-    after?: React.ReactNode;
+    after?: React.ReactNode | undefined;
     /**
      * Текст под `after`.
      *
      * @deprecated Since 8.0.0. Будет удален в **VKUI v10**.
      * Используйте вместо этого свойство `submeta`.
      */
-    afterCaption?: React.ReactNode;
+    afterCaption?: React.ReactNode | undefined;
     /**
      * Текст после основного контента.
      */
-    meta?: React.ReactNode;
+    meta?: React.ReactNode | undefined;
     /**
      * Текст под `meta`.
      */
-    submeta?: React.ReactNode;
+    submeta?: React.ReactNode | undefined;
     /**
      * Выравнивание before компонента по вертикали.
      */
-    beforeAlign?: Align;
+    beforeAlign?: Align | undefined;
     /**
      * Выравнивание центрального контента по вертикали.
      */
-    contentAlign?: Align;
+    contentAlign?: Align | undefined;
     /**
      * Выравнивание after компонента по вертикали.
      *
      * > Работает только для `after` и `afterCaption`.
      */
-    afterAlign?: Align;
+    afterAlign?: Align | undefined;
     /**
      * Блокировка взаимодействия с компонентом. Убирает анимацию нажатия.
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.
      */
-    multiline?: boolean;
+    multiline?: boolean | undefined;
 }
 /**
  * @see https://vkui.io/components/rich-cell

package/dist/components/RichCell/RichCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichCell.d.ts","sourceRoot":"","sources":["../../../src/components/RichCell/RichCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AA4B3D,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAC/C,IAAI,EAAE,OAAO,YAAY,CAAC;CAyE3B,CAAC"}
+{"version":3,"file":"RichCell.d.ts","sourceRoot":"","sources":["../../../src/components/RichCell/RichCell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AA4B3D,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACjC;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAC/C,IAAI,EAAE,OAAO,YAAY,CAAC;CAyE3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst warn = warnOnce('RichCell');\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\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 TappableOmitProps {\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://vkui.io/components/button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkui.io/components/button-group) с параметрами:\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   * @deprecated Since 8.0.0. Будет удален в **VKUI v10**.\n   * Используйте вместо этого свойство `submeta`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Текст после основного контента.\n   */\n  meta?: React.ReactNode;\n  /**\n   * Текст под `meta`.\n   */\n  submeta?: React.ReactNode;\n  /**\n   * Выравнивание before компонента по вертикали.\n   */\n  beforeAlign?: Align;\n  /**\n   * Выравнивание центрального контента по вертикали.\n   */\n  contentAlign?: Align;\n  /**\n   * Выравнивание after компонента по вертикали.\n   *\n   * > Работает только для `after` и `afterCaption`.\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://vkui.io/components/rich-cell\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  meta,\n  submeta,\n  ...restProps\n}: RichCellProps) => {\n  const { density = 'none' } = useAdaptivity();\n\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && afterCaption) {\n    warn('Свойство `afterCaption` устаревшее и будет удалено в `v10`, используйте `submeta`');\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        !multiline && styles.textEllipsis,\n        density !== 'regular' && densityClassNames[density],\n        (after || afterCaption) && 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          {(meta || submeta) && (\n            <div className={styles.contentMeta}>\n              {meta && <div className={styles.afterChildren}>{meta}</div>}\n              {submeta && <div className={styles.afterCaption}>{submeta}</div>}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles.bottom}>{bottom}</div>}\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {(after || afterCaption) && (\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    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["classNames","useAdaptivity","warnOnce","Tappable","Subhead","RichCellIcon","warn","densityClassNames","none","compact","alignAfterClassNames","start","center","end","alignBeforeClassNames","alignContentClassNames","RichCell","overTitle","children","subtitle","extraSubtitle","before","after","afterCaption","bottom","actions","multiline","beforeAlign","contentAlign","afterAlign","meta","submeta","restProps","density","process","env","NODE_ENV","baseClassName","div","className","Component","Icon"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,YAAY,QAAQ,iCAA8B;AAG3D,MAAMC,OAAOJ,SAAS;AAEtB,MAAMK,oBAAoB;IACxBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,uBAAuB;IAC3BC,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AAEA,MAAMC,wBAAwB;IAC5BH,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AAEA,MAAME,yBAAyB;IAC7BJ,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AA+EA;;CAEC,GACD,OAAO,MAAMG,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,EACpBC,IAAI,EACJC,OAAO,EACP,GAAGC,WACW;IACd,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGhC;IAE7B,6CAA6C,GAC7C,IAAIiC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,cAAc;QAC1DjB,KAAK;IACP;IAEA,qBACE,MAACH;QACE,GAAG6B,SAAS;QACbK,eAAerC,iCAEb,CAAC0B,2CACDO,YAAY,aAAa1B,iBAAiB,CAAC0B,QAAQ,EACnD,AAACX,CAAAA,SAASC,YAAW,KAAMb,oBAAoB,CAACmB,WAAW,EAC3DR,UAAUP,qBAAqB,CAACa,YAAY,EAC5CZ,sBAAsB,CAACa,aAAa;;YAGrCP,wBAAU,KAACiB;gBAAIC,SAAS;0BAAkBlB;;0BAC3C,MAACiB;gBAAIC,SAAS;;kCACZ,MAACD;wBAAIC,SAAS;;0CACZ,MAACD;gCAAIC,SAAS;;oCACXtB,2BACC,KAACb;wCAAQoC,WAAU;wCAAMD,SAAS;kDAC/BtB;;kDAGL,KAACqB;wCAAIC,SAAS;kDAAoBrB;;oCACjCC,0BAAY,KAACmB;wCAAIC,SAAS;kDAAoBpB;;oCAC9CC,+BACC,KAAChB;wCAAQoC,WAAU;wCAAMD,SAAS;kDAC/BnB;;;;4BAILU,CAAAA,QAAQC,OAAM,mBACd,MAACO;gCAAIC,SAAS;;oCACXT,sBAAQ,KAACQ;wCAAIC,SAAS;kDAAyBT;;oCAC/CC,yBAAW,KAACO;wCAAIC,SAAS;kDAAwBR;;;;;;oBAIvDP,wBAAU,KAACc;wBAAIC,SAAS;kCAAkBf;;oBAC1CC,yBAAW,KAACa;wBAAIC,SAAS;kCAAmBd;;;;YAE7CH,CAAAA,SAASC,YAAW,mBACpB,MAACe;gBAAIC,SAAS;;oBACXjB,uBAAS,KAACgB;wBAAIC,SAAS;kCAAyBjB;;oBAChDC,8BAAgB,KAACe;wBAAIC,SAAS;kCAAwBhB;;;;;;AAKjE,EAAE;AAEFP,SAASyB,IAAI,GAAGpC"}
+{"version":3,"sources":["../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst warn = warnOnce('RichCell');\n\nconst densityClassNames = {\n  none: styles.densityNone,\n  compact: styles.densityCompact,\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 TappableOmitProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  overTitle?: React.ReactNode | undefined;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  subtitle?: React.ReactNode | undefined;\n  /**\n   * Контейнер для текста под `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode | undefined;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode | undefined;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkui.io/components/button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkui.io/components/button-group) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`.\n   */\n  actions?: React.ReactNode | undefined;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode | undefined;\n  /**\n   * Иконка 28 или текст после центрального контента.\n   */\n  after?: React.ReactNode | undefined;\n  /**\n   * Текст под `after`.\n   *\n   * @deprecated Since 8.0.0. Будет удален в **VKUI v10**.\n   * Используйте вместо этого свойство `submeta`.\n   */\n  afterCaption?: React.ReactNode | undefined;\n  /**\n   * Текст после основного контента.\n   */\n  meta?: React.ReactNode | undefined;\n  /**\n   * Текст под `meta`.\n   */\n  submeta?: React.ReactNode | undefined;\n  /**\n   * Выравнивание before компонента по вертикали.\n   */\n  beforeAlign?: Align | undefined;\n  /**\n   * Выравнивание центрального контента по вертикали.\n   */\n  contentAlign?: Align | undefined;\n  /**\n   * Выравнивание after компонента по вертикали.\n   *\n   * > Работает только для `after` и `afterCaption`.\n   */\n  afterAlign?: Align | undefined;\n  /**\n   * Блокировка взаимодействия с компонентом. Убирает анимацию нажатия.\n   */\n  disabled?: boolean | undefined;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean | undefined;\n}\n\n/**\n * @see https://vkui.io/components/rich-cell\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  meta,\n  submeta,\n  ...restProps\n}: RichCellProps) => {\n  const { density = 'none' } = useAdaptivity();\n\n  /* istanbul ignore if: не проверяем в тестах */\n  if (process.env.NODE_ENV === 'development' && afterCaption) {\n    warn('Свойство `afterCaption` устаревшее и будет удалено в `v10`, используйте `submeta`');\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        !multiline && styles.textEllipsis,\n        density !== 'regular' && densityClassNames[density],\n        (after || afterCaption) && 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          {(meta || submeta) && (\n            <div className={styles.contentMeta}>\n              {meta && <div className={styles.afterChildren}>{meta}</div>}\n              {submeta && <div className={styles.afterCaption}>{submeta}</div>}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles.bottom}>{bottom}</div>}\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {(after || afterCaption) && (\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    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["classNames","useAdaptivity","warnOnce","Tappable","Subhead","RichCellIcon","warn","densityClassNames","none","compact","alignAfterClassNames","start","center","end","alignBeforeClassNames","alignContentClassNames","RichCell","overTitle","children","subtitle","extraSubtitle","before","after","afterCaption","bottom","actions","multiline","beforeAlign","contentAlign","afterAlign","meta","submeta","restProps","density","process","env","NODE_ENV","baseClassName","div","className","Component","Icon"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,YAAY,QAAQ,iCAA8B;AAG3D,MAAMC,OAAOJ,SAAS;AAEtB,MAAMK,oBAAoB;IACxBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,uBAAuB;IAC3BC,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AAEA,MAAMC,wBAAwB;IAC5BH,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AAEA,MAAME,yBAAyB;IAC7BJ,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AA+EA;;CAEC,GACD,OAAO,MAAMG,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,EACpBC,IAAI,EACJC,OAAO,EACP,GAAGC,WACW;IACd,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAGhC;IAE7B,6CAA6C,GAC7C,IAAIiC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,cAAc;QAC1DjB,KAAK;IACP;IAEA,qBACE,MAACH;QACE,GAAG6B,SAAS;QACbK,eAAerC,iCAEb,CAAC0B,2CACDO,YAAY,aAAa1B,iBAAiB,CAAC0B,QAAQ,EACnD,AAACX,CAAAA,SAASC,YAAW,KAAMb,oBAAoB,CAACmB,WAAW,EAC3DR,UAAUP,qBAAqB,CAACa,YAAY,EAC5CZ,sBAAsB,CAACa,aAAa;;YAGrCP,wBAAU,KAACiB;gBAAIC,SAAS;0BAAkBlB;;0BAC3C,MAACiB;gBAAIC,SAAS;;kCACZ,MAACD;wBAAIC,SAAS;;0CACZ,MAACD;gCAAIC,SAAS;;oCACXtB,2BACC,KAACb;wCAAQoC,WAAU;wCAAMD,SAAS;kDAC/BtB;;kDAGL,KAACqB;wCAAIC,SAAS;kDAAoBrB;;oCACjCC,0BAAY,KAACmB;wCAAIC,SAAS;kDAAoBpB;;oCAC9CC,+BACC,KAAChB;wCAAQoC,WAAU;wCAAMD,SAAS;kDAC/BnB;;;;4BAILU,CAAAA,QAAQC,OAAM,mBACd,MAACO;gCAAIC,SAAS;;oCACXT,sBAAQ,KAACQ;wCAAIC,SAAS;kDAAyBT;;oCAC/CC,yBAAW,KAACO;wCAAIC,SAAS;kDAAwBR;;;;;;oBAIvDP,wBAAU,KAACc;wBAAIC,SAAS;kCAAkBf;;oBAC1CC,yBAAW,KAACa;wBAAIC,SAAS;kCAAmBd;;;;YAE7CH,CAAAA,SAASC,YAAW,mBACpB,MAACe;gBAAIC,SAAS;;oBACXjB,uBAAS,KAACgB;wBAAIC,SAAS;kCAAyBjB;;oBAChDC,8BAAgB,KAACe;wBAAIC,SAAS;kCAAwBhB;;;;;;AAKjE,EAAE;AAEFP,SAASyB,IAAI,GAAGpC"}

package/dist/components/Root/Root.d.ts

@@ -9,11 +9,11 @@ export interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Na
     /**
      * Обработчик, который вызывается при завершении анимации смены активной `View`.
      */
-    onTransition?: (params: {
+    onTransition?: ((params: {
         isBack: boolean;
         from: string;
         to: string;
-    }) => void;
+    }) => void) | undefined;
     /**
      * Коллекция `View`. У каждой `View` должен быть `id`.
      */
@@ -22,8 +22,8 @@ export interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Na
 export interface RootState {
     activeView: string;
     transition: boolean;
-    isBack?: boolean;
-    prevView?: string;
+    isBack?: boolean | undefined;
+    prevView?: string | undefined;
 }
 /**
  * @see https://vkui.io/components/root

package/dist/components/Root/Root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAGD,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,wEAMlB,SAAS,KAAG,KAAK,CAAC,SA4HpB,CAAC"}
+{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC7F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAGD,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B;AAKD;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,wEAMlB,SAAS,KAAG,KAAK,CAAC,SA4HpB,CAAC"}

package/dist/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 { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';\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://vkui.io/components/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.useState(() => new Map<string, number>());\n  const [viewNodes] = React.useState(() => new Map<string, HTMLElement | null>());\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.set(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.get(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: React.AnimationEventHandler<HTMLElement> = (e) => {\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    finishTransition();\n  };\n\n  return (\n    <LockFloatingPositionContext.Provider value={transition}>\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.set(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\n                        ? viewId && -(scrolls.get(viewId) ?? 0)\n                        : undefined,\n                    }}\n                  >\n                    {view}\n                  </div>\n                </NavTransitionProvider>\n              </NavTransitionDirectionProvider>\n            </div>\n          );\n        })}\n      </RootComponent>\n    </LockFloatingPositionContext.Provider>\n  );\n};\n"],"names":["React","classNames","usePlatform","useDOM","LockFloatingPositionContext","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useState","Map","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","set","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","get","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","e","target","currentTarget","Provider","value","baseClassName","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","entering","style","marginTop"],"mappings":"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"}
+{"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 { LockFloatingPositionContext } from '../../lib/floating/LockFloatingPosition/LockFloatingPosition';\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) | undefined;\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 | undefined;\n  prevView?: string | undefined;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkui.io/components/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.useState(() => new Map<string, number>());\n  const [viewNodes] = React.useState(() => new Map<string, HTMLElement | null>());\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.set(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.get(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: React.AnimationEventHandler<HTMLElement> = (e) => {\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    finishTransition();\n  };\n\n  return (\n    <LockFloatingPositionContext.Provider value={transition}>\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.set(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\n                        ? viewId && -(scrolls.get(viewId) ?? 0)\n                        : undefined,\n                    }}\n                  >\n                    {view}\n                  </div>\n                </NavTransitionProvider>\n              </NavTransitionDirectionProvider>\n            </div>\n          );\n        })}\n      </RootComponent>\n    </LockFloatingPositionContext.Provider>\n  );\n};\n"],"names":["React","classNames","usePlatform","useDOM","LockFloatingPositionContext","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useState","Map","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","set","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","get","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","e","target","currentTarget","Provider","value","baseClassName","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","entering","style","marginTop"],"mappings":"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"}

package/dist/components/RootComponent/RootComponent.d.ts

@@ -6,11 +6,11 @@ export interface RootComponentExtendProps {
     /**
      * Базовый класс.
      */
-    baseClassName?: string | false;
+    baseClassName?: string | false | undefined;
     /**
      * Базовые стили.
      */
-    baseStyle?: React.CSSProperties;
+    baseStyle?: React.CSSProperties | undefined;
 }
 export interface RootComponentInternalProps<T> extends RootComponentProps<T>, RootComponentExtendProps {
 }

package/dist/components/RootComponent/RootComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RootComponent.d.ts","sourceRoot":"","sources":["../../../src/components/RootComponent/RootComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5D,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;CAAG;AAEnB,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACjC;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC,CAC3C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,wBAAwB;CAAG;AAE/B;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,EAAG,qFAQ/B,0BAA0B,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAYxC,CAAC"}
+{"version":3,"file":"RootComponent.d.ts","sourceRoot":"","sources":["../../../src/components/RootComponent/RootComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5D,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;CAAG;AAEnB,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;CAC7C;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC,CAC3C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,wBAAwB;CAAG;AAE/B;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,EAAG,qFAQ/B,0BAA0B,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAYxC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import type * 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\nexport interface RootComponentExtendProps {\n  /**\n   * Базовый класс.\n   */\n  baseClassName?: string | false;\n  /**\n   * Базовые стили.\n   */\n  baseStyle?: React.CSSProperties;\n}\n\nexport interface RootComponentInternalProps<T>\n  extends RootComponentProps<T>,\n    RootComponentExtendProps {}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  baseStyle,\n  style,\n  getRootRef,\n  ...restProps\n}: RootComponentInternalProps<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":["classNames","mergeStyle","RootComponent","Component","baseClassName","className","baseStyle","style","getRootRef","restProps","ref","hidden"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAwBtD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,UAAU,EACV,GAAGC,WAC2B,iBAC9B,KAACN;QACCO,KAAKF;QACLH,WAAWL,WACTK,WACAD,0CAEAK,UAAUE,MAAM,KAAK;QAEvBJ,OAAON,WAAWK,WAAWC;QAC5B,GAAGE,SAAS;OAEf"}
+{"version":3,"sources":["../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import type * 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\nexport interface RootComponentExtendProps {\n  /**\n   * Базовый класс.\n   */\n  baseClassName?: string | false | undefined;\n  /**\n   * Базовые стили.\n   */\n  baseStyle?: React.CSSProperties | undefined;\n}\n\nexport interface RootComponentInternalProps<T>\n  extends RootComponentProps<T>,\n    RootComponentExtendProps {}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  baseStyle,\n  style,\n  getRootRef,\n  ...restProps\n}: RootComponentInternalProps<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":["classNames","mergeStyle","RootComponent","Component","baseClassName","className","baseStyle","style","getRootRef","restProps","ref","hidden"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAwBtD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,UAAU,EACV,GAAGC,WAC2B,iBAC9B,KAACN;QACCO,KAAKF;QACLH,WAAWL,WACTK,WACAD,0CAEAK,UAAUE,MAAM,KAAK;QAEvBJ,OAAON,WAAWK,WAAWC;QAC5B,GAAGE,SAAS;OAEf"}

package/dist/components/ScreenSpinner/ScreenSpinnerSwapIcon.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributesWithRootRef } from '../../types';
 import type { ScreenSpinnerProps } from './types';
 type ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {
-    cancelLabel?: ScreenSpinnerProps['cancelLabel'];
+    cancelLabel?: ScreenSpinnerProps['cancelLabel'] | undefined;
 };
 export declare const ScreenSpinnerSwapIcon: ({ cancelLabel, ...restProps }: ScreenSpinnerSwapIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ScreenSpinner/ScreenSpinnerSwapIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinnerSwapIcon.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerSwapIcon.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAK7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,KAAK,0BAA0B,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG;IACzE,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CACjD,CAAC;AA2BF,eAAO,MAAM,qBAAqB,GAAI,+BAGnC,0BAA0B,4CA0B5B,CAAC"}
+{"version":3,"file":"ScreenSpinnerSwapIcon.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/ScreenSpinnerSwapIcon.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAK7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,KAAK,0BAA0B,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG;IACzE,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,GAAG,SAAS,CAAC;CAC7D,CAAC;AA2BF,eAAO,MAAM,qBAAqB,GAAI,+BAGnC,0BAA0B,4CA0B5B,CAAC"}

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

@@ -1 +1 @@
-{"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","ScreenSpinnerCancelIcon","onKeyDown","ariaLabel","restProps","handlers","clickableProps","baseClassName","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;AAQjD,MAAMC,0BAA0B,CAAC,EAC/BC,SAAS,EACT,cAAcC,YAAY,UAAU,EACpC,GAAGC,WACwB;IAC3B,MAAMC,WAAWV,WACf;QAAEO,WAAWN;IAAuB,GACpC;QACEM;IACF;IAEF,IAAII,iBAAwD;QAC1D,GAAGD,QAAQ;QACX,YAAY;QACZ,QAAQ;QACR,cAAcF;IAChB;IAEA,qBACE,KAACN;QAAcU,aAAa;QAAgB,GAAGD,cAAc;QAAG,GAAGF,SAAS;kBAC1E,cAAA,KAACV;;AAGP;AAEA,OAAO,MAAMc,wBAAwB,CAAC,EACpCC,WAAW,EACX,GAAGL,WACwB;IAC3B,MAAM,EAAEM,KAAK,EAAEC,UAAU,EAAE,GAAGlB,MAAMmB,UAAU,CAACZ;IAE/C,IAAIU,UAAU,cAAc;QAC1B,qBAAO,KAACT;YAAwBY,cAAYJ;YAAc,GAAGL,SAAS;;IACxE;IAEA,MAAMU,aAAa;QACjB,IAAIJ,UAAU,UAAU;YACtB,OAAOC;QACT;QAEA,MAAMI,OAAO;YACXC,SAAS,IAAM;YACfC,MAAMlB;YACNmB,OAAOpB;QACT,CAAC,CAACY,MAAM;QAER,qBAAO,KAACK;IACV;IAEA,qBACE,KAAClB;QAAcU,aAAa;QAAgB,GAAGH,SAAS;kBACrDU;;AAGP,EAAE"}
+{"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'] | undefined;\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","ScreenSpinnerCancelIcon","onKeyDown","ariaLabel","restProps","handlers","clickableProps","baseClassName","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;AAQjD,MAAMC,0BAA0B,CAAC,EAC/BC,SAAS,EACT,cAAcC,YAAY,UAAU,EACpC,GAAGC,WACwB;IAC3B,MAAMC,WAAWV,WACf;QAAEO,WAAWN;IAAuB,GACpC;QACEM;IACF;IAEF,IAAII,iBAAwD;QAC1D,GAAGD,QAAQ;QACX,YAAY;QACZ,QAAQ;QACR,cAAcF;IAChB;IAEA,qBACE,KAACN;QAAcU,aAAa;QAAgB,GAAGD,cAAc;QAAG,GAAGF,SAAS;kBAC1E,cAAA,KAACV;;AAGP;AAEA,OAAO,MAAMc,wBAAwB,CAAC,EACpCC,WAAW,EACX,GAAGL,WACwB;IAC3B,MAAM,EAAEM,KAAK,EAAEC,UAAU,EAAE,GAAGlB,MAAMmB,UAAU,CAACZ;IAE/C,IAAIU,UAAU,cAAc;QAC1B,qBAAO,KAACT;YAAwBY,cAAYJ;YAAc,GAAGL,SAAS;;IACxE;IAEA,MAAMU,aAAa;QACjB,IAAIJ,UAAU,UAAU;YACtB,OAAOC;QACT;QAEA,MAAMI,OAAO;YACXC,SAAS,IAAM;YACfC,MAAMlB;YACNmB,OAAOpB;QACT,CAAC,CAACY,MAAM;QAER,qBAAO,KAACK;IACV;IAEA,qBACE,KAAClB;QAAcU,aAAa;QAAgB,GAAGH,SAAS;kBACrDU;;AAGP,EAAE"}

package/dist/components/ScreenSpinner/context.d.ts

@@ -8,11 +8,11 @@ export interface ScreenSpinnerContextProps {
     /**
      * Текст под иконкой.
      */
-    label?: ScreenSpinnerProps['label'];
+    label?: ScreenSpinnerProps['label'] | undefined;
     /**
      * Кастомная иконка, работает совместно со `state="custom"`.
      */
-    customIcon?: ScreenSpinnerProps['customIcon'];
+    customIcon?: ScreenSpinnerProps['customIcon'] | undefined;
 }
 export declare const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps>;
 //# sourceMappingURL=context.d.ts.map

package/dist/components/ScreenSpinner/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,yBAAyB,CAKtE,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD;;OAEG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAChD;;OAEG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;CAC3D;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,yBAAyB,CAKtE,CAAC"}

package/dist/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  /**\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"}
+{"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'] | undefined;\n  /**\n   * Кастомная иконка, работает совместно со `state=\"custom\"`.\n   */\n  customIcon?: ScreenSpinnerProps['customIcon'] | undefined;\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/components/ScreenSpinner/types.d.ts

@@ -5,22 +5,22 @@ export type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> & Pick<AppRootPortal
     /**
      * Тип отображения спиннера.
      */
-    state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom';
+    state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom' | undefined;
     /**
      * Кастомная иконка, работает совместно со `state="custom"`.
      */
-    customIcon?: React.ReactNode;
+    customIcon?: React.ReactNode | undefined;
     /**
      * Внешний вид отображения спиннера.
      */
-    mode?: 'shadow' | 'overlay';
+    mode?: 'shadow' | 'overlay' | undefined;
     /**
      * Текст под иконкой.
      */
-    label?: React.ReactNode;
+    label?: React.ReactNode | undefined;
     /**
      * Используется при `state='cancelable'`. Делает доступным для ассистивных технологий.
      */
-    cancelLabel?: string;
+    cancelLabel?: string | undefined;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ScreenSpinner/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GACzD,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/D;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScreenSpinner/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,GACzD,IAAI,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC3E;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC,CAAC"}

package/dist/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  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"}
+{"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' | undefined;\n    /**\n     * Кастомная иконка, работает совместно со `state=\"custom\"`.\n     */\n    customIcon?: React.ReactNode | undefined;\n    /**\n     * Внешний вид отображения спиннера.\n     */\n    mode?: 'shadow' | 'overlay' | undefined;\n    /**\n     * Текст под иконкой.\n     */\n    label?: React.ReactNode | undefined;\n    /**\n     * Используется при `state='cancelable'`. Делает доступным для ассистивных технологий.\n     */\n    cancelLabel?: string | undefined;\n  };\n"],"names":[],"mappings":"AAIA,WAsBI"}

package/dist/components/ScrollArrow/ScrollArrow.d.ts

@@ -8,15 +8,21 @@ export interface ScrollArrowProps extends React.ButtonHTMLAttributes<HTMLButtonE
     /**
      * Размер стрелки.
      */
-    size?: 's' | 'm';
+    size?: 's' | 'm' | undefined;
     /**
      * Смещает иконку кнопки навигации по вертикали.
      */
-    offsetY?: number | string;
+    offsetY?: number | string | undefined;
+    /**
+     * Смещает иконку кнопки навигации по горизонтали.
+     * Для `direction="left"` применяется к `left` (в LTR) или `right` (в RTL).
+     * Для `direction="right"` применяется к `right` (в LTR) или `left` (в RTL).
+     */
+    offsetX?: number | string | undefined;
     /**
      * [a11y]: Используется для ассистивных технологий.
      */
-    label?: string;
+    label?: string | undefined;
 }
 /**
  * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).
@@ -24,5 +30,5 @@ export interface ScrollArrowProps extends React.ButtonHTMLAttributes<HTMLButtonE
  * @since 5.4.0
  * @see https://vkui.io/components/scroll-arrow
  */
-export declare const ScrollArrow: ({ size, offsetY, direction, label: labelProp, children, ...restProps }: ScrollArrowProps) => React.ReactNode;
+export declare const ScrollArrow: ({ size, offsetY, offsetX, direction, label: labelProp, children, ...restProps }: ScrollArrowProps) => React.ReactNode;
 //# sourceMappingURL=ScrollArrow.d.ts.map

package/dist/components/ScrollArrow/ScrollArrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArrow.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArrow/ScrollArrow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAiC9C,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,wEAOzB,gBAAgB,KAAG,KAAK,CAAC,SAsB3B,CAAC"}
+{"version":3,"file":"ScrollArrow.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArrow/ScrollArrow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAiC9C,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,iFAQzB,gBAAgB,KAAG,KAAK,CAAC,SAsC3B,CAAC"}

package/dist/components/ScrollArrow/ScrollArrow.js

@@ -35,11 +35,23 @@ const ArrowIcon = ({ size })=>{
  *
  * @since 5.4.0
  * @see https://vkui.io/components/scroll-arrow
- */ export const ScrollArrow = ({ size = 'm', offsetY, direction, label: labelProp, children = /*#__PURE__*/ _jsx(ArrowIcon, {
+ */ export const ScrollArrow = ({ size = 'm', offsetY, offsetX, direction, label: labelProp, children = /*#__PURE__*/ _jsx(ArrowIcon, {
     size: size
 }), ...restProps })=>{
     const textDirection = useConfigDirection();
     const label = labelProp ?? labelDirection[direction];
+    const iconStyle = {};
+    if (offsetY) {
+        iconStyle.top = offsetY;
+    }
+    if (offsetX) {
+        const isRtl = textDirection === 'rtl';
+        if (direction === 'left') {
+            iconStyle[isRtl ? 'right' : 'left'] = offsetX;
+        } else if (direction === 'right') {
+            iconStyle[isRtl ? 'left' : 'right'] = offsetX;
+        }
+    }
     return /*#__PURE__*/ _jsxs(RootComponent, {
         Component: "button",
         type: "button",
@@ -51,9 +63,7 @@ const ArrowIcon = ({ size })=>{
             }),
             /*#__PURE__*/ _jsx("span", {
                 className: "vkuiScrollArrow__icon",
-                style: offsetY ? {
-                    top: offsetY
-                } : undefined,
+                style: Object.keys(iconStyle).length > 0 ? iconStyle : undefined,
                 children: children
             })
         ]