@jetbrains/ring-ui 5.1.23 → 5.1.24

package/dist/date-picker/years.js

@@ -0,0 +1,137 @@
+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.array.map.js';
+import React, { createRef, 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, yearDuration, DOUBLE, HALF } from './consts.js';
+import 'core-js/modules/es.regexp.exec.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.object.values.js';
+import 'core-js/modules/es.array.index-of.js';
+import 'date-fns/add';
+
+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 = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      scrollDate: null
+    });
+    _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();
+      var newScrollDate = linearFunction(0, Number(date), yearDuration / yearHeight).y(e.deltaY);
+      _this.setState({
+        scrollDate: newScrollDate
+      });
+      if (scrollTO) {
+        window.clearTimeout(scrollTO);
+      }
+      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);
+      }
+    }
+  }, {
+    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);
+      }
+    }
+  }, {
+    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) {
+        return /*#__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))));
+          }
+        }, format(item, 'yyyy'));
+      }));
+    }
+  }]);
+  return Years;
+}(PureComponent);
+_defineProperty(Years, "propTypes", {
+  scrollDate: dateType,
+  onScroll: PropTypes.func,
+  onScrollChange: PropTypes.func
+});
+
+export { Years as default };

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,64 @@
+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;
+    onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onEscPress: (event: KeyboardEvent) => void;
+    onCloseClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onCloseAttempt: (event: React.MouseEvent<HTMLElement> | KeyboardEvent) => void;
+    showCloseButton: boolean;
+    shortcutOptions: ShortcutsScopeOptions;
+    closeButtonInside: boolean;
+    closeButtonTitle?: string;
+    trapFocus: boolean;
+    contentClassName?: string | null | undefined;
+    portalTarget?: Element | null | undefined;
+    'data-test'?: string | null | undefined;
+    dense?: boolean | null | undefined;
+}
+export default class Dialog extends PureComponent<DialogProps> {
+    static propTypes: {
+        label: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        contentClassName: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        show: PropTypes.Validator<boolean>;
+        showCloseButton: PropTypes.Requireable<boolean>;
+        closeButtonInside: PropTypes.Requireable<boolean>;
+        closeButtonTitle: PropTypes.Requireable<string>;
+        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: Partial<DialogProps>;
+    state: {
+        shortcutsScope: string;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DialogProps): void;
+    componentWillUnmount(): void;
+    scrollPreventer: {
+        prevent: () => void;
+        reset: () => void;
+    };
+    uid: string;
+    toggleScrollPreventer(): void;
+    handleClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onCloseClick: (event: React.MouseEvent<HTMLElement>) => void;
+    getShortcutsMap: () => {
+        esc: (event: KeyboardEvent) => void;
+    };
+    dialog?: HTMLElement | null;
+    dialogRef: (tabTrap: TabTrap | null) => void;
+    render(): false | React.ReactPortal;
+}
+export type DialogAttrs = JSX.LibraryManagedAttributes<typeof Dialog, DialogProps>;

package/dist/dialog/dialog.js

@@ -0,0 +1,241 @@
+import { _ as _defineProperty, a as _inherits, b as _createSuper, c as _classCallCheck, k as _assertThisInitialized, d as _createClass, e as _objectWithoutProperties, f as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.array.concat.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 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import 'core-js/modules/es.array.reduce.js';
+import 'core-js/modules/es.object.entries.js';
+import 'core-js/modules/es.array.map.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.object.assign.js';
+import 'core-js/modules/es.array.slice.js';
+import 'core-js/modules/es.array.splice.js';
+import 'core-js/modules/es.regexp.exec.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 'core-js/modules/es.array.filter.js';
+import '../global/dom.js';
+import 'core-js/modules/web.dom-collections.for-each.js';
+import 'core-js/modules/es.string.split.js';
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/es.string.starts-with.js';
+import '../global/memoize.js';
+import 'core-js/modules/es.map.js';
+import 'core-js/modules/es.weak-map.js';
+import '../link/clickableLink.js';
+import '../global/controls-height.js';
+import '../_helpers/button__classes.js';
+import 'scrollbar-width';
+
+var _excluded = ["show", "showCloseButton", "onOverlayClick", "onCloseAttempt", "onEscPress", "onCloseClick", "children", "className", "contentClassName", "trapFocus", "data-test", "closeButtonInside", "portalTarget", "label", "closeButtonTitle", "dense", "shortcutOptions"];
+/**
+ * @name Dialog
+ */
+function noop() {}
+var Dialog = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Dialog, _PureComponent);
+  var _super = _createSuper(Dialog);
+  function Dialog() {
+    var _this;
+    _classCallCheck(this, Dialog);
+    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), "state", {
+      shortcutsScope: getUID('ring-dialog-')
+    });
+    _defineProperty(_assertThisInitialized(_this), "scrollPreventer", preventerFactory(getUID('preventer-')));
+    _defineProperty(_assertThisInitialized(_this), "uid", getUID('dialog-'));
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (event) {
+      _this.props.onOverlayClick(event);
+      _this.props.onCloseAttempt(event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onCloseClick", function (event) {
+      _this.props.onCloseClick(event);
+      _this.props.onCloseAttempt(event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getShortcutsMap", function () {
+      var onEscape = function onEscape(event) {
+        if (_this.props.show) {
+          _this.props.onEscPress(event);
+          _this.props.onCloseAttempt(event);
+        }
+      };
+      return {
+        esc: onEscape
+      };
+    });
+    _defineProperty(_assertThisInitialized(_this), "dialog", void 0);
+    _defineProperty(_assertThisInitialized(_this), "dialogRef", function (tabTrap) {
+      _this.dialog = tabTrap && tabTrap.node;
+    });
+    return _this;
+  }
+  _createClass(Dialog, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.toggleScrollPreventer();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.show !== this.props.show) {
+        this.toggleScrollPreventer();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.scrollPreventer.reset();
+    }
+  }, {
+    key: "toggleScrollPreventer",
+    value: function toggleScrollPreventer() {
+      if (this.props.show) {
+        this.scrollPreventer.prevent();
+      } else {
+        this.scrollPreventer.reset();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        show = _this$props.show,
+        showCloseButton = _this$props.showCloseButton,
+        onOverlayClick = _this$props.onOverlayClick,
+        onCloseAttempt = _this$props.onCloseAttempt;
+        _this$props.onEscPress;
+        _this$props.onCloseClick;
+        var children = _this$props.children,
+        className = _this$props.className,
+        contentClassName = _this$props.contentClassName,
+        trapFocus = _this$props.trapFocus,
+        dataTest = _this$props['data-test'],
+        closeButtonInside = _this$props.closeButtonInside,
+        portalTarget = _this$props.portalTarget,
+        label = _this$props.label,
+        closeButtonTitle = _this$props.closeButtonTitle,
+        dense = _this$props.dense;
+        _this$props.shortcutOptions;
+        var restProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classNames(modules_5e9b8c03.container, className);
+      var shortcutsMap = this.getShortcutsMap();
+      return show && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PopupTarget, {
+        id: this.uid,
+        className: modules_5e9b8c03.popupTarget
+      }, function (target) {
+        return /*#__PURE__*/React.createElement(TabTrap, _extends({
+          trapDisabled: !trapFocus,
+          "data-test": joinDataTestAttributes('ring-dialog-container', dataTest),
+          ref: _this2.dialogRef,
+          className: classes,
+          role: "presentation"
+        }, restProps), /*#__PURE__*/React.createElement(Shortcuts, {
+          map: shortcutsMap,
+          scope: _this2.state.shortcutsScope,
+          options: _this2.props.shortcutOptions
+        }), (onOverlayClick !== noop || onCloseAttempt !== noop) && /*#__PURE__*/React.createElement("div", {
+          // click handler is duplicated in close button
+          role: "presentation",
+          className: modules_5e9b8c03.clickableOverlay,
+          onClick: _this2.handleClick
+        }), /*#__PURE__*/React.createElement("div", {
+          className: modules_5e9b8c03.innerContainer
+        }, /*#__PURE__*/React.createElement(AdaptiveIsland, {
+          className: classNames(modules_5e9b8c03.content, contentClassName, {
+            [modules_5e9b8c03.dense]: dense
+          }),
+          "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: _this2.onCloseClick,
+          title: closeButtonTitle,
+          "aria-label": closeButtonTitle || 'close dialog'
+        }))), target);
+      }), portalTarget instanceof HTMLElement ? portalTarget : document.body);
+    }
+  }]);
+  return Dialog;
+}(PureComponent);
+_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,
+  closeButtonTitle: PropTypes.string,
+  onOverlayClick: PropTypes.func,
+  onEscPress: PropTypes.func,
+  onCloseClick: PropTypes.func,
+  shortcutOptions: PropTypes.object,
+  // 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,
+  shortcutOptions: {
+    modal: false
+  },
+  trapFocus: false,
+  autoFocusFirst: true
+});
+
+export { Dialog as default };

package/dist/dialog/dialog__body-scroll-preventer.d.ts

@@ -0,0 +1,9 @@
+export declare const preventerFactory: (key: string | number) => {
+    prevent: () => void;
+    reset: () => void;
+};
+declare const _default: {
+    prevent: () => void;
+    reset: () => void;
+};
+export default _default;

package/dist/dialog/dialog__body-scroll-preventer.js

@@ -0,0 +1,6 @@
+import 'core-js/modules/es.array.iterator.js';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.set.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'scrollbar-width';
+export { d as default, p as preventerFactory } from '../_helpers/dialog__body-scroll-preventer.js';