@foxford/ui 2.65.0-beta-6fe26ef-20250220 → 2.66.0-beta-74581c2-20250226
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/DialogComponent/DialogComponent.js +1 -1
- package/components/DialogComponent/DialogComponent.js.map +1 -1
- package/components/DialogComponent/DialogComponent.mjs +1 -1
- package/components/DialogComponent/DialogComponent.mjs.map +1 -1
- package/components/DialogComponent/ProgressLineContainer.js +2 -0
- package/components/DialogComponent/ProgressLineContainer.js.map +1 -0
- package/components/DialogComponent/ProgressLineContainer.mjs +2 -0
- package/components/DialogComponent/ProgressLineContainer.mjs.map +1 -0
- package/components/DialogComponent/constants.js +1 -1
- package/components/DialogComponent/constants.js.map +1 -1
- package/components/DialogComponent/constants.mjs +1 -1
- package/components/DialogComponent/constants.mjs.map +1 -1
- package/components/DialogComponent/style.js +1 -1
- package/components/DialogComponent/style.js.map +1 -1
- package/components/DialogComponent/style.mjs +1 -1
- package/components/DialogComponent/style.mjs.map +1 -1
- package/components/Popover/Popover.js +1 -1
- package/components/Popover/Popover.js.map +1 -1
- package/components/Popover/Popover.mjs +1 -1
- package/components/Popover/Popover.mjs.map +1 -1
- package/components/PopoverComponent/PopoverComponent.js +1 -1
- package/components/PopoverComponent/PopoverComponent.js.map +1 -1
- package/components/PopoverComponent/PopoverComponent.mjs +1 -1
- package/components/PopoverComponent/PopoverComponent.mjs.map +1 -1
- package/components/PopoverComponent/constants.js +1 -1
- package/components/PopoverComponent/constants.js.map +1 -1
- package/components/PopoverComponent/constants.mjs +1 -1
- package/components/PopoverComponent/constants.mjs.map +1 -1
- package/components/PopoverComponent/style.js +1 -1
- package/components/PopoverComponent/style.js.map +1 -1
- package/components/PopoverComponent/style.mjs +1 -1
- package/components/PopoverComponent/style.mjs.map +1 -1
- package/components/Tooltip/Tooltip.js.map +1 -1
- package/components/Tooltip/Tooltip.mjs.map +1 -1
- package/components/TooltipComponent/TooltipComponent.js +1 -1
- package/components/TooltipComponent/TooltipComponent.js.map +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs.map +1 -1
- package/components/TooltipComponent/constants.js +1 -1
- package/components/TooltipComponent/constants.js.map +1 -1
- package/components/TooltipComponent/constants.mjs +1 -1
- package/components/TooltipComponent/constants.mjs.map +1 -1
- package/components/TooltipComponent/style.js +1 -1
- package/components/TooltipComponent/style.js.map +1 -1
- package/components/TooltipComponent/style.mjs +1 -1
- package/components/TooltipComponent/style.mjs.map +1 -1
- package/dts/index.d.ts +592 -292
- package/package.json +1 -1
package/dts/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, R
|
|
|
4
4
|
import * as styled_components from 'styled-components';
|
|
5
5
|
import { CSSObject, DefaultTheme, FlattenSimpleInterpolation, ThemeProps, Interpolation, SimpleInterpolation, css, StyledProps } from 'styled-components';
|
|
6
6
|
import * as IconPack from '@foxford/icon-pack';
|
|
7
|
-
import { Props,
|
|
7
|
+
import { Props, Placement, Styles, PopperInstance } from 'react-floater';
|
|
8
8
|
import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
|
|
9
9
|
import * as rc_scrollbars from 'rc-scrollbars';
|
|
10
10
|
import { ScrollbarsProps } from 'rc-scrollbars';
|
|
@@ -2063,37 +2063,110 @@ interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithR
|
|
|
2063
2063
|
*/
|
|
2064
2064
|
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
|
|
2065
2065
|
|
|
2066
|
+
declare type IconButtonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
|
|
2067
|
+
declare type IconButtonPalette = {
|
|
2068
|
+
color: CSSColor;
|
|
2069
|
+
backgroundColor: CSSColor;
|
|
2070
|
+
colorHover: CSSColor;
|
|
2071
|
+
backgroundColorHover: CSSColor;
|
|
2072
|
+
colorActive: CSSColor;
|
|
2073
|
+
backgroundColorActive: CSSColor;
|
|
2074
|
+
colorDisabled: CSSColor;
|
|
2075
|
+
backgroundColorDisabled: CSSColor;
|
|
2076
|
+
};
|
|
2077
|
+
interface IconButtonProps extends ResponsiveSizeProps<IconButtonSize, IconButtonSize | number>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
|
|
2078
|
+
/**
|
|
2079
|
+
* Custom colors
|
|
2080
|
+
* @default undefined */
|
|
2081
|
+
palette?: Partial<Record<keyof IconButtonPalette, Color>>;
|
|
2082
|
+
/** Icon to display */
|
|
2083
|
+
icon: JSX.Element | IconName;
|
|
2084
|
+
/**
|
|
2085
|
+
* Props for icon component
|
|
2086
|
+
* @default {} */
|
|
2087
|
+
iconProps?: IconProps;
|
|
2088
|
+
/**
|
|
2089
|
+
* Shape variant
|
|
2090
|
+
* @default false */
|
|
2091
|
+
square?: boolean;
|
|
2092
|
+
/**
|
|
2093
|
+
* Appearance variant
|
|
2094
|
+
* @default true */
|
|
2095
|
+
primary?: boolean;
|
|
2096
|
+
/**
|
|
2097
|
+
* Appearance variant
|
|
2098
|
+
* @default false */
|
|
2099
|
+
secondary?: boolean;
|
|
2100
|
+
/**
|
|
2101
|
+
* Appearance variant
|
|
2102
|
+
* @default false */
|
|
2103
|
+
contrast?: boolean;
|
|
2104
|
+
}
|
|
2105
|
+
|
|
2106
|
+
/**
|
|
2107
|
+
*
|
|
2108
|
+
* Component accepts all \<button\> attributes.
|
|
2109
|
+
*
|
|
2110
|
+
* Responsive "size", "margin" props are supported.
|
|
2111
|
+
*
|
|
2112
|
+
* Exposed "ref" attached to root node.
|
|
2113
|
+
*
|
|
2114
|
+
* See full [IconButtonProps](https://github.com/foxford/ui/blob/master/src/components/IconButton/types.ts)
|
|
2115
|
+
*/
|
|
2116
|
+
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps>;
|
|
2117
|
+
|
|
2118
|
+
declare type TooltipComponentSize = 'l' | 'm' | 's';
|
|
2066
2119
|
declare type TooltipComponentPalette = {
|
|
2067
2120
|
color: CSSColor;
|
|
2068
2121
|
backgroundColor: CSSColor;
|
|
2069
2122
|
shadowColor: CSSColor;
|
|
2070
|
-
closeColor: CSSColor;
|
|
2071
|
-
closeColorHover: CSSColor;
|
|
2072
|
-
closeColorActive: CSSColor;
|
|
2073
|
-
closeColorDisabled: CSSColor;
|
|
2074
2123
|
};
|
|
2075
|
-
interface TooltipComponentProps extends ResponsiveSizeProps<
|
|
2076
|
-
/**
|
|
2124
|
+
interface TooltipComponentProps extends ResponsiveSizeProps<TooltipComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
|
|
2125
|
+
/**
|
|
2126
|
+
* Кастомные цвета.
|
|
2127
|
+
* @default undefined */
|
|
2077
2128
|
palette?: Partial<Record<keyof TooltipComponentPalette, Color>>;
|
|
2078
|
-
/**
|
|
2129
|
+
/**
|
|
2130
|
+
* Вариант цветовой схемы.
|
|
2131
|
+
* @default false */
|
|
2079
2132
|
black?: boolean;
|
|
2080
|
-
/**
|
|
2133
|
+
/**
|
|
2134
|
+
* Вариант цветовой схемы.
|
|
2135
|
+
* @default false */
|
|
2081
2136
|
contrast?: boolean;
|
|
2082
|
-
/**
|
|
2137
|
+
/**
|
|
2138
|
+
* Tекст заголовка.
|
|
2139
|
+
* @default undefined */
|
|
2083
2140
|
title?: React.ReactNode;
|
|
2084
|
-
/**
|
|
2085
|
-
|
|
2086
|
-
|
|
2141
|
+
/**
|
|
2142
|
+
* Пропсы типографики для текста заголовка.
|
|
2143
|
+
* @default {} */
|
|
2144
|
+
titleProps?: Partial<TextProps>;
|
|
2145
|
+
/**
|
|
2146
|
+
* Основной текст.
|
|
2147
|
+
* @default undefined */
|
|
2087
2148
|
content?: React.ReactNode;
|
|
2088
|
-
/**
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
/**
|
|
2149
|
+
/**
|
|
2150
|
+
* Пропсы типографики для основного текста.
|
|
2151
|
+
* @default {} */
|
|
2152
|
+
contentProps?: Partial<TextProps>;
|
|
2153
|
+
/**
|
|
2154
|
+
* Рендер нижнего сегмента тултипа.
|
|
2155
|
+
*
|
|
2156
|
+
* Если используется функция, то в аргументе будут переданы пропсы размеров.
|
|
2157
|
+
* @default undefined */
|
|
2158
|
+
footer?: React.ReactNode | ((sizeProps: Pick<TooltipComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
|
|
2159
|
+
/**
|
|
2160
|
+
* Рендер кнопки закрытия.
|
|
2161
|
+
* @default false */
|
|
2093
2162
|
showCloseButton?: boolean;
|
|
2094
|
-
/**
|
|
2095
|
-
|
|
2096
|
-
|
|
2163
|
+
/**
|
|
2164
|
+
* Пропсы для кнопки закрытия.
|
|
2165
|
+
* @default {} */
|
|
2166
|
+
closeButtonProps?: Partial<IconButtonProps>;
|
|
2167
|
+
/**
|
|
2168
|
+
* Внешний вид с тенью.
|
|
2169
|
+
* @default false */
|
|
2097
2170
|
elevated?: boolean;
|
|
2098
2171
|
/** @ignore */
|
|
2099
2172
|
closeFn?: () => void;
|
|
@@ -2101,295 +2174,461 @@ interface TooltipComponentProps extends ResponsiveSizeProps<Size, SizeValue>, Om
|
|
|
2101
2174
|
|
|
2102
2175
|
/**
|
|
2103
2176
|
*
|
|
2104
|
-
*
|
|
2177
|
+
* Компонент поддерживает все атрибуты \<div\> элемента.
|
|
2105
2178
|
*
|
|
2106
|
-
*
|
|
2179
|
+
* Можно передать "ref", который будет ассоциирован с рутовым элементом.
|
|
2107
2180
|
*
|
|
2108
|
-
*
|
|
2181
|
+
* Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
|
|
2109
2182
|
*
|
|
2110
|
-
*
|
|
2183
|
+
* Полный интерфейс `TooltipComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts).
|
|
2111
2184
|
*/
|
|
2112
2185
|
declare const TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps>;
|
|
2113
2186
|
|
|
2114
|
-
interface TooltipProps extends ResponsiveSizeProps<
|
|
2115
|
-
/**
|
|
2187
|
+
interface TooltipProps extends ResponsiveSizeProps<TooltipComponentSize>, React.RefAttributes<HTMLDivElement> {
|
|
2188
|
+
/**
|
|
2189
|
+
* Использовать V3 компонента (`brand`) или V2 (`default`).
|
|
2190
|
+
* @default undefined */
|
|
2116
2191
|
preset?: ThemePreset;
|
|
2117
|
-
/**
|
|
2192
|
+
/**
|
|
2193
|
+
* Кастомные цвета.
|
|
2194
|
+
* @default undefined */
|
|
2118
2195
|
palette?: Partial<Record<keyof TooltipComponentPalette, Color>>;
|
|
2119
|
-
/**
|
|
2196
|
+
/**
|
|
2197
|
+
* Вариант цветовой схемы.
|
|
2198
|
+
* @default false */
|
|
2120
2199
|
black?: boolean;
|
|
2121
|
-
/**
|
|
2200
|
+
/**
|
|
2201
|
+
* Вариант цветовой схемы.
|
|
2202
|
+
* @default false */
|
|
2122
2203
|
contrast?: boolean;
|
|
2123
|
-
/**
|
|
2204
|
+
/**
|
|
2205
|
+
* Открывать автоматически.
|
|
2206
|
+
* @default false */
|
|
2124
2207
|
autoOpen?: boolean;
|
|
2125
|
-
/**
|
|
2208
|
+
/**
|
|
2209
|
+
* Колбек, который будет вызван при открытии или закрытии.
|
|
2210
|
+
* @default undefined */
|
|
2126
2211
|
callback?: (action: 'open' | 'close', props: Props) => void;
|
|
2127
|
-
/**
|
|
2212
|
+
/**
|
|
2213
|
+
* Триггер открытия, а также якорь тултипа (если не используется проп `target`).
|
|
2214
|
+
* @default undefined */
|
|
2128
2215
|
children?: React.ReactNode;
|
|
2129
|
-
/**
|
|
2216
|
+
/**
|
|
2217
|
+
* Закрывать тултип при клике за пределами рутового элемента (V3).
|
|
2218
|
+
*
|
|
2219
|
+
* Работает только если не используется проп `open`.
|
|
2220
|
+
* @default false */
|
|
2130
2221
|
closeOnClickOutside?: boolean;
|
|
2131
|
-
/**
|
|
2222
|
+
/**
|
|
2223
|
+
* Закрывать тултип при скролле `document` (V3).
|
|
2224
|
+
*
|
|
2225
|
+
* Работает только если не используется проп `open`.
|
|
2226
|
+
* @default false */
|
|
2132
2227
|
closeOnScroll?: boolean;
|
|
2133
|
-
/**
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
role?: string;
|
|
2137
|
-
closeFn?: () => void;
|
|
2138
|
-
}) => React.ReactElement);
|
|
2139
|
-
/** Tooltip content */
|
|
2228
|
+
/**
|
|
2229
|
+
* Основной текст.
|
|
2230
|
+
* @default undefined */
|
|
2140
2231
|
content?: React.ReactNode;
|
|
2141
|
-
/**
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
/**
|
|
2232
|
+
/**
|
|
2233
|
+
* Пропсы типографики для основного текста.
|
|
2234
|
+
* @default {} */
|
|
2235
|
+
contentProps?: Partial<TextProps>;
|
|
2236
|
+
/**
|
|
2237
|
+
* Отключить авто изменения положения тултипа при скролле или ресайзе.
|
|
2238
|
+
* @default false */
|
|
2146
2239
|
disableFlip?: boolean;
|
|
2147
|
-
/**
|
|
2240
|
+
/**
|
|
2241
|
+
* Отключить использование `event='click'` вместо `event='hover'` для мобильных браузеров.
|
|
2242
|
+
*
|
|
2243
|
+
* Работает только если не используется проп `open`.
|
|
2244
|
+
* @default false */
|
|
2148
2245
|
disableHoverToClick?: boolean;
|
|
2149
|
-
/**
|
|
2246
|
+
/**
|
|
2247
|
+
* Событие для открытия тултипа.
|
|
2248
|
+
*
|
|
2249
|
+
* Работает только если не используется проп `open`.
|
|
2250
|
+
* @default 'click' */
|
|
2150
2251
|
event?: 'click' | 'hover';
|
|
2151
|
-
/**
|
|
2252
|
+
/**
|
|
2253
|
+
* Отложенное закрытие если используется `event='hover'` (сек).
|
|
2254
|
+
*
|
|
2255
|
+
* Работает только если не используется проп `open`.
|
|
2256
|
+
* @default 0.4 */
|
|
2152
2257
|
eventDelay?: number;
|
|
2153
|
-
/**
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2258
|
+
/**
|
|
2259
|
+
* Рендер нижнего сегмента тултипа.
|
|
2260
|
+
*
|
|
2261
|
+
* Если используется функция, то в аргументе будут переданы пропсы размеров.
|
|
2262
|
+
* @default undefined */
|
|
2263
|
+
footer?: React.ReactNode | ((sizeProps: Pick<TooltipProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
|
|
2264
|
+
/**
|
|
2265
|
+
* Не использовать стрелку.
|
|
2266
|
+
* @default false */
|
|
2158
2267
|
hideArrow?: boolean;
|
|
2159
|
-
/**
|
|
2268
|
+
/**
|
|
2269
|
+
* Отступ между тултипом и якорем (px).
|
|
2270
|
+
* @default 8 */
|
|
2160
2271
|
offset?: number;
|
|
2161
|
-
/**
|
|
2272
|
+
/**
|
|
2273
|
+
* Тултип открыт или закрыт.
|
|
2274
|
+
*
|
|
2275
|
+
* Использование включает controlled режим.
|
|
2276
|
+
* @default undefined */
|
|
2162
2277
|
open?: boolean;
|
|
2163
|
-
/**
|
|
2278
|
+
/**
|
|
2279
|
+
* Положение тултипа.
|
|
2280
|
+
* @default 'bottom' */
|
|
2164
2281
|
placement?: Placement;
|
|
2165
|
-
/**
|
|
2282
|
+
/**
|
|
2283
|
+
* Элемент или CSS селектор элемента для использования в качестве портала.
|
|
2284
|
+
* @default undefined */
|
|
2166
2285
|
portalElement?: Props['portalElement'];
|
|
2167
|
-
/**
|
|
2168
|
-
|
|
2169
|
-
|
|
2286
|
+
/**
|
|
2287
|
+
* Рендер кнопки закрытия.
|
|
2288
|
+
* @default false */
|
|
2170
2289
|
showCloseButton?: boolean;
|
|
2171
|
-
/**
|
|
2172
|
-
|
|
2173
|
-
|
|
2290
|
+
/**
|
|
2291
|
+
* Пропсы для кнопки закрытия.
|
|
2292
|
+
* @default {} */
|
|
2293
|
+
closeButtonProps?: Partial<IconButtonProps>;
|
|
2294
|
+
/**
|
|
2295
|
+
* Элемент или CSS селектор элемента для использования в качестве якоря.
|
|
2296
|
+
* @default undefined */
|
|
2174
2297
|
target?: Props['target'];
|
|
2175
|
-
/**
|
|
2298
|
+
/**
|
|
2299
|
+
* Tекст заголовка.
|
|
2300
|
+
* @default undefined */
|
|
2176
2301
|
title?: React.ReactNode;
|
|
2177
|
-
/**
|
|
2178
|
-
|
|
2179
|
-
|
|
2302
|
+
/**
|
|
2303
|
+
* Пропсы типографики для текста заголовка.
|
|
2304
|
+
* @default {} */
|
|
2305
|
+
titleProps?: Partial<TextProps>;
|
|
2306
|
+
/**
|
|
2307
|
+
* z-index тултипа.
|
|
2308
|
+
* @default 100 */
|
|
2309
|
+
zIndex?: number;
|
|
2310
|
+
/** @ignore */
|
|
2311
|
+
styles?: Partial<Styles>;
|
|
2312
|
+
/** @ignore */
|
|
2313
|
+
component?: React.ReactElement | ((props: Pick<TooltipProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'black' | 'contrast' | 'showCloseButton' | 'closeButtonProps'> & {
|
|
2314
|
+
id?: string;
|
|
2315
|
+
role?: string;
|
|
2316
|
+
closeFn?: () => void;
|
|
2317
|
+
}) => React.ReactElement);
|
|
2318
|
+
/** @ignore */
|
|
2319
|
+
debug?: boolean;
|
|
2320
|
+
/** @ignore */
|
|
2321
|
+
getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
|
|
2322
|
+
/** @ignore */
|
|
2180
2323
|
wrapperOptions?: {
|
|
2181
2324
|
offset?: number;
|
|
2182
2325
|
placement?: Omit<Placement, 'center'>;
|
|
2183
2326
|
position?: boolean;
|
|
2184
2327
|
};
|
|
2185
|
-
/** Tooltip z-index */
|
|
2186
|
-
zIndex?: number;
|
|
2187
2328
|
}
|
|
2188
2329
|
|
|
2189
2330
|
/**
|
|
2190
2331
|
*
|
|
2191
|
-
*
|
|
2332
|
+
* Компонент поддерживает все атрибуты \<div\> элемента.
|
|
2192
2333
|
*
|
|
2193
|
-
*
|
|
2334
|
+
* Можно передать "ref", который будет ассоциирован с рутовым элементом.
|
|
2194
2335
|
*
|
|
2195
|
-
*
|
|
2336
|
+
* Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
|
|
2337
|
+
*
|
|
2338
|
+
* Компонент основан на ["react-floater"](https://www.npmjs.com/package/react-floater).
|
|
2339
|
+
*
|
|
2340
|
+
* Получить доступ к компоненту, не подключенному к библиотеке, можно через `Tooltip.Component`.
|
|
2341
|
+
*
|
|
2342
|
+
* Полный интерфейс `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).
|
|
2196
2343
|
*
|
|
2197
|
-
* See full [TooltipProps](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts)
|
|
2198
2344
|
*/
|
|
2199
2345
|
declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps> & {
|
|
2200
2346
|
Component: typeof TooltipComponent;
|
|
2201
2347
|
};
|
|
2202
2348
|
|
|
2349
|
+
declare type PopoverComponentSize = 'xl' | 'l' | 'm' | 's' | 'xs';
|
|
2203
2350
|
declare type PopoverComponentPalette = {
|
|
2204
2351
|
color: CSSColor;
|
|
2205
2352
|
backgroundColor: CSSColor;
|
|
2206
2353
|
mediaPlaceholderColor: CSSColor;
|
|
2207
2354
|
shadowColor: CSSColor;
|
|
2208
|
-
closeColor: CSSColor;
|
|
2209
|
-
closeBackgroundColor: CSSColor;
|
|
2210
|
-
closeColorHover: CSSColor;
|
|
2211
|
-
closeBackgroundColorHover: CSSColor;
|
|
2212
|
-
closeColorActive: CSSColor;
|
|
2213
|
-
closeBackgroundColorActive: CSSColor;
|
|
2214
|
-
closeColorDisabled: CSSColor;
|
|
2215
|
-
closeBackgroundColorDisabled: CSSColor;
|
|
2216
2355
|
};
|
|
2217
|
-
interface PopoverComponentProps extends ResponsiveSizeProps<
|
|
2218
|
-
/**
|
|
2356
|
+
interface PopoverComponentProps extends ResponsiveSizeProps<PopoverComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
|
|
2357
|
+
/**
|
|
2358
|
+
* Кастомные цвета.
|
|
2359
|
+
* @default undefined */
|
|
2219
2360
|
palette?: Partial<Record<keyof PopoverComponentPalette, Color>>;
|
|
2220
|
-
/**
|
|
2361
|
+
/**
|
|
2362
|
+
* Ориентация контента.
|
|
2363
|
+
* @default 'portrait' */
|
|
2221
2364
|
orientation?: 'portrait' | 'landscape';
|
|
2222
|
-
/**
|
|
2365
|
+
/**
|
|
2366
|
+
* Использование скелетонов вместо реального контента.
|
|
2367
|
+
* @default false */
|
|
2223
2368
|
loading?: boolean;
|
|
2224
|
-
/**
|
|
2369
|
+
/**
|
|
2370
|
+
* Пропсы для бейджа в верхнем сегменте.
|
|
2371
|
+
* @default {} */
|
|
2225
2372
|
badge?: {
|
|
2226
2373
|
text?: React.ReactNode;
|
|
2227
|
-
badgeProps?: BadgeProps
|
|
2374
|
+
badgeProps?: Partial<BadgeProps>;
|
|
2228
2375
|
};
|
|
2229
|
-
/**
|
|
2376
|
+
/**
|
|
2377
|
+
* Tекст над заголовком.
|
|
2378
|
+
* @default undefined */
|
|
2230
2379
|
caption?: React.ReactNode;
|
|
2231
|
-
/**
|
|
2232
|
-
|
|
2233
|
-
|
|
2380
|
+
/**
|
|
2381
|
+
* Пропсы типографики для текста над заголовком.
|
|
2382
|
+
* @default {} */
|
|
2383
|
+
captionProps?: Partial<TextProps>;
|
|
2384
|
+
/**
|
|
2385
|
+
* Tекст заголовка.
|
|
2386
|
+
* @default undefined */
|
|
2234
2387
|
title?: React.ReactNode;
|
|
2235
|
-
/**
|
|
2236
|
-
|
|
2237
|
-
|
|
2388
|
+
/**
|
|
2389
|
+
* Пропсы типографики для текста заголовка.
|
|
2390
|
+
* @default {} */
|
|
2391
|
+
titleProps?: Partial<TextProps>;
|
|
2392
|
+
/**
|
|
2393
|
+
* Основной текст.
|
|
2394
|
+
* @default undefined */
|
|
2238
2395
|
content?: React.ReactNode;
|
|
2239
|
-
/**
|
|
2240
|
-
|
|
2241
|
-
|
|
2396
|
+
/**
|
|
2397
|
+
* Пропсы типографики для основного текста.
|
|
2398
|
+
* @default {} */
|
|
2399
|
+
contentProps?: Partial<TextProps>;
|
|
2400
|
+
/**
|
|
2401
|
+
* Рендер кнопки закрытия.
|
|
2402
|
+
* @default false */
|
|
2242
2403
|
showCloseButton?: boolean;
|
|
2243
|
-
/**
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
/**
|
|
2404
|
+
/**
|
|
2405
|
+
* Пропсы для кнопки закрытия.
|
|
2406
|
+
* @default {} */
|
|
2407
|
+
closeButtonProps?: Partial<IconButtonProps>;
|
|
2408
|
+
/**
|
|
2409
|
+
* Пропсы для медиа элементов.
|
|
2410
|
+
* @default {} */
|
|
2248
2411
|
media?: {
|
|
2249
2412
|
imgProps?: React.ComponentPropsWithoutRef<'img'>;
|
|
2250
2413
|
videoProps?: React.ComponentPropsWithoutRef<'video'>;
|
|
2251
2414
|
};
|
|
2252
|
-
/**
|
|
2415
|
+
/**
|
|
2416
|
+
* Функция для рендера нижнего сегмента поповера, аргументом получает пропсы размеров.
|
|
2417
|
+
* @default undefined */
|
|
2418
|
+
footer?: (sizeProps: Pick<PopoverComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
|
|
2419
|
+
/**
|
|
2420
|
+
* Внешний вид с тенью.
|
|
2421
|
+
* @default false */
|
|
2422
|
+
elevated?: boolean;
|
|
2423
|
+
/** @ignore */
|
|
2424
|
+
closeFn?: () => void;
|
|
2425
|
+
/** @ignore @deprecated */
|
|
2426
|
+
controlsDirection?: 'row' | 'column';
|
|
2427
|
+
/** @ignore @deprecated */
|
|
2253
2428
|
controls?: {
|
|
2254
2429
|
secondary?: {
|
|
2255
2430
|
text?: React.ReactNode;
|
|
2256
|
-
buttonProps?: ButtonProps
|
|
2431
|
+
buttonProps?: Partial<ButtonProps>;
|
|
2257
2432
|
};
|
|
2258
2433
|
primary?: {
|
|
2259
2434
|
text?: React.ReactNode;
|
|
2260
|
-
buttonProps?: ButtonProps
|
|
2435
|
+
buttonProps?: Partial<ButtonProps>;
|
|
2261
2436
|
};
|
|
2262
2437
|
};
|
|
2263
|
-
/** Apply drop shadow filter */
|
|
2264
|
-
elevated?: boolean;
|
|
2265
|
-
/** @ignore */
|
|
2266
|
-
black?: boolean;
|
|
2267
|
-
/** @ignore */
|
|
2268
|
-
contrast?: boolean;
|
|
2269
|
-
/** @ignore */
|
|
2270
|
-
closeFn?: () => void;
|
|
2271
2438
|
}
|
|
2272
2439
|
|
|
2273
2440
|
/**
|
|
2274
2441
|
*
|
|
2275
|
-
*
|
|
2276
|
-
*
|
|
2277
|
-
* Responsive "size" props are supported.
|
|
2442
|
+
* Компонент поддерживает все атрибуты \<div\> элемента.
|
|
2278
2443
|
*
|
|
2279
|
-
*
|
|
2444
|
+
* Можно передать "ref", который будет ассоциирован с рутовым элементом.
|
|
2280
2445
|
*
|
|
2281
|
-
*
|
|
2446
|
+
* Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
|
|
2282
2447
|
*
|
|
2448
|
+
* Полный интерфейс `PopoverComponent` можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/PopoverComponent/types.ts).
|
|
2283
2449
|
*/
|
|
2284
2450
|
declare const PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps>;
|
|
2285
2451
|
|
|
2286
|
-
interface PopoverProps extends ResponsiveSizeProps<
|
|
2287
|
-
/**
|
|
2452
|
+
interface PopoverProps extends ResponsiveSizeProps<PopoverComponentSize>, React.RefAttributes<HTMLDivElement> {
|
|
2453
|
+
/**
|
|
2454
|
+
* Кастомные цвета.
|
|
2455
|
+
* @default undefined */
|
|
2288
2456
|
palette?: Partial<Record<keyof PopoverComponentPalette, Color>>;
|
|
2289
|
-
/**
|
|
2457
|
+
/**
|
|
2458
|
+
* Открывать автоматически.
|
|
2459
|
+
* @default false */
|
|
2290
2460
|
autoOpen?: boolean;
|
|
2291
|
-
/**
|
|
2461
|
+
/**
|
|
2462
|
+
* Колбек, который будет вызван при открытии или закрытии.
|
|
2463
|
+
* @default undefined */
|
|
2292
2464
|
callback?: (action: 'open' | 'close', props: Props) => void;
|
|
2293
|
-
/**
|
|
2465
|
+
/**
|
|
2466
|
+
* Закрывать поповер при клике за пределами рутового элемента.
|
|
2467
|
+
*
|
|
2468
|
+
* Работает только если не используется проп `open`.
|
|
2469
|
+
* @default false */
|
|
2294
2470
|
closeOnClickOutside?: boolean;
|
|
2295
|
-
/**
|
|
2471
|
+
/**
|
|
2472
|
+
* Закрывать поповер при скролле `document`.
|
|
2473
|
+
*
|
|
2474
|
+
* Работает только если не используется проп `open`.
|
|
2475
|
+
* @default false */
|
|
2296
2476
|
closeOnScroll?: boolean;
|
|
2297
|
-
/**
|
|
2477
|
+
/**
|
|
2478
|
+
* Триггер открытия, а также якорь поповера (если не используется проп `target`).
|
|
2479
|
+
* @default undefined */
|
|
2298
2480
|
children?: React.ReactNode;
|
|
2299
|
-
/**
|
|
2300
|
-
|
|
2301
|
-
|
|
2481
|
+
/**
|
|
2482
|
+
* Отключить авто изменение положения поповера при скролле или ресайзе.
|
|
2483
|
+
* @default false */
|
|
2302
2484
|
disableFlip?: boolean;
|
|
2303
|
-
/**
|
|
2485
|
+
/**
|
|
2486
|
+
* Отключить использование `event='click'` вместо `event='hover'` для мобильных браузеров.
|
|
2487
|
+
*
|
|
2488
|
+
* Работает только если не используется проп `open`.
|
|
2489
|
+
* @default false */
|
|
2304
2490
|
disableHoverToClick?: boolean;
|
|
2305
|
-
/**
|
|
2491
|
+
/**
|
|
2492
|
+
* Событие для открытия поповера.
|
|
2493
|
+
*
|
|
2494
|
+
* Работает только если не используется проп `open`.
|
|
2495
|
+
* @default 'click' */
|
|
2306
2496
|
event?: 'click' | 'hover';
|
|
2307
|
-
/**
|
|
2497
|
+
/**
|
|
2498
|
+
* Отложенное закрытие если используется `event='hover'` (сек).
|
|
2499
|
+
*
|
|
2500
|
+
* Работает только если не используется проп `open`.
|
|
2501
|
+
* @default 0.4 */
|
|
2308
2502
|
eventDelay?: number;
|
|
2309
|
-
/**
|
|
2310
|
-
|
|
2311
|
-
|
|
2503
|
+
/**
|
|
2504
|
+
* Не использовать стрелку.
|
|
2505
|
+
* @default false */
|
|
2312
2506
|
hideArrow?: boolean;
|
|
2313
|
-
/**
|
|
2507
|
+
/**
|
|
2508
|
+
* Отступ между поповером и якорем (px).
|
|
2509
|
+
* @default 8 */
|
|
2314
2510
|
offset?: number;
|
|
2315
|
-
/**
|
|
2511
|
+
/**
|
|
2512
|
+
* Поповер открыт или закрыт.
|
|
2513
|
+
*
|
|
2514
|
+
* Использование включает controlled режим.
|
|
2515
|
+
* @default undefined */
|
|
2316
2516
|
open?: boolean;
|
|
2317
|
-
/**
|
|
2517
|
+
/**
|
|
2518
|
+
* Положение поповера.
|
|
2519
|
+
* @default 'bottom' */
|
|
2318
2520
|
placement?: Placement;
|
|
2319
|
-
/**
|
|
2521
|
+
/**
|
|
2522
|
+
* Элемент или CSS селектор элемента для использования в качестве портала.
|
|
2523
|
+
* @default undefined */
|
|
2320
2524
|
portalElement?: Props['portalElement'];
|
|
2321
|
-
/**
|
|
2322
|
-
|
|
2323
|
-
|
|
2525
|
+
/**
|
|
2526
|
+
* Рендер кнопки закрытия.
|
|
2527
|
+
* @default false */
|
|
2324
2528
|
showCloseButton?: boolean;
|
|
2325
|
-
/**
|
|
2326
|
-
|
|
2327
|
-
|
|
2529
|
+
/**
|
|
2530
|
+
* Пропсы для кнопки закрытия.
|
|
2531
|
+
* @default {} */
|
|
2532
|
+
closeButtonProps?: Partial<IconButtonProps>;
|
|
2533
|
+
/**
|
|
2534
|
+
* Элемент или CSS селектор элемента для использования в качестве якоря.
|
|
2535
|
+
* @default undefined */
|
|
2328
2536
|
target?: Props['target'];
|
|
2329
|
-
/**
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
placement?: Omit<Placement, 'center'>;
|
|
2333
|
-
position?: boolean;
|
|
2334
|
-
};
|
|
2335
|
-
/** Relationship of width to height */
|
|
2537
|
+
/**
|
|
2538
|
+
* Ориентация контента.
|
|
2539
|
+
* @default 'portrait' */
|
|
2336
2540
|
orientation?: 'portrait' | 'landscape';
|
|
2337
|
-
/**
|
|
2541
|
+
/**
|
|
2542
|
+
* Использование скелетонов вместо реального контента.
|
|
2543
|
+
* @default false */
|
|
2338
2544
|
loading?: boolean;
|
|
2339
|
-
/**
|
|
2545
|
+
/**
|
|
2546
|
+
* Пропсы для бейджа в верхнем сегменте.
|
|
2547
|
+
* @default {} */
|
|
2340
2548
|
badge?: {
|
|
2341
2549
|
text?: React.ReactNode;
|
|
2342
|
-
badgeProps?: BadgeProps
|
|
2550
|
+
badgeProps?: Partial<BadgeProps>;
|
|
2343
2551
|
};
|
|
2344
|
-
/**
|
|
2552
|
+
/**
|
|
2553
|
+
* Tекст над заголовком.
|
|
2554
|
+
* @default undefined */
|
|
2345
2555
|
caption?: React.ReactNode;
|
|
2346
|
-
/**
|
|
2347
|
-
|
|
2348
|
-
|
|
2556
|
+
/**
|
|
2557
|
+
* Пропсы типографики для текста над заголовком.
|
|
2558
|
+
* @default {} */
|
|
2559
|
+
captionProps?: Partial<TextProps>;
|
|
2560
|
+
/**
|
|
2561
|
+
* Tекст заголовка.
|
|
2562
|
+
* @default undefined */
|
|
2349
2563
|
title?: React.ReactNode;
|
|
2350
|
-
/**
|
|
2351
|
-
|
|
2352
|
-
|
|
2564
|
+
/**
|
|
2565
|
+
* Пропсы типографики для текста заголовка.
|
|
2566
|
+
* @default {} */
|
|
2567
|
+
titleProps?: Partial<TextProps>;
|
|
2568
|
+
/**
|
|
2569
|
+
* Основной текст.
|
|
2570
|
+
* @default undefined */
|
|
2353
2571
|
content?: React.ReactNode;
|
|
2354
|
-
/**
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
/**
|
|
2572
|
+
/**
|
|
2573
|
+
* Пропсы типографики для основного текста.
|
|
2574
|
+
* @default {} */
|
|
2575
|
+
contentProps?: Partial<TextProps>;
|
|
2576
|
+
/**
|
|
2577
|
+
* Пропсы для медиа элементов.
|
|
2578
|
+
* @default {} */
|
|
2359
2579
|
media?: {
|
|
2360
2580
|
imgProps?: React.ComponentPropsWithoutRef<'img'>;
|
|
2361
2581
|
videoProps?: React.ComponentPropsWithoutRef<'video'>;
|
|
2362
2582
|
};
|
|
2363
|
-
/**
|
|
2583
|
+
/**
|
|
2584
|
+
* Функция для рендера нижнего сегмента поповера, аргументом получает пропсы размеров.
|
|
2585
|
+
* @default undefined */
|
|
2586
|
+
footer?: (sizeProps: Pick<PopoverProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
|
|
2587
|
+
/**
|
|
2588
|
+
* z-index поповера.
|
|
2589
|
+
* @default 100 */
|
|
2590
|
+
zIndex?: number;
|
|
2591
|
+
/** @ignore */
|
|
2592
|
+
debug?: boolean;
|
|
2593
|
+
/** @ignore */
|
|
2594
|
+
getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
|
|
2595
|
+
/** @ignore */
|
|
2596
|
+
wrapperOptions?: {
|
|
2597
|
+
offset?: number;
|
|
2598
|
+
placement?: Omit<Placement, 'center'>;
|
|
2599
|
+
position?: boolean;
|
|
2600
|
+
};
|
|
2601
|
+
/** @ignore */
|
|
2602
|
+
styles?: Partial<Styles>;
|
|
2603
|
+
/** @ignore @deprecated */
|
|
2604
|
+
controlsDirection?: 'row' | 'column';
|
|
2605
|
+
/** @ignore @deprecated */
|
|
2364
2606
|
controls?: {
|
|
2365
2607
|
secondary?: {
|
|
2366
2608
|
text?: React.ReactNode;
|
|
2367
|
-
buttonProps?: ButtonProps
|
|
2609
|
+
buttonProps?: Partial<ButtonProps>;
|
|
2368
2610
|
};
|
|
2369
2611
|
primary?: {
|
|
2370
2612
|
text?: React.ReactNode;
|
|
2371
|
-
buttonProps?: ButtonProps
|
|
2613
|
+
buttonProps?: Partial<ButtonProps>;
|
|
2372
2614
|
};
|
|
2373
2615
|
};
|
|
2374
|
-
/** Popover z-index */
|
|
2375
|
-
zIndex?: number;
|
|
2376
|
-
/** @ignore */
|
|
2377
|
-
footer?: React.ReactNode;
|
|
2378
|
-
/** @ignore */
|
|
2379
|
-
black?: boolean;
|
|
2380
|
-
/** @ignore */
|
|
2381
|
-
contrast?: boolean;
|
|
2382
2616
|
}
|
|
2383
2617
|
|
|
2384
2618
|
/**
|
|
2385
2619
|
*
|
|
2386
|
-
*
|
|
2620
|
+
* Компонент поддерживает все атрибуты \<div\> элемента.
|
|
2387
2621
|
*
|
|
2388
|
-
*
|
|
2622
|
+
* Можно передать "ref", который будет ассоциирован с рутовым элементом.
|
|
2623
|
+
*
|
|
2624
|
+
* Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
|
|
2625
|
+
*
|
|
2626
|
+
* Компонент основан на ["react-floater"](https://www.npmjs.com/package/react-floater).
|
|
2389
2627
|
*
|
|
2390
|
-
*
|
|
2628
|
+
* Получить доступ к компоненту, не подключенному к библиотеке, можно через `Popover.Component`.
|
|
2629
|
+
*
|
|
2630
|
+
* Полный интерфейс `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).
|
|
2391
2631
|
*
|
|
2392
|
-
* See full [PopoverProps](https://github.com/foxford/ui/blob/master/src/components/Popover/types.ts)
|
|
2393
2632
|
*/
|
|
2394
2633
|
declare const Popover: React.ForwardRefExoticComponent<PopoverProps> & {
|
|
2395
2634
|
Component: typeof PopoverComponent;
|
|
@@ -2607,58 +2846,6 @@ ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
|
|
|
2607
2846
|
*/
|
|
2608
2847
|
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps>;
|
|
2609
2848
|
|
|
2610
|
-
declare type IconButtonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
|
|
2611
|
-
declare type IconButtonPalette = {
|
|
2612
|
-
color: CSSColor;
|
|
2613
|
-
backgroundColor: CSSColor;
|
|
2614
|
-
colorHover: CSSColor;
|
|
2615
|
-
backgroundColorHover: CSSColor;
|
|
2616
|
-
colorActive: CSSColor;
|
|
2617
|
-
backgroundColorActive: CSSColor;
|
|
2618
|
-
colorDisabled: CSSColor;
|
|
2619
|
-
backgroundColorDisabled: CSSColor;
|
|
2620
|
-
};
|
|
2621
|
-
interface IconButtonProps extends ResponsiveSizeProps<IconButtonSize, IconButtonSize | number>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
|
|
2622
|
-
/**
|
|
2623
|
-
* Custom colors
|
|
2624
|
-
* @default undefined */
|
|
2625
|
-
palette?: Partial<Record<keyof IconButtonPalette, Color>>;
|
|
2626
|
-
/** Icon to display */
|
|
2627
|
-
icon: JSX.Element | IconName;
|
|
2628
|
-
/**
|
|
2629
|
-
* Props for icon component
|
|
2630
|
-
* @default {} */
|
|
2631
|
-
iconProps?: IconProps;
|
|
2632
|
-
/**
|
|
2633
|
-
* Shape variant
|
|
2634
|
-
* @default false */
|
|
2635
|
-
square?: boolean;
|
|
2636
|
-
/**
|
|
2637
|
-
* Appearance variant
|
|
2638
|
-
* @default true */
|
|
2639
|
-
primary?: boolean;
|
|
2640
|
-
/**
|
|
2641
|
-
* Appearance variant
|
|
2642
|
-
* @default false */
|
|
2643
|
-
secondary?: boolean;
|
|
2644
|
-
/**
|
|
2645
|
-
* Appearance variant
|
|
2646
|
-
* @default false */
|
|
2647
|
-
contrast?: boolean;
|
|
2648
|
-
}
|
|
2649
|
-
|
|
2650
|
-
/**
|
|
2651
|
-
*
|
|
2652
|
-
* Component accepts all \<button\> attributes.
|
|
2653
|
-
*
|
|
2654
|
-
* Responsive "size", "margin" props are supported.
|
|
2655
|
-
*
|
|
2656
|
-
* Exposed "ref" attached to root node.
|
|
2657
|
-
*
|
|
2658
|
-
* See full [IconButtonProps](https://github.com/foxford/ui/blob/master/src/components/IconButton/types.ts)
|
|
2659
|
-
*/
|
|
2660
|
-
declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps>;
|
|
2661
|
-
|
|
2662
2849
|
declare type ChipSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
|
|
2663
2850
|
declare type ChipPalette = {
|
|
2664
2851
|
color: CSSColor;
|
|
@@ -2948,7 +3135,7 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
|
|
|
2948
3135
|
/** Текст над заголовком диалога */
|
|
2949
3136
|
caption?: React.ReactNode;
|
|
2950
3137
|
/** Пропсы для типографики текста над заголовком */
|
|
2951
|
-
captionProps?: TextProps
|
|
3138
|
+
captionProps?: Partial<TextProps>;
|
|
2952
3139
|
/** Класс для элемента с бекграундом диалога */
|
|
2953
3140
|
backgroundClassName?: string;
|
|
2954
3141
|
/** Основной контент или функция для рендера основного контента (аргументом получает текущие пропсы размеров) */
|
|
@@ -2965,7 +3152,7 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
|
|
|
2965
3152
|
/** Диалог находится в состоянии перетаскивания (использование визуальной индикации) */
|
|
2966
3153
|
dragging?: boolean;
|
|
2967
3154
|
/** Пропсы для иконки в области захвата для перетаскивания */
|
|
2968
|
-
draggingIconProps?: IconProps
|
|
3155
|
+
draggingIconProps?: Partial<IconProps>;
|
|
2969
3156
|
/** Вариант внешнего вида со скошенным верхним сегментом */
|
|
2970
3157
|
fancy?: boolean;
|
|
2971
3158
|
/** Функция для рендера дополнительных элементов с позицией относительно рута диалога (аргументом получает текущие пропсы размеров) */
|
|
@@ -2976,12 +3163,19 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
|
|
|
2976
3163
|
imgPortraitPositionBottom?: boolean;
|
|
2977
3164
|
/**
|
|
2978
3165
|
* Пути картинок в зависимости от ориентации окна диалога.
|
|
2979
|
-
* Ожидаемое соотношение сторон картинок: 3:1 portrait, 5:7 landscape
|
|
2980
3166
|
*/
|
|
2981
3167
|
imgSrc?: {
|
|
2982
3168
|
portrait?: string;
|
|
2983
3169
|
landscape?: string;
|
|
2984
3170
|
};
|
|
3171
|
+
/**
|
|
3172
|
+
* Cоотношение сторон картинок.
|
|
3173
|
+
* Дефолтное соотношение сторон: 3:1 portrait, 5:7 landscape
|
|
3174
|
+
*/
|
|
3175
|
+
imgAspectRatio?: {
|
|
3176
|
+
portrait?: '1:1' | '3:1' | '5:2';
|
|
3177
|
+
landscape?: '1:1' | '4:5' | '5:7';
|
|
3178
|
+
};
|
|
2985
3179
|
/** Использование скелетонов вместо реального контента */
|
|
2986
3180
|
loading?: boolean;
|
|
2987
3181
|
/** Колбек будет передан в onPointerDown элемента области захвата */
|
|
@@ -2990,18 +3184,22 @@ interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>,
|
|
|
2990
3184
|
onNudge?: React.KeyboardEventHandler<HTMLElement>;
|
|
2991
3185
|
/** Кастомные цвета */
|
|
2992
3186
|
palette?: Partial<Record<keyof DialogComponentPalette, Color>>;
|
|
2993
|
-
/**
|
|
2994
|
-
|
|
3187
|
+
/** Использование индикатора прогресса */
|
|
3188
|
+
progressLine?: boolean;
|
|
3189
|
+
/** Пропсы для индикатора прогресса */
|
|
3190
|
+
progressLineProps?: Partial<ProgressLineProps>;
|
|
3191
|
+
/** Пропсы для скелетонов */
|
|
3192
|
+
skeletonProps?: Partial<SkeletonProps>;
|
|
2995
3193
|
/** Отключить эффект фейдинга при скролле контента */
|
|
2996
3194
|
scrollFadingDisabled?: boolean;
|
|
2997
3195
|
/** Подзаголовок диалога */
|
|
2998
3196
|
subtitle?: React.ReactNode;
|
|
2999
3197
|
/** Пропсы для типографики подзаголовка */
|
|
3000
|
-
subtitleProps?: TextProps
|
|
3198
|
+
subtitleProps?: Partial<TextProps>;
|
|
3001
3199
|
/** Заголовок диалога */
|
|
3002
3200
|
title?: React.ReactNode;
|
|
3003
3201
|
/** Пропсы типографики для заголовка */
|
|
3004
|
-
titleProps?: TextProps
|
|
3202
|
+
titleProps?: Partial<TextProps>;
|
|
3005
3203
|
/** z-index рутового элемента */
|
|
3006
3204
|
zIndex?: number;
|
|
3007
3205
|
}
|
|
@@ -3020,115 +3218,217 @@ declare const DialogComponent: React.ForwardRefExoticComponent<DialogComponentPr
|
|
|
3020
3218
|
|
|
3021
3219
|
declare type DialogPosition = 'center' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
|
|
3022
3220
|
interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, ResponsivePositionProps<DialogPosition>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'className' | 'title' | 'draggable'> {
|
|
3023
|
-
/**
|
|
3221
|
+
/**
|
|
3222
|
+
* Открыто диалоговое окно.
|
|
3223
|
+
* @default undefined */
|
|
3024
3224
|
open: boolean;
|
|
3025
|
-
/**
|
|
3225
|
+
/**
|
|
3226
|
+
* Колбек, который будет вызван после открытия.
|
|
3227
|
+
* @default undefined */
|
|
3026
3228
|
onAfterOpen?: (refs?: {
|
|
3027
3229
|
overlayEl?: Element;
|
|
3028
3230
|
contentEl?: Element;
|
|
3029
3231
|
}) => void;
|
|
3030
|
-
/**
|
|
3232
|
+
/**
|
|
3233
|
+
* Колбек, который будет вызван после закрытия.
|
|
3234
|
+
* @default undefined */
|
|
3031
3235
|
onAfterClose?: () => void;
|
|
3032
|
-
/**
|
|
3236
|
+
/**
|
|
3237
|
+
* Колбек, который будет вызван по клику на оверлей или нажатию "Esc".
|
|
3238
|
+
* @default undefined */
|
|
3033
3239
|
onRequestClose?: (evt: React.MouseEvent | React.KeyboardEvent) => void;
|
|
3034
|
-
/**
|
|
3240
|
+
/**
|
|
3241
|
+
* Класс (или классы) для диалогового окна.
|
|
3242
|
+
* @default undefined */
|
|
3035
3243
|
className?: string | {
|
|
3036
3244
|
base: string;
|
|
3037
3245
|
afterOpen: string;
|
|
3038
3246
|
beforeClose: string;
|
|
3039
3247
|
};
|
|
3040
|
-
/**
|
|
3248
|
+
/**
|
|
3249
|
+
* Задержка перед фактическим закрытием (мс).
|
|
3250
|
+
* @default 0 */
|
|
3041
3251
|
closeTimeoutMS?: number;
|
|
3042
|
-
/**
|
|
3252
|
+
/**
|
|
3253
|
+
* Класс для элемента портала диалога.
|
|
3254
|
+
* @default "ReactModalPortal" */
|
|
3043
3255
|
portalClassName?: string;
|
|
3044
|
-
/**
|
|
3256
|
+
/**
|
|
3257
|
+
* Класс для body при открытом диалоговом окне.
|
|
3258
|
+
* @default "ReactModal__Body--open" */
|
|
3045
3259
|
bodyOpenClassName?: string;
|
|
3046
|
-
/**
|
|
3260
|
+
/**
|
|
3261
|
+
* Класс для html при открытом диалоговом окне.
|
|
3262
|
+
* @default null */
|
|
3047
3263
|
htmlOpenClassName?: string;
|
|
3048
|
-
/**
|
|
3264
|
+
/**
|
|
3265
|
+
* Вызов `onRequestClose` при клике на оверлей.
|
|
3266
|
+
* @default true */
|
|
3049
3267
|
shouldCloseOnOverlayClick?: boolean;
|
|
3050
|
-
/**
|
|
3268
|
+
/**
|
|
3269
|
+
* Вызов `onRequestClose` при нажатии "Esc".
|
|
3270
|
+
* @default true */
|
|
3051
3271
|
shouldCloseOnEsc?: boolean;
|
|
3052
|
-
/**
|
|
3272
|
+
/**
|
|
3273
|
+
* Возврат фокуса на элемент, который был в фокусе до открытия диалога.
|
|
3274
|
+
* @default true */
|
|
3053
3275
|
shouldReturnFocusAfterClose?: boolean;
|
|
3054
|
-
/**
|
|
3276
|
+
/**
|
|
3277
|
+
* После закрытия не скроллить до элемента, который имел фокус до открытия.
|
|
3278
|
+
* @default false */
|
|
3055
3279
|
preventScrollAfterClose?: boolean;
|
|
3056
|
-
/**
|
|
3280
|
+
/**
|
|
3281
|
+
* Класс (или классы) для оверлея.
|
|
3282
|
+
* @default undefined */
|
|
3057
3283
|
overlayClassName?: string | {
|
|
3058
3284
|
base: string;
|
|
3059
3285
|
afterOpen: string;
|
|
3060
3286
|
beforeClose: string;
|
|
3061
3287
|
};
|
|
3062
|
-
/**
|
|
3288
|
+
/**
|
|
3289
|
+
* Колбек, который должен вернуть элемент для рендера диалога.
|
|
3290
|
+
*
|
|
3291
|
+
* По дефолту будет использован `document.body`.
|
|
3292
|
+
* @default undefined */
|
|
3063
3293
|
parentSelector?: () => HTMLElement;
|
|
3064
|
-
/**
|
|
3294
|
+
/**
|
|
3295
|
+
* Колбек, который получает аргументом элемент оверлея.
|
|
3296
|
+
* @default undefined */
|
|
3065
3297
|
overlayRef?: (ref: HTMLElement | null) => void;
|
|
3066
|
-
/**
|
|
3298
|
+
/**
|
|
3299
|
+
* Колбек, который получает аргументом элемент рута диалогового окна.
|
|
3300
|
+
* @default undefined */
|
|
3067
3301
|
contentRef?: (ref: HTMLElement | null) => void;
|
|
3068
|
-
/**
|
|
3302
|
+
/**
|
|
3303
|
+
* Класс для элемента с бекграундом диалога.
|
|
3304
|
+
* @default undefined */
|
|
3069
3305
|
backgroundClassName?: string;
|
|
3070
|
-
/**
|
|
3306
|
+
/**
|
|
3307
|
+
* Текст над заголовком диалога.
|
|
3308
|
+
* @default undefined */
|
|
3071
3309
|
caption?: React.ReactNode;
|
|
3072
|
-
/**
|
|
3073
|
-
|
|
3074
|
-
|
|
3310
|
+
/**
|
|
3311
|
+
* Пропсы для типографики текста над заголовком.
|
|
3312
|
+
* @default {} */
|
|
3313
|
+
captionProps?: Partial<TextProps>;
|
|
3314
|
+
/**
|
|
3315
|
+
* Основной контент диалогового окна.
|
|
3316
|
+
*
|
|
3317
|
+
* Если используется функция, то в аргументе будут переданы пропсы размеров.
|
|
3318
|
+
* @default undefined */
|
|
3075
3319
|
children?: React.ReactNode | ((sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
|
|
3076
3320
|
/**
|
|
3077
|
-
* Пропсы для кнопки действия в правом верхнем углу
|
|
3078
|
-
*
|
|
3079
|
-
|
|
3321
|
+
* Пропсы для кнопки действия в правом верхнем углу диалога.
|
|
3322
|
+
*
|
|
3323
|
+
* Для рендера кнопки нужно передать `iconButtonProps.onClick`.
|
|
3324
|
+
* @default {} */
|
|
3080
3325
|
iconButtonProps?: Partial<IconButtonProps>;
|
|
3081
|
-
/**
|
|
3326
|
+
/**
|
|
3327
|
+
* Функция для рендера контролов диалога.
|
|
3328
|
+
*
|
|
3329
|
+
* В аргументе будут переданы пропсы размеров.
|
|
3330
|
+
* @default undefined */
|
|
3082
3331
|
controls?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
|
|
3083
3332
|
/**
|
|
3084
3333
|
* Диалоговое окно можно перетаскивать.
|
|
3085
|
-
*
|
|
3086
|
-
|
|
3334
|
+
*
|
|
3335
|
+
* В этом случае оверлей не используется и диалог рендерит область захвата.
|
|
3336
|
+
* @default undefined */
|
|
3087
3337
|
draggable?: boolean;
|
|
3088
|
-
/**
|
|
3089
|
-
|
|
3090
|
-
|
|
3338
|
+
/**
|
|
3339
|
+
* Пропсы для иконки в области захвата для перетаскивания.
|
|
3340
|
+
* @default {} */
|
|
3341
|
+
draggingIconProps?: Partial<IconProps>;
|
|
3342
|
+
/**
|
|
3343
|
+
* Вариант внешнего вида со скошенным верхним сегментом.
|
|
3344
|
+
* @default undefined */
|
|
3091
3345
|
fancy?: boolean;
|
|
3092
|
-
/**
|
|
3346
|
+
/**
|
|
3347
|
+
* Функция для рендера дополнительных элементов с позицией относительно рута диалога.
|
|
3348
|
+
*
|
|
3349
|
+
* Aргументом получает текущие пропсы размеров.
|
|
3350
|
+
* @default undefined */
|
|
3093
3351
|
floats?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
|
|
3094
|
-
/**
|
|
3352
|
+
/**
|
|
3353
|
+
* Рендер картинки справа в горизонтальной ориентации (дефолт слева).
|
|
3354
|
+
* @default undefined */
|
|
3095
3355
|
imgLandscapePositionRight?: boolean;
|
|
3096
|
-
/**
|
|
3356
|
+
/**
|
|
3357
|
+
* Рендер картинки снизу в вертикальной ориентации (дефолт сверху).
|
|
3358
|
+
* @default undefined */
|
|
3097
3359
|
imgPortraitPositionBottom?: boolean;
|
|
3098
3360
|
/**
|
|
3099
3361
|
* Пути картинок в зависимости от ориентации окна диалога.
|
|
3100
|
-
*
|
|
3101
|
-
*/
|
|
3362
|
+
* @default {} */
|
|
3102
3363
|
imgSrc?: {
|
|
3103
3364
|
portrait?: string;
|
|
3104
3365
|
landscape?: string;
|
|
3105
3366
|
};
|
|
3106
|
-
/**
|
|
3367
|
+
/**
|
|
3368
|
+
* Cоотношение сторон картинок.
|
|
3369
|
+
*
|
|
3370
|
+
* Дефолтное соотношение сторон: 3:1 portrait, 5:7 landscape.
|
|
3371
|
+
* @default {} */
|
|
3372
|
+
imgAspectRatio?: {
|
|
3373
|
+
portrait?: '1:1' | '3:1' | '5:2';
|
|
3374
|
+
landscape?: '1:1' | '4:5' | '5:7';
|
|
3375
|
+
};
|
|
3376
|
+
/**
|
|
3377
|
+
* Использование скелетонов вместо реального контента.
|
|
3378
|
+
* @default undefined */
|
|
3107
3379
|
loading?: boolean;
|
|
3108
|
-
/**
|
|
3380
|
+
/**
|
|
3381
|
+
* Применение стилей размытия для оверлея.
|
|
3382
|
+
* @default undefined */
|
|
3109
3383
|
overlayBlur?: boolean;
|
|
3110
|
-
/**
|
|
3384
|
+
/**
|
|
3385
|
+
* Оверлей не используется.
|
|
3386
|
+
* @default undefined */
|
|
3111
3387
|
overlayDisabled?: boolean;
|
|
3112
|
-
/**
|
|
3388
|
+
/**
|
|
3389
|
+
* Кастомные цвета.
|
|
3390
|
+
* @default {} */
|
|
3113
3391
|
palette?: {
|
|
3114
3392
|
color?: Color;
|
|
3115
3393
|
backgroundColor?: Color;
|
|
3116
3394
|
shadowColor?: Color;
|
|
3117
3395
|
overlayBackgroundColor?: Color;
|
|
3118
3396
|
};
|
|
3119
|
-
/**
|
|
3397
|
+
/**
|
|
3398
|
+
* Использование индикатора прогресса.
|
|
3399
|
+
* @default undefined */
|
|
3400
|
+
progressLine?: boolean;
|
|
3401
|
+
/**
|
|
3402
|
+
* Пропсы для индикатора прогресса.
|
|
3403
|
+
* @default {} */
|
|
3404
|
+
progressLineProps?: Partial<ProgressLineProps>;
|
|
3405
|
+
/**
|
|
3406
|
+
* Отключить эффект фейдинга при скролле контента.
|
|
3407
|
+
* @default undefined */
|
|
3120
3408
|
scrollFadingDisabled?: boolean;
|
|
3121
|
-
/**
|
|
3122
|
-
|
|
3123
|
-
|
|
3409
|
+
/**
|
|
3410
|
+
* Пропсы для скелетонов.
|
|
3411
|
+
* @default {} */
|
|
3412
|
+
skeletonProps?: Partial<SkeletonProps>;
|
|
3413
|
+
/**
|
|
3414
|
+
* Подзаголовок диалога.
|
|
3415
|
+
* @default undefined */
|
|
3124
3416
|
subtitle?: React.ReactNode;
|
|
3125
|
-
/**
|
|
3126
|
-
|
|
3127
|
-
|
|
3417
|
+
/**
|
|
3418
|
+
* Пропсы для типографики подзаголовка.
|
|
3419
|
+
* @default {} */
|
|
3420
|
+
subtitleProps?: Partial<TextProps>;
|
|
3421
|
+
/**
|
|
3422
|
+
* Заголовок диалога.
|
|
3423
|
+
* @default undefined */
|
|
3128
3424
|
title?: React.ReactNode;
|
|
3129
|
-
/**
|
|
3130
|
-
|
|
3131
|
-
|
|
3425
|
+
/**
|
|
3426
|
+
* Пропсы типографики для заголовка.
|
|
3427
|
+
* @default {} */
|
|
3428
|
+
titleProps?: Partial<TextProps>;
|
|
3429
|
+
/**
|
|
3430
|
+
* z-index оверлея или рутового элемента, если оверлей не используется.
|
|
3431
|
+
* @default undefined */
|
|
3132
3432
|
zIndex?: number;
|
|
3133
3433
|
}
|
|
3134
3434
|
|