carbon-react 87.1.0 → 87.5.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/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/navigation-bar/navigation-bar.component.js

@@ -24,13 +24,17 @@ const NavigationBar = ({
   isLoading = false,
   children,
   ariaLabel,
+  stickyOffset = "0",
+  stickyPosition,
   ...props
 }) => {
   return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
     role: "navigation",
     "aria-label": ariaLabel,
     navigationType: navigationType,
-    "data-component": "navigation-bar"
+    "data-component": "navigation-bar",
+    stickyOffset: stickyOffset,
+    stickyPosition: stickyPosition
   }, props), !isLoading && children);
 };
 
@@ -41,11 +45,17 @@ NavigationBar.propTypes = {
   children: _propTypes.default.node,
   ariaLabel: _propTypes.default.string,
 
-  /** color scheme of navigation component */
+  /** Color scheme of navigation component */
   navigationType: _propTypes.default.oneOf(["light", "dark"]),
 
-  /** if 'true' the children will not be visible */
-  isLoading: _propTypes.default.bool
+  /** If 'true' the children will not be visible */
+  isLoading: _propTypes.default.bool,
+
+  /** Defines the position of sticky navigation bar */
+  stickyPosition: _propTypes.default.oneOf(["top", "bottom"]),
+
+  /** Defines the offset of sticky navigation bar */
+  stickyOffset: _propTypes.default.string
 };
 var _default = NavigationBar;
 exports.default = _default;

package/lib/components/navigation-bar/navigation-bar.d.ts

@@ -7,6 +7,8 @@ export interface NavigationBarProp extends SpaceProps {
   ariaLabel?: string;
   navigationType?: "light" | "dark";
   isLoading?: boolean;
+  stickyPosition?: "top" | "bottom";
+  stickyOffset?: string;
 }
 
 declare function NavigationBar(props: NavigationBarProp): JSX.Element;

package/lib/components/navigation-bar/navigation-bar.style.js

@@ -49,6 +49,14 @@ const StyledNavigationBar = _styledComponents.default.nav`
     margin-right: 10px;
   }
 
+  ${({
+  stickyPosition,
+  stickyOffset
+}) => stickyPosition && (0, _styledComponents.css)`
+      position: sticky;
+      ${stickyPosition}: ${stickyOffset}
+    `};
+
   ${({
   navigationType,
   theme

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

@@ -56,6 +56,7 @@ const TileSelect = ({
   actionButtonAdornment,
   footer,
   prefixAdornment,
+  additionalInformation,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -125,7 +126,9 @@ const TileSelect = ({
     mr: 3
   }, prefixAdornment), /*#__PURE__*/_react.default.createElement(_box.default, {
     flexGrow: "1"
-  }, /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitleContainer, null, title && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitle, checkPropTypeIsNode(title), title), subtitle && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledSubtitle, checkPropTypeIsNode(subtitle), subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, null, titleAdornment)), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer)), (customActionButton || checked) && renderActionButton()))));
+  }, /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitleContainer, null, title && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledTitle, checkPropTypeIsNode(title), title), subtitle && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledSubtitle, checkPropTypeIsNode(subtitle), subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, {
+    hasAdditionalInformation: !!additionalInformation
+  }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, checkPropTypeIsNode(description), description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer)), (customActionButton || checked) && renderActionButton()))));
 };
 
 TileSelect.defaultProps = {
@@ -186,7 +189,10 @@ TileSelect.propTypes = { ...marginPropTypes,
   footer: _propTypes.default.node,
 
   /** Component to render in the top left corner of TileSelect */
-  prefixAdornment: _propTypes.default.node
+  prefixAdornment: _propTypes.default.node,
+
+  /** Component to render additional information row between title and description */
+  additionalInformation: _propTypes.default.node
 };
 TileSelect.displayName = "TileSelect";
 var _default = TileSelect;

package/lib/components/tile-select/tile-select.d.ts

@@ -36,6 +36,8 @@ export interface TileSelectProps extends MarginProps {
   footer?: React.ReactNode;
   /** Component to render in the top left corner of TileSelect */
   prefixAdornment?: React.ReactNode;
+  /** Component to render additional information row between title and description */
+  additionalInformation?: React.ReactNode;
 }
 
 declare function TileSelect(props: TileSelectProps): JSX.Element;

package/lib/components/tile-select/tile-select.style.js

@@ -45,7 +45,9 @@ const StyledSubtitle = _styledComponents.default.h4`
 exports.StyledSubtitle = StyledSubtitle;
 const StyledAdornment = _styledComponents.default.div`
   z-index: 500;
-  margin-bottom: 8px;
+  margin-bottom: ${({
+  hasAdditionalInformation
+}) => hasAdditionalInformation ? "4" : "8"}px;
 `;
 exports.StyledAdornment = StyledAdornment;
 const StyledDescription = _styledComponents.default.p`

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.1.0",
+  "version": "87.5.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {