carbon-react 109.1.2 → 109.2.1

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 (29) hide show
  1. package/esm/components/pill/index.d.ts +2 -1
  2. package/esm/components/pill/pill.component.d.ts +22 -0
  3. package/esm/components/pill/pill.component.js +219 -42
  4. package/esm/components/pill/pill.style.config.d.ts +18 -0
  5. package/esm/components/pill/pill.style.d.ts +22 -0
  6. package/esm/components/pill/pill.style.js +23 -22
  7. package/esm/components/popover-container/popover-container.component.js +26 -5
  8. package/esm/components/popover-container/popover-container.style.d.ts +0 -2
  9. package/esm/components/popover-container/popover-container.style.js +0 -8
  10. package/esm/components/search/search.style.js +22 -8
  11. package/esm/components/select/multi-select/multi-select.component.js +7 -2
  12. package/esm/components/select/multi-select/multi-select.d.ts +2 -0
  13. package/esm/components/select/multi-select/multi-select.style.js +1 -0
  14. package/lib/components/pill/index.d.ts +2 -1
  15. package/lib/components/pill/pill.component.d.ts +22 -0
  16. package/lib/components/pill/pill.component.js +220 -46
  17. package/lib/components/pill/pill.style.config.d.ts +18 -0
  18. package/lib/components/pill/pill.style.d.ts +22 -0
  19. package/lib/components/pill/pill.style.js +23 -23
  20. package/lib/components/popover-container/popover-container.component.js +27 -5
  21. package/lib/components/popover-container/popover-container.style.d.ts +0 -2
  22. package/lib/components/popover-container/popover-container.style.js +0 -8
  23. package/lib/components/search/search.style.js +22 -8
  24. package/lib/components/select/multi-select/multi-select.component.js +7 -2
  25. package/lib/components/select/multi-select/multi-select.d.ts +2 -0
  26. package/lib/components/select/multi-select/multi-select.style.js +1 -0
  27. package/package.json +4 -4
  28. package/esm/components/pill/pill.d.ts +0 -24
  29. package/lib/components/pill/pill.d.ts +0 -24
package/lib/components/pill/pill.component.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import React from "react";
2
+ import { StyledPillProps } from "./pill.style";
3
+ export interface PillProps extends StyledPillProps {
4
+ /** The content to display inside of the pill. */
5
+ children: string;
6
+ /** Change the color of a status pill. */
7
+ colorVariant?: "neutral" | "negative" | "positive" | "warning";
8
+ /** Identifier used for testing purposes, applied to the root element of the component. */
9
+ "data-element"?: string;
10
+ /** Identifier used for testing purposes, applied to the root element of the component. */
11
+ "data-role"?: string;
12
+ /** Fills the pill background with colour. When fill is false only the border is coloured. */
13
+ fill?: boolean;
14
+ /** Callback function for when the pill is clicked. */
15
+ onClick?: React.MouseEventHandler<HTMLSpanElement>;
16
+ /** Callback function for when the remove icon is clicked. */
17
+ onDelete?: React.MouseEventHandler<HTMLButtonElement>;
18
+ /** Sets the type of pill in use. */
19
+ pillRole?: "tag" | "status";
20
+ }
21
+ export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ...rest }: PillProps) => JSX.Element;
22
+ export default Pill;
package/lib/components/pill/pill.component.js CHANGED
@@ -3,14 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
6
+ exports.default = exports.Pill = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
- var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
13
-
14
12
  var _pill = _interopRequireDefault(require("./pill.style"));
15
13
 
16
14
  var _icon = _interopRequireDefault(require("../icon"));
@@ -19,14 +17,10 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
19
17
 
20
18
  var _iconButton = _interopRequireDefault(require("../icon-button"));
21
19
 
22
- var _utils = require("../../style/utils");
23
-
24
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
21
 
26
22
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
23
 
28
- const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
29
-
30
24
  const renderCloseIcon = onDelete => /*#__PURE__*/_react.default.createElement(_iconButton.default, {
31
25
  onAction: onDelete,
32
26
  "data-element": "close",
@@ -36,58 +30,238 @@ const renderCloseIcon = onDelete => /*#__PURE__*/_react.default.createElement(_i
36
30
  }));
37
31
 
38
32
  const Pill = ({
39
- fill,
40
- onDelete,
41
- colorVariant,
33
+ wrapText,
42
34
  borderColor,
43
- pillRole,
35
+ colorVariant = "neutral",
44
36
  children,
45
- size,
37
+ fill = false,
38
+ maxWidth,
46
39
  onClick,
40
+ onDelete,
41
+ pillRole = "tag",
42
+ size = "M",
47
43
  ...rest
48
44
  }) => /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
49
45
  inFill: fill,
50
46
  colorVariant: colorVariant,
51
- isDeletable: onDelete,
47
+ isDeletable: !!onDelete,
52
48
  pillRole: pillRole,
53
49
  size: size,
54
50
  borderColor: borderColor,
55
51
  onClick: onClick
56
- }, (0, _tags.default)("pill", rest), rest), children, onDelete && renderCloseIcon(onDelete));
52
+ }, (0, _tags.default)("pill", rest), {
53
+ maxWidth: maxWidth,
54
+ wrapText: wrapText
55
+ }, rest), children, onDelete && renderCloseIcon(onDelete));
57
56
 
57
+ exports.Pill = Pill;
58
58
  Pill.propTypes = {
59
- /** Filtered styled system margin props */
60
- ...marginPropTypes,
61
-
62
- /** Change the color of a status pill. */
63
- colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
64
-
65
- /** Override color variant, provide design token, any color from palette or any valid css color value. */
66
- borderColor: _propTypes.default.string,
67
-
68
- /** The content to display inside of the pill. */
69
- children: _propTypes.default.string.isRequired,
70
-
71
- /** Fills the pill background with colour. When fill is false only the border is coloured. */
72
- fill: _propTypes.default.bool,
73
-
74
- /** Sets the type of pill in use. */
75
- pillRole: _propTypes.default.oneOf(["tag", "status"]),
76
-
77
- /** Callback function for when the pill is clicked. */
78
- onClick: _propTypes.default.func,
79
-
80
- /** Callback function for when the remove icon is clicked. */
81
- onDelete: _propTypes.default.func,
82
- size: _propTypes.default.oneOf(["S", "M", "L", "XL"])
83
- };
84
- Pill.defaultProps = {
85
- colorVariant: "neutral",
86
- fill: false,
87
- onClick: null,
88
- onDelete: null,
89
- pillRole: "tag",
90
- size: "M"
59
+ "borderColor": _propTypes.default.string,
60
+ "children": _propTypes.default.string.isRequired,
61
+ "colorVariant": _propTypes.default.oneOf(["negative", "neutral", "positive", "warning"]),
62
+ "data-element": _propTypes.default.string,
63
+ "data-role": _propTypes.default.string,
64
+ "fill": _propTypes.default.bool,
65
+ "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
66
+ "__@toStringTag": _propTypes.default.string.isRequired,
67
+ "description": _propTypes.default.string,
68
+ "toString": _propTypes.default.func.isRequired,
69
+ "valueOf": _propTypes.default.func.isRequired
70
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
71
+ "__@toStringTag": _propTypes.default.string.isRequired,
72
+ "description": _propTypes.default.string,
73
+ "toString": _propTypes.default.func.isRequired,
74
+ "valueOf": _propTypes.default.func.isRequired
75
+ }), _propTypes.default.string]),
76
+ "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
77
+ "__@toStringTag": _propTypes.default.string.isRequired,
78
+ "description": _propTypes.default.string,
79
+ "toString": _propTypes.default.func.isRequired,
80
+ "valueOf": _propTypes.default.func.isRequired
81
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
82
+ "__@toStringTag": _propTypes.default.string.isRequired,
83
+ "description": _propTypes.default.string,
84
+ "toString": _propTypes.default.func.isRequired,
85
+ "valueOf": _propTypes.default.func.isRequired
86
+ }), _propTypes.default.string]),
87
+ "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
88
+ "__@toStringTag": _propTypes.default.string.isRequired,
89
+ "description": _propTypes.default.string,
90
+ "toString": _propTypes.default.func.isRequired,
91
+ "valueOf": _propTypes.default.func.isRequired
92
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
93
+ "__@toStringTag": _propTypes.default.string.isRequired,
94
+ "description": _propTypes.default.string,
95
+ "toString": _propTypes.default.func.isRequired,
96
+ "valueOf": _propTypes.default.func.isRequired
97
+ }), _propTypes.default.string]),
98
+ "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
99
+ "__@toStringTag": _propTypes.default.string.isRequired,
100
+ "description": _propTypes.default.string,
101
+ "toString": _propTypes.default.func.isRequired,
102
+ "valueOf": _propTypes.default.func.isRequired
103
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
104
+ "__@toStringTag": _propTypes.default.string.isRequired,
105
+ "description": _propTypes.default.string,
106
+ "toString": _propTypes.default.func.isRequired,
107
+ "valueOf": _propTypes.default.func.isRequired
108
+ }), _propTypes.default.string]),
109
+ "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
110
+ "__@toStringTag": _propTypes.default.string.isRequired,
111
+ "description": _propTypes.default.string,
112
+ "toString": _propTypes.default.func.isRequired,
113
+ "valueOf": _propTypes.default.func.isRequired
114
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
115
+ "__@toStringTag": _propTypes.default.string.isRequired,
116
+ "description": _propTypes.default.string,
117
+ "toString": _propTypes.default.func.isRequired,
118
+ "valueOf": _propTypes.default.func.isRequired
119
+ }), _propTypes.default.string]),
120
+ "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
121
+ "__@toStringTag": _propTypes.default.string.isRequired,
122
+ "description": _propTypes.default.string,
123
+ "toString": _propTypes.default.func.isRequired,
124
+ "valueOf": _propTypes.default.func.isRequired
125
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
126
+ "__@toStringTag": _propTypes.default.string.isRequired,
127
+ "description": _propTypes.default.string,
128
+ "toString": _propTypes.default.func.isRequired,
129
+ "valueOf": _propTypes.default.func.isRequired
130
+ }), _propTypes.default.string]),
131
+ "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
132
+ "__@toStringTag": _propTypes.default.string.isRequired,
133
+ "description": _propTypes.default.string,
134
+ "toString": _propTypes.default.func.isRequired,
135
+ "valueOf": _propTypes.default.func.isRequired
136
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
137
+ "__@toStringTag": _propTypes.default.string.isRequired,
138
+ "description": _propTypes.default.string,
139
+ "toString": _propTypes.default.func.isRequired,
140
+ "valueOf": _propTypes.default.func.isRequired
141
+ }), _propTypes.default.string]),
142
+ "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
143
+ "__@toStringTag": _propTypes.default.string.isRequired,
144
+ "description": _propTypes.default.string,
145
+ "toString": _propTypes.default.func.isRequired,
146
+ "valueOf": _propTypes.default.func.isRequired
147
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
148
+ "__@toStringTag": _propTypes.default.string.isRequired,
149
+ "description": _propTypes.default.string,
150
+ "toString": _propTypes.default.func.isRequired,
151
+ "valueOf": _propTypes.default.func.isRequired
152
+ }), _propTypes.default.string]),
153
+ "maxWidth": _propTypes.default.string,
154
+ "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
155
+ "__@toStringTag": _propTypes.default.string.isRequired,
156
+ "description": _propTypes.default.string,
157
+ "toString": _propTypes.default.func.isRequired,
158
+ "valueOf": _propTypes.default.func.isRequired
159
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
160
+ "__@toStringTag": _propTypes.default.string.isRequired,
161
+ "description": _propTypes.default.string,
162
+ "toString": _propTypes.default.func.isRequired,
163
+ "valueOf": _propTypes.default.func.isRequired
164
+ }), _propTypes.default.string]),
165
+ "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
166
+ "__@toStringTag": _propTypes.default.string.isRequired,
167
+ "description": _propTypes.default.string,
168
+ "toString": _propTypes.default.func.isRequired,
169
+ "valueOf": _propTypes.default.func.isRequired
170
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
171
+ "__@toStringTag": _propTypes.default.string.isRequired,
172
+ "description": _propTypes.default.string,
173
+ "toString": _propTypes.default.func.isRequired,
174
+ "valueOf": _propTypes.default.func.isRequired
175
+ }), _propTypes.default.string]),
176
+ "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
177
+ "__@toStringTag": _propTypes.default.string.isRequired,
178
+ "description": _propTypes.default.string,
179
+ "toString": _propTypes.default.func.isRequired,
180
+ "valueOf": _propTypes.default.func.isRequired
181
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
182
+ "__@toStringTag": _propTypes.default.string.isRequired,
183
+ "description": _propTypes.default.string,
184
+ "toString": _propTypes.default.func.isRequired,
185
+ "valueOf": _propTypes.default.func.isRequired
186
+ }), _propTypes.default.string]),
187
+ "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
188
+ "__@toStringTag": _propTypes.default.string.isRequired,
189
+ "description": _propTypes.default.string,
190
+ "toString": _propTypes.default.func.isRequired,
191
+ "valueOf": _propTypes.default.func.isRequired
192
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
193
+ "__@toStringTag": _propTypes.default.string.isRequired,
194
+ "description": _propTypes.default.string,
195
+ "toString": _propTypes.default.func.isRequired,
196
+ "valueOf": _propTypes.default.func.isRequired
197
+ }), _propTypes.default.string]),
198
+ "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
199
+ "__@toStringTag": _propTypes.default.string.isRequired,
200
+ "description": _propTypes.default.string,
201
+ "toString": _propTypes.default.func.isRequired,
202
+ "valueOf": _propTypes.default.func.isRequired
203
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
204
+ "__@toStringTag": _propTypes.default.string.isRequired,
205
+ "description": _propTypes.default.string,
206
+ "toString": _propTypes.default.func.isRequired,
207
+ "valueOf": _propTypes.default.func.isRequired
208
+ }), _propTypes.default.string]),
209
+ "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
210
+ "__@toStringTag": _propTypes.default.string.isRequired,
211
+ "description": _propTypes.default.string,
212
+ "toString": _propTypes.default.func.isRequired,
213
+ "valueOf": _propTypes.default.func.isRequired
214
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
215
+ "__@toStringTag": _propTypes.default.string.isRequired,
216
+ "description": _propTypes.default.string,
217
+ "toString": _propTypes.default.func.isRequired,
218
+ "valueOf": _propTypes.default.func.isRequired
219
+ }), _propTypes.default.string]),
220
+ "onClick": _propTypes.default.func,
221
+ "onDelete": _propTypes.default.func,
222
+ "pillRole": _propTypes.default.oneOf(["status", "tag"]),
223
+ "size": _propTypes.default.oneOf(["L", "M", "S", "XL"]),
224
+ "theme": _propTypes.default.shape({
225
+ "colors": _propTypes.default.shape({
226
+ "destructive": _propTypes.default.shape({
227
+ "hover": _propTypes.default.string.isRequired
228
+ }),
229
+ "error": _propTypes.default.string,
230
+ "focus": _propTypes.default.string,
231
+ "info": _propTypes.default.string,
232
+ "loadingBarBackground": _propTypes.default.string,
233
+ "placeholder": _propTypes.default.string,
234
+ "primary": _propTypes.default.string,
235
+ "secondary": _propTypes.default.string,
236
+ "tertiary": _propTypes.default.string,
237
+ "warning": _propTypes.default.string,
238
+ "warningText": _propTypes.default.string,
239
+ "white": _propTypes.default.oneOf(["#FFFFFF"])
240
+ }),
241
+ "compatibility": _propTypes.default.object,
242
+ "disabled": _propTypes.default.shape({
243
+ "background": _propTypes.default.string.isRequired
244
+ }),
245
+ "name": _propTypes.default.string,
246
+ "palette": _propTypes.default.shape({
247
+ "blackOpacity": _propTypes.default.func.isRequired,
248
+ "whiteOpacity": _propTypes.default.func.isRequired
249
+ }),
250
+ "space": _propTypes.default.arrayOf(_propTypes.default.string),
251
+ "spacing": _propTypes.default.number,
252
+ "zIndex": _propTypes.default.shape({
253
+ "aboveAll": _propTypes.default.number.isRequired,
254
+ "fullScreenModal": _propTypes.default.number.isRequired,
255
+ "header": _propTypes.default.number.isRequired,
256
+ "modal": _propTypes.default.number.isRequired,
257
+ "nav": _propTypes.default.number.isRequired,
258
+ "notification": _propTypes.default.number.isRequired,
259
+ "overlay": _propTypes.default.number.isRequired,
260
+ "popover": _propTypes.default.number.isRequired,
261
+ "smallOverlay": _propTypes.default.number.isRequired
262
+ })
263
+ }),
264
+ "wrapText": _propTypes.default.bool
91
265
  };
92
266
  var _default = Pill;
93
267
  exports.default = _default;
package/lib/components/pill/pill.style.config.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ interface StyledPillInnerConfigProps {
2
+ varietyColor: string;
3
+ buttonFocus: string;
4
+ content: string;
5
+ }
6
+ interface StyledPillConfig {
7
+ status: {
8
+ neutral: StyledPillInnerConfigProps;
9
+ negative: StyledPillInnerConfigProps;
10
+ warning: StyledPillInnerConfigProps;
11
+ positive: StyledPillInnerConfigProps;
12
+ };
13
+ tag: {
14
+ primary: StyledPillInnerConfigProps;
15
+ };
16
+ }
17
+ declare const _default: () => StyledPillConfig;
18
+ export default _default;
package/lib/components/pill/pill.style.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { MarginProps } from "styled-system";
2
+ import { ThemeObject } from "../../style/themes/base/base-theme.config";
3
+ export interface StyledPillProps extends MarginProps {
4
+ /** Override color variant, provide any color from palette or any valid css color value. */
5
+ borderColor?: string;
6
+ /** Sets the max-width of the pill. */
7
+ maxWidth?: string;
8
+ /** Sets the size of the pill. */
9
+ size?: "S" | "M" | "L" | "XL";
10
+ /** @private @ignore */
11
+ theme?: Partial<ThemeObject>;
12
+ /** Allow the text within pill to wrap. */
13
+ wrapText?: boolean;
14
+ }
15
+ interface AllStyledPillProps extends StyledPillProps {
16
+ inFill?: boolean;
17
+ isDeletable: boolean;
18
+ colorVariant: "neutral" | "negative" | "positive" | "warning";
19
+ pillRole: "tag" | "status";
20
+ }
21
+ declare const StyledPill: import("styled-components").StyledComponent<"span", any, AllStyledPillProps, never>;
22
+ export default StyledPill;
package/lib/components/pill/pill.style.js CHANGED
@@ -7,8 +7,6 @@ exports.default = void 0;
7
7
 
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
 
10
- var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
10
  var _polished = require("polished");
13
11
 
14
12
  var _styledSystem = require("styled-system");
@@ -39,19 +37,20 @@ function addStyleToPillIcon(fontSize) {
39
37
  `;
40
38
  }
41
39
 
42
- const PillStyle = _styledComponents.default.span`
43
- ${_styledSystem.margin};
40
+ const StyledPill = _styledComponents.default.span`
41
+ ${_styledSystem.margin}
44
42
  ${({
45
- colorVariant,
43
+ wrapText,
46
44
  borderColor,
47
- theme,
48
- inFill,
45
+ colorVariant,
49
46
  isDeletable,
47
+ inFill,
48
+ maxWidth,
50
49
  pillRole,
51
- size
50
+ size,
51
+ theme
52
52
  }) => {
53
53
  const isStatus = pillRole === "status";
54
- const variety = isStatus ? colorVariant : "primary";
55
54
  let pillColor;
56
55
  let buttonFocusColor;
57
56
  let contentColor;
@@ -62,11 +61,15 @@ const PillStyle = _styledComponents.default.span`
62
61
  buttonFocusColor = (0, _polished.shade)(0.2, (0, _getColorValue.default)(pillColor));
63
62
  contentColor = (0, _polished.meetsContrastGuidelines)((0, _getColorValue.default)(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
64
63
  } else {
64
+ const {
65
+ status,
66
+ tag
67
+ } = (0, _pillStyle.default)();
65
68
  const {
66
69
  varietyColor,
67
70
  buttonFocus,
68
71
  content
69
- } = (0, _pillStyle.default)(theme)[pillRole][variety];
72
+ } = isStatus ? status[colorVariant] : tag.primary;
70
73
  pillColor = varietyColor;
71
74
  buttonFocusColor = buttonFocus;
72
75
  contentColor = content;
@@ -88,7 +91,13 @@ const PillStyle = _styledComponents.default.span`
88
91
  justify-content: center;
89
92
  border: 2px solid ${pillColor};
90
93
  height: auto;
91
- white-space: nowrap;
94
+ ${!wrapText && (0, _styledComponents.css)`
95
+ white-space: nowrap;
96
+ `}
97
+ ${wrapText && (0, _styledComponents.css)`
98
+ white-space: break-spaces;
99
+ hyphens: auto;
100
+ `}
92
101
  color: ${contentColor};
93
102
 
94
103
  ${inFill && (0, _styledComponents.css)`
@@ -278,23 +287,14 @@ const PillStyle = _styledComponents.default.span`
278
287
  }
279
288
  `}
280
289
  `}
290
+ ${maxWidth && `max-width: ${maxWidth}`}
281
291
  `;
282
292
  }}
283
293
  `;
284
- PillStyle.defaultProps = {
294
+ StyledPill.defaultProps = {
285
295
  inFill: false,
286
- colorVariant: "default",
287
296
  isDeletable: false,
288
297
  theme: _themes.baseTheme
289
298
  };
290
- PillStyle.propTypes = {
291
- inFill: _propTypes.default.bool,
292
- colorVariant: _propTypes.default.oneOf(["neutral", "negative", "positive", "warning"]),
293
- isDeletable: _propTypes.default.func,
294
- size: _propTypes.default.oneOf(["S", "M", "L", "XL"]),
295
- pillRole: _propTypes.default.oneOf(["tag", "status"]),
296
- borderColor: _propTypes.default.string,
297
- theme: _propTypes.default.object
298
- };
299
- var _default = PillStyle;
299
+ var _default = StyledPill;
300
300
  exports.default = _default;
package/lib/components/popover-container/popover-container.component.js CHANGED
@@ -15,6 +15,8 @@ var _popoverContainer = require("./popover-container.style");
15
15
 
16
16
  var _icon = _interopRequireDefault(require("../icon"));
17
17
 
18
+ var _popover = _interopRequireDefault(require("../../__internal__/popover"));
19
+
18
20
  var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
19
21
 
20
22
  var _utils = require("../../style/utils");
@@ -80,6 +82,19 @@ renderClose.propTypes = {
80
82
  "tabIndex": _propTypes.default.number.isRequired
81
83
  };
82
84
 
85
+ const offset = ({
86
+ reference
87
+ }) => {
88
+ return [0, -reference.height];
89
+ };
90
+
91
+ const popperModifiers = [{
92
+ name: "offset",
93
+ options: {
94
+ offset
95
+ }
96
+ }];
97
+
83
98
  const PopoverContainer = ({
84
99
  children,
85
100
  title,
@@ -106,7 +121,11 @@ const PopoverContainer = ({
106
121
  const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
107
122
  const isOpen = isControlled ? open : isOpenInternal;
108
123
  (0, _react.useEffect)(() => {
109
- if (isOpen && closeButtonRef.current) closeButtonRef.current.focus();
124
+ if (isOpen && closeButtonRef.current) setTimeout(() => {
125
+ var _closeButtonRef$curre;
126
+
127
+ return (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
128
+ }, 0);
110
129
  }, [isOpen]);
111
130
 
112
131
  const handleOpenButtonClick = e => {
@@ -160,12 +179,15 @@ const PopoverContainer = ({
160
179
  mountOnEnter: true,
161
180
  unmountOnExit: true,
162
181
  nodeRef: popoverContentNodeRef
163
- }, state => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
182
+ }, state => isOpen && /*#__PURE__*/_react.default.createElement(_popover.default, _extends({
183
+ reference: openButtonRef,
184
+ placement: position === "right" ? "bottom-start" : "bottom-end"
185
+ }, shouldCoverButton && {
186
+ modifiers: popperModifiers
187
+ }), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
164
188
  "data-element": "popover-container-content",
165
189
  role: "dialog",
166
190
  animationState: state,
167
- position: position,
168
- shouldCoverButton: shouldCoverButton,
169
191
  "aria-labelledby": popoverContainerId,
170
192
  "aria-label": containerAriaLabel,
171
193
  "aria-describedby": ariaDescribedBy,
@@ -174,7 +196,7 @@ const PopoverContainer = ({
174
196
  }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
175
197
  id: popoverContainerId,
176
198
  "data-element": "popover-container-title"
177
- }, title), renderCloseComponent(renderCloseComponentProps)), children)));
199
+ }, title), renderCloseComponent(renderCloseComponentProps)), children))));
178
200
  };
179
201
 
180
202
  exports.PopoverContainer = PopoverContainer;
package/lib/components/popover-container/popover-container.style.d.ts CHANGED
@@ -3,8 +3,6 @@ import IconButton from "../icon-button";
3
3
  declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
4
4
  declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
5
5
  declare type PopoverContainerContentStyleProps = {
6
- shouldCoverButton?: boolean;
7
- position?: "left" | "right";
8
6
  animationState?: TransitionStatus;
9
7
  };
10
8
  declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;
package/lib/components/popover-container/popover-container.style.js CHANGED
@@ -40,14 +40,6 @@ const PopoverContainerContentStyle = _styledComponents.default.div`
40
40
  theme
41
41
  }) => theme.zIndex.popover};
42
42
 
43
- ${({
44
- shouldCoverButton
45
- }) => shouldCoverButton && "top: 0"}
46
-
47
- ${({
48
- position
49
- }) => position === "left" ? "right: 0" : "left: 0"};
50
-
51
43
  ${({
52
44
  animationState
53
45
  }) => {
package/lib/components/search/search.style.js CHANGED
@@ -119,20 +119,34 @@ const StyledSearch = _styledComponents.default.div`
119
119
  z-index: ${theme.zIndex.smallOverlay};
120
120
  }
121
121
  ${_icon.default} {
122
- color: ${iconColor ? "var(--colorsUtilityMajor400)" : "var(--colorsUtilityMajor200)"};
122
+ ${darkVariant && (0, _styledComponents.css)`
123
+ ${iconColor && (0, _styledComponents.css)`
124
+ color: var(--colorsUtilityMajor400);
125
+
126
+ :hover {
127
+ color: var(--colorsUtilityMajor500);
128
+ }
129
+ `}
130
+ ${!iconColor && (0, _styledComponents.css)`
131
+ color: var(--colorsUtilityMajor200);
132
+
133
+ :hover {
134
+ color: var(--colorsUtilityMajor100);
135
+ }
136
+ `}
137
+ `}
138
+
123
139
  ${!darkVariant && (0, _styledComponents.css)`
124
- color: var(--colorsUtilityMajor400);
140
+ color: var(--colorsActionMinor500);
141
+
142
+ :hover {
143
+ color: var(--colorsActionMinor600);
144
+ }
125
145
  `}
126
146
 
127
147
  width: 20px;
128
148
  height: 20px;
129
149
  cursor: pointer;
130
- :hover {
131
- color: ${iconColor ? "var(--colorsUtilityMajor500)" : "var(--colorsUtilityMajor100)"};
132
- ${!darkVariant && (0, _styledComponents.css)`
133
- color: var(--colorsUtilityMajor500);
134
- `}
135
- }
136
150
  }
137
151
 
138
152
  ${_inputIconToggle.default} {
package/lib/components/select/multi-select/multi-select.component.js CHANGED
@@ -70,6 +70,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
70
70
  "data-role": dataRole,
71
71
  listPlacement = "bottom-start",
72
72
  flipEnabled = true,
73
+ wrapPillText = true,
73
74
  ...textboxProps
74
75
  }, inputRef) => {
75
76
  const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -220,7 +221,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
220
221
  return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
221
222
  key: key
222
223
  }, /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
223
- onDelete: canDelete ? () => removeSelectedValue(index) : undefined
224
+ onDelete: canDelete ? () => removeSelectedValue(index) : undefined,
225
+ wrapText: wrapPillText
224
226
  }, pillProps), title));
225
227
  }); // eslint-disable-next-line react-hooks/exhaustive-deps
226
228
  }, [children, disabled, readOnly, selectedValue]);
@@ -530,7 +532,10 @@ MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,
530
532
  listPlacement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
531
533
 
532
534
  /** Use the opposite list placement if the set placement does not fit */
533
- flipEnabled: _propTypes.default.bool
535
+ flipEnabled: _propTypes.default.bool,
536
+
537
+ /** Wraps the pill text when it would overflow the input width */
538
+ wrapPillText: _propTypes.default.bool
534
539
  };
535
540
  MultiSelect.defaultProps = {
536
541
  "data-component": "multiselect"
package/lib/components/select/multi-select/multi-select.d.ts CHANGED
@@ -58,6 +58,8 @@ export interface MultiSelectProps
58
58
  | "left-end";
59
59
  /** Use the opposite list placement if the set placement does not fit */
60
60
  flipEnabled?: bool;
61
+ /** Wraps the pill text when it would overflow the input width */
62
+ wrapPillText?: boolean;
61
63
  }
62
64
 
63
65
  declare function MultiSelect(
package/lib/components/select/multi-select/multi-select.style.js CHANGED
@@ -26,6 +26,7 @@ const StyledSelectPillContainer = _styledComponents.default.div`
26
26
  flex-direction: column;
27
27
  justify-content: center;
28
28
  margin: 3px 2px 3px 0;
29
+ max-width: 100%;
29
30
 
30
31
  && ${_pill.default} {
31
32
  text-overflow: ellipsis;