carbon-react 106.4.1 → 106.6.0

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -35,15 +35,22 @@ const MultiActionButton = ({
   const ref = useRef();
   const buttonRef = useRef();
   const buttonContainer = useRef();
-  const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
   const buttonChildren = React.Children.toArray(children);
   const additionalButtons = useRef(buttonChildren.map(() => /*#__PURE__*/React.createRef()));
   const listening = useRef(false);
   const isMainButtonFocused = useRef(false);
+  const isFocusedAfterClosing = useRef(false);
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
-  const [removeHandleClickOutside, setRemoveHandleClickOutside] = useState(false);
-  const [removeHandleKeyDown, setRemoveHandleKeyDown] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
+  const hideButtons = useCallback(() => {
+    if (isMainButtonFocused.current) return;
+    setShowAdditionalButtons(false);
+  }, []);
+
+  const showButtons = () => {
+    setShowAdditionalButtons(true);
+    setMinWidth(ref.current.getBoundingClientRect().width);
+  };
 
   const childrenWithProps = () => {
     return buttonChildren.map((child, index) => {
@@ -51,7 +58,16 @@ const MultiActionButton = ({
         key: index.toString(),
         role: "menuitem",
         ref: additionalButtons.current[index],
-        tabIndex: -1
+        tabIndex: -1,
+        onClick: ev => {
+          var _buttonRef$current;
+
+          if (child.props.onClick) child.props.onClick(ev);
+          isMainButtonFocused.current = false;
+          hideButtons();
+          isFocusedAfterClosing.current = true;
+          (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+        }
       };
 
       if (child.type === Button) {
@@ -62,17 +78,6 @@ const MultiActionButton = ({
     });
   };
 
-  const hideButtons = useCallback(() => {
-    if (isMainButtonFocused.current) return;
-    setShowAdditionalButtons(false);
-    setRemoveHandleClickOutside(true);
-    /* istanbul ignore else */
-
-    if (listening.current) {
-      setRemoveHandleKeyDown(true);
-      listening.current = false;
-    }
-  }, []);
   const handleKeyDown = useCallback(ev => {
     const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
     let nextIndex = -1;
@@ -85,7 +90,9 @@ const MultiActionButton = ({
     if (Events.isDownKey(ev)) {
       nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
       ev.preventDefault();
-    } else if (Events.isTabKey(ev)) {
+    }
+
+    if (Events.isTabKey(ev)) {
       var _elements$indexOf;
 
       const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
@@ -98,47 +105,79 @@ const MultiActionButton = ({
     if (nextIndex > -1) {
       additionalButtons.current[nextIndex].current.focus();
     }
-  }, [children.length, hideButtons]);
+  }, [children, hideButtons]);
   const handleClickOutside = useCallback(({
     target
   }) => {
     if (!ref.current.contains(target) && buttonContainer.current && !buttonContainer.current.contains(target)) {
-      hideButtons(handleClickOutside, undefined);
+      hideButtons();
     }
   }, [hideButtons]);
-
-  const showButtons = () => {
-    document.addEventListener(userInputType, handleClickOutside);
-    setShowAdditionalButtons(true);
-    setMinWidth(ref.current.getBoundingClientRect().width);
+  const addListeners = useCallback(() => {
     /* istanbul ignore else */
-
     if (!listening.current) {
+      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  };
+  }, [handleKeyDown, handleClickOutside]);
+  const removeListeners = useCallback(() => {
+    /* istanbul ignore else */
+    if (listening.current) {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+      listening.current = false;
+    }
+  }, [handleKeyDown, handleClickOutside]);
+  useEffect(() => {
+    if (showAdditionalButtons) {
+      addListeners();
+    }
+
+    return () => {
+      removeListeners();
+    };
+  }, [showAdditionalButtons, addListeners, removeListeners]);
 
   const handleMainButtonKeyDown = ev => {
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev)) {
-      additionalButtons.current[0].current.focus();
+    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev)) {
+      ev.preventDefault();
+
+      if (!showAdditionalButtons) {
+        showButtons();
+      } // see if setTimeout could be removed after we update react to v18 thanks to the concurrent mode
+
+
+      setTimeout(() => {
+        var _additionalButtons$cu, _additionalButtons$cu2;
+
+        (_additionalButtons$cu = additionalButtons.current[0]) === null || _additionalButtons$cu === void 0 ? void 0 : (_additionalButtons$cu2 = _additionalButtons$cu.current) === null || _additionalButtons$cu2 === void 0 ? void 0 : _additionalButtons$cu2.focus();
+      }, 0);
     }
   };
 
   const focusMainButton = () => {
     isMainButtonFocused.current = true;
+
+    if (isFocusedAfterClosing.current) {
+      isFocusedAfterClosing.current = false;
+      return;
+    }
+
     showButtons();
   };
 
+  const blurMainButton = () => {
+    isMainButtonFocused.current = false;
+  };
+
   const mainButtonProps = () => {
     const opts = {
       disabled,
       displayed: showAdditionalButtons,
       onTouchStart: showButtons,
       onFocus: focusMainButton,
-      onBlur: () => {
-        isMainButtonFocused.current = false;
-      },
+      onBlur: blurMainButton,
       onKeyDown: handleMainButtonKeyDown,
       buttonType: buttonType || as,
       size,
@@ -165,23 +204,6 @@ const MultiActionButton = ({
     ref: buttonContainer
   }, childrenWithProps()));
 
-  useEffect(() => {
-    if (removeHandleClickOutside) {
-      setRemoveHandleClickOutside(false);
-      document.removeEventListener(userInputType, handleClickOutside);
-    }
-
-    if (removeHandleKeyDown) {
-      setRemoveHandleKeyDown(false);
-      document.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [handleClickOutside, handleKeyDown, removeHandleClickOutside, removeHandleKeyDown, userInputType]);
-  useEffect(() => {
-    return () => {
-      document.removeEventListener(userInputType, handleClickOutside);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleClickOutside, handleKeyDown, userInputType]);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -18,9 +18,15 @@ const StyledMultiActionButton = styled.div`
     }
 
     &:focus {
+      background-color: var(--colorsActionMajor700);
       border: 3px solid var(--colorsSemanticFocus500);
       outline: none;
-      margin: -1px;
+      margin: 0 -1px;
+
+      &,
+      ${StyledIcon} {
+        color: var(--colorsActionMajorYang100);
+      }
     }
 
     ${({

package/esm/components/portrait/portrait-initials.component.js

@@ -58,7 +58,8 @@ const PortraitInitials = ({
   return /*#__PURE__*/React.createElement(StyledPortraitInitials, _extends({
     "data-element": "initials",
     size: size,
-    shape: shape
+    shape: shape,
+    initials: initials
   }, rest), /*#__PURE__*/React.createElement(StyledPortraitInitialsImg, {
     src: generateDataUrl(),
     alt: alt

package/esm/components/portrait/portrait.style.js

@@ -7,7 +7,8 @@ import Icon from "../icon";
 import { PORTRAIT_SHAPES, PORTRAIT_SIZES, PORTRAIT_SIZE_PARAMS } from "./portrait.config";
 
 function stylingForSize({
-  size
+  size,
+  initials
 }) {
   const params = PORTRAIT_SIZE_PARAMS[size];
 
@@ -15,6 +16,14 @@ function stylingForSize({
     return css``;
   }
 
+  if (initials) {
+    return css`
+      width: inherit;
+      height: inherit;
+      margin: 1px;
+    `;
+  }
+
   return css`
     width: ${params.dimensions}px;
     height: ${params.dimensions}px;
@@ -72,7 +81,16 @@ export const StyledPortraitInitials = styled.div`
   box-sizing: border-box;
   ${stylingForSize}
   ${stylingForShape}
-  border: 1px solid var(--colorsUtilityMajor200);
+  outline: 1px solid var(--colorsUtilityMajor200);
+
+  /* Styling for safari. This ensures that there is no outline on the component but that a border is still present 
+     to achieve the same styling as Chrome and Firefox */
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+      border: 1px solid var(--colorsUtilityMajor200);
+      outline: none;
+    }
+  }
 `;
 StyledPortraitInitials.propTypes = {
   size: PropTypes.oneOf(PORTRAIT_SIZES).isRequired,

package/esm/components/split-button/split-button-toggle.style.js

@@ -53,6 +53,15 @@ const StyledSplitButtonToggle = styled(StyledButton)`
     ${StyledButton} + & ${StyledIcon} {
       margin-left: 0;
     }
+
+    &:focus {
+      background-color: var(--colorsActionMajor500);
+
+      &,
+      ${StyledIcon} {
+        color: var(--colorsActionMajorYang100);
+      }
+    }
   `}
 `;
 export default StyledSplitButtonToggle;

package/esm/components/split-button/split-button.component.js

@@ -44,14 +44,16 @@ const SplitButton = ({
 
   const theme = useContext(ThemeContext) || baseTheme;
   const isToggleButtonFocused = useRef(false);
+  const isFocusedAfterClosing = useRef(false);
   const buttonLabelId = useRef(guid());
-  const additionalButtons = useRef([]);
+  const buttonChildren = React.Children.toArray(children);
+  const additionalButtons = useRef(buttonChildren.map(() => /*#__PURE__*/React.createRef()));
   const splitButtonNode = useRef();
   const toggleButton = useRef();
   const buttonContainer = useRef();
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
-  const userInputType = useRef("ontouchstart" in document.documentElement ? "touchstart" : "click");
+  const listening = useRef(false);
   const hideButtons = useCallback(() => {
     if (isToggleButtonFocused.current) return;
     setShowAdditionalButtons(false);
@@ -64,12 +66,8 @@ const SplitButton = ({
     }
   }, [hideButtons]);
   const handleKeyDown = useCallback(ev => {
-    if (!showAdditionalButtons) {
-      return;
-    }
-
     const numOfChildren = children.length - 1;
-    const currentIndex = additionalButtons.current.findIndex(isActiveElement);
+    const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
     let nextIndex = -1;
 
     if (Events.isUpKey(ev)) {
@@ -80,7 +78,9 @@ const SplitButton = ({
     if (Events.isDownKey(ev)) {
       nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
       ev.preventDefault();
-    } else if (Events.isTabKey(ev)) {
+    }
+
+    if (Events.isTabKey(ev)) {
       var _elements$indexOf;
 
       const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
@@ -91,18 +91,34 @@ const SplitButton = ({
     }
 
     if (nextIndex > -1) {
-      additionalButtons.current[nextIndex].focus();
+      additionalButtons.current[nextIndex].current.focus();
     }
-  }, [hideButtons, children, showAdditionalButtons]);
-  useEffect(() => {
-    const inputType = userInputType.current;
-    document.addEventListener(inputType, handleClickOutside);
-    document.addEventListener("keydown", handleKeyDown);
-    return function cleanup() {
-      document.removeEventListener(inputType, handleClickOutside);
+  }, [hideButtons, children]);
+  const addListeners = useCallback(() => {
+    /* istanbul ignore else */
+    if (!listening.current) {
+      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("keydown", handleKeyDown);
+      listening.current = true;
+    }
+  }, [handleKeyDown, handleClickOutside]);
+  const removeListeners = useCallback(() => {
+    /* istanbul ignore else */
+    if (listening.current) {
+      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
+      listening.current = false;
+    }
+  }, [handleKeyDown, handleClickOutside]);
+  useEffect(() => {
+    if (showAdditionalButtons) {
+      addListeners();
+    }
+
+    return () => {
+      removeListeners();
     };
-  }, [handleClickOutside, handleKeyDown]);
+  }, [showAdditionalButtons, addListeners, removeListeners]);
 
   function mainButtonProps() {
     return {
@@ -150,11 +166,6 @@ const SplitButton = ({
     };
   }
 
-  function addRef(ref, index) {
-    if (!ref) return;
-    additionalButtons.current[index] = ref;
-  }
-
   function getIconColor() {
     const colorsMap = {
       primary: theme.colors.white,
@@ -191,8 +202,18 @@ const SplitButton = ({
   }
 
   function handleToggleButtonKeyDown(ev) {
-    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev)) {
-      additionalButtons.current[0].focus();
+    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev) || Events.isDownKey(ev)) {
+      ev.preventDefault();
+
+      if (!showAdditionalButtons) {
+        showButtons();
+      }
+
+      setTimeout(() => {
+        var _additionalButtons$cu, _additionalButtons$cu2;
+
+        (_additionalButtons$cu = additionalButtons.current[0]) === null || _additionalButtons$cu === void 0 ? void 0 : (_additionalButtons$cu2 = _additionalButtons$cu.current) === null || _additionalButtons$cu2 === void 0 ? void 0 : _additionalButtons$cu2.focus();
+      }, 0);
     }
   }
 
@@ -202,8 +223,17 @@ const SplitButton = ({
       const childProps = {
         key: index.toString(),
         role: "menuitem",
-        ref: button => addRef(button, index),
-        tabIndex: -1
+        ref: additionalButtons.current[index],
+        tabIndex: -1,
+        onClick: ev => {
+          var _toggleButton$current;
+
+          if (child.props.onClick) child.props.onClick(ev);
+          isToggleButtonFocused.current = false;
+          hideButtons();
+          isFocusedAfterClosing.current = true;
+          (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
+        }
       };
 
       if (child.type === Button) {
@@ -216,11 +246,13 @@ const SplitButton = ({
 
   function focusToggleButton() {
     isToggleButtonFocused.current = true;
-    showButtons();
-  }
 
-  function isActiveElement(node) {
-    return node === document.activeElement;
+    if (isFocusedAfterClosing.current) {
+      isFocusedAfterClosing.current = false;
+      return;
+    }
+
+    showButtons();
   }
 
   function renderAdditionalButtons() {

package/esm/components/textarea/textarea-test.stories.js

@@ -103,7 +103,7 @@ export default {
     inputWidth: 100,
     warnOverLimit: false,
     enforceCharacterLimit: true,
-    label: "",
+    label: "Textarea",
     labelHelp: "",
     labelInline: false,
     labelWidth: 30,

package/esm/components/textarea/textarea.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
+import InputPresentationStyle from "../../__internal__/input/input-presentation.style";
 import StyledInput from "../../__internal__/input/input.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import InputIconToggleStyle from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
@@ -11,8 +12,10 @@ const StyledTextarea = styled.div`
   ${StyledInput} {
     resize: none;
     min-height: ${MIN_HEIGHT}px;
-    margin-top: 5px;
-    margin-bottom: 5px;
+  }
+
+  ${InputPresentationStyle} {
+    padding: var(--spacing150) var(--spacing200);
   }
 
   ${({

package/lib/components/multi-action-button/multi-action-button.component.js

@@ -59,17 +59,24 @@ const MultiActionButton = ({
   const ref = (0, _react.useRef)();
   const buttonRef = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
-  const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
 
   const buttonChildren = _react.default.Children.toArray(children);
 
   const additionalButtons = (0, _react.useRef)(buttonChildren.map(() => /*#__PURE__*/_react.default.createRef()));
   const listening = (0, _react.useRef)(false);
   const isMainButtonFocused = (0, _react.useRef)(false);
+  const isFocusedAfterClosing = (0, _react.useRef)(false);
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
-  const [removeHandleClickOutside, setRemoveHandleClickOutside] = (0, _react.useState)(false);
-  const [removeHandleKeyDown, setRemoveHandleKeyDown] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
+  const hideButtons = (0, _react.useCallback)(() => {
+    if (isMainButtonFocused.current) return;
+    setShowAdditionalButtons(false);
+  }, []);
+
+  const showButtons = () => {
+    setShowAdditionalButtons(true);
+    setMinWidth(ref.current.getBoundingClientRect().width);
+  };
 
   const childrenWithProps = () => {
     return buttonChildren.map((child, index) => {
@@ -77,7 +84,16 @@ const MultiActionButton = ({
         key: index.toString(),
         role: "menuitem",
         ref: additionalButtons.current[index],
-        tabIndex: -1
+        tabIndex: -1,
+        onClick: ev => {
+          var _buttonRef$current;
+
+          if (child.props.onClick) child.props.onClick(ev);
+          isMainButtonFocused.current = false;
+          hideButtons();
+          isFocusedAfterClosing.current = true;
+          (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+        }
       };
 
       if (child.type === _button.default) {
@@ -88,17 +104,6 @@ const MultiActionButton = ({
     });
   };
 
-  const hideButtons = (0, _react.useCallback)(() => {
-    if (isMainButtonFocused.current) return;
-    setShowAdditionalButtons(false);
-    setRemoveHandleClickOutside(true);
-    /* istanbul ignore else */
-
-    if (listening.current) {
-      setRemoveHandleKeyDown(true);
-      listening.current = false;
-    }
-  }, []);
   const handleKeyDown = (0, _react.useCallback)(ev => {
     const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
     let nextIndex = -1;
@@ -111,7 +116,9 @@ const MultiActionButton = ({
     if (_events.default.isDownKey(ev)) {
       nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
       ev.preventDefault();
-    } else if (_events.default.isTabKey(ev)) {
+    }
+
+    if (_events.default.isTabKey(ev)) {
       var _elements$indexOf;
 
       const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
@@ -124,47 +131,79 @@ const MultiActionButton = ({
     if (nextIndex > -1) {
       additionalButtons.current[nextIndex].current.focus();
     }
-  }, [children.length, hideButtons]);
+  }, [children, hideButtons]);
   const handleClickOutside = (0, _react.useCallback)(({
     target
   }) => {
     if (!ref.current.contains(target) && buttonContainer.current && !buttonContainer.current.contains(target)) {
-      hideButtons(handleClickOutside, undefined);
+      hideButtons();
     }
   }, [hideButtons]);
-
-  const showButtons = () => {
-    document.addEventListener(userInputType, handleClickOutside);
-    setShowAdditionalButtons(true);
-    setMinWidth(ref.current.getBoundingClientRect().width);
+  const addListeners = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
-
     if (!listening.current) {
+      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  };
+  }, [handleKeyDown, handleClickOutside]);
+  const removeListeners = (0, _react.useCallback)(() => {
+    /* istanbul ignore else */
+    if (listening.current) {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+      listening.current = false;
+    }
+  }, [handleKeyDown, handleClickOutside]);
+  (0, _react.useEffect)(() => {
+    if (showAdditionalButtons) {
+      addListeners();
+    }
+
+    return () => {
+      removeListeners();
+    };
+  }, [showAdditionalButtons, addListeners, removeListeners]);
 
   const handleMainButtonKeyDown = ev => {
-    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev)) {
-      additionalButtons.current[0].current.focus();
+    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev)) {
+      ev.preventDefault();
+
+      if (!showAdditionalButtons) {
+        showButtons();
+      } // see if setTimeout could be removed after we update react to v18 thanks to the concurrent mode
+
+
+      setTimeout(() => {
+        var _additionalButtons$cu, _additionalButtons$cu2;
+
+        (_additionalButtons$cu = additionalButtons.current[0]) === null || _additionalButtons$cu === void 0 ? void 0 : (_additionalButtons$cu2 = _additionalButtons$cu.current) === null || _additionalButtons$cu2 === void 0 ? void 0 : _additionalButtons$cu2.focus();
+      }, 0);
     }
   };
 
   const focusMainButton = () => {
     isMainButtonFocused.current = true;
+
+    if (isFocusedAfterClosing.current) {
+      isFocusedAfterClosing.current = false;
+      return;
+    }
+
     showButtons();
   };
 
+  const blurMainButton = () => {
+    isMainButtonFocused.current = false;
+  };
+
   const mainButtonProps = () => {
     const opts = {
       disabled,
       displayed: showAdditionalButtons,
       onTouchStart: showButtons,
       onFocus: focusMainButton,
-      onBlur: () => {
-        isMainButtonFocused.current = false;
-      },
+      onBlur: blurMainButton,
       onKeyDown: handleMainButtonKeyDown,
       buttonType: buttonType || as,
       size,
@@ -191,23 +230,6 @@ const MultiActionButton = ({
     ref: buttonContainer
   }, childrenWithProps()));
 
-  (0, _react.useEffect)(() => {
-    if (removeHandleClickOutside) {
-      setRemoveHandleClickOutside(false);
-      document.removeEventListener(userInputType, handleClickOutside);
-    }
-
-    if (removeHandleKeyDown) {
-      setRemoveHandleKeyDown(false);
-      document.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [handleClickOutside, handleKeyDown, removeHandleClickOutside, removeHandleKeyDown, userInputType]);
-  (0, _react.useEffect)(() => {
-    return () => {
-      document.removeEventListener(userInputType, handleClickOutside);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleClickOutside, handleKeyDown, userInputType]);
   return /*#__PURE__*/_react.default.createElement(_multiActionButton.StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/lib/components/multi-action-button/multi-action-button.style.js

@@ -36,9 +36,15 @@ const StyledMultiActionButton = _styledComponents.default.div`
     }
 
     &:focus {
+      background-color: var(--colorsActionMajor700);
       border: 3px solid var(--colorsSemanticFocus500);
       outline: none;
-      margin: -1px;
+      margin: 0 -1px;
+
+      &,
+      ${_icon.default} {
+        color: var(--colorsActionMajorYang100);
+      }
     }
 
     ${({

package/lib/components/portrait/portrait-initials.component.js

@@ -78,7 +78,8 @@ const PortraitInitials = ({
   return /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitials, _extends({
     "data-element": "initials",
     size: size,
-    shape: shape
+    shape: shape,
+    initials: initials
   }, rest), /*#__PURE__*/_react.default.createElement(_portrait.StyledPortraitInitialsImg, {
     src: generateDataUrl(),
     alt: alt

package/lib/components/portrait/portrait.style.js

@@ -27,7 +27,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function stylingForSize({
-  size
+  size,
+  initials
 }) {
   const params = _portrait.PORTRAIT_SIZE_PARAMS[size];
 
@@ -35,6 +36,14 @@ function stylingForSize({
     return (0, _styledComponents.css)``;
   }
 
+  if (initials) {
+    return (0, _styledComponents.css)`
+      width: inherit;
+      height: inherit;
+      margin: 1px;
+    `;
+  }
+
   return (0, _styledComponents.css)`
     width: ${params.dimensions}px;
     height: ${params.dimensions}px;
@@ -93,7 +102,16 @@ const StyledPortraitInitials = _styledComponents.default.div`
   box-sizing: border-box;
   ${stylingForSize}
   ${stylingForShape}
-  border: 1px solid var(--colorsUtilityMajor200);
+  outline: 1px solid var(--colorsUtilityMajor200);
+
+  /* Styling for safari. This ensures that there is no outline on the component but that a border is still present 
+     to achieve the same styling as Chrome and Firefox */
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+      border: 1px solid var(--colorsUtilityMajor200);
+      outline: none;
+    }
+  }
 `;
 exports.StyledPortraitInitials = StyledPortraitInitials;
 StyledPortraitInitials.propTypes = {

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

@@ -69,6 +69,15 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
     ${_button.default} + & ${_icon.default} {
       margin-left: 0;
     }
+
+    &:focus {
+      background-color: var(--colorsActionMajor500);
+
+      &,
+      ${_icon.default} {
+        color: var(--colorsActionMajorYang100);
+      }
+    }
   `}
 `;
 var _default = StyledSplitButtonToggle;

package/lib/components/split-button/split-button.component.js

@@ -75,14 +75,18 @@ const SplitButton = ({
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext) || _themes.baseTheme;
 
   const isToggleButtonFocused = (0, _react.useRef)(false);
+  const isFocusedAfterClosing = (0, _react.useRef)(false);
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
-  const additionalButtons = (0, _react.useRef)([]);
+
+  const buttonChildren = _react.default.Children.toArray(children);
+
+  const additionalButtons = (0, _react.useRef)(buttonChildren.map(() => /*#__PURE__*/_react.default.createRef()));
   const splitButtonNode = (0, _react.useRef)();
   const toggleButton = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
-  const userInputType = (0, _react.useRef)("ontouchstart" in document.documentElement ? "touchstart" : "click");
+  const listening = (0, _react.useRef)(false);
   const hideButtons = (0, _react.useCallback)(() => {
     if (isToggleButtonFocused.current) return;
     setShowAdditionalButtons(false);
@@ -95,12 +99,8 @@ const SplitButton = ({
     }
   }, [hideButtons]);
   const handleKeyDown = (0, _react.useCallback)(ev => {
-    if (!showAdditionalButtons) {
-      return;
-    }
-
     const numOfChildren = children.length - 1;
-    const currentIndex = additionalButtons.current.findIndex(isActiveElement);
+    const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
     let nextIndex = -1;
 
     if (_events.default.isUpKey(ev)) {
@@ -111,7 +111,9 @@ const SplitButton = ({
     if (_events.default.isDownKey(ev)) {
       nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
       ev.preventDefault();
-    } else if (_events.default.isTabKey(ev)) {
+    }
+
+    if (_events.default.isTabKey(ev)) {
       var _elements$indexOf;
 
       const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
@@ -122,18 +124,34 @@ const SplitButton = ({
     }
 
     if (nextIndex > -1) {
-      additionalButtons.current[nextIndex].focus();
+      additionalButtons.current[nextIndex].current.focus();
     }
-  }, [hideButtons, children, showAdditionalButtons]);
-  (0, _react.useEffect)(() => {
-    const inputType = userInputType.current;
-    document.addEventListener(inputType, handleClickOutside);
-    document.addEventListener("keydown", handleKeyDown);
-    return function cleanup() {
-      document.removeEventListener(inputType, handleClickOutside);
+  }, [hideButtons, children]);
+  const addListeners = (0, _react.useCallback)(() => {
+    /* istanbul ignore else */
+    if (!listening.current) {
+      document.addEventListener("click", handleClickOutside);
+      document.addEventListener("keydown", handleKeyDown);
+      listening.current = true;
+    }
+  }, [handleKeyDown, handleClickOutside]);
+  const removeListeners = (0, _react.useCallback)(() => {
+    /* istanbul ignore else */
+    if (listening.current) {
+      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
+      listening.current = false;
+    }
+  }, [handleKeyDown, handleClickOutside]);
+  (0, _react.useEffect)(() => {
+    if (showAdditionalButtons) {
+      addListeners();
+    }
+
+    return () => {
+      removeListeners();
     };
-  }, [handleClickOutside, handleKeyDown]);
+  }, [showAdditionalButtons, addListeners, removeListeners]);
 
   function mainButtonProps() {
     return {
@@ -181,11 +199,6 @@ const SplitButton = ({
     };
   }
 
-  function addRef(ref, index) {
-    if (!ref) return;
-    additionalButtons.current[index] = ref;
-  }
-
   function getIconColor() {
     const colorsMap = {
       primary: theme.colors.white,
@@ -222,8 +235,18 @@ const SplitButton = ({
   }
 
   function handleToggleButtonKeyDown(ev) {
-    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev)) {
-      additionalButtons.current[0].focus();
+    if (_events.default.isEnterKey(ev) || _events.default.isSpaceKey(ev) || _events.default.isDownKey(ev)) {
+      ev.preventDefault();
+
+      if (!showAdditionalButtons) {
+        showButtons();
+      }
+
+      setTimeout(() => {
+        var _additionalButtons$cu, _additionalButtons$cu2;
+
+        (_additionalButtons$cu = additionalButtons.current[0]) === null || _additionalButtons$cu === void 0 ? void 0 : (_additionalButtons$cu2 = _additionalButtons$cu.current) === null || _additionalButtons$cu2 === void 0 ? void 0 : _additionalButtons$cu2.focus();
+      }, 0);
     }
   }
 
@@ -233,8 +256,17 @@ const SplitButton = ({
       const childProps = {
         key: index.toString(),
         role: "menuitem",
-        ref: button => addRef(button, index),
-        tabIndex: -1
+        ref: additionalButtons.current[index],
+        tabIndex: -1,
+        onClick: ev => {
+          var _toggleButton$current;
+
+          if (child.props.onClick) child.props.onClick(ev);
+          isToggleButtonFocused.current = false;
+          hideButtons();
+          isFocusedAfterClosing.current = true;
+          (_toggleButton$current = toggleButton.current) === null || _toggleButton$current === void 0 ? void 0 : _toggleButton$current.focus();
+        }
       };
 
       if (child.type === _button.default) {
@@ -247,11 +279,13 @@ const SplitButton = ({
 
   function focusToggleButton() {
     isToggleButtonFocused.current = true;
-    showButtons();
-  }
 
-  function isActiveElement(node) {
-    return node === document.activeElement;
+    if (isFocusedAfterClosing.current) {
+      isFocusedAfterClosing.current = false;
+      return;
+    }
+
+    showButtons();
   }
 
   function renderAdditionalButtons() {

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

@@ -118,7 +118,7 @@ var _default = {
     inputWidth: 100,
     warnOverLimit: false,
     enforceCharacterLimit: true,
-    label: "",
+    label: "Textarea",
     labelHelp: "",
     labelInline: false,
     labelWidth: 30,

package/lib/components/textarea/textarea.style.js

@@ -9,6 +9,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
+var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
+
 var _input = _interopRequireDefault(require("../../__internal__/input/input.style"));
 
 var _label = require("../../__internal__/label/label.style");
@@ -31,8 +33,10 @@ const StyledTextarea = _styledComponents.default.div`
   ${_input.default} {
     resize: none;
     min-height: ${MIN_HEIGHT}px;
-    margin-top: 5px;
-    margin-bottom: 5px;
+  }
+
+  ${_inputPresentation.default} {
+    padding: var(--spacing150) var(--spacing200);
   }
 
   ${({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.4.1",
+  "version": "106.6.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -164,7 +164,7 @@
   },
   "dependencies": {
     "@octokit/rest": "^18.12.0",
-    "@popperjs/core": "^2.11.2",
+    "@popperjs/core": "^2.11.5",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",