@vkontakte/vkui 8.0.2 → 8.1.1

package/src/components/CellButton/CellButton.module.css

@@ -1,14 +1,167 @@
 .host {
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
   inline-size: 100%;
+  min-block-size: 48px;
   padding-block: 0;
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   margin: 0;
+  color: var(--vkui--color_text_primary);
   text-align: start;
+  white-space: nowrap;
   text-decoration: none;
   background: transparent;
   border: 0;
 }
 
+.mult {
+  white-space: normal;
+}
+
+.mult .children {
+  text-overflow: initial;
+}
+
+.disabled {
+  opacity: var(--vkui--opacity_disable);
+}
+
+.before {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  padding-block: var(--vkui--spacing_size_s);
+  padding-inline-end: var(--vkui--spacing_size_xl);
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.before > :global(.vkuiIcon) {
+  box-sizing: content-box;
+  padding-inline: var(--vkui--spacing_size_xs);
+}
+
+.before:empty {
+  display: none;
+}
+
+.middle {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  justify-content: center;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding-block: var(--vkui--spacing_size_l);
+  overflow: hidden;
+}
+
+/* stylelint-disable-next-line selector-max-universal -- gap: 2px */
+.middle > *:not(:first-child) {
+  margin-block-start: var(--vkui--spacing_size_2xs);
+}
+
+.overTitle {
+  color: var(--vkui--color_text_subhead);
+}
+
+.text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.subtitle,
+.extraSubtitle {
+  color: var(--vkui--color_text_secondary);
+}
+
+.host .content {
+  display: flex;
+  align-content: flex-start;
+  align-items: center;
+  justify-content: flex-start;
+  max-inline-size: 100%;
+}
+
+.children {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+}
+
+.mult .children,
+.mult .subtitle {
+  flex: 0 1 auto;
+}
+
+.badge {
+  display: inline-block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: var(--vkui--color_icon_accent);
+}
+
+/* stylelint-disable-next-line selector-max-universal -- gap: 4px */
+.content > *:not(:last-child) {
+  margin-inline-end: var(--vkui--spacing_size_xs);
+}
+
+.indicator {
+  flex-shrink: 0;
+  min-inline-size: 0;
+  padding-inline-start: var(--vkui--spacing_size_xl);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--vkui--color_text_secondary);
+  white-space: nowrap;
+}
+
+.after {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  align-self: stretch;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.after > :global(.vkuiIcon) {
+  box-sizing: content-box;
+  padding-inline-start: var(--vkui--spacing_size_s);
+}
+
+/**
+ * density="compact"
+ */
+
+.densityCompact {
+  min-block-size: 44px;
+}
+
+.densityCompact .before {
+  padding-block: var(--vkui--spacing_size_xs);
+}
+
+@media (--density-compact) {
+  .densityNone {
+    min-block-size: 44px;
+  }
+
+  .densityNone .before {
+    padding-block: var(--vkui--spacing_size_xs);
+  }
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+:global(.vkuiInternalFormItem) > .host {
+  margin-block: 0;
+  margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
 /**
  * CMP:
  * FormItem
@@ -36,14 +189,13 @@
   max-inline-size: initial;
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.centered :global(.vkuiIcon) {
+.centered .before {
   padding-inline-end: var(--vkui--spacing_size_m);
-  /* компенсируем отступ заданные в SimpleCell__before */
-  margin-inline-end: calc(
-    -1 *
-    var(--vkui_internal--SimpleCell-before-inline-padding-end, var(--vkui--spacing_size_xl))
-  );
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.centered .before > :global(.vkuiIcon) {
+  padding-inline: 0;
 }
 
 .appearanceAccent {

package/src/components/CellButton/CellButton.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./CellButton.module.css"],"names":["host","centered","appearanceAccent","appearanceNeutral","appearanceNegative"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAgB+BA,M,WAhB/B;AAAA,E,aAuBAA,M,WAvBA;AAAA,E,aA2BAC,U,WA3BA;AAAA,E,aAiCAA,U,WAjCA;AAAA,E,aAuCAA,U,WAvCA;AAAA,E,aAgDAC,kB,WAhDA;AAAA,E,aAuDAD,U,WAvDA;AAAA,E,aA6DAE,mB,WA7DA;AAAA,E,aAmEAC,oB,WAnEA;AAAA;AAAA","file":"CellButton.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./CellButton.module.css"],"names":["host","mult","children","disabled","before","middle","overTitle","text","subtitle","extraSubtitle","content","badge","indicator","after","densityCompact","densityNone","centered","appearanceAccent","appearanceNeutral","appearanceNegative"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAiBAC,M,WAjBA;AAAA,E,aAqBAA,M,WArBA;AAAA,E,aAqBMC,U,WArBN;AAAA,E,aAyBAC,U,WAzBA;AAAA,E,aA6BAC,Q,WA7BA;AAAA,E,aAsCAA,Q,WAtCA;AAAA,E,aA2CAA,Q,WA3CA;AAAA,E,aA+CAC,Q,WA/CA;AAAA,E,aA2DAA,Q,WA3DA;AAAA,E,aA+DAC,W,WA/DA;AAAA,E,aAmEAC,M,WAnEA;AAAA,E,aAwEAC,U,WAxEA;AAAA,E,aAyEAC,e,WAzEA;AAAA,E,aA6EAT,M,WA7EA;AAAA,E,aA6EMU,S,WA7EN;AAAA,E,aAqFAR,U,WArFA;AAAA,E,aA4FAD,M,WA5FA;AAAA,E,aA4FMC,U,WA5FN;AAAA,E,aA6FAD,M,WA7FA;AAAA,E,aA6FMO,U,WA7FN;AAAA,E,aAiGAG,O,WAjGA;AAAA,E,aAyGAD,S,WAzGA;AAAA,E,aA6GAE,W,WA7GA;AAAA,E,aAuHAC,O,WAvHA;AAAA,E,aA+HAA,O,WA/HA;AAAA,E,aAwIAC,gB,WAxIA;AAAA,E,aA4IAA,gB,WA5IA;AAAA,E,aA4IgBV,Q,WA5IhB;AAAA,E,aAiJEW,a,WAjJF;AAAA,E,aAqJEA,a,WArJF;AAAA,E,aAqJeX,Q,WArJf;AAAA,E,aA+JiCJ,M,WA/JjC;AAAA,E,aAyK+BA,M,WAzK/B;AAAA,E,aAgLAA,M,WAhLA;AAAA,E,aAoLAgB,U,WApLA;AAAA,E,aA0LAA,U,WA1LA;AAAA,E,aA+LAA,U,WA/LA;AAAA,E,aA+LUZ,Q,WA/LV;AAAA,E,aAoMAY,U,WApMA;AAAA,E,aAoMUZ,Q,WApMV;AAAA,E,aAwMAa,kB,WAxMA;AAAA,E,aA+MAD,U,WA/MA;AAAA,E,aAqNAE,mB,WArNA;AAAA,E,aA2NAC,oB,WA3NA;AAAA;AAAA","file":"CellButton.module.css.d.ts","sourceRoot":""}

package/src/components/CellButton/CellButton.tsx

@@ -1,43 +1,186 @@
-import { classNames } from '@vkontakte/vkjs';
-import { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';
-import '../SimpleCell/SimpleCell.module.css';
+'use client';
+
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import type { HasComponent } from '../../types';
+import { Chevron } from '../SimpleCell/Chevron/Chevron';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Headline } from '../Typography/Headline/Headline';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CellButton.module.css';
 
+const densityClassNames = {
+  none: styles.densityNone,
+  compact: styles.densityCompact,
+};
+
 export const appearanceClassNames = {
   accent: styles.appearanceAccent,
   neutral: styles.appearanceNeutral,
   negative: styles.appearanceNegative,
 };
 
-export interface CellButtonProps extends SimpleCellProps {
+interface CellButtonOwnProps extends HasComponent {
+  /**
+   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`.
+   */
+  before?: React.ReactNode | undefined;
+  /**
+   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.
+   */
+  badgeBeforeTitle?: React.ReactNode | undefined;
+  /**
+   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.
+   */
+  badgeAfterTitle?: React.ReactNode | undefined;
+  /**
+   * Иконка 12. Добавится слева от текста `subtitle`.
+   */
+  badgeBeforeSubtitle?: React.ReactNode | undefined;
+  /**
+   * Иконка 12. Добавится справа от текста `subtitle`.
+   */
+  badgeAfterSubtitle?: React.ReactNode | undefined;
+  /**
+   * Контейнер для текста справа от `children`.
+   */
+  indicator?: React.ReactNode | undefined;
+  /**
+   * Дополнительная строка текста над `children`.
+   */
+  overTitle?: React.ReactNode | undefined;
+  /**
+   * Дополнительная строка текста под `children`.
+   */
+  subtitle?: React.ReactNode | undefined;
+  /**
+   * Дополнительная строка текста под `children` и `subtitle`.
+   */
+  extraSubtitle?: React.ReactNode | undefined;
+  /**
+   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.
+   */
+  after?: React.ReactNode | undefined;
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Управляет видимостью иконки шеврона `›`.
+   *
+   * - `auto` - добавляет шеврон справа только для платформы `ios`;
+   * - `always` - всегда показывает шеврон.
+   */
+  chevron?: 'auto' | 'always' | undefined;
+  /**
+   * Размер chevron.
+   */
+  chevronSize?: 's' | 'm' | undefined;
+  /**
+   * Включает многострочный режим для отображения текста.
+   */
+  multiline?: boolean | undefined;
   /**
    * > Режим `centered` переопределяет токен для темы `"accent"`.
    */
-  appearance?: 'accent' | 'neutral' | 'negative';
+  appearance?: 'accent' | 'neutral' | 'negative' | undefined;
   /**
    * Возможность центрирования содержимого компонента.
    */
-  centered?: boolean;
+  centered?: boolean | undefined;
 }
 
+export interface CellButtonProps extends CellButtonOwnProps, TappableOmitProps {}
+
 /**
  * @see https://vkui.io/components/cell-button
  */
 export const CellButton = ({
+  badgeBeforeTitle,
+  badgeAfterTitle,
+  badgeBeforeSubtitle,
+  badgeAfterSubtitle,
+  before,
+  indicator,
+  children,
+  after,
+  chevron,
+  multiline,
+  overTitle,
+  subtitle,
+  extraSubtitle,
+  chevronSize = 'm',
   centered = false,
   appearance = 'accent',
-  className,
   ...restProps
 }: CellButtonProps): React.ReactNode => {
+  const platform = usePlatform();
+
+  const hasChevron = chevron === 'always' || (chevron === 'auto' && platform === 'ios');
+
+  const hasAfter = hasReactNode(after) || hasChevron;
+  const { density = 'none' } = useAdaptivity();
+
   return (
-    <SimpleCell
+    <Tappable
       {...restProps}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
+        restProps.disabled && styles.disabled,
+        density !== 'regular' && densityClassNames[density],
+        multiline && styles.mult,
         appearanceClassNames[appearance],
         centered && styles.centered,
-        className,
       )}
-    />
+    >
+      <div className={styles.before}>{before}</div>
+      <div className={styles.middle}>
+        {overTitle && (
+          <Subhead Component="span" className={classNames(styles.text, styles.overTitle)}>
+            {overTitle}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
+          </Subhead>
+        )}
+        <div className={styles.content}>
+          {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}
+          <Headline Component="span" className={styles.children} weight="3">
+            {children}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
+          </Headline>
+          {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}
+        </div>
+        {subtitle && (
+          <div className={styles.content}>
+            {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}
+            <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>
+              {subtitle}
+              <VisuallyHidden>&nbsp;</VisuallyHidden>
+            </Footnote>
+            {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}
+          </div>
+        )}
+        {extraSubtitle && (
+          <Footnote className={classNames(styles.text, styles.extraSubtitle)}>
+            {extraSubtitle}
+            <VisuallyHidden>&nbsp;</VisuallyHidden>
+          </Footnote>
+        )}
+      </div>
+      {hasReactNode(indicator) && (
+        <Headline Component="span" weight="3" className={styles.indicator}>
+          {indicator}
+        </Headline>
+      )}
+      {hasAfter && (
+        <div className={styles.after}>
+          {after}
+          {hasChevron && <Chevron size={chevronSize} />}
+        </div>
+      )}
+    </Tappable>
   );
 };

package/src/components/Checkbox/Checkbox.tsx

@@ -55,24 +55,31 @@ export interface CheckboxProps
    * - `root`: свойства для прокидывания в корень компонента;
    * - `input`: свойства для прокидывания в скрытый `input`.
    */
-  slotProps?: {
-    root?: Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &
-      HasRootRef<HTMLLabelElement> &
-      HasDataAttribute;
-    input?: React.ComponentProps<'input'> & HasRootRef<HTMLInputElement> & HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        root?:
+          | ((Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &
+              HasRootRef<HTMLLabelElement> &
+              HasDataAttribute) &
+              HasDataAttribute)
+          | undefined;
+        input?:
+          | (React.ComponentProps<'input'> & HasRootRef<HTMLInputElement> & HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
   /**
    * Подпись под основным текстом.
    */
-  description?: React.ReactNode;
+  description?: React.ReactNode | undefined;
   /**
    * Контент, идущий за основным текстом.
    */
-  titleAfter?: React.ReactNode;
+  titleAfter?: React.ReactNode | undefined;
   /**
    * Отключает отступы у чекбокса. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `"opacity"`.
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
 }
 
 const CheckboxComponent = ({

package/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx

@@ -49,46 +49,52 @@ export interface CheckboxInputProps
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLInputElement>;
+  getRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Свойства, которые можно прокинуть внутрь компонента:
    * - `root`: свойства для прокидывания в корень компонента;
    * - `input`: свойства для прокидывания в скрытый `input`.
    */
-  slotProps?: {
-    root?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
-      HasRootRef<HTMLDivElement> &
-      HasDataAttribute;
-    input?: React.ComponentProps<'input'> & HasRootRef<HTMLInputElement> & HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        root?:
+          | (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &
+              HasRootRef<HTMLDivElement> &
+              HasDataAttribute)
+          | undefined;
+        input?:
+          | (React.ComponentProps<'input'> & HasRootRef<HTMLInputElement> & HasDataAttribute)
+          | undefined;
+      }
+    | undefined;
   /**
    * Неопределенное состояние чекбокса.
    */
-  indeterminate?: boolean;
+  indeterminate?: boolean | undefined;
   /**
    * Неопределенное состояние чекбокса по умолчанию.
    */
-  defaultIndeterminate?: boolean;
+  defaultIndeterminate?: boolean | undefined;
   /**
    * Иконка для включенного состояния в компактном режиме.
    */
-  IconOnCompact?: CheckboxInputIconType;
+  IconOnCompact?: CheckboxInputIconType | undefined;
   /**
    * Иконка для включенного состояния в обычном режиме.
    */
-  IconOnRegular?: CheckboxInputIconType;
+  IconOnRegular?: CheckboxInputIconType | undefined;
   /**
    * Иконка для выключенного состояния в компактном режиме.
    */
-  IconOffCompact?: CheckboxInputIconType;
+  IconOffCompact?: CheckboxInputIconType | undefined;
   /**
    * Иконка для выключенного состояния в обычном режиме.
    */
-  IconOffRegular?: CheckboxInputIconType;
+  IconOffRegular?: CheckboxInputIconType | undefined;
   /**
    * Иконка для неопределенного состояния.
    */
-  IconIndeterminate?: CheckboxInputIconType;
+  IconIndeterminate?: CheckboxInputIconType | undefined;
 }
 
 const warn = warnOnce('Checkbox');

package/src/components/ChipsInput/ChipsInput.tsx

@@ -14,7 +14,7 @@ export interface ChipsInputProps<Option extends ChipOption>
   /**
    * Если `true`, то справа будет отображаться кнопка для очистки значения.
    */
-  allowClearButton?: boolean;
+  allowClearButton?: boolean | undefined;
 }
 
 /**

package/src/components/ChipsInput/useChipsInput.ts

@@ -66,15 +66,15 @@ export interface UseChipsInputProps<O extends ChipOption = ChipOption>
   /**
    * Селектор значения.
    */
-  getOptionValue?: GetOptionValue<O>;
+  getOptionValue?: GetOptionValue<O> | undefined;
   /**
    * Селектор пользовательского представления.
    */
-  getOptionLabel?: GetOptionLabel<O>;
+  getOptionLabel?: GetOptionLabel<O> | undefined;
   /**
    * Функция для создания новой опции.
    */
-  getNewOptionData?: GetNewOptionData<O>;
+  getNewOptionData?: GetNewOptionData<O> | undefined;
 }
 
 export const useChipsInput = <O extends ChipOption>({

package/src/components/ChipsInputBase/Chip/Chip.tsx

@@ -30,39 +30,39 @@ export interface ChipProps
   /**
    * Режим отображения компонента.
    */
-  mode?: 'primary' | 'secondary';
+  mode?: 'primary' | 'secondary' | undefined;
   /**
    * Значение чипа.
    */
-  value?: ChipOptionValue;
+  value?: ChipOptionValue | undefined;
   /**
    * Можно ли удалить чип.
    */
-  removable?: boolean;
+  removable?: boolean | undefined;
   /**
    * Блокировка взаимодействия с чипом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Режим только для чтения.
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Текст для кнопки удаления.
    */
-  removeLabel?: string;
+  removeLabel?: string | undefined;
   /**
    * Контент перед основным содержимым.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Контент после основного содержимого.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Обработчик удаления чипа.
    */
-  onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;
+  onRemove?: ((event: React.MouseEvent, value: ChipOptionValue) => void) | undefined;
 }
 
 /**