@vkontakte/vkui 4.20.0 → 4.22.1

package/dist/cjs/components/ModalRoot/useModalManager.js

@@ -0,0 +1,213 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modalTransitionReducer = modalTransitionReducer;
+exports.useModalManager = useModalManager;
+exports.withModalManager = withModalManager;
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _types = require("./types");
+
+var _warnOnce = require("../../lib/warnOnce");
+
+var _getNavId = require("../../lib/getNavId");
+
+var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+
+var _utils = require("../../lib/utils");
+
+function getModals(children) {
+  return React.Children.toArray(children);
+}
+
+var warn = (0, _warnOnce.warnOnce)('ModalRoot');
+
+function modalTransitionReducer(state, action) {
+  if (action.type === 'setActive' && action.id !== state.activeModal) {
+    var nextModal = action.id; // preserve exiting modal if switching mid-transition
+
+    var prevModal = state.exitingModal || state.activeModal;
+    var history = (0, _toConsumableArray2.default)(state.history);
+    var isBack = history.includes(nextModal);
+
+    if (nextModal === null) {
+      history = [];
+    } else if (isBack) {
+      history = history.splice(0, history.indexOf(nextModal) + 1);
+    } else {
+      history.push(nextModal);
+    }
+
+    return {
+      activeModal: nextModal,
+      // not entering yet
+      enteringModal: null,
+      exitingModal: prevModal,
+      history: history,
+      isBack: isBack
+    };
+  }
+
+  if (action.type === 'entered' && action.id === state.enteringModal) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+      enteringModal: null
+    });
+  }
+
+  if (action.type === 'exited' && action.id === state.exitingModal) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+      exitingModal: null
+    });
+  }
+
+  if (action.type === 'inited' && action.id === state.activeModal) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+      enteringModal: action.id
+    });
+  }
+
+  return state;
+}
+/**
+ * Реализует переход модалок. При смене activeModal m1 -> m2:
+ * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода
+ * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода
+ * одновременный переход между ModalPage:
+ *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2
+ *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации
+ * ИЛИ дожидаемся скрытия ModalCard
+ *   3b. activeModal: m2, exitingModal: null, enteringModal: m2
+ *   4b. enteringModal переходит в null после завершения анимации
+ * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
+ */
+
+
+function useModalManager(activeModal, children, onClose) {
+  var initModal = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _utils.noop;
+  var modalsState = React.useRef({}).current;
+  getModals(children).forEach(function (Modal) {
+    var modalProps = Modal.props;
+    var id = (0, _getNavId.getNavId)(modalProps, warn);
+    var state = modalsState[id] || {
+      id: id
+    };
+    state.onClose = Modal.props.onClose;
+    state.dynamicContentHeight = !!modalProps.dynamicContentHeight; // ModalPage props
+
+    if (typeof modalProps.settlingHeight === 'number') {
+      state.settlingHeight = modalProps.settlingHeight;
+    }
+
+    modalsState[state.id] = state;
+  });
+  var isMissing = activeModal && !modalsState[activeModal];
+  var safeActiveModal = isMissing ? null : activeModal;
+
+  var _React$useReducer = React.useReducer(modalTransitionReducer, {
+    activeModal: safeActiveModal,
+    enteringModal: null,
+    exitingModal: null,
+    history: safeActiveModal ? [safeActiveModal] : [],
+    isBack: false
+  }),
+      _React$useReducer2 = (0, _slicedToArray2.default)(_React$useReducer, 2),
+      transitionState = _React$useReducer2[0],
+      dispatchTransition = _React$useReducer2[1]; // Map props to state, render activeModal for init
+
+
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
+    // ignore non-existent activeModal
+    if (process.env.NODE_ENV === 'development' && isMissing) {
+      warn("Can't transition - modal ".concat(activeModal, " not found"));
+    }
+
+    dispatchTransition({
+      type: 'setActive',
+      id: safeActiveModal
+    });
+  }, [activeModal]); // Init activeModal & set enteringModal
+
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
+    if (transitionState.activeModal) {
+      initModal(modalsState[transitionState.activeModal]);
+      dispatchTransition({
+        type: 'inited',
+        id: transitionState.activeModal
+      });
+    }
+  }, [transitionState.activeModal]);
+
+  var isCard = function isCard(id) {
+    var _modalsState$id;
+
+    return ((_modalsState$id = modalsState[id]) === null || _modalsState$id === void 0 ? void 0 : _modalsState$id.type) === _types.ModalType.CARD;
+  };
+
+  var onEnter = React.useCallback(function (id) {
+    return dispatchTransition({
+      type: 'entered',
+      id: id
+    });
+  }, []);
+  var onExit = React.useCallback(function (id) {
+    return dispatchTransition({
+      type: 'exited',
+      id: id
+    });
+  }, []);
+  var delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));
+  var getModalState = React.useCallback(function (id) {
+    return modalsState[id];
+  }, []);
+
+  function closeActiveModal() {
+    var modalState = modalsState[transitionState.activeModal];
+
+    if (modalState) {
+      if ((0, _utils.isFunction)(modalState.onClose)) {
+        modalState.onClose();
+      } else if ((0, _utils.isFunction)(onClose)) {
+        onClose(modalState.id);
+      } else if (process.env.NODE_ENV === 'development') {
+        warn('onClose is undefined');
+      }
+    }
+  }
+
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    onEnter: onEnter,
+    onExit: onExit
+  }, transitionState), {}, {
+    delayEnter: delayEnter,
+    getModalState: getModalState,
+    closeActiveModal: closeActiveModal
+  });
+}
+
+function withModalManager() {
+  var initModal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _utils.noop;
+  return function (Wrapped) {
+    return function WithModalManager(props) {
+      var transitionManager = useModalManager(props.activeModal, props.children, props.onClose, initModal);
+      return (0, _jsxRuntime.createScopedElement)(Wrapped, (0, _extends2.default)({}, props, transitionManager));
+    };
+  };
+}
+//# sourceMappingURL=useModalManager.js.map

package/dist/cjs/components/ModalRoot/useModalManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"names":["getModals","children","React","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","includes","splice","indexOf","push","enteringModal","useModalManager","onClose","initModal","noop","modalsState","useRef","current","forEach","Modal","modalProps","props","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","transitionState","dispatchTransition","process","env","NODE_ENV","isCard","ModalType","CARD","onEnter","useCallback","onExit","delayEnter","Boolean","getModalState","closeActiveModal","modalState","withModalManager","Wrapped","WithModalManager","transitionManager"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { noop, isFunction } from '../../lib/utils';\n\ninterface ModalTransitionState {\n  activeModal?: string;\n  enteringModal?: string;\n  exitingModal?: string;\n\n  history?: string[];\n  isBack?: boolean;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n  onEnter: (id: string) => void;\n  onExit: (id: string) => void;\n  getModalState: (id: string) => ModalsStateEntry;\n  closeActiveModal: VoidFunction;\n  delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode | React.ReactNode[]) {\n  return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce('ModalRoot');\n\nexport function modalTransitionReducer(\n  state: ModalTransitionState,\n  action: { type: 'setActive' | 'entered' | 'exited' | 'inited'; id: string },\n): ModalTransitionState {\n  if (action.type === 'setActive' && action.id !== state.activeModal) {\n    const nextModal = action.id;\n    // preserve exiting modal if switching mid-transition\n    const prevModal = state.exitingModal || state.activeModal;\n    let history = [...state.history];\n    const isBack = history.includes(nextModal);\n\n    if (nextModal === null) {\n      history = [];\n    } else if (isBack) {\n      history = history.splice(0, history.indexOf(nextModal) + 1);\n    } else {\n      history.push(nextModal);\n    }\n\n    return {\n      activeModal: nextModal,\n      // not entering yet\n      enteringModal: null,\n      exitingModal: prevModal,\n      history,\n      isBack,\n    };\n  }\n  if (action.type === 'entered' && action.id === state.enteringModal) {\n    return { ...state, enteringModal: null };\n  }\n  if (action.type === 'exited' && action.id === state.exitingModal) {\n    return { ...state, exitingModal: null };\n  }\n  if (action.type === 'inited' && action.id === state.activeModal) {\n    return { ...state, enteringModal: action.id };\n  }\n  return state;\n}\n\n/**\n * Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n *   3b. activeModal: m2, exitingModal: null, enteringModal: m2\n *   4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n  activeModal: string,\n  children: React.ReactNode | React.ReactNode[],\n  onClose: (id: string) => void,\n  initModal: (state: ModalsStateEntry) => void = noop,\n): ModalTransitionProps {\n  const modalsState = React.useRef<ModalsState>({}).current;\n  getModals(children).forEach((Modal) => {\n    const modalProps = Modal.props;\n    const id = getNavId(modalProps, warn);\n    const state: ModalsStateEntry = modalsState[id] || { id };\n\n    state.onClose = Modal.props.onClose;\n    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n    // ModalPage props\n    if (typeof modalProps.settlingHeight === 'number') {\n      state.settlingHeight = modalProps.settlingHeight;\n    }\n\n    modalsState[state.id] = state;\n  });\n\n  const isMissing = activeModal && !modalsState[activeModal];\n  const safeActiveModal = isMissing ? null : activeModal;\n  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {\n    activeModal: safeActiveModal,\n    enteringModal: null,\n    exitingModal: null,\n    history: safeActiveModal ? [safeActiveModal] : [],\n    isBack: false,\n  });\n\n  // Map props to state, render activeModal for init\n  useIsomorphicLayoutEffect(() => {\n    // ignore non-existent activeModal\n    if (process.env.NODE_ENV === 'development' && isMissing) {\n      warn(`Can't transition - modal ${activeModal} not found`);\n    }\n    dispatchTransition({ type: 'setActive', id: safeActiveModal });\n  }, [activeModal]);\n\n  // Init activeModal & set enteringModal\n  useIsomorphicLayoutEffect(() => {\n    if (transitionState.activeModal) {\n      initModal(modalsState[transitionState.activeModal]);\n      dispatchTransition({ type: 'inited', id: transitionState.activeModal });\n    }\n  }, [transitionState.activeModal]);\n\n  const isCard = (id: string) => modalsState[id]?.type === ModalType.CARD;\n  const onEnter = React.useCallback((id: string) => dispatchTransition({ type: 'entered', id }), []);\n  const onExit = React.useCallback((id: string) => dispatchTransition({ type: 'exited', id }), []);\n  const delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));\n  const getModalState = React.useCallback((id: string) => modalsState[id], []);\n\n  function closeActiveModal() {\n    const modalState = modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onClose)) {\n        modalState.onClose();\n      } else if (isFunction(onClose)) {\n        onClose(modalState.id);\n      } else if (process.env.NODE_ENV === 'development') {\n        warn('onClose is undefined');\n      }\n    }\n  }\n\n  return {\n    onEnter,\n    onExit,\n    ...transitionState,\n    delayEnter,\n    getModalState,\n    closeActiveModal,\n  };\n}\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n  return function<Props extends ModalTransitionProps>(\n    Wrapped: React.ComponentType<Props>,\n  ): React.FC<Omit<Props, keyof ModalTransitionProps> & { activeModal: string }> {\n    return function WithModalManager(props) {\n      const transitionManager = useModalManager(\n        props.activeModal,\n        props.children,\n        (props as any).onClose,\n        initModal);\n      return <Wrapped {...props as any} {...transitionManager} />;\n    };\n  };\n}\n"],"file":"useModalManager.js"}

package/dist/cjs/components/NativeSelect/NativeSelect.js

@@ -23,7 +23,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _classNames2 = require("../../lib/classNames");
 
-var _icons = require("@vkontakte/icons");
+var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
 
 var _FormField = require("../FormField/FormField");
 
@@ -100,7 +100,7 @@ var NativeSelect = function NativeSelect(_ref) {
     style: style,
     getRootRef: getRootRef,
     disabled: disabled,
-    after: sizeY === _withAdaptivity.SizeType.COMPACT ? (0, _jsxRuntime.createScopedElement)(_icons.Icon20Dropdown, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Dropdown, null)
+    after: (0, _jsxRuntime.createScopedElement)(_DropdownIcon.DropdownIcon, null)
   }, (0, _jsxRuntime.createScopedElement)("select", (0, _extends2.default)({}, restProps, {
     disabled: disabled,
     vkuiClass: "Select__el",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","React","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","VKCOM","SizeType","COMPACT","Text","Headline"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport '../Select/Select.css';\n\nexport interface NativeSelectProps extends\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  HasRef<HTMLSelectElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasAlign,\n  AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelect: React.FC<NativeSelectProps> = ({\n  style, defaultValue = '', align, placeholder, children,\n  className, getRef, getRootRef, disabled, sizeX, sizeY, multiline,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [notSelected, setNotSelected] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setNotSelected(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(getClassName('Select', platform), {\n        ['Select--not-selected']: notSelected,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n        'Select--multiline': multiline,\n      })}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{title}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nexport default withAdaptivity(NativeSelect, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","React","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","VKCOM","SizeType","COMPACT","Text","Headline"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport '../Select/Select.css';\n\nexport interface NativeSelectProps extends\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  HasRef<HTMLSelectElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasAlign,\n  AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelect: React.FC<NativeSelectProps> = ({\n  style, defaultValue = '', align, placeholder, children,\n  className, getRef, getRootRef, disabled, sizeX, sizeY, multiline,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [notSelected, setNotSelected] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setNotSelected(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(getClassName('Select', platform), {\n        ['Select--not-selected']: notSelected,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n        'Select--multiline': multiline,\n      })}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{title}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nexport default withAdaptivity(NativeSelect, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasRootRef } from '../../types';
 import './Removable.css';
 export interface RemovableProps {
     /**
@@ -10,7 +11,7 @@ export interface RemovableProps {
      */
     onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {
+interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
     /**
      * Расположение кнопки удаления.
      */

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

@@ -9,20 +9,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Removable = void 0;
 
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _classNames = require("../../lib/classNames");
 
 var _utils = require("../../lib/utils");
 
+var _useExternRef = require("../../hooks/useExternRef");
+
 var _usePlatform = require("../../hooks/usePlatform");
 
 var _getClassName = require("../../helpers/getClassName");
@@ -41,111 +43,118 @@ var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 
 var _Tappable = _interopRequireDefault(require("../Tappable/Tappable"));
 
-var _excluded = ["children", "onRemove", "removePlaceholder", "align"];
+var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align"];
 
-var Removable = function Removable(_ref) {
-  var children = _ref.children,
-      onRemove = _ref.onRemove,
-      _ref$removePlaceholde = _ref.removePlaceholder,
-      removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
-      _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'center' : _ref$align,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      sizeY = _useAdaptivity.sizeY;
+var RemovableIos = function RemovableIos(_ref) {
+  var onRemoveClick = _ref.onRemoveClick,
+      removePlaceholder = _ref.removePlaceholder,
+      removePlaceholderString = _ref.removePlaceholderString,
+      children = _ref.children;
 
   var _useDOM = (0, _dom.useDOM)(),
       document = _useDOM.document;
 
   var removeButtonRef = React.useRef(null);
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(0),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isRemoveActivated = _React$useState2[0],
-      setRemoveActivated = _React$useState2[1];
-
-  var _React$useState3 = React.useState(0),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      removeOffset = _React$useState4[0],
-      updateRemoveOffset = _React$useState4[1];
+      removeOffset = _React$useState2[0],
+      updateRemoveOffset = _React$useState2[1];
 
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', isRemoveActivated && function () {
-    setRemoveActivated(false);
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', removeOffset > 0 && function () {
     updateRemoveOffset(0);
   });
 
   var onRemoveTransitionEnd = function onRemoveTransitionEnd() {
-    if (isRemoveActivated) {
+    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();
     }
   };
 
-  var onRemoveActivateClick = function onRemoveActivateClick(e) {
-    e.nativeEvent.stopPropagation();
-    e.preventDefault();
-    setRemoveActivated(true);
-  };
+  var onRemoveActivateClick = function onRemoveActivateClick() {
+    var _removeButtonRef$curr2 = removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current,
+        _removeButtonRef$curr3 = _removeButtonRef$curr2.offsetWidth,
+        offsetWidth = _removeButtonRef$curr3 === void 0 ? 0 : _removeButtonRef$curr3;
 
-  var onRemoveClick = function onRemoveClick(e) {
-    e.nativeEvent.stopImmediatePropagation();
-    e.preventDefault();
-    onRemove && onRemove(e);
+    updateRemoveOffset(offsetWidth);
   };
 
-  React.useEffect(function () {
-    var removeButton = removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current;
-
-    if (isRemoveActivated && removeButton) {
-      updateRemoveOffset(removeButton.offsetWidth);
-    }
-  }, [isRemoveActivated]);
-  var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
-  return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Removable', platform), "Removable--".concat(align), "Removable--sizeY-".concat(sizeY))
-  }), (platform === _platform.ANDROID || platform === _platform.VKCOM) && (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "Removable__content"
-  }, children, (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
-    "aria-label": removePlaceholderString,
-    vkuiClass: "Removable__action",
-    onClick: onRemoveClick
-  }, (0, _jsxRuntime.createScopedElement)(_icons.Icon24Cancel, {
-    role: "presentation"
-  }))), platform === _platform.IOS && (0, _jsxRuntime.createScopedElement)(React.Fragment, null, (0, _jsxRuntime.createScopedElement)("div", {
+  return (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Removable__content",
     style: {
-      transform: "translateX(-".concat(removeOffset, "px)")
-    }
+      transform: "translateX(-".concat(removeOffset !== null && removeOffset !== void 0 ? removeOffset : 0, "px)")
+    },
+    onTransitionEnd: onRemoveTransitionEnd
   }, (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
     hasActive: false,
     hasHover: false,
     "aria-label": removePlaceholderString,
     vkuiClass: "Removable__action Removable__toggle",
-    onClick: onRemoveActivateClick
+    onClick: onRemoveActivateClick,
+    disabled: removeOffset > 0
   }, (0, _jsxRuntime.createScopedElement)("i", {
     vkuiClass: "Removable__toggle-in",
     role: "presentation"
   })), children, (0, _jsxRuntime.createScopedElement)("span", {
     vkuiClass: "Removable__offset",
     "aria-hidden": "true"
-  })), (0, _jsxRuntime.createScopedElement)(_Tappable.default, {
+  }), (0, _jsxRuntime.createScopedElement)(_Tappable.default, {
     Component: "button",
     hasActive: false,
     hasHover: false,
-    disabled: !isRemoveActivated,
+    disabled: removeOffset === 0,
     getRootRef: removeButtonRef,
     vkuiClass: "Removable__remove",
     onClick: onRemoveClick,
-    onTransitionEnd: onRemoveTransitionEnd,
-    style: {
-      transform: "translateX(-".concat(removeOffset, "px)")
-    }
+    onTransitionEnd: onRemoveTransitionEnd
   }, (0, _jsxRuntime.createScopedElement)("span", {
     vkuiClass: "Removable__remove-in"
-  }, removePlaceholder))));
+  }, removePlaceholder)));
+};
+
+var Removable = function Removable(_ref2) {
+  var getRootRef = _ref2.getRootRef,
+      children = _ref2.children,
+      _ref2$onRemove = _ref2.onRemove,
+      onRemove = _ref2$onRemove === void 0 ? _utils.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,
+      restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var platform = (0, _usePlatform.usePlatform)();
+
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var ref = (0, _useExternRef.useExternRef)(getRootRef);
+
+  var onRemoveClick = function onRemoveClick(e) {
+    e.preventDefault();
+    onRemove(e);
+  };
+
+  var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
+  return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
+    ref: ref,
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Removable', platform), "Removable--".concat(align), "Removable--sizeY-".concat(sizeY))
+  }), (platform === _platform.ANDROID || platform === _platform.VKCOM) && (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Removable__content"
+  }, children, (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
+    activeMode: "opacity",
+    hoverMode: "opacity",
+    vkuiClass: "Removable__action",
+    onClick: onRemoveClick,
+    "aria-label": removePlaceholderString
+  }, (0, _jsxRuntime.createScopedElement)(_icons.Icon24Cancel, {
+    role: "presentation"
+  }))), platform === _platform.IOS && (0, _jsxRuntime.createScopedElement)(RemovableIos, {
+    onRemoveClick: onRemoveClick,
+    removePlaceholder: removePlaceholder,
+    removePlaceholderString: removePlaceholderString
+  }, children));
 };
 
 exports.Removable = Removable;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"names":["Removable","children","onRemove","removePlaceholder","align","restProps","platform","sizeY","document","removeButtonRef","React","useRef","useState","isRemoveActivated","setRemoveActivated","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","nativeEvent","stopPropagation","preventDefault","onRemoveClick","stopImmediatePropagation","useEffect","removeButton","offsetWidth","removePlaceholderString","ANDROID","VKCOM","IOS","transform"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport IconButton from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport Tappable from '../Tappable/Tappable';\nimport './Removable.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { document } = useDOM();\n\n  const removeButtonRef = React.useRef(null);\n\n  const [isRemoveActivated, setRemoveActivated] = React.useState(false);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(document, 'click', isRemoveActivated && (() => {\n    setRemoveActivated(false);\n    updateRemoveOffset(0);\n  }));\n\n  const onRemoveTransitionEnd = () => {\n    if (isRemoveActivated) {\n      removeButtonRef?.current?.focus();\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.nativeEvent.stopPropagation();\n    e.preventDefault();\n    setRemoveActivated(true);\n  };\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.nativeEvent.stopImmediatePropagation();\n    e.preventDefault();\n    onRemove && onRemove(e);\n  };\n\n  React.useEffect(() => {\n    const removeButton = removeButtonRef?.current;\n\n    if (isRemoveActivated && removeButton) {\n      updateRemoveOffset(removeButton.offsetWidth);\n    }\n  }, [isRemoveActivated]);\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName('Removable', platform),\n        `Removable--${align}`,\n        `Removable--sizeY-${sizeY}`,\n      )}\n    >\n      {(platform === ANDROID || platform === VKCOM) && (\n        <div vkuiClass=\"Removable__content\">\n          {children}\n\n          <IconButton\n            aria-label={removePlaceholderString}\n            vkuiClass=\"Removable__action\"\n            onClick={onRemoveClick}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n        </div>\n      )}\n\n      {platform === IOS && (\n        <React.Fragment>\n          <div vkuiClass=\"Removable__content\" style={{ transform: `translateX(-${removeOffset}px)` }}>\n            <IconButton\n              hasActive={false}\n              hasHover={false}\n              aria-label={removePlaceholderString}\n              vkuiClass=\"Removable__action Removable__toggle\"\n              onClick={onRemoveActivateClick}\n            >\n              <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n            </IconButton>\n            {children}\n\n            <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n          </div>\n\n          <Tappable\n            Component=\"button\"\n            hasActive={false}\n            hasHover={false}\n            disabled={!isRemoveActivated}\n            getRootRef={removeButtonRef}\n            vkuiClass=\"Removable__remove\"\n            onClick={onRemoveClick}\n            onTransitionEnd={onRemoveTransitionEnd}\n            style={{ transform: `translateX(-${removeOffset}px)` }}\n          >\n            <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n          </Tappable>\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"file":"Removable.js"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"names":["RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","document","removeButtonRef","React","useRef","useState","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","offsetWidth","transform","Removable","getRootRef","onRemove","noop","align","restProps","platform","sizeY","ref","e","preventDefault","ANDROID","VKCOM","IOS"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAmBA,IAAMA,YAA4C,GAAG,SAA/CA,YAA+C,OAK/C;AAAA,MAJJC,aAII,QAJJA,aAII;AAAA,MAHJC,iBAGI,QAHJA,iBAGI;AAAA,MAFJC,uBAEI,QAFJA,uBAEI;AAAA,MADJC,QACI,QADJA,QACI;;AACJ,gBAAqB,kBAArB;AAAA,MAAQC,QAAR,WAAQA,QAAR;;AAEA,MAAMC,eAAe,GAAGC,KAAK,CAACC,MAAN,CAAa,IAAb,CAAxB;;AACA,wBAA2CD,KAAK,CAACE,QAAN,CAAe,CAAf,CAA3C;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,kBAArB;;AAEA,sDAAuBN,QAAvB,EAAiC,OAAjC,EAA0CK,YAAY,GAAG,CAAf,IAAqB,YAAM;AACnEC,IAAAA,kBAAkB,CAAC,CAAD,CAAlB;AACD,GAFD;;AAIA,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClC,QAAIF,YAAY,GAAG,CAAnB,EAAsB;AAAA;;AACpBJ,MAAAA,eAAe,SAAf,IAAAA,eAAe,WAAf,qCAAAA,eAAe,CAAEO,OAAjB,gFAA0BC,KAA1B;AACD;AACF,GAJD;;AAMA,MAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAClC,iCAA4BT,eAA5B,aAA4BA,eAA5B,uBAA4BA,eAAe,CAAEO,OAA7C;AAAA,wDAAQG,WAAR;AAAA,QAAQA,WAAR,uCAAsB,CAAtB;;AACAL,IAAAA,kBAAkB,CAACK,WAAD,CAAlB;AACD,GAHD;;AAKA,SACE;AACE,IAAA,SAAS,EAAC,oBADZ;AAEE,IAAA,KAAK,EAAE;AAAEC,MAAAA,SAAS,wBAAiBP,YAAjB,aAAiBA,YAAjB,cAAiBA,YAAjB,GAAiC,CAAjC;AAAX,KAFT;AAGE,IAAA,eAAe,EAAEE;AAHnB,KAKE,qCAAC,mBAAD;AACE,IAAA,SAAS,EAAE,KADb;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,kBAAYT,uBAHd;AAIE,IAAA,SAAS,EAAC,qCAJZ;AAKE,IAAA,OAAO,EAAEY,qBALX;AAME,IAAA,QAAQ,EAAEL,YAAY,GAAG;AAN3B,KAQE;AAAG,IAAA,SAAS,EAAC,sBAAb;AAAoC,IAAA,IAAI,EAAC;AAAzC,IARF,CALF,EAeGN,QAfH,EAiBE;AAAM,IAAA,SAAS,EAAC,mBAAhB;AAAoC,mBAAY;AAAhD,IAjBF,EAmBE,qCAAC,iBAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAE,KAFb;AAGE,IAAA,QAAQ,EAAE,KAHZ;AAIE,IAAA,QAAQ,EAAEM,YAAY,KAAK,CAJ7B;AAKE,IAAA,UAAU,EAAEJ,eALd;AAME,IAAA,SAAS,EAAC,mBANZ;AAOE,IAAA,OAAO,EAAEL,aAPX;AAQE,IAAA,eAAe,EAAEW;AARnB,KAUE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAwCV,iBAAxC,CAVF,CAnBF,CADF;AAkCD,CA5DD;;AAqEO,IAAMgB,SAAsC,GAAG,SAAzCA,SAAyC,QAO7B;AAAA,MANvBC,UAMuB,SANvBA,UAMuB;AAAA,MALvBf,QAKuB,SALvBA,QAKuB;AAAA,6BAJvBgB,QAIuB;AAAA,MAJvBA,QAIuB,+BAJZC,WAIY;AAAA,oCAHvBnB,iBAGuB;AAAA,MAHvBA,iBAGuB,sCAHH,SAGG;AAAA,0BAFvBoB,KAEuB;AAAA,MAFvBA,KAEuB,4BAFf,QAEe;AAAA,MADpBC,SACoB;AACvB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,MAAMC,GAAG,GAAG,gCAAaP,UAAb,CAAZ;;AAEA,MAAMlB,aAAa,GAAG,SAAhBA,aAAgB,CAAC0B,CAAD,EAAyB;AAC7CA,IAAAA,CAAC,CAACC,cAAF;AACAR,IAAAA,QAAQ,CAACO,CAAD,CAAR;AACD,GAHD;;AAKA,MAAMxB,uBAA+B,GAAG,iCAAqBD,iBAArB,CAAxC;AAEA,SACE,uEACMqB,SADN;AAEE,IAAA,GAAG,EAAEG,GAFP;AAGE,IAAA,SAAS,EAAE,4BACT,gCAAa,WAAb,EAA0BF,QAA1B,CADS,uBAEKF,KAFL,8BAGWG,KAHX;AAHb,MASG,CAACD,QAAQ,KAAKK,iBAAb,IAAwBL,QAAQ,KAAKM,eAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACG1B,QADH,EAGE,qCAAC,mBAAD;AACE,IAAA,UAAU,EAAC,SADb;AAEE,IAAA,SAAS,EAAC,SAFZ;AAGE,IAAA,SAAS,EAAC,mBAHZ;AAIE,IAAA,OAAO,EAAEH,aAJX;AAKE,kBAAYE;AALd,KAOE,qCAAC,mBAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAPF,CAHF,CAVJ,EAyBGqB,QAAQ,KAAKO,aAAb,IACC,qCAAC,YAAD;AACE,IAAA,aAAa,EAAE9B,aADjB;AAEE,IAAA,iBAAiB,EAAEC,iBAFrB;AAGE,IAAA,uBAAuB,EAAEC;AAH3B,KAKGC,QALH,CA1BJ,CADF;AAqCD,CAzDM","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames } from '../../lib/classNames';\nimport { getTitleFromChildren, noop } from '../../lib/utils';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport IconButton from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport Tappable from '../Tappable/Tappable';\nimport './Removable.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {\n  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n  removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n  onRemoveClick,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}) => {\n  const { document } = useDOM();\n\n  const removeButtonRef = React.useRef(null);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(document, 'click', removeOffset > 0 && (() => {\n    updateRemoveOffset(0);\n  }));\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    }\n  };\n\n  const onRemoveActivateClick = () => {\n    const { offsetWidth = 0 } = removeButtonRef?.current;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      vkuiClass=\"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        vkuiClass=\"Removable__action Removable__toggle\"\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={removeOffset === 0}\n        getRootRef={removeButtonRef}\n        vkuiClass=\"Removable__remove\"\n        onClick={onRemoveClick}\n        onTransitionEnd={onRemoveTransitionEnd}\n      >\n        <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\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      vkuiClass={classNames(\n        getClassName('Removable', platform),\n        `Removable--${align}`,\n        `Removable--sizeY-${sizeY}`,\n      )}\n    >\n      {(platform === ANDROID || platform === VKCOM) && (\n        <div vkuiClass=\"Removable__content\">\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            vkuiClass=\"Removable__action\"\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n        </div>\n      )}\n\n      {platform === IOS && (\n        <RemovableIos\n          onRemoveClick={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"file":"Removable.js"}

package/dist/cjs/components/SelectMimicry/SelectMimicry.js

@@ -17,7 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _classNames2 = require("../../lib/classNames");
 
-var _icons = require("@vkontakte/icons");
+var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
 
 var _FormField = require("../FormField/FormField");
 
@@ -60,7 +60,7 @@ var SelectMimicry = function SelectMimicry(_ref) {
     getRootRef: getRootRef,
     onClick: disabled ? null : onClick,
     disabled: disabled,
-    after: sizeY === _withAdaptivity.SizeType.COMPACT ? (0, _jsxRuntime.createScopedElement)(_icons.Icon20Dropdown, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Dropdown, null)
+    after: (0, _jsxRuntime.createScopedElement)(_DropdownIcon.DropdownIcon, null)
   }), (0, _jsxRuntime.createScopedElement)(TypographyComponent, {
     Component: "div",
     weight: "regular",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"names":["SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","sizeX","sizeY","restProps","platform","TypographyComponent","VKCOM","SizeType","COMPACT","Text","Headline","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAYA,IAAMA,aAA0D,GAAG,SAA7DA,aAA6D,OAYzC;AAAA;;AAAA,MAXxBC,QAWwB,QAXxBA,QAWwB;AAAA,MAVxBC,WAUwB,QAVxBA,WAUwB;AAAA,MATxBC,QASwB,QATxBA,QASwB;AAAA,MARxBC,KAQwB,QARxBA,KAQwB;AAAA,MAPxBC,UAOwB,QAPxBA,UAOwB;AAAA,MANxBC,SAMwB,QANxBA,SAMwB;AAAA,MALxBC,QAKwB,QALxBA,QAKwB;AAAA,MAJxBC,OAIwB,QAJxBA,OAIwB;AAAA,MAHxBC,KAGwB,QAHxBA,KAGwB;AAAA,MAFxBC,KAEwB,QAFxBA,KAEwB;AAAA,MADrBC,SACqB;AACxB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,mBAAmB,GAAGD,QAAQ,KAAKE,eAAb,IAAsBJ,KAAK,KAAKK,yBAASC,OAAzC,GAAmDC,aAAnD,GAA0DC,iBAAtF;AAEA,SACE,qCAAC,oBAAD,6BACMP,SADN;AAEE,IAAA,QAAQ,EAAEJ,QAAQ,GAAG,IAAH,GAAUN,QAF9B;AAGE,IAAA,SAAS,EAAE,6BAAW,gCAAa,QAAb,EAAuBW,QAAvB,CAAX,EAA6C,iBAA7C;AACT,8BAAwB,CAACT,QADhB;AAET,2BAAqBG;AAFZ,0EAGSF,KAHT,GAGmB,CAAC,CAACA,KAHrB,uEAIUK,KAJV,GAIoB,CAAC,CAACA,KAJtB,uEAKUC,KALV,GAKoB,CAAC,CAACA,KALtB,gBAHb;AAUE,IAAA,UAAU,EAAEL,UAVd;AAWE,IAAA,OAAO,EAAEE,QAAQ,GAAG,IAAH,GAAUC,OAX7B;AAYE,IAAA,QAAQ,EAAED,QAZZ;AAaE,IAAA,KAAK,EAAEG,KAAK,KAAKK,yBAASC,OAAnB,GAA6B,qCAAC,qBAAD,OAA7B,GAAkD,qCAAC,qBAAD;AAb3D,MAeE,qCAAC,mBAAD;AAAqB,IAAA,SAAS,EAAC,KAA/B;AAAqC,IAAA,MAAM,EAAC,SAA5C;AAAsD,IAAA,SAAS,EAAC;AAAhE,KACE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAiCb,QAAQ,IAAID,WAA7C,CADF,CAfF,CADF;AAqBD,CAtCD;;AAwCAF,aAAa,CAACmB,YAAd,GAA6B;AAC3BlB,EAAAA,QAAQ,EAAE;AADiB,CAA7B;;eAIe,oCAAeD,aAAf,EAA8B;AAC3CS,EAAAA,KAAK,EAAE,IADoC;AAE3CC,EAAAA,KAAK,EAAE;AAFoC,CAA9B,C","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { Icon24Dropdown, Icon20Dropdown } from '@vkontakte/icons';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport '../Select/Select.css';\n\nexport interface SelectMimicryProps extends\n  React.HTMLAttributes<HTMLElement>,\n  HasAlign,\n  HasRootRef<HTMLElement>,\n  AdaptivityProps {\n  multiline?: boolean;\n  disabled?: boolean;\n}\n\nconst SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({\n  tabIndex,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  sizeX,\n  sizeY,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? null : tabIndex}\n      vkuiClass={classNames(getClassName('Select', platform), 'Select--mimicry', {\n        'Select--not-selected': !children,\n        'Select--multiline': multiline,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n      })}\n      getRootRef={getRootRef}\n      onClick={disabled ? null : onClick}\n      disabled={disabled}\n      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}\n    >\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{children || placeholder}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nSelectMimicry.defaultProps = {\n  tabIndex: 0,\n};\n\nexport default withAdaptivity(SelectMimicry, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"SelectMimicry.js"}
+{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"names":["SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","sizeX","sizeY","restProps","platform","TypographyComponent","VKCOM","SizeType","COMPACT","Text","Headline","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAYA,IAAMA,aAA0D,GAAG,SAA7DA,aAA6D,OAYzC;AAAA;;AAAA,MAXxBC,QAWwB,QAXxBA,QAWwB;AAAA,MAVxBC,WAUwB,QAVxBA,WAUwB;AAAA,MATxBC,QASwB,QATxBA,QASwB;AAAA,MARxBC,KAQwB,QARxBA,KAQwB;AAAA,MAPxBC,UAOwB,QAPxBA,UAOwB;AAAA,MANxBC,SAMwB,QANxBA,SAMwB;AAAA,MALxBC,QAKwB,QALxBA,QAKwB;AAAA,MAJxBC,OAIwB,QAJxBA,OAIwB;AAAA,MAHxBC,KAGwB,QAHxBA,KAGwB;AAAA,MAFxBC,KAEwB,QAFxBA,KAEwB;AAAA,MADrBC,SACqB;AACxB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,mBAAmB,GAAGD,QAAQ,KAAKE,eAAb,IAAsBJ,KAAK,KAAKK,yBAASC,OAAzC,GAAmDC,aAAnD,GAA0DC,iBAAtF;AAEA,SACE,qCAAC,oBAAD,6BACMP,SADN;AAEE,IAAA,QAAQ,EAAEJ,QAAQ,GAAG,IAAH,GAAUN,QAF9B;AAGE,IAAA,SAAS,EAAE,6BAAW,gCAAa,QAAb,EAAuBW,QAAvB,CAAX,EAA6C,iBAA7C;AACT,8BAAwB,CAACT,QADhB;AAET,2BAAqBG;AAFZ,0EAGSF,KAHT,GAGmB,CAAC,CAACA,KAHrB,uEAIUK,KAJV,GAIoB,CAAC,CAACA,KAJtB,uEAKUC,KALV,GAKoB,CAAC,CAACA,KALtB,gBAHb;AAUE,IAAA,UAAU,EAAEL,UAVd;AAWE,IAAA,OAAO,EAAEE,QAAQ,GAAG,IAAH,GAAUC,OAX7B;AAYE,IAAA,QAAQ,EAAED,QAZZ;AAaE,IAAA,KAAK,EAAE,qCAAC,0BAAD;AAbT,MAeE,qCAAC,mBAAD;AAAqB,IAAA,SAAS,EAAC,KAA/B;AAAqC,IAAA,MAAM,EAAC,SAA5C;AAAsD,IAAA,SAAS,EAAC;AAAhE,KACE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAiCJ,QAAQ,IAAID,WAA7C,CADF,CAfF,CADF;AAqBD,CAtCD;;AAwCAF,aAAa,CAACmB,YAAd,GAA6B;AAC3BlB,EAAAA,QAAQ,EAAE;AADiB,CAA7B;;eAIe,oCAAeD,aAAf,EAA8B;AAC3CS,EAAAA,KAAK,EAAE,IADoC;AAE3CC,EAAAA,KAAK,EAAE;AAFoC,CAA9B,C","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport '../Select/Select.css';\n\nexport interface SelectMimicryProps extends\n  React.HTMLAttributes<HTMLElement>,\n  HasAlign,\n  HasRootRef<HTMLElement>,\n  AdaptivityProps {\n  multiline?: boolean;\n  disabled?: boolean;\n}\n\nconst SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({\n  tabIndex,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  sizeX,\n  sizeY,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? null : tabIndex}\n      vkuiClass={classNames(getClassName('Select', platform), 'Select--mimicry', {\n        'Select--not-selected': !children,\n        'Select--multiline': multiline,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n      })}\n      getRootRef={getRootRef}\n      onClick={disabled ? null : onClick}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{children || placeholder}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nSelectMimicry.defaultProps = {\n  tabIndex: 0,\n};\n\nexport default withAdaptivity(SelectMimicry, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"SelectMimicry.js"}

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { HasComponent } from '../../types';
 import { TappableProps } from '../Tappable/Tappable';
 import './SimpleCell.css';
-export interface SimpleCellOwnProps {
+export interface SimpleCellOwnProps extends HasComponent {
     /**
      * Иконка 28 или `<Avatar size={28|32|40|48|72} />`
      */
@@ -31,7 +32,6 @@ export interface SimpleCellOwnProps {
      */
     expandable?: boolean;
     multiline?: boolean;
-    Component?: React.ElementType;
 }
 export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {
 }