carbon-react 147.10.0 → 148.0.0

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -7,11 +7,11 @@ import Events from "../../../../__internal__/utils/helpers/events";
 import MenuContext from "../menu.context";
 import { characterNavigation } from "../keyboard-navigation";
 import SubmenuContext from "./submenu.context";
-import useClickAwayListener from "../../../../hooks/__internal__/useClickAwayListener";
 import guid from "../../../../__internal__/utils/helpers/guid";
 import { SCROLLABLE_BLOCK, SCROLLABLE_BLOCK_PARENT, BLOCK_INDEX_SELECTOR, ALL_CHILDREN_SELECTOR } from "../locators";
 import useStableCallback from "../../../../hooks/__internal__/useStableCallback/useStableCallback";
 import FixedNavigationBarContext from "../../../navigation-bar/__internal__/fixed-navigation-bar.context";
+import { defaultFocusableSelectors as focusableSelectors } from "../../../../__internal__/focus-trap/focus-trap-utils";
 const Submenu = /*#__PURE__*/React.forwardRef(({
   children,
   className,
@@ -46,7 +46,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
   const [characterString, setCharacterString] = useState("");
   const [applyFocusRadius, setApplyFocusRadius] = useState(false);
   const [applyFocusRadiusToLastItem, setApplyFocusRadiusToLastItem] = useState(false);
-  const shiftTabPressed = useRef(false);
   const focusFirstMenuItemOnOpen = useRef(false);
   const numberOfChildren = submenuItemIds.length;
   const {
@@ -137,7 +136,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }
   }, [submenuOpen, onSubmenuOpen]);
   const closeSubmenu = useCallback(() => {
-    shiftTabPressed.current = false;
     setSubmenuOpen(false);
     setSubmenuFocusId(null);
     if (onSubmenuClose) {
@@ -166,38 +164,20 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       const index = findCurrentIndex(submenuFocusId);
       let nextIndex = index;
       if (href && !submenuFocusId) {
-        if (Events.isDownKey(event) || Events.isUpKey(event) || Events.isTabKey(event) && !Events.isShiftKey(event)) {
+        if (Events.isDownKey(event) || Events.isUpKey(event)) {
           event.preventDefault();
           setSubmenuFocusId(submenuItemIds[0]);
           return;
         }
       }
-      if (Events.isTabKey(event) && !Events.isShiftKey(event)) {
-        if (nextIndex === numberOfChildren - 1) {
-          closeSubmenu();
-          return;
-        }
-        shiftTabPressed.current = false;
-        nextIndex += 1;
-      }
-      if (Events.isTabKey(event) && Events.isShiftKey(event)) {
-        if (nextIndex <= 0) {
-          closeSubmenu();
-          return;
-        }
-        shiftTabPressed.current = true;
-        nextIndex -= 1;
-      }
       if (Events.isDownKey(event)) {
         event.preventDefault();
-        shiftTabPressed.current = false;
         if (nextIndex < numberOfChildren - 1) {
           nextIndex += 1;
         }
       }
       if (Events.isUpKey(event)) {
         event.preventDefault();
-        shiftTabPressed.current = false;
         setApplyFocusRadius(false);
         if (nextIndex > 0) {
           nextIndex -= 1;
@@ -210,17 +190,16 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
       if (Events.isHomeKey(event)) {
         event.preventDefault();
-        shiftTabPressed.current = false;
+        event.stopPropagation();
         nextIndex = 0;
       }
       if (Events.isEndKey(event)) {
         event.preventDefault();
-        shiftTabPressed.current = false;
+        event.stopPropagation();
         nextIndex = numberOfChildren - 1;
       }
       if (event.key.length === 1) {
         event.stopPropagation();
-        shiftTabPressed.current = false;
         if (characterTimer.current) {
           restartCharacterTimeout();
         } else {
@@ -230,7 +209,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       } else {
         setCharacterString("");
       }
-      const eventIsFromInput = Events.composedPath(event).find(p => p.getAttribute("data-element") === "input" || p.getAttribute("data-element") === "input-icon-toggle");
+      const eventIsFromInput = Events.composedPath(event.nativeEvent).find(p => p instanceof HTMLElement && (p.getAttribute("data-element") === "input" || p.getAttribute("data-element") === "input-icon-toggle"));
       if (!eventIsFromInput) {
         if (Events.isEnterKey(event)) {
           /* timeout enforces that the "closeSubmenu" method will be run after 
@@ -250,7 +229,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
 
       /* istanbul ignore else */
       if (items) {
-        setSubmenuItemIds(Array.from(items).map(item => item.getAttribute("id")));
+        setSubmenuItemIds(Array.from(items).filter(item => item.querySelector(focusableSelectors)).map(item => item.getAttribute("id")));
       }
     }
   }, [children, submenuOpen, submenuRef]);
@@ -260,11 +239,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       setSubmenuFocusId(submenuItemIds[0]);
     }
   }, [submenuOpen, submenuFocusId, submenuItemIds]);
-  const handleClickAway = () => {
-    document.removeEventListener("click", handleClickAway);
-    closeSubmenu();
-  };
-  const handleClickInside = useClickAwayListener(handleClickAway);
   const handleClick = event => {
     openSubmenu();
     if (onClick) {
@@ -281,13 +255,17 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       }
     }
   }, [submenuRef, characterString, submenuItemIds]);
+  const handleSubmenuBlur = event => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      closeSubmenu();
+    }
+  };
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
       "data-component": "submenu-wrapper",
       inFullscreenView: inFullscreenView,
       asPassiveItem: asPassiveItem,
-      menuType: menuContext.menuType,
-      onClick: handleClickInside
+      menuType: menuContext.menuType
     }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
       onClick: asPassiveItem ? undefined : onClick,
       className: className,
@@ -319,7 +297,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
     isSubmenuOpen: submenuOpen,
-    onClick: handleClickInside,
     ref: setSubmenuRef
   }, /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({}, rest, {
     className: className,
@@ -347,14 +324,14 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     maxHeight: submenuMaxHeight,
     applyFocusRadiusStyling: applyFocusRadius,
     applyFocusRadiusStylingToLastItem: applyFocusRadiusToLastItem,
-    submenuMaxWidth: submenuMaxWidth
+    submenuMaxWidth: submenuMaxWidth,
+    onBlur: handleSubmenuBlur
   }, /*#__PURE__*/React.createElement(SubmenuContext.Provider, {
     value: {
       submenuFocusId,
       handleKeyDown,
       blockIndex,
       updateFocusId: setSubmenuFocusId,
-      shiftTabPressed: shiftTabPressed.current,
       submenuHasMaxWidth: !!submenuMaxWidth
     }
   }, children)));

package/esm/components/menu/__internal__/submenu/submenu.context.d.ts

@@ -2,8 +2,7 @@ import React from "react";
 export interface SubmenuContextProps {
     submenuFocusId?: string | null;
     updateFocusId?: (id: string) => void;
-    handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
-    shiftTabPressed?: boolean;
+    handleKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
     blockIndex?: number;
     submenuHasMaxWidth?: boolean;
 }

package/esm/components/menu/__internal__/submenu/submenu.style.js

@@ -149,7 +149,6 @@ const StyledSubmenu = styled.ul`
       display: flex;
       align-items: center;
       white-space: nowrap;
-      cursor: pointer;
 
       ${inFullscreenView && css`
         white-space: normal;
@@ -169,16 +168,6 @@ const StyledSubmenu = styled.ul`
           background-color: ${menuConfigVariants[menuType].submenuItemBackground};
         }
 
-        > a:hover,
-        > button:hover {
-          background-color: transparent;
-          color: var(--colorsComponentsMenuYang100);
-
-          > [data-component="icon"] {
-            color: var(--colorsComponentsMenuYang100);
-          }
-        }
-
         > a,
         > button {
           padding: 11px 16px 12px;

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

@@ -1,7 +1,8 @@
 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, { useRef, useEffect, useCallback, useContext } from "react";
+import React, { useRef, useEffect, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
+import { defaultFocusableSelectors as focusableSelectors } from "../../../__internal__/focus-trap/focus-trap-utils";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledMenuItemWrapper from "./menu-item.style";
 import Events from "../../../__internal__/utils/helpers/events";
@@ -39,6 +40,7 @@ export const MenuItem = ({
   !(icon || children) ? process.env.NODE_ENV !== "production" ? invariant(false, "Either prop `icon` must be defined or this node must have `children`.") : invariant(false) : void 0;
   !(children || ariaLabel || typeof submenu === "string") ? process.env.NODE_ENV !== "production" ? invariant(false, "If no text is provided an `ariaLabel` should be given to facilitate accessibility.") : invariant(false) : void 0;
   !(typeof submenu === "boolean" || submenu === undefined || children && typeof submenu === "string" && submenu.length) ? process.env.NODE_ENV !== "production" ? invariant(false, "You should not pass `children` when `submenu` is an empty string") : invariant(false) : void 0;
+  const menuItemId = useRef(guid());
   const {
     isChildOfSegment,
     overriddenVariant
@@ -48,24 +50,21 @@ export const MenuItem = ({
     registerItem,
     unregisterItem,
     focusId,
-    menuType,
-    openSubmenuId
+    updateFocusId,
+    menuType
   } = useContext(MenuContext);
-  const menuItemId = useRef(guid());
   const submenuContext = useContext(SubmenuContext);
+  const isInSubmenu = Object.keys(submenuContext).length > 0;
   const {
     submenuFocusId,
     updateFocusId: updateSubmenuFocusId,
     handleKeyDown: handleSubmenuKeyDown,
-    shiftTabPressed,
     submenuHasMaxWidth
   } = submenuContext;
-  const ref = useRef(null);
   const focusFromMenu = focusId === menuItemId.current;
   const focusFromSubmenu = submenuFocusId ? submenuFocusId === menuItemId.current : undefined;
-  const inputRef = useRef(null);
-  inputRef.current = ref.current ? ref.current.querySelector("[data-element='input']") : null;
-  const focusRef = inputRef.current ? inputRef : ref;
+  const ref = useRef(null);
+  const firstFocusableChild = ref.current?.querySelector(focusableSelectors) ?? null;
   useEffect(() => {
     const id = menuItemId.current;
 
@@ -81,41 +80,35 @@ export const MenuItem = ({
     };
   }, [registerItem, unregisterItem]);
   useEffect(() => {
-    const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
-    if (!openSubmenuId && focusFromSubmenu === undefined && focusFromMenu) {
-      /* istanbul ignore else */
-      if (focusRef.current) {
-        focusRef.current?.focus();
-      }
-    } else if (focusFromSubmenu && !(shiftTabPressed && inputIcon?.getAttribute("tabindex") === "0")) {
-      /* istanbul ignore else */
-      if (focusRef.current) {
-        focusRef.current?.focus();
+    if (focusFromMenu && !focusFromSubmenu || focusFromSubmenu) {
+      if (firstFocusableChild) {
+        firstFocusableChild.focus();
+        return;
       }
+      ref.current?.focus();
     }
-  }, [openSubmenuId, focusFromMenu, focusFromSubmenu, shiftTabPressed, focusRef]);
-  const updateFocusOnClick = useCallback(() => {
-    if (updateSubmenuFocusId) {
-      updateSubmenuFocusId(menuItemId.current);
-    }
-  }, [updateSubmenuFocusId]);
-  const handleKeyDown = useCallback(event => {
-    if (onKeyDown) {
-      onKeyDown(event);
+  }, [firstFocusableChild, focusFromMenu, focusFromSubmenu]);
+  const handleFocus = event => {
+    if (isInSubmenu) {
+      event.stopPropagation();
+      updateSubmenuFocusId?.(menuItemId.current);
+    } else {
+      updateFocusId?.(menuItemId.current);
     }
-    if (ref.current && Events.isEscKey(event)) {
+  };
+  const handleKeyDown = event => {
+    onKeyDown?.(event);
+    if (Events.isEscKey(event)) {
       ref.current?.focus();
     }
-    if (handleSubmenuKeyDown) {
-      handleSubmenuKeyDown(event);
-    }
-  }, [onKeyDown, handleSubmenuKeyDown]);
+    handleSubmenuKeyDown?.(event);
+  };
   const elementProps = {
     className: href || onClick ? "carbon-menu-item--has-link" : "",
-    href,
+    href: firstFocusableChild ? undefined : href,
+    onClick: firstFocusableChild ? undefined : onClick,
     target,
     rel,
-    onClick,
     icon,
     removeAriaLabelOnIcon: true,
     selected,
@@ -128,8 +121,7 @@ export const MenuItem = ({
   }
   const getTitle = title => maxWidth && typeof title === "string" ? title : undefined;
   const itemMaxWidth = !inFullscreenView ? maxWidth : undefined;
-  const asPassiveItem = !(onClick || href);
-  const hasInput = !!inputRef.current;
+  const asPassiveItem = !(onClick || href || firstFocusableChild);
   if (submenu) {
     return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
       "data-component": "menu-item",
@@ -137,12 +129,12 @@ export const MenuItem = ({
       "data-role": dataRole,
       menuType: menuType,
       title: getTitle(submenu),
-      maxWidth: itemMaxWidth,
-      onClick: updateFocusOnClick
+      maxWidth: itemMaxWidth
     }, rest, {
       inFullscreenView: inFullscreenView,
       id: menuItemId.current,
-      as: as
+      as: as,
+      onFocus: handleFocus
     }), /*#__PURE__*/React.createElement(Submenu, _extends({}, typeof submenu !== "boolean" && {
       title: submenu
     }, {
@@ -160,19 +152,20 @@ export const MenuItem = ({
     }, rest), children));
   }
   const paddingProps = filterStyledSystemPaddingProps(rest);
+  const hasInput = !!ref.current?.querySelector("[data-element='input']");
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({
     "data-component": "menu-item",
     "data-element": dataElement,
     "data-role": dataRole,
     menuType: menuType,
-    inSubmenu: !!handleSubmenuKeyDown,
+    inSubmenu: isInSubmenu,
     title: getTitle(children),
     maxWidth: itemMaxWidth
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
     id: menuItemId.current,
-    onClick: updateFocusOnClick,
-    as: as
+    as: as,
+    onFocus: handleFocus
   }), /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({
     menuType: menuType,
     "data-role": "menu-item-wrapper"
@@ -181,12 +174,12 @@ export const MenuItem = ({
     ariaLabel: ariaLabel,
     maxWidth: !submenuHasMaxWidth ? itemMaxWidth : undefined,
     inFullscreenView: inFullscreenView,
-    asPassiveItem: asPassiveItem,
-    placeholderTabIndex: asPassiveItem
+    asPassiveItem: asPassiveItem
   }, paddingProps, {
     asDiv: hasInput || as === "div",
+    hasFocusableChild: !!firstFocusableChild,
     hasInput: hasInput,
-    inSubmenu: !!handleSubmenuKeyDown
+    inSubmenu: isInSubmenu
   }), children));
 };
 export default MenuItem;

package/esm/components/menu/menu-item/menu-item.style.d.ts

@@ -9,15 +9,15 @@ interface StyledMenuItemWrapperProps extends Pick<MenuWithChildren, "href" | "sh
     isOpen?: boolean;
     inFullscreenView?: boolean;
     asPassiveItem?: boolean;
-    placeholderTabIndex?: boolean;
     icon?: string;
     ariaLabel?: string;
     asDiv?: boolean;
+    hasFocusableChild?: boolean;
     hasInput?: boolean;
     menuItemVariant?: Pick<MenuWithChildren, "variant">["variant"];
     inSubmenu?: boolean;
 }
 declare const StyledMenuItemWrapper: import("styled-components").StyledComponent<"a", any, {
-    as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLButtonElement | HTMLLinkElement>>;
+    as: import("react").ForwardRefExoticComponent<import("../../link").LinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 } & StyledMenuItemWrapperProps, "as">;
 export default StyledMenuItemWrapper;

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

@@ -91,6 +91,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
   overrideColor,
   asPassiveItem,
   asDiv,
+  hasFocusableChild,
   hasInput,
   inSubmenu
 }) => css`
@@ -104,7 +105,6 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
     a,
     button {
-      cursor: pointer;
       min-height: 40px;
       height: 100%;
       box-sizing: border-box;
@@ -174,7 +174,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
             background-color: transparent;
           }
 
-          ${!asDiv && css`
+          ${!asDiv && !asPassiveItem && css`
             background-color: var(--colorsComponentsMenuAutumnStandard600);
             color: var(--colorsComponentsMenuYang100);
 
@@ -190,63 +190,61 @@ const StyledMenuItemWrapper = styled.a.attrs({
       }
     `}
 
-    ${asPassiveItem ? `
-        ${!inFullscreenView && `
-            > a:not(:has(button)) {
-              padding: 11px 16px;
-            }
+    ${hasFocusableChild && css`
+      ${!inFullscreenView && css`
+        > a:not(:has(button)) {
+          padding: 11px 16px;
+        }
 
-            > a:has(${StyledButton}:not(.search-button)) {
-             height: 100%;
+        > a:has(${StyledButton}:not(.search-button)) {
+          height: 100%;
 
-             ${StyledContent} {
-                height: inherit;
+          ${StyledContent} {
+            height: inherit;
 
-                div {
-                  height: inherit;
-                }
-              }
-
-              ${StyledButton} {
-                min-height: 40px;
-                padding: 10px 0px;
-                box-sizing: border-box;
-                height: 100%;
-              }
+            div {
+              height: inherit;
             }
-          `}
-
-        ${StyledIconButton} {
-          > span {
-            display: inline-flex;
-            margin-right: 0;
           }
 
-          :focus {
-            outline: none;
-            [data-component="icon"] {
-              color: ${menuConfigVariants[menuType].color};
-            }
+          ${StyledButton} {
+            min-height: 40px;
+            padding: 10px 0px;
+            box-sizing: border-box;
+            height: 100%;
           }
         }
-      ` : `
-        ${hasSubmenu || maxWidth && !inFullscreenView ? `
-              a,
-              ${StyledLink} a,
-              button,
-              ${StyledLink} button {
-                padding: 11px 16px ${hasSubmenu && maxWidth ? "12px" : "10px"};
-              }
-            ` : `
-              a,
-              ${StyledLink} a,
-              button,
-              ${StyledLink} button {
-                padding: ${!inFullscreenView ? "11px" : "0px"} 16px;
-              }
-            `}
       `}
 
+      ${StyledIconButton} {
+        > span {
+          display: inline-flex;
+          margin-right: 0;
+        }
+
+        :focus {
+          outline: none;
+          [data-component="icon"] {
+            color: ${menuConfigVariants[menuType].color};
+          }
+        }
+      }
+    `}
+
+    ${!hasFocusableChild && !inFullscreenView && css`
+      ${hasSubmenu || maxWidth ? css`
+            > a,
+            > button {
+              padding: 11px 16px ${hasSubmenu && maxWidth ? "12px" : "10px"};
+            }
+          ` : css`
+            > a,
+            > button {
+              padding: 11px 16px;
+            }
+          `}
+    `}
+
     button,
     ${StyledLink} button,
     a,
@@ -422,28 +420,10 @@ const StyledMenuItemWrapper = styled.a.attrs({
           }
         `}
 
-      ${asPassiveItem && css`
-          cursor: default;
-
-          a {
-            padding: 0 16px;
-          }
-
-          :hover {
-            background: transparent;
-          }
-        `}
-
-
       > a, > button {
-       min-height: 40px;
-       line-height: 40px;
-      }
-
-      a,
-      ${StyledLink} a,
-      button,
-      ${StyledLink} button {
+        min-height: 40px;
+        line-height: 40px;
+        padding: 0px 16px;
         width: 100vw;
         box-sizing: border-box;
       }
@@ -454,21 +434,23 @@ const StyledMenuItemWrapper = styled.a.attrs({
         position: relative;
       }
 
-      && {
-        > a:focus,
-        > a:hover,
-        > button:focus,
-        > button:hover {
-          background-color: var(--colorsComponentsMenuAutumnStandard600);
-          color: var(--colorsComponentsMenuYang100);
+      ${!asPassiveItem && css`
+          && {
+            > a:focus,
+            > a:hover,
+            > button:focus,
+            > button:hover {
+              background-color: var(--colorsComponentsMenuAutumnStandard600);
+              color: var(--colorsComponentsMenuYang100);
 
-            ${!hasInput && `
-              [data-component="icon"] {
-                color: var(--colorsComponentsMenuYang100);
-              }
-            `}
+              ${!hasInput && css`
+                [data-component="icon"] {
+                  color: var(--colorsComponentsMenuYang100);
+                }
+              `}
+            }
           }
-        }
+        `}
       }
     `}
   `}

package/esm/components/menu/menu.component.js

@@ -54,6 +54,7 @@ export const Menu = ({
       openSubmenuId,
       setOpenSubmenuId,
       focusId,
+      updateFocusId: setFocusId,
       registerItem,
       unregisterItem
     }

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

@@ -18,7 +18,7 @@ export interface ModalProps extends Omit<TagProps, "data-component"> {
     /** Determines if the background is disabled when the modal is open */
     enableBackgroundUI?: boolean;
     /** A custom close event handler */
-    onCancel?: (ev: React.KeyboardEvent<HTMLElement>) => void;
+    onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
     /** Sets the open state of the modal */
     open: boolean;
     /** Transition time */

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

@@ -98,14 +98,18 @@ if (process.env.NODE_ENV !== "production") {
     "aria-activedescendant": PropTypes.string,
     "aria-atomic": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
     "aria-autocomplete": PropTypes.oneOf(["both", "inline", "list", "none"]),
+    "aria-braillelabel": PropTypes.string,
+    "aria-brailleroledescription": PropTypes.string,
     "aria-busy": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
     "aria-checked": PropTypes.oneOfType([PropTypes.oneOf(["false", "mixed", "true"]), PropTypes.bool]),
     "aria-colcount": PropTypes.number,
     "aria-colindex": PropTypes.number,
+    "aria-colindextext": PropTypes.string,
     "aria-colspan": PropTypes.number,
     "aria-controls": PropTypes.string,
     "aria-current": PropTypes.oneOfType([PropTypes.oneOf(["date", "false", "location", "page", "step", "time", "true"]), PropTypes.bool]),
     "aria-describedby": PropTypes.string,
+    "aria-description": PropTypes.string,
     "aria-details": PropTypes.string,
     "aria-disabled": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
     "aria-dropeffect": PropTypes.oneOf(["copy", "execute", "link", "move", "none", "popup"]),
@@ -135,6 +139,7 @@ if (process.env.NODE_ENV !== "production") {
     "aria-roledescription": PropTypes.string,
     "aria-rowcount": PropTypes.number,
     "aria-rowindex": PropTypes.number,
+    "aria-rowindextext": PropTypes.string,
     "aria-rowspan": PropTypes.number,
     "aria-selected": PropTypes.oneOfType([PropTypes.oneOf(["false", "true"]), PropTypes.bool]),
     "aria-setsize": PropTypes.number,
@@ -202,7 +207,7 @@ if (process.env.NODE_ENV !== "production") {
     "className": PropTypes.string,
     "color": PropTypes.string,
     "content": PropTypes.string,
-    "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
+    "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "plaintext-only", "true"]), PropTypes.bool]),
     "contextMenu": PropTypes.string,
     "dangerouslySetInnerHTML": PropTypes.shape({
       "__html": PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired
@@ -500,9 +505,7 @@ if (process.env.NODE_ENV !== "production") {
     "onPointerDown": PropTypes.func,
     "onPointerDownCapture": PropTypes.func,
     "onPointerEnter": PropTypes.func,
-    "onPointerEnterCapture": PropTypes.func,
     "onPointerLeave": PropTypes.func,
-    "onPointerLeaveCapture": PropTypes.func,
     "onPointerMove": PropTypes.func,
     "onPointerMoveCapture": PropTypes.func,
     "onPointerOut": PropTypes.func,
@@ -517,6 +520,8 @@ if (process.env.NODE_ENV !== "production") {
     "onRateChangeCapture": PropTypes.func,
     "onReset": PropTypes.func,
     "onResetCapture": PropTypes.func,
+    "onResize": PropTypes.func,
+    "onResizeCapture": PropTypes.func,
     "onScroll": PropTypes.func,
     "onScrollCapture": PropTypes.func,
     "onSeeked": PropTypes.func,
@@ -549,7 +554,6 @@ if (process.env.NODE_ENV !== "production") {
     "onWaitingCapture": PropTypes.func,
     "onWheel": PropTypes.func,
     "onWheelCapture": PropTypes.func,
-    "placeholder": PropTypes.string,
     "position": PropTypes.oneOf(["left", "right"]),
     "prefix": PropTypes.string,
     "property": PropTypes.string,