@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js

@@ -0,0 +1,420 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extendedColorPalette = exports.default = exports.colorPalette = exports.ORIGINAL_COLOR_PICKER_COLUMNS = exports.EXPANDED_COLOR_PICKER_COLUMNS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _form = require("@atlaskit/form");
+var _typography = require("@atlaskit/theme/typography");
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _utils = require("../utils");
+var _RequiredIndicator = require("./common/RequiredIndicator");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+/*
+    NOTE: color used here are not yet in atlaskit code
+    this is part of extended color pack from ADG, which is yet to be release
+    at the time of writing this.
+
+    Colour sequence source: https://product-fabric.atlassian.net/browse/ED-12650?focusedCommentId=204875
+*/
+
+var colorPalette = exports.colorPalette = [{
+  label: 'Light Blue',
+  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
+},
+// 400
+{
+  label: 'Light Green',
+  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
+},
+// 400
+{
+  label: 'Light Yellow',
+  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
+},
+// 400
+{
+  label: 'Light Red',
+  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
+},
+// 400
+{
+  label: 'Light Purple',
+  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
+},
+// 400
+
+{
+  label: 'Blue',
+  value: "var(--ds-chart-blue-bold, #247FFF)"
+},
+// 600
+{
+  label: 'Green',
+  value: "var(--ds-chart-green-bold, #23A971)"
+},
+// 600
+{
+  label: 'Yellow',
+  value: "var(--ds-chart-yellow-bold, #FFBE33)"
+},
+// 600
+{
+  label: 'Red',
+  value: "var(--ds-chart-red-bold, #FC552C)"
+},
+// 600
+{
+  label: 'Purple',
+  value: "var(--ds-chart-purple-bold, #8B77EE)"
+},
+// 600
+
+{
+  label: 'Dark Blue',
+  value: "var(--ds-chart-blue-bolder, #0055CC)"
+},
+// 800
+{
+  label: 'Dark Green',
+  value: "var(--ds-chart-green-bolder, #177D52)"
+},
+// 800
+{
+  label: 'Dark Yellow',
+  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
+},
+// 800
+{
+  label: 'Dark Red',
+  value: "var(--ds-chart-red-bolder, #D32D03)"
+},
+// 800
+{
+  label: 'Dark Purple',
+  value: "var(--ds-chart-purple-bolder, #5A43D0)"
+},
+// 800
+
+{
+  label: 'Darker Blue',
+  value: "var(--ds-chart-blue-boldest, #003884)"
+},
+// 1000
+{
+  label: 'Darker Green',
+  value: "var(--ds-chart-green-boldest, #055C3F)"
+},
+// 1000
+{
+  label: 'Darker Yellow',
+  value: "var(--ds-chart-yellow-boldest, #946104)"
+},
+// 1000
+{
+  label: 'Darker Red',
+  value: "var(--ds-chart-red-boldest, #A32000)"
+},
+// 1000
+{
+  label: 'Darker Purple',
+  value: "var(--ds-chart-purple-boldest, #44368B)"
+} // 1000
+].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: _uiColor.DEFAULT_BORDER_COLOR
+  });
+});
+
+/**
+ * Extended chart colors.
+ * Decided here https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3477245015/Tokenising+table+charts+color
+ */
+var extendedColorPalette = exports.extendedColorPalette = [{
+  label: 'Darker Blue',
+  value: "var(--ds-chart-blue-boldest, #003884)"
+},
+// 1000
+{
+  label: 'Darker Teal',
+  value: "var(--ds-chart-teal-boldest, #206B74)"
+},
+// 1000
+{
+  label: 'Darker Green',
+  value: "var(--ds-chart-green-boldest, #055C3F)"
+},
+// 1000
+{
+  label: 'Darker Yellow',
+  value: "var(--ds-chart-yellow-boldest, #946104)"
+},
+// 1000
+{
+  label: 'Darker Orange',
+  value: "var(--ds-chart-orange-boldest, #974F0C)"
+},
+// 1000
+{
+  label: 'Darker Red',
+  value: "var(--ds-chart-red-boldest, #A32000)"
+},
+// 1000
+{
+  label: 'Darker Magenta',
+  value: "var(--ds-chart-magenta-boldest, #943D73)"
+},
+// 1000
+{
+  label: 'Darker Purple',
+  value: "var(--ds-chart-purple-boldest, #44368B)"
+},
+// 1000
+{
+  label: 'Darker Gray',
+  value: "var(--ds-chart-gray-boldest, #44546F)"
+},
+// 1000
+
+{
+  label: 'Dark Blue',
+  value: "var(--ds-chart-blue-bolder, #0055CC)"
+},
+// 800
+{
+  label: 'Dark Teal',
+  value: "var(--ds-chart-teal-bolder, #1D7F8C)"
+},
+// 800
+{
+  label: 'Dark Green',
+  value: "var(--ds-chart-green-bolder, #177D52)"
+},
+// 800
+{
+  label: 'Dark Yellow',
+  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
+},
+// 800
+{
+  label: 'Dark Orange',
+  value: "var(--ds-chart-orange-bolder, #B65C02)"
+},
+// 800
+{
+  label: 'Dark Red',
+  value: "var(--ds-chart-red-bolder, #D32D03)"
+},
+// 800
+{
+  label: 'Dark Magenta',
+  value: "var(--ds-chart-magenta-bolder, #CD519D)"
+},
+// 800
+{
+  label: 'Dark Purple',
+  value: "var(--ds-chart-purple-bolder, #5A43D0)"
+},
+// 800
+{
+  label: 'Dark Gray',
+  value: "var(--ds-chart-gray-bolder, #758195)"
+},
+// 800
+
+{
+  label: 'Blue',
+  value: "var(--ds-chart-blue-bold, #247FFF)"
+},
+// 600
+{
+  label: 'Teal',
+  value: "var(--ds-chart-teal-bold, #1D9AAA)"
+},
+// 600
+{
+  label: 'Green',
+  value: "var(--ds-chart-green-bold, #23A971)"
+},
+// 600
+{
+  label: 'Yellow',
+  value: "var(--ds-chart-yellow-bold, #FFBE33)"
+},
+// 600
+{
+  label: 'Orange',
+  value: "var(--ds-chart-orange-bold, #D97008)"
+},
+// 600
+{
+  label: 'Red',
+  value: "var(--ds-chart-red-bold, #FC552C)"
+},
+// 600
+{
+  label: 'Magenta',
+  value: "var(--ds-chart-magenta-bold, #DA62AC)"
+},
+// 600
+{
+  label: 'Purple',
+  value: "var(--ds-chart-purple-bold, #8B77EE)"
+},
+// 600
+{
+  label: 'Gray',
+  value: "var(--ds-chart-gray-bold, #8590A2)"
+},
+// 600
+
+{
+  label: 'Light Blue',
+  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
+},
+// 400
+{
+  label: 'Light Teal',
+  value: "var(--ds-background-accent-teal-subtle, #60C6D2)"
+},
+// 400
+{
+  label: 'Light Green',
+  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
+},
+// 400
+{
+  label: 'Light Yellow',
+  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
+},
+// 400
+{
+  label: 'Light Orange',
+  value: "var(--ds-background-accent-orange-subtle, #FAA53D)"
+},
+// 400
+{
+  label: 'Light Red',
+  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
+},
+// 400
+{
+  label: 'Light Magenta',
+  value: "var(--ds-background-accent-magenta-subtle, #E774BB)"
+},
+// 400
+{
+  label: 'Light Purple',
+  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
+},
+// 400
+{
+  label: 'Light Gray',
+  value: "var(--ds-background-accent-gray-subtle, #8993A5)"
+} // 400
+].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: _uiColor.DEFAULT_BORDER_COLOR
+  });
+});
+var colorPickerWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: "var(--ds-space-400, 32px)",
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+var colorPickerLabelStyles = (0, _react2.css)({
+  fontSize: "".concat(_typography.headingSizes.h400.size, "px"),
+  marginTop: 0
+});
+var EXPANDED_COLOR_PICKER_COLUMNS = exports.EXPANDED_COLOR_PICKER_COLUMNS = 9;
+var ORIGINAL_COLOR_PICKER_COLUMNS = exports.ORIGINAL_COLOR_PICKER_COLUMNS = 5;
+var ColorPicker = function ColorPicker(props) {
+  var name = props.name,
+    title = props.title,
+    currentColor = props.currentColor,
+    onChange = props.onChange,
+    onFieldChange = props.onFieldChange;
+  var onColorChange = function onColorChange(color) {
+    var colorValue = color.value;
+    onChange(colorValue);
+    onFieldChange(name, currentColor !== colorValue);
+  };
+  return (0, _react2.jsx)(_uiMenu.ColorPickerButton, {
+    title: title,
+    currentColor: currentColor,
+    onChange: onColorChange,
+    colorPalette: extendedColorPalette,
+    paletteColorTooltipMessages: _uiColor.chartsColorPaletteTooltipMessages,
+    cols: EXPANDED_COLOR_PICKER_COLUMNS,
+    alignX: "right",
+    placement: "ConfigPanel",
+    size: {
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
+    }
+    /* ED-18288 We align the palette to the right edge which is 1.5rem spacing away to avoid
+      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */,
+    absoluteOffset: {
+      right: Number(-1.5 * getCurrentRemSize() - 1)
+    }
+  });
+};
+var ColorPickerField = function ColorPickerField(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    onFieldChange = _ref.onFieldChange,
+    featureFlags = _ref.featureFlags;
+  var label = field.label,
+    defaultValue = field.defaultValue,
+    isRequired = field.isRequired;
+  return (0, _react2.jsx)(_form.Field, {
+    name: name,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    testId: "config-panel-color-picker-".concat(name),
+    validate: function validate(value) {
+      return (0, _utils.validate)(field, value || '');
+    }
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+      css: colorPickerWrapperStyles
+    }, (0, _react2.jsx)("label", {
+      css: colorPickerLabelStyles
+    }, label, isRequired &&
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("span", {
+      css: _RequiredIndicator.requiredIndicator,
+      "aria-hidden": "true"
+    }, "*")), (0, _react2.jsx)(ColorPicker, {
+      name: name,
+      title: label,
+      currentColor: fieldProps.value,
+      onChange: fieldProps.onChange,
+      onFieldChange: onFieldChange,
+      featureFlags: featureFlags
+    })), error && (0, _react2.jsx)(_FieldMessages.default, {
+      error: error,
+      description: ""
+    }));
+  });
+};
+var getCurrentRemSize = function getCurrentRemSize() {
+  var fallback = 16; // 16px is the default rem size for most browsers
+  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+    return fallback;
+  }
+  var value = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return value || fallback;
+};
+var _default = exports.default = ColorPickerField;

package/dist/cjs/ui/ConfigPanel/Fields/CustomSelect.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _extensions = require("@atlaskit/editor-common/extensions");
+var _form = require("@atlaskit/form");
+var _select = require("@atlaskit/select");
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _messages = require("../messages");
+var _utils = require("../utils");
+var _SelectItem = require("./SelectItem");
+var _UnhandledType = _interopRequireDefault(require("./UnhandledType"));
+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; }
+function FieldError(_ref) {
+  var name = _ref.name,
+    field = _ref.field;
+  var type = field.options.resolver.type;
+  return /*#__PURE__*/_react.default.createElement(_UnhandledType.default, {
+    key: name,
+    field: field,
+    errorMessage: "Field \"".concat(name, "\" can't be rendered. Missing resolver for \"").concat(type, "\".")
+  });
+}
+function CustomSelect(_ref2) {
+  var name = _ref2.name,
+    autoFocus = _ref2.autoFocus,
+    extensionManifest = _ref2.extensionManifest,
+    placeholder = _ref2.placeholder,
+    field = _ref2.field,
+    onFieldChange = _ref2.onFieldChange,
+    parameters = _ref2.parameters,
+    intl = _ref2.intl;
+  var fieldDefaultValue = field.defaultValue,
+    description = field.description,
+    isMultiple = field.isMultiple,
+    isRequired = field.isRequired,
+    label = field.label,
+    options = field.options;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    resolver = _useState4[0],
+    setResolver = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    defaultOptions = _useState6[0],
+    setDefaultOptions = _useState6[1];
+  var _useState7 = (0, _react.useState)(undefined),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    defaultValue = _useState8[0],
+    setDefaultValue = _useState8[1];
+  (0, _react.useEffect)(function () {
+    var cancel = false;
+    function fetchResolver() {
+      return _fetchResolver.apply(this, arguments);
+    }
+    function _fetchResolver() {
+      _fetchResolver = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _resolver, _options;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+              _context.prev = 1;
+              _context.next = 4;
+              return (0, _extensions.getCustomFieldResolver)(extensionManifest, field.options.resolver);
+            case 4:
+              _resolver = _context.sent;
+              if (!cancel) {
+                _context.next = 7;
+                break;
+              }
+              return _context.abrupt("return");
+            case 7:
+              setResolver(function () {
+                return _resolver;
+              });
+
+              // fetch the default values
+              _context.next = 10;
+              return _resolver(undefined, fieldDefaultValue, parameters);
+            case 10:
+              _options = _context.sent;
+              setDefaultOptions(_options);
+              if (!cancel) {
+                _context.next = 14;
+                break;
+              }
+              return _context.abrupt("return");
+            case 14:
+              // filter returned values to match the defaultValue
+              if (fieldDefaultValue && isMultiple) {
+                setDefaultValue(_options.filter(function (option) {
+                  return fieldDefaultValue.includes(option.value);
+                }));
+              }
+              if (fieldDefaultValue && !isMultiple) {
+                setDefaultValue(_options.find(function (option) {
+                  return fieldDefaultValue === option.value;
+                }));
+              }
+              _context.next = 21;
+              break;
+            case 18:
+              _context.prev = 18;
+              _context.t0 = _context["catch"](1);
+              // eslint-disable-next-line no-console
+              console.error(_context.t0);
+            case 21:
+              setLoading(false);
+            case 22:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[1, 18]]);
+      }));
+      return _fetchResolver.apply(this, arguments);
+    }
+    fetchResolver();
+    return function () {
+      cancel = true;
+    };
+  }, [extensionManifest, field.options.resolver, fieldDefaultValue, isMultiple, parameters]);
+  function _formatCreateLabel(value) {
+    if (!value) {
+      return null;
+    }
+    var message = intl.formatMessage(_messages.messages.createOption);
+    return "".concat(message, " \"").concat(value, "\"");
+  }
+  var isCreatable = options.isCreatable;
+  return /*#__PURE__*/_react.default.createElement(_form.Field, {
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    validate: function validate(value) {
+      return (0, _utils.validate)(field, value);
+    },
+    testId: "config-panel-custom-select-".concat(name)
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps,
+      error = _ref3.error;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, resolver && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.AsyncCreatableSelect, (0, _extends2.default)({}, fieldProps, {
+      onChange: function onChange(value) {
+        fieldProps.onChange(value);
+        // We assume onChange is called whenever values actually changed
+        // for isDirty
+        onFieldChange(name, true);
+      }
+      // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
+      ,
+      isMulti: isMultiple || false,
+      isClearable: true,
+      isValidNewOption: function isValidNewOption(value) {
+        return !!(isCreatable && value);
+      },
+      validationState: error ? 'error' : 'default',
+      defaultOptions: defaultOptions,
+      formatCreateLabel: function formatCreateLabel(value) {
+        return _formatCreateLabel(value);
+      },
+      formatOptionLabel: _SelectItem.formatOptionLabel,
+      loadOptions: function loadOptions(searchTerm) {
+        return resolver(searchTerm, fieldDefaultValue, parameters);
+      },
+      autoFocus: autoFocus,
+      placeholder: placeholder
+    })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+      error: error,
+      description: description
+    })), !loading && !resolver && /*#__PURE__*/_react.default.createElement(FieldError, {
+      name: name,
+      field: field
+    }));
+  });
+}
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(CustomSelect);

package/dist/cjs/ui/ConfigPanel/Fields/Date.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _datetimePicker = require("@atlaskit/datetime-picker");
+var _form = require("@atlaskit/form");
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _utils = require("../utils");
+function Date(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    autoFocus = _ref.autoFocus,
+    onFieldChange = _ref.onFieldChange,
+    placeholder = _ref.placeholder,
+    intl = _ref.intl;
+  var label = field.label,
+    description = field.description,
+    defaultValue = field.defaultValue,
+    isRequired = field.isRequired;
+  return /*#__PURE__*/_react.default.createElement(_form.Field, {
+    name: name,
+    label: label,
+    defaultValue: defaultValue,
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return (0, _utils.validate)(field, value);
+    },
+    testId: "config-panel-date-picker-".concat(name)
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_datetimePicker.DatePicker, (0, _extends2.default)({}, fieldProps, {
+      autoFocus: autoFocus,
+      onBlur: function onBlur() {
+        fieldProps.onBlur();
+      },
+      onChange: function onChange(value) {
+        fieldProps.onChange(value);
+        onFieldChange(name, true);
+      },
+      locale: intl.locale,
+      placeholder: placeholder
+    })), /*#__PURE__*/_react.default.createElement(_FieldMessages.default, {
+      error: error,
+      description: description
+    }));
+  });
+}
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(Date);