@dxc-technology/halstack-react 0.0.0-c680086 → 0.0.0-c702054

package/card/Card.test.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+describe("Card component tests", function () {
+  test("Card renders with correct content", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], null, "test-card")),
+        getByText = _render.getByText;
+
+    expect(getByText("test-card")).toBeTruthy();
+  });
+  test("Card renders with correct href", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      linkHref: "/testPage"
+    }, "test-card")),
+        getByRole = _render2.getByRole;
+
+    var card = getByRole("link");
+    expect(card.getAttribute("href")).toEqual("/testPage");
+  });
+  test("Card renders with correct image", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      imageSrc: "/testImage"
+    }, "test-card")),
+        getByRole = _render3.getByRole;
+
+    var card = getByRole("img");
+    expect(card.getAttribute("src")).toEqual("/testImage");
+  });
+  test("OnClick function is called", function () {
+    var onClick = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      onClick: onClick
+    }, "test-card")),
+        getByText = _render4.getByText;
+
+    var card = getByText("test-card");
+
+    _react2.fireEvent.click(card);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/checkbox/Checkbox.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+describe("Checkbox component tests", function () {
+  test("Checkbox renders with correct text", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Checkbox")).toBeTruthy();
+  });
+  test("Calls correct function on click", function () {
+    var onChange = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      onChange: onChange
+    })),
+        getByText = _render2.getByText;
+
+    _react2.fireEvent.click(getByText("Checkbox"));
+
+    expect(onChange).toHaveBeenCalled();
+  });
+  test("Uncontrolled checkbox", function () {
+    var onChange = jest.fn();
+    var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      onChange: onChange
+    }));
+    var visibleCheckbox = component.getByText("Checkbox");
+    var input = component.getByRole("checkbox");
+    expect(input.checked).toBe(false);
+
+    _react2.fireEvent.click(visibleCheckbox);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(input.checked).toBe(true);
+  });
+  test("Controlled checkbox", function () {
+    var onChange = jest.fn();
+    var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      checked: false,
+      onChange: onChange
+    }));
+    var input = component.getByRole("checkbox");
+    var visibleCheckbox = component.getByText("Checkbox");
+
+    _react2.fireEvent.click(visibleCheckbox);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(input.checked).toBe(false);
+  });
+});

package/chip/Chip.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Chip = _interopRequireDefault(require("./Chip"));
+
+var _invision = _interopRequireDefault(require("../../app/src/images/invision.svg"));
+
+describe("Chip component tests", function () {
+  test("Chip renders with correct text", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+      label: "Chip"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Chip")).toBeTruthy();
+  });
+  test("Calls correct function when clicking on prefix icon", function () {
+    var onClick = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+      label: "Chip",
+      prefixIcon: _invision["default"],
+      onClickPrefix: onClick
+    })),
+        getByText = _render2.getByText,
+        getByRole = _render2.getByRole;
+
+    expect(getByText("Chip")).toBeTruthy();
+
+    _react2.fireEvent.click(getByRole("img"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Calls correct function when clicking on suffix icon", function () {
+    var onClick = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+      label: "Chip",
+      suffixIcon: _invision["default"],
+      onClickSuffix: onClick
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    expect(getByText("Chip")).toBeTruthy();
+
+    _react2.fireEvent.click(getByRole("img"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/common/variables.js

@@ -4,11 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.typeface = exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.componentTokens = void 0;
-
-var _Icons = require("../header/Icons");
-
-var _Icons2 = require("../footer/Icons");
-
 var globalTokens = {
   // Color
   inherit: "inherit",
@@ -394,23 +389,6 @@ var componentTokens = {
     disabledIconColor: globalTokens.hal_grey_l_60,
     focusColor: globalTokens.hal_blue_l_50
   },
-  date: {
-    pickerSelectedDateBackgroundColor: globalTokens.purple,
-    pickerSelectedDateColor: globalTokens.hal_white,
-    pickerBackgroundColor: globalTokens.hal_white,
-    pickerFontColor: globalTokens.hal_black,
-    pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
-    pickerHoverDateFontColor: globalTokens.hal_black,
-    pickerActualDateColor: globalTokens.lightGrey,
-    pickerYearColor: globalTokens.hal_black,
-    pickerMonthColor: globalTokens.hal_black,
-    pickerWeekLabelColor: globalTokens.hal_black,
-    pickerBackgroundColorMonthArrows: globalTokens.transparent,
-    focusColor: globalTokens.hal_blue_l_50,
-    fontFamily: globalTokens.type_sans,
-    pickerHeight: "316px",
-    pickerWidth: "290px"
-  },
   dateInput: {
     pickerFontFamily: globalTokens.type_sans,
     pickerBackgroundColor: globalTokens.hal_white,
@@ -638,65 +616,6 @@ var componentTokens = {
     level5LineHeight: globalTokens.type_leading_normal,
     level5LetterSpacing: globalTokens.type_spacing_wide_01
   },
-  inputText: {
-    fontFamily: globalTokens.type_sans,
-    assistiveTextFontColor: globalTokens.black,
-    assistiveTextFontColorOnDark: globalTokens.white,
-    assistiveTextFontSize: globalTokens.type_scale_01,
-    assistiveTextFontStyle: globalTokens.type_normal,
-    assistiveTextFontWeight: globalTokens.type_regular,
-    disabledColor: globalTokens.lighterBlack,
-    disabledColorOnDark: "#575757",
-    errorColor: globalTokens.red,
-    errorColorOnDark: globalTokens.hal_red_l_60,
-    optionBackgroundColor: globalTokens.white,
-    optionBorderColor: globalTokens.black,
-    optionBorderThickness: "0px",
-    optionBorderStyle: "solid",
-    optionFontColor: globalTokens.black,
-    optionFontColorOnDark: globalTokens.white,
-    optionFontSize: globalTokens.type_scale_03,
-    optionFontStyle: globalTokens.type_normal,
-    optionFontWeight: globalTokens.type_regular,
-    optionPaddingBottom: "6px",
-    optionPaddingTop: "6px",
-    scrollBarThumbColor: globalTokens.darkGrey,
-    scrollBarTrackColor: globalTokens.lightGrey,
-    hoverOptionColor: globalTokens.black,
-    hoverOptionBackgroundColor: globalTokens.lightWhite,
-    hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
-    selectedOptionBackgroundColor: globalTokens.lightGrey,
-    selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
-    labelFontColor: globalTokens.black,
-    labelFontColorOnDark: globalTokens.white,
-    labelFontSize: globalTokens.type_scale_03,
-    labelFontStyle: globalTokens.type_normal,
-    labelFontWeight: globalTokens.type_regular,
-    valueFontColor: globalTokens.black,
-    valueFontColorOnDark: globalTokens.white,
-    valueFontSize: globalTokens.type_scale_03,
-    valueFontStyle: globalTokens.type_normal,
-    valueFontWeight: globalTokens.type_regular,
-    prefixIconColor: globalTokens.black,
-    prefixIconColorOnDark: globalTokens.white,
-    prefixLabelFontColor: globalTokens.black,
-    prefixLabelFontColorOnDark: globalTokens.white,
-    prefixLabelFontSize: globalTokens.type_scale_03,
-    prefixLabelFontStyle: globalTokens.type_normal,
-    prefixLabelFontWeight: globalTokens.type_regular,
-    suffixIconColor: globalTokens.black,
-    suffixIconColorOnDark: globalTokens.white,
-    suffixLabelFontColor: globalTokens.black,
-    suffixLabelFontColorOnDark: globalTokens.white,
-    suffixLabelFontSize: globalTokens.type_scale_03,
-    suffixLabelFontStyle: globalTokens.type_normal,
-    suffixLabelFontWeight: globalTokens.type_regular,
-    underlineColor: globalTokens.black,
-    underlineColorOnDark: globalTokens.white,
-    underlineFocusColor: globalTokens.black,
-    underlineFocusColorOnDark: globalTokens.white,
-    underlineThickness: "1px"
-  },
   textInput: {
     fontFamily: globalTokens.type_sans,
     enabledBorderColor: globalTokens.hal_black,
@@ -981,65 +900,6 @@ var componentTokens = {
     activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
     activeSelectionIndicatorActionIconColor: globalTokens.hal_black
   },
-  V3Select: {
-    fontFamily: globalTokens.type_sans,
-    assistiveTextFontColor: globalTokens.hal_black,
-    assistiveTextFontColorOnDark: globalTokens.hal_white,
-    assistiveTextFontSize: globalTokens.type_scale_01,
-    assistiveTextFontStyle: globalTokens.type_normal,
-    assistiveTextFontWeight: globalTokens.type_regular,
-    labelFontColor: globalTokens.hal_black,
-    labelFontColorOnDark: globalTokens.hal_white,
-    labelFontSize: globalTokens.type_scale_03,
-    labelFontStyle: globalTokens.type_normal,
-    labelFontWeight: globalTokens.type_regular,
-    disabledColor: globalTokens.lighterBlack,
-    disabledColorOnDark: "#575757",
-    errorColor: globalTokens.red,
-    errorColorOnDark: globalTokens.hal_red_l_60,
-    optionBackgroundColor: globalTokens.hal_white,
-    optionBorderColor: globalTokens.hal_black,
-    optionBorderThickness: "0px",
-    optionBorderStyle: "solid",
-    optionFontColor: globalTokens.hal_black,
-    optionFontColorOnDark: globalTokens.hal_white,
-    optionFontSize: globalTokens.type_scale_root,
-    optionFontStyle: globalTokens.type_normal,
-    optionFontWeight: globalTokens.type_regular,
-    optionPaddingBottom: "6px",
-    optionPaddingTop: "6px",
-    scrollBarThumbColor: globalTokens.hal_grey_s_40,
-    scrollBarTrackColor: globalTokens.lightGrey,
-    optionIconColor: globalTokens.hal_black,
-    optionIconColorOnDark: globalTokens.hal_white,
-    optionIconSpacing: "12px",
-    optionIconSize: "20px",
-    optionCheckboxSpacing: "12px",
-    hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
-    hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
-    activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
-    activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
-    selectedOptionBackgroundColor: globalTokens.lightGrey,
-    selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
-    underlineColor: globalTokens.hal_black,
-    underlineColorOnDark: globalTokens.hal_white,
-    underlineFocusColor: globalTokens.hal_black,
-    underlineFocusColorOnDark: globalTokens.hal_white,
-    underlineThickness: "1px",
-    valueFontColor: globalTokens.hal_black,
-    valueFontColorOnDark: globalTokens.hal_white,
-    valueFontSize: globalTokens.type_scale_03,
-    valueFontStyle: globalTokens.type_normal,
-    valueFontWeight: globalTokens.type_regular,
-    valueIconColor: globalTokens.hal_black,
-    valueIconColorOnDark: globalTokens.hal_white,
-    valueIconSize: "20px",
-    valueIconSpacing: "12px",
-    arrowColor: globalTokens.hal_black,
-    arrowColorOnDark: globalTokens.hal_white,
-    focusColor: globalTokens.hal_blue_l_50,
-    focusColorOnDark: globalTokens.hal_blue_l_50
-  },
   sidenav: {
     backgroundColor: globalTokens.hal_grey_l_95,
     arrowContainerColor: globalTokens.hal_grey_l_90,
@@ -1355,41 +1215,6 @@ var componentTokens = {
     disabledValueFontColor: globalTokens.hal_grey_l_60,
     disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
   },
-  V3Textarea: {
-    fontFamily: globalTokens.type_sans,
-    assistiveTextFontSize: globalTokens.type_scale_01,
-    assistiveTextFontStyle: globalTokens.type_normal,
-    assistiveTextFontWeight: globalTokens.type_regular,
-    assistiveTextFontColor: globalTokens.black,
-    assistiveTextFontColorOnDark: globalTokens.white,
-    assistiveTextLetterSpacing: "0.03333em",
-    disabledColor: globalTokens.lighterBlack,
-    disabledColorOnDark: "#575757",
-    errorColor: globalTokens.red,
-    errorColorOnDark: globalTokens.hal_red_l_60,
-    scrollBarThumbColor: globalTokens.darkGrey,
-    scrollBarThumbColorOnDark: globalTokens.white,
-    scrollBarTrackColor: globalTokens.lightGrey,
-    scrollBarTrackColorOnDark: "#999999",
-    labelFontSize: globalTokens.type_scale_03,
-    labelFontStyle: globalTokens.type_normal,
-    labelFontWeight: globalTokens.type_regular,
-    labelFontColor: globalTokens.black,
-    labelFontColorOnDark: globalTokens.white,
-    labelLetterSpacing: "0.00938em",
-    valueFontSize: globalTokens.type_scale_03,
-    valueFontStyle: globalTokens.type_normal,
-    valueFontWeight: globalTokens.type_regular,
-    valueFontColor: globalTokens.black,
-    valueFontColorOnDark: globalTokens.white,
-    valueLetterSpacing: globalTokens.type_spacing_normal,
-    valueLineHeight: "1.1875em",
-    underlineColor: globalTokens.black,
-    underlineColorOnDark: globalTokens.white,
-    underlineFocusColor: globalTokens.black,
-    underlineFocusColorOnDark: globalTokens.white,
-    underlineThickness: "1px"
-  },
   toggleGroup: {
     containerBackgroundColor: globalTokens.color_grey_50,
     containerBorderColor: globalTokens.hal_grey_l_60,
@@ -1438,69 +1263,6 @@ var componentTokens = {
     containerBorderRadius: globalTokens.border_radius_large,
     optionFocusBorderThickness: globalTokens.border_width_2
   },
-  upload: {
-    fontFamily: globalTokens.type_sans,
-    shadowColor: globalTokens.lightWhite,
-    scrollBarThumbColor: globalTokens.darkGrey,
-    scrollBarTrackColor: globalTokens.lightGrey,
-    errorColor: globalTokens.red,
-    backgroundColor: globalTokens.white,
-    draggingStateBackgroundColor: globalTokens.lightWhite,
-    dragAndDropIconColor: globalTokens.black,
-    dragAndDropIconSize: "43.5px",
-    dragAndDropTitleFontSize: globalTokens.type_scale_04,
-    dragAndDropTitleFontStyle: globalTokens.type_normal,
-    dragAndDropTitleFontWeight: globalTokens.type_bold,
-    dragAndDropTitleFontTextTransform: "none",
-    dragAndDropTitleFontColor: globalTokens.black,
-    dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
-    dragAndDropDescriptionFontStyle: globalTokens.type_italic,
-    dragAndDropDescriptionFontWeight: globalTokens.type_regular,
-    dragAndDropDescriptionFontTextTransform: "none",
-    dragAndDropDescriptionFontColor: globalTokens.darkGrey,
-    dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
-    dragAndDropDraggingStateIconSize: "74.5px",
-    dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
-    dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
-    dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
-    dragAndDropDraggingStateFontTextTransform: "none",
-    dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
-    dragAndDropAreaIconColor: globalTokens.darkGrey,
-    dragAndDropAreaIconSize: "24px",
-    dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
-    dragAndDropAreaTextFontStyle: globalTokens.type_italic,
-    dragAndDropAreaTextFontWeight: globalTokens.type_regular,
-    dragAndDropAreaTextFontTextTransform: "none",
-    dragAndDropAreaTextFontColor: globalTokens.darkGrey,
-    fileDeleteIconColor: globalTokens.black,
-    fileDeleteIconSize: "30px",
-    fileUnderlineColor: globalTokens.lightGrey,
-    fileUnderlineThickness: "1px",
-    fileNameFontSize: globalTokens.type_scale_03,
-    fileNameFontStyle: globalTokens.type_normal,
-    fileNameFontWeight: globalTokens.type_regular,
-    fileNameFontTextTransform: "none",
-    fileNameFontColor: globalTokens.black,
-    fileTypeFontSize: globalTokens.type_scale_01,
-    fileTypeFontStyle: globalTokens.type_normal,
-    fileTypeFontWeight: globalTokens.type_regular,
-    fileTypeFontTextTransform: globalTokens.type_uppercase,
-    fileTypeFontColor: globalTokens.darkGrey,
-    hoverFileColor: globalTokens.darkWhite,
-    uploadedFileIconColor: globalTokens.lightGrey,
-    uploadedFileIconSize: "24px",
-    uploadedFilesTitleFontSize: globalTokens.type_scale_04,
-    uploadedFilesTitleFontStyle: globalTokens.type_normal,
-    uploadedFilesTitleFontWeight: globalTokens.type_regular,
-    uploadedFilesTitleFontTextTransform: "none",
-    uploadedFilesTitleFontColor: globalTokens.black,
-    uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
-    uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
-    uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
-    uploadedFilesSubtitleFontTextTransform: "none",
-    uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
-    uploadedFilesNumberFontWeight: globalTokens.type_bold
-  },
   wizard: {
     disabledBackgroundColor: globalTokens.lightGrey,
     disabledFontColor: globalTokens.darkGrey,

package/date-input/DateInput.js

@@ -39,34 +39,33 @@ 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; }
 
+var getValueForPicker = function getValueForPicker(value, format) {
+  return (0, _moment["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];
@@ -129,10 +128,6 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     });
   };
 
-  var getValueForPicker = function getValueForPicker() {
-    return (0, _moment["default"])(value !== null && value !== void 0 ? value : innerValue, format.toUpperCase(), true).format();
-  };
-
   var openCalendar = function openCalendar() {
     var dateBtn = refDate.current.getElementsByTagName("button")[0];
     setIsOpen(!isOpen);
@@ -304,6 +299,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, /*#__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 +339,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>
 );