@dxc-technology/halstack-react 0.0.0-301f60b → 0.0.0-335f028

package/checkbox/types.d.ts

@@ -6,6 +6,10 @@ declare type Margin = {
     right?: Space;
 };
 declare type Props = {
+    /**
+     * Initial state of the checkbox, only when it is uncontrolled.
+     */
+    defaultChecked?: boolean;
     /**
      * If true, the component is checked. If undefined the component will be
      * uncontrolled and the value will be managed internally by the component.
@@ -33,14 +37,14 @@ declare type Props = {
      */
     disabled?: boolean;
     /**
-     * If true, the checkbox will change its appearence, showing that the value is required.
+     * If true, the component will display '(Optional)' next to the label.
      */
-    required?: boolean;
+    optional?: boolean;
     /**
      * This function will be called when the user clicks the checkbox.
      * The new value will be passed as a parameter.
      */
-    onChange?: (val: boolean) => void;
+    onChange?: (value: boolean) => void;
     /**
      * Size of the margin to be applied to the component
      * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').

package/common/variables.js

@@ -712,7 +712,7 @@ var componentTokens = {
   link: {
     fontColor: globalTokens.hal_blue_s_35,
     fontFamily: globalTokens.inherit,
-    fontSize: globalTokens.type_scale_root,
+    fontSize: globalTokens.inherit,
     fontStyle: globalTokens.type_normal,
     fontWeight: globalTokens.type_regular,
     iconSize: "16px",
@@ -1330,12 +1330,11 @@ var spaces = {
 };
 exports.spaces = spaces;
 var responsiveSizes = {
-  mobileSmall: "320",
-  mobileMedium: "375",
-  mobileLarge: "425",
-  tablet: "768",
-  laptop: "1024",
-  desktop: "1440"
+  xsmall: "20",
+  small: "30",
+  medium: "45",
+  large: "66",
+  xlarge: "90"
 };
 exports.responsiveSizes = responsiveSizes;
 var typeface = {

package/date-input/DateInput.js

@@ -11,6 +11,8 @@ exports["default"] = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -23,9 +25,9 @@ var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/Click
 
 var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
 
-var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
+var _dayjs2 = _interopRequireDefault(require("@date-io/dayjs"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -39,34 +41,37 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var getValueForPicker = function getValueForPicker(value, format) {
+  return (0, _dayjs["default"])(value, format.toUpperCase(), true).format();
+};
+
 var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
+      name = _ref.name,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       value = _ref.value,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
       helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
-      _ref$clearable = _ref.clearable,
-      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$optional = _ref.optional,
-      optional = _ref$optional === void 0 ? false : _ref$optional,
+      clearable = _ref.clearable,
+      disabled = _ref.disabled,
+      optional = _ref.optional,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
       error = _ref.error,
-      _ref$autocomplete = _ref.autocomplete,
-      autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
+      autocomplete = _ref.autocomplete,
       margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+      size = _ref.size,
+      tabIndex = _ref.tabIndex;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(defaultValue),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       innerValue = _useState2[0],
       setInnerValue = _useState2[1];
@@ -95,12 +100,13 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
-    var newValue = (0, _moment["default"])(newDate).format(format.toUpperCase());
+    var newValue = (0, _dayjs["default"])(newDate).format(format.toUpperCase());
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange({
+    newDate !== null && newDate !== void 0 && newDate.toJSON() ? onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      error: null,
-      date: newDate !== null && newDate !== void 0 && newDate.toJSON() ? newDate : null
+      date: newDate
+    }) : onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: newValue
     });
   };
 
@@ -108,29 +114,33 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     var newValue = _ref2.value,
         inputError = _ref2.error;
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
-    var momentDate = (0, _moment["default"])(newValue, format.toUpperCase(), true);
-    var invalidDateMessage = newValue !== "" && !momentDate.isValid() ? "Invalid date." : null;
-    onChange === null || onChange === void 0 ? void 0 : onChange({
+    var dayjsDate = (0, _dayjs["default"])(newValue, format.toUpperCase(), true);
+    var invalidDateMessage = newValue !== "" && !dayjsDate.isValid() && "Invalid date.";
+    var callbackParams = inputError || invalidDateMessage ? {
       value: newValue,
-      error: inputError || invalidDateMessage,
-      date: momentDate.isValid() ? momentDate.toDate() : null
-    });
+      error: inputError || invalidDateMessage
+    } : {
+      value: newValue
+    };
+    dayjsDate.isValid() ? onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, callbackParams), {}, {
+      date: dayjsDate.toDate()
+    })) : onChange === null || onChange === void 0 ? void 0 : onChange(callbackParams);
   };
 
   var handleIOnBlur = function handleIOnBlur(_ref3) {
     var value = _ref3.value,
         inputError = _ref3.error;
-    var momentDate = (0, _moment["default"])(value, format.toUpperCase(), true);
-    var invalidDateMessage = value !== "" && !momentDate.isValid() ? "Invalid date." : null;
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+    var dayjsDate = (0, _dayjs["default"])(value, format.toUpperCase(), true);
+    var invalidDateMessage = value !== "" && !dayjsDate.isValid() && "Invalid date.";
+    var callbackParams = inputError || invalidDateMessage ? {
       value: value,
-      error: inputError || invalidDateMessage,
-      date: momentDate.isValid() ? momentDate.toDate() : null
-    });
-  };
-
-  var getValueForPicker = function getValueForPicker() {
-    return (0, _moment["default"])(value !== null && value !== void 0 ? value : innerValue, format.toUpperCase(), true).format();
+      error: inputError || invalidDateMessage
+    } : {
+      value: value
+    };
+    dayjsDate.isValid() ? onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread({}, callbackParams), {}, {
+      date: dayjsDate.toDate()
+    })) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParams);
   };
 
   var openCalendar = function openCalendar() {
@@ -300,10 +310,11 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, /*#__PURE__*/_react["default"].createElement(_core.MuiThemeProvider, {
     theme: dateTheme
   }, /*#__PURE__*/_react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
-    utils: _dateFns["default"]
+    utils: _dayjs2["default"]
   }, /*#__PURE__*/_react["default"].createElement(StyledDPicker, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
+    defaultValue: defaultValue,
     value: value !== null && value !== void 0 ? value : innerValue,
     helperText: helperText,
     placeholder: placeholder ? format.toUpperCase() : null,
@@ -343,7 +354,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     "aria-modal": "true"
   }, /*#__PURE__*/_react["default"].createElement(_pickers.DatePicker, {
     variant: "static",
-    value: getValueForPicker(),
+    value: getValueForPicker(value !== null && value !== void 0 ? value : innerValue, format),
     onChange: function onChange(date) {
       return handleCalendarOnClick(date);
     },

package/date-input/DateInput.stories.tsx

@@ -19,7 +19,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcDateInput label="Disabled date input" helperText="Help message" value="06-04-2027" clearable disabled />
+      <DxcDateInput label="Disabled date input" helperText="Help message" defaultValue="06-04-2027" clearable disabled />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Invalid" theme="light" level={4} />
@@ -27,7 +27,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Relation between icons" theme="light" level={4} />
-      <DxcDateInput label="Error date input" error="Error message." value="06-04-2027" clearable />
+      <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2027" clearable />
     </ExampleContainer>
     <BackgroundColorProvider color="#333333">
       <DarkContainer>
@@ -38,7 +38,7 @@ export const Chromatic = () => (
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Disabled" theme="dark" level={4} />
-          <DxcDateInput label="Disabled Date input" helperText="Help message" value="06-04-2027" clearable disabled />
+          <DxcDateInput label="Disabled Date input" helperText="Help message" defaultValue="06-04-2027" clearable disabled />
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Invalid" theme="dark" level={4} />
@@ -46,7 +46,7 @@ export const Chromatic = () => (
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Relation between icons" theme="dark" level={4} />
-          <DxcDateInput label="Error date input" value="06-04-2027" error="Error message." clearable />
+          <DxcDateInput label="Error date input" defaultValue="06-04-2027" error="Error message." clearable />
         </ExampleContainer>
       </DarkContainer>
     </BackgroundColorProvider>
@@ -98,7 +98,7 @@ export const Chromatic = () => (
 const DatePicker = () => (
   <ExampleContainer expanded>
     <Title title="Show date input" theme="light" level={4} />
-    <DxcDateInput label="Date input" value="10-06-2023" />
+    <DxcDateInput label="Date input" defaultValue="10-06-2023" />
   </ExampleContainer>
 );
 
@@ -113,7 +113,7 @@ ShowDatePicker.play = async ({ canvasElement }) => {
 const YearPicker = () => (
   <ExampleContainer expanded>
     <Title title="Show date input" theme="light" level={4} />
-    <DxcDateInput label="Date input" value="10-06-2023" />
+    <DxcDateInput label="Date input" defaultValue="10-06-2023" />
   </ExampleContainer>
 );
 
@@ -126,7 +126,7 @@ ShowYearPicker.play = async () => {
 const YearPickerFocus = () => (
   <ExampleContainer expanded>
     <Title title="Show date input" theme="light" level={4} />
-    <DxcDateInput label="Date input" value="10-06-2023" />
+    <DxcDateInput label="Date input" defaultValue="10-06-2023" />
   </ExampleContainer>
 );
 

package/date-input/DateInput.test.js

@@ -37,7 +37,7 @@ describe("DateInput component tests", function () {
 
     expect(input.value).toBe("");
   });
-  test("Renders with personalized error", function () {
+  test("Renders with custom error", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       error: "Personalized error."
     })),
@@ -45,6 +45,29 @@ describe("DateInput component tests", function () {
 
     expect(getByText("Personalized error.")).toBeTruthy();
   });
+  test("Renders with an initial value when it is uncontrolled", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "Default label",
+      placeholder: "Placeholder",
+      defaultValue: "21-10-2015"
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    var input = getByRole("textbox");
+    var calendarAction = getByRole("button");
+    var d = new Date(2015, 9, 21);
+    var options = {
+      weekday: "short",
+      month: "short",
+      day: "numeric"
+    };
+    expect(input.value).toBe("21-10-2015");
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+  });
   test("Renders with correct format: user typed date but it's invalid, onBlur error", function () {
     var onBlur = jest.fn(function (_ref) {
       var value = _ref.value,
@@ -53,12 +76,12 @@ describe("DateInput component tests", function () {
       expect(error).toBe("Invalid date.");
     });
 
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "With format MM/dd/yyyy",
       format: "MM/dd/yyyy",
       onBlur: onBlur
     })),
-        getByRole = _render3.getByRole;
+        getByRole = _render4.getByRole;
 
     var input = getByRole("textbox");
 
@@ -69,12 +92,12 @@ describe("DateInput component tests", function () {
   test("Renders with correct format: user typed date but it's invalid, onChange error", function () {
     var onChange = jest.fn();
 
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "With format MM/dd/yyyy",
       format: "MM/dd/yyyy",
       onChange: onChange
     })),
-        getByRole = _render4.getByRole;
+        getByRole = _render5.getByRole;
 
     var input = getByRole("textbox");
 
@@ -83,14 +106,13 @@ describe("DateInput component tests", function () {
     expect(onChange).toHaveBeenCalledTimes(10);
     expect(onChange).toHaveBeenCalledWith({
       value: "10/90/2010",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
   });
   test("Calendar renders with correct date: today's date", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByText = _render5.getByText,
-        getByRole = _render5.getByRole;
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
 
     var calendarAction = getByRole("button");
     var d = new Date();
@@ -105,11 +127,11 @@ describe("DateInput component tests", function () {
     expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
   });
   test("Calendar renders with correct date: value prop", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       value: "20-10-2019"
     })),
-        getByText = _render6.getByText,
-        getByRole = _render6.getByRole;
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
 
     var calendarAction = getByRole("button");
     var d = new Date(2019, 9, 20);
@@ -124,9 +146,9 @@ describe("DateInput component tests", function () {
     expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
   });
   test("Calendar renders with correct date: user typed value", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByText = _render7.getByText,
-        getByRole = _render7.getByRole;
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render8.getByText,
+        getByRole = _render8.getByRole;
 
     var calendarAction = getByRole("button");
     var d = new Date(2010, 0, 1);
@@ -146,11 +168,11 @@ describe("DateInput component tests", function () {
   test("Calendar renders with correct date: invalid date, renders with today's date", function () {
     var onBlur = jest.fn();
 
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur
     })),
-        getByText = _render8.getByText,
-        getByRole = _render8.getByRole;
+        getByText = _render9.getByText,
+        getByRole = _render9.getByRole;
 
     var calendarAction = getByRole("button");
     var d = new Date();
@@ -168,8 +190,7 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "01-01-xxxx",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].click(calendarAction);
@@ -177,12 +198,12 @@ describe("DateInput component tests", function () {
     expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
   });
   test("Selecting a date from the calendar with an specific format", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "With format M-dd-yyyy",
       format: "M-dd-yyyy"
     })),
-        getByText = _render9.getByText,
-        getByRole = _render9.getByRole;
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole;
 
     var input = getByRole("textbox");
     var calendarAction = getByRole("button");
@@ -212,8 +233,8 @@ describe("DateInput component tests", function () {
     expect(input.value).toBe("".concat(d.getMonth() + 1, "-10-").concat(d.getFullYear()));
   });
   test("Selecting a date from the calendar (using keyboard presses)", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByRole = _render10.getByRole;
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByRole = _render11.getByRole;
 
     var calendarAction = getByRole("button");
     var input = getByRole("textbox");
@@ -263,11 +284,11 @@ describe("DateInput component tests", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render11.getByRole;
+        getByRole = _render12.getByRole;
 
     var input = getByRole("textbox");
     var d = new Date(2011, 9, 10);
@@ -278,7 +299,6 @@ describe("DateInput component tests", function () {
     expect(onChange).toHaveBeenCalledTimes(10);
     expect(onChange).toHaveBeenCalledWith({
       value: "10-10-2011",
-      error: null,
       date: d
     });
 
@@ -287,7 +307,6 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "10-10-2011",
-      error: null,
       date: d
     });
   });
@@ -295,11 +314,11 @@ describe("DateInput component tests", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render12.getByRole;
+        getByRole = _render13.getByRole;
 
     var input = getByRole("textbox");
 
@@ -309,8 +328,7 @@ describe("DateInput component tests", function () {
     expect(onChange).toHaveBeenCalledTimes(6);
     expect(onChange).toHaveBeenCalledWith({
       value: "10-10-",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _react2.fireEvent.blur(input);
@@ -318,17 +336,16 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "10-10-",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
   });
   test("onBlur function removes the error when it is fixed", function () {
     var onBlur = jest.fn();
 
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur
     })),
-        getByRole = _render13.getByRole;
+        getByRole = _render14.getByRole;
 
     var input = getByRole("textbox");
     var d = new Date(2002, 1, 20);
@@ -342,8 +359,7 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].clear(input);
@@ -357,18 +373,17 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "20-02-2002",
-      error: null,
       date: d
     });
   });
   test("onBlur function removes the error when the input is empty", function () {
     var onBlur = jest.fn();
 
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur,
       optional: true
     })),
-        getByRole = _render14.getByRole;
+        getByRole = _render15.getByRole;
 
     var input = getByRole("textbox");
 
@@ -381,8 +396,7 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].clear(input);
@@ -391,20 +405,18 @@ describe("DateInput component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: null,
-      date: null
+      value: ""
     });
   });
   test("onBlur & onChange functions error: required field (not optional)", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur,
       onChange: onChange
     })),
-        getByRole = _render15.getByRole;
+        getByRole = _render16.getByRole;
 
     var date = getByRole("textbox");
 
@@ -419,22 +431,20 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "",
-      error: "This field is required. Please, enter a value.",
-      date: null
+      error: "This field is required. Please, enter a value."
     });
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "",
-      error: "This field is required. Please, enter a value.",
-      date: null
+      error: "This field is required. Please, enter a value."
     });
   });
   test("Disabled date input (calendar action must be shown but not clickable)", function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       disabled: true
     })),
-        getByRole = _render16.getByRole,
-        queryByText = _render16.queryByText;
+        getByRole = _render17.getByRole,
+        queryByText = _render17.queryByText;
 
     var calendarAction = getByRole("button");
     var d = new Date();
@@ -450,10 +460,10 @@ describe("DateInput component tests", function () {
     expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
   });
   test("Input has correct accesibility attributes", function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "Date input label"
     })),
-        getByRole = _render17.getByRole;
+        getByRole = _render18.getByRole;
 
     var input = getByRole("textbox");
     expect(input.getAttribute("aria-autocomplete")).toBeNull();