@jetbrains/ring-ui 4.1.1 → 4.1.2

package/dist/input/input.js

@@ -0,0 +1,228 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.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 '../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 = `${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${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,166 @@
+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 '../global/dom.js';
+import '../icon-ng/icon-ng.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_e22b","clear":"clear_rui_e22b"};
+
+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 = `${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${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", `
+<div
+  data-test="ring-input-container"
+  ng-class="$ctrl.getContainerClasses()"
+>
+  <input
+    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+    type="text"
+    data-test="ring-input"
+    class="${modules_88cfaf40.input}"
+    name="{{$ctrl.name}}"
+    ng-if="!$ctrl.multiline"
+    placeholder="{{$ctrl.placeholder}}"
+    ng-model="$ctrl.value"
+    ng-required="$ctrl.required"
+    ng-disabled="$ctrl.disabled"
+    ng-minlength="$ctrl.ngMinlength"
+    ng-maxlength="$ctrl.ngMaxlength"
+    ng-change="$ctrl.onInputChange()"
+    ng-keyup="$ctrl.onKeyUp()"
+  />
+
+  <textarea
+    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
+    data-test="ring-input"
+    ng-if="$ctrl.multiline"
+    class="${modules_88cfaf40.input}"
+    rows="1"
+    name="{{$ctrl.name}}"
+    placeholder="{{$ctrl.placeholder}}"
+    ng-model="$ctrl.value"
+    ng-required="$ctrl.required"
+    ng-disabled="$ctrl.disabled"
+    ng-minlength="$ctrl.ngMinlength"
+    ng-maxlength="$ctrl.ngMaxlength"
+    ng-change="$ctrl.onInputChange()"
+    ng-keyup="$ctrl.onKeyUp()"
+  ></textarea>
+
+  <rg-button
+    ng-if="$ctrl.clearable"
+    data-test="ring-input-clear"
+    class="${modules_88cfaf40.clear} ${modules_c40fa551.clear}"
+    icon="{{:: $ctrl.closeIcon}}"
+    ng-click="$ctrl.onClear()"
+  ></rg-button>
+
+  <label
+    ng-if="!$ctrl.borderless"
+    class="${modules_88cfaf40.label}"
+  >{{$ctrl.label}}</label>
+
+  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.underline}"></div>
+  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.focusUnderline}"></div>
+  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.errorUnderline}"></div>
+  <div ng-if="!$ctrl.borderless && $ctrl.error" class="${modules_88cfaf40.errorText} ${modules_c40fa551.errorText}">{{$ctrl.error}}</div>
+</div>
+  `);
+
+angularModule.component('rgInput', RingInputComponent);
+var InputNg = angularModule.name;
+
+export { InputNg as default };

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

@@ -0,0 +1,47 @@
+import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.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, _temp;
+
+  return _temp = _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), _temp;
+}
+
+export { PhaseContext, ScrollHandlerContext, adaptiveIslandHOC as default };

package/dist/island/content.js

@@ -0,0 +1,156 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import createResizeDetector from 'element-resize-detector';
+import scheduleRAF from '../global/schedule-raf.js';
+import { m as modules_e6a056e1 } from '../_helpers/island.js';
+import { ScrollHandlerContext } from './adaptive-island-hoc.js';
+import '../global/linear-function.js';
+
+const scheduleScrollAction = scheduleRAF();
+
+const noop = () => {};
+
+const END_DISTANCE = 16;
+
+class Content extends Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "state", {
+      scrolledToTop: true,
+      scrolledToBottom: false
+    });
+
+    _defineProperty(this, "resizeDetector", createResizeDetector({
+      strategy: 'scroll'
+    }));
+
+    _defineProperty(this, "setWrapper", node => {
+      if (!node) {
+        return;
+      }
+
+      this.wrapperNode = node;
+      this.resizeDetector.listenTo(node, this.calculateScrollPosition);
+    });
+
+    _defineProperty(this, "calculateScrollPosition", () => scheduleScrollAction(() => {
+      const {
+        scrollableNode
+      } = this;
+
+      if (!scrollableNode) {
+        return;
+      }
+
+      const {
+        scrollTop,
+        scrollHeight,
+        offsetHeight
+      } = scrollableNode;
+      const scrolledToTop = scrollTop === 0;
+      const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
+
+      if (scrolledToBottom) {
+        this.props.onScrollToBottom();
+      }
+
+      this.setState({
+        scrolledToTop,
+        scrolledToBottom
+      });
+    }));
+
+    _defineProperty(this, "onScroll", () => {
+      this.props.onScroll(this.scrollableNode);
+      this.calculateScrollPosition();
+    });
+
+    _defineProperty(this, "setScrollableNodeAndCalculatePosition", node => {
+      if (!node) {
+        return;
+      }
+
+      this.scrollableNode = node;
+      this.calculateScrollPosition();
+    });
+  }
+
+  componentWillUnmount() {
+    this.scrollableNode = null;
+
+    if (!this.wrapperNode) {
+      return;
+    }
+
+    this.resizeDetector.removeAllListeners(this.wrapperNode);
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      bottomBorder,
+      scrollableWrapperClassName,
+      onScroll,
+      onScrollToBottom,
+      fade,
+      ...restProps
+    } = this.props;
+    const {
+      scrolledToTop,
+      scrolledToBottom
+    } = this.state;
+    const classes = classNames(modules_e6a056e1.content, className, {
+      [modules_e6a056e1.contentWithTopFade]: fade && !scrolledToTop,
+      [modules_e6a056e1.contentWithBottomFade]: fade && !scrolledToBottom,
+      [modules_e6a056e1.withTransparentBottomBorder]: bottomBorder,
+      [modules_e6a056e1.withBottomBorder]: bottomBorder && !scrolledToBottom
+    });
+    const scrollableWrapperClasses = classNames(modules_e6a056e1.scrollableWrapper, scrollableWrapperClassName);
+    return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      "data-test": "ring-island-content",
+      className: classes
+    }), /*#__PURE__*/React.createElement("div", {
+      // it has to be focusable because it can be scrollable
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex: 0,
+      "data-scrollable-container": true,
+      className: scrollableWrapperClasses,
+      ref: this.setScrollableNodeAndCalculatePosition,
+      onScroll: fade ? this.onScroll : noop
+    }, fade && /*#__PURE__*/React.createElement("div", {
+      ref: this.setWrapper
+    }, children), !fade && children));
+  }
+
+}
+
+_defineProperty(Content, "propTypes", {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  scrollableWrapperClassName: PropTypes.string,
+  fade: PropTypes.bool,
+  bottomBorder: PropTypes.bool,
+  onScroll: PropTypes.func,
+  onScrollToBottom: PropTypes.func
+});
+
+_defineProperty(Content, "defaultProps", {
+  fade: true,
+  bottomBorder: false,
+  onScroll: noop,
+  onScrollToBottom: noop
+});
+
+const ContentWrapper = props => /*#__PURE__*/React.createElement(ScrollHandlerContext.Consumer, null, onScroll => {
+  const addProps = onScroll != null ? {
+    onScroll,
+    bottomBorder: true
+  } : {};
+  return /*#__PURE__*/React.createElement(Content, _extends({}, props, addProps));
+});
+
+export { ContentWrapper as default };

package/dist/island/header.js

@@ -0,0 +1,83 @@
+import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { interpolateLinear } from '../global/linear-function.js';
+import { m as modules_e6a056e1 } from '../_helpers/island.js';
+import { PhaseContext } from './adaptive-island-hoc.js';
+
+const Start = {
+  FONT_SIZE: 24,
+  LINE_HEIGHT: 28,
+  PADDING: 16
+};
+const End = {
+  FONT_SIZE: 13,
+  LINE_HEIGHT: 28,
+  // Compensation
+  X: 0.4,
+  Y: 0.1,
+  SPACING: 1.09
+};
+const BORDER_APPEAR_PHASE = 0.5;
+
+class Header extends Component {
+  style(name) {
+    return interpolateLinear(Start[name] || 0, End[name] || 0, this.props.phase);
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      wrapWithTitle,
+      border,
+      phase,
+      ...restProps
+    } = this.props;
+    const classes = classNames(modules_e6a056e1.header, className, {
+      [modules_e6a056e1.withBottomBorder]: border || phase >= BORDER_APPEAR_PHASE
+    });
+    const headerStyle = phase != null ? {
+      lineHeight: `${this.style('LINE_HEIGHT')}px`,
+      // need to append px because number is a valid line-height value
+      paddingTop: this.style('PADDING')
+    } : null;
+    const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;
+    const titleStyle = phase != null && phase < 1 ? {
+      fontSize: Start.FONT_SIZE,
+      transform: `translate(${this.style('X')}px, ${this.style('Y')}px) scale(${scaleFont})`,
+      letterSpacing: this.style('SPACING')
+    } : null;
+    return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+      "data-test": "ring-island-header",
+      className: classes,
+      style: headerStyle
+    }), wrapWithTitle && /*#__PURE__*/React.createElement("h2", {
+      className: modules_e6a056e1.title,
+      style: titleStyle
+    }, children), !wrapWithTitle && children);
+  }
+
+}
+
+_defineProperty(Header, "propTypes", {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  border: PropTypes.bool,
+  wrapWithTitle: PropTypes.bool,
+  phase: PropTypes.number
+});
+
+_defineProperty(Header, "defaultProps", {
+  wrapWithTitle: true
+});
+
+const HeaderWrapper = props => /*#__PURE__*/React.createElement(PhaseContext.Consumer, null, phase => {
+  const addProps = phase != null ? {
+    phase
+  } : {};
+  return /*#__PURE__*/React.createElement(Header, _extends({}, props, addProps));
+});
+
+export { HeaderWrapper as default };