@jetbrains/ring-ui 4.1.1 → 4.1.2

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

@@ -0,0 +1,99 @@
+import { a as _extends, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import endOfMonth from 'date-fns/endOfMonth';
+import format from 'date-fns/format';
+import isThisMonth from 'date-fns/isThisMonth';
+import set from 'date-fns/set';
+import startOfDay from 'date-fns/startOfDay';
+import startOfYear from 'date-fns/startOfYear';
+import linearFunction from '../global/linear-function.js';
+import MonthSlider from './month-slider.js';
+import { dateType, YEAR, MIDDLE_DAY, yearScrollSpeed, HALF } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import 'date-fns/addYears';
+import 'date-fns/subYears';
+import 'date-fns/add';
+
+class MonthName extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "handleClick", () => {
+      const end = endOfMonth(this.props.month);
+      this.props.onScrollChange((+this.props.month + +end) * HALF);
+    });
+  }
+
+  render() {
+    const {
+      month,
+      locale
+    } = this.props;
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames(modules_0c7b7d96.monthName, {
+        [modules_0c7b7d96.today]: isThisMonth(month)
+      }),
+      onClick: this.handleClick
+    }, format(month, 'LLL', {
+      locale
+    }));
+  }
+
+}
+
+MonthName.propTypes = {
+  month: dateType,
+  onScrollChange: PropTypes.func,
+  locale: PropTypes.string
+};
+function MonthNames(props) {
+  const {
+    scrollDate,
+    locale
+  } = props;
+  const months = [];
+
+  for (let i = 0; i < YEAR; i++) {
+    const middleDay = set(scrollDate, {
+      month: i,
+      date: MIDDLE_DAY
+    });
+    months.push(startOfDay(middleDay));
+  }
+
+  const pxToDate = linearFunction(0, startOfYear(scrollDate), yearScrollSpeed);
+  let top = 0;
+  let bottom = 0;
+
+  if (props.currentRange) {
+    [top, bottom] = props.currentRange.map(date => Math.floor(pxToDate.x(date)));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.monthNames
+  }, months.map(month => /*#__PURE__*/React.createElement(MonthName, {
+    key: +month,
+    month: month,
+    onScrollChange: props.onScrollChange,
+    locale: locale
+  })), props.currentRange && /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.range,
+    style: {
+      top: top - 1,
+      height: bottom + 1 - (top - 1)
+    }
+  }), /*#__PURE__*/React.createElement(MonthSlider, _extends({}, props, {
+    pxToDate: pxToDate
+  })));
+}
+MonthNames.propTypes = {
+  scrollDate: dateType,
+  onScrollChange: PropTypes.func,
+  currentRange: PropTypes.arrayOf(dateType),
+  locale: PropTypes.string
+};
+
+export { MonthNames as default };

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

@@ -0,0 +1,83 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import addYears from 'date-fns/addYears';
+import startOfDay from 'date-fns/startOfDay';
+import subYears from 'date-fns/subYears';
+import linearFunction from '../global/linear-function.js';
+import units, { dateType, yearScrollSpeed } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import 'date-fns/add';
+
+const COVERYEARS = 3;
+class MonthSlider extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      dragging: false
+    });
+
+    _defineProperty(this, "onMouseDown", () => {
+      this.setState({
+        dragging: true
+      });
+    });
+
+    _defineProperty(this, "onMouseUp", () => {
+      this.setState({
+        dragging: false
+      });
+    });
+
+    _defineProperty(this, "onMouseMove", e => {
+      this.props.onScroll(linearFunction(0, this.props.scrollDate, yearScrollSpeed).y(e.movementY));
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.dragging && !prevState.dragging) {
+      window.addEventListener('mousemove', this.onMouseMove);
+      window.addEventListener('mouseup', this.onMouseUp);
+    } else if (!this.state.dragging && prevState.dragging) {
+      window.removeEventListener('mousemove', this.onMouseMove);
+      window.removeEventListener('mouseup', this.onMouseUp);
+    }
+  }
+
+  render() {
+    let year = subYears(startOfDay(this.props.scrollDate), 1);
+    const years = [year];
+
+    for (let i = 0; i <= COVERYEARS; i++) {
+      year = addYears(year, 1);
+      years.push(year);
+    }
+
+    const classes = classNames(modules_0c7b7d96.monthSlider, {
+      [modules_0c7b7d96.dragging]: this.state.dragging
+    });
+    return /*#__PURE__*/React.createElement("div", null, years.map(date => /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      key: +date,
+      className: classes,
+      style: {
+        top: Math.floor(this.props.pxToDate.x(date) - units.cellSize)
+      },
+      onMouseDown: this.onMouseDown
+    })));
+  }
+
+}
+
+_defineProperty(MonthSlider, "propTypes", {
+  scrollDate: dateType,
+  onScroll: PropTypes.func,
+  pxToDate: PropTypes.shape({
+    x: PropTypes.func,
+    y: PropTypes.func
+  })
+});
+
+export { MonthSlider as default };

package/dist/date-picker/month.js

@@ -0,0 +1,54 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import addDays from 'date-fns/addDays';
+import endOfMonth from 'date-fns/endOfMonth';
+import format from 'date-fns/format';
+import getDay from 'date-fns/getDay';
+import setDay from 'date-fns/setDay';
+import PropTypes from 'prop-types';
+import Day from './day.js';
+import { dateType, weekdays, WEEK } from './consts.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import 'classnames';
+import 'date-fns/getDate';
+import 'date-fns/isAfter';
+import 'date-fns/isBefore';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/startOfDay';
+import 'date-fns/add';
+
+function Month(props) {
+  const start = props.month;
+  const end = endOfMonth(start);
+  const {
+    locale
+  } = props; // pad with empty cells starting from last friday
+
+  const weekday = getDay(start);
+  let day = setDay(start, weekday >= weekdays.FR ? weekdays.FR : weekdays.FR - WEEK);
+  const days = [];
+
+  while (day < end) {
+    days.push(day);
+    day = addDays(day, 1);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: modules_0c7b7d96.month
+  }, /*#__PURE__*/React.createElement("span", {
+    className: modules_0c7b7d96.monthTitle
+  }, format(props.month, 'LLLL', {
+    locale
+  })), days.map(date => /*#__PURE__*/React.createElement(Day, _extends({}, props, {
+    day: date,
+    empty: date < start,
+    key: +date
+  }))));
+}
+Month.propTypes = {
+  month: dateType,
+  locale: PropTypes.string
+};
+
+export { Month as default };

package/dist/date-picker/months.js

@@ -0,0 +1,121 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import addMonths from 'date-fns/addMonths';
+import getDay from 'date-fns/getDay';
+import getDaysInMonth from 'date-fns/getDaysInMonth';
+import set from 'date-fns/set';
+import startOfHour from 'date-fns/startOfHour';
+import startOfMonth from 'date-fns/startOfMonth';
+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 Month from './month.js';
+import MonthNames from './month-names.js';
+import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
+import units, { dateType, DOUBLE, HALF, WEEK, weekdays } from './consts.js';
+import 'date-fns/addDays';
+import 'date-fns/format';
+import 'date-fns/setDay';
+import './day.js';
+import 'classnames';
+import 'date-fns/getDate';
+import 'date-fns/isAfter';
+import 'date-fns/isBefore';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/startOfDay';
+import 'date-fns/isThisMonth';
+import 'date-fns/startOfYear';
+import './month-slider.js';
+import 'date-fns/addYears';
+import 'date-fns/subYears';
+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;
+
+function monthHeight(date) {
+  const monthStart = startOfMonth(date);
+  const daysSinceLastFriday = (getDay(monthStart) + FridayToSunday) % WEEK;
+  const 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);
+  return (monthEnd - monthStart) / monthHeight(monthStart);
+}
+
+const scrollSchedule = scheduleRAF();
+let dy = 0;
+function Months(props) {
+  const {
+    scrollDate
+  } = props; // prevent switching from april to march because of daylight saving time
+
+  const monthStart = startOfHour(set(scrollDate, {
+    date: 1,
+    hours: 1
+  }));
+  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, scrollDate, currentSpeed);
+  const offset = pxToDate.x(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;
+      });
+    }
+  }, /*#__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.propTypes = {
+  onScroll: PropTypes.func,
+  scrollDate: dateType
+};
+
+export { Months as default };

package/dist/date-picker/weekdays.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import classNames from 'classnames';
+import getDay from 'date-fns/getDay';
+import format from 'date-fns/format';
+import setDay from 'date-fns/setDay';
+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 'date-fns/add';
+
+function Weekdays(props) {
+  const days = Object.keys(weekdays).map(key => startOfDay(setDay(new Date(), weekdays[key])));
+  const {
+    locale
+  } = props;
+  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
+  }))));
+}
+Weekdays.propTypes = {
+  locale: PropTypes.string
+};
+
+export { Weekdays as default };

package/dist/date-picker/years.js

@@ -0,0 +1,109 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import addYears from 'date-fns/addYears';
+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 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 '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
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.stoppedScrolling = prevState.scrollDate && !this.state.scrollDate;
+  }
+
+  setYear(date) {
+    if (scrollTO) {
+      window.clearTimeout(scrollTO);
+      scrollTO = null;
+    }
+
+    this.setState({
+      scrollDate: null
+    });
+    this.props.onScroll(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, years[0], yearDuration / yearHeight);
+
+    const handleWheel = e => {
+      e.preventDefault();
+      const newScrollDate = linearFunction(0, 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(date))
+      }
+    }, 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(setYear(scrollDate, getYear(item)));
+      }
+    }, format(item, 'yyyy'))));
+  }
+
+}
+
+_defineProperty(Years, "propTypes", {
+  scrollDate: dateType,
+  onScroll: PropTypes.func,
+  onScrollChange: PropTypes.func
+});
+
+export { Years as default };

package/dist/dialog/dialog.js

@@ -0,0 +1,200 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { PureComponent } from 'react';
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close';
+import { AdaptiveIsland } from '../island/island.js';
+import getUID from '../global/get-uid.js';
+import joinDataTestAttributes from '../global/data-tests.js';
+import Shortcuts from '../shortcuts/shortcuts.js';
+import TabTrap from '../tab-trap/tab-trap.js';
+import Button from '../button/button.js';
+import { PopupTarget } from '../popup/popup.target.js';
+import { p as preventerFactory, m as modules_5e9b8c03 } from '../_helpers/dialog__body-scroll-preventer.js';
+import '../island/adaptive-island-hoc.js';
+import '../global/linear-function.js';
+import '../_helpers/island.js';
+import '../island/header.js';
+import '../island/content.js';
+import 'element-resize-detector';
+import '../global/schedule-raf.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/dom.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../icon/icon.js';
+import 'util-deprecate';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../global/memoize.js';
+import '../global/theme.js';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import 'scrollbar-width';
+
+/**
+ * @name Dialog
+ */
+
+function noop() {}
+
+class Dialog extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      shortcutsScope: getUID('ring-dialog-')
+    });
+
+    _defineProperty(this, "scrollPreventer", preventerFactory(getUID('preventer-')));
+
+    _defineProperty(this, "uid", getUID('dialog-'));
+
+    _defineProperty(this, "handleClick", event => {
+      this.props.onOverlayClick(event);
+      this.props.onCloseAttempt(event);
+    });
+
+    _defineProperty(this, "onCloseClick", event => {
+      this.props.onCloseClick(event);
+      this.props.onCloseAttempt(event);
+    });
+
+    _defineProperty(this, "getShortcutsMap", () => {
+      const onEscape = event => {
+        if (this.props.show) {
+          this.props.onEscPress(event);
+          this.props.onCloseAttempt(event);
+        }
+      };
+
+      return {
+        esc: onEscape
+      };
+    });
+
+    _defineProperty(this, "dialogRef", tabTrap => {
+      this.dialog = tabTrap && tabTrap.node;
+    });
+  }
+
+  componentDidMount() {
+    this.toggleScrollPreventer();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.show !== this.props.show) {
+      this.toggleScrollPreventer();
+    }
+  }
+
+  componentWillUnmount() {
+    this.scrollPreventer.reset();
+  }
+
+  toggleScrollPreventer() {
+    if (this.props.show) {
+      this.scrollPreventer.prevent();
+    } else {
+      this.scrollPreventer.reset();
+    }
+  }
+
+  render() {
+    const {
+      show,
+      showCloseButton,
+      onOverlayClick,
+      onCloseAttempt,
+      onEscPress,
+      onCloseClick,
+      children,
+      className,
+      contentClassName,
+      trapFocus,
+      'data-test': dataTest,
+      closeButtonInside,
+      portalTarget,
+      label,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_5e9b8c03.container, className);
+    const shortcutsMap = this.getShortcutsMap();
+    return show && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PopupTarget, {
+      id: this.uid,
+      className: modules_5e9b8c03.popupTarget
+    }, target => /*#__PURE__*/React.createElement(TabTrap, _extends({
+      trapDisabled: !trapFocus,
+      "data-test": joinDataTestAttributes('ring-dialog-container', dataTest),
+      ref: this.dialogRef,
+      className: classes,
+      role: "presentation"
+    }, restProps), /*#__PURE__*/React.createElement(Shortcuts, {
+      map: shortcutsMap,
+      scope: this.state.shortcutsScope
+    }), (onOverlayClick !== noop || onCloseAttempt !== noop) && /*#__PURE__*/React.createElement("div", {
+      // click handler is duplicated in close button
+      role: "presentation",
+      className: modules_5e9b8c03.clickableOverlay,
+      onClick: this.handleClick
+    }), /*#__PURE__*/React.createElement("div", {
+      className: modules_5e9b8c03.innerContainer
+    }, /*#__PURE__*/React.createElement(AdaptiveIsland, {
+      className: classNames(modules_5e9b8c03.content, contentClassName),
+      "data-test": "ring-dialog",
+      role: "dialog",
+      "aria-label": label
+    }, children, showCloseButton && /*#__PURE__*/React.createElement(Button, {
+      icon: closeIcon,
+      "data-test": "ring-dialog-close-button",
+      className: classNames(modules_5e9b8c03.closeButton, {
+        [modules_5e9b8c03.closeButtonOutside]: !closeButtonInside,
+        [modules_5e9b8c03.closeButtonInside]: closeButtonInside
+      }),
+      iconClassName: modules_5e9b8c03.closeIcon,
+      onClick: this.onCloseClick,
+      "aria-label": "close dialog"
+    }))), target)), portalTarget instanceof HTMLElement ? portalTarget : document.body);
+  }
+
+}
+
+_defineProperty(Dialog, "propTypes", {
+  label: PropTypes.string,
+  className: PropTypes.string,
+  contentClassName: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  show: PropTypes.bool.isRequired,
+  showCloseButton: PropTypes.bool,
+  closeButtonInside: PropTypes.bool,
+  onOverlayClick: PropTypes.func,
+  onEscPress: PropTypes.func,
+  onCloseClick: PropTypes.func,
+  // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
+  // Use it if you don't need different behaviors for this cases.
+  onCloseAttempt: PropTypes.func,
+  // focusTrap may break popups inside dialog, so use it carefully
+  trapFocus: PropTypes.bool,
+  portalTarget: PropTypes.instanceOf(HTMLElement),
+  autoFocusFirst: PropTypes.bool,
+  'data-test': PropTypes.string
+});
+
+_defineProperty(Dialog, "defaultProps", {
+  label: 'Dialog',
+  onOverlayClick: noop,
+  onEscPress: noop,
+  onCloseClick: noop,
+  onCloseAttempt: noop,
+  showCloseButton: false,
+  closeButtonInside: false,
+  trapFocus: false,
+  autoFocusFirst: true
+});
+
+export { Dialog as default };