carbon-react 110.4.0 → 110.4.1

package/esm/__internal__/i18n-context/index.d.ts

@@ -1,2 +1,3 @@
-declare var _default: import("react").Context<import("../../locales/locale").default>;
+/// <reference types="react" />
+declare const _default: import("react").Context<import("../../locales/locale").default>;
 export default _default;

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

@@ -13,6 +13,7 @@ export interface PopoverProps {
     onFirstUpdate?: (state: Partial<State>) => void;
     disablePortal?: boolean;
     reference: React.RefObject<HTMLElement>;
+    isOpen?: boolean;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: PopoverProps) => JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, isOpen, }: PopoverProps) => JSX.Element;
 export default Popover;

package/esm/__internal__/popover/popover.component.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import ReactDOM from "react-dom";
 import { createPopper } from "@popperjs/core";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
-import StyledBackdrop from "./popover.style";
+import { StyledBackdrop, StyledPopoverContent } from "./popover.style";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 import { ModalContext } from "../../components/modal/modal.component";
 
@@ -14,12 +14,12 @@ const Popover = ({
   reference,
   onFirstUpdate,
   modifiers,
-  disableBackgroundUI
+  disableBackgroundUI,
+  isOpen = true
 }) => {
   var _reference$current;
 
-  const elementDOM = useRef(null); // TODO: Remove TempModalContext after modal has been converted to TS
-
+  const elementDOM = useRef(null);
   const {
     isInModal
   } = useContext(ModalContext);
@@ -52,6 +52,13 @@ const Popover = ({
 
     popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre = popperInstance.current) === null || _popperInstance$curre === void 0 ? void 0 : _popperInstance$curre.update();
   });
+  useEffect(() => {
+    if (isOpen) {
+      var _popperInstance$curre2;
+
+      popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre2 = popperInstance.current) === null || _popperInstance$curre2 === void 0 ? void 0 : _popperInstance$curre2.update();
+    }
+  }, [isOpen]);
   useLayoutEffect(() => {
     if (reference.current) {
       popperInstance.current = createPopper(reference.current, popperElementRef.current, {
@@ -82,6 +89,9 @@ const Popover = ({
       }
     };
   }, [disablePortal, mountNode]);
+  content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
+    isOpen: isOpen
+  }, content);
 
   if (disableBackgroundUI) {
     content = /*#__PURE__*/React.createElement(StyledBackdrop, null, content);
@@ -98,6 +108,7 @@ Popover.propTypes = {
   "children": PropTypes.element.isRequired,
   "disableBackgroundUI": PropTypes.bool,
   "disablePortal": PropTypes.bool,
+  "isOpen": PropTypes.bool,
   "modifiers": PropTypes.arrayOf(PropTypes.shape({
     "enabled": PropTypes.bool,
     "name": PropTypes.string.isRequired,

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

@@ -1,2 +1,6 @@
-declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default StyledBackdrop;
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledPopoverContentProps = {
+    isOpen?: boolean;
+};
+export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;
+export {};

package/esm/__internal__/popover/popover.style.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import baseTheme from "../../style/themes/base";
-const StyledBackdrop = styled.div`
+export const StyledBackdrop = styled.div`
   bottom: 0;
   left: 0;
   position: fixed;
@@ -14,4 +14,8 @@ const StyledBackdrop = styled.div`
 StyledBackdrop.defaultProps = {
   theme: baseTheme
 };
-export default StyledBackdrop;
+export const StyledPopoverContent = styled.div`
+  ${({
+  isOpen
+}) => !isOpen && "display: none;"}
+`;

package/esm/components/i18n-provider/i18n-provider.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import Locale from "../../locales";
+export interface I18nProviderProps {
+    locale?: Partial<Locale>;
+    children: React.ReactNode;
+}
+export declare const I18nProvider: ({ locale, children }: I18nProviderProps) => JSX.Element;
+export default I18nProvider;

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -1,6 +1,6 @@
 import React from "react";
-import merge from "lodash/merge";
 import PropTypes from "prop-types";
+import merge from "lodash/merge";
 import Context from "../../__internal__/i18n-context";
 import enGB from "../../locales/en-gb";
 
@@ -9,87 +9,107 @@ const I18nProvider = ({
   children
 }) => locale ? /*#__PURE__*/React.createElement(Context.Provider, {
   value: merge({}, enGB, locale)
-}, children) : children;
+}, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 
-I18nProvider.defaultProps = {
-  locale: undefined
-};
 I18nProvider.propTypes = {
-  locale: PropTypes.shape({
-    locale: PropTypes.func,
-    actions: PropTypes.shape({
-      edit: PropTypes.func,
-      delete: PropTypes.func,
-      reset: PropTypes.func
-    }),
-    actionPopover: PropTypes.shape({
-      ariaLabel: PropTypes.func
-    }),
-    batchSelection: PropTypes.shape({
-      selected: PropTypes.func
-    }),
-    confirm: PropTypes.shape({
-      no: PropTypes.func,
-      yes: PropTypes.func
-    }),
-    date: PropTypes.shape({
-      dateFnsLocale: PropTypes.func
-    }),
-    errors: PropTypes.shape({
-      messages: PropTypes.shape({
-        formSummary: PropTypes.func
-      })
-    }),
-    message: PropTypes.shape({
-      closeButtonAriaLabel: PropTypes.func
-    }),
-    numeralDate: PropTypes.shape({
-      validation: PropTypes.shape({
-        day: PropTypes.func,
-        month: PropTypes.func,
-        year: PropTypes.func
-      })
-    }),
-    pager: PropTypes.shape({
-      show: PropTypes.func,
-      records: PropTypes.func,
-      first: PropTypes.func,
-      last: PropTypes.func,
-      next: PropTypes.func,
-      previous: PropTypes.func,
-      pageX: PropTypes.func,
-      ofY: PropTypes.func
-    }),
-    select: PropTypes.shape({
-      actionButtonText: PropTypes.func,
-      placeholder: PropTypes.func,
-      noResultsForTerm: PropTypes.func
-    }),
-    switch: PropTypes.shape({
-      on: PropTypes.func,
-      off: PropTypes.func
-    }),
-    table: PropTypes.shape({
-      noData: PropTypes.func
-    }),
-    textEditor: PropTypes.shape({
-      tooltipMessages: PropTypes.shape({
-        bold: PropTypes.func,
-        italic: PropTypes.func,
-        bulletList: PropTypes.func,
-        numberList: PropTypes.func
-      }),
-      ariaLabels: PropTypes.shape({
-        bold: PropTypes.func,
-        italic: PropTypes.func,
-        bulletList: PropTypes.func,
-        numberList: PropTypes.func
-      })
-    }),
-    titleSelect: PropTypes.shape({
-      deselect: PropTypes.func
+  "children": PropTypes.node,
+  "locale": PropTypes.shape({
+    "actionPopover": PropTypes.shape({
+      "ariaLabel": PropTypes.func.isRequired
+    }),
+    "actions": PropTypes.shape({
+      "delete": PropTypes.func.isRequired,
+      "edit": PropTypes.func.isRequired
+    }),
+    "batchSelection": PropTypes.shape({
+      "selected": PropTypes.func.isRequired
+    }),
+    "confirm": PropTypes.shape({
+      "no": PropTypes.func.isRequired,
+      "yes": PropTypes.func.isRequired
+    }),
+    "date": PropTypes.shape({
+      "dateFnsLocale": PropTypes.func.isRequired
+    }),
+    "dialog": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "dialogFullScreen": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "errors": PropTypes.shape({
+      "messages": PropTypes.shape({
+        "formSummary": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "heading": PropTypes.shape({
+      "backLinkAriaLabel": PropTypes.func.isRequired
+    }),
+    "link": PropTypes.shape({
+      "skipLinkLabel": PropTypes.func.isRequired
+    }),
+    "locale": PropTypes.func,
+    "message": PropTypes.shape({
+      "closeButtonAriaLabel": PropTypes.func.isRequired
+    }),
+    "numeralDate": PropTypes.shape({
+      "validation": PropTypes.shape({
+        "day": PropTypes.func.isRequired,
+        "month": PropTypes.func.isRequired,
+        "year": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "pager": PropTypes.shape({
+      "first": PropTypes.func.isRequired,
+      "last": PropTypes.func.isRequired,
+      "next": PropTypes.func.isRequired,
+      "ofY": PropTypes.func.isRequired,
+      "pageX": PropTypes.func.isRequired,
+      "previous": PropTypes.func.isRequired,
+      "records": PropTypes.func.isRequired,
+      "show": PropTypes.func.isRequired
+    }),
+    "select": PropTypes.shape({
+      "actionButtonText": PropTypes.func.isRequired,
+      "noResultsForTerm": PropTypes.func.isRequired,
+      "placeholder": PropTypes.func.isRequired
+    }),
+    "sidebar": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "switch": PropTypes.shape({
+      "off": PropTypes.func.isRequired,
+      "on": PropTypes.func.isRequired
+    }),
+    "textEditor": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "bold": PropTypes.func.isRequired,
+        "bulletList": PropTypes.func.isRequired,
+        "italic": PropTypes.func.isRequired,
+        "numberList": PropTypes.func.isRequired
+      }).isRequired,
+      "tooltipMessages": PropTypes.shape({
+        "bold": PropTypes.func.isRequired,
+        "bulletList": PropTypes.func.isRequired,
+        "italic": PropTypes.func.isRequired,
+        "numberList": PropTypes.func.isRequired
+      }).isRequired
+    }),
+    "tileSelect": PropTypes.shape({
+      "deselect": PropTypes.func.isRequired
+    }),
+    "toast": PropTypes.shape({
+      "ariaLabels": PropTypes.shape({
+        "close": PropTypes.func.isRequired
+      }).isRequired
     })
-  }),
-  children: PropTypes.node.isRequired
+  })
 };
+export { I18nProvider };
 export default I18nProvider;

package/esm/components/i18n-provider/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./i18n-provider";
+export { default } from "./i18n-provider.component";
+export type { I18nProviderProps } from "./i18n-provider.component";

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

@@ -155,16 +155,17 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
 
     fillLastFilterCharacter(key);
   }, [fillLastFilterCharacter, onKeyDown, readOnly]);
+  const valueToUse = isControlled.current ? value : selectedValue;
   const handleGlobalClick = useCallback(event => {
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
     isMouseDownReported.current = false;
 
     if (notInContainer && notInList) {
-      setMatchingText(selectedValue, true);
+      setMatchingText(valueToUse, true);
       setOpen(false);
     }
-  }, [setMatchingText, selectedValue]);
+  }, [setMatchingText, valueToUse]);
   useEffect(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
@@ -408,7 +409,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     multiColumn: multiColumn,
     loaderDataRole: "filterable-select-list-loader",
     listPlacement: listPlacement,
-    flipEnabled: flipEnabled
+    flipEnabled: flipEnabled,
+    isOpen: isOpen
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     ref: containerRef,
@@ -424,11 +426,11 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
     activeDescendantId: activeDescendantId,
     labelId: label ? labelId.current : undefined,
-    "aria-controls": isOpen ? selectListId.current : undefined,
+    "aria-controls": selectListId.current,
     isOpen: isOpen,
     hasTextCursor: true,
     textboxRef: textboxRef
-  }, getTextboxProps()))), isOpen && selectList);
+  }, getTextboxProps()))), selectList);
 });
 FilterableSelect.propTypes = { ...formInputPropTypes,
 

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

@@ -425,7 +425,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
-    multiselectValues: actualValue
+    multiselectValues: actualValue,
+    isOpen: isOpen
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
     disabled: disabled,
@@ -444,12 +445,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, accessibilityLabel), /*#__PURE__*/React.createElement(SelectTextbox, _extends({
     accessibilityLabelId: accessibilityLabelId.current,
     activeDescendantId: activeDescendantId,
-    "aria-controls": isOpen ? selectListId.current : undefined,
+    "aria-controls": selectListId.current,
     hasTextCursor: true,
     isOpen: isOpen,
     labelId: labelId.current,
     textboxRef: textboxRef
-  }, getTextboxProps()))), isOpen && selectList);
+  }, getTextboxProps()))), selectList);
 });
 MultiSelect.propTypes = { ...formInputPropTypes,
 

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

@@ -46,6 +46,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   loaderDataRole,
   listPlacement = "bottom-start",
   flipEnabled = true,
+  isOpen,
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
@@ -61,30 +62,35 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     blockScroll,
     allowScroll
   } = useScrollBlock();
+  const updateListHeight = useCallback(() => {
+    if (isOpen) {
+      let newHeight = listRef.current.clientHeight;
 
-  const updateListHeight = () => {
-    let newHeight = listRef.current.clientHeight;
+      if (listActionButtonRef.current) {
+        newHeight += listActionButtonRef.current.parentElement.clientHeight;
+      }
 
-    if (listActionButtonRef.current) {
-      newHeight += listActionButtonRef.current.parentElement.clientHeight;
+      setListHeight(`${newHeight}px`);
     }
-
-    setListHeight(`${newHeight}px`);
-  };
-
+  }, [isOpen]);
   const listCallbackRef = useCallback(element => {
     listRef.current = element;
 
     if (element) {
       setTimeout(updateListHeight, 0);
     }
-  }, []);
+  }, [updateListHeight]);
   useEffect(() => {
-    blockScroll();
+    if (isOpen) {
+      blockScroll();
+    }
+
     return () => {
-      allowScroll();
+      if (isOpen) {
+        allowScroll();
+      }
     };
-  }, [allowScroll, blockScroll]);
+  }, [allowScroll, blockScroll, isOpen]);
   useLayoutEffect(() => {
     if (multiColumn) {
       setScrollbarWidth(tableRef.current.offsetWidth - tableRef.current.clientWidth);
@@ -108,6 +114,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       selectionType: "click"
     });
   }, [onSelect]);
+  const childIds = useMemo(() => React.Children.map(children, () => guid()), [children]);
   const childrenWithListProps = useMemo(() => React.Children.map(children, (child, index) => {
     if (!child || child.type !== Option && child.type !== OptionRow) {
       return child;
@@ -115,13 +122,13 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
 
     const newProps = {
       index,
-      id: guid(),
+      id: childIds[index],
       onSelect: handleSelect,
       hidden: isLoading && React.Children.count(children) === 1,
       ref: optionRefList[index]
     };
     return /*#__PURE__*/React.cloneElement(child, newProps);
-  }), [children, handleSelect, isLoading, optionRefList]);
+  }), [children, handleSelect, isLoading, optionRefList, childIds]);
   const childrenList = useMemo(() => React.Children.toArray(childrenWithListProps), [childrenWithListProps]);
   const lastOptionIndex = useMemo(() => {
     let lastIndex = 0;
@@ -188,6 +195,10 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
   }, [anchorElement]);
   const handleGlobalKeydown = useCallback(event => {
+    if (!isOpen) {
+      return;
+    }
+
     const {
       key
     } = event;
@@ -221,7 +232,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       focusOnAnchor();
       highlightNextItem(key);
     }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor]);
+  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
   const handleListScroll = useCallback(event => {
     const element = event.target;
 
@@ -243,7 +254,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       window.removeEventListener("resize", assignListWidth);
     };
   }, [assignListWidth]);
-  useLayoutEffect(updateListHeight, [children]);
+  useLayoutEffect(updateListHeight, [children, updateListHeight]);
   useEffect(() => {
     const keyboardEvent = "keydown";
     const listElement = listRef.current;
@@ -315,7 +326,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     reference: anchorRef,
     onFirstUpdate: setPlacementCallback,
     modifiers: popoverModifiers,
-    disableBackgroundUI: true
+    isOpen: isOpen
   }, /*#__PURE__*/React.createElement(StyledPopoverContainer, {
     height: listHeight,
     width: listWidth,
@@ -397,6 +408,11 @@ SelectList.propTypes = {
   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,
+
+  /** @private @ignore
+   * Hides the list (with CSS display: none) if not set
+   */
+  isOpen: PropTypes.bool
 };
 export default SelectList;

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

@@ -331,7 +331,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     multiColumn: multiColumn,
     loaderDataRole: "simple-select-list-loader",
     listPlacement: listPlacement,
-    flipEnabled: flipEnabled
+    flipEnabled: flipEnabled,
+    isOpen: isOpen
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     transparent: transparent,
@@ -344,12 +345,12 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
-    "aria-controls": isOpen ? selectListId.current : undefined,
+    "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
     labelId: labelId.current,
     isOpen: isOpen,
     textboxRef: textboxRef
-  }, getTextboxProps()))), isOpen && selectList);
+  }, getTextboxProps()))), selectList);
 });
 SimpleSelect.propTypes = {
   /** Styled system spacing props */

package/lib/__internal__/i18n-context/index.d.ts

@@ -1,2 +1,3 @@
-declare var _default: import("react").Context<import("../../locales/locale").default>;
+/// <reference types="react" />
+declare const _default: import("react").Context<import("../../locales/locale").default>;
 export default _default;

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

@@ -13,6 +13,7 @@ export interface PopoverProps {
     onFirstUpdate?: (state: Partial<State>) => void;
     disablePortal?: boolean;
     reference: React.RefObject<HTMLElement>;
+    isOpen?: boolean;
 }
-declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: PopoverProps) => JSX.Element;
+declare const Popover: ({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, isOpen, }: PopoverProps) => JSX.Element;
 export default Popover;

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

@@ -15,7 +15,7 @@ var _core = require("@popperjs/core");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
-var _popover = _interopRequireDefault(require("./popover.style"));
+var _popover = require("./popover.style");
 
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
@@ -34,12 +34,12 @@ const Popover = ({
   reference,
   onFirstUpdate,
   modifiers,
-  disableBackgroundUI
+  disableBackgroundUI,
+  isOpen = true
 }) => {
   var _reference$current;
 
-  const elementDOM = (0, _react.useRef)(null); // TODO: Remove TempModalContext after modal has been converted to TS
-
+  const elementDOM = (0, _react.useRef)(null);
   const {
     isInModal
   } = (0, _react.useContext)(_modal.ModalContext);
@@ -73,6 +73,13 @@ const Popover = ({
 
     popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre = popperInstance.current) === null || _popperInstance$curre === void 0 ? void 0 : _popperInstance$curre.update();
   });
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      var _popperInstance$curre2;
+
+      popperInstance === null || popperInstance === void 0 ? void 0 : (_popperInstance$curre2 = popperInstance.current) === null || _popperInstance$curre2 === void 0 ? void 0 : _popperInstance$curre2.update();
+    }
+  }, [isOpen]);
   (0, _react.useLayoutEffect)(() => {
     if (reference.current) {
       popperInstance.current = (0, _core.createPopper)(reference.current, popperElementRef.current, {
@@ -103,9 +110,12 @@ const Popover = ({
       }
     };
   }, [disablePortal, mountNode]);
+  content = /*#__PURE__*/_react.default.createElement(_popover.StyledPopoverContent, {
+    isOpen: isOpen
+  }, content);
 
   if (disableBackgroundUI) {
-    content = /*#__PURE__*/_react.default.createElement(_popover.default, null, content);
+    content = /*#__PURE__*/_react.default.createElement(_popover.StyledBackdrop, null, content);
   }
 
   if (disablePortal) {
@@ -119,6 +129,7 @@ Popover.propTypes = {
   "children": _propTypes.default.element.isRequired,
   "disableBackgroundUI": _propTypes.default.bool,
   "disablePortal": _propTypes.default.bool,
+  "isOpen": _propTypes.default.bool,
   "modifiers": _propTypes.default.arrayOf(_propTypes.default.shape({
     "enabled": _propTypes.default.bool,
     "name": _propTypes.default.string.isRequired,

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

@@ -1,2 +1,6 @@
-declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default StyledBackdrop;
+export declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type StyledPopoverContentProps = {
+    isOpen?: boolean;
+};
+export declare const StyledPopoverContent: import("styled-components").StyledComponent<"div", any, StyledPopoverContentProps, never>;
+export {};

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.StyledPopoverContent = exports.StyledBackdrop = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -22,8 +22,13 @@ const StyledBackdrop = _styledComponents.default.div`
 }) => theme.zIndex.popover};
   background: transparent;
 `;
+exports.StyledBackdrop = StyledBackdrop;
 StyledBackdrop.defaultProps = {
   theme: _base.default
 };
-var _default = StyledBackdrop;
-exports.default = _default;
+const StyledPopoverContent = _styledComponents.default.div`
+  ${({
+  isOpen
+}) => !isOpen && "display: none;"}
+`;
+exports.StyledPopoverContent = StyledPopoverContent;

package/lib/components/i18n-provider/i18n-provider.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import Locale from "../../locales";
+export interface I18nProviderProps {
+    locale?: Partial<Locale>;
+    children: React.ReactNode;
+}
+export declare const I18nProvider: ({ locale, children }: I18nProviderProps) => JSX.Element;
+export default I18nProvider;

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.I18nProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _merge = _interopRequireDefault(require("lodash/merge"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _merge = _interopRequireDefault(require("lodash/merge"));
+
 var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
 
 var _enGb = _interopRequireDefault(require("../../locales/en-gb"));
@@ -22,88 +22,108 @@ const I18nProvider = ({
   children
 }) => locale ? /*#__PURE__*/_react.default.createElement(_i18nContext.default.Provider, {
   value: (0, _merge.default)({}, _enGb.default, locale)
-}, children) : children;
+}, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 
-I18nProvider.defaultProps = {
-  locale: undefined
-};
+exports.I18nProvider = I18nProvider;
 I18nProvider.propTypes = {
-  locale: _propTypes.default.shape({
-    locale: _propTypes.default.func,
-    actions: _propTypes.default.shape({
-      edit: _propTypes.default.func,
-      delete: _propTypes.default.func,
-      reset: _propTypes.default.func
-    }),
-    actionPopover: _propTypes.default.shape({
-      ariaLabel: _propTypes.default.func
-    }),
-    batchSelection: _propTypes.default.shape({
-      selected: _propTypes.default.func
-    }),
-    confirm: _propTypes.default.shape({
-      no: _propTypes.default.func,
-      yes: _propTypes.default.func
-    }),
-    date: _propTypes.default.shape({
-      dateFnsLocale: _propTypes.default.func
-    }),
-    errors: _propTypes.default.shape({
-      messages: _propTypes.default.shape({
-        formSummary: _propTypes.default.func
-      })
-    }),
-    message: _propTypes.default.shape({
-      closeButtonAriaLabel: _propTypes.default.func
-    }),
-    numeralDate: _propTypes.default.shape({
-      validation: _propTypes.default.shape({
-        day: _propTypes.default.func,
-        month: _propTypes.default.func,
-        year: _propTypes.default.func
-      })
-    }),
-    pager: _propTypes.default.shape({
-      show: _propTypes.default.func,
-      records: _propTypes.default.func,
-      first: _propTypes.default.func,
-      last: _propTypes.default.func,
-      next: _propTypes.default.func,
-      previous: _propTypes.default.func,
-      pageX: _propTypes.default.func,
-      ofY: _propTypes.default.func
-    }),
-    select: _propTypes.default.shape({
-      actionButtonText: _propTypes.default.func,
-      placeholder: _propTypes.default.func,
-      noResultsForTerm: _propTypes.default.func
-    }),
-    switch: _propTypes.default.shape({
-      on: _propTypes.default.func,
-      off: _propTypes.default.func
-    }),
-    table: _propTypes.default.shape({
-      noData: _propTypes.default.func
-    }),
-    textEditor: _propTypes.default.shape({
-      tooltipMessages: _propTypes.default.shape({
-        bold: _propTypes.default.func,
-        italic: _propTypes.default.func,
-        bulletList: _propTypes.default.func,
-        numberList: _propTypes.default.func
-      }),
-      ariaLabels: _propTypes.default.shape({
-        bold: _propTypes.default.func,
-        italic: _propTypes.default.func,
-        bulletList: _propTypes.default.func,
-        numberList: _propTypes.default.func
-      })
-    }),
-    titleSelect: _propTypes.default.shape({
-      deselect: _propTypes.default.func
+  "children": _propTypes.default.node,
+  "locale": _propTypes.default.shape({
+    "actionPopover": _propTypes.default.shape({
+      "ariaLabel": _propTypes.default.func.isRequired
+    }),
+    "actions": _propTypes.default.shape({
+      "delete": _propTypes.default.func.isRequired,
+      "edit": _propTypes.default.func.isRequired
+    }),
+    "batchSelection": _propTypes.default.shape({
+      "selected": _propTypes.default.func.isRequired
+    }),
+    "confirm": _propTypes.default.shape({
+      "no": _propTypes.default.func.isRequired,
+      "yes": _propTypes.default.func.isRequired
+    }),
+    "date": _propTypes.default.shape({
+      "dateFnsLocale": _propTypes.default.func.isRequired
+    }),
+    "dialog": _propTypes.default.shape({
+      "ariaLabels": _propTypes.default.shape({
+        "close": _propTypes.default.func.isRequired
+      }).isRequired
+    }),
+    "dialogFullScreen": _propTypes.default.shape({
+      "ariaLabels": _propTypes.default.shape({
+        "close": _propTypes.default.func.isRequired
+      }).isRequired
+    }),
+    "errors": _propTypes.default.shape({
+      "messages": _propTypes.default.shape({
+        "formSummary": _propTypes.default.func.isRequired
+      }).isRequired
+    }),
+    "heading": _propTypes.default.shape({
+      "backLinkAriaLabel": _propTypes.default.func.isRequired
+    }),
+    "link": _propTypes.default.shape({
+      "skipLinkLabel": _propTypes.default.func.isRequired
+    }),
+    "locale": _propTypes.default.func,
+    "message": _propTypes.default.shape({
+      "closeButtonAriaLabel": _propTypes.default.func.isRequired
+    }),
+    "numeralDate": _propTypes.default.shape({
+      "validation": _propTypes.default.shape({
+        "day": _propTypes.default.func.isRequired,
+        "month": _propTypes.default.func.isRequired,
+        "year": _propTypes.default.func.isRequired
+      }).isRequired
+    }),
+    "pager": _propTypes.default.shape({
+      "first": _propTypes.default.func.isRequired,
+      "last": _propTypes.default.func.isRequired,
+      "next": _propTypes.default.func.isRequired,
+      "ofY": _propTypes.default.func.isRequired,
+      "pageX": _propTypes.default.func.isRequired,
+      "previous": _propTypes.default.func.isRequired,
+      "records": _propTypes.default.func.isRequired,
+      "show": _propTypes.default.func.isRequired
+    }),
+    "select": _propTypes.default.shape({
+      "actionButtonText": _propTypes.default.func.isRequired,
+      "noResultsForTerm": _propTypes.default.func.isRequired,
+      "placeholder": _propTypes.default.func.isRequired
+    }),
+    "sidebar": _propTypes.default.shape({
+      "ariaLabels": _propTypes.default.shape({
+        "close": _propTypes.default.func.isRequired
+      }).isRequired
+    }),
+    "switch": _propTypes.default.shape({
+      "off": _propTypes.default.func.isRequired,
+      "on": _propTypes.default.func.isRequired
+    }),
+    "textEditor": _propTypes.default.shape({
+      "ariaLabels": _propTypes.default.shape({
+        "bold": _propTypes.default.func.isRequired,
+        "bulletList": _propTypes.default.func.isRequired,
+        "italic": _propTypes.default.func.isRequired,
+        "numberList": _propTypes.default.func.isRequired
+      }).isRequired,
+      "tooltipMessages": _propTypes.default.shape({
+        "bold": _propTypes.default.func.isRequired,
+        "bulletList": _propTypes.default.func.isRequired,
+        "italic": _propTypes.default.func.isRequired,
+        "numberList": _propTypes.default.func.isRequired
+      }).isRequired
+    }),
+    "tileSelect": _propTypes.default.shape({
+      "deselect": _propTypes.default.func.isRequired
+    }),
+    "toast": _propTypes.default.shape({
+      "ariaLabels": _propTypes.default.shape({
+        "close": _propTypes.default.func.isRequired
+      }).isRequired
     })
-  }),
-  children: _propTypes.default.node.isRequired
+  })
 };
 var _default = I18nProvider;
 exports.default = _default;

package/lib/components/i18n-provider/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./i18n-provider";
+export { default } from "./i18n-provider.component";
+export type { I18nProviderProps } from "./i18n-provider.component";

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

@@ -180,16 +180,17 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
 
     fillLastFilterCharacter(key);
   }, [fillLastFilterCharacter, onKeyDown, readOnly]);
+  const valueToUse = isControlled.current ? value : selectedValue;
   const handleGlobalClick = (0, _react.useCallback)(event => {
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
     isMouseDownReported.current = false;
 
     if (notInContainer && notInList) {
-      setMatchingText(selectedValue, true);
+      setMatchingText(valueToUse, true);
       setOpen(false);
     }
-  }, [setMatchingText, selectedValue]);
+  }, [setMatchingText, valueToUse]);
   (0, _react.useEffect)(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
@@ -433,7 +434,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     multiColumn: multiColumn,
     loaderDataRole: "filterable-select-list-loader",
     listPlacement: listPlacement,
-    flipEnabled: flipEnabled
+    flipEnabled: flipEnabled,
+    isOpen: isOpen
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -450,11 +452,11 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     activeDescendantId: activeDescendantId,
     labelId: label ? labelId.current : undefined,
-    "aria-controls": isOpen ? selectListId.current : undefined,
+    "aria-controls": selectListId.current,
     isOpen: isOpen,
     hasTextCursor: true,
     textboxRef: textboxRef
-  }, getTextboxProps()))), isOpen && selectList);
+  }, getTextboxProps()))), selectList);
 });
 
 FilterableSelect.propTypes = { ..._selectTextbox.formInputPropTypes,

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

@@ -453,7 +453,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
-    multiselectValues: actualValue
+    multiselectValues: actualValue,
+    isOpen: isOpen
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({
@@ -473,12 +474,12 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, accessibilityLabel), /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
     accessibilityLabelId: accessibilityLabelId.current,
     activeDescendantId: activeDescendantId,
-    "aria-controls": isOpen ? selectListId.current : undefined,
+    "aria-controls": selectListId.current,
     hasTextCursor: true,
     isOpen: isOpen,
     labelId: labelId.current,
     textboxRef: textboxRef
-  }, getTextboxProps()))), isOpen && selectList);
+  }, getTextboxProps()))), selectList);
 });
 
 MultiSelect.propTypes = { ..._selectTextbox.formInputPropTypes,

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

@@ -76,6 +76,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   loaderDataRole,
   listPlacement = "bottom-start",
   flipEnabled = true,
+  isOpen,
   ...listProps
 }, listContainerRef) => {
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = (0, _react.useState)(-1);
@@ -91,30 +92,35 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     blockScroll,
     allowScroll
   } = (0, _useScrollBlock.default)();
+  const updateListHeight = (0, _react.useCallback)(() => {
+    if (isOpen) {
+      let newHeight = listRef.current.clientHeight;
 
-  const updateListHeight = () => {
-    let newHeight = listRef.current.clientHeight;
+      if (listActionButtonRef.current) {
+        newHeight += listActionButtonRef.current.parentElement.clientHeight;
+      }
 
-    if (listActionButtonRef.current) {
-      newHeight += listActionButtonRef.current.parentElement.clientHeight;
+      setListHeight(`${newHeight}px`);
     }
-
-    setListHeight(`${newHeight}px`);
-  };
-
+  }, [isOpen]);
   const listCallbackRef = (0, _react.useCallback)(element => {
     listRef.current = element;
 
     if (element) {
       setTimeout(updateListHeight, 0);
     }
-  }, []);
+  }, [updateListHeight]);
   (0, _react.useEffect)(() => {
-    blockScroll();
+    if (isOpen) {
+      blockScroll();
+    }
+
     return () => {
-      allowScroll();
+      if (isOpen) {
+        allowScroll();
+      }
     };
-  }, [allowScroll, blockScroll]);
+  }, [allowScroll, blockScroll, isOpen]);
   (0, _react.useLayoutEffect)(() => {
     if (multiColumn) {
       setScrollbarWidth(tableRef.current.offsetWidth - tableRef.current.clientWidth);
@@ -138,6 +144,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       selectionType: "click"
     });
   }, [onSelect]);
+  const childIds = (0, _react.useMemo)(() => _react.default.Children.map(children, () => (0, _guid.default)()), [children]);
   const childrenWithListProps = (0, _react.useMemo)(() => _react.default.Children.map(children, (child, index) => {
     if (!child || child.type !== _option.default && child.type !== _optionRow.default) {
       return child;
@@ -145,13 +152,13 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
 
     const newProps = {
       index,
-      id: (0, _guid.default)(),
+      id: childIds[index],
       onSelect: handleSelect,
       hidden: isLoading && _react.default.Children.count(children) === 1,
       ref: optionRefList[index]
     };
     return /*#__PURE__*/_react.default.cloneElement(child, newProps);
-  }), [children, handleSelect, isLoading, optionRefList]);
+  }), [children, handleSelect, isLoading, optionRefList, childIds]);
   const childrenList = (0, _react.useMemo)(() => _react.default.Children.toArray(childrenWithListProps), [childrenWithListProps]);
   const lastOptionIndex = (0, _react.useMemo)(() => {
     let lastIndex = 0;
@@ -218,6 +225,10 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [anchorElement]);
   const handleGlobalKeydown = (0, _react.useCallback)(event => {
+    if (!isOpen) {
+      return;
+    }
+
     const {
       key
     } = event;
@@ -251,7 +262,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       focusOnAnchor();
       highlightNextItem(key);
     }
-  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor]);
+  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor, isOpen]);
   const handleListScroll = (0, _react.useCallback)(event => {
     const element = event.target;
 
@@ -273,7 +284,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       window.removeEventListener("resize", assignListWidth);
     };
   }, [assignListWidth]);
-  (0, _react.useLayoutEffect)(updateListHeight, [children]);
+  (0, _react.useLayoutEffect)(updateListHeight, [children, updateListHeight]);
   (0, _react.useEffect)(() => {
     const keyboardEvent = "keydown";
     const listElement = listRef.current;
@@ -345,7 +356,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     reference: anchorRef,
     onFirstUpdate: setPlacementCallback,
     modifiers: popoverModifiers,
-    disableBackgroundUI: true
+    isOpen: isOpen
   }, /*#__PURE__*/_react.default.createElement(_selectList.StyledPopoverContainer, {
     height: listHeight,
     width: listWidth,
@@ -428,7 +439,12 @@ SelectList.propTypes = {
   listPlacement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
 
   /** Use the opposite list placement if the set placement does not fit */
-  flipEnabled: _propTypes.default.bool
+  flipEnabled: _propTypes.default.bool,
+
+  /** @private @ignore
+   * Hides the list (with CSS display: none) if not set
+   */
+  isOpen: _propTypes.default.bool
 };
 var _default = SelectList;
 exports.default = _default;

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

@@ -356,7 +356,8 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     multiColumn: multiColumn,
     loaderDataRole: "simple-select-list-loader",
     listPlacement: listPlacement,
-    flipEnabled: flipEnabled
+    flipEnabled: flipEnabled,
+    isOpen: isOpen
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_select.default, _extends({
@@ -370,12 +371,12 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_selectTextbox.default, _extends({
-    "aria-controls": isOpen ? selectListId.current : undefined,
+    "aria-controls": selectListId.current,
     activeDescendantId: activeDescendantId,
     labelId: labelId.current,
     isOpen: isOpen,
     textboxRef: textboxRef
-  }, getTextboxProps()))), isOpen && selectList);
+  }, getTextboxProps()))), selectList);
 });
 
 SimpleSelect.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "110.4.0",
+  "version": "110.4.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

package/esm/components/i18n-provider/i18n-provider.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-import Locale from "../../locales";
-
-export interface I18nProviderProps {
-  locale: Partial<Locale>;
-  children: React.ReactNode;
-}
-
-declare const I18nProvider: React.FunctionComponent<I18nProviderProps>;
-export default I18nProvider;

package/lib/components/i18n-provider/i18n-provider.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-import Locale from "../../locales";
-
-export interface I18nProviderProps {
-  locale: Partial<Locale>;
-  children: React.ReactNode;
-}
-
-declare const I18nProvider: React.FunctionComponent<I18nProviderProps>;
-export default I18nProvider;