@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/FormItem/FormItem.module.css

@@ -0,0 +1,122 @@
+.FormItem {
+  display: block;
+}
+
+.FormItem--withPadding {
+  padding: var(--vkui--size_form_item_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.FormItem--removable {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.FormItem__removable {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  padding: 0;
+  min-width: 1px;
+  overflow: hidden;
+}
+
+.FormItem__top {
+  padding-top: 2px;
+  padding-bottom: 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_subhead);
+}
+
+.FormItem__bottom {
+  color: var(--vkui--color_text_secondary);
+  padding-top: 8px;
+}
+
+.FormItem--status-error .FormItem__bottom {
+  color: var(--vkui--color_text_negative);
+}
+
+.FormItem--status-valid .FormItem__bottom,
+.FormItem--verified .FormItem__bottom {
+  color: var(--vkui--color_text_positive);
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.FormItem--sizeY-compact .FormItem__top {
+  padding-bottom: 6px;
+}
+
+.FormItem--sizeY-compact .FormItem__bottom {
+  padding-top: 6px;
+}
+
+@media (--sizeY-compact) {
+  .FormItem--sizeY-none .FormItem__top {
+    padding-bottom: 6px;
+  }
+
+  .FormItem--sizeY-none .FormItem__bottom {
+    padding-top: 6px;
+  }
+}
+
+/**
+ * CMP:
+ * FormLayoutGroup
+ */
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .FormItem {
+  max-width: 100%;
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  padding: 0;
+  min-width: 1px;
+}
+
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal:not(.vkuiInternalFormLayoutGroup--segmented))
+  .FormItem
+  + .FormItem {
+  margin-left: 24px;
+}
+
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal.vkuiInternalFormLayoutGroup--segmented)
+  .FormItem
+  + .FormItem {
+  margin-left: calc(-1 * var(--vkui--size_border--regular));
+}
+
+:global(.vkuiInternalFormLayoutGroup--mode-vertical.vkuiInternalFormLayoutGroup--segmented)
+  .FormItem
+  + .FormItem {
+  padding-top: 0;
+  margin-top: calc(-1 * var(--vkui--size_border--regular));
+}
+
+:global(.vkuiInternalFormLayoutGroup--mode-vertical.vkuiInternalFormLayoutGroup--segmented)
+  .FormItem:not(:last-of-type) {
+  padding-bottom: 0;
+}
+
+.FormItem--withTop .FormItem__removable,
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .FormItem--withTop {
+  margin-top: calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px);
+}
+
+.FormItem--sizeY-compact.FormItem--withTop .FormItem__removable,
+:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .FormItem--sizeY-compact.FormItem--withTop {
+  margin-top: calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px);
+}
+
+@media (--sizeY-compact) {
+  .FormItem--sizeY-none.FormItem--withTop .FormItem__removable,
+  :global(.vkuiInternalFormLayoutGroup--mode-horizontal) .FormItem--sizeY-none.FormItem--withTop {
+    margin-top: calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px);
+  }
+}

package/src/components/FormItem/FormItem.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useExternRef } from '../../hooks/useExternRef';
+import { SizeType } from '../../lib/adaptivity';
+import { HasComponent, HasRootRef } from '../../types';
+import { Removable, RemovableProps } from '../Removable/Removable';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import styles from './FormItem.module.css';
+
+const sizeYClassNames = {
+  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),
+  [SizeType.COMPACT]: classNames(
+    styles['FormItem--sizeY-compact'],
+    'vkuiInternalFormItem--sizeY-compact',
+  ),
+};
+
+const stylesStatus = {
+  error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),
+  valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid'),
+};
+
+export interface FormItemProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent,
+    RemovableProps {
+  top?: React.ReactNode;
+  bottom?: React.ReactNode;
+  /**
+   * Передаётся при использовании `bottom`.
+   *
+   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.
+   */
+  bottomId?: string;
+  status?: 'default' | 'error' | 'valid';
+  /**
+   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
+   *
+   * Режим `indent` предназначен для визуального отступа
+   */
+  removable?: boolean | 'indent';
+  /**
+   * Удаляет внешние отступы вокруг компонента
+   * @since 5.8.0
+   */
+  noPadding?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/FormItem
+ */
+export const FormItem = ({
+  children,
+  top,
+  bottom,
+  status = 'default',
+  removable,
+  onRemove = noop,
+  removePlaceholder = 'Удалить',
+  getRootRef,
+  htmlFor,
+  bottomId,
+  noPadding,
+  ...restProps
+}: FormItemProps) => {
+  const rootEl = useExternRef(getRootRef);
+  const { sizeY = 'none' } = useAdaptivity();
+
+  const wrappedChildren = (
+    <React.Fragment>
+      {hasReactNode(top) && (
+        <Subhead
+          className={styles['FormItem__top']}
+          Component={htmlFor ? 'label' : 'h5'}
+          htmlFor={htmlFor}
+        >
+          {top}
+        </Subhead>
+      )}
+      {children}
+      {hasReactNode(bottom) && (
+        <Footnote
+          className={styles['FormItem__bottom']}
+          id={bottomId}
+          role={status === 'error' ? 'alert' : undefined}
+        >
+          {bottom}
+        </Footnote>
+      )}
+    </React.Fragment>
+  );
+
+  return (
+    <RootComponent
+      {...restProps}
+      getRootRef={rootEl}
+      baseClassName={classNames(
+        styles['FormItem'],
+        !noPadding && styles['FormItem--withPadding'],
+        'vkuiInternalFormItem',
+        status !== 'default' && stylesStatus[status],
+        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
+        hasReactNode(top) &&
+          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),
+        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),
+      )}
+    >
+      {removable ? (
+        <Removable
+          align="start"
+          onRemove={(e) => {
+            if (rootEl?.current) {
+              onRemove(e, rootEl.current);
+            }
+          }}
+          removePlaceholder={removePlaceholder}
+          indent={removable === 'indent'}
+        >
+          <div
+            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}
+          >
+            {wrappedChildren}
+          </div>
+        </Removable>
+      ) : (
+        wrappedChildren
+      )}
+    </RootComponent>
+  );
+};

package/src/components/FormLayout/FormLayout.module.css

@@ -0,0 +1,16 @@
+.FormLayout {
+  position: relative;
+}
+
+.FormLayout__submit {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  padding: 0;
+  width: 0;
+  height: 0;
+  appearance: none;
+  border: 0;
+}

package/src/components/FormLayout/FormLayout.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HasComponent, HasRef } from '../../types';
+import styles from './FormLayout.module.css';
+
+const preventDefault = (e: React.FormEvent) => e.preventDefault();
+
+export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
+  HasRef<HTMLElement> &
+  HasComponent;
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/FormLayout
+ */
+export const FormLayout = ({
+  children,
+  Component = 'form',
+  getRef,
+  onSubmit = preventDefault,
+  className,
+  ...restProps
+}: FormLayoutProps) => {
+  return (
+    <Component
+      {...restProps}
+      className={classNames(styles['FormLayout'], className)}
+      onSubmit={onSubmit}
+      ref={getRef}
+    >
+      {children}
+      {Component === 'form' && (
+        <input type="submit" className={styles['FormLayout__submit']} value="" />
+      )}
+    </Component>
+  );
+};

package/src/components/FormLayoutGroup/FormLayoutGroup.module.css

@@ -0,0 +1,49 @@
+.FormLayoutGroup--mode-horizontal {
+  display: flex;
+  padding: var(--vkui--size_form_item_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.FormLayoutGroup__removable {
+  flex-grow: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.FormLayoutGroup__offset {
+  display: none;
+}
+
+.FormLayoutGroup--mode-horizontal
+  :global(.vkuiInternalFormItem--withTop)
+  ~ .FormLayoutGroup__offset {
+  order: -1;
+  display: block;
+  min-width: 100%;
+  height: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
+}
+
+.FormLayoutGroup--sizeY-compact.FormLayoutGroup--mode-horizontal
+  :global(.vkuiInternalFormItem--withTop)
+  ~ .FormLayoutGroup__offset {
+  height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
+}
+
+@media (--sizeY-compact) {
+  .FormLayoutGroup--sizeY-none.FormLayoutGroup--mode-horizontal
+    :global(.vkuiInternalFormItem--withTop)
+    ~ .FormLayoutGroup__offset {
+    height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
+  }
+}
+
+.FormLayoutGroup--removable {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.FormLayoutGroup--segmented {
+  position: relative;
+}

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useExternRef } from '../../hooks/useExternRef';
+import { SizeType } from '../../lib/adaptivity';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { Removable, RemovableProps } from '../Removable/Removable';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './FormLayoutGroup.module.css';
+
+const sizeYClassNames = {
+  none: classNames(
+    styles['FormLayoutGroup--sizeY-none'],
+    'vkuiInternalFormLayoutGroup--sizeY-none',
+  ),
+  [SizeType.COMPACT]: classNames(
+    styles['FormLayoutGroup--sizeY-compact'],
+    'vkuiInternalFormLayoutGroup--sizeY-compact',
+  ),
+};
+
+export interface FormLayoutGroupProps
+  extends HTMLAttributesWithRootRef<HTMLDivElement>,
+    RemovableProps {
+  mode?: 'vertical' | 'horizontal';
+  /**
+   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
+   *
+   * Режим `indent` предназначен для визуального отступа.
+   */
+  removable?: boolean | 'indent';
+
+  /**
+   * Дает возможность склеить несколько `FormItem`.
+   */
+  segmented?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup
+ */
+export const FormLayoutGroup = ({
+  children,
+  mode = 'vertical',
+  removable,
+  segmented,
+  removePlaceholder = 'Удалить',
+  onRemove = noop,
+  getRootRef,
+  ...restProps
+}: FormLayoutGroupProps) => {
+  const { sizeY = 'none' } = useAdaptivity();
+  const isRemovable = removable && mode === 'horizontal';
+  const rootEl = useExternRef(getRootRef);
+
+  return (
+    <RootComponent
+      getRootRef={rootEl}
+      baseClassName={classNames(
+        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
+        mode === 'horizontal' &&
+          classNames(
+            styles['FormLayoutGroup--mode-horizontal'],
+            'vkuiInternalFormLayoutGroup--mode-horizontal',
+          ),
+        mode === 'vertical' &&
+          classNames(
+            styles['FormLayoutGroup--mode-vertical'],
+            'vkuiInternalFormLayoutGroup--mode-vertical',
+          ),
+        isRemovable &&
+          classNames(
+            styles['FormLayoutGroup--removable'],
+            'vkuiInternalFormLayoutGroup--removable',
+          ),
+        segmented &&
+          classNames(
+            styles['FormLayoutGroup--segmented'],
+            'vkuiInternalFormLayoutGroup--segmented',
+          ),
+      )}
+      {...restProps}
+    >
+      {isRemovable ? (
+        <Removable
+          className={styles['FormLayoutGroup__removable']}
+          align="start"
+          removePlaceholder={removePlaceholder}
+          onRemove={(e) => {
+            if (rootEl?.current) {
+              onRemove(e, rootEl.current);
+            }
+          }}
+          indent={removable === 'indent'}
+        >
+          {children}
+        </Removable>
+      ) : (
+        <React.Fragment>
+          {children}
+          <span className={styles['FormLayoutGroup__offset']} aria-hidden />
+        </React.Fragment>
+      )}
+    </RootComponent>
+  );
+};

package/src/components/FormStatus/FormStatus.module.css

@@ -0,0 +1,3 @@
+.FormStatus--mode-error {
+  color: var(--vkui--color_background_negative);
+}

package/src/components/FormStatus/FormStatus.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { Banner } from '../Banner/Banner';
+import styles from './FormStatus.module.css';
+
+export interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  mode?: 'default' | 'error';
+  header?: React.ReactNode;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/FormStatus
+ */
+export const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {
+  return (
+    <Banner
+      {...restProps}
+      subheader={children}
+      className={classNames(
+        'vkuiInternalFormStatus',
+        mode === 'error' &&
+          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),
+        className,
+      )}
+    />
+  );
+};

package/src/components/Gallery/Gallery.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { clamp } from '../../helpers/math';
+import { useIsClient } from '../../hooks/useIsClient';
+import { useTimeout } from '../../hooks/useTimeout';
+import { BaseGallery } from '../BaseGallery/BaseGallery';
+import { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';
+import { BaseGalleryProps } from '../BaseGallery/types';
+
+export interface GalleryProps extends BaseGalleryProps {
+  initialSlideIndex?: number;
+  timeout?: number;
+  // Отвечает за зацикливание слайдов
+  looped?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Gallery
+ */
+export const Gallery = ({
+  initialSlideIndex = 0,
+  children,
+  timeout = 0,
+  onChange,
+  bullets,
+  looped,
+  ...props
+}: GalleryProps) => {
+  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);
+  const isControlled = typeof props.slideIndex === 'number';
+  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;
+  const isDraggable = !isControlled || Boolean(onChange);
+  const slides = React.useMemo(
+    () => React.Children.toArray(children).filter((item) => Boolean(item)),
+    [children],
+  );
+  const childCount = slides.length;
+  const isClient = useIsClient();
+
+  const handleChange: GalleryProps['onChange'] = React.useCallback(
+    (current: number) => {
+      if (current === slideIndex) {
+        return;
+      }
+      !isControlled && setSlideIndex(current);
+      onChange && onChange(current);
+    },
+    [isControlled, onChange, slideIndex],
+  );
+
+  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);
+  React.useEffect(
+    () => (timeout ? autoplay.set() : autoplay.clear()),
+    [timeout, slideIndex, autoplay],
+  );
+
+  // prevent invalid slideIndex
+  // any slide index is invalid with no slides, just keep it as is
+  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;
+  // notify parent in controlled mode
+  React.useEffect(() => {
+    if (onChange && safeSlideIndex !== slideIndex) {
+      onChange(safeSlideIndex);
+    }
+    setSlideIndex(safeSlideIndex);
+  }, [onChange, safeSlideIndex, slideIndex]);
+
+  if (!isClient) {
+    return null;
+  }
+
+  const Component = looped ? CarouselBase : BaseGallery;
+
+  return (
+    <Component
+      isDraggable={isDraggable}
+      {...props}
+      bullets={childCount > 0 && bullets}
+      slideIndex={safeSlideIndex}
+      onChange={handleChange}
+    >
+      {slides}
+    </Component>
+  );
+};

package/src/components/Gradient/Gradient.module.css

@@ -0,0 +1,23 @@
+.Gradient--mode-tint.Gradient--to-top {
+  background: linear-gradient(to bottom, var(--vkui--gradient_tint));
+}
+
+.Gradient--mode-tint.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui--gradient_tint));
+}
+
+.Gradient--mode-white.Gradient--to-top {
+  background: linear-gradient(to bottom, var(--vkui--gradient_white));
+}
+
+.Gradient--mode-white.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui--gradient_white));
+}
+
+.Gradient--mode-black.Gradient--to-top {
+  background: linear-gradient(to bottom, var(--vkui--gradient_black));
+}
+
+.Gradient--mode-black.Gradient--to-bottom {
+  background: linear-gradient(to top, var(--vkui--gradient_black));
+}

package/src/components/Gradient/Gradient.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './Gradient.module.css';
+
+const stylesMode = {
+  tint: styles['Gradient--mode-tint'],
+  black: styles['Gradient--mode-black'],
+  white: styles['Gradient--mode-white'],
+};
+
+const stylesTo = {
+  top: styles['Gradient--to-top'],
+  bottom: styles['Gradient--to-bottom'],
+};
+
+export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Тип градиента
+   */
+  mode?: 'tint' | 'white' | 'black';
+  /**
+   * Направление градиента
+   */
+  to?: 'top' | 'bottom';
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Gradient
+ */
+export const Gradient = ({ mode = 'tint', to = 'top', ...restProps }: GradientProps) => {
+  return (
+    <RootComponent
+      role="presentation"
+      {...restProps}
+      baseClassName={classNames(stylesMode[mode], stylesTo[to])}
+    />
+  );
+};

package/src/components/GridAvatar/GridAvatar.module.css

@@ -0,0 +1,36 @@
+.GridAvatar {
+  border-radius: 50%;
+}
+
+.GridAvatar__in {
+  display: flex;
+  flex-flow: column wrap;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.GridAvatar__item {
+  width: calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);
+  height: calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);
+  margin-right: var(--vkui_internal--grid_avatar_image_offset);
+  background-size: cover;
+  background-position: center;
+}
+
+.GridAvatar__item:only-child {
+  width: 100%;
+}
+
+.GridAvatar__item:first-child:not(:nth-last-child(4)),
+.GridAvatar__item:nth-child(2):last-child {
+  height: 100%;
+}
+
+/* если есть минимум три элемента — выбираем второй с конца */
+.GridAvatar__item:nth-last-child(n + 3) ~ .GridAvatar__item:nth-last-child(2),
+/* четвертый с конца */
+.GridAvatar__item:nth-last-child(4) {
+  margin-bottom: var(--vkui_internal--grid_avatar_image_offset);
+}