colibri-ui 0.7.79 → 0.7.80
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/Accordion/Accordion.module.css +51 -0
- package/Accordion/index.d.ts +9 -0
- package/Accordion/index.js +67 -0
- package/Accordion/package.json +6 -0
- package/Avatar/Avatar.module.css +2 -2
- package/Avatar/index.d.ts +2 -2
- package/Avatar/index.js +4 -4
- package/Avatar/index.props.d.ts +1 -1
- package/Badge/index.js +1 -1
- package/Button/Button.module.css +2 -2
- package/Button/index.js +5 -2
- package/Button/index.props.d.ts +1 -0
- package/Calendar/components/Month/Month.js +2 -0
- package/Calendar/index.js +12 -6
- package/Checkbox/index.js +1 -1
- package/Chip/index.js +1 -1
- package/Dropdown/index.js +9 -7
- package/InputRadio/index.js +1 -1
- package/Menu/components/MenuItem/index.js +2 -1
- package/Menu/index.js +1 -1
- package/Modal/index.js +2 -2
- package/Select/components/MenuOverlay/index.js +5 -3
- package/Select/index.js +2 -2
- package/Tooltip/index.js +1 -1
- package/Tooltip/index.props.d.ts +0 -1
- package/base/FormField/index.js +2 -2
- package/base/InputRoot/index.js +1 -1
- package/esm/Accordion/Accordion.module.css +51 -0
- package/esm/Accordion/index.d.ts +9 -0
- package/esm/Accordion/index.js +57 -0
- package/esm/Avatar/Avatar.module.css +2 -2
- package/esm/Avatar/index.d.ts +2 -2
- package/esm/Avatar/index.js +3 -3
- package/esm/Avatar/index.props.d.ts +1 -1
- package/esm/Badge/index.js +1 -1
- package/esm/Button/Button.module.css +2 -2
- package/esm/Button/index.js +5 -2
- package/esm/Button/index.props.d.ts +1 -0
- package/esm/Calendar/components/Month/Month.js +2 -0
- package/esm/Calendar/index.js +12 -6
- package/esm/Checkbox/index.js +1 -1
- package/esm/Chip/index.js +1 -1
- package/esm/Dropdown/index.js +8 -6
- package/esm/InputRadio/index.js +1 -1
- package/esm/Menu/components/MenuItem/index.js +2 -1
- package/esm/Menu/index.js +1 -1
- package/esm/Modal/index.js +2 -2
- package/esm/Select/components/MenuOverlay/index.js +5 -3
- package/esm/Select/index.js +2 -2
- package/esm/Tooltip/index.js +1 -1
- package/esm/Tooltip/index.props.d.ts +0 -1
- package/esm/base/FormField/index.js +2 -2
- package/esm/base/InputRoot/index.js +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/index.d.ts +1 -0
- package/index.js +61 -59
- package/package.json +1 -1
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
overflow: hidden;
|
|
3
|
+
padding: 14px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.content {
|
|
7
|
+
block-size: 0;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
transition: block-size 0.2s ease-in-out;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.button {
|
|
13
|
+
align-items: center;
|
|
14
|
+
background: none;
|
|
15
|
+
border: none;
|
|
16
|
+
color: initial;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
display: flex;
|
|
19
|
+
font: inherit;
|
|
20
|
+
gap: 8px;
|
|
21
|
+
inline-size: 100%;
|
|
22
|
+
outline: none;
|
|
23
|
+
padding: 0;
|
|
24
|
+
}
|
|
25
|
+
.button svg {
|
|
26
|
+
flex: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.text {
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
text-overflow: ellipsis;
|
|
32
|
+
white-space: nowrap;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.header {
|
|
36
|
+
margin-block-end: 14px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.chevron {
|
|
40
|
+
transition: transform 0.2s ease-in-out;
|
|
41
|
+
}
|
|
42
|
+
.chevron_open {
|
|
43
|
+
transform: rotate(180deg);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.line {
|
|
47
|
+
background-color: var(--palette-bg-3);
|
|
48
|
+
block-size: 1px;
|
|
49
|
+
flex: 1;
|
|
50
|
+
margin-inline-start: 8px;
|
|
51
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var classNames = require('classnames/bind');
|
|
7
|
+
require('../Icons/index.js');
|
|
8
|
+
var index = require('../Typography/index.js');
|
|
9
|
+
var styles = require('./Accordion.module.css');
|
|
10
|
+
var Chevron = require('../Icons/Chevron.js');
|
|
11
|
+
|
|
12
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
15
|
+
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
16
|
+
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
17
|
+
|
|
18
|
+
var clx = classNames__default.default.bind(styles__default.default);
|
|
19
|
+
var Accordion = function Accordion(_a) {
|
|
20
|
+
var title = _a.title,
|
|
21
|
+
_b = _a.boldTitle,
|
|
22
|
+
boldTitle = _b === void 0 ? false : _b,
|
|
23
|
+
children = _a.children,
|
|
24
|
+
className = _a.className,
|
|
25
|
+
tabIndex = _a.tabIndex;
|
|
26
|
+
var _c = React.useState(false),
|
|
27
|
+
isOpen = _c[0],
|
|
28
|
+
setIsOpen = _c[1];
|
|
29
|
+
var contentRef = React.useRef(null);
|
|
30
|
+
var toggleAccordion = function toggleAccordion() {
|
|
31
|
+
return setIsOpen(!isOpen);
|
|
32
|
+
};
|
|
33
|
+
React.useEffect(function () {
|
|
34
|
+
if (contentRef.current) {
|
|
35
|
+
contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0px";
|
|
36
|
+
}
|
|
37
|
+
}, [isOpen]);
|
|
38
|
+
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
39
|
+
className: clx("root", className)
|
|
40
|
+
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
41
|
+
className: clx("header")
|
|
42
|
+
}, /*#__PURE__*/React__default.default.createElement("button", {
|
|
43
|
+
className: clx("button"),
|
|
44
|
+
onClick: toggleAccordion,
|
|
45
|
+
type: "button",
|
|
46
|
+
role: "button",
|
|
47
|
+
"aria-expanded": isOpen,
|
|
48
|
+
tabIndex: tabIndex,
|
|
49
|
+
"aria-label": "Toggle"
|
|
50
|
+
}, /*#__PURE__*/React__default.default.createElement(Chevron.default, {
|
|
51
|
+
className: clx("chevron", {
|
|
52
|
+
chevron_open: isOpen
|
|
53
|
+
}),
|
|
54
|
+
width: 20,
|
|
55
|
+
height: 20
|
|
56
|
+
}), /*#__PURE__*/React__default.default.createElement(index.default, {
|
|
57
|
+
className: clx("text"),
|
|
58
|
+
fontWeight: boldTitle ? "bold" : "normal"
|
|
59
|
+
}, title), /*#__PURE__*/React__default.default.createElement("div", {
|
|
60
|
+
className: clx("line")
|
|
61
|
+
}))), /*#__PURE__*/React__default.default.createElement("div", {
|
|
62
|
+
ref: contentRef,
|
|
63
|
+
className: clx("content")
|
|
64
|
+
}, children));
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
exports.default = Accordion;
|
package/Avatar/Avatar.module.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
.avatar {
|
|
2
|
-
transition: border-color 0.15s ease;
|
|
3
2
|
border-radius: 100%;
|
|
4
3
|
box-sizing: border-box;
|
|
4
|
+
transition: border-color 0.15s ease;
|
|
5
5
|
}
|
|
6
6
|
.avatar_bordered {
|
|
7
|
-
border: 4px solid transparent;
|
|
8
7
|
background-color: var(--palette-white);
|
|
8
|
+
border: 4px solid transparent;
|
|
9
9
|
}
|
|
10
10
|
.avatar_bordered:hover {
|
|
11
11
|
border-color: rgba(95, 99, 104, 0.24);
|
package/Avatar/index.d.ts
CHANGED
package/Avatar/index.js
CHANGED
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var classNames = require('classnames/bind');
|
|
6
7
|
var constants = require('./constants.js');
|
|
7
8
|
var maleCircle = require('./assets/male-circle.svg.js');
|
|
8
9
|
var orgCircle = require('./assets/org-circle.svg.js');
|
|
9
10
|
var styles = require('./Avatar.module.css');
|
|
10
|
-
var classNames = require('classnames/bind');
|
|
11
11
|
var index_props = require('./index.props.js');
|
|
12
12
|
|
|
13
13
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
14
|
|
|
15
15
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
16
|
-
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
17
16
|
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
17
|
+
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
18
18
|
|
|
19
19
|
var clx = classNames__default.default.bind(styles__default.default);
|
|
20
20
|
var Avatar = /*#__PURE__*/React.memo(function (props) {
|
|
@@ -24,7 +24,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
|
|
|
24
24
|
className = props.className,
|
|
25
25
|
bordered = props.bordered,
|
|
26
26
|
_b = props.title,
|
|
27
|
-
title = _b === void 0 ?
|
|
27
|
+
title = _b === void 0 ? "" : _b,
|
|
28
28
|
_c = props.accountType,
|
|
29
29
|
accountType = _c === void 0 ? index_props.AccountType.Organization : _c;
|
|
30
30
|
var isOrg = accountType === index_props.AccountType.Organization;
|
|
@@ -35,7 +35,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
|
|
|
35
35
|
width: size,
|
|
36
36
|
height: size,
|
|
37
37
|
className: clx(styles__default.default.avatar, {
|
|
38
|
-
|
|
38
|
+
avatar_bordered: !!bordered
|
|
39
39
|
}, [className])
|
|
40
40
|
});
|
|
41
41
|
});
|
package/Avatar/index.props.d.ts
CHANGED
package/Badge/index.js
CHANGED
|
@@ -46,7 +46,7 @@ var Badge = function Badge(_a) {
|
|
|
46
46
|
className: clx((_b = {
|
|
47
47
|
root: true
|
|
48
48
|
}, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
|
|
49
|
-
"data-
|
|
49
|
+
"data-testid": "badge"
|
|
50
50
|
}, displayValue));
|
|
51
51
|
};
|
|
52
52
|
|
package/Button/Button.module.css
CHANGED
package/Button/index.js
CHANGED
|
@@ -28,7 +28,8 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
28
28
|
children = _a.children,
|
|
29
29
|
disabled = _a.disabled,
|
|
30
30
|
onClick = _a.onClick,
|
|
31
|
-
|
|
31
|
+
type = _a.type,
|
|
32
|
+
props = tslib.__rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick", "type"]);
|
|
32
33
|
return /*#__PURE__*/React__default.default.createElement("button", tslib.__assign({
|
|
33
34
|
onClick: onClick,
|
|
34
35
|
ref: ref,
|
|
@@ -37,7 +38,9 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
37
38
|
root_fullWidth: !!fullWidth
|
|
38
39
|
}, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
|
|
39
40
|
disabled: disabled,
|
|
40
|
-
"data-cy": "button"
|
|
41
|
+
"data-cy": "button",
|
|
42
|
+
type: type || "button",
|
|
43
|
+
role: "button"
|
|
41
44
|
}, props), icon && /*#__PURE__*/React__default.default.createElement("span", {
|
|
42
45
|
className: clx(styles__default.default.icon)
|
|
43
46
|
}, icon), iconStart && /*#__PURE__*/React__default.default.createElement("span", {
|
package/Button/index.props.d.ts
CHANGED
|
@@ -126,6 +126,8 @@ var Month = function Month(props) {
|
|
|
126
126
|
style: {
|
|
127
127
|
background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
|
|
128
128
|
},
|
|
129
|
+
role: "button",
|
|
130
|
+
type: "button",
|
|
129
131
|
onClick: day.isActive ? function () {
|
|
130
132
|
return props.onDayClick([year, month, leadingZeros.leadingZeros(day.day, 2)].join("-"));
|
|
131
133
|
} : undefined
|
package/Calendar/index.js
CHANGED
|
@@ -152,7 +152,7 @@ var Calendar = function Calendar(_a) {
|
|
|
152
152
|
className: clx(styles__default.default.root),
|
|
153
153
|
"data-component": "Calendar",
|
|
154
154
|
ref: $root
|
|
155
|
-
}, /*#__PURE__*/React__default.default.createElement("div", null, contentWidth ? (
|
|
155
|
+
}, /*#__PURE__*/React__default.default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
|
|
156
156
|
"data-component": "Months",
|
|
157
157
|
className: clx(styles__default.default.months),
|
|
158
158
|
style: {
|
|
@@ -169,26 +169,32 @@ var Calendar = function Calendar(_a) {
|
|
|
169
169
|
return /*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({}, attrs, {
|
|
170
170
|
key: "month-".concat(index)
|
|
171
171
|
}));
|
|
172
|
-
}))) : (
|
|
172
|
+
}))) : (/*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({
|
|
173
173
|
today: today,
|
|
174
174
|
startDate: getMonthStartDate(currentMonthOffset),
|
|
175
175
|
offsetLeft: 0
|
|
176
176
|
}, commonAttrs))), /*#__PURE__*/React__default.default.createElement("button", {
|
|
177
177
|
className: clx(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
|
|
178
178
|
onClick: showPrevMonth,
|
|
179
|
-
disabled: currentMonthOffset <= 0
|
|
179
|
+
disabled: currentMonthOffset <= 0,
|
|
180
|
+
type: "button",
|
|
181
|
+
role: "button",
|
|
182
|
+
"aria-label": "Prev"
|
|
180
183
|
}, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
|
|
181
184
|
className: clx(styles__default.default["month-control-prev-arrow"])
|
|
182
185
|
})), /*#__PURE__*/React__default.default.createElement("button", {
|
|
183
186
|
className: clx(styles__default.default["month-control"], styles__default.default["month-control-next"]),
|
|
184
187
|
onClick: showNextMonth,
|
|
185
|
-
disabled: currentMonthOffset >= 11
|
|
188
|
+
disabled: currentMonthOffset >= 11,
|
|
189
|
+
type: "button",
|
|
190
|
+
role: "button",
|
|
191
|
+
"aria-label": "Next"
|
|
186
192
|
}, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
|
|
187
193
|
className: clx(styles__default.default["month-control-next-arrow"])
|
|
188
|
-
}))), datePresets && (
|
|
194
|
+
}))), datePresets && (/*#__PURE__*/React__default.default.createElement(index$2.Presets, {
|
|
189
195
|
presets: datePresets,
|
|
190
196
|
onPresetSelect: handlePresetSelect
|
|
191
|
-
})), withContinueButton && (
|
|
197
|
+
})), withContinueButton && (/*#__PURE__*/React__default.default.createElement(index$3.ContinueButton, {
|
|
192
198
|
isChanged: selectedDate !== initialSelectedDate || selectedPeriod !== initialSelectedPeriod,
|
|
193
199
|
selectedDate: selectedDate,
|
|
194
200
|
selectedPeriod: selectedPeriod,
|
package/Checkbox/index.js
CHANGED
|
@@ -52,7 +52,7 @@ var Checkbox = function Checkbox(_a) {
|
|
|
52
52
|
}, label)));
|
|
53
53
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
54
54
|
className: clx(styles__default.default.root)
|
|
55
|
-
}, control, hint && (
|
|
55
|
+
}, control, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
|
|
56
56
|
variant: isError ? "alert" : "secondary",
|
|
57
57
|
tag: "span"
|
|
58
58
|
}, hint)));
|
package/Chip/index.js
CHANGED
|
@@ -38,7 +38,7 @@ var Chip = function Chip(props) {
|
|
|
38
38
|
onClick: onClick
|
|
39
39
|
}, /*#__PURE__*/React__default.default.createElement("span", {
|
|
40
40
|
className: clx("content-inner")
|
|
41
|
-
}, children)), iconOnRight && (
|
|
41
|
+
}, children)), iconOnRight && (/*#__PURE__*/React__default.default.createElement("span", {
|
|
42
42
|
className: clx("icon-right"),
|
|
43
43
|
onClick: onIconOnRightClick || onClick
|
|
44
44
|
}, iconOnRight))));
|
package/Dropdown/index.js
CHANGED
|
@@ -4,19 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
|
+
var classNames = require('classnames/bind');
|
|
7
8
|
var reactPopper = require('react-popper');
|
|
8
|
-
var classNames = require('classnames');
|
|
9
9
|
var index = require('../Portal/index.js');
|
|
10
10
|
var on = require('../helpers/on.js');
|
|
11
11
|
var index$1 = require('../ClickOutside/index.js');
|
|
12
|
-
var
|
|
12
|
+
var styles = require('./Dropdown.module.css');
|
|
13
13
|
|
|
14
14
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
15
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
17
17
|
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
18
|
-
var
|
|
18
|
+
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
19
19
|
|
|
20
|
+
var clx = classNames__default.default.bind(styles__default.default);
|
|
20
21
|
var Dropdown = function Dropdown(_a) {
|
|
21
22
|
var children = _a.children,
|
|
22
23
|
zIndex = _a.zIndex,
|
|
@@ -122,12 +123,12 @@ var Dropdown = function Dropdown(_a) {
|
|
|
122
123
|
return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(reference.type, tslib.__assign({
|
|
123
124
|
ref: setControlElement,
|
|
124
125
|
tabIndex: 0
|
|
125
|
-
}, reference.props)), isVisible && (
|
|
126
|
+
}, reference.props)), isVisible && (/*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
|
|
126
127
|
onClick: onClickOutside
|
|
127
128
|
}, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
|
|
128
129
|
ref: setPopperElement,
|
|
129
|
-
"data-
|
|
130
|
-
className:
|
|
130
|
+
"data-testid": "popper-container",
|
|
131
|
+
className: clx("popper-container"),
|
|
131
132
|
style: tslib.__assign(tslib.__assign(tslib.__assign({}, styles.popper), {
|
|
132
133
|
zIndex: zIndex,
|
|
133
134
|
minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
|
|
@@ -136,7 +137,8 @@ var Dropdown = function Dropdown(_a) {
|
|
|
136
137
|
}),
|
|
137
138
|
tabIndex: 0
|
|
138
139
|
}, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
|
|
139
|
-
|
|
140
|
+
"data-testid": "overlay-container",
|
|
141
|
+
className: clx("overlay-container"),
|
|
140
142
|
onClick: onClickOverlay
|
|
141
143
|
}, overlay))))));
|
|
142
144
|
};
|
package/InputRadio/index.js
CHANGED
|
@@ -66,7 +66,7 @@ var InputRadio = /*#__PURE__*/React.memo(function (_a) {
|
|
|
66
66
|
className: clx(styles__default.default.icon)
|
|
67
67
|
}), /*#__PURE__*/React__default.default.createElement("span", {
|
|
68
68
|
className: clx(styles__default.default.text)
|
|
69
|
-
}, !children && text, !text && children)), !!note && (
|
|
69
|
+
}, !children && text, !text && children)), !!note && (/*#__PURE__*/React__default.default.createElement(index.default, {
|
|
70
70
|
tag: "p",
|
|
71
71
|
size: "s",
|
|
72
72
|
className: clx(styles__default.default.note)
|
|
@@ -26,8 +26,9 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
26
26
|
ref: ref,
|
|
27
27
|
"data-component": "menu-item",
|
|
28
28
|
style: {
|
|
29
|
-
backgroundColor: isSelected ? "var(--palette-primary-1)" : ""
|
|
29
|
+
backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : "transparent"
|
|
30
30
|
},
|
|
31
|
+
"data-testid": "menuitem",
|
|
31
32
|
className: clx("item", (_b = {
|
|
32
33
|
item_disabled: !!disabled
|
|
33
34
|
}, _b["item_variant_".concat(variant)] = !!variant, _b), className),
|
package/Menu/index.js
CHANGED
|
@@ -21,7 +21,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
21
21
|
children = _a.children;
|
|
22
22
|
var renderChild = React.useMemo(function () {
|
|
23
23
|
return React.Children.map(children, function (child) {
|
|
24
|
-
if (
|
|
24
|
+
if (/*#__PURE__*/React.isValidElement(child)) {
|
|
25
25
|
var isSelected = selected ? selected.includes(String(child.key)) : undefined;
|
|
26
26
|
var onClickHandler = function onClickHandler(e) {
|
|
27
27
|
if (child.props.onClick) child.props.onClick(e);
|
package/Modal/index.js
CHANGED
|
@@ -57,11 +57,11 @@ var Modal = function Modal(_a) {
|
|
|
57
57
|
"modal-wrapper_mobile": !isDesktop ? 1 : 0
|
|
58
58
|
}, className),
|
|
59
59
|
ref: modalRef
|
|
60
|
-
}, title ? (
|
|
60
|
+
}, title ? (/*#__PURE__*/React__default.default.createElement("div", {
|
|
61
61
|
className: clx("title-wrapper")
|
|
62
62
|
}, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
|
|
63
63
|
onClick: onCloseHandler
|
|
64
|
-
}))) : (
|
|
64
|
+
}))) : (/*#__PURE__*/React__default.default.createElement("div", {
|
|
65
65
|
className: clx("close-wrapper")
|
|
66
66
|
}, /*#__PURE__*/React__default.default.createElement(index$5.default, {
|
|
67
67
|
onClick: onCloseHandler
|
|
@@ -39,9 +39,11 @@ var MenuOverlay = function MenuOverlay(_a) {
|
|
|
39
39
|
if (!rootRef || !rootRef.current) {
|
|
40
40
|
return;
|
|
41
41
|
}
|
|
42
|
-
rootRef.current.scrollTo
|
|
43
|
-
|
|
44
|
-
|
|
42
|
+
if (typeof rootRef.current.scrollTo === "function") {
|
|
43
|
+
rootRef.current.scrollTo({
|
|
44
|
+
top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
|
|
45
|
+
});
|
|
46
|
+
}
|
|
45
47
|
}, [scrollView, rootRef]);
|
|
46
48
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
47
49
|
ref: rootRef,
|
package/Select/index.js
CHANGED
|
@@ -83,8 +83,8 @@ var Select = function Select(_a) {
|
|
|
83
83
|
disabled: !!disabled
|
|
84
84
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
85
85
|
className: clx(styles__default.default["base-input"]),
|
|
86
|
-
"data-
|
|
87
|
-
}, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (
|
|
86
|
+
"data-testid": "base-input"
|
|
87
|
+
}, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (/*#__PURE__*/React__default.default.createElement("span", {
|
|
88
88
|
className: clx(styles__default.default.placeholder)
|
|
89
89
|
}, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
|
|
90
90
|
type: "hidden",
|
package/Tooltip/index.js
CHANGED
|
@@ -92,7 +92,7 @@ var Tooltip = function Tooltip(_a) {
|
|
|
92
92
|
}, [update, visible]);
|
|
93
93
|
return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(reference.type, tslib.__assign({
|
|
94
94
|
ref: setControlElement
|
|
95
|
-
}, reference.props)), visible && (
|
|
95
|
+
}, reference.props)), visible && (/*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
|
|
96
96
|
onClick: onClickOutside
|
|
97
97
|
}, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
|
|
98
98
|
className: clx("root", {
|
package/Tooltip/index.props.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
2
|
import type { PositioningStrategy } from "@popperjs/core";
|
|
3
3
|
import type { Placement as PopperPlacement } from "@popperjs/core";
|
|
4
|
-
export type Trigger = "hover";
|
|
5
4
|
export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
|
|
6
5
|
export interface ITooltipProps {
|
|
7
6
|
children: ReactNode;
|
package/base/FormField/index.js
CHANGED
|
@@ -24,12 +24,12 @@ var FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
24
24
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
25
25
|
className: clx(styles__default.default.container, className),
|
|
26
26
|
ref: ref
|
|
27
|
-
}, label && (
|
|
27
|
+
}, label && (/*#__PURE__*/React__default.default.createElement(index.default, {
|
|
28
28
|
className: clx(styles__default.default.label, {
|
|
29
29
|
label_required: !!required
|
|
30
30
|
}),
|
|
31
31
|
tag: "label"
|
|
32
|
-
}, label)), children, hint && (
|
|
32
|
+
}, label)), children, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
|
|
33
33
|
variant: error ? "alert" : "secondary",
|
|
34
34
|
tag: "span"
|
|
35
35
|
}, hint)));
|
package/base/InputRoot/index.js
CHANGED
|
@@ -27,7 +27,7 @@ var InputRoot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
27
27
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
28
28
|
ref: ref,
|
|
29
29
|
className: clx(styles__default.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
|
|
30
|
-
}, startIcon && (
|
|
30
|
+
}, startIcon && (/*#__PURE__*/React__default.default.createElement("div", {
|
|
31
31
|
className: clx(styles__default.default["base-icon"])
|
|
32
32
|
}, startIcon)), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
|
|
33
33
|
className: clx(styles__default.default["base-icon"])
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.root {
|
|
2
|
+
overflow: hidden;
|
|
3
|
+
padding: 14px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.content {
|
|
7
|
+
block-size: 0;
|
|
8
|
+
overflow: hidden;
|
|
9
|
+
transition: block-size 0.2s ease-in-out;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.button {
|
|
13
|
+
align-items: center;
|
|
14
|
+
background: none;
|
|
15
|
+
border: none;
|
|
16
|
+
color: initial;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
display: flex;
|
|
19
|
+
font: inherit;
|
|
20
|
+
gap: 8px;
|
|
21
|
+
inline-size: 100%;
|
|
22
|
+
outline: none;
|
|
23
|
+
padding: 0;
|
|
24
|
+
}
|
|
25
|
+
.button svg {
|
|
26
|
+
flex: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.text {
|
|
30
|
+
overflow: hidden;
|
|
31
|
+
text-overflow: ellipsis;
|
|
32
|
+
white-space: nowrap;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.header {
|
|
36
|
+
margin-block-end: 14px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.chevron {
|
|
40
|
+
transition: transform 0.2s ease-in-out;
|
|
41
|
+
}
|
|
42
|
+
.chevron_open {
|
|
43
|
+
transform: rotate(180deg);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.line {
|
|
47
|
+
background-color: var(--palette-bg-3);
|
|
48
|
+
block-size: 1px;
|
|
49
|
+
flex: 1;
|
|
50
|
+
margin-inline-start: 8px;
|
|
51
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import classNames from 'classnames/bind';
|
|
3
|
+
import '../Icons/index.js';
|
|
4
|
+
import Typography from '../Typography/index.js';
|
|
5
|
+
import styles from './Accordion.module.css';
|
|
6
|
+
import Chevron from '../Icons/Chevron.js';
|
|
7
|
+
|
|
8
|
+
var clx = classNames.bind(styles);
|
|
9
|
+
var Accordion = function Accordion(_a) {
|
|
10
|
+
var title = _a.title,
|
|
11
|
+
_b = _a.boldTitle,
|
|
12
|
+
boldTitle = _b === void 0 ? false : _b,
|
|
13
|
+
children = _a.children,
|
|
14
|
+
className = _a.className,
|
|
15
|
+
tabIndex = _a.tabIndex;
|
|
16
|
+
var _c = useState(false),
|
|
17
|
+
isOpen = _c[0],
|
|
18
|
+
setIsOpen = _c[1];
|
|
19
|
+
var contentRef = useRef(null);
|
|
20
|
+
var toggleAccordion = function toggleAccordion() {
|
|
21
|
+
return setIsOpen(!isOpen);
|
|
22
|
+
};
|
|
23
|
+
useEffect(function () {
|
|
24
|
+
if (contentRef.current) {
|
|
25
|
+
contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0px";
|
|
26
|
+
}
|
|
27
|
+
}, [isOpen]);
|
|
28
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
29
|
+
className: clx("root", className)
|
|
30
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
31
|
+
className: clx("header")
|
|
32
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
33
|
+
className: clx("button"),
|
|
34
|
+
onClick: toggleAccordion,
|
|
35
|
+
type: "button",
|
|
36
|
+
role: "button",
|
|
37
|
+
"aria-expanded": isOpen,
|
|
38
|
+
tabIndex: tabIndex,
|
|
39
|
+
"aria-label": "Toggle"
|
|
40
|
+
}, /*#__PURE__*/React__default.createElement(Chevron, {
|
|
41
|
+
className: clx("chevron", {
|
|
42
|
+
chevron_open: isOpen
|
|
43
|
+
}),
|
|
44
|
+
width: 20,
|
|
45
|
+
height: 20
|
|
46
|
+
}), /*#__PURE__*/React__default.createElement(Typography, {
|
|
47
|
+
className: clx("text"),
|
|
48
|
+
fontWeight: boldTitle ? "bold" : "normal"
|
|
49
|
+
}, title), /*#__PURE__*/React__default.createElement("div", {
|
|
50
|
+
className: clx("line")
|
|
51
|
+
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
52
|
+
ref: contentRef,
|
|
53
|
+
className: clx("content")
|
|
54
|
+
}, children));
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export { Accordion as default };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
.avatar {
|
|
2
|
-
transition: border-color 0.15s ease;
|
|
3
2
|
border-radius: 100%;
|
|
4
3
|
box-sizing: border-box;
|
|
4
|
+
transition: border-color 0.15s ease;
|
|
5
5
|
}
|
|
6
6
|
.avatar_bordered {
|
|
7
|
-
border: 4px solid transparent;
|
|
8
7
|
background-color: var(--palette-white);
|
|
8
|
+
border: 4px solid transparent;
|
|
9
9
|
}
|
|
10
10
|
.avatar_bordered:hover {
|
|
11
11
|
border-color: rgba(95, 99, 104, 0.24);
|
package/esm/Avatar/index.d.ts
CHANGED
package/esm/Avatar/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React__default, { memo } from 'react';
|
|
2
|
+
import classNames from 'classnames/bind';
|
|
2
3
|
import { AvatarSizes } from './constants.js';
|
|
3
4
|
import maleCircleUrl from './assets/male-circle.svg.js';
|
|
4
5
|
import orgCircleUrl from './assets/org-circle.svg.js';
|
|
5
6
|
import styles from './Avatar.module.css';
|
|
6
|
-
import classNames from 'classnames/bind';
|
|
7
7
|
import { AccountType } from './index.props.js';
|
|
8
8
|
|
|
9
9
|
var clx = classNames.bind(styles);
|
|
@@ -14,7 +14,7 @@ var Avatar = /*#__PURE__*/memo(function (props) {
|
|
|
14
14
|
className = props.className,
|
|
15
15
|
bordered = props.bordered,
|
|
16
16
|
_b = props.title,
|
|
17
|
-
title = _b === void 0 ?
|
|
17
|
+
title = _b === void 0 ? "" : _b,
|
|
18
18
|
_c = props.accountType,
|
|
19
19
|
accountType = _c === void 0 ? AccountType.Organization : _c;
|
|
20
20
|
var isOrg = accountType === AccountType.Organization;
|
|
@@ -25,7 +25,7 @@ var Avatar = /*#__PURE__*/memo(function (props) {
|
|
|
25
25
|
width: size,
|
|
26
26
|
height: size,
|
|
27
27
|
className: clx(styles.avatar, {
|
|
28
|
-
|
|
28
|
+
avatar_bordered: !!bordered
|
|
29
29
|
}, [className])
|
|
30
30
|
});
|
|
31
31
|
});
|
package/esm/Badge/index.js
CHANGED
|
@@ -36,7 +36,7 @@ var Badge = function Badge(_a) {
|
|
|
36
36
|
className: clx((_b = {
|
|
37
37
|
root: true
|
|
38
38
|
}, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
|
|
39
|
-
"data-
|
|
39
|
+
"data-testid": "badge"
|
|
40
40
|
}, displayValue));
|
|
41
41
|
};
|
|
42
42
|
|
package/esm/Button/index.js
CHANGED
|
@@ -18,7 +18,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
18
18
|
children = _a.children,
|
|
19
19
|
disabled = _a.disabled,
|
|
20
20
|
onClick = _a.onClick,
|
|
21
|
-
|
|
21
|
+
type = _a.type,
|
|
22
|
+
props = __rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick", "type"]);
|
|
22
23
|
return /*#__PURE__*/React__default.createElement("button", __assign({
|
|
23
24
|
onClick: onClick,
|
|
24
25
|
ref: ref,
|
|
@@ -27,7 +28,9 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
27
28
|
root_fullWidth: !!fullWidth
|
|
28
29
|
}, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
|
|
29
30
|
disabled: disabled,
|
|
30
|
-
"data-cy": "button"
|
|
31
|
+
"data-cy": "button",
|
|
32
|
+
type: type || "button",
|
|
33
|
+
role: "button"
|
|
31
34
|
}, props), icon && /*#__PURE__*/React__default.createElement("span", {
|
|
32
35
|
className: clx(styles.icon)
|
|
33
36
|
}, icon), iconStart && /*#__PURE__*/React__default.createElement("span", {
|
|
@@ -100,6 +100,8 @@ var Month = function Month(props) {
|
|
|
100
100
|
style: {
|
|
101
101
|
background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
|
|
102
102
|
},
|
|
103
|
+
role: "button",
|
|
104
|
+
type: "button",
|
|
103
105
|
onClick: day.isActive ? function () {
|
|
104
106
|
return props.onDayClick([year, month, leadingZeros(day.day, 2)].join("-"));
|
|
105
107
|
} : undefined
|
package/esm/Calendar/index.js
CHANGED
|
@@ -142,7 +142,7 @@ var Calendar = function Calendar(_a) {
|
|
|
142
142
|
className: clx(styles.root),
|
|
143
143
|
"data-component": "Calendar",
|
|
144
144
|
ref: $root
|
|
145
|
-
}, /*#__PURE__*/React__default.createElement("div", null, contentWidth ? (
|
|
145
|
+
}, /*#__PURE__*/React__default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.createElement("div", {
|
|
146
146
|
"data-component": "Months",
|
|
147
147
|
className: clx(styles.months),
|
|
148
148
|
style: {
|
|
@@ -159,26 +159,32 @@ var Calendar = function Calendar(_a) {
|
|
|
159
159
|
return /*#__PURE__*/React__default.createElement(Month, __assign({}, attrs, {
|
|
160
160
|
key: "month-".concat(index)
|
|
161
161
|
}));
|
|
162
|
-
}))) : (
|
|
162
|
+
}))) : (/*#__PURE__*/React__default.createElement(Month, __assign({
|
|
163
163
|
today: today,
|
|
164
164
|
startDate: getMonthStartDate(currentMonthOffset),
|
|
165
165
|
offsetLeft: 0
|
|
166
166
|
}, commonAttrs))), /*#__PURE__*/React__default.createElement("button", {
|
|
167
167
|
className: clx(styles["month-control"], styles["month-control-prev"]),
|
|
168
168
|
onClick: showPrevMonth,
|
|
169
|
-
disabled: currentMonthOffset <= 0
|
|
169
|
+
disabled: currentMonthOffset <= 0,
|
|
170
|
+
type: "button",
|
|
171
|
+
role: "button",
|
|
172
|
+
"aria-label": "Prev"
|
|
170
173
|
}, /*#__PURE__*/React__default.createElement(ArrowNext, {
|
|
171
174
|
className: clx(styles["month-control-prev-arrow"])
|
|
172
175
|
})), /*#__PURE__*/React__default.createElement("button", {
|
|
173
176
|
className: clx(styles["month-control"], styles["month-control-next"]),
|
|
174
177
|
onClick: showNextMonth,
|
|
175
|
-
disabled: currentMonthOffset >= 11
|
|
178
|
+
disabled: currentMonthOffset >= 11,
|
|
179
|
+
type: "button",
|
|
180
|
+
role: "button",
|
|
181
|
+
"aria-label": "Next"
|
|
176
182
|
}, /*#__PURE__*/React__default.createElement(ArrowNext, {
|
|
177
183
|
className: clx(styles["month-control-next-arrow"])
|
|
178
|
-
}))), datePresets && (
|
|
184
|
+
}))), datePresets && (/*#__PURE__*/React__default.createElement(Presets, {
|
|
179
185
|
presets: datePresets,
|
|
180
186
|
onPresetSelect: handlePresetSelect
|
|
181
|
-
})), withContinueButton && (
|
|
187
|
+
})), withContinueButton && (/*#__PURE__*/React__default.createElement(ContinueButton, {
|
|
182
188
|
isChanged: selectedDate !== initialSelectedDate || selectedPeriod !== initialSelectedPeriod,
|
|
183
189
|
selectedDate: selectedDate,
|
|
184
190
|
selectedPeriod: selectedPeriod,
|
package/esm/Checkbox/index.js
CHANGED
|
@@ -42,7 +42,7 @@ var Checkbox = function Checkbox(_a) {
|
|
|
42
42
|
}, label)));
|
|
43
43
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
44
44
|
className: clx(styles.root)
|
|
45
|
-
}, control, hint && (
|
|
45
|
+
}, control, hint && (/*#__PURE__*/React__default.createElement(Typography, {
|
|
46
46
|
variant: isError ? "alert" : "secondary",
|
|
47
47
|
tag: "span"
|
|
48
48
|
}, hint)));
|
package/esm/Chip/index.js
CHANGED
|
@@ -28,7 +28,7 @@ var Chip = function Chip(props) {
|
|
|
28
28
|
onClick: onClick
|
|
29
29
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
30
30
|
className: clx("content-inner")
|
|
31
|
-
}, children)), iconOnRight && (
|
|
31
|
+
}, children)), iconOnRight && (/*#__PURE__*/React__default.createElement("span", {
|
|
32
32
|
className: clx("icon-right"),
|
|
33
33
|
onClick: onIconOnRightClick || onClick
|
|
34
34
|
}, iconOnRight))));
|
package/esm/Dropdown/index.js
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { __assign } from 'tslib';
|
|
2
2
|
import React__default, { useState, useMemo, Children, useCallback, useEffect } from 'react';
|
|
3
|
+
import classNames from 'classnames/bind';
|
|
3
4
|
import { usePopper } from 'react-popper';
|
|
4
|
-
import classNames from 'classnames';
|
|
5
5
|
import Portal from '../Portal/index.js';
|
|
6
6
|
import { on } from '../helpers/on.js';
|
|
7
7
|
import ClickOutside from '../ClickOutside/index.js';
|
|
8
|
-
import
|
|
8
|
+
import styles from './Dropdown.module.css';
|
|
9
9
|
|
|
10
|
+
var clx = classNames.bind(styles);
|
|
10
11
|
var Dropdown = function Dropdown(_a) {
|
|
11
12
|
var children = _a.children,
|
|
12
13
|
zIndex = _a.zIndex,
|
|
@@ -112,12 +113,12 @@ var Dropdown = function Dropdown(_a) {
|
|
|
112
113
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(reference.type, __assign({
|
|
113
114
|
ref: setControlElement,
|
|
114
115
|
tabIndex: 0
|
|
115
|
-
}, reference.props)), isVisible && (
|
|
116
|
+
}, reference.props)), isVisible && (/*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
|
|
116
117
|
onClick: onClickOutside
|
|
117
118
|
}, /*#__PURE__*/React__default.createElement("div", __assign({
|
|
118
119
|
ref: setPopperElement,
|
|
119
|
-
"data-
|
|
120
|
-
className:
|
|
120
|
+
"data-testid": "popper-container",
|
|
121
|
+
className: clx("popper-container"),
|
|
121
122
|
style: __assign(__assign(__assign({}, styles.popper), {
|
|
122
123
|
zIndex: zIndex,
|
|
123
124
|
minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
|
|
@@ -126,7 +127,8 @@ var Dropdown = function Dropdown(_a) {
|
|
|
126
127
|
}),
|
|
127
128
|
tabIndex: 0
|
|
128
129
|
}, attributes.popper), /*#__PURE__*/React__default.createElement("div", {
|
|
129
|
-
|
|
130
|
+
"data-testid": "overlay-container",
|
|
131
|
+
className: clx("overlay-container"),
|
|
130
132
|
onClick: onClickOverlay
|
|
131
133
|
}, overlay))))));
|
|
132
134
|
};
|
package/esm/InputRadio/index.js
CHANGED
|
@@ -56,7 +56,7 @@ var InputRadio = /*#__PURE__*/memo(function (_a) {
|
|
|
56
56
|
className: clx(styles.icon)
|
|
57
57
|
}), /*#__PURE__*/React__default.createElement("span", {
|
|
58
58
|
className: clx(styles.text)
|
|
59
|
-
}, !children && text, !text && children)), !!note && (
|
|
59
|
+
}, !children && text, !text && children)), !!note && (/*#__PURE__*/React__default.createElement(Typography, {
|
|
60
60
|
tag: "p",
|
|
61
61
|
size: "s",
|
|
62
62
|
className: clx(styles.note)
|
|
@@ -16,8 +16,9 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
16
16
|
ref: ref,
|
|
17
17
|
"data-component": "menu-item",
|
|
18
18
|
style: {
|
|
19
|
-
backgroundColor: isSelected ? "var(--palette-primary-1)" : ""
|
|
19
|
+
backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : "transparent"
|
|
20
20
|
},
|
|
21
|
+
"data-testid": "menuitem",
|
|
21
22
|
className: clx("item", (_b = {
|
|
22
23
|
item_disabled: !!disabled
|
|
23
24
|
}, _b["item_variant_".concat(variant)] = !!variant, _b), className),
|
package/esm/Menu/index.js
CHANGED
|
@@ -11,7 +11,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
11
11
|
children = _a.children;
|
|
12
12
|
var renderChild = useMemo(function () {
|
|
13
13
|
return Children.map(children, function (child) {
|
|
14
|
-
if (
|
|
14
|
+
if (/*#__PURE__*/isValidElement(child)) {
|
|
15
15
|
var isSelected = selected ? selected.includes(String(child.key)) : undefined;
|
|
16
16
|
var onClickHandler = function onClickHandler(e) {
|
|
17
17
|
if (child.props.onClick) child.props.onClick(e);
|
package/esm/Modal/index.js
CHANGED
|
@@ -47,11 +47,11 @@ var Modal = function Modal(_a) {
|
|
|
47
47
|
"modal-wrapper_mobile": !isDesktop ? 1 : 0
|
|
48
48
|
}, className),
|
|
49
49
|
ref: modalRef
|
|
50
|
-
}, title ? (
|
|
50
|
+
}, title ? (/*#__PURE__*/React__default.createElement("div", {
|
|
51
51
|
className: clx("title-wrapper")
|
|
52
52
|
}, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement(Close, {
|
|
53
53
|
onClick: onCloseHandler
|
|
54
|
-
}))) : (
|
|
54
|
+
}))) : (/*#__PURE__*/React__default.createElement("div", {
|
|
55
55
|
className: clx("close-wrapper")
|
|
56
56
|
}, /*#__PURE__*/React__default.createElement(Close, {
|
|
57
57
|
onClick: onCloseHandler
|
|
@@ -29,9 +29,11 @@ var MenuOverlay = function MenuOverlay(_a) {
|
|
|
29
29
|
if (!rootRef || !rootRef.current) {
|
|
30
30
|
return;
|
|
31
31
|
}
|
|
32
|
-
rootRef.current.scrollTo
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
if (typeof rootRef.current.scrollTo === "function") {
|
|
33
|
+
rootRef.current.scrollTo({
|
|
34
|
+
top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
|
|
35
|
+
});
|
|
36
|
+
}
|
|
35
37
|
}, [scrollView, rootRef]);
|
|
36
38
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
37
39
|
ref: rootRef,
|
package/esm/Select/index.js
CHANGED
|
@@ -73,8 +73,8 @@ var Select = function Select(_a) {
|
|
|
73
73
|
disabled: !!disabled
|
|
74
74
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
75
75
|
className: clx(styles["base-input"]),
|
|
76
|
-
"data-
|
|
77
|
-
}, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (
|
|
76
|
+
"data-testid": "base-input"
|
|
77
|
+
}, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (/*#__PURE__*/React__default.createElement("span", {
|
|
78
78
|
className: clx(styles.placeholder)
|
|
79
79
|
}, placeholder))), /*#__PURE__*/React__default.createElement("input", {
|
|
80
80
|
type: "hidden",
|
package/esm/Tooltip/index.js
CHANGED
|
@@ -82,7 +82,7 @@ var Tooltip = function Tooltip(_a) {
|
|
|
82
82
|
}, [update, visible]);
|
|
83
83
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(reference.type, __assign({
|
|
84
84
|
ref: setControlElement
|
|
85
|
-
}, reference.props)), visible && (
|
|
85
|
+
}, reference.props)), visible && (/*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
|
|
86
86
|
onClick: onClickOutside
|
|
87
87
|
}, /*#__PURE__*/React__default.createElement("div", __assign({
|
|
88
88
|
className: clx("root", {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from "react";
|
|
2
2
|
import type { PositioningStrategy } from "@popperjs/core";
|
|
3
3
|
import type { Placement as PopperPlacement } from "@popperjs/core";
|
|
4
|
-
export type Trigger = "hover";
|
|
5
4
|
export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
|
|
6
5
|
export interface ITooltipProps {
|
|
7
6
|
children: ReactNode;
|
|
@@ -14,12 +14,12 @@ var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
14
14
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
15
15
|
className: clx(styles.container, className),
|
|
16
16
|
ref: ref
|
|
17
|
-
}, label && (
|
|
17
|
+
}, label && (/*#__PURE__*/React__default.createElement(Typography, {
|
|
18
18
|
className: clx(styles.label, {
|
|
19
19
|
label_required: !!required
|
|
20
20
|
}),
|
|
21
21
|
tag: "label"
|
|
22
|
-
}, label)), children, hint && (
|
|
22
|
+
}, label)), children, hint && (/*#__PURE__*/React__default.createElement(Typography, {
|
|
23
23
|
variant: error ? "alert" : "secondary",
|
|
24
24
|
tag: "span"
|
|
25
25
|
}, hint)));
|
|
@@ -17,7 +17,7 @@ var InputRoot = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
17
17
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
18
18
|
ref: ref,
|
|
19
19
|
className: clx(styles.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
|
|
20
|
-
}, startIcon && (
|
|
20
|
+
}, startIcon && (/*#__PURE__*/React__default.createElement("div", {
|
|
21
21
|
className: clx(styles["base-icon"])
|
|
22
22
|
}, startIcon)), children, endIcon && /*#__PURE__*/React__default.createElement("div", {
|
|
23
23
|
className: clx(styles["base-icon"])
|
package/esm/index.d.ts
CHANGED
package/esm/index.js
CHANGED
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,34 +1,35 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./
|
|
4
|
-
var index$1 = require('./
|
|
5
|
-
var index$2 = require('./
|
|
6
|
-
var index$3 = require('./
|
|
7
|
-
var index$4 = require('./
|
|
8
|
-
var index$5 = require('./
|
|
9
|
-
var index$6 = require('./
|
|
10
|
-
var index$7 = require('./
|
|
11
|
-
var index$8 = require('./
|
|
12
|
-
var index$9 = require('./
|
|
13
|
-
var index$a = require('./Grid/
|
|
14
|
-
var index$b = require('./
|
|
15
|
-
var index$c = require('./
|
|
16
|
-
var index$d = require('./
|
|
17
|
-
var index$e = require('./Menu/
|
|
18
|
-
var index$f = require('./
|
|
19
|
-
var index$g = require('./
|
|
20
|
-
var index$h = require('./
|
|
21
|
-
var index$i = require('./
|
|
22
|
-
var index$j = require('./
|
|
23
|
-
var index$k = require('./
|
|
24
|
-
var index$l = require('./
|
|
25
|
-
var index$m = require('./
|
|
26
|
-
var index$n = require('./
|
|
27
|
-
var index$o = require('./
|
|
28
|
-
var index$p = require('./
|
|
29
|
-
var index$q = require('./
|
|
30
|
-
var index$r = require('./hooks/
|
|
31
|
-
var index$s = require('./hooks/
|
|
3
|
+
var index = require('./Accordion/index.js');
|
|
4
|
+
var index$1 = require('./Avatar/index.js');
|
|
5
|
+
var index$2 = require('./Badge/index.js');
|
|
6
|
+
var index$3 = require('./Button/index.js');
|
|
7
|
+
var index$4 = require('./Calendar/index.js');
|
|
8
|
+
var index$5 = require('./Checkbox/index.js');
|
|
9
|
+
var index$6 = require('./Chip/index.js');
|
|
10
|
+
var index$7 = require('./Counter/index.js');
|
|
11
|
+
var index$8 = require('./DotsLoader/index.js');
|
|
12
|
+
var index$9 = require('./Dropdown/index.js');
|
|
13
|
+
var index$a = require('./Grid/index.js');
|
|
14
|
+
var index$b = require('./Grid/Item/index.js');
|
|
15
|
+
var index$c = require('./Image/index.js');
|
|
16
|
+
var index$d = require('./Input/index.js');
|
|
17
|
+
var index$e = require('./Menu/index.js');
|
|
18
|
+
var index$f = require('./Menu/components/MenuItem/index.js');
|
|
19
|
+
var index$g = require('./Modal/index.js');
|
|
20
|
+
var index$h = require('./Portal/index.js');
|
|
21
|
+
var index$i = require('./RadioGroup/index.js');
|
|
22
|
+
var index$j = require('./Select/index.js');
|
|
23
|
+
var index$k = require('./Separator/index.js');
|
|
24
|
+
var index$l = require('./Skeleton/index.js');
|
|
25
|
+
var index$m = require('./Switch/index.js');
|
|
26
|
+
var index$n = require('./Theme/index.js');
|
|
27
|
+
var index$o = require('./Tooltip/index.js');
|
|
28
|
+
var index$p = require('./TimeSelect/index.js');
|
|
29
|
+
var index$q = require('./Typography/index.js');
|
|
30
|
+
var index$r = require('./hooks/useMediaSizes/index.js');
|
|
31
|
+
var index$s = require('./hooks/useOnClickOutside/index.js');
|
|
32
|
+
var index$t = require('./hooks/useScrollLock/index.js');
|
|
32
33
|
require('./Icons/index.js');
|
|
33
34
|
var ArrowNext = require('./Icons/ArrowNext.js');
|
|
34
35
|
var Cart = require('./Icons/Cart.js');
|
|
@@ -48,36 +49,37 @@ var User = require('./Icons/User.js');
|
|
|
48
49
|
|
|
49
50
|
|
|
50
51
|
|
|
51
|
-
exports.
|
|
52
|
-
exports.
|
|
53
|
-
exports.
|
|
54
|
-
exports.
|
|
55
|
-
exports.
|
|
56
|
-
exports.
|
|
57
|
-
exports.
|
|
58
|
-
exports.
|
|
59
|
-
exports.
|
|
60
|
-
exports.
|
|
61
|
-
exports.
|
|
62
|
-
exports.
|
|
63
|
-
exports.
|
|
64
|
-
exports.
|
|
65
|
-
exports.
|
|
66
|
-
exports.
|
|
67
|
-
exports.
|
|
68
|
-
exports.
|
|
69
|
-
exports.
|
|
70
|
-
exports.
|
|
71
|
-
exports.
|
|
72
|
-
exports.
|
|
73
|
-
exports.
|
|
74
|
-
exports.
|
|
75
|
-
exports.
|
|
76
|
-
exports.
|
|
77
|
-
exports.
|
|
78
|
-
exports.
|
|
79
|
-
exports.
|
|
80
|
-
exports.
|
|
52
|
+
exports.Accordion = index.default;
|
|
53
|
+
exports.Avatar = index$1.default;
|
|
54
|
+
exports.Badge = index$2.default;
|
|
55
|
+
exports.Button = index$3.default;
|
|
56
|
+
exports.Calendar = index$4.default;
|
|
57
|
+
exports.Checkbox = index$5.default;
|
|
58
|
+
exports.Chip = index$6.default;
|
|
59
|
+
exports.Counter = index$7.default;
|
|
60
|
+
exports.DotsLoader = index$8.default;
|
|
61
|
+
exports.Dropdown = index$9.default;
|
|
62
|
+
exports.Grid = index$a.default;
|
|
63
|
+
exports.GridItem = index$b.default;
|
|
64
|
+
exports.Image = index$c.default;
|
|
65
|
+
exports.Input = index$d.default;
|
|
66
|
+
exports.Menu = index$e.default;
|
|
67
|
+
exports.MenuItem = index$f.default;
|
|
68
|
+
exports.Modal = index$g.default;
|
|
69
|
+
exports.Portal = index$h.default;
|
|
70
|
+
exports.RadioGroup = index$i.default;
|
|
71
|
+
exports.Select = index$j.default;
|
|
72
|
+
exports.Separator = index$k.default;
|
|
73
|
+
exports.SkeletonRect = index$l.SkeletonRect;
|
|
74
|
+
exports.SkeletonText = index$l.SkeletonText;
|
|
75
|
+
exports.Switch = index$m.default;
|
|
76
|
+
exports.THEMES = index$n.THEMES;
|
|
77
|
+
exports.Tooltip = index$o.default;
|
|
78
|
+
exports.TimeSelect = index$p.default;
|
|
79
|
+
exports.Typography = index$q.default;
|
|
80
|
+
exports.useMediaSizes = index$r.default;
|
|
81
|
+
exports.useOnClickOutside = index$s.default;
|
|
82
|
+
exports.useScrollLock = index$t.default;
|
|
81
83
|
exports.ArrowNext = ArrowNext.default;
|
|
82
84
|
exports.Cart = Cart.default;
|
|
83
85
|
exports.Chevron = Chevron.default;
|