@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,199 @@
-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:dataElement}=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=ORIENTATION.HORIZONTAL,paddingVertical:paddingVertical=PADDING.MEDIUM,prefix:prefix,prefixProps:prefixProps={},spacing:spacing=SPACING.MEDIUM,title:title,titleProps:titleProps={},transitionDuration:transitionDuration=ANIMATION.TRANSITION_DURATION}=_ref;const classes=useMemo(()=>mergeMultipleClassNames(styles,theme,classNames),[classNames,theme]),[isCollapsed,setIsCollapsed]=useState(!0),[isTransitioning,setIsTransitioning]=useState(!1),[contentHeight,setContentHeight]=useState("0px"),childrenRef=useRef(null),toggleCollapsed=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=isUTIcon(Icon)?UTIcon:Icon,DataComponent=isUTLabel(Data)?React.createElement(UTLabel,dataProps,Data):Data,showBadge=forceShowBadge||isString(badge)&&!isEmpty(badge)||isFinite(badge),{tooltip:titleTooltip}=titleProps||{},withTitleTooltip=isString(titleTooltip)&&!isEmpty(titleTooltip),TitleWrapper=withTitleTooltip?UTTooltip:Fragment,contentClasses="".concat(classes.content," ").concat(styles["spacing".concat(capitalize(spacing))]),infoClasses="".concat(classes.info," ").concat(orientation===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.createElement("div",{className:"".concat(classes.container," ").concat(area?classes.area:""," ").concat(classes["padding".concat(capitalize(paddingVertical))]),"data-testid":dataTestId?"".concat(dataTestId,".").concat(dataElement.container):void 0},React.createElement("div",{className:contentClasses},IconComponent&&React.createElement(IconComponent,_extends({name:Icon,colorTheme:"gray",size:"var(--UT-dataElement-icon-size, 1.5rem)"},iconProps)),React.createElement("div",{className:infoClasses},(prefix||title||showBadge)&&React.createElement("div",{className:classes.topInfo},prefix&&React.createElement(UTLabel,_extends({colorTheme:"gray"},prefixProps),prefix),title&&React.createElement(TitleWrapper,withTitleTooltip?{tippyProps:TOOLTIP_PROPS,content:titleTooltip}:{},React.createElement("div",null,React.createElement(UTLabel,_extends({colorTheme:"gray"},titleProps),title))),showBadge&&React.createElement(UTBadge,_extends({colorTheme:"accent",className:classes.badge},badgeProps),forceShowBadge?null:badge)),DataComponent&&DataComponent),action&&React.createElement(MainAction,_extends({dataTestId:dataTestId},action)),children&&React.createElement(UTButton,{classNames:{icon:iconCollapseButtonClasses},Icon:"IconChevronUp",onClick:toggleCollapsed,size:"small",variant:"text",dataTestId:dataTestId?"".concat(dataTestId,".").concat(dataElement.collapseButton):void 0})),children&&React.createElement("div",{style:{maxHeight:contentHeight},className:childrenClasses},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);
+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, shape, string } from 'prop-types';
+import React, { useCallback, useEffect, 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 UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
+import WithTheme from '../WithTheme';
+import UTIcon from '../UTIcon';
+import { capitalize, isUTIcon, isUTLabel } from '../../utils/componentUtils';
+import { mergeMultipleClassNames } from '../../utils/classesUtils';
+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,
+    expanded = false,
+    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(!expanded);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [contentHeight, setContentHeight] = useState(expanded ? 'none' : '0px');
+  const childrenRef = useRef(null);
+  const hasMountedRef = useRef(false);
+  const transitionTimeoutRef = useRef(null);
+  const transitionFrameRef = useRef(null);
+  const clearPendingTransition = useCallback(() => {
+    if (transitionTimeoutRef.current) {
+      clearTimeout(transitionTimeoutRef.current);
+      transitionTimeoutRef.current = null;
+    }
+    if (transitionFrameRef.current) {
+      cancelAnimationFrame(transitionFrameRef.current);
+      transitionFrameRef.current = null;
+    }
+  }, []);
+  const prepareContentTransition = useCallback(() => {
+    if (!childrenRef.current) return false;
+    clearPendingTransition();
+    setContentHeight("".concat(childrenRef.current.scrollHeight, "px"));
+    setIsTransitioning(true);
+    return true;
+  }, [clearPendingTransition]);
+  const openContent = useCallback(() => {
+    if (!prepareContentTransition()) return;
+    setIsCollapsed(false);
+    transitionTimeoutRef.current = setTimeout(() => {
+      setIsTransitioning(false);
+      setContentHeight('none');
+    }, transitionDuration);
+  }, [prepareContentTransition, transitionDuration]);
+  const closeContent = useCallback(() => {
+    if (!prepareContentTransition()) return;
+    transitionFrameRef.current = requestAnimationFrame(() => {
+      setContentHeight('0px');
+      setIsCollapsed(true);
+      transitionTimeoutRef.current = setTimeout(() => setIsTransitioning(false), transitionDuration);
+    });
+  }, [prepareContentTransition, transitionDuration]);
+  useEffect(() => clearPendingTransition, []);
+  const toggleCollapsed = useCallback(() => {
+    if (isCollapsed) openContent();else closeContent();
+  }, [isCollapsed, openContent, closeContent]);
+  useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+    if (expanded) openContent();else closeContent();
+  }, [expanded, openContent, closeContent]);
+  const handleInfoKeyDown = useCallback(event => {
+    if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      toggleCollapsed();
+    }
+  }, [toggleCollapsed]);
+  const stopDataPropagation = useCallback(event => event.stopPropagation(), []);
+  const IconComponent = isUTIcon(Icon) ? UTIcon : Icon;
+  const isDataLabel = isUTLabel(Data);
+  const DataComponent = isDataLabel ? /*#__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);
+  const infoContent = /*#__PURE__*/React.createElement(React.Fragment, null, (prefix || title || showBadge || children) && /*#__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))), children && /*#__PURE__*/React.createElement(UTIcon, {
+    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.createElement(UTBadge, _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.createElement("div", {
+    onClick: stopDataPropagation,
+    onKeyDown: stopDataPropagation
+  }, DataComponent)));
+  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, 1.5rem)"
+  }, iconProps)), children ? /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: "".concat(infoClasses, " ").concat(classes.clickable),
+    onClick: toggleCollapsed,
+    onKeyDown: handleInfoKeyDown,
+    "aria-expanded": !isCollapsed
+  }, infoContent) : /*#__PURE__*/React.createElement("div", {
+    className: infoClasses
+  }, infoContent), action && /*#__PURE__*/React.createElement(MainAction, _extends({
+    dataTestId: dataTestId
+  }, action))), children && /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxHeight: contentHeight
+    },
+    className: childrenClasses
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: childrenRef
+  }, children)));
+};
+UTDataElement.propTypes = {
+  action: object,
+  area: bool,
+  areaProps: shape({
+    colorTheme: string,
+    shade: string
+  }),
+  badge: string,
+  badgeProps: object,
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  Data: oneOfType([element, string]),
+  dataProps: object,
+  dataTestId: string,
+  expanded: bool,
+  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

@@ -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/esm/components/UTDataElement/theme.js

@@ -1 +1,28 @@
-import{COLOR_THEMES}from"../../constants/Palette";export const backgroundColor=(theme,area)=>{var _theme$Palette;const colorTheme=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"}};export const retrieveStyle=_ref=>{let{area:area,theme:theme}=_ref;return{area:{...backgroundColor(theme,area),paddingLeft:16,paddingRight:16,borderRadius:8}}};
+import { COLOR_THEMES, COLOR_SHADES, VALID_PALETTE_COLOR_THEMES } from '../../constants/Palette';
+export const backgroundColor = function (theme, area) {
+  var _theme$Palette, _theme$Palette2;
+  let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const requestedColorTheme = areaProps.colorTheme || COLOR_THEMES.light;
+  const colorTheme = VALID_PALETTE_COLOR_THEMES.has(requestedColorTheme) ? requestedColorTheme : 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 || (COLOR_THEMES.light === colorTheme ? COLOR_SHADES.shade03 : COLOR_SHADES.shade01);
+  return {
+    backgroundColor: area ? areaColor === null || areaColor === void 0 ? void 0 : areaColor[shade] : 'transparent'
+  };
+};
+export const retrieveStyle = _ref => {
+  let {
+    area,
+    theme,
+    areaProps
+  } = _ref;
+  const areaBackgroundColor = backgroundColor(theme, area, areaProps);
+  return {
+    area: {
+      ...areaBackgroundColor,
+      paddingLeft: 16,
+      paddingRight: 16,
+      borderRadius: 8
+    }
+  };
+};

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

@@ -1 +1,20 @@
-import React from"react";import{string}from"prop-types";import V0 from"./versions/V0";import V1 from"./versions/V1";const VERSIONS={V0:V0,V1:V1},UTDatePicker=_ref=>{let{version:version="V0",...props}=_ref;const Component=VERSIONS[version];return React.createElement(Component,props)};UTDatePicker.propTypes={version:string};export default UTDatePicker;
+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/components/Day/constants.js

@@ -1 +1 @@
-export const DAY_NUMBER_FORMAT="DD";
+export const DAY_NUMBER_FORMAT = 'DD';

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

@@ -1 +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:classes,dayFormat:dayFormat,date:date,pickedDate:pickedDate,dayInCurrentMonth:dayInCurrentMonth}=_ref;const todaySelected=isSelected(date,pickedDate);return React.createElement(IconButton,{className:"\n      ".concat(classes.day,"\n      ").concat(!dayInCurrentMonth&&classes.otherMonthDay,"\n      ").concat(todaySelected&&classes.selectedDay,"\n      ")},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 memo(Day);
+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

@@ -1 +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"}});
+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

@@ -1 +1,201 @@
-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(props){return React.createElement("svg",props,React.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"};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: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=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=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]),configMask=(null==field||null===(_field$configuration=field.configuration)||void 0===_field$configuration?void 0:_field$configuration.date_mask)||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?getPastMonthDates():avoidFutureDates?getMaxDate():range||pickerProps||{},[pickedDate,setPickedDate]=useState(null),[internalError,setInternalError]=useState(null);useEffect(()=>{!input.value&&null!=pickedDate&&pickedDate.isValid()?setPickedDate(null):dateMatchesFormat(input.value,configMask)&&setPickedDate(dayjs(input.value,configMask))},[input.value]);const OpenerIcon=CustomIcon||CalendarIcon,operenerIconReference=useRef(),errorMessage=shouldShowErrors(meta)&&(internalError||meta.error)||"";return React.createElement(React.Fragment,null,withUpperTitle&&React.createElement(UTFieldLabel,{actions:actions,className:classes.upperTitle,readOnly:field.read_only,required:field.required,size:titleVariant,withMarkdown:!0},field.title),React.createElement(MuiPickersUtilsProvider,{utils:disableToolbar?DayjsUtils:CustomUtils,locale:es},React.createElement(KeyboardDatePicker,_extends({disabled:disabled,"data-testid":dataTestId,value:pickedDate,label:"standard"===inputVariant&&(null==field?void 0:field.title),error:shouldShowErrors(meta),helperText:React.createElement(React.Fragment,null,helpText&&React.createElement(UTLabel,{colorTheme:"gray",variant:"small",withMarkdown:!0},helpText),!isEmpty(errorMessage)&&React.createElement(UTValidation,{validationData:formatErrorToValidation(errorMessage)})),onError:error=>setInternalError(error),onAccept:()=>setInternalError(null),disableToolbar:disableToolbar,keyboardIcon:React.createElement("div",{ref:operenerIconReference},React.createElement(OpenerIcon,{className:disabled?classes.disabledOpenerIcon:classes.openerIcon})),variant:variant||VARIANT,InputProps:{classes:{root:classes.input,notchedOutline:classes.notchedOutline},placeholder:"outlined"===inputVariant&&(placeholder||(null==field?void 0:field.placeholder))||void 0,...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:date=>{const finalDate=getFinalDate({date:date,maxDate:maxDate,minDate:minDate});setPickedDate(finalDate);const newValue=dayjs(finalDate,OUTPUT_LABEL_MASK,!0);newValue.isValid()?input.onChange(newValue.format(configMask)):input.onChange("")},renderDay:(date,_,dayInCurrentMonth)=>React.createElement(Day,{classes:classes,dayFormat:dayFormat,date:date,pickedDate:pickedDate,dayInCurrentMonth:dayInCurrentMonth}),PopoverProps:{...iconAnchor?iconAnchorProps(operenerIconReference):{},...popoverProps}},pickerProps,{minDate:minDate,maxDate:maxDate}))))};UTDatePickerV0.propTypes={actions:arrayOf(buttonTypes),classNames:classesPropTypes,classes:classesPropTypes,CustomIcon:node,dayFormat:string,dataTestId: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);
+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("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"
+};
+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,
+    dataTestId,
+    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,
+    "data-testid": dataTestId,
+    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,
+  dataTestId: 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);