carbon-react 103.2.0 → 104.2.0

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

@@ -1,35 +1,43 @@
 import * as React from "react";
+import { DayPickerProps } from "react-day-picker";
 import { TextboxProps } from "../textbox/textbox";
 
-export interface DateInputProps extends TextboxProps {
-  /** 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;
+export interface DateInputProps
+  extends Omit<
+    TextboxProps,
+    | "value"
+    | "formattedValue"
+    | "rawValue"
+    | "onChange"
+    | "onMouseDown"
+    | "onChangeDeferred"
+    | "deferTimeout"
+    | "children"
+    | "leftChildren"
+    | "placeholder"
+    | "iconOnClick"
+    | "iconOnMouseDown"
+    | "enforceCharacterLimit"
+    | "characterLimit"
+    | "warnOverLimit"
+    | "iconTabIndex"
+  > {
   /** Boolean to allow the input to have an empty value */
   allowEmptyValue?: boolean;
-  /** Automatically focus on component mount */
-  autoFocus?: boolean;
   /** 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;
-  /** Name of the input */
-  name?: string;
-  /** Specify a callback triggered on blur */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Specify a callback triggered on focus */
-  onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** The current date YYYY-MM-DD */
-  value?: string;
-  /** Overrides the default tooltip position */
-  tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Specify a callback triggered on change */
+  onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+  /** The current date string */
+  value: string;
+  /** Pass any props that match the DayPickerProps interface to override default behaviors */
+  pickerProps?: DayPickerProps;
 }
 
-declare class DateInput extends React.Component<DateInputProps> {}
+declare function DateInput(props: DateInputProps): JSX.Element;
 
 export default DateInput;

package/lib/components/date/date.style.js

@@ -29,14 +29,15 @@ const StyledDateInput = _styledComponents.default.div`
     flex: none;
     width: ${({
   size
-}) => size ? datePickerWidth[size] : "135px"};
+}) => datePickerWidth[size]};
   }
 `;
 StyledDateInput.propTypes = {
   size: _propTypes.default.oneOf(["small", "medium", "large"])
 };
 StyledDateInput.defaultProps = {
-  theme: _base.default
+  theme: _base.default,
+  size: "medium"
 };
 var _default = StyledDateInput;
 exports.default = _default;

package/lib/components/date/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BaseDateInput", {
-  enumerable: true,
-  get: function () {
-    return _date.BaseDateInput;
-  }
-});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -16,8 +10,6 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-var _date = _interopRequireWildcard(require("./date.component"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _date = _interopRequireDefault(require("./date.component"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/date-range/date-range-context.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+interface DateInputRefMap {
+  isBlurBlocked: { current: boolean };
+  setOpen: null | ((open: boolean) => void);
+}
+
+export interface DateRangeContextProps {
+  inputRefMap: {
+    start: DateInputRefMap;
+    end: DateInputRefMap;
+  };
+  setInputRefMap: (newState: DateInputRefMap) => void;
+}
+
+declare const DateRangeContext: React.Context<DateRangeContextProps>;
+export default DateRangeContext;

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

@@ -1,7 +1,6 @@
 export default DateRange;
-declare function DateRange({ defaultValue, endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, ...rest }: {
+declare function DateRange({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, ...rest }: {
     [x: string]: any;
-    defaultValue: any;
     endDateProps?: {} | undefined;
     id: any;
     labelsInline: any;
@@ -16,10 +15,9 @@ declare function DateRange({ defaultValue, endDateProps, id, labelsInline, name,
 declare namespace DateRange {
     namespace propTypes {
         const endLabel: PropTypes.Requireable<string>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        const onChange: PropTypes.Validator<(...args: any[]) => any>;
         const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        const value: PropTypes.Requireable<(string | null | undefined)[]>;
-        const defaultValue: PropTypes.Requireable<(string | null | undefined)[]>;
+        const value: PropTypes.Validator<(string | null | undefined)[]>;
         const startError: PropTypes.Requireable<string | boolean>;
         const startWarning: PropTypes.Requireable<string | boolean>;
         const startInfo: PropTypes.Requireable<string | boolean>;

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

@@ -11,17 +11,23 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
 
+var _utils = require("../date/__internal__/utils");
+
 var _date = _interopRequireDefault(require("../date"));
 
-var _utils = require("../../style/utils");
+var _utils2 = require("../../style/utils");
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
 var _dateRange = _interopRequireDefault(require("./date-range.style"));
 
-var _date2 = _interopRequireDefault(require("../../__internal__/date"));
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
+var _dateFormats = _interopRequireDefault(require("../date/__internal__/date-formats"));
 
-var _i18nContext = _interopRequireDefault(require("../../__internal__/i18n-context"));
+var _dateRange2 = _interopRequireDefault(require("./date-range.context"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,10 +37,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 marginPropTypes = (0, _utils2.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const DateRange = ({
-  defaultValue,
   endDateProps = {},
   id,
   labelsInline,
@@ -47,84 +52,61 @@ const DateRange = ({
   value,
   ...rest
 }) => {
+  const l = (0, _useLocale.default)();
+  const {
+    dateFnsLocale
+  } = l.date;
   const {
-    locale,
-    date
-  } = (0, _react.useContext)(_i18nContext.default);
-  const format = date.formats.javascript();
-  const formats = date.formats.inputs();
-  const localeData = (0, _react.useMemo)(() => ({
-    locale: locale(),
-    formats,
     format
-  }), [format, formats, locale]);
+  } = (0, _react.useMemo)(() => (0, _dateFormats.default)(dateFnsLocale()), [dateFnsLocale]);
   const inlineLabelWidth = 40;
+  const [lastChangedDate, setLastChangedDate] = (0, _react.useState)("");
+  const computedValue = (0, _react.useCallback)(valueString => {
+    if ((0, _utils.checkISOFormatAndLength)(valueString)) {
+      return (0, _utils.formattedValue)(format, (0, _utils.parseISODate)(valueString));
+    }
 
-  const today = _date2.default.todayFormatted();
-
-  const isControlled = value !== undefined;
-  const startDateInputRef = (0, _react.useRef)();
-  const endDateInputRef = (0, _react.useRef)();
-  /** The startDate value */
-
+    return valueString;
+  }, [format]);
   const getStartDate = (0, _react.useCallback)(() => {
     const {
       value: startValue
     } = startDateProps;
-    const computedValue = isControlled ? value : defaultValue;
-    return startValue || computedValue ? computedValue[0] : undefined;
-  }, [defaultValue, isControlled, startDateProps, value]);
-  /** The endDate value */
-
+    return computedValue(startValue || value[0]);
+  }, [startDateProps, value, computedValue]);
   const getEndDate = (0, _react.useCallback)(() => {
     const {
       value: endValue
     } = endDateProps;
-    const computedValue = isControlled ? value : defaultValue;
-    return endValue || computedValue ? computedValue[1] : undefined;
-  }, [defaultValue, isControlled, endDateProps, value]);
+    return computedValue(endValue || value[1]);
+  }, [endDateProps, value, computedValue]);
+  const [inputRefMap, setInputRefMap] = (0, _react.useState)({
+    start: {
+      isBlurBlocked: {
+        current: false
+      },
+      setOpen: null
+    },
+    end: {
+      isBlurBlocked: {
+        current: false
+      },
+      setOpen: null
+    }
+  });
+
+  function isEmptyValue(allowEmpty, inputValue) {
+    return allowEmpty && !inputValue.length;
+  }
+
   const [startDateValue, setStartDateValue] = (0, _react.useState)({
-    formattedValue: _date2.default.formatDateToCurrentLocale({
-      value: getStartDate(),
-      ...localeData
-    }),
-    rawValue: _date2.default.formatValue({
-      value: getStartDate() || (startDateProps.allowEmptyValue ? "" : today),
-      ...localeData
-    })
+    formattedValue: getStartDate(),
+    rawValue: isEmptyValue(startDateProps.allowEmptyValue, getStartDate()) ? "" : (0, _utils.formatToISO)(format, getStartDate())
   });
   const [endDateValue, setEndDateValue] = (0, _react.useState)({
-    formattedValue: _date2.default.formatDateToCurrentLocale({
-      value: getEndDate(),
-      ...localeData
-    }),
-    rawValue: _date2.default.formatValue({
-      value: getEndDate() || (endDateProps.allowEmptyValue ? "" : today),
-      ...localeData
-    })
+    formattedValue: getEndDate(),
+    rawValue: isEmptyValue(endDateProps.allowEmptyValue, getEndDate()) ? "" : (0, _utils.formatToISO)(format, getEndDate())
   });
-  const updateValues = (0, _react.useCallback)(() => {
-    setStartDateValue({
-      formattedValue: _date2.default.formatDateToCurrentLocale({
-        value: getStartDate(),
-        ...localeData
-      }),
-      rawValue: _date2.default.formatValue({
-        value: getStartDate() || (startDateProps.allowEmptyValue ? "" : today),
-        ...localeData
-      })
-    });
-    setEndDateValue({
-      formattedValue: _date2.default.formatDateToCurrentLocale({
-        value: getEndDate(),
-        ...localeData
-      }),
-      rawValue: _date2.default.formatValue({
-        value: getEndDate() || (endDateProps.allowEmptyValue ? "" : today),
-        ...localeData
-      })
-    });
-  }, [getEndDate, getStartDate, endDateProps, startDateProps, localeData, today]);
 
   function usePrevious(arg) {
     const ref = (0, _react.useRef)();
@@ -136,16 +118,28 @@ const DateRange = ({
 
   const previousValue = usePrevious(value);
   (0, _react.useEffect)(() => {
+    const updateValues = () => {
+      setStartDateValue({
+        formattedValue: getStartDate(),
+        rawValue: isEmptyValue(startDateProps.allowEmptyValue, getStartDate()) ? "" : (0, _utils.formatToISO)(format, getStartDate())
+      });
+      setEndDateValue({
+        formattedValue: getEndDate(),
+        rawValue: isEmptyValue(endDateProps.allowEmptyValue, getEndDate()) ? "" : (0, _utils.formatToISO)(format, getEndDate())
+      });
+    };
+
     const hasPreviousValues = previousValue === null || previousValue === void 0 ? void 0 : previousValue.length;
-    const hasUpdated = isControlled && hasPreviousValues && (value[0] !== previousValue[0] || value[1] !== previousValue[1]);
+    const hasUpdated = hasPreviousValues && (value[0] !== previousValue[0] || value[1] !== previousValue[1]);
 
     if (hasUpdated) {
       updateValues();
     }
-  }, [value, previousValue, updateValues, isControlled]);
+  }, [value, previousValue, endDateProps.allowEmptyValue, format, getEndDate, getStartDate, startDateProps.allowEmptyValue]);
   const buildCustomEvent = (0, _react.useCallback)((changedDate, newValue) => {
-    const startValue = changedDate === "startDate" && newValue ? newValue : startDateValue;
-    const endValue = changedDate === "endDate" && newValue ? newValue : endDateValue;
+    const startValue = changedDate === "start" && newValue ? newValue : startDateValue;
+    const endValue = changedDate === "end" && newValue ? newValue : endDateValue;
+    setLastChangedDate(changedDate);
     return {
       target: { ...(name && {
           name
@@ -159,7 +153,7 @@ const DateRange = ({
   }, [endDateValue, id, name, startDateValue]);
 
   const handleOnChange = (changedDate, ev) => {
-    if (changedDate === "startDate") {
+    if (changedDate === "start") {
       setStartDateValue({ ...ev.target.value
       });
     } else {
@@ -167,98 +161,113 @@ const DateRange = ({
       });
     }
 
-    if (onChange) {
-      const event = buildCustomEvent(changedDate, ev.target.value);
-      onChange(event);
-    }
+    const event = buildCustomEvent(changedDate, ev.target.value);
+    onChange(event);
   };
 
   const startDateOnChange = ev => {
-    handleOnChange("startDate", ev);
+    handleOnChange("start", ev);
   };
 
   const endDateOnChange = ev => {
-    handleOnChange("endDate", ev);
+    handleOnChange("end", ev);
   };
 
-  const isBlurBlocked = () => {
-    var _startDateInputRef$cu, _startDateInputRef$cu2, _endDateInputRef$curr, _endDateInputRef$curr2;
-
-    const startBlocked = (startDateInputRef === null || startDateInputRef === void 0 ? void 0 : (_startDateInputRef$cu = startDateInputRef.current) === null || _startDateInputRef$cu === void 0 ? void 0 : _startDateInputRef$cu.isBlurBlocked) || (startDateInputRef === null || startDateInputRef === void 0 ? void 0 : (_startDateInputRef$cu2 = startDateInputRef.current) === null || _startDateInputRef$cu2 === void 0 ? void 0 : _startDateInputRef$cu2.inputFocusedViaPicker);
-    const endBlocked = (endDateInputRef === null || endDateInputRef === void 0 ? void 0 : (_endDateInputRef$curr = endDateInputRef.current) === null || _endDateInputRef$curr === void 0 ? void 0 : _endDateInputRef$curr.isBlurBlocked) || (endDateInputRef === null || endDateInputRef === void 0 ? void 0 : (_endDateInputRef$curr2 = endDateInputRef.current) === null || _endDateInputRef$curr2 === void 0 ? void 0 : _endDateInputRef$curr2.inputFocusedViaPicker);
-    return startBlocked || endBlocked;
+  const updateInputMap = newState => {
+    setInputRefMap(prev => {
+      return { ...prev,
+        ...newState
+      };
+    });
   };
 
-  const handleOnBlur = () => {
+  const isBlurBlocked = () => inputRefMap.start.isBlurBlocked.current || inputRefMap.end.isBlurBlocked.current;
+
+  const handleOnBlur = ev => {
     if (isBlurBlocked()) {
       return;
     }
 
     if (onBlur) {
-      const event = buildCustomEvent();
+      const event = buildCustomEvent(lastChangedDate, ev.target.value);
       onBlur(event);
     }
   };
 
-  const blockBlur = blockId => {
-    if (blockId === "start") {
-      startDateInputRef.current.isBlurBlocked = true;
-      startDateInputRef.current.inputFocusedViaPicker = true;
-    } else {
-      endDateInputRef.current.isBlurBlocked = true;
-      endDateInputRef.current.inputFocusedViaPicker = true;
-    }
+  const closePicker = activeInput => {
+    inputRefMap[activeInput].setOpen(false);
+    inputRefMap[activeInput].isBlurBlocked.current = false;
   };
 
-  const focusStart = () => {
-    blockBlur("start");
-    endDateInputRef.current.closeDatePicker();
+  const handleOnKeyDown = (ev, activeInput) => {
+    if (_events.default.isTabKey(ev) && _events.default.isShiftKey(ev)) {
+      if (activeInput === "start") {
+        inputRefMap.start.isBlurBlocked.current = false;
+      } else {
+        inputRefMap.start.isBlurBlocked.current = true;
+      }
+    } else if (_events.default.isTabKey(ev)) {
+      if (activeInput === "end") {
+        inputRefMap.end.isBlurBlocked.current = false;
+      } else {
+        inputRefMap.end.isBlurBlocked.current = true;
+      }
+    }
   };
 
-  const focusEnd = () => {
-    blockBlur("end");
-    startDateInputRef.current.closeDatePicker();
+  const handleFocus = inputName => {
+    closePicker(inputName);
+    setLastChangedDate(inputName === "start" ? "end" : "start");
   };
 
   const dateProps = propsKey => {
     const props = propsKey === "start" ? startDateProps : endDateProps;
     const {
-      rawValue
+      formattedValue: inputValue
     } = propsKey === "start" ? startDateValue : endDateValue;
     const onChangeCallback = propsKey === "start" ? startDateOnChange : endDateOnChange;
     return {
       label: rest[`${propsKey}Label`],
       labelInline: labelsInline,
-      value: rawValue,
+      value: inputValue,
       error: rest[`${propsKey}Error`],
       warning: rest[`${propsKey}Warning`],
       info: rest[`${propsKey}Info`],
       validationOnLabel,
       onBlur: handleOnBlur,
       onChange: onChangeCallback,
+      onKeyDown: ev => handleOnKeyDown(ev, propsKey),
       ...props
     };
   };
 
   return /*#__PURE__*/_react.default.createElement(_dateRange.default, _extends({}, (0, _tags.default)("date-range", rest), {
     labelsInline: labelsInline
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("start"), {
-    onFocus: focusStart,
+  }, (0, _utils2.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_dateRange2.default.Provider, {
+    value: {
+      inputRefMap,
+      setInputRefMap: updateInputMap
+    }
+  }, /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("start"), {
+    onFocus: () => handleFocus("end"),
     "data-element": "start-date",
-    ref: startDateInputRef,
     labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
     ,
     tooltipPosition: tooltipPosition
   })), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("end"), {
-    onFocus: focusEnd,
+    onFocus: () => handleFocus("start"),
     "data-element": "end-date",
-    ref: endDateInputRef,
     labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
     ,
     tooltipPosition: tooltipPosition
-  })));
+  }))));
 };
 
+const dateInputPropTypes = { // eslint-disable-next-line react/forbid-foreign-prop-types
+  ..._date.default.propTypes,
+  onChange: _propTypes.default.func,
+  value: _propTypes.default.string
+};
 DateRange.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
@@ -269,16 +278,13 @@ DateRange.propTypes = {
   endLabel: _propTypes.default.string,
 
   /** Custom callback - receives array of startDate and endDate */
-  onChange: _propTypes.default.func,
+  onChange: _propTypes.default.func.isRequired,
 
   /** Custom callback - receives array of startDate and endDate */
   onBlur: _propTypes.default.func,
 
   /** An array containing the value of startDate and endDate */
-  value: _propTypes.default.arrayOf(_propTypes.default.string),
-
-  /* The default value of the input if it's meant to be used as an uncontrolled component */
-  defaultValue: _propTypes.default.arrayOf(_propTypes.default.string),
+  value: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
 
   /** Indicate that error has occurred on start date
   Pass string to display icon, tooltip and red border
@@ -321,14 +327,12 @@ DateRange.propTypes = {
   /** Display labels inline */
   labelsInline: _propTypes.default.bool,
 
-  /** Props for the child start Date component */
-  startDateProps: _propTypes.default.shape({ ..._date.default.propTypes,
-    value: _propTypes.default.string
+  /** Props for the child start Date component. For more information see the Date component's [prop table](https://carbon.sage.com/iframe.html?id=date-input--default-story&viewMode=docs#props) */
+  startDateProps: _propTypes.default.shape({ ...dateInputPropTypes
   }),
 
-  /** Props for the child end Date component */
-  endDateProps: _propTypes.default.shape({ ..._date.default.propTypes,
-    value: _propTypes.default.string
+  /** Props for the child end Date component. For more information see the Date component's [prop table](https://carbon.sage.com/iframe.html?id=date-input--default-story&viewMode=docs#props) */
+  endDateProps: _propTypes.default.shape({ ...dateInputPropTypes
   }),
 
   /** An optional string prop to provide a name to the component */

package/lib/components/date-range/date-range.context.d.ts

@@ -0,0 +1,3 @@
+declare var _default: React.Context<{}>;
+export default _default;
+import React from "react";

package/lib/components/date-range/date-range.context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = /*#__PURE__*/_react.default.createContext({});
+
+exports.default = _default;

package/lib/components/date-range/date-range.d.ts

@@ -2,15 +2,15 @@ import * as React from "react";
 import { MarginProps } from "styled-system";
 import { DateInputProps } from "../date/date";
 
-export interface DateRangeChangeEvent {
+interface DateRangeChangeEvent {
   target: {
     value: [
       {
-        formattedValue: number;
+        formattedValue: string;
         rawValue: string;
       },
       {
-        formattedValue: number;
+        formattedValue: string;
         rawValue: string;
       }
     ];
@@ -18,8 +18,6 @@ export interface DateRangeChangeEvent {
 }
 
 export interface DateRangeProps extends MarginProps {
-  /* The default value of the input if it's meant to be used as an uncontrolled component */
-  defaultValue?: string[];
   /** Props for the child end Date component */
   endDateProps?: DateInputProps;
   /** Optional label for endDate field */
@@ -49,7 +47,7 @@ export interface DateRangeProps extends MarginProps {
   /** An optional string prop to provide a name to the component */
   name?: string;
   /** Specify a callback triggered on change */
-  onChange?: (ev: DateRangeChangeEvent) => void;
+  onChange: (ev: DateRangeChangeEvent) => void;
   /** Specify a callback triggered on blur */
   onBlur?: (ev: DateRangeChangeEvent) => void;
   /** Props for the child start Date component */
@@ -74,7 +72,7 @@ export interface DateRangeProps extends MarginProps {
    */
   startInfo?: boolean | string;
   /** An array containing the value of startDate and endDate */
-  value?: string[];
+  value: string[];
   /** When true, validation icons will be placed on labels instead of being placed on the inputs */
   validationOnLabel?: boolean;
   /** Overrides the default tooltip position */

package/lib/components/date-range/date-range.style.js

@@ -21,6 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const StyledDateRange = _styledComponents.default.div`
   ${_styledSystem.margin}
+
   & ${_date.default} {
     width: auto;
     display: inline-block;

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

@@ -1 +1,2 @@
 export { default } from "./date-range";
+export { default as DateRangeContext } from "./date-range-context";

package/lib/components/i18n-provider/i18n-provider.component.d.ts

@@ -26,10 +26,7 @@ declare namespace I18nProvider {
                 yes: PropTypes.Requireable<(...args: any[]) => any>;
             }>>;
             date: PropTypes.Requireable<PropTypes.InferProps<{
-                formats: PropTypes.Requireable<PropTypes.InferProps<{
-                    inputs: PropTypes.Requireable<(...args: any[]) => any>;
-                    javascript: PropTypes.Requireable<(...args: any[]) => any>;
-                }>>;
+                dateFnsLocale: PropTypes.Requireable<(...args: any[]) => any>;
             }>>;
             errors: PropTypes.Requireable<PropTypes.InferProps<{
                 messages: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -46,10 +46,7 @@ I18nProvider.propTypes = {
       yes: _propTypes.default.func
     }),
     date: _propTypes.default.shape({
-      formats: _propTypes.default.shape({
-        inputs: _propTypes.default.func,
-        javascript: _propTypes.default.func
-      })
+      dateFnsLocale: _propTypes.default.func
     }),
     errors: _propTypes.default.shape({
       messages: _propTypes.default.shape({