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

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

@@ -0,0 +1,71 @@
+var dialogTemplate = `<div
+  ng-show="dialog.active"
+  ng-class="[!dialog.inSidebar && dialog.dialogStyles.container]"
+  ng-click="dialog.handleClick($event)"
+  ng-attr-data-portaltarget="{{!dialog.inSidebar  ? 'dialog-ng-popup-container' : null}}"
+>
+  <div ng-class="[dialog.dialogStyles.innerContainer]">
+    <div data-anchor="dialog-container"
+      ng-attr-data-in-sidebar="{{dialog.inSidebar  ? 'true' : 'false'}}"
+      ng-attr-data-test="{{dialog.active ? 'ring-dialog' : null}}"
+      ng-class="[
+        dialog.styles.dialogContainer,
+        dialog.cssClass,
+        dialog.wideDialog && dialog.styles.wide,
+        dialog.autoWidth && dialog.styles.autoWidth,
+        dialog.inSidebar && dialog.styles.inSidebar,
+        !dialog.inSidebar && dialog.dialogStyles.content,
+        !dialog.inSidebar && dialog.islandStyles.island
+      ]"
+    >
+      <div ng-class="[dialog.islandStyles.header, dialog.styles.header]"
+        data-anchor="dialog-header"
+        ng-show="dialog.title">
+        <span ng-class="dialog.islandStyles.title">{{ dialog.title }}</span>
+      </div>
+
+      <div ng-class="[dialog.styles.scrollableWrapper, dialog.islandStyles.scrollableWrapper, dialog.scrollableWrapperClassName]">
+        <div ng-class="[dialog.styles.content, dialog.islandStyles.content]">
+          <form name="dialog.dialogForm" class="ring-form ring-js-shortcuts"
+            novalidate>
+            <rg-dialog-content></rg-dialog-content>
+
+            <div class="ring-form__group" ng-show="dialog.error">
+              <div ng-class="dialog.styles.error" ng-bind-html="dialog.error"></div>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div ng-class="dialog.styles.footer"
+        ng-if="dialog.description.length || dialog.buttons.length">
+        <div ng-class="dialog.styles.footerDescription"
+          ng-if="dialog.description && dialog.description.length">
+          <div ng-repeat="line in dialog.description">{{ line }}</div>
+        </div>
+
+        <div ng-class="dialog.styles.footerItems">
+          <rg-button
+            ng-repeat="button in dialog.buttons"
+            ng-class="[dialog.styles.footerItem , button.cssClasses]"
+            mode="{{button.default ? 'primary' : ''}}"
+            text="button.text"
+            ng-disabled="(button.default && dialog.dialogForm.$invalid) || button.disabled"
+            ng-if="!button.hidden"
+            data-test="dialog-footer-button"
+
+            rg-promised-click="dialog.action(button)"
+            promised-mode="loader"
+          >{{ button.label }}
+          </rg-button>
+        </div>
+      </div>
+
+      <div data-anchor="dialog-custom-footer-container"></div>
+
+      <div tabindex="-1" ng-show="false" data-anchor="focus-trap-fallback"></div>
+    </div>
+  </div>
+</div>`;
+
+export { dialogTemplate as default };

package/dist/docked-panel-ng/docked-panel-ng.js

@@ -0,0 +1,170 @@
+import angular from 'angular';
+import scheduleRAF from '../global/schedule-raf.js';
+import { getDocumentScrollTop, getWindowHeight } from '../global/dom.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+
+var modules_655b40c7 = {"unit":"8px","dockedPanel":"dockedPanel_rui_0ffc","fixed":"fixed_rui_0ffc"};
+
+const scheduleAction = scheduleRAF();
+/**
+ * @name Docked Panel Ng
+ */
+
+const angularModule = angular.module('Ring.docked-panel', []);
+angularModule.directive('rgDockedPanel', ["$parse", function rgDockedPanelDirective($parse) {
+  return {
+    link: function link(scope, element, attrs) {
+      const TOGGLE_GAP = 8;
+      const CSS_CLASS_NAME = modules_655b40c7.dockedPanel;
+      const DOCKED_CSS_CLASS_NAME = modules_655b40c7.fixed;
+      const dockedPanelClass = attrs.rgDockedPanelClass || '';
+      const config = attrs.rgDockedPanelConfig ? $parse(attrs.rgDockedPanelConfig)(scope) : null;
+      let initialPanelPos;
+      let isDocked;
+      /**
+       * Container
+       * @type {Element} panel
+       */
+
+      const panel = element[0];
+      panel.classList.add(CSS_CLASS_NAME);
+
+      function getYPosition(node) {
+        const clientRect = node.getBoundingClientRect();
+        return clientRect.top + clientRect.height + getScrollContainerScrollTop();
+      }
+      /**
+       * Save panel initial rects and left margin and container-node for further use
+       */
+
+
+      function saveInitialPos() {
+        initialPanelPos = getYPosition(panel);
+      }
+
+      function getInitialUndockedPosition() {
+        return (config || {}).container ? getYPosition(config.container) : initialPanelPos;
+      }
+
+      function getScrollContainerScrollTop() {
+        if (config && config.scrollContainer) {
+          return config.scrollContainer.scrollTop;
+        }
+
+        return getDocumentScrollTop();
+      }
+
+      function getScrollContainerHeight() {
+        if (config && config.scrollContainer) {
+          return config.scrollContainer.getBoundingClientRect().height;
+        }
+
+        return getWindowHeight();
+      }
+
+      function onBeforeDock() {
+        if (config) {
+          if (config.beforeDock) {
+            scope.$eval(config.beforeDock(element));
+          }
+
+          if (config.className) {
+            panel.classList.add(config.className);
+          }
+        }
+      }
+
+      function onBeforeUndock() {
+        if (config) {
+          if (config.beforeUndock) {
+            scope.$eval(config.beforeUndock(element));
+          }
+
+          if (config.className) {
+            panel.classList.remove(config.className);
+          }
+        }
+      }
+      /**
+       * Docks the panel to the bottom of the page
+       */
+
+
+      function dock() {
+        onBeforeDock();
+        panel.classList.add(DOCKED_CSS_CLASS_NAME);
+
+        if (dockedPanelClass) {
+          panel.classList.add(dockedPanelClass);
+        }
+
+        isDocked = true;
+      }
+
+      function undock() {
+        onBeforeUndock();
+        panel.classList.remove(DOCKED_CSS_CLASS_NAME);
+
+        if (dockedPanelClass) {
+          panel.classList.remove(dockedPanelClass);
+        }
+
+        isDocked = false;
+      }
+
+      function onResize() {
+        if (config) {
+          if (config && config.onResize) {
+            scope.$eval(config.onResize(element, isDocked));
+          }
+        }
+      }
+      /**
+       * Check panel position
+       */
+
+
+      function checkPanelPosition() {
+        const currentPanelRect = panel.getBoundingClientRect();
+
+        if (currentPanelRect.top + currentPanelRect.height > getScrollContainerHeight() && !isDocked) {
+          dock();
+        } else if (isDocked && currentPanelRect.top + currentPanelRect.height + getScrollContainerScrollTop() >= getInitialUndockedPosition() + TOGGLE_GAP) {
+          undock();
+        }
+      }
+
+      function init() {
+        const _onResize = () => {
+          checkPanelPosition();
+          onResize();
+        };
+
+        const scrollListener = () => scheduleAction(checkPanelPosition);
+        /**
+         * Wait until all content on the page is loaded
+         */
+
+
+        scope.$applyAsync(() => {
+          const scrollContainer = (config || {}).scrollContainer || window;
+          scrollContainer.addEventListener('scroll', scrollListener);
+          window.addEventListener('resize', _onResize);
+          scope.$on('$destroy', () => {
+            scrollContainer.removeEventListener('scroll', scrollListener);
+            window.removeEventListener('resize', _onResize);
+          });
+          scheduleAction(() => {
+            saveInitialPos();
+            checkPanelPosition();
+          });
+        });
+      }
+
+      init();
+    }
+  };
+}]);
+var dockedPanelNg = angularModule.name;
+
+export { dockedPanelNg as default };

package/dist/dropdown/anchor.js

@@ -8,7 +8,8 @@ import '../button/button.js';
 export { A as default } from '../_helpers/anchor.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 'focus-visible';
 import '../global/theme.js';

package/dist/dropdown/dropdown.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, { Component, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -9,7 +9,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 '../button/button.js';
 import 'focus-visible';
@@ -130,9 +131,7 @@ class Dropdown extends Component {
       show,
       pinned
     } = this.state;
-
-    const _this$props = this.props,
-          {
+    const {
       initShown,
       onShow,
       onHide,
@@ -144,10 +143,9 @@ class Dropdown extends Component {
       activeClassName,
       hoverMode,
       clickMode,
-      'data-test': dataTest
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["initShown", "onShow", "onHide", "hoverShowTimeOut", "hoverHideTimeOut", "children", "anchor", "className", "activeClassName", "hoverMode", "clickMode", "data-test"]);
-
+      'data-test': dataTest,
+      ...restProps
+    } = this.props;
     const classes = classNames(modules_d9414203.dropdown, className, {
       [activeClassName]: activeClassName != null && show
     });
@@ -233,4 +231,4 @@ _defineProperty(Dropdown, "defaultProps", {
   onMouseLeave: () => {}
 });
 
-export default Dropdown;
+export { Dropdown as default };

package/dist/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,175 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { useMemo, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import List, { ActiveItemContext } from '../list/list.js';
+import Dropdown from '../dropdown/dropdown.js';
+import PopupMenu from '../popup-menu/popup-menu.js';
+import getUID from '../global/get-uid.js';
+import { A as Anchor } from '../_helpers/anchor.js';
+import 'classnames';
+import 'react-virtualized/dist/es/List';
+import 'react-virtualized/dist/es/AutoSizer';
+import 'react-virtualized/dist/es/WindowScroller';
+import 'react-virtualized/dist/es/CellMeasurer';
+import 'util-deprecate';
+import 'memoize-one';
+import '../global/data-tests.js';
+import '../global/schedule-raf.js';
+import '../global/memoize.js';
+import '../global/dom.js';
+import '../shortcuts/shortcuts.js';
+import '../shortcuts/core.js';
+import 'combokeys';
+import '../global/sniffer.js';
+import 'sniffr';
+import '../global/create-stateful-context.js';
+import '../list/list__link.js';
+import '../link/link.js';
+import 'focus-visible';
+import '../link/clickableLink.js';
+import '../_helpers/link.js';
+import '../_helpers/list.js';
+import '../list/list__item.js';
+import '../avatar/avatar.js';
+import '../global/url.js';
+import '../avatar/fallback-avatar.js';
+import '../checkbox/checkbox.js';
+import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/remove-10px';
+import '../icon/icon.js';
+import '../icon/icon__constants.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import '../_helpers/checkbox.js';
+import '../list/list__custom.js';
+import '../global/get-event-key.js';
+import '../list/list__title.js';
+import '../list/list__separator.js';
+import '../list/list__hint.js';
+import '../list/consts.js';
+import '@jetbrains/icons/chevron-10px';
+import '../button/button.js';
+import '../global/theme.js';
+import '../_helpers/button__classes.js';
+import '../popup/popup.js';
+import 'react-dom';
+import '../tab-trap/tab-trap.js';
+import '../popup/position.js';
+import '../popup/popup.consts.js';
+import '../popup/popup.target.js';
+
+const {
+  children,
+  ...dropdownPropTypes
+} = Dropdown.propTypes || {};
+const {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType
+} = PopupMenu.propTypes || {};
+const defaultAriaLabel = 'Dropdown menu';
+
+function DropdownAnchorWrapper(_ref) {
+  let {
+    anchor,
+    pinned,
+    active,
+    activeListItemId,
+    listId,
+    ...restProps
+  } = _ref;
+  const anchorAriaProps = useMemo(() => ({ ...(listId ? {
+      'aria-haspopup': 'true'
+    } : {}),
+    ...(activeListItemId ? {
+      'aria-activedescendant': activeListItemId,
+      'aria-owns': listId
+    } : {}),
+    ...(active ? {
+      'aria-expanded': 'true'
+    } : {})
+  }), [active, activeListItemId, listId]);
+  const anchorProps = useMemo(() => ({
+    active,
+    pinned,
+    ...restProps,
+    ...anchorAriaProps
+  }), [pinned, active, restProps, anchorAriaProps]);
+  const anchorComponentProps = useMemo(() => ({ ...anchorProps,
+    pinned: `${anchorProps.pinned}`
+  }), [anchorProps]);
+
+  if (typeof anchor === 'string') {
+    return /*#__PURE__*/React.createElement(Anchor, anchorComponentProps, anchor);
+  }
+
+  if (typeof anchor === 'function') {
+    return anchor({
+      active,
+      pinned,
+      ...restProps
+    }, anchorAriaProps);
+  }
+
+  if (!Array.isArray(anchor)) {
+    return /*#__PURE__*/cloneElement(anchor, typeof anchor.type === 'string' ? anchorAriaProps : anchorComponentProps);
+  }
+
+  return /*#__PURE__*/React.createElement("div", anchorAriaProps, anchor);
+}
+
+DropdownAnchorWrapper.propTypes = {
+  anchor: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
+  pinned: PropTypes.bool,
+  active: PropTypes.bool,
+  activeListItemId: PropTypes.string,
+  listId: PropTypes.string
+};
+const DropdownMenu = /*#__PURE__*/React.forwardRef(function DropdownMenu(_ref2, forwardedRef) {
+  let {
+    id,
+    anchor,
+    ariaLabel,
+    data,
+    onSelect,
+    menuProps,
+    ...restDropdownProps
+  } = _ref2;
+  const listId = useMemo(() => id || getUID('dropdown-menu-list'), [id]);
+  return /*#__PURE__*/React.createElement(ActiveItemContext.Provider, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
+    anchor: _ref3 => {
+      let {
+        pinned,
+        active,
+        ...restAnchorProps
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(ActiveItemContext.ValueContext.Consumer, null, activeItemId => /*#__PURE__*/React.createElement(DropdownAnchorWrapper, _extends({
+        anchor: anchor,
+        pinned: pinned,
+        active: active,
+        activeListItemId: activeItemId,
+        listId: listId
+      }, restAnchorProps)));
+    }
+  }, restDropdownProps), /*#__PURE__*/React.createElement(PopupMenu, _extends({
+    ref: forwardedRef,
+    id: listId,
+    ariaLabel: ariaLabel || defaultAriaLabel,
+    closeOnSelect: true,
+    activateFirstItem: true,
+    data: data,
+    onSelect: onSelect
+  }, menuProps))));
+});
+DropdownMenu.propTypes = {
+  id: idPropType,
+  data: dataPropType,
+  ariaLabel: ariaLabelPropType,
+  onSelect: onSelectPropType,
+  menuProps: PropTypes.object,
+  ...dropdownPropTypes
+};
+DropdownMenu.ListProps = List.ListProps;
+
+export { DropdownMenu as default };

package/dist/error-bubble/error-bubble.js

@@ -1,4 +1,4 @@
-import { a as _objectWithoutProperties, _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React, { PureComponent, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -18,7 +18,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import '../popup/popup.target.js';
 
-var modules_ee284100 = {"unit":"8px","errorBubblePopup":"errorBubble_errorBubblePopup__23d4f97d","errorBubbleWrapper":"errorBubble_errorBubbleWrapper__23d4f97d","errorBubble":"errorBubble_errorBubble__23d4f97d"};
+var modules_ee284100 = {"unit":"8px","errorBubblePopup":"errorBubblePopup_rui_fe10","errorBubbleWrapper":"errorBubbleWrapper_rui_fe10","errorBubble":"errorBubble_rui_fe10"};
 
 /**
  * @name Error Bubble
@@ -26,13 +26,11 @@ var modules_ee284100 = {"unit":"8px","errorBubblePopup":"errorBubble_errorBubble
 
 class ErrorBubble extends PureComponent {
   render() {
-    const _this$props = this.props,
-          {
+    const {
       children,
-      className
-    } = _this$props,
-          restProps = _objectWithoutProperties(_this$props, ["children", "className"]);
-
+      className,
+      ...restProps
+    } = this.props;
     const errorBubbleClasses = classNames(modules_ee284100.errorBubble, className);
     return /*#__PURE__*/React.createElement("div", {
       className: modules_ee284100.errorBubbleWrapper
@@ -56,4 +54,4 @@ _defineProperty(ErrorBubble, "propTypes", {
   children: PropTypes.node
 });
 
-export default ErrorBubble;
+export { ErrorBubble as default };

package/dist/error-message/error-message.js

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../icon/icon.js';
 import { Size } from '../icon/icon__constants.js';
+import { m as modules_2c5e8509 } from '../_helpers/error-message.js';
 import 'util-deprecate';
-import '../_helpers/icon__svg.js';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
 import '../global/memoize.js';
 
-var modules_2c5e8509 = {"errorMessage":"errorMessage_errorMessage__dedf193e","title":"errorMessage_title__dedf193e","description":"errorMessage_description__dedf193e","content":"errorMessage_content__dedf193e","icon":"errorMessage_icon__dedf193e"};
-
 /**
  * @name Error Message
  */
@@ -52,4 +52,4 @@ _defineProperty(ErrorMessage, "propTypes", {
   className: PropTypes.string
 });
 
-export default ErrorMessage;
+export { ErrorMessage as default };

package/dist/error-message-ng/error-message-ng.js

@@ -0,0 +1,53 @@
+import angular from 'angular';
+import IconNG from '../icon-ng/icon-ng.js';
+import LinkNG from '../link-ng/link-ng.js';
+import { m as modules_2c5e8509 } from '../_helpers/error-message.js';
+import '../icon/icon__constants.js';
+import '../template-ng/template-ng.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import '../global/ring-angular-component.js';
+import '../_helpers/icon.js';
+import '../_helpers/link.js';
+
+/**
+ * @name Error Message Ng
+ */
+
+const angularModule = angular.module('Ring.error-message', [IconNG, LinkNG]);
+angularModule.directive('rgErrorMessage', function rgErrorMessageDirective() {
+  return {
+    replace: true,
+    transclude: true,
+    template: `
+<div class="${modules_2c5e8509.errorMessage}" data-test="ring-error-message">
+
+    <rg-icon class="${modules_2c5e8509.icon}" glyph="{{icon}}" color="gray" size="64"></rg-icon>
+    
+    <div class="${modules_2c5e8509.content}">
+      <div class="${modules_2c5e8509.title}" data-test="ring-error-message-title"
+      ><span ng-if="code">{{ code }}:</span> {{ message }}</div>
+      
+      <div class="${modules_2c5e8509.description}" ng-transclude></div>
+      
+      
+       <div ng-if="links">
+          <span ng-repeat="link in links">
+            <rg-link ng-if="link.target" ng-href="{{link.href}}" target="{{link.target}}">{{link.text}}</rg-link><rg-link
+            ng-if="!link.target" ng-href="{{link.href}}">{{link.text}}</rg-link>{{$last ? '' : ','}}
+          </span>
+        </div>
+    </div>
+</div>
+    `,
+    restrict: 'E',
+    scope: {
+      code: '@',
+      message: '@',
+      links: '=',
+      icon: '@'
+    }
+  };
+});
+var errorMessageNg = angularModule.name;
+
+export { errorMessageNg as default };