@vkontakte/vkui 5.8.2 → 5.9.0

package/src/components/InfoRow/InfoRow.module.css

@@ -0,0 +1,14 @@
+.InfoRow {
+  user-select: text;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.InfoRow__header {
+  display: block;
+  margin-bottom: 2px;
+  color: var(--vkui--color_text_subhead);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/components/InfoRow/InfoRow.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { Headline } from '../Typography/Headline/Headline';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
+import styles from './InfoRow.module.css';
+
+export interface InfoRowProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  header: React.ReactNode;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/InfoRow
+ */
+export const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (
+  <Headline
+    {...restProps}
+    Component="span"
+    className={classNames(styles['InfoRow'], className)}
+    weight="3"
+  >
+    {hasReactNode(header) && (
+      <Subhead Component="strong" className={styles['InfoRow__header']}>
+        {header}
+        <VisuallyHidden>&nbsp;</VisuallyHidden>
+      </Subhead>
+    )}
+    {children}
+  </Headline>
+);

package/src/components/Input/Input.module.css

@@ -0,0 +1,75 @@
+.Input {
+  position: relative;
+  line-height: 20px;
+  font-size: 16px;
+}
+
+.Input--align-center .Input__el {
+  text-align: center;
+}
+
+.Input--align-right .Input__el {
+  text-align: right;
+}
+
+.Input__el {
+  height: var(--vkui--size_field_height--regular);
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: none;
+  border: 0;
+  border-radius: inherit;
+  appearance: none;
+  color: var(--vkui--color_text_primary);
+  padding: 0 12px;
+  position: relative;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+  background: transparent;
+}
+
+/*
+ * Отключаем нативные элементы для <input type="number" />
+ *
+ * см. https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
+ */
+.Input__el::-webkit-outer-spin-button,
+.Input__el::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.Input__el[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.Input--sizeY-compact .Input__el {
+  height: var(--vkui--size_field_height--compact);
+}
+
+@media (--sizeY-compact) {
+  .Input--sizeY-none .Input__el {
+    height: var(--vkui--size_field_height--compact);
+  }
+}
+
+.Input--hasBefore .Input__el {
+  padding-left: 0;
+}
+
+.Input--hasAfter .Input__el {
+  padding-right: 0;
+}
+
+.Input__el:disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.Input__el::placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.Input__el:disabled::placeholder {
+  color: var(--vkui--color_text_secondary);
+}

package/src/components/Input/Input.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeType } from '../../lib/adaptivity';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { FormField, FormFieldProps } from '../FormField/FormField';
+import { Text } from '../Typography/Text/Text';
+import styles from './Input.module.css';
+
+const sizeYClassNames = {
+  none: styles['Input--sizeY-none'],
+  [SizeType.COMPACT]: styles['Input--sizeY-compact'],
+};
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement>,
+    HasRootRef<HTMLDivElement>,
+    HasAlign,
+    FormFieldProps {}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Input
+ */
+export const Input = ({
+  type = 'text',
+  align = 'left',
+  getRef,
+  className,
+  getRootRef,
+  style,
+  before,
+  after,
+  status,
+  mode,
+  ...restProps
+}: InputProps) => {
+  const { sizeY = 'none' } = useAdaptivity();
+
+  return (
+    <FormField
+      style={style}
+      className={classNames(
+        styles['Input'],
+        align === 'right' && styles['Input--align-right'],
+        align === 'center' && styles['Input--align-center'],
+        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
+        before && styles['Input--hasBefore'],
+        after && styles['Input--hasAfter'],
+        className,
+      )}
+      getRootRef={getRootRef}
+      before={before}
+      after={after}
+      disabled={restProps.disabled}
+      mode={mode}
+      status={status}
+    >
+      <Text
+        {...restProps}
+        Component="input"
+        normalize={false}
+        type={type}
+        className={styles['Input__el']}
+        getRootRef={getRef}
+      />
+    </FormField>
+  );
+};

package/src/components/InputLike/InputLike.module.css

@@ -0,0 +1,33 @@
+.InputLike__mask {
+  position: relative;
+  font-family: var(--vkui--font_family_base);
+}
+
+.InputLike__mask::after {
+  content: '';
+  position: absolute;
+  width: calc(100% - 0.1em);
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  border-bottom: solid 1px var(--vkui--color_text_secondary);
+}
+
+.InputLike__mask:last-child {
+  margin-right: 1px;
+}
+
+.InputLike__last_character {
+  /* stylelint-disable-next-line declaration-no-important */
+  letter-spacing: 1px !important;
+}
+
+.InputLike__divider {
+  color: var(--vkui--color_text_secondary);
+  /* stylelint-disable-next-line declaration-no-important */
+  letter-spacing: 1px !important;
+}
+
+.InputLike--full + .InputLike__divider {
+  color: var(--vkui--color_text_primary);
+}

package/src/components/InputLike/InputLike.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { callMultiple } from '../../lib/callMultiple';
+import { stopPropagation } from '../../lib/utils';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './InputLike.module.css';
+
+export interface InputLikeProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
+  length: number;
+  index: number;
+  value?: string;
+  onElementSelect?(index: number): void;
+}
+
+const MASK_SYMBOL = String.fromCharCode(0x2007);
+
+function getMaskElements(length: number) {
+  const result = [];
+  for (let index = 0; index < length; index += 1) {
+    result.push(
+      <span key={index} className={styles['InputLike__mask']}>
+        {MASK_SYMBOL}
+      </span>,
+    );
+  }
+  return result;
+}
+
+export const InputLike = ({
+  value,
+  length,
+  index,
+  onElementSelect,
+  onClick,
+  onFocus,
+  ...props
+}: InputLikeProps) => {
+  const handleElementSelect = React.useCallback(
+    (event: React.MouseEvent<HTMLSpanElement>) => {
+      stopPropagation(event);
+      onElementSelect?.(index);
+    },
+    [index, onElementSelect],
+  );
+
+  return (
+    <RootComponent
+      Component="span"
+      baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}
+      tabIndex={0}
+      onClick={callMultiple(onClick, handleElementSelect)}
+      onFocus={callMultiple(stopPropagation, onFocus)}
+      {...props}
+    >
+      {value?.slice(0, length - 1)}
+      {value?.slice(length - 1) && (
+        <span key={index} className={styles['InputLike__last_character']}>
+          {value.slice(length - 1)}
+        </span>
+      )}
+      {getMaskElements(length - (value?.length ?? 0))}
+    </RootComponent>
+  );
+};
+
+InputLike.displayName = 'InputLike';

package/src/components/InputLike/InputLikeDivider.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import styles from './InputLike.module.css';
+
+export const InputLikeDivider = ({
+  children,
+  className,
+  ...props
+}: React.InputHTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span className={classNames(styles['InputLike__divider'], className)} {...props}>
+      {children}
+    </span>
+  );
+};

package/src/components/Link/Link.module.css

@@ -0,0 +1,44 @@
+.Link {
+  color: var(--vkui_internal--link-color, var(--vkui--color_text_link));
+  text-decoration: none;
+  border: 0;
+  background: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  font-size: inherit;
+  font-weight: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  display: inline;
+  border-radius: 0;
+}
+
+/* See https://www.ctrl.blog/entry/css-media-hover-samsung.html */
+@media (hover: hover) and (pointer: fine) {
+  .Link:hover {
+    text-decoration: underline;
+  }
+}
+
+.Link--focus-visible {
+  /**
+   * На момент v4.33.0, реализация <FocusVisible /> не подошла, т.к. текст может быть многострочным.
+   * Поэтому используем свой класс и применяем `outline`.
+   *
+   * `!important` – чтобы перебить глобальное обнуление `outline` на `:focus`.
+   */
+  /* stylelint-disable-next-line declaration-no-important */
+  outline: 2px solid var(--vkui--color_stroke_accent) !important;
+}
+
+.Link--has-visited:visited {
+  color: var(--vkui--color_text_link_visited);
+}
+
+/* stylelint-disable-next-line @project-tools/stylelint-atomic */
+.Link :global(.vkuiIcon) {
+  margin-left: 4px;
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/components/Link/Link.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Tappable, TappableProps } from '../Tappable/Tappable';
+import styles from './Link.module.css';
+
+export interface LinkProps extends TappableProps {
+  /**
+   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет
+   */
+  hasVisited?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Link
+ */
+export const Link = ({ hasVisited, children, className, ...restProps }: LinkProps) => {
+  return (
+    <Tappable
+      Component={restProps.href ? 'a' : 'button'}
+      {...restProps}
+      className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}
+      hasHover={false}
+      activeMode="opacity"
+      focusVisibleMode={styles['Link--focus-visible']}
+    >
+      {children}
+    </Tappable>
+  );
+};

package/src/components/List/List.module.css

@@ -0,0 +1,3 @@
+.List {
+  isolation: isolate;
+}

package/src/components/List/List.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { ListContext } from './ListContext';
+import styles from './List.module.css';
+
+export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/List
+ */
+export const List = ({ children, ...restProps }: ListProps) => {
+  const [isDragging, toggleDrag] = React.useState(false);
+
+  return (
+    <RootComponent
+      role="list"
+      {...restProps}
+      baseClassName={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging')}
+    >
+      <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>
+        {children}
+      </ListContext.Provider>
+    </RootComponent>
+  );
+};

package/src/components/List/ListContext.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { noop } from '@vkontakte/vkjs';
+
+export const ListContext = React.createContext({
+  toggleDrag: noop as (value: boolean) => void,
+});

package/src/components/LocaleProvider/LocaleProvider.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
+import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
+
+export interface LocaleProviderProps {
+  /**
+   * Строка с языковой меткой BCP 47
+   */
+  value: ConfigProviderContextInterface['locale'];
+  children: React.ReactNode;
+}
+
+/**
+ * Компонент, прокидывающий локаль. Список можно найти в
+ * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
+ *
+ * @since 5.0.0
+ * @see https://vkcom.github.io/VKUI/#/LocaleProvider
+ */
+export function LocaleProvider({ value, children }: LocaleProviderProps) {
+  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;
+}

package/src/components/MiniInfoCell/MiniInfoCell.module.css

@@ -0,0 +1,79 @@
+.MiniInfoCell {
+  display: flex;
+  padding: 6px var(--vkui--size_base_padding_horizontal--regular);
+  color: var(--vkui--color_text_subhead);
+}
+
+.MiniInfoCell--mode-accent {
+  color: var(--vkui--color_text_primary);
+}
+
+.MiniInfoCell__before {
+  margin-right: 12px;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.MiniInfoCell__middle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.MiniInfoCell__content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+.MiniInfoCell--textWrap-short .MiniInfoCell__content {
+  white-space: initial;
+  display: -webkit-box;
+  max-height: 60px;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.MiniInfoCell--textWrap-full .MiniInfoCell__content {
+  overflow: inherit;
+  white-space: initial;
+}
+
+.MiniInfoCell--textWrap-nowrap .MiniInfoCell__content {
+  flex: 0 1 auto;
+}
+
+.MiniInfoCell__after {
+  margin-left: 12px;
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.MiniInfoCell--mode-add,
+.MiniInfoCell--mode-more {
+  color: var(--vkui--color_text_link_themed);
+}
+
+.MiniInfoCell--mode-add .MiniInfoCell__before,
+.MiniInfoCell--mode-more .MiniInfoCell__before {
+  color: var(--vkui--color_icon_accent_themed);
+}
+
+.MiniInfoCell--mode-more {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.MiniInfoCell__middle :global(.vkuiIcon) {
+  margin-left: 4px;
+  color: var(--vkui--color_text_accent);
+}
+
+.MiniInfoCell--mode-add .MiniInfoCell__middle :global(.vkuiIcon),
+.MiniInfoCell--mode-more .MiniInfoCell__middle :global(.vkuiIcon) {
+  color: var(--vkui--color_icon_accent_themed);
+}

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { Icon16Chevron } from '@vkontakte/icons';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { Tappable } from '../Tappable/Tappable';
+import { Paragraph } from '../Typography/Paragraph/Paragraph';
+import styles from './MiniInfoCell.module.css';
+
+const stylesMode = {
+  add: styles['MiniInfoCell--mode-add'],
+  accent: styles['MiniInfoCell--mode-accent'],
+  more: styles['MiniInfoCell--mode-more'],
+};
+
+const stylesTextWrap = {
+  nowrap: styles['MiniInfoCell--textWrap-nowrap'],
+  full: styles['MiniInfoCell--textWrap-full'],
+  short: styles['MiniInfoCell--textWrap-short'],
+};
+
+export interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Иконка слева.<br />
+   * Рекомендуется использовать иконки размера 20.
+   */
+  before: React.ReactNode;
+
+  /**
+   * Содержимое справа.<br />
+   * `<UsersStack size="s" />` или `<Avatar size={24} />`
+   */
+  after?: React.ReactNode;
+
+  /**
+   * Тип ячейки:
+   *
+   * - `base` – базовая ячейка с серой иконкой и серым текстом.<br />
+   * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.
+   * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.
+   * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.
+   */
+  mode?: 'base' | 'accent' | 'add' | 'more';
+
+  /**
+   * Тип отображения текста:
+   *
+   * - `nowrap` – в одну строку, текст не переносится и обрезается.
+   * - `short` – максимально отображается 3 строки, остальное обрезается.
+   * - `full` – текст отображается полностью.
+   */
+  textWrap?: 'nowrap' | 'short' | 'full';
+
+  /**
+   * Передавать `true`, если предполагается переход при клике по ячейке.
+   */
+  expandable?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
+ */
+export const MiniInfoCell = ({
+  before,
+  after,
+  children,
+  mode = 'base',
+  textWrap = 'nowrap',
+  expandable = false,
+  className,
+  ...restProps
+}: MiniInfoCellProps) => {
+  const cellClasses = classNames(
+    styles['MiniInfoCell'],
+    stylesTextWrap[textWrap],
+    mode !== 'base' && stylesMode[mode],
+    className,
+  );
+
+  const cellContent = (
+    <React.Fragment>
+      {hasReactNode(before) && <span className={styles['MiniInfoCell__before']}>{before}</span>}
+      <div className={styles['MiniInfoCell__middle']}>
+        <Paragraph
+          className={styles['MiniInfoCell__content']}
+          weight={mode === 'more' ? '2' : undefined}
+        >
+          {children}
+        </Paragraph>
+        {expandable && <Icon16Chevron />}
+      </div>
+      {hasReactNode(after) && <span className={styles['MiniInfoCell__after']}>{after}</span>}
+    </React.Fragment>
+  );
+
+  return restProps.onClick ? (
+    <Tappable Component="div" role="button" {...restProps} className={cellClasses}>
+      {cellContent}
+    </Tappable>
+  ) : (
+    <RootComponent {...restProps} baseClassName={cellClasses}>
+      {cellContent}
+    </RootComponent>
+  );
+};

package/src/components/ModalCard/ModalCard.module.css

@@ -0,0 +1,61 @@
+.ModalCard {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  padding: 8px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+}
+
+.ModalCard__in {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  transform: translateY(calc(100% + 16px));
+  transition: transform 340ms var(--vkui--animation_easing_platform);
+}
+
+/**
+ * iOS
+ */
+
+.ModalCard--ios .ModalCard__in {
+  max-width: 414px;
+}
+
+/**
+ * Android + vkcom
+ */
+
+.ModalCard--android .ModalCard__in {
+  max-width: 440px;
+}
+
+.ModalCard--vkcom .ModalCard__in {
+  max-width: 400px;
+}
+
+/**
+ * Desktop
+ */
+
+.ModalCard--desktop {
+  align-items: center;
+}
+
+.ModalCard--desktop .ModalCard__in {
+  transform: unset;
+  opacity: 0;
+  transition: opacity 340ms var(--vkui--animation_easing_platform);
+}
+
+/**
+ * CMP:
+ * ModalRoot
+ */
+:global(.vkuiInternalModalRoot--touched) .ModalCard__in {
+  transition: none;
+}