@vkontakte/vkui 4.21.0 → 4.22.2

package/src/components/InitialsAvatar/InitialsAvatar.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import { classNames } from '../../lib/classNames';
+import Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';
+import './InitialsAvatar.css';
+
+/**
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
+ */
+export type InitialsAvatarNumberGradients = 1 | 2 | 3 | 4 | 5 | 6;
+export type InitialsAvatarTextGradients =
+  | 'red'
+  | 'pink'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'l-blue'
+  | 'blue'
+  | 'violet';
+
+export interface InitialsAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+  children?: React.ReactNode;
+  /**
+   * `'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet'`
+   *
+   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:
+   *
+   * 1: 'red'
+   *
+   * 2: 'orange'
+   *
+   * 3: 'yellow'
+   *
+   * 4: 'green'
+   *
+   * 5: 'l-blue'
+   *
+   * 6: 'violet'
+   */
+  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients;
+  size?: number;
+  shadow?: boolean;
+}
+
+const COLORS_NUMBER_TO_TEXT_MAP: Record<InitialsAvatarNumberGradients, InitialsAvatarTextGradients> = {
+  1: 'red',
+  2: 'orange',
+  3: 'yellow',
+  4: 'green',
+  5: 'l-blue',
+  6: 'violet',
+};
+
+function getInitialsFontSize(avatarSize: number) {
+  const calculatedFontSize = Math.ceil(avatarSize * 0.36);
+  const evenFix = calculatedFontSize % 2;
+  return calculatedFontSize + evenFix;
+}
+
+export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
+  size = AVATAR_DEFAULT_SIZE,
+  shadow = AVATAR_DEFAULT_SHADOW,
+  children,
+  gradientColor,
+  style,
+  ...restProps
+}: InitialsAvatarProps) => {
+  const gradientName = typeof gradientColor === 'string' ? gradientColor : COLORS_NUMBER_TO_TEXT_MAP[gradientColor];
+
+  return (
+    <Avatar
+      {...restProps}
+      style={{
+        ...style,
+        fontSize: getInitialsFontSize(size),
+      }}
+      shadow={shadow}
+      size={size}
+      vkuiClass={classNames(
+        'InitialsAvatar',
+        `InitialsAvatar--color-${gradientName}`,
+      )}
+    >
+      <span aria-hidden="true" vkuiClass="InitialsAvatar__text">
+        {children}
+      </span>
+    </Avatar>
+  );
+};

package/src/components/InitialsAvatar/Readme.md

@@ -0,0 +1,14 @@
+Компонент для отображения текстовых аватаров на фоне градиента (например, когда у пользователя нет установленного изображения). 
+Для лучшего отображения, рекомендуется использовать длину текста <b>не более 2 символов</b>.<br />
+ВКонтакте использует формулу `user_id % 6 + 1` для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: 'flex', padding: 12, gap: 8, flexFlow: 'row wrap' }}>
+  {[16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 80, 88, 96].map((size) => {
+    const user = getRandomUser();
+    return (
+      <InitialsAvatar size={size} gradientColor={user.id % 6 + 1}>{user.initials}</InitialsAvatar>
+    )
+  })}
+</div>
+```

package/src/components/ModalRoot/Readme.md

@@ -8,7 +8,7 @@
 **Важно:** структура модальных страниц и карточек должна определяться единожды на старте приложения. Структура – это *декларация* приложения.
 То есть, один раз определив структуру вида:
 
-```jsx static { "props": { "layout": false, "adaptivity": true } }
+```jsx static
 class App extends Component {
   render() {
     const modal = (
@@ -47,7 +47,7 @@ class App extends Component {
 либо идентификатор предыдущей модалки, либо `null` для скрытия.
 Каждой конкретной `ModalPage` или `ModalCard` можно передать свой обработчик `onClose`, если нужно переопределить поведение.
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 const MODAL_PAGE_FILTERS = 'filters';
 const MODAL_PAGE_COUNTRIES = 'countries';
 const MODAL_PAGE_STORY_FEEDBACK = 'story-feedback';

package/src/components/NativeSelect/NativeSelect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
-import { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormField } from '../FormField/FormField';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
@@ -64,7 +64,7 @@ const NativeSelect: React.FC<NativeSelectProps> = ({
       style={style}
       getRootRef={getRootRef}
       disabled={disabled}
-      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}
+      after={<DropdownIcon />}
     >
       <select
         {...restProps}

package/src/components/Progress/Progress.tsx

@@ -8,21 +8,26 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, Has
   value?: number;
 }
 
+const PROGRESS_MIN_VALUE = 0;
+const PROGRESS_MAX_VALUE = 100;
+
 const Progress: React.FC<ProgressProps> = ({ value, getRootRef, ...restProps }: ProgressProps) => {
   const platform = usePlatform();
 
+  const progress = Math.max(PROGRESS_MIN_VALUE, Math.min(value, PROGRESS_MAX_VALUE));
+
   return (
     <div
       aria-valuenow={value}
       {...restProps}
       role="progressbar"
-      aria-valuemin={0}
-      aria-valuemax={100}
+      aria-valuemin={PROGRESS_MIN_VALUE}
+      aria-valuemax={PROGRESS_MAX_VALUE}
       ref={getRootRef}
       vkuiClass={getClassName('Progress', platform)}
     >
       <div vkuiClass="Progress__bg" aria-hidden="true" />
-      <div vkuiClass="Progress__in" style={{ width: `${value}%` }} aria-hidden="true" />
+      <div vkuiClass="Progress__in" style={{ width: `${progress}%` }} aria-hidden="true" />
     </div>
   );
 };

package/src/components/Removable/Removable.css

@@ -1,17 +1,7 @@
-.Removable {
-  position: relative;
-  min-width: 0;
-  max-width: 100%;
-  flex-grow: 1;
-}
-
 .Removable__content {
+  position: relative;
   display: flex;
   align-items: center;
-}
-
-.FormItem--removable .Removable__content,
-.FormLayoutGroup--removable .Removable__content {
   padding-left: var(--formitem_padding);
 }
 
@@ -26,13 +16,13 @@
   align-self: flex-start;
 }
 
-.FormItem--withTop .Removable__action,
-.FormItem--withTop ~ .Removable__action {
+.FormItem--removable.FormItem--withTop .Removable__action,
+.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
   top: 28px;
 }
 
-.FormItem--withTop .Removable--sizeY-compact .Removable__action,
-.Removable--sizeY-compact .FormItem--withTop ~ .Removable__action {
+.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop .Removable__action,
+.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
   top: 26px;
 }
 
@@ -107,23 +97,22 @@
   background-color: var(--white);
 }
 
-.FormItem--removable .Removable--ios .Removable__content,
-.FormLayoutGroup--removable .Removable--ios .Removable__content {
+.Removable--ios .Removable__content {
   padding-left: 0;
   padding-right: var(--formitem_padding);
 }
 
-.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact .Removable__content {
+.FormLayoutGroup--removable .Removable__content {
   flex-wrap: wrap;
 }
 
-.FormLayoutGroup--removable .Removable--ios .FormItem--withTop ~ .Removable__offset {
+.FormLayoutGroup--removable .FormItem--ios.FormItem--withTop ~ .Removable__offset {
   order: -1;
   display: block;
   width: 100%;
   height: 28px;
 }
 
-.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact .Removable--ios .FormItem--withTop ~ .Removable__offset {
+.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact .FormItem--ios.FormItem--withTop ~ .Removable__offset {
   height: 26px;
 }

package/src/components/Removable/Removable.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { HasRootRef } from '../../types';
 import { classNames } from '../../lib/classNames';
-import { getTitleFromChildren } from '../../lib/utils';
+import { getTitleFromChildren, noop } from '../../lib/utils';
+import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getClassName } from '../../helpers/getClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -34,14 +36,16 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   removePlaceholderString,
   children,
 }) => {
-  const { document } = useDOM();
+  const { window } = useDOM();
 
   const removeButtonRef = React.useRef(null);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
 
-  useGlobalEventListener(document, 'click', removeOffset > 0 && (() => {
-    updateRemoveOffset(0);
-  }));
+  useGlobalEventListener(window, 'click', () => {
+    if (removeOffset > 0) {
+      updateRemoveOffset(0);
+    }
+  });
 
   const onRemoveTransitionEnd = () => {
     if (removeOffset > 0) {
@@ -49,7 +53,9 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
     }
   };
 
-  const onRemoveActivateClick = () => {
+  const onRemoveActivateClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
     const { offsetWidth = 0 } = removeButtonRef?.current;
     updateRemoveOffset(offsetWidth);
   };
@@ -82,7 +88,6 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
         getRootRef={removeButtonRef}
         vkuiClass="Removable__remove"
         onClick={onRemoveClick}
-        onTransitionEnd={onRemoveTransitionEnd}
       >
         <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
       </Tappable>
@@ -90,7 +95,7 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   );
 };
 
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {
+interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
   /**
    * Расположение кнопки удаления.
    */
@@ -98,8 +103,9 @@ interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, Remova
 }
 
 export const Removable: React.FC<RemovableOwnProps> = ({
+  getRootRef,
   children,
-  onRemove,
+  onRemove = noop,
   removePlaceholder = 'Удалить',
   align = 'center',
   ...restProps
@@ -107,10 +113,11 @@ export const Removable: React.FC<RemovableOwnProps> = ({
   const platform = usePlatform();
   const { sizeY } = useAdaptivity();
 
+  const ref = useExternRef(getRootRef);
+
   const onRemoveClick = (e: React.MouseEvent) => {
     e.preventDefault();
-
-    onRemove && onRemove(e);
+    onRemove(e);
   };
 
   const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);
@@ -118,6 +125,7 @@ export const Removable: React.FC<RemovableOwnProps> = ({
   return (
     <div
       {...restProps}
+      ref={ref}
       vkuiClass={classNames(
         getClassName('Removable', platform),
         `Removable--${align}`,

package/src/components/Select/Select.css

@@ -1,5 +1,6 @@
 .Select {
   position: relative;
+  cursor: pointer;
   box-sizing: border-box;
 }
 
@@ -25,7 +26,6 @@
   box-sizing: border-box;
   position: relative;
   z-index: 2;
-  cursor: pointer;
   overflow: hidden;
 }
 

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
-import { Icon24Dropdown, Icon20Dropdown } from '@vkontakte/icons';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormField } from '../FormField/FormField';
 import { HasAlign, HasRootRef } from '../../types';
 import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
@@ -51,7 +51,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
       getRootRef={getRootRef}
       onClick={disabled ? null : onClick}
       disabled={disabled}
-      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}
+      after={<DropdownIcon />}
     >
       <TypographyComponent Component="div" weight="regular" vkuiClass="Select__container">
         <span vkuiClass="Select__title">{children || placeholder}</span>

package/src/components/SimpleCell/SimpleCell.css

@@ -5,18 +5,8 @@
   white-space: nowrap;
   text-decoration: none;
   color: var(--text_primary);
-}
-
-.FormItem .SimpleCell {
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 calc(-1 * var(--formitem_padding));
-}
-
-.Cell--removable .SimpleCell {
-  max-width: 100%;
-  flex-grow: 1;
-  min-width: 0;
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
 .SimpleCell--mult {
@@ -153,10 +143,6 @@
   padding-right: 12px;
 }
 
-.Cell--removable .SimpleCell--ios {
-  padding-left: 0;
-}
-
 .SimpleCell--ios .SimpleCell__main,
 .SimpleCell--ios .SimpleCell__indicator {
   padding-top: 9px;
@@ -193,17 +179,6 @@
  * Android & VKCOM
  */
 
-.SimpleCell--android,
-.SimpleCell--vkcom {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-.Cell--removable .SimpleCell--android,
-.Cell--removable .SimpleCell--vkcom {
-  padding-right: 0;
-}
-
 .SimpleCell--android .SimpleCell__main,
 .SimpleCell--android .SimpleCell__indicator,
 .SimpleCell--vkcom .SimpleCell__main,
@@ -255,3 +230,11 @@
 .SimpleCell--sizeY-compact .SimpleCell__badge .Badge {
   transform: translateY(.5px);
 }
+
+/**
+ * CMP:
+ * FormItem
+ */
+.FormItem > .SimpleCell {
+  margin: 0 calc(-1 * var(--formitem_padding));
+}

package/src/components/Tabbar/Tabbar.css

@@ -5,14 +5,21 @@
   left: 0;
   width: 100%;
   height: var(--tabbar_height);
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
+  padding-bottom: var(--safe-area-inset-bottom);
   box-sizing: content-box;
   background: var(--header_alternate_background);
-  padding-bottom: var(--safe-area-inset-bottom);
 }
 
+.Tabbar__in {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/**
+ * iOS
+ */
+
 .Tabbar--ios.Tabbar--shadow::before {
   position: absolute;
   bottom: 100%;
@@ -36,6 +43,10 @@
   }
 }
 
+/**
+ * Android & VKCOM
+ */
+
 .Tabbar--android.Tabbar--shadow,
 .Tabbar--vkcom.Tabbar--shadow {
   box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, .06), 0 0 2px 0 rgba(0, 0, 0, .08);

package/src/components/Tabbar/Tabbar.tsx

@@ -33,7 +33,9 @@ const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
       })}
       {...restProps}
     >
-      {children}
+      <div vkuiClass="Tabbar__in">
+        {children}
+      </div>
     </div>
   );
 };

package/src/components/TabbarItem/Readme.md

@@ -1 +1,73 @@
 Элемент [Tabbar](#!/Tabbar). В качестве `children` рекомендуется использовать [иконку](https://vkcom.github.io/icons) 28 размера.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+const [simple, setSimple] = useState('one');
+const [text, setText] = useState('one');
+const [horizontalText, setHorizontalText] = useState('one');
+const [indicator, setIndicator] = useState('one');
+
+<div style={{background: 'var(--background_page)', padding: '10px 0'}}>
+  <div style={{maxWidth: 768, margin: 'auto'}}>
+    <Tabbar style={{position: 'static', margin: '0 0 10px'}}>
+      <TabbarItem selected={simple === 'one'} onClick={() => setSimple('one')}><Icon28NewsfeedOutline/></TabbarItem>
+      <TabbarItem selected={simple === 'two'} onClick={() => setSimple('two')}><Icon28UserCircleOutline/></TabbarItem>
+    </Tabbar>
+
+    <Tabbar style={{position: 'static', margin: '10px 0'}}>
+      <TabbarItem selected={text === 'one'} onClick={() => setText('one')} text="Новости"><Icon28NewsfeedOutline/></TabbarItem>
+      <TabbarItem selected={text === 'two'} onClick={() => setText('two')} text="Профиль"><Icon28UserCircleOutline/></TabbarItem>
+      <TabbarItem selected={text === 'three'} onClick={() => setText('three')} text="Мессенджер"><Icon28MessageOutline/></TabbarItem>
+    </Tabbar>
+
+    <Tabbar itemsLayout="horizontal" style={{position: 'static', margin: '10px 0'}}>
+      <TabbarItem
+        selected={horizontalText === 'one'}
+        onClick={() => setHorizontalText('one')}
+        text="Новости"
+      >
+        <Icon28NewsfeedOutline/>
+      </TabbarItem>
+      <TabbarItem
+        selected={horizontalText === 'two'}
+        onClick={() => setHorizontalText('two')}
+        text="Профиль"
+      >
+        <Icon28UserCircleOutline/>
+      </TabbarItem>
+      <TabbarItem
+        selected={horizontalText === 'three'}
+        onClick={() => setHorizontalText('three')}
+        text="Мессенджер"
+      >
+        <Icon28MessageOutline/>
+      </TabbarItem>
+    </Tabbar>
+
+    <Tabbar style={{position: 'static', margin: '10px 0 0'}}>
+      <TabbarItem
+        selected={indicator === 'one'}
+        onClick={() => setIndicator('one')}
+        indicator={<Badge mode="prominent" />}
+        text="Новости"
+      >
+        <Icon28NewsfeedOutline />
+      </TabbarItem>
+      <TabbarItem
+        selected={indicator === 'two'}
+        onClick={() => setIndicator('two')}
+        text="Профиль"
+      >
+        <Icon28UserCircleOutline />
+      </TabbarItem>
+      <TabbarItem
+        selected={indicator === 'three'}
+        onClick={() => setIndicator('three')}
+        text="Мессенджер"
+        indicator={<Counter size="s" mode="prominent">3</Counter>}
+      >
+        <Icon28MessageOutline />
+      </TabbarItem>
+    </Tabbar>
+  </div>
+</div>
+```

package/src/components/TabbarItem/TabbarItem.css

@@ -1,42 +1,54 @@
 .TabbarItem {
-  flex-shrink: 0;
-  max-width: 100%;
-  flex-grow: 1;
-  flex-basis: 0;
-  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--tabbar_inactive_icon);
   text-decoration: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: transparent;
+  height: var(--tabbar_height);
+  position: relative;
 }
 
-.Tabbar--l-vertical .TabbarItem.TabbarItem--text {
-  position: relative;
-  top: 2px;
+.Tabbar .TabbarItem {
+  flex-shrink: 0;
+  max-width: 100%;
+  min-width: 0;
+  flex-grow: 1;
+  flex-basis: 0;
 }
 
 .TabbarItem--selected {
   color: var(--tabbar_active_icon);
 }
 
+.TabbarItem__tappable {
+  position: absolute;
+}
+
 .TabbarItem__in {
-  align-self: center;
   display: flex;
-  max-width: 100%;
   padding: 0 2px;
-  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  height: 100%;
+  overflow: hidden;
+}
+
+.Tabbar--l-vertical .TabbarItem--text .TabbarItem__in {
+  position: relative;
+  top: 2px;
 }
 
 .Tabbar--l-vertical .TabbarItem__in {
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
 }
 
 .Tabbar--l-horizontal .TabbarItem__in {
   flex-direction: row;
-  align-items: center;
 }
 
 .TabbarItem__icon {
@@ -74,3 +86,42 @@
   font-weight: 500;
   margin-left: 8px;
 }
+
+/**
+ * Android
+ */
+
+.TabbarItem--android .TabbarItem__tappable {
+  width: calc(100% + 16px);
+  padding-bottom: calc(100% + 16px);
+  border-radius: 50%;
+}
+
+.TabbarItem--android:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.TabbarItem--android:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/**
+ * iOS
+ */
+
+.TabbarItem--ios .TabbarItem__tappable {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.TabbarItem--ios .TabbarItem__in {
+  transition: transform .07s var(--ios-easing);
+}
+
+.TabbarItem--ios .TabbarItem__tappable--active + .TabbarItem__in {
+  transform: scale(.96);
+}