carbon-react 111.9.1 → 111.10.0

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

@@ -1,8 +1,7 @@
 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); }
 
-import React, { useContext, useState, useEffect, useRef } from "react";
+import React, { useContext, useState, useEffect, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import Events from "../../__internal__/utils/helpers/events";
@@ -17,8 +16,8 @@ import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "./numeral-date-context";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
+export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
+const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
 
 const isDayValid = day => day ? +day > 0 && +day < 32 : true;
 
@@ -75,7 +74,13 @@ const NumeralDate = ({
   const isControlled = useRef(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = useRef(dateFormat.map(() => /*#__PURE__*/React.createRef()));
-  const [internalMessages, setInternalMessages] = useState({});
+  const [internalMessages, setInternalMessages] = useState({ ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
+  });
+  const hasCorrectDateFormat = useMemo(() => {
+    const isAllowed = !dateFormat || ALLOWED_DATE_FORMATS.find(allowedDateFormat => JSON.stringify(allowedDateFormat) === JSON.stringify(dateFormat));
+    return isAllowed;
+  }, [dateFormat]);
+  !hasCorrectDateFormat ? process.env.NODE_ENV !== "production" ? invariant(false, incorrectDateFormatMessage) : invariant(false) : void 0;
   useEffect(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
@@ -85,10 +90,7 @@ const NumeralDate = ({
     mm: l.numeralDate.validation.month(),
     yyyy: l.numeralDate.validation.year()
   };
-  const [dateValue, setDateValue] = useState({ ...(initialValue || dateFormat.reduce((dateObject, key) => {
-      dateObject[key] = "";
-      return dateObject;
-    }, {}))
+  const [dateValue, setDateValue] = useState({ ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
   });
 
   const createCustomEventObject = newValue => ({
@@ -99,18 +101,18 @@ const NumeralDate = ({
     }
   });
 
-  const onKeyPress = ev => {
-    const isValidKey = Events.isNumberKey(ev) || Events.isTabKey(ev) || ev.key === "Delete" || ev.key === "Backspace";
+  const onKeyPress = event => {
+    const isValidKey = Events.isNumberKey(event) || Events.isTabKey(event) || event.key === "Delete" || event.key === "Backspace";
 
     if (!isValidKey) {
-      ev.preventDefault();
+      event.preventDefault();
     }
   };
 
-  const handleChange = (e, datePart) => {
+  const handleChange = (event, datePart) => {
     const {
       value: newValue
-    } = e.target;
+    } = event.target;
 
     if (newValue.length <= datePart.length) {
       const newDateValue = { ...dateValue,
@@ -129,8 +131,9 @@ const NumeralDate = ({
     const internalValidationEnabled = enableInternalError || enableInternalWarning;
     /* istanbul ignore else */
 
-    if (validations[datePart] && internalValidationEnabled) {
-      const errorMessage = validations[datePart](dateValue[datePart]) ? "" : validationMessages[datePart];
+    if (internalValidationEnabled) {
+      const newDatePart = dateValue[datePart];
+      const errorMessage = validations[datePart](newDatePart) ? "" : validationMessages[datePart];
       setInternalMessages(prev => ({ ...prev,
         [datePart]: errorMessage
       }));
@@ -146,7 +149,7 @@ const NumeralDate = ({
     }, 5);
   };
 
-  const internalMessage = Object.keys(internalMessages).reduce((string, key) => internalMessages[key] ? `${string + internalMessages[key]}\n` : string, "");
+  const internalMessage = Object.keys(internalMessages).reduce((combinedMessage, datePart) => internalMessages[datePart] ? `${combinedMessage + internalMessages[datePart]}\n` : combinedMessage, "");
   const internalError = enableInternalError ? internalMessage + error : error;
   const internalWarning = enableInternalWarning ? internalMessage + warning : warning;
   return /*#__PURE__*/React.createElement(TooltipProvider, {
@@ -183,7 +186,7 @@ const NumeralDate = ({
     const isMiddle = index === 1;
     const validation = error || warning || info;
     const isStringValidation = typeof validation === "string";
-    const hasValidationIcon = isStringValidation && validation.length;
+    const hasValidationIcon = isStringValidation && !!validation.length;
     return /*#__PURE__*/React.createElement(NumeralDateContext.Provider, {
       value: {
         disableErrorBorder: index !== 0
@@ -224,118 +227,224 @@ const NumeralDate = ({
 };
 
 NumeralDate.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "adaptiveLabelBreakpoint": PropTypes.number,
   "data-component": PropTypes.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": PropTypes.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
-
-  /** If true, the component will be disabled */
-  disabled: PropTypes.bool,
-
-  /** If true, the component will be read-only */
-  readOnly: PropTypes.bool,
-
-  /** Array of strings to define custom input layout.
-  Allowed formats:
-  ['dd', 'mm', 'yyyy'],
-  ['mm', 'dd', 'yyyy'],
-  ['dd', 'mm'],
-  ['mm', 'dd'],
-  ['mm', 'yyyy'] */
-  dateFormat: (props, propName, componentName) => {
-    const dateFormat = props[propName];
-    const isAllowed = !dateFormat || ALLOWED_DATE_FORMATS.find(allowedDateFormat => JSON.stringify(allowedDateFormat) === JSON.stringify(dateFormat));
-
-    if (!isAllowed) {
-      return new Error(`Forbidden prop \`${propName}\` supplied to \`${componentName}\`. ` + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']");
-    }
-
-    return null;
-  },
-
-  /** Default value for use in uncontrolled mode  */
-  defaultValue: PropTypes.object,
-
-  /**  Value for use in controlled mode  */
-  value: PropTypes.object,
-
-  /** Indicate that error has occurred
-  Pass string to display icon, tooltip and red border
-  Pass true boolean to only display red border */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate that warning has occurred
-  Pass string to display icon, tooltip and orange border
-  Pass true boolean to only display orange border */
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Blur event handler  */
-  onBlur: PropTypes.func,
-
-  /** Change event handler */
-  onChange: PropTypes.func,
-
-  /** `id` for events */
-  id: PropTypes.string,
-
-  /** `name` for events */
-  name: PropTypes.string,
-
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel: PropTypes.bool,
-
-  /** When true, enables the internal errors to be displayed */
-  enableInternalError: PropTypes.bool,
-
-  /** When true, enables the internal warnings to be displayed */
-  enableInternalWarning: PropTypes.bool,
-
-  /** Label */
-  label: PropTypes.string,
-
-  /** Text applied to label help tooltip */
-  labelHelp: PropTypes.node,
-
-  /** When true, label is placed in line with an input */
-  labelInline: PropTypes.bool,
-
-  /** Label alignment. Works only when labelInline is true */
-  labelAlign: PropTypes.oneOf(["left", "right"]),
-
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth: PropTypes.number,
-
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: PropTypes.oneOf([1, 2]),
-
-  /** Help content to be displayed under an input */
-  fieldHelp: PropTypes.node,
-
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint: PropTypes.number,
-
-  /** Flag to configure component as mandatory */
-  required: PropTypes.bool,
-
-  /** Size of an input */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
-
-  /** Overrides the default tooltip position */
-  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
-
-  /** Aria label for rendered help component */
-  helpAriaLabel: PropTypes.string
+  "dateFormat": PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "0": PropTypes.oneOf(["dd"]).isRequired,
+    "1": PropTypes.oneOf(["mm"]).isRequired,
+    "2": PropTypes.oneOf(["yyyy"]).isRequired,
+    "concat": PropTypes.func.isRequired,
+    "entries": PropTypes.func.isRequired,
+    "every": PropTypes.func.isRequired,
+    "filter": PropTypes.func.isRequired,
+    "find": PropTypes.func.isRequired,
+    "findIndex": PropTypes.func.isRequired,
+    "flat": PropTypes.func.isRequired,
+    "flatMap": PropTypes.func.isRequired,
+    "forEach": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "join": PropTypes.func.isRequired,
+    "keys": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.oneOf([3]).isRequired,
+    "map": PropTypes.func.isRequired,
+    "reduce": PropTypes.func.isRequired,
+    "reduceRight": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "some": PropTypes.func.isRequired,
+    "toLocaleString": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "values": PropTypes.func.isRequired
+  }),
+  "defaultValue": PropTypes.shape({
+    "dd": PropTypes.string.isRequired,
+    "mm": PropTypes.string.isRequired
+  }),
+  "disabled": PropTypes.bool,
+  "enableInternalError": PropTypes.bool,
+  "enableInternalWarning": PropTypes.bool,
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "fieldHelp": PropTypes.node,
+  "helpAriaLabel": PropTypes.string,
+  "id": PropTypes.string,
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "label": PropTypes.string,
+  "labelAlign": PropTypes.oneOf(["left", "right"]),
+  "labelHelp": PropTypes.node,
+  "labelInline": PropTypes.bool,
+  "labelSpacing": PropTypes.oneOf([1, 2]),
+  "labelWidth": PropTypes.number,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "readOnly": PropTypes.bool,
+  "required": PropTypes.bool,
+  "size": PropTypes.oneOf(["large", "medium", "small"]),
+  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "validationOnLabel": PropTypes.bool,
+  "value": PropTypes.shape({
+    "dd": PropTypes.string.isRequired,
+    "mm": PropTypes.string.isRequired
+  }),
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
+export { NumeralDate };
 export default NumeralDate;

package/esm/components/numeral-date/numeral-date.style.d.ts

@@ -0,0 +1,11 @@
+interface StyledDateFieldProps {
+    isEnd?: boolean;
+    isMiddle?: boolean;
+    isYearInput?: boolean;
+    hasValidationIcon?: boolean;
+}
+export declare const StyledNumeralDate: import("styled-components").StyledComponent<"div", any, {
+    name?: string | undefined;
+}, never>;
+export declare const StyledDateField: import("styled-components").StyledComponent<"div", any, StyledDateFieldProps, never>;
+export {};

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { PaddingProps } from "styled-system";
+import { PaddingProps, WidthProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 declare type CustomRefObject<T> = {
     current?: T | null;
@@ -8,7 +8,7 @@ export interface SidebarContextProps {
     isInSidebar?: boolean;
 }
 export declare const SidebarContext: React.Context<SidebarContextProps>;
-export interface SidebarProps extends PaddingProps, TagProps {
+export interface SidebarProps extends PaddingProps, TagProps, WidthProps {
     /** Prop to specify the aria-describedby property of the component */
     "aria-describedby"?: string;
     /**

package/esm/components/sidebar/sidebar.component.js

@@ -31,6 +31,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
   role = "dialog",
   focusableContainers,
   focusableSelectors,
+  width,
   ...rest
 }, ref) => {
   const locale = useLocale();
@@ -76,7 +77,9 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     "data-element": "sidebar",
     onCancel: onCancel,
     role: role
-  }, filterStyledSystemPaddingProps(rest)), header && /*#__PURE__*/React.createElement(SidebarHeader, {
+  }, filterStyledSystemPaddingProps(rest), {
+    width: width
+  }), header && /*#__PURE__*/React.createElement(SidebarHeader, {
     id: headerId
   }, header), closeIcon(), /*#__PURE__*/React.createElement(Box, _extends({
     "data-element": "sidebar-content",
@@ -283,7 +286,108 @@ Sidebar.propTypes = {
     "valueOf": PropTypes.func.isRequired
   }), PropTypes.string]),
   "role": PropTypes.string,
-  "size": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"])
+  "size": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "small"]),
+  "width": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
+    "big": PropTypes.func.isRequired,
+    "blink": PropTypes.func.isRequired,
+    "bold": PropTypes.func.isRequired,
+    "charAt": PropTypes.func.isRequired,
+    "charCodeAt": PropTypes.func.isRequired,
+    "codePointAt": PropTypes.func.isRequired,
+    "concat": PropTypes.func.isRequired,
+    "endsWith": PropTypes.func.isRequired,
+    "fixed": PropTypes.func.isRequired,
+    "fontcolor": PropTypes.func.isRequired,
+    "fontsize": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "italics": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.number.isRequired,
+    "link": PropTypes.func.isRequired,
+    "localeCompare": PropTypes.func.isRequired,
+    "match": PropTypes.func.isRequired,
+    "matchAll": PropTypes.func.isRequired,
+    "normalize": PropTypes.func.isRequired,
+    "padEnd": PropTypes.func.isRequired,
+    "padStart": PropTypes.func.isRequired,
+    "repeat": PropTypes.func.isRequired,
+    "replace": PropTypes.func.isRequired,
+    "search": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "small": PropTypes.func.isRequired,
+    "split": PropTypes.func.isRequired,
+    "startsWith": PropTypes.func.isRequired,
+    "strike": PropTypes.func.isRequired,
+    "sub": PropTypes.func.isRequired,
+    "substr": PropTypes.func.isRequired,
+    "substring": PropTypes.func.isRequired,
+    "sup": PropTypes.func.isRequired,
+    "toLocaleLowerCase": PropTypes.func.isRequired,
+    "toLocaleUpperCase": PropTypes.func.isRequired,
+    "toLowerCase": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "toUpperCase": PropTypes.func.isRequired,
+    "trim": PropTypes.func.isRequired,
+    "trimEnd": PropTypes.func.isRequired,
+    "trimLeft": PropTypes.func.isRequired,
+    "trimRight": PropTypes.func.isRequired,
+    "trimStart": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@iterator": PropTypes.func.isRequired,
+    "anchor": PropTypes.func.isRequired,
+    "at": PropTypes.func.isRequired,
+    "big": PropTypes.func.isRequired,
+    "blink": PropTypes.func.isRequired,
+    "bold": PropTypes.func.isRequired,
+    "charAt": PropTypes.func.isRequired,
+    "charCodeAt": PropTypes.func.isRequired,
+    "codePointAt": PropTypes.func.isRequired,
+    "concat": PropTypes.func.isRequired,
+    "endsWith": PropTypes.func.isRequired,
+    "fixed": PropTypes.func.isRequired,
+    "fontcolor": PropTypes.func.isRequired,
+    "fontsize": PropTypes.func.isRequired,
+    "includes": PropTypes.func.isRequired,
+    "indexOf": PropTypes.func.isRequired,
+    "italics": PropTypes.func.isRequired,
+    "lastIndexOf": PropTypes.func.isRequired,
+    "length": PropTypes.number.isRequired,
+    "link": PropTypes.func.isRequired,
+    "localeCompare": PropTypes.func.isRequired,
+    "match": PropTypes.func.isRequired,
+    "matchAll": PropTypes.func.isRequired,
+    "normalize": PropTypes.func.isRequired,
+    "padEnd": PropTypes.func.isRequired,
+    "padStart": PropTypes.func.isRequired,
+    "repeat": PropTypes.func.isRequired,
+    "replace": PropTypes.func.isRequired,
+    "search": PropTypes.func.isRequired,
+    "slice": PropTypes.func.isRequired,
+    "small": PropTypes.func.isRequired,
+    "split": PropTypes.func.isRequired,
+    "startsWith": PropTypes.func.isRequired,
+    "strike": PropTypes.func.isRequired,
+    "sub": PropTypes.func.isRequired,
+    "substr": PropTypes.func.isRequired,
+    "substring": PropTypes.func.isRequired,
+    "sup": PropTypes.func.isRequired,
+    "toLocaleLowerCase": PropTypes.func.isRequired,
+    "toLocaleUpperCase": PropTypes.func.isRequired,
+    "toLowerCase": PropTypes.func.isRequired,
+    "toString": PropTypes.func.isRequired,
+    "toUpperCase": PropTypes.func.isRequired,
+    "trim": PropTypes.func.isRequired,
+    "trimEnd": PropTypes.func.isRequired,
+    "trimLeft": PropTypes.func.isRequired,
+    "trimRight": PropTypes.func.isRequired,
+    "trimStart": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])
 };
 export { Sidebar };
 Sidebar.displayName = "Sidebar";

package/esm/components/sidebar/sidebar.style.d.ts

@@ -1,9 +1,4 @@
 import { PaddingProps } from "styled-system";
 import { SidebarProps } from "./sidebar.component";
-declare type StyledSidebarProps = {
-    onCancel?: SidebarProps["onCancel"];
-    position?: SidebarProps["position"];
-    size?: SidebarProps["size"];
-};
-declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, StyledSidebarProps & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+declare const StyledSidebar: import("styled-components").StyledComponent<"div", any, Pick<SidebarProps, "width" | "onCancel" | "size" | "position"> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export default StyledSidebar;

package/esm/components/sidebar/sidebar.style.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import computeWidth from "../../style/utils/width";
 import baseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
 import { calculateFormSpacingValues, calculateWidthValue } from "../../style/utils/form-style-utils";
@@ -23,7 +24,8 @@ const StyledSidebar = styled.div`
   onCancel,
   position,
   size,
-  theme
+  theme,
+  width
 }) => css`
     background: var(--colorsUtilityMajor025);
     border-radius: 1px;
@@ -34,9 +36,12 @@ const StyledSidebar = styled.div`
     top: 0;
     z-index: ${theme.zIndex.fullScreenModal};
 
-    ${size && css`
+    ${!width && size && css`
       width: ${SIDEBAR_SIZES_CSS[size]};
     `}
+    ${width && computeWidth({
+  width
+})}
 
     ${position && css`
       box-shadow: var(--boxShadow300);

package/esm/components/text-editor/__internal__/decorators/index.d.ts

@@ -0,0 +1,3 @@
+declare var _default: CompositeDecorator;
+export default _default;
+import { CompositeDecorator } from "draft-js";