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

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",
@@ -24,6 +19,8 @@ var globalTokens = {
   color_grey_800: "#4d4d4d",
   color_grey_600: "#808080",
   color_grey_50: "#fafafa",
+  color_grey_a_100: "#0000000d",
+  color_grey_a_300: "#00000033",
   hal_purple_l_95: "#f2eafa",
   hal_purple_l_90: "#e5d5f6",
   hal_purple_l_65: "#a46ede",
@@ -241,7 +238,7 @@ var componentTokens = {
     successBackgroundColor: globalTokens.hal_green_l_95,
     warningBackgroundColor: globalTokens.hal_yellow_l_95,
     errorBackgroundColor: globalTokens.hal_red_l_95,
-    hoverActionBackgroundColor: "#0000000D",
+    hoverActionBackgroundColor: globalTokens.color_grey_a_100,
     activeActionBackgroundColor: "#0000001A",
     focusActionBorderColor: globalTokens.hal_blue_l_50,
     overlayColor: "#000000B3"
@@ -262,12 +259,12 @@ var componentTokens = {
     oneShadowDepthShadowOffsetY: "3px",
     oneShadowDepthShadowBlur: "6px",
     oneShadowDepthShadowSpread: "0px",
-    oneShadowDepthShadowColor: "#00000033",
+    oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
     twoShadowDepthShadowOffsetX: "0px",
     twoShadowDepthShadowOffsetY: "3px",
     twoShadowDepthShadowBlur: "10px",
     twoShadowDepthShadowSpread: "0px",
-    twoShadowDepthShadowColor: "#00000033"
+    twoShadowDepthShadowColor: globalTokens.color_grey_a_300
   },
   button: {
     labelFontLineHeight: globalTokens.type_leading_normal,
@@ -394,23 +391,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,
@@ -505,14 +485,13 @@ var componentTokens = {
     focusDropBorderColor: globalTokens.hal_blue_l_50,
     disabledDropBorderColor: globalTokens.hal_grey_l_60,
     dragoverDropBackgroundColor: globalTokens.color_blue_50,
-    hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
     activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
     errorFileItemBorderColor: globalTokens.hal_red_s_41,
     errorFileItemBackgroundColor: globalTokens.color_red_50,
-    errorFileItemIconBackgroundColor: globalTokens.color_red_700,
+    errorFilePreviewBackgroundColor: globalTokens.color_red_700,
     errorFileItemIconColor: globalTokens.hal_red_s_41,
     fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
-    fileItemIconColor: globalTokens.color_grey_600,
+    deleteFileItemColor: globalTokens.hal_black,
     errorMessageFontColor: globalTokens.hal_red_s_41,
     labelFontFamily: globalTokens.type_sans,
     labelFontSize: globalTokens.type_scale_02,
@@ -539,9 +518,12 @@ var componentTokens = {
     fileItemBorderThickness: globalTokens.border_width_1,
     fileItemBorderStyle: globalTokens.border_solid,
     fileItemBorderRadius: globalTokens.border_radius_medium,
-    hoverDeleteFileItemBackgroundColor: "#0000000d",
-    activeDeleteFileItemBackgroundColor: "#00000033",
-    focusActionBorderColor: globalTokens.hal_blue_l_50
+    hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
+    activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
+    focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
+    filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
+    filePreviewIconColor: globalTokens.color_grey_600,
+    errorFilePreviewIconColor: globalTokens.hal_red_s_41
   },
   footer: {
     height: "124px",
@@ -638,65 +620,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,
@@ -793,7 +716,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",
@@ -981,65 +904,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 +1219,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 +1267,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,
@@ -1568,12 +1334,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>
 );