carbon-react 109.1.2 → 109.2.1

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

@@ -1 +1,2 @@
-export { default } from "./pill";
+export { default } from "./pill.component";
+export type { PillProps } from "./pill.component";

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { StyledPillProps } from "./pill.style";
+export interface PillProps extends StyledPillProps {
+    /** The content to display inside of the pill.  */
+    children: string;
+    /** Change the color of a status pill. */
+    colorVariant?: "neutral" | "negative" | "positive" | "warning";
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /** Fills the pill background with colour. When fill is false only the border is coloured. */
+    fill?: boolean;
+    /** Callback function for when the pill is clicked. */
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    /** Callback function for when the remove icon is clicked. */
+    onDelete?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Sets the type of pill in use. */
+    pillRole?: "tag" | "status";
+}
+export declare const Pill: ({ wrapText, borderColor, colorVariant, children, fill, maxWidth, onClick, onDelete, pillRole, size, ...rest }: PillProps) => JSX.Element;
+export default Pill;

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/search/search.style.js

@@ -97,20 +97,34 @@ const StyledSearch = styled.div`
         z-index: ${theme.zIndex.smallOverlay};
       }
       ${StyledIcon} {
-        color: ${iconColor ? "var(--colorsUtilityMajor400)" : "var(--colorsUtilityMajor200)"};
+        ${darkVariant && css`
+          ${iconColor && css`
+            color: var(--colorsUtilityMajor400);
+
+            :hover {
+              color: var(--colorsUtilityMajor500);
+            }
+          `}
+          ${!iconColor && css`
+            color: var(--colorsUtilityMajor200);
+
+            :hover {
+              color: var(--colorsUtilityMajor100);
+            }
+          `}
+        `}
+
         ${!darkVariant && css`
-          color: var(--colorsUtilityMajor400);
+          color: var(--colorsActionMinor500);
+
+          :hover {
+            color: var(--colorsActionMinor600);
+          }
         `}
 
         width: 20px;
         height: 20px;
         cursor: pointer;
-        :hover {
-          color: ${iconColor ? "var(--colorsUtilityMajor500)" : "var(--colorsUtilityMajor100)"};
-          ${!darkVariant && css`
-            color: var(--colorsUtilityMajor500);
-          `}
-        }
       }
 
       ${StyledInputIconToggle} {

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/components/pill/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./pill";
+export { default } from "./pill.component";
+export type { PillProps } from "./pill.component";