@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -13,7 +13,10 @@ import {
   renderChipDefault,
 } from '../ChipsInputBase/constants';
 import type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';
-import { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';
+import {
+  CustomSelectDropdown,
+  CustomSelectDropdownProps,
+} from '../CustomSelectDropdown/CustomSelectDropdown';
 import {
   CustomSelectOption,
   type CustomSelectOptionProps,
@@ -69,7 +72,11 @@ const findIndexBefore = <O extends ChipOption>(
 export interface ChipsSelectProps<O extends ChipOption>
   extends ChipsInputBaseProps<O>,
     UseChipsSelectProps<O>,
-    Pick<FormFieldProps, 'status' | 'mode' | 'before'> {
+    Pick<FormFieldProps, 'status' | 'mode' | 'before'>,
+    Pick<
+      CustomSelectDropdownProps,
+      'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'
+    > {
   placement?: 'top' | 'bottom';
   /**
    * Отрисовка Spinner вместо списка опций в выпадающем списке
@@ -114,6 +121,11 @@ export interface ChipsSelectProps<O extends ChipOption>
    * Отступ от выпадающего списка
    */
   dropdownOffsetDistance?: number;
+
+  /**
+   * Если `true`, то справа будет отображаться кнопка для очистки значения
+   */
+  allowClearButton?: boolean;
 }
 
 /**
@@ -143,6 +155,7 @@ export const ChipsSelect = <Option extends ChipOption>({
   dropdownTestId,
   onClose,
   onOpen,
+  overscrollBehavior,
 
   // ChipsInputProps
   getRef,
@@ -163,8 +176,10 @@ export const ChipsSelect = <Option extends ChipOption>({
   onBlur: onBlurProp,
   onKeyDown: onKeyDownProp,
   dropdownOffsetDistance = 0,
+  allowClearButton,
+  clearButtonTestId,
   ...restProps
-}: ChipsSelectProps<Option>) => {
+}: ChipsSelectProps<Option>): React.ReactNode => {
   const {
     // Связано с ChipsInputProps
     // option
@@ -172,6 +187,7 @@ export const ChipsSelect = <Option extends ChipOption>({
     addOptionFromInput,
     addOption,
     removeOption,
+    clearOptions,
     // input
     inputRef: inputRefHook,
     inputValue,
@@ -419,23 +435,35 @@ export const ChipsSelect = <Option extends ChipOption>({
     [dropdownOffsetDistance, opened, dropdownVerticalPlacement],
   );
 
+  const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);
+
   return (
     <>
       <ChipsInputBase
         {...restProps}
         disabled={disabled}
         readOnly={readOnly}
+        clearButtonShown={clearButtonShown}
+        clearButtonTestId={clearButtonTestId}
         // FormFieldProps
         id={labelledbyId}
         getRootRef={rootRef}
         className={classNames(styles['ChipsSelect'], openedClassNames, className)}
         status={status}
-        after={dropdownIconProp || <DropdownIcon opened={opened} />}
+        after={
+          dropdownIconProp || (
+            <DropdownIcon
+              opened={opened}
+              className={clearButtonShown ? styles['ChipsSelect__dropdown-icon'] : undefined}
+            />
+          )
+        }
         // option
         value={value}
         onAddChipOption={addOptionFromInput}
         onRemoveChipOption={removeOption}
         renderChip={renderChip}
+        onClear={clearOptions}
         // input
         getRef={inputRef}
         inputValue={inputValue}
@@ -464,6 +492,7 @@ export const ChipsSelect = <Option extends ChipOption>({
           forcePortal={forceDropdownPortal}
           noMaxHeight={noMaxHeight}
           offsetDistance={dropdownOffsetDistance}
+          overscrollBehavior={overscrollBehavior}
           // a11y
           id={dropdownId}
           role="listbox"

package/src/components/ChipsSelect/constants.tsx

@@ -18,7 +18,7 @@ export const FOCUS_ACTION_NEXT: FocusActionType = 'next';
 
 export const FOCUS_ACTION_PREV: FocusActionType = 'prev';
 
-export const renderOptionDefault = (props: CustomSelectOptionProps) => (
+export const renderOptionDefault = (props: CustomSelectOptionProps): React.ReactNode => (
   <CustomSelectOption {...props} />
 );
 

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { isEqual } from '@vkontakte/vkjs';
+import { SimulateReactInputTargetState } from '../../lib/react';
 import { defaultFilterFn, type FilterFn } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import {
@@ -14,7 +15,7 @@ import {
   getOptionLabelDefault,
   getOptionValueDefault,
 } from '../ChipsInputBase/constants';
-import type { ChipOption } from '../ChipsInputBase/types';
+import type { ChipOption, ChipOptionLabel, ChipOptionValue } from '../ChipsInputBase/types';
 import { DEFAULT_EMPTY_TEXT, DEFAULT_SELECTED_BEHAVIOR, isNotServicePreset } from './constants';
 import type { OptionPreset } from './types';
 
@@ -73,7 +74,32 @@ export const useChipsSelect = <O extends ChipOption>({
   options: optionsProp = DEFAULT_VALUE,
   onClose,
   onOpen,
-}: UseChipsSelectProps<O>) => {
+}: UseChipsSelectProps<O>): {
+  // options
+  value: Array<
+    O & {
+      label: ChipOptionLabel;
+      value: ChipOptionValue;
+    }
+  >;
+  // input
+  inputValue: string;
+  onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  // dropdown states
+  options: Array<OptionPreset<O>>;
+  opened: boolean;
+  setOpened: (isOpened: boolean) => void;
+  focusedOption: O | null;
+  focusedOptionIndex: number | null;
+  setFocusedOption: React.Dispatch<React.SetStateAction<O | null>>;
+  setFocusedOptionIndex: React.Dispatch<React.SetStateAction<number | null>>;
+  addOption: (newValue: string | O) => void;
+  addOptionFromInput: (inputValue: string) => void;
+  removeOption: (newValue: ChipOptionValue | O) => void;
+  clearOptions: () => void;
+  inputRef: React.RefObject<HTMLInputElement & SimulateReactInputTargetState>;
+  clearInput: () => void;
+} => {
   const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({
     // option
     value: valueProp,

package/src/components/Clickable/Clickable.tsx

@@ -175,7 +175,7 @@ export const Clickable = <T,>({
   focusVisibleMode = 'inside',
   baseClassName: baseClassNameProp,
   ...restProps
-}: ClickableProps<T>) => {
+}: ClickableProps<T>): React.ReactNode => {
   const commonProps = component(restProps);
   const isClickable = checkClickable(restProps);
   const baseClassName = classNames(

package/src/components/Clickable/useKeyboard.tsx

@@ -8,7 +8,9 @@ import { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';
  * - role="link" (активация по Enter)
  * - role="button" (активация по Space и Enter)
  */
-export function useKeyboard() {
+export function useKeyboard(): {
+  onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+} {
   function onKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
     if (!shouldTriggerClickOnEnterOrSpace(e)) {
       return;

package/src/components/Clickable/useState.tsx

@@ -119,14 +119,13 @@ function useActive({
   };
 }
 
-export const ClickableLockStateContext = React.createContext<undefined | ((v: boolean) => void)>(
-  undefined,
-);
+export const ClickableLockStateContext: React.Context<((v: boolean) => void) | undefined> =
+  React.createContext<undefined | ((v: boolean) => void)>(undefined);
 
 /**
  * Блокирует стейт на всплытие
  */
-export function useLockState() {
+export function useLockState(): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {
   const setLockBubbling = React.useContext(ClickableLockStateContext) || noop;
   const [lockState, setLockState] = React.useState(false);
 
@@ -138,7 +137,10 @@ export function useLockState() {
 /**
  * Управляет состоянием компонента
  */
-export function useState({ hasHover, hasActive, ...restProps }: StateProps) {
+export function useState({ hasHover, hasActive, ...restProps }: StateProps): {
+  stateClassName: string;
+  setLockBubblingImmediate: (...args: any[]) => void;
+} {
   const [lockState, setLockBubbling, setLockBubblingImmediate] = useLockState();
 
   const props = {

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -17,7 +17,7 @@ export interface ConfigProviderProps extends Partial<ConfigProviderContextInterf
 /**
  * @see https://vkcom.github.io/VKUI/#/ConfigProvider
  */
-export const ConfigProvider = (propsRaw: ConfigProviderProps) => {
+export const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {
   const props = excludeKeysWithUndefined(propsRaw);
   const parentConfig = useConfigProvider();
 

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -72,15 +72,17 @@ export interface ConfigProviderContextInterface {
   locale: string;
 }
 
-export const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>({
-  hasCustomPanelHeaderAfter: false,
-  customPanelHeaderAfterMinWidth: 90,
-  isWebView: false,
-  transitionMotionEnabled: true,
-  platform: platform(),
-  appearance: undefined, // undefined обозначает что тема должна определиться автоматически
-  tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,
-  locale: 'ru',
-});
+export const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =
+  React.createContext<ConfigProviderContextInterface>({
+    hasCustomPanelHeaderAfter: false,
+    customPanelHeaderAfterMinWidth: 90,
+    isWebView: false,
+    transitionMotionEnabled: true,
+    platform: platform(),
+    appearance: undefined, // undefined обозначает что тема должна определиться автоматически
+    tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,
+    locale: 'ru',
+  });
 
-export const useConfigProvider = () => React.useContext(ConfigProviderContext);
+export const useConfigProvider = (): ConfigProviderContextInterface =>
+  React.useContext(ConfigProviderContext);

package/src/components/ConfigProvider/ConfigProviderOverride.tsx

@@ -13,7 +13,10 @@ export interface ConfigProviderOverrideProps extends Partial<ConfigProviderConte
 /**
  * Компонент предназначен для перебивания одного из значений контекста
  */
-export function ConfigProviderOverride({ children, ...contextValue }: ConfigProviderOverrideProps) {
+export function ConfigProviderOverride({
+  children,
+  ...contextValue
+}: ConfigProviderOverrideProps): React.ReactNode {
   const parentConfig = useConfigProvider();
 
   const configContext = useObjectMemo({

package/src/components/ContentBadge/ContentBadge.tsx

@@ -83,7 +83,9 @@ export interface ContentBadgeProps
  *
  * TODO [>=7]: переименовать в Badge
  */
-export const ContentBadge = ({
+export const ContentBadge: React.FC<ContentBadgeProps> & {
+  SlotIcon: typeof ContentBadgeSlotIcon;
+} = ({
   appearance = 'accent',
   mode = 'primary',
   capsule,

package/src/components/ContentBadge/ContentBadgeContext.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
 import type { ContentBadgeSizeType } from './types';
 
+type ContentBadgeContextValue = {
+  isSingleChild: boolean;
+  size: ContentBadgeSizeType;
+};
+
 /**
  * Контекст для внутреннего использовния.
  * @private
  */
-export const ContentBadgeContext = React.createContext<{
-  isSingleChild: boolean;
-  size: ContentBadgeSizeType;
-}>({
-  isSingleChild: false,
-  size: 'm',
-});
+export const ContentBadgeContext: React.Context<ContentBadgeContextValue> =
+  React.createContext<ContentBadgeContextValue>({
+    isSingleChild: false,
+    size: 'm',
+  });

package/src/components/ContentBadge/ContentBadgeSlotIcon.tsx

@@ -16,7 +16,7 @@ const singleIconClassNames = {
 
 export type ContentBadgeSlotIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 
-export const ContentBadgeSlotIcon = ({
+export const ContentBadgeSlotIcon: React.FC<ContentBadgeSlotIconProps> = ({
   className,
   getRootRef,
   children,

package/src/components/ContentCard/ContentCard.tsx

@@ -74,7 +74,7 @@ export const ContentCard = ({
   hasHover = false,
   hasActive = false,
   ...restProps
-}: ContentCardProps) => {
+}: ContentCardProps): React.ReactNode => {
   return (
     <Card
       mode={mode}

package/src/components/Counter/Counter.tsx

@@ -37,7 +37,7 @@ export const Counter = ({
   children,
   className,
   ...restProps
-}: CounterProps) => {
+}: CounterProps): React.ReactNode => {
   if (React.Children.count(children) === 0) {
     return null;
   }

package/src/components/CustomScrollView/CustomScrollView.module.css

@@ -15,6 +15,14 @@
   position: relative;
 }
 
+.CustomScrollView__box--overscrollBehavior-contain {
+  overscroll-behavior: contain;
+}
+
+.CustomScrollView__box--overscrollBehavior-none {
+  overscroll-behavior: none;
+}
+
 .CustomScrollView__box-content {
   position: relative;
   inline-size: 100%;
@@ -36,7 +44,7 @@
 .CustomScrollView__trackerY {
   inline-size: 10px;
   box-sizing: border-box;
-  padding-block: 4px 4px;
+  padding-block: 4px;
   padding-inline: 0 4px;
   position: absolute;
   inset-block-start: 0;

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -23,6 +23,12 @@ function hasPointerClassName(hasPointer: boolean | undefined) {
   }
 }
 
+const overscrollBehaviorClassNames = {
+  auto: undefined,
+  contain: styles['CustomScrollView__box--overscrollBehavior-contain'],
+  none: styles['CustomScrollView__box--overscrollBehavior-none'],
+};
+
 export interface CustomScrollViewProps
   extends React.AllHTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement>,
@@ -32,6 +38,10 @@ export interface CustomScrollViewProps
   className?: HTMLDivElement['className'];
   onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
   children: React.ReactNode;
+  /**
+   * Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
+   */
+  overscrollBehavior?: 'auto' | 'contain' | 'none';
 }
 
 export const CustomScrollView = ({
@@ -43,8 +53,9 @@ export const CustomScrollView = ({
   autoHideScrollbarDelay,
   onScroll,
   getRootRef,
+  overscrollBehavior = 'auto',
   ...restProps
-}: CustomScrollViewProps) => {
+}: CustomScrollViewProps): React.ReactNode => {
   const { document, window } = useDOM();
   const { hasPointer } = useAdaptivity();
 
@@ -203,7 +214,15 @@ export const CustomScrollView = ({
       ref={getRootRef}
       {...restProps}
     >
-      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>
+      <div
+        className={classNames(
+          styles['CustomScrollView__box'],
+          overscrollBehaviorClassNames[overscrollBehavior],
+        )}
+        tabIndex={-1}
+        ref={boxRef}
+        onScroll={scroll}
+      >
         <div ref={boxContentRef} className={styles['CustomScrollView__box-content']}>
           {children}
         </div>

package/src/components/CustomSelect/CustomSelect.tsx

@@ -10,7 +10,10 @@ import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { debounce } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
 import { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';
-import { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';
+import {
+  CustomSelectDropdown,
+  CustomSelectDropdownProps,
+} from '../CustomSelectDropdown/CustomSelectDropdown';
 import {
   CustomSelectOption,
   CustomSelectOptionProps,
@@ -129,7 +132,15 @@ export interface SelectProps<
   OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface,
 > extends NativeSelectProps,
     FormFieldProps,
-    TrackerOptionsProps {
+    TrackerOptionsProps,
+    Pick<
+      CustomSelectDropdownProps,
+      'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'
+    > {
+  /**
+   * ref на внутрений компонент input
+   */
+  getSelectInputRef?: React.Ref<HTMLInputElement>;
   /**
    * Если `true`, то при клике на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
    * производится по `option.label`.
@@ -219,7 +230,7 @@ type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
  */
 export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(
   props: SelectProps<OptionInterfaceT>,
-) {
+): React.ReactNode {
   const [opened, setOpened] = React.useState(false);
   const {
     before,
@@ -256,6 +267,8 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     nativeSelectTestId,
     defaultValue,
     required,
+    getSelectInputRef,
+    overscrollBehavior,
     ...restProps
   } = props;
 
@@ -703,7 +716,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     }
   }, [emptyText, options, renderDropdown, renderOption]);
 
-  const selectInputRef = React.useRef<HTMLInputElement | null>(null);
+  const selectInputRef = useExternRef(getSelectInputRef);
   const focusOnInputTimerRef = React.useRef<ReturnType<typeof setTimeout>>();
   const focusOnInput = React.useCallback(() => {
     clearTimeout(focusOnInputTimerRef.current);
@@ -711,7 +724,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     focusOnInputTimerRef.current = setTimeout(() => {
       selectInputRef.current && selectInputRef.current.focus();
     }, 0);
-  }, []);
+  }, [selectInputRef]);
   useIsomorphicLayoutEffect(function clearFocusOnInputTimer() {
     return () => {
       clearTimeout(focusOnInputTimerRef.current);
@@ -795,7 +808,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         }
       }
     },
-    [document, focusOnInput],
+    [document, focusOnInput, selectInputRef],
   );
 
   const preventInputBlurWhenClickInsideFocusedSelectArea = (
@@ -896,6 +909,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
           onPlacementChange={setPopperPlacement}
           onMouseLeave={resetFocusedOption}
           fetching={fetching}
+          overscrollBehavior={overscrollBehavior}
           offsetDistance={dropdownOffsetDistance}
           autoWidth={dropdownAutoWidth}
           forcePortal={forceDropdownPortal}

package/src/components/CustomSelect/CustomSelectClearButton.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Icon16Cancel } from '@vkontakte/icons';
 import { stopPropagation } from '../../lib/utils';
 import { HasDataAttribute } from '../../types';
@@ -13,7 +14,7 @@ export const CustomSelectClearButton = ({
   className,
   onClick,
   ...restProps
-}: CustomSelectClearButtonProps) => {
+}: CustomSelectClearButtonProps): React.ReactNode => {
   return (
     <IconButton
       Component="button"

package/src/components/CustomSelect/CustomSelectInput.tsx

@@ -51,7 +51,7 @@ export const CustomSelectInput = ({
   fetching,
   labelTextTestId,
   ...restProps
-}: CustomSelectInputProps) => {
+}: CustomSelectInputProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
   const title = children || placeholder;

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import type { Placement } from '../../lib/floating';
 import { HTMLAttributesWithRootRef } from '../../types';
-import { CustomScrollView } from '../CustomScrollView/CustomScrollView';
+import { CustomScrollView, CustomScrollViewProps } from '../CustomScrollView/CustomScrollView';
 import { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';
 import { Popper } from '../Popper/Popper';
 import { Spinner } from '../Spinner/Spinner';
@@ -10,6 +10,10 @@ import styles from './CustomSelectDropdown.module.css';
 
 export interface CustomSelectDropdownProps
   extends HTMLAttributesWithRootRef<HTMLDivElement>,
+    Pick<
+      CustomScrollViewProps,
+      'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'
+    >,
     TrackerOptionsProps {
   targetRef: React.RefObject<HTMLElement>;
   placement?: Placement;
@@ -44,8 +48,10 @@ export const CustomSelectDropdown = ({
   autoHideScrollbarDelay,
   className,
   noMaxHeight = false,
+  // CustomScrollView
+  overscrollBehavior,
   ...restProps
-}: CustomSelectDropdownProps) => {
+}: CustomSelectDropdownProps): React.ReactNode => {
   const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));
 
   const onPlacementChange = React.useCallback(
@@ -86,6 +92,7 @@ export const CustomSelectDropdown = ({
         className={noMaxHeight ? undefined : styles['CustomSelectDropdown__in--withMaxHeight']}
         autoHideScrollbar={autoHideScrollbar}
         autoHideScrollbarDelay={autoHideScrollbarDelay}
+        overscrollBehavior={overscrollBehavior}
       >
         {fetching ? (
           <div className={styles['CustomSelectDropdown__fetching']}>

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -70,7 +70,7 @@ export const CustomSelectOption = ({
   className,
   onClick,
   ...restProps
-}: CustomSelectOptionProps) => {
+}: CustomSelectOptionProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const style = React.useMemo(
     () =>

package/src/components/DateInput/DateInput.tsx

@@ -146,7 +146,7 @@ export const DateInput = ({
   nextMonthIcon,
   disableCalendar = false,
   ...props
-}: DateInputProps) => {
+}: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
   const monthsRef = React.useRef<HTMLSpanElement>(null);
   const yearsRef = React.useRef<HTMLSpanElement>(null);

package/src/components/DatePicker/DatePicker.tsx

@@ -233,7 +233,7 @@ const DatePickerNative = ({
  * [Input](https://vkcom.github.io/VKUI/#/Input) и
  * [Select](https://vkcom.github.io/VKUI/#/Select).
  */
-export const DatePicker = ({ onDateChange, ...props }: DatePickerProps) => {
+export const DatePicker = ({ onDateChange, ...props }: DatePickerProps): React.ReactNode => {
   const hasPointer = useAdaptivityHasPointer();
 
   const onChange = (update: DatePickerDateFormat) => {

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -135,7 +135,7 @@ export const DateRangeInput = ({
   nextMonthIcon,
   disableCalendar = false,
   ...props
-}: DateRangeInputProps) => {
+}: DateRangeInputProps): React.ReactNode => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
   const monthsStartRef = React.useRef<HTMLSpanElement>(null);
   const yearsStartRef = React.useRef<HTMLSpanElement>(null);

package/src/components/Div/Div.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Div.module.css';
@@ -7,4 +8,6 @@ export type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
  */
-export const Div = (props: DivProps) => <RootComponent baseClassName={styles['Div']} {...props} />;
+export const Div = (props: DivProps): React.ReactNode => (
+  <RootComponent baseClassName={styles['Div']} {...props} />
+);

package/src/components/DropZone/DropZone.tsx

@@ -21,13 +21,9 @@ export interface DropZoneProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
  * @since 6.1.0
  * @see https://vkcom.github.io/VKUI/#/DropZone
  */
-export const DropZone = ({
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  children,
-  ...props
-}: DropZoneProps) => {
+export const DropZone: React.FC<DropZoneProps> & {
+  Grid: typeof DropZoneGrid;
+} = ({ onDragOver, onDragLeave, onDrop, children, ...props }: DropZoneProps): React.ReactNode => {
   const [active, setActive] = React.useState(false);
 
   const onActive: React.DragEventHandler<HTMLDivElement> = (event) => {

package/src/components/DropZone/components/DropZoneGrid.tsx

@@ -12,7 +12,10 @@ export interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElem
   direction?: 'row' | 'column';
 }
 
-export const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (
+export const DropZoneGrid: React.FC<DropZoneGridProps> = ({
+  direction = 'column',
+  ...props
+}: DropZoneGridProps) => (
   <RootComponent
     baseClassName={classNames(styles['DropZoneGrid'], directionStyle[direction])}
     {...props}

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -13,7 +13,11 @@ export interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGEleme
   opened?: boolean;
 }
 
-export const DropdownIcon = ({ opened = false, className, ...restProps }: DropdownIconProps) => {
+export const DropdownIcon = ({
+  opened = false,
+  className,
+  ...restProps
+}: DropdownIconProps): React.ReactNode => {
   const { sizeY } = useAdaptivityConditionalRender();
   const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;
   const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;