@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTDataElement/index.js

@@ -1 +1,207 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _propTypes=require("prop-types"),_react=_interopRequireWildcard(require("react")),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_isString=_interopRequireDefault(require("lodash/isString")),_isFinite=_interopRequireDefault(require("lodash/isFinite")),_UTTooltip=_interopRequireDefault(require("../UTTooltip")),_UTBadge=_interopRequireDefault(require("../UTBadge")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_UTIcon=_interopRequireDefault(require("../UTIcon")),_componentUtils=require("../../utils/componentUtils"),_classesUtils=require("../../utils/classesUtils"),_UTButton=_interopRequireDefault(require("../UTButton")),_testIds=require("../../constants/testIds"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_constants=require("./constants"),_MainAction=_interopRequireDefault(require("./components/MainAction"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}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)}const{dataElement:dataElement}=_testIds.TEST_IDS,UTDataElement=_ref=>{let{action:action,area:area,badge:badge,badgeProps:badgeProps={},children:children,classes:theme,classNames:classNames,Data:Data,dataProps:dataProps={},dataTestId:dataTestId,forceShowBadge:forceShowBadge=!1,Icon:Icon,iconProps:iconProps={},orientation:orientation=_constants.ORIENTATION.HORIZONTAL,paddingVertical:paddingVertical=_constants.PADDING.MEDIUM,prefix:prefix,prefixProps:prefixProps={},spacing:spacing=_constants.SPACING.MEDIUM,title:title,titleProps:titleProps={},transitionDuration:transitionDuration=_constants.ANIMATION.TRANSITION_DURATION}=_ref;const classes=(0,_react.useMemo)(()=>(0,_classesUtils.mergeMultipleClassNames)(_stylesModule.default,theme,classNames),[classNames,theme]),[isCollapsed,setIsCollapsed]=(0,_react.useState)(!0),[isTransitioning,setIsTransitioning]=(0,_react.useState)(!1),[contentHeight,setContentHeight]=(0,_react.useState)("0px"),childrenRef=(0,_react.useRef)(null),toggleCollapsed=(0,_react.useCallback)(()=>{if(isCollapsed){if(childrenRef.current){const height=childrenRef.current.scrollHeight;setContentHeight("".concat(height,"px")),setIsTransitioning(!0),setIsCollapsed(!1),setTimeout(()=>{setIsTransitioning(!1),setContentHeight("none")},transitionDuration)}}else if(childrenRef.current){const height=childrenRef.current.scrollHeight;setContentHeight("".concat(height,"px")),setIsTransitioning(!0),requestAnimationFrame(()=>{setContentHeight("0px"),setIsCollapsed(!0),setTimeout(()=>setIsTransitioning(!1),transitionDuration)})}},[isCollapsed]),IconComponent=(0,_componentUtils.isUTIcon)(Icon)?_UTIcon.default:Icon,DataComponent=(0,_componentUtils.isUTLabel)(Data)?_react.default.createElement(_UTLabel.default,dataProps,Data):Data,showBadge=forceShowBadge||(0,_isString.default)(badge)&&!(0,_isEmpty.default)(badge)||(0,_isFinite.default)(badge),{tooltip:titleTooltip}=titleProps||{},withTitleTooltip=(0,_isString.default)(titleTooltip)&&!(0,_isEmpty.default)(titleTooltip),TitleWrapper=withTitleTooltip?_UTTooltip.default:_react.Fragment,contentClasses="".concat(classes.content," ").concat(_stylesModule.default["spacing".concat((0,_componentUtils.capitalize)(spacing))]),infoClasses="".concat(classes.info," ").concat(orientation===_constants.ORIENTATION.VERTICAL&&classes.vertical),iconCollapseButtonClasses="".concat(classes.iconCollapseButton," ").concat(isCollapsed&&classes.collapsed),childrenClasses="".concat(classes.children," ").concat(isCollapsed?classes.childrenCollapsed:classes.childrenExpanded," ").concat(isTransitioning?classes.childrenTransitioning:classes.childrenStatic);return _react.default.createElement("div",{className:"".concat(classes.container," ").concat(area?classes.area:""," ").concat(classes["padding".concat((0,_componentUtils.capitalize)(paddingVertical))]),"data-testid":dataTestId?"".concat(dataTestId,".").concat(dataElement.container):void 0},_react.default.createElement("div",{className:contentClasses},IconComponent&&_react.default.createElement(IconComponent,_extends({name:Icon,colorTheme:"gray",size:"var(--UT-dataElement-icon-size, 1.5rem)"},iconProps)),_react.default.createElement("div",{className:infoClasses},(prefix||title||showBadge)&&_react.default.createElement("div",{className:classes.topInfo},prefix&&_react.default.createElement(_UTLabel.default,_extends({colorTheme:"gray"},prefixProps),prefix),title&&_react.default.createElement(TitleWrapper,withTitleTooltip?{tippyProps:_constants.TOOLTIP_PROPS,content:titleTooltip}:{},_react.default.createElement("div",null,_react.default.createElement(_UTLabel.default,_extends({colorTheme:"gray"},titleProps),title))),showBadge&&_react.default.createElement(_UTBadge.default,_extends({colorTheme:"accent",className:classes.badge},badgeProps),forceShowBadge?null:badge)),DataComponent&&DataComponent),action&&_react.default.createElement(_MainAction.default,_extends({dataTestId:dataTestId},action)),children&&_react.default.createElement(_UTButton.default,{classNames:{icon:iconCollapseButtonClasses},Icon:"IconChevronUp",onClick:toggleCollapsed,size:"small",variant:"text",dataTestId:dataTestId?"".concat(dataTestId,".").concat(dataElement.collapseButton):void 0})),children&&_react.default.createElement("div",{style:{maxHeight:contentHeight},className:childrenClasses},_react.default.createElement("div",{ref:childrenRef},children)))};UTDataElement.propTypes={action:_propTypes.object,area:_propTypes.bool,badge:_propTypes.string,badgeProps:_propTypes.object,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),Data:(0,_propTypes.oneOfType)([_propTypes.element,_propTypes.string]),dataProps:_propTypes.object,dataTestId:_propTypes.string,forceShowBadge:_propTypes.bool,Icon:(0,_propTypes.oneOfType)([_propTypes.element,_propTypes.string]),iconProps:_propTypes.object,orientation:_propTypes.string,paddingVertical:_propTypes.string,prefix:_propTypes.string,prefixProps:_propTypes.object,spacing:_propTypes.string,title:_propTypes.string,titleProps:_propTypes.object,transitionDuration:_propTypes.number};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTDataElement);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _isString = _interopRequireDefault(require("lodash/isString"));
+var _isFinite = _interopRequireDefault(require("lodash/isFinite"));
+var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
+var _UTBadge = _interopRequireDefault(require("../UTBadge"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _componentUtils = require("../../utils/componentUtils");
+var _classesUtils = require("../../utils/classesUtils");
+var _testIds = require("../../constants/testIds");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants = require("./constants");
+var _MainAction = _interopRequireDefault(require("./components/MainAction"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+const {
+  dataElement
+} = _testIds.TEST_IDS;
+const UTDataElement = _ref => {
+  let {
+    action,
+    area,
+    badge,
+    badgeProps = {},
+    children,
+    classes: theme,
+    classNames,
+    Data,
+    dataProps = {},
+    dataTestId,
+    expanded = false,
+    forceShowBadge = false,
+    Icon,
+    iconProps = {},
+    orientation = _constants.ORIENTATION.HORIZONTAL,
+    paddingVertical = _constants.PADDING.MEDIUM,
+    prefix,
+    prefixProps = {},
+    spacing = _constants.SPACING.MEDIUM,
+    title,
+    titleProps = {},
+    transitionDuration = _constants.ANIMATION.TRANSITION_DURATION
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeMultipleClassNames)(_stylesModule.default, theme, classNames), [classNames, theme]);
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(!expanded);
+  const [isTransitioning, setIsTransitioning] = (0, _react.useState)(false);
+  const [contentHeight, setContentHeight] = (0, _react.useState)(expanded ? 'none' : '0px');
+  const childrenRef = (0, _react.useRef)(null);
+  const hasMountedRef = (0, _react.useRef)(false);
+  const transitionTimeoutRef = (0, _react.useRef)(null);
+  const transitionFrameRef = (0, _react.useRef)(null);
+  const clearPendingTransition = (0, _react.useCallback)(() => {
+    if (transitionTimeoutRef.current) {
+      clearTimeout(transitionTimeoutRef.current);
+      transitionTimeoutRef.current = null;
+    }
+    if (transitionFrameRef.current) {
+      cancelAnimationFrame(transitionFrameRef.current);
+      transitionFrameRef.current = null;
+    }
+  }, []);
+  const prepareContentTransition = (0, _react.useCallback)(() => {
+    if (!childrenRef.current) return false;
+    clearPendingTransition();
+    setContentHeight("".concat(childrenRef.current.scrollHeight, "px"));
+    setIsTransitioning(true);
+    return true;
+  }, [clearPendingTransition]);
+  const openContent = (0, _react.useCallback)(() => {
+    if (!prepareContentTransition()) return;
+    setIsCollapsed(false);
+    transitionTimeoutRef.current = setTimeout(() => {
+      setIsTransitioning(false);
+      setContentHeight('none');
+    }, transitionDuration);
+  }, [prepareContentTransition, transitionDuration]);
+  const closeContent = (0, _react.useCallback)(() => {
+    if (!prepareContentTransition()) return;
+    transitionFrameRef.current = requestAnimationFrame(() => {
+      setContentHeight('0px');
+      setIsCollapsed(true);
+      transitionTimeoutRef.current = setTimeout(() => setIsTransitioning(false), transitionDuration);
+    });
+  }, [prepareContentTransition, transitionDuration]);
+  (0, _react.useEffect)(() => clearPendingTransition, []);
+  const toggleCollapsed = (0, _react.useCallback)(() => {
+    if (isCollapsed) openContent();else closeContent();
+  }, [isCollapsed, openContent, closeContent]);
+  (0, _react.useEffect)(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+    if (expanded) openContent();else closeContent();
+  }, [expanded, openContent, closeContent]);
+  const handleInfoKeyDown = (0, _react.useCallback)(event => {
+    if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      toggleCollapsed();
+    }
+  }, [toggleCollapsed]);
+  const stopDataPropagation = (0, _react.useCallback)(event => event.stopPropagation(), []);
+  const IconComponent = (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon;
+  const isDataLabel = (0, _componentUtils.isUTLabel)(Data);
+  const DataComponent = isDataLabel ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, dataProps, Data) : Data;
+  const showBadge = forceShowBadge || (0, _isString.default)(badge) && !(0, _isEmpty.default)(badge) || (0, _isFinite.default)(badge);
+  const {
+    tooltip: titleTooltip
+  } = titleProps || {};
+  const withTitleTooltip = (0, _isString.default)(titleTooltip) && !(0, _isEmpty.default)(titleTooltip);
+  const TitleWrapper = withTitleTooltip ? _UTTooltip.default : _react.Fragment;
+  const contentClasses = "".concat(classes.content, " ").concat(_stylesModule.default["spacing".concat((0, _componentUtils.capitalize)(spacing))]);
+  const infoClasses = "".concat(classes.info, " ").concat(orientation === _constants.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);
+  const infoContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (prefix || title || showBadge || children) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.topInfo
+  }, prefix && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: "gray"
+  }, prefixProps), prefix), title && /*#__PURE__*/_react.default.createElement(TitleWrapper, withTitleTooltip ? {
+    tippyProps: _constants.TOOLTIP_PROPS,
+    content: titleTooltip
+  } : {}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    colorTheme: "gray"
+  }, titleProps), title))), children && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    className: iconCollapseButtonClasses,
+    colorTheme: "gray",
+    name: "IconChevronUp",
+    size: "var(--UT-dataElement-chevron-icon-size, 1.25rem)",
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.collapseButton) : undefined
+  }), showBadge && /*#__PURE__*/_react.default.createElement(_UTBadge.default, _extends({
+    colorTheme: "accent",
+    className: classes.badge
+  }, badgeProps), forceShowBadge ? null : badge)), DataComponent && (isDataLabel ? DataComponent :
+  /*#__PURE__*/
+  // Sin role="button": este div solo corta la propagación del click/keydown hacia el toggle de colapso, no es un control propio.
+  _react.default.createElement("div", {
+    onClick: stopDataPropagation,
+    onKeyDown: stopDataPropagation
+  }, DataComponent)));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.container, " ").concat(area ? classes.area : '', " ").concat(classes["padding".concat((0, _componentUtils.capitalize)(paddingVertical))]),
+    "data-testid": dataTestId ? "".concat(dataTestId, ".").concat(dataElement.container) : undefined
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: contentClasses
+  }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
+    name: Icon,
+    colorTheme: "gray",
+    size: "var(--UT-dataElement-icon-size, 1.5rem)"
+  }, iconProps)), children ? /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    className: "".concat(infoClasses, " ").concat(classes.clickable),
+    onClick: toggleCollapsed,
+    onKeyDown: handleInfoKeyDown,
+    "aria-expanded": !isCollapsed
+  }, infoContent) : /*#__PURE__*/_react.default.createElement("div", {
+    className: infoClasses
+  }, infoContent), action && /*#__PURE__*/_react.default.createElement(_MainAction.default, _extends({
+    dataTestId: dataTestId
+  }, action))), children && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxHeight: contentHeight
+    },
+    className: childrenClasses
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: childrenRef
+  }, children)));
+};
+UTDataElement.propTypes = {
+  action: _propTypes.object,
+  area: _propTypes.bool,
+  areaProps: (0, _propTypes.shape)({
+    colorTheme: _propTypes.string,
+    shade: _propTypes.string
+  }),
+  badge: _propTypes.string,
+  badgeProps: _propTypes.object,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  Data: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.string]),
+  dataProps: _propTypes.object,
+  dataTestId: _propTypes.string,
+  expanded: _propTypes.bool,
+  forceShowBadge: _propTypes.bool,
+  Icon: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.string]),
+  iconProps: _propTypes.object,
+  orientation: _propTypes.string,
+  paddingVertical: _propTypes.string,
+  prefix: _propTypes.string,
+  prefixProps: _propTypes.object,
+  spacing: _propTypes.string,
+  title: _propTypes.string,
+  titleProps: _propTypes.object,
+  transitionDuration: _propTypes.number
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTDataElement);

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

@@ -33,6 +33,7 @@
 }
 
 .info {
+  align-items: stretch;
   display: flex;
   flex: 1;
   flex-direction: row;
@@ -40,6 +41,10 @@
   justify-content: space-between;
 }
 
+.clickable {
+  cursor: pointer;
+}
+
 .vertical {
   flex-direction: column;
   grid-gap: var(--UT-dataElement-content-gap-y, 0.5rem);

package/dist/components/UTDataElement/theme.js

@@ -1 +1,36 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=exports.backgroundColor=void 0;var _Palette=require("../../constants/Palette");const backgroundColor=(theme,area)=>{var _theme$Palette;const colorTheme=_Palette.COLOR_THEMES.light,actionPaletteColors=(null===(_theme$Palette=theme.Palette)||void 0===_theme$Palette?void 0:_theme$Palette.actions)||theme.Palette,paletteColors=theme.Palette,areaColor=actionPaletteColors[colorTheme]||paletteColors[colorTheme];return{backgroundColor:area?areaColor["03"]:"transparent"}};exports.backgroundColor=backgroundColor;const retrieveStyle=_ref=>{let{area:area,theme:theme}=_ref;return{area:{...backgroundColor(theme,area),paddingLeft:16,paddingRight:16,borderRadius:8}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = exports.backgroundColor = void 0;
+var _Palette = require("../../constants/Palette");
+const backgroundColor = function (theme, area) {
+  var _theme$Palette, _theme$Palette2;
+  let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const requestedColorTheme = areaProps.colorTheme || _Palette.COLOR_THEMES.light;
+  const colorTheme = _Palette.VALID_PALETTE_COLOR_THEMES.has(requestedColorTheme) ? requestedColorTheme : _Palette.COLOR_THEMES.light;
+  const areaColor = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.actions) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette[colorTheme]) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2[colorTheme]);
+  const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? _Palette.COLOR_SHADES.shade03 : _Palette.COLOR_SHADES.shade01);
+  return {
+    backgroundColor: area ? areaColor === null || areaColor === void 0 ? void 0 : areaColor[shade] : 'transparent'
+  };
+};
+exports.backgroundColor = backgroundColor;
+const retrieveStyle = _ref => {
+  let {
+    area,
+    theme,
+    areaProps
+  } = _ref;
+  const areaBackgroundColor = backgroundColor(theme, area, areaProps);
+  return {
+    area: {
+      ...areaBackgroundColor,
+      paddingLeft: 16,
+      paddingRight: 16,
+      borderRadius: 8
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTDatePicker/index.js

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_V=_interopRequireDefault(require("./versions/V0")),_V2=_interopRequireDefault(require("./versions/V1"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VERSIONS={V0:_V.default,V1:_V2.default},UTDatePicker=_ref=>{let{version:version="V0",...props}=_ref;const Component=VERSIONS[version];return _react.default.createElement(Component,props)};UTDatePicker.propTypes={version:_propTypes.string};var _default=exports.default=UTDatePicker;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VERSIONS = {
+  V0: _V.default,
+  V1: _V2.default
+};
+const UTDatePicker = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = VERSIONS[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
+};
+UTDatePicker.propTypes = {
+  version: _propTypes.string
+};
+var _default = exports.default = UTDatePicker;

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

@@ -1 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DAY_NUMBER_FORMAT=void 0;const DAY_NUMBER_FORMAT=exports.DAY_NUMBER_FORMAT="DD";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DAY_NUMBER_FORMAT = void 0;
+const DAY_NUMBER_FORMAT = exports.DAY_NUMBER_FORMAT = 'DD';

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

@@ -1 +1,35 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_IconButton=_interopRequireDefault(require("@material-ui/core/IconButton")),_dayjs=_interopRequireDefault(require("dayjs")),_propTypes=require("prop-types"),_utils=require("../../utils"),_constants=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const Day=_ref=>{let{classes:classes,dayFormat:dayFormat,date:date,pickedDate:pickedDate,dayInCurrentMonth:dayInCurrentMonth}=_ref;const todaySelected=(0,_utils.isSelected)(date,pickedDate);return _react.default.createElement(_IconButton.default,{className:"\n      ".concat(classes.day,"\n      ").concat(!dayInCurrentMonth&&classes.otherMonthDay,"\n      ").concat(todaySelected&&classes.selectedDay,"\n      ")},_react.default.createElement("span",null," ",(0,_dayjs.default)(date).format(dayFormat||_constants.DAY_NUMBER_FORMAT)," "))};Day.propTypes={classes:(0,_propTypes.objectOf)(_propTypes.string),dayFormat:_propTypes.string,date:_propTypes.object,pickedDate:_propTypes.object,dayInCurrentMonth:_propTypes.bool};var _default=exports.default=(0,_react.memo)(Day);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _propTypes = require("prop-types");
+var _utils = require("../../utils");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const Day = _ref => {
+  let {
+    classes,
+    dayFormat,
+    date,
+    pickedDate,
+    dayInCurrentMonth
+  } = _ref;
+  const todaySelected = (0, _utils.isSelected)(date, pickedDate);
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    className: "\n      ".concat(classes.day, "\n      ").concat(!dayInCurrentMonth && classes.otherMonthDay, "\n      ").concat(todaySelected && classes.selectedDay, "\n      ")
+  }, /*#__PURE__*/_react.default.createElement("span", null, " ", (0, _dayjs.default)(date).format(dayFormat || _constants.DAY_NUMBER_FORMAT), " "));
+};
+Day.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  dayFormat: _propTypes.string,
+  date: _propTypes.object,
+  pickedDate: _propTypes.object,
+  dayInCurrentMonth: _propTypes.bool
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Day);

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

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

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

@@ -1 +1,209 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_pickers=require("@material-ui/pickers"),_dayjs=_interopRequireDefault(require("@date-io/dayjs")),_dayjs2=_interopRequireDefault(require("dayjs")),_es=_interopRequireDefault(require("dayjs/locale/es")),_customParseFormat=_interopRequireDefault(require("dayjs/plugin/customParseFormat")),_isBetween=_interopRequireDefault(require("dayjs/plugin/isBetween")),_form=require("@widergy/web-utils/lib/form"),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTFieldLabel=_interopRequireDefault(require("../../../UTFieldLabel")),_WithTheme=_interopRequireDefault(require("../../../WithTheme")),_buttonTypes=require("../../../../types/buttonTypes"),_formTypes=require("../../../../types/formTypes"),_classesUtils=require("../../../../utils/classesUtils"),_UTValidation=_interopRequireDefault(require("../../../UTValidation")),_utils=require("../../../UTValidation/utils"),_Day=_interopRequireDefault(require("./components/Day")),_theme=require("./theme"),_types=require("./types"),_constants=require("./constants"),_utils2=require("./utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}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)}var CalendarIcon=function(props){return _react.default.createElement("svg",props,_react.default.createElement("path",{d:"M5 13c.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 1H9c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H3c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M3 4h1v1c0 .55.45 1 1 1s1-.45 1-1V4h6v1c0 .55.45 1 1 1s1-.45 1-1V4h1c.551 0 1 .449 1 1v4H2V5c0-.551.449-1 1-1m12-2h-1V1c0-.55-.45-1-1-1s-1 .45-1 1v1H6V1c0-.55-.45-1-1-1S4 .45 4 1v1H3C1.346 2 0 3.346 0 5v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V5c0-1.654-1.346-3-3-3"}))};CalendarIcon.defaultProps={width:"18",height:"20",viewBox:"0 0 18 20",xmlns:"http://www.w3.org/2000/svg"},_dayjs2.default.extend(_customParseFormat.default),_dayjs2.default.extend(_isBetween.default);class CustomUtils extends _dayjs.default{constructor(){super(...arguments),_defineProperty(this,"getCalendarHeaderText",date=>date.format("MMMM"))}}const UTDatePickerV0=_ref=>{var _field$configuration,_field$configuration2,_field$configuration3;let{actions:actions,classes:themeClasses,classNames:classNames,CustomIcon:CustomIcon,dataTestId:dataTestId,dayFormat:dayFormat,disableToolbar:disableToolbar=!0,disabled:disabled,field:field,helpText:helpText,iconAnchor:iconAnchor,input:input,inputProps:inputProps,inputVariant:inputVariant=_constants.INPUT_VARIANT,invalidDateMessage:invalidDateMessage,maxDateMessage:maxDateMessage,minDateMessage:minDateMessage,meta:meta={},pickerProps:pickerProps,placeholder:placeholder,popoverProps:popoverProps,range:range,titleVariant:titleVariant,variant:variant,withUpperTitle:withUpperTitle}=_ref;const classes=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(themeClasses,classNames),[classNames]),configMask=(null==field||null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.date_mask)||_constants.OUTPUT_LABEL_MASK,onlyPastMonth=(null==field||null===(_field$configuration2=field.configuration)||void 0===_field$configuration2||null===(_field$configuration2=_field$configuration2.customDateValidations)||void 0===_field$configuration2||null===(_field$configuration2=_field$configuration2.onlyPastMonth)||void 0===_field$configuration2?void 0:_field$configuration2.active)||!1,avoidFutureDates=(null==field||null===(_field$configuration3=field.configuration)||void 0===_field$configuration3||null===(_field$configuration3=_field$configuration3.customDateValidations)||void 0===_field$configuration3||null===(_field$configuration3=_field$configuration3.avoidFutureDates)||void 0===_field$configuration3?void 0:_field$configuration3.active)||!1,{maxDate:maxDate,minDate:minDate}=onlyPastMonth?(0,_utils2.getPastMonthDates)():avoidFutureDates?(0,_utils2.getMaxDate)():range||pickerProps||{},[pickedDate,setPickedDate]=(0,_react.useState)(null),[internalError,setInternalError]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{!input.value&&null!=pickedDate&&pickedDate.isValid()?setPickedDate(null):(0,_utils2.dateMatchesFormat)(input.value,configMask)&&setPickedDate((0,_dayjs2.default)(input.value,configMask))},[input.value]);const OpenerIcon=CustomIcon||CalendarIcon,operenerIconReference=(0,_react.useRef)(),errorMessage=(0,_form.shouldShowErrors)(meta)&&(internalError||meta.error)||"";return _react.default.createElement(_react.default.Fragment,null,withUpperTitle&&_react.default.createElement(_UTFieldLabel.default,{actions:actions,className:classes.upperTitle,readOnly:field.read_only,required:field.required,size:titleVariant,withMarkdown:!0},field.title),_react.default.createElement(_pickers.MuiPickersUtilsProvider,{utils:disableToolbar?_dayjs.default:CustomUtils,locale:_es.default},_react.default.createElement(_pickers.KeyboardDatePicker,_extends({disabled:disabled,"data-testid":dataTestId,value:pickedDate,label:"standard"===inputVariant&&(null==field?void 0:field.title),error:(0,_form.shouldShowErrors)(meta),helperText:_react.default.createElement(_react.default.Fragment,null,helpText&&_react.default.createElement(_UTLabel.default,{colorTheme:"gray",variant:"small",withMarkdown:!0},helpText),!(0,_isEmpty.default)(errorMessage)&&_react.default.createElement(_UTValidation.default,{validationData:(0,_utils.formatErrorToValidation)(errorMessage)})),onError:error=>setInternalError(error),onAccept:()=>setInternalError(null),disableToolbar:disableToolbar,keyboardIcon:_react.default.createElement("div",{ref:operenerIconReference},_react.default.createElement(OpenerIcon,{className:disabled?classes.disabledOpenerIcon:classes.openerIcon})),variant:variant||_constants.VARIANT,InputProps:{classes:{root:classes.input,notchedOutline:classes.notchedOutline},placeholder:"outlined"===inputVariant&&(placeholder||(null==field?void 0:field.placeholder))||void 0,...inputProps},invalidDateMessage:invalidDateMessage||_constants.WRONG_DATE_FORMAT,inputVariant:inputVariant,format:_constants.OUTPUT_LABEL_MASK,maxDateMessage:maxDateMessage||_constants.MAX_DATE_MSG,minDateMessage:minDateMessage||_constants.MIN_DATE_MSG,InputAdornmentProps:{position:_constants.BUTTON_POSITION},onChange:date=>{const finalDate=(0,_utils2.getFinalDate)({date:date,maxDate:maxDate,minDate:minDate});setPickedDate(finalDate);const newValue=(0,_dayjs2.default)(finalDate,_constants.OUTPUT_LABEL_MASK,!0);newValue.isValid()?input.onChange(newValue.format(configMask)):input.onChange("")},renderDay:(date,_,dayInCurrentMonth)=>_react.default.createElement(_Day.default,{classes:classes,dayFormat:dayFormat,date:date,pickedDate:pickedDate,dayInCurrentMonth:dayInCurrentMonth}),PopoverProps:{...iconAnchor?(0,_constants.iconAnchorProps)(operenerIconReference):{},...popoverProps}},pickerProps,{minDate:minDate,maxDate:maxDate}))))};UTDatePickerV0.propTypes={actions:(0,_propTypes.arrayOf)(_buttonTypes.buttonTypes),classNames:_types.classesPropTypes,classes:_types.classesPropTypes,CustomIcon:_propTypes.node,dayFormat:_propTypes.string,dataTestId:_propTypes.string,disableToolbar:_propTypes.bool,disabled:_propTypes.bool,field:_formTypes.fieldType,helpText:_propTypes.string,iconAnchor:_propTypes.bool,input:_formTypes.inputPropTypes.isRequired,inputFormat:_propTypes.string,inputProps:_propTypes.object,inputVariant:_propTypes.string,invalidDateMessage:_propTypes.string,maxDateMessage:_propTypes.string,meta:_formTypes.metaPropTypes,minDateMessage:_propTypes.string,pickerProps:_propTypes.object,placeholder:_propTypes.string,popoverProps:_propTypes.object,range:(0,_propTypes.shape)({maxDate:_propTypes.string,minDate:_propTypes.string}),titleVariant:_propTypes.string,variant:_propTypes.string,withUpperTitle:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle,_theme.materialTheme)(UTDatePickerV0);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _pickers = require("@material-ui/pickers");
+var _dayjs = _interopRequireDefault(require("@date-io/dayjs"));
+var _dayjs2 = _interopRequireDefault(require("dayjs"));
+var _es = _interopRequireDefault(require("dayjs/locale/es"));
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
+var _form = require("@widergy/web-utils/lib/form");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _buttonTypes = require("../../../../types/buttonTypes");
+var _formTypes = require("../../../../types/formTypes");
+var _classesUtils = require("../../../../utils/classesUtils");
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
+var _utils = require("../../../UTValidation/utils");
+var _Day = _interopRequireDefault(require("./components/Day"));
+var _theme = require("./theme");
+var _types = require("./types");
+var _constants = require("./constants");
+var _utils2 = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+var CalendarIcon = function CalendarIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M5 13c.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 1H9c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H3c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M3 4h1v1c0 .55.45 1 1 1s1-.45 1-1V4h6v1c0 .55.45 1 1 1s1-.45 1-1V4h1c.551 0 1 .449 1 1v4H2V5c0-.551.449-1 1-1m12-2h-1V1c0-.55-.45-1-1-1s-1 .45-1 1v1H6V1c0-.55-.45-1-1-1S4 .45 4 1v1H3C1.346 2 0 3.346 0 5v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V5c0-1.654-1.346-3-3-3"
+  }));
+};
+CalendarIcon.defaultProps = {
+  width: "18",
+  height: "20",
+  viewBox: "0 0 18 20",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+_dayjs2.default.extend(_customParseFormat.default);
+_dayjs2.default.extend(_isBetween.default);
+class CustomUtils extends _dayjs.default {
+  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,
+    dataTestId,
+    dayFormat,
+    disableToolbar = true,
+    disabled,
+    field,
+    helpText,
+    iconAnchor,
+    input,
+    inputProps,
+    inputVariant = _constants.INPUT_VARIANT,
+    invalidDateMessage,
+    maxDateMessage,
+    minDateMessage,
+    meta = {},
+    pickerProps,
+    placeholder,
+    popoverProps,
+    range,
+    titleVariant,
+    variant,
+    withUpperTitle
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.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) || _constants.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 ? (0, _utils2.getPastMonthDates)() : avoidFutureDates ? (0, _utils2.getMaxDate)() : range || pickerProps || {};
+  const [pickedDate, setPickedDate] = (0, _react.useState)(null);
+  const [internalError, setInternalError] = (0, _react.useState)(null);
+  const handleChange = date => {
+    const finalDate = (0, _utils2.getFinalDate)({
+      date,
+      maxDate,
+      minDate
+    });
+    setPickedDate(finalDate);
+    const newValue = (0, _dayjs2.default)(finalDate, _constants.OUTPUT_LABEL_MASK, true);
+    if (newValue.isValid()) input.onChange(newValue.format(configMask));else input.onChange('');
+  };
+  (0, _react.useEffect)(() => {
+    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils2.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
+  }, [input.value]);
+  const renderDay = (date, _, dayInCurrentMonth) => /*#__PURE__*/_react.default.createElement(_Day.default, {
+    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 = (0, _react.useRef)();
+  const errorMessage = (0, _form.shouldShowErrors)(meta) && (internalError || meta.error) || '';
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
+    className: classes.upperTitle,
+    readOnly: field.read_only,
+    required: field.required,
+    size: titleVariant,
+    withMarkdown: true
+  }, field.title), /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
+    utils: disableToolbar ? _dayjs.default : CustomUtils,
+    locale: _es.default
+  }, /*#__PURE__*/_react.default.createElement(_pickers.KeyboardDatePicker, _extends({
+    disabled: disabled,
+    "data-testid": dataTestId,
+    value: pickedDate,
+    label: inputVariant === 'standard' && (field === null || field === void 0 ? void 0 : field.title),
+    error: (0, _form.shouldShowErrors)(meta),
+    helperText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: "gray",
+      variant: "small",
+      withMarkdown: true
+    }, helpText), !(0, _isEmpty.default)(errorMessage) && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+      validationData: (0, _utils.formatErrorToValidation)(errorMessage)
+    })),
+    onError: handleError,
+    onAccept: handleRemoveError,
+    disableToolbar: disableToolbar,
+    keyboardIcon: /*#__PURE__*/_react.default.createElement("div", {
+      ref: operenerIconReference
+    }, /*#__PURE__*/_react.default.createElement(OpenerIcon, {
+      className: disabled ? classes.disabledOpenerIcon : classes.openerIcon
+    })),
+    variant: variant || _constants.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 || _constants.WRONG_DATE_FORMAT,
+    inputVariant: inputVariant,
+    format: _constants.OUTPUT_LABEL_MASK,
+    maxDateMessage: maxDateMessage || _constants.MAX_DATE_MSG,
+    minDateMessage: minDateMessage || _constants.MIN_DATE_MSG,
+    InputAdornmentProps: {
+      position: _constants.BUTTON_POSITION
+    },
+    onChange: handleChange,
+    renderDay: renderDay,
+    PopoverProps: {
+      ...(iconAnchor ? (0, _constants.iconAnchorProps)(operenerIconReference) : {}),
+      ...popoverProps
+    }
+  }, pickerProps, {
+    minDate: minDate,
+    maxDate: maxDate
+  }))));
+};
+UTDatePickerV0.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
+  classNames: _types.classesPropTypes,
+  classes: _types.classesPropTypes,
+  CustomIcon: _propTypes.node,
+  dayFormat: _propTypes.string,
+  dataTestId: _propTypes.string,
+  disableToolbar: _propTypes.bool,
+  disabled: _propTypes.bool,
+  field: _formTypes.fieldType,
+  helpText: _propTypes.string,
+  iconAnchor: _propTypes.bool,
+  input: _formTypes.inputPropTypes.isRequired,
+  inputFormat: _propTypes.string,
+  inputProps: _propTypes.object,
+  inputVariant: _propTypes.string,
+  invalidDateMessage: _propTypes.string,
+  maxDateMessage: _propTypes.string,
+  meta: _formTypes.metaPropTypes,
+  minDateMessage: _propTypes.string,
+  pickerProps: _propTypes.object,
+  placeholder: _propTypes.string,
+  popoverProps: _propTypes.object,
+  range: (0, _propTypes.shape)({
+    maxDate: _propTypes.string,
+    minDate: _propTypes.string
+  }),
+  titleVariant: _propTypes.string,
+  variant: _propTypes.string,
+  withUpperTitle: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.materialTheme)(UTDatePickerV0);