@atlaskit/react-select 1.3.3 → 1.4.0
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/CHANGELOG.md +8 -0
- package/dist/cjs/components/containers.js +6 -8
- package/dist/cjs/components/control.js +6 -8
- package/dist/cjs/components/group.js +7 -10
- package/dist/cjs/components/indicators.js +12 -15
- package/dist/cjs/components/input.js +2 -2
- package/dist/cjs/components/menu.js +33 -41
- package/dist/cjs/components/multi-value.js +14 -16
- package/dist/cjs/components/option.js +6 -8
- package/dist/cjs/components/placeholder.js +6 -8
- package/dist/cjs/components/single-value.js +6 -8
- package/dist/cjs/select.js +2 -4
- package/dist/es2019/components/containers.js +2 -4
- package/dist/es2019/components/control.js +10 -12
- package/dist/es2019/components/group.js +10 -12
- package/dist/es2019/components/indicators.js +13 -19
- package/dist/es2019/components/input.js +5 -7
- package/dist/es2019/components/menu.js +12 -18
- package/dist/es2019/components/multi-value.js +19 -25
- package/dist/es2019/components/option.js +8 -10
- package/dist/es2019/components/placeholder.js +4 -6
- package/dist/es2019/components/single-value.js +4 -6
- package/dist/es2019/select.js +2 -6
- package/dist/esm/components/containers.js +4 -8
- package/dist/esm/components/control.js +4 -8
- package/dist/esm/components/group.js +6 -10
- package/dist/esm/components/indicators.js +12 -15
- package/dist/esm/components/input.js +2 -2
- package/dist/esm/components/menu.js +33 -41
- package/dist/esm/components/multi-value.js +14 -16
- package/dist/esm/components/option.js +4 -8
- package/dist/esm/components/placeholder.js +4 -8
- package/dist/esm/components/single-value.js +4 -8
- package/dist/esm/select.js +2 -4
- package/dist/types/components/containers.d.ts +1 -1
- package/dist/types/components/control.d.ts +1 -1
- package/dist/types/components/group.d.ts +2 -2
- package/dist/types/components/indicators.d.ts +4 -4
- package/dist/types/components/input.d.ts +1 -1
- package/dist/types/components/menu.d.ts +4 -4
- package/dist/types/components/multi-value.d.ts +3 -3
- package/dist/types/components/option.d.ts +1 -1
- package/dist/types/components/placeholder.d.ts +1 -1
- package/dist/types/components/single-value.d.ts +1 -1
- package/dist/types/select.d.ts +0 -6
- package/dist/types/styles.d.ts +1 -1
- package/dist/types-ts4.5/components/containers.d.ts +1 -1
- package/dist/types-ts4.5/components/control.d.ts +1 -1
- package/dist/types-ts4.5/components/group.d.ts +2 -2
- package/dist/types-ts4.5/components/indicators.d.ts +4 -4
- package/dist/types-ts4.5/components/input.d.ts +1 -1
- package/dist/types-ts4.5/components/menu.d.ts +4 -4
- package/dist/types-ts4.5/components/multi-value.d.ts +3 -3
- package/dist/types-ts4.5/components/option.d.ts +1 -1
- package/dist/types-ts4.5/components/placeholder.d.ts +1 -1
- package/dist/types-ts4.5/components/single-value.d.ts +1 -1
- package/dist/types-ts4.5/select.d.ts +0 -6
- package/dist/types-ts4.5/styles.d.ts +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/react-select
|
|
2
2
|
|
|
3
|
+
## 1.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#166811](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166811)
|
|
8
|
+
[`6bfa3f552b209`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6bfa3f552b209) -
|
|
9
|
+
Remove unstyled prop
|
|
10
|
+
|
|
3
11
|
## 1.3.3
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -5,15 +5,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.valueContainerCSS = exports.indicatorsContainerCSS = exports.containerCSS = exports.ValueContainer = exports.SelectContainer = exports.IndicatorsContainer = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
9
|
var _react = require("@emotion/react");
|
|
11
10
|
var _utils = require("../utils");
|
|
12
|
-
|
|
13
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
11
|
+
/**
|
|
14
12
|
* @jsxRuntime classic
|
|
15
13
|
* @jsx jsx
|
|
16
14
|
*/
|
|
15
|
+
|
|
17
16
|
// ==============================
|
|
18
17
|
// Root Container
|
|
19
18
|
// ==============================
|
|
@@ -46,22 +45,21 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
|
|
|
46
45
|
// Value Container
|
|
47
46
|
// ==============================
|
|
48
47
|
|
|
49
|
-
var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(_ref2
|
|
48
|
+
var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(_ref2) {
|
|
50
49
|
var spacing = _ref2.theme.spacing,
|
|
51
50
|
isMulti = _ref2.isMulti,
|
|
52
51
|
hasValue = _ref2.hasValue,
|
|
53
52
|
controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
|
|
54
|
-
return
|
|
53
|
+
return {
|
|
55
54
|
alignItems: 'center',
|
|
56
55
|
display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
|
|
57
56
|
flex: 1,
|
|
58
57
|
flexWrap: 'wrap',
|
|
59
58
|
WebkitOverflowScrolling: 'touch',
|
|
60
59
|
position: 'relative',
|
|
61
|
-
overflow: 'hidden'
|
|
62
|
-
}, unstyled ? {} : {
|
|
60
|
+
overflow: 'hidden',
|
|
63
61
|
padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px")
|
|
64
|
-
}
|
|
62
|
+
};
|
|
65
63
|
};
|
|
66
64
|
|
|
67
65
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
@@ -6,22 +6,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.css = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
9
|
var _react = require("@emotion/react");
|
|
11
10
|
var _utils = require("../utils");
|
|
12
|
-
|
|
13
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
11
|
+
/**
|
|
14
12
|
* @jsxRuntime classic
|
|
15
13
|
* @jsx jsx
|
|
16
14
|
*/
|
|
17
|
-
|
|
15
|
+
|
|
16
|
+
var css = exports.css = function css(_ref) {
|
|
18
17
|
var isDisabled = _ref.isDisabled,
|
|
19
18
|
isFocused = _ref.isFocused,
|
|
20
19
|
_ref$theme = _ref.theme,
|
|
21
20
|
colors = _ref$theme.colors,
|
|
22
21
|
borderRadius = _ref$theme.borderRadius,
|
|
23
22
|
spacing = _ref$theme.spacing;
|
|
24
|
-
return
|
|
23
|
+
return {
|
|
25
24
|
label: 'control',
|
|
26
25
|
alignItems: 'center',
|
|
27
26
|
cursor: 'default',
|
|
@@ -31,8 +30,7 @@ var css = exports.css = function css(_ref, unstyled) {
|
|
|
31
30
|
minHeight: spacing.controlHeight,
|
|
32
31
|
outline: '0 !important',
|
|
33
32
|
position: 'relative',
|
|
34
|
-
transition: 'all 100ms'
|
|
35
|
-
}, unstyled ? {} : {
|
|
33
|
+
transition: 'all 100ms',
|
|
36
34
|
backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
|
|
37
35
|
borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
|
|
38
36
|
borderRadius: borderRadius,
|
|
@@ -42,7 +40,7 @@ var css = exports.css = function css(_ref, unstyled) {
|
|
|
42
40
|
'&:hover': {
|
|
43
41
|
borderColor: isFocused ? colors.primary : colors.neutral30
|
|
44
42
|
}
|
|
45
|
-
}
|
|
43
|
+
};
|
|
46
44
|
};
|
|
47
45
|
var Control = function Control(props) {
|
|
48
46
|
var children = props.children,
|
|
@@ -6,19 +6,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.groupHeadingCSS = exports.groupCSS = exports.default = exports.GroupHeading = void 0;
|
|
8
8
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
10
|
var _react = require("@emotion/react");
|
|
12
11
|
var _utils = require("../utils");
|
|
13
12
|
var _excluded = ["data"];
|
|
14
|
-
|
|
15
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
13
|
+
/**
|
|
16
14
|
* @jsxRuntime classic
|
|
17
15
|
* @jsx jsx
|
|
18
16
|
*/
|
|
19
|
-
var groupCSS = exports.groupCSS = function groupCSS(_ref
|
|
17
|
+
var groupCSS = exports.groupCSS = function groupCSS(_ref) {
|
|
20
18
|
var spacing = _ref.theme.spacing;
|
|
21
|
-
return
|
|
19
|
+
return {
|
|
22
20
|
paddingBottom: spacing.baseUnit * 2,
|
|
23
21
|
paddingTop: spacing.baseUnit * 2
|
|
24
22
|
};
|
|
@@ -46,15 +44,14 @@ var Group = function Group(props) {
|
|
|
46
44
|
cx: cx
|
|
47
45
|
}), label), (0, _react.jsx)("div", null, children));
|
|
48
46
|
};
|
|
49
|
-
var groupHeadingCSS = exports.groupHeadingCSS = function groupHeadingCSS(_ref2
|
|
47
|
+
var groupHeadingCSS = exports.groupHeadingCSS = function groupHeadingCSS(_ref2) {
|
|
50
48
|
var _ref2$theme = _ref2.theme,
|
|
51
49
|
colors = _ref2$theme.colors,
|
|
52
50
|
spacing = _ref2$theme.spacing;
|
|
53
|
-
return
|
|
51
|
+
return {
|
|
54
52
|
label: 'group',
|
|
55
53
|
cursor: 'default',
|
|
56
|
-
display: 'block'
|
|
57
|
-
}, unstyled ? {} : {
|
|
54
|
+
display: 'block',
|
|
58
55
|
color: colors.neutral40,
|
|
59
56
|
fontSize: '75%',
|
|
60
57
|
fontWeight: 500,
|
|
@@ -62,7 +59,7 @@ var groupHeadingCSS = exports.groupHeadingCSS = function groupHeadingCSS(_ref2,
|
|
|
62
59
|
paddingLeft: spacing.baseUnit * 3,
|
|
63
60
|
paddingRight: spacing.baseUnit * 3,
|
|
64
61
|
textTransform: 'uppercase'
|
|
65
|
-
}
|
|
62
|
+
};
|
|
66
63
|
};
|
|
67
64
|
|
|
68
65
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
@@ -69,22 +69,21 @@ var DownChevron = exports.DownChevron = function DownChevron(props) {
|
|
|
69
69
|
// Dropdown & Clear Buttons
|
|
70
70
|
// ==============================
|
|
71
71
|
|
|
72
|
-
var baseCSS = function baseCSS(_ref2
|
|
72
|
+
var baseCSS = function baseCSS(_ref2) {
|
|
73
73
|
var isFocused = _ref2.isFocused,
|
|
74
74
|
_ref2$theme = _ref2.theme,
|
|
75
75
|
baseUnit = _ref2$theme.spacing.baseUnit,
|
|
76
76
|
colors = _ref2$theme.colors;
|
|
77
|
-
return
|
|
77
|
+
return {
|
|
78
78
|
label: 'indicatorContainer',
|
|
79
79
|
display: 'flex',
|
|
80
|
-
transition: 'color 150ms'
|
|
81
|
-
}, unstyled ? {} : {
|
|
80
|
+
transition: 'color 150ms',
|
|
82
81
|
color: isFocused ? colors.neutral60 : colors.neutral20,
|
|
83
82
|
padding: baseUnit * 2,
|
|
84
83
|
':hover': {
|
|
85
84
|
color: isFocused ? colors.neutral80 : colors.neutral40
|
|
86
85
|
}
|
|
87
|
-
}
|
|
86
|
+
};
|
|
88
87
|
};
|
|
89
88
|
var dropdownIndicatorCSS = exports.dropdownIndicatorCSS = baseCSS;
|
|
90
89
|
|
|
@@ -113,20 +112,19 @@ var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
|
|
|
113
112
|
// Separator
|
|
114
113
|
// ==============================
|
|
115
114
|
|
|
116
|
-
var indicatorSeparatorCSS = exports.indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3
|
|
115
|
+
var indicatorSeparatorCSS = exports.indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) {
|
|
117
116
|
var isDisabled = _ref3.isDisabled,
|
|
118
117
|
_ref3$theme = _ref3.theme,
|
|
119
118
|
baseUnit = _ref3$theme.spacing.baseUnit,
|
|
120
119
|
colors = _ref3$theme.colors;
|
|
121
|
-
return
|
|
120
|
+
return {
|
|
122
121
|
label: 'indicatorSeparator',
|
|
123
122
|
alignSelf: 'stretch',
|
|
124
|
-
width: 1
|
|
125
|
-
}, unstyled ? {} : {
|
|
123
|
+
width: 1,
|
|
126
124
|
backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
|
|
127
125
|
marginBottom: baseUnit * 2,
|
|
128
126
|
marginTop: baseUnit * 2
|
|
129
|
-
}
|
|
127
|
+
};
|
|
130
128
|
};
|
|
131
129
|
|
|
132
130
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
@@ -149,13 +147,13 @@ var loadingDotAnimations = (0, _react.keyframes)({
|
|
|
149
147
|
opacity: 1
|
|
150
148
|
}
|
|
151
149
|
});
|
|
152
|
-
var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicatorCSS(_ref4
|
|
150
|
+
var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {
|
|
153
151
|
var isFocused = _ref4.isFocused,
|
|
154
152
|
size = _ref4.size,
|
|
155
153
|
_ref4$theme = _ref4.theme,
|
|
156
154
|
colors = _ref4$theme.colors,
|
|
157
155
|
baseUnit = _ref4$theme.spacing.baseUnit;
|
|
158
|
-
return
|
|
156
|
+
return {
|
|
159
157
|
label: 'loadingIndicator',
|
|
160
158
|
display: 'flex',
|
|
161
159
|
transition: 'color 150ms',
|
|
@@ -164,11 +162,10 @@ var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicato
|
|
|
164
162
|
lineHeight: 1,
|
|
165
163
|
marginRight: size,
|
|
166
164
|
textAlign: 'center',
|
|
167
|
-
verticalAlign: 'middle'
|
|
168
|
-
}, unstyled ? {} : {
|
|
165
|
+
verticalAlign: 'middle',
|
|
169
166
|
color: isFocused ? colors.neutral60 : colors.neutral20,
|
|
170
167
|
padding: baseUnit * 2
|
|
171
|
-
}
|
|
168
|
+
};
|
|
172
169
|
};
|
|
173
170
|
var LoadingDot = function LoadingDot(_ref5) {
|
|
174
171
|
var delay = _ref5.delay,
|
|
@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
16
16
|
* @jsxRuntime classic
|
|
17
17
|
* @jsx jsx
|
|
18
18
|
*/
|
|
19
|
-
var inputCSS = exports.inputCSS = function inputCSS(_ref
|
|
19
|
+
var inputCSS = exports.inputCSS = function inputCSS(_ref) {
|
|
20
20
|
var isDisabled = _ref.isDisabled,
|
|
21
21
|
value = _ref.value,
|
|
22
22
|
_ref$theme = _ref.theme,
|
|
@@ -27,7 +27,7 @@ var inputCSS = exports.inputCSS = function inputCSS(_ref, unstyled) {
|
|
|
27
27
|
// force css to recompute when value change due to @emotion bug.
|
|
28
28
|
// We can remove it whenever the bug is fixed.
|
|
29
29
|
transform: value ? 'translateZ(0)' : ''
|
|
30
|
-
}, containerStyle),
|
|
30
|
+
}, containerStyle), {}, {
|
|
31
31
|
margin: spacing.baseUnit / 2,
|
|
32
32
|
paddingBottom: spacing.baseUnit / 2,
|
|
33
33
|
paddingTop: spacing.baseUnit / 2,
|
|
@@ -199,22 +199,16 @@ function alignToControl(placement) {
|
|
|
199
199
|
var coercePlacement = function coercePlacement(p) {
|
|
200
200
|
return p === 'auto' ? 'bottom' : p;
|
|
201
201
|
};
|
|
202
|
-
var menuCSS = exports.menuCSS = function menuCSS(_ref2
|
|
203
|
-
var
|
|
202
|
+
var menuCSS = exports.menuCSS = function menuCSS(_ref2) {
|
|
203
|
+
var _ref3;
|
|
204
204
|
var placement = _ref2.placement,
|
|
205
205
|
_ref2$theme = _ref2.theme,
|
|
206
206
|
borderRadius = _ref2$theme.borderRadius,
|
|
207
207
|
spacing = _ref2$theme.spacing,
|
|
208
208
|
colors = _ref2$theme.colors;
|
|
209
|
-
return
|
|
209
|
+
return _ref3 = {
|
|
210
210
|
label: 'menu'
|
|
211
|
-
}, (0, _defineProperty2.default)(
|
|
212
|
-
backgroundColor: colors.neutral0,
|
|
213
|
-
borderRadius: borderRadius,
|
|
214
|
-
boxShadow: '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
|
|
215
|
-
marginBottom: spacing.menuGutter,
|
|
216
|
-
marginTop: spacing.menuGutter
|
|
217
|
-
});
|
|
211
|
+
}, (0, _defineProperty2.default)(_ref3, alignToControl(placement), '100%'), (0, _defineProperty2.default)(_ref3, "position", 'absolute'), (0, _defineProperty2.default)(_ref3, "width", '100%'), (0, _defineProperty2.default)(_ref3, "zIndex", 1), (0, _defineProperty2.default)(_ref3, "backgroundColor", colors.neutral0), (0, _defineProperty2.default)(_ref3, "borderRadius", borderRadius), (0, _defineProperty2.default)(_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), (0, _defineProperty2.default)(_ref3, "marginBottom", spacing.menuGutter), (0, _defineProperty2.default)(_ref3, "marginTop", spacing.menuGutter), _ref3;
|
|
218
212
|
};
|
|
219
213
|
var PortalPlacementContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
220
214
|
|
|
@@ -228,8 +222,8 @@ var MenuPlacer = exports.MenuPlacer = function MenuPlacer(props) {
|
|
|
228
222
|
menuPosition = props.menuPosition,
|
|
229
223
|
menuShouldScrollIntoView = props.menuShouldScrollIntoView,
|
|
230
224
|
theme = props.theme;
|
|
231
|
-
var
|
|
232
|
-
setPortalPlacement =
|
|
225
|
+
var _ref4 = (0, _react.useContext)(PortalPlacementContext) || {},
|
|
226
|
+
setPortalPlacement = _ref4.setPortalPlacement;
|
|
233
227
|
var ref = (0, _react.useRef)(null);
|
|
234
228
|
var _useState = (0, _react.useState)(maxMenuHeight),
|
|
235
229
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -285,19 +279,18 @@ var Menu = function Menu(props) {
|
|
|
285
279
|
var _default = exports.default = Menu; // ==============================
|
|
286
280
|
// Menu List
|
|
287
281
|
// ==============================
|
|
288
|
-
var menuListCSS = exports.menuListCSS = function menuListCSS(
|
|
289
|
-
var maxHeight =
|
|
290
|
-
baseUnit =
|
|
291
|
-
return
|
|
282
|
+
var menuListCSS = exports.menuListCSS = function menuListCSS(_ref5) {
|
|
283
|
+
var maxHeight = _ref5.maxHeight,
|
|
284
|
+
baseUnit = _ref5.theme.spacing.baseUnit;
|
|
285
|
+
return {
|
|
292
286
|
maxHeight: maxHeight,
|
|
293
287
|
overflowY: 'auto',
|
|
294
288
|
position: 'relative',
|
|
295
289
|
// required for offset[Height, Top] > keyboard scroll
|
|
296
|
-
WebkitOverflowScrolling: 'touch'
|
|
297
|
-
}, unstyled ? {} : {
|
|
290
|
+
WebkitOverflowScrolling: 'touch',
|
|
298
291
|
paddingBottom: baseUnit,
|
|
299
292
|
paddingTop: baseUnit
|
|
300
|
-
}
|
|
293
|
+
};
|
|
301
294
|
};
|
|
302
295
|
|
|
303
296
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
@@ -320,25 +313,24 @@ var MenuList = exports.MenuList = function MenuList(props) {
|
|
|
320
313
|
// Menu Notices
|
|
321
314
|
// ==============================
|
|
322
315
|
|
|
323
|
-
var noticeCSS = function noticeCSS(
|
|
324
|
-
var
|
|
325
|
-
baseUnit =
|
|
326
|
-
colors =
|
|
327
|
-
return
|
|
328
|
-
textAlign: 'center'
|
|
329
|
-
}, unstyled ? {} : {
|
|
316
|
+
var noticeCSS = function noticeCSS(_ref6) {
|
|
317
|
+
var _ref6$theme = _ref6.theme,
|
|
318
|
+
baseUnit = _ref6$theme.spacing.baseUnit,
|
|
319
|
+
colors = _ref6$theme.colors;
|
|
320
|
+
return {
|
|
321
|
+
textAlign: 'center',
|
|
330
322
|
color: colors.neutral40,
|
|
331
323
|
padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px")
|
|
332
|
-
}
|
|
324
|
+
};
|
|
333
325
|
};
|
|
334
326
|
var noOptionsMessageCSS = exports.noOptionsMessageCSS = noticeCSS;
|
|
335
327
|
var loadingMessageCSS = exports.loadingMessageCSS = noticeCSS;
|
|
336
328
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
337
|
-
var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(
|
|
338
|
-
var
|
|
339
|
-
children =
|
|
340
|
-
innerProps =
|
|
341
|
-
restProps = (0, _objectWithoutProperties2.default)(
|
|
329
|
+
var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(_ref7) {
|
|
330
|
+
var _ref7$children = _ref7.children,
|
|
331
|
+
children = _ref7$children === void 0 ? 'No options' : _ref7$children,
|
|
332
|
+
innerProps = _ref7.innerProps,
|
|
333
|
+
restProps = (0, _objectWithoutProperties2.default)(_ref7, _excluded);
|
|
342
334
|
return (0, _react2.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(_objectSpread(_objectSpread({}, restProps), {}, {
|
|
343
335
|
children: children,
|
|
344
336
|
innerProps: innerProps
|
|
@@ -352,11 +344,11 @@ var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(_ref
|
|
|
352
344
|
};
|
|
353
345
|
|
|
354
346
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
355
|
-
var LoadingMessage = exports.LoadingMessage = function LoadingMessage(
|
|
356
|
-
var
|
|
357
|
-
children =
|
|
358
|
-
innerProps =
|
|
359
|
-
restProps = (0, _objectWithoutProperties2.default)(
|
|
347
|
+
var LoadingMessage = exports.LoadingMessage = function LoadingMessage(_ref8) {
|
|
348
|
+
var _ref8$children = _ref8.children,
|
|
349
|
+
children = _ref8$children === void 0 ? 'Loading...' : _ref8$children,
|
|
350
|
+
innerProps = _ref8.innerProps,
|
|
351
|
+
restProps = (0, _objectWithoutProperties2.default)(_ref8, _excluded2);
|
|
360
352
|
return (0, _react2.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(_objectSpread(_objectSpread({}, restProps), {}, {
|
|
361
353
|
children: children,
|
|
362
354
|
innerProps: innerProps
|
|
@@ -373,10 +365,10 @@ var LoadingMessage = exports.LoadingMessage = function LoadingMessage(_ref7) {
|
|
|
373
365
|
// Menu Portal
|
|
374
366
|
// ==============================
|
|
375
367
|
|
|
376
|
-
var menuPortalCSS = exports.menuPortalCSS = function menuPortalCSS(
|
|
377
|
-
var rect =
|
|
378
|
-
offset =
|
|
379
|
-
position =
|
|
368
|
+
var menuPortalCSS = exports.menuPortalCSS = function menuPortalCSS(_ref9) {
|
|
369
|
+
var rect = _ref9.rect,
|
|
370
|
+
offset = _ref9.offset,
|
|
371
|
+
position = _ref9.position;
|
|
380
372
|
return {
|
|
381
373
|
left: rect.left,
|
|
382
374
|
position: position,
|
|
@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.MultiValueLabel = exports.MultiValueGeneric = exports.MultiValueContainer = void 0;
|
|
8
8
|
exports.MultiValueRemove = MultiValueRemove;
|
|
9
9
|
exports.multiValueRemoveCSS = exports.multiValueLabelCSS = exports.multiValueCSS = exports.default = void 0;
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
12
|
var _react = require("@emotion/react");
|
|
13
13
|
var _utils = require("../utils");
|
|
14
14
|
var _indicators = require("./indicators");
|
|
@@ -17,48 +17,46 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
17
17
|
* @jsxRuntime classic
|
|
18
18
|
* @jsx jsx
|
|
19
19
|
*/
|
|
20
|
-
var multiValueCSS = exports.multiValueCSS = function multiValueCSS(_ref
|
|
20
|
+
var multiValueCSS = exports.multiValueCSS = function multiValueCSS(_ref) {
|
|
21
21
|
var _ref$theme = _ref.theme,
|
|
22
22
|
spacing = _ref$theme.spacing,
|
|
23
23
|
borderRadius = _ref$theme.borderRadius,
|
|
24
24
|
colors = _ref$theme.colors;
|
|
25
|
-
return
|
|
25
|
+
return {
|
|
26
26
|
label: 'multiValue',
|
|
27
27
|
display: 'flex',
|
|
28
|
-
minWidth: 0
|
|
29
|
-
|
|
28
|
+
minWidth: 0,
|
|
29
|
+
// resolves flex/text-overflow bug
|
|
30
30
|
backgroundColor: colors.neutral10,
|
|
31
31
|
borderRadius: borderRadius / 2,
|
|
32
32
|
margin: spacing.baseUnit / 2
|
|
33
|
-
}
|
|
33
|
+
};
|
|
34
34
|
};
|
|
35
|
-
var multiValueLabelCSS = exports.multiValueLabelCSS = function multiValueLabelCSS(_ref2
|
|
35
|
+
var multiValueLabelCSS = exports.multiValueLabelCSS = function multiValueLabelCSS(_ref2) {
|
|
36
36
|
var _ref2$theme = _ref2.theme,
|
|
37
37
|
borderRadius = _ref2$theme.borderRadius,
|
|
38
38
|
colors = _ref2$theme.colors,
|
|
39
39
|
cropWithEllipsis = _ref2.cropWithEllipsis;
|
|
40
|
-
return
|
|
40
|
+
return {
|
|
41
41
|
overflow: 'hidden',
|
|
42
42
|
textOverflow: cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
|
|
43
|
-
whiteSpace: 'nowrap'
|
|
44
|
-
}, unstyled ? {} : {
|
|
43
|
+
whiteSpace: 'nowrap',
|
|
45
44
|
borderRadius: borderRadius / 2,
|
|
46
45
|
color: colors.neutral80,
|
|
47
46
|
fontSize: '85%',
|
|
48
47
|
padding: 3,
|
|
49
48
|
paddingLeft: 6
|
|
50
|
-
}
|
|
49
|
+
};
|
|
51
50
|
};
|
|
52
|
-
var multiValueRemoveCSS = exports.multiValueRemoveCSS = function multiValueRemoveCSS(_ref3
|
|
51
|
+
var multiValueRemoveCSS = exports.multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) {
|
|
53
52
|
var _ref3$theme = _ref3.theme,
|
|
54
53
|
spacing = _ref3$theme.spacing,
|
|
55
54
|
borderRadius = _ref3$theme.borderRadius,
|
|
56
55
|
colors = _ref3$theme.colors,
|
|
57
56
|
isFocused = _ref3.isFocused;
|
|
58
|
-
return
|
|
57
|
+
return {
|
|
59
58
|
alignItems: 'center',
|
|
60
|
-
display: 'flex'
|
|
61
|
-
}, unstyled ? {} : {
|
|
59
|
+
display: 'flex',
|
|
62
60
|
borderRadius: borderRadius / 2,
|
|
63
61
|
backgroundColor: isFocused ? colors.dangerLight : undefined,
|
|
64
62
|
paddingLeft: spacing.baseUnit,
|
|
@@ -67,7 +65,7 @@ var multiValueRemoveCSS = exports.multiValueRemoveCSS = function multiValueRemov
|
|
|
67
65
|
backgroundColor: colors.dangerLight,
|
|
68
66
|
color: colors.danger
|
|
69
67
|
}
|
|
70
|
-
}
|
|
68
|
+
};
|
|
71
69
|
};
|
|
72
70
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
73
71
|
var MultiValueGeneric = exports.MultiValueGeneric = function MultiValueGeneric(_ref4) {
|
|
@@ -6,30 +6,28 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.optionCSS = exports.default = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
9
|
var _react = require("@emotion/react");
|
|
11
10
|
var _utils = require("../utils");
|
|
12
|
-
|
|
13
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
11
|
+
/**
|
|
14
12
|
* @jsxRuntime classic
|
|
15
13
|
* @jsx jsx
|
|
16
14
|
*/
|
|
17
|
-
|
|
15
|
+
|
|
16
|
+
var optionCSS = exports.optionCSS = function optionCSS(_ref) {
|
|
18
17
|
var isDisabled = _ref.isDisabled,
|
|
19
18
|
isFocused = _ref.isFocused,
|
|
20
19
|
isSelected = _ref.isSelected,
|
|
21
20
|
_ref$theme = _ref.theme,
|
|
22
21
|
spacing = _ref$theme.spacing,
|
|
23
22
|
colors = _ref$theme.colors;
|
|
24
|
-
return
|
|
23
|
+
return {
|
|
25
24
|
label: 'option',
|
|
26
25
|
cursor: 'default',
|
|
27
26
|
display: 'block',
|
|
28
27
|
fontSize: 'inherit',
|
|
29
28
|
width: '100%',
|
|
30
29
|
userSelect: 'none',
|
|
31
|
-
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)'
|
|
32
|
-
}, unstyled ? {} : {
|
|
30
|
+
WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
|
|
33
31
|
backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
|
|
34
32
|
color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
|
|
35
33
|
padding: "".concat(spacing.baseUnit * 2, "px ").concat(spacing.baseUnit * 3, "px"),
|
|
@@ -37,7 +35,7 @@ var optionCSS = exports.optionCSS = function optionCSS(_ref, unstyled) {
|
|
|
37
35
|
':active': {
|
|
38
36
|
backgroundColor: !isDisabled ? isSelected ? colors.primary : colors.primary50 : undefined
|
|
39
37
|
}
|
|
40
|
-
}
|
|
38
|
+
};
|
|
41
39
|
};
|
|
42
40
|
var Option = function Option(props) {
|
|
43
41
|
var children = props.children,
|
|
@@ -6,26 +6,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.placeholderCSS = exports.default = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
9
|
var _react = require("@emotion/react");
|
|
11
10
|
var _utils = require("../utils");
|
|
12
|
-
|
|
13
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
11
|
+
/**
|
|
14
12
|
* @jsxRuntime classic
|
|
15
13
|
* @jsx jsx
|
|
16
14
|
*/
|
|
17
|
-
|
|
15
|
+
|
|
16
|
+
var placeholderCSS = exports.placeholderCSS = function placeholderCSS(_ref) {
|
|
18
17
|
var _ref$theme = _ref.theme,
|
|
19
18
|
spacing = _ref$theme.spacing,
|
|
20
19
|
colors = _ref$theme.colors;
|
|
21
|
-
return
|
|
20
|
+
return {
|
|
22
21
|
label: 'placeholder',
|
|
23
|
-
gridArea: '1 / 1 / 2 / 3'
|
|
24
|
-
}, unstyled ? {} : {
|
|
22
|
+
gridArea: '1 / 1 / 2 / 3',
|
|
25
23
|
color: colors.neutral50,
|
|
26
24
|
marginLeft: spacing.baseUnit / 2,
|
|
27
25
|
marginRight: spacing.baseUnit / 2
|
|
28
|
-
}
|
|
26
|
+
};
|
|
29
27
|
};
|
|
30
28
|
var Placeholder = function Placeholder(props) {
|
|
31
29
|
var children = props.children,
|
|
@@ -6,31 +6,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.css = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
9
|
var _react = require("@emotion/react");
|
|
11
10
|
var _utils = require("../utils");
|
|
12
|
-
|
|
13
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
11
|
+
/**
|
|
14
12
|
* @jsxRuntime classic
|
|
15
13
|
* @jsx jsx
|
|
16
14
|
*/
|
|
17
|
-
|
|
15
|
+
|
|
16
|
+
var css = exports.css = function css(_ref) {
|
|
18
17
|
var isDisabled = _ref.isDisabled,
|
|
19
18
|
_ref$theme = _ref.theme,
|
|
20
19
|
spacing = _ref$theme.spacing,
|
|
21
20
|
colors = _ref$theme.colors;
|
|
22
|
-
return
|
|
21
|
+
return {
|
|
23
22
|
label: 'singleValue',
|
|
24
23
|
gridArea: '1 / 1 / 2 / 3',
|
|
25
24
|
maxWidth: '100%',
|
|
26
25
|
overflow: 'hidden',
|
|
27
26
|
textOverflow: 'ellipsis',
|
|
28
|
-
whiteSpace: 'nowrap'
|
|
29
|
-
}, unstyled ? {} : {
|
|
27
|
+
whiteSpace: 'nowrap',
|
|
30
28
|
color: isDisabled ? colors.neutral40 : colors.neutral80,
|
|
31
29
|
marginLeft: spacing.baseUnit / 2,
|
|
32
30
|
marginRight: spacing.baseUnit / 2
|
|
33
|
-
}
|
|
31
|
+
};
|
|
34
32
|
};
|
|
35
33
|
var SingleValue = function SingleValue(props) {
|
|
36
34
|
var children = props.children,
|
package/dist/cjs/select.js
CHANGED
|
@@ -78,8 +78,7 @@ var defaultProps = exports.defaultProps = {
|
|
|
78
78
|
},
|
|
79
79
|
styles: {},
|
|
80
80
|
tabIndex: 0,
|
|
81
|
-
tabSelectsValue: true
|
|
82
|
-
unstyled: false
|
|
81
|
+
tabSelectsValue: true
|
|
83
82
|
};
|
|
84
83
|
function toCategorizedOption(props, option, selectValue, index) {
|
|
85
84
|
var isDisabled = _isOptionDisabled(props, option, selectValue);
|
|
@@ -399,8 +398,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
399
398
|
return getOptionValue(_this.props, data);
|
|
400
399
|
});
|
|
401
400
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getStyles", function (key, props) {
|
|
402
|
-
var
|
|
403
|
-
var base = _styles.defaultStyles[key](props, unstyled);
|
|
401
|
+
var base = _styles.defaultStyles[key](props);
|
|
404
402
|
base.boxSizing = 'border-box';
|
|
405
403
|
var custom = _this.props.styles[key];
|
|
406
404
|
return custom ? custom(base, props) : base;
|
|
@@ -49,7 +49,7 @@ export const valueContainerCSS = ({
|
|
|
49
49
|
selectProps: {
|
|
50
50
|
controlShouldRenderValue
|
|
51
51
|
}
|
|
52
|
-
}
|
|
52
|
+
}) => ({
|
|
53
53
|
alignItems: 'center',
|
|
54
54
|
display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
|
|
55
55
|
flex: 1,
|
|
@@ -57,9 +57,7 @@ export const valueContainerCSS = ({
|
|
|
57
57
|
WebkitOverflowScrolling: 'touch',
|
|
58
58
|
position: 'relative',
|
|
59
59
|
overflow: 'hidden',
|
|
60
|
-
|
|
61
|
-
padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`
|
|
62
|
-
})
|
|
60
|
+
padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`
|
|
63
61
|
});
|
|
64
62
|
|
|
65
63
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|