@atlaskit/react-select 4.0.0 → 4.0.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/components/multi-value.compiled.css +12 -18
  3. package/dist/cjs/components/multi-value.js +15 -15
  4. package/dist/es2019/components/multi-value.compiled.css +12 -18
  5. package/dist/es2019/components/multi-value.js +15 -15
  6. package/dist/esm/components/multi-value.compiled.css +12 -18
  7. package/dist/esm/components/multi-value.js +15 -15
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @atlaskit/react-select
2
2
 
3
+ ## 4.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`61f82ad80594c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/61f82ad80594c) -
8
+ Removed OKLCH / `color-mix()` runtime colour transformations from the tag-like multi-value
9
+ rendering (behind the `platform-dst-lozenge-tag-badge-visual-uplifts` feature gate). The
10
+ decorative border colour now comes directly from the `color.border.accent.*.subtle` tokens
11
+ (introduced in `@atlaskit/tokens@13.2.0`) instead of being derived at runtime, matching the new
12
+ Tag component's border logic.
13
+
14
+ ## 4.0.1
15
+
16
+ ### Patch Changes
17
+
18
+ - [`0f8f79a02f3d5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f8f79a02f3d5) -
19
+ Fix `MultiValueContainer` component override being silently ignored when the
20
+ `platform-dst-lozenge-tag-badge-visual-uplifts` feature gate is enabled.
21
+
22
+ When the gate is on, `MultiValue` previously bypassed the `Container` (i.e. `MultiValueContainer`)
23
+ component entirely and rendered a `<Tag>` or tag-like `<div>` directly, causing consumers who use
24
+ `MultiValueContainer: () => null` to suppress selected tag display to see broken dropdown
25
+ positioning.
26
+
27
+ The fix detects when `Container` has been overridden and falls back to the default
28
+ `Container`-based render path, restoring the expected suppression behaviour.
29
+
3
30
  ## 4.0.0
4
31
 
5
32
  ### Major Changes
package/dist/cjs/components/multi-value.compiled.css CHANGED
@@ -5,26 +5,24 @@
5
5
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
6
6
  ._195gze3t{margin-inline:var(--ds-space-0,0)}
7
7
  ._1dqonqa1{border-style:solid}
8
- ._1h6dpryq{border-color:color-mix(in oklch,var(--tag-border-token) 100%,var(--cm-border-color) var(--cm-border-value))}
9
- ._1mouze3t{margin-block:var(--ds-space-0,0)}._119b16y8{--tag-border-token:var(--ds-border-accent-red,#e2483d)}
10
- ._119b1b2s{--tag-border-token:var(--ds-border-accent-orange,#e06c00)}
11
- ._119b1crs{--tag-border-token:var(--ds-border-accent-green,#22a06b)}
12
- ._119b1h3o{--tag-border-token:var(--ds-border-accent-teal,#2898bd)}
13
- ._119b1hqq{--tag-border-token:var(--ds-border-accent-purple,#af59e1)}
14
- ._119b1w55{--tag-border-token:var(--ds-border-accent-blue,#357de8)}
15
- ._119b8yml{--tag-border-token:var(--ds-border-accent-gray,#7d818a)}
16
- ._119bfeiv{--tag-border-token:var(--ds-border-accent-yellow,#b38600)}
17
- ._119bnf89{--tag-border-token:var(--ds-border-accent-lime,#6a9a23)}
18
- ._119buwd0{--tag-border-token:var(--ds-border-accent-magenta,#cd519d)}
8
+ ._1h6dip4g{border-color:var(--tag-border-token)}
9
+ ._1mouze3t{margin-block:var(--ds-space-0,0)}._119b131p{--tag-border-token:var(--ds-border-accent-teal-subtle,#9dd9ee)}
10
+ ._119b132u{--tag-border-token:var(--ds-border-accent-magenta-subtle,#f797d2)}
11
+ ._119b18hp{--tag-border-token:var(--ds-border-accent-blue-subtle,#8fb8f6)}
12
+ ._119b1ip5{--tag-border-token:var(--ds-border-accent-orange-subtle,#fbc828)}
13
+ ._119b1m7d{--tag-border-token:var(--ds-border-accent-lime-subtle,#b3df72)}
14
+ ._119b1s7j{--tag-border-token:var(--ds-border-accent-yellow-subtle,#eed12b)}
15
+ ._119b5d2u{--tag-border-token:var(--ds-border-accent-green-subtle,#7ee2b8)}
16
+ ._119bluwt{--tag-border-token:var(--ds-border-accent-purple-subtle,#d8a0f7)}
17
+ ._119bmsup{--tag-border-token:var(--ds-border-accent-gray-subtle,#b7b9be)}
18
+ ._119bn9dc{--tag-border-token:var(--ds-border-accent-red-subtle,#fd9891)}
19
19
  ._13lsf1ug>*{flex-basis:0%}
20
- ._13muu67f{--cm-border-color:#fff}
21
20
  ._16jlidpf{flex-grow:0}
22
21
  ._16jlkb7n{flex-grow:1}
23
22
  ._16qs1xv8{box-shadow:0 0 0 2px var(--ds-surface,#fff),0 0 0 4px var(--ds-border-focused,#4688ec)}
24
23
  ._18m915vq{overflow-y:hidden}
25
24
  ._1e0c116y{display:inline-flex}
26
25
  ._1e0c1txw{display:flex}
27
- ._1k671038{--border-l-factor:1.33}
28
26
  ._1o9zkb7n{flex-shrink:1}
29
27
  ._1ouwze3t>*{min-width:var(--ds-space-0,0)}
30
28
  ._1reo15vq{overflow-x:hidden}
@@ -42,7 +40,6 @@
42
40
  ._i0dl1wug{flex-basis:auto}
43
41
  ._i0dlf1ug{flex-basis:0%}
44
42
  ._kqswh2mm{position:relative}
45
- ._oe6mmko7{--cm-border-value:45%}
46
43
  ._p12ff6dh{max-width:11.25rem}
47
44
  ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
48
45
  ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
@@ -50,7 +47,4 @@
50
47
  ._v5ynkb7n>*{flex-shrink:1}
51
48
  ._vchhusvi{box-sizing:border-box}
52
49
  ._zdxokb7n>*{flex-grow:1}
53
- [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
54
- [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
55
- @media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
56
- @supports (color:oklch(from white l c h)){._1easrqqc{border-color:oklch(from var(--tag-border-token) calc(l * var(--border-l-factor)) c h)}}
50
+ @media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
package/dist/cjs/components/multi-value.js CHANGED
@@ -17,6 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
17
  var _tag = _interopRequireDefault(require("@atlaskit/tag"));
18
18
  var _getStyleProps4 = require("../get-style-props");
19
19
  var _useSelectGetStyles = require("../internal/use-select-get-styles");
20
+ var _multiValueContainer = require("./containers/multi-value-container");
20
21
  var _multiValueLabel = require("./multi-value-label");
21
22
  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); }
22
23
  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; }
@@ -27,19 +28,17 @@ var multiValueTagWrapperStyles = {
27
28
 
28
29
  // Tag-like color styles
29
30
  var tagLikeColorStyles = {
30
- gray: "_119b8yml",
31
- blue: "_119b1w55",
32
- green: "_119b1crs",
33
- red: "_119b16y8",
34
- yellow: "_119bfeiv",
35
- purple: "_119b1hqq",
36
- lime: "_119bnf89",
37
- magenta: "_119buwd0",
38
- orange: "_119b1b2s",
39
- teal: "_119b1h3o"
31
+ gray: "_119bmsup",
32
+ blue: "_119b18hp",
33
+ green: "_119b5d2u",
34
+ red: "_119bn9dc",
35
+ yellow: "_119b1s7j",
36
+ purple: "_119bluwt",
37
+ lime: "_119b1m7d",
38
+ magenta: "_119b132u",
39
+ orange: "_119b1ip5",
40
+ teal: "_119b131p"
40
41
  };
41
-
42
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- match TagNew border color logic
43
42
  var tagLikeBorderFilterStyles = null;
44
43
 
45
44
  // Tag-like styles for custom content values (not plain text) when FF is on.
@@ -92,6 +91,7 @@ var MultiValue = function MultiValue(props) {
92
91
  removeCss = _getStyleProps3.css,
93
92
  removeClassName = _getStyleProps3.className;
94
93
  var hasCustomLabel = Label !== _multiValueLabel.MultiValueLabel;
94
+ var hasCustomContainer = Container !== _multiValueContainer.MultiValueContainer;
95
95
  var selectStyles = selectProps.styles;
96
96
  var hasCustomMultiValueStyles = Boolean((selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValue) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueLabel) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueRemove));
97
97
  var selectClassNames = selectProps.classNames;
@@ -103,7 +103,7 @@ var MultiValue = function MultiValue(props) {
103
103
  var selectGetStyles = (0, _useSelectGetStyles.useSelectGetStyles)();
104
104
  var hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
105
105
  var hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
106
- if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
106
+ if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainer && !hasCustomContainerStyles) {
107
107
  var _ref = data !== null && data !== void 0 ? data : {},
108
108
  elemBefore = _ref.elemBefore,
109
109
  tagColor = _ref.color;
@@ -126,7 +126,7 @@ var MultiValue = function MultiValue(props) {
126
126
  }
127
127
 
128
128
  // FF on + custom content → tag-like path
129
- if (ffTagUplifts) {
129
+ if (ffTagUplifts && !hasCustomContainer) {
130
130
  var colorKey = data === null || data === void 0 ? void 0 : data.color;
131
131
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
132
132
  "data-multi-value-tag-like": "true"
@@ -135,7 +135,7 @@ var MultiValue = function MultiValue(props) {
135
135
  style: containerCss
136
136
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
137
137
  ,
138
- className: (0, _runtime.ax)([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dpryq _1k671038 _13muu67f _oe6mmko7 _u8p61h4e _hg5mr3uz _1easrqqc", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, (0, _react2.cx)(props.className, containerClassName, props.xcss, '-multiValue')])
138
+ className: (0, _runtime.ax)([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dip4g", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, (0, _react2.cx)(props.className, containerClassName, props.xcss, '-multiValue')])
139
139
  }), /*#__PURE__*/React.createElement("div", {
140
140
  className: (0, _runtime.ax)([multiValueTagLikeStyles.labelWrapper])
141
141
  }, /*#__PURE__*/React.createElement(Label, {
package/dist/es2019/components/multi-value.compiled.css CHANGED
@@ -5,26 +5,24 @@
5
5
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
6
6
  ._195gze3t{margin-inline:var(--ds-space-0,0)}
7
7
  ._1dqonqa1{border-style:solid}
8
- ._1h6dpryq{border-color:color-mix(in oklch,var(--tag-border-token) 100%,var(--cm-border-color) var(--cm-border-value))}
9
- ._1mouze3t{margin-block:var(--ds-space-0,0)}._119b16y8{--tag-border-token:var(--ds-border-accent-red,#e2483d)}
10
- ._119b1b2s{--tag-border-token:var(--ds-border-accent-orange,#e06c00)}
11
- ._119b1crs{--tag-border-token:var(--ds-border-accent-green,#22a06b)}
12
- ._119b1h3o{--tag-border-token:var(--ds-border-accent-teal,#2898bd)}
13
- ._119b1hqq{--tag-border-token:var(--ds-border-accent-purple,#af59e1)}
14
- ._119b1w55{--tag-border-token:var(--ds-border-accent-blue,#357de8)}
15
- ._119b8yml{--tag-border-token:var(--ds-border-accent-gray,#7d818a)}
16
- ._119bfeiv{--tag-border-token:var(--ds-border-accent-yellow,#b38600)}
17
- ._119bnf89{--tag-border-token:var(--ds-border-accent-lime,#6a9a23)}
18
- ._119buwd0{--tag-border-token:var(--ds-border-accent-magenta,#cd519d)}
8
+ ._1h6dip4g{border-color:var(--tag-border-token)}
9
+ ._1mouze3t{margin-block:var(--ds-space-0,0)}._119b131p{--tag-border-token:var(--ds-border-accent-teal-subtle,#9dd9ee)}
10
+ ._119b132u{--tag-border-token:var(--ds-border-accent-magenta-subtle,#f797d2)}
11
+ ._119b18hp{--tag-border-token:var(--ds-border-accent-blue-subtle,#8fb8f6)}
12
+ ._119b1ip5{--tag-border-token:var(--ds-border-accent-orange-subtle,#fbc828)}
13
+ ._119b1m7d{--tag-border-token:var(--ds-border-accent-lime-subtle,#b3df72)}
14
+ ._119b1s7j{--tag-border-token:var(--ds-border-accent-yellow-subtle,#eed12b)}
15
+ ._119b5d2u{--tag-border-token:var(--ds-border-accent-green-subtle,#7ee2b8)}
16
+ ._119bluwt{--tag-border-token:var(--ds-border-accent-purple-subtle,#d8a0f7)}
17
+ ._119bmsup{--tag-border-token:var(--ds-border-accent-gray-subtle,#b7b9be)}
18
+ ._119bn9dc{--tag-border-token:var(--ds-border-accent-red-subtle,#fd9891)}
19
19
  ._13lsf1ug>*{flex-basis:0%}
20
- ._13muu67f{--cm-border-color:#fff}
21
20
  ._16jlidpf{flex-grow:0}
22
21
  ._16jlkb7n{flex-grow:1}
23
22
  ._16qs1xv8{box-shadow:0 0 0 2px var(--ds-surface,#fff),0 0 0 4px var(--ds-border-focused,#4688ec)}
24
23
  ._18m915vq{overflow-y:hidden}
25
24
  ._1e0c116y{display:inline-flex}
26
25
  ._1e0c1txw{display:flex}
27
- ._1k671038{--border-l-factor:1.33}
28
26
  ._1o9zkb7n{flex-shrink:1}
29
27
  ._1ouwze3t>*{min-width:var(--ds-space-0,0)}
30
28
  ._1reo15vq{overflow-x:hidden}
@@ -42,7 +40,6 @@
42
40
  ._i0dl1wug{flex-basis:auto}
43
41
  ._i0dlf1ug{flex-basis:0%}
44
42
  ._kqswh2mm{position:relative}
45
- ._oe6mmko7{--cm-border-value:45%}
46
43
  ._p12ff6dh{max-width:11.25rem}
47
44
  ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
48
45
  ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
@@ -50,7 +47,4 @@
50
47
  ._v5ynkb7n>*{flex-shrink:1}
51
48
  ._vchhusvi{box-sizing:border-box}
52
49
  ._zdxokb7n>*{flex-grow:1}
53
- [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
54
- [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
55
- @media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
56
- @supports (color:oklch(from white l c h)){._1easrqqc{border-color:oklch(from var(--tag-border-token) calc(l * var(--border-l-factor)) c h)}}
50
+ @media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
package/dist/es2019/components/multi-value.js CHANGED
@@ -8,6 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
8
8
  import Tag from '@atlaskit/tag';
9
9
  import { getStyleProps } from '../get-style-props';
10
10
  import { useSelectGetStyles } from '../internal/use-select-get-styles';
11
+ import { MultiValueContainer as DefaultMultiValueContainer } from './containers/multi-value-container';
11
12
  import { MultiValueLabel } from './multi-value-label';
12
13
  const multiValueTagWrapperStyles = {
13
14
  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
@@ -15,19 +16,17 @@ const multiValueTagWrapperStyles = {
15
16
 
16
17
  // Tag-like color styles
17
18
  const tagLikeColorStyles = {
18
- gray: "_119b8yml",
19
- blue: "_119b1w55",
20
- green: "_119b1crs",
21
- red: "_119b16y8",
22
- yellow: "_119bfeiv",
23
- purple: "_119b1hqq",
24
- lime: "_119bnf89",
25
- magenta: "_119buwd0",
26
- orange: "_119b1b2s",
27
- teal: "_119b1h3o"
19
+ gray: "_119bmsup",
20
+ blue: "_119b18hp",
21
+ green: "_119b5d2u",
22
+ red: "_119bn9dc",
23
+ yellow: "_119b1s7j",
24
+ purple: "_119bluwt",
25
+ lime: "_119b1m7d",
26
+ magenta: "_119b132u",
27
+ orange: "_119b1ip5",
28
+ teal: "_119b131p"
28
29
  };
29
-
30
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- match TagNew border color logic
31
30
  const tagLikeBorderFilterStyles = null;
32
31
 
33
32
  // Tag-like styles for custom content values (not plain text) when FF is on.
@@ -87,6 +86,7 @@ const MultiValue = props => {
87
86
  'multi-value__remove': true
88
87
  });
89
88
  const hasCustomLabel = Label !== MultiValueLabel;
89
+ const hasCustomContainer = Container !== DefaultMultiValueContainer;
90
90
  const selectStyles = selectProps.styles;
91
91
  const hasCustomMultiValueStyles = Boolean((selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValue) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueLabel) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueRemove));
92
92
  const selectClassNames = selectProps.classNames;
@@ -98,7 +98,7 @@ const MultiValue = props => {
98
98
  const selectGetStyles = useSelectGetStyles();
99
99
  const hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
100
100
  const hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
101
- if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
101
+ if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainer && !hasCustomContainerStyles) {
102
102
  const {
103
103
  elemBefore,
104
104
  color: tagColor
@@ -122,7 +122,7 @@ const MultiValue = props => {
122
122
  }
123
123
 
124
124
  // FF on + custom content → tag-like path
125
- if (ffTagUplifts) {
125
+ if (ffTagUplifts && !hasCustomContainer) {
126
126
  const colorKey = data === null || data === void 0 ? void 0 : data.color;
127
127
  return /*#__PURE__*/React.createElement("div", _extends({
128
128
  "data-multi-value-tag-like": "true"
@@ -131,7 +131,7 @@ const MultiValue = props => {
131
131
  style: containerCss
132
132
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
133
133
  ,
134
- className: ax([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dpryq _1k671038 _13muu67f _oe6mmko7 _u8p61h4e _hg5mr3uz _1easrqqc", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, cx(props.className, containerClassName, props.xcss, '-multiValue')])
134
+ className: ax([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dip4g", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, cx(props.className, containerClassName, props.xcss, '-multiValue')])
135
135
  }), /*#__PURE__*/React.createElement("div", {
136
136
  className: ax([multiValueTagLikeStyles.labelWrapper])
137
137
  }, /*#__PURE__*/React.createElement(Label, {
package/dist/esm/components/multi-value.compiled.css CHANGED
@@ -5,26 +5,24 @@
5
5
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
6
6
  ._195gze3t{margin-inline:var(--ds-space-0,0)}
7
7
  ._1dqonqa1{border-style:solid}
8
- ._1h6dpryq{border-color:color-mix(in oklch,var(--tag-border-token) 100%,var(--cm-border-color) var(--cm-border-value))}
9
- ._1mouze3t{margin-block:var(--ds-space-0,0)}._119b16y8{--tag-border-token:var(--ds-border-accent-red,#e2483d)}
10
- ._119b1b2s{--tag-border-token:var(--ds-border-accent-orange,#e06c00)}
11
- ._119b1crs{--tag-border-token:var(--ds-border-accent-green,#22a06b)}
12
- ._119b1h3o{--tag-border-token:var(--ds-border-accent-teal,#2898bd)}
13
- ._119b1hqq{--tag-border-token:var(--ds-border-accent-purple,#af59e1)}
14
- ._119b1w55{--tag-border-token:var(--ds-border-accent-blue,#357de8)}
15
- ._119b8yml{--tag-border-token:var(--ds-border-accent-gray,#7d818a)}
16
- ._119bfeiv{--tag-border-token:var(--ds-border-accent-yellow,#b38600)}
17
- ._119bnf89{--tag-border-token:var(--ds-border-accent-lime,#6a9a23)}
18
- ._119buwd0{--tag-border-token:var(--ds-border-accent-magenta,#cd519d)}
8
+ ._1h6dip4g{border-color:var(--tag-border-token)}
9
+ ._1mouze3t{margin-block:var(--ds-space-0,0)}._119b131p{--tag-border-token:var(--ds-border-accent-teal-subtle,#9dd9ee)}
10
+ ._119b132u{--tag-border-token:var(--ds-border-accent-magenta-subtle,#f797d2)}
11
+ ._119b18hp{--tag-border-token:var(--ds-border-accent-blue-subtle,#8fb8f6)}
12
+ ._119b1ip5{--tag-border-token:var(--ds-border-accent-orange-subtle,#fbc828)}
13
+ ._119b1m7d{--tag-border-token:var(--ds-border-accent-lime-subtle,#b3df72)}
14
+ ._119b1s7j{--tag-border-token:var(--ds-border-accent-yellow-subtle,#eed12b)}
15
+ ._119b5d2u{--tag-border-token:var(--ds-border-accent-green-subtle,#7ee2b8)}
16
+ ._119bluwt{--tag-border-token:var(--ds-border-accent-purple-subtle,#d8a0f7)}
17
+ ._119bmsup{--tag-border-token:var(--ds-border-accent-gray-subtle,#b7b9be)}
18
+ ._119bn9dc{--tag-border-token:var(--ds-border-accent-red-subtle,#fd9891)}
19
19
  ._13lsf1ug>*{flex-basis:0%}
20
- ._13muu67f{--cm-border-color:#fff}
21
20
  ._16jlidpf{flex-grow:0}
22
21
  ._16jlkb7n{flex-grow:1}
23
22
  ._16qs1xv8{box-shadow:0 0 0 2px var(--ds-surface,#fff),0 0 0 4px var(--ds-border-focused,#4688ec)}
24
23
  ._18m915vq{overflow-y:hidden}
25
24
  ._1e0c116y{display:inline-flex}
26
25
  ._1e0c1txw{display:flex}
27
- ._1k671038{--border-l-factor:1.33}
28
26
  ._1o9zkb7n{flex-shrink:1}
29
27
  ._1ouwze3t>*{min-width:var(--ds-space-0,0)}
30
28
  ._1reo15vq{overflow-x:hidden}
@@ -42,7 +40,6 @@
42
40
  ._i0dl1wug{flex-basis:auto}
43
41
  ._i0dlf1ug{flex-basis:0%}
44
42
  ._kqswh2mm{position:relative}
45
- ._oe6mmko7{--cm-border-value:45%}
46
43
  ._p12ff6dh{max-width:11.25rem}
47
44
  ._syaz1gmx{color:var(--ds-text-disabled,#080f214a)}
48
45
  ._syaz6x5g{color:var(--ds-text-selected,#1868db)}
@@ -50,7 +47,4 @@
50
47
  ._v5ynkb7n>*{flex-shrink:1}
51
48
  ._vchhusvi{box-sizing:border-box}
52
49
  ._zdxokb7n>*{flex-grow:1}
53
- [data-color-mode=dark] ._hg5mr3uz{--cm-border-color:#000}
54
- [data-color-mode=dark] ._u8p61h4e{--border-l-factor:0.7}
55
- @media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
56
- @supports (color:oklch(from white l c h)){._1easrqqc{border-color:oklch(from var(--tag-border-token) calc(l * var(--border-l-factor)) c h)}}
50
+ @media screen and (-ms-high-contrast:active){._1aewe4h9{border-width:var(--ds-border-width,1px)}._6up51j28{border-color:transparent}._1xdnnqa1{border-style:solid}._3yq3glyw{border:none}}
package/dist/esm/components/multi-value.js CHANGED
@@ -11,6 +11,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
11
11
  import Tag from '@atlaskit/tag';
12
12
  import { getStyleProps } from '../get-style-props';
13
13
  import { useSelectGetStyles } from '../internal/use-select-get-styles';
14
+ import { MultiValueContainer as DefaultMultiValueContainer } from './containers/multi-value-container';
14
15
  import { MultiValueLabel } from './multi-value-label';
15
16
  var multiValueTagWrapperStyles = {
16
17
  root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
@@ -18,19 +19,17 @@ var multiValueTagWrapperStyles = {
18
19
 
19
20
  // Tag-like color styles
20
21
  var tagLikeColorStyles = {
21
- gray: "_119b8yml",
22
- blue: "_119b1w55",
23
- green: "_119b1crs",
24
- red: "_119b16y8",
25
- yellow: "_119bfeiv",
26
- purple: "_119b1hqq",
27
- lime: "_119bnf89",
28
- magenta: "_119buwd0",
29
- orange: "_119b1b2s",
30
- teal: "_119b1h3o"
22
+ gray: "_119bmsup",
23
+ blue: "_119b18hp",
24
+ green: "_119b5d2u",
25
+ red: "_119bn9dc",
26
+ yellow: "_119b1s7j",
27
+ purple: "_119bluwt",
28
+ lime: "_119b1m7d",
29
+ magenta: "_119b132u",
30
+ orange: "_119b1ip5",
31
+ teal: "_119b131p"
31
32
  };
32
-
33
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- match TagNew border color logic
34
33
  var tagLikeBorderFilterStyles = null;
35
34
 
36
35
  // Tag-like styles for custom content values (not plain text) when FF is on.
@@ -83,6 +82,7 @@ var MultiValue = function MultiValue(props) {
83
82
  removeCss = _getStyleProps3.css,
84
83
  removeClassName = _getStyleProps3.className;
85
84
  var hasCustomLabel = Label !== MultiValueLabel;
85
+ var hasCustomContainer = Container !== DefaultMultiValueContainer;
86
86
  var selectStyles = selectProps.styles;
87
87
  var hasCustomMultiValueStyles = Boolean((selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValue) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueLabel) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueRemove));
88
88
  var selectClassNames = selectProps.classNames;
@@ -94,7 +94,7 @@ var MultiValue = function MultiValue(props) {
94
94
  var selectGetStyles = useSelectGetStyles();
95
95
  var hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
96
96
  var hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
97
- if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
97
+ if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainer && !hasCustomContainerStyles) {
98
98
  var _ref = data !== null && data !== void 0 ? data : {},
99
99
  elemBefore = _ref.elemBefore,
100
100
  tagColor = _ref.color;
@@ -117,7 +117,7 @@ var MultiValue = function MultiValue(props) {
117
117
  }
118
118
 
119
119
  // FF on + custom content → tag-like path
120
- if (ffTagUplifts) {
120
+ if (ffTagUplifts && !hasCustomContainer) {
121
121
  var colorKey = data === null || data === void 0 ? void 0 : data.color;
122
122
  return /*#__PURE__*/React.createElement("div", _extends({
123
123
  "data-multi-value-tag-like": "true"
@@ -126,7 +126,7 @@ var MultiValue = function MultiValue(props) {
126
126
  style: containerCss
127
127
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
128
128
  ,
129
- className: ax([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dpryq _1k671038 _13muu67f _oe6mmko7 _u8p61h4e _hg5mr3uz _1easrqqc", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, cx(props.className, containerClassName, props.xcss, '-multiValue')])
129
+ className: ax([multiValueTagLikeStyles.root, tagLikeColorStyles.gray, colorKey === 'blue' && tagLikeColorStyles.blue, colorKey === 'green' && tagLikeColorStyles.green, colorKey === 'red' && tagLikeColorStyles.red, colorKey === 'yellow' && tagLikeColorStyles.yellow, colorKey === 'purple' && tagLikeColorStyles.purple, colorKey === 'lime' && tagLikeColorStyles.lime, colorKey === 'magenta' && tagLikeColorStyles.magenta, colorKey === 'orange' && tagLikeColorStyles.orange, colorKey === 'teal' && tagLikeColorStyles.teal, "_1h6dip4g", isDisabled && multiValueTagLikeStyles.disabled, isFocused && multiValueTagLikeStyles.focused, cx(props.className, containerClassName, props.xcss, '-multiValue')])
130
130
  }), /*#__PURE__*/React.createElement("div", {
131
131
  className: ax([multiValueTagLikeStyles.labelWrapper])
132
132
  }, /*#__PURE__*/React.createElement(Label, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-select",
3
- "version": "4.0.0",
3
+ "version": "4.0.2",
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",