carbon-react 87.0.0 → 87.3.0

package/lib/{components/textarea → __internal__}/character-count/character-count.component.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = require("styled-components");
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 var _characterCount = _interopRequireDefault(require("./character-count.style"));
 

package/lib/{components/textarea → __internal__}/character-count/character-count.style.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
+var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/__internal__/input/input-presentation.style.js

@@ -13,8 +13,6 @@ var _base = _interopRequireDefault(require("../../style/themes/base"));
 
 var _inputSizes = _interopRequireDefault(require("./input-sizes.style"));
 
-var _input = _interopRequireDefault(require("./input.style"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -51,12 +49,6 @@ const InputPresentationStyle = _styledComponents.default.div`
   size
 }) => _inputSizes.default[size].horizontalPadding};
 
-  ${_input.default} {
-    &:-webkit-autofill {
-      margin-top: 2px;
-    }
-  }
-
   ${({
   disabled,
   theme

package/lib/__internal__/input/input.style.js

@@ -33,9 +33,8 @@ const StyledInput = _styledComponents.default.input`
   width: 30px;
 
   &:-webkit-autofill {
-    box-shadow: 0 0 0px 1000px #fff inset;
-    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
-    -webkit-box-border: none;
+    background-clip: text;
+    -webkit-background-clip: text;
   }
 
   ${({
@@ -58,11 +57,6 @@ const StyledInput = _styledComponents.default.input`
       cursor: not-allowed;
     `}
 
-  &:invalid, &:required {
-    box-shadow: 0 0 0px 1000px #fff inset;
-    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
-  }
-
   ${({
   readOnly,
   theme

package/lib/components/flat-table/flat-table-body/flat-table-body.component.js

@@ -11,11 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FlatTableBody = ({
+const FlatTableBody = /*#__PURE__*/_react.default.forwardRef(({
   children
-}) => {
-  return /*#__PURE__*/_react.default.createElement("tbody", null, children);
-};
+}, ref) => {
+  return /*#__PURE__*/_react.default.createElement("tbody", {
+    ref: ref
+  }, children);
+});
 
 FlatTableBody.propTypes = {
   /** Array of FlatTableRow. */

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _icon = _interopRequireDefault(require("../../icon/icon.style"));
+
+var _flatTableBody = _interopRequireDefault(require("../flat-table-body/flat-table-body.component"));
+
+var _flatTableCell = _interopRequireDefault(require("../flat-table-cell/flat-table-cell.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const DropTarget = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
+  const [, drop] = (0, _reactDnd.useDrop)({
+    accept: "flatTableRow",
+
+    drop() {
+      getOrder();
+    }
+
+  });
+  return /*#__PURE__*/_react.default.createElement(_flatTableBody.default, _extends({
+    ref: drop
+  }, rest), children);
+};
+
+const FlatTableBodyDraggable = ({
+  children,
+  getOrder
+}) => {
+  const [draggableItems, setDraggableItems] = (0, _react.useState)(_react.default.Children.toArray(children));
+  const isFirstRender = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => {
+    if (!isFirstRender.current) {
+      setDraggableItems(_react.default.Children.toArray(children));
+    } else {
+      isFirstRender.current = false;
+    }
+  }, [children]);
+
+  const findItem = id => {
+    const draggableItem = draggableItems.filter(item => `${item.props.id}` === id)[0];
+    return {
+      draggableItem,
+      index: draggableItems.indexOf(draggableItem)
+    };
+  };
+
+  const moveItem = (id, atIndex) => {
+    const {
+      draggableItem,
+      index
+    } = findItem(id);
+    const copyOfDraggableItems = [...draggableItems];
+    copyOfDraggableItems.splice(index, 1);
+    copyOfDraggableItems.splice(atIndex, 0, draggableItem);
+    setDraggableItems(copyOfDraggableItems);
+  };
+
+  const getItemsId = () => {
+    if (!getOrder) {
+      return;
+    }
+
+    const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
+    getOrder(draggableItemIds);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_reactDnd.DndProvider, {
+    backend: _reactDndHtml5Backend.default
+  }, /*#__PURE__*/_react.default.createElement(DropTarget, {
+    getOrder: getItemsId
+  }, draggableItems.map(item => /*#__PURE__*/_react.default.cloneElement(item, {
+    id: `${item.props.id}`,
+    moveItem,
+    findItem,
+    draggable: true
+  }, [/*#__PURE__*/_react.default.createElement(_flatTableCell.default, {
+    key: item.props.id
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "drag"
+  })), item.props.children]))));
+};
+
+FlatTableBodyDraggable.propTypes = {
+  getOrder: _propTypes.default.func,
+  children: _propTypes.default.node.isRequired
+};
+DropTarget.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  getOrder: _propTypes.default.func
+};
+var _default = FlatTableBodyDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+export interface FlatTableBodyDraggableProps {
+  /** Array of FlatTableRow. */
+  children: React.ReactNode;
+  /** Callback fired when order is changed */
+  getOrder?: (draggableItemIds: number[]) => void;
+}
+
+declare function FlatTableBodyDraggable(props: FlatTableBodyDraggableProps): JSX.Element;
+
+export default FlatTableBodyDraggable;

package/lib/components/flat-table/flat-table-body-draggable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flat-table-body-draggable";
+export * from "./flat-table-body-draggable";

package/lib/components/flat-table/flat-table-body-draggable/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _flatTableBodyDraggable.default;
+  }
+});
+
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDnd = require("react-dnd");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FlatTableRowDraggable = ({
+  children,
+  id,
+  findItem,
+  moveItem
+}) => {
+  const originalIndex = findItem(id).index;
+  const [{
+    isDragging
+  }, drag] = (0, _reactDnd.useDrag)({
+    item: {
+      type: "flatTableRow",
+      id,
+      originalIndex
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging()
+    }),
+    end: (dropResult, monitor) => {
+      const {
+        id: droppedId,
+        originalIndex: oIndex
+      } = monitor.getItem();
+      const didDrop = monitor.didDrop();
+
+      if (!didDrop) {
+        moveItem(droppedId, oIndex);
+      }
+    }
+  });
+  const [, drop] = (0, _reactDnd.useDrop)({
+    accept: "flatTableRow",
+    canDrop: () => false,
+
+    hover({
+      id: draggedId
+    }) {
+      if (draggedId !== id) {
+        const {
+          index: overIndex
+        } = findItem(id);
+        moveItem(draggedId, overIndex);
+      }
+    }
+
+  });
+  return /*#__PURE__*/_react.default.cloneElement(children, {
+    id,
+    isDragging,
+    ref: node => drag(drop(node))
+  });
+};
+
+FlatTableRowDraggable.propTypes = {
+  /** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
+  children: _propTypes.default.node.isRequired,
+
+  /** ID for use in drag and drop functionality */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /** function to find an item in the list of draggable items */
+  findItem: _propTypes.default.func.isRequired,
+
+  /** function to reposition an item in the list of draggable items */
+  moveItem: _propTypes.default.func.isRequired,
+
+  /** item is draggable */
+  draggable: _propTypes.default.bool
+};
+var _default = FlatTableRowDraggable;
+exports.default = _default;

package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export interface FlatTableRowDraggableProps {
+  /** Array of FlatTableRow. */
+  children: React.ReactNode;
+  /** ID for use in drag and drop functionality */
+  id?: number | string;
+  /** function to find an item in the list of draggable items */
+  findItem: () => object;
+  /** function to reposition an item in the list of draggable items */
+  moveItem: () => void;
+  /** item is draggable */
+  draggable?: boolean;
+}
+
+declare function FlatTableRowDraggable(props: FlatTableRowDraggableProps): JSX.Element;
+
+export default FlatTableRowDraggable;

package/lib/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -19,6 +19,8 @@ var _flatTableCheckbox = _interopRequireDefault(require("../flat-table-checkbox"
 
 var _flatTableRowHeader = _interopRequireDefault(require("../flat-table-row-header"));
 
+var _flatTableRowDraggable = _interopRequireDefault(require("./__internal__/flat-table-row-draggable.component"));
+
 var _flatTable = require("../flat-table.component");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,7 +46,11 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   bgColor,
   horizontalBorderColor,
   horizontalBorderSize = "small",
-  applyBorderLeft
+  applyBorderLeft,
+  id,
+  draggable,
+  findItem,
+  moveItem
 }, ref) => {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(expanded);
   const rowRef = ref || (0, _react.useRef)();
@@ -123,9 +129,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   (0, _react.useEffect)(() => {
     setIsExpanded(expanded);
   }, [expanded]);
-  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, ({
-    isInSidebar
-  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
+
+  const rowComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRow.default, _extends({
     isInSidebar: isInSidebar,
     expandable: expandable,
     isSubRow: isSubRow,
@@ -143,7 +148,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
     bgColor: bgColor,
     horizontalBorderColor: horizontalBorderColor,
     horizontalBorderSize: horizontalBorderSize,
-    applyBorderLeft: applyBorderLeft
+    applyBorderLeft: applyBorderLeft,
+    draggable: draggable
   }, interactiveRowProps), _react.default.Children.map(children, (child, index) => {
     return child && /*#__PURE__*/_react.default.cloneElement(child, {
       expandable: expandable && index === firstCellIndex(),
@@ -154,7 +160,17 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
       leftPosition: leftPositions[index],
       ...child.props
     });
-  })), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
+  }));
+
+  const draggableComponent = isInSidebar => /*#__PURE__*/_react.default.createElement(_flatTableRowDraggable.default, {
+    id: id,
+    moveItem: moveItem,
+    findItem: findItem
+  }, rowComponent(isInSidebar));
+
+  return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, ({
+    isInSidebar
+  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, draggable ? draggableComponent(isInSidebar) : rowComponent(isInSidebar), isExpanded && subRows && _react.default.Children.map(subRows, (child, index) => child && /*#__PURE__*/_react.default.cloneElement(child, {
     isSubRow: true,
     isFirstSubRow: index === 0,
     ...child.props
@@ -205,7 +221,28 @@ FlatTableRow.propTypes = {
   stickyOffset: _propTypes.default.number,
 
   /** @ignore @private applies a border-left to the first child */
-  applyBorderLeft: _propTypes.default.bool
+  applyBorderLeft: _propTypes.default.bool,
+
+  /** ID for use in drag and drop functionality
+   * @private
+   * @ignore
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+
+  /**
+   * @private
+   * @ignore
+   */
+  findItem: _propTypes.default.func,
+
+  /**
+   * @private
+   * @ignore
+   */
+  moveItem: _propTypes.default.func,
+
+  /** @ignore @private position in header if multiple rows */
+  draggable: _propTypes.default.bool
 };
 var _default = FlatTableRow;
 exports.default = _default;

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -92,7 +92,9 @@ const StyledFlatTableRow = _styledComponents.default.tr`
   isFirstSubRow,
   size,
   theme,
-  applyBorderLeft
+  applyBorderLeft,
+  isDragging,
+  draggable
 }) => {
   const backgroundColor = bgColor ? (0, _color.toColor)(theme, bgColor) : undefined;
   const customBorderColor = horizontalBorderColor ? (0, _color.toColor)(theme, horizontalBorderColor) : undefined;
@@ -123,6 +125,9 @@ const StyledFlatTableRow = _styledComponents.default.tr`
 
       ${_flatTableHeader.default} {
         border-bottom: 1px solid ${borderColor(colorTheme, theme)};
+        :first-child {
+          border-left: 1px solid ${borderColor(colorTheme, theme)};
+        }
       }
 
       ${stickyOffset > 0 && (0, _styledComponents.css)`
@@ -255,6 +260,21 @@ const StyledFlatTableRow = _styledComponents.default.tr`
         }
       `}
 
+      ${isDragging && (0, _styledComponents.css)`
+        border: ${isInSidebar ? theme.palette.slateTint(40) : theme.palette.slateTint(55)}
+          2px solid;
+        cursor: grabbing;
+        ${allCellTypes} {
+          background-color: ${isInSidebar ? theme.palette.slateTint(60) : theme.palette.slateTint(75)};
+        }
+      `}
+
+      ${draggable && (0, _styledComponents.css)`
+        ${_icon.default}:first-of-type {
+          font-size: 16px;
+        }
+      `}
+
       ${isFirstSubRow && (0, _styledComponents.css)`
         ${allCellTypes} {
           box-shadow: inset 0 6px 4px -4px ${theme.flatTable.subRow.shadow};

package/lib/components/flat-table/index.d.ts

@@ -5,6 +5,7 @@ export { default as FlatTable } from "./flat-table";
 export { default as FlatTableHead } from "./flat-table-head";
 export { default as FlatTableHeader } from "./flat-table-header";
 export { default as FlatTableBody } from "./flat-table-body";
+export { default as FlatTableBodyDraggable } from "./flat-table-body-draggable";
 export { default as FlatTableRow } from "./flat-table-row";
 export { default as FlatTableRowHeader } from "./flat-table-row-header";
 export { default as FlatTableCell } from "./flat-table-cell";
@@ -14,6 +15,7 @@ export * from "./flat-table";
 export * from "./flat-table-head";
 export * from "./flat-table-header";
 export * from "./flat-table-body";
+export * from "./flat-table-body-draggable";
 export * from "./flat-table-row";
 export * from "./flat-table-row-header";
 export * from "./flat-table-cell";

package/lib/components/flat-table/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "FlatTableCheckbox", {
     return _flatTableCheckbox.default;
   }
 });
+Object.defineProperty(exports, "FlatTableBodyDraggable", {
+  enumerable: true,
+  get: function () {
+    return _flatTableBodyDraggable.default;
+  }
+});
 Object.defineProperty(exports, "Sort", {
   enumerable: true,
   get: function () {
@@ -74,6 +80,8 @@ var _flatTableCell = _interopRequireDefault(require("./flat-table-cell/flat-tabl
 
 var _flatTableCheckbox = _interopRequireDefault(require("./flat-table-checkbox/flat-table-checkbox.component"));
 
+var _flatTableBodyDraggable = _interopRequireDefault(require("./flat-table-body-draggable/flat-table-body-draggable.component"));
+
 var _sort = _interopRequireDefault(require("./sort/sort.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -48,6 +48,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   href,
   maxWidth,
   asPassiveItem,
+  onSubmenuOpen,
+  onSubmenuClose,
   ...rest
 }, ref) => {
   const [blockDoubleFocus, setBlockDoubleFocus] = (0, _react.useState)(false);
@@ -81,17 +83,22 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     clearTimeout(characterTimer.current);
     startCharacterTimeout();
   }, [startCharacterTimeout]);
+  const openSubmenu = (0, _react.useCallback)(() => {
+    setSubmenuOpen(true);
+    if (onSubmenuOpen) onSubmenuOpen();
+  }, [onSubmenuOpen]);
   const closeSubmenu = (0, _react.useCallback)(() => {
     setSubmenuOpen(false);
+    if (onSubmenuClose) onSubmenuClose();
     setSubmenuFocusIndex(undefined);
     setBlockDoubleFocus(false);
     setCharacterString("");
-  }, []);
+  }, [onSubmenuClose]);
   const handleKeyDown = (0, _react.useCallback)((event, index = submenuFocusIndex) => {
     if (!submenuOpen) {
       if (_events.default.isEnterKey(event) || _events.default.isSpaceKey(event) || _events.default.isDownKey(event) || _events.default.isUpKey(event)) {
         event.preventDefault();
-        setSubmenuOpen(true);
+        openSubmenu();
 
         if (!href) {
           setSubmenuFocusIndex(0);
@@ -200,7 +207,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
         handleKeyDown(event, nextIndex);
       }
     }
-  }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
+  }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
   const onClickOutside = (0, _react.useCallback)(event => {
     if (!_events.default.composedPath(event).includes(submenuRef.current)) {
       document.removeEventListener("click", onClickOutside);
@@ -260,9 +267,9 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   return /*#__PURE__*/_react.default.createElement(_submenu.StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     role: "menuitem",
-    onMouseOver: !clickToOpen ? () => setSubmenuOpen(true) : undefined,
+    onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
-    onClick: clickToOpen ? () => setSubmenuOpen(true) : undefined,
+    onClick: clickToOpen ? () => openSubmenu() : undefined,
     ref: submenuRef,
     isSubmenuOpen: submenuOpen
   }, /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({}, rest, {
@@ -336,7 +343,13 @@ Submenu.propTypes = {
   maxWidth: _propTypes.default.string,
 
   /** Used to set a submenu parent to passive styling in MenuFullscreen */
-  asPassiveItem: _propTypes.default.bool
+  asPassiveItem: _propTypes.default.bool,
+
+  /** Callback triggered when submenu opens. Only valid with submenu prop */
+  onSubmenuOpen: _propTypes.default.func,
+
+  /** Callback triggered when submenu closes. Only valid with submenu prop */
+  onSubmenuClose: _propTypes.default.func
 };
 var _default = Submenu;
 exports.default = _default;

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

@@ -55,6 +55,8 @@ const MenuItem = ({
   clickToOpen,
   maxWidth,
   menuOpen,
+  onSubmenuOpen,
+  onSubmenuClose,
   ...rest
 }) => {
   const menuContext = (0, _react.useContext)(_menu.default);
@@ -153,7 +155,9 @@ const MenuItem = ({
       clickToOpen: clickToOpen,
       maxWidth: maxWidth,
       asPassiveItem: asPassiveItem,
-      ariaLabel: ariaLabel
+      ariaLabel: ariaLabel,
+      onSubmenuOpen: onSubmenuOpen,
+      onSubmenuClose: onSubmenuClose
     }, elementProps, rest), childrenItems));
   }
 
@@ -251,7 +255,13 @@ MenuItem.propTypes = {
     }
 
     return _propTypes.default.string(props, ...rest);
-  }
+  },
+
+  /** Callback triggered when submenu opens. Only valid with submenu prop */
+  onSubmenuOpen: _propTypes.default.func,
+
+  /** Callback triggered when submenu closes. Only valid with submenu prop */
+  onSubmenuClose: _propTypes.default.func
 };
 var _default = MenuItem;
 exports.default = _default;

package/lib/components/menu/menu-item/menu-item.d.ts

@@ -25,6 +25,10 @@ export interface MenuItemBaseProps extends LayoutProps, FlexboxProps {
   showDropdownArrow?: boolean;
   /** If no text is provided an ariaLabel should be given to facilitate accessibility. */
   ariaLabel?: string;
+  /** Callback triggered when submenu opens. Only valid with submenu prop */
+  onSubmenuOpen?: () => void;
+  /** Callback triggered when submenu closes. Only valid with submenu prop */
+  onSubmenuClose?: () => void;
 }
 
 export interface MenuWithChildren extends MenuItemBaseProps {

package/lib/components/textarea/textarea.component.js

@@ -15,7 +15,7 @@ var _input = require("../../__internal__/input");
 
 var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
 
-var _characterCount = _interopRequireDefault(require("./character-count"));
+var _characterCount = _interopRequireDefault(require("../../__internal__/character-count"));
 
 var _input2 = _interopRequireDefault(require("../../__internal__/input/input.component"));
 

package/lib/components/textbox/textbox.component.js

@@ -27,6 +27,8 @@ var _prefix = _interopRequireDefault(require("./__internal__/prefix.style"));
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal__/useCharacterCount"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -58,8 +60,12 @@ const Textbox = ({
   positionedChildren,
   inputRef,
   tooltipPosition,
+  enforceCharacterLimit = true,
+  characterLimit,
+  warnOverLimit = false,
   ...props
 }) => {
+  const [maxLength, characterCount] = (0, _useCharacterCount.default)(value, characterLimit, warnOverLimit, enforceCharacterLimit);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({
@@ -83,14 +89,15 @@ const Textbox = ({
     placeholder: props.disabled || props.readOnly ? "" : props.placeholder,
     "aria-invalid": !!props.error,
     inputRef: inputRef,
-    value: visibleValue(value, formattedValue)
+    value: visibleValue(value, formattedValue),
+    maxLength: maxLength
   })), children, /*#__PURE__*/_react.default.createElement(_inputIconToggle.default, _extends({}, removeParentProps(props), {
     useValidationIcon: !validationOnLabel,
     onClick: iconOnClick || props.onClick,
     onMouseDown: iconOnMouseDown,
     inputIcon: inputIcon,
     iconTabIndex: iconTabIndex
-  }))))));
+  })))), characterCount));
 };
 
 exports.OriginalTextbox = Textbox;
@@ -242,7 +249,16 @@ Textbox.propTypes = {
   inputRef: _propTypes.default.func,
 
   /** Overrides the default tooltip position */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Stop the user typing over the characterLimit */
+  enforceCharacterLimit: _propTypes.default.bool,
+
+  /** Character limit of the textarea */
+  characterLimit: _propTypes.default.string,
+
+  /** Whether to display the character count message in red */
+  warnOverLimit: _propTypes.default.bool
 };
 Textbox.defaultProps = {
   labelWidth: 30,

package/lib/components/textbox/textbox.d.ts

@@ -80,6 +80,12 @@ export interface TextboxProps extends CommonTextboxProps, SpaceProps {
   mb?: 0 | 1 | 2 | 3 | 4 | 5 | 7;
   /** Container for DatePicker or SelectList components */
   positionedChildren?: React.ReactNode;
+  /** Character limit of the textarea */
+  characterLimit?: string;
+  /** Stop the user typing over the characterLimit */
+  enforceCharacterLimit?: boolean;
+  /** Whether to display the character count message in red */
+  warnOverLimit?: boolean;
 }
 
 declare function Textbox(props: TextboxProps): JSX.Element;

package/lib/hooks/__internal__/useCharacterCount/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _characterCount = _interopRequireDefault(require("../../../__internal__/character-count"));
+
+var _useLocale = _interopRequireDefault(require("../useLocale"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
+
+const useCharacterCount = (value, characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
+  const l = (0, _useLocale.default)();
+  const isOverLimit = (0, _react.useMemo)(() => value && value.length > parseInt(characterLimit, 10), [value, characterLimit]);
+  return [enforceCharacterLimit && characterLimit ? characterLimit : undefined, characterLimit ? /*#__PURE__*/_react.default.createElement(_characterCount.default, {
+    isOverLimit: isOverLimit && warnOverLimit,
+    value: getFormatNumber(value.length, l.locale()),
+    limit: getFormatNumber(characterLimit, l.locale()),
+    "data-element": "character-limit"
+  }) : null];
+};
+
+var _default = useCharacterCount;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "87.0.0",
+  "version": "87.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {