carbon-react 109.1.1 → 109.2.0

package/esm/components/pill/pill.component.js

@@ -2,13 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import StyledPill from "./pill.style";
 import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import IconButton from "../icon-button";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const renderCloseIcon = onDelete => /*#__PURE__*/React.createElement(IconButton, {
   onAction: onDelete,
@@ -19,57 +16,237 @@ const renderCloseIcon = onDelete => /*#__PURE__*/React.createElement(IconButton,
 }));
 
 const Pill = ({
-  fill,
-  onDelete,
-  colorVariant,
+  wrapText,
   borderColor,
-  pillRole,
+  colorVariant = "neutral",
   children,
-  size,
+  fill = false,
+  maxWidth,
   onClick,
+  onDelete,
+  pillRole = "tag",
+  size = "M",
   ...rest
 }) => /*#__PURE__*/React.createElement(StyledPill, _extends({
   inFill: fill,
   colorVariant: colorVariant,
-  isDeletable: onDelete,
+  isDeletable: !!onDelete,
   pillRole: pillRole,
   size: size,
   borderColor: borderColor,
   onClick: onClick
-}, tagComponent("pill", rest), rest), children, onDelete && renderCloseIcon(onDelete));
+}, tagComponent("pill", rest), {
+  maxWidth: maxWidth,
+  wrapText: wrapText
+}, rest), children, onDelete && renderCloseIcon(onDelete));
 
 Pill.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** Change the color of a status pill. */
-  colorVariant: PropTypes.oneOf(["neutral", "negative", "positive", "warning"]),
-
-  /** Override color variant, provide design token, any color from palette or any valid css color value. */
-  borderColor: PropTypes.string,
-
-  /** The content to display inside of the pill.  */
-  children: PropTypes.string.isRequired,
-
-  /** Fills the pill background with colour. When fill is false only the border is coloured. */
-  fill: PropTypes.bool,
-
-  /** Sets the type of pill in use. */
-  pillRole: PropTypes.oneOf(["tag", "status"]),
-
-  /** Callback function for when the pill is clicked. */
-  onClick: PropTypes.func,
-
-  /** Callback function for when the remove icon is clicked. */
-  onDelete: PropTypes.func,
-  size: PropTypes.oneOf(["S", "M", "L", "XL"])
-};
-Pill.defaultProps = {
-  colorVariant: "neutral",
-  fill: false,
-  onClick: null,
-  onDelete: null,
-  pillRole: "tag",
-  size: "M"
+  "borderColor": PropTypes.string,
+  "children": PropTypes.string.isRequired,
+  "colorVariant": PropTypes.oneOf(["negative", "neutral", "positive", "warning"]),
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "fill": PropTypes.bool,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "maxWidth": PropTypes.string,
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "onClick": PropTypes.func,
+  "onDelete": PropTypes.func,
+  "pillRole": PropTypes.oneOf(["status", "tag"]),
+  "size": PropTypes.oneOf(["L", "M", "S", "XL"]),
+  "theme": PropTypes.shape({
+    "colors": PropTypes.shape({
+      "destructive": PropTypes.shape({
+        "hover": PropTypes.string.isRequired
+      }),
+      "error": PropTypes.string,
+      "focus": PropTypes.string,
+      "info": PropTypes.string,
+      "loadingBarBackground": PropTypes.string,
+      "placeholder": PropTypes.string,
+      "primary": PropTypes.string,
+      "secondary": PropTypes.string,
+      "tertiary": PropTypes.string,
+      "warning": PropTypes.string,
+      "warningText": PropTypes.string,
+      "white": PropTypes.oneOf(["#FFFFFF"])
+    }),
+    "compatibility": PropTypes.object,
+    "disabled": PropTypes.shape({
+      "background": PropTypes.string.isRequired
+    }),
+    "name": PropTypes.string,
+    "palette": PropTypes.shape({
+      "blackOpacity": PropTypes.func.isRequired,
+      "whiteOpacity": PropTypes.func.isRequired
+    }),
+    "space": PropTypes.arrayOf(PropTypes.string),
+    "spacing": PropTypes.number,
+    "zIndex": PropTypes.shape({
+      "aboveAll": PropTypes.number.isRequired,
+      "fullScreenModal": PropTypes.number.isRequired,
+      "header": PropTypes.number.isRequired,
+      "modal": PropTypes.number.isRequired,
+      "nav": PropTypes.number.isRequired,
+      "notification": PropTypes.number.isRequired,
+      "overlay": PropTypes.number.isRequired,
+      "popover": PropTypes.number.isRequired,
+      "smallOverlay": PropTypes.number.isRequired
+    })
+  }),
+  "wrapText": PropTypes.bool
 };
+export { Pill };
 export default Pill;

package/esm/components/pill/pill.style.config.d.ts

@@ -0,0 +1,18 @@
+interface StyledPillInnerConfigProps {
+    varietyColor: string;
+    buttonFocus: string;
+    content: string;
+}
+interface StyledPillConfig {
+    status: {
+        neutral: StyledPillInnerConfigProps;
+        negative: StyledPillInnerConfigProps;
+        warning: StyledPillInnerConfigProps;
+        positive: StyledPillInnerConfigProps;
+    };
+    tag: {
+        primary: StyledPillInnerConfigProps;
+    };
+}
+declare const _default: () => StyledPillConfig;
+export default _default;

package/esm/components/pill/pill.style.d.ts

@@ -0,0 +1,22 @@
+import { MarginProps } from "styled-system";
+import { ThemeObject } from "../../style/themes/base/base-theme.config";
+export interface StyledPillProps extends MarginProps {
+    /** Override color variant, provide any color from palette or any valid css color value. */
+    borderColor?: string;
+    /** Sets the max-width of the pill. */
+    maxWidth?: string;
+    /** Sets the size of the pill. */
+    size?: "S" | "M" | "L" | "XL";
+    /** @private @ignore */
+    theme?: Partial<ThemeObject>;
+    /** Allow the text within pill to wrap. */
+    wrapText?: boolean;
+}
+interface AllStyledPillProps extends StyledPillProps {
+    inFill?: boolean;
+    isDeletable: boolean;
+    colorVariant: "neutral" | "negative" | "positive" | "warning";
+    pillRole: "tag" | "status";
+}
+declare const StyledPill: import("styled-components").StyledComponent<"span", any, AllStyledPillProps, never>;
+export default StyledPill;

package/esm/components/pill/pill.style.js

@@ -1,5 +1,4 @@
 import styled, { css } from "styled-components";
-import PropTypes from "prop-types";
 import { shade, meetsContrastGuidelines } from "polished";
 import { margin } from "styled-system";
 import styleConfig from "./pill.style.config";
@@ -18,19 +17,20 @@ function addStyleToPillIcon(fontSize) {
   `;
 }
 
-const PillStyle = styled.span`
-  ${margin};
+const StyledPill = styled.span`
+  ${margin}
   ${({
-  colorVariant,
+  wrapText,
   borderColor,
-  theme,
-  inFill,
+  colorVariant,
   isDeletable,
+  inFill,
+  maxWidth,
   pillRole,
-  size
+  size,
+  theme
 }) => {
   const isStatus = pillRole === "status";
-  const variety = isStatus ? colorVariant : "primary";
   let pillColor;
   let buttonFocusColor;
   let contentColor;
@@ -41,11 +41,15 @@ const PillStyle = styled.span`
       buttonFocusColor = shade(0.2, getColorValue(pillColor));
       contentColor = meetsContrastGuidelines(getColorValue(pillColor), theme.compatibility.colorsUtilityYin090).AAA ? "var(--colorsUtilityYin090)" : "var(--colorsUtilityYang100)";
     } else {
+      const {
+        status,
+        tag
+      } = styleConfig();
       const {
         varietyColor,
         buttonFocus,
         content
-      } = styleConfig(theme)[pillRole][variety];
+      } = isStatus ? status[colorVariant] : tag.primary;
       pillColor = varietyColor;
       buttonFocusColor = buttonFocus;
       contentColor = content;
@@ -67,7 +71,13 @@ const PillStyle = styled.span`
       justify-content: center;
       border: 2px solid ${pillColor};
       height: auto;
-      white-space: nowrap;
+      ${!wrapText && css`
+        white-space: nowrap;
+      `}
+      ${wrapText && css`
+        white-space: break-spaces;
+        hyphens: auto;
+      `}
       color: ${contentColor};
 
       ${inFill && css`
@@ -257,22 +267,13 @@ const PillStyle = styled.span`
           }
         `}
       `}
+      ${maxWidth && `max-width: ${maxWidth}`}
     `;
 }}
 `;
-PillStyle.defaultProps = {
+StyledPill.defaultProps = {
   inFill: false,
-  colorVariant: "default",
   isDeletable: false,
   theme: baseTheme
 };
-PillStyle.propTypes = {
-  inFill: PropTypes.bool,
-  colorVariant: PropTypes.oneOf(["neutral", "negative", "positive", "warning"]),
-  isDeletable: PropTypes.func,
-  size: PropTypes.oneOf(["S", "M", "L", "XL"]),
-  pillRole: PropTypes.oneOf(["tag", "status"]),
-  borderColor: PropTypes.string,
-  theme: PropTypes.object
-};
-export default PillStyle;
+export default StyledPill;

package/esm/components/popover-container/popover-container.component.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import { Transition } from "react-transition-group";
 import { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverContainerContentStyle, PopoverContainerCloseIcon, PopoverContainerTitleStyle, PopoverContainerOpenIcon } from "./popover-container.style";
 import Icon from "../icon";
+import Popover from "../../__internal__/popover";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
@@ -60,6 +61,19 @@ renderClose.propTypes = {
   "tabIndex": PropTypes.number.isRequired
 };
 
+const offset = ({
+  reference
+}) => {
+  return [0, -reference.height];
+};
+
+const popperModifiers = [{
+  name: "offset",
+  options: {
+    offset
+  }
+}];
+
 const PopoverContainer = ({
   children,
   title,
@@ -86,7 +100,11 @@ const PopoverContainer = ({
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   useEffect(() => {
-    if (isOpen && closeButtonRef.current) closeButtonRef.current.focus();
+    if (isOpen && closeButtonRef.current) setTimeout(() => {
+      var _closeButtonRef$curre;
+
+      return (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 ? void 0 : _closeButtonRef$curre.focus();
+    }, 0);
   }, [isOpen]);
 
   const handleOpenButtonClick = e => {
@@ -140,12 +158,15 @@ const PopoverContainer = ({
     mountOnEnter: true,
     unmountOnExit: true,
     nodeRef: popoverContentNodeRef
-  }, state => /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
+  }, state => isOpen && /*#__PURE__*/React.createElement(Popover, _extends({
+    reference: openButtonRef,
+    placement: position === "right" ? "bottom-start" : "bottom-end"
+  }, shouldCoverButton && {
+    modifiers: popperModifiers
+  }), /*#__PURE__*/React.createElement(PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
     animationState: state,
-    position: position,
-    shouldCoverButton: shouldCoverButton,
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
@@ -154,7 +175,7 @@ const PopoverContainer = ({
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
+  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
 };
 
 PopoverContainer.propTypes = {

package/esm/components/popover-container/popover-container.style.d.ts

@@ -3,8 +3,6 @@ import IconButton from "../icon-button";
 declare const PopoverContainerWrapperStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const PopoverContainerHeaderStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type PopoverContainerContentStyleProps = {
-    shouldCoverButton?: boolean;
-    position?: "left" | "right";
     animationState?: TransitionStatus;
 };
 declare const PopoverContainerContentStyle: import("styled-components").StyledComponent<"div", any, PopoverContainerContentStyleProps, never>;

package/esm/components/popover-container/popover-container.style.js

@@ -24,14 +24,6 @@ const PopoverContainerContentStyle = styled.div`
   theme
 }) => theme.zIndex.popover};
 
-  ${({
-  shouldCoverButton
-}) => shouldCoverButton && "top: 0"}
-
-  ${({
-  position
-}) => position === "left" ? "right: 0" : "left: 0"};
-
   ${({
   animationState
 }) => {

package/esm/components/select/multi-select/multi-select.component.js

@@ -43,6 +43,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   "data-role": dataRole,
   listPlacement = "bottom-start",
   flipEnabled = true,
+  wrapPillText = true,
   ...textboxProps
 }, inputRef) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -192,7 +193,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return /*#__PURE__*/React.createElement(StyledSelectPillContainer, {
         key: key
       }, /*#__PURE__*/React.createElement(Pill, _extends({
-        onDelete: canDelete ? () => removeSelectedValue(index) : undefined
+        onDelete: canDelete ? () => removeSelectedValue(index) : undefined,
+        wrapText: wrapPillText
       }, pillProps), title));
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, selectedValue]);
@@ -500,7 +502,10 @@ MultiSelect.propTypes = { ...formInputPropTypes,
   listPlacement: PropTypes.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"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: PropTypes.bool
+  flipEnabled: PropTypes.bool,
+
+  /** Wraps the pill text when it would overflow the input width */
+  wrapPillText: PropTypes.bool
 };
 MultiSelect.defaultProps = {
   "data-component": "multiselect"

package/esm/components/select/multi-select/multi-select.d.ts

@@ -58,6 +58,8 @@ export interface MultiSelectProps
     | "left-end";
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: bool;
+  /** Wraps the pill text when it would overflow the input width */
+  wrapPillText?: boolean;
 }
 
 declare function MultiSelect(

package/esm/components/select/multi-select/multi-select.style.js

@@ -10,6 +10,7 @@ const StyledSelectPillContainer = styled.div`
   flex-direction: column;
   justify-content: center;
   margin: 3px 2px 3px 0;
+  max-width: 100%;
 
   && ${StyledPill} {
     text-overflow: ellipsis;

package/lib/__internal__/label/label.component.d.ts

@@ -10,7 +10,7 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     /** Icon type */
     helpIcon?: IconType;
     /** Overrides the default tabindex of the Help component */
-    helpTabIndex?: string;
+    helpTabIndex?: number | string;
     /** A string that represents the ID of another form element */
     htmlFor?: string;
     /** The unique id of the label element */

package/lib/__internal__/label/label.component.js

@@ -117,7 +117,7 @@ const Label = ({
 
     return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, wrapperProps, /*#__PURE__*/_react.default.createElement(_help.default, {
       tooltipId: tooltipId,
-      tabIndex: helpTabIndex,
+      tabIndex: Number(helpTabIndex),
       type: helpIcon,
       isFocused: isFocused
     }, help));
@@ -149,7 +149,7 @@ Label.propTypes = {
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "help": _propTypes.default.node,
   "helpIcon": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
-  "helpTabIndex": _propTypes.default.string,
+  "helpTabIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "htmlFor": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inline": _propTypes.default.bool,

package/lib/components/checkbox/checkbox-group.component.js

@@ -34,7 +34,6 @@ exports.CheckboxGroupContext = CheckboxGroupContext;
 const CheckboxGroup = props => {
   const {
     children,
-    groupName,
     legend,
     error,
     warning,
@@ -65,7 +64,6 @@ const CheckboxGroup = props => {
     legendInline: legendInline
   }, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
     value: {
-      inputName: groupName,
       error: !!error,
       warning: !!warning,
       info: !!info
@@ -95,9 +93,6 @@ CheckboxGroup.propTypes = {
   /** The Checkboxes to be rendered in the group */
   children: _propTypes.default.node.isRequired,
 
-  /** Specifies the name prop to be applied to each button in the group */
-  groupName: _propTypes.default.string.isRequired,
-
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */

package/lib/components/checkbox/checkbox-group.d.ts

@@ -15,8 +15,6 @@ interface CheckboxGroupProps extends ValidationProps, MarginProps {
   legendSpacing?: 1 | 2;
   /** The Checkboxes to be rendered in the group */
   children: React.ReactNode;
-  /** Specifies the name prop to be applied to each button in the group */
-  groupName: string;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing?: 1 | 2;
   /** Flag to configure component as mandatory */

package/lib/components/checkbox/checkbox.component.js

@@ -74,8 +74,7 @@ const Checkbox = ({
   const {
     error: contextError,
     warning: contextWarning,
-    info: contextInfo,
-    inputName
+    info: contextInfo
   } = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
   const inputProps = {
     onClick,
@@ -103,7 +102,6 @@ const Checkbox = ({
     inputWidth,
     labelWidth,
     tooltipPosition,
-    inputName,
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {