@ozen-ui/kit 0.48.0 → 0.49.0
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/__inner__/cjs/components/Alert/Alert.css +11 -12
- package/__inner__/cjs/components/Alert/Alert.d.ts +13 -39
- package/__inner__/cjs/components/Alert/Alert.js +14 -14
- package/__inner__/cjs/components/Alert/constants.d.ts +1 -1
- package/__inner__/cjs/components/Alert/constants.js +2 -2
- package/__inner__/cjs/components/Alert/index.d.ts +1 -0
- package/__inner__/cjs/components/Alert/index.js +1 -0
- package/__inner__/cjs/components/Alert/types.d.ts +46 -0
- package/__inner__/cjs/components/Alert/types.js +10 -0
- package/__inner__/cjs/components/InputNumber/utils.d.ts +1 -1
- package/__inner__/cjs/components/List/components/ListItemText/ListItemText.d.ts +5 -5
- package/__inner__/cjs/components/Slider/utils/getPositionOnRail.d.ts +1 -1
- package/__inner__/cjs/components/Snackbar/components/SnackbarItem/SnackbarItem.js +1 -1
- package/__inner__/cjs/components/Tooltip/Tooltip.css +5 -6
- package/__inner__/cjs/components/Tooltip/Tooltip.js +6 -2
- package/__inner__/cjs/components/Tooltip/constants.d.ts +1 -1
- package/__inner__/cjs/components/Tooltip/constants.js +2 -2
- package/__inner__/cjs/components/Tooltip/types.d.ts +11 -3
- package/__inner__/esm/components/Alert/Alert.css +11 -12
- package/__inner__/esm/components/Alert/Alert.d.ts +13 -39
- package/__inner__/esm/components/Alert/Alert.js +14 -14
- package/__inner__/esm/components/Alert/constants.d.ts +1 -1
- package/__inner__/esm/components/Alert/constants.js +1 -1
- package/__inner__/esm/components/Alert/index.d.ts +1 -0
- package/__inner__/esm/components/Alert/index.js +1 -0
- package/__inner__/esm/components/Alert/types.d.ts +46 -0
- package/__inner__/esm/components/Alert/types.js +7 -0
- package/__inner__/esm/components/InputNumber/utils.d.ts +1 -1
- package/__inner__/esm/components/List/components/ListItemText/ListItemText.d.ts +5 -5
- package/__inner__/esm/components/Slider/utils/getPositionOnRail.d.ts +1 -1
- package/__inner__/esm/components/Snackbar/components/SnackbarItem/SnackbarItem.js +1 -1
- package/__inner__/esm/components/Tooltip/Tooltip.css +5 -6
- package/__inner__/esm/components/Tooltip/Tooltip.js +7 -3
- package/__inner__/esm/components/Tooltip/constants.d.ts +1 -1
- package/__inner__/esm/components/Tooltip/constants.js +1 -1
- package/__inner__/esm/components/Tooltip/types.d.ts +11 -3
- package/package.json +4 -4
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
.Alert {
|
|
3
3
|
--alert-status-line-width: 8px;
|
|
4
4
|
--alert-status-line-gutter: var(--control-padding-xs);
|
|
5
|
+
--alert-title-text-color: var(--color-content-primary);
|
|
6
|
+
--alert-body-text-color: var(--color-content-secondary);
|
|
7
|
+
--alert-icon-color: var(--color-content-primary);
|
|
8
|
+
--alert-close-button-color: var(--color-content-primary);
|
|
5
9
|
display: flex;
|
|
6
10
|
overflow: auto;
|
|
7
11
|
inline-size: 100%;
|
|
@@ -22,18 +26,13 @@
|
|
|
22
26
|
|
|
23
27
|
text-transform: var(--typography-text-xs-text_transform, none);
|
|
24
28
|
}
|
|
25
|
-
.
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
--alert-title-text-color: var(--color-content-primary-inverse);
|
|
33
|
-
--alert-body-text-color: var(--color-content-primary-inverse);
|
|
34
|
-
--alert-icon-color: var(--color-content-primary-inverse);
|
|
35
|
-
--alert-close-button-color: var(--color-content-primary-inverse);
|
|
36
|
-
}
|
|
29
|
+
.Alert_color_dark,
|
|
30
|
+
.Alert_inverse {
|
|
31
|
+
--alert-title-text-color: var(--color-content-primary-inverse);
|
|
32
|
+
--alert-body-text-color: var(--color-content-primary-inverse);
|
|
33
|
+
--alert-icon-color: var(--color-content-primary-inverse);
|
|
34
|
+
--alert-close-button-color: var(--color-content-primary-inverse);
|
|
35
|
+
}
|
|
37
36
|
.Alert_status_info {
|
|
38
37
|
--alert-icon-color: var(--color-content-info);
|
|
39
38
|
--alert-status-line-color: var(--color-background-info);
|
|
@@ -1,43 +1,17 @@
|
|
|
1
1
|
import './Alert.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type { HTMLAttributes, ReactElement, ReactNode, MouseEvent } from 'react';
|
|
4
3
|
import type { ButtonProps } from '../ButtonNext';
|
|
5
4
|
export declare const cnAlert: import("@bem-react/classname").ClassNameFormatter;
|
|
6
|
-
export declare const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
color?: AlertColorVariant;
|
|
20
|
-
/**
|
|
21
|
-
* Если {true} отображает иконку со статусом
|
|
22
|
-
* @default true
|
|
23
|
-
*/
|
|
24
|
-
showIcon?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Функция обратного вызова при нажатии на кнопку закрытия
|
|
27
|
-
*/
|
|
28
|
-
onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
29
|
-
/**
|
|
30
|
-
* Основное содержимое элемента
|
|
31
|
-
* @default null
|
|
32
|
-
* */
|
|
33
|
-
children?: ReactNode;
|
|
34
|
-
/** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
|
|
35
|
-
action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
|
|
36
|
-
/** Дополнительные CSS-классы */
|
|
37
|
-
className?: string;
|
|
38
|
-
/** Текст для кнопки закрытия компонента */
|
|
39
|
-
closeText?: string;
|
|
40
|
-
};
|
|
41
|
-
export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
|
|
42
|
-
export declare const Alert: React.ForwardRefExoticComponent<AlertBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
-
export {};
|
|
5
|
+
export declare const Alert: React.ForwardRefExoticComponent<{
|
|
6
|
+
title: React.ReactNode;
|
|
7
|
+
status?: "error" | "info" | "success" | "warning" | undefined;
|
|
8
|
+
inverse?: boolean | undefined;
|
|
9
|
+
showIcon?: boolean | undefined;
|
|
10
|
+
onClose?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
action?: React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>> | (({ size, className, }: Pick<ButtonProps, "className" | "size">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
|
|
13
|
+
className?: string | undefined;
|
|
14
|
+
closeText?: string | undefined;
|
|
15
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> & {
|
|
16
|
+
color?: "dark" | "light" | undefined;
|
|
17
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,36 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Alert = exports.
|
|
3
|
+
exports.Alert = exports.cnAlert = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
require("./Alert.css");
|
|
6
6
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
7
7
|
var icons_1 = require("@ozen-ui/icons");
|
|
8
|
+
var logger_1 = require("@ozen-ui/logger");
|
|
8
9
|
var useThemeProps_1 = require("../../hooks/useThemeProps");
|
|
9
10
|
var classname_1 = require("../../utils/classname");
|
|
10
11
|
var IconButtonNext_1 = require("../IconButtonNext");
|
|
11
12
|
var Paper_1 = require("../Paper");
|
|
12
13
|
var constants_1 = require("./constants");
|
|
13
14
|
exports.cnAlert = (0, classname_1.cn)('Alert');
|
|
14
|
-
exports.alertStatusVariant = [
|
|
15
|
-
'success',
|
|
16
|
-
'error',
|
|
17
|
-
'warning',
|
|
18
|
-
'info',
|
|
19
|
-
];
|
|
20
|
-
exports.alertColorVariant = ['light', 'dark'];
|
|
21
15
|
var matchStatusToIcon = {
|
|
22
|
-
neutral: react_1.default.createElement(icons_1.InfoCircleFilledIcon, { size: "s" }),
|
|
23
16
|
info: react_1.default.createElement(icons_1.InfoCircleFilledIcon, { size: "s" }),
|
|
24
|
-
|
|
17
|
+
neutral: react_1.default.createElement(icons_1.InfoCircleFilledIcon, { size: "s" }),
|
|
25
18
|
success: react_1.default.createElement(icons_1.CheckCircleFilledIcon, { size: "s" }),
|
|
26
19
|
error: react_1.default.createElement(icons_1.WarningCircleFilledIcon, { size: "s" }),
|
|
20
|
+
warning: react_1.default.createElement(icons_1.WarningTriangleFilledIcon, { size: "s" }),
|
|
27
21
|
};
|
|
28
22
|
exports.Alert = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
29
23
|
var props = (0, useThemeProps_1.useThemeProps)({
|
|
30
24
|
props: inProps,
|
|
31
25
|
name: 'Alert',
|
|
32
26
|
});
|
|
33
|
-
var _a = props.status, status = _a === void 0 ? constants_1.ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? constants_1.ALERT_DEFAULT_SHOW_ICON : _b, _c = props.
|
|
27
|
+
var _a = props.status, status = _a === void 0 ? constants_1.ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? constants_1.ALERT_DEFAULT_SHOW_ICON : _b, _c = props.inverse, inverse = _c === void 0 ? constants_1.ALERT_DEFAULT_INVERSE : _c, color = props.color, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = tslib_1.__rest(props, ["status", "showIcon", "inverse", "color", "closeText", "children", "action", "onClose", "title", "className"]);
|
|
28
|
+
if (process.env.NODE_ENV !== 'production' && color) {
|
|
29
|
+
(0, logger_1.deprecate)('Свойство «color» устарело. Для замены используйте «inverse».');
|
|
30
|
+
}
|
|
34
31
|
var action = (0, react_1.useMemo)(function () {
|
|
35
32
|
var actionProps = {
|
|
36
33
|
size: '2xs',
|
|
@@ -44,9 +41,12 @@ exports.Alert = (0, react_1.forwardRef)(function (inProps, ref) {
|
|
|
44
41
|
}
|
|
45
42
|
return react_1.default.cloneElement(actionProp, actionProps);
|
|
46
43
|
}, [actionProp]);
|
|
47
|
-
return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "l", shadow: "m", role: "alert", background: color === '
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
return (react_1.default.createElement(Paper_1.Paper, tslib_1.__assign({ radius: "l", shadow: "m", role: "alert", background: "main" }, (color === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), other, { className: (0, exports.cnAlert)({
|
|
45
|
+
color: color,
|
|
46
|
+
status: status,
|
|
47
|
+
inverse: inverse,
|
|
48
|
+
hasCloseButton: !!onClose,
|
|
49
|
+
}, [className]), ref: ref }),
|
|
50
50
|
showIcon && (react_1.default.createElement("div", { className: (0, exports.cnAlert)('Icon') }, matchStatusToIcon[status])),
|
|
51
51
|
react_1.default.createElement("div", { className: (0, exports.cnAlert)('Content') },
|
|
52
52
|
react_1.default.createElement("div", { className: (0, exports.cnAlert)('Title') }, title),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.ALERT_DEFAULT_INVERSE = exports.ALERT_DEFAULT_SHOW_ICON = exports.ALERT_DEFAULT_STATUS = void 0;
|
|
4
4
|
exports.ALERT_DEFAULT_STATUS = 'info';
|
|
5
5
|
exports.ALERT_DEFAULT_SHOW_ICON = true;
|
|
6
|
-
exports.
|
|
6
|
+
exports.ALERT_DEFAULT_INVERSE = false;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
|
|
2
|
+
import type { ButtonProps } from '../ButtonNext';
|
|
3
|
+
export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
|
|
4
|
+
export declare const alertColorVariant: readonly ["light", "dark"];
|
|
5
|
+
export type AlertStatusVariant = (typeof alertStatusVariant)[number];
|
|
6
|
+
export type AlertColorVariant = (typeof alertColorVariant)[number];
|
|
7
|
+
type AlertPropsDeprecated = {
|
|
8
|
+
/**
|
|
9
|
+
* Цветовая палитра сообщения
|
|
10
|
+
* @deprecated Используйте на замену свойство «inverse»
|
|
11
|
+
* */
|
|
12
|
+
color?: AlertColorVariant;
|
|
13
|
+
};
|
|
14
|
+
type AlertBaseProps = {
|
|
15
|
+
/** Заголовок сообщения */
|
|
16
|
+
title: ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Статус сообщения
|
|
19
|
+
* @default info
|
|
20
|
+
*/
|
|
21
|
+
status?: AlertStatusVariant;
|
|
22
|
+
/** Если {true} инвертирует основные цвета компонента */
|
|
23
|
+
inverse?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Если {true} отображает иконку со статусом
|
|
26
|
+
* @default true
|
|
27
|
+
*/
|
|
28
|
+
showIcon?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Функция обратного вызова при нажатии на кнопку закрытия
|
|
31
|
+
*/
|
|
32
|
+
onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
33
|
+
/**
|
|
34
|
+
* Основное содержимое элемента
|
|
35
|
+
* @default null
|
|
36
|
+
* */
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
/** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
|
|
39
|
+
action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
|
|
40
|
+
/** Дополнительные CSS-классы */
|
|
41
|
+
className?: string;
|
|
42
|
+
/** Текст для кнопки закрытия компонента */
|
|
43
|
+
closeText?: string;
|
|
44
|
+
};
|
|
45
|
+
export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> & AlertPropsDeprecated;
|
|
46
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.alertColorVariant = exports.alertStatusVariant = void 0;
|
|
4
|
+
exports.alertStatusVariant = [
|
|
5
|
+
'success',
|
|
6
|
+
'error',
|
|
7
|
+
'warning',
|
|
8
|
+
'info',
|
|
9
|
+
];
|
|
10
|
+
exports.alertColorVariant = ['light', 'dark'];
|
|
@@ -3,7 +3,7 @@ import type { InputNumberValue, InputNumberCountDirection } from './types';
|
|
|
3
3
|
export declare const isValidValue: (value?: InputNumberValue) => boolean;
|
|
4
4
|
export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
|
|
5
5
|
export declare const getValue: ({ value, step, min, max, countDirection, }: {
|
|
6
|
-
value?: InputNumberValue
|
|
6
|
+
value?: InputNumberValue;
|
|
7
7
|
countDirection: InputNumberCountDirection;
|
|
8
8
|
min: number;
|
|
9
9
|
max: number;
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import './ListItemText.css';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { HTMLAttributes } from 'react';
|
|
4
|
-
import type { TypographyProps } from '../../../Typography';
|
|
4
|
+
import type { TypographyProps, TypographyBaseProps } from '../../../Typography';
|
|
5
5
|
export type ListItemTextProps = {
|
|
6
6
|
children?: never;
|
|
7
7
|
/** Основной текст */
|
|
8
|
-
primary:
|
|
8
|
+
primary: TypographyBaseProps['children'];
|
|
9
9
|
/** Свойства компонента Typography для текста primary */
|
|
10
10
|
primaryTypographyProps?: TypographyProps<'span'>;
|
|
11
11
|
/** Второстепенный текст */
|
|
12
|
-
secondary?:
|
|
12
|
+
secondary?: TypographyBaseProps['children'];
|
|
13
13
|
/** Свойства компонента Typography для текста secondary */
|
|
14
14
|
secondaryTypographyProps?: TypographyProps<'span'>;
|
|
15
15
|
} & HTMLAttributes<HTMLDivElement>;
|
|
16
16
|
export declare const ListItemText: React.ForwardRefExoticComponent<{
|
|
17
17
|
children?: undefined;
|
|
18
18
|
/** Основной текст */
|
|
19
|
-
primary:
|
|
19
|
+
primary: TypographyBaseProps['children'];
|
|
20
20
|
/** Свойства компонента Typography для текста primary */
|
|
21
21
|
primaryTypographyProps?: TypographyProps<"span"> | undefined;
|
|
22
22
|
/** Второстепенный текст */
|
|
23
|
-
secondary?:
|
|
23
|
+
secondary?: TypographyBaseProps['children'];
|
|
24
24
|
/** Свойства компонента Typography для текста secondary */
|
|
25
25
|
secondaryTypographyProps?: TypographyProps<"span"> | undefined;
|
|
26
26
|
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -89,6 +89,6 @@ exports.SnackbarItem = (0, react_1.forwardRef)(function (_a, ref) {
|
|
|
89
89
|
}, className: (0, exports.cnSnackbarItem)({
|
|
90
90
|
anchorHorizontal: horizontal,
|
|
91
91
|
anchorVertical: vertical,
|
|
92
|
-
}) }, renderContent() || (react_1.default.createElement(Alert_1.Alert, {
|
|
92
|
+
}) }, renderContent() || (react_1.default.createElement(Alert_1.Alert, { title: title, status: status, onClose: handleClose, inverse: true }, description))))));
|
|
93
93
|
});
|
|
94
94
|
exports.SnackbarItem.displayName = 'SnackbarItem';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* stylelint-disable */
|
|
2
2
|
.Tooltip {
|
|
3
3
|
max-inline-size: 300px;
|
|
4
|
+
color: var(--color-content-primary);
|
|
4
5
|
}
|
|
5
6
|
.Tooltip_size_xs {
|
|
6
7
|
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
@@ -20,9 +21,7 @@
|
|
|
20
21
|
|
|
21
22
|
text-transform: var(--typography-text-s-text_transform, none);
|
|
22
23
|
}
|
|
23
|
-
.
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
color: var(--color-content-primary-inverse);
|
|
28
|
-
}
|
|
24
|
+
.Tooltip_variant_dark,
|
|
25
|
+
.Tooltip_inverse {
|
|
26
|
+
color: var(--color-content-primary-inverse);
|
|
27
|
+
}
|
|
@@ -4,6 +4,7 @@ exports.Tooltip = exports.cnTooltip = void 0;
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
require("./Tooltip.css");
|
|
6
6
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
7
|
+
var logger_1 = require("@ozen-ui/logger");
|
|
7
8
|
var useControlled_1 = require("../../hooks/useControlled");
|
|
8
9
|
var useDebounceCallback_1 = require("../../hooks/useDebounceCallback");
|
|
9
10
|
var useMultiRef_1 = require("../../hooks/useMultiRef");
|
|
@@ -15,7 +16,10 @@ var constants_1 = require("./constants");
|
|
|
15
16
|
exports.cnTooltip = (0, classname_1.cn)('Tooltip');
|
|
16
17
|
exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
|
|
17
18
|
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Tooltip' });
|
|
18
|
-
var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.
|
|
19
|
+
var _a = props.trigger, trigger = _a === void 0 ? constants_1.TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? constants_1.TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_INVERSE : _j, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
|
|
20
|
+
if (process.env.NODE_ENV !== 'production' && variant) {
|
|
21
|
+
(0, logger_1.deprecate)('Свойство «variant» устарело. Для замены используйте «inverse».');
|
|
22
|
+
}
|
|
19
23
|
var _l = tslib_1.__read((0, react_1.useState)(), 2), delay = _l[0], setDelay = _l[1];
|
|
20
24
|
var _m = tslib_1.__read((0, react_1.useState)(), 2), hasFocus = _m[0], setHasFocus = _m[1];
|
|
21
25
|
var _o = tslib_1.__read((0, react_1.useState)(), 2), hasHover = _o[0], setHasHover = _o[1];
|
|
@@ -115,7 +119,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
|
|
|
115
119
|
]);
|
|
116
120
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
117
121
|
react_1.default.cloneElement(resolveChildren, composeChildrenProps),
|
|
118
|
-
react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === '
|
|
122
|
+
react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
|
|
119
123
|
size: size,
|
|
120
124
|
}, disableEnforceFocus: true, disableReturnFocus: true }), label)));
|
|
121
125
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare const TOOLTIP_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
|
|
2
2
|
export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
|
|
3
3
|
export declare const TOOLTIP_DEFAULT_SIZE = "s";
|
|
4
|
-
export declare const
|
|
4
|
+
export declare const TOOLTIP_DEFAULT_INVERSE = true;
|
|
5
5
|
export declare const TOOLTIP_DEFAULT_OFFSET: number[];
|
|
6
6
|
export declare const TOOLTIP_DEFAULT_DELAY_ENTER = 100;
|
|
7
7
|
export declare const TOOLTIP_DEFAULT_DELAY_LEAVE = 100;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TOOLTIP_DEFAULT_DISABLED = exports.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = exports.TOOLTIP_DEFAULT_ARROW = exports.TOOLTIP_DEFAULT_DELAY_LEAVE = exports.TOOLTIP_DEFAULT_DELAY_ENTER = exports.TOOLTIP_DEFAULT_OFFSET = exports.
|
|
3
|
+
exports.TOOLTIP_DEFAULT_DISABLED = exports.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN = exports.TOOLTIP_DEFAULT_ARROW = exports.TOOLTIP_DEFAULT_DELAY_LEAVE = exports.TOOLTIP_DEFAULT_DELAY_ENTER = exports.TOOLTIP_DEFAULT_OFFSET = exports.TOOLTIP_DEFAULT_INVERSE = exports.TOOLTIP_DEFAULT_SIZE = exports.TOOLTIP_DEFAULT_TRIGGER = exports.TOOLTIP_DEFAULT_TAG = void 0;
|
|
4
4
|
var Paper_1 = require("../Paper");
|
|
5
5
|
exports.TOOLTIP_DEFAULT_TAG = Paper_1.Paper;
|
|
6
6
|
exports.TOOLTIP_DEFAULT_TRIGGER = 'hover';
|
|
7
7
|
exports.TOOLTIP_DEFAULT_SIZE = 's';
|
|
8
|
-
exports.
|
|
8
|
+
exports.TOOLTIP_DEFAULT_INVERSE = true;
|
|
9
9
|
exports.TOOLTIP_DEFAULT_OFFSET = [0, 8];
|
|
10
10
|
exports.TOOLTIP_DEFAULT_DELAY_ENTER = 100;
|
|
11
11
|
exports.TOOLTIP_DEFAULT_DELAY_LEAVE = 100;
|
|
@@ -8,6 +8,13 @@ export declare const tooltipVariant: readonly ["light", "dark"];
|
|
|
8
8
|
export type TooltipVariant = (typeof tooltipVariant)[number];
|
|
9
9
|
export declare const tooltipTriggerVariant: readonly ["hover", "focus", "click", "hover&focus"];
|
|
10
10
|
export type TooltipTriggerVariant = (typeof tooltipTriggerVariant)[number];
|
|
11
|
+
type TooltipPropsDeprecated = {
|
|
12
|
+
/**
|
|
13
|
+
* Вариант представления
|
|
14
|
+
* @deprecated Используйте на замену свойство «inverse»
|
|
15
|
+
* */
|
|
16
|
+
variant?: TooltipVariant;
|
|
17
|
+
};
|
|
11
18
|
export type TooltipBaseProps = {
|
|
12
19
|
/** Признак по которому тултип будет представлен */
|
|
13
20
|
open?: boolean;
|
|
@@ -19,8 +26,8 @@ export type TooltipBaseProps = {
|
|
|
19
26
|
label?: ReactNode;
|
|
20
27
|
/** Размер тултипа */
|
|
21
28
|
size?: TooltipSizeVariant;
|
|
22
|
-
/**
|
|
23
|
-
|
|
29
|
+
/** Если {true} инвертирует основные цвета компонента */
|
|
30
|
+
inverse?: boolean;
|
|
24
31
|
/** Если {true} отключает отображение тултипа */
|
|
25
32
|
disabled?: boolean;
|
|
26
33
|
/** События вызова тултипа */
|
|
@@ -41,6 +48,7 @@ export type TooltipBaseProps = {
|
|
|
41
48
|
'data-testid'?: string;
|
|
42
49
|
/** Дополнительные CSS-классы */
|
|
43
50
|
className?: string;
|
|
44
|
-
} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
|
|
51
|
+
} & TooltipPropsDeprecated & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
|
|
45
52
|
export type TooltipRef = ComponentRef<typeof TOOLTIP_DEFAULT_TAG>;
|
|
46
53
|
export type TooltipProps<As extends ElementType = typeof TOOLTIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<TooltipBaseProps, As>;
|
|
54
|
+
export {};
|
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
.Alert {
|
|
3
3
|
--alert-status-line-width: 8px;
|
|
4
4
|
--alert-status-line-gutter: var(--control-padding-xs);
|
|
5
|
+
--alert-title-text-color: var(--color-content-primary);
|
|
6
|
+
--alert-body-text-color: var(--color-content-secondary);
|
|
7
|
+
--alert-icon-color: var(--color-content-primary);
|
|
8
|
+
--alert-close-button-color: var(--color-content-primary);
|
|
5
9
|
display: flex;
|
|
6
10
|
overflow: auto;
|
|
7
11
|
inline-size: 100%;
|
|
@@ -22,18 +26,13 @@
|
|
|
22
26
|
|
|
23
27
|
text-transform: var(--typography-text-xs-text_transform, none);
|
|
24
28
|
}
|
|
25
|
-
.
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
--alert-title-text-color: var(--color-content-primary-inverse);
|
|
33
|
-
--alert-body-text-color: var(--color-content-primary-inverse);
|
|
34
|
-
--alert-icon-color: var(--color-content-primary-inverse);
|
|
35
|
-
--alert-close-button-color: var(--color-content-primary-inverse);
|
|
36
|
-
}
|
|
29
|
+
.Alert_color_dark,
|
|
30
|
+
.Alert_inverse {
|
|
31
|
+
--alert-title-text-color: var(--color-content-primary-inverse);
|
|
32
|
+
--alert-body-text-color: var(--color-content-primary-inverse);
|
|
33
|
+
--alert-icon-color: var(--color-content-primary-inverse);
|
|
34
|
+
--alert-close-button-color: var(--color-content-primary-inverse);
|
|
35
|
+
}
|
|
37
36
|
.Alert_status_info {
|
|
38
37
|
--alert-icon-color: var(--color-content-info);
|
|
39
38
|
--alert-status-line-color: var(--color-background-info);
|
|
@@ -1,43 +1,17 @@
|
|
|
1
1
|
import './Alert.css';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import type { HTMLAttributes, ReactElement, ReactNode, MouseEvent } from 'react';
|
|
4
3
|
import type { ButtonProps } from '../ButtonNext';
|
|
5
4
|
export declare const cnAlert: import("@bem-react/classname").ClassNameFormatter;
|
|
6
|
-
export declare const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
color?: AlertColorVariant;
|
|
20
|
-
/**
|
|
21
|
-
* Если {true} отображает иконку со статусом
|
|
22
|
-
* @default true
|
|
23
|
-
*/
|
|
24
|
-
showIcon?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Функция обратного вызова при нажатии на кнопку закрытия
|
|
27
|
-
*/
|
|
28
|
-
onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
29
|
-
/**
|
|
30
|
-
* Основное содержимое элемента
|
|
31
|
-
* @default null
|
|
32
|
-
* */
|
|
33
|
-
children?: ReactNode;
|
|
34
|
-
/** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
|
|
35
|
-
action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
|
|
36
|
-
/** Дополнительные CSS-классы */
|
|
37
|
-
className?: string;
|
|
38
|
-
/** Текст для кнопки закрытия компонента */
|
|
39
|
-
closeText?: string;
|
|
40
|
-
};
|
|
41
|
-
export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
|
|
42
|
-
export declare const Alert: React.ForwardRefExoticComponent<AlertBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
-
export {};
|
|
5
|
+
export declare const Alert: React.ForwardRefExoticComponent<{
|
|
6
|
+
title: React.ReactNode;
|
|
7
|
+
status?: "error" | "info" | "success" | "warning" | undefined;
|
|
8
|
+
inverse?: boolean | undefined;
|
|
9
|
+
showIcon?: boolean | undefined;
|
|
10
|
+
onClose?: ((e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
action?: React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>> | (({ size, className, }: Pick<ButtonProps, "className" | "size">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
|
|
13
|
+
className?: string | undefined;
|
|
14
|
+
closeText?: string | undefined;
|
|
15
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "color"> & {
|
|
16
|
+
color?: "dark" | "light" | undefined;
|
|
17
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -2,32 +2,29 @@ import { __assign, __rest } from "tslib";
|
|
|
2
2
|
import './Alert.css';
|
|
3
3
|
import React, { forwardRef, useMemo } from 'react';
|
|
4
4
|
import { CrossIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, WarningTriangleFilledIcon, WarningCircleFilledIcon, } from '@ozen-ui/icons';
|
|
5
|
+
import { deprecate } from '@ozen-ui/logger';
|
|
5
6
|
import { useThemeProps } from '../../hooks/useThemeProps';
|
|
6
7
|
import { cn } from '../../utils/classname';
|
|
7
8
|
import { IconButton } from '../IconButtonNext';
|
|
8
9
|
import { Paper } from '../Paper';
|
|
9
|
-
import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON,
|
|
10
|
+
import { ALERT_DEFAULT_STATUS, ALERT_DEFAULT_SHOW_ICON, ALERT_DEFAULT_INVERSE, } from './constants';
|
|
10
11
|
export var cnAlert = cn('Alert');
|
|
11
|
-
export var alertStatusVariant = [
|
|
12
|
-
'success',
|
|
13
|
-
'error',
|
|
14
|
-
'warning',
|
|
15
|
-
'info',
|
|
16
|
-
];
|
|
17
|
-
export var alertColorVariant = ['light', 'dark'];
|
|
18
12
|
var matchStatusToIcon = {
|
|
19
|
-
neutral: React.createElement(InfoCircleFilledIcon, { size: "s" }),
|
|
20
13
|
info: React.createElement(InfoCircleFilledIcon, { size: "s" }),
|
|
21
|
-
|
|
14
|
+
neutral: React.createElement(InfoCircleFilledIcon, { size: "s" }),
|
|
22
15
|
success: React.createElement(CheckCircleFilledIcon, { size: "s" }),
|
|
23
16
|
error: React.createElement(WarningCircleFilledIcon, { size: "s" }),
|
|
17
|
+
warning: React.createElement(WarningTriangleFilledIcon, { size: "s" }),
|
|
24
18
|
};
|
|
25
19
|
export var Alert = forwardRef(function (inProps, ref) {
|
|
26
20
|
var props = useThemeProps({
|
|
27
21
|
props: inProps,
|
|
28
22
|
name: 'Alert',
|
|
29
23
|
});
|
|
30
|
-
var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.
|
|
24
|
+
var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.inverse, inverse = _c === void 0 ? ALERT_DEFAULT_INVERSE : _c, color = props.color, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = __rest(props, ["status", "showIcon", "inverse", "color", "closeText", "children", "action", "onClose", "title", "className"]);
|
|
25
|
+
if (process.env.NODE_ENV !== 'production' && color) {
|
|
26
|
+
deprecate('Свойство «color» устарело. Для замены используйте «inverse».');
|
|
27
|
+
}
|
|
31
28
|
var action = useMemo(function () {
|
|
32
29
|
var actionProps = {
|
|
33
30
|
size: '2xs',
|
|
@@ -41,9 +38,12 @@ export var Alert = forwardRef(function (inProps, ref) {
|
|
|
41
38
|
}
|
|
42
39
|
return React.cloneElement(actionProp, actionProps);
|
|
43
40
|
}, [actionProp]);
|
|
44
|
-
return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", role: "alert", background: color === '
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
return (React.createElement(Paper, __assign({ radius: "l", shadow: "m", role: "alert", background: "main" }, (color === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), other, { className: cnAlert({
|
|
42
|
+
color: color,
|
|
43
|
+
status: status,
|
|
44
|
+
inverse: inverse,
|
|
45
|
+
hasCloseButton: !!onClose,
|
|
46
|
+
}, [className]), ref: ref }),
|
|
47
47
|
showIcon && (React.createElement("div", { className: cnAlert('Icon') }, matchStatusToIcon[status])),
|
|
48
48
|
React.createElement("div", { className: cnAlert('Content') },
|
|
49
49
|
React.createElement("div", { className: cnAlert('Title') }, title),
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
|
|
2
|
+
import type { ButtonProps } from '../ButtonNext';
|
|
3
|
+
export declare const alertStatusVariant: readonly ["success", "error", "warning", "info"];
|
|
4
|
+
export declare const alertColorVariant: readonly ["light", "dark"];
|
|
5
|
+
export type AlertStatusVariant = (typeof alertStatusVariant)[number];
|
|
6
|
+
export type AlertColorVariant = (typeof alertColorVariant)[number];
|
|
7
|
+
type AlertPropsDeprecated = {
|
|
8
|
+
/**
|
|
9
|
+
* Цветовая палитра сообщения
|
|
10
|
+
* @deprecated Используйте на замену свойство «inverse»
|
|
11
|
+
* */
|
|
12
|
+
color?: AlertColorVariant;
|
|
13
|
+
};
|
|
14
|
+
type AlertBaseProps = {
|
|
15
|
+
/** Заголовок сообщения */
|
|
16
|
+
title: ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Статус сообщения
|
|
19
|
+
* @default info
|
|
20
|
+
*/
|
|
21
|
+
status?: AlertStatusVariant;
|
|
22
|
+
/** Если {true} инвертирует основные цвета компонента */
|
|
23
|
+
inverse?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Если {true} отображает иконку со статусом
|
|
26
|
+
* @default true
|
|
27
|
+
*/
|
|
28
|
+
showIcon?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Функция обратного вызова при нажатии на кнопку закрытия
|
|
31
|
+
*/
|
|
32
|
+
onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
33
|
+
/**
|
|
34
|
+
* Основное содержимое элемента
|
|
35
|
+
* @default null
|
|
36
|
+
* */
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
/** Действие: кнопка или ссылка. Свойство принимает React-элемент или рендер-функцию */
|
|
39
|
+
action?: ReactElement<ButtonProps> | (({ size, className, }: Pick<ButtonProps, 'size' | 'className'>) => ReactElement);
|
|
40
|
+
/** Дополнительные CSS-классы */
|
|
41
|
+
className?: string;
|
|
42
|
+
/** Текст для кнопки закрытия компонента */
|
|
43
|
+
closeText?: string;
|
|
44
|
+
};
|
|
45
|
+
export type AlertProps = AlertBaseProps & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> & AlertPropsDeprecated;
|
|
46
|
+
export {};
|
|
@@ -3,7 +3,7 @@ import type { InputNumberValue, InputNumberCountDirection } from './types';
|
|
|
3
3
|
export declare const isValidValue: (value?: InputNumberValue) => boolean;
|
|
4
4
|
export declare const isInputInvalid: (event: KeyboardEvent<HTMLInputElement>) => boolean;
|
|
5
5
|
export declare const getValue: ({ value, step, min, max, countDirection, }: {
|
|
6
|
-
value?: InputNumberValue
|
|
6
|
+
value?: InputNumberValue;
|
|
7
7
|
countDirection: InputNumberCountDirection;
|
|
8
8
|
min: number;
|
|
9
9
|
max: number;
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
import './ListItemText.css';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { HTMLAttributes } from 'react';
|
|
4
|
-
import type { TypographyProps } from '../../../Typography';
|
|
4
|
+
import type { TypographyProps, TypographyBaseProps } from '../../../Typography';
|
|
5
5
|
export type ListItemTextProps = {
|
|
6
6
|
children?: never;
|
|
7
7
|
/** Основной текст */
|
|
8
|
-
primary:
|
|
8
|
+
primary: TypographyBaseProps['children'];
|
|
9
9
|
/** Свойства компонента Typography для текста primary */
|
|
10
10
|
primaryTypographyProps?: TypographyProps<'span'>;
|
|
11
11
|
/** Второстепенный текст */
|
|
12
|
-
secondary?:
|
|
12
|
+
secondary?: TypographyBaseProps['children'];
|
|
13
13
|
/** Свойства компонента Typography для текста secondary */
|
|
14
14
|
secondaryTypographyProps?: TypographyProps<'span'>;
|
|
15
15
|
} & HTMLAttributes<HTMLDivElement>;
|
|
16
16
|
export declare const ListItemText: React.ForwardRefExoticComponent<{
|
|
17
17
|
children?: undefined;
|
|
18
18
|
/** Основной текст */
|
|
19
|
-
primary:
|
|
19
|
+
primary: TypographyBaseProps['children'];
|
|
20
20
|
/** Свойства компонента Typography для текста primary */
|
|
21
21
|
primaryTypographyProps?: TypographyProps<"span"> | undefined;
|
|
22
22
|
/** Второстепенный текст */
|
|
23
|
-
secondary?:
|
|
23
|
+
secondary?: TypographyBaseProps['children'];
|
|
24
24
|
/** Свойства компонента Typography для текста secondary */
|
|
25
25
|
secondaryTypographyProps?: TypographyProps<"span"> | undefined;
|
|
26
26
|
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -86,6 +86,6 @@ export var SnackbarItem = forwardRef(function (_a, ref) {
|
|
|
86
86
|
}, className: cnSnackbarItem({
|
|
87
87
|
anchorHorizontal: horizontal,
|
|
88
88
|
anchorVertical: vertical,
|
|
89
|
-
}) }, renderContent() || (React.createElement(Alert, {
|
|
89
|
+
}) }, renderContent() || (React.createElement(Alert, { title: title, status: status, onClose: handleClose, inverse: true }, description))))));
|
|
90
90
|
});
|
|
91
91
|
SnackbarItem.displayName = 'SnackbarItem';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* stylelint-disable */
|
|
2
2
|
.Tooltip {
|
|
3
3
|
max-inline-size: 300px;
|
|
4
|
+
color: var(--color-content-primary);
|
|
4
5
|
}
|
|
5
6
|
.Tooltip_size_xs {
|
|
6
7
|
padding: var(--spacing-2xs) var(--spacing-xs);
|
|
@@ -20,9 +21,7 @@
|
|
|
20
21
|
|
|
21
22
|
text-transform: var(--typography-text-s-text_transform, none);
|
|
22
23
|
}
|
|
23
|
-
.
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
color: var(--color-content-primary-inverse);
|
|
28
|
-
}
|
|
24
|
+
.Tooltip_variant_dark,
|
|
25
|
+
.Tooltip_inverse {
|
|
26
|
+
color: var(--color-content-primary-inverse);
|
|
27
|
+
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __assign, __read, __rest } from "tslib";
|
|
2
2
|
import './Tooltip.css';
|
|
3
3
|
import React, { useRef, useMemo, useState, useEffect } from 'react';
|
|
4
|
+
import { deprecate } from '@ozen-ui/logger';
|
|
4
5
|
import { useControlled } from '../../hooks/useControlled';
|
|
5
6
|
import { useDebounceCallback } from '../../hooks/useDebounceCallback';
|
|
6
7
|
import { useMultiRef } from '../../hooks/useMultiRef';
|
|
@@ -8,11 +9,14 @@ import { useThemeProps } from '../../hooks/useThemeProps';
|
|
|
8
9
|
import { cn } from '../../utils/classname';
|
|
9
10
|
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
|
|
10
11
|
import { Popover } from '../Popover';
|
|
11
|
-
import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TAG, TOOLTIP_DEFAULT_TRIGGER,
|
|
12
|
+
import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DELAY_LEAVE, TOOLTIP_DEFAULT_DISABLED, TOOLTIP_DEFAULT_INVERSE, TOOLTIP_DEFAULT_OFFSET, TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN, TOOLTIP_DEFAULT_SIZE, TOOLTIP_DEFAULT_TAG, TOOLTIP_DEFAULT_TRIGGER, } from './constants';
|
|
12
13
|
export var cnTooltip = cn('Tooltip');
|
|
13
14
|
export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
|
|
14
15
|
var props = useThemeProps({ props: inProps, name: 'Tooltip' });
|
|
15
|
-
var _a = props.trigger, trigger = _a === void 0 ? TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? TOOLTIP_DEFAULT_SIZE : _b, _c = props.
|
|
16
|
+
var _a = props.trigger, trigger = _a === void 0 ? TOOLTIP_DEFAULT_TRIGGER : _a, _b = props.size, size = _b === void 0 ? TOOLTIP_DEFAULT_SIZE : _b, _c = props.offset, offset = _c === void 0 ? TOOLTIP_DEFAULT_OFFSET : _c, _d = props.delayEnter, delayEnter = _d === void 0 ? TOOLTIP_DEFAULT_DELAY_ENTER : _d, _e = props.delayLeave, delayLeave = _e === void 0 ? TOOLTIP_DEFAULT_DELAY_LEAVE : _e, _f = props.arrow, arrow = _f === void 0 ? TOOLTIP_DEFAULT_ARROW : _f, _g = props.shouldWrapChildren, shouldWrapChildren = _g === void 0 ? TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _g, _h = props.disabled, disabled = _h === void 0 ? TOOLTIP_DEFAULT_DISABLED : _h, _j = props.inverse, inverse = _j === void 0 ? TOOLTIP_DEFAULT_INVERSE : _j, variant = props.variant, children = props.children, label = props.label, openProp = props.open, placement = props.placement, disableInteractive = props.disableInteractive, className = props.className, onOpen = props.onOpen, onClose = props.onClose, _k = props.as, as = _k === void 0 ? TOOLTIP_DEFAULT_TAG : _k, other = __rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
|
|
17
|
+
if (process.env.NODE_ENV !== 'production' && variant) {
|
|
18
|
+
deprecate('Свойство «variant» устарело. Для замены используйте «inverse».');
|
|
19
|
+
}
|
|
16
20
|
var _l = __read(useState(), 2), delay = _l[0], setDelay = _l[1];
|
|
17
21
|
var _m = __read(useState(), 2), hasFocus = _m[0], setHasFocus = _m[1];
|
|
18
22
|
var _o = __read(useState(), 2), hasHover = _o[0], setHasHover = _o[1];
|
|
@@ -112,7 +116,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
|
|
|
112
116
|
]);
|
|
113
117
|
return (React.createElement(React.Fragment, null,
|
|
114
118
|
React.cloneElement(resolveChildren, composeChildrenProps),
|
|
115
|
-
React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: variant === '
|
|
119
|
+
React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
|
|
116
120
|
size: size,
|
|
117
121
|
}, disableEnforceFocus: true, disableReturnFocus: true }), label)));
|
|
118
122
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare const TOOLTIP_DEFAULT_TAG: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../Paper").PaperBaseProps, "div">;
|
|
2
2
|
export declare const TOOLTIP_DEFAULT_TRIGGER = "hover";
|
|
3
3
|
export declare const TOOLTIP_DEFAULT_SIZE = "s";
|
|
4
|
-
export declare const
|
|
4
|
+
export declare const TOOLTIP_DEFAULT_INVERSE = true;
|
|
5
5
|
export declare const TOOLTIP_DEFAULT_OFFSET: number[];
|
|
6
6
|
export declare const TOOLTIP_DEFAULT_DELAY_ENTER = 100;
|
|
7
7
|
export declare const TOOLTIP_DEFAULT_DELAY_LEAVE = 100;
|
|
@@ -2,7 +2,7 @@ import { Paper } from '../Paper';
|
|
|
2
2
|
export var TOOLTIP_DEFAULT_TAG = Paper;
|
|
3
3
|
export var TOOLTIP_DEFAULT_TRIGGER = 'hover';
|
|
4
4
|
export var TOOLTIP_DEFAULT_SIZE = 's';
|
|
5
|
-
export var
|
|
5
|
+
export var TOOLTIP_DEFAULT_INVERSE = true;
|
|
6
6
|
export var TOOLTIP_DEFAULT_OFFSET = [0, 8];
|
|
7
7
|
export var TOOLTIP_DEFAULT_DELAY_ENTER = 100;
|
|
8
8
|
export var TOOLTIP_DEFAULT_DELAY_LEAVE = 100;
|
|
@@ -8,6 +8,13 @@ export declare const tooltipVariant: readonly ["light", "dark"];
|
|
|
8
8
|
export type TooltipVariant = (typeof tooltipVariant)[number];
|
|
9
9
|
export declare const tooltipTriggerVariant: readonly ["hover", "focus", "click", "hover&focus"];
|
|
10
10
|
export type TooltipTriggerVariant = (typeof tooltipTriggerVariant)[number];
|
|
11
|
+
type TooltipPropsDeprecated = {
|
|
12
|
+
/**
|
|
13
|
+
* Вариант представления
|
|
14
|
+
* @deprecated Используйте на замену свойство «inverse»
|
|
15
|
+
* */
|
|
16
|
+
variant?: TooltipVariant;
|
|
17
|
+
};
|
|
11
18
|
export type TooltipBaseProps = {
|
|
12
19
|
/** Признак по которому тултип будет представлен */
|
|
13
20
|
open?: boolean;
|
|
@@ -19,8 +26,8 @@ export type TooltipBaseProps = {
|
|
|
19
26
|
label?: ReactNode;
|
|
20
27
|
/** Размер тултипа */
|
|
21
28
|
size?: TooltipSizeVariant;
|
|
22
|
-
/**
|
|
23
|
-
|
|
29
|
+
/** Если {true} инвертирует основные цвета компонента */
|
|
30
|
+
inverse?: boolean;
|
|
24
31
|
/** Если {true} отключает отображение тултипа */
|
|
25
32
|
disabled?: boolean;
|
|
26
33
|
/** События вызова тултипа */
|
|
@@ -41,6 +48,7 @@ export type TooltipBaseProps = {
|
|
|
41
48
|
'data-testid'?: string;
|
|
42
49
|
/** Дополнительные CSS-классы */
|
|
43
50
|
className?: string;
|
|
44
|
-
} & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
|
|
51
|
+
} & TooltipPropsDeprecated & Pick<PopoverBaseProps, 'offset' | 'placement' | 'arrow' | 'anchorRef' | 'ignoreClickOutsideRefs' | 'disableInteractive' | 'onEnter' | 'onEntered' | 'onExit' | 'onExited' | 'setUpdate'>;
|
|
45
52
|
export type TooltipRef = ComponentRef<typeof TOOLTIP_DEFAULT_TAG>;
|
|
46
53
|
export type TooltipProps<As extends ElementType = typeof TOOLTIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<TooltipBaseProps, As>;
|
|
54
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ozen-ui/kit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.49.0",
|
|
4
4
|
"description": "React component library",
|
|
5
5
|
"files": [
|
|
6
6
|
"*"
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
"react-popper": "^2.3.0",
|
|
29
29
|
"react-transition-group": "^4.4.5",
|
|
30
30
|
"tslib": "^2.6.2",
|
|
31
|
-
"@ozen-ui/fonts": "0.
|
|
32
|
-
"@ozen-ui/icons": "0.
|
|
33
|
-
"@ozen-ui/logger": "0.
|
|
31
|
+
"@ozen-ui/fonts": "0.49.0",
|
|
32
|
+
"@ozen-ui/icons": "0.49.0",
|
|
33
|
+
"@ozen-ui/logger": "0.49.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": ">=17.0.2 <19.0.0",
|