@vkontakte/vkui 5.8.2 → 5.9.0

package/src/components/Alert/Alert.module.css

@@ -0,0 +1,294 @@
+.Alert {
+  user-select: none;
+  color: var(--vkui--color_text_primary);
+  position: relative;
+  min-width: 280px;
+  max-width: 416px;
+  margin: auto 24px;
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
+  animation: animation-android-alert-intro 0.2s var(--vkui--animation_easing_platform);
+}
+
+.Alert--desktop {
+  width: 100%;
+}
+
+.Alert--closing {
+  transform: scale(0.95);
+  opacity: 0;
+  transition: transform 0.2s var(--vkui--animation_easing_platform),
+    opacity 0.2s var(--vkui--animation_easing_platform);
+}
+
+.Alert::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vkui--color_background_modal);
+  content: '';
+  border-radius: inherit;
+}
+
+.Alert__content {
+  position: relative;
+  padding: 24px 24px 16px;
+}
+
+.Alert__content--withButton {
+  padding-right: 52px;
+}
+
+.Alert__action {
+  white-space: nowrap;
+  background: transparent;
+}
+
+.Alert__actions {
+  display: flex;
+  max-width: 100%;
+  position: relative;
+  padding: 0 12px 12px;
+}
+
+.Alert__header {
+  margin-bottom: 8px;
+}
+
+.Alert__text {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Alert__actions--direction-horizontal {
+  justify-content: flex-end;
+}
+
+.Alert__actions--direction-vertical {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+.Alert__actions > * {
+  margin: 4px;
+}
+
+.Alert__actions--align-left {
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.Alert__actions--align-center {
+  justify-content: center;
+  align-items: center;
+}
+
+.Alert__actions--align-right {
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+/**
+ * iOS version
+ */
+.Alert--ios {
+  width: 270px;
+  min-width: 270px;
+  overflow: hidden;
+  animation: animation-ios-alert-intro 0.3s var(--vkui--animation_easing_platform);
+  box-shadow: none;
+}
+
+.Alert--ios.Alert--closing {
+  transform: none;
+  opacity: 0;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+}
+
+.Alert--ios .Alert__content {
+  padding: 20px 16px;
+  text-align: center;
+}
+
+.Alert--ios .Alert__header:not(:last-child) {
+  margin-bottom: 7px;
+}
+
+.Alert--ios .Alert__text {
+  color: inherit;
+}
+
+.Alert--ios .Alert__content::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  right: 0;
+  left: 0;
+  background: var(--vkui--color_separator_primary_alpha);
+  transform-origin: center bottom;
+}
+
+.Alert--ios .Alert__actions {
+  padding: initial;
+}
+
+.Alert--ios .Alert__actions--direction-vertical {
+  flex-direction: column;
+  align-items: initial;
+}
+
+.Alert--ios .Alert__action {
+  font-family: var(--vkui--font_family_base);
+  position: relative;
+  font-size: 17px;
+  line-height: 44px;
+  color: var(--vkui--color_text_accent);
+  border: 0;
+  padding: 0 6px;
+  margin: 0;
+  height: 44px;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 0;
+}
+
+.Alert--ios .Alert__action::after {
+  content: '';
+  position: absolute;
+  background: var(--vkui--color_separator_primary_alpha);
+}
+
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action::after {
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  transform-origin: right center;
+}
+
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action:last-child::after {
+  content: none;
+}
+
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+}
+
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action:first-child {
+  border-bottom-left-radius: var(--vkui--size_border_radius_paper--regular);
+}
+
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action:last-child {
+  border-bottom-right-radius: var(--vkui--size_border_radius_paper--regular);
+}
+
+.Alert--ios .Alert__actions--direction-vertical .Alert__action::after {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  transform-origin: center bottom;
+}
+
+.Alert--ios .Alert__actions--direction-vertical .Alert__action:last-child::after {
+  content: none;
+}
+
+.Alert--ios .Alert__actions--direction-vertical .Alert__action:last-child {
+  border-radius: 0 0 12px 12px;
+}
+
+@media (min-resolution: 2dppx) {
+  .Alert--ios .Alert__content::after,
+  .Alert--ios .Alert__actions--direction-vertical .Alert__action::after {
+    transform: scaleY(0.5);
+  }
+
+  .Alert--ios .Alert__actions--direction-horizontal .Alert__action::after {
+    transform: scaleX(0.5);
+  }
+}
+@media (min-resolution: 3dppx) {
+  .Alert--ios .Alert__content::after,
+  .Alert--ios .Alert__actions--direction-vertical .Alert__action::after {
+    transform: scaleY(0.33);
+  }
+
+  .Alert--ios .Alert__actions--direction-horizontal .Alert__action::after {
+    transform: scaleX(0.33);
+  }
+}
+
+.Alert--ios .Alert__action--mode-cancel {
+  font-weight: 600;
+}
+
+.Alert--ios .Alert__action--mode-destructive {
+  color: var(--vkui--color_text_negative);
+}
+
+/**
+ * VKCOM
+ */
+
+.Alert--vkcom {
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16);
+  width: 400px;
+}
+
+.Alert--vkcom .Alert__content {
+  padding-bottom: 20px;
+}
+
+.Alert--vkcom .Alert__actions {
+  padding: 0 20px 12px;
+}
+
+.Alert--vkcom .Alert__button {
+  order: 2;
+}
+
+.Alert--vkcom .Alert__button--mode-cancel {
+  order: 1;
+}
+
+.Alert__dismiss {
+  position: absolute;
+  color: var(--vkui--color_icon_secondary);
+  top: 8px;
+  right: 8px;
+}
+
+/**
+ * Animations
+ */
+@keyframes animation-ios-alert-intro {
+  from {
+    opacity: 0;
+    transform: scale(1.05);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes animation-android-alert-intro {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Icon20Cancel } from '@vkontakte/icons';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useId } from '../../hooks/useId';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
+import { Platform } from '../../lib/platform';
+import { stopPropagation } from '../../lib/utils';
+import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute } from '../../types';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import { ButtonProps } from '../Button/Button';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { IconButton } from '../IconButton/IconButton';
+import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
+import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
+import { AlertActionProps } from './AlertAction';
+import { AlertActions } from './AlertActions';
+import { AlertHeader, AlertText } from './AlertTypography';
+import styles from './Alert.module.css';
+
+type AlertActionMode = 'cancel' | 'destructive' | 'default';
+
+export interface AlertActionInterface
+  extends Pick<ButtonProps, 'Component'>,
+    AnchorHTMLAttributesOnly,
+    HasDataAttribute {
+  title: string;
+  action?: VoidFunction;
+  autoClose?: boolean;
+  mode: AlertActionMode;
+}
+
+export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
+  actionsLayout?: 'vertical' | 'horizontal';
+  actionsAlign?: AlignType;
+  actions?: AlertActionInterface[];
+  renderAction?: (props: AlertActionProps) => React.ReactNode;
+  header?: React.ReactNode;
+  text?: React.ReactNode;
+  onClose: VoidFunction;
+
+  /**
+   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.
+   */
+  dismissLabel?: string;
+  /**
+   * Расположение кнопки закрытия (внутри и вне `popout'a`)
+   * Доступно только в `compact`-режиме, не отображается на `iOS`
+   */
+  dismissButtonMode?: 'inside' | 'outside';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Alert
+ */
+export const Alert = ({
+  actions = [],
+  actionsLayout = 'horizontal',
+  children,
+  className,
+  style,
+  text,
+  header,
+  onClose,
+  dismissLabel = 'Закрыть предупреждение',
+  renderAction,
+  actionsAlign,
+  dismissButtonMode = 'outside',
+  ...restProps
+}: AlertProps) => {
+  const generatedId = useId();
+
+  const headerId = `vkui-alert-${generatedId}-header`;
+  const textId = `vkui-alert-${generatedId}-text`;
+
+  const platform = usePlatform();
+  const { isDesktop } = useAdaptivityWithJSMediaQueries();
+  const { waitTransitionFinish } = useWaitTransitionFinish();
+
+  const [closing, setClosing] = React.useState(false);
+  const isDismissButtonVisible = isDesktop && platform !== Platform.IOS;
+
+  const elementRef = React.useRef<HTMLDivElement>(null);
+
+  const timeout = platform === Platform.IOS ? 300 : 200;
+
+  const close = React.useCallback(() => {
+    setClosing(true);
+    waitTransitionFinish(
+      elementRef.current,
+      (e?: TransitionEvent) => {
+        if (!e || e.propertyName === 'opacity') {
+          onClose();
+        }
+      },
+      timeout,
+    );
+  }, [elementRef, waitTransitionFinish, onClose, timeout]);
+
+  const onItemClick = React.useCallback(
+    (item: AlertActionInterface) => {
+      const { action, autoClose } = item;
+
+      if (autoClose) {
+        setClosing(true);
+        waitTransitionFinish(
+          elementRef.current,
+          (e?: TransitionEvent) => {
+            if (!e || e.propertyName === 'opacity') {
+              onClose();
+              action && action();
+            }
+          },
+          timeout,
+        );
+      } else {
+        action && action();
+      }
+    },
+    [elementRef, waitTransitionFinish, onClose, timeout],
+  );
+
+  useScrollLock();
+
+  return (
+    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>
+      <FocusTrap
+        {...restProps}
+        getRootRef={elementRef}
+        onClick={stopPropagation}
+        onClose={close}
+        timeout={timeout}
+        className={classNames(
+          styles['Alert'],
+          platform === Platform.IOS && styles['Alert--ios'],
+          platform === Platform.VKCOM && styles['Alert--vkcom'],
+          closing && styles['Alert--closing'],
+          isDesktop && styles['Alert--desktop'],
+        )}
+        role="alertdialog"
+        aria-modal
+        aria-labelledby={headerId}
+        aria-describedby={textId}
+      >
+        <div
+          className={classNames(
+            styles['Alert__content'],
+            dismissButtonMode === 'inside' && styles['Alert__content--withButton'],
+          )}
+        >
+          {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}
+          {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}
+          {children}
+          {isDismissButtonVisible && dismissButtonMode === 'inside' && (
+            <IconButton
+              aria-label={dismissLabel}
+              className={classNames(styles['Alert__dismiss'], 'vkuiInternalAlert__dismiss')}
+              onClick={close}
+              hoverMode="opacity"
+              activeMode="opacity"
+            >
+              <Icon20Cancel />
+            </IconButton>
+          )}
+        </div>
+        <AlertActions
+          actions={actions}
+          actionsAlign={actionsAlign}
+          actionsLayout={actionsLayout}
+          renderAction={renderAction}
+          onItemClick={onItemClick}
+        />
+        {isDismissButtonVisible && dismissButtonMode === 'outside' && (
+          <ModalDismissButton onClick={close} aria-label={dismissLabel} />
+        )}
+      </FocusTrap>
+    </PopoutWrapper>
+  );
+};

package/src/components/Alert/AlertAction.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { AnchorHTMLAttributesOnly } from '../../types';
+import { Button, ButtonProps } from '../Button/Button';
+import { Tappable } from '../Tappable/Tappable';
+import { AlertActionInterface } from './Alert';
+import styles from './Alert.module.css';
+
+export interface AlertActionProps
+  extends Pick<AlertActionInterface, 'Component' | 'mode'>,
+    AnchorHTMLAttributesOnly {
+  children: string;
+  onClick: React.MouseEventHandler<HTMLElement>;
+}
+
+const AlertActionIos = ({ mode, ...restProps }: AlertActionProps) => {
+  return (
+    <Tappable
+      Component={restProps.href ? 'a' : 'button'}
+      className={classNames(
+        styles['Alert__action'],
+        mode === 'destructive' && styles['Alert__action--mode-destructive'],
+        mode === 'cancel' && styles['Alert__action--mode-cancel'],
+      )}
+      {...restProps}
+    />
+  );
+};
+
+const AlertActionBase = ({ mode, ...restProps }: AlertActionProps) => {
+  const platform = usePlatform();
+
+  let buttonMode: ButtonProps['mode'] = 'tertiary';
+
+  if (platform === Platform.VKCOM) {
+    buttonMode = mode === 'cancel' ? 'secondary' : 'primary';
+  }
+
+  return (
+    <Button
+      className={classNames(
+        styles['Alert__button'],
+        mode === 'cancel' && styles['Alert__button--mode-cancel'],
+      )}
+      mode={buttonMode}
+      size="m"
+      {...restProps}
+    />
+  );
+};
+
+export const AlertAction = (props: AlertActionProps) => {
+  const platform = usePlatform();
+
+  if (platform === Platform.IOS) {
+    return <AlertActionIos {...props} />;
+  }
+
+  return <AlertActionBase {...props} />;
+};

package/src/components/Alert/AlertActions.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { AlertActionInterface, AlertProps } from './Alert';
+import { AlertAction } from './AlertAction';
+import styles from './Alert.module.css';
+
+const alignStyles = {
+  left: styles['Alert__actions--align-left'],
+  center: styles['Alert__actions--align-center'],
+  right: styles['Alert__actions--align-right'],
+};
+
+const directionStyles = {
+  vertical: styles['Alert__actions--direction-vertical'],
+  horizontal: styles['Alert__actions--direction-horizontal'],
+};
+
+type ItemClickHandler = (item: AlertActionInterface) => void;
+interface AlertActionsProps
+  extends Pick<AlertProps, 'actions' | 'actionsAlign' | 'renderAction' | 'actionsLayout'> {
+  onItemClick: ItemClickHandler;
+}
+export const AlertActions = ({
+  actions = [],
+  renderAction = (props) => <AlertAction {...props} />,
+  onItemClick,
+  actionsAlign,
+  actionsLayout,
+}: AlertActionsProps) => {
+  const platform = usePlatform();
+
+  const direction: AlertProps['actionsLayout'] =
+    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;
+
+  return (
+    <div
+      className={classNames(
+        styles['Alert__actions'],
+        actionsAlign && alignStyles[actionsAlign],
+        direction && directionStyles[direction],
+      )}
+    >
+      {actions.map((action, i) => {
+        // Убираем
+        const { title: children, action: _, autoClose, ...restProps } = action;
+
+        return (
+          <React.Fragment key={i}>
+            {renderAction({
+              children,
+              onClick: () => onItemClick(action),
+              ...restProps,
+            })}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/Alert/AlertTypography.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { HasChildren } from '../../types';
+import { Caption } from '../Typography/Caption/Caption';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Text } from '../Typography/Text/Text';
+import { Title } from '../Typography/Title/Title';
+import styles from './Alert.module.css';
+
+interface AlertTypography extends HasChildren {
+  id: string;
+}
+export const AlertHeader = (props: AlertTypography) => {
+  const platform = usePlatform();
+
+  switch (platform) {
+    case Platform.IOS:
+      return <Title className={styles['Alert__header']} weight="1" level="3" {...props} />;
+    default:
+      return <Title className={styles['Alert__header']} weight="2" level="2" {...props} />;
+  }
+};
+export const AlertText = (props: AlertTypography) => {
+  const platform = usePlatform();
+
+  switch (platform) {
+    case Platform.VKCOM:
+      return <Footnote className={styles['Alert__text']} {...props} />;
+    case Platform.IOS:
+      return <Caption className={styles['Alert__text']} {...props} />;
+    default:
+      return <Text Component="span" className={styles['Alert__text']} weight="3" {...props} />;
+  }
+};

package/src/components/AppRoot/AppRoot.module.css

@@ -0,0 +1,29 @@
+.AppRoot {
+  height: 100%;
+}
+
+.AppRoot--pointer-has-not {
+  user-select: none;
+}
+
+/** 
+ * Хак для webkit-based браузеров, потому что на версиях iOS <= 14.* исчезает возможность 
+ * редактировать contenteditable элементы, если выше по дереву задан user-select: none; 
+ */
+.AppRoot--pointer-has-not [contenteditable] {
+  user-select: text;
+}
+
+@media (--pointer-has-not) {
+  .AppRoot--pointer-none {
+    user-select: none;
+  }
+
+  .AppRoot--pointer-none [contenteditable] {
+    user-select: text;
+  }
+}
+
+:global(.vkui__root--embedded) .AppRoot {
+  overflow: auto;
+}

package/src/components/AppRoot/AppRoot.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta, Title, ArgTypes, Description } from '@storybook/blocks';
+import { AppRoot } from './AppRoot';
+
+<Meta title="Service/AppRoot" />
+<Title>AppRoot</Title>
+
+<ArgTypes of={AppRoot} />