@jetbrains/ring-ui 4.2.9 → 4.2.10

package/dist/icon/icon__svg.js

@@ -0,0 +1,83 @@
+import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.string.replace.js';
+import React, { memo } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import memoize from '../global/memoize.js';
+import { m as modules_29747b80 } from '../_helpers/icon.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+function convertReactSVGDOMProperty(str) {
+  return str.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());
+}
+
+function serializeAttrs(map) {
+  const res = {};
+
+  for (let i = 0; i < map.length; i++) {
+    const key = map[i].name;
+    let prop = key;
+
+    if (key === 'class') {
+      prop = 'className';
+    } else if (!key.startsWith('data-')) {
+      prop = convertReactSVGDOMProperty(key);
+    }
+
+    res[prop] = map[i].value;
+  }
+
+  return res;
+}
+
+function extractSVGProps(svgNode) {
+  const map = svgNode.attributes;
+  return map.length > 0 ? serializeAttrs(map) : null;
+}
+
+const getSVGFromSource = memoize(src => {
+  const svgContainer = document.createElement('div');
+  svgContainer.innerHTML = src;
+  const svg = svgContainer.firstElementChild;
+  svg.remove ? svg.remove() : svgContainer.removeChild(svg);
+  return {
+    props: extractSVGProps(svg),
+    html: svg.innerHTML
+  };
+});
+
+function isCompatibilityMode(iconSrc) {
+  const hasWidth = /width="[\d\.]+"/ig.test(iconSrc);
+  const hasHeight = /height="[\d\.]+"/ig.test(iconSrc);
+  return !hasWidth || !hasHeight;
+}
+
+function IconSVG(_ref) {
+  let {
+    src,
+    className,
+    ...rest
+  } = _ref;
+  const glyphClasses = classNames(modules_29747b80.glyph, {
+    [modules_29747b80.compatibilityMode]: isCompatibilityMode(src)
+  }, className);
+  const {
+    props,
+    html
+  } = getSVGFromSource(src);
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, rest, {
+    className: glyphClasses,
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  }));
+}
+
+IconSVG.propTypes = {
+  className: PropTypes.string,
+  src: PropTypes.string.isRequired,
+  style: PropTypes.object
+};
+var IconSVG$1 = /*#__PURE__*/memo(IconSVG);
+
+export { IconSVG$1 as default };

package/dist/icon/index.js

@@ -0,0 +1,12 @@
+export { default } from './icon.js';
+export { Size } from './icon__constants.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import 'prop-types';
+import 'classnames';
+import 'util-deprecate';
+import '../_helpers/icon.js';
+import './icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';

package/dist/icon-ng/icon-ng.js

@@ -0,0 +1,91 @@
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import angular from 'angular';
+import { Color } from '../icon/icon__constants.js';
+import RingTemplateNg from '../template-ng/template-ng.js';
+import { m as modules_29747b80 } from '../_helpers/icon.js';
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import '../global/ring-angular-component.js';
+
+/**
+ * @name Icon Ng
+ */
+
+const angularModule = angular.module('Ring.icon', [RingTemplateNg]);
+const BASE64_PREFIX = 'data:image/svg+xml;base64,';
+angularModule.directive('rgIcon', function rgIconDirective() {
+  return {
+    restrict: 'E',
+    scope: {
+      glyph: '@',
+      loading: '=?',
+      color: '@?',
+      size: '@?',
+      height: '@?',
+      width: '@?'
+    },
+    template: "<span class=\"".concat(modules_29747b80.icon, "\" rg-template=\"normalizedGlyph\" rg-template-class=\"").concat(modules_29747b80.glyph, "\"></span>"),
+    controller: ["$scope", $scope => {
+      function decodeBase64IfNeeded(glyph) {
+        // This hack allows passing SVG content as string from angular templates like
+        // <rg-icon glyph="data:image/svg+xml;base64,PHN2ZyB4bWx...></rg-icon>
+        const isEncoded = glyph.indexOf(BASE64_PREFIX) === 0;
+        return isEncoded ? window.atob(glyph.replace(BASE64_PREFIX, '')) : glyph;
+      }
+
+      $scope.$watch('glyph', value => {
+        if (!value) {
+          return;
+        }
+
+        $scope.normalizedGlyph = decodeBase64IfNeeded(value);
+      });
+    }],
+    link: function link(scope, iElement, iAttrs) {
+      iAttrs.$addClass('ring-icon'); // TODO: We keep this class for now for compatibility reasons (styles overrides)
+
+      scope.$watch('loading', value => {
+        if (value) {
+          iAttrs.$addClass(modules_29747b80.loading);
+        } else {
+          iAttrs.$removeClass(modules_29747b80.loading);
+        }
+      });
+      scope.$watch(() => scope.color && Color[scope.color] && modules_29747b80[Color[scope.color]], (colorClass, prevColorClass) => {
+        if (colorClass) {
+          iAttrs.$addClass(colorClass); // Remove previous class, but don't remove initial one
+
+          if (prevColorClass && prevColorClass !== colorClass) {
+            iAttrs.$removeClass(prevColorClass);
+          }
+        }
+      });
+      scope.$watchGroup(['size', 'width', 'height'], _ref => {
+        let [size, width, height] = _ref;
+        const svgNode = iElement[0].querySelector('svg');
+
+        if (!svgNode) {
+          return;
+        }
+
+        if (size && !width && !height) {
+          const sizeString = "".concat(size, "px");
+          const style = "width: ".concat(sizeString, "; height: ").concat(sizeString, ";");
+          svgNode.setAttribute('style', style);
+          return;
+        }
+
+        if (width) {
+          svgNode.setAttribute('style', "width: ".concat(width, "px;"));
+        }
+
+        if (height) {
+          svgNode.setAttribute('style', "height: ".concat(height, "px;"));
+        }
+      });
+    }
+  };
+});
+var IconNG = angularModule.name;
+
+export { IconNG as default };

package/dist/input/input.js

@@ -0,0 +1,230 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close';
+import { withTheme } from '../global/theme.js';
+export { default as Theme } from '../global/theme.js';
+import Button from '../button/button.js';
+import getUID from '../global/get-uid.js';
+import Icon from '../icon/icon.js';
+import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import 'focus-visible';
+import '@jetbrains/icons/chevron-10px';
+import '../link/clickableLink.js';
+import '../_helpers/button__classes.js';
+import '../icon/icon__constants.js';
+import 'util-deprecate';
+import '../_helpers/icon.js';
+import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
+import '../global/memoize.js';
+
+function noop() {}
+/**
+ * @name Input
+ */
+
+
+const Size = {
+  AUTO: 'Auto',
+  S: 'S',
+  M: 'M',
+  L: 'L',
+  FULL: 'FULL'
+};
+class Input extends PureComponent {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      empty: true
+    });
+
+    _defineProperty(this, "id", getUID('ring-input-'));
+
+    _defineProperty(this, "underlineRef", el => {
+      this.underlineNode = el;
+    });
+
+    _defineProperty(this, "inputRef", el => {
+      const {
+        inputRef
+      } = this.props;
+      this.input = el;
+
+      if (typeof inputRef === 'function') {
+        inputRef(el);
+      } else {
+        inputRef.current = el;
+      }
+    });
+
+    _defineProperty(this, "clear", e => {
+      this.props.onClear && this.props.onClear(e);
+    });
+
+    _defineProperty(this, "handleChange", e => {
+      this.props.onChange(e);
+      this.checkValue(e.target);
+    });
+  }
+
+  componentDidMount() {
+    this.adapt();
+  }
+
+  componentDidUpdate() {
+    this.adapt();
+  }
+
+  getId() {
+    return this.props.id || this.id;
+  }
+
+  checkValue() {
+    this.setState({
+      empty: !this.input.value
+    });
+
+    if (this.props.multiline && this.input.scrollHeight > this.input.clientHeight) {
+      this.stretch(this.input);
+    }
+  }
+
+  stretch(el) {
+    if (!el || !el.style) {
+      return;
+    }
+
+    el.style.height = "".concat(el.scrollHeight, "px");
+  }
+
+  adapt() {
+    this.checkValue();
+    this.stretch(this.underlineNode);
+  }
+
+  render() {
+    const {
+      // Modifiers
+      theme,
+      size,
+      active,
+      multiline,
+      borderless,
+      compact,
+      // Props
+      label,
+      error,
+      className,
+      inputClassName,
+      children,
+      value,
+      onClear,
+      disabled,
+      inputRef,
+      onChange,
+      enableShortcuts,
+      id,
+      placeholder,
+      icon,
+      renderUnderline,
+      ...restProps
+    } = this.props;
+    const minimizeMargins = compact || borderless;
+    const {
+      empty
+    } = this.state;
+    const clearable = !!onClear;
+    const classes = classNames(modules_88cfaf40.container, className, modules_88cfaf40[theme], [modules_88cfaf40["size".concat(size)]], {
+      'ring-js-shortcuts': enableShortcuts === true,
+      [modules_88cfaf40.active]: active,
+      [modules_88cfaf40.error]: error != null,
+      [modules_88cfaf40.empty]: empty,
+      [modules_88cfaf40.noLabel]: !this.props.label,
+      [modules_88cfaf40.withIcon]: icon != null,
+      [modules_88cfaf40.clearable]: clearable,
+      [modules_88cfaf40.compact]: minimizeMargins
+    });
+    const inputClasses = classNames(modules_88cfaf40.input, inputClassName);
+    const TagName = multiline ? 'textarea' : 'input';
+    const text = value != null ? value : children;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes,
+      "data-test": "ring-input"
+    }, icon && /*#__PURE__*/React.createElement(Icon, {
+      glyph: icon,
+      className: modules_88cfaf40.icon
+    }), /*#__PURE__*/React.createElement(TagName, _extends({
+      ref: this.inputRef,
+      onChange: this.handleChange,
+      className: inputClasses,
+      value: text,
+      rows: multiline ? 1 : null,
+      disabled: disabled,
+      id: this.getId(),
+      placeholder: placeholder,
+      "aria-label": typeof label === 'string' && label ? label : placeholder,
+      "data-enabled-shortcuts": Array.isArray(enableShortcuts) ? enableShortcuts.join(',') : null
+    }, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(Button, {
+      title: "Clear input",
+      "data-test": "ring-input-clear",
+      className: modules_88cfaf40.clear,
+      icon: closeIcon,
+      onClick: this.clear
+    }), !minimizeMargins && /*#__PURE__*/React.createElement("label", {
+      htmlFor: this.getId(),
+      className: modules_88cfaf40.label
+    }, label), !borderless && /*#__PURE__*/React.createElement("div", {
+      className: modules_88cfaf40.underline
+    }), !borderless && /*#__PURE__*/React.createElement("div", {
+      className: modules_88cfaf40.focusUnderline
+    }), !minimizeMargins && /*#__PURE__*/React.createElement("div", {
+      className: modules_88cfaf40.errorUnderline
+    }), !minimizeMargins && renderUnderline(this.underlineRef, error));
+  }
+
+}
+
+_defineProperty(Input, "propTypes", {
+  value: PropTypes.string,
+  theme: PropTypes.string,
+  className: PropTypes.string,
+  inputClassName: PropTypes.string,
+  size: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  active: PropTypes.bool,
+  error: PropTypes.string,
+  multiline: PropTypes.bool,
+  borderless: PropTypes.bool,
+  compact: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLInputElement)
+  })]),
+  children: PropTypes.string,
+  enableShortcuts: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string)]),
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  placeholder: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  renderUnderline: PropTypes.func
+});
+
+_defineProperty(Input, "defaultProps", {
+  size: Size.M,
+  onChange: noop,
+  inputRef: noop,
+  enableShortcuts: ['esc'],
+  renderUnderline: (underlineRef, errorText) => /*#__PURE__*/React.createElement("div", {
+    className: modules_88cfaf40.errorText,
+    ref: underlineRef
+  }, errorText)
+});
+
+var Input$1 = withTheme()(Input);
+
+export { Input, Size, Input$1 as default };

package/dist/input-ng/input-ng.js

@@ -0,0 +1,111 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import angular from 'angular';
+import classNames from 'classnames';
+import closeIcon from '@jetbrains/icons/close';
+import RingAngularComponent from '../global/ring-angular-component.js';
+import { m as modules_88cfaf40 } from '../_helpers/input.js';
+import Theme from '../global/theme.js';
+import ButtonNG from '../button-ng/button-ng.js';
+import 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import '../global/dom.js';
+import '../icon-ng/icon-ng.js';
+import 'core-js/modules/es.string.replace.js';
+import '../icon/icon__constants.js';
+import '../template-ng/template-ng.js';
+import '../_helpers/icon.js';
+import '../_helpers/button__classes.js';
+
+var modules_c40fa551 = {"errorText":"errorText_rui_d15a","clear":"clear_rui_d15a"};
+
+const angularModule = angular.module('Ring.input', [ButtonNG]);
+
+class RingInputComponent extends RingAngularComponent {
+  $onInit() {
+    this.closeIcon = closeIcon;
+
+    if (!this.ngModelCtrl) {
+      return;
+    }
+
+    this.ngModelCtrl.$render = () => {
+      this.value = this.ngModelCtrl.$viewValue;
+    };
+  }
+
+  onInputChange() {
+    if (!this.ngModelCtrl) {
+      return;
+    }
+
+    this.ngModelCtrl.$setViewValue(this.value);
+  }
+
+  stretch(el) {
+    if (!el) {
+      return;
+    }
+
+    el.style.height = "".concat(el.scrollHeight, "px");
+  }
+
+  onKeyUp() {
+    if (!this.inputNode) {
+      this.inputNode = this.$inject.$element[0].querySelector('[data-test="ring-input"]');
+    }
+
+    if (this.multiline && this.inputNode.scrollHeight > this.inputNode.clientHeight) {
+      this.stretch(this.inputNode);
+    }
+  }
+
+  onClear() {
+    this.value = '';
+  }
+
+  getContainerClasses() {
+    return classNames(modules_88cfaf40.container, modules_88cfaf40[this.theme || Theme.LIGHT], this.size ? [modules_88cfaf40["size".concat(this.size)]] : null, {
+      [modules_88cfaf40.active]: this.active,
+      [modules_88cfaf40.error]: this.error != null,
+      [modules_88cfaf40.empty]: !this.value,
+      [modules_88cfaf40.noLabel]: !this.label,
+      [modules_88cfaf40.clearable]: this.clearable,
+      [modules_88cfaf40.borderless]: this.borderless
+    });
+  }
+
+}
+
+_defineProperty(RingInputComponent, "$inject", ['$element']);
+
+_defineProperty(RingInputComponent, "require", {
+  ngModelCtrl: '?ngModel'
+});
+
+_defineProperty(RingInputComponent, "bindings", {
+  name: '@',
+  required: '@',
+  ngMinlength: '@',
+  ngMaxlength: '@',
+  placeholder: '@',
+  ngModel: '<',
+  onChange: '&',
+  label: '@',
+  hint: '@',
+  size: '@',
+  theme: '@',
+  disabled: '@',
+  active: '<',
+  error: '@',
+  empty: '<',
+  clearable: '<',
+  borderless: '<',
+  multiline: '<'
+});
+
+_defineProperty(RingInputComponent, "template", "\n<div\n  data-test=\"ring-input-container\"\n  ng-class=\"$ctrl.getContainerClasses()\"\n>\n  <input\n    aria-label=\"{{$ctrl.label || $ctrl.placeholder}}\"\n    type=\"text\"\n    data-test=\"ring-input\"\n    class=\"".concat(modules_88cfaf40.input, "\"\n    name=\"{{$ctrl.name}}\"\n    ng-if=\"!$ctrl.multiline\"\n    placeholder=\"{{$ctrl.placeholder}}\"\n    ng-model=\"$ctrl.value\"\n    ng-required=\"$ctrl.required\"\n    ng-disabled=\"$ctrl.disabled\"\n    ng-minlength=\"$ctrl.ngMinlength\"\n    ng-maxlength=\"$ctrl.ngMaxlength\"\n    ng-change=\"$ctrl.onInputChange()\"\n    ng-keyup=\"$ctrl.onKeyUp()\"\n  />\n\n  <textarea\n    aria-label=\"{{$ctrl.label || $ctrl.placeholder}}\"\n    data-test=\"ring-input\"\n    ng-if=\"$ctrl.multiline\"\n    class=\"").concat(modules_88cfaf40.input, "\"\n    rows=\"1\"\n    name=\"{{$ctrl.name}}\"\n    placeholder=\"{{$ctrl.placeholder}}\"\n    ng-model=\"$ctrl.value\"\n    ng-required=\"$ctrl.required\"\n    ng-disabled=\"$ctrl.disabled\"\n    ng-minlength=\"$ctrl.ngMinlength\"\n    ng-maxlength=\"$ctrl.ngMaxlength\"\n    ng-change=\"$ctrl.onInputChange()\"\n    ng-keyup=\"$ctrl.onKeyUp()\"\n  ></textarea>\n\n  <rg-button\n    ng-if=\"$ctrl.clearable\"\n    data-test=\"ring-input-clear\"\n    class=\"").concat(modules_88cfaf40.clear, " ").concat(modules_c40fa551.clear, "\"\n    icon=\"{{:: $ctrl.closeIcon}}\"\n    ng-click=\"$ctrl.onClear()\"\n  ></rg-button>\n\n  <label\n    ng-if=\"!$ctrl.borderless\"\n    class=\"").concat(modules_88cfaf40.label, "\"\n  >{{$ctrl.label}}</label>\n\n  <div ng-if=\"!$ctrl.borderless\" class=\"").concat(modules_88cfaf40.underline, "\"></div>\n  <div ng-if=\"!$ctrl.borderless\" class=\"").concat(modules_88cfaf40.focusUnderline, "\"></div>\n  <div ng-if=\"!$ctrl.borderless\" class=\"").concat(modules_88cfaf40.errorUnderline, "\"></div>\n  <div ng-if=\"!$ctrl.borderless && $ctrl.error\" class=\"").concat(modules_88cfaf40.errorText, " ").concat(modules_c40fa551.errorText, "\">{{$ctrl.error}}</div>\n</div>\n  "));
+
+angularModule.component('rgInput', RingInputComponent);
+var InputNg = angularModule.name;
+
+export { InputNg as default };

package/dist/island/adaptive-island-hoc.js

@@ -0,0 +1,48 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { createContext, Component } from 'react';
+import { interpolateLinear } from '../global/linear-function.js';
+
+const TITLE_RESIZE_END = 20;
+const TITLE_RESIZE_THRESHOLD = 36;
+const PhaseContext = /*#__PURE__*/createContext();
+const ScrollHandlerContext = /*#__PURE__*/createContext();
+function adaptiveIslandHOC(ComposedComponent) {
+  var _class;
+
+  return _class = class AdaptiveIsland extends Component {
+    constructor() {
+      super(...arguments);
+
+      _defineProperty(this, "state", {
+        phase: 0
+      });
+
+      _defineProperty(this, "onContentScroll", _ref => {
+        let {
+          scrollTop,
+          scrollHeight,
+          clientHeight
+        } = _ref;
+
+        if (scrollHeight - clientHeight >= interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase)) {
+          const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
+          this.setState({
+            phase
+          });
+        }
+      });
+    }
+
+    render() {
+      return /*#__PURE__*/React.createElement(PhaseContext.Provider, {
+        value: this.state.phase
+      }, /*#__PURE__*/React.createElement(ScrollHandlerContext.Provider, {
+        value: this.onContentScroll
+      }, /*#__PURE__*/React.createElement(ComposedComponent, this.props)));
+    }
+
+  }, _defineProperty(_class, "propTypes", ComposedComponent.propTypes), _class;
+}
+
+export { PhaseContext, ScrollHandlerContext, adaptiveIslandHOC as default };