@jetbrains/ring-ui 4.1.0-beta.9 → 4.1.4

package/dist/dialog/dialog.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, a as _objectWithoutProperties, b as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+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';
@@ -29,7 +29,8 @@ import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
 import '../global/memoize.js';
 import '../global/theme.js';
 import '../link/clickableLink.js';
@@ -105,8 +106,7 @@ class Dialog extends PureComponent {
   }
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       show,
       showCloseButton,
       onOverlayClick,
@@ -119,10 +119,10 @@ class Dialog extends PureComponent {
       trapFocus,
       'data-test': dataTest,
       closeButtonInside,
-      portalTarget
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["show", "showCloseButton", "onOverlayClick", "onCloseAttempt", "onEscPress", "onCloseClick", "children", "className", "contentClassName", "trapFocus", "data-test", "closeButtonInside", "portalTarget"]);
-
+      portalTarget,
+      label,
+      ...restProps
+    } = this.props;
     const classes = classNames(modules_5e9b8c03.container, className);
     const shortcutsMap = this.getShortcutsMap();
     return show && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(PopupTarget, {
@@ -147,7 +147,8 @@ class Dialog extends PureComponent {
     }, /*#__PURE__*/React.createElement(AdaptiveIsland, {
       className: classNames(modules_5e9b8c03.content, contentClassName),
       "data-test": "ring-dialog",
-      role: "dialog"
+      role: "dialog",
+      "aria-label": label
     }, children, showCloseButton && /*#__PURE__*/React.createElement(Button, {
       icon: closeIcon,
       "data-test": "ring-dialog-close-button",
@@ -164,6 +165,7 @@ class Dialog extends PureComponent {
 }
 
 _defineProperty(Dialog, "propTypes", {
+  label: PropTypes.string,
   className: PropTypes.string,
   contentClassName: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
@@ -184,6 +186,7 @@ _defineProperty(Dialog, "propTypes", {
 });
 
 _defineProperty(Dialog, "defaultProps", {
+  label: 'Dialog',
   onOverlayClick: noop,
   onEscPress: noop,
   onCloseClick: noop,
@@ -194,4 +197,4 @@ _defineProperty(Dialog, "defaultProps", {
   autoFocusFirst: true
 });
 
-export default Dialog;
+export { Dialog as default };

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

@@ -1,2 +1,2 @@
 import 'scrollbar-width';
-export { p as default } from '../_helpers/dialog__body-scroll-preventer.js';
+export { d as default, p as preventerFactory } from '../_helpers/dialog__body-scroll-preventer.js';

package/dist/dialog-ng/dialog-ng.js

@@ -0,0 +1,601 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import angular from 'angular';
+import { createFocusTrap } from 'focus-trap';
+import { getStyles, getRect } from '../global/dom.js';
+import RingAngularComponent from '../global/ring-angular-component.js';
+import shortcutsInstance from '../shortcuts/core.js';
+import ButtonNG from '../button-ng/button-ng.js';
+import PromisedClick from '../promised-click-ng/promised-click-ng.js';
+import rgCompilerModuleName from '../compiler-ng/compiler-ng.js';
+import { m as modules_5e9b8c03, p as preventerFactory } from '../_helpers/dialog__body-scroll-preventer.js';
+import { m as modules_e6a056e1 } from '../_helpers/island.js';
+import dialogTemplate from './dialog-ng__template.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import 'classnames';
+import '../icon-ng/icon-ng.js';
+import '../icon/icon__constants.js';
+import '../template-ng/template-ng.js';
+import '../_helpers/icon.js';
+import '../global/theme.js';
+import 'react';
+import '../_helpers/button__classes.js';
+import 'scrollbar-width';
+
+var modules_b378ce5a = {"unit":"8px","dialogContainer":"dialogContainer_rui_1466","wide":"wide_rui_1466","autoWidth":"autoWidth_rui_1466","header":"header_rui_1466","inSidebar":"inSidebar_rui_1466","scrollableWrapper":"scrollableWrapper_rui_1466","content":"content_rui_1466","error":"error_rui_1466","footer":"footer_rui_1466","footerDescription":"footerDescription_rui_1466","footerItems":"footerItems_rui_1466","footerItem":"footerItem_rui_1466"};
+
+rgDialogContentDirective.$inject = ["$compile", "$q"];
+rgDialogDirective.$inject = ["$timeout"];
+/**
+ * @name Dialog Ng
+ */
+
+const angularModule = angular.module('Ring.dialog', [ButtonNG, PromisedClick, rgCompilerModuleName]);
+
+class DialogController extends RingAngularComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "hide", () => {
+      if (!this.inSidebar) {
+        this.scrollPreventer.reset();
+      }
+
+      this.active = false;
+      this.content = '';
+      this.focusTrap.deactivate();
+      Reflect.deleteProperty(this, 'DIALOG_NAMESPACE');
+
+      if (shortcutsInstance.indexOfScope(this.dialogService.DIALOG_NAMESPACE) > -1) {
+        shortcutsInstance.setScope(this.currentShortcutsScope);
+      }
+
+      this._resetFormState();
+
+      this.$inject.$scope.$broadcast('dialog.hide');
+    });
+
+    _defineProperty(this, "serverErrorFields", []);
+
+    this.styles = modules_b378ce5a;
+    this.dialogStyles = modules_5e9b8c03;
+    this.islandStyles = modules_e6a056e1;
+    this.scrollPreventer = preventerFactory();
+    this.$inject.$q((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+
+  $onInit() {
+    const {
+      dialog,
+      dialogInSidebar,
+      $scope
+    } = this.$inject;
+    const dialogService = this.inSidebar ? dialogInSidebar : dialog;
+    this.focusTrap = createFocusTrap(this.$inject.$element[0], {
+      fallbackFocus: '[data-anchor="focus-trap-fallback"]',
+      escapeDeactivates: false
+    });
+    this.dialogService = dialogService;
+    this.previousBodyWidth = null;
+    $scope.$on('$routeChangeSuccess', this.hide);
+    $scope.$on('$routeUpdate', this.hide);
+    $scope.$on('$destroy', dialogService.unregister);
+    $scope.$watch(() => this.active, () => {
+      if (this.active) {
+        shortcutsInstance.bindMap(this.getShortcuts(), {
+          scope: this.DIALOG_NAMESPACE
+        });
+      } else {
+        this.reset();
+      }
+    });
+    dialogService.register(this);
+  }
+
+  getShortcuts() {
+    const defaultEscHandler = function escHandler() {
+      this.active = false;
+      this.focusTrap.deactivate();
+      this.$inject.$scope.$apply();
+    }.bind(this);
+
+    const dialogShortcuts = {
+      esc: defaultEscHandler,
+      enter: this.applyDefaultHandler(false),
+      'mod+enter': this.applyDefaultHandler(true)
+    };
+    angular.extend(dialogShortcuts, this.shortcuts);
+
+    if (this.shortcuts && this.shortcuts.esc) {
+      /**
+       * Merge ESC handler
+       * @type {Function} {dialogShortcuts.esc}
+       */
+      const customHandler = dialogShortcuts.esc;
+
+      dialogShortcuts.esc = () => {
+        const result = customHandler();
+        defaultEscHandler();
+        return result;
+      };
+    }
+
+    return dialogShortcuts;
+  }
+
+  handleClick(event) {
+    const isOverlayClicked = event.target === event.currentTarget;
+
+    if (this.inSidebar || !this.closeOnClick || !isOverlayClicked) {
+      return;
+    }
+
+    this.hide();
+  }
+
+  setTitle(title) {
+    this.title = title;
+  }
+
+  compileTemplate() {
+    if (this.config.data) {
+      const element = angular.element(this.template);
+      return {
+        element,
+        link: this.$inject.$compile(element)
+      };
+    }
+
+    return this.$inject.rgCompiler(this.config).catch(error => {
+      this.reject(error);
+      return this.$inject.$q.reject(error);
+    });
+  }
+
+  show(config) {
+    const {
+      $q,
+      $scope
+    } = this.$inject;
+
+    if (!this.inSidebar) {
+      this.scrollPreventer.prevent();
+
+      if (config && config.trapFocus === true) {
+        this.focusTrap.activate();
+      }
+    }
+
+    if (this.active) {
+      this.reset();
+    } // Clear dialog errors
+
+
+    this.error = null;
+
+    if (this.dialogForm) {
+      this.dialogForm.$setPristine();
+    }
+
+    if (config) {
+      this.title = config.title;
+      this.buttons = config.buttons;
+      this.data = config.data || {};
+      this.wideDialog = config.wideDialog;
+      this.autoWidth = config.autoWidth;
+      this.scrollableWrapperClassName = config.scrollableWrapperClassName;
+      this.cssClass = config.cssClass || '';
+      this.shortcuts = config.shortcuts;
+      this.content = config.content;
+      this.template = config.template;
+      this.config = config;
+      this.description = config.description && config.description.split('\n') || [];
+      this.closeOnClick = config.closeOnClick; // Backward compatibility with existing templates which use data directly from scope
+
+      $scope.data = this.data;
+    }
+
+    this.currentShortcutsScope = shortcutsInstance.getScope();
+    this.DIALOG_NAMESPACE = this.dialogService.DIALOG_NAMESPACE;
+    shortcutsInstance.setScope(this.dialogService.DIALOG_NAMESPACE);
+    this.active = true;
+    $scope.$broadcast('dialog.show');
+    return $q((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+
+  update() {
+    let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    Object.assign(this.data, config.data);
+    Object.assign(this.buttons, config.buttons);
+  }
+
+  _resetFormState() {
+    const dialogForm = this.dialogForm;
+
+    if (!dialogForm) {
+      return;
+    }
+
+    dialogForm.$setPristine();
+    dialogForm.$setUntouched();
+    dialogForm.$valid = true;
+    dialogForm.$invalid = false;
+    dialogForm.$error = {};
+  }
+
+  done(result) {
+    this.resetPosition();
+    this.resolve(result);
+    this.hide();
+  }
+
+  reset(result) {
+    this.done(result);
+  }
+
+  getErrorMessage(errorResponse) {
+    var _errorResponse$data, _errorResponse$data2;
+
+    if (errorResponse !== null && errorResponse !== void 0 && (_errorResponse$data = errorResponse.data) !== null && _errorResponse$data !== void 0 && _errorResponse$data.error_description) {
+      return errorResponse.data.error_description;
+    }
+
+    if (errorResponse !== null && errorResponse !== void 0 && (_errorResponse$data2 = errorResponse.data) !== null && _errorResponse$data2 !== void 0 && _errorResponse$data2.error) {
+      return errorResponse.data.error;
+    }
+
+    return errorResponse;
+  }
+
+  getFieldErrorMessage(errorResponse) {
+    if (errorResponse && errorResponse.data && errorResponse.data.error) {
+      return errorResponse.data.error;
+    }
+
+    return null;
+  }
+
+  action(button) {
+    if (button.inProgress) {
+      return undefined;
+    }
+
+    const errorReporter = errorResponse => {
+      const errorField = errorResponse && errorResponse.data && errorResponse.data.error_field;
+
+      if (errorField && this.dialogForm[errorField]) {
+        this.dialogForm[errorField].$invalid = true;
+        this.dialogForm[errorField].$error[errorField] = [{
+          message: this.getFieldErrorMessage(errorResponse)
+        }];
+        this.serverErrorFields.push(errorField);
+      } else {
+        this.error = this.$inject.$sce.trustAsHtml(this.getErrorMessage(errorResponse));
+      }
+    };
+
+    if (button.action) {
+      if (!button.keepServerErrors) {
+        this.serverErrorFields.forEach(errorField => {
+          this.dialogForm[errorField].$invalid = false;
+          this.dialogForm[errorField].$error = {};
+        });
+        this.serverErrorFields = [];
+      }
+
+      const actionResult = button.action(this.data, button, errorReporter, this.dialogForm, this.buttons);
+      button.inProgress = true;
+      return this.$inject.$q.resolve(actionResult).then(res => {
+        const dontClose = res === false;
+
+        if (!dontClose && button.close !== false) {
+          this.done(res);
+        }
+      }).catch(errorReporter).finally(() => {
+        button.inProgress = false;
+      });
+    } else if (button.close !== false) {
+      this.reset(false);
+    }
+
+    return undefined;
+  }
+
+  applyDefaultHandler(isTextAreaShortcut) {
+    return event => {
+      if (event.target.matches('textarea') !== isTextAreaShortcut || event.target.matches('button')) {
+        return;
+      }
+
+      event.stopPropagation();
+      event.preventDefault();
+
+      if (this.dialogForm.$valid && this.buttons) {
+        for (const button of this.buttons) {
+          if (button.default && !button.hidden && !button.disabled) {
+            this.action(button);
+            this.$inject.$scope.$apply();
+            return;
+          }
+        }
+      }
+    };
+  }
+
+}
+
+DialogController.$inject = [];
+
+_defineProperty(DialogController, "$inject", ['$scope', '$q', 'dialog', '$element', 'dialogInSidebar', '$compile', '$injector', '$controller', 'rgCompiler', '$sce']);
+
+class DialogService extends RingAngularComponent {
+  constructor() {
+    super(...arguments); // Binding proxy methods to a service instance
+
+    _defineProperty(this, "DIALOG_NAMESPACE", 'ring-dialog');
+
+    _defineProperty(this, "fallbackDialog", null);
+
+    _defineProperty(this, "unregister", () => {
+      Reflect.deleteProperty(this, 'ctrl');
+    });
+
+    ['show', 'hide', 'update', 'done', 'reset'].forEach(key => {
+      this[key] = function methodWrapper() {
+        if (this.ctrl) {
+          return this.ctrl[key](...arguments);
+        } else if (this.fallbackDialog) {
+          return this.fallbackDialog[key](...arguments);
+        } else {
+          this.$inject.$log.error('No dialog directive is found');
+          return undefined;
+        }
+      }.bind(this);
+    });
+  }
+
+  register(ctrl) {
+    this.ctrl = ctrl;
+  }
+
+}
+
+DialogService.$inject = [];
+
+_defineProperty(DialogService, "$inject", ['$log']);
+
+class DialogInSidebarService extends DialogService {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "DIALOG_NAMESPACE", 'ring-dialog-in-sidebar');
+
+    this.fallbackDialog = this.$inject.dialog;
+  }
+
+}
+
+DialogInSidebarService.$inject = [];
+
+_defineProperty(DialogInSidebarService, "$inject", [...DialogService.$inject, 'dialog']);
+
+function rgDialogDirective($timeout) {
+  function link(scope, iElement, iAttrs, dialogCtrl) {
+    const node = iElement[0];
+    const dialogContainer = node.querySelector('*[data-anchor=dialog-container]');
+    const dialogHeader = node.querySelector('*[data-anchor=dialog-header]');
+    const dialogCustomFooter = node.querySelector('*[data-anchor=dialog-custom-footer-container]'); // Left for backward compatibility with existing templates that use data directly from scope
+
+    scope.dialogForm = dialogCtrl.dialogForm;
+
+    function setPosition(top, left) {
+      Object.assign(dialogContainer.style, {
+        top: `${top}px`,
+        left: `${left}px`
+      });
+    } // Focus first input
+
+
+    function focusFirst() {
+      const controls = Array.from(node.querySelectorAll('input,select,button,textarea,*[contentEditable=true]')).filter(inputNode => getStyles(inputNode).display !== 'none');
+
+      if (controls.length) {
+        controls[0].focus();
+      }
+    }
+
+    function onMousemove(e) {
+      e.preventDefault();
+      const pageHeight = window.innerHeight;
+      const pageWidth = window.innerWidth;
+      const clearance = 10;
+      const maxTop = pageHeight - clearance;
+      const maxLeft = pageWidth - clearance;
+      const newTop = getRect(dialogHeader).top + e.movementY;
+      const newLeft = getRect(dialogHeader).left + e.movementX;
+
+      if (newTop > maxTop || newTop < clearance) {
+        return;
+      }
+
+      if (newLeft > maxLeft || newLeft < clearance) {
+        return;
+      }
+
+      const offsetY = parseFloat(dialogContainer.style.top) || 0;
+      const offsetX = parseFloat(dialogContainer.style.left) || 0;
+      setPosition(offsetY + e.movementY, offsetX + e.movementX);
+    }
+
+    function onMouseup() {
+      document.removeEventListener('mousemove', onMousemove);
+      document.removeEventListener('mouseup', onMouseup);
+    }
+
+    function onMousedown() {
+      if (!dialogCtrl.inSidebar) {
+        // Duct tape for all Ring 1.0 dropdown components inside
+        node.dispatchEvent(new CustomEvent('ring.popup-close'));
+        document.addEventListener('mousemove', onMousemove);
+        document.addEventListener('mouseup', onMouseup);
+      }
+    }
+
+    function onFocusin(e) {
+      if (!node.contains(e.target) && e.target.classList.contains('ring-popup')) {
+        e.preventDefault();
+        focusFirst();
+      }
+    }
+
+    function setCustomFooter(customFooterElem) {
+      const placeholder = angular.element(dialogCustomFooter);
+      const footer = angular.element(`<div class="${this.styles.footer}"></div>`).append(customFooterElem);
+      placeholder.empty();
+      placeholder.append(footer);
+    }
+
+    dialogCtrl.resetPosition = () => dialogContainer.removeAttribute('style');
+
+    dialogCtrl.setCustomFooter = setCustomFooter;
+    dialogHeader.addEventListener('mousedown', onMousedown);
+    document.addEventListener('focusin', onFocusin);
+    scope.$on('rgDialogContentLoaded', () => $timeout(focusFirst)); // Backward compatibility for youtrack (if they are using "content" property)
+    // which is actually ng-include with $includeContentLoaded event in the end
+
+    scope.$on('$includeContentLoaded', () => $timeout(focusFirst));
+    scope.$on('dialog.hide', () => {
+      angular.element(dialogCustomFooter).empty();
+    });
+    scope.$on('$destroy', () => {
+      dialogHeader.removeEventListener('mousedown', onMousedown);
+      document.removeEventListener('mousemove', onMousemove);
+      document.removeEventListener('mouseup', onMouseup);
+      document.removeEventListener('focusin', onFocusin);
+      window.removeEventListener('resize', setPosition);
+    });
+  }
+
+  return {
+    scope: {},
+    controller: DialogController,
+    bindToController: {
+      inSidebar: '@?',
+      active: '=?'
+    },
+    replace: true,
+    template: dialogTemplate,
+    controllerAs: 'dialog',
+    link
+  };
+}
+
+function rgDialogTitleDirective() {
+  function link(scope, iElement, iAttrs, dialogCtrl) {
+    dialogCtrl.setTitle(scope.title);
+  }
+
+  return {
+    scope: {
+      title: '@rgDialogTitle'
+    },
+    require: '^rgDialog',
+    link
+  };
+}
+
+function rgDialogFooterDirective() {
+  function link(scope, iElement, iAttrs, dialogCtrl, transclude) {
+    scope.$on('rgDialogContentLoaded', () => {
+      transclude(scope, clone => {
+        dialogCtrl.setCustomFooter(clone);
+      });
+    });
+  }
+
+  return {
+    require: '^rgDialog',
+    transclude: true,
+    link
+  };
+}
+
+function rgDialogContentDirective($compile, $q) {
+  return {
+    link: function link(scope, iElement) {
+      const element = iElement[0];
+      let contentScope;
+
+      function createIncludeNode() {
+        const node = document.createElement('ng-include');
+        node.setAttribute('src', 'dialog.content');
+        return node;
+      }
+
+      function isOldDataAPI() {
+        return scope.dialog.config.data;
+      }
+
+      function compileContent() {
+        contentScope = scope.$new();
+
+        if (angular.isDefined(scope.dialog.content)) {
+          const templateNode = angular.element(createIncludeNode());
+          element.appendChild(templateNode[0]);
+          return $compile(templateNode)(contentScope)[0];
+        }
+
+        return $q.when(scope.dialog.compileTemplate()).then(compiledData => {
+          const templateScope = isOldDataAPI() ? contentScope : scope.dialog.config.scope || contentScope; // XXX(maksimrv): We should put element to directive
+          // before link because some directives (shortcuts)
+          // depends from global directives (shortcuts-app)
+
+          angular.element(element).append(compiledData.element);
+          compiledData.link(templateScope);
+          scope.$broadcast('rgDialogContentLoaded');
+        }).catch(angular.noop);
+      }
+
+      function destroy() {
+        function cleanupElement(_element) {
+          while (_element.childNodes.length) {
+            // XXX(maksimrv): We should use jQuery.remove method because
+            // AngularJS intercepts all jqLite/jQuery's DOM destruction apis and fires $destroy event
+            // on all DOM nodes being removed.
+            // This can be used to clean up bindings to the DOM
+            // element before it is removed.
+            angular.element(_element.childNodes[0]).remove();
+          }
+        }
+
+        if (contentScope) {
+          contentScope.$destroy();
+          cleanupElement(element);
+        }
+      }
+
+      scope.$on('dialog.hide', destroy);
+      scope.$on('dialog.show', () => {
+        destroy();
+        compileContent();
+      });
+    }
+  };
+}
+
+angularModule.directive('rgDialog', rgDialogDirective);
+angularModule.directive('rgDialogTitle', rgDialogTitleDirective);
+angularModule.directive('rgDialogFooter', rgDialogFooterDirective);
+angularModule.directive('rgDialogContent', rgDialogContentDirective);
+angularModule.service('dialog', DialogService);
+angularModule.service('dialogInSidebar', DialogInSidebarService);
+var DialogNg = angularModule.name;
+
+export { DialogNg as default };