@foxford/ui 2.65.0 → 2.66.0

package/dts/index.d.ts

@@ -4,7 +4,7 @@ import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, R
 import * as styled_components from 'styled-components';
 import { CSSObject, DefaultTheme, FlattenSimpleInterpolation, ThemeProps, Interpolation, SimpleInterpolation, css, StyledProps } from 'styled-components';
 import * as IconPack from '@foxford/icon-pack';
-import { Props, PopperInstance, Placement, Styles } from 'react-floater';
+import { Props, Placement, Styles, PopperInstance } from 'react-floater';
 import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
 import * as rc_scrollbars from 'rc-scrollbars';
 import { ScrollbarsProps } from 'rc-scrollbars';
@@ -2063,37 +2063,110 @@ interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithR
  */
 declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
 
+declare type IconButtonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
+declare type IconButtonPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    colorHover: CSSColor;
+    backgroundColorHover: CSSColor;
+    colorActive: CSSColor;
+    backgroundColorActive: CSSColor;
+    colorDisabled: CSSColor;
+    backgroundColorDisabled: CSSColor;
+};
+interface IconButtonProps extends ResponsiveSizeProps<IconButtonSize, IconButtonSize | number>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+    /**
+     * Custom colors
+     * @default undefined */
+    palette?: Partial<Record<keyof IconButtonPalette, Color>>;
+    /** Icon to display */
+    icon: JSX.Element | IconName;
+    /**
+     * Props for icon component
+     * @default {} */
+    iconProps?: IconProps;
+    /**
+     * Shape variant
+     * @default false */
+    square?: boolean;
+    /**
+     * Appearance variant
+     * @default true */
+    primary?: boolean;
+    /**
+     * Appearance variant
+     * @default false */
+    secondary?: boolean;
+    /**
+     * Appearance variant
+     * @default false */
+    contrast?: boolean;
+}
+
+/**
+ *
+ * Component accepts all \<button\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [IconButtonProps](https://github.com/foxford/ui/blob/master/src/components/IconButton/types.ts)
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps>;
+
+declare type TooltipComponentSize = 'l' | 'm' | 's';
 declare type TooltipComponentPalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
-    closeColor: CSSColor;
-    closeColorHover: CSSColor;
-    closeColorActive: CSSColor;
-    closeColorDisabled: CSSColor;
 };
-interface TooltipComponentProps extends ResponsiveSizeProps<Size, SizeValue>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
-    /** Custom colors */
+interface TooltipComponentProps extends ResponsiveSizeProps<TooltipComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
+    /**
+     * Кастомные цвета.
+     * @default undefined */
     palette?: Partial<Record<keyof TooltipComponentPalette, Color>>;
-    /** Appearance variant */
+    /**
+     * Вариант цветовой схемы.
+     * @default false */
     black?: boolean;
-    /** Appearance variant */
+    /**
+     * Вариант цветовой схемы.
+     * @default false */
     contrast?: boolean;
-    /** Title text */
+    /**
+     * Tекст заголовка.
+     * @default undefined */
     title?: React.ReactNode;
-    /** Props for title text component */
-    titleProps?: TextProps;
-    /** Main content text */
+    /**
+     * Пропсы типографики для текста заголовка.
+     * @default {} */
+    titleProps?: Partial<TextProps>;
+    /**
+     * Основной текст.
+     * @default undefined */
     content?: React.ReactNode;
-    /** Props for content text component */
-    contentProps?: TextProps;
-    /** Footer segment */
-    footer?: React.ReactNode;
-    /** Show close button */
+    /**
+     * Пропсы типографики для основного текста.
+     * @default {} */
+    contentProps?: Partial<TextProps>;
+    /**
+     * Рендер нижнего сегмента тултипа.
+     *
+     * Если используется функция, то в аргументе будут переданы пропсы размеров.
+     * @default undefined */
+    footer?: React.ReactNode | ((sizeProps: Pick<TooltipComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
+    /**
+     * Рендер кнопки закрытия.
+     * @default false */
     showCloseButton?: boolean;
-    /** Props for close button */
-    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /** Apply drop shadow filter */
+    /**
+     * Пропсы для кнопки закрытия.
+     * @default {} */
+    closeButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Внешний вид с тенью.
+     * @default false */
     elevated?: boolean;
     /** @ignore */
     closeFn?: () => void;
@@ -2101,295 +2174,461 @@ interface TooltipComponentProps extends ResponsiveSizeProps<Size, SizeValue>, Om
 
 /**
  *
- * Component accepts all \<div\> attributes.
+ * Компонент поддерживает все атрибуты \<div\> элемента.
  *
- * Responsive "size" props are supported.
+ * Можно передать "ref", который будет ассоциирован с рутовым элементом.
  *
- * Exposed "ref" attached to root node.
+ * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
  *
- * See full [TooltipComponentProps](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts)
+ * Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).
  */
 declare const TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps>;
 
-interface TooltipProps extends ResponsiveSizeProps<Size, SizeValue>, React.RefAttributes<HTMLDivElement> {
-    /** UI: brand (v3), or default (v2) */
+interface TooltipProps extends ResponsiveSizeProps<TooltipComponentSize>, React.RefAttributes<HTMLDivElement> {
+    /**
+     * Использовать V3 компонента (`brand`) или V2 (`default`).
+     * @default undefined */
     preset?: ThemePreset;
-    /** Custom colors */
+    /**
+     * Кастомные цвета.
+     * @default undefined */
     palette?: Partial<Record<keyof TooltipComponentPalette, Color>>;
-    /** Appearance variant */
+    /**
+     * Вариант цветовой схемы.
+     * @default false */
     black?: boolean;
-    /** Appearance variant */
+    /**
+     * Вариант цветовой схемы.
+     * @default false */
     contrast?: boolean;
-    /** Open automatically */
+    /**
+     * Открывать автоматически.
+     * @default false */
     autoOpen?: boolean;
-    /** It will be called on state change */
+    /**
+     * Колбек, который будет вызван при открытии или закрытии.
+     * @default undefined */
     callback?: (action: 'open' | 'close', props: Props) => void;
-    /** Default tooltip target */
+    /**
+     * Триггер открытия, а также якорь тултипа (если не используется проп `target`).
+     * @default undefined */
     children?: React.ReactNode;
-    /** Close tooltip on click outside of its component (work in uncontrolled mode only) */
+    /**
+     * Закрывать тултип при клике за пределами рутового элемента (V3).
+     *
+     * Работает только если не используется проп `open`.
+     * @default false */
     closeOnClickOutside?: boolean;
-    /** Close tooltip on document scroll (work in uncontrolled mode only) */
+    /**
+     * Закрывать тултип при скролле `document` (V3).
+     *
+     * Работает только если не используется проп `open`.
+     * @default false */
     closeOnScroll?: boolean;
-    /** Custom UI for tooltip */
-    component?: React.ReactElement | ((props: Pick<TooltipProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'black' | 'contrast' | 'showCloseButton' | 'closeButtonProps'> & {
-        id?: string;
-        role?: string;
-        closeFn?: () => void;
-    }) => React.ReactElement);
-    /** Tooltip content */
+    /**
+     * Основной текст.
+     * @default undefined */
     content?: React.ReactNode;
-    /** Props for content text component */
-    contentProps?: TextProps;
-    /** Debugging logs in console */
-    debug?: boolean;
-    /** Don't adjust tooltip on scroll / resize */
+    /**
+     * Пропсы типографики для основного текста.
+     * @default {} */
+    contentProps?: Partial<TextProps>;
+    /**
+     * Отключить авто изменения положения тултипа при скролле или ресайзе.
+     * @default false */
     disableFlip?: boolean;
-    /** Don't convert 'hover' to 'click' event on mobile */
+    /**
+     * Отключить использование `event='click'` вместо `event='hover'` для мобильных браузеров.
+     *
+     * Работает только если не используется проп `open`.
+     * @default false */
     disableHoverToClick?: boolean;
-    /** Trigger event for tooltip */
+    /**
+     * Событие для открытия тултипа.
+     *
+     * Работает только если не используется проп `open`.
+     * @default 'click' */
     event?: 'click' | 'hover';
-    /** Pause in 'seconds' to wait before close tooltip (valid for 'hover' event) */
+    /**
+     * Отложенное закрытие если используется `event='hover'` (сек).
+     *
+     * Работает только если не используется проп `open`.
+     * @default 0.4 */
     eventDelay?: number;
-    /** Tooltip footer */
-    footer?: React.ReactNode;
-    /** Callback to get popper.js instance */
-    getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
-    /** Don't show tooltip arrow */
+    /**
+     * Рендер нижнего сегмента тултипа.
+     *
+     * Если используется функция, то в аргументе будут переданы пропсы размеров.
+     * @default undefined */
+    footer?: React.ReactNode | ((sizeProps: Pick<TooltipProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
+    /**
+     * Не использовать стрелку.
+     * @default false */
     hideArrow?: boolean;
-    /** Distance in 'px' between tooltip and its target */
+    /**
+     * Отступ между тултипом и якорем (px).
+     * @default 8 */
     offset?: number;
-    /** Switch between normal and controlled modes. It will disable built in tooltip behavior */
+    /**
+     * Тултип открыт или закрыт.
+     *
+     * Использование включает controlled режим.
+     * @default undefined */
     open?: boolean;
-    /** Tooltip position relative to its target */
+    /**
+     * Положение тултипа.
+     * @default 'bottom' */
     placement?: Placement;
-    /** CSS selector or element to render tooltips */
+    /**
+     * Элемент или CSS селектор элемента для использования в качестве портала.
+     * @default undefined */
     portalElement?: Props['portalElement'];
-    /** Custom styles */
-    styles?: Partial<Styles>;
-    /** Show button to close tooltip */
+    /**
+     * Рендер кнопки закрытия.
+     * @default false */
     showCloseButton?: boolean;
-    /** Props for button to close tooltip */
-    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /** Tooltip target. If it's not set, 'children' will be used */
+    /**
+     * Пропсы для кнопки закрытия.
+     * @default {} */
+    closeButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Элемент или CSS селектор элемента для использования в качестве якоря.
+     * @default undefined */
     target?: Props['target'];
-    /** Tooltip title */
+    /**
+     * Tекст заголовка.
+     * @default undefined */
     title?: React.ReactNode;
-    /** Props for title text component */
-    titleProps?: TextProps;
-    /** Position of tooltip wrapper relative to target */
+    /**
+     * Пропсы типографики для текста заголовка.
+     * @default {} */
+    titleProps?: Partial<TextProps>;
+    /**
+     * z-index тултипа.
+     * @default 100 */
+    zIndex?: number;
+    /** @ignore */
+    styles?: Partial<Styles>;
+    /** @ignore */
+    component?: React.ReactElement | ((props: Pick<TooltipProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'black' | 'contrast' | 'showCloseButton' | 'closeButtonProps'> & {
+        id?: string;
+        role?: string;
+        closeFn?: () => void;
+    }) => React.ReactElement);
+    /** @ignore */
+    debug?: boolean;
+    /** @ignore */
+    getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
+    /** @ignore */
     wrapperOptions?: {
         offset?: number;
         placement?: Omit<Placement, 'center'>;
         position?: boolean;
     };
-    /** Tooltip z-index */
-    zIndex?: number;
 }
 
 /**
  *
- * Component based on ["react-floater"](https://www.npmjs.com/package/react-floater).
+ * Компонент поддерживает все атрибуты \<div\> элемента.
  *
- * Responsive "size" props are supported.
+ * Можно передать "ref", который будет ассоциирован с рутовым элементом.
  *
- * Exposed "ref" attached to tooltip component root.
+ * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
+ *
+ * Компонент основан на ["react-floater"](https://www.npmjs.com/package/react-floater).
+ *
+ * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Tooltip.Component`.
+ *
+ * Полный интерфейс `Tooltip` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts), интерфейс `Tooltip.Component` [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).
  *
- * See full [TooltipProps](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts)
  */
 declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps> & {
     Component: typeof TooltipComponent;
 };
 
+declare type PopoverComponentSize = 'xl' | 'l' | 'm' | 's' | 'xs';
 declare type PopoverComponentPalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
     mediaPlaceholderColor: CSSColor;
     shadowColor: CSSColor;
-    closeColor: CSSColor;
-    closeBackgroundColor: CSSColor;
-    closeColorHover: CSSColor;
-    closeBackgroundColorHover: CSSColor;
-    closeColorActive: CSSColor;
-    closeBackgroundColorActive: CSSColor;
-    closeColorDisabled: CSSColor;
-    closeBackgroundColorDisabled: CSSColor;
 };
-interface PopoverComponentProps extends ResponsiveSizeProps<Size, SizeValue>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
-    /** Custom colors */
+interface PopoverComponentProps extends ResponsiveSizeProps<PopoverComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
+    /**
+     * Кастомные цвета.
+     * @default undefined */
     palette?: Partial<Record<keyof PopoverComponentPalette, Color>>;
-    /** Relationship of width to height */
+    /**
+     * Ориентация контента.
+     * @default 'portrait' */
     orientation?: 'portrait' | 'landscape';
-    /** Loading appearance */
+    /**
+     * Использование скелетонов вместо реального контента.
+     * @default false */
     loading?: boolean;
-    /** Badge in header */
+    /**
+     * Пропсы для бейджа в верхнем сегменте.
+     * @default {} */
     badge?: {
         text?: React.ReactNode;
-        badgeProps?: BadgeProps;
+        badgeProps?: Partial<BadgeProps>;
     };
-    /** Short text in header */
+    /**
+     * Tекст над заголовком.
+     * @default undefined */
     caption?: React.ReactNode;
-    /** Props for text component in header */
-    captionProps?: TextProps;
-    /** Title text */
+    /**
+     * Пропсы типографики для текста над заголовком.
+     * @default {} */
+    captionProps?: Partial<TextProps>;
+    /**
+     * Tекст заголовка.
+     * @default undefined */
     title?: React.ReactNode;
-    /** Props for title text component */
-    titleProps?: TextProps;
-    /** Main text content */
+    /**
+     * Пропсы типографики для текста заголовка.
+     * @default {} */
+    titleProps?: Partial<TextProps>;
+    /**
+     * Основной текст.
+     * @default undefined */
     content?: React.ReactNode;
-    /** Props for main text component */
-    contentProps?: TextProps;
-    /** Show close button */
+    /**
+     * Пропсы типографики для основного текста.
+     * @default {} */
+    contentProps?: Partial<TextProps>;
+    /**
+     * Рендер кнопки закрытия.
+     * @default false */
     showCloseButton?: boolean;
-    /** Props for close button */
-    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /** Flex-direction for footer with buttons */
-    controlsDirection?: 'row' | 'column';
-    /** Media to display: \<img\> or \<video\> */
+    /**
+     * Пропсы для кнопки закрытия.
+     * @default {} */
+    closeButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Пропсы для медиа элементов.
+     * @default {} */
     media?: {
         imgProps?: React.ComponentPropsWithoutRef<'img'>;
         videoProps?: React.ComponentPropsWithoutRef<'video'>;
     };
-    /** Buttons in footer */
+    /**
+     * Функция для рендера нижнего сегмента поповера, аргументом получает пропсы размеров.
+     * @default undefined */
+    footer?: (sizeProps: Pick<PopoverComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
+    /**
+     * Внешний вид с тенью.
+     * @default false */
+    elevated?: boolean;
+    /** @ignore */
+    closeFn?: () => void;
+    /** @ignore @deprecated */
+    controlsDirection?: 'row' | 'column';
+    /** @ignore @deprecated */
     controls?: {
         secondary?: {
             text?: React.ReactNode;
-            buttonProps?: ButtonProps;
+            buttonProps?: Partial<ButtonProps>;
         };
         primary?: {
             text?: React.ReactNode;
-            buttonProps?: ButtonProps;
+            buttonProps?: Partial<ButtonProps>;
         };
     };
-    /** Apply drop shadow filter */
-    elevated?: boolean;
-    /** @ignore */
-    black?: boolean;
-    /** @ignore */
-    contrast?: boolean;
-    /** @ignore */
-    closeFn?: () => void;
 }
 
 /**
  *
- * Component accepts all \<div\> attributes.
- *
- * Responsive "size" props are supported.
+ * Компонент поддерживает все атрибуты \<div\> элемента.
  *
- * Exposed "ref" attached to root node.
+ * Можно передать "ref", который будет ассоциирован с рутовым элементом.
  *
- * See full [PopoverComponentProps](https://github.com/foxford/ui/blob/master/src/components/PopoverComponent/types.ts)
+ * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
  *
+ * Полный интерфейс `PopoverComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/PopoverComponent/types.ts).
  */
 declare const PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps>;
 
-interface PopoverProps extends ResponsiveSizeProps<Size, SizeValue>, React.RefAttributes<HTMLDivElement> {
-    /** Custom colors */
+interface PopoverProps extends ResponsiveSizeProps<PopoverComponentSize>, React.RefAttributes<HTMLDivElement> {
+    /**
+     * Кастомные цвета.
+     * @default undefined */
     palette?: Partial<Record<keyof PopoverComponentPalette, Color>>;
-    /** Open automatically */
+    /**
+     * Открывать автоматически.
+     * @default false */
     autoOpen?: boolean;
-    /** It will be called on state change */
+    /**
+     * Колбек, который будет вызван при открытии или закрытии.
+     * @default undefined */
     callback?: (action: 'open' | 'close', props: Props) => void;
-    /** Close tooltip on click outside of its component (work in uncontrolled mode only) */
+    /**
+     * Закрывать поповер при клике за пределами рутового элемента.
+     *
+     * Работает только если не используется проп `open`.
+     * @default false */
     closeOnClickOutside?: boolean;
-    /** Close tooltip on document scroll (work in uncontrolled mode only) */
+    /**
+     * Закрывать поповер при скролле `document`.
+     *
+     * Работает только если не используется проп `open`.
+     * @default false */
     closeOnScroll?: boolean;
-    /** Default tooltip target */
+    /**
+     * Триггер открытия, а также якорь поповера (если не используется проп `target`).
+     * @default undefined */
     children?: React.ReactNode;
-    /** Debugging logs in console */
-    debug?: boolean;
-    /** Don't adjust tooltip on scroll / resize */
+    /**
+     * Отключить авто изменение положения поповера при скролле или ресайзе.
+     * @default false */
     disableFlip?: boolean;
-    /** Don't convert 'hover' to 'click' event on mobile */
+    /**
+     * Отключить использование `event='click'` вместо `event='hover'` для мобильных браузеров.
+     *
+     * Работает только если не используется проп `open`.
+     * @default false */
     disableHoverToClick?: boolean;
-    /** Trigger event for tooltip */
+    /**
+     * Событие для открытия поповера.
+     *
+     * Работает только если не используется проп `open`.
+     * @default 'click' */
     event?: 'click' | 'hover';
-    /** Pause in 'seconds' to wait before close tooltip (valid for 'hover' event) */
+    /**
+     * Отложенное закрытие если используется `event='hover'` (сек).
+     *
+     * Работает только если не используется проп `open`.
+     * @default 0.4 */
     eventDelay?: number;
-    /** Callback to get popper.js instance */
-    getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
-    /** Don't show tooltip arrow */
+    /**
+     * Не использовать стрелку.
+     * @default false */
     hideArrow?: boolean;
-    /** Distance in 'px' between tooltip and its target */
+    /**
+     * Отступ между поповером и якорем (px).
+     * @default 8 */
     offset?: number;
-    /** Switch between normal and controlled modes. It will disable built in tooltip behavior */
+    /**
+     * Поповер открыт или закрыт.
+     *
+     * Использование включает controlled режим.
+     * @default undefined */
     open?: boolean;
-    /** Tooltip position relative to its target */
+    /**
+     * Положение поповера.
+     * @default 'bottom' */
     placement?: Placement;
-    /** CSS selector or element to render tooltips */
+    /**
+     * Элемент или CSS селектор элемента для использования в качестве портала.
+     * @default undefined */
     portalElement?: Props['portalElement'];
-    /** Custom styles */
-    styles?: Partial<Styles>;
-    /** Show button to close tooltip */
+    /**
+     * Рендер кнопки закрытия.
+     * @default false */
     showCloseButton?: boolean;
-    /** Props for close button */
-    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /** Tooltip target. If it's not set, 'children' will be used */
+    /**
+     * Пропсы для кнопки закрытия.
+     * @default {} */
+    closeButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Элемент или CSS селектор элемента для использования в качестве якоря.
+     * @default undefined */
     target?: Props['target'];
-    /** Position of tooltip wrapper relative to target */
-    wrapperOptions?: {
-        offset?: number;
-        placement?: Omit<Placement, 'center'>;
-        position?: boolean;
-    };
-    /** Relationship of width to height */
+    /**
+     * Ориентация контента.
+     * @default 'portrait' */
     orientation?: 'portrait' | 'landscape';
-    /** Loading appearance */
+    /**
+     * Использование скелетонов вместо реального контента.
+     * @default false */
     loading?: boolean;
-    /** Badge in header */
+    /**
+     * Пропсы для бейджа в верхнем сегменте.
+     * @default {} */
     badge?: {
         text?: React.ReactNode;
-        badgeProps?: BadgeProps;
+        badgeProps?: Partial<BadgeProps>;
     };
-    /** Short text in header */
+    /**
+     * Tекст над заголовком.
+     * @default undefined */
     caption?: React.ReactNode;
-    /** Props for text component in header */
-    captionProps?: TextProps;
-    /** Title text */
+    /**
+     * Пропсы типографики для текста над заголовком.
+     * @default {} */
+    captionProps?: Partial<TextProps>;
+    /**
+     * Tекст заголовка.
+     * @default undefined */
     title?: React.ReactNode;
-    /** Props for title text component */
-    titleProps?: TextProps;
-    /** Main text content */
+    /**
+     * Пропсы типографики для текста заголовка.
+     * @default {} */
+    titleProps?: Partial<TextProps>;
+    /**
+     * Основной текст.
+     * @default undefined */
     content?: React.ReactNode;
-    /** Props for main text component */
-    contentProps?: TextProps;
-    /** Flex-direction in footer */
-    controlsDirection?: 'row' | 'column';
-    /** Media to display: \<img\> or \<video\> */
+    /**
+     * Пропсы типографики для основного текста.
+     * @default {} */
+    contentProps?: Partial<TextProps>;
+    /**
+     * Пропсы для медиа элементов.
+     * @default {} */
     media?: {
         imgProps?: React.ComponentPropsWithoutRef<'img'>;
         videoProps?: React.ComponentPropsWithoutRef<'video'>;
     };
-    /** Buttons in footer */
+    /**
+     * Функция для рендера нижнего сегмента поповера, аргументом получает пропсы размеров.
+     * @default undefined */
+    footer?: (sizeProps: Pick<PopoverProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
+    /**
+     * z-index поповера.
+     * @default 100 */
+    zIndex?: number;
+    /** @ignore */
+    debug?: boolean;
+    /** @ignore */
+    getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
+    /** @ignore */
+    wrapperOptions?: {
+        offset?: number;
+        placement?: Omit<Placement, 'center'>;
+        position?: boolean;
+    };
+    /** @ignore */
+    styles?: Partial<Styles>;
+    /** @ignore @deprecated */
+    controlsDirection?: 'row' | 'column';
+    /** @ignore @deprecated */
     controls?: {
         secondary?: {
             text?: React.ReactNode;
-            buttonProps?: ButtonProps;
+            buttonProps?: Partial<ButtonProps>;
         };
         primary?: {
             text?: React.ReactNode;
-            buttonProps?: ButtonProps;
+            buttonProps?: Partial<ButtonProps>;
         };
     };
-    /** Popover z-index */
-    zIndex?: number;
-    /** @ignore */
-    footer?: React.ReactNode;
-    /** @ignore */
-    black?: boolean;
-    /** @ignore */
-    contrast?: boolean;
 }
 
 /**
  *
- * Component based on ["react-floater"](https://www.npmjs.com/package/react-floater).
+ * Компонент поддерживает все атрибуты \<div\> элемента.
  *
- * Responsive "size" props are supported.
+ * Можно передать "ref", который будет ассоциирован с рутовым элементом.
+ *
+ * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
+ *
+ * Компонент основан на ["react-floater"](https://www.npmjs.com/package/react-floater).
  *
- * Exposed "ref" attached to popover component root.
+ * Получить доступ к компоненту, не подключенному к библиотеке, можно через `Popover.Component`.
+ *
+ * Полный интерфейс `Popover` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Popover/types.ts), интерфейс `Popover.Component` [тут](https://github.com/foxford/ui/blob/master/src/components/PopoverComponent/types.ts).
  *
- * See full [PopoverProps](https://github.com/foxford/ui/blob/master/src/components/Popover/types.ts)
  */
 declare const Popover: React.ForwardRefExoticComponent<PopoverProps> & {
     Component: typeof PopoverComponent;
@@ -2607,58 +2846,6 @@ ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
  */
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps>;
 
-declare type IconButtonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
-declare type IconButtonPalette = {
-    color: CSSColor;
-    backgroundColor: CSSColor;
-    colorHover: CSSColor;
-    backgroundColorHover: CSSColor;
-    colorActive: CSSColor;
-    backgroundColorActive: CSSColor;
-    colorDisabled: CSSColor;
-    backgroundColorDisabled: CSSColor;
-};
-interface IconButtonProps extends ResponsiveSizeProps<IconButtonSize, IconButtonSize | number>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
-    /**
-     * Custom colors
-     * @default undefined */
-    palette?: Partial<Record<keyof IconButtonPalette, Color>>;
-    /** Icon to display */
-    icon: JSX.Element | IconName;
-    /**
-     * Props for icon component
-     * @default {} */
-    iconProps?: IconProps;
-    /**
-     * Shape variant
-     * @default false */
-    square?: boolean;
-    /**
-     * Appearance variant
-     * @default true */
-    primary?: boolean;
-    /**
-     * Appearance variant
-     * @default false */
-    secondary?: boolean;
-    /**
-     * Appearance variant
-     * @default false */
-    contrast?: boolean;
-}
-
-/**
- *
- * Component accepts all \<button\> attributes.
- *
- * Responsive "size", "margin" props are supported.
- *
- * Exposed "ref" attached to root node.
- *
- * See full [IconButtonProps](https://github.com/foxford/ui/blob/master/src/components/IconButton/types.ts)
- */
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps>;
-
 declare type ChipSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
 declare type ChipPalette = {
     color: CSSColor;
@@ -2948,7 +3135,7 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
     /** Текст над заголовком диалога */
     caption?: React.ReactNode;
     /** Пропсы для типографики текста над заголовком */
-    captionProps?: TextProps;
+    captionProps?: Partial<TextProps>;
     /** Класс для элемента с бекграундом диалога */
     backgroundClassName?: string;
     /** Основной контент или функция для рендера основного контента (аргументом получает текущие пропсы размеров) */
@@ -2965,7 +3152,7 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
     /** Диалог находится в состоянии перетаскивания (использование визуальной индикации) */
     dragging?: boolean;
     /** Пропсы для иконки в области захвата для перетаскивания */
-    draggingIconProps?: IconProps;
+    draggingIconProps?: Partial<IconProps>;
     /** Вариант внешнего вида со скошенным верхним сегментом */
     fancy?: boolean;
     /** Функция для рендера дополнительных элементов с позицией относительно рута диалога (аргументом получает текущие пропсы размеров) */
@@ -2976,12 +3163,19 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
     imgPortraitPositionBottom?: boolean;
     /**
      * Пути картинок в зависимости от ориентации окна диалога.
-     * Ожидаемое соотношение сторон картинок: 3:1 portrait, 5:7 landscape
      */
     imgSrc?: {
         portrait?: string;
         landscape?: string;
     };
+    /**
+     * Cоотношение сторон картинок.
+     * Дефолтное соотношение сторон: 3:1 portrait, 5:7 landscape
+     */
+    imgAspectRatio?: {
+        portrait?: '1:1' | '3:1' | '5:2';
+        landscape?: '1:1' | '4:5' | '5:7';
+    };
     /** Использование скелетонов вместо реального контента */
     loading?: boolean;
     /** Колбек будет передан в onPointerDown элемента области захвата */
@@ -2990,18 +3184,22 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
     onNudge?: React.KeyboardEventHandler<HTMLElement>;
     /** Кастомные цвета  */
     palette?: Partial<Record<keyof DialogComponentPalette, Color>>;
-    /** Пропсы для скелетонов (используются при loading=true) */
-    skeletonProps?: SkeletonProps;
+    /** Использование индикатора прогресса */
+    progressLine?: boolean;
+    /** Пропсы для индикатора прогресса */
+    progressLineProps?: Partial<ProgressLineProps>;
+    /** Пропсы для скелетонов */
+    skeletonProps?: Partial<SkeletonProps>;
     /** Отключить эффект фейдинга при скролле контента */
     scrollFadingDisabled?: boolean;
     /** Подзаголовок диалога */
     subtitle?: React.ReactNode;
     /** Пропсы для типографики подзаголовка */
-    subtitleProps?: TextProps;
+    subtitleProps?: Partial<TextProps>;
     /** Заголовок диалога */
     title?: React.ReactNode;
     /** Пропсы типографики для заголовка */
-    titleProps?: TextProps;
+    titleProps?: Partial<TextProps>;
     /** z-index рутового элемента */
     zIndex?: number;
 }
@@ -3020,115 +3218,217 @@ declare const DialogComponent: React.ForwardRefExoticComponent<DialogComponentPr
 
 declare type DialogPosition = 'center' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
 interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, ResponsivePositionProps<DialogPosition>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'className' | 'title' | 'draggable'> {
-    /** Открыто диалоговое окно */
+    /**
+     * Открыто диалоговое окно.
+     * @default undefined */
     open: boolean;
-    /** Колбек, который будет вызван после открытия */
+    /**
+     * Колбек, который будет вызван после открытия.
+     * @default undefined */
     onAfterOpen?: (refs?: {
         overlayEl?: Element;
         contentEl?: Element;
     }) => void;
-    /** Колбек, который будет вызван после закрытия */
+    /**
+     * Колбек, который будет вызван после закрытия.
+     * @default undefined */
     onAfterClose?: () => void;
-    /** Колбек, который будет вызван по клику на оверлей или нажатию "Esc" (рекомендуется использовать) */
+    /**
+     * Колбек, который будет вызван по клику на оверлей или нажатию "Esc".
+     * @default undefined */
     onRequestClose?: (evt: React.MouseEvent | React.KeyboardEvent) => void;
-    /** Класс (или классы) для диалогового окна */
+    /**
+     * Класс (или классы) для диалогового окна.
+     * @default undefined */
     className?: string | {
         base: string;
         afterOpen: string;
         beforeClose: string;
     };
-    /** Задержка перед фактическим закрытием (мс) */
+    /**
+     * Задержка перед фактическим закрытием (мс).
+     * @default 0 */
     closeTimeoutMS?: number;
-    /** Класс для элемента портала диалога (дефолт ReactModalPortal) */
+    /**
+     * Класс для элемента портала диалога.
+     * @default "ReactModalPortal" */
     portalClassName?: string;
-    /** Класс для body при открытом диалоговом окне (дефолт ReactModal__Body--open) */
+    /**
+     * Класс для body при открытом диалоговом окне.
+     * @default "ReactModal__Body--open" */
     bodyOpenClassName?: string;
-    /** Класс для html при открытом диалоговом окне */
+    /**
+     * Класс для html при открытом диалоговом окне.
+     * @default null */
     htmlOpenClassName?: string;
-    /** Вызов onRequestClose при клике на оверлей (дефолт true) */
+    /**
+     * Вызов `onRequestClose` при клике на оверлей.
+     * @default true */
     shouldCloseOnOverlayClick?: boolean;
-    /** Вызов onRequestClose при нажатии "Esc" (дефолт true, не рекомендуется отключать) */
+    /**
+     * Вызов `onRequestClose` при нажатии "Esc".
+     * @default true */
     shouldCloseOnEsc?: boolean;
-    /** Возврат фокуса на элемент, который был в фокусе до открытия диалога (дефолт true) */
+    /**
+     * Возврат фокуса на элемент, который был в фокусе до открытия диалога.
+     * @default true */
     shouldReturnFocusAfterClose?: boolean;
-    /** После закрытия не скроллить до элемента, который имел фокус до открытия */
+    /**
+     * После закрытия не скроллить до элемента, который имел фокус до открытия.
+     * @default false */
     preventScrollAfterClose?: boolean;
-    /** Класс (или классы) для оверлея */
+    /**
+     * Класс (или классы) для оверлея.
+     * @default undefined */
     overlayClassName?: string | {
         base: string;
         afterOpen: string;
         beforeClose: string;
     };
-    /** Колбек, который должен вернуть элемент для рендера диалога (дефолт document.body) */
+    /**
+     * Колбек, который должен вернуть элемент для рендера диалога.
+     *
+     * По дефолту будет использован `document.body`.
+     * @default undefined */
     parentSelector?: () => HTMLElement;
-    /** Колбек, который получает аргументом элемент оверлея */
+    /**
+     * Колбек, который получает аргументом элемент оверлея.
+     * @default undefined */
     overlayRef?: (ref: HTMLElement | null) => void;
-    /** Колбек, который получает аргументом элемент рута диалогового окна */
+    /**
+     * Колбек, который получает аргументом элемент рута диалогового окна.
+     * @default undefined */
     contentRef?: (ref: HTMLElement | null) => void;
-    /** Класс для элемента с бекграундом диалога */
+    /**
+     * Класс для элемента с бекграундом диалога.
+     * @default undefined */
     backgroundClassName?: string;
-    /** Текст над заголовком диалога */
+    /**
+     * Текст над заголовком диалога.
+     * @default undefined */
     caption?: React.ReactNode;
-    /** Пропсы для типографики текста над заголовком */
-    captionProps?: TextProps;
-    /** Основной контент или функция для рендера основного контента (аргументом получает текущие пропсы размеров) */
+    /**
+     * Пропсы для типографики текста над заголовком.
+     * @default {} */
+    captionProps?: Partial<TextProps>;
+    /**
+     * Основной контент диалогового окна.
+     *
+     * Если используется функция, то в аргументе будут переданы пропсы размеров.
+     * @default undefined */
     children?: React.ReactNode | ((sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
     /**
-     * Пропсы для кнопки действия в правом верхнем углу диалога (дефолт иконка close).
-     * Для рендера кнопки нужно передать iconButtonProps.onClick
-     */
+     * Пропсы для кнопки действия в правом верхнем углу диалога.
+     *
+     * Для рендера кнопки нужно передать `iconButtonProps.onClick`.
+     * @default {} */
     iconButtonProps?: Partial<IconButtonProps>;
-    /** Функция для рендера контролов диалога (аргументом получает текущие пропсы размеров) */
+    /**
+     * Функция для рендера контролов диалога.
+     *
+     * В аргументе будут переданы пропсы размеров.
+     * @default undefined */
     controls?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
     /**
      * Диалоговое окно можно перетаскивать.
-     * В этом случае оверлей не используется и диалог рендерит область захвата
-     */
+     *
+     * В этом случае оверлей не используется и диалог рендерит область захвата.
+     * @default undefined */
     draggable?: boolean;
-    /** Пропсы для иконки в области захвата для перетаскивания */
-    draggingIconProps?: IconProps;
-    /** Вариант внешнего вида со скошенным верхним сегментом */
+    /**
+     * Пропсы для иконки в области захвата для перетаскивания.
+     * @default {} */
+    draggingIconProps?: Partial<IconProps>;
+    /**
+     * Вариант внешнего вида со скошенным верхним сегментом.
+     * @default undefined */
     fancy?: boolean;
-    /** Функция для рендера дополнительных элементов с позицией относительно рута диалога (аргументом получает текущие пропсы размеров) */
+    /**
+     * Функция для рендера дополнительных элементов с позицией относительно рута диалога.
+     *
+     * Aргументом получает текущие пропсы размеров.
+     * @default undefined */
     floats?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
-    /** Рендер картинки справа в горизонтальной ориентации (дефолт слева) */
+    /**
+     * Рендер картинки справа в горизонтальной ориентации (дефолт слева).
+     * @default undefined */
     imgLandscapePositionRight?: boolean;
-    /** Рендер картинки снизу в вертикальной ориентации (дефолт сверху) */
+    /**
+     * Рендер картинки снизу в вертикальной ориентации (дефолт сверху).
+     * @default undefined */
     imgPortraitPositionBottom?: boolean;
     /**
      * Пути картинок в зависимости от ориентации окна диалога.
-     * Ожидаемое соотношение сторон картинок: 3:1 portrait, 5:7 landscape
-     */
+     * @default {} */
     imgSrc?: {
         portrait?: string;
         landscape?: string;
     };
-    /** Использование скелетонов вместо реального контента */
+    /**
+     * Cоотношение сторон картинок.
+     *
+     * Дефолтное соотношение сторон: 3:1 portrait, 5:7 landscape.
+     * @default {} */
+    imgAspectRatio?: {
+        portrait?: '1:1' | '3:1' | '5:2';
+        landscape?: '1:1' | '4:5' | '5:7';
+    };
+    /**
+     * Использование скелетонов вместо реального контента.
+     * @default undefined */
     loading?: boolean;
-    /** Применение стилей размытия для оверлея */
+    /**
+     * Применение стилей размытия для оверлея.
+     * @default undefined */
     overlayBlur?: boolean;
-    /** Оверлей не используется */
+    /**
+     * Оверлей не используется.
+     * @default undefined */
     overlayDisabled?: boolean;
-    /** Кастомные цвета  */
+    /**
+     * Кастомные цвета.
+     * @default {} */
     palette?: {
         color?: Color;
         backgroundColor?: Color;
         shadowColor?: Color;
         overlayBackgroundColor?: Color;
     };
-    /** Отключить эффект фейдинга при скролле контента */
+    /**
+     * Использование индикатора прогресса.
+     * @default undefined */
+    progressLine?: boolean;
+    /**
+     * Пропсы для индикатора прогресса.
+     * @default {} */
+    progressLineProps?: Partial<ProgressLineProps>;
+    /**
+     * Отключить эффект фейдинга при скролле контента.
+     * @default undefined */
     scrollFadingDisabled?: boolean;
-    /** Пропсы для скелетонов (используются при loading=true) */
-    skeletonProps?: SkeletonProps;
-    /** Подзаголовок диалога */
+    /**
+     * Пропсы для скелетонов.
+     * @default {} */
+    skeletonProps?: Partial<SkeletonProps>;
+    /**
+     * Подзаголовок диалога.
+     * @default undefined */
     subtitle?: React.ReactNode;
-    /** Пропсы для типографики подзаголовка */
-    subtitleProps?: TextProps;
-    /** Заголовок диалога */
+    /**
+     * Пропсы для типографики подзаголовка.
+     * @default {} */
+    subtitleProps?: Partial<TextProps>;
+    /**
+     * Заголовок диалога.
+     * @default undefined */
     title?: React.ReactNode;
-    /** Пропсы типографики для заголовка */
-    titleProps?: TextProps;
-    /** z-index оверлея или рутового элемента, если оверлей не используется */
+    /**
+     * Пропсы типографики для заголовка.
+     * @default {} */
+    titleProps?: Partial<TextProps>;
+    /**
+     * z-index оверлея или рутового элемента, если оверлей не используется.
+     * @default undefined */
     zIndex?: number;
 }