@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/BaseGallery/CarouselBase/helpers.ts

@@ -9,7 +9,7 @@ export function calculateIndent(
   targetIndex: number,
   slidesManager: SlidesManagerState,
   isCenterWithCustomWidth: boolean,
-) {
+): number {
   if (slidesManager.isFullyVisible || !slidesManager.slides.length) {
     return 0;
   }
@@ -36,7 +36,7 @@ export function getShiftedIndexes(
   direction: 1 | -1,
   slides: GallerySlidesState[],
   availableWidth: number,
-) {
+): number[] {
   let gap = availableWidth;
   const shiftedSlideIndexes = [];
   const startIndex = direction === 1 ? 0 : slides.length - 1;
@@ -87,7 +87,10 @@ export function calculateLoopPoints(
 /**
  * Вычисляем "ключевые" точки, на которых должно происходить смещение слайдов
  */
-export function getLoopPoints(slidesManager: SlidesManagerState, containerWidth: number) {
+export function getLoopPoints(
+  slidesManager: SlidesManagerState,
+  containerWidth: number,
+): LoopPoint[] {
   const { slides, snaps } = slidesManager;
   const startShiftedIndexes = getShiftedIndexes(-1, slides, snaps[0]);
   const endShiftedIndexes = getShiftedIndexes(1, slides, containerWidth - snaps[0]);
@@ -106,7 +109,7 @@ export function getTargetIndex(
   slideIndex: number,
   currentShiftX: number,
   currentShiftXDelta: number,
-) {
+): number {
   const shift = currentShiftX + currentShiftXDelta;
   const direction = currentShiftXDelta < 0 ? 1 : -1;
 

package/src/components/BaseGallery/CarouselBase/hooks.ts

@@ -5,7 +5,11 @@ import { ANIMATION_DURATION } from './constants';
 
 const TIMING_FUNCTION = cubicBezier(0.8, 1);
 
-export function useSlideAnimation() {
+export function useSlideAnimation(): {
+  getAnimateFunction: (drawFunction: DrawInterface) => () => void;
+  addToAnimationQueue: (func: VoidFunction) => void;
+  startAnimation: () => void;
+} {
   const animationQueue = React.useRef<VoidFunction[]>([]);
 
   function getAnimateFunction(drawFunction: DrawInterface) {

package/src/components/BaseGallery/helpers.ts

@@ -13,7 +13,7 @@ export const calcMin = ({
   viewportOffsetWidth = 0,
   align,
   isCenterWithCustomWidth,
-}: CalcMin) => {
+}: CalcMin): number | undefined => {
   switch (align) {
     case 'left':
       return containerWidth - layerWidth;
@@ -38,7 +38,7 @@ export const calcMax = ({
   slides = [],
   viewportOffsetWidth = 0,
   isCenterWithCustomWidth,
-}: CalcMax) => {
+}: CalcMax): number => {
   if (isCenterWithCustomWidth && slides.length) {
     const { width, coordX } = slides[0];
     return viewportOffsetWidth / 2 - coordX - width / 2;

package/src/components/Button/Button.tsx

@@ -75,7 +75,7 @@ export const Button = ({
   disableSpinnerAnimation,
   rounded,
   ...restProps
-}: ButtonProps) => {
+}: ButtonProps): React.ReactNode => {
   const hasIcons = Boolean(before || after);
   const hasIconOnly = !children && Boolean(after) !== Boolean(before);
   const { sizeY = 'none' } = useAdaptivity();

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -50,7 +50,7 @@ export const ButtonGroup = ({
   stretched = false,
   align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,
   ...restProps
-}: ButtonGroupProps) => {
+}: ButtonGroupProps): React.ReactNode => {
   return (
     <RootComponent
       baseClassName={classNames(

package/src/components/Calendar/Calendar.tsx

@@ -112,7 +112,7 @@ export const Calendar = ({
   minDateTime,
   maxDateTime,
   ...props
-}: CalendarProps) => {
+}: CalendarProps): React.ReactNode => {
   const {
     viewDate,
     setViewDate,

package/src/components/CalendarDay/CalendarDay.tsx

@@ -31,7 +31,7 @@ export interface CalendarDayProps extends CalendarDayElementProps {
   onLeave?: (value: Date) => void;
 }
 
-export const CalendarDay = React.memo(
+export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
   ({
     day,
     today,

package/src/components/CalendarDays/CalendarDays.tsx

@@ -56,7 +56,7 @@ export const CalendarDays = ({
   listenDayChangesForUpdate = false,
   getRootRef,
   ...props
-}: CalendarDaysProps) => {
+}: CalendarDaysProps): React.ReactNode => {
   const { locale } = useConfigProvider();
   const ref = useExternRef(getRootRef);
   const now = useTodayDate(listenDayChangesForUpdate);

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -83,7 +83,7 @@ export const CalendarHeader = ({
   isMonthDisabled,
   isYearDisabled,
   ...restProps
-}: CalendarHeaderProps) => {
+}: CalendarHeaderProps): React.ReactNode => {
   const { locale } = useConfigProvider();
   const onMonthsChange = React.useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) =>

package/src/components/CalendarRange/CalendarRange.tsx

@@ -72,7 +72,7 @@ export const CalendarRange = ({
   nextMonthIcon,
   listenDayChangesForUpdate,
   ...props
-}: CalendarRangeProps) => {
+}: CalendarRangeProps): React.ReactNode => {
   const {
     viewDate,
     setViewDate,

package/src/components/CalendarTime/CalendarTime.tsx

@@ -39,7 +39,7 @@ export const CalendarTime = ({
   changeHoursLabel,
   changeMinutesLabel,
   isDayDisabled,
-}: CalendarTimeProps) => {
+}: CalendarTimeProps): React.ReactNode => {
   const localHours = isDayDisabled
     ? hours.map((hour) => {
         return { ...hour, disabled: isDayDisabled(setHours(value, hour.value), true) };

package/src/components/Card/Card.tsx

@@ -10,7 +10,7 @@ export interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */
-export const Card = ({ mode = 'tint', ...restProps }: CardProps) => {
+export const Card = ({ mode = 'tint', ...restProps }: CardProps): React.ReactNode => {
   const withBorder = mode === 'outline' || mode === 'outline-tint';
   return (
     <RootComponent

package/src/components/CardGrid/CardGrid.tsx

@@ -26,7 +26,11 @@ export interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */
-export const CardGrid = ({ size = 's', spaced = false, ...restProps }: CardGridProps) => {
+export const CardGrid = ({
+  size = 's',
+  spaced = false,
+  ...restProps
+}: CardGridProps): React.ReactNode => {
   const { sizeX = 'none' } = useAdaptivity();
 
   return (

package/src/components/CardScroll/CardScroll.tsx

@@ -30,7 +30,7 @@ export const CardScroll = ({
   showArrows = true,
   noSpaces = false,
   ...restProps
-}: CardScrollProps) => {
+}: CardScrollProps): React.ReactNode => {
   const refContainer = React.useRef<HTMLDivElement>(null);
   const gapRef = React.useRef<HTMLDivElement>(null);
 

package/src/components/Cell/Cell.module.css

@@ -15,7 +15,7 @@
 .Cell__dragger {
   position: relative;
   flex-shrink: 0;
-  margin-inline-end: 16px;
+  margin-inline-end: var(--vkui--spacing_size_2xl);
 }
 
 .Cell__content {
@@ -45,11 +45,11 @@
  * iOS
  */
 .Cell--ios .Cell__dragger {
-  margin-inline: 12px 0;
+  margin-inline: var(--vkui--spacing_size_xl) 0;
 }
 
 .Cell--ios .Cell__checkbox {
-  margin-inline-end: 12px;
+  margin-inline-end: var(--vkui--spacing_size_xl);
 }
 
 .Cell--ios.Cell--removable .Cell__content {

package/src/components/Cell/Cell.tsx

@@ -48,7 +48,9 @@ export interface CellProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */
-export const Cell = ({
+export const Cell: React.FC<CellProps> & {
+  Checkbox: typeof CellCheckbox;
+} = ({
   mode,
   onRemove = noop,
   removePlaceholder = 'Удалить',

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -65,7 +65,7 @@ export const CellCheckbox = ({
   style,
   type = 'auto',
   ...restProps
-}: CellCheckboxProps) => {
+}: CellCheckboxProps): React.ReactNode => {
   const typeIcon = useTypeIcon(type);
 
   const IconOff = typeIcon === 'circle' ? CheckCircleOff : CheckBoxOff;

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -27,7 +27,7 @@ export const CellDragger = ({
   onDragFinish,
   children,
   ...restProps
-}: CellDraggerProps) => {
+}: CellDraggerProps): React.ReactNode => {
   const platform = usePlatform();
   const Icon = platform === 'ios' ? Icon24ReorderIos : Icon24Reorder;
 

package/src/components/CellButton/CellButton.tsx

@@ -15,7 +15,7 @@ export const CellButton = ({
   mode = 'primary',
   className,
   ...restProps
-}: CellButtonProps) => {
+}: CellButtonProps): React.ReactNode => {
   return (
     <SimpleCell
       {...restProps}

package/src/components/Checkbox/Checkbox.tsx

@@ -20,6 +20,10 @@ import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Checkbox.module.css';
 
+function setIndeterminate(el: HTMLInputElement, indeterminate: boolean) {
+  el.indeterminate = indeterminate;
+}
+
 const sizeYClassNames = {
   none: styles['Checkbox--sizeY-none'],
   ['compact']: styles['Checkbox--sizeY-compact'],
@@ -61,17 +65,17 @@ export const Checkbox = ({
   onChange,
   titleAfter,
   ...restProps
-}: CheckboxProps) => {
+}: CheckboxProps): React.ReactNode => {
   const inputRef = useExternRef(getRef);
   const platform = usePlatform();
   const { sizeY = 'none' } = useAdaptivity();
   const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
 
   React.useEffect(() => {
-    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+    const indeterminateValue = indeterminate ?? Boolean(defaultIndeterminate);
 
     if (inputRef.current) {
-      inputRef.current.indeterminate = Boolean(indeterminateValue);
+      setIndeterminate(inputRef.current, indeterminateValue);
     }
   }, [defaultIndeterminate, indeterminate, inputRef]);
 
@@ -80,17 +84,16 @@ export const Checkbox = ({
       if (
         defaultIndeterminate !== undefined &&
         indeterminate === undefined &&
-        restProps.checked === undefined &&
-        inputRef.current
+        restProps.checked === undefined
       ) {
-        inputRef.current.indeterminate = false;
+        event.currentTarget.indeterminate = false;
       }
-      if (indeterminate !== undefined && inputRef.current) {
-        inputRef.current.indeterminate = indeterminate;
+      if (indeterminate !== undefined) {
+        event.currentTarget.indeterminate = indeterminate;
       }
       onChange && onChange(event);
     },
-    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],
+    [defaultIndeterminate, indeterminate, restProps.checked, onChange],
   );
 
   if (process.env.NODE_ENV === 'development') {

package/src/components/ChipsInput/ChipsInput.tsx

@@ -12,7 +12,12 @@ import { useChipsInput, type UseChipsInputProps } from './useChipsInput';
 export interface ChipsInputProps<Option extends ChipOption>
   extends ChipsInputBaseProps<Option>,
     UseChipsInputProps<Option>,
-    Pick<FormFieldProps, 'status' | 'mode' | 'before' | 'after'> {}
+    Pick<FormFieldProps, 'status' | 'mode' | 'before' | 'after'> {
+  /**
+   * Если `true`, то справа будет отображаться кнопка для очистки значения
+   */
+  allowClearButton?: boolean;
+}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
@@ -34,12 +39,14 @@ export const ChipsInput = <Option extends ChipOption>({
 
   // other
   disabled,
+  allowClearButton,
   ...restProps
-}: ChipsInputProps<Option>) => {
+}: ChipsInputProps<Option>): React.ReactNode => {
   const {
     value,
     addOptionFromInput,
     removeOption,
+    clearOptions,
 
     // input
     inputRef: inputRefHook,
@@ -69,8 +76,10 @@ export const ChipsInput = <Option extends ChipOption>({
       {...restProps}
       disabled={disabled}
       value={value}
+      clearButtonShown={allowClearButton && (!!value.length || !!inputValue.length)}
       onAddChipOption={addOptionFromInput}
       onRemoveChipOption={removeOption}
+      onClear={clearOptions}
       getRef={inputRef}
       inputValue={inputValue}
       onInputChange={onInputChange}

package/src/components/ChipsInput/useChipsInput.ts

@@ -12,6 +12,7 @@ import {
 import { isValueLikeChipOptionObject } from '../ChipsInputBase/helpers';
 import type {
   ChipOption,
+  ChipOptionLabel,
   ChipOptionValue,
   GetNewOptionData,
   GetOptionLabel,
@@ -23,7 +24,12 @@ export const transformValue = <O extends ChipOption>(
   value: O[],
   getOptionValue: GetOptionValue<O>,
   getOptionLabel: GetOptionLabel<O>,
-) =>
+): Array<
+  O & {
+    label: ChipOptionLabel;
+    value: ChipOptionValue;
+  }
+> =>
   value.map((option) => ({
     ...option,
     label: getOptionLabel(option),
@@ -67,7 +73,22 @@ export const useChipsInput = <O extends ChipOption>({
 
   // other
   disabled,
-}: UseChipsInputProps<O>) => {
+}: UseChipsInputProps<O>): {
+  value: Array<
+    O & {
+      label: ChipOptionLabel;
+      value: ChipOptionValue;
+    }
+  >;
+  addOption: (newValue: O | string) => void;
+  addOptionFromInput: (inputValue: string) => void;
+  removeOption: (newValue: O | ChipOptionValue) => void;
+  clearOptions: () => void;
+  inputRef: React.RefObject<HTMLInputElement & SimulateReactInputTargetState>;
+  inputValue: string;
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => any;
+  clearInput: () => void;
+} => {
   const [value, setValue] = useCustomEnsuredControl({
     disabled,
     value: valueProp ? transformValue(valueProp, getOptionValue, getOptionLabel) : undefined,
@@ -137,6 +158,11 @@ export const useChipsInput = <O extends ChipOption>({
     setValue(defaultValue);
   }, [defaultValue, setValue]);
 
+  const clearOptions = React.useCallback(() => {
+    setValue(DEFAULT_VALUE);
+    clearInput();
+  }, [clearInput, setValue]);
+
   useNativeFormResetListener(inputRef, reset);
 
   return {
@@ -149,5 +175,6 @@ export const useChipsInput = <O extends ChipOption>({
     inputValue,
     onInputChange: setInputChange,
     clearInput,
+    clearOptions,
   };
 };

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

@@ -33,7 +33,7 @@ export const Chip = ({
   onFocus: onFocusProp,
   onBlur: onBlurProp,
   ...restProps
-}: ChipProps) => {
+}: ChipProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const { focusVisible, onFocus, onBlur } = useFocusVisible();
   const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });

package/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -10,6 +10,7 @@ import {
   getActiveElementByAnotherElement,
 } from '../../lib/dom';
 import { FormField } from '../FormField/FormField';
+import { FormFieldClearButton } from '../FormFieldClearButton/FormFieldClearButton';
 import { Text } from '../Typography/Text/Text';
 import { DEFAULT_INPUT_VALUE, DEFAULT_VALUE, renderChipDefault } from './constants';
 import {
@@ -53,8 +54,14 @@ export const ChipsInputBase = <O extends ChipOption>({
   addOnBlur,
   onBlur,
   onInputChange,
+
+  // clear
+  ClearButton = FormFieldClearButton,
+  clearButtonShown,
+  clearButtonTestId,
+  onClear,
   ...restProps
-}: ChipsInputBasePrivateProps<O>) => {
+}: ChipsInputBasePrivateProps<O>): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const idGenerated = React.useId();
   const inputRef = useExternRef(getRef);
@@ -181,13 +188,30 @@ export const ChipsInputBase = <O extends ChipOption>({
       return;
     }
 
-    if (valueLength > 0 && listboxRef.current) {
-      moveFocusToChipOption(0, 'first', listboxRef.current);
-    } else if (inputRef.current) {
+    if (inputRef.current) {
       inputRef.current.focus();
     }
   };
 
+  const clearButton = React.useMemo(() => {
+    if (clearButtonShown) {
+      return <ClearButton onClick={onClear} disabled={disabled} data-testid={clearButtonTestId} />;
+    }
+    return undefined;
+  }, [ClearButton, clearButtonShown, clearButtonTestId, disabled, onClear]);
+
+  const afterItems = React.useMemo(() => {
+    if (clearButton || after) {
+      return (
+        <>
+          {clearButton}
+          {after}
+        </>
+      );
+    }
+    return undefined;
+  }, [after, clearButton]);
+
   return (
     <FormField
       Component="div"
@@ -195,7 +219,7 @@ export const ChipsInputBase = <O extends ChipOption>({
       style={style}
       disabled={disabled}
       before={before}
-      after={after}
+      after={afterItems}
       status={status}
       mode={mode}
       className={className}

package/src/components/ChipsInputBase/constants.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { Chip } from './Chip/Chip';
 import type { ChipOption, ChipOptionLabel, ChipOptionValue, RenderChipProps } from './types';
 
-export const DEFAULT_VALUE = [];
+export const DEFAULT_VALUE: never[] = [];
 
 export const DEFAULT_INPUT_VALUE = '';
 
-export function getOptionValueDefault<O extends ChipOption>(option: O) {
+export function getOptionValueDefault<O extends ChipOption>(option: O): ChipOptionValue {
   return option.value;
 }
 
-export function getOptionLabelDefault<O extends ChipOption>(option: O) {
+export function getOptionLabelDefault<O extends ChipOption>(option: O): ChipOptionLabel {
   return option.label;
 }
 

package/src/components/ChipsInputBase/helpers.ts

@@ -10,7 +10,7 @@ export const isValueLikeChipOptionObject = <O extends ChipOption>(v: O | ChipOpt
 /**
  * @private
  */
-export const isInputValueEmpty = (input: HTMLInputElement | null) =>
+export const isInputValueEmpty = (input: HTMLInputElement | null): boolean =>
   input ? input.value === DEFAULT_INPUT_VALUE : true;
 
 /**
@@ -19,7 +19,7 @@ export const isInputValueEmpty = (input: HTMLInputElement | null) =>
 export const getChipOptionIndexByValueProp = <O extends ChipOption>(
   optionProp: O | ChipOptionValue,
   valueProp: O[],
-) => {
+): number => {
   const value = isValueLikeChipOptionObject(optionProp) ? optionProp.value : optionProp;
   return valueProp.findIndex((option) => option.value === value);
 };
@@ -27,7 +27,7 @@ export const getChipOptionIndexByValueProp = <O extends ChipOption>(
 /**
  * @private
  */
-export const getChipOptionIndexByHTMLElement = (el: HTMLElement | null) => {
+export const getChipOptionIndexByHTMLElement = (el: HTMLElement | null): number => {
   const value = el && el.dataset.index;
   return typeof value === 'string' ? Number(value) : -1;
 };
@@ -35,7 +35,7 @@ export const getChipOptionIndexByHTMLElement = (el: HTMLElement | null) => {
 /**
  * @private
  */
-export const getChipOptionValueByHTMLElement = (el: HTMLElement | null) => {
+export const getChipOptionValueByHTMLElement = (el: HTMLElement | null): string | -1 => {
   const value = el && el.dataset.value;
   return typeof value === 'string' ? value : -1;
 };
@@ -47,7 +47,7 @@ export const getNextChipOptionIndexByNavigateToProp = (
   currentIndex: number,
   navigateTo: NavigateTo,
   length: number,
-) => {
+): number => {
   const FIRST_INDEX = 0;
   const LAST_INDEX = length - 1;
   switch (navigateTo) {

package/src/components/ChipsInputBase/types.ts

@@ -7,6 +7,7 @@ import type {
   HTMLAttributesWithRootRef,
 } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
+import { FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';
 
 export type NavigateTo = 'first' | 'prev' | 'next' | 'last';
 
@@ -102,6 +103,19 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
    * @default Используется [Chip](#/Chip)
    */
   renderChip?: RenderChip;
+  /**
+   * Показывать ли кнопку для очистки значения
+   */
+  clearButtonShown?: boolean;
+  /**
+   * (e2e) testId кнопки очистки
+   */
+  clearButtonTestId?: string;
+  /**
+   * Кастомная кнопка для очистки значения.
+   * Должна принимать обязательное свойство `onClick`
+   */
+  ClearButton?: React.ComponentType<FormFieldClearButtonProps>;
 }
 
 /**
@@ -110,6 +124,7 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
 export interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>
   extends ChipsInputBaseProps<O>,
     Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after'> {
+  onClear: () => void;
   onAddChipOption: (value: string) => void;
   onRemoveChipOption: (value: O | ChipOptionValue) => void;
 }

package/src/components/ChipsSelect/ChipsSelect.module.css

@@ -18,3 +18,7 @@
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
+
+.ChipsSelect__dropdown-icon {
+  margin-inline-end: 8px;
+}