@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

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

@@ -1,4 +1,8 @@
-import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, j as _slicedToArray, n as _createForOfIteratorHelper, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends, g as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.number.constructor.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -17,24 +21,48 @@ import Dropdown from '../dropdown/dropdown.js';
 import Icon from '../icon/icon.js';
 import { Button } from '../button/button.js';
 import Link from '../link/link.js';
-import { Size } from '../input/input.js';
+import { S as Size } from '../_helpers/input.js';
+import { I18nContext } from '../i18n/i18n-context.js';
 import DatePopup from './date-popup.js';
 import { dateType } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import formats from './formats.js';
-import DateInput from './date-input.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.string.iterator.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.weak-map.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.string.replace.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
 import '../global/dom.js';
+import 'core-js/modules/es.object.assign.js';
+import 'core-js/modules/es.array.filter.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.object.keys.js';
+import 'core-js/modules/es.set.js';
 import '../shortcuts/shortcuts.js';
 import '../shortcuts/core.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.string.match.js';
+import 'core-js/modules/es.array.find-index.js';
 import 'combokeys';
 import '../global/sniffer.js';
 import 'sniffr';
 import '../global/data-tests.js';
+import 'core-js/modules/es.array.reduce.js';
 import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
+import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../global/typescript-utils.js';
@@ -42,22 +70,22 @@ import '../_helpers/anchor.js';
 import '@jetbrains/icons/chevron-10px';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
-import '../_helpers/icon.js';
-import '../icon/icon__svg.js';
-import 'focus-visible';
+import '../_helpers/icon__svg.js';
+import 'core-js/modules/es.string.starts-with.js';
 import '../link/clickableLink.js';
 import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
-import '../_helpers/link.js';
 import '@jetbrains/icons/close-12px';
 import '../global/prop-types.js';
 import '../global/composeRefs.js';
-import '../_helpers/input.js';
-import '../input/input-label.js';
+import '../control-label/control-label.js';
+import '../i18n/i18n.js';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/startOfDay';
 import 'date-fns';
+import './date-input.js';
+import 'date-fns/add';
 import './months.js';
 import 'date-fns/addMonths';
 import 'date-fns/getDay';
@@ -66,6 +94,7 @@ import 'date-fns/startOfMonth';
 import 'date-fns/subMonths';
 import 'date-fns/endOfMonth';
 import '../global/linear-function.js';
+import '../global/use-event-callback.js';
 import './month.js';
 import 'date-fns/addDays';
 import 'date-fns/setDay';
@@ -83,18 +112,18 @@ import 'date-fns/getYear';
 import 'date-fns/isThisYear';
 import 'date-fns/setYear';
 import './weekdays.js';
-import 'date-fns/add';
 
-const PopupComponent = _ref => {
-  let {
-    hidden = false,
-    className,
-    popupRef,
-    onClear,
-    datePopupProps,
-    onComplete,
-    ...restProps
-  } = _ref;
+var _excluded = ["hidden", "className", "popupRef", "onClear", "datePopupProps", "onComplete"],
+  _excluded2 = ["className", "popupClassName", "clear", "inline", "dropdownProps", "translations"];
+var PopupComponent = function PopupComponent(_ref) {
+  var _ref$hidden = _ref.hidden,
+    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
+    className = _ref.className,
+    popupRef = _ref.popupRef,
+    onClear = _ref.onClear,
+    datePopupProps = _ref.datePopupProps,
+    onComplete = _ref.onComplete,
+    restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Popup, _extends({
     hidden: hidden,
     keepMounted: true,
@@ -119,39 +148,44 @@ PopupComponent.propTypes = {
 /**
  * @name Date Picker
  */
-class DatePicker extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "handleChange", change => {
-      const {
-        onChange,
-        withTime,
-        applyTimeInput
-      } = this.props;
-      const adjustedChange = withTime && !(change instanceof Date) && change?.date != null ? applyTimeInput(change.date, change.time) : change;
+var DatePicker = /*#__PURE__*/function (_PureComponent) {
+  _inherits(DatePicker, _PureComponent);
+  var _super = _createSuper(DatePicker);
+  function DatePicker() {
+    var _this;
+    _classCallCheck(this, DatePicker);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (change) {
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        withTime = _this$props.withTime,
+        applyTimeInput = _this$props.applyTimeInput;
+      var adjustedChange = withTime && !(change instanceof Date) && (change === null || change === void 0 ? void 0 : change.date) != null ? applyTimeInput(change.date, change.time) : change;
       onChange(adjustedChange);
     });
-    _defineProperty(this, "clear", () => {
-      let change = null;
-      if (this.props.range) {
+    _defineProperty(_assertThisInitialized(_this), "clear", function () {
+      var change = null;
+      if (_this.props.range) {
         change = {
           from: null,
           to: null
         };
       }
-      this.handleChange(change);
+      _this.handleChange(change);
     });
-    _defineProperty(this, "popup", void 0);
-    _defineProperty(this, "popupRef", el => {
-      this.popup = el;
+    _defineProperty(_assertThisInitialized(_this), "popup", void 0);
+    _defineProperty(_assertThisInitialized(_this), "popupRef", function (el) {
+      _this.popup = el;
     });
-    _defineProperty(this, "closePopup", () => {
-      this.popup?._onCloseAttempt();
+    _defineProperty(_assertThisInitialized(_this), "closePopup", function () {
+      var _this$popup;
+      (_this$popup = _this.popup) === null || _this$popup === void 0 ? void 0 : _this$popup._onCloseAttempt();
     });
-    _defineProperty(this, "parse", memoize(date => {
-      const {
-        parseDateInput
-      } = this.props;
+    _defineProperty(_assertThisInitialized(_this), "parse", memoize(function (date) {
+      var parseDateInput = _this.props.parseDateInput;
       if (date instanceof Date) {
         return date;
       }
@@ -160,115 +194,118 @@ class DatePicker extends PureComponent {
       }
       return parseDateInput(date);
     }));
-    _defineProperty(this, "getAnchorText", () => {
-      const {
-        range,
-        datePlaceholder,
-        dateTimePlaceholder,
-        rangePlaceholder,
-        withTime,
-        displayFormat,
-        displayMonthFormat,
-        displayDayFormat,
-        translations,
-        locale
-      } = this.props;
-      const date = this.parse(this.props.date);
-      const from = this.parse(this.props.from);
-      const to = this.parse(this.props.to);
-      const time = this.formatTime();
+    _defineProperty(_assertThisInitialized(_this), "getAnchorText", function () {
+      var _this$props2 = _this.props,
+        range = _this$props2.range,
+        datePlaceholder = _this$props2.datePlaceholder,
+        dateTimePlaceholder = _this$props2.dateTimePlaceholder,
+        rangePlaceholder = _this$props2.rangePlaceholder,
+        withTime = _this$props2.withTime,
+        displayFormat = _this$props2.displayFormat,
+        displayMonthFormat = _this$props2.displayMonthFormat,
+        displayDayFormat = _this$props2.displayDayFormat,
+        translations = _this$props2.translations,
+        locale = _this$props2.locale;
+      var translate = _this.context.translate;
+      var date = _this.parse(_this.props.date);
+      var from = _this.parse(_this.props.from);
+      var to = _this.parse(_this.props.to);
+      var time = _this.formatTime();
       if (!range && !withTime) {
-        return date ? displayFormat(date, locale) : datePlaceholder !== null && datePlaceholder !== void 0 ? datePlaceholder : translations.setDate;
+        var _ref2;
+        return date ? displayFormat(date, locale) : (_ref2 = datePlaceholder !== null && datePlaceholder !== void 0 ? datePlaceholder : translations === null || translations === void 0 ? void 0 : translations.setDate) !== null && _ref2 !== void 0 ? _ref2 : translate('setDate');
       } else if (!range && withTime) {
         if (!date && !time) {
-          return dateTimePlaceholder !== null && dateTimePlaceholder !== void 0 ? dateTimePlaceholder : translations.setDateTime;
+          var _ref3;
+          return (_ref3 = dateTimePlaceholder !== null && dateTimePlaceholder !== void 0 ? dateTimePlaceholder : translations === null || translations === void 0 ? void 0 : translations.setDateTime) !== null && _ref3 !== void 0 ? _ref3 : translate('setDateTime');
         } else {
-          return `${date && displayFormat(date, locale) || '—'}, ${time || '—'}`;
+          return "".concat(date && displayFormat(date, locale) || '—', ", ").concat(time || '—');
         }
       } else if (from && to) {
         if (!isSameYear(from, to)) {
-          return `${displayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+          return "".concat(displayFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
         } else if (!isSameMonth(from, to)) {
-          return `${displayMonthFormat(from, locale)} — ${displayFormat(to, locale)}`;
+          return "".concat(displayMonthFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
         } else if (!isSameDay(from, to)) {
-          return `${displayDayFormat(from, locale)} — ${displayFormat(to, locale)}`;
+          return "".concat(displayDayFormat(from, locale), " \u2014 ").concat(displayFormat(to, locale));
         } else {
-          return `${displayFormat(to, locale)}`;
+          return "".concat(displayFormat(to, locale));
         }
       } else if (from) {
-        return `${displayFormat(from, locale)} —`;
+        return "".concat(displayFormat(from, locale), " \u2014");
       } else if (to) {
-        return `— ${displayFormat(to, locale)}`;
+        return "\u2014 ".concat(displayFormat(to, locale));
       } else {
-        return rangePlaceholder !== null && rangePlaceholder !== void 0 ? rangePlaceholder : translations.setPeriod;
+        var _ref4;
+        return (_ref4 = rangePlaceholder !== null && rangePlaceholder !== void 0 ? rangePlaceholder : translations === null || translations === void 0 ? void 0 : translations.setPeriod) !== null && _ref4 !== void 0 ? _ref4 : translate('setPeriod');
       }
     });
+    return _this;
   }
-  formatTime() {
-    const {
-      displayTimeFormat,
-      locale
-    } = this.props;
-    const date = this.parse(this.props.date);
-    if (date != null) {
-      return displayTimeFormat(date, locale);
+  _createClass(DatePicker, [{
+    key: "formatTime",
+    value: function formatTime() {
+      var _this$props3 = this.props,
+        displayTimeFormat = _this$props3.displayTimeFormat,
+        locale = _this$props3.locale;
+      var date = this.parse(this.props.date);
+      if (date != null) {
+        return displayTimeFormat(date, locale);
+      }
+      return null;
     }
-    return null;
-  }
-  render() {
-    var _this$props$disabled, _this$props$disabled2;
-    const anchorContent = /*#__PURE__*/React.createElement("div", {
-      className: modules_0c7b7d96.anchorContent
-    }, /*#__PURE__*/React.createElement(Icon, {
-      glyph: calendarIcon,
-      className: modules_0c7b7d96.calendarIcon
-    }), this.getAnchorText(), /*#__PURE__*/React.createElement(Icon, {
-      glyph: chevronDownIcon,
-      className: modules_0c7b7d96.chevronDownIcon
-    }));
-    const {
-      className,
-      popupClassName,
-      clear,
-      inline,
-      dropdownProps,
-      translations,
-      ...datePopupProps
-    } = this.props;
-    const classes = classNames(modules_0c7b7d96.datePicker, className, modules_0c7b7d96[`size${this.props.size}`], {
-      [modules_0c7b7d96.inline]: inline
-    });
-    return /*#__PURE__*/React.createElement(Dropdown, _extends({
-      className: classes,
-      disabled: this.props.disabled,
-      anchor: inline ? /*#__PURE__*/React.createElement(Link, {
-        "data-test-ring-dropdown-anchor": true,
-        className: modules_0c7b7d96.anchor,
-        disabled: (_this$props$disabled = this.props.disabled) !== null && _this$props$disabled !== void 0 ? _this$props$disabled : false,
-        pseudo: true
-      }, this.getAnchorText()) : /*#__PURE__*/React.createElement(Button, {
-        "data-test-ring-dropdown-anchor": true,
-        className: modules_0c7b7d96.anchor,
-        text: false,
-        disabled: (_this$props$disabled2 = this.props.disabled) !== null && _this$props$disabled2 !== void 0 ? _this$props$disabled2 : false
-      }, anchorContent)
-    }, dropdownProps), /*#__PURE__*/React.createElement(PopupComponent, {
-      className: popupClassName,
-      popupRef: this.popupRef,
-      onClear: clear ? this.clear : null,
-      datePopupProps: {
-        ...datePopupProps,
-        // We want to provide translations further down to DateInput.
-        // Yet we should pass at least DateInput default translations not to have them empty.
-        translations: Object.assign({}, DateInput.defaultProps.translations, translations),
-        onChange: this.handleChange,
-        parseDateInput: this.parse,
-        time: this.formatTime()
-      },
-      onComplete: this.closePopup
-    }));
-  }
-}
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props$disabled, _this$props$disabled2;
+      var anchorContent = /*#__PURE__*/React.createElement("div", {
+        className: modules_0c7b7d96.anchorContent
+      }, /*#__PURE__*/React.createElement(Icon, {
+        glyph: calendarIcon,
+        className: modules_0c7b7d96.calendarIcon
+      }), this.getAnchorText(), /*#__PURE__*/React.createElement(Icon, {
+        glyph: chevronDownIcon,
+        className: modules_0c7b7d96.chevronDownIcon
+      }));
+      var _this$props4 = this.props,
+        className = _this$props4.className,
+        popupClassName = _this$props4.popupClassName,
+        clear = _this$props4.clear,
+        inline = _this$props4.inline,
+        dropdownProps = _this$props4.dropdownProps,
+        translations = _this$props4.translations,
+        datePopupProps = _objectWithoutProperties(_this$props4, _excluded2);
+      var classes = classNames(modules_0c7b7d96.datePicker, className, modules_0c7b7d96["size".concat(this.props.size)], _defineProperty({}, modules_0c7b7d96.inline, inline));
+      return /*#__PURE__*/React.createElement(Dropdown, _extends({
+        className: classes,
+        disabled: this.props.disabled,
+        anchor: inline ? /*#__PURE__*/React.createElement(Link, {
+          "data-test-ring-dropdown-anchor": true,
+          className: modules_0c7b7d96.anchor,
+          disabled: (_this$props$disabled = this.props.disabled) !== null && _this$props$disabled !== void 0 ? _this$props$disabled : false,
+          pseudo: true
+        }, this.getAnchorText()) : /*#__PURE__*/React.createElement(Button, {
+          "data-test-ring-dropdown-anchor": true,
+          className: modules_0c7b7d96.anchor,
+          text: false,
+          disabled: (_this$props$disabled2 = this.props.disabled) !== null && _this$props$disabled2 !== void 0 ? _this$props$disabled2 : false
+        }, anchorContent)
+      }, dropdownProps), /*#__PURE__*/React.createElement(PopupComponent, {
+        className: popupClassName,
+        popupRef: this.popupRef,
+        onClear: clear ? this.clear : null,
+        datePopupProps: _objectSpread2(_objectSpread2({}, datePopupProps), {}, {
+          translations: translations,
+          onChange: this.handleChange,
+          parseDateInput: this.parse,
+          time: this.formatTime()
+        }),
+        onComplete: this.closePopup
+      }));
+    }
+  }]);
+  return DatePicker;
+}(PureComponent);
 _defineProperty(DatePicker, "propTypes", {
   className: PropTypes.string,
   popupClassName: PropTypes.string,
@@ -307,50 +344,63 @@ _defineProperty(DatePicker, "defaultProps", {
   clear: false,
   inline: false,
   size: Size.M,
-  displayFormat: (date, locale) => date ? format(date, 'd MMM yyyy', {
-    locale
-  }) : '',
-  displayMonthFormat: (date, locale) => date ? format(date, 'd MMM', {
-    locale
-  }) : '',
-  displayDayFormat: (date, locale) => date ? format(date, 'd', {
-    locale
-  }) : '',
-  displayTimeFormat: (date, locale) => date ? format(date, 'HH:mm', {
-    locale
-  }) : '',
-  datePlaceholder: 'Set a date',
-  dateTimePlaceholder: 'Set date and time',
-  rangePlaceholder: 'Set a period',
+  displayFormat: function displayFormat(date, locale) {
+    return date ? format(date, 'd MMM yyyy', {
+      locale: locale
+    }) : '';
+  },
+  displayMonthFormat: function displayMonthFormat(date, locale) {
+    return date ? format(date, 'd MMM', {
+      locale: locale
+    }) : '';
+  },
+  displayDayFormat: function displayDayFormat(date, locale) {
+    return date ? format(date, 'd', {
+      locale: locale
+    }) : '';
+  },
+  displayTimeFormat: function displayTimeFormat(date, locale) {
+    return date ? format(date, 'HH:mm', {
+      locale: locale
+    }) : '';
+  },
   minDate: null,
   maxDate: null,
-  onChange() {},
-  translations: {
-    setDate: 'Set a date',
-    setDateTime: 'Set date and time',
-    setPeriod: 'Set a period'
-  },
-  applyTimeInput(date, timeString) {
+  onChange: function onChange() {},
+  applyTimeInput: function applyTimeInput(date, timeString) {
     var _timeString$split$map;
-    const [hours, minutes] = (_timeString$split$map = timeString?.split(':').map(Number)) !== null && _timeString$split$map !== void 0 ? _timeString$split$map : [];
+    var _ref5 = (_timeString$split$map = timeString === null || timeString === void 0 ? void 0 : timeString.split(':').map(Number)) !== null && _timeString$split$map !== void 0 ? _timeString$split$map : [],
+      _ref6 = _slicedToArray(_ref5, 2),
+      hours = _ref6[0],
+      minutes = _ref6[1];
     return minutes != null ? set(date, {
-      hours,
-      minutes
+      hours: hours,
+      minutes: minutes
     }) : date;
   },
-  parseDateInput(string) {
+  parseDateInput: function parseDateInput(string) {
     if (!string) {
       return null;
     }
-    const today = new Date();
-    for (const format of formats) {
-      const date = parse(string, format, today);
-      if (isValid(date)) {
-        return date;
+    var today = new Date();
+    var _iterator = _createForOfIteratorHelper(formats),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var format = _step.value;
+        var date = parse(string, format, today);
+        if (isValid(date)) {
+          return date;
+        }
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
     return null;
   }
 });
+_defineProperty(DatePicker, "contextType", I18nContext);
 
 export { DatePicker as default };

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

@@ -52,5 +52,5 @@ export default class DatePopup extends Component<DatePopupProps, DatePopupState>
     selectHandler: (date: Date) => void;
     handleScroll: (scrollDate: number) => void;
     onClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }