carbon-react 144.2.1 → 144.3.0

package/esm/components/date-range/date-range.component.js

@@ -1,5 +1,5 @@
 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); }
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import { formatToISO, formattedValue, parseISODate, checkISOFormatAndLength } from "../date/__internal__/utils";
 import DateInput from "../date";
@@ -11,6 +11,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import usePrevious from "../../hooks/__internal__/usePrevious";
 import getFormatData from "../date/__internal__/date-formats";
 import DateRangeContext from "./__internal__/date-range.context";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 export const DateRange = ({
   endDateProps = {},
   id,
@@ -28,6 +29,10 @@ export const DateRange = ({
   isOptional,
   ...rest
 }) => {
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+  const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
   const l = useLocale();
   const {
     dateFnsLocale
@@ -179,7 +184,7 @@ export const DateRange = ({
     const onChangeCallback = propsKey === "start" ? startDateOnChange : endDateOnChange;
     return {
       label: rest[`${propsKey}Label`],
-      labelInline: labelsInline,
+      labelInline: labelsInlineWithNewValidation,
       value: inputValue,
       error: rest[`${propsKey}Error`],
       warning: rest[`${propsKey}Warning`],
@@ -194,7 +199,7 @@ export const DateRange = ({
     };
   };
   return /*#__PURE__*/React.createElement(StyledDateRange, _extends({}, tagComponent("date-range", rest), {
-    labelsInline: labelsInline
+    labelsInline: labelsInlineWithNewValidation
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(DateRangeContext.Provider, {
     value: {
       inputRefMap,

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/numeral-date/numeral-date.component.js

@@ -119,6 +119,7 @@ export const NumeralDate = ({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const {
     current: uniqueId
   } = useRef(id || guid());
@@ -208,7 +209,7 @@ export const NumeralDate = ({
     warning: internalWarning,
     info: info,
     label: label,
-    labelInline: labelInline,
+    labelInline: labelInlineWithNewValidation,
     labelWidth: labelWidth,
     labelAlign: labelAlign,
     labelHelp: !validationRedesignOptIn && labelHelp,

package/esm/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -41,6 +41,7 @@ export const RadioButtonGroup = props => {
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const legendInlineWithNewValidation = validationRedesignOptIn ? false : legendInline;
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -48,7 +49,7 @@ export const RadioButtonGroup = props => {
   const marginProps = filterStyledSystemMarginProps(props);
   const isAboveLegendBreakpoint = useIsAboveBreakpoint(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
-  let inlineLegend = legendInline;
+  let inlineLegend = legendInlineWithNewValidation;
   if (adaptiveLegendBreakpoint) {
     inlineLegend = !!isAboveLegendBreakpoint;
   }

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/filterable-select/filterable-select.component.js

@@ -101,6 +101,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     return customEvent;
   }, [name, id]);
   const triggerChange = useCallback((newValue, selectionConfirmed) => {
+    /* istanbul ignore else */
     if (onChange) {
       onChange(createCustomEvent(newValue, selectionConfirmed));
     }
@@ -146,7 +147,11 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
+      return;
+    }
+
+    /* istanbul ignore else */
+    if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -309,6 +314,13 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       return !isAlreadyOpen;
     });
   }
+  useEffect(() => {
+    return () => {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+    };
+  }, []);
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {

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/esm/components/textarea/textarea.component.js

@@ -66,6 +66,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const [textareaMinHeight, setTextareaMinHeight] = useState(DEFAULT_MIN_HEIGHT);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const {
@@ -217,7 +218,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(StyledTextarea, _extends({
-    labelInline: labelInline,
+    labelInline: labelInlineWithNewValidation,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
@@ -233,7 +234,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     labelId: labelId,
     disabled: disabled,
     id: id,
-    labelInline: computeLabelPropValues(labelInline),
+    labelInline: computeLabelPropValues(labelInlineWithNewValidation),
     labelAlign: computeLabelPropValues(labelAlign),
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),

package/lib/components/date-range/date-range.component.js

@@ -16,6 +16,7 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/usePrevious"));
 var _dateFormats = _interopRequireDefault(require("../date/__internal__/date-formats"));
 var _dateRange2 = _interopRequireDefault(require("./__internal__/date-range.context"));
+var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 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; }
@@ -37,6 +38,10 @@ const DateRange = ({
   isOptional,
   ...rest
 }) => {
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_newValidation.default);
+  const labelsInlineWithNewValidation = validationRedesignOptIn ? false : labelsInline;
   const l = (0, _useLocale.default)();
   const {
     dateFnsLocale
@@ -188,7 +193,7 @@ const DateRange = ({
     const onChangeCallback = propsKey === "start" ? startDateOnChange : endDateOnChange;
     return {
       label: rest[`${propsKey}Label`],
-      labelInline: labelsInline,
+      labelInline: labelsInlineWithNewValidation,
       value: inputValue,
       error: rest[`${propsKey}Error`],
       warning: rest[`${propsKey}Warning`],
@@ -203,7 +208,7 @@ const DateRange = ({
     };
   };
   return /*#__PURE__*/_react.default.createElement(_dateRange.default, _extends({}, (0, _tags.default)("date-range", rest), {
-    labelsInline: labelsInline
+    labelsInline: labelsInlineWithNewValidation
   }, (0, _utils2.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_dateRange2.default.Provider, {
     value: {
       inputRefMap,

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/numeral-date/numeral-date.component.js

@@ -128,6 +128,7 @@ const NumeralDate = ({
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const {
     current: uniqueId
   } = (0, _react.useRef)(id || (0, _guid.default)());
@@ -217,7 +218,7 @@ const NumeralDate = ({
     warning: internalWarning,
     info: info,
     label: label,
-    labelInline: labelInline,
+    labelInline: labelInlineWithNewValidation,
     labelWidth: labelWidth,
     labelAlign: labelAlign,
     labelHelp: !validationRedesignOptIn && labelHelp,

package/lib/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -50,6 +50,7 @@ const RadioButtonGroup = props => {
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const legendInlineWithNewValidation = validationRedesignOptIn ? false : legendInline;
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -57,7 +58,7 @@ const RadioButtonGroup = props => {
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
   const isAboveLegendBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
-  let inlineLegend = legendInline;
+  let inlineLegend = legendInlineWithNewValidation;
   if (adaptiveLegendBreakpoint) {
     inlineLegend = !!isAboveLegendBreakpoint;
   }

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/filterable-select/filterable-select.component.js

@@ -110,6 +110,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     return customEvent;
   }, [name, id]);
   const triggerChange = (0, _react.useCallback)((newValue, selectionConfirmed) => {
+    /* istanbul ignore else */
     if (onChange) {
       onChange(createCustomEvent(newValue, selectionConfirmed));
     }
@@ -155,7 +156,11 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
     const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
+      return;
+    }
+
+    /* istanbul ignore else */
+    if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase().trim())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -318,6 +323,13 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
       return !isAlreadyOpen;
     });
   }
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (focusTimer.current) {
+        clearTimeout(focusTimer.current);
+      }
+    };
+  }, []);
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus?.(event);
     if (openOnFocus) {

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/lib/components/textarea/textarea.component.js

@@ -75,6 +75,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const labelInlineWithNewValidation = validationRedesignOptIn ? false : labelInline;
   const [textareaMinHeight, setTextareaMinHeight] = (0, _react.useState)(_textarea.DEFAULT_MIN_HEIGHT);
   const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
   const {
@@ -226,7 +227,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_textarea.default, _extends({
-    labelInline: labelInline,
+    labelInline: labelInlineWithNewValidation,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
@@ -242,7 +243,7 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
     labelId: labelId,
     disabled: disabled,
     id: id,
-    labelInline: computeLabelPropValues(labelInline),
+    labelInline: computeLabelPropValues(labelInlineWithNewValidation),
     labelAlign: computeLabelPropValues(labelAlign),
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),

package/package.json

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