@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTDataElement/index.js

@@ -0,0 +1,152 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { bool, element, object, number, objectOf, oneOfType, string } from 'prop-types';
+import React, { useCallback, useMemo, useRef, useState, Fragment } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
+import isFinite from 'lodash/isFinite';
+import UTTooltip from '../UTTooltip';
+import UTBadge from '../UTBadge';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import UTIcon from '../UTIcon';
+import { capitalize, isUTIcon, isUTLabel } from '../../utils/componentUtils';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+import UTButton from '../UTButton';
+import { TEST_IDS } from '../../constants/testIds';
+import { retrieveStyle } from './theme';
+import styles from './styles.module.scss';
+import { ORIENTATION, PADDING, SPACING, TOOLTIP_PROPS, ANIMATION } from './constants';
+import MainAction from './components/MainAction';
+const {
+  dataElement
+} = TEST_IDS;
+const UTDataElement = _ref => {
+  let {
+    action,
+    area,
+    badge,
+    badgeProps = {},
+    children,
+    classes: theme,
+    classNames,
+    Data,
+    dataProps = {},
+    dataTestId,
+    forceShowBadge = false,
+    Icon,
+    iconProps = {},
+    orientation = ORIENTATION.HORIZONTAL,
+    paddingVertical = PADDING.MEDIUM,
+    prefix,
+    prefixProps = {},
+    spacing = SPACING.MEDIUM,
+    title,
+    titleProps = {},
+    transitionDuration = ANIMATION.TRANSITION_DURATION
+  } = _ref;
+  const classes = useMemo(() => mergeMultipleClassNames(styles, theme, classNames), [classNames, theme]);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [contentHeight, setContentHeight] = useState('0px');
+  const childrenRef = useRef(null);
+  const toggleCollapsed = useCallback(() => {
+    if (isCollapsed) {
+      if (childrenRef.current) {
+        const height = childrenRef.current.scrollHeight;
+        setContentHeight("".concat(height, "px"));
+        setIsTransitioning(true);
+        setIsCollapsed(false);
+        setTimeout(() => {
+          setIsTransitioning(false);
+          setContentHeight('none');
+        }, transitionDuration);
+      }
+    } else if (childrenRef.current) {
+      const height = childrenRef.current.scrollHeight;
+      setContentHeight("".concat(height, "px"));
+      setIsTransitioning(true);
+      requestAnimationFrame(() => {
+        setContentHeight('0px');
+        setIsCollapsed(true);
+        setTimeout(() => setIsTransitioning(false), transitionDuration);
+      });
+    }
+  }, [isCollapsed]);
+  const IconComponent = isUTIcon(Icon) ? UTIcon : Icon;
+  const DataComponent = isUTLabel(Data) ? /*#__PURE__*/React.createElement(UTLabel, dataProps, Data) : Data;
+  const showBadge = forceShowBadge || isString(badge) && !isEmpty(badge) || isFinite(badge);
+  const {
+    tooltip: titleTooltip
+  } = titleProps || {};
+  const withTitleTooltip = isString(titleTooltip) && !isEmpty(titleTooltip);
+  const TitleWrapper = withTitleTooltip ? UTTooltip : Fragment;
+  const contentClasses = "".concat(classes.content, " ").concat(styles["spacing".concat(capitalize(spacing))]);
+  const infoClasses = "".concat(classes.info, " ").concat(orientation === ORIENTATION.VERTICAL && classes.vertical);
+  const iconCollapseButtonClasses = "".concat(classes.iconCollapseButton, " ").concat(isCollapsed && classes.collapsed);
+  const childrenClasses = "".concat(classes.children, " ").concat(isCollapsed ? classes.childrenCollapsed : classes.childrenExpanded, " ").concat(isTransitioning ? classes.childrenTransitioning : classes.childrenStatic);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(classes["padding".concat(capitalize(paddingVertical))]),
+    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentClasses
+  }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, _extends({
+    name: Icon,
+    colorTheme: "gray",
+    size: "var(--UT-dataElement-icon-size, 24px)"
+  }, iconProps)), /*#__PURE__*/React.createElement("div", {
+    className: infoClasses
+  }, (prefix || title || showBadge) && /*#__PURE__*/React.createElement("div", {
+    className: classes.topInfo
+  }, prefix && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray"
+  }, prefixProps), prefix), title && /*#__PURE__*/React.createElement(TitleWrapper, withTitleTooltip ? {
+    tippyProps: TOOLTIP_PROPS,
+    content: titleTooltip
+  } : {}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTLabel, _extends({
+    colorTheme: "gray"
+  }, titleProps), title))), showBadge && /*#__PURE__*/React.createElement(UTBadge, _extends({
+    colorTheme: "accent",
+    className: classes.badge
+  }, badgeProps), forceShowBadge ? null : badge)), DataComponent && DataComponent), action && /*#__PURE__*/React.createElement(MainAction, _extends({
+    dataTestId: dataTestId
+  }, action)), children && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      icon: iconCollapseButtonClasses
+    },
+    Icon: "IconChevronUp",
+    onClick: toggleCollapsed,
+    size: "small",
+    variant: "text",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.collapseButton) : undefined
+  })), children && /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxHeight: contentHeight
+    },
+    className: childrenClasses
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: childrenRef
+  }, children)));
+};
+UTDataElement.propTypes = {
+  action: object,
+  area: bool,
+  badge: string,
+  badgeProps: object,
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  Data: oneOfType([element, string]),
+  dataProps: object,
+  dataTestId: string,
+  forceShowBadge: bool,
+  Icon: oneOfType([element, string]),
+  iconProps: object,
+  orientation: string,
+  paddingVertical: string,
+  prefix: string,
+  prefixProps: object,
+  spacing: string,
+  title: string,
+  titleProps: object,
+  transitionDuration: number
+};
+export default WithTheme(retrieveStyle)(UTDataElement);

package/dist/esm/components/UTDataElement/styles.module.scss

@@ -0,0 +1,91 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.paddingSmall {
+  padding-bottom: var(--UT-dataElement-padding-sm, 8px);
+  padding-top: var(--UT-dataElement-padding-sm, 8px);
+}
+
+.paddingMedium {
+  padding-bottom: var(--UT-dataElement-padding-md, 16px);
+  padding-top: var(--UT-dataElement-padding-md, 16px);
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.spacingXs {
+  grid-gap: 4px;
+}
+
+.spacingSmall {
+  grid-gap: var(--UT-dataElement-gap-sm, 8px);
+}
+
+.spacingMedium {
+  grid-gap: var(--UT-dataElement-gap-md, 16px);
+}
+
+.info {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  grid-gap: var(--UT-dataElement-content-gap-x, 8px);
+  justify-content: space-between;
+}
+
+.vertical {
+  flex-direction: column;
+  grid-gap: var(--UT-dataElement-content-gap-y, 8px);
+}
+
+.topInfo {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  grid-gap: var(--UT-dataElement-content-gap-x, 8px);
+}
+
+.iconCollapseButton {
+  transition: transform 0.3s ease-in-out;
+
+  &.collapsed {
+    transform: rotate(180deg);
+  }
+}
+
+.children {
+  overflow: hidden;
+  transition:
+    max-height 0.3s ease-out,
+    margin-top 0.3s ease-out;
+}
+
+.childrenCollapsed {
+  max-height: 0;
+  margin-top: 0;
+}
+
+.childrenExpanded {
+  margin-top: 16px;
+}
+
+.childrenTransitioning {
+  transition:
+    max-height 0.3s ease-out,
+    margin-top 0.3s ease-out;
+}
+
+.childrenStatic {
+  transition: none;
+}
+
+.badge {
+  width: fit-content !important;
+}

package/dist/esm/components/UTDataElement/theme.js

@@ -0,0 +1,26 @@
+import { COLOR_THEMES } from '../../constants/Palette';
+export const backgroundColor = (theme, area) => {
+  var _theme$Palette;
+  const colorTheme = COLOR_THEMES.light;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const paletteColors = theme.Palette;
+  const areaColor = actionPaletteColors[colorTheme] || paletteColors[colorTheme];
+  return {
+    backgroundColor: area ? areaColor['03'] : 'transparent'
+  };
+};
+export const retrieveStyle = _ref => {
+  let {
+    area,
+    theme
+  } = _ref;
+  const areaBackgroundColor = backgroundColor(theme, area);
+  return {
+    area: {
+      ...areaBackgroundColor,
+      paddingLeft: 16,
+      paddingRight: 16,
+      borderRadius: 8
+    }
+  };
+};

package/dist/esm/components/UTDatePicker/assets/calendar.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4" id="calendario"></path>
+    </defs>
+    <g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
+        <g id="Group" transform="translate(-3.000000, -2.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#calendario"></use>
+            </mask>
+            <use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTDatePicker/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const VERSIONS = {
+  V0,
+  V1
+};
+const UTDatePicker = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = VERSIONS[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTDatePicker.propTypes = {
+  version: string
+};
+export default UTDatePicker;

package/dist/esm/components/UTDatePicker/versions/V0/assets/calendar.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4" id="calendario"></path>
+    </defs>
+    <g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
+        <g id="Group" transform="translate(-3.000000, -2.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#calendario"></use>
+            </mask>
+            <use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
+        </g>
+    </g>
+</svg>

package/dist/esm/components/UTDatePicker/versions/V0/components/Day/constants.js

@@ -0,0 +1 @@
+export const DAY_NUMBER_FORMAT = 'DD';

package/dist/esm/components/UTDatePicker/versions/V0/components/Day/index.js

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import dayjs from 'dayjs';
+import { string, objectOf, object, bool } from 'prop-types';
+import { isSelected } from '../../utils';
+import { DAY_NUMBER_FORMAT } from './constants';
+const Day = _ref => {
+  let {
+    classes,
+    dayFormat,
+    date,
+    pickedDate,
+    dayInCurrentMonth
+  } = _ref;
+  const todaySelected = isSelected(date, pickedDate);
+  return /*#__PURE__*/React.createElement(IconButton, {
+    className: "\n      ".concat(classes.day, "\n      ").concat(!dayInCurrentMonth && classes.otherMonthDay, "\n      ").concat(todaySelected && classes.selectedDay, "\n      ")
+  }, /*#__PURE__*/React.createElement("span", null, " ", dayjs(date).format(dayFormat || DAY_NUMBER_FORMAT), " "));
+};
+Day.propTypes = {
+  classes: objectOf(string),
+  dayFormat: string,
+  date: object,
+  pickedDate: object,
+  dayInCurrentMonth: bool
+};
+export default /*#__PURE__*/memo(Day);

package/dist/esm/components/UTDatePicker/versions/V0/constants.js

@@ -0,0 +1,20 @@
+export const WEEKDAYS_LABELS = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
+export const CALENDAR_HEADER_FORMAT = 'MMM YYYY';
+export const BUTTON_POSITION = 'end';
+export const INPUT_VARIANT = 'outlined';
+export const VARIANT = 'inline';
+export const WRONG_DATE_FORMAT = 'Formato de fecha incorrecto';
+export const OUTPUT_LABEL_MASK = 'DD/MM/YYYY';
+export const MAX_DATE_MSG = 'La fecha es mayor a la fecha máxima';
+export const MIN_DATE_MSG = 'La fecha es menor a la fecha mínima';
+export const iconAnchorProps = iconReference => ({
+  anchorEl: iconReference.current,
+  anchorOrigin: {
+    vertical: 30,
+    horizontal: 'right'
+  },
+  transformOrigin: {
+    vertical: 'top',
+    horizontal: 'right'
+  }
+});

package/dist/esm/components/UTDatePicker/versions/V0/index.js

@@ -0,0 +1,205 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { arrayOf, bool, node, object, shape, string } from 'prop-types';
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DayjsUtils from '@date-io/dayjs';
+import dayjs from 'dayjs';
+import es from 'dayjs/locale/es';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import isBetween from 'dayjs/plugin/isBetween';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import isEmpty from 'lodash/isEmpty';
+import UTLabel from '../../../UTLabel';
+import UTFieldLabel from '../../../UTFieldLabel';
+import WithTheme from '../../../WithTheme';
+import { buttonTypes } from '../../../../types/buttonTypes';
+import { inputPropTypes, metaPropTypes, fieldType } from '../../../../types/formTypes';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import UTValidation from '../../../UTValidation';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+var CalendarIcon = function CalendarIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    d: "M8 15c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1h-4c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H6c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M6 6h1v1c0 .55.45 1 1 1s1-.45 1-1V6h6v1c0 .55.45 1 1 1s1-.45 1-1V6h1c.551 0 1 .449 1 1v4H5V7c0-.551.449-1 1-1m12-2h-1V3c0-.55-.45-1-1-1s-1 .45-1 1v1H9V3c0-.55-.45-1-1-1s-1 .45-1 1v1H6C4.346 4 3 5.346 3 7v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V7c0-1.654-1.346-3-3-3",
+    id: "a"
+  })), /*#__PURE__*/React.createElement("use", {
+    fillRule: "nonzero",
+    xlinkHref: "#a",
+    transform: "translate(-3 -2)",
+    fill: "current"
+  }));
+};
+CalendarIcon.defaultProps = {
+  width: "18",
+  height: "20",
+  viewBox: "0 0 18 20",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+};
+import Day from './components/Day';
+import { retrieveStyle, materialTheme } from './theme';
+import { classesPropTypes } from './types';
+import { BUTTON_POSITION, INPUT_VARIANT, VARIANT, WRONG_DATE_FORMAT, MAX_DATE_MSG, MIN_DATE_MSG, OUTPUT_LABEL_MASK, iconAnchorProps } from './constants';
+import { dateMatchesFormat, getFinalDate, getMaxDate, getPastMonthDates } from './utils';
+dayjs.extend(customParseFormat);
+dayjs.extend(isBetween);
+class CustomUtils extends DayjsUtils {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "getCalendarHeaderText", date => date.format('MMMM'));
+  }
+}
+const UTDatePickerV0 = _ref => {
+  var _field$configuration, _field$configuration2, _field$configuration3;
+  let {
+    actions,
+    classes: themeClasses,
+    classNames,
+    CustomIcon,
+    dayFormat,
+    disableToolbar = true,
+    disabled,
+    field,
+    helpText,
+    iconAnchor,
+    input,
+    inputProps,
+    inputVariant = INPUT_VARIANT,
+    invalidDateMessage,
+    maxDateMessage,
+    minDateMessage,
+    meta = {},
+    pickerProps,
+    placeholder,
+    popoverProps,
+    range,
+    titleVariant,
+    variant,
+    withUpperTitle
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const configMask = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.date_mask) || OUTPUT_LABEL_MASK;
+  const onlyPastMonth = (field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
+  const avoidFutureDates = (field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
+  const {
+    maxDate,
+    minDate
+  } = onlyPastMonth ? getPastMonthDates() : avoidFutureDates ? getMaxDate() : range || pickerProps || {};
+  const [pickedDate, setPickedDate] = useState(null);
+  const [internalError, setInternalError] = useState(null);
+  const handleChange = date => {
+    const finalDate = getFinalDate({
+      date,
+      maxDate,
+      minDate
+    });
+    setPickedDate(finalDate);
+    const newValue = dayjs(finalDate, OUTPUT_LABEL_MASK, true);
+    if (newValue.isValid()) input.onChange(newValue.format(configMask));else input.onChange('');
+  };
+  useEffect(() => {
+    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if (dateMatchesFormat(input.value, configMask)) setPickedDate(dayjs(input.value, configMask));
+  }, [input.value]);
+  const renderDay = (date, _, dayInCurrentMonth) => /*#__PURE__*/React.createElement(Day, {
+    classes: classes,
+    dayFormat: dayFormat,
+    date: date,
+    pickedDate: pickedDate,
+    dayInCurrentMonth: dayInCurrentMonth
+  });
+  const handleError = error => setInternalError(error);
+  const handleRemoveError = () => setInternalError(null);
+  const OpenerIcon = CustomIcon || CalendarIcon;
+  const operenerIconReference = useRef();
+  const errorMessage = shouldShowErrors(meta) && (internalError || meta.error) || '';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withUpperTitle && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    actions: actions,
+    className: classes.upperTitle,
+    readOnly: field.read_only,
+    required: field.required,
+    size: titleVariant,
+    withMarkdown: true
+  }, field.title), /*#__PURE__*/React.createElement(MuiPickersUtilsProvider, {
+    utils: disableToolbar ? DayjsUtils : CustomUtils,
+    locale: es
+  }, /*#__PURE__*/React.createElement(KeyboardDatePicker, _extends({
+    disabled: disabled,
+    value: pickedDate,
+    label: inputVariant === 'standard' && (field === null || field === void 0 ? void 0 : field.title),
+    error: shouldShowErrors(meta),
+    helperText: /*#__PURE__*/React.createElement(React.Fragment, null, helpText && /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "gray",
+      variant: "small",
+      withMarkdown: true
+    }, helpText), !isEmpty(errorMessage) && /*#__PURE__*/React.createElement(UTValidation, {
+      validationData: formatErrorToValidation(errorMessage)
+    })),
+    onError: handleError,
+    onAccept: handleRemoveError,
+    disableToolbar: disableToolbar,
+    keyboardIcon: /*#__PURE__*/React.createElement("div", {
+      ref: operenerIconReference
+    }, /*#__PURE__*/React.createElement(OpenerIcon, {
+      className: disabled ? classes.disabledOpenerIcon : classes.openerIcon
+    })),
+    variant: variant || VARIANT,
+    InputProps: {
+      classes: {
+        root: classes.input,
+        notchedOutline: classes.notchedOutline
+      },
+      placeholder: inputVariant === 'outlined' && (placeholder || (field === null || field === void 0 ? void 0 : field.placeholder)) || undefined,
+      ...inputProps
+    },
+    invalidDateMessage: invalidDateMessage || WRONG_DATE_FORMAT,
+    inputVariant: inputVariant,
+    format: OUTPUT_LABEL_MASK,
+    maxDateMessage: maxDateMessage || MAX_DATE_MSG,
+    minDateMessage: minDateMessage || MIN_DATE_MSG,
+    InputAdornmentProps: {
+      position: BUTTON_POSITION
+    },
+    onChange: handleChange,
+    renderDay: renderDay,
+    PopoverProps: {
+      ...(iconAnchor ? iconAnchorProps(operenerIconReference) : {}),
+      ...popoverProps
+    }
+  }, pickerProps, {
+    minDate: minDate,
+    maxDate: maxDate
+  }))));
+};
+UTDatePickerV0.propTypes = {
+  actions: arrayOf(buttonTypes),
+  classNames: classesPropTypes,
+  classes: classesPropTypes,
+  CustomIcon: node,
+  dayFormat: string,
+  disableToolbar: bool,
+  disabled: bool,
+  field: fieldType,
+  helpText: string,
+  iconAnchor: bool,
+  input: inputPropTypes.isRequired,
+  inputFormat: string,
+  inputProps: object,
+  inputVariant: string,
+  invalidDateMessage: string,
+  maxDateMessage: string,
+  meta: metaPropTypes,
+  minDateMessage: string,
+  pickerProps: object,
+  placeholder: string,
+  popoverProps: object,
+  range: shape({
+    maxDate: string,
+    minDate: string
+  }),
+  titleVariant: string,
+  variant: string,
+  withUpperTitle: bool
+};
+export default WithTheme(retrieveStyle, materialTheme)(UTDatePickerV0);