@atlaskit/react-select 3.6.0 → 3.7.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.
Files changed (17) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/components/menu.compiled.css +6 -6
  3. package/dist/cjs/components/menu.js +6 -6
  4. package/dist/cjs/components/multi-value.js +3 -4
  5. package/dist/cjs/components/option.compiled.css +1 -1
  6. package/dist/cjs/components/option.js +3 -3
  7. package/dist/es2019/components/menu.compiled.css +6 -6
  8. package/dist/es2019/components/menu.js +6 -6
  9. package/dist/es2019/components/multi-value.js +3 -4
  10. package/dist/es2019/components/option.compiled.css +1 -1
  11. package/dist/es2019/components/option.js +3 -3
  12. package/dist/esm/components/menu.compiled.css +6 -6
  13. package/dist/esm/components/menu.js +6 -6
  14. package/dist/esm/components/multi-value.js +3 -4
  15. package/dist/esm/components/option.compiled.css +1 -1
  16. package/dist/esm/components/option.js +3 -3
  17. package/package.json +6 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/react-select
2
2
 
3
+ ## 3.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`b19759f83390f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b19759f83390f) -
8
+ [ux] Updates react-select styles to reflect our new visual design language. These changes were
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 3.6.1
15
+
16
+ ### Patch Changes
17
+
18
+ - [`248faa32d4835`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/248faa32d4835) -
19
+ Internal changes to how borders are applied.
20
+ - Updated dependencies
21
+
3
22
  ## 3.6.0
4
23
 
5
24
  ### Minor Changes
package/dist/cjs/components/menu.compiled.css CHANGED
@@ -1,22 +1,22 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._154i1nmo{top:var(--menu-top)}
3
- ._154i1osq{top:100%}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._152t1nmo{inset-block-start:var(--menu-top)}
3
+ ._152t1osq{inset-block-start:100%}
4
4
  ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
5
5
  ._18m91wug{overflow-y:auto}
6
- ._19pku2gc{margin-top:var(--ds-space-100,8px)}
7
6
  ._1bsb1osq{width:100%}
8
7
  ._1bsb1qxj{width:var(--menu-width)}
9
- ._1ltva1vk{left:var(--menu-left)}
8
+ ._1e02a1vk{inset-inline-start:var(--menu-left)}
10
9
  ._1pbykb7n{z-index:1}
10
+ ._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
11
11
  ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
12
+ ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
12
13
  ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
13
14
  ._8am5i4x0{-webkit-overflow-scrolling:touch}
14
- ._94n51osq{bottom:100%}
15
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
16
16
  ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
17
17
  ._kqswcp1v{position:var(--menu-position)}
18
18
  ._kqswh2mm{position:relative}
19
19
  ._kqswstnw{position:absolute}
20
- ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
20
+ ._u7co1osq{inset-block-end:100%}
21
21
  ._y3gn1h6o{text-align:center}
22
22
  ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
package/dist/cjs/components/menu.js CHANGED
@@ -196,9 +196,9 @@ var coercePlacement = function coercePlacement(p) {
196
196
  return p === 'auto' ? 'bottom' : p;
197
197
  };
198
198
  var menuStyles = {
199
- root: "_2rko12b0 _kqswstnw _1bsb1osq _1pbykb7n _otyru2gc _19pku2gc _bfhk1bhr _16qsd0yg",
200
- bottom: "_154i1osq",
201
- top: "_94n51osq"
199
+ root: "_2rko12b0 _kqswstnw _1bsb1osq _1pbykb7n _6rthu2gc _1pfhu2gc _bfhk1bhr _16qsd0yg",
200
+ bottom: "_152t1osq",
201
+ top: "_u7co1osq"
202
202
  };
203
203
  var menuCSS = exports.menuCSS = function menuCSS() {
204
204
  return {};
@@ -348,7 +348,7 @@ var NoOptionsMessage = exports.NoOptionsMessage = function NoOptionsMessage(_ref
348
348
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
349
349
  ,
350
350
  style: css
351
- // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
351
+ // eslint-disable-next-line @atlassian/a11y/role-has-required-aria-props
352
352
  ,
353
353
  role: "option"
354
354
  }, innerProps), /*#__PURE__*/React.createElement(_compiled.Text, {
@@ -379,7 +379,7 @@ var LoadingMessage = exports.LoadingMessage = function LoadingMessage(_ref4) {
379
379
  ,
380
380
  style: css
381
381
  }, innerProps, {
382
- // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
382
+ // eslint-disable-next-line @atlassian/a11y/role-has-required-aria-props
383
383
  role: "option"
384
384
  }), /*#__PURE__*/React.createElement(_compiled.Text, {
385
385
  color: "color.text.subtle"
@@ -394,7 +394,7 @@ var menuPortalCSS = exports.menuPortalCSS = function menuPortalCSS() {
394
394
  return {};
395
395
  };
396
396
  var menuPortalStyles = {
397
- root: "_1pbykb7n _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
397
+ root: "_1pbykb7n _1e02a1vk _kqswcp1v _152t1nmo _1bsb1qxj"
398
398
  };
399
399
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
400
400
  var MenuPortal = exports.MenuPortal = function MenuPortal(props) {
package/dist/cjs/components/multi-value.js CHANGED
@@ -17,7 +17,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
17
17
  var _react2 = require("@compiled/react");
18
18
  var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
19
19
  var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
20
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
21
20
  var _utils = require("../utils");
22
21
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
23
22
  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; }
@@ -58,7 +57,7 @@ var MultiValueContainer = exports.MultiValueContainer = function MultiValueConta
58
57
  xcss = _ref.xcss;
59
58
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
60
59
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
61
- className: (0, _runtime.ax)([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueStyles.refresh, (0, _react2.cx)(className, xcss, '-multiValue')])
60
+ className: (0, _runtime.ax)([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, multiValueStyles.refresh, (0, _react2.cx)(className, xcss, '-multiValue')])
62
61
  }), children);
63
62
  };
64
63
 
@@ -72,7 +71,7 @@ var MultiValueLabel = exports.MultiValueLabel = function MultiValueLabel(_ref2)
72
71
  xcss = _ref2.xcss;
73
72
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
74
73
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
75
- className: (0, _runtime.ax)([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueLabelStyles.refresh, (0, _react2.cx)(className, xcss, '-MultiValueLabel')])
74
+ className: (0, _runtime.ax)([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, multiValueLabelStyles.refresh, (0, _react2.cx)(className, xcss, '-MultiValueLabel')])
76
75
  }), children);
77
76
  };
78
77
  var disabledStyles = null;
@@ -85,7 +84,7 @@ function MultiValueRemove(_ref3) {
85
84
  xcss = _ref3.xcss;
86
85
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
87
86
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
88
- className: (0, _runtime.ax)([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, (0, _react2.cx)(className, xcss, '-MultiValueRemove')])
87
+ className: (0, _runtime.ax)([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, multiValueRemoveStyles.refresh, (0, _react2.cx)(className, xcss, '-MultiValueRemove')])
89
88
  }), /*#__PURE__*/React.createElement("div", {
90
89
  "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
91
90
  className: (0, _runtime.ax)([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
package/dist/cjs/components/option.compiled.css CHANGED
@@ -19,4 +19,4 @@
19
19
  ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
20
20
  ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
21
21
  ._1di61j28:active{background-color:transparent}
22
- @media screen and (-ms-high-contrast:active){._1pkn1vrj{border-left:2px solid transparent}._1pknglyw{border-left:none}}
22
+ @media screen and (-ms-high-contrast:active){._112e5u6v{border-inline-start:var(--ds-border-width-selected,2px) solid transparent}._112eglyw{border-inline-start:none}}
package/dist/cjs/components/option.js CHANGED
@@ -19,9 +19,9 @@ var optionCSS = exports.optionCSS = function optionCSS() {
19
19
  };
20
20
  var optionStyles = {
21
21
  root: "_1rjc12x7 _18zrutpp _syaz1fxt _80om73ad _1e0c1ule _1wyb1kw7 _1bsb1osq _uiztglyw _18ql1j7p _1di61dty",
22
- disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _1pknglyw",
23
- focused: "_bfhk166n _16qsu4to _1pkn1vrj",
24
- selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _1pkn1vrj",
22
+ disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _112eglyw",
23
+ focused: "_bfhk166n _16qsu4to _112e5u6v",
24
+ selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _112e5u6v",
25
25
  focusedSelected: "_bfhki1yw"
26
26
  };
27
27
  var Option = function Option(props) {
package/dist/es2019/components/menu.compiled.css CHANGED
@@ -1,22 +1,22 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._154i1nmo{top:var(--menu-top)}
3
- ._154i1osq{top:100%}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._152t1nmo{inset-block-start:var(--menu-top)}
3
+ ._152t1osq{inset-block-start:100%}
4
4
  ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
5
5
  ._18m91wug{overflow-y:auto}
6
- ._19pku2gc{margin-top:var(--ds-space-100,8px)}
7
6
  ._1bsb1osq{width:100%}
8
7
  ._1bsb1qxj{width:var(--menu-width)}
9
- ._1ltva1vk{left:var(--menu-left)}
8
+ ._1e02a1vk{inset-inline-start:var(--menu-left)}
10
9
  ._1pbykb7n{z-index:1}
10
+ ._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
11
11
  ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
12
+ ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
12
13
  ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
13
14
  ._8am5i4x0{-webkit-overflow-scrolling:touch}
14
- ._94n51osq{bottom:100%}
15
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
16
16
  ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
17
17
  ._kqswcp1v{position:var(--menu-position)}
18
18
  ._kqswh2mm{position:relative}
19
19
  ._kqswstnw{position:absolute}
20
- ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
20
+ ._u7co1osq{inset-block-end:100%}
21
21
  ._y3gn1h6o{text-align:center}
22
22
  ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
package/dist/es2019/components/menu.js CHANGED
@@ -183,9 +183,9 @@ function getMenuPlacement({
183
183
 
184
184
  const coercePlacement = p => p === 'auto' ? 'bottom' : p;
185
185
  const menuStyles = {
186
- root: "_2rko12b0 _kqswstnw _1bsb1osq _1pbykb7n _otyru2gc _19pku2gc _bfhk1bhr _16qsd0yg",
187
- bottom: "_154i1osq",
188
- top: "_94n51osq"
186
+ root: "_2rko12b0 _kqswstnw _1bsb1osq _1pbykb7n _6rthu2gc _1pfhu2gc _bfhk1bhr _16qsd0yg",
187
+ bottom: "_152t1osq",
188
+ top: "_u7co1osq"
189
189
  };
190
190
  export const menuCSS = () => ({});
191
191
  const PortalPlacementContext = /*#__PURE__*/createContext(null);
@@ -338,7 +338,7 @@ export const NoOptionsMessage = ({
338
338
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
339
339
  ,
340
340
  style: css
341
- // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
341
+ // eslint-disable-next-line @atlassian/a11y/role-has-required-aria-props
342
342
  ,
343
343
  role: "option"
344
344
  }, innerProps), /*#__PURE__*/React.createElement(Text, {
@@ -371,7 +371,7 @@ export const LoadingMessage = ({
371
371
  ,
372
372
  style: css
373
373
  }, innerProps, {
374
- // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
374
+ // eslint-disable-next-line @atlassian/a11y/role-has-required-aria-props
375
375
  role: "option"
376
376
  }), /*#__PURE__*/React.createElement(Text, {
377
377
  color: "color.text.subtle"
@@ -384,7 +384,7 @@ export const LoadingMessage = ({
384
384
 
385
385
  export const menuPortalCSS = () => ({});
386
386
  const menuPortalStyles = {
387
- root: "_1pbykb7n _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
387
+ root: "_1pbykb7n _1e02a1vk _kqswcp1v _152t1nmo _1bsb1qxj"
388
388
  };
389
389
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
390
390
  export const MenuPortal = props => {
package/dist/es2019/components/multi-value.js CHANGED
@@ -6,7 +6,6 @@ import { ax, ix } from "@compiled/react/runtime";
6
6
  import { cx } from '@compiled/react';
7
7
  import CrossIcon from '@atlaskit/icon/core/cross';
8
8
  import LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
9
- import { fg } from '@atlaskit/platform-feature-flags';
10
9
  import { getStyleProps } from '../utils';
11
10
  const multiValueStyles = {
12
11
  root: "_2rkolb4i _1e0c1txw _1ul9ze3t _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _bfhkm7j4 _p12f1osq _syazjpor _3yq3glyw",
@@ -39,7 +38,7 @@ export const MultiValueContainer = ({
39
38
  }) => {
40
39
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
41
40
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
42
- className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, fg('platform-component-visual-refresh') && multiValueStyles.refresh, cx(className, xcss, '-multiValue')])
41
+ className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, multiValueStyles.refresh, cx(className, xcss, '-multiValue')])
43
42
  }), children);
44
43
  };
45
44
 
@@ -54,7 +53,7 @@ export const MultiValueLabel = ({
54
53
  }) => {
55
54
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
56
55
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
57
- className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, fg('platform-component-visual-refresh') && multiValueLabelStyles.refresh, cx(className, xcss, '-MultiValueLabel')])
56
+ className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, multiValueLabelStyles.refresh, cx(className, xcss, '-MultiValueLabel')])
58
57
  }), children);
59
58
  };
60
59
  const disabledStyles = null;
@@ -68,7 +67,7 @@ export function MultiValueRemove({
68
67
  }) {
69
68
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
70
69
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
71
- className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, fg('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, cx(className, xcss, '-MultiValueRemove')])
70
+ className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, multiValueRemoveStyles.refresh, cx(className, xcss, '-MultiValueRemove')])
72
71
  }), /*#__PURE__*/React.createElement("div", {
73
72
  "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
74
73
  className: ax([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
package/dist/es2019/components/option.compiled.css CHANGED
@@ -19,4 +19,4 @@
19
19
  ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
20
20
  ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
21
21
  ._1di61j28:active{background-color:transparent}
22
- @media screen and (-ms-high-contrast:active){._1pkn1vrj{border-left:2px solid transparent}._1pknglyw{border-left:none}}
22
+ @media screen and (-ms-high-contrast:active){._112e5u6v{border-inline-start:var(--ds-border-width-selected,2px) solid transparent}._112eglyw{border-inline-start:none}}
package/dist/es2019/components/option.js CHANGED
@@ -8,9 +8,9 @@ import { getStyleProps } from '../utils';
8
8
  export const optionCSS = () => ({});
9
9
  const optionStyles = {
10
10
  root: "_1rjc12x7 _18zrutpp _syaz1fxt _80om73ad _1e0c1ule _1wyb1kw7 _1bsb1osq _uiztglyw _18ql1j7p _1di61dty",
11
- disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _1pknglyw",
12
- focused: "_bfhk166n _16qsu4to _1pkn1vrj",
13
- selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _1pkn1vrj",
11
+ disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _112eglyw",
12
+ focused: "_bfhk166n _16qsu4to _112e5u6v",
13
+ selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _112e5u6v",
14
14
  focusedSelected: "_bfhki1yw"
15
15
  };
16
16
  const Option = props => {
package/dist/esm/components/menu.compiled.css CHANGED
@@ -1,22 +1,22 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._154i1nmo{top:var(--menu-top)}
3
- ._154i1osq{top:100%}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._152t1nmo{inset-block-start:var(--menu-top)}
3
+ ._152t1osq{inset-block-start:100%}
4
4
  ._16qsd0yg{box-shadow:var(--ds-shadow-overlay,0 0 0 1px rgba(0,0,0,.1),0 4px 11px rgba(0,0,0,.1))}
5
5
  ._18m91wug{overflow-y:auto}
6
- ._19pku2gc{margin-top:var(--ds-space-100,8px)}
7
6
  ._1bsb1osq{width:100%}
8
7
  ._1bsb1qxj{width:var(--menu-width)}
9
- ._1ltva1vk{left:var(--menu-left)}
8
+ ._1e02a1vk{inset-inline-start:var(--menu-left)}
10
9
  ._1pbykb7n{z-index:1}
10
+ ._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
11
11
  ._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
12
+ ._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
12
13
  ._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
13
14
  ._8am5i4x0{-webkit-overflow-scrolling:touch}
14
- ._94n51osq{bottom:100%}
15
15
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
16
16
  ._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
17
17
  ._kqswcp1v{position:var(--menu-position)}
18
18
  ._kqswh2mm{position:relative}
19
19
  ._kqswstnw{position:absolute}
20
- ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
20
+ ._u7co1osq{inset-block-end:100%}
21
21
  ._y3gn1h6o{text-align:center}
22
22
  ._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
package/dist/esm/components/menu.js CHANGED
@@ -188,9 +188,9 @@ var coercePlacement = function coercePlacement(p) {
188
188
  return p === 'auto' ? 'bottom' : p;
189
189
  };
190
190
  var menuStyles = {
191
- root: "_2rko12b0 _kqswstnw _1bsb1osq _1pbykb7n _otyru2gc _19pku2gc _bfhk1bhr _16qsd0yg",
192
- bottom: "_154i1osq",
193
- top: "_94n51osq"
191
+ root: "_2rko12b0 _kqswstnw _1bsb1osq _1pbykb7n _6rthu2gc _1pfhu2gc _bfhk1bhr _16qsd0yg",
192
+ bottom: "_152t1osq",
193
+ top: "_u7co1osq"
194
194
  };
195
195
  export var menuCSS = function menuCSS() {
196
196
  return {};
@@ -343,7 +343,7 @@ export var NoOptionsMessage = function NoOptionsMessage(_ref3) {
343
343
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
344
344
  ,
345
345
  style: css
346
- // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
346
+ // eslint-disable-next-line @atlassian/a11y/role-has-required-aria-props
347
347
  ,
348
348
  role: "option"
349
349
  }, innerProps), /*#__PURE__*/React.createElement(Text, {
@@ -374,7 +374,7 @@ export var LoadingMessage = function LoadingMessage(_ref4) {
374
374
  ,
375
375
  style: css
376
376
  }, innerProps, {
377
- // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
377
+ // eslint-disable-next-line @atlassian/a11y/role-has-required-aria-props
378
378
  role: "option"
379
379
  }), /*#__PURE__*/React.createElement(Text, {
380
380
  color: "color.text.subtle"
@@ -389,7 +389,7 @@ export var menuPortalCSS = function menuPortalCSS() {
389
389
  return {};
390
390
  };
391
391
  var menuPortalStyles = {
392
- root: "_1pbykb7n _1ltva1vk _kqswcp1v _154i1nmo _1bsb1qxj"
392
+ root: "_1pbykb7n _1e02a1vk _kqswcp1v _152t1nmo _1bsb1qxj"
393
393
  };
394
394
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
395
395
  export var MenuPortal = function MenuPortal(props) {
package/dist/esm/components/multi-value.js CHANGED
@@ -9,7 +9,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
9
9
  import { cx } from '@compiled/react';
10
10
  import CrossIcon from '@atlaskit/icon/core/cross';
11
11
  import LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
12
- import { fg } from '@atlaskit/platform-feature-flags';
13
12
  import { getStyleProps } from '../utils';
14
13
  var multiValueStyles = {
15
14
  root: "_2rkolb4i _1e0c1txw _1ul9ze3t _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _bfhkm7j4 _p12f1osq _syazjpor _3yq3glyw",
@@ -47,7 +46,7 @@ export var MultiValueContainer = function MultiValueContainer(_ref) {
47
46
  xcss = _ref.xcss;
48
47
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
49
48
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
50
- className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, fg('platform-component-visual-refresh') && multiValueStyles.refresh, cx(className, xcss, '-multiValue')])
49
+ className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, multiValueStyles.refresh, cx(className, xcss, '-multiValue')])
51
50
  }), children);
52
51
  };
53
52
 
@@ -61,7 +60,7 @@ export var MultiValueLabel = function MultiValueLabel(_ref2) {
61
60
  xcss = _ref2.xcss;
62
61
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
63
62
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
64
- className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, fg('platform-component-visual-refresh') && multiValueLabelStyles.refresh, cx(className, xcss, '-MultiValueLabel')])
63
+ className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, multiValueLabelStyles.refresh, cx(className, xcss, '-MultiValueLabel')])
65
64
  }), children);
66
65
  };
67
66
  var disabledStyles = null;
@@ -74,7 +73,7 @@ export function MultiValueRemove(_ref3) {
74
73
  xcss = _ref3.xcss;
75
74
  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
76
75
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
77
- className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, fg('platform-component-visual-refresh') && multiValueRemoveStyles.refresh, cx(className, xcss, '-MultiValueRemove')])
76
+ className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, multiValueRemoveStyles.refresh, cx(className, xcss, '-MultiValueRemove')])
78
77
  }), /*#__PURE__*/React.createElement("div", {
79
78
  "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
80
79
  className: ax([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
package/dist/esm/components/option.compiled.css CHANGED
@@ -19,4 +19,4 @@
19
19
  ._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
20
20
  ._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
21
21
  ._1di61j28:active{background-color:transparent}
22
- @media screen and (-ms-high-contrast:active){._1pkn1vrj{border-left:2px solid transparent}._1pknglyw{border-left:none}}
22
+ @media screen and (-ms-high-contrast:active){._112e5u6v{border-inline-start:var(--ds-border-width-selected,2px) solid transparent}._112eglyw{border-inline-start:none}}
package/dist/esm/components/option.js CHANGED
@@ -10,9 +10,9 @@ export var optionCSS = function optionCSS() {
10
10
  };
11
11
  var optionStyles = {
12
12
  root: "_1rjc12x7 _18zrutpp _syaz1fxt _80om73ad _1e0c1ule _1wyb1kw7 _1bsb1osq _uiztglyw _18ql1j7p _1di61dty",
13
- disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _1pknglyw",
14
- focused: "_bfhk166n _16qsu4to _1pkn1vrj",
15
- selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _1pkn1vrj",
13
+ disabled: "_syaz1lh4 _80om13gf _bfhk1j28 _16qsglyw _1di61j28 _112eglyw",
14
+ focused: "_bfhk166n _16qsu4to _112e5u6v",
15
+ selected: "_syazaqb7 _bfhkfg4m _16qsu4to _1di619ru _112e5u6v",
16
16
  focusedSelected: "_bfhki1yw"
17
17
  };
18
18
  var Option = function Option(props) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-select",
3
- "version": "3.6.0",
3
+ "version": "3.7.0",
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",
@@ -20,13 +20,13 @@
20
20
  ],
21
21
  "atlaskit:src": "src/index.tsx",
22
22
  "dependencies": {
23
- "@atlaskit/ds-lib": "^5.0.0",
24
- "@atlaskit/icon": "^28.2.0",
23
+ "@atlaskit/ds-lib": "^5.1.0",
24
+ "@atlaskit/icon": "^28.3.0",
25
25
  "@atlaskit/layering": "^3.0.0",
26
26
  "@atlaskit/platform-feature-flags": "^1.1.0",
27
- "@atlaskit/primitives": "^14.14.0",
27
+ "@atlaskit/primitives": "^14.15.0",
28
28
  "@atlaskit/spinner": "^19.0.0",
29
- "@atlaskit/tokens": "^6.3.0",
29
+ "@atlaskit/tokens": "^6.4.0",
30
30
  "@babel/runtime": "^7.0.0",
31
31
  "@compiled/react": "^0.18.3",
32
32
  "@floating-ui/dom": "^1.0.1",
@@ -39,7 +39,7 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@atlaskit/checkbox": "^17.1.0",
42
- "@atlaskit/form": "^12.6.0",
42
+ "@atlaskit/form": "^14.2.0",
43
43
  "@atlassian/feature-flags-test-utils": "^0.3.0",
44
44
  "@testing-library/react": "^13.4.0",
45
45
  "@testing-library/user-event": "^14.4.3",
@@ -49,9 +49,6 @@
49
49
  "custom-interactive-elements-not-keyboard-focusable": {
50
50
  "type": "boolean"
51
51
  },
52
- "platform-component-visual-refresh": {
53
- "type": "boolean"
54
- },
55
52
  "platform_design_system_team_safari_input_fix": {
56
53
  "type": "boolean"
57
54
  },