@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 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,
@@ -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.1";
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, _react.jsx)(_selectClear.default, {
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",
@@ -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,
@@ -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.1";
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 { jsx, css } from '@emotion/react';
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
- }, jsx(SelectClearIcon, {
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",
@@ -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,
@@ -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.1";
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 { jsx, css } from '@emotion/react';
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
- }, jsx(SelectClearIcon, {
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",
@@ -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.1",
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.14.0",
42
+ "@atlaskit/icon": "^22.15.0",
47
43
  "@atlaskit/platform-feature-flags": "^0.3.0",
48
- "@atlaskit/primitives": "^12.0.0",
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/"