carbon-react 147.11.0 → 148.0.0

package/lib/components/advanced-color-picker/advanced-color-picker.component.d.ts

@@ -30,9 +30,9 @@ export interface AdvancedColorPickerProps extends MarginProps, Pick<ModalProps,
     /** Prop for `onChange` event */
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** Prop for `onClose` event */
-    onClose?: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
     /** Prop for `onOpen` event */
-    onOpen?: (ev: React.MouseEvent<HTMLElement>) => void;
+    onOpen?: (ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
     /** Prop for `open` status */
     open?: boolean;
     /** The ARIA role to be applied to the component container */

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -77,7 +77,7 @@ const AdvancedColorPicker = ({
           e.preventDefault();
         }
       } else if (document.activeElement === selectedColorRef) {
-        firstFocusableElement.focus();
+        firstFocusableElement?.focus();
         e.preventDefault();
       }
     }

package/lib/components/anchor-navigation/anchor-navigation.component.js

@@ -27,7 +27,7 @@ const AnchorNavigation = ({
   !(0, _reactIs.isFragment)(stickyNavigation) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "`stickyNavigation` prop in `AnchorNavigation` should be a React Fragment.") : (0, _invariant.default)(false) : void 0;
   const hasCorrectItemStructure = (0, _react.useMemo)(() => {
     const incorrectChild = _react.default.Children.toArray(stickyNavigation.props.children).find(child => {
-      return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== _anchorNavigationItem.default.displayName;
+      return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== "AnchorNavigationItem";
     });
     return !incorrectChild;
   }, [stickyNavigation]);

package/lib/components/box/box.component.js

@@ -380,7 +380,7 @@ if (process.env.NODE_ENV !== "production") {
       "valueOf": _propTypes.default.func.isRequired
     })]),
     "aria-hidden": _propTypes.default.oneOf(["false", "true"]),
-    "as": _propTypes.default.oneOfType([_propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]), _propTypes.default.func, _propTypes.default.shape({
+    "as": _propTypes.default.oneOfType([_propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "search", "section", "select", "set", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]), _propTypes.default.func, _propTypes.default.shape({
       "childContextTypes": _propTypes.default.object,
       "contextType": _propTypes.default.shape({
         "Consumer": _propTypes.default.func.isRequired,

package/lib/components/breadcrumbs/crumb/crumb.component.d.ts

@@ -5,5 +5,5 @@ export interface CrumbProps extends Omit<LinkProps, "tooltipMessage" | "tooltipP
     /** This sets the Crumb to current, does not render Link */
     isCurrent?: boolean;
 }
-declare const Crumb: React.ForwardRefExoticComponent<CrumbProps & React.RefAttributes<HTMLLinkElement>>;
+declare const Crumb: React.ForwardRefExoticComponent<CrumbProps & React.RefAttributes<HTMLAnchorElement>>;
 export default Crumb;

package/lib/components/breadcrumbs/crumb/crumb.component.js

@@ -42,14 +42,18 @@ if (process.env.NODE_ENV !== "production") {
     "aria-activedescendant": _propTypes.default.string,
     "aria-atomic": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-autocomplete": _propTypes.default.oneOf(["both", "inline", "list", "none"]),
+    "aria-braillelabel": _propTypes.default.string,
+    "aria-brailleroledescription": _propTypes.default.string,
     "aria-busy": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-checked": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "mixed", "true"]), _propTypes.default.bool]),
     "aria-colcount": _propTypes.default.number,
     "aria-colindex": _propTypes.default.number,
+    "aria-colindextext": _propTypes.default.string,
     "aria-colspan": _propTypes.default.number,
     "aria-controls": _propTypes.default.string,
     "aria-current": _propTypes.default.oneOfType([_propTypes.default.oneOf(["date", "false", "location", "page", "step", "time", "true"]), _propTypes.default.bool]),
     "aria-describedby": _propTypes.default.string,
+    "aria-description": _propTypes.default.string,
     "aria-details": _propTypes.default.string,
     "aria-disabled": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-dropeffect": _propTypes.default.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
@@ -79,6 +83,7 @@ if (process.env.NODE_ENV !== "production") {
     "aria-roledescription": _propTypes.default.string,
     "aria-rowcount": _propTypes.default.number,
     "aria-rowindex": _propTypes.default.number,
+    "aria-rowindextext": _propTypes.default.string,
     "aria-rowspan": _propTypes.default.number,
     "aria-selected": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-setsize": _propTypes.default.number,
@@ -97,7 +102,6 @@ if (process.env.NODE_ENV !== "production") {
     "onClick": _propTypes.default.func,
     "onKeyDown": _propTypes.default.func,
     "onMouseDown": _propTypes.default.func,
-    "placeholderTabIndex": _propTypes.default.bool,
     "removeAriaLabelOnIcon": _propTypes.default.bool
   };
 }

package/lib/components/breadcrumbs/crumb/crumb.style.d.ts

@@ -4,13 +4,13 @@ interface StyleCrumbProps extends LinkProps {
     isCurrent?: boolean;
     isDarkBackground: boolean;
 }
-export declare const StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, StyleCrumbProps, never>;
+export declare const StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyleCrumbProps, never>;
 interface DividerProps {
     isDarkBackground: boolean;
 }
 export declare const Divider: import("styled-components").StyledComponent<"span", any, DividerProps, never>;
 declare const _default: {
-    StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, StyleCrumbProps, never>;
+    StyledCrumb: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, StyleCrumbProps, never>;
     Divider: import("styled-components").StyledComponent<"span", any, DividerProps, never>;
 };
 export default _default;

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

@@ -47,9 +47,7 @@ const ButtonToggleGroup = ({
   ...props
 }) => {
   const hasCorrectItemStructure = (0, _react.useMemo)(() => {
-    const incorrectChild = _react.default.Children.toArray(children).find(child => {
-      return ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== _.ButtonToggle.displayName;
-    });
+    const incorrectChild = _react.default.Children.toArray(children).find(child => ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== "ButtonToggle");
     return !incorrectChild;
   }, [children]);
   !hasCorrectItemStructure ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `\`ButtonToggleGroup\` only accepts children of type \`${_.ButtonToggle.displayName}\``) : (0, _invariant.default)(false) : void 0;

package/lib/components/checkbox/checkbox.component.js

@@ -136,14 +136,18 @@ if (process.env.NODE_ENV !== "production") {
     "aria-activedescendant": _propTypes.default.string,
     "aria-atomic": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-autocomplete": _propTypes.default.oneOf(["both", "inline", "list", "none"]),
+    "aria-braillelabel": _propTypes.default.string,
+    "aria-brailleroledescription": _propTypes.default.string,
     "aria-busy": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-checked": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "mixed", "true"]), _propTypes.default.bool]),
     "aria-colcount": _propTypes.default.number,
     "aria-colindex": _propTypes.default.number,
+    "aria-colindextext": _propTypes.default.string,
     "aria-colspan": _propTypes.default.number,
     "aria-controls": _propTypes.default.string,
     "aria-current": _propTypes.default.oneOfType([_propTypes.default.oneOf(["date", "false", "location", "page", "step", "time", "true"]), _propTypes.default.bool]),
     "aria-describedby": _propTypes.default.string,
+    "aria-description": _propTypes.default.string,
     "aria-details": _propTypes.default.string,
     "aria-disabled": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-dropeffect": _propTypes.default.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
@@ -173,6 +177,7 @@ if (process.env.NODE_ENV !== "production") {
     "aria-roledescription": _propTypes.default.string,
     "aria-rowcount": _propTypes.default.number,
     "aria-rowindex": _propTypes.default.number,
+    "aria-rowindextext": _propTypes.default.string,
     "aria-rowspan": _propTypes.default.number,
     "aria-selected": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-setsize": _propTypes.default.number,
@@ -234,7 +239,7 @@ if (process.env.NODE_ENV !== "production") {
       "trimStart": _propTypes.default.func.isRequired,
       "valueOf": _propTypes.default.func.isRequired
     })]),
-    "autoComplete": _propTypes.default.string,
+    "autoComplete": _propTypes.default.any,
     "autoCorrect": _propTypes.default.string,
     "autoFocus": _propTypes.default.bool,
     "autoSave": _propTypes.default.string,
@@ -244,7 +249,7 @@ if (process.env.NODE_ENV !== "production") {
     "className": _propTypes.default.string,
     "color": _propTypes.default.string,
     "content": _propTypes.default.string,
-    "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
+    "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "plaintext-only", "true"]), _propTypes.default.bool]),
     "contextMenu": _propTypes.default.string,
     "dangerouslySetInnerHTML": _propTypes.default.shape({
       "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
@@ -563,9 +568,7 @@ if (process.env.NODE_ENV !== "production") {
     "onPointerDown": _propTypes.default.func,
     "onPointerDownCapture": _propTypes.default.func,
     "onPointerEnter": _propTypes.default.func,
-    "onPointerEnterCapture": _propTypes.default.func,
     "onPointerLeave": _propTypes.default.func,
-    "onPointerLeaveCapture": _propTypes.default.func,
     "onPointerMove": _propTypes.default.func,
     "onPointerMoveCapture": _propTypes.default.func,
     "onPointerOut": _propTypes.default.func,
@@ -580,6 +583,8 @@ if (process.env.NODE_ENV !== "production") {
     "onRateChangeCapture": _propTypes.default.func,
     "onReset": _propTypes.default.func,
     "onResetCapture": _propTypes.default.func,
+    "onResize": _propTypes.default.func,
+    "onResizeCapture": _propTypes.default.func,
     "onScroll": _propTypes.default.func,
     "onScrollCapture": _propTypes.default.func,
     "onSeeked": _propTypes.default.func,

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

@@ -15,6 +15,7 @@ var _date = _interopRequireDefault(require("./date.style"));
 var _textbox = _interopRequireDefault(require("../textbox"));
 var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 var _dateRange = _interopRequireDefault(require("../date-range/__internal__/date-range.context"));
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -60,7 +61,6 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const alreadyFocused = (0, _react.useRef)(false);
   const isBlurBlocked = (0, _react.useRef)(false);
   const focusedViaPicker = (0, _react.useRef)(false);
-  const blockClose = (0, _react.useRef)(false);
   const locale = (0, _useLocale.default)();
   const {
     dateFnsLocale,
@@ -109,31 +109,18 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     };
     return customEvent;
   };
-
-  // Add  custom listener to prevent issues with regards to double calls within the Date component
-  // This is a temporary fix until the Date component is refactored more info can be found:
-  // TODO: FE-6757
-  (0, _react.useEffect)(() => {
-    const handleClick = () => {
-      if (!blockClose.current) {
-        if (open) {
-          alreadyFocused.current = true;
-          internalInputRef.current?.focus();
-          isBlurBlocked.current = false;
-          internalInputRef.current?.blur();
-          setOpen(false);
-          onPickerClose?.();
-          alreadyFocused.current = false;
-        }
-      } else {
-        blockClose.current = false;
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return function cleanup() {
-      document.removeEventListener("mousedown", handleClick);
-    };
-  }, [open, onPickerClose]);
+  const handleClickAway = () => {
+    if (open) {
+      alreadyFocused.current = true;
+      internalInputRef.current?.focus();
+      isBlurBlocked.current = false;
+      internalInputRef.current?.blur();
+      setOpen(false);
+      onPickerClose?.();
+      alreadyFocused.current = false;
+    }
+  };
+  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -199,10 +186,8 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
     isBlurBlocked.current = false;
     if (!open && !alreadyFocused.current) {
-      setTimeout(() => {
-        setOpen(true);
-        onPickerOpen?.();
-      }, 0);
+      setOpen(true);
+      onPickerOpen?.();
     } else {
       alreadyFocused.current = false;
     }
@@ -238,41 +223,31 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
       onClick(ev);
     }
   };
-  const handleMouseDown = ev => {
-    blockClose.current = true;
+  const handleMouseDown = () => {
+    handleClickInside();
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
-    const {
-      type
-    } = ev.target;
-    if (type !== "text") {
-      alreadyFocused.current = true;
-      setTimeout(() => {
-        setOpen(prev => {
-          const nextState = !prev;
-          if (!nextState) {
-            onPickerClose?.();
-          } else {
-            onPickerOpen?.();
-          }
-          return nextState;
-        });
-      }, 0);
-    } else if (!open) {
-      setTimeout(() => {
-        setOpen(true);
-        onPickerOpen?.();
-      }, 0);
+    if (!open) {
+      setOpen(true);
+      onPickerOpen?.();
     }
   };
-  const handleIconMouseDown = ev => {
+  const handleIconMouseDown = () => {
     isBlurBlocked.current = true;
-    handleMouseDown(ev);
+    alreadyFocused.current = true;
+    handleClickInside();
+    if (open) {
+      setOpen(false);
+      onPickerClose?.();
+    } else {
+      setOpen(true);
+      onPickerOpen?.();
+    }
   };
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
-    blockClose.current = true;
+    handleClickInside();
   };
   const assignInput = (0, _react.useCallback)(inputElement => {
     internalInputRef.current = inputElement;
@@ -384,14 +359,18 @@ if (process.env.NODE_ENV !== "production") {
     "aria-activedescendant": _propTypes.default.string,
     "aria-atomic": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-autocomplete": _propTypes.default.oneOf(["both", "inline", "list", "none"]),
+    "aria-braillelabel": _propTypes.default.string,
+    "aria-brailleroledescription": _propTypes.default.string,
     "aria-busy": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-checked": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "mixed", "true"]), _propTypes.default.bool]),
     "aria-colcount": _propTypes.default.number,
     "aria-colindex": _propTypes.default.number,
+    "aria-colindextext": _propTypes.default.string,
     "aria-colspan": _propTypes.default.number,
     "aria-controls": _propTypes.default.string,
     "aria-current": _propTypes.default.oneOfType([_propTypes.default.oneOf(["date", "false", "location", "page", "step", "time", "true"]), _propTypes.default.bool]),
     "aria-describedby": _propTypes.default.string,
+    "aria-description": _propTypes.default.string,
     "aria-details": _propTypes.default.string,
     "aria-disabled": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-dropeffect": _propTypes.default.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
@@ -421,6 +400,7 @@ if (process.env.NODE_ENV !== "production") {
     "aria-roledescription": _propTypes.default.string,
     "aria-rowcount": _propTypes.default.number,
     "aria-rowindex": _propTypes.default.number,
+    "aria-rowindextext": _propTypes.default.string,
     "aria-rowspan": _propTypes.default.number,
     "aria-selected": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-setsize": _propTypes.default.number,
@@ -482,7 +462,7 @@ if (process.env.NODE_ENV !== "production") {
       "trimStart": _propTypes.default.func.isRequired,
       "valueOf": _propTypes.default.func.isRequired
     })]),
-    "autoComplete": _propTypes.default.string,
+    "autoComplete": _propTypes.default.any,
     "autoCorrect": _propTypes.default.string,
     "autoFocus": _propTypes.default.bool,
     "autoSave": _propTypes.default.string,
@@ -491,7 +471,7 @@ if (process.env.NODE_ENV !== "production") {
     "className": _propTypes.default.string,
     "color": _propTypes.default.string,
     "content": _propTypes.default.string,
-    "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
+    "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "plaintext-only", "true"]), _propTypes.default.bool]),
     "contextMenu": _propTypes.default.string,
     "dangerouslySetInnerHTML": _propTypes.default.shape({
       "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
@@ -819,9 +799,7 @@ if (process.env.NODE_ENV !== "production") {
     "onPointerDown": _propTypes.default.func,
     "onPointerDownCapture": _propTypes.default.func,
     "onPointerEnter": _propTypes.default.func,
-    "onPointerEnterCapture": _propTypes.default.func,
     "onPointerLeave": _propTypes.default.func,
-    "onPointerLeaveCapture": _propTypes.default.func,
     "onPointerMove": _propTypes.default.func,
     "onPointerMoveCapture": _propTypes.default.func,
     "onPointerOut": _propTypes.default.func,
@@ -836,6 +814,8 @@ if (process.env.NODE_ENV !== "production") {
     "onRateChangeCapture": _propTypes.default.func,
     "onReset": _propTypes.default.func,
     "onResetCapture": _propTypes.default.func,
+    "onResize": _propTypes.default.func,
+    "onResizeCapture": _propTypes.default.func,
     "onScroll": _propTypes.default.func,
     "onScrollCapture": _propTypes.default.func,
     "onSeeked": _propTypes.default.func,

package/lib/components/decimal/decimal.component.js

@@ -57,7 +57,7 @@ const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
     const [integer, remainder] = valueToFormat.split(".");
     const formattedInteger = Intl.NumberFormat(locale || l.locale(), {
       maximumFractionDigits: 0
-    }).format(integer);
+    }).format(+integer);
     let formattedNumber = formattedInteger;
     if (remainder?.length > precision) {
       formattedNumber += `${separator + remainder}`;
@@ -204,14 +204,18 @@ if (process.env.NODE_ENV !== "production") {
     "aria-activedescendant": _propTypes.default.string,
     "aria-atomic": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-autocomplete": _propTypes.default.oneOf(["both", "inline", "list", "none"]),
+    "aria-braillelabel": _propTypes.default.string,
+    "aria-brailleroledescription": _propTypes.default.string,
     "aria-busy": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-checked": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "mixed", "true"]), _propTypes.default.bool]),
     "aria-colcount": _propTypes.default.number,
     "aria-colindex": _propTypes.default.number,
+    "aria-colindextext": _propTypes.default.string,
     "aria-colspan": _propTypes.default.number,
     "aria-controls": _propTypes.default.string,
     "aria-current": _propTypes.default.oneOfType([_propTypes.default.oneOf(["date", "false", "location", "page", "step", "time", "true"]), _propTypes.default.bool]),
     "aria-describedby": _propTypes.default.string,
+    "aria-description": _propTypes.default.string,
     "aria-details": _propTypes.default.string,
     "aria-disabled": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-dropeffect": _propTypes.default.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
@@ -241,6 +245,7 @@ if (process.env.NODE_ENV !== "production") {
     "aria-roledescription": _propTypes.default.string,
     "aria-rowcount": _propTypes.default.number,
     "aria-rowindex": _propTypes.default.number,
+    "aria-rowindextext": _propTypes.default.string,
     "aria-rowspan": _propTypes.default.number,
     "aria-selected": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-setsize": _propTypes.default.number,
@@ -302,7 +307,7 @@ if (process.env.NODE_ENV !== "production") {
       "trimStart": _propTypes.default.func.isRequired,
       "valueOf": _propTypes.default.func.isRequired
     })]),
-    "autoComplete": _propTypes.default.string,
+    "autoComplete": _propTypes.default.any,
     "autoCorrect": _propTypes.default.string,
     "autoFocus": _propTypes.default.bool,
     "autoSave": _propTypes.default.string,
@@ -312,7 +317,7 @@ if (process.env.NODE_ENV !== "production") {
     "className": _propTypes.default.string,
     "color": _propTypes.default.string,
     "content": _propTypes.default.string,
-    "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
+    "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "plaintext-only", "true"]), _propTypes.default.bool]),
     "contextMenu": _propTypes.default.string,
     "dangerouslySetInnerHTML": _propTypes.default.shape({
       "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
@@ -641,9 +646,7 @@ if (process.env.NODE_ENV !== "production") {
     "onPointerDown": _propTypes.default.func,
     "onPointerDownCapture": _propTypes.default.func,
     "onPointerEnter": _propTypes.default.func,
-    "onPointerEnterCapture": _propTypes.default.func,
     "onPointerLeave": _propTypes.default.func,
-    "onPointerLeaveCapture": _propTypes.default.func,
     "onPointerMove": _propTypes.default.func,
     "onPointerMoveCapture": _propTypes.default.func,
     "onPointerOut": _propTypes.default.func,
@@ -658,6 +661,8 @@ if (process.env.NODE_ENV !== "production") {
     "onRateChangeCapture": _propTypes.default.func,
     "onReset": _propTypes.default.func,
     "onResetCapture": _propTypes.default.func,
+    "onResize": _propTypes.default.func,
+    "onResizeCapture": _propTypes.default.func,
     "onScroll": _propTypes.default.func,
     "onScrollCapture": _propTypes.default.func,
     "onSeeked": _propTypes.default.func,

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

@@ -47,7 +47,7 @@ export interface DialogProps extends ModalProps, TagProps {
     /** Adds Help tooltip to Header */
     help?: string;
     /** A custom close event handler */
-    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
     /** Determines if the close icon is shown */
     showCloseIcon?: boolean;
     /** Data tag prop bag for close Button */

package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -53,7 +53,7 @@ export interface DialogFullScreenProps extends ModalProps {
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** A custom close event handler */
-    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
 }
 export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, closeButtonDataProps, restoreFocusOnClose, ...rest }: DialogFullScreenProps) => React.JSX.Element;
 export default DialogFullScreen;

package/lib/components/draggable/draggable-container.component.js

@@ -25,7 +25,10 @@ const DraggableContainer = ({
   ...rest
 }) => {
   const [draggableItems, setDraggableItems] = (0, _react.useState)(_react.default.Children.toArray(children));
-  const hasProperChildren = (0, _react.useMemo)(() => _react.default.Children.toArray(children).every(child => /*#__PURE__*/_react.default.isValidElement(child) && child.type.displayName === _draggableItem.default.displayName), [children]);
+  const hasProperChildren = (0, _react.useMemo)(() => {
+    const invalidChild = _react.default.Children.toArray(children).find(child => ! /*#__PURE__*/_react.default.isValidElement(child) || child.type.displayName !== "DraggableItem");
+    return !invalidChild;
+  }, [children]);
 
   // `<DraggableItem />` is required to make `Draggable` work
   !hasProperChildren ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, `\`${DraggableContainer.displayName}\` only accepts children of type \`${_draggableItem.default.displayName}\`.`) : (0, _invariant.default)(false) : void 0;

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

@@ -100,7 +100,7 @@ const Drawer = ({
   }, []);
   const toggleDrawer = (0, _react.useCallback)(ev => {
     setIsExpanded(!isExpanded);
-    if (onChange) onChange(ev, !isExpanded);
+    onChange?.(ev, !isExpanded);
     if (isExpanded && drawerSidebarContentRef.current) {
       drawerSidebarContentRef.current.scrollTop = 0;
     }

package/lib/components/duelling-picklist/picklist-group/picklist-group.component.js

@@ -29,6 +29,7 @@ const PicklistGroup = exports.PicklistGroup = /*#__PURE__*/_react.default.forwar
     elementToFocus
   } = (0, _react.useContext)(_duellingPicklist.default);
   const [highlighted, setHighlighted] = (0, _react.useState)(false);
+  const nodeRef = _react.default.useRef(null);
   const filteredChildren = _react.default.Children.toArray(children);
   const handleClick = (0, _react.useCallback)(() => {
     onChange();
@@ -70,10 +71,12 @@ const PicklistGroup = exports.PicklistGroup = /*#__PURE__*/_react.default.forwar
       enter: 300,
       exit: 0
     },
+    nodeRef: nodeRef,
     classNames: "picklist-group"
   }, transitionGroupProps, type === "add" ? {
     enter: false
   } : {}), /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledGroupWrapper, {
+    ref: nodeRef,
     highlighted: highlighted,
     type: type
   }, /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledPicklistGroupUl, null, /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledPicklistGroup, {

package/lib/components/grouped-character/grouped-character.component.js

@@ -138,14 +138,18 @@ if (process.env.NODE_ENV !== "production") {
     "aria-activedescendant": _propTypes.default.string,
     "aria-atomic": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-autocomplete": _propTypes.default.oneOf(["both", "inline", "list", "none"]),
+    "aria-braillelabel": _propTypes.default.string,
+    "aria-brailleroledescription": _propTypes.default.string,
     "aria-busy": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-checked": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "mixed", "true"]), _propTypes.default.bool]),
     "aria-colcount": _propTypes.default.number,
     "aria-colindex": _propTypes.default.number,
+    "aria-colindextext": _propTypes.default.string,
     "aria-colspan": _propTypes.default.number,
     "aria-controls": _propTypes.default.string,
     "aria-current": _propTypes.default.oneOfType([_propTypes.default.oneOf(["date", "false", "location", "page", "step", "time", "true"]), _propTypes.default.bool]),
     "aria-describedby": _propTypes.default.string,
+    "aria-description": _propTypes.default.string,
     "aria-details": _propTypes.default.string,
     "aria-disabled": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-dropeffect": _propTypes.default.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
@@ -175,6 +179,7 @@ if (process.env.NODE_ENV !== "production") {
     "aria-roledescription": _propTypes.default.string,
     "aria-rowcount": _propTypes.default.number,
     "aria-rowindex": _propTypes.default.number,
+    "aria-rowindextext": _propTypes.default.string,
     "aria-rowspan": _propTypes.default.number,
     "aria-selected": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "true"]), _propTypes.default.bool]),
     "aria-setsize": _propTypes.default.number,
@@ -236,7 +241,7 @@ if (process.env.NODE_ENV !== "production") {
       "trimStart": _propTypes.default.func.isRequired,
       "valueOf": _propTypes.default.func.isRequired
     })]),
-    "autoComplete": _propTypes.default.string,
+    "autoComplete": _propTypes.default.any,
     "autoCorrect": _propTypes.default.string,
     "autoFocus": _propTypes.default.bool,
     "autoSave": _propTypes.default.string,
@@ -247,7 +252,7 @@ if (process.env.NODE_ENV !== "production") {
     "className": _propTypes.default.string,
     "color": _propTypes.default.string,
     "content": _propTypes.default.string,
-    "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
+    "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "plaintext-only", "true"]), _propTypes.default.bool]),
     "contextMenu": _propTypes.default.string,
     "dangerouslySetInnerHTML": _propTypes.default.shape({
       "__html": _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]).isRequired
@@ -576,9 +581,7 @@ if (process.env.NODE_ENV !== "production") {
     "onPointerDown": _propTypes.default.func,
     "onPointerDownCapture": _propTypes.default.func,
     "onPointerEnter": _propTypes.default.func,
-    "onPointerEnterCapture": _propTypes.default.func,
     "onPointerLeave": _propTypes.default.func,
-    "onPointerLeaveCapture": _propTypes.default.func,
     "onPointerMove": _propTypes.default.func,
     "onPointerMoveCapture": _propTypes.default.func,
     "onPointerOut": _propTypes.default.func,
@@ -593,6 +596,8 @@ if (process.env.NODE_ENV !== "production") {
     "onRateChangeCapture": _propTypes.default.func,
     "onReset": _propTypes.default.func,
     "onResetCapture": _propTypes.default.func,
+    "onResize": _propTypes.default.func,
+    "onResizeCapture": _propTypes.default.func,
     "onScroll": _propTypes.default.func,
     "onScrollCapture": _propTypes.default.func,
     "onSeeked": _propTypes.default.func,

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

@@ -7,7 +7,7 @@ declare type StyledHeaderProps = {
     hasBackLink?: boolean;
 };
 declare const StyledHeader: import("styled-components").StyledComponent<"div", any, StyledHeaderProps, never>;
-declare const StyledHeadingBackButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>, any, {}, never>;
+declare const StyledHeadingBackButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../link").LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, any, {}, never>;
 declare type StyledHeadingTitleProps = {
     withMargin?: boolean;
 };

package/lib/components/help/help.component.js

@@ -95,7 +95,7 @@ exports.Help = Help;
 if (process.env.NODE_ENV !== "production") {
   Help.propTypes = {
     "ariaLabel": _propTypes.default.string,
-    "as": _propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]),
+    "as": _propTypes.default.oneOf(["a", "abbr", "address", "animate", "animateMotion", "animateTransform", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "circle", "cite", "clipPath", "code", "col", "colgroup", "data", "datalist", "dd", "defs", "del", "desc", "details", "dfn", "dialog", "div", "dl", "dt", "ellipse", "em", "embed", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "fieldset", "figcaption", "figure", "filter", "footer", "foreignObject", "form", "g", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "line", "linearGradient", "link", "main", "map", "mark", "marker", "mask", "menu", "menuitem", "meta", "metadata", "meter", "mpath", "nav", "noindex", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "path", "pattern", "picture", "polygon", "polyline", "pre", "progress", "q", "radialGradient", "rect", "rp", "rt", "ruby", "s", "samp", "script", "search", "section", "select", "set", "slot", "small", "source", "span", "stop", "strong", "style", "sub", "summary", "sup", "svg", "switch", "symbol", "table", "tbody", "td", "template", "text", "textarea", "textPath", "tfoot", "th", "thead", "time", "title", "tr", "track", "tspan", "u", "ul", "use", "var", "video", "view", "wbr", "webview"]),
     "children": _propTypes.default.node,
     "helpId": _propTypes.default.string,
     "href": _propTypes.default.string,