@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/form-ng/form-ng.js

@@ -1,176 +0,0 @@
-import angular from 'angular';
-
-import MessageBundle from '../message-bundle-ng/message-bundle-ng';
-import '../input/input-legacy.css';
-import '../error-bubble/error-bubble-legacy.css';
-
-/**
- * @name Form Ng
- */
-
-const angularModule = angular.module('Ring.form', [MessageBundle]);
-
-angularModule.factory('getFormErrorMessages',
-  function getFormErrorMessagesDirective(RingMessageBundle) {
-    function msg(id, formError) {
-      const messageBundleId = `form_${id}`;
-      if (RingMessageBundle.hasOwnProperty(messageBundleId)) {
-        return RingMessageBundle[messageBundleId]();
-      }
-
-      const formErrors = (formError && formError[id]) || [];
-      for (let j = 0; j < formErrors.length; ++j) {
-        if (formErrors[j] && formErrors[j].message) {
-          return formErrors[j].message;
-        }
-      }
-
-      return undefined;
-    }
-
-    return formErrors => {
-      const errorMessages = [];
-      for (const key in formErrors) {
-        if (formErrors.hasOwnProperty(key) && formErrors[key]) {
-          errorMessages.push(msg(key, formErrors));
-        }
-      }
-      return errorMessages;
-    };
-  });
-
-/**
- * <div rg-error-bubble="form.name"></div>
- * @param {object} error-bubble Ng-model for this control
- *
- * Where form.name is a reference to angularJS form input
- */
-angularModule.directive('rgErrorBubble', function rgErrorBubbleDirective(getFormErrorMessages) {
-  return {
-    scope: {
-      errorBubble: '&rgErrorBubble'
-    },
-
-    replace: true,
-    template: `<div class="ring-error-bubble" ng-class="{ active: active, 'ring-error-bubble_material': material }" ng-style="style">
-  <div ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</div>
-</div>`,
-
-    link: function link(scope, iElement, iAttrs) {
-      scope.style = {};
-
-      const siblings = Array.from(iElement[0].parentNode.children);
-      let element;
-      let tagName;
-
-      for (let i = 0; i < siblings.length; i++) {
-        tagName = siblings[i].tagName.toLowerCase();
-
-        if (tagName === 'input' || tagName === 'textarea') {
-          element = siblings[i];
-          break;
-        }
-      }
-
-      scope.material = iAttrs.material !== undefined;
-
-      scope.$watch(() => {
-        const result = scope.errorBubble();
-
-        return result.$invalid && result.$dirty;
-      }, active => {
-        scope.active = active;
-
-        if (active && element) {
-          scope.style.left = element.offsetWidth + 2;
-        }
-      });
-
-      scope.getFormErrorMessages = getFormErrorMessages;
-    }
-  };
-});
-/**
- * <input name="confirm" type="password" rg-equal-value="data.password" ng-model="data.confirm">
- * Constraint to be user for confirm password fields.
- */
-angularModule.directive('rgEqualValue', function rgEqualValueDirective() {
-  return {
-    require: 'ngModel',
-
-    link: function link(scope, iElement, iAttrs, ngModelCtrl) {
-      const element = iElement[0];
-
-      function assertEqual(thisValue, thatValue) {
-        ngModelCtrl.$setValidity('equalvalue', thisValue === thatValue);
-      }
-
-      scope.$watch(iAttrs.rgEqualValue, value => {
-        assertEqual(element.value, value);
-      });
-
-      element.addEventListener('keyup', () => {
-        const thatValue = scope.$eval(iAttrs.rgEqualValue);
-        scope.$apply(() => {
-          assertEqual(element.value, thatValue);
-        });
-      });
-    }
-  };
-});
-/**
- * <input name="name" required type="text" ng-class="form.name | rgInputClass:submitted" ng-model="name">
- *
- * Is intended to be used for the value of ng-class. Accepts a reference to an angularJS form input
- */
-angularModule.filter('rgInputClass', () => (input, submitted) => ({
-  'ring-input': true,
-  'ring-input_error': input.$invalid && (input.$dirty || submitted),
-  'ring-input_correct': !input.$invalid && (input.$dirty || submitted)
-}));
-/**
- * <form rg-form-autofill-fix ...>
- *
- * Fixes Chrome bug: https://github.com/angular/angular.js/issues/1460
- */
-angularModule.directive('rgFormAutofillFix', $timeout => ({
-  require: '?form',
-  priority: 10,
-
-  link: function link($scope, element, attrs, form) {
-    if (form) {
-      const POLL_INTERVAL = 150;
-      const MAX_COUNT = 5;
-      let promise;
-      let count = 0;
-
-      (function poll() {
-        let filled;
-
-        angular.forEach(element.find('input'), elem => {
-          const $elem = angular.element(elem);
-          const controller = $elem.controller('ngModel');
-          const val = $elem.val();
-          const type = $elem.attr('type');
-
-          if (controller && val && type !== 'checkbox' && type !== 'radio') {
-            controller.$setViewValue(val);
-            filled = true;
-          }
-        });
-
-        if (!filled || count < MAX_COUNT) {
-          promise = $timeout(poll, POLL_INTERVAL);
-          count++;
-        }
-      }());
-
-      element.on('$destroy', () => {
-        $timeout.cancel(promise);
-      });
-
-    }
-  }
-}));
-
-export default angularModule.name;

package/components/form-ng/form-ng.stories.js

@@ -1,73 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import '../form/form.css';
-
-import ButtonNG from '../button-ng/button-ng';
-import SelectNG from '../select-ng/select-ng';
-import CheckboxNG from '../checkbox-ng/checkbox-ng';
-
-import InputNG from '../input-ng/input-ng';
-
-import FormNG from './form-ng';
-
-export default {
-  title: 'Legacy Angular/Form Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Form.'
-  }
-};
-
-export const basic = () => {
-  angular.
-    module(APP_NAME, [FormNG, CheckboxNG, SelectNG, ButtonNG, InputNG]).
-    controller('FormExampleCtrl', function ctrl() {
-      this.checkedModel = true;
-      this.data = [{name: 'Ada'}, {name: 'Nik'}];
-    });
-
-  return `
-      <div style="width: 700px"
-        ng-controller="FormExampleCtrl as formExampleCtrl">
-
-        <form class="ring-form" name="ExampleForm" novalidate>
-          <span class="ring-form__title">Form Title</span>
-
-          <div class="ring-form__group">
-            <rg-input size="M" required ng-model="formExampleCtrl.inputValue" label="Medium Input" name="inputMD" type="text"></rg-input>
-            <div rg-error-bubble="ExampleForm.inputMD"></div>
-          </div>
-
-          <div class="ring-form__group">
-            <rg-select options="item.name for item in formExampleCtrl.data track by item.name"></rg-select>
-            <div class="ring-form__control__description">I am a simple description</div>
-          </div>
-
-          <div class="ring-form__group">
-            <div>
-              <rg-checkbox ng-model="formExampleCtrl.checkedModel">Checkbox 1</rg-checkbox>
-            </div>
-            <div>
-              <rg-checkbox ng-model="formExampleCtrl.checkedModel">Checkbox 2</rg-checkbox>
-            </div>
-            <div>
-              <rg-checkbox>Checkbox 3</rg-checkbox>
-            </div>
-            <div>
-              <rg-checkbox>Checkbox 4</rg-checkbox>
-            </div>
-          </div>
-
-          <div class="ring-form__footer">
-            <rg-button mode="primary">Save</rg-button>
-            <rg-button>Cancel</rg-button>
-          </div>
-        </form>
-      </div>
-    `;
-};
-
-basic.storyName = 'Form Ng';

package/components/global/angular-component-factory.js

@@ -1,93 +0,0 @@
-import angular from 'angular';
-
-import React from 'react';
-
-import {render, unmountComponentAtNode} from './react-render-adapter';
-import RingAngularComponent from './ring-angular-component';
-
-import DomRenderer from './react-dom-renderer';
-
-function getAngularComponentName(name) {
-  return `rg${name}`;
-}
-
-function createAngularComponent(Component) {
-  const propKeys = Object.keys(Component.propTypes);
-
-  const bindings = {};
-  propKeys.forEach(key => {
-    bindings[key] = '<';
-  });
-
-  class AngularComponent extends RingAngularComponent {
-
-    static bindings = bindings;
-    static transclude = true;
-
-    $postLink() {
-      const {$transclude} = this.$inject;
-
-
-      $transclude(clone => {
-        this.container = document.createElement('div');
-
-        for (let i = 0; i < clone.length; i++) {
-          this.container.appendChild(clone[i]);
-        }
-        this.render();
-      });
-    }
-
-    $onChanges() {
-      if (!this.container) {
-        return;
-      }
-      this.render();
-    }
-
-    $onDestroy() {
-      unmountComponentAtNode(this.$inject.$element[0]);
-    }
-
-    render() {
-      const {$scope, $element: {0: container}} = this.$inject;
-
-      const props = {};
-      propKeys.forEach(key => {
-        if (this[key] !== undefined) {
-          if (typeof this[key] === 'function') {
-            props[key] = (...rest) => {
-              const ret = this[key](...rest);
-              $scope.$applyAsync();
-              return ret;
-            };
-          } else {
-            props[key] = this[key];
-          }
-        }
-      });
-
-      const hasInnerContent = this.container.hasChildNodes();
-
-      render(
-        <Component {...props}>
-          {hasInnerContent ? <DomRenderer nodes={this.container.childNodes}/> : null}
-        </Component>,
-        container
-      );
-    }
-  }
-  AngularComponent.$inject = ['$scope', '$element', '$transclude'];
-  return AngularComponent;
-}
-
-function angularComponentFactory(Component, name) {
-  const angularModuleName = `Ring.${name[0].toLowerCase() + name.slice(1)}`;
-
-  return angular.
-    module(angularModuleName, []).
-    component(getAngularComponentName(name), createAngularComponent(Component));
-}
-
-export default angularComponentFactory;
-export {createAngularComponent};

package/components/global/angular-component-factory.test.js

@@ -1,138 +0,0 @@
-/* global inject: false */
-import angular from 'angular';
-
-import 'angular-mocks';
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import {act, Simulate} from 'react-dom/test-utils';
-
-import angularComponentFactory from './angular-component-factory';
-
-class TestComponent extends PureComponent {
-  static propTypes = {
-    id: PropTypes.string,
-    someObj: PropTypes.object,
-    onClick: PropTypes.func,
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  static defaultProps = {
-    someObj: {}
-  };
-
-  handleClick = () => this.props.onClick('payload');
-
-  render() {
-    const {id, someObj, className, children} = this.props;
-    return (
-      <>
-        <button
-          type="button"
-          id={id}
-          data-some-obj={someObj.foo}
-          onClick={this.handleClick}
-          className={className}
-        />
-        {children}
-      </>
-    );
-  }
-}
-
-const testModule = angularComponentFactory(TestComponent, 'TestComponent').name;
-
-describe('angularComponentFactory', () => {
-  let $componentController;
-  let $compile;
-  let $rootScope;
-
-  beforeEach(window.module(testModule));
-
-  beforeEach(inject((_$componentController_, _$compile_, _$rootScope_) => {
-    $componentController = _$componentController_;
-    $compile = _$compile_;
-    $rootScope = _$rootScope_;
-  }));
-
-  it('should return an Angular module with the proper name', () => {
-    testModule.should.be.equal('Ring.testComponent');
-  });
-
-  it('should register an Angular component with the proper name', () => {
-    const $element = angular.element('<div></div>');
-    const $transclude = callback => callback();
-    const ctrl = $componentController('rgTestComponent', {
-      $scope: $rootScope,
-      $element,
-      $transclude
-    });
-    ctrl.should.not.be.undefined;
-  });
-
-  it('should use one-way binding for object props', () => {
-    $rootScope.testObj = {
-      foo: 'bar'
-    };
-    const $element = $compile(
-      '<rg-test-component some-obj="testObj"></rg-test-component>'
-    )($rootScope);
-    const component = $element[0].firstChild;
-    component.should.have.attribute('data-some-obj', 'bar');
-
-    $rootScope.testObj = {
-      foo: 'test value'
-    };
-    $rootScope.$digest();
-    component.should.have.attribute('data-some-obj', 'test value');
-  });
-
-  it('should use string binding for string props', () => {
-    $rootScope.id = '1';
-    const $element = $compile('<rg-test-component id="id"></rg-test-component>')($rootScope);
-    const component = $element[0].firstChild;
-    component.should.have.attribute('id', '1');
-
-    $rootScope.id = '2';
-    $rootScope.$digest();
-    component.should.have.attribute('id', '2');
-  });
-
-  it('should pass given css classes', () => {
-    const $element = $compile(
-      '<rg-test-component class-name="\'test-class1 test-class2\'"></rg-test-component>'
-    )($rootScope);
-    const component = $element[0].firstChild;
-    component.should.have.class('test-class1');
-    component.should.have.class('test-class2');
-  });
-
-  it('should use one-way binding for function props', () => {
-    $rootScope.callback = sandbox.spy();
-    const $element = $compile(
-      '<rg-test-component on-click="callback"></rg-test-component>'
-    )($rootScope);
-    const component = $element[0].firstChild;
-
-    Simulate.click(component);
-
-    $rootScope.callback.should.have.been.called;
-    $rootScope.callback.should.have.been.calledWith('payload');
-  });
-
-  it('should support ng-if in nested content', () => {
-    let $element = null;
-    act(() => {
-      $element = $compile(`
-<rg-test-component>
-  <span data-test="hello">HELLO</span>
-</rg-test-component>`
-      )($rootScope);
-    });
-
-    const component = $element[0].querySelector('[data-test~=hello]');
-    $rootScope.$digest();
-
-    should.exist(component);
-  });
-});

package/components/global/compose.d.ts

@@ -1,7 +0,0 @@
-declare function compose<A, R1, R2, R3, R4, R5, R6, R7>(f7: (a: R6) => R7, f6: (a: R5) => R6, f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R7;
-declare function compose<A, R1, R2, R3, R4, R5, R6>(f6: (a: R5) => R6, f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R6;
-declare function compose<A, R1, R2, R3, R4, R5>(f5: (a: R4) => R5, f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R5;
-declare function compose<A, R1, R2, R3, R4>(f4: (a: R3) => R4, f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R4;
-declare function compose<A, R1, R2, R3>(f3: (a: R2) => R3, f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R3;
-declare function compose<A, R1, R2>(f2: (a: R1) => R2, f1: (a: A) => R1): (a: A) => R2;
-export default compose;

package/components/global/compose.js

@@ -1,4 +0,0 @@
-function compose(...funcs) {
-    return funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
-}
-export default compose;

package/components/global/composeRefs.d.ts

@@ -1,3 +0,0 @@
-import { Ref } from 'react';
-declare const _default: <T>(...refs: (Ref<T> | undefined)[]) => (value: T | null) => void;
-export default _default;

package/components/global/composeRefs.js

@@ -1,8 +0,0 @@
-export default (...refs) => (value) => refs.forEach(ref => {
-    if (typeof ref === 'function') {
-        ref(value);
-    }
-    else if (ref != null) {
-        ref.current = value;
-    }
-});

package/components/global/controls-height.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare enum ControlsHeight {
-    S = "S",
-    M = "M",
-    L = "L"
-}
-export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;
-export declare function configureGlobalControlsHeight(value: ControlsHeight): void;
-export declare function getGlobalControlsHeight(): ControlsHeight;

package/components/global/controls-height.js

@@ -1,16 +0,0 @@
-import { createContext } from 'react';
-export var ControlsHeight;
-(function (ControlsHeight) {
-    ControlsHeight["S"] = "S";
-    ControlsHeight["M"] = "M";
-    ControlsHeight["L"] = "L";
-})(ControlsHeight || (ControlsHeight = {}));
-export const ControlsHeightContext = createContext(ControlsHeight.M);
-let globalControlsHeight = ControlsHeight.M;
-// This can be used if React Context is not applicable, for example for alertService or Auth dialog
-export function configureGlobalControlsHeight(value) {
-    globalControlsHeight = value;
-}
-export function getGlobalControlsHeight() {
-    return globalControlsHeight;
-}

package/components/global/create-stateful-context.d.ts

@@ -1,27 +0,0 @@
-import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-type Update<T> = (value: T) => void;
-export interface ProviderProps {
-    children: ReactNode;
-}
-export interface UpdaterProps<T> {
-    value: T;
-    skipUpdate?: boolean;
-}
-export default function createStatefulContext<T>(initialValue: T, name?: string): {
-    ValueContext: React.Context<T>;
-    UpdateContext: React.Context<Update<T>>;
-    Provider: {
-        ({ children }: ProviderProps): React.JSX.Element;
-        propTypes: {
-            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        };
-        displayName: string;
-    };
-    useUpdate: (value: T, skipUpdate?: boolean) => void;
-    Updater: React.MemoExoticComponent<{
-        ({ value, skipUpdate }: UpdaterProps<T>): null;
-        displayName: string;
-    }>;
-};
-export {};

package/components/global/create-stateful-context.js

@@ -1,38 +0,0 @@
-import React, { createContext, memo, useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-export default function createStatefulContext(initialValue, name = '') {
-    const ValueContext = createContext(initialValue);
-    const UpdateContext = createContext(() => { });
-    function Provider({ children }) {
-        const [value, update] = useState(initialValue);
-        return (<ValueContext.Provider value={value}>
-        <UpdateContext.Provider value={update}>
-          {children}
-        </UpdateContext.Provider>
-      </ValueContext.Provider>);
-    }
-    Provider.propTypes = {
-        children: PropTypes.node
-    };
-    Provider.displayName = `${name}Provider`;
-    function useUpdate(value, skipUpdate) {
-        const update = useContext(UpdateContext);
-        useEffect(() => {
-            if (!skipUpdate) {
-                update(value);
-            }
-        }, [update, value, skipUpdate]);
-    }
-    function Updater({ value, skipUpdate }) {
-        useUpdate(value, skipUpdate);
-        return null;
-    }
-    Updater.displayName = `${name}Updater`;
-    return {
-        ValueContext,
-        UpdateContext,
-        Provider,
-        useUpdate,
-        Updater: memo(Updater)
-    };
-}

package/components/global/data-tests.d.ts

@@ -1,3 +0,0 @@
-type AttrsMap = Record<string, boolean | null | undefined>;
-export default function joinDataTestAttributes(...attrs: Array<string | AttrsMap | null | undefined>): string;
-export {};

package/components/global/data-tests.js

@@ -1,17 +0,0 @@
-function expandMap(attrsMap) {
-    return Object.entries(attrsMap).
-        reduce((result, [key, value]) => (value ? [...result, key] : result), []);
-}
-export default function joinDataTestAttributes(...attrs) {
-    return attrs.
-        reduce((result, attr) => {
-        if (!attr) {
-            return result;
-        }
-        if (typeof attr === 'object') {
-            return [...result, ...expandMap(attr)];
-        }
-        return [...result, attr];
-    }, []).
-        join(' ');
-}

package/components/global/dom.d.ts

@@ -1,37 +0,0 @@
-/**
- * @name DOM
- */
-import { SyntheticEvent } from 'react';
-import type { PropertiesHyphen } from 'csstype';
-export declare const getStyles: ((elt: Element, pseudoElt?: string | null | undefined) => CSSStyleDeclaration) & typeof getComputedStyle;
-export declare function isMounted(node: Node | Range | null | undefined): boolean;
-export interface Rect {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-    width: number;
-    height: number;
-}
-export declare function getRect(node: Element | Range | null | undefined): Rect;
-export declare function getPixelRatio(): number;
-export declare function getWindowHeight(): number;
-export declare function getWindowWidth(): number;
-export declare function isNodeInVisiblePartOfPage(node: Element | Range): boolean;
-export declare function getDocumentScrollTop(): number;
-export declare function getDocumentScrollLeft(): number;
-export declare const applyMethodToClasses: (method: 'add' | 'remove') => (classList: DOMTokenList, classes?: string) => void;
-export declare const addClasses: (classList: DOMTokenList, classes?: string) => void;
-export declare const removeClasses: (classList: DOMTokenList, classes?: string) => void;
-export declare const toggleClasses: (classList: DOMTokenList, classes: Record<string, boolean>) => void;
-export declare function setRootStyleProperties(properties?: PropertiesHyphen): void;
-export declare function resetRootStyleProperties(properties?: Partial<Record<keyof PropertiesHyphen, unknown>>): void;
-export declare class Listeners {
-    private _all;
-    add<K extends keyof HTMLElementEventMap>(el: HTMLElement, event: K, handler: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
-    add<K extends keyof WindowEventMap>(el: Window, event: K, handler: (this: Window, ev: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
-    add<K extends keyof DocumentEventMap>(el: Document, event: K, handler: (this: Window, ev: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions): () => void;
-    remove(fn: () => void): void;
-    removeAll(): void;
-}
-export declare function preventDefault(e: Event | SyntheticEvent): void;