@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/RichCell/RichCell.module.css

@@ -0,0 +1,143 @@
+.RichCell {
+  display: flex;
+  padding: 8px var(--vkui--size_base_padding_horizontal--regular);
+  min-height: 64px;
+  box-sizing: border-box;
+  color: var(--vkui--color_text_primary);
+  text-decoration: none; /* в случае если Component="a" */
+  font-family: var(--vkui--font_family_base);
+}
+
+.RichCell--sizeY-compact {
+  min-height: 60px;
+}
+
+@media (--sizeY-compact) {
+  .RichCell--sizeY-none {
+    min-height: 60px;
+  }
+}
+
+.RichCell__before {
+  margin-right: 12px;
+}
+
+.RichCell__in {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.RichCell__content {
+  display: flex;
+  word-break: break-word;
+}
+
+.RichCell__content-before {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.RichCell__content-after {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+  padding-left: 12px;
+  box-sizing: border-box;
+}
+
+.RichCell__after-children {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.RichCell__after-caption {
+  margin-top: 2px;
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  color: var(--vkui--color_text_secondary);
+}
+
+.RichCell--sizeY-compact .RichCell__after-caption {
+  font-size: var(--vkui--font_caption1--font_size--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
+}
+
+@media (--sizeY-compact) {
+  .RichCell--sizeY-none .RichCell__after-caption {
+    font-size: var(--vkui--font_caption1--font_size--regular);
+    line-height: var(--vkui--font_caption1--line_height--regular);
+  }
+}
+
+.RichCell__subhead {
+  color: var(--vkui--color_text_secondary);
+}
+
+.RichCell__caption {
+  margin-top: 1px;
+  color: var(--vkui--color_text_secondary);
+}
+
+.RichCell__children {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.RichCell--text-ellipsis .RichCell__subhead,
+.RichCell--text-ellipsis .RichCell__children,
+.RichCell--text-ellipsis .RichCell__text,
+.RichCell--text-ellipsis .RichCell__caption {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.RichCell__bottom {
+  margin-top: 5px;
+}
+
+.RichCell__actions {
+  margin-top: 8px;
+}
+
+.RichCell__children,
+.RichCell__text,
+.RichCell__after-children {
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+}
+
+.RichCell--sizeY-compact .RichCell__children,
+.RichCell--sizeY-compact .RichCell__text,
+.RichCell--sizeY-compact .RichCell__after-children {
+  font-size: var(--vkui--font_subhead--font_size--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
+}
+
+@media (--sizeY-compact) {
+  .RichCell--sizeY-none .RichCell__children,
+  .RichCell--sizeY-none .RichCell__text,
+  .RichCell--sizeY-none .RichCell__after-children {
+    font-size: var(--vkui--font_subhead--font_size--regular);
+    line-height: var(--vkui--font_subhead--line_height--regular);
+  }
+}
+
+/**
+ * CMP:
+ * FormItem
+ **/
+:global(.vkuiInternalFormItem) .RichCell {
+  margin-right: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+  margin-left: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
+@media (--sizeY-compact) {
+  .RichCell--sizeY-none {
+    min-height: 60px;
+  }
+}

package/src/components/RichCell/RichCell.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeType } from '../../lib/adaptivity';
+import { Tappable, TappableProps } from '../Tappable/Tappable';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { RichCellIcon } from './RichCellIcon/RichCellIcon';
+import styles from './RichCell.module.css';
+
+const sizeYClassNames = {
+  none: styles['RichCell--sizeY-none'],
+  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],
+};
+
+export interface RichCellProps extends TappableProps {
+  /**
+   * Контейнер для текста над `children`.
+   */
+  subhead?: React.ReactNode;
+  /**
+   * Контейнер для текста под `children`.
+   */
+  text?: React.ReactNode;
+  /**
+   * Контейнер для текста под `text`.
+   */
+  caption?: React.ReactNode;
+  /**
+   * Контейнер для контента под `caption`. Например `<UsersStack size="m" />`.
+   */
+  bottom?: React.ReactNode;
+  /**
+   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:
+   *
+   * - `mode="primary" size="s"`
+   * - `mode="secondary" size="s"`
+   *
+   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:
+   *
+   * - `mode="horizontal" gap="s" stretched`
+   */
+  actions?: React.ReactNode;
+  /**
+   * `<Avatar size={40|48|72} />`.
+   */
+  before?: React.ReactNode;
+  /**
+   * Иконка 28 или текст.
+   */
+  after?: React.ReactNode;
+  /**
+   * Текст под `after`.
+   */
+  afterCaption?: React.ReactNode;
+  /**
+   * Убирает анимацию нажатия.
+   */
+  disabled?: boolean;
+  /**
+   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.
+   */
+  multiline?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/RichCell
+ */
+export const RichCell = ({
+  subhead,
+  children,
+  text,
+  caption,
+  before,
+  after,
+  afterCaption,
+  bottom,
+  actions,
+  multiline,
+  className,
+  ...restProps
+}: RichCellProps) => {
+  const { sizeY = 'none' } = useAdaptivity();
+
+  return (
+    <Tappable
+      {...restProps}
+      className={classNames(
+        styles['RichCell'],
+        !multiline && styles['RichCell--text-ellipsis'],
+        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
+        className,
+      )}
+    >
+      {before && <div className={styles['RichCell__before']}>{before}</div>}
+      <div className={styles['RichCell__in']}>
+        <div className={styles['RichCell__content']}>
+          <div className={styles['RichCell__content-before']}>
+            {subhead && (
+              <Subhead Component="div" className={styles['RichCell__subhead']}>
+                {subhead}
+              </Subhead>
+            )}
+            <div className={styles['RichCell__children']}>{children}</div>
+            {text && <div className={styles['RichCell__text']}>{text}</div>}
+            {caption && (
+              <Subhead Component="div" className={styles['RichCell__caption']}>
+                {caption}
+              </Subhead>
+            )}
+          </div>
+          {(after || afterCaption) && (
+            <div className={styles['RichCell__content-after']}>
+              {after && <div className={styles['RichCell__after-children']}>{after}</div>}
+              {afterCaption && (
+                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>
+              )}
+            </div>
+          )}
+        </div>
+        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}
+        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}
+      </div>
+    </Tappable>
+  );
+};
+
+RichCell.Icon = RichCellIcon;

package/src/components/RichCell/RichCellIcon/RichCellIcon.module.css

@@ -0,0 +1,11 @@
+.RichCellIcon {
+  width: 48px;
+  height: 40px;
+  box-sizing: border-box;
+  color: var(--vkui--color_icon_accent_themed);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 6px 0 6px 12px;
+}

package/src/components/RichCell/RichCellIcon/RichCellIcon.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../../types';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import styles from './RichCellIcon.module.css';
+
+export type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+
+export const RichCellIcon = (props: RichCellIconProps) => {
+  return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;
+};

package/src/components/RichTooltip/RichTooltip.module.css

@@ -0,0 +1,57 @@
+.RichTooltip {
+  box-shadow: var(--vkui--elevation3);
+  border-radius: var(--vkui--size_border_radius--regular);
+  background-color: var(--vkui--color_background_modal);
+  animation: richtooltip-fade-in 0.2s ease;
+  color: var(--vkui--color_text_primary);
+}
+
+.RichTooltip__arrow {
+  color: var(--vkui--color_background_modal);
+}
+
+.RichTooltip--appearance-accent {
+  background-color: var(--vkui--color_background_accent_tint);
+  color: var(--vkui--color_text_contrast);
+}
+
+.RichTooltip--appearance-accent .RichTooltip__arrow {
+  color: var(--vkui--color_background_accent_tint);
+}
+
+.RichTooltip--appearance-white {
+  background-color: var(--vkui--color_background_contrast);
+  color: var(--vkui--color_text_primary_invariably);
+}
+
+.RichTooltip--appearance-white .RichTooltip__arrow {
+  color: var(--vkui--color_background_contrast);
+}
+
+.RichTooltip--appearance-black {
+  background-color: var(--vkui--color_background_contrast_inverse);
+  color: var(--vkui--color_text_contrast);
+}
+
+.RichTooltip--appearance-black .RichTooltip__arrow {
+  color: var(--vkui--color_background_contrast_inverse);
+}
+
+.RichTooltip--appearance-inversion {
+  background-color: var(--vkui--color_background_modal_inverse);
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+.RichTooltip--appearance-inversion .RichTooltip__arrow {
+  color: var(--vkui--color_background_modal_inverse);
+}
+
+@keyframes richtooltip-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/components/RichTooltip/RichTooltip.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';
+import styles from './RichTooltip.module.css';
+
+const stylesAppearance = {
+  accent: styles['RichTooltip--appearance-accent'],
+  white: styles['RichTooltip--appearance-white'],
+  black: styles['RichTooltip--appearance-black'],
+  inversion: styles['RichTooltip--appearance-inversion'],
+};
+
+export interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {
+  /**
+   * Стиль отображения подсказки
+   */
+  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/RichTooltip
+ */
+export const RichTooltip = ({
+  children,
+  arrow = true,
+  appearance = 'neutral',
+  className,
+  ...popperProps
+}: RichTooltipProps) => {
+  return (
+    <HoverPopper
+      className={classNames(
+        styles['RichTooltip'],
+        appearance !== 'neutral' && stylesAppearance[appearance],
+        className,
+      )}
+      arrow={arrow}
+      arrowClassName={styles['RichTooltip__arrow']}
+      {...popperProps}
+    >
+      {children}
+    </HoverPopper>
+  );
+};

package/src/components/Root/Root.module.css

@@ -0,0 +1,131 @@
+.Root {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.Root--transition {
+  pointer-events: none;
+}
+
+.Root__view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.Root--transition .Root__view {
+  position: fixed;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.Root__scrollCompensation {
+  width: 100%;
+  height: 100%;
+}
+
+.Root__view--show-forward {
+  animation: root-android-animation-show-forward 0.3s var(--vkui--animation_easing_platform);
+}
+
+.Root__view--hide-back {
+  animation: root-android-animation-hide-back 0.3s var(--vkui--animation_easing_platform) forwards;
+}
+
+/**
+ * iOS
+ */
+
+.Root--ios .Root__view--show-back::after,
+.Root--ios .Root__view--hide-forward::after {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: block;
+  content: '';
+  background-color: #000;
+}
+
+.Root--ios .Root__view--show-back::after {
+  animation: root-ios-animation-show-back 0.6s var(--vkui--animation_easing_platform) forwards;
+}
+
+.Root--ios .Root__view--hide-forward::after {
+  animation: root-ios-animation-hide-forward 0.6s var(--vkui--animation_easing_platform);
+}
+
+.Root--ios .Root__view--show-forward {
+  animation: root-ios-animation-show-forward 0.6s var(--vkui--animation_easing_platform);
+}
+
+.Root--ios .Root__view--hide-back {
+  animation: root-ios-animation-hide-back 0.6s var(--vkui--animation_easing_platform) forwards;
+}
+
+@keyframes root-ios-animation-show-back {
+  from {
+    opacity: 0.3;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+@keyframes root-ios-animation-hide-forward {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 0.3;
+  }
+}
+@keyframes root-ios-animation-hide-back {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+@keyframes root-ios-animation-show-forward {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+/**
+ * Android
+ */
+
+@keyframes root-android-animation-hide-back {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+}
+@keyframes root-android-animation-show-forward {
+  from {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/components/Root/Root.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useDOM } from '../../lib/dom';
+import { getNavId, NavIdProps } from '../../lib/getNavId';
+import { Platform } from '../../lib/platform';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { warnOnce } from '../../lib/warnOnce';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { ScrollContext } from '../AppRoot/ScrollContext';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
+import { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { SplitColContext } from '../SplitCol/SplitColContext';
+import styles from './Root.module.css';
+
+export interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
+  activeView: string;
+  onTransition?(params: { isBack: boolean; from: string; to: string }): void;
+  children: React.ReactElement | Iterable<React.ReactElement>;
+}
+
+export interface RootState {
+  activeView: string;
+  transition: boolean;
+  isBack?: boolean;
+  prevView?: string;
+}
+
+const warn = warnOnce('Root');
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Root
+ */
+export const Root = ({
+  children,
+  activeView: _activeView,
+  onTransition,
+  nav,
+  ...restProps
+}: RootProps) => {
+  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 | null>>({}).current;
+
+  const { transitionMotionEnabled = true } = useConfigProvider();
+  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);
+      scrolls[activeView] = scroll.getScroll().y;
+      _setState({
+        activeView: panel,
+        prevView: activeView,
+        transition: !disableAnimation,
+        isBack,
+      });
+    }
+  };
+  const finishTransition = React.useCallback(
+    () => _setState({ activeView, prevView, isBack, transition: false }),
+    [activeView, isBack, prevView],
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    (document!.activeElement as HTMLElement).blur();
+  }, [activeView]);
+
+  // Нужен переход
+  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);
+  useIsomorphicLayoutEffect(() => {
+    if (!transition && prevView) {
+      // Закончился переход
+      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);
+      onTransition &&
+        onTransition({
+          isBack: Boolean(isBack),
+          from: prevView,
+          to: activeView,
+        });
+    }
+  }, [transition, prevView]);
+
+  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);
+  React.useEffect(() => {
+    if (!transition) {
+      fallbackTransition.clear();
+      return;
+    }
+    fallbackTransition.set();
+  }, [fallbackTransition, transition]);
+
+  const onAnimationEnd = (e: React.AnimationEvent) => {
+    if (
+      [
+        styles['root-android-animation-hide-back'],
+        styles['root-android-animation-show-forward'],
+        styles['root-ios-animation-hide-back'],
+        styles['root-ios-animation-show-forward'],
+      ].includes(e.animationName)
+    ) {
+      finishTransition();
+    }
+  };
+
+  return (
+    <RootComponent
+      {...restProps}
+      baseClassName={classNames(
+        styles['Root'],
+        platform === Platform.IOS && styles['Root--ios'],
+        transition && styles['Root--transition'],
+      )}
+    >
+      {views.map((view) => {
+        const viewId = getNavId(view.props, warn);
+        if (viewId !== activeView && !(transition && viewId === prevView)) {
+          return null;
+        }
+        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);
+        const compensateScroll =
+          transition && (viewId === prevView || (isBack && viewId === activeView));
+        return (
+          <div
+            key={viewId}
+            ref={(e) => viewId && (viewNodes[viewId] = e)}
+            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
+            className={classNames(
+              styles['Root__view'],
+              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],
+              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],
+              transition && viewId === activeView && isBack && styles['Root__view--show-back'],
+              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],
+            )}
+          >
+            <NavTransitionDirectionProvider isBack={isBack}>
+              <NavTransitionProvider entering={transition && viewId === activeView}>
+                <div
+                  className={styles['Root__scrollCompensation']}
+                  style={{
+                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,
+                  }}
+                >
+                  {view}
+                </div>
+              </NavTransitionProvider>
+            </NavTransitionDirectionProvider>
+          </div>
+        );
+      })}
+    </RootComponent>
+  );
+};