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

package/dist/date-picker/months.js

@@ -1,5 +1,7 @@
-import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React from 'react';
+import { f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.number.constructor.js';
+import 'core-js/modules/es.array.map.js';
+import React, { useMemo, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import addMonths from 'date-fns/addMonths';
 import getDay from 'date-fns/getDay';
@@ -9,6 +11,7 @@ import subMonths from 'date-fns/subMonths';
 import endOfMonth from 'date-fns/endOfMonth';
 import scheduleRAF from '../global/schedule-raf.js';
 import linearFunction from '../global/linear-function.js';
+import useEventCallback from '../global/use-event-callback.js';
 import Month from './month.js';
 import MonthNames from './month-names.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
@@ -17,6 +20,10 @@ import 'date-fns/addDays';
 import 'date-fns/format';
 import 'date-fns/setDay';
 import './day.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
 import 'classnames';
 import 'date-fns/getDate';
 import 'date-fns/isAfter';
@@ -30,77 +37,94 @@ import 'date-fns/startOfYear';
 import './month-slider.js';
 import 'date-fns/addYears';
 import 'date-fns/subYears';
+import 'core-js/modules/es.regexp.exec.js';
 import 'date-fns/add';
 
-const {
-  unit,
-  cellSize,
-  calHeight
-} = units;
-const FridayToSunday = WEEK + weekdays.SU - weekdays.FR;
-const FIVELINES = 31;
-const TALLMONTH = 6;
-const SHORTMONTH = 5;
-const PADDING = 2;
-const MONTHSBACK = 2;
+var unit = units.unit,
+  cellSize = units.cellSize,
+  calHeight = units.calHeight;
+var FridayToSunday = WEEK + weekdays.SU - weekdays.FR;
+var FIVELINES = 31;
+var TALLMONTH = 6;
+var SHORTMONTH = 5;
+var PADDING = 2;
+var MONTHSBACK = 2;
 function monthHeight(date) {
-  const monthStart = startOfMonth(date);
-  const daysSinceLastFriday = (getDay(monthStart) + FridayToSunday) % WEEK;
-  const monthLines = daysSinceLastFriday + getDaysInMonth(monthStart) > FIVELINES ? TALLMONTH : SHORTMONTH;
+  var monthStart = startOfMonth(date);
+  var daysSinceLastFriday = (getDay(monthStart) + FridayToSunday) % WEEK;
+  var monthLines = daysSinceLastFriday + getDaysInMonth(monthStart) > FIVELINES ? TALLMONTH : SHORTMONTH;
   return monthLines * cellSize + unit * PADDING;
 }
 // in milliseconds per pixel
 function scrollSpeed(date) {
-  const monthStart = startOfMonth(date);
-  const monthEnd = endOfMonth(date);
+  var monthStart = startOfMonth(date);
+  var monthEnd = endOfMonth(date);
   return (Number(monthEnd) - Number(monthStart)) / monthHeight(monthStart);
 }
-const scrollSchedule = scheduleRAF();
-let dy = 0;
+var scrollSchedule = scheduleRAF();
+var dy = 0;
 function Months(props) {
-  const {
-    scrollDate
-  } = props;
-  const monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
-  const monthStart = startOfMonth(monthDate);
-  let month = subMonths(monthStart, MONTHSBACK);
-  const months = [month];
-  for (let i = 0; i < MONTHSBACK * DOUBLE; i++) {
-    month = addMonths(month, 1);
-    months.push(month);
-  }
-  const currentSpeed = scrollSpeed(scrollDate);
-  const pxToDate = linearFunction(0, Number(scrollDate), currentSpeed);
-  const offset = pxToDate.x(Number(monthStart)); // is a negative number
-  const bottomOffset = monthHeight(scrollDate) + offset;
-  return /*#__PURE__*/React.createElement("div", {
-    className: modules_0c7b7d96.months,
-    onWheel: function handleWheel(e) {
-      e.preventDefault();
-      dy += e.deltaY;
-      scrollSchedule(() => {
-        let date;
-        // adjust scroll speed to prevent glitches
-        if (dy < offset) {
-          date = pxToDate.y(offset) + (dy - offset) * scrollSpeed(months[1]);
-        } else if (dy > bottomOffset) {
-          date = pxToDate.y(bottomOffset) + (dy - bottomOffset) * scrollSpeed(months[MONTHSBACK + 1]);
-        } else {
-          date = pxToDate.y(dy);
-        }
-        props.onScroll(date);
-        dy = 0;
+  var scrollDate = props.scrollDate;
+  var monthDate = scrollDate instanceof Date ? scrollDate : new Date(scrollDate);
+  var monthStart = startOfMonth(monthDate);
+  var months = useMemo(function () {
+    var month = subMonths(monthStart, MONTHSBACK);
+    var result = [month];
+    for (var i = 0; i < MONTHSBACK * DOUBLE; i++) {
+      month = addMonths(month, 1);
+      result.push(month);
+    }
+    return result;
+  }, [monthStart]);
+  var currentSpeed = scrollSpeed(scrollDate);
+  var pxToDate = linearFunction(0, Number(scrollDate), currentSpeed);
+  var offset = pxToDate.x(Number(monthStart)); // is a negative number
+  var bottomOffset = monthHeight(scrollDate) + offset;
+  var componentRef = useRef(null);
+  var handleWheel = useEventCallback(function (e) {
+    e.preventDefault();
+    dy += e.deltaY;
+    scrollSchedule(function () {
+      var date;
+      // adjust scroll speed to prevent glitches
+      if (dy < offset) {
+        date = pxToDate.y(offset) + (dy - offset) * scrollSpeed(months[1]);
+      } else if (dy > bottomOffset) {
+        date = pxToDate.y(bottomOffset) + (dy - bottomOffset) * scrollSpeed(months[MONTHSBACK + 1]);
+      } else {
+        date = pxToDate.y(dy);
+      }
+      props.onScroll(date);
+      dy = 0;
+    });
+  });
+  useEffect(function () {
+    var current = componentRef.current;
+    if (current !== null) {
+      current.addEventListener('wheel', handleWheel, {
+        passive: false
       });
     }
+    return function () {
+      if (current !== null) {
+        current.removeEventListener('wheel', handleWheel);
+      }
+    };
+  }, [handleWheel]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.months,
+    ref: componentRef
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       top: Math.floor(calHeight * HALF - monthHeight(months[0]) - monthHeight(months[1]) + offset)
     },
     className: modules_0c7b7d96.days
-  }, months.map(date => /*#__PURE__*/React.createElement(Month, _extends({}, props, {
-    month: date,
-    key: +date
-  })))), /*#__PURE__*/React.createElement(MonthNames, props));
+  }, months.map(function (date) {
+    return /*#__PURE__*/React.createElement(Month, _extends({}, props, {
+      month: date,
+      key: +date
+    }));
+  })), /*#__PURE__*/React.createElement(MonthNames, props));
 }
 Months.propTypes = {
   onScroll: PropTypes.func,

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import type { Locale } from 'date-fns';
 import PropTypes from 'prop-types';
 interface WeekdaysProps {
     locale: Locale | undefined;
 }
-declare function Weekdays(props: WeekdaysProps): JSX.Element;
+declare function Weekdays(props: WeekdaysProps): React.JSX.Element;
 declare namespace Weekdays {
     var propTypes: {
         locale: PropTypes.Requireable<string>;

package/dist/date-picker/weekdays.js

@@ -1,3 +1,8 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.string.includes.js';
 import React from 'react';
 import classNames from 'classnames';
 import getDay from 'date-fns/getDay';
@@ -7,23 +12,24 @@ import startOfDay from 'date-fns/startOfDay';
 import PropTypes from 'prop-types';
 import { weekdays } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import 'core-js/modules/es.regexp.exec.js';
 import 'date-fns/add';
 
 function Weekdays(props) {
-  const days = Object.values(weekdays).map(value => startOfDay(setDay(new Date(), value)));
-  const {
-    locale
-  } = props;
+  var days = Object.values(weekdays).map(function (value) {
+    return startOfDay(setDay(new Date(), value));
+  });
+  var locale = props.locale;
   return /*#__PURE__*/React.createElement("div", {
     className: modules_0c7b7d96.weekdays
-  }, days.map(day => /*#__PURE__*/React.createElement("span", {
-    className: classNames(modules_0c7b7d96.weekday, {
-      [modules_0c7b7d96.weekend]: [weekdays.SA, weekdays.SU].includes(getDay(day))
-    }),
-    key: +day
-  }, format(day, 'EEEEEE', {
-    locale
-  }))));
+  }, days.map(function (day) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: classNames(modules_0c7b7d96.weekday, _defineProperty({}, modules_0c7b7d96.weekend, [weekdays.SA, weekdays.SU].includes(getDay(day)))),
+      key: +day
+    }, format(day, 'EEEEEE', {
+      locale: locale
+    }));
+  }));
 }
 Weekdays.propTypes = {
   locale: PropTypes.string

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

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { CalendarProps } from './consts';
 interface YearsState {
@@ -13,9 +13,13 @@ export default class Years extends PureComponent<CalendarProps> {
     state: {
         scrollDate: null;
     };
+    componentDidMount(): void;
     componentDidUpdate(prevProps: CalendarProps, prevState: YearsState): void;
+    componentWillUnmount(): void;
     stoppedScrolling?: boolean;
     setYear(date: number): void;
-    render(): JSX.Element;
+    componentRef: React.RefObject<HTMLDivElement>;
+    handleWheel: (e: WheelEvent) => void;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/date-picker/years.js

@@ -1,5 +1,8 @@
-import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { PureComponent } from 'react';
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.js';
+import 'core-js/modules/es.number.constructor.js';
+import 'core-js/modules/es.array.map.js';
+import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addYears from 'date-fns/addYears';
@@ -7,87 +10,120 @@ import getYear from 'date-fns/getYear';
 import format from 'date-fns/format';
 import isSameYear from 'date-fns/isSameYear';
 import isThisYear from 'date-fns/isThisYear';
-import setYear from 'date-fns/setYear';
+import _setYear from 'date-fns/setYear';
 import startOfYear from 'date-fns/startOfYear';
 import subYears from 'date-fns/subYears';
 import linearFunction from '../global/linear-function.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
-import units, { dateType, DOUBLE, HALF, yearDuration } from './consts.js';
+import units, { dateType, yearDuration, DOUBLE, HALF } from './consts.js';
+import 'core-js/modules/es.regexp.exec.js';
 import 'date-fns/add';
 
-const {
-  yearHeight,
-  calHeight
-} = units;
-let scrollTO;
-const YEARSBACK = 5;
-const scrollDelay = 100;
-class Years extends PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      scrollDate: null
-    });
-    _defineProperty(this, "stoppedScrolling", void 0);
-  }
-  componentDidUpdate(prevProps, prevState) {
-    this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
-  }
-  setYear(date) {
-    if (scrollTO) {
-      window.clearTimeout(scrollTO);
-      scrollTO = null;
+var yearHeight = units.yearHeight,
+  calHeight = units.calHeight;
+var scrollTO;
+var YEARSBACK = 5;
+var scrollDelay = 100;
+var Years = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Years, _PureComponent);
+  var _super = _createSuper(Years);
+  function Years() {
+    var _this;
+    _classCallCheck(this, Years);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    this.setState({
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
       scrollDate: null
     });
-    this.props.onScroll(Number(setYear(this.props.scrollDate, getYear(date))));
-  }
-  render() {
-    const {
-      onScrollChange,
-      scrollDate
-    } = this.props;
-    const date = this.state.scrollDate || scrollDate;
-    const yearStart = startOfYear(date);
-    let year = subYears(yearStart, YEARSBACK);
-    const years = [year];
-    for (let i = 0; i < YEARSBACK * DOUBLE; i++) {
-      year = addYears(year, 1);
-      years.push(year);
-    }
-    const pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
-    const handleWheel = e => {
+    _defineProperty(_assertThisInitialized(_this), "stoppedScrolling", void 0);
+    _defineProperty(_assertThisInitialized(_this), "componentRef", /*#__PURE__*/createRef());
+    _defineProperty(_assertThisInitialized(_this), "handleWheel", function (e) {
+      var scrollDate = _this.props.scrollDate;
+      var date = _this.state.scrollDate || scrollDate;
       e.preventDefault();
-      const newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
-      this.setState({
+      var newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
+      _this.setState({
         scrollDate: newScrollDate
       });
       if (scrollTO) {
         window.clearTimeout(scrollTO);
       }
-      scrollTO = window.setTimeout(() => this.setYear(newScrollDate), scrollDelay);
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: modules_0c7b7d96.years,
-      onWheel: handleWheel,
-      style: {
-        transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
-        top: Math.floor(calHeight * HALF - pxToDate.x(Number(date)))
+      scrollTO = window.setTimeout(function () {
+        return _this.setYear(newScrollDate);
+      }, scrollDelay);
+    });
+    return _this;
+  }
+  _createClass(Years, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.componentRef.current) {
+        this.componentRef.current.addEventListener('wheel', this.handleWheel);
       }
-    }, years.map(item => /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      key: +item,
-      className: classNames(modules_0c7b7d96.year, {
-        [modules_0c7b7d96.currentYear]: isSameYear(item, date),
-        [modules_0c7b7d96.today]: isThisYear(item)
-      }),
-      onClick: function handleClick() {
-        onScrollChange(Number(setYear(scrollDate, getYear(item))));
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      this.stoppedScrolling = prevState.scrollDate != null && !this.state.scrollDate;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.componentRef.current) {
+        this.componentRef.current.removeEventListener('wheel', this.handleWheel);
       }
-    }, format(item, 'yyyy'))));
-  }
-}
+    }
+  }, {
+    key: "setYear",
+    value: function setYear(date) {
+      if (scrollTO) {
+        window.clearTimeout(scrollTO);
+        scrollTO = null;
+      }
+      this.setState({
+        scrollDate: null
+      });
+      this.props.onScroll(Number(_setYear(this.props.scrollDate, getYear(date))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        onScrollChange = _this$props.onScrollChange,
+        scrollDate = _this$props.scrollDate;
+      var date = this.state.scrollDate || scrollDate;
+      var yearStart = startOfYear(date);
+      var year = subYears(yearStart, YEARSBACK);
+      var years = [year];
+      for (var i = 0; i < YEARSBACK * DOUBLE; i++) {
+        year = addYears(year, 1);
+        years.push(year);
+      }
+      var pxToDate = linearFunction(0, Number(years[0]), yearDuration / yearHeight);
+      return /*#__PURE__*/React.createElement("div", {
+        className: modules_0c7b7d96.years,
+        ref: this.componentRef,
+        style: {
+          transition: this.stoppedScrolling ? 'top .2s ease-out 0s' : 'none',
+          top: Math.floor(calHeight * HALF - pxToDate.x(Number(date)))
+        }
+      }, years.map(function (item) {
+        var _classNames;
+        return /*#__PURE__*/React.createElement("button", {
+          type: "button",
+          key: +item,
+          className: classNames(modules_0c7b7d96.year, (_classNames = {}, _defineProperty(_classNames, modules_0c7b7d96.currentYear, isSameYear(item, date)), _defineProperty(_classNames, modules_0c7b7d96.today, isThisYear(item)), _classNames)),
+          onClick: function handleClick() {
+            onScrollChange(Number(_setYear(scrollDate, getYear(item))));
+          }
+        }, format(item, 'yyyy'));
+      }));
+    }
+  }]);
+  return Years;
+}(PureComponent);
 _defineProperty(Years, "propTypes", {
   scrollDate: dateType,
   onScroll: PropTypes.func,

package/dist/dialog/dialog.d.ts

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import TabTrap, { TabTrapProps } from '../tab-trap/tab-trap';
+import type { ShortcutsScopeOptions } from '../shortcuts/core';
 export interface DialogProps extends Partial<TabTrapProps> {
     show: boolean;
     label: string;
@@ -9,6 +10,7 @@ export interface DialogProps extends Partial<TabTrapProps> {
     onCloseClick: (event: React.MouseEvent<HTMLElement>) => void;
     onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
     showCloseButton: boolean;
+    shortcutOptions: ShortcutsScopeOptions;
     closeButtonInside: boolean;
     closeButtonTitle?: string;
     trapFocus: boolean;
@@ -17,10 +19,6 @@ export interface DialogProps extends Partial<TabTrapProps> {
     'data-test'?: string | null | undefined;
     dense?: boolean | null | undefined;
 }
-/**
- * @name Dialog
- */
-declare function noop(): void;
 export default class Dialog extends PureComponent<DialogProps> {
     static propTypes: {
         label: PropTypes.Requireable<string>;
@@ -34,23 +32,14 @@ export default class Dialog extends PureComponent<DialogProps> {
         onOverlayClick: PropTypes.Requireable<(...args: any[]) => any>;
         onEscPress: PropTypes.Requireable<(...args: any[]) => any>;
         onCloseClick: PropTypes.Requireable<(...args: any[]) => any>;
+        shortcutOptions: PropTypes.Requireable<object>;
         onCloseAttempt: PropTypes.Requireable<(...args: any[]) => any>;
         trapFocus: PropTypes.Requireable<boolean>;
         portalTarget: PropTypes.Requireable<HTMLElement>;
         autoFocusFirst: PropTypes.Requireable<boolean>;
         'data-test': PropTypes.Requireable<string>;
     };
-    static defaultProps: {
-        label: string;
-        onOverlayClick: typeof noop;
-        onEscPress: typeof noop;
-        onCloseClick: typeof noop;
-        onCloseAttempt: typeof noop;
-        showCloseButton: boolean;
-        closeButtonInside: boolean;
-        trapFocus: boolean;
-        autoFocusFirst: boolean;
-    };
+    static defaultProps: Partial<DialogProps>;
     state: {
         shortcutsScope: string;
     };
@@ -73,4 +62,3 @@ export default class Dialog extends PureComponent<DialogProps> {
     render(): false | React.ReactPortal;
 }
 export type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;
-export {};