colibri-ui 0.8.50 → 0.8.51
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/Avatar/index.js +5 -5
- package/Menu/components/MenuItem/index.js +3 -3
- package/Menu/index.js +1 -1
- package/MultiSelect/components/MenuOverlay/index.js +2 -5
- package/MultiSelect/index.js +7 -4
- package/MultiSelect/index.module.css +0 -1
- package/Select/components/MenuOverlay/index.js +1 -4
- package/Select/index.d.ts +2 -2
- package/Select/index.js +10 -7
- package/Tooltip/Tooltip.module.css +7 -7
- package/Tooltip/index.js +2 -2
- package/Tooltip/index.props.d.ts +1 -1
- package/esm/Avatar/index.js +5 -5
- package/esm/Menu/components/MenuItem/index.js +3 -3
- package/esm/Menu/index.js +1 -1
- package/esm/MultiSelect/components/MenuOverlay/index.js +2 -4
- package/esm/MultiSelect/index.js +7 -4
- package/esm/MultiSelect/index.module.css +0 -1
- package/esm/Select/components/MenuOverlay/index.js +1 -3
- package/esm/Select/index.d.ts +2 -2
- package/esm/Select/index.js +10 -7
- package/esm/Tooltip/Tooltip.module.css +7 -7
- package/esm/Tooltip/index.js +2 -2
- package/esm/Tooltip/index.props.d.ts +1 -1
- package/package.json +1 -1
package/Avatar/index.js
CHANGED
|
@@ -23,8 +23,8 @@ var clx = classNames__default.default.bind(styles__default.default);
|
|
|
23
23
|
var getStubImage = function getStubImage(type) {
|
|
24
24
|
return type === index_props.AccountType.Organization ? orgCircle.default : userCircle.default;
|
|
25
25
|
};
|
|
26
|
-
var SIZE_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default[
|
|
27
|
-
var TEXT_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default[
|
|
26
|
+
var SIZE_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default["size-s"]), constants.AvatarSize.M, styles__default.default["size-m"]), constants.AvatarSize.L, styles__default.default["size-l"]), constants.AvatarSize.XL, styles__default.default["size-xl"]), constants.AvatarSize.XXL, styles__default.default["size-xxl"]), constants.AvatarSize.XXXL, styles__default.default["size-xxxl"]);
|
|
27
|
+
var TEXT_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default["text-s"]), constants.AvatarSize.M, styles__default.default["text-m"]), constants.AvatarSize.L, styles__default.default["text-l"]), constants.AvatarSize.XL, styles__default.default["text-xl"]), constants.AvatarSize.XXL, styles__default.default["text-xxl"]), constants.AvatarSize.XXXL, styles__default.default["text-xxxl"]);
|
|
28
28
|
var Avatar = /*#__PURE__*/React.memo(function (props) {
|
|
29
29
|
var src = props.src,
|
|
30
30
|
_props$size = props.size,
|
|
@@ -63,7 +63,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
|
|
|
63
63
|
"data-testid": "avatar",
|
|
64
64
|
alt: alt,
|
|
65
65
|
src: finalSrc,
|
|
66
|
-
className: clx(
|
|
66
|
+
className: clx("avatar", {
|
|
67
67
|
avatarBordered: !!bordered
|
|
68
68
|
}, SIZE_CLASSES[size], className)
|
|
69
69
|
}, rest)))) : (
|
|
@@ -75,12 +75,12 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
|
|
|
75
75
|
role: "button",
|
|
76
76
|
"aria-label": ariaLabel || "Avatar",
|
|
77
77
|
onClick: onClick,
|
|
78
|
-
className: clx(
|
|
78
|
+
className: clx("avatarInitials", {
|
|
79
79
|
avatarBordered: !!bordered,
|
|
80
80
|
loading: !!loading
|
|
81
81
|
}, SIZE_CLASSES[size], className)
|
|
82
82
|
}, rest), /*#__PURE__*/React__default.default.createElement("span", {
|
|
83
|
-
className: clx(
|
|
83
|
+
className: clx("initialsText", TEXT_CLASSES[size])
|
|
84
84
|
}, (initials === null || initials === void 0 ? void 0 : initials.trim().slice(0, 2)) || "")));
|
|
85
85
|
});
|
|
86
86
|
|
|
@@ -28,7 +28,7 @@ var MenuItem = function MenuItem(_a) {
|
|
|
28
28
|
ref = _a.ref,
|
|
29
29
|
props = tslib.__rest(_a, ["className", "isSelected", "variant", "disabled", "onClick", "children", "onMouseEnter", "ref"]);
|
|
30
30
|
var handleKeyDown = function handleKeyDown(event) {
|
|
31
|
-
if (!disabled && (event.key ===
|
|
31
|
+
if (!disabled && (event.key === "Enter" || event.key === " ")) {
|
|
32
32
|
event.preventDefault();
|
|
33
33
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
34
34
|
}
|
|
@@ -40,8 +40,8 @@ var MenuItem = function MenuItem(_a) {
|
|
|
40
40
|
"data-testid": "menuitem",
|
|
41
41
|
"aria-disabled": disabled || undefined,
|
|
42
42
|
className: clx("item", _defineProperty__default.default({
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
item_disabled: disabled,
|
|
44
|
+
item_selected: isSelected
|
|
45
45
|
}, "item_variant_".concat(variant), true), className),
|
|
46
46
|
onClick: !disabled ? onClick : undefined,
|
|
47
47
|
onKeyDown: handleKeyDown,
|
package/Menu/index.js
CHANGED
|
@@ -39,7 +39,7 @@ var Menu = function Menu(_ref) {
|
|
|
39
39
|
}, [children, selected, onClick, variant]);
|
|
40
40
|
return /*#__PURE__*/React__default.default.createElement("ul", {
|
|
41
41
|
ref: ref,
|
|
42
|
-
className: clx(
|
|
42
|
+
className: clx("menu", className),
|
|
43
43
|
role: "menu"
|
|
44
44
|
}, renderChild);
|
|
45
45
|
};
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var classNames = require('classnames/bind');
|
|
8
7
|
var index$2 = require('../../../Menu/index.js');
|
|
9
8
|
var index$3 = require('../MenuOverlayItem/index.js');
|
|
10
9
|
var index = require('../../../Typography/index.js');
|
|
@@ -16,10 +15,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
16
15
|
|
|
17
16
|
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
|
|
18
17
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
19
|
-
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
20
18
|
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
21
19
|
|
|
22
|
-
var clx = classNames__default.default.bind(styles__default.default);
|
|
23
20
|
var OFFSET_ITEMS_COUNT = 2;
|
|
24
21
|
var MenuOverlay = function MenuOverlay(_ref) {
|
|
25
22
|
var groups = _ref.groups,
|
|
@@ -76,12 +73,12 @@ var MenuOverlay = function MenuOverlay(_ref) {
|
|
|
76
73
|
}, []);
|
|
77
74
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
78
75
|
ref: rootRef,
|
|
79
|
-
className:
|
|
76
|
+
className: styles__default.default.root
|
|
80
77
|
}, groups.map(function (group, index$5) {
|
|
81
78
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
82
79
|
key: "item-".concat(index$5)
|
|
83
80
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
84
|
-
className:
|
|
81
|
+
className: styles__default.default.title
|
|
85
82
|
}, /*#__PURE__*/React__default.default.createElement(index.default, {
|
|
86
83
|
style: {
|
|
87
84
|
color: "var(--typography-secondary)"
|
package/MultiSelect/index.js
CHANGED
|
@@ -129,16 +129,19 @@ var MultiSelect = function MultiSelect(_ref2) {
|
|
|
129
129
|
onChange: handleChange
|
|
130
130
|
}),
|
|
131
131
|
samewidth: true
|
|
132
|
+
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
133
|
+
tabIndex: 0,
|
|
134
|
+
role: "button"
|
|
132
135
|
}, /*#__PURE__*/React__default.default.createElement(index$4.default, {
|
|
133
136
|
hasError: hasError,
|
|
134
137
|
size: size,
|
|
135
138
|
style: style,
|
|
136
|
-
className: clx(
|
|
139
|
+
className: clx("root", {
|
|
137
140
|
root_auto: preparedLabel.length
|
|
138
141
|
}),
|
|
139
142
|
endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
|
|
140
|
-
className: clx(
|
|
141
|
-
icon_isOpen: isOpen
|
|
143
|
+
className: clx("icon", {
|
|
144
|
+
icon_isOpen: isOpen && Boolean(!disabled)
|
|
142
145
|
})
|
|
143
146
|
}),
|
|
144
147
|
disabled: Boolean(disabled)
|
|
@@ -165,7 +168,7 @@ var MultiSelect = function MultiSelect(_ref2) {
|
|
|
165
168
|
name: name,
|
|
166
169
|
tabIndex: -1,
|
|
167
170
|
value: internalSelectedKeys.join(",") || ""
|
|
168
|
-
}))));
|
|
171
|
+
})))));
|
|
169
172
|
};
|
|
170
173
|
|
|
171
174
|
exports.default = MultiSelect;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var classNames = require('classnames/bind');
|
|
8
7
|
var index = require('../../../Menu/index.js');
|
|
9
8
|
var index$1 = require('../MenuOverlayItem/index.js');
|
|
10
9
|
var styles = require('./index.module.css');
|
|
@@ -13,10 +12,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
13
12
|
|
|
14
13
|
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
|
|
15
14
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
16
|
-
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
17
15
|
var styles__default = /*#__PURE__*/_interopDefault(styles);
|
|
18
16
|
|
|
19
|
-
var clx = classNames__default.default.bind(styles__default.default);
|
|
20
17
|
var OFFSET_ITEMS_COUNT = 2;
|
|
21
18
|
var MenuOverlay = function MenuOverlay(_ref) {
|
|
22
19
|
var options = _ref.options,
|
|
@@ -50,7 +47,7 @@ var MenuOverlay = function MenuOverlay(_ref) {
|
|
|
50
47
|
}, [scrollView, rootRef]);
|
|
51
48
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
52
49
|
ref: rootRef,
|
|
53
|
-
className:
|
|
50
|
+
className: styles__default.default.root
|
|
54
51
|
}, /*#__PURE__*/React__default.default.createElement(index.default, {
|
|
55
52
|
ref: listRef,
|
|
56
53
|
selected: selected
|
package/Select/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { JSX } from "react";
|
|
2
2
|
import type { SelectProps } from "./index.props";
|
|
3
|
-
declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) =>
|
|
3
|
+
declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => JSX.Element;
|
|
4
4
|
export default Select;
|
package/Select/index.js
CHANGED
|
@@ -57,7 +57,7 @@ var Select = function Select(_ref) {
|
|
|
57
57
|
};
|
|
58
58
|
});
|
|
59
59
|
}, [value, options]);
|
|
60
|
-
var
|
|
60
|
+
var preparedLabel = React.useMemo(function () {
|
|
61
61
|
var _a;
|
|
62
62
|
return (_a = preparedOptions.find(function (_ref3) {
|
|
63
63
|
var selected = _ref3.selected;
|
|
@@ -79,33 +79,36 @@ var Select = function Select(_ref) {
|
|
|
79
79
|
trigger: ["click"],
|
|
80
80
|
zIndex: zIndex,
|
|
81
81
|
fontSize: fontSize,
|
|
82
|
-
disabled:
|
|
82
|
+
disabled: Boolean(disabled),
|
|
83
83
|
overlay: /*#__PURE__*/React__default.default.createElement(index$2.default, {
|
|
84
84
|
options: preparedOptions,
|
|
85
85
|
onChange: onChange
|
|
86
86
|
}),
|
|
87
87
|
samewidth: true
|
|
88
|
-
}, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.default.createElement(
|
|
88
|
+
}, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.default.createElement("div", {
|
|
89
|
+
tabIndex: 0,
|
|
90
|
+
role: "button"
|
|
91
|
+
}, /*#__PURE__*/React__default.default.createElement(index$3.default, {
|
|
89
92
|
hasError: hasError,
|
|
90
93
|
size: size,
|
|
91
94
|
className: clx(styles__default.default.root),
|
|
92
95
|
endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
|
|
93
96
|
className: clx(styles__default.default.icon, {
|
|
94
|
-
icon_isOpen: isOpen
|
|
97
|
+
icon_isOpen: isOpen && Boolean(!disabled)
|
|
95
98
|
})
|
|
96
99
|
}),
|
|
97
|
-
disabled:
|
|
100
|
+
disabled: Boolean(disabled)
|
|
98
101
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
99
102
|
className: clx(styles__default.default["base-input"]),
|
|
100
103
|
"data-testid": "base-input"
|
|
101
|
-
},
|
|
104
|
+
}, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React__default.default.createElement("span", {
|
|
102
105
|
className: clx(styles__default.default.placeholder)
|
|
103
106
|
}, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
|
|
104
107
|
type: "hidden",
|
|
105
108
|
name: name,
|
|
106
109
|
tabIndex: -1,
|
|
107
110
|
value: value || ""
|
|
108
|
-
})))));
|
|
111
|
+
}))))));
|
|
109
112
|
};
|
|
110
113
|
|
|
111
114
|
exports.default = Select;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
.tooltip {
|
|
2
2
|
background-color: var(--tooltip-bg);
|
|
3
3
|
border-radius: 0.35rem;
|
|
4
|
-
|
|
4
|
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
color: var(--tooltip-color);
|
|
7
|
+
display: inline-block;
|
|
5
8
|
font-size: 14px;
|
|
6
9
|
font-weight: 400;
|
|
7
10
|
line-height: 18px;
|
|
8
|
-
color: var(--tooltip-color);
|
|
9
11
|
max-width: 200px;
|
|
10
|
-
|
|
11
|
-
z-index: 1000;
|
|
12
|
+
padding: 4px 10px;
|
|
12
13
|
position: relative;
|
|
13
|
-
|
|
14
|
-
box-sizing: border-box;
|
|
14
|
+
z-index: 1000;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.content {
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
font-size: inherit;
|
|
22
22
|
font-weight: inherit;
|
|
23
23
|
line-height: inherit;
|
|
24
|
-
padding: inherit;
|
|
25
24
|
max-width: inherit;
|
|
26
25
|
overflow: hidden;
|
|
26
|
+
padding: inherit;
|
|
27
27
|
position: relative;
|
|
28
28
|
}
|
package/Tooltip/index.js
CHANGED
|
@@ -80,10 +80,10 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
80
80
|
})
|
|
81
81
|
}), /*#__PURE__*/React__default.default.createElement("div", {
|
|
82
82
|
className: clx("content")
|
|
83
|
-
}, content), withTail &&
|
|
83
|
+
}, content), withTail && /*#__PURE__*/React__default.default.createElement(react.FloatingArrow, {
|
|
84
84
|
ref: arrowRef,
|
|
85
85
|
context: context
|
|
86
|
-
})))))
|
|
86
|
+
})))));
|
|
87
87
|
};
|
|
88
88
|
|
|
89
89
|
exports.default = Tooltip;
|
package/Tooltip/index.props.d.ts
CHANGED
package/esm/Avatar/index.js
CHANGED
|
@@ -12,8 +12,8 @@ var clx = classNames.bind(styles);
|
|
|
12
12
|
var getStubImage = function getStubImage(type) {
|
|
13
13
|
return type === AccountType.Organization ? orgCircleUrl : userCircleUrl;
|
|
14
14
|
};
|
|
15
|
-
var SIZE_CLASSES = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, AvatarSize.S, styles[
|
|
16
|
-
var TEXT_CLASSES = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, AvatarSize.S, styles[
|
|
15
|
+
var SIZE_CLASSES = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, AvatarSize.S, styles["size-s"]), AvatarSize.M, styles["size-m"]), AvatarSize.L, styles["size-l"]), AvatarSize.XL, styles["size-xl"]), AvatarSize.XXL, styles["size-xxl"]), AvatarSize.XXXL, styles["size-xxxl"]);
|
|
16
|
+
var TEXT_CLASSES = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, AvatarSize.S, styles["text-s"]), AvatarSize.M, styles["text-m"]), AvatarSize.L, styles["text-l"]), AvatarSize.XL, styles["text-xl"]), AvatarSize.XXL, styles["text-xxl"]), AvatarSize.XXXL, styles["text-xxxl"]);
|
|
17
17
|
var Avatar = /*#__PURE__*/memo(function (props) {
|
|
18
18
|
var src = props.src,
|
|
19
19
|
_props$size = props.size,
|
|
@@ -52,7 +52,7 @@ var Avatar = /*#__PURE__*/memo(function (props) {
|
|
|
52
52
|
"data-testid": "avatar",
|
|
53
53
|
alt: alt,
|
|
54
54
|
src: finalSrc,
|
|
55
|
-
className: clx(
|
|
55
|
+
className: clx("avatar", {
|
|
56
56
|
avatarBordered: !!bordered
|
|
57
57
|
}, SIZE_CLASSES[size], className)
|
|
58
58
|
}, rest)))) : (
|
|
@@ -64,12 +64,12 @@ var Avatar = /*#__PURE__*/memo(function (props) {
|
|
|
64
64
|
role: "button",
|
|
65
65
|
"aria-label": ariaLabel || "Avatar",
|
|
66
66
|
onClick: onClick,
|
|
67
|
-
className: clx(
|
|
67
|
+
className: clx("avatarInitials", {
|
|
68
68
|
avatarBordered: !!bordered,
|
|
69
69
|
loading: !!loading
|
|
70
70
|
}, SIZE_CLASSES[size], className)
|
|
71
71
|
}, rest), /*#__PURE__*/React__default.createElement("span", {
|
|
72
|
-
className: clx(
|
|
72
|
+
className: clx("initialsText", TEXT_CLASSES[size])
|
|
73
73
|
}, (initials === null || initials === void 0 ? void 0 : initials.trim().slice(0, 2)) || "")));
|
|
74
74
|
});
|
|
75
75
|
|
|
@@ -17,7 +17,7 @@ var MenuItem = function MenuItem(_a) {
|
|
|
17
17
|
ref = _a.ref,
|
|
18
18
|
props = __rest(_a, ["className", "isSelected", "variant", "disabled", "onClick", "children", "onMouseEnter", "ref"]);
|
|
19
19
|
var handleKeyDown = function handleKeyDown(event) {
|
|
20
|
-
if (!disabled && (event.key ===
|
|
20
|
+
if (!disabled && (event.key === "Enter" || event.key === " ")) {
|
|
21
21
|
event.preventDefault();
|
|
22
22
|
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
23
23
|
}
|
|
@@ -29,8 +29,8 @@ var MenuItem = function MenuItem(_a) {
|
|
|
29
29
|
"data-testid": "menuitem",
|
|
30
30
|
"aria-disabled": disabled || undefined,
|
|
31
31
|
className: clx("item", _defineProperty({
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
item_disabled: disabled,
|
|
33
|
+
item_selected: isSelected
|
|
34
34
|
}, "item_variant_".concat(variant), true), className),
|
|
35
35
|
onClick: !disabled ? onClick : undefined,
|
|
36
36
|
onKeyDown: handleKeyDown,
|
package/esm/Menu/index.js
CHANGED
|
@@ -29,7 +29,7 @@ var Menu = function Menu(_ref) {
|
|
|
29
29
|
}, [children, selected, onClick, variant]);
|
|
30
30
|
return /*#__PURE__*/React__default.createElement("ul", {
|
|
31
31
|
ref: ref,
|
|
32
|
-
className: clx(
|
|
32
|
+
className: clx("menu", className),
|
|
33
33
|
role: "menu"
|
|
34
34
|
}, renderChild);
|
|
35
35
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
2
|
import React__default, { memo, useRef, useState, useLayoutEffect } from 'react';
|
|
3
|
-
import classNames from 'classnames/bind';
|
|
4
3
|
import Menu from '../../../Menu/index.js';
|
|
5
4
|
import SelectItem from '../MenuOverlayItem/index.js';
|
|
6
5
|
import Typography from '../../../Typography/index.js';
|
|
@@ -8,7 +7,6 @@ import Separator from '../../../Separator/index.js';
|
|
|
8
7
|
import { toKey } from '../../utils/index.js';
|
|
9
8
|
import styles from './index.module.css';
|
|
10
9
|
|
|
11
|
-
var clx = classNames.bind(styles);
|
|
12
10
|
var OFFSET_ITEMS_COUNT = 2;
|
|
13
11
|
var MenuOverlay = function MenuOverlay(_ref) {
|
|
14
12
|
var groups = _ref.groups,
|
|
@@ -65,12 +63,12 @@ var MenuOverlay = function MenuOverlay(_ref) {
|
|
|
65
63
|
}, []);
|
|
66
64
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
67
65
|
ref: rootRef,
|
|
68
|
-
className:
|
|
66
|
+
className: styles.root
|
|
69
67
|
}, groups.map(function (group, index) {
|
|
70
68
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
71
69
|
key: "item-".concat(index)
|
|
72
70
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
73
|
-
className:
|
|
71
|
+
className: styles.title
|
|
74
72
|
}, /*#__PURE__*/React__default.createElement(Typography, {
|
|
75
73
|
style: {
|
|
76
74
|
color: "var(--typography-secondary)"
|
package/esm/MultiSelect/index.js
CHANGED
|
@@ -117,16 +117,19 @@ var MultiSelect = function MultiSelect(_ref2) {
|
|
|
117
117
|
onChange: handleChange
|
|
118
118
|
}),
|
|
119
119
|
samewidth: true
|
|
120
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
121
|
+
tabIndex: 0,
|
|
122
|
+
role: "button"
|
|
120
123
|
}, /*#__PURE__*/React__default.createElement(InputRoot, {
|
|
121
124
|
hasError: hasError,
|
|
122
125
|
size: size,
|
|
123
126
|
style: style,
|
|
124
|
-
className: clx(
|
|
127
|
+
className: clx("root", {
|
|
125
128
|
root_auto: preparedLabel.length
|
|
126
129
|
}),
|
|
127
130
|
endIcon: /*#__PURE__*/React__default.createElement(Chevron, {
|
|
128
|
-
className: clx(
|
|
129
|
-
icon_isOpen: isOpen
|
|
131
|
+
className: clx("icon", {
|
|
132
|
+
icon_isOpen: isOpen && Boolean(!disabled)
|
|
130
133
|
})
|
|
131
134
|
}),
|
|
132
135
|
disabled: Boolean(disabled)
|
|
@@ -153,7 +156,7 @@ var MultiSelect = function MultiSelect(_ref2) {
|
|
|
153
156
|
name: name,
|
|
154
157
|
tabIndex: -1,
|
|
155
158
|
value: internalSelectedKeys.join(",") || ""
|
|
156
|
-
}))));
|
|
159
|
+
})))));
|
|
157
160
|
};
|
|
158
161
|
|
|
159
162
|
export { MultiSelect as default };
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
2
|
import React__default, { useState, useRef, useCallback, useLayoutEffect } from 'react';
|
|
3
|
-
import classNames from 'classnames/bind';
|
|
4
3
|
import Menu from '../../../Menu/index.js';
|
|
5
4
|
import SelectItem from '../MenuOverlayItem/index.js';
|
|
6
5
|
import styles from './index.module.css';
|
|
7
6
|
|
|
8
|
-
var clx = classNames.bind(styles);
|
|
9
7
|
var OFFSET_ITEMS_COUNT = 2;
|
|
10
8
|
var MenuOverlay = function MenuOverlay(_ref) {
|
|
11
9
|
var options = _ref.options,
|
|
@@ -39,7 +37,7 @@ var MenuOverlay = function MenuOverlay(_ref) {
|
|
|
39
37
|
}, [scrollView, rootRef]);
|
|
40
38
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
41
39
|
ref: rootRef,
|
|
42
|
-
className:
|
|
40
|
+
className: styles.root
|
|
43
41
|
}, /*#__PURE__*/React__default.createElement(Menu, {
|
|
44
42
|
ref: listRef,
|
|
45
43
|
selected: selected
|
package/esm/Select/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { JSX } from "react";
|
|
2
2
|
import type { SelectProps } from "./index.props";
|
|
3
|
-
declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) =>
|
|
3
|
+
declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => JSX.Element;
|
|
4
4
|
export default Select;
|
package/esm/Select/index.js
CHANGED
|
@@ -46,7 +46,7 @@ var Select = function Select(_ref) {
|
|
|
46
46
|
};
|
|
47
47
|
});
|
|
48
48
|
}, [value, options]);
|
|
49
|
-
var
|
|
49
|
+
var preparedLabel = useMemo(function () {
|
|
50
50
|
var _a;
|
|
51
51
|
return (_a = preparedOptions.find(function (_ref3) {
|
|
52
52
|
var selected = _ref3.selected;
|
|
@@ -68,33 +68,36 @@ var Select = function Select(_ref) {
|
|
|
68
68
|
trigger: ["click"],
|
|
69
69
|
zIndex: zIndex,
|
|
70
70
|
fontSize: fontSize,
|
|
71
|
-
disabled:
|
|
71
|
+
disabled: Boolean(disabled),
|
|
72
72
|
overlay: /*#__PURE__*/React__default.createElement(MenuOverlay, {
|
|
73
73
|
options: preparedOptions,
|
|
74
74
|
onChange: onChange
|
|
75
75
|
}),
|
|
76
76
|
samewidth: true
|
|
77
|
-
}, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.createElement(
|
|
77
|
+
}, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.createElement("div", {
|
|
78
|
+
tabIndex: 0,
|
|
79
|
+
role: "button"
|
|
80
|
+
}, /*#__PURE__*/React__default.createElement(InputRoot, {
|
|
78
81
|
hasError: hasError,
|
|
79
82
|
size: size,
|
|
80
83
|
className: clx(styles.root),
|
|
81
84
|
endIcon: /*#__PURE__*/React__default.createElement(Chevron, {
|
|
82
85
|
className: clx(styles.icon, {
|
|
83
|
-
icon_isOpen: isOpen
|
|
86
|
+
icon_isOpen: isOpen && Boolean(!disabled)
|
|
84
87
|
})
|
|
85
88
|
}),
|
|
86
|
-
disabled:
|
|
89
|
+
disabled: Boolean(disabled)
|
|
87
90
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
88
91
|
className: clx(styles["base-input"]),
|
|
89
92
|
"data-testid": "base-input"
|
|
90
|
-
},
|
|
93
|
+
}, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React__default.createElement("span", {
|
|
91
94
|
className: clx(styles.placeholder)
|
|
92
95
|
}, placeholder))), /*#__PURE__*/React__default.createElement("input", {
|
|
93
96
|
type: "hidden",
|
|
94
97
|
name: name,
|
|
95
98
|
tabIndex: -1,
|
|
96
99
|
value: value || ""
|
|
97
|
-
})))));
|
|
100
|
+
}))))));
|
|
98
101
|
};
|
|
99
102
|
|
|
100
103
|
export { Select as default };
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
.tooltip {
|
|
2
2
|
background-color: var(--tooltip-bg);
|
|
3
3
|
border-radius: 0.35rem;
|
|
4
|
-
|
|
4
|
+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
5
|
+
box-sizing: border-box;
|
|
6
|
+
color: var(--tooltip-color);
|
|
7
|
+
display: inline-block;
|
|
5
8
|
font-size: 14px;
|
|
6
9
|
font-weight: 400;
|
|
7
10
|
line-height: 18px;
|
|
8
|
-
color: var(--tooltip-color);
|
|
9
11
|
max-width: 200px;
|
|
10
|
-
|
|
11
|
-
z-index: 1000;
|
|
12
|
+
padding: 4px 10px;
|
|
12
13
|
position: relative;
|
|
13
|
-
|
|
14
|
-
box-sizing: border-box;
|
|
14
|
+
z-index: 1000;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.content {
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
font-size: inherit;
|
|
22
22
|
font-weight: inherit;
|
|
23
23
|
line-height: inherit;
|
|
24
|
-
padding: inherit;
|
|
25
24
|
max-width: inherit;
|
|
26
25
|
overflow: hidden;
|
|
26
|
+
padding: inherit;
|
|
27
27
|
position: relative;
|
|
28
28
|
}
|
package/esm/Tooltip/index.js
CHANGED
|
@@ -69,10 +69,10 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
69
69
|
})
|
|
70
70
|
}), /*#__PURE__*/React__default.createElement("div", {
|
|
71
71
|
className: clx("content")
|
|
72
|
-
}, content), withTail &&
|
|
72
|
+
}, content), withTail && /*#__PURE__*/React__default.createElement(FloatingArrow, {
|
|
73
73
|
ref: arrowRef,
|
|
74
74
|
context: context
|
|
75
|
-
})))))
|
|
75
|
+
})))));
|
|
76
76
|
};
|
|
77
77
|
|
|
78
78
|
export { Tooltip as default };
|