@dxc-technology/halstack-react 8.0.0 → 9.0.0

package/date-input/Calendar.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { CalendarPropsType } from "./types";
-declare const _default: React.MemoExoticComponent<({ selectedDate, innerDate, onInnerDateChange, onDaySelect }: CalendarPropsType) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ selectedDate, innerDate, onInnerDateChange, onDaySelect, today, }: CalendarPropsType) => JSX.Element>;
 export default _default;

package/date-input/Calendar.js

@@ -13,8 +13,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _dayjs = _interopRequireDefault(require("dayjs"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -23,7 +21,7 @@ var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabel
 
 var _main = require("../main");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -60,6 +58,10 @@ var getDays = function getDays(innerDate) {
   return monthDayCells;
 };
 
+var getDateToFocus = function getDateToFocus(selectedDate, innerDate, today) {
+  return (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("month")) === innerDate.get("month") && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("year")) === innerDate.get("year") ? selectedDate : today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year") ? today : innerDate.set("date", 1);
+};
+
 var isDaySelected = function isDaySelected(date, selectedDate) {
   return (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("month")) === date.month && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("year")) === date.year && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("date")) === date.day;
 };
@@ -68,19 +70,19 @@ var Calendar = function Calendar(_ref) {
   var selectedDate = _ref.selectedDate,
       innerDate = _ref.innerDate,
       onInnerDateChange = _ref.onInnerDateChange,
-      onDaySelect = _ref.onDaySelect;
+      onDaySelect = _ref.onDaySelect,
+      today = _ref.today;
 
-  var _useState = (0, _react.useState)((selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("month")) === innerDate.get("month") && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("year")) === innerDate.get("year") ? selectedDate : (0, _dayjs["default"])()),
+  var _useState = (0, _react.useState)(getDateToFocus(selectedDate, innerDate, today)),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       dateToFocus = _useState2[0],
       setDateToFocus = _useState2[1];
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      toFocus = _useState4[0],
-      setToFocus = _useState4[1];
+      isFocusable = _useState4[0],
+      setIsFocusable = _useState4[1];
 
-  var today = (0, _dayjs["default"])();
   var dayCells = (0, _react.useMemo)(function () {
     return getDays(innerDate);
   }, [innerDate]);
@@ -95,17 +97,7 @@ var Calendar = function Calendar(_ref) {
 
   var handleOnBlur = function handleOnBlur(event) {
     if (!(event !== null && event !== void 0 && event.currentTarget.contains(event.relatedTarget))) {
-      updateDateToFocus();
-    }
-  };
-
-  var updateDateToFocus = function updateDateToFocus() {
-    if ((selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("month")) === innerDate.get("month") && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.get("year")) === innerDate.get("year")) {
-      setDateToFocus(selectedDate);
-    } else if (today.get("month") === innerDate.get("month") && today.get("year") === innerDate.get("year")) {
-      setDateToFocus(today);
-    } else {
-      setDateToFocus(innerDate.set("date", 1));
+      setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
     }
   };
 
@@ -115,22 +107,22 @@ var Calendar = function Calendar(_ref) {
     }
 
     setDateToFocus(date);
-    setToFocus(true);
+    setIsFocusable(true);
   };
 
   (0, _react.useEffect)(function () {
-    if (toFocus) {
+    if (isFocusable) {
       var _document$getElementB;
 
       (_document$getElementB = document.getElementById("day_".concat(dateToFocus.get("date"), "_month").concat(dateToFocus.get("month")))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
-      setToFocus(false);
+      setIsFocusable(false);
     }
-  }, [dateToFocus, toFocus]);
+  }, [dateToFocus, isFocusable]);
   (0, _react.useEffect)(function () {
     if (dateToFocus.get("month") !== innerDate.get("month") || dateToFocus.get("year") !== innerDate.get("year")) {
-      updateDateToFocus();
+      setDateToFocus(getDateToFocus(selectedDate, innerDate, today));
     }
-  }, [innerDate, dateToFocus, selectedDate]);
+  }, [innerDate, dateToFocus, selectedDate, today]);
 
   var handleDayKeyboardEvent = function handleDayKeyboardEvent(event, date) {
     var dateToFocusTemp = date.month === innerDate.get("month") ? innerDate.set("date", date.day) : innerDate.set("date", date.day).set("month", date.month);
@@ -201,7 +193,7 @@ var Calendar = function Calendar(_ref) {
   })), /*#__PURE__*/_react["default"].createElement(DayCellsContainer, {
     onBlur: handleOnBlur
   }, dayCells.map(function (date, index) {
-    return date !== 0 ? /*#__PURE__*/_react["default"].createElement(DayCell, {
+    return /*#__PURE__*/_react["default"].createElement(DayCell, {
       onKeyDown: function onKeyDown(event) {
         return handleDayKeyboardEvent(event, date);
       },
@@ -217,42 +209,50 @@ var Calendar = function Calendar(_ref) {
       "aria-selected": isDaySelected(date, selectedDate),
       tabIndex: date.day === dateToFocus.get("date") && date.month === dateToFocus.get("month") ? 0 : -1,
       isCurrentDay: today.get("date") === date.day && today.get("month") === innerDate.get("month") && today.get("month") === date.month && today.get("year") === innerDate.get("year")
-    }, date.day) : /*#__PURE__*/_react["default"].createElement(EmptyDayCell, {
-      key: "empty_".concat(index)
-    });
+    }, date.day);
   })));
 };
 
-var CalendarContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0px 8px 8px 8px;\n  width: ", ";\n"])), function (props) {
-  return props.theme.dateInput.pickerWidth;
-});
-
-var WeekHeaderCell = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 19px;\n  color: ", ";\n"])), function (props) {
+var CalendarContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 0px 8px 8px 8px;\n  width: 292px;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.dateInput.pickerFontFamily;
 }, function (props) {
-  return props.theme.dateInput.pickerWeekFontColor;
+  return props.theme.dateInput.pickerFontSize;
+}, function (props) {
+  return props.theme.dateInput.pickerFontColor;
+}, function (props) {
+  return props.theme.dateInput.pickerFontWeight;
 });
 
+var WeekHeaderCell = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n"])));
+
 var DayCellsContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  gap: 4px;\n  flex-wrap: wrap;\n  justify-content: space-between;\n"])));
 
-var DayCell = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  font-size: 0.875rem;\n  font-family: ", ";\n  font-weight: 400;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n\n  &:focus {\n    outline: ", " solid 2px;\n  }\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: #4b1c7d;\n    color: #ffffff;\n  }\n\n  ", "\n  background-color: ", ";\n  color: ", ";\n"])), function (props) {
+var DayCell = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", ";\n  color: ", ";\n  font-weight: ", ";\n\n  &:focus {\n    outline: ", " solid 2px;\n  }\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  ", "\n  background-color: ", ";\n  color: ", ";\n"])), function (props) {
   return props.theme.dateInput.pickerFontFamily;
+}, function (props) {
+  return props.theme.dateInput.pickerFontSize;
+}, function (props) {
+  return props.theme.dateInput.pickerFontColor;
+}, function (props) {
+  return props.theme.dateInput.pickerFontWeight;
 }, function (props) {
   return props.theme.dateInput.pickerFocusColor;
 }, function (props) {
-  return props.selected ? props.theme.dateInput.pickerSelectedDateBackgroundColor : props.theme.dateInput.pickerHoverDateBackgroundColor;
+  return props.selected ? props.theme.dateInput.pickerSelectedBackgroundColor : props.theme.dateInput.pickerHoverBackgroundColor;
+}, function (props) {
+  return props.selected ? props.theme.dateInput.pickerSelectedFontColor : props.theme.dateInput.pickerHoverFontColor;
 }, function (props) {
-  return props.selected ? props.theme.dateInput.pickerSelectedDateColor : props.theme.dateInput.pickerHoverDateFontColor;
+  return props.theme.dateInput.pickerActiveBackgroundColor;
 }, function (props) {
-  return props.isCurrentDay && !props.selected && "border: 1px solid #cbacec;";
+  return props.theme.dateInput.pickerActiveFontColor;
 }, function (props) {
-  return props.selected ? props.theme.dateInput.pickerSelectedDateBackgroundColor : "transparent";
+  return props.isCurrentDay && !props.selected && "border: ".concat(props.theme.dateInput.pickerCurrentDateBorderWidth, " solid ").concat(props.theme.dateInput.pickerCurrentDateBorderColor, ";");
 }, function (props) {
-  return props.selected ? props.theme.dateInput.pickerSelectedDateColor : props.isCurrentDay ? props.theme.dateInput.pickerActualDateFontColor : !props.actualMonth ? "#999999" : props.theme.dateInput.pickerDayFontColor;
+  return props.selected ? props.theme.dateInput.pickerSelectedBackgroundColor : "transparent";
+}, function (props) {
+  return props.selected ? props.theme.dateInput.pickerSelectedFontColor : props.isCurrentDay ? props.theme.dateInput.pickerCurrentDateFontColor : !props.actualMonth ? props.theme.dateInput.pickerNonCurrentMonthFontColor : props.theme.dateInput.pickerFontColor;
 });
 
-var EmptyDayCell = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  width: 40px;\n  height: 36px;\n"])));
-
 var _default = /*#__PURE__*/_react["default"].memo(Calendar);
 
 exports["default"] = _default;

package/date-input/DateInput.js

@@ -35,6 +35,8 @@ var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customPars
 
 var _uuid = require("uuid");
 
+var _Icons = require("./Icons");
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -47,24 +49,33 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 _dayjs["default"].extend(_customParseFormat["default"]);
 
-var calendarIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  viewBox: "0 0 24 24",
-  width: "24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M0 0h24v24H0z",
-  fill: "none"
-}), /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"
-}));
-
 var getValueForPicker = function getValueForPicker(value, format) {
   return (0, _dayjs["default"])(value, format.toUpperCase(), true);
 };
 
+var getDate = function getDate(value, format, lastValidYear, setLastValidYear) {
+  if ((value || value === "") && format.toUpperCase().includes("YYYY")) return getValueForPicker(value, format);else {
+    var newDate = getValueForPicker(value, format);
+
+    if (!lastValidYear) {
+      if (+newDate.format("YY") < 68) {
+        setLastValidYear(2000 + +newDate.format("YY"));
+        newDate = newDate.set("year", 2000 + +newDate.format("YY"));
+      } else {
+        setLastValidYear(1900 + +newDate.format("YY"));
+        newDate = newDate.set("year", 1900 + +newDate.format("YY"));
+      }
+    } else {
+      newDate = newDate.set("year", (lastValidYear <= 1999 ? 1900 : 2000) + +newDate.format("YY"));
+    }
+
+    return newDate;
+  }
+};
+
 var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var _ref2;
+
   var label = _ref.label,
       name = _ref.name,
       _ref$defaultValue = _ref.defaultValue,
@@ -100,9 +111,22 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
       calendarId = _useState6[0];
 
+  var _useState7 = (0, _react.useState)(getValueForPicker((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : "", format)),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      dayjsDate = _useState8[0],
+      setDayjsDate = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(innerValue || value ? !format.toUpperCase().includes("YYYY") && +getValueForPicker(value !== null && value !== void 0 ? value : innerValue, format).format("YY") < 68 ? 2000 : 1900 : undefined),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      lastValidYear = _useState10[0],
+      setLastValidYear = _useState10[1];
+
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var dateRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (value || value === "") setDayjsDate(getDate(value, format, lastValidYear, setLastValidYear));
+  }, [value, format, lastValidYear]);
   (0, _react.useLayoutEffect)(function () {
     if (!disabled) {
       var actionButtonRef = dateRef === null || dateRef === void 0 ? void 0 : dateRef.current.querySelector("[title='Open calendar']");
@@ -116,45 +140,63 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
   var handleCalendarOnClick = function handleCalendarOnClick(newDate) {
     var newValue = newDate.format(format.toUpperCase());
-    value !== null && value !== void 0 ? value : setInnerValue(newValue);
+
+    if (!value) {
+      setDayjsDate(newDate);
+      setInnerValue(newValue);
+    }
+
+    setLastValidYear(newDate.get("year"));
     newDate !== null && newDate !== void 0 && newDate.set("day", newDate.get("date")).toJSON() ? onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue,
-      date: newDate
+      date: newDate.toDate()
     }) : onChange === null || onChange === void 0 ? void 0 : onChange({
       value: newValue
     });
   };
 
-  var handleIOnChange = function handleIOnChange(_ref2) {
-    var newValue = _ref2.value,
-        inputError = _ref2.error;
+  var handleIOnChange = function handleIOnChange(_ref3) {
+    var newValue = _ref3.value,
+        inputError = _ref3.error;
     value !== null && value !== void 0 ? value : setInnerValue(newValue);
-    var dayjsDate = getValueForPicker(newValue, format);
-    var invalidDateMessage = newValue !== "" && !dayjsDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
+    var newDate = getDate(newValue, format, lastValidYear, setLastValidYear);
+    var invalidDateMessage = newValue !== "" && !newDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
     var callbackParams = inputError || invalidDateMessage ? {
       value: newValue,
       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);
+
+    if (newDate.isValid()) {
+      setDayjsDate(newDate);
+      onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, callbackParams), {}, {
+        date: newDate.toDate()
+      }));
+    } else {
+      onChange === null || onChange === void 0 ? void 0 : onChange(callbackParams);
+      setLastValidYear(function (validYear) {
+        var _dayjsDate$get;
+
+        return (_dayjsDate$get = dayjsDate === null || dayjsDate === void 0 ? void 0 : dayjsDate.get("year")) !== null && _dayjsDate$get !== void 0 ? _dayjsDate$get : validYear;
+      });
+      setDayjsDate(null);
+    }
   };
 
-  var handleIOnBlur = function handleIOnBlur(_ref3) {
-    var value = _ref3.value,
-        inputError = _ref3.error;
-    var dayjsDate = getValueForPicker(value, format);
-    var invalidDateMessage = value !== "" && !dayjsDate.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
+  var handleIOnBlur = function handleIOnBlur(_ref4) {
+    var value = _ref4.value,
+        inputError = _ref4.error;
+    var date = getDate(value, format, lastValidYear, setLastValidYear);
+    var invalidDateMessage = value !== "" && !date.isValid() && translatedLabels.dateInput.invalidDateErrorMessage;
     var callbackParams = inputError || invalidDateMessage ? {
       value: value,
       error: inputError || invalidDateMessage
     } : {
       value: value
     };
-    dayjsDate.isValid() ? onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread({}, callbackParams), {}, {
-      date: dayjsDate.toDate()
+    date.isValid() ? onBlur === null || onBlur === void 0 ? void 0 : onBlur(_objectSpread(_objectSpread({}, callbackParams), {}, {
+      date: date.toDate()
     })) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(callbackParams);
   };
 
@@ -194,7 +236,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     placeholder: placeholder ? format.toUpperCase() : null,
     action: {
       onClick: openCalendar,
-      icon: calendarIcon,
+      icon: _Icons.calendarIcon,
       title: "Open calendar"
     },
     clearable: clearable,
@@ -218,7 +260,7 @@ var DxcDateInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, /*#__PURE__*/_react["default"].createElement(_DatePicker["default"], {
     id: calendarId,
     onDateSelect: handleCalendarOnClick,
-    date: getValueForPicker(value !== null && value !== void 0 ? value : innerValue, format.toUpperCase())
+    date: dayjsDate
   })))));
 });
 

package/date-input/DateInput.stories.tsx

@@ -1,17 +1,31 @@
 import React from "react";
 import { userEvent, within, fireEvent, screen } from "@storybook/testing-library";
 import DxcDateInput from "./DateInput";
+import DxcDatePicker from "./DatePicker";
+import YearPicker from "./YearPicker";
+import Calendar from "./Calendar";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import DarkContainer from "../../.storybook/components/DarkSection";
+import dayjs from "dayjs";
+import useTheme from "../useTheme";
+import { ThemeProvider } from "styled-components";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Date input",
   component: DxcDateInput,
 };
 
-export const Chromatic = () => (
+const opinionatedTheme = {
+  dateInput: {
+    baseColor: "#5f249f",
+    selectedFontColor: "#ffffff",
+  },
+};
+
+const DateInputChromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Complete date input" theme="light" level={4} />
@@ -22,7 +36,7 @@ export const Chromatic = () => (
       <DxcDateInput
         label="Disabled date input"
         helperText="Help message"
-        defaultValue="06-04-2027"
+        defaultValue="06-04-2007"
         clearable
         disabled
       />
@@ -33,7 +47,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Relation between icons" theme="light" level={4} />
-      <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2027" clearable />
+      <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2007" clearable />
     </ExampleContainer>
     <BackgroundColorProvider color="#333333">
       <DarkContainer>
@@ -58,7 +72,7 @@ export const Chromatic = () => (
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Relation between icons" theme="dark" level={4} />
-          <DxcDateInput label="Error date input" defaultValue="06-04-2027" error="Error message." clearable />
+          <DxcDateInput label="Error date input" defaultValue="06-04-2007" error="Error message." clearable />
         </ExampleContainer>
       </DarkContainer>
     </BackgroundColorProvider>
@@ -104,48 +118,187 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcDateInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer expanded>
+      <Title title="Year picker" theme="light" level={4} />
+      <DxcDateInput label="Date input" defaultValue="06-04-1905" />
+    </ExampleContainer>
   </>
 );
 
-const DatePicker = () => (
-  <ExampleContainer expanded>
-    <Title title="Show date picker" theme="light" level={4} />
-    <DxcDateInput label="Date input" defaultValue="06-04-2027" />
-  </ExampleContainer>
+export const Chromatic = DateInputChromatic.bind({});
+Chromatic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getAllByRole("combobox")[canvas.getAllByRole("combobox").length - 1]);
+  await fireEvent.click(screen.getByText("April 1905"));
+};
+
+const DateInputOpinionatedTheme = () => (
+  <>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Enabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDateInput
+          label="Date input"
+          helperText="Help message"
+          format="dd/mm/yy"
+          placeholder
+          optional
+          defaultValue="10-10-2022"
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDateInput label="Error date input" error="Error message." placeholder />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer expanded>
+      <Title title="Date picker" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDateInput label="Date input" defaultValue="06-04-1905" />
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
 );
 
-export const ShowDatePicker = DatePicker.bind({});
-ShowDatePicker.play = async ({ canvasElement }) => {
+export const DateInputOpinionated = DateInputOpinionatedTheme.bind({});
+DateInputOpinionated.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const dateBtn = canvas.getByRole("combobox");
-  await userEvent.click(dateBtn);
+  await userEvent.click(canvas.getAllByRole("combobox")[canvas.getAllByRole("combobox").length - 1]);
 };
 
-const YearPicker = () => (
+const YearPickerOpinionatedTheme = () => (
   <ExampleContainer expanded>
-    <Title title="Show year picker" theme="light" level={4} />
-    <DxcDateInput label="Date input" defaultValue="06-04-2027" />
+    <Title title="Year picker" theme="light" level={4} />
+    <HalstackProvider theme={opinionatedTheme}>
+      <DxcDateInput label="Date input" defaultValue="06-04-1905" />
+    </HalstackProvider>
   </ExampleContainer>
 );
 
-export const ShowYearPicker = YearPicker.bind({});
-ShowYearPicker.play = async ({ canvasElement }) => {
+export const YearPickerOpinionated = YearPickerOpinionatedTheme.bind({});
+YearPickerOpinionated.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole("combobox"));
-  await fireEvent.click(screen.getByText("April 2027"));
+  await fireEvent.click(screen.getByText("April 1905"));
 };
 
-const YearPickerFocus = () => (
-  <ExampleContainer expanded>
-    <Title title="Show year picker and focus" theme="light" level={4} />
-    <DxcDateInput label="Date input" defaultValue="06-04-2027" />
-  </ExampleContainer>
-);
+const DatePickerButtonStates = () => {
+  const colorsTheme: any = useTheme();
+  return (
+    <>
+      <ExampleContainer>
+        <Title title="Show date picker over another element with z-index 0" theme="light" level={4} />
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px",
+            height: "200px",
+            width: "500px",
+            marginBottom: "250px",
+            padding: "20px",
+            border: "1px solid black",
+            borderRadius: "4px",
+            overflow: "auto",
+            zIndex: "1300",
+            position: "relative",
+          }}
+        >
+          <DxcDateInput label="From" defaultValue="01-12-1995" />
+          <DxcDateInput label="To" />
+          <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
+        </div>
+      </ExampleContainer>
+      <ThemeProvider theme={colorsTheme}>
+        <ExampleContainer pseudoState="pseudo-focus">
+          <Title title="Isolated calendar focused" theme="light" level={4} />
+          <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Isolated calendar hovered" theme="light" level={4} />
+          <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Isolated calendar actived" theme="light" level={4} />
+          <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar" />
+        </ExampleContainer>
+      </ThemeProvider>
+    </>
+  );
+};
 
-export const ShowYearPickerFocus = YearPickerFocus.bind({});
-ShowYearPickerFocus.play = async ({ canvasElement }) => {
+export const DatePickerStates = DatePickerButtonStates.bind({});
+DatePickerStates.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole("combobox"));
-  await fireEvent.click(screen.getByText("April 2027"));
-  await userEvent.tab();
+  const dateBtn = canvas.getAllByTitle("Open calendar")[0];
+  await userEvent.click(dateBtn);
+};
+
+export const YearPickerStates = () => {
+  const colorsTheme: any = useTheme();
+  return (
+    <>
+      <ThemeProvider theme={colorsTheme}>
+        <ExampleContainer pseudoState="pseudo-focus">
+          <Title title="Isolated year picker focused" theme="light" level={4} />
+          <YearPicker
+            selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+            onYearSelect={() => {}}
+            today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Isolated year picker hovered" theme="light" level={4} />
+          <YearPicker
+            selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+            onYearSelect={() => {}}
+            today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Isolated year picker actived" theme="light" level={4} />
+          <YearPicker
+            selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+            onYearSelect={() => {}}
+            today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          />
+        </ExampleContainer>
+      </ThemeProvider>
+    </>
+  );
+};
+
+export const DatePickerWithToday = () => {
+  const colorsTheme: any = useTheme();
+  return (
+    <ThemeProvider theme={colorsTheme}>
+      <ExampleContainer>
+        <Title title="Isolated calendar with today" theme="light" level={4} />
+        <Calendar
+          selectedDate={dayjs("06-04-1904", "DD-MM-YYYY")}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          onInnerDateChange={() => {}}
+          onDaySelect={() => {}}
+          innerDate={dayjs("06-04-1904", "DD-MM-YYYY")}
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Isolated year picker with today" theme="light" level={4} />
+        <YearPicker
+          selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+          onYearSelect={() => {}}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+        />
+      </ExampleContainer>
+    </ThemeProvider>
+  );
 };