@sima-land/ui-nucleons 40.2.1 → 40.2.2
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/_internal/custom-scrollbar/index.js +3 -3
- package/alert/index.js +1 -1
- package/autocomplete/index.js +12 -17
- package/avatar/index.d.ts +1 -1
- package/avatar/index.js +2 -4
- package/avatar/user.d.ts +1 -1
- package/avatar/user.js +2 -2
- package/avatar/utils.js +7 -1
- package/base-input/index.d.ts +1 -1
- package/base-input/index.js +1 -1
- package/bordered-layout/index.d.ts +1 -1
- package/bordered-layout/index.js +1 -1
- package/box/index.js +17 -36
- package/button/index.d.ts +3 -3
- package/button/index.js +4 -4
- package/card/slots.js +1 -1
- package/carousel/draggable.js +14 -16
- package/carousel/index.d.ts +1 -1
- package/carousel/index.js +17 -37
- package/chips/index.js +1 -1
- package/clean-buttons/index.js +1 -3
- package/dot-nav/dot-nav.module.scss +2 -2
- package/dropdown/dropdown.module.scss +1 -3
- package/field-grid/index.d.ts +2 -2
- package/field-grid/index.js +3 -3
- package/file-icon/index.js +5 -6
- package/helpers/bounds-of.js +1 -3
- package/helpers/find-child-element.js +1 -3
- package/helpers/find-offset-parent.js +4 -3
- package/helpers/fit-element-height.js +1 -1
- package/helpers/format-date.js +3 -1
- package/helpers/get-fraction-depth.js +1 -3
- package/hooks/identity.d.ts +1 -0
- package/hooks/identity.js +1 -0
- package/layout/index.js +1 -1
- package/link/index.js +1 -3
- package/loading-overlay/index.d.ts +1 -1
- package/loading-overlay/index.js +1 -1
- package/package.json +5 -3
- package/pagination/base-pagination.js +18 -20
- package/pagination/index.js +1 -3
- package/pagination/utils.d.ts +2 -2
- package/pagination/utils.js +7 -6
- package/panel/index.js +1 -3
- package/phone-input/index.js +19 -20
- package/price/utils.js +1 -3
- package/range/index.js +11 -14
- package/rating/index.js +2 -2
- package/readme.md +1 -1
- package/screen/index.js +14 -16
- package/select/index.js +5 -7
- package/spinner/index.d.ts +1 -1
- package/spinner/index.js +1 -1
- package/spinner/spinner.module.scss +1 -4
- package/styling/fonts.js +1 -3
- package/styling/utils.js +1 -3
- package/text-field/index.js +3 -10
- package/timer/index.d.ts +3 -3
- package/timer/index.js +4 -4
- package/timer/utils.js +1 -4
- package/top-bar/index.js +1 -1
- package/upload/area.js +3 -1
- package/upload/utils.d.ts +2 -2
- package/upload/utils.js +2 -2
- package/with-hint/positioning-hint.d.ts +1 -1
- package/with-hint/positioning-hint.js +1 -1
- package/with-hint/utils.js +5 -7
- package/with-in-viewport-observer/index.js +1 -1
|
@@ -32,8 +32,8 @@ exports.CustomScrollbar = CustomScrollbar;
|
|
|
32
32
|
*/
|
|
33
33
|
const HandleFullScroll = (callback, threshold = 16) => (event) => {
|
|
34
34
|
const el = event === null || event === void 0 ? void 0 : event.target;
|
|
35
|
-
el instanceof Element
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
el instanceof Element &&
|
|
36
|
+
el.scrollTop >= el.scrollHeight - el.clientHeight - threshold &&
|
|
37
|
+
callback();
|
|
38
38
|
};
|
|
39
39
|
exports.HandleFullScroll = HandleFullScroll;
|
package/alert/index.js
CHANGED
|
@@ -70,5 +70,5 @@ const AlertInner = ({ children, className, footer, navBarProps, title, withDivid
|
|
|
70
70
|
react_1.default.createElement("div", { className: cx('alert', className), "data-testid": 'alert' },
|
|
71
71
|
withNavBar && (react_1.default.createElement(nav_bar_1.NavBar, Object.assign({}, navBarProps, { title: title, bottomBordered: withDivideNavBar, className: cx('header') }))),
|
|
72
72
|
react_1.default.createElement("div", { className: cx('main') }, children),
|
|
73
|
-
Boolean(footer) &&
|
|
73
|
+
Boolean(footer) && react_1.default.createElement("div", { className: borders_1.InnerBorder.top }, footer))));
|
|
74
74
|
};
|
package/autocomplete/index.js
CHANGED
|
@@ -72,9 +72,7 @@ const Autocomplete = (_a) => {
|
|
|
72
72
|
const canShowDropdown = preset === 'filled-only-list'
|
|
73
73
|
? needDropdown && realValue && realValue.length > 0
|
|
74
74
|
: needDropdown;
|
|
75
|
-
const endAdornment = preset === 'default'
|
|
76
|
-
? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('gray38') })
|
|
77
|
-
: undefined;
|
|
75
|
+
const endAdornment = preset === 'default' ? react_1.default.createElement(down_1.default, { fill: colors_1.COLORS.get('gray38') }) : undefined;
|
|
78
76
|
(0, hooks_1.useOutsideClick)(rootRef, () => {
|
|
79
77
|
toggleDropdown(false);
|
|
80
78
|
});
|
|
@@ -90,10 +88,11 @@ const Autocomplete = (_a) => {
|
|
|
90
88
|
const osInstance = (_a = osComponentRef.current) === null || _a === void 0 ? void 0 : _a.osInstance();
|
|
91
89
|
if (menu && osInstance && activeIndex !== null) {
|
|
92
90
|
const child = menu.querySelectorAll('[role="menuitem"]')[activeIndex];
|
|
93
|
-
child &&
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
91
|
+
child &&
|
|
92
|
+
osInstance.scroll({
|
|
93
|
+
el: child,
|
|
94
|
+
scroll: { y: 'ifneeded' },
|
|
95
|
+
});
|
|
97
96
|
}
|
|
98
97
|
}, [activeIndex]);
|
|
99
98
|
return (react_1.default.createElement("div", { ref: rootRef, style: style, className: cx('root', className), "data-testid": dataTestId },
|
|
@@ -125,15 +124,11 @@ const Autocomplete = (_a) => {
|
|
|
125
124
|
Number.isFinite(nextIndex) && setActiveIndex(nextIndex);
|
|
126
125
|
onKeyDown && onKeyDown(e);
|
|
127
126
|
} })),
|
|
128
|
-
canShowDropdown && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }), loading
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
toggleDropdown(false);
|
|
135
|
-
fieldRef.current && fieldRef.current.focus();
|
|
136
|
-
} }, renderItem(item))))
|
|
137
|
-
: (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
|
|
127
|
+
canShowDropdown && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : (react_1.default.createElement(react_1.default.Fragment, null, items && items.length > 0 ? (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: itemSize, key: index, role: 'menuitem', checked: index === activeIndex, onClick: () => {
|
|
128
|
+
onSelect && onSelect(item);
|
|
129
|
+
setActiveIndex(null);
|
|
130
|
+
toggleDropdown(false);
|
|
131
|
+
fieldRef.current && fieldRef.current.focus();
|
|
132
|
+
} }, renderItem(item))))) : (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
|
|
138
133
|
};
|
|
139
134
|
exports.Autocomplete = Autocomplete;
|
package/avatar/index.d.ts
CHANGED
|
@@ -25,6 +25,6 @@ export interface AvatarProps {
|
|
|
25
25
|
/**
|
|
26
26
|
* Компонент аватара.
|
|
27
27
|
* @param props Свойства компонента.
|
|
28
|
-
* @return
|
|
28
|
+
* @return Элемент.
|
|
29
29
|
*/
|
|
30
30
|
export declare const Avatar: ({ size: sizeProp, imageUrl, bgColor, bgOpacity, textColor, title, monogram, className, style, "data-testid": testId, }: AvatarProps) => JSX.Element;
|
package/avatar/index.js
CHANGED
|
@@ -44,7 +44,7 @@ const ICON_SIZES = {
|
|
|
44
44
|
/**
|
|
45
45
|
* Компонент аватара.
|
|
46
46
|
* @param props Свойства компонента.
|
|
47
|
-
* @return
|
|
47
|
+
* @return Элемент.
|
|
48
48
|
*/
|
|
49
49
|
const Avatar = ({ size: sizeProp = 72, imageUrl, bgColor = 'gray4', bgOpacity = 1, textColor = 'gray87', title, monogram = (0, utils_1.getMonogram)(title), className, style, 'data-testid': testId = 'avatar', }) => {
|
|
50
50
|
const [needImage, toggleImage] = (0, react_1.useState)(Boolean(imageUrl));
|
|
@@ -53,9 +53,7 @@ const Avatar = ({ size: sizeProp = 72, imageUrl, bgColor = 'gray4', bgOpacity =
|
|
|
53
53
|
}, [imageUrl]);
|
|
54
54
|
const size = SIZES.includes(sizeProp) ? sizeProp : 72;
|
|
55
55
|
return (react_1.default.createElement("div", { "data-testid": testId, className: cx('root', `size-${size}`, (0, colors_2.color)(textColor), className), style: Object.assign(Object.assign({}, style), { '--avatar-color': !needImage ? colors_1.COLORS.get(bgColor) : undefined, '--avatar-color-opacity': bgOpacity }) },
|
|
56
|
-
!needImage && (react_1.default.createElement(react_1.default.Fragment, null, monogram
|
|
57
|
-
? (react_1.default.createElement("span", { className: cx('monogram') }, monogram.slice(0, 2).toUpperCase()))
|
|
58
|
-
: (react_1.default.createElement(person_1.default, { fill: colors_1.COLORS.get(textColor), width: ICON_SIZES[size], height: ICON_SIZES[size], className: cx('icon') })))),
|
|
56
|
+
!needImage && (react_1.default.createElement(react_1.default.Fragment, null, monogram ? (react_1.default.createElement("span", { className: cx('monogram') }, monogram.slice(0, 2).toUpperCase())) : (react_1.default.createElement(person_1.default, { fill: colors_1.COLORS.get(textColor), width: ICON_SIZES[size], height: ICON_SIZES[size], className: cx('icon') })))),
|
|
59
57
|
needImage && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
60
58
|
react_1.default.createElement("img", { src: imageUrl, alt: '', className: cx('layer', 'image'), onError: () => toggleImage(false) }),
|
|
61
59
|
react_1.default.createElement("div", { className: cx('layer', 'image-overlay') })))));
|
package/avatar/user.d.ts
CHANGED
|
@@ -4,6 +4,6 @@ export declare const colorKey: unique symbol;
|
|
|
4
4
|
/**
|
|
5
5
|
* Компонент аватара пользователя (не сотрудника).
|
|
6
6
|
* @param props Свойства. Поддерживаются свойства Avatar.
|
|
7
|
-
* @return
|
|
7
|
+
* @return Элемент.
|
|
8
8
|
*/
|
|
9
9
|
export declare const UserAvatar: (props: UserAvatarProps) => JSX.Element;
|
package/avatar/user.js
CHANGED
|
@@ -44,7 +44,7 @@ exports.colorKey = Symbol.for('user-avatar:color-key');
|
|
|
44
44
|
/**
|
|
45
45
|
* Компонент аватара пользователя (не сотрудника).
|
|
46
46
|
* @param props Свойства. Поддерживаются свойства Avatar.
|
|
47
|
-
* @return
|
|
47
|
+
* @return Элемент.
|
|
48
48
|
*/
|
|
49
49
|
const UserAvatar = (props) => {
|
|
50
50
|
const [color, setColor] = (0, react_1.useState)();
|
|
@@ -53,6 +53,6 @@ const UserAvatar = (props) => {
|
|
|
53
53
|
window[exports.colorKey] = window[exports.colorKey] || (0, lodash_1.sample)(COLORS);
|
|
54
54
|
setColor(window[exports.colorKey]);
|
|
55
55
|
}, []);
|
|
56
|
-
return
|
|
56
|
+
return react_1.default.createElement(_1.Avatar, Object.assign({}, props, { bgColor: color, bgOpacity: color ? 0.48 : 0, textColor: 'white' }));
|
|
57
57
|
};
|
|
58
58
|
exports.UserAvatar = UserAvatar;
|
package/avatar/utils.js
CHANGED
|
@@ -8,6 +8,12 @@ const lodash_1 = require("lodash");
|
|
|
8
8
|
* @return Монограмма.
|
|
9
9
|
*/
|
|
10
10
|
const getMonogram = (value) => (0, lodash_1.isString)(value)
|
|
11
|
-
? value
|
|
11
|
+
? value
|
|
12
|
+
.split(/\s+/g)
|
|
13
|
+
.slice(0, 2)
|
|
14
|
+
.map(s => s[0])
|
|
15
|
+
.reverse()
|
|
16
|
+
.join('')
|
|
17
|
+
.toUpperCase()
|
|
12
18
|
: '';
|
|
13
19
|
exports.getMonogram = getMonogram;
|
package/base-input/index.d.ts
CHANGED
|
@@ -17,7 +17,7 @@ export declare type BaseInputProps = CustomProps & React.TextareaHTMLAttributes<
|
|
|
17
17
|
/**
|
|
18
18
|
* Компонент поля ввода.
|
|
19
19
|
* @param props Свойства. Поддерживаются свойства элемента input.
|
|
20
|
-
* @return
|
|
20
|
+
* @return Элемент.
|
|
21
21
|
*/
|
|
22
22
|
export declare const BaseInput: React.ForwardRefExoticComponent<CustomProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | undefined>>;
|
|
23
23
|
export {};
|
package/base-input/index.js
CHANGED
|
@@ -43,7 +43,7 @@ const cx = bind_1.default.bind(base_input_module_scss_1.default);
|
|
|
43
43
|
/**
|
|
44
44
|
* Компонент поля ввода.
|
|
45
45
|
* @param props Свойства. Поддерживаются свойства элемента input.
|
|
46
|
-
* @return
|
|
46
|
+
* @return Элемент.
|
|
47
47
|
*/
|
|
48
48
|
exports.BaseInput = (0, react_1.forwardRef)(function BaseInput(_a, ref) {
|
|
49
49
|
var { className, disabled, multiline, onInput, restPlaceholder: restPlaceholderProp, rows = 1, style, value } = _a, props = __rest(_a, ["className", "disabled", "multiline", "onInput", "restPlaceholder", "rows", "style", "value"]);
|
|
@@ -10,6 +10,6 @@ export interface BorderedLayoutProps {
|
|
|
10
10
|
/**
|
|
11
11
|
* Выводит содержимое по мобильному layout'у с вертикальными полосками.
|
|
12
12
|
* @param props Свойства компонента.
|
|
13
|
-
* @return
|
|
13
|
+
* @return Элемент.
|
|
14
14
|
*/
|
|
15
15
|
export declare const BorderedLayout: ({ top, bottom, children }: BorderedLayoutProps) => JSX.Element;
|
package/bordered-layout/index.js
CHANGED
|
@@ -13,7 +13,7 @@ const cx = bind_1.default.bind(bordered_layout_module_scss_1.default);
|
|
|
13
13
|
/**
|
|
14
14
|
* Выводит содержимое по мобильному layout'у с вертикальными полосками.
|
|
15
15
|
* @param props Свойства компонента.
|
|
16
|
-
* @return
|
|
16
|
+
* @return Элемент.
|
|
17
17
|
*/
|
|
18
18
|
const BorderedLayout = ({ top, bottom, children }) => {
|
|
19
19
|
let borderClass;
|
package/box/index.js
CHANGED
|
@@ -34,51 +34,26 @@ const cx = bind_1.default.bind(box_module_scss_1.default);
|
|
|
34
34
|
* Возможные значения свойства "display".
|
|
35
35
|
* @enum {string}
|
|
36
36
|
*/
|
|
37
|
-
const DISPLAY = new Set([
|
|
38
|
-
'block',
|
|
39
|
-
'none',
|
|
40
|
-
'flex',
|
|
41
|
-
'inline',
|
|
42
|
-
'inline-block',
|
|
43
|
-
]);
|
|
37
|
+
const DISPLAY = new Set(['block', 'none', 'flex', 'inline', 'inline-block']);
|
|
44
38
|
/**
|
|
45
39
|
* Возможные значения свойства "flex".
|
|
46
40
|
* @enum {string}
|
|
47
41
|
*/
|
|
48
|
-
const FLEX = new Set([
|
|
49
|
-
'shrink',
|
|
50
|
-
'grow',
|
|
51
|
-
'none',
|
|
52
|
-
]);
|
|
42
|
+
const FLEX = new Set(['shrink', 'grow', 'none']);
|
|
53
43
|
/**
|
|
54
44
|
* Возможные значения свойства "direction".
|
|
55
45
|
* @enum {string}
|
|
56
46
|
*/
|
|
57
|
-
const DIRECTION = new Set([
|
|
58
|
-
'row',
|
|
59
|
-
'column',
|
|
60
|
-
]);
|
|
47
|
+
const DIRECTION = new Set(['row', 'column']);
|
|
61
48
|
/**
|
|
62
49
|
* Возможные значения свойства "alignItems".
|
|
63
50
|
* @enum {string}
|
|
64
51
|
*/
|
|
65
|
-
const ALIGN_ITEMS = new Set([
|
|
66
|
-
'start',
|
|
67
|
-
'end',
|
|
68
|
-
'center',
|
|
69
|
-
'baseline',
|
|
70
|
-
'stretch',
|
|
71
|
-
]);
|
|
52
|
+
const ALIGN_ITEMS = new Set(['start', 'end', 'center', 'baseline', 'stretch']);
|
|
72
53
|
/**
|
|
73
54
|
* Возможные значения свойства "justifyContent".
|
|
74
55
|
*/
|
|
75
|
-
const JUSTIFY_CONTENT = new Set([
|
|
76
|
-
'start',
|
|
77
|
-
'end',
|
|
78
|
-
'center',
|
|
79
|
-
'between',
|
|
80
|
-
'around',
|
|
81
|
-
]);
|
|
56
|
+
const JUSTIFY_CONTENT = new Set(['start', 'end', 'center', 'between', 'around']);
|
|
82
57
|
/**
|
|
83
58
|
* Компонент блока, реализующего оформление в соответствии с дизайн-системой.
|
|
84
59
|
* @param props Свойства.
|
|
@@ -158,9 +133,12 @@ const getMarginClasses = ({ margin, marginTop, marginBottom, marginLeft, marginR
|
|
|
158
133
|
const hasMarginBottom = isValid(marginBottom);
|
|
159
134
|
const hasMarginLeft = isValid(marginLeft);
|
|
160
135
|
const hasMarginRight = isValid(marginRight);
|
|
161
|
-
hasMargin &&
|
|
162
|
-
|
|
163
|
-
|
|
136
|
+
hasMargin &&
|
|
137
|
+
result.push(!hasMarginTop && !hasMarginY && Spacing.marginTop(margin), !hasMarginBottom && !hasMarginY && Spacing.marginBottom(margin), !hasMarginLeft && !hasMarginX && Spacing.marginLeft(margin), !hasMarginRight && !hasMarginX && Spacing.marginRight(margin));
|
|
138
|
+
hasMarginX &&
|
|
139
|
+
result.push(!hasMarginLeft && Spacing.marginLeft(marginX), !hasMarginRight && Spacing.marginRight(marginX));
|
|
140
|
+
hasMarginY &&
|
|
141
|
+
result.push(!hasMarginTop && Spacing.marginTop(marginY), !hasMarginBottom && Spacing.marginBottom(marginY));
|
|
164
142
|
hasMarginTop && result.push(Spacing.marginTop(marginTop));
|
|
165
143
|
hasMarginRight && result.push(Spacing.marginRight(marginRight));
|
|
166
144
|
hasMarginBottom && result.push(Spacing.marginBottom(marginBottom));
|
|
@@ -189,9 +167,12 @@ const getPaddingClasses = ({ padding, paddingTop, paddingBottom, paddingLeft, pa
|
|
|
189
167
|
const hasPaddingBottom = isValid(paddingBottom);
|
|
190
168
|
const hasPaddingLeft = isValid(paddingLeft);
|
|
191
169
|
const hasPaddingRight = isValid(paddingRight);
|
|
192
|
-
hasPadding &&
|
|
193
|
-
|
|
194
|
-
|
|
170
|
+
hasPadding &&
|
|
171
|
+
result.push(!hasPaddingTop && !hasPaddingY && Spacing.paddingTop(padding), !hasPaddingBottom && !hasPaddingY && Spacing.paddingBottom(padding), !hasPaddingLeft && !hasPaddingX && Spacing.paddingLeft(padding), !hasPaddingRight && !hasPaddingX && Spacing.paddingRight(padding));
|
|
172
|
+
hasPaddingX &&
|
|
173
|
+
result.push(!hasPaddingLeft && Spacing.paddingLeft(paddingX), !hasPaddingRight && Spacing.paddingRight(paddingX));
|
|
174
|
+
hasPaddingY &&
|
|
175
|
+
result.push(!hasPaddingTop && Spacing.paddingTop(paddingY), !hasPaddingBottom && Spacing.paddingBottom(paddingY));
|
|
195
176
|
hasPaddingTop && result.push(Spacing.paddingTop(paddingTop));
|
|
196
177
|
hasPaddingRight && result.push(Spacing.paddingRight(paddingRight));
|
|
197
178
|
hasPaddingBottom && result.push(Spacing.paddingBottom(paddingBottom));
|
package/button/index.d.ts
CHANGED
|
@@ -18,11 +18,11 @@ interface CustomProps<T extends Appearance = Appearance> {
|
|
|
18
18
|
'data-testid'?: string;
|
|
19
19
|
}
|
|
20
20
|
declare type ExcludeKeys<T> = Omit<T, 'ref' | keyof CustomProps>;
|
|
21
|
-
export declare type Props = (CustomProps<'button'> & ExcludeKeys<JSX.IntrinsicElements['button']> | CustomProps<'link'> & ExcludeKeys<JSX.IntrinsicElements['a']> | CustomProps<'container'> & ExcludeKeys<JSX.IntrinsicElements['div']>);
|
|
21
|
+
export declare type Props = (CustomProps<'button'> & ExcludeKeys<JSX.IntrinsicElements['button']>) | (CustomProps<'link'> & ExcludeKeys<JSX.IntrinsicElements['a']>) | (CustomProps<'container'> & ExcludeKeys<JSX.IntrinsicElements['div']>);
|
|
22
22
|
/**
|
|
23
|
-
* Компонент
|
|
23
|
+
* Компонент кнопки, стилизованной по дизайн-гайдам.
|
|
24
24
|
* @param props Свойства.
|
|
25
|
-
* @return
|
|
25
|
+
* @return Элемент.
|
|
26
26
|
*/
|
|
27
27
|
export declare const Button: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
|
|
28
28
|
/**
|
package/button/index.js
CHANGED
|
@@ -40,9 +40,9 @@ const bind_1 = __importDefault(require("classnames/bind"));
|
|
|
40
40
|
const button_module_scss_1 = __importDefault(require("./button.module.scss"));
|
|
41
41
|
const cx = bind_1.default.bind(button_module_scss_1.default);
|
|
42
42
|
/**
|
|
43
|
-
* Компонент
|
|
43
|
+
* Компонент кнопки, стилизованной по дизайн-гайдам.
|
|
44
44
|
* @param props Свойства.
|
|
45
|
-
* @return
|
|
45
|
+
* @return Элемент.
|
|
46
46
|
*/
|
|
47
47
|
exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
|
|
48
48
|
var { children, className, viewType = 'primary', appearance = 'button', size = 'm', icon: Icon, iconPosition = 'start', 'data-testid': testId = 'button' } = _a, restProps = __rest(_a, ["children", "className", "viewType", "appearance", "size", "icon", "iconPosition", 'data-testid']);
|
|
@@ -55,10 +55,10 @@ exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
|
|
|
55
55
|
withContent: Boolean(children) && children !== 0,
|
|
56
56
|
iconPosition,
|
|
57
57
|
});
|
|
58
|
-
return (react_1.default.createElement(Element, Object.assign({}, restProps, moreProps, { "data-testid": testId, ref: ref, className: readyClassName, children:
|
|
58
|
+
return (react_1.default.createElement(Element, Object.assign({}, restProps, moreProps, { "data-testid": testId, ref: ref, className: readyClassName, children: react_1.default.createElement(react_1.default.Fragment, null,
|
|
59
59
|
Icon && iconPosition === 'start' && (react_1.default.createElement(Icon, { width: 24, height: 24, className: cx('icon', children && 'icon-start') })),
|
|
60
60
|
children,
|
|
61
|
-
Icon && iconPosition === 'end' && (react_1.default.createElement(Icon, { width: 24, height: 24, className: cx('icon', children && 'icon-end') })))
|
|
61
|
+
Icon && iconPosition === 'end' && (react_1.default.createElement(Icon, { width: 24, height: 24, className: cx('icon', children && 'icon-end') }))) })));
|
|
62
62
|
});
|
|
63
63
|
/**
|
|
64
64
|
* Возвращает строку с классами для стилизации кнопки.
|
package/card/slots.js
CHANGED
|
@@ -63,7 +63,7 @@ exports.CardHeader.displayName = 'Card.Header';
|
|
|
63
63
|
*/
|
|
64
64
|
const CardContent = (_a) => {
|
|
65
65
|
var { className } = _a, restProps = __rest(_a, ["className"]);
|
|
66
|
-
return
|
|
66
|
+
return react_1.default.createElement("div", Object.assign({}, restProps, { className: (0, classnames_1.default)(card_module_scss_1.default.content, className) }));
|
|
67
67
|
};
|
|
68
68
|
exports.CardContent = CardContent;
|
|
69
69
|
exports.CardContent.displayName = 'Card.Content';
|
package/carousel/draggable.js
CHANGED
|
@@ -81,11 +81,12 @@ class Draggable extends react_1.Component {
|
|
|
81
81
|
*/
|
|
82
82
|
passControl() {
|
|
83
83
|
const { takeControl } = this.props;
|
|
84
|
-
takeControl &&
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
takeControl &&
|
|
85
|
+
takeControl({
|
|
86
|
+
isGrabbed: () => this.isGrabbed,
|
|
87
|
+
setOffset: this.setOffset.bind(this),
|
|
88
|
+
toggleTransition: this.toggleTransition.bind(this),
|
|
89
|
+
});
|
|
89
90
|
}
|
|
90
91
|
/**
|
|
91
92
|
* Выполняет отписку от глобальных событий.
|
|
@@ -108,10 +109,11 @@ class Draggable extends react_1.Component {
|
|
|
108
109
|
event.preventDefault();
|
|
109
110
|
window.getSelection().removeAllRanges();
|
|
110
111
|
}
|
|
111
|
-
onDragStart &&
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
onDragStart &&
|
|
113
|
+
onDragStart(new draggable_event_1.default({
|
|
114
|
+
offset: (0, point_1.default)(x, y),
|
|
115
|
+
client: (0, events_1.getEventClientPos)(event),
|
|
116
|
+
}));
|
|
115
117
|
}
|
|
116
118
|
}
|
|
117
119
|
/**
|
|
@@ -198,9 +200,7 @@ class Draggable extends react_1.Component {
|
|
|
198
200
|
const { current: draggableEl } = this.draggableRef;
|
|
199
201
|
if (draggableEl && this.hasTransition !== Boolean(active)) {
|
|
200
202
|
this.hasTransition = Boolean(active);
|
|
201
|
-
draggableEl.style.transition = active
|
|
202
|
-
? (0, styles_1.getTransitionStyle)(duration, 'transform')
|
|
203
|
-
: '';
|
|
203
|
+
draggableEl.style.transition = active ? (0, styles_1.getTransitionStyle)(duration, 'transform') : '';
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
206
|
/**
|
|
@@ -236,14 +236,12 @@ class Draggable extends react_1.Component {
|
|
|
236
236
|
* @inheritdoc
|
|
237
237
|
*/
|
|
238
238
|
render() {
|
|
239
|
-
const { children, containerProps = {}, transitionDuration: duration = 320
|
|
239
|
+
const { children, containerProps = {}, transitionDuration: duration = 320 } = this.props;
|
|
240
240
|
const { x, y } = this.currentOffset;
|
|
241
241
|
return (react_1.default.createElement("div", Object.assign({}, containerProps, { className: cx('draggable-container', containerProps.className), onClick: this.handleClick, onMouseDown: this.startCapture, onTouchStart: this.startCapture }),
|
|
242
242
|
react_1.default.createElement("div", { ref: this.draggableRef, style: {
|
|
243
243
|
transform: (0, styles_1.getTranslateStyle)(x, y),
|
|
244
|
-
transition: this.hasTransition
|
|
245
|
-
? (0, styles_1.getTransitionStyle)(duration, 'transform')
|
|
246
|
-
: '',
|
|
244
|
+
transition: this.hasTransition ? (0, styles_1.getTransitionStyle)(duration, 'transform') : '',
|
|
247
245
|
}, className: cx('draggable'), children: children })));
|
|
248
246
|
}
|
|
249
247
|
}
|
package/carousel/index.d.ts
CHANGED
|
@@ -237,7 +237,7 @@ export declare class Carousel extends Component<CarouselProps, State> {
|
|
|
237
237
|
* @param options.targetIndex Индекс.
|
|
238
238
|
* @param options.needTransition Нужна ли плавная анимация прокрутки.
|
|
239
239
|
*/
|
|
240
|
-
scrollToItem({ targetIndex, needTransition
|
|
240
|
+
scrollToItem({ targetIndex, needTransition }?: {
|
|
241
241
|
targetIndex?: number | undefined;
|
|
242
242
|
needTransition?: boolean | undefined;
|
|
243
243
|
}): void;
|
package/carousel/index.js
CHANGED
|
@@ -55,9 +55,7 @@ class Carousel extends react_1.Component {
|
|
|
55
55
|
this.infinite = Boolean(infinite);
|
|
56
56
|
this.dragStartClient = (0, point_1.default)();
|
|
57
57
|
this.dragStartOffset = (0, point_1.default)();
|
|
58
|
-
this.currentIndex = (0, lodash_1.inRange)(targetIndex, (0, lodash_1.size)(items))
|
|
59
|
-
? targetIndex
|
|
60
|
-
: 0;
|
|
58
|
+
this.currentIndex = (0, lodash_1.inRange)(targetIndex, (0, lodash_1.size)(items)) ? targetIndex : 0;
|
|
61
59
|
this.state = {
|
|
62
60
|
currentOffset: 0,
|
|
63
61
|
isAllItemsVisible: false,
|
|
@@ -85,7 +83,7 @@ class Carousel extends react_1.Component {
|
|
|
85
83
|
* @return Элемент списка.
|
|
86
84
|
*/
|
|
87
85
|
static defaultRenderItem(item, index) {
|
|
88
|
-
return
|
|
86
|
+
return react_1.default.createElement("div", { key: index }, String(item));
|
|
89
87
|
}
|
|
90
88
|
/**
|
|
91
89
|
* Возвращает кнопку управления.
|
|
@@ -162,15 +160,13 @@ class Carousel extends react_1.Component {
|
|
|
162
160
|
*/
|
|
163
161
|
componentDidUpdate(prevProps) {
|
|
164
162
|
const { autoplay, targetIndex } = this.props;
|
|
165
|
-
const { autoplay: prevAutoplay, targetIndex: prevTargetIndex
|
|
163
|
+
const { autoplay: prevAutoplay, targetIndex: prevTargetIndex } = prevProps;
|
|
166
164
|
if (targetIndex !== prevTargetIndex) {
|
|
167
165
|
this.setCurrentIndex(targetIndex || 0);
|
|
168
166
|
this.toggleDragTransition(true);
|
|
169
167
|
}
|
|
170
168
|
if (!autoplay !== !prevAutoplay) {
|
|
171
|
-
autoplay
|
|
172
|
-
? this.enableAutoplay()
|
|
173
|
-
: this.disableAutoplay();
|
|
169
|
+
autoplay ? this.enableAutoplay() : this.disableAutoplay();
|
|
174
170
|
}
|
|
175
171
|
this.updateItemsVisibility();
|
|
176
172
|
}
|
|
@@ -237,9 +233,7 @@ class Carousel extends react_1.Component {
|
|
|
237
233
|
*/
|
|
238
234
|
moveForward() {
|
|
239
235
|
const { step = 3 } = this.props;
|
|
240
|
-
this.infinite
|
|
241
|
-
? this.moveInfinite(step, true)
|
|
242
|
-
: this.moveForwardFinite(step);
|
|
236
|
+
this.infinite ? this.moveInfinite(step, true) : this.moveForwardFinite(step);
|
|
243
237
|
}
|
|
244
238
|
/**
|
|
245
239
|
* Выполняет конечную прокрутку карусели вперед.
|
|
@@ -258,9 +252,7 @@ class Carousel extends react_1.Component {
|
|
|
258
252
|
*/
|
|
259
253
|
moveBackward() {
|
|
260
254
|
const { step = 3 } = this.props;
|
|
261
|
-
this.infinite
|
|
262
|
-
? this.moveInfinite(step, false)
|
|
263
|
-
: this.moveBackwardFinite(step);
|
|
255
|
+
this.infinite ? this.moveInfinite(step, false) : this.moveBackwardFinite(step);
|
|
264
256
|
}
|
|
265
257
|
/**
|
|
266
258
|
* Выполняет конечную прокрутку карусели назад.
|
|
@@ -281,9 +273,7 @@ class Carousel extends react_1.Component {
|
|
|
281
273
|
needBreakLoop: passed => !passed,
|
|
282
274
|
});
|
|
283
275
|
this.toggleDragTransition(true);
|
|
284
|
-
this.setCurrentIndex(newIndex !== -1 && newIndex - step >= 0
|
|
285
|
-
? newIndex - step
|
|
286
|
-
: 0);
|
|
276
|
+
this.setCurrentIndex(newIndex !== -1 && newIndex - step >= 0 ? newIndex - step : 0);
|
|
287
277
|
}
|
|
288
278
|
/**
|
|
289
279
|
* Выполняет прокрутка в бесконечном режиме.
|
|
@@ -295,7 +285,8 @@ class Carousel extends react_1.Component {
|
|
|
295
285
|
const { currentOffset } = this.state;
|
|
296
286
|
const { items, vertical } = this.props;
|
|
297
287
|
const realItemsCount = (0, lodash_1.size)(items);
|
|
298
|
-
if ((forward && currentIndex >= realItemsCount) ||
|
|
288
|
+
if ((forward && currentIndex >= realItemsCount) ||
|
|
289
|
+
(!forward && currentIndex < realItemsCount)) {
|
|
299
290
|
const itemsSize = this.listElement[vertical ? 'scrollHeight' : 'scrollWidth'] / CLONE_FACTOR;
|
|
300
291
|
const newOffset = currentOffset + (forward ? itemsSize : -itemsSize);
|
|
301
292
|
const newIndex = currentIndex + (forward ? -realItemsCount : realItemsCount);
|
|
@@ -308,9 +299,7 @@ class Carousel extends react_1.Component {
|
|
|
308
299
|
this.setCurrentIndex(this.currentIndex + (forward ? step : -step));
|
|
309
300
|
}
|
|
310
301
|
else {
|
|
311
|
-
forward
|
|
312
|
-
? this.moveForwardFinite(step)
|
|
313
|
-
: this.moveBackwardFinite(step);
|
|
302
|
+
forward ? this.moveForwardFinite(step) : this.moveBackwardFinite(step);
|
|
314
303
|
}
|
|
315
304
|
}
|
|
316
305
|
/**
|
|
@@ -380,7 +369,7 @@ class Carousel extends react_1.Component {
|
|
|
380
369
|
* @param dragEvent Событие.
|
|
381
370
|
*/
|
|
382
371
|
onDragEnd({ offset: endOffset, client: endClient }) {
|
|
383
|
-
const { dragStartOffset: startOffset, dragStartClient: startClient
|
|
372
|
+
const { dragStartOffset: startOffset, dragStartClient: startClient } = this;
|
|
384
373
|
if (this.listElement && !(0, lodash_1.isEqual)(startOffset, endOffset)) {
|
|
385
374
|
const { backward } = this.defineDirection(startClient, endClient);
|
|
386
375
|
const lastIndex = (0, max_index_of_1.default)(this.listElement.children);
|
|
@@ -396,7 +385,7 @@ class Carousel extends react_1.Component {
|
|
|
396
385
|
backward,
|
|
397
386
|
}),
|
|
398
387
|
// если прокрутили вперед, завершаем поиск когда нашли первый прошедший проверку, иначе - первый непрошедший
|
|
399
|
-
needBreakLoop: passed => backward ? !passed : passed,
|
|
388
|
+
needBreakLoop: passed => (backward ? !passed : passed),
|
|
400
389
|
});
|
|
401
390
|
this.setCurrentIndex(newIndex !== -1 ? newIndex : edgeIndex);
|
|
402
391
|
this.toggleDragTransition(true);
|
|
@@ -435,7 +424,7 @@ class Carousel extends react_1.Component {
|
|
|
435
424
|
* @param options.targetIndex Индекс.
|
|
436
425
|
* @param options.needTransition Нужна ли плавная анимация прокрутки.
|
|
437
426
|
*/
|
|
438
|
-
scrollToItem({ targetIndex = this.currentIndex, needTransition = true
|
|
427
|
+
scrollToItem({ targetIndex = this.currentIndex, needTransition = true } = {}) {
|
|
439
428
|
const targetItemEl = this.listElement.children[targetIndex];
|
|
440
429
|
if (targetItemEl) {
|
|
441
430
|
this.toggleDragTransition(needTransition);
|
|
@@ -446,16 +435,12 @@ class Carousel extends react_1.Component {
|
|
|
446
435
|
const { vertical } = this.props;
|
|
447
436
|
const viewport = this.getViewport();
|
|
448
437
|
const targetItemPos = (0, get_relative_pos_1.default)(targetItemEl);
|
|
449
|
-
const viewportEndBound = vertical
|
|
450
|
-
? viewport.bottom
|
|
451
|
-
: viewport.right;
|
|
438
|
+
const viewportEndBound = vertical ? viewport.bottom : viewport.right;
|
|
452
439
|
const nextItemsEndBound = vertical
|
|
453
440
|
? viewport.top + this.listElement.scrollHeight - targetItemPos.y
|
|
454
441
|
: viewport.left + this.listElement.scrollWidth - targetItemPos.x;
|
|
455
442
|
if (nextItemsEndBound >= viewportEndBound) {
|
|
456
|
-
const itemBound = vertical
|
|
457
|
-
? targetItemPos.y
|
|
458
|
-
: targetItemPos.x;
|
|
443
|
+
const itemBound = vertical ? targetItemPos.y : targetItemPos.x;
|
|
459
444
|
this.setCurrentOffset(-itemBound);
|
|
460
445
|
}
|
|
461
446
|
else {
|
|
@@ -485,9 +470,7 @@ class Carousel extends react_1.Component {
|
|
|
485
470
|
let minOffset = NaN;
|
|
486
471
|
if (this.listElement) {
|
|
487
472
|
const viewport = this.getViewport();
|
|
488
|
-
const viewportEndBound = vertical
|
|
489
|
-
? viewport.bottom
|
|
490
|
-
: viewport.right;
|
|
473
|
+
const viewportEndBound = vertical ? viewport.bottom : viewport.right;
|
|
491
474
|
const maxItemsEndBound = vertical
|
|
492
475
|
? viewport.top + this.listElement.scrollHeight
|
|
493
476
|
: viewport.left + this.listElement.scrollWidth;
|
|
@@ -570,10 +553,7 @@ class Carousel extends react_1.Component {
|
|
|
570
553
|
}, onMouseLeave: () => {
|
|
571
554
|
autoplay && autoplayHoverPause && !this.isGrabbed() && this.toggleAutoMove(true);
|
|
572
555
|
} }),
|
|
573
|
-
react_1.default.createElement(draggable_1.default, { active: this.canDrag(), axis: vertical ? 'y' : 'x', transitionDuration: 320, containerProps: Object.assign(Object.assign({}, viewportElementProps), { ref: this.wrapperRef, className: cx('full-size', viewportElementProps.className) }), takeControl: this.takeDragControl, onDragStart: this.onDragStart, onDragMove: this.onDragMove, onDragEnd: this.onDragEnd, children:
|
|
574
|
-
'carousel-items-container',
|
|
575
|
-
vertical && 'vertical',
|
|
576
|
-
]), ref: this.containerRef, children: this.renderItems() })) }),
|
|
556
|
+
react_1.default.createElement(draggable_1.default, { active: this.canDrag(), axis: vertical ? 'y' : 'x', transitionDuration: 320, containerProps: Object.assign(Object.assign({}, viewportElementProps), { ref: this.wrapperRef, className: cx('full-size', viewportElementProps.className) }), takeControl: this.takeDragControl, onDragStart: this.onDragStart, onDragMove: this.onDragMove, onDragEnd: this.onDragEnd, children: react_1.default.createElement("div", { className: cx(['carousel-items-container', vertical && 'vertical']), ref: this.containerRef, children: this.renderItems() }) }),
|
|
577
557
|
needShowControls && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
578
558
|
renderControl({
|
|
579
559
|
type: 'backward',
|
package/chips/index.js
CHANGED
|
@@ -31,7 +31,7 @@ const Chips = (_a) => {
|
|
|
31
31
|
const { href, target, children, withCross } = item;
|
|
32
32
|
return (react_1.default.createElement("a", { href: href, role: href ? undefined : 'button', key: index, className: cx('item', (isItemChecked === null || isItemChecked === void 0 ? void 0 : isItemChecked(item, index)) && 'checked'), target: target, onClick: e => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e), "data-testid": 'chips:item' },
|
|
33
33
|
react_1.default.createElement("span", { className: chips_module_scss_1.default.text }, children),
|
|
34
|
-
withCross &&
|
|
34
|
+
withCross && react_1.default.createElement(cross_1.default, { className: cx('cross-svg') })));
|
|
35
35
|
})));
|
|
36
36
|
};
|
|
37
37
|
exports.Chips = Chips;
|
package/clean-buttons/index.js
CHANGED
|
@@ -44,9 +44,7 @@ const cx = bind_1.default.bind(clean_buttons_module_scss_1.default);
|
|
|
44
44
|
* @param props Свойства.
|
|
45
45
|
* @return Элемент.
|
|
46
46
|
*/
|
|
47
|
-
const CleanGroup = ({ children }) => (react_1.default.createElement("div", { className: cx('clean-group') }, react_1.Children.toArray(children).map(item => (0, react_1.isValidElement)(item) && item.type === CleanButton
|
|
48
|
-
? item
|
|
49
|
-
: null)));
|
|
47
|
+
const CleanGroup = ({ children }) => (react_1.default.createElement("div", { className: cx('clean-group') }, react_1.Children.toArray(children).map(item => (0, react_1.isValidElement)(item) && item.type === CleanButton ? item : null)));
|
|
50
48
|
/**
|
|
51
49
|
* Компонент прозрачной кнопки.
|
|
52
50
|
* @param props Свойства. Поддерживаются свойства элементов button/a (зависит от того, передан ли asLink).
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
background: colors.$gray12;
|
|
41
41
|
|
|
42
42
|
// используем 10 чтобы проще считать коэффициенты масштабирования
|
|
43
|
-
// ВАЖНО: не надо использовать здесь число
|
|
43
|
+
// ВАЖНО: не надо использовать здесь число больше чем размер родителя с overflow:hidden - моргает в Safari
|
|
44
44
|
width: 10px;
|
|
45
45
|
height: 10px;
|
|
46
46
|
|
|
47
47
|
// используем scale() чтобы плавное изменение размера выглядело нормально
|
|
48
|
-
transform: translate3d(-50%, -50%, 0) scale(calc(
|
|
48
|
+
transform: translate3d(-50%, -50%, 0) scale(calc(var(--dot-size) / 10));
|
|
49
49
|
transition: transform 0.3s, background 0.3s;
|
|
50
50
|
}
|
|
51
51
|
&.active::after {
|
package/field-grid/index.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ export interface FieldGridComponent extends React.FC<FieldGridProps> {
|
|
|
33
33
|
* @param props Свойства.
|
|
34
34
|
* @param props.children Содержимое, дочерними элементами могут быть только FieldGrid.Row.
|
|
35
35
|
* @param props.rootProps Свойства корневого элемента.
|
|
36
|
-
* @return
|
|
36
|
+
* @return Элемент.
|
|
37
37
|
*/
|
|
38
38
|
export declare const FieldGrid: FieldGridComponent;
|
|
39
39
|
/**
|
|
@@ -52,7 +52,7 @@ declare const Row: React.FC<RowProps>;
|
|
|
52
52
|
* @param props.rounds Скругления для поля (будет задан автоматически).
|
|
53
53
|
* @param props.field Поле.
|
|
54
54
|
* @param props.renderField Должна вернуть поле получив свойства для него.
|
|
55
|
-
* @return
|
|
55
|
+
* @return Элемент.
|
|
56
56
|
*/
|
|
57
57
|
declare const Cell: React.FC<CellProps>;
|
|
58
58
|
export {};
|