@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.
Files changed (37) hide show
  1. package/__inner__/cjs/components/Alert/Alert.css +11 -12
  2. package/__inner__/cjs/components/Alert/Alert.d.ts +13 -39
  3. package/__inner__/cjs/components/Alert/Alert.js +14 -14
  4. package/__inner__/cjs/components/Alert/constants.d.ts +1 -1
  5. package/__inner__/cjs/components/Alert/constants.js +2 -2
  6. package/__inner__/cjs/components/Alert/index.d.ts +1 -0
  7. package/__inner__/cjs/components/Alert/index.js +1 -0
  8. package/__inner__/cjs/components/Alert/types.d.ts +46 -0
  9. package/__inner__/cjs/components/Alert/types.js +10 -0
  10. package/__inner__/cjs/components/InputNumber/utils.d.ts +1 -1
  11. package/__inner__/cjs/components/List/components/ListItemText/ListItemText.d.ts +5 -5
  12. package/__inner__/cjs/components/Slider/utils/getPositionOnRail.d.ts +1 -1
  13. package/__inner__/cjs/components/Snackbar/components/SnackbarItem/SnackbarItem.js +1 -1
  14. package/__inner__/cjs/components/Tooltip/Tooltip.css +5 -6
  15. package/__inner__/cjs/components/Tooltip/Tooltip.js +6 -2
  16. package/__inner__/cjs/components/Tooltip/constants.d.ts +1 -1
  17. package/__inner__/cjs/components/Tooltip/constants.js +2 -2
  18. package/__inner__/cjs/components/Tooltip/types.d.ts +11 -3
  19. package/__inner__/esm/components/Alert/Alert.css +11 -12
  20. package/__inner__/esm/components/Alert/Alert.d.ts +13 -39
  21. package/__inner__/esm/components/Alert/Alert.js +14 -14
  22. package/__inner__/esm/components/Alert/constants.d.ts +1 -1
  23. package/__inner__/esm/components/Alert/constants.js +1 -1
  24. package/__inner__/esm/components/Alert/index.d.ts +1 -0
  25. package/__inner__/esm/components/Alert/index.js +1 -0
  26. package/__inner__/esm/components/Alert/types.d.ts +46 -0
  27. package/__inner__/esm/components/Alert/types.js +7 -0
  28. package/__inner__/esm/components/InputNumber/utils.d.ts +1 -1
  29. package/__inner__/esm/components/List/components/ListItemText/ListItemText.d.ts +5 -5
  30. package/__inner__/esm/components/Slider/utils/getPositionOnRail.d.ts +1 -1
  31. package/__inner__/esm/components/Snackbar/components/SnackbarItem/SnackbarItem.js +1 -1
  32. package/__inner__/esm/components/Tooltip/Tooltip.css +5 -6
  33. package/__inner__/esm/components/Tooltip/Tooltip.js +7 -3
  34. package/__inner__/esm/components/Tooltip/constants.d.ts +1 -1
  35. package/__inner__/esm/components/Tooltip/constants.js +1 -1
  36. package/__inner__/esm/components/Tooltip/types.d.ts +11 -3
  37. 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
- .Alert_color_light {
26
- --alert-title-text-color: var(--color-content-primary);
27
- --alert-body-text-color: var(--color-content-secondary);
28
- --alert-icon-color: var(--color-content-primary);
29
- --alert-close-button-color: var(--color-content-primary);
30
- }
31
- .Alert_color_dark {
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 alertStatusVariant: readonly ["success", "error", "warning", "info"];
7
- export declare const alertColorVariant: readonly ["light", "dark"];
8
- export type AlertStatusVariant = (typeof alertStatusVariant)[number];
9
- export type AlertColorVariant = (typeof alertColorVariant)[number];
10
- type AlertBaseProps = {
11
- /** Заголовок сообщения */
12
- title: ReactNode;
13
- /**
14
- * Статус сообщения
15
- * @default info
16
- */
17
- status?: AlertStatusVariant;
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.alertColorVariant = exports.alertStatusVariant = exports.cnAlert = void 0;
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
- warning: react_1.default.createElement(icons_1.WarningTriangleFilledIcon, { size: "s" }),
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.color, color = _c === void 0 ? constants_1.ALERT_DEFAULT_COLOR : _c, 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", "color", "closeText", "children", "action", "onClose", "title", "className"]);
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 === 'light' ? 'main' : 'main-inverse' }, other, { className: (0, exports.cnAlert)({ status: status, hasCloseButton: !!onClose, color: color }, [
48
- className,
49
- ]), ref: ref }),
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,3 +1,3 @@
1
1
  export declare const ALERT_DEFAULT_STATUS = "info";
2
2
  export declare const ALERT_DEFAULT_SHOW_ICON = true;
3
- export declare const ALERT_DEFAULT_COLOR = "light";
3
+ export declare const ALERT_DEFAULT_INVERSE = false;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ALERT_DEFAULT_COLOR = exports.ALERT_DEFAULT_SHOW_ICON = exports.ALERT_DEFAULT_STATUS = void 0;
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.ALERT_DEFAULT_COLOR = 'light';
6
+ exports.ALERT_DEFAULT_INVERSE = false;
@@ -1 +1,2 @@
1
1
  export * from './Alert';
2
+ export * from './types';
@@ -2,3 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  var tslib_1 = require("tslib");
4
4
  tslib_1.__exportStar(require("./Alert"), exports);
5
+ tslib_1.__exportStar(require("./types"), exports);
@@ -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 | undefined;
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: string | number;
8
+ primary: TypographyBaseProps['children'];
9
9
  /** Свойства компонента Typography для текста primary */
10
10
  primaryTypographyProps?: TypographyProps<'span'>;
11
11
  /** Второстепенный текст */
12
- secondary?: string | number;
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: string | number;
19
+ primary: TypographyBaseProps['children'];
20
20
  /** Свойства компонента Typography для текста primary */
21
21
  primaryTypographyProps?: TypographyProps<"span"> | undefined;
22
22
  /** Второстепенный текст */
23
- secondary?: string | number | undefined;
23
+ secondary?: TypographyBaseProps['children'];
24
24
  /** Свойства компонента Typography для текста secondary */
25
25
  secondaryTypographyProps?: TypographyProps<"span"> | undefined;
26
26
  } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -1,5 +1,5 @@
1
1
  export declare const getPositionOnRail: ({ value, min, max, }: {
2
- value?: number | undefined;
2
+ value?: number;
3
3
  min: number;
4
4
  max: number;
5
5
  }) => number;
@@ -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, { color: "dark", title: title, status: status, onClose: handleClose }, description))))));
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
- .Tooltip_variant_light {
24
- color: var(--color-content-primary);
25
- }
26
- .Tooltip_variant_dark {
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.variant, variant = _c === void 0 ? constants_1.TOOLTIP_DEFAULT_VARIANT : _c, _d = props.offset, offset = _d === void 0 ? constants_1.TOOLTIP_DEFAULT_OFFSET : _d, _e = props.delayEnter, delayEnter = _e === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_ENTER : _e, _f = props.delayLeave, delayLeave = _f === void 0 ? constants_1.TOOLTIP_DEFAULT_DELAY_LEAVE : _f, _g = props.arrow, arrow = _g === void 0 ? constants_1.TOOLTIP_DEFAULT_ARROW : _g, _h = props.shouldWrapChildren, shouldWrapChildren = _h === void 0 ? constants_1.TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _h, _j = props.disabled, disabled = _j === void 0 ? constants_1.TOOLTIP_DEFAULT_DISABLED : _j, 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", "variant", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
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 === 'light' ? 'main' : '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 }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
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 TOOLTIP_DEFAULT_VARIANT = "dark";
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.TOOLTIP_DEFAULT_VARIANT = exports.TOOLTIP_DEFAULT_SIZE = exports.TOOLTIP_DEFAULT_TRIGGER = exports.TOOLTIP_DEFAULT_TAG = void 0;
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.TOOLTIP_DEFAULT_VARIANT = 'dark';
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
- variant?: TooltipVariant;
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
- .Alert_color_light {
26
- --alert-title-text-color: var(--color-content-primary);
27
- --alert-body-text-color: var(--color-content-secondary);
28
- --alert-icon-color: var(--color-content-primary);
29
- --alert-close-button-color: var(--color-content-primary);
30
- }
31
- .Alert_color_dark {
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 alertStatusVariant: readonly ["success", "error", "warning", "info"];
7
- export declare const alertColorVariant: readonly ["light", "dark"];
8
- export type AlertStatusVariant = (typeof alertStatusVariant)[number];
9
- export type AlertColorVariant = (typeof alertColorVariant)[number];
10
- type AlertBaseProps = {
11
- /** Заголовок сообщения */
12
- title: ReactNode;
13
- /**
14
- * Статус сообщения
15
- * @default info
16
- */
17
- status?: AlertStatusVariant;
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, ALERT_DEFAULT_COLOR, } from './constants';
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
- warning: React.createElement(WarningTriangleFilledIcon, { size: "s" }),
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.color, color = _c === void 0 ? ALERT_DEFAULT_COLOR : _c, closeText = props.closeText, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, other = __rest(props, ["status", "showIcon", "color", "closeText", "children", "action", "onClose", "title", "className"]);
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 === 'light' ? 'main' : 'main-inverse' }, other, { className: cnAlert({ status: status, hasCloseButton: !!onClose, color: color }, [
45
- className,
46
- ]), ref: ref }),
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),
@@ -1,3 +1,3 @@
1
1
  export declare const ALERT_DEFAULT_STATUS = "info";
2
2
  export declare const ALERT_DEFAULT_SHOW_ICON = true;
3
- export declare const ALERT_DEFAULT_COLOR = "light";
3
+ export declare const ALERT_DEFAULT_INVERSE = false;
@@ -1,3 +1,3 @@
1
1
  export var ALERT_DEFAULT_STATUS = 'info';
2
2
  export var ALERT_DEFAULT_SHOW_ICON = true;
3
- export var ALERT_DEFAULT_COLOR = 'light';
3
+ export var ALERT_DEFAULT_INVERSE = false;
@@ -1 +1,2 @@
1
1
  export * from './Alert';
2
+ export * from './types';
@@ -1 +1,2 @@
1
1
  export * from './Alert';
2
+ export * from './types';
@@ -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,7 @@
1
+ export var alertStatusVariant = [
2
+ 'success',
3
+ 'error',
4
+ 'warning',
5
+ 'info',
6
+ ];
7
+ export var 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 | undefined;
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: string | number;
8
+ primary: TypographyBaseProps['children'];
9
9
  /** Свойства компонента Typography для текста primary */
10
10
  primaryTypographyProps?: TypographyProps<'span'>;
11
11
  /** Второстепенный текст */
12
- secondary?: string | number;
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: string | number;
19
+ primary: TypographyBaseProps['children'];
20
20
  /** Свойства компонента Typography для текста primary */
21
21
  primaryTypographyProps?: TypographyProps<"span"> | undefined;
22
22
  /** Второстепенный текст */
23
- secondary?: string | number | undefined;
23
+ secondary?: TypographyBaseProps['children'];
24
24
  /** Свойства компонента Typography для текста secondary */
25
25
  secondaryTypographyProps?: TypographyProps<"span"> | undefined;
26
26
  } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -1,5 +1,5 @@
1
1
  export declare const getPositionOnRail: ({ value, min, max, }: {
2
- value?: number | undefined;
2
+ value?: number;
3
3
  min: number;
4
4
  max: number;
5
5
  }) => number;
@@ -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, { color: "dark", title: title, status: status, onClose: handleClose }, description))))));
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
- .Tooltip_variant_light {
24
- color: var(--color-content-primary);
25
- }
26
- .Tooltip_variant_dark {
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, TOOLTIP_DEFAULT_VARIANT, } from './constants';
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.variant, variant = _c === void 0 ? TOOLTIP_DEFAULT_VARIANT : _c, _d = props.offset, offset = _d === void 0 ? TOOLTIP_DEFAULT_OFFSET : _d, _e = props.delayEnter, delayEnter = _e === void 0 ? TOOLTIP_DEFAULT_DELAY_ENTER : _e, _f = props.delayLeave, delayLeave = _f === void 0 ? TOOLTIP_DEFAULT_DELAY_LEAVE : _f, _g = props.arrow, arrow = _g === void 0 ? TOOLTIP_DEFAULT_ARROW : _g, _h = props.shouldWrapChildren, shouldWrapChildren = _h === void 0 ? TOOLTIP_DEFAULT_SHOULD_WRAP_CHILDREN : _h, _j = props.disabled, disabled = _j === void 0 ? TOOLTIP_DEFAULT_DISABLED : _j, 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", "variant", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose", "as"]);
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 === 'light' ? 'main' : '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 }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
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 TOOLTIP_DEFAULT_VARIANT = "dark";
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 TOOLTIP_DEFAULT_VARIANT = 'dark';
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
- variant?: TooltipVariant;
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.48.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.48.0",
32
- "@ozen-ui/icons": "0.48.0",
33
- "@ozen-ui/logger": "0.48.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",