carbon-react 119.6.1 → 119.6.2

package/esm/__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/esm/__internal__/input/input-presentation.component.js

@@ -7,6 +7,7 @@ const InputPresentation = _ref => {
   let {
     children,
     positionedChildren,
+    prefix,
     inputWidth,
     maxWidth,
     align,
@@ -49,6 +50,7 @@ const InputPresentation = _ref => {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     align: align,
+    prefix: prefix,
     disabled: disabled,
     readOnly: readOnly,
     size: size,
@@ -69,6 +71,7 @@ InputPresentation.propTypes = {
   "inputWidth": PropTypes.number,
   "maxWidth": PropTypes.string,
   "positionedChildren": PropTypes.node,
+  "prefix": PropTypes.string,
   "readOnly": PropTypes.bool,
   "size": PropTypes.oneOf(["large", "medium", "small"]),
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])

package/esm/__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/esm/__internal__/input/input-presentation.style.js

@@ -109,9 +109,11 @@ const InputPresentationStyle = styled.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/esm/__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/esm/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/esm/components/date/__internal__/date-formats/index.js

@@ -30,13 +30,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) {
@@ -73,7 +73,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/esm/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/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -9,6 +9,9 @@ import useLocale from "../../../../hooks/__internal__/useLocale";
 import Navbar from "../navbar";
 import Weekday from "../weekday";
 import StyledDayPicker from "./day-picker.style";
+
+/** there is an issue with typescript-to-proptypes package that means we need to override these types */
+
 const popoverMiddleware = [offset(3), flip({
   fallbackStrategy: "initialPlacement"
 })];
@@ -31,36 +34,33 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = l.date.dateFnsLocale();
   const {
     weekStartsOn
-  } = options;
+  } = options || /* istanbul ignore next */{};
   const monthsLong = 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 = useMemo(() => Array.from({
     length: 12
-  }).map((_, i) => localize.month(i, {
+  }).map((_, i) => localize?.month(i, {
     width: "abbreviated"
   }).substring(0, 3)), [localize]);
   const weekdaysLong = useMemo(() => Array.from({
     length: 7
-  }).map((_, i) => localize.day(i)), [localize]);
+  }).map((_, i) => localize?.day(i)), [localize]);
   const weekdaysShort = 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
@@ -70,13 +70,16 @@ const DatePicker = /*#__PURE__*/React.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.createElement(Popover, {
     placement: "bottom-start",
     reference: inputElement,
@@ -91,7 +94,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     firstDayOfWeek: weekStartsOn,
     onDayClick: handleDayClick,
     selectedDays: selectedDays,
-    date: selectedDays,
     weekdayElement: weekdayElementProps => {
       const {
         className,
@@ -106,31 +108,238 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fixedWeeks: true,
     initialMonth: selectedDays || undefined,
     disabledDays: getDisabledDays(minDate, maxDate),
-    inline: true,
     locale: l.locale(),
-    localeUtils: {
-      formatDay
-    }
+    localeUtils: localeUtils
   }, pickerProps))));
 });
 DatePicker.propTypes = {
-  /** Minimum possible date */
-  minDate: PropTypes.string,
-  /** Maximum possible date */
-  maxDate: PropTypes.string,
-  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
-  disablePortal: PropTypes.bool,
-  /** Element that the DatePicker will be displayed under */
-  inputElement: PropTypes.object.isRequired,
-  /** Currently selected date */
-  selectedDays: PropTypes.instanceOf(Date),
-  /** Callback to set selected date */
-  onDayClick: PropTypes.func,
-  /** Pass any props that match the DayPickerProps interface to override default behaviors */
-  pickerProps: PropTypes.object,
-  /** Callback to handle mousedown event on picker */
-  pickerMouseDown: PropTypes.func,
-  /** Sets whether the picker should be displayed */
-  open: PropTypes.bool
+  "disablePortal": PropTypes.bool,
+  "inputElement": PropTypes.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.string,
+  "minDate": PropTypes.string,
+  "onDayClick": PropTypes.func,
+  "open": PropTypes.bool,
+  "pickerMouseDown": PropTypes.func,
+  "pickerProps": PropTypes.shape({
+    "canChangeMonth": PropTypes.bool,
+    "captionElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
+      "childContextTypes": PropTypes.object,
+      "contextType": PropTypes.shape({
+        "Consumer": PropTypes.func.isRequired,
+        "displayName": PropTypes.string,
+        "Provider": PropTypes.func.isRequired
+      }),
+      "contextTypes": PropTypes.object,
+      "defaultProps": PropTypes.shape({
+        "classNames": PropTypes.object,
+        "date": PropTypes.instanceOf(Date),
+        "locale": PropTypes.string,
+        "localeUtils": PropTypes.object,
+        "months": PropTypes.arrayOf(PropTypes.string),
+        "onClick": PropTypes.func
+      }),
+      "displayName": PropTypes.string,
+      "getDerivedStateFromError": PropTypes.func,
+      "getDerivedStateFromProps": PropTypes.func,
+      "propTypes": PropTypes.shape({
+        "classNames": PropTypes.func,
+        "date": PropTypes.func,
+        "locale": PropTypes.func,
+        "localeUtils": PropTypes.func,
+        "months": PropTypes.func,
+        "onClick": PropTypes.func
+      })
+    })]),
+    "className": PropTypes.string,
+    "classNames": PropTypes.shape({
+      "body": PropTypes.string.isRequired,
+      "caption": PropTypes.string.isRequired,
+      "container": PropTypes.string.isRequired,
+      "day": PropTypes.string.isRequired,
+      "disabled": PropTypes.string.isRequired,
+      "footer": PropTypes.string.isRequired,
+      "interactionDisabled": PropTypes.string.isRequired,
+      "month": PropTypes.string.isRequired,
+      "months": PropTypes.string.isRequired,
+      "navBar": PropTypes.string.isRequired,
+      "navButtonInteractionDisabled": PropTypes.string.isRequired,
+      "navButtonNext": PropTypes.string.isRequired,
+      "navButtonPrev": PropTypes.string.isRequired,
+      "outside": PropTypes.string.isRequired,
+      "selected": PropTypes.string.isRequired,
+      "today": PropTypes.string.isRequired,
+      "todayButton": PropTypes.string.isRequired,
+      "week": PropTypes.string.isRequired,
+      "weekday": PropTypes.string.isRequired,
+      "weekdays": PropTypes.string.isRequired,
+      "weekdaysRow": PropTypes.string.isRequired,
+      "weekNumber": PropTypes.string.isRequired,
+      "wrapper": PropTypes.string.isRequired
+    }),
+    "containerProps": PropTypes.object,
+    "dir": PropTypes.string,
+    "disabledDays": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
+      "from": PropTypes.instanceOf(Date),
+      "to": PropTypes.instanceOf(Date)
+    })])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
+      "from": PropTypes.instanceOf(Date),
+      "to": PropTypes.instanceOf(Date)
+    })]),
+    "enableOutsideDaysClick": PropTypes.bool,
+    "firstDayOfWeek": PropTypes.number,
+    "fixedWeeks": PropTypes.bool,
+    "fromMonth": PropTypes.instanceOf(Date),
+    "initialMonth": PropTypes.instanceOf(Date),
+    "labels": PropTypes.shape({
+      "nextMonth": PropTypes.string.isRequired,
+      "previousMonth": PropTypes.string.isRequired
+    }),
+    "locale": PropTypes.string,
+    "localeUtils": PropTypes.shape({
+      "formatDate": PropTypes.func.isRequired,
+      "formatDay": PropTypes.func.isRequired,
+      "formatMonthTitle": PropTypes.func.isRequired,
+      "formatWeekdayLong": PropTypes.func.isRequired,
+      "formatWeekdayShort": PropTypes.func.isRequired,
+      "getFirstDayOfWeek": PropTypes.func.isRequired,
+      "getMonths": PropTypes.func.isRequired,
+      "parseDate": PropTypes.func.isRequired
+    }),
+    "modifiers": PropTypes.shape({
+      "outside": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
+        "from": PropTypes.instanceOf(Date),
+        "to": PropTypes.instanceOf(Date)
+      })])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
+        "from": PropTypes.instanceOf(Date),
+        "to": PropTypes.instanceOf(Date)
+      })]),
+      "today": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
+        "from": PropTypes.instanceOf(Date),
+        "to": PropTypes.instanceOf(Date)
+      })])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
+        "from": PropTypes.instanceOf(Date),
+        "to": PropTypes.instanceOf(Date)
+      })])
+    }),
+    "modifiersStyles": PropTypes.object,
+    "month": PropTypes.instanceOf(Date),
+    "months": PropTypes.arrayOf(PropTypes.string),
+    "navbarElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
+      "childContextTypes": PropTypes.object,
+      "contextType": PropTypes.shape({
+        "Consumer": PropTypes.func.isRequired,
+        "displayName": PropTypes.string,
+        "Provider": PropTypes.func.isRequired
+      }),
+      "contextTypes": PropTypes.object,
+      "defaultProps": PropTypes.shape({
+        "className": PropTypes.string,
+        "classNames": PropTypes.object,
+        "dir": PropTypes.string,
+        "labels": PropTypes.object,
+        "locale": PropTypes.string,
+        "localeUtils": PropTypes.object,
+        "month": PropTypes.instanceOf(Date),
+        "nextMonth": PropTypes.instanceOf(Date),
+        "onNextClick": PropTypes.func,
+        "onPreviousClick": PropTypes.func,
+        "previousMonth": PropTypes.instanceOf(Date),
+        "showNextButton": PropTypes.bool,
+        "showPreviousButton": PropTypes.bool
+      }),
+      "displayName": PropTypes.string,
+      "getDerivedStateFromError": PropTypes.func,
+      "getDerivedStateFromProps": PropTypes.func,
+      "propTypes": PropTypes.shape({
+        "className": PropTypes.func,
+        "classNames": PropTypes.func,
+        "dir": PropTypes.func,
+        "labels": PropTypes.func,
+        "locale": PropTypes.func,
+        "localeUtils": PropTypes.func,
+        "month": PropTypes.func,
+        "nextMonth": PropTypes.func,
+        "onNextClick": PropTypes.func,
+        "onPreviousClick": PropTypes.func,
+        "previousMonth": PropTypes.func,
+        "showNextButton": PropTypes.func,
+        "showPreviousButton": PropTypes.func
+      })
+    })]),
+    "numberOfMonths": PropTypes.number,
+    "onBlur": PropTypes.func,
+    "onCaptionClick": PropTypes.func,
+    "onDayClick": PropTypes.func,
+    "onDayKeyDown": PropTypes.func,
+    "onDayMouseDown": PropTypes.func,
+    "onDayMouseEnter": PropTypes.func,
+    "onDayMouseLeave": PropTypes.func,
+    "onDayMouseUp": PropTypes.func,
+    "onDayTouchEnd": PropTypes.func,
+    "onDayTouchStart": PropTypes.func,
+    "onFocus": PropTypes.func,
+    "onKeyDown": PropTypes.func,
+    "onMonthChange": PropTypes.func,
+    "onTodayButtonClick": PropTypes.func,
+    "onWeekClick": PropTypes.func,
+    "pagedNavigation": PropTypes.bool,
+    "renderDay": PropTypes.func,
+    "renderWeek": PropTypes.func,
+    "reverseMonths": PropTypes.bool,
+    "selectedDays": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
+      "from": PropTypes.instanceOf(Date),
+      "to": PropTypes.instanceOf(Date)
+    })])), PropTypes.func, PropTypes.instanceOf(Date), PropTypes.shape({
+      "from": PropTypes.instanceOf(Date),
+      "to": PropTypes.instanceOf(Date)
+    })]),
+    "showOutsideDays": PropTypes.bool,
+    "showWeekDays": PropTypes.bool,
+    "showWeekNumbers": PropTypes.bool,
+    "tabIndex": PropTypes.number,
+    "todayButton": PropTypes.string,
+    "toMonth": PropTypes.instanceOf(Date),
+    "weekdayElement": PropTypes.oneOfType([PropTypes.element, PropTypes.func, PropTypes.shape({
+      "childContextTypes": PropTypes.object,
+      "contextType": PropTypes.shape({
+        "Consumer": PropTypes.func.isRequired,
+        "displayName": PropTypes.string,
+        "Provider": PropTypes.func.isRequired
+      }),
+      "contextTypes": PropTypes.object,
+      "defaultProps": PropTypes.shape({
+        "className": PropTypes.string,
+        "locale": PropTypes.string,
+        "localeUtils": PropTypes.object,
+        "weekday": PropTypes.number,
+        "weekdaysLong": PropTypes.arrayOf(PropTypes.string),
+        "weekdaysShort": PropTypes.arrayOf(PropTypes.string)
+      }),
+      "displayName": PropTypes.string,
+      "getDerivedStateFromError": PropTypes.func,
+      "getDerivedStateFromProps": PropTypes.func,
+      "propTypes": PropTypes.shape({
+        "className": PropTypes.func,
+        "locale": PropTypes.func,
+        "localeUtils": PropTypes.func,
+        "weekday": PropTypes.func,
+        "weekdaysLong": PropTypes.func,
+        "weekdaysShort": PropTypes.func
+      })
+    })]),
+    "weekdaysLong": PropTypes.arrayOf(PropTypes.string),
+    "weekdaysShort": PropTypes.arrayOf(PropTypes.string)
+  }),
+  "selectedDays": PropTypes.instanceOf(Date)
 };
+export { DatePicker };
+DatePicker.displayName = "DatePicker";
 export default DatePicker;

package/esm/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/esm/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/esm/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/esm/components/date/__internal__/navbar/index.d.ts

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

package/esm/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/esm/components/date/__internal__/navbar/navbar.component.js

@@ -3,24 +3,22 @@ import PropTypes from "prop-types";
 import StyledButton from "./button.style";
 import StyledNavbar from "./navbar.style";
 import Icon from "../../../icon";
-const Navbar = _ref => {
+export const Navbar = _ref => {
   let {
     onPreviousClick,
     onNextClick,
-    ...props
+    className
   } = _ref;
-  return /*#__PURE__*/React.createElement(StyledNavbar, props, /*#__PURE__*/React.createElement(StyledButton, {
-    onClick: () => onPreviousClick()
+  return /*#__PURE__*/React.createElement(StyledNavbar, {
+    className: className
+  }, /*#__PURE__*/React.createElement(StyledButton, {
+    onClick: () => onPreviousClick?.()
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "chevron_left"
   })), /*#__PURE__*/React.createElement(StyledButton, {
-    onClick: () => onNextClick()
+    onClick: () => onNextClick?.()
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "chevron_right"
   })));
 };
-Navbar.propTypes = {
-  onPreviousClick: PropTypes.func,
-  onNextClick: PropTypes.func
-};
 export default Navbar;

package/esm/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/esm/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[];

package/esm/components/date/__internal__/utils.js

@@ -1,21 +1,24 @@
 import { format, formatISO, isMatch, parse, parseISO } from "date-fns/fp";
+const DATE_STRING_LENGTH = 10;
+const THRESHOLD_FOR_ADDITIONAL_YEARS = 69;
 export function parseDate(formatString, valueString) {
-  if (!valueString || !formatString) return null;
+  if (!valueString || !formatString) return undefined;
   return parse(new Date(), formatString, valueString);
 }
+export function isDateValid(date) {
+  return date && date.toString() !== "Invalid Date";
+}
 export function formatToISO(formatString, valueString) {
   const dateValue = parseDate(formatString, valueString);
-  if (!isDateValid(dateValue)) {
+  if (!dateValue || !isDateValid(dateValue)) {
     return null;
   }
   return formatISO(dateValue).split("T")[0];
 }
 export function formattedValue(formatString, value) {
+  if (!value) return "";
   return format(formatString, value);
 }
-export function isDateValid(date) {
-  return date && date.toString() !== "Invalid Date";
-}
 function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
   if (formatString.includes("d")) {
     return formatString.length === valueString.length && isMatch(fullFormat.join("."), fullValue.join(".")) // need to check day value with month value
@@ -24,7 +27,6 @@ function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
 
   return formatString.length === valueString.length && isMatch(formatString, valueString);
 }
-const THRESHOLD_FOR_ADDITIONAL_YEARS = 69;
 export function additionalYears(formatString, value) {
   if (formatString.split("y").length - 1 !== 2) {
     return [formatString, value];
@@ -108,14 +110,26 @@ export function findMatchedFormatAndValue(valueString, formats) {
 export function parseISODate(value) {
   return parseISO(value);
 }
+function isValidISODate(dateString) {
+  return parseISODate(dateString).toString() !== "Invalid Date";
+}
+export function checkISOFormatAndLength(value) {
+  if (value.length !== DATE_STRING_LENGTH || !isValidISODate(value)) {
+    return false;
+  }
+  const array = value.split("-");
+  return array.length === 3 && array[0].length === 4 && array[1].length === 2 && array[2].length === 2;
+}
 
 /**
  * Returns the disabled array of days specified by props maxDate and minDate
  */
-export function getDisabledDays(minDate, maxDate) {
+export function getDisabledDays() {
+  let minDate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  let maxDate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
   const days = [];
   if (!minDate && !maxDate) {
-    return null;
+    return undefined;
   }
   if (checkISOFormatAndLength(minDate)) {
     days.push({
@@ -128,14 +142,4 @@ export function getDisabledDays(minDate, maxDate) {
     });
   }
   return days;
-}
-export function checkISOFormatAndLength(value) {
-  if (!value || value.length !== 10 || !isValidISODate(value)) {
-    return false;
-  }
-  const array = value.split("-");
-  return array.length === 3 && array[0].length === 4 && array[1].length === 2 && array[2].length === 2;
-}
-function isValidISODate(dateString) {
-  return parseISODate(dateString).toString() !== "Invalid Date";
 }