@vkontakte/vkui 4.15.0 → 4.16.2

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Touch, { TouchProps, TouchEvent } from '../Touch/Touch';
+import { Touch, TouchProps, TouchEvent } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
 import FixedLayout from '../FixedLayout/FixedLayout';
 import { classNames } from '../../lib/classNames';

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Touch, { TouchEvent, TouchEventHandler } from '../Touch/Touch';
+import { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';
 import { getClassName } from '../../helpers/getClassName';
 import { classNames } from '../../lib/classNames';
 import { HasRootRef } from '../../types';

package/src/components/Root/Readme.md

@@ -5,42 +5,32 @@
 Как только он заканчивается, вызывается свойство-функция `onTransition`.
 
 ```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
+const [activeView, setActiveView] = useState('view1');
 
-    this.state = {
-      activeView: 'view1'
-    }
-  }
-
-  render() {
-    return (
-      <Root activeView={this.state.activeView}>
-        <View activePanel="panel1.1" id="view1">
-          <Panel id="panel1.1">
-            <PanelHeader>View 1</PanelHeader>
-            <Group>
-              <CellButton onClick={ () => this.setState({ activeView: 'view2' }) }>
-                Open View 2
-              </CellButton>
-            </Group>
-          </Panel>
-        </View>
-        <View header activePanel="panel2.1" id="view2">
-          <Panel id="panel2.1">
-            <PanelHeader>View 2</PanelHeader>
-            <Group>
-              <CellButton onClick={ () => this.setState({ activeView: 'view1' }) }>
-                Back to View 1
-              </CellButton>
-            </Group>
-          </Panel>
-        </View>
-      </Root>
-    )
-  }
-}
-
-<Example />
+<Root activeView={activeView}>
+  <View activePanel="panel1.1" id="view1">
+    <Panel id="panel1.1">
+      <PanelHeader>View 1</PanelHeader>
+      <Group>
+        <div style={{ height: 200 }} />
+        <CellButton onClick={ () => setActiveView('view2') }>
+          Open View 2
+        </CellButton>
+        <div style={{ height: 600 }} />
+      </Group>
+    </Panel>
+  </View>
+  <View header activePanel="panel2.1" id="view2">
+    <Panel id="panel2.1">
+      <PanelHeader>View 2</PanelHeader>
+      <Group>
+        <div style={{ height: 200 }} />
+        <CellButton onClick={ () => setActiveView('view1') }>
+          Back to View 1
+        </CellButton>
+        <div style={{ height: 600 }} />
+      </Group>
+    </Panel>
+  </View>
+</Root>
 ```

package/src/components/Root/Root.tsx

@@ -1,23 +1,22 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
 import { getClassName } from '../../helpers/getClassName';
-import { animationEvent } from '../../lib/supportEvents';
-import { ANDROID, VKCOM } from '../../lib/platform';
-import { withPlatform } from '../../hoc/withPlatform';
-import { withContext } from '../../hoc/withContext';
-import { HasPlatform } from '../../types';
-import { ConfigProviderContext, ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
-import { SplitColContextProps, SplitColContext } from '../SplitCol/SplitCol';
+import { IOS } from '../../lib/platform';
+import { ConfigProviderContext } from '../ConfigProvider/ConfigProviderContext';
+import { SplitColContext } from '../SplitCol/SplitCol';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { canUseDOM, DOMProps, withDOM } from '../../lib/dom';
-import { ScrollContext, ScrollContextInterface } from '../AppRoot/ScrollContext';
+import { ScrollContext } from '../AppRoot/ScrollContext';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
+import { useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useTimeout } from '../../hooks/useTimeout';
+import { usePlatform } from '../../hooks/usePlatform';
 import './Root.css';
 
 const warn = warnOnce('Root');
 
-export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, HasPlatform, NavIdProps {
+export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
   activeView: string;
   onTransition?(params: { isBack: boolean; from: string; to: string }): void;
   /**
@@ -32,207 +31,129 @@ export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, HasPlat
    * Свойство для отрисовки `ModalRoot`.
    */
   modal?: React.ReactNode;
-  /**
-   * @ignore
-   */
-  splitCol?: SplitColContextProps;
-  /**
-   * @ignore
-   */
-  configProvider?: ConfigProviderContextInterface;
-  /**
-   * @ignore
-   */
-  scroll?: ScrollContextInterface;
 }
 
-export type AnimationEndCallback = (e?: AnimationEvent) => void;
-
 export interface RootState {
   activeView: string;
-  prevView: string;
-  nextView: string;
-  visibleViews: [string] | [string, string];
-  isBack: boolean;
-  scrolls: {
-    [index: string]: number;
-  };
   transition: boolean;
+  isBack?: boolean;
+  prevView?: string;
 }
 
-class Root extends React.Component<RootProps & DOMProps, RootState> {
-  constructor(props: RootProps) {
-    super(props);
-
-    this.state = {
-      activeView: props.activeView,
-      prevView: null,
-      nextView: null,
-      visibleViews: [props.activeView],
-      isBack: undefined,
-      scrolls: {},
-      transition: false,
-    };
-  }
-
-  static defaultProps: Partial<RootProps> = {
-    popout: null,
-  };
-
-  private animationFinishTimeout: ReturnType<typeof setTimeout>;
-  private viewNodes: { [id: string]: HTMLElement } = {};
-
-  get document() {
-    return this.props.document;
-  }
-
-  componentDidUpdate(prevProps: RootProps, prevState: RootState) {
-    if (this.props.popout && !prevProps.popout) {
-      this.blurActiveElement();
+const Root: React.FC<RootProps> = ({
+  popout = null, modal, children,
+  activeView: _activeView, onTransition,
+  nav,
+  ...restProps
+}) => {
+  const scroll = React.useContext(ScrollContext);
+  const platform = usePlatform();
+  const { document } = useDOM();
+  const scrolls = React.useRef<Record<string, number>>({}).current;
+  const viewNodes = React.useRef<Record<string, HTMLElement>>({}).current;
+
+  const { transitionMotionEnabled = true } = React.useContext(ConfigProviderContext);
+  const { animate } = React.useContext(SplitColContext);
+  const disableAnimation = !transitionMotionEnabled || !animate;
+
+  const views = React.Children.toArray(children) as React.ReactElement[];
+
+  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({
+    activeView: _activeView,
+    transition: false,
+  });
+  const transitionTo = (panel: string) => {
+    if (panel !== activeView) {
+      const viewIds = views.map((view) => getNavId(view.props, warn));
+      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);
+      _setState({ activeView: panel, prevView: activeView, transition: true, isBack });
     }
-
-    // Нужен переход
-    if (this.props.activeView !== prevProps.activeView) {
-      let pageYOffset = this.props.scroll.getScroll().y;
-      const firstLayerId = [].concat(prevProps.children)
-        .map((view) => getNavId(view.props, warn))
-        .find((id) => id === prevProps.activeView || id === this.props.activeView);
-      const isBack = firstLayerId === this.props.activeView;
-
-      this.blurActiveElement();
-
-      const nextView = this.props.activeView;
-      const prevView = prevProps.activeView;
-
-      this.setState({
-        scrolls: {
-          ...this.state.scrolls,
-          [prevProps.activeView]: pageYOffset,
-        },
-        transition: true,
-        activeView: null,
-        nextView,
-        prevView,
-        visibleViews: [nextView, prevView],
-        isBack,
-      });
+  };
+  const finishTransition = () => _setState({ activeView, prevView, isBack, transition: false });
+
+  useIsomorphicLayoutEffect(() => {
+    (document.activeElement as HTMLElement)?.blur();
+  }, [!!popout, activeView]);
+
+  // Нужен переход
+  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);
+  // scroll restoration
+  useIsomorphicLayoutEffect(() => {
+    if (transition) {
+      // save scroll
+      scrolls[prevView] = scroll.getScroll().y;
+      setPanelScroll(viewNodes[prevView], scrolls[prevView]);
+      isBack && setPanelScroll(viewNodes[activeView], scrolls[activeView]);
+    } else if (prevView) {
+      // Закончился переход
+      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);
     }
-
-    // Начался переход
-    if (!prevState.transition && this.state.transition) {
-      const prevViewElement = this.viewNodes[this.state.prevView];
-      const nextViewElement = this.viewNodes[this.state.nextView];
-      const setPanelScroll = (e: HTMLElement, scroll: number) => {
-        // eslint-disable-next-line no-restricted-properties
-        const pan: HTMLElement | null = e.querySelector('[data-vkui-active-panel=true]');
-        pan && (pan.scrollTop = scroll);
-      };
-
-      setPanelScroll(prevViewElement, this.state.scrolls[this.state.prevView]);
-
-      if (this.state.isBack) {
-        setPanelScroll(nextViewElement, this.state.scrolls[this.state.nextView]);
-      }
-      this.waitAnimationFinish(this.state.isBack ? prevViewElement : nextViewElement, this.onAnimationEnd);
+  }, [transition]);
+  // onTransition
+  useIsomorphicLayoutEffect(() => {
+    if (!transition && prevView) {
+      onTransition && onTransition({ isBack, from: prevView, to: activeView });
     }
-  }
+  }, [transition]);
 
-  shouldDisableTransitionMotion(): boolean {
-    return this.props.configProvider.transitionMotionEnabled === false ||
-      !this.props.splitCol.animate;
-  }
-
-  waitAnimationFinish(elem: HTMLElement, eventHandler: AnimationEndCallback) {
-    if (this.shouldDisableTransitionMotion()) {
-      eventHandler();
+  const fallbackTransition = useTimeout(finishTransition, platform === IOS ? 600 : 300);
+  React.useEffect(() => {
+    if (!transition) {
+      fallbackTransition.clear();
       return;
     }
+    disableAnimation ? finishTransition() : fallbackTransition.set();
+  }, [transition]);
 
-    if (animationEvent.supported) {
-      elem.removeEventListener(animationEvent.name, eventHandler);
-      elem.addEventListener(animationEvent.name, eventHandler);
-    } else {
-      clearTimeout(this.animationFinishTimeout);
-      this.animationFinishTimeout = setTimeout(eventHandler.bind(this), this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
-    }
-  }
-
-  onAnimationEnd: AnimationEndCallback = (e?: AnimationEvent) => {
-    if (!e || [
+  const onAnimationEnd = (e: React.AnimationEvent) => {
+    if ([
       'vkui-root-android-animation-hide-back',
       'vkui-root-android-animation-show-forward',
       'vkui-root-ios-animation-hide-back',
       'vkui-root-ios-animation-show-forward',
     ].includes(e.animationName)) {
-      const isBack = this.state.isBack;
-      const prevView = this.state.prevView;
-      const nextView = this.state.nextView;
-      this.setState({
-        activeView: nextView,
-        prevView: null,
-        nextView: null,
-        visibleViews: [nextView],
-        transition: false,
-        isBack: undefined,
-      }, () => {
-        this.props.scroll.scrollTo(0, isBack ? this.state.scrolls[this.state.activeView] : 0);
-        this.props.onTransition && this.props.onTransition({ isBack, from: prevView, to: nextView });
-      });
+      finishTransition();
     }
   };
 
-  blurActiveElement() {
-    if (canUseDOM && this.document.activeElement) {
-      (this.document.activeElement as HTMLElement).blur();
-    }
-  }
-
-  render() {
-    const {
-      popout, modal, platform,
-      splitCol, configProvider, activeView: _1, onTransition,
-      window, document, scroll, nav,
-      ...restProps
-    } = this.props;
-    const { transition, isBack, prevView, activeView, nextView } = this.state;
-
-    const Views = React.Children.toArray(this.props.children).filter((view: React.ReactElement) => {
-      return this.state.visibleViews.includes(getNavId(view.props, warn));
-    });
-
-    const baseClassName = getClassName('Root', platform);
-    const disableAnimation = this.shouldDisableTransitionMotion();
-
-    return (
-      <div {...restProps} vkuiClass={classNames(baseClassName, {
-        'Root--transition': !disableAnimation && transition,
-        'Root--no-motion': disableAnimation,
-      })}>
-        {Views.map((view: React.ReactElement) => {
-          const viewId = getNavId(view.props, warn);
-          return (
-            <div key={viewId} ref={(e) => this.viewNodes[viewId] = e} vkuiClass={classNames('Root__view', {
-              'Root__view--hide-back': viewId === prevView && isBack,
-              'Root__view--hide-forward': viewId === prevView && !isBack,
-              'Root__view--show-back': viewId === nextView && isBack,
-              'Root__view--show-forward': viewId === nextView && !isBack,
-              'Root__view--active': viewId === activeView,
-            })}>
-              {view}
-            </div>
-          );
-        })}
-        <AppRootPortal>
-          {!!popout && <div vkuiClass="Root__popout">{popout}</div>}
-          {!!modal && <div vkuiClass="Root__modal">{modal}</div>}
-        </AppRootPortal>
-      </div>
-    );
-  }
+  return (
+    <div {...restProps} vkuiClass={classNames(getClassName('Root', platform), {
+      'Root--transition': !disableAnimation && transition,
+      'Root--no-motion': disableAnimation,
+    })}>
+      {views.map((view) => {
+        const viewId = getNavId(view.props, warn);
+        if (viewId !== activeView && !(transition && viewId === prevView)) {
+          return null;
+        }
+        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
+        return (
+          <div
+            key={viewId}
+            ref={(e) => viewNodes[viewId] = e}
+            onAnimationEnd={isTransitionTarget ? onAnimationEnd : null}
+            vkuiClass={classNames('Root__view', {
+              'Root__view--hide-back': transition && viewId === prevView && isBack,
+              'Root__view--hide-forward': transition && viewId === prevView && !isBack,
+              'Root__view--show-back': transition && viewId === activeView && isBack,
+              'Root__view--show-forward': transition && viewId === activeView && !isBack,
+              'Root__view--active': !transition && viewId === activeView,
+            })}
+          >{view}</div>
+        );
+      })}
+      <AppRootPortal>
+        {!!popout && <div vkuiClass="Root__popout">{popout}</div>}
+        {!!modal && <div vkuiClass="Root__modal">{modal}</div>}
+      </AppRootPortal>
+    </div>
+  );
+};
+
+export default Root;
+
+function setPanelScroll(e: HTMLElement, scroll: number) {
+  // eslint-disable-next-line no-restricted-properties
+  const pan: HTMLElement | null = e.querySelector('[data-vkui-active-panel=true]');
+  pan && (pan.scrollTop = scroll);
 }
-
-export default withContext(withContext(withContext(
-  withPlatform(withDOM<RootProps>(Root)),
-  SplitColContext,
-  'splitCol',
-), ConfigProviderContext, 'configProvider'), ScrollContext, 'scroll');

package/src/components/Search/Search.tsx

@@ -5,7 +5,7 @@ import { getClassName } from '../../helpers/getClassName';
 import { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';
 import { IOS, VKCOM } from '../../lib/platform';
 import { HasPlatform, HasRef } from '../../types';
-import Touch, { TouchEvent } from '../Touch/Touch';
+import { Touch, TouchEvent } from '../Touch/Touch';
 import { VKUITouchEvent } from '../../lib/touch';
 import { noop } from '../../lib/utils';
 import Text from '../Typography/Text/Text';

package/src/components/Separator/Readme.md

@@ -1,4 +1,6 @@
-⚠️ *Предпочтительнее использовать компонент [Spacing](/#!/Spacing)*
+> **Важно**
+>
+>Компонент устарел. Предпочтительнее использовать компонент [Spacing](#!/Spacing)
 
 Используется для разделения какого-либо контента. Отступы справа и слева контролируются свойством `wide`.
 

package/src/components/SimpleCell/SimpleCell.tsx

@@ -71,7 +71,7 @@ const SimpleCell: React.FC<SimpleCellProps> = ({
   multiline,
   sizeY,
   ...restProps
-}) => {
+}: SimpleCellProps) => {
   const platform = usePlatform();
   const hasAfter = hasReactNode(after) || expandable && platform === IOS;
 

package/src/components/SimpleCheckbox/Readme.md

@@ -0,0 +1,17 @@
+Надстройка над `<input type="checkbox" />`. Компонент принимает все валидные для этого элемента свойства.
+
+Компонент является упрощенной версией обычного чекбокса `Checkbox` и предназначен для использования внутри других блоков таких как таблицы 
+
+>**Важно**
+>
+>Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильный компоненты](#/Unstable).
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', padding: '24px 16px', background: 'white' }}>
+  <SimpleCheckbox defaultChecked style={{ margin: '0 10px' }} />
+  <SimpleCheckbox style={{ margin: '0 10px' }} />
+  <SimpleCheckbox defaultChecked style={{ margin: '0 10px' }} />
+  <SimpleCheckbox indeterminate style={{ margin: '0 10px' }} />
+  <SimpleCheckbox defaultIndeterminate style={{ margin: '0 10px' }} />
+</div>
+```

package/src/components/SimpleCheckbox/SimpleCheckbox.css

@@ -0,0 +1,115 @@
+.SimpleCheckbox {
+  display: block;
+  margin: -10px;
+  padding: 10px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.SimpleCheckbox__input {
+  position: absolute;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.SimpleCheckbox__container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.SimpleCheckbox__icon {
+  flex-shrink: 0;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: 4px;
+  display: flex;
+}
+
+.SimpleCheckbox__icon--on {
+  color: var(--accent);
+  display: none;
+}
+
+.SimpleCheckbox__icon--indeterminate {
+  color: var(--accent);
+  display: none;
+}
+
+.SimpleCheckbox__icon--off {
+  color: var(--icon_tertiary);
+}
+
+.SimpleCheckbox__input:checked ~ .SimpleCheckbox__container .SimpleCheckbox__icon--on {
+  display: flex;
+}
+
+.SimpleCheckbox__input:indeterminate ~ .SimpleCheckbox__container .SimpleCheckbox__icon--indeterminate,
+.SimpleCheckbox__input:checked ~ .SimpleCheckbox__container .SimpleCheckbox__icon--off {
+  display: none;
+}
+
+.SimpleCheckbox__input:indeterminate ~ .SimpleCheckbox__container .SimpleCheckbox__icon--indeterminate {
+  display: flex;
+}
+
+.SimpleCheckbox__input:indeterminate ~ .SimpleCheckbox__container .SimpleCheckbox__icon--on,
+.SimpleCheckbox__input:indeterminate ~ .SimpleCheckbox__container .SimpleCheckbox__icon--off {
+  display: none;
+}
+
+.SimpleCheckbox__input[disabled] ~ .SimpleCheckbox__container {
+  opacity: .6;
+}
+
+.SimpleCheckbox--ios.SimpleCheckbox--sizeY-compact,
+.SimpleCheckbox--android.SimpleCheckbox--sizeY-compact {
+  margin: -8px;
+  padding: 8px;
+  width: 20px;
+  height: 20px;
+}
+
+.SimpleCheckbox--vkcom {
+  margin: 0;
+  padding: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+}
+
+.SimpleCheckbox--vkcom .SimpleCheckbox__activeShadow,
+.SimpleCheckbox--vkcom .SimpleCheckbox__hoverShadow {
+  margin: 3px;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: inherit;
+  transition: inherit;
+}
+
+.SimpleCheckbox--vkcom.SimpleCheckbox--active .SimpleCheckbox__activeShadow {
+  background-color: var(--background_highlighted);
+}
+
+.SimpleCheckbox--vkcom.SimpleCheckbox--hover .SimpleCheckbox__hoverShadow {
+  background-color: var(--background_hover);
+}
+
+.SimpleCheckbox--vkcom .SimpleCheckbox__icon {
+  border-radius: 3px;
+  padding: 1px;
+  border-width: 1px;
+}
+
+.SimpleCheckbox--vkcom .SimpleCheckbox__input[disabled] ~ .SimpleCheckbox__container {
+  opacity: .4;
+}