@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/ActionSheet/types.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { PlacementWithAuto } from '../../lib/floating/types';
+import { FocusTrapProps } from '../FocusTrap/FocusTrap';
+
+export type PopupDirection =
+  | 'top'
+  | 'bottom'
+  | ((elRef: React.RefObject<HTMLDivElement>) => 'top' | 'bottom');
+export type ToggleRef = Element | null | undefined | React.RefObject<Element>;
+
+export interface SharedDropdownProps extends FocusTrapProps {
+  closing: boolean;
+  /**
+   * Элемент, рядом с которым вылезает попап на десктопе.
+   * Лучше передавать RefObject c current.
+   * В v6 будет обязательным.
+   */
+  toggleRef?: ToggleRef; // TODO [>=6]: сделать обязательным
+  /**
+   * Направление на десктопе
+   *  @deprecated v5.7.0
+   *
+   * Используйте `placement` для позиционирования
+   */
+  popupDirection?: PopupDirection;
+  /**
+   * Позиционирование всплывающего окна для десктопа.
+   * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства
+   */
+  placement?: PlacementWithAuto;
+  /**
+   * Отступ, где заданное кол-во единиц равняется пикселям
+   * */
+  popupOffsetDistance?: number;
+}

package/src/components/ActionSheetItem/ActionSheetItem.module.css

@@ -0,0 +1,224 @@
+.ActionSheetItem {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--vkui--color_text_primary);
+  padding: 0 20px;
+  min-height: 48px;
+  box-sizing: border-box;
+}
+
+.ActionSheetItem__container,
+.ActionSheetItem__before,
+.ActionSheetItem__after {
+  position: relative;
+}
+
+.ActionSheetItem__before,
+.ActionSheetItem__after {
+  flex-shrink: 0;
+}
+
+.ActionSheetItem__container {
+  max-width: 100%;
+  flex-grow: 1;
+  padding: 10px 0;
+}
+
+.ActionSheetItem--ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ActionSheetItem__content {
+  display: flex;
+  align-items: baseline;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.ActionSheetItem--ellipsis .ActionSheetItem__content {
+  justify-content: flex-start;
+}
+
+.ActionSheetItem__children {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ActionSheetItem__subtitle {
+  color: var(--vkui--color_text_secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+
+.ActionSheetItem__meta {
+  color: var(--vkui--color_text_secondary);
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
+.ActionSheetItem__before {
+  color: var(--vkui--color_icon_accent);
+  margin-right: 16px;
+}
+
+.ActionSheetItem--menu .ActionSheetItem__before {
+  margin-right: 12px;
+}
+
+.ActionSheetItem--ios .ActionSheetItem__before {
+  color: var(--vkui--color_icon_accent_themed);
+  margin-right: 18px;
+}
+
+.ActionSheetItem--mode-destructive .ActionSheetItem__container:first-child {
+  color: var(--vkui--color_text_negative);
+}
+
+.ActionSheetItem--mode-destructive .ActionSheetItem__before {
+  color: var(--vkui--color_icon_negative);
+}
+
+.ActionSheetItem__after {
+  display: flex;
+  flex-direction: row;
+  margin-left: 16px;
+  color: var(--vkui--color_icon_accent);
+}
+
+/* stylelint-disable-next-line selector-max-universal -- gap 12px */
+.ActionSheetItem__after > *:not(:last-child) {
+  margin-right: 12px;
+}
+
+/**
+ * iOS
+ */
+
+.ActionSheetItem--ios {
+  padding: 14px 18px;
+  min-height: 56px;
+  color: var(--vkui--color_text_accent_themed);
+  background: var(--vkui--color_background_modal);
+}
+
+.ActionSheetItem--rich {
+  color: var(--vkui--color_text_primary);
+}
+
+.ActionSheet--ios.ActionSheetItem--selectable {
+  padding: 14px 16px;
+}
+
+.ActionSheetItem--ios.ActionSheetItem--mode-destructive {
+  color: var(--vkui--color_text_negative);
+}
+
+.ActionSheetItem--ios::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vkui--color_background_modal);
+  content: '';
+  transition: opacity 0.15s ease-out, background-color 0.15s ease-out;
+}
+
+.ActionSheetItem--ios::after {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 1px;
+  content: '';
+  top: 0;
+  background: var(--vkui--color_separator_primary_alpha);
+  transform-origin: center bottom;
+}
+
+@media (min-resolution: 2dppx) {
+  .ActionSheetItem--ios::after {
+    transform: scaleY(0.5);
+  }
+}
+@media (min-resolution: 3dppx) {
+  .ActionSheetItem--ios::after {
+    transform: scaleY(0.33);
+  }
+}
+
+.ActionSheetItem--ios:first-child::after,
+.ActionSheetItem--mode-cancel::after,
+.ActionSheet--ios .ActionSheetItem--last::after,
+.ActionSheet--ios .ActionSheet__header:empty {
+  content: none;
+}
+
+.ActionSheetItem--ios.ActionSheetItem--active::before {
+  background-color: var(--vkui--color_transparent--active);
+  opacity: 1;
+  transition: none;
+}
+
+.ActionSheetItem--ios .ActionSheetItem__container {
+  padding: 0;
+}
+
+.ActionSheetItem--ios .ActionSheetItem--centered {
+  justify-content: center;
+}
+
+.ActionSheetItem--mode-cancel {
+  min-height: 52px;
+}
+
+/**
+ * Desktop
+ */
+
+.ActionSheetItem--menu {
+  width: auto;
+  cursor: pointer;
+}
+
+/**
+ * Disabled
+ */
+
+.ActionSheetItem[disabled] .ActionSheetItem__children,
+.ActionSheetItem[disabled] .ActionSheetItem__meta,
+.ActionSheetItem[disabled] .ActionSheetItem__subtitle {
+  color: var(--vkui--color_text_secondary);
+}
+
+.ActionSheetItem[disabled] .ActionSheetItem__marker,
+.ActionSheetItem[disabled] .ActionSheetItem__before {
+  color: var(--vkui--color_icon_secondary);
+}
+
+/**
+ * SizeY = compact
+ */
+
+.ActionSheetItem--sizeY-compact {
+  min-height: 32px;
+}
+
+.ActionSheetItem--sizeY-compact.ActionSheetItem--ios {
+  min-height: 36px;
+  padding: 4px 20px 4px 18px;
+}
+
+.ActionSheetItem--sizeY-compact:not(.ActionSheetItem--ios)
+  + .ActionSheetItem--sizeY-compact:not(.ActionSheetItem--ios) {
+  margin-top: 2px;
+}
+
+.ActionSheetItem--sizeY-compact .ActionSheetItem__container {
+  padding: 5px 0;
+}

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';
+import { Tappable } from '../Tappable/Tappable';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { Text } from '../Typography/Text/Text';
+import { Title } from '../Typography/Title/Title';
+import { Radio } from './subcomponents/Radio/Radio';
+import styles from './ActionSheetItem.module.css';
+
+export interface ActionSheetItemProps
+  extends React.HTMLAttributes<HTMLElement>,
+    React.AnchorHTMLAttributes<HTMLElement>,
+    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {
+  mode?: 'default' | 'destructive' | 'cancel';
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+  meta?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  autoClose?: boolean;
+  selectable?: boolean;
+  disabled?: boolean;
+  /**
+   * Все текстовые элементы при необходимости занимают несколько строк
+   */
+  multiline?: boolean;
+  /**
+   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.
+   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.
+   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.
+   */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onImmediateClick?: React.MouseEventHandler<HTMLElement>;
+  /**
+   * Иконка для `checked` режима.
+   */
+  iconChecked?: React.ReactNode;
+  /**
+   * Позволяет отделить ActionItem от CancelItem для определении того,
+   * кто вызвал закрытие ActionSheet. Используется в ActionSheet.onClose()
+   */
+  isCancelItem?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
+ */
+export const ActionSheetItem = ({
+  children,
+  autoClose,
+  mode = 'default',
+  meta,
+  subtitle,
+  before,
+  after,
+  selectable,
+  value,
+  name,
+  checked,
+  defaultChecked,
+  onChange,
+  onClick,
+  onImmediateClick,
+  multiline = false,
+  iconChecked,
+  className,
+  isCancelItem,
+  ...restProps
+}: ActionSheetItemProps) => {
+  const platform = usePlatform();
+  const { onItemClick = () => noop, mode: actionSheetMode } =
+    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);
+  const { sizeY } = useAdaptivityWithJSMediaQueries();
+
+  let Component: React.ElementType = restProps.href ? 'a' : 'div';
+
+  if (selectable) {
+    Component = 'label';
+  }
+
+  const isRich = subtitle || meta || selectable;
+  const isCentered = !isRich && !before && platform === Platform.IOS;
+
+  return (
+    <Tappable
+      Component={Component}
+      {...restProps}
+      onClick={
+        selectable
+          ? onClick
+          : onItemClick({
+              action: onClick,
+              immediateAction: onImmediateClick,
+              autoClose: Boolean(autoClose),
+              isCancelItem: Boolean(isCancelItem),
+            })
+      }
+      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}
+      className={classNames(
+        styles['ActionSheetItem'],
+        platform === Platform.IOS && styles['ActionSheetItem--ios'],
+        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],
+        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],
+        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],
+        isRich && styles['ActionSheetItem--rich'],
+        actionSheetMode === 'menu' && styles['ActionSheetItem--menu'],
+        selectable && styles['ActionSheetItem--selectable'],
+        className,
+      )}
+    >
+      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}
+      <div
+        className={classNames(
+          styles['ActionSheetItem__container'],
+          !multiline && styles['ActionSheetItem--ellipsis'],
+        )}
+      >
+        <div
+          className={classNames(
+            styles['ActionSheetItem__content'],
+            isCentered && styles['ActionSheetItem--centered'],
+          )}
+        >
+          {platform === Platform.IOS ? (
+            <Title
+              className={styles['ActionSheetItem__children']}
+              weight={mode === 'cancel' ? '2' : '3'}
+              level={isCentered ? '2' : '3'}
+            >
+              {children}
+            </Title>
+          ) : (
+            <Text className={styles['ActionSheetItem__children']}>{children}</Text>
+          )}
+          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}
+        </div>
+        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}
+      </div>
+      {(selectable || after) && (
+        <div className={styles['ActionSheetItem__after']}>
+          {after}
+          {selectable && (
+            <Radio
+              name={name}
+              value={value}
+              onChange={onChange}
+              onClick={onItemClick({
+                action: noop,
+                immediateAction: noop,
+                autoClose: Boolean(autoClose),
+                isCancelItem: Boolean(isCancelItem),
+              })}
+              defaultChecked={defaultChecked}
+              checked={checked}
+              disabled={restProps.disabled}
+            >
+              {iconChecked}
+            </Radio>
+          )}
+        </div>
+      )}
+    </Tappable>
+  );
+};

package/src/components/ActionSheetItem/subcomponents/Radio/Radio.module.css

@@ -0,0 +1,9 @@
+/* stylelint-disable-next-line selector-max-universal -- отключаем иконку */
+.ActionSheetItemRadio__input ~ * {
+  display: none;
+}
+
+/* stylelint-disable-next-line selector-max-universal -- включаем иконку если checked */
+.ActionSheetItemRadio__input:checked ~ * {
+  display: block;
+}

package/src/components/ActionSheetItem/subcomponents/Radio/Radio.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';
+import { HasRef, HasRootRef } from '../../../../types';
+import { AdaptiveIconRenderer } from '../../../AdaptiveIconRenderer/AdaptiveIconRenderer';
+import { RootComponent } from '../../../RootComponent/RootComponent';
+import { VisuallyHidden } from '../../../VisuallyHidden/VisuallyHidden';
+import styles from './Radio.module.css';
+
+const adaptiveIcon = (
+  <AdaptiveIconRenderer IconCompact={Icon20CheckCircleOn} IconRegular={Icon24CheckCircleOn} />
+);
+
+interface ActionSheetItemCheckedProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLInputElement> {
+  /**
+   * Иконка для `checked` режима.
+   */
+  children?: React.ReactNode;
+}
+
+export const Radio = ({
+  children = adaptiveIcon,
+  getRootRef,
+  getRef,
+  className,
+  style,
+  ...restProps
+}: ActionSheetItemCheckedProps) => {
+  return (
+    <RootComponent getRootRef={getRootRef} className={className} style={style}>
+      <VisuallyHidden
+        Component="input"
+        getRootRef={getRef}
+        type="radio"
+        className={styles['ActionSheetItemRadio__input']}
+        {...restProps}
+      />
+      {children}
+    </RootComponent>
+  );
+};

package/src/components/AdaptiveIconRenderer/AdaptiveIconRenderer.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
+
+export interface AdaptiveIconRendererProps {
+  IconCompact: React.ComponentType<{ className?: string }>;
+  IconRegular: React.ComponentType<{ className?: string }>;
+}
+
+/**
+ * @since 5.4.0
+ * @see https://vkcom.github.io/VKUI/#/AdaptiveIconRenderer
+ */
+export const AdaptiveIconRenderer = ({ IconCompact, IconRegular }: AdaptiveIconRendererProps) => {
+  const { sizeY } = useAdaptivityConditionalRender();
+
+  return (
+    <React.Fragment>
+      {sizeY.compact && <IconCompact className={sizeY.compact.className} />}
+      {sizeY.regular && <IconRegular className={sizeY.regular.className} />}
+    </React.Fragment>
+  );
+};

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';
+
+export interface SizeProps {
+  sizeX?: SizeType;
+  sizeY?: SizeType;
+}
+
+export interface AdaptivityProps extends SizeProps {
+  /**
+   * @ignore
+   */
+  viewWidth?: ViewWidth;
+  /**
+   * @ignore
+   */
+  viewHeight?: ViewHeight;
+  /**
+   * @ignore
+   */
+  hasPointer?: boolean;
+  /**
+   * @ignore
+   */
+  hasHover?: boolean;
+}
+
+export const AdaptivityContext = React.createContext<AdaptivityProps>({});

package/src/components/AdaptivityProvider/AdaptivityProvider.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { hasMouse as _hasPointer } from '@vkontakte/vkjs';
+import { BridgeAdaptivity, useBridgeAdaptivity } from '../../hooks/useBridgeAdaptivity';
+import { BREAKPOINTS, SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';
+import { warnOnce } from '../../lib/warnOnce';
+import { HasChildren } from '../../types';
+import { AdaptivityContext, type AdaptivityProps } from './AdaptivityContext';
+
+const warn = warnOnce('AdaptivityProvider');
+
+export interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider
+ */
+export const AdaptivityProvider = ({
+  viewWidth,
+  viewHeight,
+  sizeX,
+  sizeY,
+  hasPointer,
+  hasHover,
+  children,
+}: AdaptivityProviderProps) => {
+  // TODO [>=6]: удалить использование хука (#5049)
+  /* eslint-disable @typescript-eslint/naming-convention */
+  const LEGACY_isPerhapsPropsByBridgeTypeAdaptive =
+    viewWidth !== undefined && viewHeight !== undefined;
+  const LEGACY_isPerhapsPropsByBridgeTypeForceMobile =
+    viewWidth !== undefined && sizeX !== undefined && sizeY !== undefined;
+  const LEGACY_disableInternalUseBridgeAdaptivity =
+    LEGACY_isPerhapsPropsByBridgeTypeAdaptive || LEGACY_isPerhapsPropsByBridgeTypeForceMobile;
+  const LEGACY_bridge = useBridgeAdaptivity(LEGACY_disableInternalUseBridgeAdaptivity);
+  /* eslint-enable @typescript-eslint/naming-convention */
+
+  if (process.env.NODE_ENV === 'development') {
+    // TODO [>=6]: удалить warn
+    if (!LEGACY_disableInternalUseBridgeAdaptivity) {
+      warn("[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useAdaptivity()` из @vkontakte/vk-bridge-react и результат передайте в компонент (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore
+    }
+  }
+
+  const adaptivity = React.useMemo(
+    () =>
+      calculateAdaptivity(
+        {
+          viewWidth,
+          viewHeight,
+          sizeX,
+          sizeY,
+          hasPointer,
+          hasHover,
+        },
+        LEGACY_bridge,
+      ),
+    [viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, LEGACY_bridge],
+  );
+
+  return <AdaptivityContext.Provider value={adaptivity}>{children}</AdaptivityContext.Provider>;
+};
+
+function calculateAdaptivity(
+  { viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }: AdaptivityProps,
+  LEGACY_bridge: BridgeAdaptivity, // eslint-disable-line @typescript-eslint/naming-convention
+) {
+  // TODO [>=6]: удалить блок кода c использованием LEGACY_bridge (#5049)
+  //  https://github.com/VKCOM/VKUI/blob/v5.5.5/packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.tsx#L46-L92
+  if (LEGACY_bridge.type === 'adaptive') {
+    const { viewportWidth, viewportHeight } = LEGACY_bridge;
+
+    if (viewportWidth >= BREAKPOINTS.DESKTOP) {
+      viewWidth = ViewWidth.DESKTOP;
+    } else if (viewportWidth >= BREAKPOINTS.TABLET) {
+      viewWidth = ViewWidth.TABLET;
+    } else if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {
+      viewWidth = ViewWidth.SMALL_TABLET;
+    } else if (viewportWidth >= BREAKPOINTS.MOBILE) {
+      viewWidth = ViewWidth.MOBILE;
+    } else {
+      viewWidth = ViewWidth.SMALL_MOBILE;
+    }
+
+    if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {
+      viewHeight = ViewHeight.MEDIUM;
+    } else if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {
+      viewHeight = ViewHeight.SMALL;
+    } else {
+      viewHeight = ViewHeight.EXTRA_SMALL;
+    }
+
+    if (viewWidth <= ViewWidth.MOBILE) {
+      sizeX = SizeType.COMPACT;
+    } else {
+      sizeX = SizeType.REGULAR;
+    }
+
+    if (
+      (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||
+      viewHeight <= ViewHeight.EXTRA_SMALL
+    ) {
+      sizeY = SizeType.COMPACT;
+    } else {
+      sizeY = SizeType.REGULAR;
+    }
+  } else if (
+    LEGACY_bridge.type === 'force_mobile' ||
+    LEGACY_bridge.type === 'force_mobile_compact'
+  ) {
+    viewWidth = ViewWidth.MOBILE;
+    sizeX = SizeType.COMPACT;
+
+    if (LEGACY_bridge.type === 'force_mobile_compact') {
+      sizeY = SizeType.COMPACT;
+    } else {
+      sizeY = SizeType.REGULAR;
+    }
+  } else {
+    if (sizeX === undefined && viewWidth !== undefined) {
+      if (viewWidth <= ViewWidth.MOBILE) {
+        sizeX = SizeType.COMPACT;
+      } else {
+        sizeX = SizeType.REGULAR;
+      }
+    }
+    if (sizeY === undefined && viewWidth !== undefined && viewHeight !== undefined) {
+      if (
+        (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||
+        viewHeight <= ViewHeight.EXTRA_SMALL
+      ) {
+        sizeY = SizeType.COMPACT;
+      } else {
+        sizeY = SizeType.REGULAR;
+      }
+    }
+  }
+
+  return {
+    viewWidth,
+    viewHeight,
+    sizeX,
+    sizeY,
+    hasPointer,
+    hasHover,
+  };
+}