carbon-react 111.9.1 → 111.11.0

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

@@ -0,0 +1,13 @@
+declare const StyledNoteContent: import("styled-components").StyledComponent<"div", any, {
+    hasPreview?: boolean | undefined;
+}, never>;
+declare const StyledInlineControl: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
+declare const StyledFooterContent: import("styled-components").StyledComponent<"div", any, {
+    hasName: boolean;
+}, never>;
+declare const StyledFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledNote: import("styled-components").StyledComponent<"div", any, {
+    width: number;
+}, never>;
+export { StyledNote, StyledNoteContent, StyledInlineControl, StyledTitle, StyledFooter, StyledFooterContent, };

package/lib/components/note/note.style.js

@@ -7,8 +7,6 @@ exports.StyledFooterContent = exports.StyledFooter = exports.StyledTitle = expor
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledSystem = require("styled-system");
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
@@ -150,10 +148,6 @@ const StyledNote = _styledComponents.default.div`
   ${_styledSystem.margin}
 `;
 exports.StyledNote = StyledNote;
-StyledNote.propTypes = {
-  padding: _propTypes.default.string,
-  width: _propTypes.default.number
-};
 StyledNote.defaultProps = {
   theme: _base.default
 };

package/lib/components/numeral-date/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./numeral-date";
+export { default } from "./numeral-date.component";
+export type { NumeralDateProps } from "./numeral-date.component";

package/lib/components/numeral-date/numeral-date.component.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
+export interface DayMonthDate {
+    dd: string;
+    mm: string;
+}
+export interface MonthYearDate {
+    mm: string;
+    yyyy: string;
+}
+export interface FullDate extends DayMonthDate {
+    yyyy: string;
+}
+export declare type NumeralDateObject = DayMonthDate | MonthYearDate | FullDate;
+export interface NumeralDateEvent<DateType extends NumeralDateObject = FullDate> {
+    target: {
+        name?: string;
+        id: string;
+        value: DateType;
+    };
+}
+export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate> extends ValidationProps, MarginProps {
+    /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    dateFormat?: ValidDateFormat;
+    /** Default value for use in uncontrolled mode  */
+    defaultValue?: DateType;
+    /**  Value for use in controlled mode  */
+    value?: DateType;
+    /** When true, enables the internal errors to be displayed */
+    enableInternalError?: boolean;
+    /** When true, enables the internal warnings to be displayed */
+    enableInternalWarning?: boolean;
+    /** Help content to be displayed under an input */
+    fieldHelp?: React.ReactNode;
+    /** `id` for events */
+    id?: string;
+    /** `name` for events */
+    name?: string;
+    /** Label */
+    label?: string;
+    /** Label alignment. Works only when labelInline is true */
+    labelAlign?: "left" | "right";
+    /** Text applied to label help tooltip */
+    labelHelp?: React.ReactNode;
+    /** When true, label is placed in line with an input */
+    labelInline?: boolean;
+    /** Label width */
+    labelWidth?: number;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** Blur event handler */
+    onBlur?: (ev: NumeralDateEvent<DateType>) => void;
+    /** Change event handler */
+    onChange?: (ev: NumeralDateEvent<DateType>) => void;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** Size of an input */
+    size?: "small" | "medium" | "large";
+    /** When true, validation icons will be placed on labels instead of being placed on the inputs */
+    validationOnLabel?: boolean;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+}
+export declare type ValidDateFormat = typeof ALLOWED_DATE_FORMATS[number];
+export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, ...rest }: NumeralDateProps<DateType>) => JSX.Element;
+export default NumeralDate;

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

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.NumeralDate = exports.ALLOWED_DATE_FORMATS = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _invariant = _interopRequireDefault(require("invariant"));
 
 var _utils = require("../../style/utils");
@@ -47,8 +45,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return 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); }
 
-const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
+exports.ALLOWED_DATE_FORMATS = ALLOWED_DATE_FORMATS;
+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;
 
@@ -105,7 +104,13 @@ const NumeralDate = ({
   const isControlled = (0, _react.useRef)(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = (0, _react.useRef)(dateFormat.map(() => /*#__PURE__*/_react.default.createRef()));
-  const [internalMessages, setInternalMessages] = (0, _react.useState)({});
+  const [internalMessages, setInternalMessages] = (0, _react.useState)({ ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
+  });
+  const hasCorrectDateFormat = (0, _react.useMemo)(() => {
+    const isAllowed = !dateFormat || ALLOWED_DATE_FORMATS.find(allowedDateFormat => JSON.stringify(allowedDateFormat) === JSON.stringify(dateFormat));
+    return isAllowed;
+  }, [dateFormat]);
+  !hasCorrectDateFormat ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, incorrectDateFormatMessage) : (0, _invariant.default)(false) : void 0;
   (0, _react.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" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
@@ -115,10 +120,7 @@ const NumeralDate = ({
     mm: l.numeralDate.validation.month(),
     yyyy: l.numeralDate.validation.year()
   };
-  const [dateValue, setDateValue] = (0, _react.useState)({ ...(initialValue || dateFormat.reduce((dateObject, key) => {
-      dateObject[key] = "";
-      return dateObject;
-    }, {}))
+  const [dateValue, setDateValue] = (0, _react.useState)({ ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
   });
 
   const createCustomEventObject = newValue => ({
@@ -129,18 +131,18 @@ const NumeralDate = ({
     }
   });
 
-  const onKeyPress = ev => {
-    const isValidKey = _events.default.isNumberKey(ev) || _events.default.isTabKey(ev) || ev.key === "Delete" || ev.key === "Backspace";
+  const onKeyPress = event => {
+    const isValidKey = _events.default.isNumberKey(event) || _events.default.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,
@@ -159,8 +161,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
       }));
@@ -176,7 +179,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.default.createElement(_tooltipProvider.TooltipProvider, {
@@ -213,7 +216,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.default.createElement(_numeralDateContext.default.Provider, {
       value: {
         disableErrorBorder: index !== 0
@@ -253,120 +256,226 @@ const NumeralDate = ({
   })))));
 };
 
+exports.NumeralDate = NumeralDate;
 NumeralDate.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "adaptiveLabelBreakpoint": _propTypes.default.number,
   "data-component": _propTypes.default.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": _propTypes.default.string,
-
-  /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": _propTypes.default.string,
-
-  /** If true, the component will be disabled */
-  disabled: _propTypes.default.bool,
-
-  /** If true, the component will be read-only */
-  readOnly: _propTypes.default.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.default.object,
-
-  /**  Value for use in controlled mode  */
-  value: _propTypes.default.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.default.oneOfType([_propTypes.default.bool, _propTypes.default.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.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Blur event handler  */
-  onBlur: _propTypes.default.func,
-
-  /** Change event handler */
-  onChange: _propTypes.default.func,
-
-  /** `id` for events */
-  id: _propTypes.default.string,
-
-  /** `name` for events */
-  name: _propTypes.default.string,
-
-  /** When true, validation icon will be placed on label instead of being placed on the input */
-  validationOnLabel: _propTypes.default.bool,
-
-  /** When true, enables the internal errors to be displayed */
-  enableInternalError: _propTypes.default.bool,
-
-  /** When true, enables the internal warnings to be displayed */
-  enableInternalWarning: _propTypes.default.bool,
-
-  /** Label */
-  label: _propTypes.default.string,
-
-  /** Text applied to label help tooltip */
-  labelHelp: _propTypes.default.node,
-
-  /** When true, label is placed in line with an input */
-  labelInline: _propTypes.default.bool,
-
-  /** Label alignment. Works only when labelInline is true */
-  labelAlign: _propTypes.default.oneOf(["left", "right"]),
-
-  /** Width of a label in percentage. Works only when labelInline is true */
-  labelWidth: _propTypes.default.number,
-
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: _propTypes.default.oneOf([1, 2]),
-
-  /** Help content to be displayed under an input */
-  fieldHelp: _propTypes.default.node,
-
-  /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
-  adaptiveLabelBreakpoint: _propTypes.default.number,
-
-  /** Flag to configure component as mandatory */
-  required: _propTypes.default.bool,
-
-  /** Size of an input */
-  size: _propTypes.default.oneOf(["small", "medium", "large"]),
-
-  /** Overrides the default tooltip position */
-  tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
-
-  /** Aria label for rendered help component */
-  helpAriaLabel: _propTypes.default.string
+  "dateFormat": _propTypes.default.shape({
+    "__@iterator": _propTypes.default.func.isRequired,
+    "0": _propTypes.default.oneOf(["dd"]).isRequired,
+    "1": _propTypes.default.oneOf(["mm"]).isRequired,
+    "2": _propTypes.default.oneOf(["yyyy"]).isRequired,
+    "concat": _propTypes.default.func.isRequired,
+    "entries": _propTypes.default.func.isRequired,
+    "every": _propTypes.default.func.isRequired,
+    "filter": _propTypes.default.func.isRequired,
+    "find": _propTypes.default.func.isRequired,
+    "findIndex": _propTypes.default.func.isRequired,
+    "flat": _propTypes.default.func.isRequired,
+    "flatMap": _propTypes.default.func.isRequired,
+    "forEach": _propTypes.default.func.isRequired,
+    "includes": _propTypes.default.func.isRequired,
+    "indexOf": _propTypes.default.func.isRequired,
+    "join": _propTypes.default.func.isRequired,
+    "keys": _propTypes.default.func.isRequired,
+    "lastIndexOf": _propTypes.default.func.isRequired,
+    "length": _propTypes.default.oneOf([3]).isRequired,
+    "map": _propTypes.default.func.isRequired,
+    "reduce": _propTypes.default.func.isRequired,
+    "reduceRight": _propTypes.default.func.isRequired,
+    "slice": _propTypes.default.func.isRequired,
+    "some": _propTypes.default.func.isRequired,
+    "toLocaleString": _propTypes.default.func.isRequired,
+    "toString": _propTypes.default.func.isRequired,
+    "values": _propTypes.default.func.isRequired
+  }),
+  "defaultValue": _propTypes.default.shape({
+    "dd": _propTypes.default.string.isRequired,
+    "mm": _propTypes.default.string.isRequired
+  }),
+  "disabled": _propTypes.default.bool,
+  "enableInternalError": _propTypes.default.bool,
+  "enableInternalWarning": _propTypes.default.bool,
+  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "fieldHelp": _propTypes.default.node,
+  "helpAriaLabel": _propTypes.default.string,
+  "id": _propTypes.default.string,
+  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "label": _propTypes.default.string,
+  "labelAlign": _propTypes.default.oneOf(["left", "right"]),
+  "labelHelp": _propTypes.default.node,
+  "labelInline": _propTypes.default.bool,
+  "labelSpacing": _propTypes.default.oneOf([1, 2]),
+  "labelWidth": _propTypes.default.number,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "name": _propTypes.default.string,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "readOnly": _propTypes.default.bool,
+  "required": _propTypes.default.bool,
+  "size": _propTypes.default.oneOf(["large", "medium", "small"]),
+  "tooltipPosition": _propTypes.default.oneOf(["bottom", "left", "right", "top"]),
+  "validationOnLabel": _propTypes.default.bool,
+  "value": _propTypes.default.shape({
+    "dd": _propTypes.default.string.isRequired,
+    "mm": _propTypes.default.string.isRequired
+  }),
+  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
 var _default = NumeralDate;
 exports.default = _default;

package/lib/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/lib/components/portrait/portrait.component.js

@@ -122,7 +122,7 @@ Portrait.propTypes = {
   "alt": _propTypes.default.string,
   "darkBackground": _propTypes.default.bool,
   "gravatar": _propTypes.default.string,
-  "iconType": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "iconType": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
   "initials": _propTypes.default.string,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,

package/lib/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;
     /**