@atlaskit/react-select 2.0.3 → 2.0.5

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/components/containers.js +2 -2
  3. package/dist/cjs/components/group.js +1 -1
  4. package/dist/cjs/components/multi-value.js +13 -9
  5. package/dist/es2019/components/containers.js +2 -2
  6. package/dist/es2019/components/group.js +1 -1
  7. package/dist/es2019/components/multi-value.js +13 -9
  8. package/dist/esm/components/containers.js +2 -2
  9. package/dist/esm/components/group.js +1 -1
  10. package/dist/esm/components/multi-value.js +13 -9
  11. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/react-select
2
2
 
3
+ ## 2.0.5
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 2.0.4
10
+
11
+ ### Patch Changes
12
+
13
+ - [#122557](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122557)
14
+ [`d8b5709e3f003`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d8b5709e3f003) -
15
+ Fix aria-label on multi select remove button to support non-string content
16
+
3
17
  ## 2.0.3
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/components/containers.js CHANGED
@@ -27,11 +27,11 @@ var containerCSS = exports.containerCSS = function containerCSS(_ref) {
27
27
  label: 'container',
28
28
  direction: isRtl ? 'rtl' : undefined,
29
29
  position: 'relative',
30
- font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
30
+ font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
31
31
  pointerEvents: 'all',
32
32
  cursor: isDisabled ? 'not-allowed' : undefined
33
33
  }, "".concat(_primitives.media.above.xs), {
34
- font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
34
+ font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)" : undefined
35
35
  });
36
36
  };
37
37
 
package/dist/cjs/components/group.js CHANGED
@@ -50,7 +50,7 @@ var groupHeadingCSS = exports.groupHeadingCSS = function groupHeadingCSS(_ref2)
50
50
  marginBottom: '0.25em',
51
51
  paddingLeft: "var(--ds-space-150, 12px)",
52
52
  paddingRight: "var(--ds-space-150, 12px)",
53
- font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
53
+ font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
54
54
  color: "var(--ds-text-subtle, #44546F)",
55
55
  fontWeight: "var(--ds-font-weight-bold, 700)",
56
56
  textTransform: 'none'
package/dist/cjs/components/multi-value.js CHANGED
@@ -70,12 +70,12 @@ var multiValueLabelCSS = exports.multiValueLabelCSS = function multiValueLabelCS
70
70
  borderRadius: "var(--ds-border-radius-050, 2px)",
71
71
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
72
72
  fontSize: '85%',
73
- 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)",
73
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
74
74
  padding: "var(--ds-space-025, 2px)",
75
75
  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : 'inherit',
76
76
  paddingLeft: "var(--ds-space-075, 6px)"
77
77
  }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
78
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
78
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
79
79
  paddingTop: 0,
80
80
  paddingBottom: 0,
81
81
  paddingLeft: "var(--ds-space-050, 4px)"
@@ -174,12 +174,15 @@ var renderIcon = function renderIcon() {
174
174
  function MultiValueRemove(_ref5) {
175
175
  var isDisabled = _ref5.isDisabled,
176
176
  innerProps = _ref5.innerProps;
177
- return (0, _react.jsx)("div", (0, _extends2.default)({
178
- role: "button"
179
- }, innerProps), (0, _react.jsx)("div", {
180
- css: isDisabled ? disabledStyles : enabledStyles,
181
- "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
182
- }, renderIcon()));
177
+ return (
178
+ // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
179
+ (0, _react.jsx)("div", (0, _extends2.default)({
180
+ role: "button"
181
+ }, innerProps), (0, _react.jsx)("div", {
182
+ css: isDisabled ? disabledStyles : enabledStyles,
183
+ "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
184
+ }, renderIcon()))
185
+ );
183
186
  }
184
187
  var MultiValue = function MultiValue(props) {
185
188
  var children = props.children,
@@ -192,6 +195,7 @@ var MultiValue = function MultiValue(props) {
192
195
  var Container = components.Container,
193
196
  Label = components.Label,
194
197
  Remove = components.Remove;
198
+ var ariaLabel = typeof children === 'string' ? children : data.label;
195
199
  return (0, _react.jsx)(Container, {
196
200
  data: data,
197
201
  innerProps: _objectSpread(_objectSpread({}, (0, _utils.getStyleProps)(props, 'multiValue', {
@@ -210,7 +214,7 @@ var MultiValue = function MultiValue(props) {
210
214
  innerProps: _objectSpread(_objectSpread({}, (0, _utils.getStyleProps)(props, 'multiValueRemove', {
211
215
  'multi-value__remove': true
212
216
  })), {}, {
213
- 'aria-label': "Remove ".concat(children || 'option')
217
+ 'aria-label': "Remove ".concat(ariaLabel || 'option')
214
218
  }, removeProps),
215
219
  isDisabled: isDisabled,
216
220
  selectProps: selectProps
package/dist/es2019/components/containers.js CHANGED
@@ -20,11 +20,11 @@ export const containerCSS = ({
20
20
  label: 'container',
21
21
  direction: isRtl ? 'rtl' : undefined,
22
22
  position: 'relative',
23
- font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
23
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
24
24
  pointerEvents: 'all',
25
25
  cursor: isDisabled ? 'not-allowed' : undefined,
26
26
  [`${media.above.xs}`]: {
27
- font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
27
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)" : undefined
28
28
  }
29
29
  });
30
30
 
package/dist/es2019/components/group.js CHANGED
@@ -38,7 +38,7 @@ export const groupHeadingCSS = ({}) => ({
38
38
  marginBottom: '0.25em',
39
39
  paddingLeft: "var(--ds-space-150, 12px)",
40
40
  paddingRight: "var(--ds-space-150, 12px)",
41
- font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
41
+ font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
42
42
  color: "var(--ds-text-subtle, #44546F)",
43
43
  fontWeight: "var(--ds-font-weight-bold, 700)",
44
44
  textTransform: 'none'
package/dist/es2019/components/multi-value.js CHANGED
@@ -62,12 +62,12 @@ export const multiValueLabelCSS = ({
62
62
  borderRadius: "var(--ds-border-radius-050, 2px)",
63
63
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
64
64
  fontSize: '85%',
65
- 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)",
65
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
66
66
  padding: "var(--ds-space-025, 2px)",
67
67
  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : 'inherit',
68
68
  paddingLeft: "var(--ds-space-075, 6px)",
69
69
  ...(fg('platform-component-visual-refresh') && {
70
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
70
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
71
71
  paddingTop: 0,
72
72
  paddingBottom: 0,
73
73
  paddingLeft: "var(--ds-space-050, 4px)"
@@ -166,12 +166,15 @@ export function MultiValueRemove({
166
166
  isDisabled,
167
167
  innerProps
168
168
  }) {
169
- return jsx("div", _extends({
170
- role: "button"
171
- }, innerProps), jsx("div", {
172
- css: isDisabled ? disabledStyles : enabledStyles,
173
- "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
174
- }, renderIcon()));
169
+ return (
170
+ // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
171
+ jsx("div", _extends({
172
+ role: "button"
173
+ }, innerProps), jsx("div", {
174
+ css: isDisabled ? disabledStyles : enabledStyles,
175
+ "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
176
+ }, renderIcon()))
177
+ );
175
178
  }
176
179
  const MultiValue = props => {
177
180
  const {
@@ -188,6 +191,7 @@ const MultiValue = props => {
188
191
  Label,
189
192
  Remove
190
193
  } = components;
194
+ const ariaLabel = typeof children === 'string' ? children : data.label;
191
195
  return jsx(Container, {
192
196
  data: data,
193
197
  innerProps: {
@@ -212,7 +216,7 @@ const MultiValue = props => {
212
216
  ...getStyleProps(props, 'multiValueRemove', {
213
217
  'multi-value__remove': true
214
218
  }),
215
- 'aria-label': `Remove ${children || 'option'}`,
219
+ 'aria-label': `Remove ${ariaLabel || 'option'}`,
216
220
  ...removeProps
217
221
  },
218
222
  isDisabled: isDisabled,
package/dist/esm/components/containers.js CHANGED
@@ -21,11 +21,11 @@ export var containerCSS = function containerCSS(_ref) {
21
21
  label: 'container',
22
22
  direction: isRtl ? 'rtl' : undefined,
23
23
  position: 'relative',
24
- font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
24
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
25
25
  pointerEvents: 'all',
26
26
  cursor: isDisabled ? 'not-allowed' : undefined
27
27
  }, "".concat(media.above.xs), {
28
- font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
28
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)" : undefined
29
29
  });
30
30
  };
31
31
 
package/dist/esm/components/group.js CHANGED
@@ -44,7 +44,7 @@ export var groupHeadingCSS = function groupHeadingCSS(_ref2) {
44
44
  marginBottom: '0.25em',
45
45
  paddingLeft: "var(--ds-space-150, 12px)",
46
46
  paddingRight: "var(--ds-space-150, 12px)",
47
- font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
47
+ font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
48
48
  color: "var(--ds-text-subtle, #44546F)",
49
49
  fontWeight: "var(--ds-font-weight-bold, 700)",
50
50
  textTransform: 'none'
package/dist/esm/components/multi-value.js CHANGED
@@ -63,12 +63,12 @@ export var multiValueLabelCSS = function multiValueLabelCSS(_ref2) {
63
63
  borderRadius: "var(--ds-border-radius-050, 2px)",
64
64
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
65
65
  fontSize: '85%',
66
- 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)",
66
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
67
67
  padding: "var(--ds-space-025, 2px)",
68
68
  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : 'inherit',
69
69
  paddingLeft: "var(--ds-space-075, 6px)"
70
70
  }, fg('platform-component-visual-refresh') && {
71
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
71
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
72
72
  paddingTop: 0,
73
73
  paddingBottom: 0,
74
74
  paddingLeft: "var(--ds-space-050, 4px)"
@@ -167,12 +167,15 @@ var renderIcon = function renderIcon() {
167
167
  export function MultiValueRemove(_ref5) {
168
168
  var isDisabled = _ref5.isDisabled,
169
169
  innerProps = _ref5.innerProps;
170
- return jsx("div", _extends({
171
- role: "button"
172
- }, innerProps), jsx("div", {
173
- css: isDisabled ? disabledStyles : enabledStyles,
174
- "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
175
- }, renderIcon()));
170
+ return (
171
+ // The Remove button is intentionally excluded from the tab order, please avoid assigning a non-negative tabIndex to it. Context: https://hello.atlassian.net/wiki/spaces/A11YKB/pages/3031993460/Clear+Options+on+an+Input+Field
172
+ jsx("div", _extends({
173
+ role: "button"
174
+ }, innerProps), jsx("div", {
175
+ css: isDisabled ? disabledStyles : enabledStyles,
176
+ "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
177
+ }, renderIcon()))
178
+ );
176
179
  }
177
180
  var MultiValue = function MultiValue(props) {
178
181
  var children = props.children,
@@ -185,6 +188,7 @@ var MultiValue = function MultiValue(props) {
185
188
  var Container = components.Container,
186
189
  Label = components.Label,
187
190
  Remove = components.Remove;
191
+ var ariaLabel = typeof children === 'string' ? children : data.label;
188
192
  return jsx(Container, {
189
193
  data: data,
190
194
  innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValue', {
@@ -203,7 +207,7 @@ var MultiValue = function MultiValue(props) {
203
207
  innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValueRemove', {
204
208
  'multi-value__remove': true
205
209
  })), {}, {
206
- 'aria-label': "Remove ".concat(children || 'option')
210
+ 'aria-label': "Remove ".concat(ariaLabel || 'option')
207
211
  }, removeProps),
208
212
  isDisabled: isDisabled,
209
213
  selectProps: selectProps
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-select",
3
- "version": "2.0.3",
3
+ "version": "2.0.5",
4
4
  "description": "A forked version of react-select to only be used in atlaskit/select",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -30,11 +30,11 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@atlaskit/ds-lib": "^4.0.0",
33
- "@atlaskit/icon": "^24.1.0",
33
+ "@atlaskit/icon": "^25.0.0",
34
34
  "@atlaskit/platform-feature-flags": "^1.1.0",
35
35
  "@atlaskit/primitives": "^14.1.0",
36
36
  "@atlaskit/spinner": "^18.0.0",
37
- "@atlaskit/tokens": "^4.2.0",
37
+ "@atlaskit/tokens": "^4.4.0",
38
38
  "@babel/runtime": "^7.0.0",
39
39
  "@emotion/react": "^11.7.1",
40
40
  "@floating-ui/dom": "^1.0.1",
@@ -48,7 +48,7 @@
48
48
  "devDependencies": {
49
49
  "@atlaskit/checkbox": "^17.0.0",
50
50
  "@atlaskit/form": "^12.0.0",
51
- "@atlassian/feature-flags-test-utils": "*",
51
+ "@atlassian/feature-flags-test-utils": "^0.3.0",
52
52
  "@testing-library/react": "^13.4.0",
53
53
  "@testing-library/user-event": "^14.4.3",
54
54
  "jest-in-case": "^1.0.2",