@vkontakte/vkui 4.37.0 → 4.37.2

package/dist/cjs/components/ChipsInput/ChipsInput.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FormFieldProps } from "../FormField/FormField";
+import { ChipOption } from "../Chip/Chip";
+import { ChipsInputBaseProps } from "../ChipsInputBase/ChipsInputBase";
+import "./ChipsInput.css";
+export interface ChipsInputProps<Option extends ChipOption> extends ChipsInputBaseProps<Option>, FormFieldProps {
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/ChipsInput
+ */
+export declare const ChipsInput: <Option extends ChipOption>({ style, className, getRootRef, before, after, status, ...restProps }: ChipsInputProps<Option>) => JSX.Element;

package/dist/cjs/components/ChipsInputBase/ChipsInputBase.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { HasAlign, HasRef, HasRootRef } from "../../types";
+import { ChipOption, ChipValue, RenderChip } from "../Chip/Chip";
+import "./ChipsInputBase.css";
+export interface ChipsInputBaseProps<Option extends ChipOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign {
+    value: Option[];
+    inputValue?: string;
+    onChange?: (o: Option[]) => void;
+    onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
+    getOptionValue?: (o?: Option) => ChipValue;
+    getOptionLabel?: (o?: Option) => string;
+    getNewOptionData?: (v?: ChipValue, l?: string) => Option;
+    renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
+    inputAriaLabel?: string;
+}
+export declare const chipsInputDefaultProps: ChipsInputBaseProps<any>;
+export declare const ChipsInputBase: <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => JSX.Element;

package/dist/cjs/components/ChipsSelect/ChipsSelect.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { ChipOption } from "../Chip/Chip";
+import { ChipsInputProps } from "../ChipsInput/ChipsInput";
+import { CustomSelectOptionProps } from "../CustomSelectOption/CustomSelectOption";
+import "./ChipsSelect.css";
+export interface ChipsSelectProps<Option extends ChipOption> extends Omit<ChipsInputProps<Option>, "after"> {
+    popupDirection?: "top" | "bottom";
+    options?: Option[];
+    filterFn?: false | ((value?: string, option?: Option, getOptionLabel?: Pick<ChipsInputProps<Option>, "getOptionLabel">["getOptionLabel"]) => boolean);
+    /**
+     * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)
+     */
+    creatable?: boolean;
+    /**
+     * Отрисовка лоадера вместо списка опций в выпадающем списке
+     */
+    fetching?: boolean;
+    renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
+    /**
+     * Показывать или скрывать уже выбранные опции
+     */
+    showSelected?: boolean;
+    /**
+     * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)
+     */
+    creatableText?: string;
+    /**
+     * Текст который показывается если список опций пуст
+     */
+    emptyText?: string;
+    /**
+     * Событие срабатывающее перед onChange
+     */
+    onChangeStart?: (e: React.MouseEvent | React.KeyboardEvent, option: Option) => void;
+    /**
+     * Закрытие выпадающего списка после выбора элемента
+     */
+    closeAfterSelect?: boolean;
+    fixDropdownWidth?: boolean;
+    forceDropdownPortal?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/ChipsSelect
+ */
+export declare const ChipsSelect: <Option extends ChipOption>(props: ChipsSelectProps<Option>) => JSX.Element;

package/dist/cjs/components/ConfigProvider/ConfigProvider.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { ConfigProviderContextInterface } from "./ConfigProviderContext";
+import { AppearanceScheme } from "../../helpers/scheme";
+export interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {
+    /**
+     * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
+     * Цветовая схема приложения
+     */
+    scheme?: AppearanceScheme;
+    /**
+      Локаль ([список](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry))
+     */
+    locale?: string;
+    children?: React.ReactNode;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/ConfigProvider
+ */
+export declare const ConfigProvider: (props: ConfigProviderProps) => JSX.Element;

package/dist/cjs/components/ConfigProvider/ConfigProviderContext.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType } from "../../lib/platform";
+export declare enum WebviewType {
+    VKAPPS = "vkapps",
+    INTERNAL = "internal"
+}
+export interface ConfigProviderContextInterface {
+    /**
+     * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере
+     */
+    isWebView: boolean;
+    /**
+     * Тип вебвью.<br>
+     * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)
+     */
+    webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;
+    /**
+     * Тип приложения
+     */
+    app?: string;
+    /**
+     * Тип цветовой схемы – `light` или `dark`
+     */
+    appearance?: AppearanceType;
+    /**
+     * Включена ли анимация переходов между экранами в `Root` и `View`
+     */
+    transitionMotionEnabled: boolean;
+    /**
+     * Платформа
+     */
+    platform: PlatformType;
+    hasNewTokens: boolean;
+}
+export declare const ConfigProviderContext: React.Context<ConfigProviderContextInterface>;
+export declare const useConfigProvider: () => ConfigProviderContextInterface;

package/dist/cjs/components/ContentCard/ContentCard.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { CardProps } from "../Card/Card";
+import { TappableProps } from "../Tappable/Tappable";
+import { HasRef, HasRootRef } from "../../types";
+import "./ContentCard.css";
+export interface ContentCardProps extends HasRootRef<HTMLDivElement>, Omit<TappableProps, "getRootRef" | "crossOrigin">, Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>, HasRef<HTMLImageElement> {
+    /**
+     Текст над заголовком
+     */
+    subtitle?: React.ReactNode;
+    /**
+     Заголовок
+     */
+    header?: React.ReactNode;
+    /**
+     Текст
+     */
+    text?: React.ReactNode;
+    /**
+     Нижний текст
+     */
+    caption?: React.ReactNode;
+    /**
+      @deprecated будет удалено в 5.0.0. Используйте src
+     */
+    image?: string;
+    /**
+      Максимальная высота изображения
+     */
+    maxHeight?: number;
+    mode?: CardProps["mode"];
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/ContentCard
+ */
+export declare const ContentCard: ({ subtitle, header, text, caption, className, mode, style, getRootRef, getRef, maxHeight, image, src, srcSet, alt, width, height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, ...restProps }: ContentCardProps) => JSX.Element;

package/dist/cjs/components/Counter/Counter.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import "./Counter.css";
+export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Тип счетчика. При использовании компонента в качестве значения свойства `after` у `Button` эти значения игнорируются
+     */
+    mode?: "secondary" | "primary" | "prominent" | "contrast";
+    size?: "s" | "m";
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/Counter
+ */
+export declare const Counter: ({ mode, size, children, ...restProps }: CounterProps) => JSX.Element | null;

package/dist/cjs/components/CustomScrollView/CustomScrollView.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { DOMProps } from "../../lib/dom";
+import { TrackerOptionsProps } from "./useTrackerVisibility";
+import "./CustomScrollView.css";
+export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
+    windowResize?: boolean;
+    boxRef?: React.Ref<HTMLDivElement>;
+    className?: HTMLDivElement["className"];
+    children: React.ReactNode;
+}
+export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, }: CustomScrollViewProps) => JSX.Element;

package/dist/cjs/components/CustomScrollView/useTrackerVisibility.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Хук, который позволяет управлять видимостью ползунка скроллбара.
+ * @param autoHideScrollbar - скрывать ли ползунок скроллбара
+ * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается
+ * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка
+ */
+export declare const useTrackerVisibility: (autoHideScrollbar?: boolean, autoHideScrollbarDelay?: number) => TrackerVisibilityProps;
+export interface TrackerOptionsProps {
+    /**
+     * Скрывать ли ползунок скроллбара
+     */
+    autoHideScrollbar?: boolean;
+    /**
+     * Через какое кол-во миллисекунд ползунок скроллбара скрывается
+     */
+    autoHideScrollbarDelay?: number;
+}
+export interface TrackerVisibilityProps {
+    /**
+     * Отвечает за видимость ползунка
+     */
+    trackerVisible: boolean;
+    /**
+     * Функция для обработки события у блока со скроллом
+     */
+    onTargetScroll(this: void): void;
+    /**
+     * Функция для обработки начала drag event ползунка
+     */
+    onTrackerDragStart(this: void): void;
+    /**
+     * Функция для обработки окончания drag event ползунка
+     */
+    onTrackerDragStop(this: void): void;
+    /**
+     * Функция для обработки mouseLeave event ползунка
+     */
+    onTrackerMouseEnter(this: void): void;
+    /**
+     * Функция для обработки mouseEnter event ползунка
+     */
+    onTrackerMouseLeave(this: void): void;
+}

package/dist/cjs/components/CustomSelect/CustomSelect.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { NativeSelectProps } from "../NativeSelect/NativeSelect";
+import { CustomSelectOptionProps } from "../CustomSelectOption/CustomSelectOption";
+import { FormFieldProps } from "../FormField/FormField";
+import { HasPlatform } from "../../types";
+import { TrackerOptionsProps } from "../CustomScrollView/useTrackerVisibility";
+import { SelectType } from "../Select/Select";
+import "./CustomSelect.css";
+declare type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>["value"];
+export interface CustomSelectOptionInterface {
+    value: SelectValue;
+    label: React.ReactElement | string;
+    disabled?: boolean;
+    [index: string]: any;
+}
+export interface CustomSelectProps extends NativeSelectProps, HasPlatform, FormFieldProps, TrackerOptionsProps {
+    /**
+     * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
+     * производится по `option.label`.
+     */
+    searchable?: boolean;
+    /**
+     * Текст, который будет отображен, если приходит пустой `options`.
+     */
+    emptyText?: string;
+    onInputChange?: (e: React.ChangeEvent, options: CustomSelectOptionInterface[]) => void | CustomSelectOptionInterface[];
+    options: CustomSelectOptionInterface[];
+    /**
+     * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.
+     */
+    filterFn?: false | ((value: string, option: CustomSelectOptionInterface, getOptionLabel?: (option: Partial<CustomSelectOptionInterface>) => string) => boolean);
+    popupDirection?: "top" | "bottom";
+    /**
+     * Рендер-проп для кастомного рендера опции.
+     * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)
+     */
+    renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
+    /**
+     * Рендер-проп для кастомного рендера содержимого дропдауна.
+     * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.
+     */
+    renderDropdown?: ({ defaultDropdownContent, }: {
+        defaultDropdownContent: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`
+     * "победит" `renderDropdown`.
+     */
+    fetching?: boolean;
+    onClose?: VoidFunction;
+    onOpen?: VoidFunction;
+    icon?: React.ReactNode;
+    dropdownOffsetDistance?: number;
+    fixDropdownWidth?: boolean;
+    forceDropdownPortal?: boolean;
+    selectType?: keyof typeof SelectType;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/CustomSelect
+ */
+export declare const CustomSelect: React.FC<Pick<CustomSelectProps, "platform" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "size" | "icon" | "after" | "multiple" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "status" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "align" | "getRootRef" | "getRef" | "onOpen" | "onClose" | "before" | "options" | "popupDirection" | "multiline" | "onInputChange" | "selectType" | "searchable" | "emptyText" | "filterFn" | "renderOption" | "renderDropdown" | "fetching" | "dropdownOffsetDistance" | "fixDropdownWidth" | "forceDropdownPortal" | "autoHideScrollbar" | "autoHideScrollbarDelay"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export {};

package/dist/cjs/components/CustomSelectDropdown/CustomSelectDropdown.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { TrackerOptionsProps } from "../CustomScrollView/useTrackerVisibility";
+import { Placement } from "../Popper/Popper";
+import { HasRef } from "../../types";
+import "./CustomSelectDropdown.css";
+export interface CustomSelectDropdownProps extends React.HTMLAttributes<HTMLElement>, HasRef<HTMLDivElement>, TrackerOptionsProps {
+    targetRef: React.RefObject<HTMLElement>;
+    placement?: Placement;
+    scrollBoxRef?: React.RefObject<HTMLDivElement>;
+    observableRefs?: Array<React.RefObject<HTMLElement>> | React.RefObject<HTMLElement>;
+    fetching?: boolean;
+    offsetDistance?: number;
+    sameWidth?: boolean;
+    forcePortal?: boolean;
+    onPlacementChange?: (placement?: Placement) => void;
+}
+export declare const CustomSelectDropdown: ({ children, targetRef, scrollBoxRef, placement, fetching, onPlacementChange: parentOnPlacementChange, offsetDistance, sameWidth, forcePortal, autoHideScrollbar, autoHideScrollbarDelay, observableRefs, ...restProps }: CustomSelectDropdownProps) => JSX.Element;

package/dist/cjs/components/CustomSelectOption/CustomSelectOption.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import "./CustomSelectOption.css";
+export interface CustomSelectOptionProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    /**
+     * Вставляет основной контент.
+     */
+    option?: any;
+    /**
+     * Добавляет описание под основным блоком.
+     */
+    description?: React.ReactNode;
+    /**
+     * Вставляет элемент в начало блока перед основным контентом.
+     * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
+     */
+    before?: React.ReactNode;
+    /**
+     * Вставляет элемент в конец блока после основного контента.
+     * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
+     */
+    after?: React.ReactNode;
+    /**
+     * Позволяет создавать вложенность.
+     */
+    hierarchy?: number;
+    /**
+     * Включает состояние выбранного элемента списка.
+     */
+    selected?: boolean;
+    /**
+     * Включает состояние наведения.
+     */
+    hovered?: boolean;
+    /**
+     * Включает состояние фокуса.
+     */
+    focused?: boolean;
+    /**
+     * Блокирует весь блок.
+     */
+    disabled?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/CustomSelectOption
+ */
+export declare const CustomSelectOption: ({ children, hierarchy, hovered, selected, before, after, option, description, disabled, style: styleProp, ...restProps }: CustomSelectOptionProps) => JSX.Element;

package/dist/cjs/components/DateInput/DateInput.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { CalendarProps } from "../Calendar/Calendar";
+import { Placement } from "../Popper/Popper";
+import { FormFieldProps } from "../FormField/FormField";
+import { HasRootRef } from "../../types";
+import "./DateInput.css";
+export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, "value" | "onChange" | "size">, Pick<CalendarProps, "disablePast" | "disableFuture" | "enableTime" | "shouldDisableDate" | "onChange" | "value" | "doneButtonText" | "weekStartsOn" | "disablePickers" | "changeHoursAriaLabel" | "changeMinutesAriaLabel" | "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "changeDayAriaLabel" | "showNeighboringMonth" | "size" | "viewDate" | "onHeaderChange" | "onNextMonth" | "onPrevMonth" | "prevMonthIcon" | "nextMonthIcon">, HasRootRef<HTMLDivElement>, FormFieldProps {
+    calendarPlacement?: Placement;
+    closeOnChange?: boolean;
+    clearFieldAriaLabel?: string;
+    showCalendarAriaLabel?: string;
+    disableCalendar?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/DateInput
+ */
+export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement, style, className, doneButtonText, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthAriaLabel, nextMonthAriaLabel, showNeighboringMonth, size, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, changeHoursAriaLabel, changeMinutesAriaLabel, clearFieldAriaLabel, showCalendarAriaLabel, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateInputProps) => JSX.Element;

package/dist/cjs/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { AdaptivityProps } from "../../hoc/withAdaptivity";
+import { HasPlatform } from "../../types";
+import "./DatePicker.css";
+export declare type DatePickerDateFormat = {
+    day: number;
+    month: number;
+    year: number;
+};
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "min" | "max">, HasPlatform, AdaptivityProps {
+    min?: DatePickerDateFormat;
+    max?: DatePickerDateFormat;
+    name?: string;
+    defaultValue?: DatePickerDateFormat;
+    popupDirection?: "top" | "bottom";
+    monthNames?: string[];
+    dayPlaceholder?: string;
+    monthPlaceholder?: string;
+    yearPlaceholder?: string;
+    onDateChange?: (value: DatePickerDateFormat) => void;
+    disabled?: boolean;
+}
+export declare const DatePicker: React.FC<Pick<DatePickerProps, "max" | "platform" | "disabled" | "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "min" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "popupDirection" | "dayPlaceholder" | "monthPlaceholder" | "yearPlaceholder" | "monthNames" | "onDateChange"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { CalendarRangeProps } from "../CalendarRange/CalendarRange";
+import { Placement } from "../Popper/Popper";
+import { HasRootRef } from "../../types";
+import { FormFieldProps } from "../FormField/FormField";
+import "./DateRangeInput.css";
+export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, "value" | "onChange">, Pick<CalendarRangeProps, "disablePast" | "disableFuture" | "shouldDisableDate" | "onChange" | "value" | "weekStartsOn" | "disablePickers" | "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "changeDayAriaLabel" | "prevMonthIcon" | "nextMonthIcon">, HasRootRef<HTMLDivElement>, FormFieldProps {
+    calendarPlacement?: Placement;
+    closeOnChange?: boolean;
+    clearFieldAriaLabel?: string;
+    showCalendarAriaLabel?: string;
+    changeStartDayAriaLabel?: string;
+    changeStartMonthAriaLabel?: string;
+    changeStartYearAriaLabel?: string;
+    changeEndDayAriaLabel?: string;
+    changeEndMonthAriaLabel?: string;
+    changeEndYearAriaLabel?: string;
+    disableCalendar?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/DateRangeInput
+ */
+export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthAriaLabel, nextMonthAriaLabel, changeDayAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeStartDayAriaLabel, changeStartMonthAriaLabel, changeStartYearAriaLabel, changeEndDayAriaLabel, changeEndMonthAriaLabel, changeEndYearAriaLabel, clearFieldAriaLabel, showCalendarAriaLabel, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateRangeInputProps) => JSX.Element;

package/dist/cjs/components/Div/Div.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import "./Div.css";
+export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/Div
+ */
+export declare const Div: ({ children, getRootRef, ...restProps }: DivProps) => JSX.Element;

package/dist/cjs/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { PopperCommonProps } from "../Popper/Popper";
+import "./Dropdown.css";
+export interface DropdownProps extends Omit<PopperCommonProps, "arrow" | "arrowClassName"> {
+    /**
+     * Механика вызова всплывающего окна.
+     *
+     * - `"click"` – показывается/скрывается только при нажатии.
+     * - `"hover"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.
+     *
+     * > ⚠️`"hover"` на тач-устройствах будет работать как `"click"`, с одним лишь нюансом, что не будет закрываться
+     * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента
+     * > и выпадающего окна.
+     */
+    action?: "click" | "hover";
+    /**
+     * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.
+     */
+    shown?: boolean;
+    /**
+     * Количество миллисекунд, после которых произойдёт показ всплывающего окна.
+     *
+     * > Используется только для `action="hover"` при наведении/отведении мыши.
+     */
+    showDelay?: number;
+    /**
+     * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.
+     *
+     * > Используется только для `action="hover"` при наведении/отведении мыши.
+     */
+    hideDelay?: number;
+    /**
+     * Содержимое всплывающего окна.
+     */
+    content?: React.ReactNode;
+    /**
+     * Целевой элемент. Всплывающее окно появится возле него.
+     *
+     * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.
+     */
+    children?: React.ReactElement;
+    /**
+     * Вызывается при каждом изменении видимости всплывающего окна.
+     */
+    onShownChange?(shown: boolean): void;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/Dropdown
+ *
+ * TODO v5.0.0 Переименовать в `Popover` (см. https://github.com/VKCOM/VKUI/issues/2523)
+ */
+export declare const Dropdown: ({ action, shown: shownProp, showDelay, hideDelay, offsetDistance, content, children, style, getRef, onShownChange, ...restProps }: DropdownProps) => JSX.Element;

package/dist/cjs/components/DropdownIcon/DropdownIcon.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface DropdownIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    opened?: boolean;
+}
+export declare const DropdownIcon: ({ opened, ...restProps }: DropdownIconProps) => JSX.Element;

package/dist/cjs/components/Epic/Epic.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { AdaptivityContextInterface, AdaptivityProps } from "../AdaptivityProvider/AdaptivityContext";
+import "./Epic.css";
+export interface EpicProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps {
+    tabbar?: React.ReactNode;
+    activeStory: string;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/Epic
+ */
+export declare const Epic: React.FC<Pick<EpicProps & AdaptivityContextInterface, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "activeStory" | "tabbar"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

package/dist/cjs/components/Epic/ScrollSaver.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface ScrollSaverProps {
+    initialScroll?: number;
+    saveScroll: (scroll: number) => any;
+    children?: React.ReactNode;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/ScrollSaver
+ */
+export declare const ScrollSaver: ({ children, initialScroll, saveScroll, }: ScrollSaverProps) => JSX.Element;

package/dist/cjs/components/File/File.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { VKUIButtonProps } from "../Button/Button";
+import { HasRef, HasRootRef } from "../../types";
+export interface FileProps extends Omit<VKUIButtonProps, "type">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size">, HasRef<HTMLInputElement>, HasRootRef<HTMLElement> {
+    /**
+     * @deprecated Будет удалено в 5.0.0. Используйте size
+     */
+    controlSize?: VKUIButtonProps["size"];
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/File
+ */
+export declare const File: ({ children, align, controlSize, size, mode, stretched, before, after, loading, className, style, getRef, getRootRef, appearance, ...restProps }: FileProps) => JSX.Element;

package/dist/cjs/components/FixedLayout/FixedLayout.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { HasRef, HasRootRef } from "../../types";
+import "./FixedLayout.css";
+export interface FixedLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
+    vertical?: "top" | "bottom";
+    /**
+     * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.
+     * Это часто необходимо для фиксированных кнопок в нижней части экрана.
+     */
+    filled?: boolean;
+}
+export interface FixedLayoutState {
+    position: "absolute" | null;
+    top: number;
+    bottom: number;
+    width: string;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/FixedLayout
+ */
+export declare const FixedLayout: ({ children, style, vertical, getRootRef, getRef, filled, ...restProps }: FixedLayoutProps) => JSX.Element;

package/dist/cjs/components/FixedLayout/FixedLayout.js

@@ -65,7 +65,7 @@ var FixedLayout = function FixedLayout(_ref) {
     return setWidth(colRef !== null && colRef !== void 0 && colRef.current ? "".concat(colRef.current.offsetWidth, "px") : undefined);
   };
 
-  React.useEffect(doResize, [colRef]);
+  React.useEffect(doResize, [colRef, platform]);
   (0, _useGlobalEventListener.useGlobalEventListener)(window, "resize", doResize);
   return (0, _jsxRuntime.createScopedElement)(_TooltipContainer.TooltipContainer, (0, _extends2.default)({}, restProps, {
     fixed: true,