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 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['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']);
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('avatar', {
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('avatarInitials', {
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('initialsText', TEXT_CLASSES[size])
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 === 'Enter' || 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
- 'item_disabled': disabled,
44
- 'item_selected': isSelected
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('menu', className),
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: clx(styles__default.default.root)
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: clx(styles__default.default.title)
81
+ className: styles__default.default.title
85
82
  }, /*#__PURE__*/React__default.default.createElement(index.default, {
86
83
  style: {
87
84
  color: "var(--typography-secondary)"
@@ -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(styles__default.default.root, {
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(styles__default.default.icon, {
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;
@@ -1,7 +1,6 @@
1
1
  .root {
2
2
  cursor: pointer;
3
3
  }
4
-
5
4
  .root_auto {
6
5
  height: auto;
7
6
  min-height: 36px;
@@ -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: clx(styles__default.default.root)
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 React from "react";
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>) => React.JSX.Element;
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 prepraredLabel = React.useMemo(function () {
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: !!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(index$3.default, {
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 ? 1 : 0
97
+ icon_isOpen: isOpen && Boolean(!disabled)
95
98
  })
96
99
  }),
97
- disabled: !!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
- }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (/*#__PURE__*/React__default.default.createElement("span", {
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
- padding: 4px 10px;
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
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
11
- z-index: 1000;
12
+ padding: 4px 10px;
12
13
  position: relative;
13
- display: inline-block;
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 && (/*#__PURE__*/React__default.default.createElement(react.FloatingArrow, {
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;
@@ -1,5 +1,5 @@
1
+ import type { Placement, Strategy } from "@floating-ui/react";
1
2
  import type { ReactNode } from "react";
2
- import { Placement, Strategy } from "@floating-ui/react";
3
3
  export type TooltipProps = {
4
4
  content: ReactNode;
5
5
  zIndex?: number;
@@ -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['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']);
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('avatar', {
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('avatarInitials', {
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('initialsText', TEXT_CLASSES[size])
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 === 'Enter' || 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
- 'item_disabled': disabled,
33
- 'item_selected': isSelected
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('menu', className),
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: clx(styles.root)
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: clx(styles.title)
71
+ className: styles.title
74
72
  }, /*#__PURE__*/React__default.createElement(Typography, {
75
73
  style: {
76
74
  color: "var(--typography-secondary)"
@@ -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(styles.root, {
127
+ className: clx("root", {
125
128
  root_auto: preparedLabel.length
126
129
  }),
127
130
  endIcon: /*#__PURE__*/React__default.createElement(Chevron, {
128
- className: clx(styles.icon, {
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,7 +1,6 @@
1
1
  .root {
2
2
  cursor: pointer;
3
3
  }
4
-
5
4
  .root_auto {
6
5
  height: auto;
7
6
  min-height: 36px;
@@ -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: clx(styles.root)
40
+ className: styles.root
43
41
  }, /*#__PURE__*/React__default.createElement(Menu, {
44
42
  ref: listRef,
45
43
  selected: selected
@@ -1,4 +1,4 @@
1
- import React from "react";
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>) => React.JSX.Element;
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;
@@ -46,7 +46,7 @@ var Select = function Select(_ref) {
46
46
  };
47
47
  });
48
48
  }, [value, options]);
49
- var prepraredLabel = useMemo(function () {
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: !!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(InputRoot, {
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 ? 1 : 0
86
+ icon_isOpen: isOpen && Boolean(!disabled)
84
87
  })
85
88
  }),
86
- disabled: !!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
- }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (/*#__PURE__*/React__default.createElement("span", {
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
- padding: 4px 10px;
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
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
11
- z-index: 1000;
12
+ padding: 4px 10px;
12
13
  position: relative;
13
- display: inline-block;
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
  }
@@ -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 && (/*#__PURE__*/React__default.createElement(FloatingArrow, {
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 };
@@ -1,5 +1,5 @@
1
+ import type { Placement, Strategy } from "@floating-ui/react";
1
2
  import type { ReactNode } from "react";
2
- import { Placement, Strategy } from "@floating-ui/react";
3
3
  export type TooltipProps = {
4
4
  content: ReactNode;
5
5
  zIndex?: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.8.50",
3
+ "version": "0.8.51",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",