@atlaskit/react-select 2.0.3 → 2.0.4

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,13 @@
1
1
  # @atlaskit/react-select
2
2
 
3
+ ## 2.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [#122557](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122557)
8
+ [`d8b5709e3f003`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d8b5709e3f003) -
9
+ Fix aria-label on multi select remove button to support non-string content
10
+
3
11
  ## 2.0.3
4
12
 
5
13
  ### Patch Changes
@@ -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
 
@@ -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'
@@ -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)"
@@ -192,6 +192,7 @@ var MultiValue = function MultiValue(props) {
192
192
  var Container = components.Container,
193
193
  Label = components.Label,
194
194
  Remove = components.Remove;
195
+ var ariaLabel = typeof children === 'string' ? children : data.label;
195
196
  return (0, _react.jsx)(Container, {
196
197
  data: data,
197
198
  innerProps: _objectSpread(_objectSpread({}, (0, _utils.getStyleProps)(props, 'multiValue', {
@@ -210,7 +211,7 @@ var MultiValue = function MultiValue(props) {
210
211
  innerProps: _objectSpread(_objectSpread({}, (0, _utils.getStyleProps)(props, 'multiValueRemove', {
211
212
  'multi-value__remove': true
212
213
  })), {}, {
213
- 'aria-label': "Remove ".concat(children || 'option')
214
+ 'aria-label': "Remove ".concat(ariaLabel || 'option')
214
215
  }, removeProps),
215
216
  isDisabled: isDisabled,
216
217
  selectProps: selectProps
@@ -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
 
@@ -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'
@@ -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)"
@@ -188,6 +188,7 @@ const MultiValue = props => {
188
188
  Label,
189
189
  Remove
190
190
  } = components;
191
+ const ariaLabel = typeof children === 'string' ? children : data.label;
191
192
  return jsx(Container, {
192
193
  data: data,
193
194
  innerProps: {
@@ -212,7 +213,7 @@ const MultiValue = props => {
212
213
  ...getStyleProps(props, 'multiValueRemove', {
213
214
  'multi-value__remove': true
214
215
  }),
215
- 'aria-label': `Remove ${children || 'option'}`,
216
+ 'aria-label': `Remove ${ariaLabel || 'option'}`,
216
217
  ...removeProps
217
218
  },
218
219
  isDisabled: isDisabled,
@@ -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
 
@@ -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'
@@ -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)"
@@ -185,6 +185,7 @@ var MultiValue = function MultiValue(props) {
185
185
  var Container = components.Container,
186
186
  Label = components.Label,
187
187
  Remove = components.Remove;
188
+ var ariaLabel = typeof children === 'string' ? children : data.label;
188
189
  return jsx(Container, {
189
190
  data: data,
190
191
  innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValue', {
@@ -203,7 +204,7 @@ var MultiValue = function MultiValue(props) {
203
204
  innerProps: _objectSpread(_objectSpread({}, getStyleProps(props, 'multiValueRemove', {
204
205
  'multi-value__remove': true
205
206
  })), {}, {
206
- 'aria-label': "Remove ".concat(children || 'option')
207
+ 'aria-label': "Remove ".concat(ariaLabel || 'option')
207
208
  }, removeProps),
208
209
  isDisabled: isDisabled,
209
210
  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.4",
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",
@@ -34,7 +34,7 @@
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.3.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",