@telefonica/mistica 10.5.1 → 10.9.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+# [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)
+
+
+### Bug Fixes
+
+* **blau:** some color bad naming ([#358](https://github.com/Telefonica/mistica-web/issues/358)) ([64a3a87](https://github.com/Telefonica/mistica-web/commit/64a3a87a23cdbb16ca60c0639976c5fe84275905))
+
+# [10.8.0](https://github.com/Telefonica/mistica-web/compare/v10.7.0...v10.8.0) (2021-10-18)
+
+
+### Features
+
+* **ButtonGroup:** new component (private) ([#351](https://github.com/Telefonica/mistica-web/issues/351)) ([fe00dd7](https://github.com/Telefonica/mistica-web/commit/fe00dd7372e6bec8222bf7456b28fb523d40d2c9))
+
+# [10.7.0](https://github.com/Telefonica/mistica-web/compare/v10.6.0...v10.7.0) (2021-10-18)
+
+
+### Bug Fixes
+
+* **colors:** fix some dark colors ([#354](https://github.com/Telefonica/mistica-web/issues/354)) ([7ecb12b](https://github.com/Telefonica/mistica-web/commit/7ecb12b502a4a634d4cd0686f205e448db3a7b7f))
+
+
+### Features
+
+* **ProgressBar:** allow custom color ([#353](https://github.com/Telefonica/mistica-web/issues/353)) ([1f7be87](https://github.com/Telefonica/mistica-web/commit/1f7be87b4c9297fa273f69b612333224f05750aa))
+
+# [10.6.0](https://github.com/Telefonica/mistica-web/compare/v10.5.1...v10.6.0) (2021-10-14)
+
+
+### Features
+
+* **Blau:** new skin ([#311](https://github.com/Telefonica/mistica-web/issues/311)) ([235017b](https://github.com/Telefonica/mistica-web/commit/235017bb80fd87956ce84257c2042862d53b6f85))
+
 ## [10.5.1](https://github.com/Telefonica/mistica-web/compare/v10.5.0...v10.5.1) (2021-10-05)
 
 

package/dist/button-group.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ButtonLink, ButtonLinkProps, ButtonPrimary, ButtonProps, ButtonSecondary } from './button';
+export interface ButtonGroupProps {
+    primaryButton?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    secondaryButton?: React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    link?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
+}
+declare const ButtonGroup: React.FC<ButtonGroupProps>;
+export default ButtonGroup;

package/dist/button-group.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _jss = require("./jss");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var buttonLayoutSpacing = 16;
+var buttonLinkPadding = 6;
+var useStyles = (0, _jss.createUseStyles)(function () {
+  return {
+    inline: {
+      display: 'inline-flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center'
+    },
+    container: {
+      marginTop: -buttonLayoutSpacing,
+      marginLeft: -buttonLayoutSpacing - buttonLinkPadding
+    },
+    buttons: {
+      marginLeft: buttonLinkPadding,
+      '& > div': {
+        marginTop: buttonLayoutSpacing,
+        marginLeft: buttonLayoutSpacing
+      }
+    },
+    link: {
+      marginTop: buttonLayoutSpacing,
+      marginLeft: buttonLayoutSpacing,
+      width: function width(_ref) {
+        var bothButtons = _ref.bothButtons;
+        return bothButtons ? '100%' : 'auto';
+      }
+    }
+  };
+});
+
+var ButtonGroup = function ButtonGroup(_ref2) {
+  var primaryButton = _ref2.primaryButton,
+      secondaryButton = _ref2.secondaryButton,
+      link = _ref2.link;
+  var anyAction = !!primaryButton || !!secondaryButton || !!link;
+  var bothButtons = !!primaryButton && !!secondaryButton;
+  var classes = useStyles({
+    bothButtons: bothButtons
+  });
+  return anyAction ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.inline, classes.container)
+  }, (primaryButton || secondaryButton) && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.inline, classes.buttons)
+  }, primaryButton && /*#__PURE__*/_react.default.createElement("div", null, primaryButton), secondaryButton && /*#__PURE__*/_react.default.createElement("div", null, secondaryButton)), link && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.link
+  }, link)) : null;
+};
+
+var _default = ButtonGroup;
+exports.default = _default;

package/dist/button-group.js.flow

@@ -0,0 +1,11 @@
+// @flow
+
+import * as React from "react";
+import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
+export type ButtonGroupProps = {|
+  primaryButton?: React.Element<typeof ButtonPrimary>,
+  secondaryButton?: React.Element<typeof ButtonSecondary>,
+  link?: React.Element<typeof ButtonLink>,
+|};
+declare var ButtonGroup: React.ComponentType<ButtonGroupProps>;
+declare export default typeof ButtonGroup;

package/dist/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { DataAttributes, TrackingEvent } from './utils/types';
 import type { Location } from 'history';
-export declare const BUTTON_MIN_WIDTH = 156;
+export declare const BUTTON_MIN_WIDTH = 136;
 interface CommonProps {
     children: React.ReactNode;
     className?: string;

package/dist/button.js

@@ -165,7 +165,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var BUTTON_MIN_WIDTH = 156;
+var BUTTON_MIN_WIDTH = 136;
 exports.BUTTON_MIN_WIDTH = BUTTON_MIN_WIDTH;
 var transitionTiming = '0.3s cubic-bezier(0.77, 0, 0.175, 1)';
 var BORDER_PX = 1.5;

package/dist/button.js.flow

@@ -3,7 +3,7 @@
 import * as React from "react";
 import type { DataAttributes, TrackingEvent } from "./utils/types";
 import type { Location } from "history";
-declare export var BUTTON_MIN_WIDTH: 156;
+declare export var BUTTON_MIN_WIDTH: 136;
 declare type CommonProps = {|
   children: React.Node,
   className?: string,

package/dist/callout.d.ts

@@ -6,7 +6,8 @@ declare type Props = {
     description: string;
     onClose?: () => void;
     icon?: React.ReactElement;
-    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary> | React.ReactElement<ButtonProps, typeof ButtonSecondary>;
+    button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
+    secondaryButton?: React.ReactElement<ButtonProps, typeof ButtonSecondary>;
     buttonLink?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     children?: void;
     'aria-label'?: string;

package/dist/callout.js

@@ -25,7 +25,7 @@ var _iconButton = _interopRequireDefault(require("./icon-button"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _inline = _interopRequireDefault(require("./inline"));
+var _buttonGroup = _interopRequireDefault(require("./button-group"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -72,24 +72,19 @@ var useStyles = (0, _jss.createUseStyles)(function (_ref) {
     },
     overInverse: {
       background: colors.backgroundContainer
-    },
-    actions: {
-      marginLeft: function marginLeft(_ref2) {
-        var needsButtonLinkAlignment = _ref2.needsButtonLinkAlignment;
-        return needsButtonLinkAlignment ? -6 : 0;
-      }
     }
   };
 });
 
-var Callout = function Callout(_ref3) {
-  var title = _ref3.title,
-      description = _ref3.description,
-      icon = _ref3.icon,
-      onClose = _ref3.onClose,
-      button = _ref3.button,
-      buttonLink = _ref3.buttonLink,
-      ariaLabel = _ref3['aria-label'];
+var Callout = function Callout(_ref2) {
+  var title = _ref2.title,
+      description = _ref2.description,
+      icon = _ref2.icon,
+      onClose = _ref2.onClose,
+      button = _ref2.button,
+      secondaryButton = _ref2.secondaryButton,
+      buttonLink = _ref2.buttonLink,
+      ariaLabel = _ref2['aria-label'];
   var needsButtonLinkAlignment = buttonLink && !button;
   var isInverse = (0, _themeVariantContext.useIsInverseVariant)();
   var classes = useStyles({
@@ -118,12 +113,11 @@ var Callout = function Callout(_ref3) {
     as: "p",
     regular: true,
     color: colors.textSecondary
-  }, description)), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
-    className: classes.actions
-  }, /*#__PURE__*/React.createElement(_inline.default, {
-    space: 16,
-    alignItems: "center"
-  }, button, buttonLink)))), onClose && /*#__PURE__*/React.createElement(_iconButton.default, {
+  }, description)), (button || secondaryButton || buttonLink) && /*#__PURE__*/React.createElement(_buttonGroup.default, {
+    primaryButton: button,
+    secondaryButton: secondaryButton,
+    link: buttonLink
+  }))), onClose && /*#__PURE__*/React.createElement(_iconButton.default, {
     size: 40,
     style: {
       display: 'flex',

package/dist/callout.js.flow

@@ -7,9 +7,8 @@ declare type Props = {
   description: string,
   onClose?: () => void,
   icon?: React.Element<any>,
-  button?:
-    | React.Element<typeof ButtonPrimary>
-    | React.Element<typeof ButtonSecondary>,
+  button?: React.Element<typeof ButtonPrimary>,
+  secondaryButton?: React.Element<typeof ButtonSecondary>,
   buttonLink?: React.Element<typeof ButtonLink>,
   "aria-label"?: string,
 };

package/dist/card.d.ts

@@ -25,7 +25,7 @@ declare type MediaCardProps = {
     description?: string;
     extra?: React.ReactNode;
     button?: React.ReactElement<ButtonProps, typeof ButtonPrimary>;
-    buttonLink?: React.ReactElement<ButtonProps, typeof ButtonLink>;
+    buttonLink?: React.ReactElement<ButtonLinkProps, typeof ButtonLink>;
     children?: void;
     'aria-label'?: string;
 };

package/dist/card.js

@@ -21,10 +21,10 @@ var _text = require("./text");
 
 var _jss = require("./jss");
 
-var _inline = _interopRequireDefault(require("./inline"));
-
 var _boxed = require("./boxed");
 
+var _buttonGroup = _interopRequireDefault(require("./button-group"));
+
 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); }
@@ -34,10 +34,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var useCardContentStyles = (0, _jss.createUseStyles)(function () {
   return {
     actions: {
-      marginLeft: function marginLeft(_ref) {
-        var needsButtonLinkAlignment = _ref.needsButtonLinkAlignment;
-        return needsButtonLinkAlignment ? -6 : 0;
-      },
       flex: 1,
       display: 'flex',
       alignItems: 'flex-end',
@@ -46,20 +42,17 @@ var useCardContentStyles = (0, _jss.createUseStyles)(function () {
   };
 });
 
-var CardContent = function CardContent(_ref2) {
-  var headline = _ref2.headline,
-      pretitle = _ref2.pretitle,
-      title = _ref2.title,
-      subtitle = _ref2.subtitle,
-      description = _ref2.description,
-      extra = _ref2.extra,
-      button = _ref2.button,
-      buttonLink = _ref2.buttonLink;
+var CardContent = function CardContent(_ref) {
+  var headline = _ref.headline,
+      pretitle = _ref.pretitle,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      description = _ref.description,
+      extra = _ref.extra,
+      button = _ref.button,
+      buttonLink = _ref.buttonLink;
   var theme = (0, _hooks.useTheme)();
-  var needsButtonLinkAlignment = buttonLink && !button;
-  var classes = useCardContentStyles({
-    needsButtonLinkAlignment: needsButtonLinkAlignment
-  });
+  var classes = useCardContentStyles();
 
   var renderHeadline = function renderHeadline() {
     if (!headline) {
@@ -97,10 +90,10 @@ var CardContent = function CardContent(_ref2) {
     color: theme.colors.textSecondary
   }, description)), extra && /*#__PURE__*/React.createElement("div", null, extra)), (button || buttonLink) && /*#__PURE__*/React.createElement("div", {
     className: classes.actions
-  }, /*#__PURE__*/React.createElement(_inline.default, {
-    space: 16,
-    alignItems: "center"
-  }, button, buttonLink)));
+  }, /*#__PURE__*/React.createElement(_buttonGroup.default, {
+    primaryButton: button,
+    link: buttonLink
+  })));
 };
 
 var useMediaCardStyles = (0, _jss.createUseStyles)(function () {
@@ -115,8 +108,8 @@ var useMediaCardStyles = (0, _jss.createUseStyles)(function () {
     },
     media: {
       width: '100%',
-      paddingTop: function paddingTop(_ref3) {
-        var media = _ref3.media;
+      paddingTop: function paddingTop(_ref2) {
+        var media = _ref2.media;
 
         if (media.height) {
           return media.height;
@@ -129,8 +122,8 @@ var useMediaCardStyles = (0, _jss.createUseStyles)(function () {
 
         return '56.25%'; // 16/9 aspect ratio
       },
-      backgroundImage: function backgroundImage(_ref4) {
-        var media = _ref4.media;
+      backgroundImage: function backgroundImage(_ref3) {
+        var media = _ref3.media;
         return "url(".concat(media.src, ")");
       },
       backgroundSize: 'cover',
@@ -146,16 +139,16 @@ var useMediaCardStyles = (0, _jss.createUseStyles)(function () {
   };
 });
 
-var MediaCard = function MediaCard(_ref5) {
-  var media = _ref5.media,
-      headline = _ref5.headline,
-      pretitle = _ref5.pretitle,
-      title = _ref5.title,
-      description = _ref5.description,
-      extra = _ref5.extra,
-      button = _ref5.button,
-      buttonLink = _ref5.buttonLink,
-      ariaLabel = _ref5['aria-label'];
+var MediaCard = function MediaCard(_ref4) {
+  var media = _ref4.media,
+      headline = _ref4.headline,
+      pretitle = _ref4.pretitle,
+      title = _ref4.title,
+      description = _ref4.description,
+      extra = _ref4.extra,
+      button = _ref4.button,
+      buttonLink = _ref4.buttonLink,
+      ariaLabel = _ref4['aria-label'];
   var classes = useMediaCardStyles({
     media: media
   });
@@ -194,17 +187,17 @@ var useDataCardStyles = (0, _jss.createUseStyles)(function () {
   };
 });
 
-var DataCard = function DataCard(_ref6) {
-  var icon = _ref6.icon,
-      headline = _ref6.headline,
-      title = _ref6.title,
-      subtitle = _ref6.subtitle,
-      description = _ref6.description,
-      extra = _ref6.extra,
-      button = _ref6.button,
-      buttonLink = _ref6.buttonLink,
-      dataAttributes = _ref6.dataAttributes,
-      ariaLabel = _ref6['aria-label'];
+var DataCard = function DataCard(_ref5) {
+  var icon = _ref5.icon,
+      headline = _ref5.headline,
+      title = _ref5.title,
+      subtitle = _ref5.subtitle,
+      description = _ref5.description,
+      extra = _ref5.extra,
+      button = _ref5.button,
+      buttonLink = _ref5.buttonLink,
+      dataAttributes = _ref5.dataAttributes,
+      ariaLabel = _ref5['aria-label'];
   var classes = useDataCardStyles();
   return /*#__PURE__*/React.createElement(_boxed.Boxed, {
     className: classes.boxed,

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;