@atlaskit/select 17.15.1 → 17.15.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/PopupSelect/PopupSelect.js +8 -0
- package/dist/cjs/Select.js +1 -1
- package/dist/cjs/components/index.js +8 -2
- package/dist/cjs/styles.js +34 -1
- package/dist/es2019/PopupSelect/PopupSelect.js +8 -0
- package/dist/es2019/Select.js +1 -1
- package/dist/es2019/components/index.js +9 -3
- package/dist/es2019/styles.js +40 -4
- package/dist/esm/PopupSelect/PopupSelect.js +8 -0
- package/dist/esm/Select.js +1 -1
- package/dist/esm/components/index.js +9 -3
- package/dist/esm/styles.js +34 -1
- package/dist/types/PopupSelect/PopupSelect.d.ts +5 -0
- package/dist/types-ts4.5/PopupSelect/PopupSelect.d.ts +5 -0
- package/package.json +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/select
|
|
2
2
|
|
|
3
|
+
## 17.15.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#137619](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137619)
|
|
8
|
+
[`a91489985e535`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a91489985e535) -
|
|
9
|
+
[ux] Tab and Shift+Tab now dismisses the list of opened popup select options and allows users to
|
|
10
|
+
navigate to next or previous elements accordingly.
|
|
11
|
+
|
|
3
12
|
## 17.15.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -119,6 +119,13 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
119
119
|
}
|
|
120
120
|
});
|
|
121
121
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
|
|
122
|
+
//We shouldn't close PopupSelect on tab event if there are custom interactive element.
|
|
123
|
+
if ((0, _platformFeatureFlags.fg)('tab-event-should-close-popupSelect')) {
|
|
124
|
+
var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
|
|
125
|
+
if (_this.props.shouldCloseMenuOnTab && tabEvent) {
|
|
126
|
+
_this.close();
|
|
127
|
+
}
|
|
128
|
+
}
|
|
122
129
|
switch (event.key) {
|
|
123
130
|
case 'Escape':
|
|
124
131
|
case 'Esc':
|
|
@@ -540,6 +547,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
|
|
|
540
547
|
}(_react.PureComponent);
|
|
541
548
|
(0, _defineProperty2.default)(PopupSelect, "defaultProps", {
|
|
542
549
|
closeMenuOnSelect: true,
|
|
550
|
+
shouldCloseMenuOnTab: true,
|
|
543
551
|
components: {},
|
|
544
552
|
maxMenuHeight: 300,
|
|
545
553
|
maxMenuWidth: 440,
|
package/dist/cjs/Select.js
CHANGED
|
@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
|
|
|
9
9
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
10
10
|
var _createSelect = _interopRequireDefault(require("./createSelect"));
|
|
11
11
|
var packageName = "@atlaskit/select";
|
|
12
|
-
var packageVersion = "17.15.
|
|
12
|
+
var packageVersion = "17.15.2";
|
|
13
13
|
var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
|
|
14
14
|
var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
|
|
15
15
|
var Select = (0, _analyticsNext.withAnalyticsContext)({
|
|
@@ -25,8 +25,10 @@ Object.defineProperty(exports, "LoadingIndicator", {
|
|
|
25
25
|
});
|
|
26
26
|
exports.MultiValueRemove = void 0;
|
|
27
27
|
var _react = require("@emotion/react");
|
|
28
|
-
var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
|
|
29
28
|
var _reactSelect = require("react-select");
|
|
29
|
+
var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
|
|
30
|
+
var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
|
|
31
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
30
32
|
var _indicators = require("./indicators");
|
|
31
33
|
/**
|
|
32
34
|
* @jsxRuntime classic
|
|
@@ -45,7 +47,11 @@ var MultiValueRemove = exports.MultiValueRemove = function MultiValueRemove(prop
|
|
|
45
47
|
return (0, _react.jsx)(_reactSelect.components.MultiValueRemove, props, (0, _react.jsx)("div", {
|
|
46
48
|
css: isDisabled ? disabledStyles : enabledStyles,
|
|
47
49
|
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
|
|
48
|
-
}, (0,
|
|
50
|
+
}, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ?
|
|
51
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-icon-color
|
|
52
|
+
(0, _react.jsx)(_cross.default, {
|
|
53
|
+
label: "Clear"
|
|
54
|
+
}) : (0, _react.jsx)(_selectClear.default, {
|
|
49
55
|
label: "Clear",
|
|
50
56
|
size: "small",
|
|
51
57
|
primaryColor: "transparent",
|
package/dist/cjs/styles.js
CHANGED
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = baseStyles;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
9
10
|
var _colors = require("@atlaskit/theme/colors");
|
|
10
11
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
12
|
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; }
|
|
@@ -224,7 +225,7 @@ function baseStyles(validationState) {
|
|
|
224
225
|
backgroundColor = "var(--ds-background-selected, ".concat(_colors.N40, ")");
|
|
225
226
|
color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
|
|
226
227
|
} else {
|
|
227
|
-
backgroundColor = "var(--ds-background-neutral, ".concat(_colors.N40, ")");
|
|
228
|
+
backgroundColor = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, ".concat(_colors.N40, ")");
|
|
228
229
|
color = "var(--ds-text, hsl(0, 0%, 20%))";
|
|
229
230
|
}
|
|
230
231
|
return _objectSpread(_objectSpread({}, css), {}, {
|
|
@@ -236,6 +237,13 @@ function baseStyles(validationState) {
|
|
|
236
237
|
border: isFocused ? '1px solid transparent' : 'none'
|
|
237
238
|
},
|
|
238
239
|
color: color
|
|
240
|
+
}, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
|
|
241
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
242
|
+
// Hardcode this color for visual refresh as there is no token color yet
|
|
243
|
+
borderColor: '#B7B9BE',
|
|
244
|
+
borderWidth: "var(--ds-border-width, 1px)",
|
|
245
|
+
borderStyle: 'solid',
|
|
246
|
+
backgroundColor: "var(--ds-background-input, #FFFFFF)"
|
|
239
247
|
});
|
|
240
248
|
},
|
|
241
249
|
multiValueLabel: function multiValueLabel(css, _ref8) {
|
|
@@ -245,6 +253,11 @@ function baseStyles(validationState) {
|
|
|
245
253
|
padding: "var(--ds-space-025, 2px)",
|
|
246
254
|
color: isDisabled ? "var(--ds-text-disabled, ".concat(_colors.N70, ")") : 'inherit',
|
|
247
255
|
paddingRight: "var(--ds-space-025, 2px)"
|
|
256
|
+
}, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
|
|
257
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
258
|
+
paddingTop: 0,
|
|
259
|
+
paddingBottom: 0,
|
|
260
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
248
261
|
});
|
|
249
262
|
},
|
|
250
263
|
multiValueRemove: function multiValueRemove(css, _ref9) {
|
|
@@ -264,6 +277,26 @@ function baseStyles(validationState) {
|
|
|
264
277
|
backgroundColor: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")"),
|
|
265
278
|
fill: "var(--ds-text-danger, #000)"
|
|
266
279
|
}
|
|
280
|
+
}, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
|
|
281
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
|
|
282
|
+
border: 'none',
|
|
283
|
+
alignItems: 'center',
|
|
284
|
+
justifyContent: 'center',
|
|
285
|
+
alignSelf: 'center',
|
|
286
|
+
appearance: 'none',
|
|
287
|
+
borderRadius: "var(--ds-border-radius, 4px)",
|
|
288
|
+
color: "var(--ds-text, #172B4D)",
|
|
289
|
+
padding: "var(--ds-space-025, 2px)",
|
|
290
|
+
marginRight: "var(--ds-space-025, 2px)",
|
|
291
|
+
':focus-visible': {
|
|
292
|
+
outlineOffset: "var(--ds-space-negative-025, -2px)"
|
|
293
|
+
},
|
|
294
|
+
':hover': {
|
|
295
|
+
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
|
|
296
|
+
},
|
|
297
|
+
':active': {
|
|
298
|
+
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
299
|
+
}
|
|
267
300
|
});
|
|
268
301
|
},
|
|
269
302
|
groupHeading: function groupHeading(css) {
|
|
@@ -85,6 +85,13 @@ export default class PopupSelect extends PureComponent {
|
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
87
|
_defineProperty(this, "handleKeyDown", event => {
|
|
88
|
+
//We shouldn't close PopupSelect on tab event if there are custom interactive element.
|
|
89
|
+
if (fg('tab-event-should-close-popupSelect')) {
|
|
90
|
+
const tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
|
|
91
|
+
if (this.props.shouldCloseMenuOnTab && tabEvent) {
|
|
92
|
+
this.close();
|
|
93
|
+
}
|
|
94
|
+
}
|
|
88
95
|
switch (event.key) {
|
|
89
96
|
case 'Escape':
|
|
90
97
|
case 'Esc':
|
|
@@ -513,6 +520,7 @@ export default class PopupSelect extends PureComponent {
|
|
|
513
520
|
}
|
|
514
521
|
_defineProperty(PopupSelect, "defaultProps", {
|
|
515
522
|
closeMenuOnSelect: true,
|
|
523
|
+
shouldCloseMenuOnTab: true,
|
|
516
524
|
components: {},
|
|
517
525
|
maxMenuHeight: 300,
|
|
518
526
|
maxMenuWidth: 440,
|
package/dist/es2019/Select.js
CHANGED
|
@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
|
|
|
2
2
|
import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
|
|
3
3
|
import createSelect from './createSelect';
|
|
4
4
|
const packageName = "@atlaskit/select";
|
|
5
|
-
const packageVersion = "17.15.
|
|
5
|
+
const packageVersion = "17.15.2";
|
|
6
6
|
export const SelectWithoutAnalytics = createSelect(ReactSelect);
|
|
7
7
|
const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
|
|
8
8
|
const Select = withAnalyticsContext({
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
|
-
import {
|
|
7
|
-
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
6
|
+
import { css, jsx } from '@emotion/react';
|
|
8
7
|
import { components } from 'react-select';
|
|
8
|
+
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
9
|
+
import CrossIcon from '@atlaskit/icon/utility/cross';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
11
|
export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
|
|
10
12
|
const disabledStyles = css({
|
|
11
13
|
display: 'none'
|
|
@@ -20,7 +22,11 @@ export const MultiValueRemove = props => {
|
|
|
20
22
|
return jsx(components.MultiValueRemove, props, jsx("div", {
|
|
21
23
|
css: isDisabled ? disabledStyles : enabledStyles,
|
|
22
24
|
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
|
|
23
|
-
},
|
|
25
|
+
}, fg('platform-component-visual-refresh') ?
|
|
26
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-icon-color
|
|
27
|
+
jsx(CrossIcon, {
|
|
28
|
+
label: "Clear"
|
|
29
|
+
}) : jsx(SelectClearIcon, {
|
|
24
30
|
label: "Clear",
|
|
25
31
|
size: "small",
|
|
26
32
|
primaryColor: "transparent",
|
package/dist/es2019/styles.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
1
2
|
import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
|
|
2
3
|
export default function baseStyles(validationState, isCompact = false, appearance) {
|
|
3
4
|
return {
|
|
@@ -213,7 +214,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
|
|
|
213
214
|
backgroundColor = `var(--ds-background-selected, ${N40})`;
|
|
214
215
|
color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
|
|
215
216
|
} else {
|
|
216
|
-
backgroundColor = `var(--ds-background-neutral, ${N40})`;
|
|
217
|
+
backgroundColor = fg('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : `var(--ds-background-neutral, ${N40})`;
|
|
217
218
|
color = "var(--ds-text, hsl(0, 0%, 20%))";
|
|
218
219
|
}
|
|
219
220
|
return {
|
|
@@ -225,7 +226,15 @@ export default function baseStyles(validationState, isCompact = false, appearanc
|
|
|
225
226
|
'@media screen and (-ms-high-contrast: active)': {
|
|
226
227
|
border: isFocused ? '1px solid transparent' : 'none'
|
|
227
228
|
},
|
|
228
|
-
color
|
|
229
|
+
color,
|
|
230
|
+
...(fg('platform-component-visual-refresh') && {
|
|
231
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
232
|
+
// Hardcode this color for visual refresh as there is no token color yet
|
|
233
|
+
borderColor: '#B7B9BE',
|
|
234
|
+
borderWidth: "var(--ds-border-width, 1px)",
|
|
235
|
+
borderStyle: 'solid',
|
|
236
|
+
backgroundColor: "var(--ds-background-input, #FFFFFF)"
|
|
237
|
+
})
|
|
229
238
|
};
|
|
230
239
|
},
|
|
231
240
|
multiValueLabel: (css, {
|
|
@@ -235,7 +244,13 @@ export default function baseStyles(validationState, isCompact = false, appearanc
|
|
|
235
244
|
font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
236
245
|
padding: "var(--ds-space-025, 2px)",
|
|
237
246
|
color: isDisabled ? `var(--ds-text-disabled, ${N70})` : 'inherit',
|
|
238
|
-
paddingRight: "var(--ds-space-025, 2px)"
|
|
247
|
+
paddingRight: "var(--ds-space-025, 2px)",
|
|
248
|
+
...(fg('platform-component-visual-refresh') && {
|
|
249
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
250
|
+
paddingTop: 0,
|
|
251
|
+
paddingBottom: 0,
|
|
252
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
253
|
+
})
|
|
239
254
|
}),
|
|
240
255
|
multiValueRemove: (css, {
|
|
241
256
|
isFocused
|
|
@@ -254,7 +269,28 @@ export default function baseStyles(validationState, isCompact = false, appearanc
|
|
|
254
269
|
':active': {
|
|
255
270
|
backgroundColor: `var(--ds-background-danger-pressed, ${R75})`,
|
|
256
271
|
fill: "var(--ds-text-danger, #000)"
|
|
257
|
-
}
|
|
272
|
+
},
|
|
273
|
+
...(fg('platform-component-visual-refresh') && {
|
|
274
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
|
|
275
|
+
border: 'none',
|
|
276
|
+
alignItems: 'center',
|
|
277
|
+
justifyContent: 'center',
|
|
278
|
+
alignSelf: 'center',
|
|
279
|
+
appearance: 'none',
|
|
280
|
+
borderRadius: "var(--ds-border-radius, 4px)",
|
|
281
|
+
color: "var(--ds-text, #172B4D)",
|
|
282
|
+
padding: "var(--ds-space-025, 2px)",
|
|
283
|
+
marginRight: "var(--ds-space-025, 2px)",
|
|
284
|
+
':focus-visible': {
|
|
285
|
+
outlineOffset: "var(--ds-space-negative-025, -2px)"
|
|
286
|
+
},
|
|
287
|
+
':hover': {
|
|
288
|
+
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
|
|
289
|
+
},
|
|
290
|
+
':active': {
|
|
291
|
+
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
292
|
+
}
|
|
293
|
+
})
|
|
258
294
|
}),
|
|
259
295
|
groupHeading: css => ({
|
|
260
296
|
...css,
|
|
@@ -109,6 +109,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
109
109
|
}
|
|
110
110
|
});
|
|
111
111
|
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
|
|
112
|
+
//We shouldn't close PopupSelect on tab event if there are custom interactive element.
|
|
113
|
+
if (fg('tab-event-should-close-popupSelect')) {
|
|
114
|
+
var tabEvent = event.key === 'Tab' && event.shiftKey || event.key === 'Tab';
|
|
115
|
+
if (_this.props.shouldCloseMenuOnTab && tabEvent) {
|
|
116
|
+
_this.close();
|
|
117
|
+
}
|
|
118
|
+
}
|
|
112
119
|
switch (event.key) {
|
|
113
120
|
case 'Escape':
|
|
114
121
|
case 'Esc':
|
|
@@ -530,6 +537,7 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
|
|
|
530
537
|
}(PureComponent);
|
|
531
538
|
_defineProperty(PopupSelect, "defaultProps", {
|
|
532
539
|
closeMenuOnSelect: true,
|
|
540
|
+
shouldCloseMenuOnTab: true,
|
|
533
541
|
components: {},
|
|
534
542
|
maxMenuHeight: 300,
|
|
535
543
|
maxMenuWidth: 440,
|
package/dist/esm/Select.js
CHANGED
|
@@ -2,7 +2,7 @@ import ReactSelect from 'react-select';
|
|
|
2
2
|
import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
|
|
3
3
|
import createSelect from './createSelect';
|
|
4
4
|
var packageName = "@atlaskit/select";
|
|
5
|
-
var packageVersion = "17.15.
|
|
5
|
+
var packageVersion = "17.15.2";
|
|
6
6
|
export var SelectWithoutAnalytics = createSelect(ReactSelect);
|
|
7
7
|
var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
|
|
8
8
|
var Select = withAnalyticsContext({
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
* @jsx jsx
|
|
4
4
|
*/
|
|
5
5
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
|
-
import {
|
|
7
|
-
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
6
|
+
import { css, jsx } from '@emotion/react';
|
|
8
7
|
import { components } from 'react-select';
|
|
8
|
+
import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
|
|
9
|
+
import CrossIcon from '@atlaskit/icon/utility/cross';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
11
|
export { ClearIndicator, DropdownIndicator, LoadingIndicator } from './indicators';
|
|
10
12
|
var disabledStyles = css({
|
|
11
13
|
display: 'none'
|
|
@@ -18,7 +20,11 @@ export var MultiValueRemove = function MultiValueRemove(props) {
|
|
|
18
20
|
return jsx(components.MultiValueRemove, props, jsx("div", {
|
|
19
21
|
css: isDisabled ? disabledStyles : enabledStyles,
|
|
20
22
|
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
|
|
21
|
-
},
|
|
23
|
+
}, fg('platform-component-visual-refresh') ?
|
|
24
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-icon-color
|
|
25
|
+
jsx(CrossIcon, {
|
|
26
|
+
label: "Clear"
|
|
27
|
+
}) : jsx(SelectClearIcon, {
|
|
22
28
|
label: "Clear",
|
|
23
29
|
size: "small",
|
|
24
30
|
primaryColor: "transparent",
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
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) { _defineProperty(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; }
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
5
|
import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
|
|
5
6
|
export default function baseStyles(validationState) {
|
|
6
7
|
var isCompact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
@@ -217,7 +218,7 @@ export default function baseStyles(validationState) {
|
|
|
217
218
|
backgroundColor = "var(--ds-background-selected, ".concat(N40, ")");
|
|
218
219
|
color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
|
|
219
220
|
} else {
|
|
220
|
-
backgroundColor = "var(--ds-background-neutral, ".concat(N40, ")");
|
|
221
|
+
backgroundColor = fg('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, ".concat(N40, ")");
|
|
221
222
|
color = "var(--ds-text, hsl(0, 0%, 20%))";
|
|
222
223
|
}
|
|
223
224
|
return _objectSpread(_objectSpread({}, css), {}, {
|
|
@@ -229,6 +230,13 @@ export default function baseStyles(validationState) {
|
|
|
229
230
|
border: isFocused ? '1px solid transparent' : 'none'
|
|
230
231
|
},
|
|
231
232
|
color: color
|
|
233
|
+
}, fg('platform-component-visual-refresh') && {
|
|
234
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
235
|
+
// Hardcode this color for visual refresh as there is no token color yet
|
|
236
|
+
borderColor: '#B7B9BE',
|
|
237
|
+
borderWidth: "var(--ds-border-width, 1px)",
|
|
238
|
+
borderStyle: 'solid',
|
|
239
|
+
backgroundColor: "var(--ds-background-input, #FFFFFF)"
|
|
232
240
|
});
|
|
233
241
|
},
|
|
234
242
|
multiValueLabel: function multiValueLabel(css, _ref8) {
|
|
@@ -238,6 +246,11 @@ export default function baseStyles(validationState) {
|
|
|
238
246
|
padding: "var(--ds-space-025, 2px)",
|
|
239
247
|
color: isDisabled ? "var(--ds-text-disabled, ".concat(N70, ")") : 'inherit',
|
|
240
248
|
paddingRight: "var(--ds-space-025, 2px)"
|
|
249
|
+
}, fg('platform-component-visual-refresh') && {
|
|
250
|
+
font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
|
|
251
|
+
paddingTop: 0,
|
|
252
|
+
paddingBottom: 0,
|
|
253
|
+
paddingLeft: "var(--ds-space-050, 4px)"
|
|
241
254
|
});
|
|
242
255
|
},
|
|
243
256
|
multiValueRemove: function multiValueRemove(css, _ref9) {
|
|
@@ -257,6 +270,26 @@ export default function baseStyles(validationState) {
|
|
|
257
270
|
backgroundColor: "var(--ds-background-danger-pressed, ".concat(R75, ")"),
|
|
258
271
|
fill: "var(--ds-text-danger, #000)"
|
|
259
272
|
}
|
|
273
|
+
}, fg('platform-component-visual-refresh') && {
|
|
274
|
+
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
|
|
275
|
+
border: 'none',
|
|
276
|
+
alignItems: 'center',
|
|
277
|
+
justifyContent: 'center',
|
|
278
|
+
alignSelf: 'center',
|
|
279
|
+
appearance: 'none',
|
|
280
|
+
borderRadius: "var(--ds-border-radius, 4px)",
|
|
281
|
+
color: "var(--ds-text, #172B4D)",
|
|
282
|
+
padding: "var(--ds-space-025, 2px)",
|
|
283
|
+
marginRight: "var(--ds-space-025, 2px)",
|
|
284
|
+
':focus-visible': {
|
|
285
|
+
outlineOffset: "var(--ds-space-negative-025, -2px)"
|
|
286
|
+
},
|
|
287
|
+
':hover': {
|
|
288
|
+
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
|
|
289
|
+
},
|
|
290
|
+
':active': {
|
|
291
|
+
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
|
|
292
|
+
}
|
|
260
293
|
});
|
|
261
294
|
},
|
|
262
295
|
groupHeading: function groupHeading(css) {
|
|
@@ -18,6 +18,10 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
|
|
|
18
18
|
* Defines whether the menu should close when selected. The default is `true`.
|
|
19
19
|
*/
|
|
20
20
|
closeMenuOnSelect?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Defines whether the menu should be closed by pressing the Tab key. The default is `true`.
|
|
23
|
+
*/
|
|
24
|
+
shouldCloseMenuOnTab?: boolean;
|
|
21
25
|
/**
|
|
22
26
|
* The footer content shown at the bottom of the popup, underneath the select options.
|
|
23
27
|
*/
|
|
@@ -118,6 +122,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
|
|
|
118
122
|
popperWrapperId: string;
|
|
119
123
|
static defaultProps: {
|
|
120
124
|
closeMenuOnSelect: boolean;
|
|
125
|
+
shouldCloseMenuOnTab: boolean;
|
|
121
126
|
components: {};
|
|
122
127
|
maxMenuHeight: number;
|
|
123
128
|
maxMenuWidth: number;
|
|
@@ -18,6 +18,10 @@ export interface PopupSelectProps<Option = OptionType, IsMulti extends boolean =
|
|
|
18
18
|
* Defines whether the menu should close when selected. The default is `true`.
|
|
19
19
|
*/
|
|
20
20
|
closeMenuOnSelect?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Defines whether the menu should be closed by pressing the Tab key. The default is `true`.
|
|
23
|
+
*/
|
|
24
|
+
shouldCloseMenuOnTab?: boolean;
|
|
21
25
|
/**
|
|
22
26
|
* The footer content shown at the bottom of the popup, underneath the select options.
|
|
23
27
|
*/
|
|
@@ -118,6 +122,7 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
|
|
|
118
122
|
popperWrapperId: string;
|
|
119
123
|
static defaultProps: {
|
|
120
124
|
closeMenuOnSelect: boolean;
|
|
125
|
+
shouldCloseMenuOnTab: boolean;
|
|
121
126
|
components: {};
|
|
122
127
|
maxMenuHeight: number;
|
|
123
128
|
maxMenuWidth: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/select",
|
|
3
|
-
"version": "17.15.
|
|
3
|
+
"version": "17.15.2",
|
|
4
4
|
"description": "Select allows users to make a single selection or multiple selections from a list of options.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -24,10 +24,6 @@
|
|
|
24
24
|
"atlaskit:src": "src/index.tsx",
|
|
25
25
|
"atlassian": {
|
|
26
26
|
"team": "Design System Team",
|
|
27
|
-
"releaseModel": "continuous",
|
|
28
|
-
"productPushConsumption": [
|
|
29
|
-
"jira"
|
|
30
|
-
],
|
|
31
27
|
"website": {
|
|
32
28
|
"name": "Select",
|
|
33
29
|
"category": "Components"
|
|
@@ -43,9 +39,9 @@
|
|
|
43
39
|
},
|
|
44
40
|
"dependencies": {
|
|
45
41
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
46
|
-
"@atlaskit/icon": "^22.
|
|
42
|
+
"@atlaskit/icon": "^22.15.0",
|
|
47
43
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
48
|
-
"@atlaskit/primitives": "^12.
|
|
44
|
+
"@atlaskit/primitives": "^12.1.0",
|
|
49
45
|
"@atlaskit/spinner": "^16.3.0",
|
|
50
46
|
"@atlaskit/theme": "^13.0.0",
|
|
51
47
|
"@atlaskit/tokens": "^1.59.0",
|
|
@@ -84,7 +80,6 @@
|
|
|
84
80
|
"jscodeshift": "^0.13.0",
|
|
85
81
|
"react-dom": "^16.8.0",
|
|
86
82
|
"react-select-event": "^5.5.0",
|
|
87
|
-
"react-test-renderer": "^16.8.0",
|
|
88
83
|
"react-value": "^0.2.0",
|
|
89
84
|
"typescript": "~5.4.2",
|
|
90
85
|
"wait-for-expect": "^1.2.0"
|
|
@@ -106,6 +101,12 @@
|
|
|
106
101
|
"platform-feature-flags": {
|
|
107
102
|
"platform-design-system-dsp-19701-no-node-resolver": {
|
|
108
103
|
"type": "boolean"
|
|
104
|
+
},
|
|
105
|
+
"platform-component-visual-refresh": {
|
|
106
|
+
"type": "boolean"
|
|
107
|
+
},
|
|
108
|
+
"tab-event-should-close-popupSelect": {
|
|
109
|
+
"type": "boolean"
|
|
109
110
|
}
|
|
110
111
|
},
|
|
111
112
|
"homepage": "https://atlassian.design/components/select/"
|