carbon-react 110.2.4 → 110.4.1

package/esm/components/menu/menu-item/menu-item.style.js

@@ -15,6 +15,7 @@ const StyledMenuItemWrapper = styled.a`
   clickToOpen,
   maxWidth,
   inFullscreenView,
+  overrideColor,
   as
 }) => css`
     display: inline-block;
@@ -23,43 +24,51 @@ const StyledMenuItemWrapper = styled.a`
     height: 40px;
     position: relative;
     cursor: pointer;
-    background-color: ${menuConfigVariants[menuType].background};
+    ${!overrideColor && css`
+        background-color: ${menuConfigVariants[menuType].background};
+      `}};
+    
+    ${overrideColor && css`
+        &&&& {
+          background-color: ${variant === "alternate" ? menuConfigVariants[menuType].alternate : menuConfigVariants[menuType].submenuItemBackground};
+        }
+      `}
 
     ${!inFullscreenView && css`
-      max-width: inherit;
-
-      a,
-      button {
-        ${maxWidth && css`
-          box-sizing: border-box;
-          max-width: inherit;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          vertical-align: bottom;
-        `}
-      }
-
-      a:focus,
-      button:focus {
-        box-shadow: inset 0 0 0 var(--borderWidth300)
-          var(--colorsSemanticFocus500);
-        background-color: ${menuConfigVariants[menuType].background};
-        color: ${menuConfigVariants[menuType].color};
-        z-index: 1;
-        position: relative;
-      }
+        max-width: inherit;
+
+        a,
+        button {
+          ${maxWidth && css`
+            box-sizing: border-box;
+            max-width: inherit;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            vertical-align: bottom;
+          `}
+        }
 
-      a:hover,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-        color: var(--colorsComponentsMenuYang100);
+        a:focus,
+        button:focus {
+          box-shadow: inset 0 0 0 var(--borderWidth300)
+            var(--colorsSemanticFocus500);
+          background-color: ${menuConfigVariants[menuType].background};
+          color: ${menuConfigVariants[menuType].color};
+          z-index: 1;
+          position: relative;
+        }
 
-        [data-component="icon"] {
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
           color: var(--colorsComponentsMenuYang100);
+
+          [data-component="icon"] {
+            color: var(--colorsComponentsMenuYang100);
+          }
         }
-      }
-    `}
+      `}
 
     a,
     ${StyledLink} a,
@@ -92,159 +101,159 @@ const StyledMenuItemWrapper = styled.a`
     }
 
     ${selected && css`
-      background-color: ${menuConfigVariants[menuType].selected};
-
-      a:focus,
-      button:focus {
         background-color: ${menuConfigVariants[menuType].selected};
-      }
 
-      a:hover,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-      }
-    `}
+        a:focus,
+        button:focus {
+          background-color: ${menuConfigVariants[menuType].selected};
+        }
+
+        a:hover,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
+        }
+      `}
 
     ${variant === "alternate" && !inFullscreenView && css`
-      &&& {
-        background-color: ${menuConfigVariants[menuType].alternate};
-      }
+        &&& {
+          background-color: ${menuConfigVariants[menuType].alternate};
+        }
 
-      &&& a:focus,
-      &&& button:focus {
-        background-color: ${menuConfigVariants[menuType].alternate};
-      }
+        &&& a:focus,
+        &&& button:focus {
+          background-color: ${menuConfigVariants[menuType].alternate};
+        }
 
-      &&& a:hover,
-      &&& button:hover {
-        background-color: ${menuConfigVariants[menuType].alternateHover};
-      }
-    `}
+        &&& a:hover,
+        &&& button:hover {
+          background-color: ${menuConfigVariants[menuType].alternateHover};
+        }
+      `}
 
     ${isOpen && css`
-      a,
-      button {
-        background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-        color: ${menuConfigVariants[menuType].color};
-      }
-    `} 
+        a,
+        button {
+          background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+          color: ${menuConfigVariants[menuType].color};
+        }
+      `} 
     
     ${hasSubmenu && css`
-      background-color: ${menuConfigVariants[menuType].submenuBackground};
-
-      a:focus,
-      button:focus {
         background-color: ${menuConfigVariants[menuType].submenuBackground};
-        color: ${menuConfigVariants[menuType].color};
 
-        [data-component="icon"] {
+        a:focus,
+        button:focus {
+          background-color: ${menuConfigVariants[menuType].submenuBackground};
           color: ${menuConfigVariants[menuType].color};
+
+          [data-component="icon"] {
+            color: ${menuConfigVariants[menuType].color};
+          }
+
+          ${clickToOpen && isOpen && css`
+            background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
+          `}
         }
 
-        ${clickToOpen && isOpen && css`
+        a:hover,
+        button:hover {
           background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
-        `}
-      }
+          color: var(--colorsComponentsMenuYang100);
 
-      a:hover,
-      button:hover {
-        background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
-        color: var(--colorsComponentsMenuYang100);
+          ${!(href || clickToOpen) && css`
+            cursor: default;
+            background-color: ${menuConfigVariants[menuType].submenuItemBackground};
+            color: ${menuConfigVariants[menuType].color};
+          `}
 
-        ${!(href || clickToOpen) && css`
-          cursor: default;
-          background-color: ${menuConfigVariants[menuType].submenuItemBackground};
-          color: ${menuConfigVariants[menuType].color};
-        `}
-
-        [data-component="icon"] {
-          color: ${menuConfigVariants[menuType].color};
+          [data-component="icon"] {
+            color: ${menuConfigVariants[menuType].color};
+          }
         }
-      }
 
-      ${selected && css`
-        background-color: ${menuConfigVariants[menuType].submenuSelected};
-
-        a:focus,
-        button:focus {
+        ${selected && css`
           background-color: ${menuConfigVariants[menuType].submenuSelected};
-        }
 
-        a:hover,
-        button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-          color: var(--colorsComponentsMenuYang100);
-        }
-      `}
+          a:focus,
+          button:focus {
+            background-color: ${menuConfigVariants[menuType].submenuSelected};
+          }
 
-      ${showDropdownArrow && css`
-        > a,
-        > button {
-          padding-right: 32px;
-        }
+          a:hover,
+          button:hover {
+            background-color: var(--colorsComponentsMenuAutumnStandard600);
+            color: var(--colorsComponentsMenuYang100);
+          }
+        `}
 
-        a::before,
-        button::before {
-          display: block;
-          margin-top: -2px;
-          pointer-events: none;
-          position: absolute;
-          right: 16px;
-          top: 50%;
-          z-index: 2;
-          content: "";
-          width: 0;
-          height: 0;
-          border-top: 5px solid ${menuConfigVariants[menuType].text};
-          border-right: 4px solid transparent;
-          border-bottom: 4px solid transparent;
-          border-left: 4px solid transparent;
-        }
-      `};
-    `}
+        ${showDropdownArrow && css`
+          > a,
+          > button {
+            padding-right: 32px;
+          }
+
+          a::before,
+          button::before {
+            display: block;
+            margin-top: -2px;
+            pointer-events: none;
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            z-index: 2;
+            content: "";
+            width: 0;
+            height: 0;
+            border-top: 5px solid ${menuConfigVariants[menuType].text};
+            border-right: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+            border-left: 4px solid transparent;
+          }
+        `}
+      `}
 
     ${isSearch && css`
-      padding: 2px 16px;
-    `}
+        padding: 2px 16px;
+      `}
 
     ${inFullscreenView && css`
-      ${as === "div" && css`
-        cursor: default;
-        padding: 0 16px;
+        ${as === "div" && css`
+          cursor: default;
+          padding: 0 16px;
 
-        :hover {
-          background: transparent;
-        }
-      `}
+          :hover {
+            background: transparent;
+          }
+        `}
 
-      a,
+        a,
       ${StyledLink} a,
       button,
       ${StyledLink} button {
-        width: 100vw;
-        box-sizing: border-box;
-      }
-
-      a:focus,
-      button:focus {
-        box-shadow: inset 0 0 0 var(--borderWidth300)
-          var(--colorsSemanticFocus500);
-        z-index: 1;
-        position: relative;
-      }
-
-      a:focus,
-      a:hover,
-      button:focus,
-      button:hover {
-        background-color: var(--colorsComponentsMenuAutumnStandard600);
-        color: var(--colorsComponentsMenuYang100);
-
-        [data-component="icon"] {
+          width: 100vw;
+          box-sizing: border-box;
+        }
+
+        a:focus,
+        button:focus {
+          box-shadow: inset 0 0 0 var(--borderWidth300)
+            var(--colorsSemanticFocus500);
+          z-index: 1;
+          position: relative;
+        }
+
+        a:focus,
+        a:hover,
+        button:focus,
+        button:hover {
+          background-color: var(--colorsComponentsMenuAutumnStandard600);
           color: var(--colorsComponentsMenuYang100);
+
+          [data-component="icon"] {
+            color: var(--colorsComponentsMenuYang100);
+          }
         }
-      }
-    `}
+      `}
   `}
 `;
 export default StyledMenuItemWrapper;

package/esm/components/menu/scrollable-block/scrollable-block.component.js

@@ -3,6 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import MenuContext from "../menu.context";
+import MenuItem from "../menu-item";
 import SubmenuContext from "../__internal__/submenu/submenu.context";
 import StyledScrollableBlock from "./scrollable-block.style";
 import Box from "../../box";
@@ -11,6 +12,8 @@ const ScrollableBlock = ({
   children,
   height,
   variant = "default",
+  parent,
+  parentVariant,
   ...rest
 }) => {
   const menuContext = useContext(MenuContext);
@@ -29,14 +32,19 @@ const ScrollableBlock = ({
   return /*#__PURE__*/React.createElement(StyledScrollableBlock, _extends({
     "data-component": "submenu-scrollable-block",
     menuType: menuContext.menuType,
-    variant: variant,
-    role: "presentation"
-  }, rest), /*#__PURE__*/React.createElement(Box, {
+    variant: variant
+  }, rest), parent && /*#__PURE__*/React.createElement(MenuItem, {
+    overrideColor: true,
+    variant: parentVariant,
+    as: "div",
+    href: "#"
+  }, parent), /*#__PURE__*/React.createElement(Box, {
     overflowY: "scroll",
     scrollVariant: scrollVariants[menuContext.menuType],
     height: height,
     p: 0,
-    role: "presentation"
+    as: "ul",
+    role: "list"
   }, React.Children.map(children, (child, index) => {
     let isFocused = false;
     const blockItemFocused = focusIndex >= blockIndex;
@@ -62,6 +70,14 @@ ScrollableBlock.propTypes = {
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /** set the colour variant for a menuType */
-  variant: PropTypes.oneOf(["default", "alternate"])
+  variant: PropTypes.oneOf(["default", "alternate"]),
+
+  /** the element, if any, displayed at the top of the block to be its semantic "parent",
+   * but not part of the scrollable section
+   */
+  parent: PropTypes.node,
+
+  /** the colour variant for the parent element, if different from the variant of the block */
+  parentVariant: PropTypes.oneOf(["default", "alternate"])
 };
 export default ScrollableBlock;

package/esm/components/menu/scrollable-block/scrollable-block.d.ts

@@ -7,6 +7,12 @@ export interface ScrollableBlockProps {
   height?: string | number;
   /** set the colour variant for a menuType */
   variant?: "default" | "alternate";
+  /** the element, if any, displayed at the top of the block to be its semantic "parent",
+   * but not part of the scrollable section
+   */
+  parent?: React.ReactElement;
+  /** the colour variant for the parent element, if different from the variant of the block */
+  parentVariant?: "default" | "alternate";
 }
 
 declare function ScrollableBlock(props: ScrollableBlockProps): JSX.Element;

package/esm/components/menu/scrollable-block/scrollable-block.style.js

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 import StyledMenuItemWrapper from "../menu-item/menu-item.style";
 import menuConfigVariants from "../menu.config";
-const StyledScrollableBlock = styled.div`
+const StyledScrollableBlock = styled.li`
   ${({
   menuType,
   variant

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 */