@ozen-ui/kit 0.50.2 → 0.50.3
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/CalendarRange/package.json +5 -0
- package/__inner__/cjs/components/Autocomplete/helper.d.ts +2 -2
- package/__inner__/cjs/components/Badge/constants.d.ts +1 -1
- package/__inner__/cjs/components/Badge/constants.js +1 -1
- package/__inner__/cjs/components/DatePicker/DatePicker.d.ts +2 -2
- package/__inner__/cjs/components/FilePicker/FilePicker.d.ts +1 -1
- package/__inner__/cjs/components/Tooltip/Tooltip.js +35 -30
- package/__inner__/cjs/hooks/useControlled/useControlled.d.ts +1 -5
- package/__inner__/cjs/hooks/useControlled/useControlled.js +11 -17
- package/__inner__/esm/components/Autocomplete/helper.d.ts +2 -2
- package/__inner__/esm/components/Badge/constants.d.ts +1 -1
- package/__inner__/esm/components/Badge/constants.js +1 -1
- package/__inner__/esm/components/DatePicker/DatePicker.d.ts +2 -2
- package/__inner__/esm/components/FilePicker/FilePicker.d.ts +1 -1
- package/__inner__/esm/components/Tooltip/Tooltip.js +36 -31
- package/__inner__/esm/hooks/useControlled/useControlled.d.ts +1 -5
- package/__inner__/esm/hooks/useControlled/useControlled.js +11 -17
- package/package.json +4 -4
|
@@ -32,6 +32,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
32
32
|
disableShowChevron?: boolean | undefined;
|
|
33
33
|
dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
|
|
34
34
|
} & {
|
|
35
|
+
error?: boolean | undefined;
|
|
35
36
|
label?: string | undefined;
|
|
36
37
|
style?: import("react").CSSProperties | undefined;
|
|
37
38
|
className?: string | undefined;
|
|
@@ -40,7 +41,6 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
40
41
|
disabled?: boolean | undefined;
|
|
41
42
|
placeholder?: string | undefined;
|
|
42
43
|
required?: boolean | undefined;
|
|
43
|
-
error?: boolean | undefined;
|
|
44
44
|
fullWidth?: boolean | undefined;
|
|
45
45
|
hint?: string | null | undefined;
|
|
46
46
|
renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
|
|
@@ -132,6 +132,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
132
132
|
disableShowChevron?: boolean | undefined;
|
|
133
133
|
dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
|
|
134
134
|
} & {
|
|
135
|
+
error?: boolean | undefined;
|
|
135
136
|
label?: string | undefined;
|
|
136
137
|
style?: import("react").CSSProperties | undefined;
|
|
137
138
|
className?: string | undefined;
|
|
@@ -140,7 +141,6 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
140
141
|
disabled?: boolean | undefined;
|
|
141
142
|
placeholder?: string | undefined;
|
|
142
143
|
required?: boolean | undefined;
|
|
143
|
-
error?: boolean | undefined;
|
|
144
144
|
fullWidth?: boolean | undefined;
|
|
145
145
|
hint?: string | null | undefined;
|
|
146
146
|
renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const BADGE_DEFAULT_SIZE = "s";
|
|
2
2
|
export declare const BADGE_DEFAULT_TAG = "div";
|
|
3
3
|
export declare const BADGE_DEFAULT_VARIANT = "standard";
|
|
4
|
-
export declare const BADGE_DEFAULT_COLOR = "
|
|
4
|
+
export declare const BADGE_DEFAULT_COLOR = "neutralDark";
|
|
5
5
|
export declare const BADGE_DEFAULT_HORIZONTAL_ORIGIN = "right";
|
|
6
6
|
export declare const BADGE_DEFAULT_VERTICAL_ORIGIN = "top";
|
|
@@ -4,6 +4,6 @@ exports.BADGE_DEFAULT_VERTICAL_ORIGIN = exports.BADGE_DEFAULT_HORIZONTAL_ORIGIN
|
|
|
4
4
|
exports.BADGE_DEFAULT_SIZE = 's';
|
|
5
5
|
exports.BADGE_DEFAULT_TAG = 'div';
|
|
6
6
|
exports.BADGE_DEFAULT_VARIANT = 'standard';
|
|
7
|
-
exports.BADGE_DEFAULT_COLOR = '
|
|
7
|
+
exports.BADGE_DEFAULT_COLOR = 'neutralDark';
|
|
8
8
|
exports.BADGE_DEFAULT_HORIZONTAL_ORIGIN = 'right';
|
|
9
9
|
exports.BADGE_DEFAULT_VERTICAL_ORIGIN = 'top';
|
|
@@ -16,7 +16,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
|
|
|
16
16
|
onError?: import("./types").DatePickerPropOnError | undefined;
|
|
17
17
|
} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
18
18
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
19
|
-
}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "
|
|
19
|
+
}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
|
|
20
20
|
open?: boolean | undefined;
|
|
21
21
|
defaultOpen?: undefined;
|
|
22
22
|
}, "ref"> | Omit<{
|
|
@@ -33,7 +33,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
|
|
|
33
33
|
onError?: import("./types").DatePickerPropOnError | undefined;
|
|
34
34
|
} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
35
35
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
36
|
-
}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "
|
|
36
|
+
}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
|
|
37
37
|
open?: undefined;
|
|
38
38
|
defaultOpen?: boolean | undefined;
|
|
39
39
|
}, "ref">) & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -68,7 +68,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
|
|
|
68
68
|
} & {
|
|
69
69
|
labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
|
70
70
|
inputRef?: React.Ref<HTMLInputElement> | undefined;
|
|
71
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "
|
|
71
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "error" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
|
|
72
72
|
labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
|
73
73
|
inputRef?: React.Ref<HTMLInputElement> | undefined;
|
|
74
74
|
}> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
|
|
|
5
5
|
require("./Tooltip.css");
|
|
6
6
|
var react_1 = tslib_1.__importStar(require("react"));
|
|
7
7
|
var logger_1 = require("@ozen-ui/logger");
|
|
8
|
+
var useBoolean_1 = require("../../hooks/useBoolean");
|
|
8
9
|
var useControlled_1 = require("../../hooks/useControlled");
|
|
9
10
|
var useDebounceCallback_1 = require("../../hooks/useDebounceCallback");
|
|
10
11
|
var useMultiRef_1 = require("../../hooks/useMultiRef");
|
|
@@ -16,14 +17,14 @@ var constants_1 = require("./constants");
|
|
|
16
17
|
exports.cnTooltip = (0, classname_1.cn)('Tooltip');
|
|
17
18
|
exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
|
|
18
19
|
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Tooltip' });
|
|
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,
|
|
20
|
+
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, _k = props.as, as = _k === void 0 ? constants_1.TOOLTIP_DEFAULT_TAG : _k, 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, other = tslib_1.__rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "as", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose"]);
|
|
20
21
|
if (process.env.NODE_ENV !== 'production' && variant) {
|
|
21
22
|
(0, logger_1.deprecate)('Свойство «variant» устарело. Для замены используйте «inverse».');
|
|
22
23
|
}
|
|
23
|
-
var _l = tslib_1.__read((0, react_1.useState)(), 2), delay = _l[0], setDelay = _l[1];
|
|
24
|
-
var _m = tslib_1.__read((0, react_1.useState)(), 2), hasFocus = _m[0], setHasFocus = _m[1];
|
|
25
|
-
var _o = tslib_1.__read((0, react_1.useState)(), 2), hasHover = _o[0], setHasHover = _o[1];
|
|
26
24
|
var anchorRef = (0, react_1.useRef)(null);
|
|
25
|
+
var _l = tslib_1.__read((0, react_1.useState)(), 2), delay = _l[0], setDelay = _l[1];
|
|
26
|
+
var _m = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), focused = _m[0], setFocused = _m[1];
|
|
27
|
+
var _o = tslib_1.__read((0, useBoolean_1.useBoolean)(), 2), hovered = _o[0], setHovered = _o[1];
|
|
27
28
|
var modifiers = [
|
|
28
29
|
{
|
|
29
30
|
name: 'arrow',
|
|
@@ -38,22 +39,27 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
|
|
|
38
39
|
name: 'Tooltip',
|
|
39
40
|
state: 'open',
|
|
40
41
|
}), 2), openState = _p[0], setOpenState = _p[1];
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}, [openState, delayEnter, delayLeave]);
|
|
44
|
-
var handleOpen = function (open) {
|
|
45
|
-
if (disabled) {
|
|
42
|
+
var setOpen = function (open) {
|
|
43
|
+
if (disabled && open)
|
|
46
44
|
return;
|
|
47
|
-
|
|
48
|
-
if (open) {
|
|
45
|
+
if (open)
|
|
49
46
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
50
|
-
|
|
51
|
-
else {
|
|
47
|
+
else
|
|
52
48
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
53
|
-
}
|
|
54
49
|
setOpenState(open);
|
|
55
50
|
};
|
|
56
|
-
var _q = tslib_1.__read((0, useDebounceCallback_1.useDebounceCallback)(
|
|
51
|
+
var _q = tslib_1.__read((0, useDebounceCallback_1.useDebounceCallback)(setOpen, delay), 2), setOpenWithDelay = _q[0], clearTimeout = _q[1];
|
|
52
|
+
var closeWithDelay = function () { return setOpenWithDelay(false); };
|
|
53
|
+
(0, react_1.useEffect)(function () {
|
|
54
|
+
setDelay(openState ? delayLeave : delayEnter);
|
|
55
|
+
}, [openState, delayEnter, delayLeave]);
|
|
56
|
+
(0, react_1.useEffect)(function () {
|
|
57
|
+
if (!disabled)
|
|
58
|
+
return;
|
|
59
|
+
clearTimeout();
|
|
60
|
+
if (openState)
|
|
61
|
+
setOpen(false);
|
|
62
|
+
}, [disabled, openState]);
|
|
57
63
|
var resolveChildren = (0, react_1.useMemo)(function () {
|
|
58
64
|
return typeof children !== 'object' || shouldWrapChildren ? (react_1.default.createElement("span", null, children)) : (children);
|
|
59
65
|
}, [children, shouldWrapChildren]);
|
|
@@ -61,36 +67,34 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
|
|
|
61
67
|
var childrenMultiRef = (0, useMultiRef_1.useMultiRef)([anchorRef, childrenRef]);
|
|
62
68
|
var handleMouseEnter = function () {
|
|
63
69
|
if (trigger === 'hover' || trigger === 'hover&focus') {
|
|
64
|
-
|
|
65
|
-
|
|
70
|
+
setHovered.on();
|
|
71
|
+
setOpenWithDelay(true);
|
|
66
72
|
}
|
|
67
73
|
};
|
|
68
74
|
var handleMouseLeave = function () {
|
|
69
75
|
if (trigger === 'hover' || trigger === 'hover&focus') {
|
|
70
|
-
|
|
71
|
-
if (!
|
|
72
|
-
|
|
76
|
+
setHovered.off();
|
|
77
|
+
if (!focused)
|
|
78
|
+
setOpenWithDelay(false);
|
|
73
79
|
}
|
|
74
80
|
};
|
|
75
81
|
var handleClick = function () {
|
|
76
|
-
if (trigger === 'click')
|
|
77
|
-
|
|
78
|
-
}
|
|
82
|
+
if (trigger === 'click')
|
|
83
|
+
setOpenWithDelay(!openState);
|
|
79
84
|
};
|
|
80
85
|
var handleFocus = function () {
|
|
81
86
|
if (trigger === 'focus' || trigger === 'hover&focus') {
|
|
82
|
-
|
|
83
|
-
|
|
87
|
+
setFocused.on();
|
|
88
|
+
setOpenWithDelay(true);
|
|
84
89
|
}
|
|
85
90
|
};
|
|
86
91
|
var handleBlur = function () {
|
|
87
92
|
if (trigger === 'focus' || trigger === 'hover&focus') {
|
|
88
|
-
|
|
89
|
-
if (!
|
|
90
|
-
|
|
93
|
+
setFocused.off();
|
|
94
|
+
if (!hovered)
|
|
95
|
+
setOpenWithDelay(false);
|
|
91
96
|
}
|
|
92
97
|
};
|
|
93
|
-
var handleClose = function () { return debounceSetOpen(false); };
|
|
94
98
|
var composeChildrenProps = (0, react_1.useMemo)(function () {
|
|
95
99
|
var onClick = childrenProps.onClick, onFocus = childrenProps.onFocus, onBlur = childrenProps.onBlur, onMouseEnter = childrenProps.onMouseEnter, onMouseLeave = childrenProps.onMouseLeave;
|
|
96
100
|
return {
|
|
@@ -117,6 +121,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
|
|
|
117
121
|
},
|
|
118
122
|
};
|
|
119
123
|
}, [
|
|
124
|
+
trigger,
|
|
120
125
|
childrenProps,
|
|
121
126
|
childrenMultiRef,
|
|
122
127
|
handleMouseEnter,
|
|
@@ -127,7 +132,7 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
|
|
|
127
132
|
]);
|
|
128
133
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
129
134
|
react_1.default.cloneElement(resolveChildren, composeChildrenProps),
|
|
130
|
-
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
|
|
135
|
+
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, onClose: closeWithDelay, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
|
|
131
136
|
size: size,
|
|
132
137
|
}, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
|
|
133
138
|
});
|
|
@@ -8,9 +8,5 @@ export interface UseControlledProps<T = unknown> {
|
|
|
8
8
|
/** Имя свойства для предупреждения */
|
|
9
9
|
state?: string;
|
|
10
10
|
}
|
|
11
|
-
/**
|
|
12
|
-
* Управляет значением компонента
|
|
13
|
-
* при контролируемом и неконтролируемом
|
|
14
|
-
* поведении
|
|
15
|
-
* */
|
|
11
|
+
/** Управляет значением компонента при контролируемом и неконтролируемом поведении */
|
|
16
12
|
export declare const useControlled: <T = unknown>({ value: valueProp, defaultValue: defaultProp, name, state, }: UseControlledProps<T>) => [T | undefined, (newValue: T) => void, boolean];
|
|
@@ -4,37 +4,31 @@ exports.useControlled = void 0;
|
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
|
|
6
6
|
var react_1 = require("react");
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* при контролируемом и неконтролируемом
|
|
10
|
-
* поведении
|
|
11
|
-
* */
|
|
7
|
+
var logger_1 = require("@ozen-ui/logger");
|
|
8
|
+
/** Управляет значением компонента при контролируемом и неконтролируемом поведении */
|
|
12
9
|
var useControlled = function (_a) {
|
|
13
10
|
var valueProp = _a.value, defaultProp = _a.defaultValue, name = _a.name, _b = _a.state, state = _b === void 0 ? 'value' : _b;
|
|
14
|
-
/**
|
|
15
|
-
* Определение контролируемого поведения
|
|
16
|
-
* при первом рендере
|
|
17
|
-
* (неизменяемое значение)
|
|
18
|
-
* */
|
|
11
|
+
/** Определение контролируемого поведения при первом рендере (неизменяемое значение) */
|
|
19
12
|
var isControlled = (0, react_1.useRef)(valueProp !== undefined).current;
|
|
20
13
|
var _c = tslib_1.__read((0, react_1.useState)(defaultProp), 2), valueState = _c[0], setValue = _c[1];
|
|
21
14
|
var value = isControlled ? valueProp : valueState;
|
|
22
15
|
if (process.env.NODE_ENV !== 'production') {
|
|
23
16
|
(0, react_1.useEffect)(function () {
|
|
24
17
|
if (isControlled !== (valueProp !== undefined)) {
|
|
25
|
-
|
|
26
|
-
"\
|
|
27
|
-
|
|
28
|
-
'Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
|
|
18
|
+
logger_1.logger.error([
|
|
19
|
+
"\u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 \u00AB".concat(state, "\u00BB \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 ").concat(name, " \u043F\u043E\u043C\u0435\u043D\u044F\u043B\u043E\u0441\u044C \u0441 ").concat(isControlled ? '' : 'не', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u043D\u0430 ").concat(isControlled ? 'не' : '', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0435."),
|
|
20
|
+
"\n",
|
|
21
|
+
'Компоненты не должны переключаться с неконтролируемого поведения в контролируемое, или наоборот. Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
|
|
29
22
|
].join('\n'));
|
|
30
23
|
}
|
|
31
24
|
}, [state, name, valueProp]);
|
|
32
25
|
var defaultValue_1 = (0, react_1.useRef)(defaultProp).current;
|
|
33
26
|
(0, react_1.useEffect)(function () {
|
|
34
27
|
if (!isControlled && defaultValue_1 !== defaultProp) {
|
|
35
|
-
|
|
36
|
-
"\
|
|
37
|
-
"\
|
|
28
|
+
logger_1.logger.error([
|
|
29
|
+
"\u041D\u0435\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ".concat(name, " \u0441\u043C\u0435\u043D\u0438\u043B \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0434\u043B\u044F \u00AB").concat(state, "\u00BB \u043F\u043E\u0441\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0439 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438."),
|
|
30
|
+
"\n",
|
|
31
|
+
"\u0415\u0441\u043B\u0438 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043C\u0435\u043D\u044F\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043B\u044F \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u043C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C.",
|
|
38
32
|
].join('\n'));
|
|
39
33
|
}
|
|
40
34
|
}, [JSON.stringify(defaultProp)]);
|
|
@@ -32,6 +32,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
32
32
|
disableShowChevron?: boolean | undefined;
|
|
33
33
|
dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
|
|
34
34
|
} & {
|
|
35
|
+
error?: boolean | undefined;
|
|
35
36
|
label?: string | undefined;
|
|
36
37
|
style?: import("react").CSSProperties | undefined;
|
|
37
38
|
className?: string | undefined;
|
|
@@ -40,7 +41,6 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
40
41
|
disabled?: boolean | undefined;
|
|
41
42
|
placeholder?: string | undefined;
|
|
42
43
|
required?: boolean | undefined;
|
|
43
|
-
error?: boolean | undefined;
|
|
44
44
|
fullWidth?: boolean | undefined;
|
|
45
45
|
hint?: string | null | undefined;
|
|
46
46
|
renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
|
|
@@ -132,6 +132,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
132
132
|
disableShowChevron?: boolean | undefined;
|
|
133
133
|
dataListProps?: Partial<Omit<import("../DataList").DataListProps, "onSelect" | "open" | "onClose" | "multiple" | "selected" | "anchorRef">> | undefined;
|
|
134
134
|
} & {
|
|
135
|
+
error?: boolean | undefined;
|
|
135
136
|
label?: string | undefined;
|
|
136
137
|
style?: import("react").CSSProperties | undefined;
|
|
137
138
|
className?: string | undefined;
|
|
@@ -140,7 +141,6 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
|
|
|
140
141
|
disabled?: boolean | undefined;
|
|
141
142
|
placeholder?: string | undefined;
|
|
142
143
|
required?: boolean | undefined;
|
|
143
|
-
error?: boolean | undefined;
|
|
144
144
|
fullWidth?: boolean | undefined;
|
|
145
145
|
hint?: string | null | undefined;
|
|
146
146
|
renderLeft?: string | number | import("react").FC<import("react").SVGProps<SVGSVGElement> & {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const BADGE_DEFAULT_SIZE = "s";
|
|
2
2
|
export declare const BADGE_DEFAULT_TAG = "div";
|
|
3
3
|
export declare const BADGE_DEFAULT_VARIANT = "standard";
|
|
4
|
-
export declare const BADGE_DEFAULT_COLOR = "
|
|
4
|
+
export declare const BADGE_DEFAULT_COLOR = "neutralDark";
|
|
5
5
|
export declare const BADGE_DEFAULT_HORIZONTAL_ORIGIN = "right";
|
|
6
6
|
export declare const BADGE_DEFAULT_VERTICAL_ORIGIN = "top";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var BADGE_DEFAULT_SIZE = 's';
|
|
2
2
|
export var BADGE_DEFAULT_TAG = 'div';
|
|
3
3
|
export var BADGE_DEFAULT_VARIANT = 'standard';
|
|
4
|
-
export var BADGE_DEFAULT_COLOR = '
|
|
4
|
+
export var BADGE_DEFAULT_COLOR = 'neutralDark';
|
|
5
5
|
export var BADGE_DEFAULT_HORIZONTAL_ORIGIN = 'right';
|
|
6
6
|
export var BADGE_DEFAULT_VERTICAL_ORIGIN = 'top';
|
|
@@ -16,7 +16,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
|
|
|
16
16
|
onError?: import("./types").DatePickerPropOnError | undefined;
|
|
17
17
|
} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
18
18
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
19
|
-
}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "
|
|
19
|
+
}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
|
|
20
20
|
open?: boolean | undefined;
|
|
21
21
|
defaultOpen?: undefined;
|
|
22
22
|
}, "ref"> | Omit<{
|
|
@@ -33,7 +33,7 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
|
|
|
33
33
|
onError?: import("./types").DatePickerPropOnError | undefined;
|
|
34
34
|
} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
35
35
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
36
|
-
}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "
|
|
36
|
+
}, "defaultValue" | "onChange" | "onError"> & Pick<import("../Calendar").CalendarBaseProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "hint" | "renderLeft" | "renderRight" | "inputProps"> & {
|
|
37
37
|
open?: undefined;
|
|
38
38
|
defaultOpen?: boolean | undefined;
|
|
39
39
|
}, "ref">) & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -68,7 +68,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
|
|
|
68
68
|
} & {
|
|
69
69
|
labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
|
70
70
|
inputRef?: React.Ref<HTMLInputElement> | undefined;
|
|
71
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "
|
|
71
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "error" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
|
|
72
72
|
labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
|
73
73
|
inputRef?: React.Ref<HTMLInputElement> | undefined;
|
|
74
74
|
}> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { __assign, __read, __rest } from "tslib";
|
|
2
2
|
import './Tooltip.css';
|
|
3
|
-
import React, { useRef, useMemo,
|
|
3
|
+
import React, { useRef, useMemo, useEffect, useState } from 'react';
|
|
4
4
|
import { deprecate } from '@ozen-ui/logger';
|
|
5
|
+
import { useBoolean } from '../../hooks/useBoolean';
|
|
5
6
|
import { useControlled } from '../../hooks/useControlled';
|
|
6
7
|
import { useDebounceCallback } from '../../hooks/useDebounceCallback';
|
|
7
8
|
import { useMultiRef } from '../../hooks/useMultiRef';
|
|
@@ -13,14 +14,14 @@ import { TOOLTIP_DEFAULT_ARROW, TOOLTIP_DEFAULT_DELAY_ENTER, TOOLTIP_DEFAULT_DEL
|
|
|
13
14
|
export var cnTooltip = cn('Tooltip');
|
|
14
15
|
export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
|
|
15
16
|
var props = useThemeProps({ props: inProps, name: 'Tooltip' });
|
|
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,
|
|
17
|
+
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, _k = props.as, as = _k === void 0 ? TOOLTIP_DEFAULT_TAG : _k, 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, other = __rest(props, ["trigger", "size", "offset", "delayEnter", "delayLeave", "arrow", "shouldWrapChildren", "disabled", "inverse", "as", "variant", "children", "label", "open", "placement", "disableInteractive", "className", "onOpen", "onClose"]);
|
|
17
18
|
if (process.env.NODE_ENV !== 'production' && variant) {
|
|
18
19
|
deprecate('Свойство «variant» устарело. Для замены используйте «inverse».');
|
|
19
20
|
}
|
|
20
|
-
var _l = __read(useState(), 2), delay = _l[0], setDelay = _l[1];
|
|
21
|
-
var _m = __read(useState(), 2), hasFocus = _m[0], setHasFocus = _m[1];
|
|
22
|
-
var _o = __read(useState(), 2), hasHover = _o[0], setHasHover = _o[1];
|
|
23
21
|
var anchorRef = useRef(null);
|
|
22
|
+
var _l = __read(useState(), 2), delay = _l[0], setDelay = _l[1];
|
|
23
|
+
var _m = __read(useBoolean(), 2), focused = _m[0], setFocused = _m[1];
|
|
24
|
+
var _o = __read(useBoolean(), 2), hovered = _o[0], setHovered = _o[1];
|
|
24
25
|
var modifiers = [
|
|
25
26
|
{
|
|
26
27
|
name: 'arrow',
|
|
@@ -35,22 +36,27 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
|
|
|
35
36
|
name: 'Tooltip',
|
|
36
37
|
state: 'open',
|
|
37
38
|
}), 2), openState = _p[0], setOpenState = _p[1];
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}, [openState, delayEnter, delayLeave]);
|
|
41
|
-
var handleOpen = function (open) {
|
|
42
|
-
if (disabled) {
|
|
39
|
+
var setOpen = function (open) {
|
|
40
|
+
if (disabled && open)
|
|
43
41
|
return;
|
|
44
|
-
|
|
45
|
-
if (open) {
|
|
42
|
+
if (open)
|
|
46
43
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen();
|
|
47
|
-
|
|
48
|
-
else {
|
|
44
|
+
else
|
|
49
45
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
50
|
-
}
|
|
51
46
|
setOpenState(open);
|
|
52
47
|
};
|
|
53
|
-
var _q = __read(useDebounceCallback(
|
|
48
|
+
var _q = __read(useDebounceCallback(setOpen, delay), 2), setOpenWithDelay = _q[0], clearTimeout = _q[1];
|
|
49
|
+
var closeWithDelay = function () { return setOpenWithDelay(false); };
|
|
50
|
+
useEffect(function () {
|
|
51
|
+
setDelay(openState ? delayLeave : delayEnter);
|
|
52
|
+
}, [openState, delayEnter, delayLeave]);
|
|
53
|
+
useEffect(function () {
|
|
54
|
+
if (!disabled)
|
|
55
|
+
return;
|
|
56
|
+
clearTimeout();
|
|
57
|
+
if (openState)
|
|
58
|
+
setOpen(false);
|
|
59
|
+
}, [disabled, openState]);
|
|
54
60
|
var resolveChildren = useMemo(function () {
|
|
55
61
|
return typeof children !== 'object' || shouldWrapChildren ? (React.createElement("span", null, children)) : (children);
|
|
56
62
|
}, [children, shouldWrapChildren]);
|
|
@@ -58,36 +64,34 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
|
|
|
58
64
|
var childrenMultiRef = useMultiRef([anchorRef, childrenRef]);
|
|
59
65
|
var handleMouseEnter = function () {
|
|
60
66
|
if (trigger === 'hover' || trigger === 'hover&focus') {
|
|
61
|
-
|
|
62
|
-
|
|
67
|
+
setHovered.on();
|
|
68
|
+
setOpenWithDelay(true);
|
|
63
69
|
}
|
|
64
70
|
};
|
|
65
71
|
var handleMouseLeave = function () {
|
|
66
72
|
if (trigger === 'hover' || trigger === 'hover&focus') {
|
|
67
|
-
|
|
68
|
-
if (!
|
|
69
|
-
|
|
73
|
+
setHovered.off();
|
|
74
|
+
if (!focused)
|
|
75
|
+
setOpenWithDelay(false);
|
|
70
76
|
}
|
|
71
77
|
};
|
|
72
78
|
var handleClick = function () {
|
|
73
|
-
if (trigger === 'click')
|
|
74
|
-
|
|
75
|
-
}
|
|
79
|
+
if (trigger === 'click')
|
|
80
|
+
setOpenWithDelay(!openState);
|
|
76
81
|
};
|
|
77
82
|
var handleFocus = function () {
|
|
78
83
|
if (trigger === 'focus' || trigger === 'hover&focus') {
|
|
79
|
-
|
|
80
|
-
|
|
84
|
+
setFocused.on();
|
|
85
|
+
setOpenWithDelay(true);
|
|
81
86
|
}
|
|
82
87
|
};
|
|
83
88
|
var handleBlur = function () {
|
|
84
89
|
if (trigger === 'focus' || trigger === 'hover&focus') {
|
|
85
|
-
|
|
86
|
-
if (!
|
|
87
|
-
|
|
90
|
+
setFocused.off();
|
|
91
|
+
if (!hovered)
|
|
92
|
+
setOpenWithDelay(false);
|
|
88
93
|
}
|
|
89
94
|
};
|
|
90
|
-
var handleClose = function () { return debounceSetOpen(false); };
|
|
91
95
|
var composeChildrenProps = useMemo(function () {
|
|
92
96
|
var onClick = childrenProps.onClick, onFocus = childrenProps.onFocus, onBlur = childrenProps.onBlur, onMouseEnter = childrenProps.onMouseEnter, onMouseLeave = childrenProps.onMouseLeave;
|
|
93
97
|
return {
|
|
@@ -114,6 +118,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
|
|
|
114
118
|
},
|
|
115
119
|
};
|
|
116
120
|
}, [
|
|
121
|
+
trigger,
|
|
117
122
|
childrenProps,
|
|
118
123
|
childrenMultiRef,
|
|
119
124
|
handleMouseEnter,
|
|
@@ -124,7 +129,7 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
|
|
|
124
129
|
]);
|
|
125
130
|
return (React.createElement(React.Fragment, null,
|
|
126
131
|
React.cloneElement(resolveChildren, composeChildrenProps),
|
|
127
|
-
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
|
|
132
|
+
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, onClose: closeWithDelay, className: cnTooltip({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
|
|
128
133
|
size: size,
|
|
129
134
|
}, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
|
|
130
135
|
});
|
|
@@ -8,9 +8,5 @@ export interface UseControlledProps<T = unknown> {
|
|
|
8
8
|
/** Имя свойства для предупреждения */
|
|
9
9
|
state?: string;
|
|
10
10
|
}
|
|
11
|
-
/**
|
|
12
|
-
* Управляет значением компонента
|
|
13
|
-
* при контролируемом и неконтролируемом
|
|
14
|
-
* поведении
|
|
15
|
-
* */
|
|
11
|
+
/** Управляет значением компонента при контролируемом и неконтролируемом поведении */
|
|
16
12
|
export declare const useControlled: <T = unknown>({ value: valueProp, defaultValue: defaultProp, name, state, }: UseControlledProps<T>) => [T | undefined, (newValue: T) => void, boolean];
|
|
@@ -1,37 +1,31 @@
|
|
|
1
1
|
import { __read } from "tslib";
|
|
2
2
|
/* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
|
|
3
3
|
import { useState, useCallback, useEffect, useRef } from 'react';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
* при контролируемом и неконтролируемом
|
|
7
|
-
* поведении
|
|
8
|
-
* */
|
|
4
|
+
import { logger } from '@ozen-ui/logger';
|
|
5
|
+
/** Управляет значением компонента при контролируемом и неконтролируемом поведении */
|
|
9
6
|
export var useControlled = function (_a) {
|
|
10
7
|
var valueProp = _a.value, defaultProp = _a.defaultValue, name = _a.name, _b = _a.state, state = _b === void 0 ? 'value' : _b;
|
|
11
|
-
/**
|
|
12
|
-
* Определение контролируемого поведения
|
|
13
|
-
* при первом рендере
|
|
14
|
-
* (неизменяемое значение)
|
|
15
|
-
* */
|
|
8
|
+
/** Определение контролируемого поведения при первом рендере (неизменяемое значение) */
|
|
16
9
|
var isControlled = useRef(valueProp !== undefined).current;
|
|
17
10
|
var _c = __read(useState(defaultProp), 2), valueState = _c[0], setValue = _c[1];
|
|
18
11
|
var value = isControlled ? valueProp : valueState;
|
|
19
12
|
if (process.env.NODE_ENV !== 'production') {
|
|
20
13
|
useEffect(function () {
|
|
21
14
|
if (isControlled !== (valueProp !== undefined)) {
|
|
22
|
-
|
|
23
|
-
"\
|
|
24
|
-
|
|
25
|
-
'Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
|
|
15
|
+
logger.error([
|
|
16
|
+
"\u041F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 \u00AB".concat(state, "\u00BB \u0443 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 ").concat(name, " \u043F\u043E\u043C\u0435\u043D\u044F\u043B\u043E\u0441\u044C \u0441 ").concat(isControlled ? '' : 'не', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u043D\u0430 ").concat(isControlled ? 'не' : '', "\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0435."),
|
|
17
|
+
"\n",
|
|
18
|
+
'Компоненты не должны переключаться с неконтролируемого поведения в контролируемое, или наоборот. Поведение определяется после первого рендера и является контролируемым, если значение не «undefined».',
|
|
26
19
|
].join('\n'));
|
|
27
20
|
}
|
|
28
21
|
}, [state, name, valueProp]);
|
|
29
22
|
var defaultValue_1 = useRef(defaultProp).current;
|
|
30
23
|
useEffect(function () {
|
|
31
24
|
if (!isControlled && defaultValue_1 !== defaultProp) {
|
|
32
|
-
|
|
33
|
-
"\
|
|
34
|
-
"\
|
|
25
|
+
logger.error([
|
|
26
|
+
"\u041D\u0435\u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u0439 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442 ".concat(name, " \u0441\u043C\u0435\u043D\u0438\u043B \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E \u0434\u043B\u044F \u00AB").concat(state, "\u00BB \u043F\u043E\u0441\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0439 \u0438\u043D\u0438\u0446\u0438\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u0438."),
|
|
27
|
+
"\n",
|
|
28
|
+
"\u0415\u0441\u043B\u0438 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u043C\u0435\u043D\u044F\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043B\u044F \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u0432\u043E\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435\u0441\u044C \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u044B\u043C \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C.",
|
|
35
29
|
].join('\n'));
|
|
36
30
|
}
|
|
37
31
|
}, [JSON.stringify(defaultProp)]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ozen-ui/kit",
|
|
3
|
-
"version": "0.50.
|
|
3
|
+
"version": "0.50.3",
|
|
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/
|
|
32
|
-
"@ozen-ui/
|
|
33
|
-
"@ozen-ui/logger": "0.50.
|
|
31
|
+
"@ozen-ui/fonts": "0.50.3",
|
|
32
|
+
"@ozen-ui/icons": "0.50.3",
|
|
33
|
+
"@ozen-ui/logger": "0.50.3"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": ">=17.0.2 <19.0.0",
|