carbon-react 119.6.1 → 119.6.3

package/esm/style/themes/small/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { mintTheme } from "..";
 export default (() => {
   console.warn(`"Small Theme" has been renamed to "Mint".

package/lib/__internal__/input/input-presentation.component.d.ts

@@ -7,6 +7,8 @@ export interface CommonInputPresentationProps extends ValidationProps {
     disabled?: boolean;
     /** The default value alignment on the input */
     align?: string;
+    /** Emphasized part of the displayed text */
+    prefix?: string;
     /** The width of the input as a percentage */
     inputWidth?: number;
     /**
@@ -25,5 +27,5 @@ export interface InputPresentationProps extends CommonInputPresentationProps {
     /** Content to be rendered before the input */
     positionedChildren?: React.ReactNode;
 }
-declare const InputPresentation: ({ children, positionedChildren, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
+declare const InputPresentation: ({ children, positionedChildren, prefix, inputWidth, maxWidth, align, disabled, readOnly, size, error, warning, info, hasIcon, }: InputPresentationProps) => JSX.Element;
 export default InputPresentation;

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

@@ -16,6 +16,7 @@ const InputPresentation = _ref => {
   let {
     children,
     positionedChildren,
+    prefix,
     inputWidth,
     maxWidth,
     align,
@@ -58,6 +59,7 @@ const InputPresentation = _ref => {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     align: align,
+    prefix: prefix,
     disabled: disabled,
     readOnly: readOnly,
     size: size,
@@ -78,6 +80,7 @@ InputPresentation.propTypes = {
   "inputWidth": _propTypes.default.number,
   "maxWidth": _propTypes.default.string,
   "positionedChildren": _propTypes.default.node,
+  "prefix": _propTypes.default.string,
   "readOnly": _propTypes.default.bool,
   "size": _propTypes.default.oneOf(["large", "medium", "small"]),
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
 import { InputContextProps } from "../input-behaviour";
 import { CarbonProviderProps } from "../../components/carbon-provider";
 export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "inputWidth" | "maxWidth">, never>;
-declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
+declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "disabled" | "error" | "info" | "warning" | "prefix" | "align" | "readOnly" | "size" | "hasIcon"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
 export default InputPresentationStyle;

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

@@ -119,9 +119,11 @@ const InputPresentationStyle = _styledComponents.default.div`
 
   ${_ref8 => {
   let {
-    align
+    align,
+    prefix
   } = _ref8;
-  return align === "right" && "flex-direction: row-reverse";
+  return align === "right" && `flex-direction: ${prefix ? "row" : "row-reverse"};
+  `;
 }}
 
   input::-ms-clear {

package/lib/__internal__/popover/popover.component.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
 import { Placement, Middleware } from "@floating-ui/dom";
+declare type CustomRefObject<T> = {
+    current?: T | null;
+};
 export interface PopoverProps {
     children: React.ReactElement;
     placement?: Placement;
     disableBackgroundUI?: boolean;
     middleware?: Middleware[];
     disablePortal?: boolean;
-    reference: React.RefObject<HTMLElement>;
+    reference: CustomRefObject<HTMLElement>;
     isOpen?: boolean;
     animationFrame?: boolean;
 }

package/lib/__internal__/sticky-footer/sticky-footer.component.js

@@ -35,7 +35,7 @@ const StickyFooter = _ref => {
       fullyScrolled = content.scrollHeight - content.scrollTop - stickyOffset <= content.clientHeight;
     }
     setIsSticky(!fullyScrolled);
-  }, SCROLL_THROTTLE), []);
+  }, SCROLL_THROTTLE), [containerRef]);
   (0, _react.useEffect)(() => {
     const content = containerRef.current;
     content?.addEventListener("scroll", checkFooterPosition, false);

package/lib/__spec_helper__/test-utils.js

@@ -66,6 +66,7 @@ const keydown = keys.reduce((acc, key) => {
     });
   };
   return acc;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }, {});
 const simulate = {
   keydown

package/lib/components/badge/badge.style.js

@@ -85,7 +85,7 @@ const StyledBadge = _styledComponents.default.span.attrs(_ref => {
           margin-right: 0;
 
           :before {
-            font-size: 16px;
+            font-size: 20px;
             color: var(--colorsActionMajorYang100);
           }
         }

package/lib/components/date/__internal__/date-formats/index.d.ts

@@ -1,10 +1,7 @@
 import { Locale as DateFnsLocale } from "date-fns";
-
 interface LocaleFormats {
-  formats: string[];
-  format: string;
+    formats: string[];
+    format: string;
 }
-
-declare function getFormatData(locale: DateFnsLocale): LocaleFormats;
-
+declare const getFormatData: ({ code }: DateFnsLocale) => LocaleFormats;
 export default getFormatData;

package/lib/components/date/__internal__/date-formats/index.js

@@ -36,13 +36,13 @@ const getOutputFormatForLocale = localeCode => {
     year: "yyyy"
   };
   const formatter = new Intl.DateTimeFormat(localeCode);
-  let separator;
+  let separator = "";
   const format = formatter.formatToParts(new Date()).map(_ref => {
     let {
       type,
       value
     } = _ref;
-    if (type !== "literal") {
+    if (["day", "month", "year"].includes(type)) {
       return formatMap[type];
     }
     if (!separator) {
@@ -79,7 +79,7 @@ const getTrailingChar = format => {
 };
 const getFormatData = _ref2 => {
   let {
-    code
+    code = "en-GB"
   } = _ref2;
   if (["en-CA", "en-US"].includes(code)) {
     const format = "MM/dd/yyyy";

package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { DayPickerProps, Modifier } from "react-day-picker";
+declare type CustomRefObject<T> = {
+    current?: T | null;
+};
+/** there is an issue with typescript-to-proptypes package that means we need to override these types */
+interface Modifiers {
+    today: NonNullable<Modifier> | NonNullable<Modifier>[];
+    outside: NonNullable<Modifier> | NonNullable<Modifier>[];
+    [other: string]: NonNullable<Modifier> | NonNullable<Modifier>[];
+}
+export interface PickerProps extends Omit<DayPickerProps, "disabledDays" | "modifiers" | "selectedDays"> {
+    disabledDays?: NonNullable<Modifier> | NonNullable<Modifier>[] | undefined[];
+    modifiers?: Partial<Modifiers>;
+    selectedDays?: NonNullable<Modifier> | NonNullable<Modifier>[] | undefined[];
+}
+export interface DatePickerProps {
+    /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
+    disablePortal?: boolean;
+    /** Minimum possible date YYYY-MM-DD */
+    minDate?: string;
+    /** Maximum possible date YYYY-MM-DD */
+    maxDate?: string;
+    /** Pass any props that match the DayPickerProps interface to override default behaviors */
+    pickerProps?: PickerProps;
+    /** Element that the DatePicker will be displayed under */
+    inputElement: CustomRefObject<HTMLElement>;
+    /** Currently selected date */
+    selectedDays?: Date;
+    /** Callback to handle mousedown event on picker container */
+    pickerMouseDown?: () => void;
+    /** Sets whether the picker should be displayed */
+    open?: boolean;
+    /** Callback triggered when a Day is clicked */
+    onDayClick?: (date: Date, ev: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePicker;

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DatePicker = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDayPicker = _interopRequireDefault(require("react-day-picker"));
@@ -18,6 +18,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ? Object.assign.bind() : 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); }
+/** there is an issue with typescript-to-proptypes package that means we need to override these types */
+
 const popoverMiddleware = [(0, _dom.offset)(3), (0, _dom.flip)({
   fallbackStrategy: "initialPlacement"
 })];
@@ -40,36 +42,33 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = l.date.dateFnsLocale();
   const {
     weekStartsOn
-  } = options;
+  } = options || /* istanbul ignore next */{};
   const monthsLong = (0, _react.useMemo)(() => Array.from({
     length: 12
   }).map((_, i) => {
-    const month = localize.month(i);
+    const month = localize?.month(i);
     return month[0].toUpperCase() + month.slice(1);
   }), [localize]);
   const monthsShort = (0, _react.useMemo)(() => Array.from({
     length: 12
-  }).map((_, i) => localize.month(i, {
+  }).map((_, i) => localize?.month(i, {
     width: "abbreviated"
   }).substring(0, 3)), [localize]);
   const weekdaysLong = (0, _react.useMemo)(() => Array.from({
     length: 7
-  }).map((_, i) => localize.day(i)), [localize]);
+  }).map((_, i) => localize?.day(i)), [localize]);
   const weekdaysShort = (0, _react.useMemo)(() => {
     const isGivenLocale = str => l.locale().includes(str);
     return Array.from({
       length: 7
-    }).map((_, i) => localize.day(i, ["de", "pl"].some(isGivenLocale) ? {
+    }).map((_, i) => localize?.day(i, ["de", "pl"].some(isGivenLocale) ? {
       width: "wide"
     } : {
       width: "abbreviated"
     }).substring(0, isGivenLocale("de") ? 2 : 3));
   }, [l, localize]);
-  const handleDayClick = (date, _ref2, ev) => {
-    let {
-      disabled
-    } = _ref2;
-    if (!disabled) {
+  const handleDayClick = (date, modifiers, ev) => {
+    if (!modifiers.disabled) {
       const {
         id,
         name
@@ -79,13 +78,16 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         id,
         name
       };
-      onDayClick(date, ev);
+      onDayClick?.(date, ev);
     }
   };
   const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
   if (!open) {
     return null;
   }
+  const localeUtils = {
+    formatDay
+  };
   return /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: "bottom-start",
     reference: inputElement,
@@ -100,7 +102,6 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     firstDayOfWeek: weekStartsOn,
     onDayClick: handleDayClick,
     selectedDays: selectedDays,
-    date: selectedDays,
     weekdayElement: weekdayElementProps => {
       const {
         className,
@@ -115,32 +116,239 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     fixedWeeks: true,
     initialMonth: selectedDays || undefined,
     disabledDays: (0, _utils.getDisabledDays)(minDate, maxDate),
-    inline: true,
     locale: l.locale(),
-    localeUtils: {
-      formatDay
-    }
+    localeUtils: localeUtils
   }, pickerProps))));
 });
+exports.DatePicker = DatePicker;
 DatePicker.propTypes = {
-  /** Minimum possible date */
-  minDate: _propTypes.default.string,
-  /** Maximum possible date */
-  maxDate: _propTypes.default.string,
-  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
-  disablePortal: _propTypes.default.bool,
-  /** Element that the DatePicker will be displayed under */
-  inputElement: _propTypes.default.object.isRequired,
-  /** Currently selected date */
-  selectedDays: _propTypes.default.instanceOf(Date),
-  /** Callback to set selected date */
-  onDayClick: _propTypes.default.func,
-  /** Pass any props that match the DayPickerProps interface to override default behaviors */
-  pickerProps: _propTypes.default.object,
-  /** Callback to handle mousedown event on picker */
-  pickerMouseDown: _propTypes.default.func,
-  /** Sets whether the picker should be displayed */
-  open: _propTypes.default.bool
+  "disablePortal": _propTypes.default.bool,
+  "inputElement": _propTypes.default.shape({
+    "current": function (props, propName) {
+      if (props[propName] == null) {
+        return null;
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    }
+  }).isRequired,
+  "maxDate": _propTypes.default.string,
+  "minDate": _propTypes.default.string,
+  "onDayClick": _propTypes.default.func,
+  "open": _propTypes.default.bool,
+  "pickerMouseDown": _propTypes.default.func,
+  "pickerProps": _propTypes.default.shape({
+    "canChangeMonth": _propTypes.default.bool,
+    "captionElement": _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func, _propTypes.default.shape({
+      "childContextTypes": _propTypes.default.object,
+      "contextType": _propTypes.default.shape({
+        "Consumer": _propTypes.default.func.isRequired,
+        "displayName": _propTypes.default.string,
+        "Provider": _propTypes.default.func.isRequired
+      }),
+      "contextTypes": _propTypes.default.object,
+      "defaultProps": _propTypes.default.shape({
+        "classNames": _propTypes.default.object,
+        "date": _propTypes.default.instanceOf(Date),
+        "locale": _propTypes.default.string,
+        "localeUtils": _propTypes.default.object,
+        "months": _propTypes.default.arrayOf(_propTypes.default.string),
+        "onClick": _propTypes.default.func
+      }),
+      "displayName": _propTypes.default.string,
+      "getDerivedStateFromError": _propTypes.default.func,
+      "getDerivedStateFromProps": _propTypes.default.func,
+      "propTypes": _propTypes.default.shape({
+        "classNames": _propTypes.default.func,
+        "date": _propTypes.default.func,
+        "locale": _propTypes.default.func,
+        "localeUtils": _propTypes.default.func,
+        "months": _propTypes.default.func,
+        "onClick": _propTypes.default.func
+      })
+    })]),
+    "className": _propTypes.default.string,
+    "classNames": _propTypes.default.shape({
+      "body": _propTypes.default.string.isRequired,
+      "caption": _propTypes.default.string.isRequired,
+      "container": _propTypes.default.string.isRequired,
+      "day": _propTypes.default.string.isRequired,
+      "disabled": _propTypes.default.string.isRequired,
+      "footer": _propTypes.default.string.isRequired,
+      "interactionDisabled": _propTypes.default.string.isRequired,
+      "month": _propTypes.default.string.isRequired,
+      "months": _propTypes.default.string.isRequired,
+      "navBar": _propTypes.default.string.isRequired,
+      "navButtonInteractionDisabled": _propTypes.default.string.isRequired,
+      "navButtonNext": _propTypes.default.string.isRequired,
+      "navButtonPrev": _propTypes.default.string.isRequired,
+      "outside": _propTypes.default.string.isRequired,
+      "selected": _propTypes.default.string.isRequired,
+      "today": _propTypes.default.string.isRequired,
+      "todayButton": _propTypes.default.string.isRequired,
+      "week": _propTypes.default.string.isRequired,
+      "weekday": _propTypes.default.string.isRequired,
+      "weekdays": _propTypes.default.string.isRequired,
+      "weekdaysRow": _propTypes.default.string.isRequired,
+      "weekNumber": _propTypes.default.string.isRequired,
+      "wrapper": _propTypes.default.string.isRequired
+    }),
+    "containerProps": _propTypes.default.object,
+    "dir": _propTypes.default.string,
+    "disabledDays": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
+      "from": _propTypes.default.instanceOf(Date),
+      "to": _propTypes.default.instanceOf(Date)
+    })])), _propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
+      "from": _propTypes.default.instanceOf(Date),
+      "to": _propTypes.default.instanceOf(Date)
+    })]),
+    "enableOutsideDaysClick": _propTypes.default.bool,
+    "firstDayOfWeek": _propTypes.default.number,
+    "fixedWeeks": _propTypes.default.bool,
+    "fromMonth": _propTypes.default.instanceOf(Date),
+    "initialMonth": _propTypes.default.instanceOf(Date),
+    "labels": _propTypes.default.shape({
+      "nextMonth": _propTypes.default.string.isRequired,
+      "previousMonth": _propTypes.default.string.isRequired
+    }),
+    "locale": _propTypes.default.string,
+    "localeUtils": _propTypes.default.shape({
+      "formatDate": _propTypes.default.func.isRequired,
+      "formatDay": _propTypes.default.func.isRequired,
+      "formatMonthTitle": _propTypes.default.func.isRequired,
+      "formatWeekdayLong": _propTypes.default.func.isRequired,
+      "formatWeekdayShort": _propTypes.default.func.isRequired,
+      "getFirstDayOfWeek": _propTypes.default.func.isRequired,
+      "getMonths": _propTypes.default.func.isRequired,
+      "parseDate": _propTypes.default.func.isRequired
+    }),
+    "modifiers": _propTypes.default.shape({
+      "outside": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
+        "from": _propTypes.default.instanceOf(Date),
+        "to": _propTypes.default.instanceOf(Date)
+      })])), _propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
+        "from": _propTypes.default.instanceOf(Date),
+        "to": _propTypes.default.instanceOf(Date)
+      })]),
+      "today": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
+        "from": _propTypes.default.instanceOf(Date),
+        "to": _propTypes.default.instanceOf(Date)
+      })])), _propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
+        "from": _propTypes.default.instanceOf(Date),
+        "to": _propTypes.default.instanceOf(Date)
+      })])
+    }),
+    "modifiersStyles": _propTypes.default.object,
+    "month": _propTypes.default.instanceOf(Date),
+    "months": _propTypes.default.arrayOf(_propTypes.default.string),
+    "navbarElement": _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func, _propTypes.default.shape({
+      "childContextTypes": _propTypes.default.object,
+      "contextType": _propTypes.default.shape({
+        "Consumer": _propTypes.default.func.isRequired,
+        "displayName": _propTypes.default.string,
+        "Provider": _propTypes.default.func.isRequired
+      }),
+      "contextTypes": _propTypes.default.object,
+      "defaultProps": _propTypes.default.shape({
+        "className": _propTypes.default.string,
+        "classNames": _propTypes.default.object,
+        "dir": _propTypes.default.string,
+        "labels": _propTypes.default.object,
+        "locale": _propTypes.default.string,
+        "localeUtils": _propTypes.default.object,
+        "month": _propTypes.default.instanceOf(Date),
+        "nextMonth": _propTypes.default.instanceOf(Date),
+        "onNextClick": _propTypes.default.func,
+        "onPreviousClick": _propTypes.default.func,
+        "previousMonth": _propTypes.default.instanceOf(Date),
+        "showNextButton": _propTypes.default.bool,
+        "showPreviousButton": _propTypes.default.bool
+      }),
+      "displayName": _propTypes.default.string,
+      "getDerivedStateFromError": _propTypes.default.func,
+      "getDerivedStateFromProps": _propTypes.default.func,
+      "propTypes": _propTypes.default.shape({
+        "className": _propTypes.default.func,
+        "classNames": _propTypes.default.func,
+        "dir": _propTypes.default.func,
+        "labels": _propTypes.default.func,
+        "locale": _propTypes.default.func,
+        "localeUtils": _propTypes.default.func,
+        "month": _propTypes.default.func,
+        "nextMonth": _propTypes.default.func,
+        "onNextClick": _propTypes.default.func,
+        "onPreviousClick": _propTypes.default.func,
+        "previousMonth": _propTypes.default.func,
+        "showNextButton": _propTypes.default.func,
+        "showPreviousButton": _propTypes.default.func
+      })
+    })]),
+    "numberOfMonths": _propTypes.default.number,
+    "onBlur": _propTypes.default.func,
+    "onCaptionClick": _propTypes.default.func,
+    "onDayClick": _propTypes.default.func,
+    "onDayKeyDown": _propTypes.default.func,
+    "onDayMouseDown": _propTypes.default.func,
+    "onDayMouseEnter": _propTypes.default.func,
+    "onDayMouseLeave": _propTypes.default.func,
+    "onDayMouseUp": _propTypes.default.func,
+    "onDayTouchEnd": _propTypes.default.func,
+    "onDayTouchStart": _propTypes.default.func,
+    "onFocus": _propTypes.default.func,
+    "onKeyDown": _propTypes.default.func,
+    "onMonthChange": _propTypes.default.func,
+    "onTodayButtonClick": _propTypes.default.func,
+    "onWeekClick": _propTypes.default.func,
+    "pagedNavigation": _propTypes.default.bool,
+    "renderDay": _propTypes.default.func,
+    "renderWeek": _propTypes.default.func,
+    "reverseMonths": _propTypes.default.bool,
+    "selectedDays": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
+      "from": _propTypes.default.instanceOf(Date),
+      "to": _propTypes.default.instanceOf(Date)
+    })])), _propTypes.default.func, _propTypes.default.instanceOf(Date), _propTypes.default.shape({
+      "from": _propTypes.default.instanceOf(Date),
+      "to": _propTypes.default.instanceOf(Date)
+    })]),
+    "showOutsideDays": _propTypes.default.bool,
+    "showWeekDays": _propTypes.default.bool,
+    "showWeekNumbers": _propTypes.default.bool,
+    "tabIndex": _propTypes.default.number,
+    "todayButton": _propTypes.default.string,
+    "toMonth": _propTypes.default.instanceOf(Date),
+    "weekdayElement": _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func, _propTypes.default.shape({
+      "childContextTypes": _propTypes.default.object,
+      "contextType": _propTypes.default.shape({
+        "Consumer": _propTypes.default.func.isRequired,
+        "displayName": _propTypes.default.string,
+        "Provider": _propTypes.default.func.isRequired
+      }),
+      "contextTypes": _propTypes.default.object,
+      "defaultProps": _propTypes.default.shape({
+        "className": _propTypes.default.string,
+        "locale": _propTypes.default.string,
+        "localeUtils": _propTypes.default.object,
+        "weekday": _propTypes.default.number,
+        "weekdaysLong": _propTypes.default.arrayOf(_propTypes.default.string),
+        "weekdaysShort": _propTypes.default.arrayOf(_propTypes.default.string)
+      }),
+      "displayName": _propTypes.default.string,
+      "getDerivedStateFromError": _propTypes.default.func,
+      "getDerivedStateFromProps": _propTypes.default.func,
+      "propTypes": _propTypes.default.shape({
+        "className": _propTypes.default.func,
+        "locale": _propTypes.default.func,
+        "localeUtils": _propTypes.default.func,
+        "weekday": _propTypes.default.func,
+        "weekdaysLong": _propTypes.default.func,
+        "weekdaysShort": _propTypes.default.func
+      })
+    })]),
+    "weekdaysLong": _propTypes.default.arrayOf(_propTypes.default.string),
+    "weekdaysShort": _propTypes.default.arrayOf(_propTypes.default.string)
+  }),
+  "selectedDays": _propTypes.default.instanceOf(Date)
 };
+DatePicker.displayName = "DatePicker";
 var _default = DatePicker;
 exports.default = _default;

package/lib/components/date/__internal__/date-picker/day-picker.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledDayPicker: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledDayPicker;

package/lib/components/date/__internal__/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./date-picker.component";
+export type { DatePickerProps, PickerProps } from "./date-picker.component";

package/lib/components/date/__internal__/navbar/button.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+export default StyledButton;

package/lib/components/date/__internal__/navbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./navbar.component";
+export type { NavbarProps } from "./navbar.component";

package/lib/components/date/__internal__/navbar/navbar.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface NavbarProps {
+    onPreviousClick?: () => void;
+    onNextClick?: () => void;
+    className?: string;
+}
+export declare const Navbar: ({ onPreviousClick, onNextClick, className, }: NavbarProps) => React.JSX.Element;
+export default Navbar;

package/lib/components/date/__internal__/navbar/navbar.component.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Navbar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _button = _interopRequireDefault(require("./button.style"));
@@ -14,21 +14,20 @@ const Navbar = _ref => {
   let {
     onPreviousClick,
     onNextClick,
-    ...props
+    className
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_navbar.default, props, /*#__PURE__*/_react.default.createElement(_button.default, {
-    onClick: () => onPreviousClick()
+  return /*#__PURE__*/_react.default.createElement(_navbar.default, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    onClick: () => onPreviousClick?.()
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "chevron_left"
   })), /*#__PURE__*/_react.default.createElement(_button.default, {
-    onClick: () => onNextClick()
+    onClick: () => onNextClick?.()
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "chevron_right"
   })));
 };
-Navbar.propTypes = {
-  onPreviousClick: _propTypes.default.func,
-  onNextClick: _propTypes.default.func
-};
+exports.Navbar = Navbar;
 var _default = Navbar;
 exports.default = _default;

package/lib/components/date/__internal__/navbar/navbar.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledNavbar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledNavbar;

package/lib/components/date/__internal__/utils.d.ts

@@ -0,0 +1,14 @@
+import { Modifier } from "react-day-picker";
+export declare function parseDate(formatString?: string, valueString?: string): Date | undefined;
+export declare function isDateValid(date?: Date): boolean | undefined;
+export declare function formatToISO(formatString?: string, valueString?: string): string | null;
+export declare function formattedValue(formatString: string, value?: Date): string;
+export declare function additionalYears(formatString: string, value: string): string[];
+export declare const getSeparator: (value: string) => string;
+export declare function findMatchedFormatAndValue(valueString: string, formats: string[]): string[];
+export declare function parseISODate(value: string): Date;
+export declare function checkISOFormatAndLength(value: string): boolean;
+/**
+ * Returns the disabled array of days specified by props maxDate and minDate
+ */
+export declare function getDisabledDays(minDate?: string, maxDate?: string): Modifier | Modifier[];