@telefonica/mistica 10.8.1 → 10.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [10.9.0](https://github.com/Telefonica/mistica-web/compare/v10.8.1...v10.9.0) (2021-10-21)
+
+
+### Features
+
+* **MonthField:** new form field to select months ([#356](https://github.com/Telefonica/mistica-web/issues/356)) ([1a949a5](https://github.com/Telefonica/mistica-web/commit/1a949a5fa4d2f9e7a0141afd7c920741faf36c49))
+
 ## [10.8.1](https://github.com/Telefonica/mistica-web/compare/v10.8.0...v10.8.1) (2021-10-19)
 
 

package/dist/date-field.js

@@ -23,6 +23,8 @@ var _time = require("./utils/time");
 
 var _hooks = require("./hooks");
 
+var _platform = require("./utils/platform");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -112,6 +114,11 @@ var DateField = function DateField(_ref) {
   };
 
   var hasNativePicker = React.useMemo(function () {
+    if ((0, _platform.isFirefox)()) {
+      // disabled in firefox because it shows a close button over the icon and can't be styled
+      return false;
+    }
+
     return (0, _dom.isInputTypeSupported)('date');
   }, []);
 
@@ -180,6 +187,7 @@ var DateField = function DateField(_ref) {
   return /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: nativePicker
   }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
     isValidDate: function isValidDate(currentDate) {
       return isInRange((0, _time.getLocalDateString)(currentDate.toDate()));
     }

package/dist/date-time-field.js

@@ -21,6 +21,8 @@ var _time = require("./utils/time");
 
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
 
+var _platform = require("./utils/platform");
+
 var _hooks = require("./hooks");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -108,6 +110,11 @@ var FormDateField = function FormDateField(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var hasNativePicker = React.useMemo(function () {
+    if ((0, _platform.isFirefox)()) {
+      // disabled for firefox because the picker has no option to select time
+      return false;
+    }
+
     return (0, _dom.isInputTypeSupported)('datetime-local');
   }, []);
 
@@ -182,6 +189,7 @@ var FormDateField = function FormDateField(_ref) {
   return /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: nativePicker
   }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
     withTime: true,
     isValidDate: function isValidDate(currentDate) {
       return isInRange((0, _time.getLocalDateTimeString)(currentDate.toDate()));

package/dist/date-time-picker.d.ts

@@ -5,6 +5,7 @@ export interface DateTimePickerProps extends CommonFormFieldProps {
     inputRef: (field: HTMLInputElement | null) => void;
     isValidDate?: (currentDate: Moment.Moment, selectedDate: Moment.Moment) => boolean;
     withTime?: boolean;
+    mode?: 'year-month';
 }
 declare const DateTimePicker: React.FC<DateTimePickerProps>;
 export default DateTimePicker;

package/dist/date-time-picker.js

@@ -27,13 +27,15 @@ var _jss = require("./jss");
 
 var _hooks = require("./hooks");
 
+var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _excluded = ["withTime", "isValidDate"];
+var _excluded = ["withTime", "mode", "isValidDate", "optional"];
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -344,7 +346,9 @@ var useStyles = (0, _jss.createUseStyles)(function () {
 
 var DateTimePicker = function DateTimePicker(_ref) {
   var withTime = _ref.withTime,
+      mode = _ref.mode,
       isValidDate = _ref.isValidDate,
+      optional = _ref.optional,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useState = React.useState(false),
@@ -353,20 +357,17 @@ var DateTimePicker = function DateTimePicker(_ref) {
       setShowPicker = _React$useState2[1];
 
   var classes = useStyles();
+
+  var _useTheme = (0, _hooks.useTheme)(),
+      texts = _useTheme.texts;
+
   var fieldRef = React.useRef(null);
 
   var _useElementDimensions = (0, _hooks.useElementDimensions)(),
       pickerContainerHeight = _useElementDimensions.height,
       pickerContainerRef = _useElementDimensions.ref;
 
-  var onFocus = function onFocus(event) {
-    var _rest$onFocus;
-
-    setShowPicker(true);
-    (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, event);
-  };
-
-  var getCalendarContainerStyles = function getCalendarContainerStyles() {
+  var getPickerContainerStyles = function getPickerContainerStyles() {
     var _fieldRef$current;
 
     var _ref2 = ((_fieldRef$current = fieldRef.current) === null || _fieldRef$current === void 0 ? void 0 : _fieldRef$current.getBoundingClientRect()) || {},
@@ -399,8 +400,20 @@ var DateTimePicker = function DateTimePicker(_ref) {
     return value ? new Date(value) : undefined;
   };
 
+  var formatMoment = function formatMoment(moment) {
+    if (withTime) {
+      return moment.format('yyyy-MM-DD HH:mm');
+    }
+
+    if (mode === 'year-month') {
+      return moment.format('yyyy-MM');
+    }
+
+    return moment.format('yyyy-MM-DD');
+  };
+
   var setValue = function setValue(moment) {
-    var value = typeof moment === 'string' ? moment : moment.format(withTime ? 'yyyy-MM-DD HH:mm' : 'yyyy-MM-DD');
+    var value = typeof moment === 'string' ? moment : formatMoment(moment);
 
     if (fieldRef.current) {
       var _rest$onChange;
@@ -410,12 +423,21 @@ var DateTimePicker = function DateTimePicker(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_textFieldBase.default, _extends({}, rest, {
-    type: "text",
-    autoComplete: "off",
-    onFocus: onFocus,
-    shrinkLabel: !!getValue(),
-    endIcon: /*#__PURE__*/React.createElement(_iconButton.default, {
+  var renderEndIcon = function renderEndIcon() {
+    if (getValue() && optional) {
+      return /*#__PURE__*/React.createElement(_iconButton.default, {
+        "aria-label": texts.clearButton,
+        size: 32,
+        onPress: function onPress(event) {
+          event.stopPropagation();
+          setValue('');
+        }
+      }, /*#__PURE__*/React.createElement(_iconCloseRegular.default, {
+        size: 24
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(_iconButton.default, {
       "aria-label": "",
       size: 32,
       onPress: function onPress() {
@@ -423,7 +445,18 @@ var DateTimePicker = function DateTimePicker(_ref) {
       }
     }, /*#__PURE__*/React.createElement(_iconCalendarRegular.default, {
       size: 24
-    })),
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_textFieldBase.default, _extends({}, rest, {
+    style: {
+      cursor: 'default'
+    },
+    required: !optional,
+    type: "text",
+    autoComplete: "off",
+    shrinkLabel: !!getValue(),
+    endIcon: renderEndIcon(),
     inputRef: function inputRef(e) {
       var _rest$inputRef;
 
@@ -435,7 +468,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       return setShowPicker(true);
     },
     onClick: function onClick() {
-      return setShowPicker(true);
+      setShowPicker(true);
     }
   })), showPicker && /*#__PURE__*/React.createElement(_overlay.default, {
     onPress: function onPress(e) {
@@ -445,11 +478,13 @@ var DateTimePicker = function DateTimePicker(_ref) {
     disableScroll: true
   }, /*#__PURE__*/React.createElement("div", {
     ref: pickerContainerRef,
-    style: getCalendarContainerStyles(),
+    style: getPickerContainerStyles(),
     className: classes.reactDatePicker
   }, /*#__PURE__*/React.createElement(_reactDatetime.default, {
-    initialValue: getValue(),
+    initialViewMode: mode === 'year-month' ? 'months' : undefined,
+    dateFormat: mode === 'year-month' ? 'YYYY-MM' : undefined,
     timeFormat: withTime ? 'HH:mm' : false,
+    initialValue: getValue(),
     locale: browserLocale,
     input: false,
     onChange: setValue,

package/dist/date-time-picker.js.flow

@@ -9,6 +9,7 @@ export type DateTimePickerProps = {|
   inputRef: (field: HTMLInputElement | null) => void,
   isValidDate?: (currentDate: Moment, selectedDate: Moment) => boolean,
   withTime?: boolean,
+  mode?: "year-month",
 |};
 declare var DateTimePicker: React.ComponentType<DateTimePickerProps>;
 declare export default typeof DateTimePicker;

package/dist/decimal-field.d.ts

@@ -12,6 +12,7 @@ declare type DecimalInputProps = any;
 export declare const DecimalInput: React.FC<DecimalInputProps>;
 export interface DecimalFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
+    prefix?: React.ReactNode;
 }
 declare const DecimalField: React.FC<DecimalFieldProps>;
 export default DecimalField;

package/dist/decimal-field.js.flow

@@ -17,6 +17,7 @@ export type DecimalFieldProps = {|
   ...$Exact<CommonFormFieldProps>,
 
   onChangeValue?: (value: string, rawValue: string) => void,
+  prefix?: React.Node,
 |};
 declare var DecimalField: React.ComponentType<DecimalFieldProps>;
 declare export default typeof DecimalField;

package/dist/index.d.ts

@@ -66,6 +66,7 @@ export { default as CreditCardExpirationField } from './credit-card-expiration-f
 export { default as CreditCardFields } from './credit-card-fields';
 export { default as CvvField } from './cvv-field';
 export { default as DateField } from './date-field';
+export { default as MonthField } from './month-field';
 export { default as DateTimeField } from './date-time-field';
 export { default as IntegerField } from './integer-field';
 export { default as DecimalField } from './decimal-field';

package/dist/index.js

@@ -635,6 +635,12 @@ Object.defineProperty(exports, "DateField", {
     return _dateField.default;
   }
 });
+Object.defineProperty(exports, "MonthField", {
+  enumerable: true,
+  get: function get() {
+    return _monthField.default;
+  }
+});
 Object.defineProperty(exports, "DateTimeField", {
   enumerable: true,
   get: function get() {
@@ -7944,6 +7950,8 @@ var _cvvField = _interopRequireDefault(require("./cvv-field"));
 
 var _dateField = _interopRequireDefault(require("./date-field"));
 
+var _monthField = _interopRequireDefault(require("./month-field"));
+
 var _dateTimeField = _interopRequireDefault(require("./date-time-field"));
 
 var _integerField = _interopRequireDefault(require("./integer-field"));

package/dist/index.js.flow

@@ -109,6 +109,7 @@ declare export { default as CreditCardExpirationField } from "./credit-card-expi
 declare export { default as CreditCardFields } from "./credit-card-fields";
 declare export { default as CvvField } from "./cvv-field";
 declare export { default as DateField } from "./date-field";
+declare export { default as MonthField } from "./month-field";
 declare export { default as DateTimeField } from "./date-time-field";
 declare export { default as IntegerField } from "./integer-field";
 declare export { default as DecimalField } from "./decimal-field";

package/dist/month-field.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { CommonFormFieldProps } from './text-field-base';
+export interface DateFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+    min?: Date;
+    max?: Date;
+}
+declare const DateField: React.FC<DateFieldProps>;
+export default DateField;

package/dist/month-field.js

@@ -0,0 +1,192 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _formContext = require("./form-context");
+
+var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+
+var _dom = require("./utils/dom");
+
+var _environment = require("./utils/environment");
+
+var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
+
+var _time = require("./utils/time");
+
+var _hooks = require("./hooks");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _excluded = ["disabled", "error", "helperText", "name", "optional", "validate", "onChange", "onChangeValue", "onBlur", "value", "defaultValue", "min", "max"];
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var ReactDateTimePicker = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "date-time-picker" */
+  './date-time-picker');
+});
+
+var DateField = function DateField(_ref) {
+  var disabled = _ref.disabled,
+      error = _ref.error,
+      helperText = _ref.helperText,
+      name = _ref.name,
+      optional = _ref.optional,
+      validateProp = _ref.validate,
+      onChange = _ref.onChange,
+      onChangeValueProp = _ref.onChangeValue,
+      onBlur = _ref.onBlur,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      min = _ref.min,
+      max = _ref.max,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var processValue = function processValue(value) {
+    return value;
+  };
+
+  var hasNativePicker = React.useMemo(function () {
+    return (0, _dom.isInputTypeSupported)('month');
+  }, []);
+
+  var _useTheme = (0, _hooks.useTheme)(),
+      texts = _useTheme.texts;
+
+  var isInRange = function isInRange(value) {
+    if (min && value && value < (0, _time.getLocalYearMonthString)(min)) {
+      return false;
+    }
+
+    if (max && value && value > (0, _time.getLocalYearMonthString)(max)) {
+      return false;
+    }
+
+    return true;
+  };
+
+  var validate = function validate(value, rawValue) {
+    if (!isInRange(value)) {
+      return texts.formDateOutOfRangeError;
+    }
+
+    return validateProp === null || validateProp === void 0 ? void 0 : validateProp(value, rawValue);
+  };
+
+  var onChangeValue = function onChangeValue(value, rawValue) {
+    if (isInRange(value)) {
+      onChangeValueProp === null || onChangeValueProp === void 0 ? void 0 : onChangeValueProp(value, rawValue);
+    } // if not in range, onChangeValue is not called
+
+  };
+
+  var fieldProps = (0, _formContext.useFieldProps)({
+    name: name,
+    value: value,
+    defaultValue: defaultValue,
+    processValue: processValue,
+    helperText: helperText,
+    optional: optional,
+    error: error,
+    disabled: disabled,
+    onBlur: onBlur,
+    validate: validate,
+    onChange: onChange,
+    onChangeValue: onChangeValue
+  });
+  var nativePicker = /*#__PURE__*/React.createElement(_textFieldBase.default, _extends({}, rest, fieldProps, {
+    min: min ? (0, _time.getLocalYearMonthString)(min) : undefined,
+    max: max ? (0, _time.getLocalYearMonthString)(max) : undefined,
+    type: "month",
+    endIconOverlay: /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: 16,
+        right: 16,
+        pointerEvents: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(_iconCalendarRegular.default, null))
+  }));
+
+  if (hasNativePicker || (0, _environment.isServerSide)()) {
+    return nativePicker;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: nativePicker
+  }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
+    isValidDate: function isValidDate(currentDate) {
+      return isInRange((0, _time.getLocalYearMonthString)(currentDate.toDate()));
+    },
+    mode: "year-month"
+  })));
+};
+
+var _default = DateField;
+exports.default = _default;

package/dist/month-field.js.flow

@@ -0,0 +1,13 @@
+// @flow
+
+import * as React from "react";
+import type { CommonFormFieldProps } from "./text-field-base";
+export type DateFieldProps = {|
+  ...$Exact<CommonFormFieldProps>,
+
+  onChangeValue?: (value: string, rawValue: string) => void,
+  min?: Date,
+  max?: Date,
+|};
+declare var DateField: React.ComponentType<DateFieldProps>;
+declare export default typeof DateField;

package/dist/text-field-base.js

@@ -315,6 +315,10 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       // Chrome: hide value if not valid or focused
       // `opacity: 0` is needed when min/max is set and some parts of the date are disabled
       // be sure to check that case when updating these styles
+      '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
+        color: 'transparent',
+        opacity: 0
+      },
       '&[type="date"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
         color: 'transparent',
         opacity: 0
@@ -325,6 +329,9 @@ var useStyles = (0, _jss.createUseStyles)(function (theme) {
       },
       // Firefox: hide value if not valid or focused
       // Only apply when Firefox, otherwise it breaks styles in safari mobile
+      '&[type="month"]:not(:valid):not(:focus)': (0, _platform.isFirefox)() ? {
+        color: 'transparent'
+      } : {},
       '&[type="date"]:not(:valid):not(:focus)': (0, _platform.isFirefox)() ? {
         color: 'transparent'
       } : {},
@@ -439,7 +446,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref14, ref
   var hasLabel = !!label || !rest.required; // this shrinkLabel override is a workaround because I was unable to find a way to hide date
   // and date-time native placeholders when the input is not required
 
-  var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local') && !rest.required;
+  var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local' || rest.type === 'month') && !rest.required;
   var classes = useStyles({
     inputState: inputState,
     error: error,

package/dist/theme.d.ts

@@ -32,6 +32,7 @@ declare const TEXTS_ES: {
     openNavigationMenu: string;
     closeNavigationMenu: string;
     backNavigationBar: string;
+    clearButton: string;
 };
 export declare const getTexts: (locale: Locale) => typeof TEXTS_ES;
 export declare const dimensions: {

package/dist/theme.js

@@ -96,7 +96,8 @@ var TEXTS_ES = {
   menuLabelSuffix: 'menú',
   openNavigationMenu: 'Abrir menú de navegación',
   closeNavigationMenu: 'Cerrar menú de navegación',
-  backNavigationBar: 'Atrás'
+  backNavigationBar: 'Atrás',
+  clearButton: 'Borrar'
 };
 var TEXTS_EN = {
   expirationDatePlaceholder: 'MM/YY',
@@ -125,7 +126,8 @@ var TEXTS_EN = {
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Open navigation menu',
   closeNavigationMenu: 'Close navigation menu',
-  backNavigationBar: 'Back'
+  backNavigationBar: 'Back',
+  clearButton: 'Clear'
 };
 var TEXTS_DE = {
   expirationDatePlaceholder: 'MM/JJ',
@@ -154,7 +156,8 @@ var TEXTS_DE = {
   menuLabelSuffix: 'Menü',
   openNavigationMenu: 'Navigationsmenü öffnen',
   closeNavigationMenu: 'Navigationsmenü schließen',
-  backNavigationBar: 'Zurück'
+  backNavigationBar: 'Zurück',
+  clearButton: 'Löschen'
 };
 var TEXTS_PT = {
   expirationDatePlaceholder: 'MM/AA',
@@ -183,7 +186,8 @@ var TEXTS_PT = {
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Abrir menu de navegação',
   closeNavigationMenu: 'Fechar menu de navegação',
-  backNavigationBar: 'Voltar'
+  backNavigationBar: 'Voltar',
+  clearButton: 'Apagar'
 };
 
 var getTexts = function getTexts(locale) {

package/dist/theme.js.flow

@@ -34,6 +34,7 @@ declare var TEXTS_ES: {
   openNavigationMenu: string,
   closeNavigationMenu: string,
   backNavigationBar: string,
+  clearButton: string,
 };
 declare export var getTexts: (locale: Locale) => typeof TEXTS_ES;
 declare export var dimensions: {

package/dist/utils/time.d.ts

@@ -1,2 +1,3 @@
 export declare const getLocalDateString: (date: Date) => string;
+export declare const getLocalYearMonthString: (date: Date) => string;
 export declare const getLocalDateTimeString: (date: Date) => string;

package/dist/utils/time.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLocalDateTimeString = exports.getLocalDateString = void 0;
+exports.getLocalDateTimeString = exports.getLocalYearMonthString = exports.getLocalDateString = void 0;
 
 var getLocalDateString = function getLocalDateString(date) {
   var yyyy = date.getFullYear();
@@ -14,6 +14,14 @@ var getLocalDateString = function getLocalDateString(date) {
 
 exports.getLocalDateString = getLocalDateString;
 
+var getLocalYearMonthString = function getLocalYearMonthString(date) {
+  var yyyy = date.getFullYear();
+  var mm = String(date.getMonth() + 1).padStart(2, '0');
+  return "".concat(yyyy, "-").concat(mm);
+};
+
+exports.getLocalYearMonthString = getLocalYearMonthString;
+
 var getLocalDateTimeString = function getLocalDateTimeString(date) {
   var h = String(date.getHours()).padStart(2, '0');
   var m = String(date.getMinutes()).padStart(2, '0');

package/dist/utils/time.js.flow

@@ -1,4 +1,5 @@
 // @flow
 
 declare export var getLocalDateString: (date: Date) => string;
+declare export var getLocalYearMonthString: (date: Date) => string;
 declare export var getLocalDateTimeString: (date: Date) => string;

package/dist-es/date-field.js

@@ -14,6 +14,7 @@ import { isServerSide } from './utils/environment';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
 import { getLocalDateString } from './utils/time';
 import { useTheme } from './hooks';
+import { isFirefox } from './utils/platform';
 var ReactDateTimePicker = /*#__PURE__*/React.lazy(function () {
   return import(
   /* webpackChunkName: "date-time-picker" */
@@ -41,6 +42,11 @@ var DateField = function DateField(_ref) {
   };
 
   var hasNativePicker = React.useMemo(function () {
+    if (isFirefox()) {
+      // disabled in firefox because it shows a close button over the icon and can't be styled
+      return false;
+    }
+
     return isInputTypeSupported('date');
   }, []);
 
@@ -109,6 +115,7 @@ var DateField = function DateField(_ref) {
   return /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: nativePicker
   }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
     isValidDate: function isValidDate(currentDate) {
       return isInRange(getLocalDateString(currentDate.toDate()));
     }

package/dist-es/date-time-field.js

@@ -13,6 +13,7 @@ import { isInputTypeSupported } from './utils/dom';
 import { isServerSide } from './utils/environment';
 import { getLocalDateTimeString } from './utils/time';
 import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
+import { isFirefox } from './utils/platform';
 import { useTheme } from './hooks';
 var ReactDateTimePicker = /*#__PURE__*/React.lazy(function () {
   return import(
@@ -37,6 +38,11 @@ var FormDateField = function FormDateField(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var hasNativePicker = React.useMemo(function () {
+    if (isFirefox()) {
+      // disabled for firefox because the picker has no option to select time
+      return false;
+    }
+
     return isInputTypeSupported('datetime-local');
   }, []);
 
@@ -111,6 +117,7 @@ var FormDateField = function FormDateField(_ref) {
   return /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: nativePicker
   }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
     withTime: true,
     isValidDate: function isValidDate(currentDate) {
       return isInRange(getLocalDateTimeString(currentDate.toDate()));

package/dist-es/date-time-picker.js

@@ -1,4 +1,4 @@
-var _excluded = ["withTime", "isValidDate"];
+var _excluded = ["withTime", "mode", "isValidDate", "optional"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -27,14 +27,15 @@ import { DEFAULT_WIDTH } from './text-field-components';
 import IconButton from './icon-button';
 import { cancelEvent, createChangeEvent } from './utils/dom';
 import { createUseStyles } from './jss';
-import { useElementDimensions } from './hooks';
+import { useElementDimensions, useTheme } from './hooks';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+
 /**
  * Do not use this component!
  * Use DateField or FormDateTimeField
  *
  * This component is a fallback for browsers that don't support datetime-local or date inputs
  */
-
 var browserLocale = navigator.language.toLocaleLowerCase().split('-')[0];
 import(
 /* webpackChunkName: "moment-locale" */
@@ -223,7 +224,9 @@ var useStyles = createUseStyles(function () {
 
 var DateTimePicker = function DateTimePicker(_ref) {
   var withTime = _ref.withTime,
+      mode = _ref.mode,
       isValidDate = _ref.isValidDate,
+      optional = _ref.optional,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _React$useState = React.useState(false),
@@ -232,20 +235,17 @@ var DateTimePicker = function DateTimePicker(_ref) {
       setShowPicker = _React$useState2[1];
 
   var classes = useStyles();
+
+  var _useTheme = useTheme(),
+      texts = _useTheme.texts;
+
   var fieldRef = React.useRef(null);
 
   var _useElementDimensions = useElementDimensions(),
       pickerContainerHeight = _useElementDimensions.height,
       pickerContainerRef = _useElementDimensions.ref;
 
-  var onFocus = function onFocus(event) {
-    var _rest$onFocus;
-
-    setShowPicker(true);
-    (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, event);
-  };
-
-  var getCalendarContainerStyles = function getCalendarContainerStyles() {
+  var getPickerContainerStyles = function getPickerContainerStyles() {
     var _fieldRef$current;
 
     var _ref2 = ((_fieldRef$current = fieldRef.current) === null || _fieldRef$current === void 0 ? void 0 : _fieldRef$current.getBoundingClientRect()) || {},
@@ -278,8 +278,20 @@ var DateTimePicker = function DateTimePicker(_ref) {
     return value ? new Date(value) : undefined;
   };
 
+  var formatMoment = function formatMoment(moment) {
+    if (withTime) {
+      return moment.format('yyyy-MM-DD HH:mm');
+    }
+
+    if (mode === 'year-month') {
+      return moment.format('yyyy-MM');
+    }
+
+    return moment.format('yyyy-MM-DD');
+  };
+
   var setValue = function setValue(moment) {
-    var value = typeof moment === 'string' ? moment : moment.format(withTime ? 'yyyy-MM-DD HH:mm' : 'yyyy-MM-DD');
+    var value = typeof moment === 'string' ? moment : formatMoment(moment);
 
     if (fieldRef.current) {
       var _rest$onChange;
@@ -289,12 +301,21 @@ var DateTimePicker = function DateTimePicker(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextFieldBase, _extends({}, rest, {
-    type: "text",
-    autoComplete: "off",
-    onFocus: onFocus,
-    shrinkLabel: !!getValue(),
-    endIcon: /*#__PURE__*/React.createElement(IconButton, {
+  var renderEndIcon = function renderEndIcon() {
+    if (getValue() && optional) {
+      return /*#__PURE__*/React.createElement(IconButton, {
+        "aria-label": texts.clearButton,
+        size: 32,
+        onPress: function onPress(event) {
+          event.stopPropagation();
+          setValue('');
+        }
+      }, /*#__PURE__*/React.createElement(IconCloseRegular, {
+        size: 24
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": "",
       size: 32,
       onPress: function onPress() {
@@ -302,7 +323,18 @@ var DateTimePicker = function DateTimePicker(_ref) {
       }
     }, /*#__PURE__*/React.createElement(IconCalendarRegular, {
       size: 24
-    })),
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextFieldBase, _extends({}, rest, {
+    style: {
+      cursor: 'default'
+    },
+    required: !optional,
+    type: "text",
+    autoComplete: "off",
+    shrinkLabel: !!getValue(),
+    endIcon: renderEndIcon(),
     inputRef: function inputRef(e) {
       var _rest$inputRef;
 
@@ -314,7 +346,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
       return setShowPicker(true);
     },
     onClick: function onClick() {
-      return setShowPicker(true);
+      setShowPicker(true);
     }
   })), showPicker && /*#__PURE__*/React.createElement(Overlay, {
     onPress: function onPress(e) {
@@ -324,11 +356,13 @@ var DateTimePicker = function DateTimePicker(_ref) {
     disableScroll: true
   }, /*#__PURE__*/React.createElement("div", {
     ref: pickerContainerRef,
-    style: getCalendarContainerStyles(),
+    style: getPickerContainerStyles(),
     className: classes.reactDatePicker
   }, /*#__PURE__*/React.createElement(Datetime, {
-    initialValue: getValue(),
+    initialViewMode: mode === 'year-month' ? 'months' : undefined,
+    dateFormat: mode === 'year-month' ? 'YYYY-MM' : undefined,
     timeFormat: withTime ? 'HH:mm' : false,
+    initialValue: getValue(),
     locale: browserLocale,
     input: false,
     onChange: setValue,

package/dist-es/index.js

@@ -68,6 +68,7 @@ export { default as CreditCardExpirationField } from './credit-card-expiration-f
 export { default as CreditCardFields } from './credit-card-fields';
 export { default as CvvField } from './cvv-field';
 export { default as DateField } from './date-field';
+export { default as MonthField } from './month-field';
 export { default as DateTimeField } from './date-time-field';
 export { default as IntegerField } from './integer-field';
 export { default as DecimalField } from './decimal-field';

package/dist-es/month-field.js

@@ -0,0 +1,120 @@
+var _excluded = ["disabled", "error", "helperText", "name", "optional", "validate", "onChange", "onChangeValue", "onBlur", "value", "defaultValue", "min", "max"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import * as React from 'react';
+import { useFieldProps } from './form-context';
+import TextFieldBase from './text-field-base';
+import { isInputTypeSupported } from './utils/dom';
+import { isServerSide } from './utils/environment';
+import IconCalendarRegular from './generated/mistica-icons/icon-calendar-regular';
+import { getLocalYearMonthString } from './utils/time';
+import { useTheme } from './hooks';
+var ReactDateTimePicker = /*#__PURE__*/React.lazy(function () {
+  return import(
+  /* webpackChunkName: "date-time-picker" */
+  './date-time-picker');
+});
+
+var DateField = function DateField(_ref) {
+  var disabled = _ref.disabled,
+      error = _ref.error,
+      helperText = _ref.helperText,
+      name = _ref.name,
+      optional = _ref.optional,
+      validateProp = _ref.validate,
+      onChange = _ref.onChange,
+      onChangeValueProp = _ref.onChangeValue,
+      onBlur = _ref.onBlur,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      min = _ref.min,
+      max = _ref.max,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var processValue = function processValue(value) {
+    return value;
+  };
+
+  var hasNativePicker = React.useMemo(function () {
+    return isInputTypeSupported('month');
+  }, []);
+
+  var _useTheme = useTheme(),
+      texts = _useTheme.texts;
+
+  var isInRange = function isInRange(value) {
+    if (min && value && value < getLocalYearMonthString(min)) {
+      return false;
+    }
+
+    if (max && value && value > getLocalYearMonthString(max)) {
+      return false;
+    }
+
+    return true;
+  };
+
+  var validate = function validate(value, rawValue) {
+    if (!isInRange(value)) {
+      return texts.formDateOutOfRangeError;
+    }
+
+    return validateProp === null || validateProp === void 0 ? void 0 : validateProp(value, rawValue);
+  };
+
+  var onChangeValue = function onChangeValue(value, rawValue) {
+    if (isInRange(value)) {
+      onChangeValueProp === null || onChangeValueProp === void 0 ? void 0 : onChangeValueProp(value, rawValue);
+    } // if not in range, onChangeValue is not called
+
+  };
+
+  var fieldProps = useFieldProps({
+    name: name,
+    value: value,
+    defaultValue: defaultValue,
+    processValue: processValue,
+    helperText: helperText,
+    optional: optional,
+    error: error,
+    disabled: disabled,
+    onBlur: onBlur,
+    validate: validate,
+    onChange: onChange,
+    onChangeValue: onChangeValue
+  });
+  var nativePicker = /*#__PURE__*/React.createElement(TextFieldBase, _extends({}, rest, fieldProps, {
+    min: min ? getLocalYearMonthString(min) : undefined,
+    max: max ? getLocalYearMonthString(max) : undefined,
+    type: "month",
+    endIconOverlay: /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: 16,
+        right: 16,
+        pointerEvents: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(IconCalendarRegular, null))
+  }));
+
+  if (hasNativePicker || isServerSide()) {
+    return nativePicker;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: nativePicker
+  }, /*#__PURE__*/React.createElement(ReactDateTimePicker, _extends({}, rest, fieldProps, {
+    optional: optional,
+    isValidDate: function isValidDate(currentDate) {
+      return isInRange(getLocalYearMonthString(currentDate.toDate()));
+    },
+    mode: "year-month"
+  })));
+};
+
+export default DateField;

package/dist-es/text-field-base.js

@@ -150,6 +150,10 @@ var useStyles = createUseStyles(function (theme) {
       // Chrome: hide value if not valid or focused
       // `opacity: 0` is needed when min/max is set and some parts of the date are disabled
       // be sure to check that case when updating these styles
+      '&[type="month"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
+        color: 'transparent',
+        opacity: 0
+      },
       '&[type="date"]:not(:valid):not(:focus)::-webkit-datetime-edit': {
         color: 'transparent',
         opacity: 0
@@ -160,6 +164,9 @@ var useStyles = createUseStyles(function (theme) {
       },
       // Firefox: hide value if not valid or focused
       // Only apply when Firefox, otherwise it breaks styles in safari mobile
+      '&[type="month"]:not(:valid):not(:focus)': isFirefox() ? {
+        color: 'transparent'
+      } : {},
       '&[type="date"]:not(:valid):not(:focus)': isFirefox() ? {
         color: 'transparent'
       } : {},
@@ -274,7 +281,7 @@ var TextFieldBaseComponent = /*#__PURE__*/React.forwardRef(function (_ref14, ref
   var hasLabel = !!label || !rest.required; // this shrinkLabel override is a workaround because I was unable to find a way to hide date
   // and date-time native placeholders when the input is not required
 
-  var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local') && !rest.required;
+  var shrinkLabel = shrinkLabelProp || (rest.type === 'date' || rest.type === 'datetime-local' || rest.type === 'month') && !rest.required;
   var classes = useStyles({
     inputState: inputState,
     error: error,

package/dist-es/theme.js

@@ -34,7 +34,8 @@ var TEXTS_ES = {
   menuLabelSuffix: 'menú',
   openNavigationMenu: 'Abrir menú de navegación',
   closeNavigationMenu: 'Cerrar menú de navegación',
-  backNavigationBar: 'Atrás'
+  backNavigationBar: 'Atrás',
+  clearButton: 'Borrar'
 };
 var TEXTS_EN = {
   expirationDatePlaceholder: 'MM/YY',
@@ -63,7 +64,8 @@ var TEXTS_EN = {
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Open navigation menu',
   closeNavigationMenu: 'Close navigation menu',
-  backNavigationBar: 'Back'
+  backNavigationBar: 'Back',
+  clearButton: 'Clear'
 };
 var TEXTS_DE = {
   expirationDatePlaceholder: 'MM/JJ',
@@ -92,7 +94,8 @@ var TEXTS_DE = {
   menuLabelSuffix: 'Menü',
   openNavigationMenu: 'Navigationsmenü öffnen',
   closeNavigationMenu: 'Navigationsmenü schließen',
-  backNavigationBar: 'Zurück'
+  backNavigationBar: 'Zurück',
+  clearButton: 'Löschen'
 };
 var TEXTS_PT = {
   expirationDatePlaceholder: 'MM/AA',
@@ -121,7 +124,8 @@ var TEXTS_PT = {
   menuLabelSuffix: 'menu',
   openNavigationMenu: 'Abrir menu de navegação',
   closeNavigationMenu: 'Fechar menu de navegação',
-  backNavigationBar: 'Voltar'
+  backNavigationBar: 'Voltar',
+  clearButton: 'Apagar'
 };
 export var getTexts = function getTexts(locale) {
   var lang = locale.toLocaleLowerCase().split(/[-_]/)[0];

package/dist-es/utils/time.js

@@ -4,6 +4,11 @@ export var getLocalDateString = function getLocalDateString(date) {
   var dd = String(date.getDate()).padStart(2, '0');
   return "".concat(yyyy, "-").concat(mm, "-").concat(dd);
 };
+export var getLocalYearMonthString = function getLocalYearMonthString(date) {
+  var yyyy = date.getFullYear();
+  var mm = String(date.getMonth() + 1).padStart(2, '0');
+  return "".concat(yyyy, "-").concat(mm);
+};
 export var getLocalDateTimeString = function getLocalDateTimeString(date) {
   var h = String(date.getHours()).padStart(2, '0');
   var m = String(date.getMinutes()).padStart(2, '0');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.8.1",
+    "version": "10.9.0",
     "license": "MIT",
     "repository": {
         "type": "git",