carbon-react 144.2.2 → 144.4.0

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

@@ -6,6 +6,8 @@ export interface DrawerProps extends Omit<TagProps, "data-component"> {
     animationDuration?: string;
     /** Specify an aria-label for the Drawer component */
     "aria-label"?: string;
+    /** Specify an aria-label for the Drawer sidebar */
+    sidebarAriaLabel?: string;
     /** Sets color of sidebar's background */
     backgroundColor?: string;
     children: React.ReactNode;
@@ -30,6 +32,6 @@ export interface DrawerProps extends Omit<TagProps, "data-component"> {
     /** Makes the footer of the drawer sticky. Footer prop must also be set. */
     stickyFooter?: boolean;
 }
-export declare const Drawer: ({ "aria-label": ariaLabel, "data-element": dataElement, "data-role": dataRole, defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, }: DrawerProps) => React.JSX.Element;
+export declare const Drawer: ({ "aria-label": ariaLabel, sidebarAriaLabel, "data-element": dataElement, "data-role": dataRole, defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, }: DrawerProps) => React.JSX.Element;
 export { DrawerSidebarContext };
 export default Drawer;

package/esm/components/drawer/drawer.component.js

@@ -9,6 +9,7 @@ import StickyFooter from "../../__internal__/sticky-footer";
 import DrawerSidebarContext from "./__internal__/drawer-sidebar.context";
 export const Drawer = ({
   "aria-label": ariaLabel,
+  sidebarAriaLabel,
   "data-element": dataElement,
   "data-role": dataRole = "drawer",
   defaultExpanded = true,
@@ -91,6 +92,7 @@ export const Drawer = ({
   }, [toggleAnimation, isExpanded, onChange]);
   const guid = useRef(createGuid());
   const sidebarId = `DrawerSidebar_${guid.current}`;
+  const titleId = `DrawerTitle_${guid.current}`;
   const getClassNames = useCallback(() => {
     const classes = [isExpanded ? "open" : "closed"];
     if (isOpening) {
@@ -128,15 +130,20 @@ export const Drawer = ({
     ref: drawerSidebarContentRef,
     backgroundColor: backgroundColor,
     "data-element": "drawer-content",
-    "data-role": "drawer-content"
+    "data-role": "drawer-content",
+    "aria-label": sidebarAriaLabel,
+    "aria-labelledby": title ? titleId : undefined
   }, stickyHeader && /*#__PURE__*/React.createElement(StyledSidebarHeader, {
     "data-role": "drawer-sidebar-header",
     isExpanded: isExpanded
-  }, title && /*#__PURE__*/React.createElement(StyledSidebarTitle, null, title), getControls()), !stickyHeader && /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(StyledSidebarTitle, null, title), getControls()), /*#__PURE__*/React.createElement(StyledDrawerSidebar, {
+  }, title && /*#__PURE__*/React.createElement(StyledSidebarTitle, {
+    id: titleId
+  }, title), getControls()), !stickyHeader && /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(StyledSidebarTitle, {
+    id: titleId
+  }, title), getControls()), /*#__PURE__*/React.createElement(StyledDrawerSidebar, {
     hasControls: !!showControls,
     id: sidebarId,
     isExpanded: isExpanded,
-    role: "navigation",
     overflowY: isExpanded ? "auto" : undefined,
     scrollVariant: "light",
     ref: scrollableContentRef

package/esm/components/drawer/drawer.style.d.ts

@@ -14,7 +14,7 @@ interface StyledDrawerContentProps {
     backgroundColor?: string;
     expandedWidth: string;
 }
-declare const StyledDrawerContent: import("styled-components").StyledComponent<"div", any, StyledDrawerContentProps, never>;
+declare const StyledDrawerContent: import("styled-components").StyledComponent<"aside", any, StyledDrawerContentProps, never>;
 interface StyledSidebarToggleButtonProps {
     animationDuration?: string;
     isExpanded?: boolean;

package/esm/components/drawer/drawer.style.js

@@ -89,7 +89,7 @@ const buttonClose = () => keyframes`
   80% {float: right;}
   100% {float: left;}
 `;
-const StyledDrawerContent = styled.div`
+const StyledDrawerContent = styled.aside`
   display: flex;
   flex-direction: column;
   min-width: ${defaultExpandedWidth};

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

@@ -20,7 +20,7 @@ export interface NoteProps extends MarginProps {
         timeStamp: string;
     };
     /** Adds a Title to the Note */
-    title?: string;
+    title?: React.ReactNode;
     /** Set a percentage-based width for the whole Note component, relative to its parent. */
     width?: number;
 }

package/esm/components/note/note.component.js

@@ -3,12 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Editor } from "draft-js";
 import invariant from "invariant";
-import { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent } from "./note.style";
+import { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent } from "./note.style";
 import StatusIcon from "./__internal__/status-icon";
 import { ActionPopover } from "../action-popover";
 import { getDecoratedValue } from "../text-editor/__internal__/utils";
 import EditorContext from "../text-editor/__internal__/editor.context";
 import LinkPreview from "../link-preview";
+import Typography from "../typography";
 function hasExpectedDisplayName(child, displayName) {
   return child.type.displayName === displayName;
 }
@@ -50,7 +51,14 @@ export const Note = ({
     width: width
   }, rest, {
     "data-component": "note"
-  }), /*#__PURE__*/React.createElement(StyledNoteMain, null, /*#__PURE__*/React.createElement(StyledNoteContent, null, title && /*#__PURE__*/React.createElement(StyledTitle, null, title), /*#__PURE__*/React.createElement(Editor, {
+  }), /*#__PURE__*/React.createElement(StyledNoteMain, null, /*#__PURE__*/React.createElement(StyledNoteContent, null, title && (typeof title === "string" ? /*#__PURE__*/React.createElement(Typography, {
+    "data-role": "note-title",
+    fontWeight: "700",
+    fontSize: "16px",
+    lineHeight: "21px",
+    paddingBottom: "16px",
+    variant: "h2"
+  }, title) : /*#__PURE__*/React.createElement(StyledTitleWrapper, null, title)), /*#__PURE__*/React.createElement(Editor, {
     readOnly: true,
     editorState: getDecoratedValue(noteContent),
     onChange: /* istanbul ignore next */() => {}

package/esm/components/note/note.style.d.ts

@@ -3,7 +3,7 @@ declare const StyledNoteContent: import("styled-components").StyledComponent<"di
 }, never>;
 declare const StyledNoteMain: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
+declare const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
     hasName: boolean;
 }, never>;
@@ -11,4 +11,4 @@ declare const StyledFooter: import("styled-components").StyledComponent<"div", a
 declare const StyledNote: import("styled-components").StyledComponent<"div", any, {
     width: number;
 }, never>;
-export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent, };
+export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent, };

package/esm/components/note/note.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import { StyledLinkPreview } from "../link-preview/link-preview.style";
+import { VARIANT_TYPES } from "../typography/typography.component";
 const StyledNoteContent = styled.div`
   position: relative;
   width: 100%;
@@ -11,13 +12,11 @@ const StyledNoteContent = styled.div`
 }) => css`
     div.DraftEditor-root {
       min-height: inherit;
-      height: 100%;
     }
 
     div.DraftEditor-editorContainer,
     div.public-DraftEditor-content {
       min-height: inherit;
-      height: 100%;
       background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
@@ -40,11 +39,15 @@ const StyledInlineControl = styled.div`
   display: inline-block;
   min-width: fit-content;
 `;
-const StyledTitle = styled.header`
+const StyledTitleWrapper = styled.div`
+  ${VARIANT_TYPES.map(variant => `
+${variant}{
   font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   padding-bottom: 16px;
+}
+  `)}
 `;
 const StyledFooterContent = styled.div`
   line-height: 21px;
@@ -128,4 +131,4 @@ const StyledNote = styled.div`
 StyledNote.defaultProps = {
   theme: baseTheme
 };
-export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent };
+export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent };

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

@@ -380,7 +380,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     }
   }), ...(flipEnabled ? [flip({
     fallbackStrategy: "initialPlacement"
-  })] : [])], [listWidth, flipEnabled]);
+  })] : /* istanbul ignore next: covered by Playwright tests for reliable positioning in a real browser */[])], [listWidth, flipEnabled]);
   const loader = isLoading ? /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
     key: "loader"
   }, /*#__PURE__*/React.createElement(Loader, null)) : undefined;

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

@@ -63,18 +63,16 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const accessibilityLabelId = useRef(guid());
   const containerRef = useRef(null);
   const listboxRef = useRef(null);
-  const isInputFocused = useRef(false);
   const isClickTriggeredBySelect = useRef(false);
   const isMouseDownReported = useRef(false);
   const isMouseDownOnInput = useRef(false);
-  const isOpenedByFocus = useRef(false);
+  const [isOpenedByFocus, setIsOpenedByFocus] = useState(false);
   const isControlled = useRef(value !== undefined);
   const [textboxRef, setTextboxRef] = useState();
-  const [isOpen, setOpenState] = useState(false);
+  const [open, setOpen] = useState(false);
   const [textValue, setTextValue] = useState("");
   const [selectedValue, setSelectedValue] = useState(value || defaultValue || []);
   const [highlightedValue, setHighlightedValue] = useState("");
-  const [filterText, setFilterText] = useState("");
   const [placeholderOverride, setPlaceholderOverride] = useState();
   const inputId = useRef(id || guid());
   const {
@@ -83,21 +81,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     id: inputId.current,
     label
   });
-  const focusTimer = useRef(null);
   const actualValue = isControlled.current ? value : selectedValue;
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const setOpen = useCallback(() => {
-    setOpenState(isAlreadyOpen => {
-      if (!isAlreadyOpen && onOpen) {
-        onOpen();
-      }
-      return true;
-    });
-  }, [onOpen]);
   const createCustomEvent = useCallback((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
@@ -144,10 +133,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     if (match) {
       setHighlightedValue(match.props.value);
     }
-    setFilterText(newValue);
     setTextValue(newValue);
-    setOpen();
-  }, [children, setOpen]);
+    if (!open) {
+      onOpen?.();
+    }
+    setOpen(true);
+  }, [children, open, onOpen]);
   const removeSelectedValue = useCallback(index => {
     isClickTriggeredBySelect.current = true;
     updateValue(previousValue => {
@@ -164,21 +155,21 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       key
     } = event;
     const isDeleteKey = key === "Backspace" || key === "Delete";
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
+    onKeyDown?.(event);
     if (readOnly) {
       return;
     }
     if (!event.defaultPrevented && isNavigationKey(key)) {
       event.preventDefault();
-      setOpen();
+      if (!open) {
+        onOpen?.();
+      }
+      setOpen(true);
     }
-    if (isDeleteKey && (filterText === "" || textValue === "")) {
+    if (isDeleteKey && textValue === "") {
       removeSelectedValue(-1);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
+  }, [onKeyDown, readOnly, textValue, open, onOpen, removeSelectedValue]);
   const accessibilityLabel = useMemo(() => {
     return actualValue && actualValue.length ? React.Children.map(children, child => {
       return /*#__PURE__*/React.isValidElement(child) && actualValue.includes(child.props.value) ? child.props.text : false;
@@ -188,19 +179,18 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, [children, actualValue]);
   const handleGlobalClick = useCallback(event => {
     isMouseDownReported.current = false;
-    if (!isOpen) {
+    if (!open) {
       return;
     }
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
     if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
       setTextValue("");
-      setFilterText("");
       setHighlightedValue("");
-      setOpenState(false);
+      setOpen(false);
     }
     isClickTriggeredBySelect.current = false;
-  }, [isOpen]);
+  }, [open]);
   const mapValuesToPills = useMemo(() => {
     const canDelete = !disabled && !readOnly;
     let matchingOptionValue;
@@ -261,99 +251,53 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const onFilterChange = useStableCallback(onFilterChangeProp);
   const isFirstRender = useRef(true);
   useEffect(() => {
-    if (onFilterChange && !isFirstRender.current) {
-      onFilterChange(filterText);
+    if (!isFirstRender.current) {
+      onFilterChange?.(textValue);
     }
-  }, [onFilterChange, filterText]);
+  }, [onFilterChange, textValue]);
   useEffect(() => {
     isFirstRender.current = false;
   }, []);
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
+    onClick?.(event);
+    if (openOnFocus && isOpenedByFocus) {
+      setIsOpenedByFocus(false);
+      return;
     }
-    if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
-      if (isOpen) {
-        setFilterText("");
-        setOpenState(false);
-        return;
-      }
-      onOpen?.();
-      setOpenState(true);
+    if (open) {
+      setTextValue("");
+      setOpen(false);
     } else {
-      isOpenedByFocus.current = false;
-    }
-  }
-  function handleDropdownIconClick(event) {
-    isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
+      onOpen?.();
+      setOpen(true);
     }
-    setOpenState(isAlreadyOpen => {
-      if (isAlreadyOpen) {
-        setFilterText("");
-        return false;
-      }
-      if (onOpen) {
-        onOpen();
-      }
-      return true;
-    });
   }
   function handleTextboxBlur(event) {
     isMouseDownOnInput.current = false;
     if (isMouseDownReported.current) {
       return;
     }
-    isInputFocused.current = false;
-    if (onBlur) {
-      onBlur(event);
-    }
+    onBlur?.(event);
+    setTextValue("");
+    setOpen(false);
   }
-  function handleTextboxMouseDown(event) {
+  function handleTextboxMouseDown() {
     isMouseDownReported.current = true;
-    if (event.target.dataset.element === "input") {
-      isMouseDownOnInput.current = true;
-    }
+    isMouseDownOnInput.current = true;
   }
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
   function handleTextboxFocus(event) {
-    const triggerFocus = () => onFocus?.(event);
+    onFocus?.(event);
     if (openOnFocus) {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
+      if (open) return;
+      onOpen?.();
+      if (isMouseDownOnInput.current) {
+        setIsOpenedByFocus(true);
       }
-
-      // we need to use a timeout here as there is a race condition when rendered in a modal
-      // whereby the select list isn't visible when the select is auto focused straight away
-      focusTimer.current = setTimeout(() => {
-        setOpenState(isAlreadyOpen => {
-          if (isAlreadyOpen) {
-            return true;
-          }
-          if (onOpen) {
-            onOpen();
-          }
-          if (onFocus && !isInputFocused.current) {
-            triggerFocus();
-            isInputFocused.current = true;
-          }
-          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-            isOpenedByFocus.current = false;
-            return false;
-          }
-          if (isMouseDownOnInput.current) {
-            isOpenedByFocus.current = true;
-          }
-          return true;
-        });
-      });
-    } else if (onFocus && !isInputFocused.current) {
-      triggerFocus();
-      isInputFocused.current = true;
+      setOpen(true);
     }
   }
   const onSelectOption = useCallback(optionData => {
@@ -383,8 +327,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     }, selectionConfirmed);
   }, [textboxRef, actualValue, updateValue]);
   const onSelectListClose = useCallback(() => {
-    setOpenState(false);
-    setFilterText("");
+    setOpen(false);
+    setTextValue("");
   }, []);
   const assignInput = useCallback(element => {
     if (!element) return;
@@ -411,8 +355,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
       onBlur: handleTextboxBlur,
-      iconOnClick: handleDropdownIconClick,
-      iconOnMouseDown: handleTextboxMouseDown,
       onKeyDown: handleTextboxKeydown,
       onChange: handleTextboxChange,
       tooltipPosition,
@@ -441,7 +383,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: filterText.trim(),
+    filterText: textValue.trim(),
     highlightedValue: highlightedValue,
     noResultsMessage: noResultsMessage,
     isLoading: isLoading,
@@ -451,7 +393,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
     multiselectValues: actualValue,
-    isOpen: isOpen,
+    isOpen: open,
     enableVirtualScroll: enableVirtualScroll,
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
@@ -465,7 +407,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    isOpen: isOpen
+    isOpen: open
   }, marginProps), /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(StyledAccessibilityLabelContainer, {
@@ -479,7 +421,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     ariaLabel: ariaLabel,
     ariaLabelledby: ariaLabelledby,
     hasTextCursor: true,
-    isOpen: isOpen,
+    isOpen: open,
     labelId: labelId
   }, getTextboxProps()))), selectList);
 });

package/lib/components/drawer/drawer.component.d.ts

@@ -6,6 +6,8 @@ export interface DrawerProps extends Omit<TagProps, "data-component"> {
     animationDuration?: string;
     /** Specify an aria-label for the Drawer component */
     "aria-label"?: string;
+    /** Specify an aria-label for the Drawer sidebar */
+    sidebarAriaLabel?: string;
     /** Sets color of sidebar's background */
     backgroundColor?: string;
     children: React.ReactNode;
@@ -30,6 +32,6 @@ export interface DrawerProps extends Omit<TagProps, "data-component"> {
     /** Makes the footer of the drawer sticky. Footer prop must also be set. */
     stickyFooter?: boolean;
 }
-export declare const Drawer: ({ "aria-label": ariaLabel, "data-element": dataElement, "data-role": dataRole, defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, }: DrawerProps) => React.JSX.Element;
+export declare const Drawer: ({ "aria-label": ariaLabel, sidebarAriaLabel, "data-element": dataElement, "data-role": dataRole, defaultExpanded, expanded, onChange, children, expandedWidth, sidebar, animationDuration, backgroundColor, title, footer, showControls, height, stickyHeader, stickyFooter, }: DrawerProps) => React.JSX.Element;
 export { DrawerSidebarContext };
 export default Drawer;

package/lib/components/drawer/drawer.component.js

@@ -25,6 +25,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Drawer = ({
   "aria-label": ariaLabel,
+  sidebarAriaLabel,
   "data-element": dataElement,
   "data-role": dataRole = "drawer",
   defaultExpanded = true,
@@ -107,6 +108,7 @@ const Drawer = ({
   }, [toggleAnimation, isExpanded, onChange]);
   const guid = (0, _react.useRef)((0, _guid.default)());
   const sidebarId = `DrawerSidebar_${guid.current}`;
+  const titleId = `DrawerTitle_${guid.current}`;
   const getClassNames = (0, _react.useCallback)(() => {
     const classes = [isExpanded ? "open" : "closed"];
     if (isOpening) {
@@ -144,15 +146,20 @@ const Drawer = ({
     ref: drawerSidebarContentRef,
     backgroundColor: backgroundColor,
     "data-element": "drawer-content",
-    "data-role": "drawer-content"
+    "data-role": "drawer-content",
+    "aria-label": sidebarAriaLabel,
+    "aria-labelledby": title ? titleId : undefined
   }, stickyHeader && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarHeader, {
     "data-role": "drawer-sidebar-header",
     isExpanded: isExpanded
-  }, title && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarTitle, null, title), getControls()), !stickyHeader && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarTitle, null, title), getControls()), /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerSidebar, {
+  }, title && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarTitle, {
+    id: titleId
+  }, title), getControls()), !stickyHeader && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_drawer.StyledSidebarTitle, {
+    id: titleId
+  }, title), getControls()), /*#__PURE__*/_react.default.createElement(_drawer.StyledDrawerSidebar, {
     hasControls: !!showControls,
     id: sidebarId,
     isExpanded: isExpanded,
-    role: "navigation",
     overflowY: isExpanded ? "auto" : undefined,
     scrollVariant: "light",
     ref: scrollableContentRef

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

@@ -14,7 +14,7 @@ interface StyledDrawerContentProps {
     backgroundColor?: string;
     expandedWidth: string;
 }
-declare const StyledDrawerContent: import("styled-components").StyledComponent<"div", any, StyledDrawerContentProps, never>;
+declare const StyledDrawerContent: import("styled-components").StyledComponent<"aside", any, StyledDrawerContentProps, never>;
 interface StyledSidebarToggleButtonProps {
     animationDuration?: string;
     isExpanded?: boolean;

package/lib/components/drawer/drawer.style.js

@@ -98,7 +98,7 @@ const buttonClose = () => (0, _styledComponents.keyframes)`
   80% {float: right;}
   100% {float: left;}
 `;
-const StyledDrawerContent = exports.StyledDrawerContent = _styledComponents.default.div`
+const StyledDrawerContent = exports.StyledDrawerContent = _styledComponents.default.aside`
   display: flex;
   flex-direction: column;
   min-width: ${defaultExpandedWidth};

package/lib/components/note/note.component.d.ts

@@ -20,7 +20,7 @@ export interface NoteProps extends MarginProps {
         timeStamp: string;
     };
     /** Adds a Title to the Note */
-    title?: string;
+    title?: React.ReactNode;
     /** Set a percentage-based width for the whole Note component, relative to its parent. */
     width?: number;
 }

package/lib/components/note/note.component.js

@@ -14,6 +14,7 @@ var _actionPopover = require("../action-popover");
 var _utils = require("../text-editor/__internal__/utils");
 var _editor = _interopRequireDefault(require("../text-editor/__internal__/editor.context"));
 var _linkPreview = _interopRequireDefault(require("../link-preview"));
+var _typography = _interopRequireDefault(require("../typography"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function hasExpectedDisplayName(child, displayName) {
@@ -57,7 +58,14 @@ const Note = ({
     width: width
   }, rest, {
     "data-component": "note"
-  }), /*#__PURE__*/_react.default.createElement(_note.StyledNoteMain, null, /*#__PURE__*/_react.default.createElement(_note.StyledNoteContent, null, title && /*#__PURE__*/_react.default.createElement(_note.StyledTitle, null, title), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
+  }), /*#__PURE__*/_react.default.createElement(_note.StyledNoteMain, null, /*#__PURE__*/_react.default.createElement(_note.StyledNoteContent, null, title && (typeof title === "string" ? /*#__PURE__*/_react.default.createElement(_typography.default, {
+    "data-role": "note-title",
+    fontWeight: "700",
+    fontSize: "16px",
+    lineHeight: "21px",
+    paddingBottom: "16px",
+    variant: "h2"
+  }, title) : /*#__PURE__*/_react.default.createElement(_note.StyledTitleWrapper, null, title)), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
     readOnly: true,
     editorState: (0, _utils.getDecoratedValue)(noteContent),
     onChange: /* istanbul ignore next */() => {}

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

@@ -3,7 +3,7 @@ declare const StyledNoteContent: import("styled-components").StyledComponent<"di
 }, never>;
 declare const StyledNoteMain: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
+declare const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
     hasName: boolean;
 }, never>;
@@ -11,4 +11,4 @@ declare const StyledFooter: import("styled-components").StyledComponent<"div", a
 declare const StyledNote: import("styled-components").StyledComponent<"div", any, {
     width: number;
 }, never>;
-export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent, };
+export { StyledNote, StyledNoteContent, StyledNoteMain, StyledInlineControl, StyledTitleWrapper, StyledFooter, StyledFooterContent, };

package/lib/components/note/note.style.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTitle = exports.StyledNoteMain = exports.StyledNoteContent = exports.StyledNote = exports.StyledInlineControl = exports.StyledFooterContent = exports.StyledFooter = void 0;
+exports.StyledTitleWrapper = exports.StyledNoteMain = exports.StyledNoteContent = exports.StyledNote = exports.StyledInlineControl = exports.StyledFooterContent = exports.StyledFooter = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _linkPreview = require("../link-preview/link-preview.style");
+var _typography = require("../typography/typography.component");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -20,13 +21,11 @@ const StyledNoteContent = exports.StyledNoteContent = _styledComponents.default.
 }) => (0, _styledComponents.css)`
     div.DraftEditor-root {
       min-height: inherit;
-      height: 100%;
     }
 
     div.DraftEditor-editorContainer,
     div.public-DraftEditor-content {
       min-height: inherit;
-      height: 100%;
       background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
@@ -49,11 +48,15 @@ const StyledInlineControl = exports.StyledInlineControl = _styledComponents.defa
   display: inline-block;
   min-width: fit-content;
 `;
-const StyledTitle = exports.StyledTitle = _styledComponents.default.header`
+const StyledTitleWrapper = exports.StyledTitleWrapper = _styledComponents.default.div`
+  ${_typography.VARIANT_TYPES.map(variant => `
+${variant}{
   font-weight: 700;
   font-size: 16px;
   line-height: 21px;
   padding-bottom: 16px;
+}
+  `)}
 `;
 const StyledFooterContent = exports.StyledFooterContent = _styledComponents.default.div`
   line-height: 21px;

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

@@ -389,7 +389,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     }
   }), ...(flipEnabled ? [(0, _dom.flip)({
     fallbackStrategy: "initialPlacement"
-  })] : [])], [listWidth, flipEnabled]);
+  })] : /* istanbul ignore next: covered by Playwright tests for reliable positioning in a real browser */[])], [listWidth, flipEnabled]);
   const loader = isLoading ? /*#__PURE__*/_react.default.createElement(_selectList.StyledSelectLoaderContainer, {
     key: "loader"
   }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : undefined;

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

@@ -72,18 +72,16 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   const accessibilityLabelId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)(null);
   const listboxRef = (0, _react.useRef)(null);
-  const isInputFocused = (0, _react.useRef)(false);
   const isClickTriggeredBySelect = (0, _react.useRef)(false);
   const isMouseDownReported = (0, _react.useRef)(false);
   const isMouseDownOnInput = (0, _react.useRef)(false);
-  const isOpenedByFocus = (0, _react.useRef)(false);
+  const [isOpenedByFocus, setIsOpenedByFocus] = (0, _react.useState)(false);
   const isControlled = (0, _react.useRef)(value !== undefined);
   const [textboxRef, setTextboxRef] = (0, _react.useState)();
-  const [isOpen, setOpenState] = (0, _react.useState)(false);
+  const [open, setOpen] = (0, _react.useState)(false);
   const [textValue, setTextValue] = (0, _react.useState)("");
   const [selectedValue, setSelectedValue] = (0, _react.useState)(value || defaultValue || []);
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
-  const [filterText, setFilterText] = (0, _react.useState)("");
   const [placeholderOverride, setPlaceholderOverride] = (0, _react.useState)();
   const inputId = (0, _react.useRef)(id || (0, _guid.default)());
   const {
@@ -92,21 +90,12 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     id: inputId.current,
     label
   });
-  const focusTimer = (0, _react.useRef)(null);
   const actualValue = isControlled.current ? value : selectedValue;
   const componentIsUncontrolled = !isControlled || !onChange && defaultValue;
   if (!deprecateUncontrolledWarnTriggered && componentIsUncontrolled) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const setOpen = (0, _react.useCallback)(() => {
-    setOpenState(isAlreadyOpen => {
-      if (!isAlreadyOpen && onOpen) {
-        onOpen();
-      }
-      return true;
-    });
-  }, [onOpen]);
   const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
@@ -153,10 +142,12 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     if (match) {
       setHighlightedValue(match.props.value);
     }
-    setFilterText(newValue);
     setTextValue(newValue);
-    setOpen();
-  }, [children, setOpen]);
+    if (!open) {
+      onOpen?.();
+    }
+    setOpen(true);
+  }, [children, open, onOpen]);
   const removeSelectedValue = (0, _react.useCallback)(index => {
     isClickTriggeredBySelect.current = true;
     updateValue(previousValue => {
@@ -173,21 +164,21 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
       key
     } = event;
     const isDeleteKey = key === "Backspace" || key === "Delete";
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
+    onKeyDown?.(event);
     if (readOnly) {
       return;
     }
     if (!event.defaultPrevented && (0, _isNavigationKey.default)(key)) {
       event.preventDefault();
-      setOpen();
+      if (!open) {
+        onOpen?.();
+      }
+      setOpen(true);
     }
-    if (isDeleteKey && (filterText === "" || textValue === "")) {
+    if (isDeleteKey && textValue === "") {
       removeSelectedValue(-1);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
+  }, [onKeyDown, readOnly, textValue, open, onOpen, removeSelectedValue]);
   const accessibilityLabel = (0, _react.useMemo)(() => {
     return actualValue && actualValue.length ? _react.default.Children.map(children, child => {
       return /*#__PURE__*/_react.default.isValidElement(child) && actualValue.includes(child.props.value) ? child.props.text : false;
@@ -197,19 +188,18 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   }, [children, actualValue]);
   const handleGlobalClick = (0, _react.useCallback)(event => {
     isMouseDownReported.current = false;
-    if (!isOpen) {
+    if (!open) {
       return;
     }
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
     if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
       setTextValue("");
-      setFilterText("");
       setHighlightedValue("");
-      setOpenState(false);
+      setOpen(false);
     }
     isClickTriggeredBySelect.current = false;
-  }, [isOpen]);
+  }, [open]);
   const mapValuesToPills = (0, _react.useMemo)(() => {
     const canDelete = !disabled && !readOnly;
     let matchingOptionValue;
@@ -270,99 +260,53 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   const onFilterChange = (0, _useStableCallback.default)(onFilterChangeProp);
   const isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
-    if (onFilterChange && !isFirstRender.current) {
-      onFilterChange(filterText);
+    if (!isFirstRender.current) {
+      onFilterChange?.(textValue);
     }
-  }, [onFilterChange, filterText]);
+  }, [onFilterChange, textValue]);
   (0, _react.useEffect)(() => {
     isFirstRender.current = false;
   }, []);
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
+    onClick?.(event);
+    if (openOnFocus && isOpenedByFocus) {
+      setIsOpenedByFocus(false);
+      return;
     }
-    if (!openOnFocus || openOnFocus && !isOpenedByFocus.current) {
-      if (isOpen) {
-        setFilterText("");
-        setOpenState(false);
-        return;
-      }
-      onOpen?.();
-      setOpenState(true);
+    if (open) {
+      setTextValue("");
+      setOpen(false);
     } else {
-      isOpenedByFocus.current = false;
-    }
-  }
-  function handleDropdownIconClick(event) {
-    isMouseDownReported.current = false;
-    if (onClick) {
-      onClick(event);
+      onOpen?.();
+      setOpen(true);
     }
-    setOpenState(isAlreadyOpen => {
-      if (isAlreadyOpen) {
-        setFilterText("");
-        return false;
-      }
-      if (onOpen) {
-        onOpen();
-      }
-      return true;
-    });
   }
   function handleTextboxBlur(event) {
     isMouseDownOnInput.current = false;
     if (isMouseDownReported.current) {
       return;
     }
-    isInputFocused.current = false;
-    if (onBlur) {
-      onBlur(event);
-    }
+    onBlur?.(event);
+    setTextValue("");
+    setOpen(false);
   }
-  function handleTextboxMouseDown(event) {
+  function handleTextboxMouseDown() {
     isMouseDownReported.current = true;
-    if (event.target.dataset.element === "input") {
-      isMouseDownOnInput.current = true;
-    }
+    isMouseDownOnInput.current = true;
   }
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
   function handleTextboxFocus(event) {
-    const triggerFocus = () => onFocus?.(event);
+    onFocus?.(event);
     if (openOnFocus) {
-      if (focusTimer.current) {
-        clearTimeout(focusTimer.current);
+      if (open) return;
+      onOpen?.();
+      if (isMouseDownOnInput.current) {
+        setIsOpenedByFocus(true);
       }
-
-      // we need to use a timeout here as there is a race condition when rendered in a modal
-      // whereby the select list isn't visible when the select is auto focused straight away
-      focusTimer.current = setTimeout(() => {
-        setOpenState(isAlreadyOpen => {
-          if (isAlreadyOpen) {
-            return true;
-          }
-          if (onOpen) {
-            onOpen();
-          }
-          if (onFocus && !isInputFocused.current) {
-            triggerFocus();
-            isInputFocused.current = true;
-          }
-          if (isMouseDownReported.current && !isMouseDownOnInput.current) {
-            isOpenedByFocus.current = false;
-            return false;
-          }
-          if (isMouseDownOnInput.current) {
-            isOpenedByFocus.current = true;
-          }
-          return true;
-        });
-      });
-    } else if (onFocus && !isInputFocused.current) {
-      triggerFocus();
-      isInputFocused.current = true;
+      setOpen(true);
     }
   }
   const onSelectOption = (0, _react.useCallback)(optionData => {
@@ -392,8 +336,8 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     }, selectionConfirmed);
   }, [textboxRef, actualValue, updateValue]);
   const onSelectListClose = (0, _react.useCallback)(() => {
-    setOpenState(false);
-    setFilterText("");
+    setOpen(false);
+    setTextValue("");
   }, []);
   const assignInput = (0, _react.useCallback)(element => {
     if (!element) return;
@@ -420,8 +364,6 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
       onBlur: handleTextboxBlur,
-      iconOnClick: handleDropdownIconClick,
-      iconOnMouseDown: handleTextboxMouseDown,
       onKeyDown: handleTextboxKeydown,
       onChange: handleTextboxChange,
       tooltipPosition,
@@ -450,7 +392,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
     onMouseDown: handleListMouseDown,
-    filterText: filterText.trim(),
+    filterText: textValue.trim(),
     highlightedValue: highlightedValue,
     noResultsMessage: noResultsMessage,
     isLoading: isLoading,
@@ -460,7 +402,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     listMaxHeight: listMaxHeight,
     flipEnabled: flipEnabled,
     multiselectValues: actualValue,
-    isOpen: isOpen,
+    isOpen: open,
     enableVirtualScroll: enableVirtualScroll,
     virtualScrollOverscan: virtualScrollOverscan,
     listWidth: listWidth
@@ -474,7 +416,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    isOpen: isOpen
+    isOpen: open
   }, marginProps), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_multiSelect.StyledAccessibilityLabelContainer, {
@@ -488,7 +430,7 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
     ariaLabel: ariaLabel,
     ariaLabelledby: ariaLabelledby,
     hasTextCursor: true,
-    isOpen: isOpen,
+    isOpen: open,
     labelId: labelId
   }, getTextboxProps()))), selectList);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.2.2",
+  "version": "144.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",