@vkontakte/vkui 5.2.4 → 5.3.0

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

@@ -1,15 +1,19 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Removable", {
+    enumerable: true,
+    get: function() {
+        return Removable;
+    }
 });
-exports.Removable = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useExternRef = require("../../hooks/useExternRef");
@@ -18,126 +22,108 @@ var _usePlatform = require("../../hooks/usePlatform");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
 var _utils = require("../../lib/utils");
-var _IconButton = require("../IconButton/IconButton");
-var _Tappable = require("../Tappable/Tappable");
-var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align", "className"];
+var _iconButton = require("../IconButton/IconButton");
+var _tappable = require("../Tappable/Tappable");
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
- */
-var RemovableIos = function RemovableIos(_ref) {
-  var onRemove = _ref.onRemove,
-    removePlaceholder = _ref.removePlaceholder,
-    removePlaceholderString = _ref.removePlaceholderString,
-    children = _ref.children;
-  var _useDOM = (0, _dom.useDOM)(),
-    window = _useDOM.window;
-  var removeButtonRef = React.useRef(null);
-  var disabledRef = React.useRef(true);
-  var _React$useState = React.useState(0),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    removeOffset = _React$useState2[0],
-    updateRemoveOffset = _React$useState2[1];
-  (0, _useGlobalEventListener.useGlobalEventListener)(window, 'click', function () {
-    if (removeOffset > 0) {
-      updateRemoveOffset(0);
-    }
-  }, {
-    capture: true
-  });
-  var onRemoveTransitionEnd = function onRemoveTransitionEnd() {
-    if (removeOffset > 0) {
-      var _removeButtonRef$curr;
-      removeButtonRef === null || removeButtonRef === void 0 ? void 0 : (_removeButtonRef$curr = removeButtonRef.current) === null || _removeButtonRef$curr === void 0 ? void 0 : _removeButtonRef$curr.focus();
-    } else {
-      disabledRef.current = true;
-    }
-  };
-  var onRemoveActivateClick = function onRemoveActivateClick(e) {
-    e.stopPropagation();
-    if (!removeButtonRef.current) {
-      return;
-    }
-    var offsetWidth = removeButtonRef.current.offsetWidth;
-    disabledRef.current = false;
-    updateRemoveOffset(offsetWidth);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRemovable__content",
-    style: {
-      transform: "translateX(-".concat(removeOffset !== null && removeOffset !== void 0 ? removeOffset : 0, "px)")
-    },
-    onTransitionEnd: onRemoveTransitionEnd
-  }, /*#__PURE__*/React.createElement(_IconButton.IconButton, {
-    hasActive: false,
-    hasHover: false,
-    "aria-label": removePlaceholderString,
-    className: (0, _vkjs.classNames)("vkuiRemovable__action", "vkuiRemovable__toggle"),
-    onClick: onRemoveActivateClick,
-    disabled: removeOffset > 0
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "vkuiRemovable__toggle-in",
-    role: "presentation"
-  })), children, /*#__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
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "vkuiRemovable__remove-in"
-  }, removePlaceholder)));
-};
-/**
- * @see https://vkcom.github.io/VKUI/#/Removable
- */
-var Removable = function Removable(_ref2) {
-  var getRootRef = _ref2.getRootRef,
-    children = _ref2.children,
-    _ref2$onRemove = _ref2.onRemove,
-    onRemove = _ref2$onRemove === void 0 ? _vkjs.noop : _ref2$onRemove,
-    _ref2$removePlacehold = _ref2.removePlaceholder,
-    removePlaceholder = _ref2$removePlacehold === void 0 ? 'Удалить' : _ref2$removePlacehold,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? 'center' : _ref2$align,
-    className = _ref2.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var ref = (0, _useExternRef.useExternRef)(getRootRef);
-  var onRemoveClick = function onRemoveClick(e) {
-    e.preventDefault();
-    onRemove(e);
-  };
-  var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    ref: ref,
-    className: (0, _vkjs.classNames)("vkuiRemovable", platform === _platform.Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], className)
-  }), platform !== _platform.Platform.IOS && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRemovable__content"
-  }, children, /*#__PURE__*/React.createElement(_IconButton.IconButton, {
-    activeMode: "opacity",
-    hoverMode: "opacity",
-    className: "vkuiRemovable__action",
-    onClick: onRemoveClick,
-    "aria-label": removePlaceholderString
-  }, /*#__PURE__*/React.createElement(_icons.Icon24Cancel, {
-    role: "presentation"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "vkuiRemovable__offset",
-    "aria-hidden": true
-  })), platform === _platform.Platform.IOS && /*#__PURE__*/React.createElement(RemovableIos, {
-    onRemove: onRemoveClick,
-    removePlaceholder: removePlaceholder,
-    removePlaceholderString: removePlaceholderString
-  }, children));
+ */ var RemovableIos = function(param) {
+    var onRemove = param.onRemove, removePlaceholder = param.removePlaceholder, removePlaceholderString = param.removePlaceholderString, children = param.children;
+    var window = (0, _dom.useDOM)().window;
+    var removeButtonRef = _react.useRef(null);
+    var disabledRef = _react.useRef(true);
+    var _React_useState = _slicedToArray(_react.useState(0), 2), removeOffset = _React_useState[0], updateRemoveOffset = _React_useState[1];
+    (0, _useGlobalEventListener.useGlobalEventListener)(window, "click", function() {
+        if (removeOffset > 0) {
+            updateRemoveOffset(0);
+        }
+    }, {
+        capture: true
+    });
+    var onRemoveTransitionEnd = function() {
+        if (removeOffset > 0) {
+            var _removeButtonRef_current;
+            removeButtonRef === null || removeButtonRef === void 0 ? void 0 : (_removeButtonRef_current = removeButtonRef.current) === null || _removeButtonRef_current === void 0 ? void 0 : _removeButtonRef_current.focus();
+        } else {
+            disabledRef.current = true;
+        }
+    };
+    var onRemoveActivateClick = function(e) {
+        e.stopPropagation();
+        if (!removeButtonRef.current) {
+            return;
+        }
+        var offsetWidth = removeButtonRef.current.offsetWidth;
+        disabledRef.current = false;
+        updateRemoveOffset(offsetWidth);
+    };
+    return /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiRemovable__content", "vkuiInternalRemovable__content"),
+        style: {
+            transform: "translateX(-".concat(removeOffset !== null && removeOffset !== void 0 ? removeOffset : 0, "px)")
+        },
+        onTransitionEnd: onRemoveTransitionEnd
+    }, /*#__PURE__*/ _react.createElement(_iconButton.IconButton, {
+        hasActive: false,
+        hasHover: false,
+        "aria-label": removePlaceholderString,
+        className: (0, _vkjs.classNames)("vkuiRemovable__action", "vkuiRemovable__toggle"),
+        onClick: onRemoveActivateClick,
+        disabled: removeOffset > 0
+    }, /*#__PURE__*/ _react.createElement("i", {
+        className: "vkuiRemovable__toggle-in",
+        role: "presentation"
+    })), children, /*#__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
+    }, /*#__PURE__*/ _react.createElement("span", {
+        className: "vkuiRemovable__remove-in"
+    }, removePlaceholder)));
 };
-exports.Removable = Removable;
-var styles = {
-  "Removable--align-start": "vkuiRemovable--align-start",
-  "Removable--align-center": "vkuiRemovable--align-center"
+var Removable = function(_param) {
+    var getRootRef = _param.getRootRef, children = _param.children, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "getRootRef",
+        "children",
+        "onRemove",
+        "removePlaceholder",
+        "align",
+        "className"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    var ref = (0, _useExternRef.useExternRef)(getRootRef);
+    var onRemoveClick = function(e) {
+        e.preventDefault();
+        onRemove(e);
+    };
+    var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        ref: ref,
+        className: (0, _vkjs.classNames)(platform === _platform.Platform.IOS && "vkuiRemovable--ios", align === "start" && "vkuiRemovable--align-start", className)
+    }), platform !== _platform.Platform.IOS && /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiRemovable__content", "vkuiInternalRemovable__content")
+    }, children, /*#__PURE__*/ _react.createElement(_iconButton.IconButton, {
+        activeMode: "opacity",
+        hoverMode: "opacity",
+        className: "vkuiRemovable__action",
+        onClick: onRemoveClick,
+        "aria-label": removePlaceholderString
+    }, /*#__PURE__*/ _react.createElement(_icons.Icon24Cancel, {
+        role: "presentation"
+    })), /*#__PURE__*/ _react.createElement("span", {
+        className: "vkuiRemovable__offset",
+        "aria-hidden": true
+    })), platform === _platform.Platform.IOS && /*#__PURE__*/ _react.createElement(RemovableIos, {
+        onRemove: onRemoveClick,
+        removePlaceholder: removePlaceholder,
+        removePlaceholderString: removePlaceholderString
+    }, children));
 };
+
 //# sourceMappingURL=Removable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Removable.js","names":["RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","useDOM","window","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","classNames","Removable","getRootRef","noop","align","className","restProps","platform","usePlatform","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","styles"],"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\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={styles['Removable__content']}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\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      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        styles['Removable'],\n        platform === Platform.IOS && styles['Removable--ios'],\n        styles[`Removable--align-${align}`],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={styles['Removable__content']}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"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 { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\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        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\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      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["Removable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","useDOM","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","classNames","style","transform","onTransitionEnd","IconButton","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Tappable","Component","getRootRef","noop","align","restProps","platform","usePlatform","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","activeMode","hoverMode","Icon24Cancel"],"mappings":"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"}

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

@@ -1,76 +1,75 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "RichCell", {
+    enumerable: true,
+    get: function() {
+        return RichCell;
+    }
 });
-exports.RichCell = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var React = _interopRequireWildcard(require("react"));
+var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _adaptivity = require("../../lib/adaptivity");
-var _Tappable = require("../Tappable/Tappable");
-var _Subhead = require("../Typography/Subhead/Subhead");
-var _RichCellIcon = require("./RichCellIcon/RichCellIcon");
-var _excluded = ["subhead", "children", "text", "caption", "before", "after", "afterCaption", "bottom", "actions", "multiline", "className"];
-var sizeYClassNames = (0, _defineProperty2.default)({
-  none: "vkuiRichCell--sizeY-none"
+var _tappable = require("../Tappable/Tappable");
+var _subhead = require("../Typography/Subhead/Subhead");
+var _richCellIcon = require("./RichCellIcon/RichCellIcon");
+var sizeYClassNames = _defineProperty({
+    none: "vkuiRichCell--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiRichCell--sizeY-compact");
-/**
- * @see https://vkcom.github.io/VKUI/#/RichCell
- */
-var RichCell = function RichCell(_ref) {
-  var subhead = _ref.subhead,
-    children = _ref.children,
-    text = _ref.text,
-    caption = _ref.caption,
-    before = _ref.before,
-    after = _ref.after,
-    afterCaption = _ref.afterCaption,
-    bottom = _ref.bottom,
-    actions = _ref.actions,
-    multiline = _ref.multiline,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", sizeY !== _adaptivity.SizeType.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)));
+var RichCell = function(_param) {
+    var subhead = _param.subhead, children = _param.children, text = _param.text, caption = _param.caption, before = _param.before, after = _param.after, afterCaption = _param.afterCaption, bottom = _param.bottom, actions = _param.actions, multiline = _param.multiline, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "subhead",
+        "children",
+        "text",
+        "caption",
+        "before",
+        "after",
+        "afterCaption",
+        "bottom",
+        "actions",
+        "multiline",
+        "className"
+    ]);
+    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    return /*#__PURE__*/ _react.createElement(_tappable.Tappable, _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", sizeY !== _adaptivity.SizeType.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)));
 };
-exports.RichCell = RichCell;
-RichCell.Icon = _RichCellIcon.RichCellIcon;
+RichCell.Icon = _richCellIcon.RichCellIcon;
+
 //# sourceMappingURL=RichCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichCell.js","names":["sizeYClassNames","none","SizeType","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","useAdaptivity","sizeY","classNames","REGULAR","Icon","RichCellIcon"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\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  [SizeType.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 !== SizeType.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"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA2D;AAG3D,IAAMA,eAAe;EACnBC,IAAI;AAAgC,GACnCC,oBAAQ,CAACC,OAAO,gCAClB;AAoDD;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,kBAAQ,6BACHF,SAAS;IACb,SAAS,EAAE,IAAAG,gBAAU,kBAEnB,CAACL,SAAS,iCAAqC,EAC/CI,KAAK,KAAKhB,oBAAQ,CAACkB,OAAO,IAAIpB,eAAe,CAACkB,KAAK,CAAC,EACpDH,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,gBAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBAAI;IAAK,SAAS;EAAqC,GAAEA,KAAK,CAAO,EAC1EC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAAEA,YAAY,CACjE,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBAAI;IAAK,SAAS;EAA8B,GAAEA,OAAO,CAAO,CACpE,CACG;AAEf,CAAC;AAAC;AAEFT,QAAQ,CAACiB,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 { SizeType } from '../../lib/adaptivity';\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  [SizeType.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 !== SizeType.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","SizeType","COMPACT","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","useAdaptivity","sizeY","Tappable","classNames","REGULAR","div","Subhead","Component","Icon","RichCellIcon"],"mappings":";;;;+BAmEaA;;;eAAAA;;;;;;;;2DAnEU;oBACI;6BACG;0BACL;wBACe;uBAChB;4BACK;AAG7B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAwDZ,IAAMJ,WAAW,iBAaH;QAZnBK,iBAAAA,SACAC,kBAAAA,UACAC,cAAAA,MACAC,iBAAAA,SACAC,gBAAAA,QACAC,eAAAA,OACAC,sBAAAA,cACAC,gBAAAA,QACAC,iBAAAA,SACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ,uCACHH;QACJD,WAAWK,IAAAA,gBAAU,kBAEnB,CAACN,4CACDI,UAAUf,oBAAQ,CAACkB,OAAO,IAAIpB,eAAe,CAACiB,MAAM,EACpDH;QAGDN,wBAAU,qBAACa;QAAIP,SAAS;OAA+BN,uBACxD,qBAACa;QAAIP,SAAS;qBACZ,qBAACO;QAAIP,SAAS;qBACZ,qBAACO;QAAIP,SAAS;OACXV,yBACC,qBAACkB,gBAAO;QAACC,WAAU;QAAMT,SAAS;OAC/BV,wBAGL,qBAACiB;QAAIP,SAAS;OAAiCT,WAC9CC,sBAAQ,qBAACe;QAAIP,SAAS;OAA6BR,OACnDC,yBACC,qBAACe,gBAAO;QAACC,WAAU;QAAMT,SAAS;OAC/BP,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,qBAACW;QAAIP,SAAS;OACXL,uBAAS,qBAACY;QAAIP,SAAS;OAAuCL,QAC9DC,8BACC,qBAACW;QAAIP,SAAS;OAAsCJ,iBAK3DC,wBAAU,qBAACU;QAAIP,SAAS;OAA+BH,SACvDC,yBAAW,qBAACS;QAAIP,SAAS;OAAgCF;AAIlE;AAEAb,SAASyB,IAAI,GAAGC,0BAAY"}

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

@@ -1,23 +1,27 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "RichCellIcon", {
+    enumerable: true,
+    get: function() {
+        return RichCellIcon;
+    }
 });
-exports.RichCellIcon = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _excluded = ["children", "className"];
-var RichCellIcon = function RichCellIcon(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiRichCellIcon", className)
-  }), children);
+var RichCellIcon = function(_param) {
+    var children = _param.children, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "children",
+        "className"
+    ]);
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiRichCellIcon", className)
+    }), children);
 };
-exports.RichCellIcon = RichCellIcon;
+
 //# sourceMappingURL=RichCellIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichCellIcon.js","names":["RichCellIcon","children","className","restProps","classNames"],"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAA6C;AAGtC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAImB;EAAA,IAH1CC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,sDAASA,SAAS;IAAE,SAAS,EAAE,IAAAC,gBAAU,sBAAyBF,SAAS;EAAE,IAC1ED,QAAQ,CACL;AAEV,CAAC;AAAC"}
+{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["RichCellIcon","children","className","restProps","div","classNames"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;;;2DAJU;oBACI;AAGpB,IAAMA,eAAe,iBAIgB;QAH1CC,kBAAAA,UACAC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,4CAAQD;QAAWD,WAAWG,IAAAA,gBAAU,sBAAyBH;QAC/DD;AAGP"}