@vkontakte/vkui 6.0.3 → 6.1.0

package/dist/cjs/components/Removable/Removable.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _icons = require("@vkontakte/icons");
 const _vkjs = require("@vkontakte/vkjs");
@@ -54,39 +55,53 @@ const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
         disabledRef.current = false;
         updateRemoveOffset(offsetWidth);
     };
-    return /*#__PURE__*/ _react.createElement("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         className: (0, _vkjs.classNames)("vkuiRemovable__content", 'vkuiInternalRemovable__content'),
         style: {
             transform: `translateX(-${removeOffset !== null && removeOffset !== void 0 ? removeOffset : 0}px)`
         },
-        onTransitionEnd: onRemoveTransitionEnd
-    }, /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {
-        hasActive: false,
-        hasHover: false,
-        className: (0, _vkjs.classNames)("vkuiRemovable__action", "vkuiRemovable__toggle", 'vkuiInternalRemovable__action'),
-        onClick: onRemoveActivateClick,
-        disabled: removeOffset > 0,
-        "data-testid": toggleButtonTestId
-    }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, removePlaceholderString), /*#__PURE__*/ _react.createElement("i", {
-        className: "vkuiRemovable__toggle-in",
-        role: "presentation"
-    })), typeof childrenProp === 'function' ? childrenProp({
-        isRemoving: removeOffset > 0
-    }) : childrenProp, /*#__PURE__*/ _react.createElement("span", {
-        className: "vkuiRemovable__offset",
-        "aria-hidden": true
-    }), /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
-        Component: "button",
-        hasActive: false,
-        hasHover: false,
-        disabled: disabledRef.current,
-        getRootRef: removeButtonRef,
-        className: "vkuiRemovable__remove",
-        onClick: onRemove,
-        "data-testid": removeButtonTestId
-    }, /*#__PURE__*/ _react.createElement("span", {
-        className: "vkuiRemovable__remove-in"
-    }, removePlaceholder)));
+        onTransitionEnd: onRemoveTransitionEnd,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_IconButton.IconButton, {
+                hasActive: false,
+                hasHover: false,
+                className: (0, _vkjs.classNames)("vkuiRemovable__action", "vkuiRemovable__toggle", 'vkuiInternalRemovable__action'),
+                onClick: onRemoveActivateClick,
+                disabled: removeOffset > 0,
+                "data-testid": toggleButtonTestId,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                        children: removePlaceholderString
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("i", {
+                        className: "vkuiRemovable__toggle-in",
+                        role: "presentation"
+                    })
+                ]
+            }),
+            typeof childrenProp === 'function' ? childrenProp({
+                isRemoving: removeOffset > 0
+            }) : childrenProp,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: "vkuiRemovable__offset",
+                "aria-hidden": true
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tappable.Tappable, {
+                Component: "button",
+                hasActive: false,
+                hasHover: false,
+                disabled: disabledRef.current,
+                getRootRef: removeButtonRef,
+                className: "vkuiRemovable__remove",
+                onClick: onRemove,
+                "data-testid": removeButtonTestId,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    className: "vkuiRemovable__remove-in",
+                    children: removePlaceholder
+                })
+            })
+        ]
+    });
 };
 const Removable = (_param)=>{
     var { children, onRemove = _vkjs.noop, removePlaceholder = 'Удалить', align = 'center', indent = false, toggleButtonTestId, removeButtonTestId } = _param, restProps = _object_without_properties._(_param, [
@@ -104,31 +119,42 @@ const Removable = (_param)=>{
         onRemove(e);
     };
     const removePlaceholderString = (0, _children.getTextFromChildren)(removePlaceholder);
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: (0, _vkjs.classNames)(platform === 'ios' && "vkuiRemovable--ios", align === 'start' && "vkuiRemovable--align-start", indent && "vkuiRemovable--indent")
-    }), platform !== 'ios' && /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiRemovable__content", 'vkuiInternalRemovable__content')
-    }, typeof children === 'function' ? children({
-        isRemoving: false
-    }) : children, /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {
-        activeMode: "opacity",
-        hoverMode: "opacity",
-        className: (0, _vkjs.classNames)("vkuiRemovable__action", 'vkuiInternalRemovable__action'),
-        onClick: onRemoveClick,
-        label: removePlaceholderString,
-        "data-testid": removeButtonTestId
-    }, /*#__PURE__*/ _react.createElement(_icons.Icon24Cancel, {
-        role: "presentation"
-    })), /*#__PURE__*/ _react.createElement("span", {
-        className: "vkuiRemovable__offset",
-        "aria-hidden": true
-    })), platform === 'ios' && /*#__PURE__*/ _react.createElement(RemovableIos, {
-        onRemove: onRemoveClick,
-        removePlaceholder: removePlaceholder,
-        removePlaceholderString: removePlaceholderString,
-        toggleButtonTestId: toggleButtonTestId,
-        removeButtonTestId: removeButtonTestId
-    }, children));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)(platform === 'ios' && "vkuiRemovable--ios", align === 'start' && "vkuiRemovable--align-start", indent && "vkuiRemovable--indent"),
+        children: [
+            platform !== 'ios' && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _vkjs.classNames)("vkuiRemovable__content", 'vkuiInternalRemovable__content'),
+                children: [
+                    typeof children === 'function' ? children({
+                        isRemoving: false
+                    }) : children,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_IconButton.IconButton, {
+                        activeMode: "opacity",
+                        hoverMode: "opacity",
+                        className: (0, _vkjs.classNames)("vkuiRemovable__action", 'vkuiInternalRemovable__action'),
+                        onClick: onRemoveClick,
+                        label: removePlaceholderString,
+                        "data-testid": removeButtonTestId,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_icons.Icon24Cancel, {
+                            role: "presentation"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "vkuiRemovable__offset",
+                        "aria-hidden": true
+                    })
+                ]
+            }),
+            platform === 'ios' && /*#__PURE__*/ (0, _jsxruntime.jsx)(RemovableIos, {
+                onRemove: onRemoveClick,
+                removePlaceholder: removePlaceholder,
+                removePlaceholderString: removePlaceholderString,
+                toggleButtonTestId: toggleButtonTestId,
+                removeButtonTestId: removeButtonTestId,
+                children: children
+            })
+        ]
+    }));
 };
 
 //# sourceMappingURL=Removable.js.map

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

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

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

@@ -53,7 +53,7 @@ export interface RichCellProps extends TappableProps {
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */
 export declare const RichCell: {
-    ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): React.JSX.Element;
-    Icon: (props: import("./RichCellIcon/RichCellIcon").RichCellIconProps) => React.JSX.Element;
+    ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): import("react/jsx-runtime").JSX.Element;
+    Icon: (props: import("./RichCellIcon/RichCellIcon").RichCellIconProps) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=RichCell.d.ts.map

package/dist/cjs/components/RichCell/RichCell.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
@@ -37,37 +38,69 @@ const RichCell = (_param)=>{
         "className"
     ]);
     const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
-    return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", sizeY !== 'regular' && sizeYClassNames[sizeY], className)
-    }), before && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__before"
-    }, before), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__in"
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__content"
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__content-before"
-    }, subhead && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
-        Component: "div",
-        className: "vkuiRichCell__subhead"
-    }, subhead), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__children"
-    }, children), text && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__text"
-    }, text), caption && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
-        Component: "div",
-        className: "vkuiRichCell__caption"
-    }, caption)), (after || afterCaption) && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__content-after"
-    }, after && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__after-children"
-    }, after), afterCaption && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__after-caption"
-    }, afterCaption))), bottom && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__bottom"
-    }, bottom), actions && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiRichCell__actions"
-    }, actions)));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
+        children: [
+            before && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "vkuiRichCell__before",
+                children: before
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "vkuiRichCell__in",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "vkuiRichCell__content",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "vkuiRichCell__content-before",
+                                children: [
+                                    subhead && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Subhead.Subhead, {
+                                        Component: "div",
+                                        className: "vkuiRichCell__subhead",
+                                        children: subhead
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "vkuiRichCell__children",
+                                        children: children
+                                    }),
+                                    text && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "vkuiRichCell__text",
+                                        children: text
+                                    }),
+                                    caption && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Subhead.Subhead, {
+                                        Component: "div",
+                                        className: "vkuiRichCell__caption",
+                                        children: caption
+                                    })
+                                ]
+                            }),
+                            (after || afterCaption) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "vkuiRichCell__content-after",
+                                children: [
+                                    after && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "vkuiRichCell__after-children",
+                                        children: after
+                                    }),
+                                    afterCaption && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: "vkuiRichCell__after-caption",
+                                        children: afterCaption
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    bottom && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiRichCell__bottom",
+                        children: bottom
+                    }),
+                    actions && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiRichCell__actions",
+                        children: actions
+                    })
+                ]
+            })
+        ]
+    }));
 };
 RichCell.Icon = _RichCellIcon.RichCellIcon;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  ['compact']: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["RichCell","sizeYClassNames","none","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","useAdaptivity","Tappable","classNames","div","Subhead","Component","Icon","RichCellIcon"],"mappings":";;;;+BAkEaA;;;eAAAA;;;;;;;iEAlEU;sBACI;+BACG;0BACU;yBAChB;8BACK;AAG7B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAuDO,MAAMF,WAAW;QAAC,EACvBG,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EAEK,WADXC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,qBAACC,kBAAQ,8CACHH;QACJD,WAAWK,IAAAA,gBAAU,kBAEnB,CAACN,4CACDG,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CF;QAGDN,wBAAU,qBAACY;QAAIN,SAAS;OAA+BN,uBACxD,qBAACY;QAAIN,SAAS;qBACZ,qBAACM;QAAIN,SAAS;qBACZ,qBAACM;QAAIN,SAAS;OACXV,yBACC,qBAACiB,gBAAO;QAACC,WAAU;QAAMR,SAAS;OAC/BV,wBAGL,qBAACgB;QAAIN,SAAS;OAAiCT,WAC9CC,sBAAQ,qBAACc;QAAIN,SAAS;OAA6BR,OACnDC,yBACC,qBAACc,gBAAO;QAACC,WAAU;QAAMR,SAAS;OAC/BP,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,qBAACU;QAAIN,SAAS;OACXL,uBAAS,qBAACW;QAAIN,SAAS;OAAuCL,QAC9DC,8BACC,qBAACU;QAAIN,SAAS;OAAsCJ,iBAK3DC,wBAAU,qBAACS;QAAIN,SAAS;OAA+BH,SACvDC,yBAAW,qBAACQ;QAAIN,SAAS;OAAgCF;AAIlE;AAEAX,SAASsB,IAAI,GAAGC,0BAAY"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  ['compact']: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["RichCell","sizeYClassNames","none","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","useAdaptivity","Tappable","classNames","div","Subhead","Component","Icon","RichCellIcon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkEaA;;;eAAAA;;;;;;;;iEAlEU;sBACI;+BACG;0BACU;yBAChB;8BACK;AAG7B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAuDO,MAAMF,WAAW;QAAC,EACvBG,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EAEK,WADXC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,qBACE,sBAACC,kBAAQ,8CACHH;QACJD,WAAWK,IAAAA,gBAAU,kBAEnB,CAACN,4CACDG,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CF;;YAGDN,wBAAU,qBAACY;gBAAIN,SAAS;0BAA+BN;;0BACxD,sBAACY;gBAAIN,SAAS;;kCACZ,sBAACM;wBAAIN,SAAS;;0CACZ,sBAACM;gCAAIN,SAAS;;oCACXV,yBACC,qBAACiB,gBAAO;wCAACC,WAAU;wCAAMR,SAAS;kDAC/BV;;kDAGL,qBAACgB;wCAAIN,SAAS;kDAAiCT;;oCAC9CC,sBAAQ,qBAACc;wCAAIN,SAAS;kDAA6BR;;oCACnDC,yBACC,qBAACc,gBAAO;wCAACC,WAAU;wCAAMR,SAAS;kDAC/BP;;;;4BAILE,CAAAA,SAASC,YAAW,mBACpB,sBAACU;gCAAIN,SAAS;;oCACXL,uBAAS,qBAACW;wCAAIN,SAAS;kDAAuCL;;oCAC9DC,8BACC,qBAACU;wCAAIN,SAAS;kDAAsCJ;;;;;;oBAK3DC,wBAAU,qBAACS;wBAAIN,SAAS;kCAA+BH;;oBACvDC,yBAAW,qBAACQ;wBAAIN,SAAS;kCAAgCF;;;;;;AAIlE;AAEAX,SAASsB,IAAI,GAAGC,0BAAY"}

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

@@ -1,5 +1,4 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../../types';
 export type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
-export declare const RichCellIcon: (props: RichCellIconProps) => React.JSX.Element;
+export declare const RichCellIcon: (props: RichCellIconProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RichCellIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichCellIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE1E,eAAO,MAAM,YAAY,UAAW,iBAAiB,sBAEpD,CAAC"}
+{"version":3,"file":"RichCellIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE1E,eAAO,MAAM,YAAY,UAAW,iBAAiB,4CAEpD,CAAC"}

package/dist/cjs/components/RichCell/RichCellIcon/RichCellIcon.js

@@ -8,12 +8,11 @@ Object.defineProperty(exports, "RichCellIcon", {
         return RichCellIcon;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
 const _RootComponent = require("../../RootComponent/RootComponent");
 const RichCellIcon = (props)=>{
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread._({
         baseClassName: "vkuiRichCellIcon"
     }, props));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './RichCellIcon.module.css';\n\nexport type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const RichCellIcon = (props: RichCellIconProps) => {\n  return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;\n};\n"],"names":["RichCellIcon","props","RootComponent","baseClassName"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;iEAPU;+BAEO;AAKvB,MAAMA,eAAe,CAACC;IAC3B,qBAAO,qBAACC,4BAAa;QAACC,aAAa;OAA8BF;AACnE"}
+{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './RichCellIcon.module.css';\n\nexport type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const RichCellIcon = (props: RichCellIconProps) => {\n  return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;\n};\n"],"names":["RichCellIcon","props","RootComponent","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;;+BALiB;AAKvB,MAAMA,eAAe,CAACC;IAC3B,qBAAO,qBAACC,4BAAa;QAACC,aAAa;OAA8BF;AACnE"}

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

@@ -19,5 +19,5 @@ export interface RootState {
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */
-export declare const Root: ({ children, activeView: _activeView, onTransition, nav, ...restProps }: RootProps) => React.JSX.Element;
+export declare const Root: ({ children, activeView: _activeView, onTransition, nav, ...restProps }: RootProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Root.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AASxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF,UAAU,EAAE,MAAM,CAAC;IACnB,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,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAED,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;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,2EAMd,SAAS,sBA2HX,CAAC"}
+{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AASxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF,UAAU,EAAE,MAAM,CAAC;IACnB,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,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAED,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;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,2EAMd,SAAS,4CA2HX,CAAC"}

package/dist/cjs/components/Root/Root.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _usePlatform = require("../../hooks/usePlatform");
@@ -114,31 +115,35 @@ const Root = (_param)=>{
             finishTransition();
         }
     };
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: (0, _vkjs.classNames)("vkuiRoot", platform === 'ios' && "vkuiRoot--ios", transition && "vkuiRoot--transition")
-    }), views.map((view)=>{
-        const viewId = (0, _getNavId.getNavId)(view.props, warn);
-        if (viewId !== activeView && !(transition && viewId === prevView)) {
-            return null;
-        }
-        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
-        const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);
-        var _scrolls_viewId;
-        return /*#__PURE__*/ _react.createElement("div", {
-            key: viewId,
-            ref: (e)=>viewId && (viewNodes[viewId] = e),
-            onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
-            className: (0, _vkjs.classNames)("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__view--hide-back", transition && viewId === prevView && !isBack && "vkuiRoot__view--hide-forward", transition && viewId === activeView && isBack && "vkuiRoot__view--show-back", transition && viewId === activeView && !isBack && "vkuiRoot__view--show-forward")
-        }, /*#__PURE__*/ _react.createElement(_NavTransitionDirectionContext.NavTransitionDirectionProvider, {
-            isBack: isBack
-        }, /*#__PURE__*/ _react.createElement(_NavTransitionContext.NavTransitionProvider, {
-            entering: transition && viewId === activeView
-        }, /*#__PURE__*/ _react.createElement("div", {
-            className: "vkuiRoot__scrollCompensation",
-            style: {
-                marginTop: compensateScroll ? viewId && -((_scrolls_viewId = scrolls[viewId]) !== null && _scrolls_viewId !== void 0 ? _scrolls_viewId : 0) : undefined
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiRoot", platform === 'ios' && "vkuiRoot--ios", transition && "vkuiRoot--transition"),
+        children: views.map((view)=>{
+            const viewId = (0, _getNavId.getNavId)(view.props, warn);
+            if (viewId !== activeView && !(transition && viewId === prevView)) {
+                return null;
             }
-        }, view))));
+            const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
+            const compensateScroll = transition && (viewId === prevView || isBack && viewId === activeView);
+            var _scrolls_viewId;
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                ref: (e)=>viewId && (viewNodes[viewId] = e),
+                onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
+                className: (0, _vkjs.classNames)("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__view--hide-back", transition && viewId === prevView && !isBack && "vkuiRoot__view--hide-forward", transition && viewId === activeView && isBack && "vkuiRoot__view--show-back", transition && viewId === activeView && !isBack && "vkuiRoot__view--show-forward"),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_NavTransitionDirectionContext.NavTransitionDirectionProvider, {
+                    isBack: isBack,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_NavTransitionContext.NavTransitionProvider, {
+                        entering: transition && viewId === activeView,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "vkuiRoot__scrollCompensation",
+                            style: {
+                                marginTop: compensateScroll ? viewId && -((_scrolls_viewId = scrolls[viewId]) !== null && _scrolls_viewId !== void 0 ? _scrolls_viewId : 0) : undefined
+                            },
+                            children: view
+                        })
+                    })
+                })
+            }, viewId);
+        })
     }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === 'ios' ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['root-android-animation-hide-back'],\n        styles['root-android-animation-show-forward'],\n        styles['root-ios-animation-hide-back'],\n        styles['root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Root'],\n        platform === 'ios' && styles['Root--ios'],\n        transition && styles['Root--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) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionDirectionProvider isBack={isBack}>\n              <NavTransitionProvider entering={transition && viewId === activeView}>\n                <div\n                  className={styles['Root__scrollCompensation']}\n                  style={{\n                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                  }}\n                >\n                  {view}\n                </div>\n              </NavTransitionProvider>\n            </NavTransitionDirectionProvider>\n          </div>\n        );\n      })}\n    </RootComponent>\n  );\n};\n"],"names":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","transitionMotionEnabled","useConfigProvider","animate","SplitColContext","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","useEffect","clear","set","onAnimationEnd","e","includes","animationName","RootComponent","baseClassName","classNames","viewId","isTransitionTarget","compensateScroll","div","key","ref","undefined","className","NavTransitionDirectionProvider","NavTransitionProvider","entering","style","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === 'ios' ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['root-android-animation-hide-back'],\n        styles['root-android-animation-show-forward'],\n        styles['root-ios-animation-hide-back'],\n        styles['root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Root'],\n        platform === 'ios' && styles['Root--ios'],\n        transition && styles['Root--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) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionDirectionProvider isBack={isBack}>\n              <NavTransitionProvider entering={transition && viewId === activeView}>\n                <div\n                  className={styles['Root__scrollCompensation']}\n                  style={{\n                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                  }}\n                >\n                  {view}\n                </div>\n              </NavTransitionProvider>\n            </NavTransitionDirectionProvider>\n          </div>\n        );\n      })}\n    </RootComponent>\n  );\n};\n"],"names":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","transitionMotionEnabled","useConfigProvider","animate","SplitColContext","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","useEffect","clear","set","onAnimationEnd","e","includes","animationName","RootComponent","baseClassName","classNames","viewId","isTransitionTarget","compensateScroll","div","ref","undefined","className","NavTransitionDirectionProvider","NavTransitionProvider","entering","style","marginTop"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmCaA;;;eAAAA;;;;;;;;iEAnCU;sBACI;6BACC;4BACD;qBACJ;0BACc;2CACK;0BACjB;+BAEK;uCACI;sCACI;+CACS;+BACjB;iCACE;AAgBhC,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMF,OAAO;QAAC,EACnBG,QAAQ,EACRC,YAAYC,WAAW,EACvBC,YAAY,EACZC,GAAG,EAEO,WADPC;QAJHL;QACAC;QACAE;QACAC;;IAGA,MAAME,SAASC,OAAMC,UAAU,CAACC,4BAAa;IAC7C,MAAMC,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAC3B,MAAMC,UAAUP,OAAMQ,MAAM,CAAyB,CAAC,GAAGC,OAAO;IAChE,MAAMC,YAAYV,OAAMQ,MAAM,CAAqC,CAAC,GAAGC,OAAO;IAE9E,MAAM,EAAEE,0BAA0B,IAAI,EAAE,GAAGC,IAAAA,wCAAiB;IAC5D,MAAM,EAAEC,OAAO,EAAE,GAAGb,OAAMC,UAAU,CAACa,gCAAe;IACpD,MAAMC,mBAAmB,CAACJ,2BAA2B,CAACE;IAEtD,MAAMG,QAAQhB,OAAMiB,QAAQ,CAACC,OAAO,CAACzB;IAErC,MAAM,CAAC,EAAE0B,QAAQ,EAAEzB,UAAU,EAAE0B,UAAU,EAAEC,MAAM,EAAE,EAAEC,UAAU,GAAGtB,OAAMuB,QAAQ,CAAY;QAC1F7B,YAAYC;QACZyB,YAAY;IACd;IACA,MAAMI,eAAe,CAACC;QACpB,IAAIA,UAAU/B,YAAY;YACxB,MAAMgC,UAAUV,MAAMW,GAAG,CAAC,CAACC,OAASC,IAAAA,kBAAQ,EAACD,KAAKE,KAAK,EAAEvC;YACzD,MAAM8B,SAASK,QAAQK,OAAO,CAACN,SAASC,QAAQK,OAAO,CAACrC;YACxDa,OAAO,CAACb,WAAW,GAAGK,OAAOiC,SAAS,GAAGC,CAAC;YAC1CX,UAAU;gBACR5B,YAAY+B;gBACZN,UAAUzB;gBACV0B,YAAY,CAACL;gBACbM;YACF;QACF;IACF;IACA,MAAMa,mBAAmBlC,OAAMmC,WAAW,CACxC,IAAMb,UAAU;YAAE5B;YAAYyB;YAAUE;YAAQD,YAAY;QAAM,IAClE;QAAC1B;QAAY2B;QAAQF;KAAS;IAGhCiB,IAAAA,oDAAyB,EAAC;QACvB/B,SAAUgC,aAAa,CAAiBC,IAAI;IAC/C,GAAG;QAAC5C;KAAW;IAEf,gBAAgB;IAChB0C,IAAAA,oDAAyB,EAAC,IAAMZ,aAAa7B,cAAc;QAACA;KAAY;IACxEyC,IAAAA,oDAAyB,EAAC;QACxB,IAAI,CAAChB,cAAcD,UAAU;YAC3B,qBAAqB;YACrBpB,OAAOwC,QAAQ,CAAC,GAAGlB,SAASd,OAAO,CAACb,WAAW,GAAG;YAClDE,gBACEA,aAAa;gBACXyB,QAAQmB,QAAQnB;gBAChBoB,MAAMtB;gBACNuB,IAAIhD;YACN;QACJ;IACF,GAAG;QAAC0B;QAAYD;KAAS;IAEzB,MAAMwB,qBAAqBC,IAAAA,sBAAU,EAACV,kBAAkB/B,aAAa,QAAQ,MAAM;IACnFH,OAAM6C,SAAS,CAAC;QACd,IAAI,CAACzB,YAAY;YACfuB,mBAAmBG,KAAK;YACxB;QACF;QACAH,mBAAmBI,GAAG;IACxB,GAAG;QAACJ;QAAoBvB;KAAW;IAEnC,MAAM4B,iBAAiB,CAACC;QACtB,IACE;;;;;SAKC,CAACC,QAAQ,CAACD,EAAEE,aAAa,GAC1B;YACAjB;QACF;IACF;IAEA,qBACE,qBAACkB,4BAAa,8CACRtD;QACJuD,eAAeC,IAAAA,gBAAU,cAEvBnD,aAAa,0BACbiB;kBAGDJ,MAAMW,GAAG,CAAC,CAACC;YACV,MAAM2B,SAAS1B,IAAAA,kBAAQ,EAACD,KAAKE,KAAK,EAAEvC;YACpC,IAAIgE,WAAW7D,cAAc,CAAE0B,CAAAA,cAAcmC,WAAWpC,QAAO,GAAI;gBACjE,OAAO;YACT;YACA,MAAMqC,qBAAqBpC,cAAcmC,WAAYlC,CAAAA,SAASF,WAAWzB,UAAS;YAClF,MAAM+D,mBACJrC,cAAemC,CAAAA,WAAWpC,YAAaE,UAAUkC,WAAW7D,UAAU;gBAmBlBa;YAlBtD,qBACE,qBAACmD;gBAECC,KAAK,CAACV,IAAMM,UAAW7C,CAAAA,SAAS,CAAC6C,OAAO,GAAGN,CAAAA;gBAC3CD,gBAAgBQ,qBAAqBR,iBAAiBY;gBACtDC,WAAWP,IAAAA,gBAAU,oBAEnBlC,cAAcmC,WAAWpC,YAAYE,uCACrCD,cAAcmC,WAAWpC,YAAY,CAACE,0CACtCD,cAAcmC,WAAW7D,cAAc2B,uCACvCD,cAAcmC,WAAW7D,cAAc,CAAC2B;0BAG1C,cAAA,qBAACyC,6DAA8B;oBAACzC,QAAQA;8BACtC,cAAA,qBAAC0C,2CAAqB;wBAACC,UAAU5C,cAAcmC,WAAW7D;kCACxD,cAAA,qBAACgE;4BACCG,SAAS;4BACTI,OAAO;gCACLC,WAAWT,mBAAmBF,UAAU,CAAEhD,CAAAA,CAAAA,kBAAAA,OAAO,CAACgD,OAAO,cAAfhD,6BAAAA,kBAAmB,CAAA,IAAKqD;4BACpE;sCAEChC;;;;eAnBF2B;QAyBX;;AAGN"}

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

@@ -6,5 +6,5 @@ export interface RootComponentProps<T> extends React.AllHTMLAttributes<T>, HasRo
 /**
  * Базовый корневой компонент.
  */
-export declare const RootComponent: <T>({ Component, baseClassName, className, getRootRef, ...restProps }: RootComponentProps<T>) => React.JSX.Element;
+export declare const RootComponent: <T>({ Component, baseClassName, className, getRootRef, ...restProps }: RootComponentProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RootComponent.d.ts.map

package/dist/cjs/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,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,oHAQzB,CAAC"}
+{"version":3,"file":"RootComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,yEAMvB,mBAAmB,CAAC,CAAC,4CAEvB,CAAC"}

package/dist/cjs/components/RootComponent/RootComponent.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "RootComponent", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const RootComponent = (_param)=>{
@@ -20,7 +21,7 @@ const RootComponent = (_param)=>{
         "className",
         "getRootRef"
     ]);
-    return /*#__PURE__*/ _react.createElement(Component, _object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Component, _object_spread._({
         ref: getRootRef,
         className: (0, _vkjs.classNames)(baseClassName, className)
     }, restProps));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  baseClassName?: string | false;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>) => (\n  <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />\n);\n"],"names":["RootComponent","Component","baseClassName","className","getRootRef","restProps","ref","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;iEAdU;sBACI;AAapB,MAAMA,gBAAgB;QAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EAEY,WADnBC;QAJHJ;QACAC;QACAC;QACAC;;yBAGA,qBAACH;QAAUK,KAAKF;QAAYD,WAAWI,IAAAA,gBAAU,EAACL,eAAeC;OAAgBE"}
+{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  baseClassName?: string | false;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>) => (\n  <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />\n);\n"],"names":["RootComponent","Component","baseClassName","className","getRootRef","restProps","ref","classNames"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;;;;iEAdU;sBACI;AAapB,MAAMA,gBAAgB;QAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EAEY,WADnBC;QAJHJ;QACAC;QACAC;QACAC;;yBAGA,qBAACH;QAAUK,KAAKF;QAAYD,WAAWI,IAAAA,gBAAU,EAACL,eAAeC;OAAgBE"}