carbon-react 104.12.0 → 104.14.0

package/lib/__internal__/popover/index.d.ts

@@ -1 +1 @@
-export { default } from "./popover.component";
+export { default } from "./popover";

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

@@ -1,16 +1,18 @@
 export default Popover;
-declare function Popover({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, }: {
+declare function Popover({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: {
     children: any;
     placement: any;
     disablePortal: any;
     reference: any;
     onFirstUpdate: any;
     modifiers: any;
+    disableBackgroundUI: any;
 }): any;
 declare namespace Popover {
     namespace propTypes {
         const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         const placement: PropTypes.Requireable<string>;
+        const disableBackgroundUI: PropTypes.Requireable<boolean>;
         const modifiers: PropTypes.Requireable<any[]>;
         const onFirstUpdate: PropTypes.Requireable<(...args: any[]) => any>;
         const disablePortal: PropTypes.Requireable<boolean>;

package/lib/__internal__/popover/popover.component.js

@@ -15,6 +15,8 @@ var _core = require("@popperjs/core");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
+var _popover = _interopRequireDefault(require("./popover.style"));
+
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,7 +31,8 @@ const Popover = ({
   disablePortal,
   reference,
   onFirstUpdate,
-  modifiers
+  modifiers,
+  disableBackgroundUI
 }) => {
   const elementDOM = (0, _react.useRef)();
 
@@ -90,6 +93,10 @@ const Popover = ({
     };
   }, [disablePortal]);
 
+  if (disableBackgroundUI) {
+    content = /*#__PURE__*/_react.default.createElement(_popover.default, null, content);
+  }
+
   if (disablePortal) {
     return content;
   }
@@ -102,11 +109,13 @@ Popover.propTypes = {
   children: _propTypes.default.node.isRequired,
   // Placement of children in relation to the reference element
   placement: _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"]),
+  // Disables interaction with background UI
+  disableBackgroundUI: _propTypes.default.bool,
   // Optional modifiers array, for more information and object structure go to:
   // https://popper.js.org/docs/v2/constructors/#modifiers
   modifiers: _propTypes.default.array,
-  // Optional onFirstUpdate funcition, for more information go to:
-  // https://popper.js.org/docs/v2/constructors/#modifiers
+  // Optional onFirstUpdate function, for more information go to:
+  // https://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle
   onFirstUpdate: _propTypes.default.func,
   // When true, children are not rendered in portal
   disablePortal: _propTypes.default.bool,

package/lib/__internal__/popover/popover.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { State } from "@popperjs/core";
+
+type PopoverModifier = {
+  name: string;
+  options?: Record<string, unknown>;
+  enabled?: boolean;
+};
+
+export interface PopoverPropTypes {
+  // Element to be positioned, has to be a single node and has to accept `ref` and `style` props
+  children: React.ReactNode;
+  // Placement of children in relation to the reference element
+  placement?:
+    | "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";
+  // Disables interaction with background UI
+  disableBackgroundUI?: boolean;
+  // Optional modifiers array, for more information and object structure go to:
+  // https://popper.js.org/docs/v2/constructors/#modifiers
+  modifiers?: PopoverModifier[];
+  // Optional onFirstUpdate function, for more information go to:
+  // hhttps://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle
+  onFirstUpdate?: (state: State) => void;
+  // When true, children are not rendered in portal
+  disablePortal?: boolean;
+  // Reference element, children will be positioned in relation to this element - should be a ref
+  reference?: React.RefObject<HTMLElement>;
+}
+
+declare function Popover(props: PopoverPropTypes): JSX.Element;
+
+export default Popover;

package/lib/__internal__/popover/popover.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledBackdrop;
+declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/__internal__/popover/popover.style.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledBackdrop = _styledComponents.default.div`
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  background: transparent;
+`;
+StyledBackdrop.defaultProps = {
+  theme: _base.default
+};
+var _default = StyledBackdrop;
+exports.default = _default;

package/lib/components/button-toggle/button-toggle.style.js

@@ -9,8 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -63,41 +61,35 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
     padding: 0 ${paddingConfig[size]}px;
     font-size: ${fontSizeConfig[size]}px;
   `}
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
 
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-    border: 1px solid ${theme.colors.border};
-    background-color: ${theme.colors.white};
+  border: 1px solid var(--colorsActionMinor500);
 
-    ${_icon.default} {
-      color: ${theme.colors.black};
-    }
+  ${_icon.default} {
+    color: var(--colorsActionMinor500);
+  }
 
-    input:checked ~ && {
-      background-color: ${theme.colors.whiteMix};
-      border-color: ${theme.colors.secondary};
-      color: ${theme.colors.text};
-      cursor: auto;
-    }
+  input:checked ~ && {
+    background-color: var(--colorsActionMinor300);
+    color: var(--colorsActionMinor600);
+    cursor: auto;
+  }
 
-    input:focus ~ & {
-      outline: 3px solid ${theme.colors.focus};
-      z-index: 100;
-    }
+  input:focus ~ & {
+    outline: 3px solid var(--colorsSemanticFocus500);
+    z-index: 100;
+  }
 
-    input:not(:checked):not(:disabled) ~ &:hover {
-      background-color: ${theme.colors.secondary};
-      border-color: ${theme.colors.secondary};
-      color: ${theme.colors.white};
+  input:not(:checked):not(:disabled) ~ &:hover {
+    background-color: var(--colorsActionMinor200);
+    border-color: var(--colorsActionMinor500);
+    color: var(--colorsActionMinor500);
 
-      ${_icon.default} {
-        color: ${theme.colors.white};
-      }
+    ${_icon.default} {
+      color: var(--colorsActionMinor500);
     }
-  `};
+  }
 
   ${({
   buttonIcon,
@@ -113,16 +105,14 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
     `}
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
       & {
-        background-color: ${theme.disabled.button};
-        border-color: ${theme.disabled.button};
-        color: ${theme.disabled.buttonText};
+        border-color: var(--colorsActionDisabled500);
+        color: var(--colorsActionMinorYin030);
 
         ${_icon.default} {
-          color: ${theme.disabled.buttonText};
+          color: var(--colorsActionMinorYin030);
         }
       }
       cursor: not-allowed;
@@ -188,10 +178,4 @@ const StyledButtonToggleInput = _styledComponents.default.input`
 exports.StyledButtonToggleInput = StyledButtonToggleInput;
 StyledButtonToggleIcon.propTypes = {
   buttonIconSize: _propTypes.default.string
-};
-StyledButtonToggleLabel.defaultProps = {
-  theme: _base.default
-};
-StyledButtonToggleLabel.defaultProps = {
-  theme: _base.default
 };

package/lib/components/button-toggle-group/button-toggle-group.style.js

@@ -11,8 +11,6 @@ var _buttonToggle = require("../button-toggle/button-toggle.style");
 
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -30,24 +28,21 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
 
   ${_buttonToggle.StyledButtonToggleLabel} {
     ${({
-  theme,
   info
 }) => info && (0, _styledComponents.css)`
-        border-color: ${theme.colors.info};
+        border-color: var(--colorsActionMinor500);
       `};
     ${({
-  theme,
   warning
 }) => warning && (0, _styledComponents.css)`
-        border-color: ${theme.colors.warning};
+        border-color: var(--colorsSemanticCaution500);
       `}
     ${({
-  theme,
   error
 }) => error && (0, _styledComponents.css)`
-        box-shadow: inset 1px 1px 0 ${theme.colors.error},
-          inset -1px -1px 0 ${theme.colors.error};
-        border-color: ${theme.colors.error};
+        box-shadow: inset 1px 1px 0 var(--colorsSemanticNegative500),
+          inset -1px -1px 0 var(--colorsSemanticNegative500);
+        border-color: var(--colorsSemanticNegative500);
       `}
   }
 
@@ -55,8 +50,5 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
     margin-left: 4px;
   }
 `;
-ButtonToggleGroupStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = ButtonToggleGroupStyle;
 exports.default = _default;

package/lib/components/dialog/dialog.style.js

@@ -87,6 +87,9 @@ const DialogStyle = _styledComponents.default.div`
   flex-direction: column;
   position: fixed;
   top: 50%;
+  z-index: ${({
+  theme
+}) => theme.zIndex.modal};
   max-height: ${({
   topMargin
 }) => `calc(100vh - ${topMargin}px)`};

package/lib/components/modal/modal.component.js

@@ -11,9 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+var _useScrollBlock = _interopRequireDefault(require("../../hooks/__internal__/useScrollBlock"));
+
+var _portal = _interopRequireDefault(require("../portal"));
 
-var _portal = _interopRequireDefault(require("../portal/portal.style"));
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _modalManager = _interopRequireDefault(require("./__internal__/modal-manager"));
 
@@ -44,35 +46,30 @@ const Modal = ({
   const ref = (0, _react.useRef)();
   const listenerAdded = (0, _react.useRef)(false);
   const modalRegistered = (0, _react.useRef)(false);
-  const originalOverflow = (0, _react.useRef)(undefined);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
   const [triggerRefocusFlag, setTriggerRefocusFlag] = (0, _react.useState)(false);
-  const setOverflow = (0, _react.useCallback)(() => {
-    if (typeof originalOverflow.current === "undefined" && !enableBackgroundUI) {
-      originalOverflow.current = document.documentElement.style.overflow;
-      document.documentElement.style.overflow = "hidden";
-    }
-  }, [enableBackgroundUI]);
-  const unsetOverflow = (0, _react.useCallback)(() => {
-    if (typeof originalOverflow.current !== "undefined" && !enableBackgroundUI) {
-      document.documentElement.style.overflow = originalOverflow.current;
-      originalOverflow.current = undefined;
-    }
-  }, [enableBackgroundUI]);
+  const {
+    blockScroll,
+    allowScroll
+  } = (0, _useScrollBlock.default)();
   (0, _react.useEffect)(() => {
-    if (open) {
-      setOverflow();
+    if (enableBackgroundUI) {
+      return;
     }
 
-    if (!open) {
-      unsetOverflow();
+    if (open) {
+      blockScroll();
+    } else {
+      allowScroll();
     }
-  }, [open, setOverflow, unsetOverflow]);
+  }, [allowScroll, blockScroll, enableBackgroundUI, open]);
   (0, _react.useEffect)(() => {
     return () => {
-      unsetOverflow();
+      if (!enableBackgroundUI) {
+        allowScroll();
+      }
     };
-  }, [unsetOverflow]);
+  }, [allowScroll, enableBackgroundUI]);
   const closeModal = (0, _react.useCallback)(ev => {
     const isTopmost = _modalManager.default.isTopmost(ref.current);
 
@@ -143,7 +140,8 @@ const Modal = ({
   if (open) {
     background = !enableBackgroundUI ? /*#__PURE__*/_react.default.createElement(_modal.StyledModalBackground, {
       "data-element": "modal-background",
-      transitionName: "modal-background"
+      transitionName: "modal-background",
+      transitionTime: timeout
     }) : null;
     content = children;
   }
@@ -151,6 +149,7 @@ const Modal = ({
   return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_modal.StyledModal, _extends({
     "data-state": open ? "open" : "closed",
     transitionName: "modal",
+    transitionTime: timeout,
     ref: ref
   }, rest), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, background && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
     key: "modal",
@@ -197,7 +196,7 @@ Modal.defaultProps = {
   onCancel: null,
   enableBackgroundUI: false,
   disableEscKey: false,
-  timeout: 500
+  timeout: 300
 };
 var _default = Modal;
 exports.default = _default;

package/lib/components/modal/modal.style.js

@@ -7,14 +7,15 @@ exports.StyledModalBackground = exports.StyledModal = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const backgroundOpacity = "0.6";
-const backgroundAnimationLength = "300ms";
-const initialPosition = "50px";
-const animationLength = "300ms";
 const StyledModalBackground = _styledComponents.default.div`
   background-color: rgba(0, 20, 29, 0.6);
   bottom: 0;
@@ -25,7 +26,8 @@ const StyledModalBackground = _styledComponents.default.div`
   top: 0;
 
   ${({
-  transitionName
+  transitionName,
+  transitionTime
 }) => (0, _styledComponents.css)`
     &.${transitionName}-enter, .${transitionName}-appear {
       opacity: 0;
@@ -34,7 +36,7 @@ const StyledModalBackground = _styledComponents.default.div`
     &.${transitionName}-enter.${transitionName}-enter-active,
       &.${transitionName}-appear.${transitionName}-appear-active {
       opacity: ${backgroundOpacity};
-      transition: opacity ${backgroundAnimationLength} ease-out;
+      transition: opacity ${transitionTime}ms ease-out;
     }
 
     &.${transitionName}-exit {
@@ -43,37 +45,42 @@ const StyledModalBackground = _styledComponents.default.div`
 
     &.${transitionName}-exit.${transitionName}-exit-active {
       opacity: 0;
-      transition: opacity ${backgroundAnimationLength} 100ms ease-out;
+      transition: opacity ${transitionTime}ms 100ms ease-out;
     }
-  `}
+  `};
 `;
 exports.StyledModalBackground = StyledModalBackground;
 const StyledModal = _styledComponents.default.div`
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.modal};
+
   ${({
-  transitionName
+  transitionName,
+  transitionTime
 }) => (0, _styledComponents.css)`
     .${transitionName}-enter, .${transitionName}-appear {
       opacity: 0;
-      margin-top: ${initialPosition};
     }
 
     .${transitionName}-enter.${transitionName}-enter-active,
       .${transitionName}-appear.${transitionName}-appear-active {
       opacity: 1;
-      margin-top: 0;
-      transition: all ${animationLength} 100ms ease-out;
+      transition: all ${transitionTime}ms 100ms ease-out;
     }
 
     .${transitionName}-exit {
       opacity: 1;
-      margin-top: 0;
     }
 
     .${transitionName}-exit.${transitionName}-exit-active {
       opacity: 0;
-      margin-top: ${initialPosition};
-      transition: all ${animationLength} ease-out;
+      transition: all ${transitionTime}ms ease-out;
     }
   `}
 `;
-exports.StyledModal = StyledModal;
+exports.StyledModal = StyledModal;
+StyledModal.defaultProps = {
+  theme: _base.default
+};

package/lib/components/profile/profile-test.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultStory = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _specialCharacters = _interopRequireWildcard(require("../../../.storybook/utils/argTypes/specialCharacters"));
+
+var _profile = _interopRequireDefault(require("./profile.component"));
+
+var _profile2 = require("./profile.config");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var _default = {
+  title: "Profile/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+        options: _profile2.PROFILE_SIZES
+      }
+    },
+    emailSpecialCharacters: {
+      options: [..._specialCharacters.default.options, ..._specialCharacters.email.options],
+      mapping: { ..._specialCharacters.default.mapping,
+        ..._specialCharacters.email.mapping
+      }
+    },
+    nameSpecialCharacters: _specialCharacters.default
+  }
+};
+exports.default = _default;
+
+const DefaultStory = ({
+  email,
+  emailSpecialCharacters,
+  name,
+  nameSpecialCharacters,
+  ...args
+}) => /*#__PURE__*/_react.default.createElement(_profile.default, _extends({
+  email: email || emailSpecialCharacters,
+  name: name || nameSpecialCharacters
+}, args));
+
+exports.DefaultStory = DefaultStory;
+DefaultStory.story = {
+  name: "default",
+  args: {
+    email: "johnsmith@sage.com",
+    initials: "JS",
+    size: _profile2.PROFILE_SIZES[0],
+    name: "John Smith",
+    src: "",
+    emailSpecialCharacters: undefined,
+    nameSpecialCharacters: undefined
+  }
+};

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -437,21 +437,26 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
+    "aria-expanded": isOpen,
+    "aria-haspopup": "listbox",
     ref: containerRef,
     hasTextCursor: true,
     readOnly: readOnly,
     disabled: disabled,
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
-  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    "data-element": dataElement,
+    isOpen: isOpen
+  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     activeDescendantId: activeDescendantId,
     "aria-controls": isOpen ? selectListId.current : undefined,
     isOpen: isOpen,
     hasTextCursor: true,
     labelId: labelId.current,
-    positionedChildren: disablePortal && isOpen && selectList
-  }, getTextboxProps())), !disablePortal && isOpen && selectList);
+    textboxRef: textboxRef
+  }, getTextboxProps()))), isOpen && selectList);
 });
 
 FilterableSelect.propTypes = { ..._selectTextbox.formInputPropTypes,

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

@@ -456,15 +456,19 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
-    ref: containerRef,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "listbox",
     disabled: disabled,
     readOnly: readOnly,
     hasTextCursor: true,
     size: size,
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
-  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
+    "data-element": dataElement,
+    isOpen: isOpen
+  }, (0, _utils.filterStyledSystemMarginProps)(textboxProps)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
     "data-element": "accessibility-label",
     id: accessibilityLabelId.current
   }, accessibilityLabel), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
@@ -474,8 +478,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     hasTextCursor: true,
     isOpen: isOpen,
     labelId: labelId.current,
-    positionedChildren: disablePortal && isOpen && selectList
-  }, getTextboxProps())), !disablePortal && isOpen && selectList);
+    textboxRef: textboxRef
+  }, getTextboxProps()))), isOpen && selectList);
 });
 
 MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,

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

@@ -44,6 +44,7 @@ const StyledSelectMultiSelect = (0, _styledComponents.default)(_select.default)`
     padding-right: ${({
   size
 }) => _inputSizes.default[size].height};
+    position: relative;
   }
 `;
 exports.StyledSelectMultiSelect = StyledSelectMultiSelect;

package/lib/components/select/select-list/select-list.component.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _useScrollBlock = _interopRequireDefault(require("../../../hooks/__internal__/useScrollBlock"));
+
 var _selectList = require("./select-list.style");
 
 var _popover = _interopRequireDefault(require("../../../__internal__/popover"));
@@ -82,6 +84,16 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const listRef = (0, _react.useRef)();
   const tableRef = (0, _react.useRef)();
   const listActionButtonRef = (0, _react.useRef)();
+  const {
+    blockScroll,
+    allowScroll
+  } = (0, _useScrollBlock.default)();
+  (0, _react.useEffect)(() => {
+    blockScroll();
+    return () => {
+      allowScroll();
+    };
+  }, [allowScroll, blockScroll]);
   const setPlacementCallback = (0, _react.useCallback)(popper => {
     placement.current = popper.placement;
   }, [placement]);
@@ -222,12 +234,12 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [onListScrollBottom]);
   const assignListWidth = (0, _react.useCallback)(() => {
-    if (!disablePortal && anchorElement) {
+    if (anchorElement) {
       const inputBoundingRect = anchorElement.getBoundingClientRect();
       const width = `${inputBoundingRect.width}px`;
       setListWidth(width);
     }
-  }, [anchorElement, disablePortal]);
+  }, [anchorElement]);
   (0, _react.useLayoutEffect)(() => {
     assignListWidth();
     window.addEventListener("resize", assignListWidth);
@@ -288,10 +300,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [children, currentOptionsListIndex, isLoading, lastOptionIndex]);
-  const popoverModifiers = [...fixedPopoverModifiers, {
+  const popoverModifiers = (0, _react.useMemo)(() => [...fixedPopoverModifiers, {
     name: "flip",
     enabled: flipEnabled
-  }];
+  }], [flipEnabled]);
 
   function isNavigationKey(keyEvent) {
     return keyEvent === "ArrowDown" || keyEvent === "ArrowUp" || keyEvent === "Home" || keyEvent === "End";
@@ -317,7 +329,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     disablePortal: disablePortal,
     reference: anchorRef,
     onFirstUpdate: setPlacementCallback,
-    modifiers: popoverModifiers
+    modifiers: popoverModifiers,
+    disableBackgroundUI: true
   }, /*#__PURE__*/_react.default.createElement(_selectList.StyledPopoverContainer, {
     height: listHeight,
     width: listWidth,

package/lib/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,5 +1,5 @@
 export default SelectTextbox;
-declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
+declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
     [x: string]: any;
     accessibilityLabelId?: string | undefined;
     "aria-controls": any;
@@ -16,6 +16,7 @@ declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaCont
     onChange: any;
     selectedValue: any;
     required: any;
+    textboxRef: any;
     hasTextCursor: any;
     transparent: any;
     activeDescendantId: any;

package/lib/components/select/select-textbox/select-textbox.component.js

@@ -9,14 +9,18 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _textbox = _interopRequireDefault(require("../../textbox"));
+var _core = require("@popperjs/core");
 
-var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+var _textbox = _interopRequireDefault(require("../../textbox"));
 
 var _selectText = _interopRequireDefault(require("../__internal__/select-text/select-text.component"));
 
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid/guid"));
 
+var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
+
+var _useResizeObserver = _interopRequireDefault(require("../../../hooks/__internal__/useResizeObserver"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -25,6 +29,42 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
+const modifiers = [{
+  name: "flip",
+  enabled: false
+}, {
+  name: "offset",
+  options: {
+    offset: ({
+      placement,
+      reference
+    }) => {
+      if (placement === "bottom") {
+        return [0, -reference.height];
+      }
+
+      return [];
+    }
+  }
+}, {
+  name: "sameDimensions",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["computeStyles"],
+  fn: ({
+    state
+  }) => {
+    state.styles.popper.width = `${state.rects.reference.width}px`;
+    state.styles.reference.height = `${state.rects.popper.height}px`;
+  },
+  effect: ({
+    state
+  }) => {
+    state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+    state.elements.reference.height = `${state.elements.popper.height}px`;
+  }
+}];
+
 const SelectTextbox = ({
   accessibilityLabelId = "",
   "aria-controls": ariaControls,
@@ -41,11 +81,36 @@ const SelectTextbox = ({
   onChange,
   selectedValue,
   required,
+  textboxRef,
   hasTextCursor,
   transparent,
   activeDescendantId,
   ...restProps
 }) => {
+  const popperInstance = (0, _react.useRef)();
+  (0, _react.useLayoutEffect)(() => {
+    if (textboxRef && isOpen) {
+      popperInstance.current = (0, _core.createPopper)(textboxRef.parentElement.parentElement, textboxRef.parentElement, {
+        strategy: "fixed",
+        modifiers
+      });
+    }
+
+    return () => {
+      if (popperInstance.current) {
+        popperInstance.current.destroy();
+        popperInstance.current = null;
+      }
+    };
+  }, [textboxRef, isOpen]);
+  const resizeObserverRef = (0, _react.useMemo)(() => ({
+    current: textboxRef === null || textboxRef === void 0 ? void 0 : textboxRef.parentElement
+  }), [textboxRef]);
+  (0, _useResizeObserver.default)(resizeObserverRef, () => {
+    var _popperInstance$curre;
+
+    popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre = popperInstance.current) === null || _popperInstance$curre === void 0 ? void 0 : _popperInstance$curre.update();
+  }, !isOpen);
   const l = (0, _useLocale.default)();
   const textId = (0, _react.useRef)((0, _guid.default)());
 

package/lib/components/select/select.style.js

@@ -28,7 +28,9 @@ const StyledSelect = _styledComponents.default.div`
   hasTextCursor,
   disabled,
   readOnly,
-  transparent
+  theme,
+  transparent,
+  isOpen
 }) => (0, _styledComponents.css)`
     ${_styledSystem.margin}
 
@@ -54,6 +56,10 @@ const StyledSelect = _styledComponents.default.div`
       cursor: ${hasTextCursor ? "text" : "pointer"};
       padding-right: 0;
 
+      ${isOpen && (0, _styledComponents.css)`
+        z-index: ${theme.zIndex.aboveAll};
+      `}
+
       ${disabled && (0, _styledComponents.css)`
         cursor: not-allowed;
       `}

package/lib/components/select/simple-select/simple-select.component.js

@@ -365,18 +365,21 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     transparent: transparent,
     disabled: disabled,
     readOnly: readOnly,
-    ref: containerRef,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "listbox",
     "data-component": dataComponent,
     "data-role": dataRole,
-    "data-element": dataElement
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    isOpen: isOpen,
-    labelId: labelId.current,
+    "data-element": dataElement,
+    isOpen: isOpen
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
+    "aria-controls": isOpen ? selectListId.current : undefined,
     activeDescendantId: activeDescendantId,
-    "aria-controls": isOpen ? selectListId.current : undefined
-  }, getTextboxProps(), {
-    positionedChildren: disablePortal && isOpen && selectList
-  })), !disablePortal && isOpen && selectList);
+    labelId: labelId.current,
+    isOpen: isOpen,
+    textboxRef: textboxRef
+  }, getTextboxProps()))), isOpen && selectList);
 });
 
 SimpleSelect.propTypes = {

package/lib/components/toast/toast.style.js

@@ -35,7 +35,7 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
   ${({
   theme
 }) => (0, _styledComponents.css)`
-    position: absolute;
+    position: fixed;
     top: 0;
 
     z-index: ${theme.zIndex.notification};

package/lib/hooks/__internal__/useScrollBlock/index.d.ts

@@ -0,0 +1,4 @@
+export default function useScrollBlock(): {
+  blockScroll: () => void;
+  allowScroll: () => void;
+};

package/lib/hooks/__internal__/useScrollBlock/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _useScrollBlock.default;
+  }
+});
+
+var _useScrollBlock = _interopRequireDefault(require("./useScrollBlock"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/hooks/__internal__/useScrollBlock/scroll-block-manager.d.ts

@@ -0,0 +1,10 @@
+export default ScrollBlockManager;
+declare class ScrollBlockManager {
+    components: any;
+    originalValues: any;
+    registerComponent(id: any): void;
+    unregisterComponent(id: any): void;
+    saveOriginalValues(values: any): void;
+    getOriginalValues(): any;
+    isBlocked(): boolean;
+}

package/lib/hooks/__internal__/useScrollBlock/scroll-block-manager.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+let ScrollBlockManager = /*#__PURE__*/function () {
+  function ScrollBlockManager() {
+    _classCallCheck(this, ScrollBlockManager);
+
+    // Due to possibility of multiple carbon versions using it
+    // it is necessary to maintain same structure in this global variable
+    if (!window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
+      window.__CARBON_INTERNALS_SCROLL_BLOCKERS = {
+        components: {},
+        originalValues: []
+      };
+    }
+
+    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
+    this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
+  }
+
+  _createClass(ScrollBlockManager, [{
+    key: "registerComponent",
+    value: function registerComponent(id) {
+      this.components[id] = true;
+    }
+  }, {
+    key: "unregisterComponent",
+    value: function unregisterComponent(id) {
+      delete this.components[id];
+    }
+  }, {
+    key: "saveOriginalValues",
+    value: function saveOriginalValues(values) {
+      this.originalValues.length = 0;
+      this.originalValues.push(...values);
+    }
+  }, {
+    key: "getOriginalValues",
+    value: function getOriginalValues() {
+      return this.originalValues;
+    }
+  }, {
+    key: "isBlocked",
+    value: function isBlocked() {
+      return Object.entries(this.components).length !== 0;
+    }
+  }]);
+
+  return ScrollBlockManager;
+}();
+
+var _default = ScrollBlockManager;
+exports.default = _default;

package/lib/hooks/__internal__/useScrollBlock/useScrollBlock.d.ts

@@ -0,0 +1,5 @@
+export default useScrollBlock;
+declare function useScrollBlock(): {
+    blockScroll: () => void;
+    allowScroll: () => void;
+};

package/lib/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+
+var _scrollBlockManager = _interopRequireDefault(require("./scroll-block-manager"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const scrollBlockManager = new _scrollBlockManager.default();
+/* istanbul ignore next */
+
+const safeDocument = typeof document !== "undefined" ? document : {};
+
+const useScrollBlock = () => {
+  const {
+    current: containerGuid
+  } = (0, _react.useRef)((0, _guid.default)());
+  const rules = (0, _react.useMemo)(() => {
+    const {
+      documentElement,
+      body
+    } = safeDocument;
+    const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
+    const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
+    return [{
+      element: documentElement,
+      property: "position",
+      blockingValue: "relative"
+    }, {
+      element: documentElement,
+      property: "overflow",
+      blockingValue: "hidden"
+    }, {
+      element: body,
+      property: "position",
+      blockingValue: "relative"
+    }, {
+      element: body,
+      property: "overflow",
+      blockingValue: "hidden"
+    }, {
+      element: body,
+      property: "paddingRight",
+      blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
+    }];
+  }, []);
+  const blockScroll = (0, _react.useCallback)(() => {
+    const isBlocked = scrollBlockManager.isBlocked();
+    scrollBlockManager.registerComponent(containerGuid);
+
+    if (isBlocked) {
+      return;
+    }
+
+    const originalValues = rules.map(({
+      element,
+      property
+    }) => element.style[property]);
+    scrollBlockManager.saveOriginalValues(originalValues);
+    rules.forEach(({
+      element,
+      property,
+      blockingValue
+    }) => {
+      element.style[property] = blockingValue;
+    });
+  }, [containerGuid, rules]);
+  const allowScroll = (0, _react.useCallback)(() => {
+    scrollBlockManager.unregisterComponent(containerGuid);
+    const isBlocked = scrollBlockManager.isBlocked();
+    if (isBlocked) return;
+    const originalValues = scrollBlockManager.getOriginalValues();
+    rules.forEach(({
+      element,
+      property
+    }, index) => {
+      element.style[property] = originalValues[index];
+    });
+    scrollBlockManager.saveOriginalValues([]);
+  }, [containerGuid, rules]);
+  return {
+    blockScroll,
+    allowScroll
+  };
+};
+
+var _default = useScrollBlock;
+exports.default = _default;

package/lib/style/themes/base/base-theme.config.d.ts

@@ -348,11 +348,11 @@ declare function _default(palette: any): {
     zIndex: {
         smallOverlay: number;
         overlay: number;
-        popover: number;
         nav: number;
         modal: number;
         header: number;
         fullScreenModal: number;
+        popover: number;
         notification: number;
         aboveAll: number;
     };

package/lib/style/themes/base/base-theme.config.js

@@ -369,12 +369,12 @@ var _default = palette => {
     zIndex: {
       smallOverlay: 10,
       overlay: 1000,
-      popover: 2000,
       nav: 2999,
       modal: 3000,
       header: 4000,
       fullScreenModal: 5000,
-      notification: 6000,
+      popover: 6000,
+      notification: 7000,
       aboveAll: 9999
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.12.0",
+  "version": "104.14.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -71,18 +71,18 @@
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/exec": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^6.3.12",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-controls": "^6.3.12",
-    "@storybook/addon-docs": "^6.3.12",
+    "@storybook/addon-a11y": "^6.4.18",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-controls": "^6.4.18",
+    "@storybook/addon-docs": "^6.4.18",
     "@storybook/addon-google-analytics": "^6.2.9",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/addon-toolbars": "^6.3.12",
-    "@storybook/addon-viewport": "^6.3.12",
-    "@storybook/addons": "^6.3.12",
-    "@storybook/components": "^6.3.12",
-    "@storybook/react": "^6.3.12",
-    "@storybook/theming": "^6.3.12",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addon-toolbars": "^6.4.18",
+    "@storybook/addon-viewport": "^6.4.18",
+    "@storybook/addons": "^6.4.18",
+    "@storybook/components": "^6.4.18",
+    "@storybook/react": "^6.4.18",
+    "@storybook/theming": "^6.4.18",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^26.0.19",
@@ -143,7 +143,7 @@
     "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "rimraf": "^3.0.2",
-    "semantic-release": "^18.0.1",
+    "semantic-release": "^19.0.2",
     "semver": "^7.3.5",
     "sprintf-js": "^1.1.2",
     "styled-components": "^4.4.1",
@@ -151,7 +151,7 @@
     "typescript": "^4.3.5",
     "typescript-to-proptypes": "^2.2.1",
     "uuid": "^8.3.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^3.11.3"
   },
   "dependencies": {
     "@octokit/rest": "^18.12.0",
@@ -167,7 +167,7 @@
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
-    "node-fetch": "^2.6.1",
+    "node-fetch": "^2.6.7",
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
     "react-day-picker": "~7.4.10",

package/lib/components/portal/portal.style.d.ts

@@ -1,3 +0,0 @@
-export default StyledPortal;
-declare const StyledPortal: import("styled-components").StyledComponent<typeof Portal, any, {}, never>;
-import Portal from "./portal";

package/lib/components/portal/portal.style.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _portal = _interopRequireDefault(require("./portal"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const StyledPortal = (0, _styledComponents.default)(_portal.default)`
-  position: absolute;
-  top: 0;
-  z-index: 1002;
-`;
-var _default = StyledPortal;
-exports.default = _default;