@atlaskit/react-select 3.7.1 → 3.8.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.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/components/multi-value.compiled.css +0 -7
- package/dist/cjs/components/multi-value.js +8 -12
- package/dist/cjs/styles.js +0 -1
- package/dist/es2019/components/multi-value.compiled.css +0 -7
- package/dist/es2019/components/multi-value.js +8 -12
- package/dist/es2019/styles.js +0 -1
- package/dist/esm/components/multi-value.compiled.css +0 -7
- package/dist/esm/components/multi-value.js +8 -12
- package/dist/esm/styles.js +0 -1
- package/dist/types/components/index.d.ts +31 -31
- package/dist/types/styles.d.ts +1 -21
- package/dist/types-ts4.5/components/index.d.ts +31 -31
- package/dist/types-ts4.5/styles.d.ts +1 -21
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/react-select
|
|
2
2
|
|
|
3
|
+
## 3.8.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`a3ea761f650bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3ea761f650bb) -
|
|
8
|
+
[ux] Updates react-select styles to reflect our new visual design language. These changes were
|
|
9
|
+
previously behind a feature flag and are now fully rolled out.
|
|
10
|
+
|
|
3
11
|
## 3.7.1
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
-
._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
2
|
._19itglyw{border:none}
|
|
4
3
|
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
5
|
-
._2rko19qg{border-radius:0 var(--ds-radius-xsmall,2px) var(--ds-radius-xsmall,2px) 0}
|
|
6
4
|
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
5
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
8
6
|
._1dqonqa1{border-style:solid}
|
|
@@ -16,14 +14,12 @@
|
|
|
16
14
|
._1e0c1txw{display:flex}
|
|
17
15
|
._1e0cglyw{display:none}
|
|
18
16
|
._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
|
|
19
|
-
._1q51idpf{padding-block-start:0}
|
|
20
17
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
21
18
|
._1reo15vq{overflow-x:hidden}
|
|
22
19
|
._1ul9ze3t{min-width:var(--ds-space-0,0)}
|
|
23
20
|
._1wpz1h6o{align-self:center}
|
|
24
21
|
._4cvr1h6o{align-items:center}
|
|
25
22
|
._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
|
|
26
|
-
._85i5idpf{padding-block-end:0}
|
|
27
23
|
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
|
|
28
24
|
._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
|
|
29
25
|
._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
|
|
@@ -31,7 +27,6 @@
|
|
|
31
27
|
._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
|
|
32
28
|
._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
|
|
33
29
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
34
|
-
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
35
30
|
._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
|
|
36
31
|
._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
|
|
37
32
|
._lswu1dx5{fill:var(--ds-text,#000)}
|
|
@@ -48,8 +43,6 @@
|
|
|
48
43
|
._1ah312gs:focus-visible{outline-offset:-2px}
|
|
49
44
|
._13br1jjn:hover{fill:var(--ds-text-danger,#000)}
|
|
50
45
|
._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
|
|
51
|
-
._irr31yvi:hover{background-color:var(--ds-background-danger-hovered,#ffd5d2)}
|
|
52
46
|
._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
|
|
53
|
-
._1di61io2:active{background-color:var(--ds-background-danger-pressed,#fd9891)}
|
|
54
47
|
._i5f81jjn:active{fill:var(--ds-text-danger,#000)}
|
|
55
48
|
@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}}
|
|
@@ -17,16 +17,14 @@ 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; }
|
|
24
23
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
25
24
|
var multiValueStyles = {
|
|
26
|
-
root: "
|
|
25
|
+
root: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _1e0c1txw _1ul9ze3t _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _bfhk1j9a _p12f1osq _syazjpor _3yq3glyw",
|
|
27
26
|
disabled: "_syaz1lh4 _bfhkm7j4",
|
|
28
|
-
focused: "_syaz1wum _bfhkfg4m _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
|
|
29
|
-
refresh: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _bfhk1j9a"
|
|
27
|
+
focused: "_syaz1wum _bfhkfg4m _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
|
|
30
28
|
};
|
|
31
29
|
var multiValueCSS = exports.multiValueCSS = function multiValueCSS() {
|
|
32
30
|
return {};
|
|
@@ -35,18 +33,16 @@ var multiValueLabelCSS = exports.multiValueLabelCSS = function multiValueLabelCS
|
|
|
35
33
|
return {};
|
|
36
34
|
};
|
|
37
35
|
var multiValueLabelStyles = {
|
|
38
|
-
root: "_1reo15vq _18m915vq _2rkolb4i
|
|
36
|
+
root: "_1reo15vq _18m915vq _2rkolb4i _11c82smr _o5721q9c _y4tiv77o _bozg1b66 _syaz1kw7",
|
|
39
37
|
disabled: "_syaz1lh4",
|
|
40
|
-
ellipsis: "_1bto1l2s"
|
|
41
|
-
refresh: "_11c82smr _1q51idpf _85i5idpf _bozg1b66"
|
|
38
|
+
ellipsis: "_1bto1l2s"
|
|
42
39
|
};
|
|
43
40
|
var multiValueRemoveCSS = exports.multiValueRemoveCSS = function multiValueRemoveCSS() {
|
|
44
41
|
return {};
|
|
45
42
|
};
|
|
46
43
|
var multiValueRemoveStyles = {
|
|
47
44
|
focused: "_bfhkb1q9 _lswu1rrc",
|
|
48
|
-
root: "
|
|
49
|
-
refresh: "_19itglyw _2rko12b0 _bfhksm61 _4cvr1h6o _1bah1h6o _1wpz1h6o _r06hglyw _syaz1fxt _1q51v77o _y4tiv77o _85i5v77o _bozgv77o _12l2v77o _1ah312gs _irr3166n _1di61dty"
|
|
45
|
+
root: "_19itglyw _2rko12b0 _4cvr1h6o _1bah1h6o _1wpz1h6o _r06hglyw _bfhksm61 _syaz1fxt _1e0c1txw _lswu1dx5 _1q51v77o _y4tiv77o _85i5v77o _bozgv77o _12l2v77o _1ah312gs _irr3166n _13br1jjn _1di61dty _i5f81jjn"
|
|
50
46
|
};
|
|
51
47
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
52
48
|
var MultiValueContainer = exports.MultiValueContainer = function MultiValueContainer(_ref) {
|
|
@@ -58,7 +54,7 @@ var MultiValueContainer = exports.MultiValueContainer = function MultiValueConta
|
|
|
58
54
|
xcss = _ref.xcss;
|
|
59
55
|
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
|
|
60
56
|
// 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,
|
|
57
|
+
className: (0, _runtime.ax)([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, (0, _react2.cx)(className, xcss, '-multiValue')])
|
|
62
58
|
}), children);
|
|
63
59
|
};
|
|
64
60
|
|
|
@@ -72,7 +68,7 @@ var MultiValueLabel = exports.MultiValueLabel = function MultiValueLabel(_ref2)
|
|
|
72
68
|
xcss = _ref2.xcss;
|
|
73
69
|
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
|
|
74
70
|
// 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,
|
|
71
|
+
className: (0, _runtime.ax)([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, (0, _react2.cx)(className, xcss, '-MultiValueLabel')])
|
|
76
72
|
}), children);
|
|
77
73
|
};
|
|
78
74
|
var disabledStyles = null;
|
|
@@ -85,7 +81,7 @@ function MultiValueRemove(_ref3) {
|
|
|
85
81
|
xcss = _ref3.xcss;
|
|
86
82
|
return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
|
|
87
83
|
// 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,
|
|
84
|
+
className: (0, _runtime.ax)([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, (0, _react2.cx)(className, xcss, '-MultiValueRemove')])
|
|
89
85
|
}), /*#__PURE__*/React.createElement("div", {
|
|
90
86
|
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
|
|
91
87
|
className: (0, _runtime.ax)([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
|
package/dist/cjs/styles.js
CHANGED
|
@@ -44,7 +44,6 @@ var defaultStyles = exports.defaultStyles = {
|
|
|
44
44
|
};
|
|
45
45
|
// Merge Utility
|
|
46
46
|
// Allows consumers to extend a base Select with additional styles
|
|
47
|
-
|
|
48
47
|
function mergeStyles(source) {
|
|
49
48
|
var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
50
49
|
// initialize with source styles
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
-
._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
2
|
._19itglyw{border:none}
|
|
4
3
|
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
5
|
-
._2rko19qg{border-radius:0 var(--ds-radius-xsmall,2px) var(--ds-radius-xsmall,2px) 0}
|
|
6
4
|
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
5
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
8
6
|
._1dqonqa1{border-style:solid}
|
|
@@ -16,14 +14,12 @@
|
|
|
16
14
|
._1e0c1txw{display:flex}
|
|
17
15
|
._1e0cglyw{display:none}
|
|
18
16
|
._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
|
|
19
|
-
._1q51idpf{padding-block-start:0}
|
|
20
17
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
21
18
|
._1reo15vq{overflow-x:hidden}
|
|
22
19
|
._1ul9ze3t{min-width:var(--ds-space-0,0)}
|
|
23
20
|
._1wpz1h6o{align-self:center}
|
|
24
21
|
._4cvr1h6o{align-items:center}
|
|
25
22
|
._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
|
|
26
|
-
._85i5idpf{padding-block-end:0}
|
|
27
23
|
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
|
|
28
24
|
._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
|
|
29
25
|
._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
|
|
@@ -31,7 +27,6 @@
|
|
|
31
27
|
._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
|
|
32
28
|
._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
|
|
33
29
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
34
|
-
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
35
30
|
._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
|
|
36
31
|
._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
|
|
37
32
|
._lswu1dx5{fill:var(--ds-text,#000)}
|
|
@@ -48,8 +43,6 @@
|
|
|
48
43
|
._1ah312gs:focus-visible{outline-offset:-2px}
|
|
49
44
|
._13br1jjn:hover{fill:var(--ds-text-danger,#000)}
|
|
50
45
|
._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
|
|
51
|
-
._irr31yvi:hover{background-color:var(--ds-background-danger-hovered,#ffd5d2)}
|
|
52
46
|
._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
|
|
53
|
-
._1di61io2:active{background-color:var(--ds-background-danger-pressed,#fd9891)}
|
|
54
47
|
._i5f81jjn:active{fill:var(--ds-text-danger,#000)}
|
|
55
48
|
@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}}
|
|
@@ -6,27 +6,23 @@ 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
|
-
root: "
|
|
11
|
+
root: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _1e0c1txw _1ul9ze3t _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _bfhk1j9a _p12f1osq _syazjpor _3yq3glyw",
|
|
13
12
|
disabled: "_syaz1lh4 _bfhkm7j4",
|
|
14
|
-
focused: "_syaz1wum _bfhkfg4m _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
|
|
15
|
-
refresh: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _bfhk1j9a"
|
|
13
|
+
focused: "_syaz1wum _bfhkfg4m _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
|
|
16
14
|
};
|
|
17
15
|
export const multiValueCSS = () => ({});
|
|
18
16
|
export const multiValueLabelCSS = () => ({});
|
|
19
17
|
const multiValueLabelStyles = {
|
|
20
|
-
root: "_1reo15vq _18m915vq _2rkolb4i
|
|
18
|
+
root: "_1reo15vq _18m915vq _2rkolb4i _11c82smr _o5721q9c _y4tiv77o _bozg1b66 _syaz1kw7",
|
|
21
19
|
disabled: "_syaz1lh4",
|
|
22
|
-
ellipsis: "_1bto1l2s"
|
|
23
|
-
refresh: "_11c82smr _1q51idpf _85i5idpf _bozg1b66"
|
|
20
|
+
ellipsis: "_1bto1l2s"
|
|
24
21
|
};
|
|
25
22
|
export const multiValueRemoveCSS = () => ({});
|
|
26
23
|
const multiValueRemoveStyles = {
|
|
27
24
|
focused: "_bfhkb1q9 _lswu1rrc",
|
|
28
|
-
root: "
|
|
29
|
-
refresh: "_19itglyw _2rko12b0 _bfhksm61 _4cvr1h6o _1bah1h6o _1wpz1h6o _r06hglyw _syaz1fxt _1q51v77o _y4tiv77o _85i5v77o _bozgv77o _12l2v77o _1ah312gs _irr3166n _1di61dty"
|
|
25
|
+
root: "_19itglyw _2rko12b0 _4cvr1h6o _1bah1h6o _1wpz1h6o _r06hglyw _bfhksm61 _syaz1fxt _1e0c1txw _lswu1dx5 _1q51v77o _y4tiv77o _85i5v77o _bozgv77o _12l2v77o _1ah312gs _irr3166n _13br1jjn _1di61dty _i5f81jjn"
|
|
30
26
|
};
|
|
31
27
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
32
28
|
export const MultiValueContainer = ({
|
|
@@ -39,7 +35,7 @@ export const MultiValueContainer = ({
|
|
|
39
35
|
}) => {
|
|
40
36
|
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
41
37
|
// 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,
|
|
38
|
+
className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, cx(className, xcss, '-multiValue')])
|
|
43
39
|
}), children);
|
|
44
40
|
};
|
|
45
41
|
|
|
@@ -54,7 +50,7 @@ export const MultiValueLabel = ({
|
|
|
54
50
|
}) => {
|
|
55
51
|
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
56
52
|
// 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,
|
|
53
|
+
className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, cx(className, xcss, '-MultiValueLabel')])
|
|
58
54
|
}), children);
|
|
59
55
|
};
|
|
60
56
|
const disabledStyles = null;
|
|
@@ -68,7 +64,7 @@ export function MultiValueRemove({
|
|
|
68
64
|
}) {
|
|
69
65
|
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
70
66
|
// 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,
|
|
67
|
+
className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, cx(className, xcss, '-MultiValueRemove')])
|
|
72
68
|
}), /*#__PURE__*/React.createElement("div", {
|
|
73
69
|
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
|
|
74
70
|
className: ax([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
|
package/dist/es2019/styles.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
|
-
._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
2
|
._19itglyw{border:none}
|
|
4
3
|
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
5
|
-
._2rko19qg{border-radius:0 var(--ds-radius-xsmall,2px) var(--ds-radius-xsmall,2px) 0}
|
|
6
4
|
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
5
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
8
6
|
._1dqonqa1{border-style:solid}
|
|
@@ -16,14 +14,12 @@
|
|
|
16
14
|
._1e0c1txw{display:flex}
|
|
17
15
|
._1e0cglyw{display:none}
|
|
18
16
|
._1pfhv77o{margin-block-start:var(--ds-space-025,2px)}
|
|
19
|
-
._1q51idpf{padding-block-start:0}
|
|
20
17
|
._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
|
|
21
18
|
._1reo15vq{overflow-x:hidden}
|
|
22
19
|
._1ul9ze3t{min-width:var(--ds-space-0,0)}
|
|
23
20
|
._1wpz1h6o{align-self:center}
|
|
24
21
|
._4cvr1h6o{align-items:center}
|
|
25
22
|
._6rthv77o{margin-block-end:var(--ds-space-025,2px)}
|
|
26
|
-
._85i5idpf{padding-block-end:0}
|
|
27
23
|
._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
|
|
28
24
|
._ahbqv77o{margin-inline-start:var(--ds-space-025,2px)}
|
|
29
25
|
._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
|
|
@@ -31,7 +27,6 @@
|
|
|
31
27
|
._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
|
|
32
28
|
._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
|
|
33
29
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
34
|
-
._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
|
|
35
30
|
._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
|
|
36
31
|
._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
|
|
37
32
|
._lswu1dx5{fill:var(--ds-text,#000)}
|
|
@@ -48,8 +43,6 @@
|
|
|
48
43
|
._1ah312gs:focus-visible{outline-offset:-2px}
|
|
49
44
|
._13br1jjn:hover{fill:var(--ds-text-danger,#000)}
|
|
50
45
|
._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
|
|
51
|
-
._irr31yvi:hover{background-color:var(--ds-background-danger-hovered,#ffd5d2)}
|
|
52
46
|
._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
|
|
53
|
-
._1di61io2:active{background-color:var(--ds-background-danger-pressed,#fd9891)}
|
|
54
47
|
._i5f81jjn:active{fill:var(--ds-text-danger,#000)}
|
|
55
48
|
@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}}
|
|
@@ -9,13 +9,11 @@ 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
|
-
root: "
|
|
14
|
+
root: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _1e0c1txw _1ul9ze3t _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _bfhk1j9a _p12f1osq _syazjpor _3yq3glyw",
|
|
16
15
|
disabled: "_syaz1lh4 _bfhkm7j4",
|
|
17
|
-
focused: "_syaz1wum _bfhkfg4m _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
|
|
18
|
-
refresh: "_2rko12b0 _1h6d14je _1dqonqa1 _189ee4h9 _bfhk1j9a"
|
|
16
|
+
focused: "_syaz1wum _bfhkfg4m _16qs7ex6 _1aewe4h9 _6up51j28 _1xdnnqa1"
|
|
19
17
|
};
|
|
20
18
|
export var multiValueCSS = function multiValueCSS() {
|
|
21
19
|
return {};
|
|
@@ -24,18 +22,16 @@ export var multiValueLabelCSS = function multiValueLabelCSS() {
|
|
|
24
22
|
return {};
|
|
25
23
|
};
|
|
26
24
|
var multiValueLabelStyles = {
|
|
27
|
-
root: "_1reo15vq _18m915vq _2rkolb4i
|
|
25
|
+
root: "_1reo15vq _18m915vq _2rkolb4i _11c82smr _o5721q9c _y4tiv77o _bozg1b66 _syaz1kw7",
|
|
28
26
|
disabled: "_syaz1lh4",
|
|
29
|
-
ellipsis: "_1bto1l2s"
|
|
30
|
-
refresh: "_11c82smr _1q51idpf _85i5idpf _bozg1b66"
|
|
27
|
+
ellipsis: "_1bto1l2s"
|
|
31
28
|
};
|
|
32
29
|
export var multiValueRemoveCSS = function multiValueRemoveCSS() {
|
|
33
30
|
return {};
|
|
34
31
|
};
|
|
35
32
|
var multiValueRemoveStyles = {
|
|
36
33
|
focused: "_bfhkb1q9 _lswu1rrc",
|
|
37
|
-
root: "
|
|
38
|
-
refresh: "_19itglyw _2rko12b0 _bfhksm61 _4cvr1h6o _1bah1h6o _1wpz1h6o _r06hglyw _syaz1fxt _1q51v77o _y4tiv77o _85i5v77o _bozgv77o _12l2v77o _1ah312gs _irr3166n _1di61dty"
|
|
34
|
+
root: "_19itglyw _2rko12b0 _4cvr1h6o _1bah1h6o _1wpz1h6o _r06hglyw _bfhksm61 _syaz1fxt _1e0c1txw _lswu1dx5 _1q51v77o _y4tiv77o _85i5v77o _bozgv77o _12l2v77o _1ah312gs _irr3166n _13br1jjn _1di61dty _i5f81jjn"
|
|
39
35
|
};
|
|
40
36
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
41
37
|
export var MultiValueContainer = function MultiValueContainer(_ref) {
|
|
@@ -47,7 +43,7 @@ export var MultiValueContainer = function MultiValueContainer(_ref) {
|
|
|
47
43
|
xcss = _ref.xcss;
|
|
48
44
|
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
49
45
|
// 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,
|
|
46
|
+
className: ax([multiValueStyles.root, isDisabled && multiValueStyles.disabled, isFocused && multiValueStyles.focused, cx(className, xcss, '-multiValue')])
|
|
51
47
|
}), children);
|
|
52
48
|
};
|
|
53
49
|
|
|
@@ -61,7 +57,7 @@ export var MultiValueLabel = function MultiValueLabel(_ref2) {
|
|
|
61
57
|
xcss = _ref2.xcss;
|
|
62
58
|
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
63
59
|
// 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,
|
|
60
|
+
className: ax([multiValueLabelStyles.root, isDisabled && multiValueLabelStyles.disabled, hasEllipsis && multiValueLabelStyles.ellipsis, cx(className, xcss, '-MultiValueLabel')])
|
|
65
61
|
}), children);
|
|
66
62
|
};
|
|
67
63
|
var disabledStyles = null;
|
|
@@ -74,7 +70,7 @@ export function MultiValueRemove(_ref3) {
|
|
|
74
70
|
xcss = _ref3.xcss;
|
|
75
71
|
return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
|
|
76
72
|
// 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,
|
|
73
|
+
className: ax([multiValueRemoveStyles.root, isFocused && multiValueRemoveStyles.focused, cx(className, xcss, '-MultiValueRemove')])
|
|
78
74
|
}), /*#__PURE__*/React.createElement("div", {
|
|
79
75
|
"data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon',
|
|
80
76
|
className: ax([isDisabled && "_1e0cglyw", !isDisabled && "_1e0c1kw7"])
|
package/dist/esm/styles.js
CHANGED
|
@@ -36,7 +36,6 @@ export var defaultStyles = {
|
|
|
36
36
|
};
|
|
37
37
|
// Merge Utility
|
|
38
38
|
// Allows consumers to extend a base Select with additional styles
|
|
39
|
-
|
|
40
39
|
export function mergeStyles(source) {
|
|
41
40
|
var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
42
41
|
// initialize with source styles
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { type ComponentType } from 'react';
|
|
2
2
|
import { type GroupBase } from '../types';
|
|
3
|
-
import { type ContainerProps, type IndicatorsContainerProps, type ValueContainerProps } from './containers';
|
|
4
|
-
import { type ControlProps } from './control';
|
|
5
|
-
import { type GroupHeadingProps, type GroupProps } from './group';
|
|
6
|
-
import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from './indicators';
|
|
7
|
-
import { type InputProps } from './input';
|
|
8
|
-
import { type MenuListProps, type MenuPortalProps, type MenuProps, type NoticeProps } from './menu';
|
|
9
|
-
import { type MultiValueGenericProps, type MultiValueProps, MultiValueRemove, type MultiValueRemoveProps } from './multi-value';
|
|
10
|
-
import { type OptionProps } from './option';
|
|
11
|
-
import { type PlaceholderProps } from './placeholder';
|
|
12
|
-
import { type SingleValueProps } from './single-value';
|
|
3
|
+
import { type ContainerProps, IndicatorsContainer, type IndicatorsContainerProps, SelectContainer, ValueContainer, type ValueContainerProps } from './containers';
|
|
4
|
+
import Control, { type ControlProps } from './control';
|
|
5
|
+
import Group, { GroupHeading, type GroupHeadingProps, type GroupProps } from './group';
|
|
6
|
+
import { ClearIndicator, type ClearIndicatorProps, DropdownIndicator, type DropdownIndicatorProps, LoadingIndicator, type LoadingIndicatorProps } from './indicators';
|
|
7
|
+
import Input, { type InputProps } from './input';
|
|
8
|
+
import Menu, { LoadingMessage, MenuList, type MenuListProps, MenuPortal, type MenuPortalProps, type MenuProps, NoOptionsMessage, type NoticeProps } from './menu';
|
|
9
|
+
import MultiValue, { MultiValueContainer, type MultiValueGenericProps, MultiValueLabel, type MultiValueProps, MultiValueRemove, type MultiValueRemoveProps } from './multi-value';
|
|
10
|
+
import Option, { type OptionProps } from './option';
|
|
11
|
+
import Placeholder, { type PlaceholderProps } from './placeholder';
|
|
12
|
+
import SingleValue, { type SingleValueProps } from './single-value';
|
|
13
13
|
export interface SelectComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
|
|
14
14
|
ClearIndicator: ComponentType<ClearIndicatorProps<Option, IsMulti, Group>>;
|
|
15
15
|
Control: ComponentType<ControlProps<Option, IsMulti, Group>>;
|
|
@@ -36,28 +36,28 @@ export interface SelectComponents<Option, IsMulti extends boolean, Group extends
|
|
|
36
36
|
}
|
|
37
37
|
export type SelectComponentsConfig<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Partial<SelectComponents<Option, IsMulti, Group>>;
|
|
38
38
|
export declare const components: {
|
|
39
|
-
ClearIndicator:
|
|
40
|
-
Control:
|
|
41
|
-
DropdownIndicator:
|
|
42
|
-
Group:
|
|
43
|
-
GroupHeading:
|
|
44
|
-
IndicatorsContainer:
|
|
45
|
-
Input:
|
|
46
|
-
LoadingIndicator:
|
|
47
|
-
Menu:
|
|
48
|
-
MenuList:
|
|
49
|
-
MenuPortal:
|
|
50
|
-
LoadingMessage:
|
|
51
|
-
NoOptionsMessage:
|
|
52
|
-
MultiValue:
|
|
53
|
-
MultiValueContainer:
|
|
54
|
-
MultiValueLabel:
|
|
39
|
+
ClearIndicator: typeof ClearIndicator;
|
|
40
|
+
Control: typeof Control;
|
|
41
|
+
DropdownIndicator: typeof DropdownIndicator;
|
|
42
|
+
Group: typeof Group;
|
|
43
|
+
GroupHeading: typeof GroupHeading;
|
|
44
|
+
IndicatorsContainer: typeof IndicatorsContainer;
|
|
45
|
+
Input: typeof Input;
|
|
46
|
+
LoadingIndicator: typeof LoadingIndicator;
|
|
47
|
+
Menu: typeof Menu;
|
|
48
|
+
MenuList: typeof MenuList;
|
|
49
|
+
MenuPortal: typeof MenuPortal;
|
|
50
|
+
LoadingMessage: typeof LoadingMessage;
|
|
51
|
+
NoOptionsMessage: typeof NoOptionsMessage;
|
|
52
|
+
MultiValue: typeof MultiValue;
|
|
53
|
+
MultiValueContainer: typeof MultiValueContainer;
|
|
54
|
+
MultiValueLabel: typeof MultiValueLabel;
|
|
55
55
|
MultiValueRemove: typeof MultiValueRemove;
|
|
56
|
-
Option:
|
|
57
|
-
Placeholder:
|
|
58
|
-
SelectContainer:
|
|
59
|
-
SingleValue:
|
|
60
|
-
ValueContainer:
|
|
56
|
+
Option: typeof Option;
|
|
57
|
+
Placeholder: typeof Placeholder;
|
|
58
|
+
SelectContainer: typeof SelectContainer;
|
|
59
|
+
SingleValue: typeof SingleValue;
|
|
60
|
+
ValueContainer: typeof ValueContainer;
|
|
61
61
|
};
|
|
62
62
|
type SelectComponentsGeneric = typeof components;
|
|
63
63
|
interface ComponentsProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -42,25 +42,5 @@ export type ClassNamesConfig<Option = unknown, IsMulti extends boolean = boolean
|
|
|
42
42
|
[K in keyof StylesProps<Option, IsMulti, Group>]?: (props: StylesProps<Option, IsMulti, Group>[K]) => string;
|
|
43
43
|
};
|
|
44
44
|
export declare function mergeStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(source: StylesConfig<Option, IsMulti, Group>, target?: StylesConfig<Option, IsMulti, Group>): {
|
|
45
|
-
|
|
46
|
-
container?: ((base: CSSObjectWithLabel, props: ContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
47
|
-
control?: ((base: CSSObjectWithLabel, props: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
48
|
-
dropdownIndicator?: ((base: CSSObjectWithLabel, props: DropdownIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
49
|
-
group?: ((base: CSSObjectWithLabel, props: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
50
|
-
groupHeading?: ((base: CSSObjectWithLabel, props: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
51
|
-
indicatorsContainer?: ((base: CSSObjectWithLabel, props: IndicatorsContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
52
|
-
input?: ((base: CSSObjectWithLabel, props: InputProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
53
|
-
loadingIndicator?: ((base: CSSObjectWithLabel, props: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
54
|
-
loadingMessage?: ((base: CSSObjectWithLabel, props: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
55
|
-
menu?: ((base: CSSObjectWithLabel, props: MenuProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
56
|
-
menuList?: ((base: CSSObjectWithLabel, props: MenuListProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
57
|
-
menuPortal?: ((base: CSSObjectWithLabel, props: PortalStyleArgs) => CSSObjectWithLabel) | undefined;
|
|
58
|
-
multiValue?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
59
|
-
multiValueLabel?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
60
|
-
multiValueRemove?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
61
|
-
noOptionsMessage?: ((base: CSSObjectWithLabel, props: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
62
|
-
option?: ((base: CSSObjectWithLabel, props: OptionProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
63
|
-
placeholder?: ((base: CSSObjectWithLabel, props: PlaceholderProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
64
|
-
singleValue?: ((base: CSSObjectWithLabel, props: SingleValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
65
|
-
valueContainer?: ((base: CSSObjectWithLabel, props: ValueContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
45
|
+
[K in keyof StylesProps<Option, IsMulti, Group>]?: (base: CSSObjectWithLabel, props: StylesProps<Option, IsMulti, Group>[K]) => CSSObjectWithLabel;
|
|
66
46
|
};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { type ComponentType } from 'react';
|
|
2
2
|
import { type GroupBase } from '../types';
|
|
3
|
-
import { type ContainerProps, type IndicatorsContainerProps, type ValueContainerProps } from './containers';
|
|
4
|
-
import { type ControlProps } from './control';
|
|
5
|
-
import { type GroupHeadingProps, type GroupProps } from './group';
|
|
6
|
-
import { type ClearIndicatorProps, type DropdownIndicatorProps, type LoadingIndicatorProps } from './indicators';
|
|
7
|
-
import { type InputProps } from './input';
|
|
8
|
-
import { type MenuListProps, type MenuPortalProps, type MenuProps, type NoticeProps } from './menu';
|
|
9
|
-
import { type MultiValueGenericProps, type MultiValueProps, MultiValueRemove, type MultiValueRemoveProps } from './multi-value';
|
|
10
|
-
import { type OptionProps } from './option';
|
|
11
|
-
import { type PlaceholderProps } from './placeholder';
|
|
12
|
-
import { type SingleValueProps } from './single-value';
|
|
3
|
+
import { type ContainerProps, IndicatorsContainer, type IndicatorsContainerProps, SelectContainer, ValueContainer, type ValueContainerProps } from './containers';
|
|
4
|
+
import Control, { type ControlProps } from './control';
|
|
5
|
+
import Group, { GroupHeading, type GroupHeadingProps, type GroupProps } from './group';
|
|
6
|
+
import { ClearIndicator, type ClearIndicatorProps, DropdownIndicator, type DropdownIndicatorProps, LoadingIndicator, type LoadingIndicatorProps } from './indicators';
|
|
7
|
+
import Input, { type InputProps } from './input';
|
|
8
|
+
import Menu, { LoadingMessage, MenuList, type MenuListProps, MenuPortal, type MenuPortalProps, type MenuProps, NoOptionsMessage, type NoticeProps } from './menu';
|
|
9
|
+
import MultiValue, { MultiValueContainer, type MultiValueGenericProps, MultiValueLabel, type MultiValueProps, MultiValueRemove, type MultiValueRemoveProps } from './multi-value';
|
|
10
|
+
import Option, { type OptionProps } from './option';
|
|
11
|
+
import Placeholder, { type PlaceholderProps } from './placeholder';
|
|
12
|
+
import SingleValue, { type SingleValueProps } from './single-value';
|
|
13
13
|
export interface SelectComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
|
|
14
14
|
ClearIndicator: ComponentType<ClearIndicatorProps<Option, IsMulti, Group>>;
|
|
15
15
|
Control: ComponentType<ControlProps<Option, IsMulti, Group>>;
|
|
@@ -36,28 +36,28 @@ export interface SelectComponents<Option, IsMulti extends boolean, Group extends
|
|
|
36
36
|
}
|
|
37
37
|
export type SelectComponentsConfig<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Partial<SelectComponents<Option, IsMulti, Group>>;
|
|
38
38
|
export declare const components: {
|
|
39
|
-
ClearIndicator:
|
|
40
|
-
Control:
|
|
41
|
-
DropdownIndicator:
|
|
42
|
-
Group:
|
|
43
|
-
GroupHeading:
|
|
44
|
-
IndicatorsContainer:
|
|
45
|
-
Input:
|
|
46
|
-
LoadingIndicator:
|
|
47
|
-
Menu:
|
|
48
|
-
MenuList:
|
|
49
|
-
MenuPortal:
|
|
50
|
-
LoadingMessage:
|
|
51
|
-
NoOptionsMessage:
|
|
52
|
-
MultiValue:
|
|
53
|
-
MultiValueContainer:
|
|
54
|
-
MultiValueLabel:
|
|
39
|
+
ClearIndicator: typeof ClearIndicator;
|
|
40
|
+
Control: typeof Control;
|
|
41
|
+
DropdownIndicator: typeof DropdownIndicator;
|
|
42
|
+
Group: typeof Group;
|
|
43
|
+
GroupHeading: typeof GroupHeading;
|
|
44
|
+
IndicatorsContainer: typeof IndicatorsContainer;
|
|
45
|
+
Input: typeof Input;
|
|
46
|
+
LoadingIndicator: typeof LoadingIndicator;
|
|
47
|
+
Menu: typeof Menu;
|
|
48
|
+
MenuList: typeof MenuList;
|
|
49
|
+
MenuPortal: typeof MenuPortal;
|
|
50
|
+
LoadingMessage: typeof LoadingMessage;
|
|
51
|
+
NoOptionsMessage: typeof NoOptionsMessage;
|
|
52
|
+
MultiValue: typeof MultiValue;
|
|
53
|
+
MultiValueContainer: typeof MultiValueContainer;
|
|
54
|
+
MultiValueLabel: typeof MultiValueLabel;
|
|
55
55
|
MultiValueRemove: typeof MultiValueRemove;
|
|
56
|
-
Option:
|
|
57
|
-
Placeholder:
|
|
58
|
-
SelectContainer:
|
|
59
|
-
SingleValue:
|
|
60
|
-
ValueContainer:
|
|
56
|
+
Option: typeof Option;
|
|
57
|
+
Placeholder: typeof Placeholder;
|
|
58
|
+
SelectContainer: typeof SelectContainer;
|
|
59
|
+
SingleValue: typeof SingleValue;
|
|
60
|
+
ValueContainer: typeof ValueContainer;
|
|
61
61
|
};
|
|
62
62
|
type SelectComponentsGeneric = typeof components;
|
|
63
63
|
interface ComponentsProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
|
|
@@ -42,25 +42,5 @@ export type ClassNamesConfig<Option = unknown, IsMulti extends boolean = boolean
|
|
|
42
42
|
[K in keyof StylesProps<Option, IsMulti, Group>]?: (props: StylesProps<Option, IsMulti, Group>[K]) => string;
|
|
43
43
|
};
|
|
44
44
|
export declare function mergeStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(source: StylesConfig<Option, IsMulti, Group>, target?: StylesConfig<Option, IsMulti, Group>): {
|
|
45
|
-
|
|
46
|
-
container?: ((base: CSSObjectWithLabel, props: ContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
47
|
-
control?: ((base: CSSObjectWithLabel, props: ControlProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
48
|
-
dropdownIndicator?: ((base: CSSObjectWithLabel, props: DropdownIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
49
|
-
group?: ((base: CSSObjectWithLabel, props: GroupProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
50
|
-
groupHeading?: ((base: CSSObjectWithLabel, props: GroupHeadingProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
51
|
-
indicatorsContainer?: ((base: CSSObjectWithLabel, props: IndicatorsContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
52
|
-
input?: ((base: CSSObjectWithLabel, props: InputProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
53
|
-
loadingIndicator?: ((base: CSSObjectWithLabel, props: LoadingIndicatorProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
54
|
-
loadingMessage?: ((base: CSSObjectWithLabel, props: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
55
|
-
menu?: ((base: CSSObjectWithLabel, props: MenuProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
56
|
-
menuList?: ((base: CSSObjectWithLabel, props: MenuListProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
57
|
-
menuPortal?: ((base: CSSObjectWithLabel, props: PortalStyleArgs) => CSSObjectWithLabel) | undefined;
|
|
58
|
-
multiValue?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
59
|
-
multiValueLabel?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
60
|
-
multiValueRemove?: ((base: CSSObjectWithLabel, props: MultiValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
61
|
-
noOptionsMessage?: ((base: CSSObjectWithLabel, props: NoticeProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
62
|
-
option?: ((base: CSSObjectWithLabel, props: OptionProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
63
|
-
placeholder?: ((base: CSSObjectWithLabel, props: PlaceholderProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
64
|
-
singleValue?: ((base: CSSObjectWithLabel, props: SingleValueProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
65
|
-
valueContainer?: ((base: CSSObjectWithLabel, props: ValueContainerProps<Option, IsMulti, Group>) => CSSObjectWithLabel) | undefined;
|
|
45
|
+
[K in keyof StylesProps<Option, IsMulti, Group>]?: (base: CSSObjectWithLabel, props: StylesProps<Option, IsMulti, Group>[K]) => CSSObjectWithLabel;
|
|
66
46
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-select",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.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",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"atlaskit:src": "src/index.tsx",
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@atlaskit/ds-lib": "^5.1.0",
|
|
24
|
-
"@atlaskit/icon": "^28.
|
|
24
|
+
"@atlaskit/icon": "^28.4.0",
|
|
25
25
|
"@atlaskit/layering": "^3.0.0",
|
|
26
26
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
27
27
|
"@atlaskit/primitives": "^14.15.0",
|
|
@@ -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
|
},
|