@vkontakte/vkui 4.20.0 → 4.22.1

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

@@ -0,0 +1,189 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from 'react';
+import { ModalType } from "./types";
+import { warnOnce } from "../../lib/warnOnce";
+import { getNavId } from "../../lib/getNavId";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { noop, isFunction } from "../../lib/utils";
+
+function getModals(children) {
+  return React.Children.toArray(children);
+}
+
+var warn = warnOnce('ModalRoot');
+export 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 = _toConsumableArray(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 _objectSpread(_objectSpread({}, state), {}, {
+      enteringModal: null
+    });
+  }
+
+  if (action.type === 'exited' && action.id === state.exitingModal) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      exitingModal: null
+    });
+  }
+
+  if (action.type === 'inited' && action.id === state.activeModal) {
+    return _objectSpread(_objectSpread({}, 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, переход закончен
+ */
+
+export function useModalManager(activeModal, children, onClose) {
+  var initModal = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : noop;
+  var modalsState = React.useRef({}).current;
+  getModals(children).forEach(function (Modal) {
+    var modalProps = Modal.props;
+    var id = 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 = _slicedToArray(_React$useReducer, 2),
+      transitionState = _React$useReducer2[0],
+      dispatchTransition = _React$useReducer2[1]; // Map props to state, render activeModal for init
+
+
+  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
+
+  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) === 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 (isFunction(modalState.onClose)) {
+        modalState.onClose();
+      } else if (isFunction(onClose)) {
+        onClose(modalState.id);
+      } else if (process.env.NODE_ENV === 'development') {
+        warn('onClose is undefined');
+      }
+    }
+  }
+
+  return _objectSpread(_objectSpread({
+    onEnter: onEnter,
+    onExit: onExit
+  }, transitionState), {}, {
+    delayEnter: delayEnter,
+    getModalState: getModalState,
+    closeActiveModal: closeActiveModal
+  });
+}
+export function withModalManager() {
+  var initModal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
+  return function (Wrapped) {
+    return function WithModalManager(props) {
+      var transitionManager = useModalManager(props.activeModal, props.children, props.onClose, initModal);
+      return createScopedElement(Wrapped, _extends({}, props, transitionManager));
+    };
+  };
+}
+//# sourceMappingURL=useModalManager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"names":["React","ModalType","warnOnce","getNavId","useIsomorphicLayoutEffect","noop","isFunction","getModals","children","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","includes","splice","indexOf","push","enteringModal","useModalManager","onClose","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","useReducer","transitionState","dispatchTransition","process","env","NODE_ENV","isCard","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/cssm/components/NativeSelect/NativeSelect.js

@@ -6,7 +6,7 @@ var _excluded = ["style", "defaultValue", "align", "placeholder", "children", "c
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from 'react';
 import { classNames } from "../../lib/classNames";
-import { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { getClassName } from "../../helpers/getClassName";
@@ -73,7 +73,7 @@ var NativeSelect = function NativeSelect(_ref) {
     style: style,
     getRootRef: getRootRef,
     disabled: disabled,
-    after: sizeY === SizeType.COMPACT ? createScopedElement(Icon20Dropdown, null) : createScopedElement(Icon24Dropdown, null)
+    after: createScopedElement(DropdownIcon, null)
   }, createScopedElement("select", _extends({}, restProps, {
     disabled: disabled,
     vkuiClass: "Select__el",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["React","classNames","Icon20Dropdown","Icon24Dropdown","FormField","withAdaptivity","SizeType","getClassName","Headline","Text","VKCOM","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","COMPACT"],"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":["React","classNames","DropdownIcon","FormField","withAdaptivity","SizeType","getClassName","Headline","Text","VKCOM","useIsomorphicLayoutEffect","useEnsuredControl","useExternRef","usePlatform","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","COMPACT"],"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/cssm/components/Removable/Removable.css

@@ -1 +1 @@
-.vkuiRemovable{position:relative;min-width:0;width:100%;max-width:100%}.vkuiRemovable__content{display:flex;flex-flow:row nowrap;align-items:center}.vkuiRemovable__action{position:relative;flex-grow:0;flex-shrink:0;border:0}.vkuiRemovable--start .vkuiRemovable__action{align-self:flex-start}.vkuiFormItem .vkuiRemovable,.vkuiFormLayoutGroup .vkuiRemovable{padding-left:16px;padding-left:var(--formitem_padding);padding-right:16px;padding-right:var(--formitem_padding);margin-left:calc(-1*16px);margin-left:calc(-1*var(--formitem_padding));margin-right:calc(-1*16px);margin-right:calc(-1*var(--formitem_padding))}.vkuiFormItem--withTop .vkuiRemovable__action,.vkuiFormItem--withTop~.vkuiRemovable__action{top:28px}.vkuiFormItem--withTop .vkuiRemovable--sizeY-compact .vkuiRemovable__action,.vkuiRemovable--sizeY-compact .vkuiFormItem--withTop~.vkuiRemovable__action{top:26px}.vkuiCell .vkuiRemovable{padding-right:6px;box-sizing:border-box}.vkuiCell.vkuiCell--android .vkuiRemovable.vkuiRemovable--sizeY-regular{padding-right:4px}.vkuiRemovable--ios{overflow:hidden}.vkuiRemovable__remove{position:absolute;left:100%;top:0;height:100%;padding:0 10px;font-size:15px;line-height:45px;color:#fff;color:var(--white);background-color:#e64646;background-color:var(--destructive);border:0;border-radius:0}.vkuiRemovable__remove-in{display:flex;align-items:center;justify-content:center;width:100%;height:100%}@media (prefers-reduced-motion:no-preference){.vkuiRemovable--ios .vkuiRemovable__content,.vkuiRemovable__remove{transition:-webkit-transform .6s cubic-bezier(.36,.66,.04,1);transition:transform .6s cubic-bezier(.36,.66,.04,1);transition:transform .6s cubic-bezier(.36,.66,.04,1),-webkit-transform .6s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .6s var(--ios-easing);transition:transform .6s var(--ios-easing);transition:transform .6s var(--ios-easing),-webkit-transform .6s var(--ios-easing)}}.vkuiRemovable__toggle{display:block;width:48px;height:48px;background:0 0}.vkuiRemovable__toggle-in{position:relative;display:flex;align-items:center;align-content:center;justify-content:center;width:100%;height:100%;border:0}.vkuiRemovable__toggle-in::after{content:"";width:22px;height:22px;background-color:#e64646;background-color:var(--destructive);border-radius:50%}.vkuiRemovable__toggle-in::before{content:"";position:absolute;display:block;width:12px;height:2px;background-color:#fff;background-color:var(--white)}.vkuiRemovable--sizeY-compact .vkuiRemovable__toggle{margin-top:-4px;margin-bottom:-4px}.vkuiFormLayoutGroup .vkuiRemovable--ios .vkuiRemovable__content{flex-wrap:wrap}.vkuiFormLayoutGroup .vkuiRemovable--ios .vkuiFormItem--withTop~.vkuiRemovable__offset{order:-1;display:block;width:100%;height:28px}.vkuiFormLayoutGroup .vkuiRemovable--ios.vkuiRemovable--sizeY-compact .vkuiFormItem--withTop~.vkuiRemovable__offset{height:26px}.vkuiFormItem .vkuiRemovable--android .vkuiRemovable__action,.vkuiFormItem .vkuiRemovable--vkcom .vkuiRemovable__action,.vkuiFormLayoutGroup .vkuiRemovable--android .vkuiRemovable__action,.vkuiFormLayoutGroup .vkuiRemovable--vkcom .vkuiRemovable__action{margin-top:-2px;margin-right:-16px;margin-bottom:-2px}.vkuiFormItem--sizeY-compact .vkuiRemovable--android .vkuiRemovable__action,.vkuiFormItem--sizeY-compact .vkuiRemovable--vkcom .vkuiRemovable__action,.vkuiFormLayoutGroup--sizeY-compact .vkuiRemovable--android .vkuiRemovable__action,.vkuiFormLayoutGroup--sizeY-compact .vkuiRemovable--vkcom .vkuiRemovable__action{margin-left:2px;margin-top:-4px;margin-right:-14px;margin-bottom:-4px}
+.vkuiRemovable__content{position:relative;display:flex;align-items:center;padding-left:16px;padding-left:var(--formitem_padding)}.vkuiRemovable__action{position:relative;flex-grow:0;flex-shrink:0;border:0}.vkuiRemovable--start .vkuiRemovable__action{align-self:flex-start}.vkuiFormItem--removable.vkuiFormItem--withTop .vkuiRemovable__action,.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__action{top:28px}.vkuiFormItem--sizeY-compact.vkuiFormItem--removable.vkuiFormItem--withTop .vkuiRemovable__action,.vkuiFormLayoutGroup--sizeY-compact.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__action{top:26px}.vkuiRemovable--ios{overflow:hidden}.vkuiRemovable__remove{position:absolute;left:100%;top:0;height:100%;padding:0 10px;font-size:15px;line-height:45px;color:#fff;color:var(--white);background-color:#e64646;background-color:var(--destructive);border:0;border-radius:0}.vkuiRemovable__remove-in{display:flex;align-items:center;justify-content:center;width:100%;height:100%}@media (prefers-reduced-motion:no-preference){.vkuiRemovable--ios .vkuiRemovable__content{transition:-webkit-transform .6s cubic-bezier(.36,.66,.04,1);transition:transform .6s cubic-bezier(.36,.66,.04,1);transition:transform .6s cubic-bezier(.36,.66,.04,1),-webkit-transform .6s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .6s var(--ios-easing);transition:transform .6s var(--ios-easing);transition:transform .6s var(--ios-easing),-webkit-transform .6s var(--ios-easing)}}.vkuiRemovable__toggle{display:block;width:44px;height:44px;margin:0 2px;background:0 0}.vkuiRemovable__toggle-in{position:relative;display:flex;align-items:center;align-content:center;justify-content:center;width:100%;height:100%;border:0}.vkuiRemovable__toggle-in::after{content:"";width:22px;height:22px;background-color:#e64646;background-color:var(--destructive);border-radius:50%}.vkuiRemovable__toggle-in::before{content:"";position:absolute;display:block;width:12px;height:2px;background-color:#fff;background-color:var(--white)}.vkuiRemovable--ios .vkuiRemovable__content{padding-left:0;padding-right:16px;padding-right:var(--formitem_padding)}.vkuiFormLayoutGroup--removable .vkuiRemovable__content{flex-wrap:wrap}.vkuiFormLayoutGroup--removable .vkuiFormItem--ios.vkuiFormItem--withTop~.vkuiRemovable__offset{order:-1;display:block;width:100%;height:28px}.vkuiFormLayoutGroup--removable.vkuiFormLayoutGroup--sizeY-compact .vkuiFormItem--ios.vkuiFormItem--withTop~.vkuiRemovable__offset{height:26px}

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

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "onRemove", "removePlaceholder", "align"];
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from 'react';
 import { classNames } from "../../lib/classNames";
-import { getTitleFromChildren } from "../../lib/utils";
+import { getTitleFromChildren, noop } from "../../lib/utils";
+import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
@@ -16,109 +17,117 @@ import IconButton from "../IconButton/IconButton";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import Tappable from "../Tappable/Tappable";
 import "./Removable.css";
-export 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 = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
-
-  var _useAdaptivity = useAdaptivity(),
-      sizeY = _useAdaptivity.sizeY;
+var RemovableIos = function RemovableIos(_ref) {
+  var onRemoveClick = _ref.onRemoveClick,
+      removePlaceholder = _ref.removePlaceholder,
+      removePlaceholderString = _ref.removePlaceholderString,
+      children = _ref.children;
 
   var _useDOM = useDOM(),
       document = _useDOM.document;
 
   var removeButtonRef = React.useRef(null);
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      isRemoveActivated = _React$useState2[0],
-      setRemoveActivated = _React$useState2[1];
-
-  var _React$useState3 = React.useState(0),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      removeOffset = _React$useState4[0],
-      updateRemoveOffset = _React$useState4[1];
+      removeOffset = _React$useState2[0],
+      updateRemoveOffset = _React$useState2[1];
 
-  useGlobalEventListener(document, 'click', isRemoveActivated && function () {
-    setRemoveActivated(false);
+  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 = getTitleFromChildren(removePlaceholder);
-  return createScopedElement("div", _extends({}, restProps, {
-    vkuiClass: classNames(getClassName('Removable', platform), "Removable--".concat(align), "Removable--sizeY-".concat(sizeY))
-  }), (platform === ANDROID || platform === VKCOM) && createScopedElement("div", {
-    vkuiClass: "Removable__content"
-  }, children, createScopedElement(IconButton, {
-    "aria-label": removePlaceholderString,
-    vkuiClass: "Removable__action",
-    onClick: onRemoveClick
-  }, createScopedElement(Icon24Cancel, {
-    role: "presentation"
-  }))), platform === IOS && createScopedElement(React.Fragment, null, createScopedElement("div", {
+  return createScopedElement("div", {
     vkuiClass: "Removable__content",
     style: {
-      transform: "translateX(-".concat(removeOffset, "px)")
-    }
+      transform: "translateX(-".concat(removeOffset !== null && removeOffset !== void 0 ? removeOffset : 0, "px)")
+    },
+    onTransitionEnd: onRemoveTransitionEnd
   }, createScopedElement(IconButton, {
     hasActive: false,
     hasHover: false,
     "aria-label": removePlaceholderString,
     vkuiClass: "Removable__action Removable__toggle",
-    onClick: onRemoveActivateClick
+    onClick: onRemoveActivateClick,
+    disabled: removeOffset > 0
   }, createScopedElement("i", {
     vkuiClass: "Removable__toggle-in",
     role: "presentation"
   })), children, createScopedElement("span", {
     vkuiClass: "Removable__offset",
     "aria-hidden": "true"
-  })), createScopedElement(Tappable, {
+  }), createScopedElement(Tappable, {
     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
   }, createScopedElement("span", {
     vkuiClass: "Removable__remove-in"
-  }, removePlaceholder))));
+  }, removePlaceholder)));
+};
+
+export var Removable = function Removable(_ref2) {
+  var getRootRef = _ref2.getRootRef,
+      children = _ref2.children,
+      _ref2$onRemove = _ref2.onRemove,
+      onRemove = _ref2$onRemove === void 0 ? 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 = _objectWithoutProperties(_ref2, _excluded);
+
+  var platform = usePlatform();
+
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var ref = useExternRef(getRootRef);
+
+  var onRemoveClick = function onRemoveClick(e) {
+    e.preventDefault();
+    onRemove(e);
+  };
+
+  var removePlaceholderString = getTitleFromChildren(removePlaceholder);
+  return createScopedElement("div", _extends({}, restProps, {
+    ref: ref,
+    vkuiClass: classNames(getClassName('Removable', platform), "Removable--".concat(align), "Removable--sizeY-".concat(sizeY))
+  }), (platform === ANDROID || platform === VKCOM) && createScopedElement("div", {
+    vkuiClass: "Removable__content"
+  }, children, createScopedElement(IconButton, {
+    activeMode: "opacity",
+    hoverMode: "opacity",
+    vkuiClass: "Removable__action",
+    onClick: onRemoveClick,
+    "aria-label": removePlaceholderString
+  }, createScopedElement(Icon24Cancel, {
+    role: "presentation"
+  }))), platform === IOS && createScopedElement(RemovableIos, {
+    onRemoveClick: onRemoveClick,
+    removePlaceholder: removePlaceholder,
+    removePlaceholderString: removePlaceholderString
+  }, children));
 };
 //# sourceMappingURL=Removable.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"names":["React","classNames","getTitleFromChildren","usePlatform","getClassName","useAdaptivity","useDOM","ANDROID","IOS","VKCOM","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","Removable","children","onRemove","removePlaceholder","align","restProps","platform","sizeY","document","removeButtonRef","useRef","useState","isRemoveActivated","setRemoveActivated","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","nativeEvent","stopPropagation","preventDefault","onRemoveClick","stopImmediatePropagation","useEffect","removeButton","offsetWidth","removePlaceholderString","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":["React","classNames","getTitleFromChildren","noop","useExternRef","usePlatform","getClassName","useAdaptivity","useDOM","ANDROID","IOS","VKCOM","Icon24Cancel","IconButton","useGlobalEventListener","Tappable","RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","document","removeButtonRef","useRef","useState","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","offsetWidth","transform","Removable","getRootRef","onRemove","align","restProps","platform","sizeY","ref","e","preventDefault"],"mappings":"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","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/cssm/components/Search/Search.css

@@ -1 +1 @@
-.vkuiSearch{overflow:hidden;font-weight:400;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);line-height:normal}.vkuiSearch__in{position:relative}.vkuiSearch__width{height:36px;height:var(--search_default_height);white-space:nowrap;color:transparent;width:10000px}.vkuiSearch__control{display:flex;justify-content:flex-start;align-items:center;position:absolute;left:0;top:0;width:calc(100% - 1px);height:100%;border-radius:10px}.vkuiSearch__input{-webkit-appearance:textfield;border:0;margin:0;height:36px;height:var(--search_default_height);position:relative;padding:0 22px 0 36px;box-sizing:border-box;font-size:17px;border-radius:10px;max-width:100%;flex-grow:1;min-width:0;background-color:transparent;z-index:2;color:#000;color:var(--text_primary)}.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch--has-after .vkuiSearch__input{border-radius:10px 0 0 10px}.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder,.vkuiSearch--has-icon .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{font-size:17px;height:36px;height:var(--search_default_height);line-height:36px;line-height:var(--search_default_height);padding-left:12px;padding-right:4px;flex-shrink:0;pointer-events:none;cursor:text}.vkuiSearch__placeholder{position:absolute;left:0;width:100%;cursor:text;z-index:1;text-align:left;height:36px;height:var(--search_default_height);font-size:0;padding-left:12px;padding-right:22px;pointer-events:none;box-sizing:border-box;display:flex}.vkuiSearch__placeholder-in{height:36px;height:var(--search_default_height);display:flex;align-items:center;overflow:hidden;flex-grow:1;max-width:100%}.vkuiSearch__placeholder-text{margin-left:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{position:absolute;right:100%;top:0;display:flex;align-items:center;justify-content:center;color:#818c99;color:var(--search_bar_field_tint)}.vkuiSearch__icon{width:40px;height:36px;height:var(--search_default_height);display:flex;align-items:center;justify-content:center}.vkuiSearch__after{position:absolute;left:100%;top:0;line-height:36px;line-height:var(--search_default_height);z-index:2;-webkit-transform:translate(0);transform:translate(0);transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);cursor:default}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{-webkit-transform:translate(-100%);transform:translate(-100%)}.vkuiSearch__after::before{position:absolute;right:calc(100% - 1px);display:block;height:100%;width:10px;content:'';pointer-events:none}.vkuiSearch__after-in{position:relative;z-index:2;cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px}.vkuiSearch__after::after{position:absolute;right:100%;display:block;height:100%;width:10px;content:'';top:0;border-radius:0 10px 10px 0;cursor:text;pointer-events:none}.vkuiGroup--plain .vkuiSearch{padding-top:4px}.vkuiSearch{background:#fff;background:var(--search_bar_background)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--search_bar_field_tint)}.vkuiSearch__after-width{background:#ebedf0;background:var(--search_bar_field_background);color:#ebedf0;color:var(--search_bar_field_background)}.vkuiSearch__after{background:#fff;background:var(--search_bar_background);color:#2688eb;color:var(--accent)}.vkuiSearch__after::after{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__after::before{background-color:#fff;background-color:var(--search_bar_background)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#818c99;color:var(--header_search_field_tint)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--header_search_field_background);color:#ebedf0;color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--header_background);color:#2688eb;color:var(--header_tint)}.vkuiPanelHeader .vkuiSearch__after::after{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after::before{background-color:#fff;background-color:var(--header_background)}.vkuiSearch--ios{padding:8px 12px}.vkuiSearch--android{padding:8px 16px}.vkuiSearch--vkcom,.vkuiPanelHeader--vkcom .vkuiSearch{background:0 0}.vkuiSearch--vkcom .vkuiSearch__in{padding-top:6px;padding-bottom:6px}.vkuiSearch--vkcom .vkuiSearch__input{font-size:15px;line-height:20px;padding-left:40px}.vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:16px}.vkuiSearch--vkcom .vkuiSearch__icons{top:4px;right:calc(100% + 8px)}.vkuiSearch--vkcom.vkuiSearch--has-value .vkuiSearch__input{padding-right:56px}.vkuiSearch--vkcom.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input{padding-right:92px}.vkuiSearch--vkcom .vkuiSearch__icon{width:40px;height:40px}.vkuiSearch--vkcom .vkuiSearch__icon:hover{background-color:rgba(0,0,0,.04);background-color:var(--background_hover);border-radius:50%}.vkuiSearch--vkcom .vkuiSearch__control{background-color:transparent}.vkuiPanelHeader--vkcom .vkuiSearch__separator{display:none}.vkuiSearch--vkcom .vkuiSearch__separator{color:#e1e3e6;color:var(--input_border)}.vkuiGroup--card .vkuiSearch--vkcom{margin:0 -8px}.vkuiGroup--card .vkuiSearch--vkcom:first-child{margin-top:-8px}.vkuiGroup--card .vkuiSearch--vkcom:not(:last-child){margin-bottom:8px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:20px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__input{padding-left:44px}
+.vkuiSearch{overflow:hidden;font-weight:400;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);line-height:normal}.vkuiSearch__in{position:relative}.vkuiSearch__width{height:36px;height:var(--search_default_height);white-space:nowrap;color:transparent;width:10000px}.vkuiSearch__control{display:flex;justify-content:flex-start;align-items:center;position:absolute;left:0;top:0;width:calc(100% - 1px);height:100%;border-radius:10px}.vkuiSearch__input{-webkit-appearance:none;border:0;margin:0;height:36px;height:var(--search_default_height);position:relative;padding:0 22px 0 36px;box-sizing:border-box;font-size:17px;border-radius:10px;max-width:100%;flex-grow:1;min-width:0;background-color:transparent;z-index:2;color:#000;color:var(--text_primary)}.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch--has-after .vkuiSearch__input{border-radius:10px 0 0 10px}.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder,.vkuiSearch--has-icon .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{font-size:17px;height:36px;height:var(--search_default_height);line-height:36px;line-height:var(--search_default_height);padding-left:12px;padding-right:4px;flex-shrink:0;pointer-events:none;cursor:text}.vkuiSearch__placeholder{position:absolute;left:0;width:100%;cursor:text;z-index:1;text-align:left;height:36px;height:var(--search_default_height);font-size:0;padding-left:12px;padding-right:22px;pointer-events:none;box-sizing:border-box;display:flex}.vkuiSearch__placeholder-in{height:36px;height:var(--search_default_height);display:flex;align-items:center;overflow:hidden;flex-grow:1;max-width:100%}.vkuiSearch__placeholder-text{margin-left:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{position:absolute;right:100%;top:0;display:flex;align-items:center;justify-content:center;color:#818c99;color:var(--search_bar_field_tint)}.vkuiSearch__icon{width:40px;height:36px;height:var(--search_default_height);display:flex;align-items:center;justify-content:center}.vkuiSearch__after{position:absolute;left:100%;top:0;line-height:36px;line-height:var(--search_default_height);z-index:2;-webkit-transform:translate(0);transform:translate(0);transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);cursor:default}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{-webkit-transform:translate(-100%);transform:translate(-100%)}.vkuiSearch__after::before{position:absolute;right:calc(100% - 1px);display:block;height:100%;width:10px;content:'';pointer-events:none}.vkuiSearch__after-in{position:relative;z-index:2;cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px}.vkuiSearch__after::after{position:absolute;right:100%;display:block;height:100%;width:10px;content:'';top:0;border-radius:0 10px 10px 0;cursor:text;pointer-events:none}.vkuiGroup--plain .vkuiSearch{padding-top:4px}.vkuiSearch{background:#fff;background:var(--search_bar_background)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--search_bar_field_tint)}.vkuiSearch__after-width{background:#ebedf0;background:var(--search_bar_field_background);color:#ebedf0;color:var(--search_bar_field_background)}.vkuiSearch__after{background:#fff;background:var(--search_bar_background);color:#2688eb;color:var(--accent)}.vkuiSearch__after::after{background-color:#ebedf0;background-color:var(--search_bar_field_background)}.vkuiSearch__after::before{background-color:#fff;background-color:var(--search_bar_background)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#818c99;color:var(--header_search_field_tint)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--header_search_field_background);color:#ebedf0;color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--header_background);color:#2688eb;color:var(--header_tint)}.vkuiPanelHeader .vkuiSearch__after::after{background-color:#ebedf0;background-color:var(--header_search_field_background)}.vkuiPanelHeader .vkuiSearch__after::before{background-color:#fff;background-color:var(--header_background)}.vkuiSearch--ios{padding:8px 12px}.vkuiSearch--android{padding:8px 16px}.vkuiSearch--vkcom,.vkuiPanelHeader--vkcom .vkuiSearch{background:0 0}.vkuiSearch--vkcom .vkuiSearch__in{padding-top:6px;padding-bottom:6px}.vkuiSearch--vkcom .vkuiSearch__input{font-size:15px;line-height:20px;padding-left:40px}.vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:16px}.vkuiSearch--vkcom .vkuiSearch__icons{top:4px;right:calc(100% + 8px)}.vkuiSearch--vkcom.vkuiSearch--has-value .vkuiSearch__input{padding-right:56px}.vkuiSearch--vkcom.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input{padding-right:92px}.vkuiSearch--vkcom .vkuiSearch__icon{width:40px;height:40px}.vkuiSearch--vkcom .vkuiSearch__icon:hover{background-color:rgba(0,0,0,.04);background-color:var(--background_hover);border-radius:50%}.vkuiSearch--vkcom .vkuiSearch__control{background-color:transparent}.vkuiPanelHeader--vkcom .vkuiSearch__separator{display:none}.vkuiSearch--vkcom .vkuiSearch__separator{color:#e1e3e6;color:var(--input_border)}.vkuiGroup--card .vkuiSearch--vkcom{margin:0 -8px}.vkuiGroup--card .vkuiSearch--vkcom:first-child{margin-top:-8px}.vkuiGroup--card .vkuiSearch--vkcom:not(:last-child){margin-bottom:8px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__placeholder{padding-left:20px}.vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__input{padding-left:44px}

package/dist/cssm/components/Select/Select.css

@@ -1 +1 @@
-.vkuiSelect{position:relative;box-sizing:border-box}.vkuiSelect__el{display:block;position:absolute;-webkit-appearance:none;appearance:none;border:0;left:0;top:0;width:100%;height:100%;opacity:0;z-index:3;font-size:16px}.vkuiSelect__container{flex-grow:1;flex-shrink:1;padding:11px;color:#000;color:var(--text_primary);box-sizing:border-box;position:relative;z-index:2;cursor:pointer;overflow:hidden}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vkuiSelect--not-selected .vkuiSelect__title{color:#818c99;color:var(--field_text_placeholder)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiSelect--sizeY--compact .vkuiSelect__container{padding:7px 11px}
+.vkuiSelect{position:relative;cursor:pointer;box-sizing:border-box}.vkuiSelect__el{display:block;position:absolute;-webkit-appearance:none;appearance:none;border:0;left:0;top:0;width:100%;height:100%;opacity:0;z-index:3;font-size:16px}.vkuiSelect__container{flex-grow:1;flex-shrink:1;padding:11px;color:#000;color:var(--text_primary);box-sizing:border-box;position:relative;z-index:2;overflow:hidden}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vkuiSelect--not-selected .vkuiSelect__title{color:#818c99;color:var(--field_text_placeholder)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiSelect--sizeY--compact .vkuiSelect__container{padding:7px 11px}

package/dist/cssm/components/SelectMimicry/SelectMimicry.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["tabIndex", "placeholder", "children", "align", "getRootRef", "multiline", "disabled", "onClick", "sizeX", "sizeY"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { classNames } from "../../lib/classNames";
-import { Icon24Dropdown, Icon20Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { FormField } from "../FormField/FormField";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -40,7 +40,7 @@ var SelectMimicry = function SelectMimicry(_ref) {
     getRootRef: getRootRef,
     onClick: disabled ? null : onClick,
     disabled: disabled,
-    after: sizeY === SizeType.COMPACT ? createScopedElement(Icon20Dropdown, null) : createScopedElement(Icon24Dropdown, null)
+    after: createScopedElement(DropdownIcon, null)
   }), createScopedElement(TypographyComponent, {
     Component: "div",
     weight: "regular",