@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/select-ng/select-ng.examples.js

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import TabsNG from '@jetbrains/ring-ui/components/tabs-ng/tabs-ng';
-import DialogNG from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
+import TabsNG from '../tabs-ng/tabs-ng';
+import DialogNG from '../dialog-ng/dialog-ng';
 
-import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
+import SelectNG from './select-ng';
 
 export default {
   title: 'Legacy Angular/Select Ng',
@@ -175,6 +175,7 @@ export const asModelLazy = () => {
 };
 
 asModelLazy.storyName = 'as model lazy';
+asModelLazy.parameters = {storyshots: false};
 
 export const withPromise = () => {
   angular.module(APP_NAME, [SelectNG]).controller('testCtrl', function ctrl($timeout, $q) {

package/components/select-ng/select-ng.js

@@ -7,6 +7,8 @@ import getEventKey from '../global/get-event-key';
 import Select, {RerenderableSelect} from '../select/select';
 import MessageBundle from '../message-bundle-ng/message-bundle-ng';
 
+import {ControlsHeight} from '../global/controls-height';
+
 import SelectNgOptions from './select-ng__options';
 import SelectLazy from './select-ng__lazy';
 
@@ -23,7 +25,6 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
   const types = {
     input: Select.Type.INPUT,
     button: Select.Type.BUTTON,
-    material: Select.Type.MATERIAL,
     dropdown: Select.Type.CUSTOM,
     suggest: Select.Type.INPUT
   };
@@ -417,6 +418,7 @@ angularModule.directive('rgSelect', function rgSelectDirective() {
           notFoundMessage: ctrl.notFoundMessage || RingMessageBundle.select_options_not_found(),
           targetElement: getType() === 'dropdown' ? element : null,
           size: getSelectSize(),
+          height: ControlsHeight.S,
           onBeforeOpen: () => {
             resetMemorizedOptions();
             ctrl.loadOptionsToSelect(ctrl.query);

package/components/select-ng/select-ng.test.js

@@ -131,7 +131,7 @@ describe('Select Ng', () => {
 
     it('Should use default type "Button" if type is not passed', () => {
       compileTemplate('<rg-select options="item.name for item in items track by item.id" ng-model="selectedItem"></rg-select>');
-      ctrl.selectInstance.props.type.should.equal(Select.Type.MATERIAL);
+      ctrl.selectInstance.props.type.should.equal(Select.Type.BUTTON);
     });
 
     it('Should support type "input"', () => {

package/components/select-ng/select-ng__lazy.js

@@ -38,11 +38,11 @@ class SelectLazy {
   }
 
   attachEvents() {
-    this.container.addEventListener('click', this.onClick, {capture: true});
+    this.container.addEventListener('click', this.onClick);
   }
 
   detachEvents() {
-    this.container.removeEventListener('click', this.onClick, {capture: true});
+    this.container.removeEventListener('click', this.onClick);
   }
 
   render(props) {
@@ -59,10 +59,10 @@ class SelectLazy {
     this.detachEvents();
     if (this.type === 'dropdown') {
       this.ctrl.selectInstance = render(this.reactSelect, this.container);
-      this.ctrl.selectInstance._openPopupIfClosed();
     } else {
       this.ctrl.selectInstance = hydrate(this.reactSelect, this.container);
     }
+    this.ctrl.selectInstance._openPopupIfClosed();
   }
 }
 

package/components/shortcuts/core.d.ts

@@ -0,0 +1,74 @@
+/// <reference types="combokeys" />
+export interface ShortcutsScopeOptions {
+    modal?: boolean | null | undefined;
+}
+export interface ShortcutsScope {
+    scopeId: string;
+    options: ShortcutsScopeOptions;
+}
+declare type ShortcutsHandler = (e: KeyboardEvent, key: string, scopeId: string) => boolean | null | void;
+export interface ShortcutsOptions {
+    scope?: string | null | undefined;
+    type?: string | undefined;
+}
+export interface ShortcutsParams extends ShortcutsOptions {
+    key: string | string[];
+    handler: ShortcutsHandler;
+}
+export declare type ShortcutsMap = Record<string, ShortcutsHandler>;
+declare class Shortcuts {
+    ALLOW_SHORTCUTS_SELECTOR: string;
+    ROOT_SCOPE: {
+        scopeId: string;
+        options: {};
+    };
+    _scopes: Record<string, Record<string, ShortcutsHandler> | null>;
+    private _scopeChain;
+    combokeys: Combokeys.Combokeys;
+    trigger: (combo: string) => void;
+    constructor();
+    private _dispatcher;
+    /**
+     * Binds a handler to a shortcut
+     *
+     * @param params.key {string | Array.<string>) Keys to bind
+     * @param params.handler {Function} Events handle
+     * @param params.scope {string} Scope (optional)
+     * @param params.type {string} Event type, will be passed to Combokeys (optional)
+     */
+    bind(params: ShortcutsParams): void;
+    /**
+     * Binds a map of shortcuts to handlers with common options
+     *
+     * @map {Object) Keys to handlers map
+     * @options.scope {string} Scope (optional)
+     * @options.type {string} Event type, will be passed to Combokeys (optional)
+     */
+    bindMap(map: ShortcutsMap, options?: ShortcutsOptions): void;
+    unbindScope(scope: string): void;
+    getScope(): ShortcutsScope[];
+    hasScope(scopeId: string): boolean;
+    /**
+     * Adds a scope to the chain
+     * @param scopeId id of scope to add
+     * @param options options for pushing scope
+     * @param options.modal whether keys should fall through this scope or not.
+     * Useful for modals or overlays
+     */
+    pushScope(scopeId: string, options?: ShortcutsScopeOptions): void;
+    popScope(scopeId: string): ShortcutsScope[] | undefined;
+    spliceScope(scopeId: string): void;
+    setScope(scope?: ShortcutsScope | string | (ShortcutsScope | string)[] | null | undefined): void;
+    wrapScope(scopeId: string, options?: ShortcutsScopeOptions): {
+        scopeId: string;
+        options: ShortcutsScopeOptions;
+    };
+    hasKey(key: string, scope: string): boolean;
+    private _defaultFilter;
+    private _getKeyboardEventType;
+    setFilter(fn?: (e: Event, element: Element, key?: string) => boolean): void;
+    indexOfScope(scopeId: string): number;
+    reset(): void;
+}
+declare const _default: Shortcuts;
+export default _default;

package/components/shortcuts/core.js

@@ -1,232 +1,191 @@
 import Combokeys from 'combokeys';
-
 import sniffr from '../global/sniffer';
-
 class Shortcuts {
-  ALLOW_SHORTCUTS_SELECTOR = '.ring-js-shortcuts';
-  ROOT_SCOPE = {
-    scopeId: 'ROOT',
-    options: {}
-  };
-
-  _scopes = {};
-
-  combokeys = new Combokeys(document.documentElement);
-  trigger = combo => this.combokeys.trigger(combo);
-
-  constructor() {
-    this.setFilter();
-    this.setScope();
-  }
-
-  _dispatcher = (e, key) => {
-    let currentScope;
-
-    for (let i = this._scopeChain.length - 1; i >= 0; i--) {
-      const scopeInChain = this._scopeChain[i];
-      currentScope = this._scopes[scopeInChain.scopeId];
-
-      if (currentScope && currentScope[key]) {
-        const ret = currentScope[key](e, key, scopeInChain.scopeId);
-
-        // Fall down in chain when returning true
-        if (ret !== true) {
-          return ret;
+    ALLOW_SHORTCUTS_SELECTOR = '.ring-js-shortcuts';
+    ROOT_SCOPE = {
+        scopeId: 'ROOT',
+        options: {}
+    };
+    _scopes = {};
+    _scopeChain = [];
+    combokeys = new Combokeys(document.documentElement);
+    trigger = (combo) => this.combokeys.trigger(combo);
+    constructor() {
+        this.setFilter();
+        this.setScope();
+    }
+    _dispatcher = (e, key) => {
+        let currentScope;
+        for (let i = this._scopeChain.length - 1; i >= 0; i--) {
+            const scopeInChain = this._scopeChain[i];
+            currentScope = this._scopes[scopeInChain.scopeId];
+            if (currentScope && key != null && currentScope[key]) {
+                const ret = currentScope[key](e, key, scopeInChain.scopeId);
+                // Fall down in chain when returning true
+                if (ret !== true) {
+                    return ret;
+                }
+            }
+            if (scopeInChain.options.modal) {
+                return true;
+            }
+        }
+        return undefined;
+    };
+    /**
+     * Binds a handler to a shortcut
+     *
+     * @param params.key {string | Array.<string>) Keys to bind
+     * @param params.handler {Function} Events handle
+     * @param params.scope {string} Scope (optional)
+     * @param params.type {string} Event type, will be passed to Combokeys (optional)
+     */
+    bind(params) {
+        if (!(params instanceof Object) || typeof params.handler !== 'function') {
+            throw new Error('Shortcut handler should exist');
+        }
+        if (!params.scope) {
+            params.scope = this.ROOT_SCOPE.scopeId;
+        }
+        if (Array.isArray(params.key)) {
+            for (let i = 0; i < params.key.length; i++) {
+                this.bind(Object.assign({}, params, { key: params.key[i] }));
+            }
+            return;
+        }
+        if (typeof params.key !== 'string') {
+            throw new Error('Shortcut key should exist');
+        }
+        let scope = this._scopes[params.scope];
+        if (!scope) {
+            scope = this._scopes[params.scope] = {};
+        }
+        scope[params.key] = params.handler;
+        this.combokeys.bind(params.key, this._dispatcher, this._getKeyboardEventType(params));
+    }
+    /**
+     * Binds a map of shortcuts to handlers with common options
+     *
+     * @map {Object) Keys to handlers map
+     * @options.scope {string} Scope (optional)
+     * @options.type {string} Event type, will be passed to Combokeys (optional)
+     */
+    bindMap(map, options) {
+        if (!(map instanceof Object)) {
+            throw new Error('Shortcuts map shouldn\'t be empty');
+        }
+        for (const key in map) {
+            if (map.hasOwnProperty(key)) {
+                this.bind(Object.assign({}, options || {}, { key, handler: map[key] }));
+            }
+        }
+    }
+    unbindScope(scope) {
+        this._scopes[scope] = null;
+    }
+    getScope() {
+        return this._scopeChain.slice(1);
+    }
+    hasScope(scopeId) {
+        return this.indexOfScope(scopeId) !== -1;
+    }
+    /**
+     * Adds a scope to the chain
+     * @param scopeId id of scope to add
+     * @param options options for pushing scope
+     * @param options.modal whether keys should fall through this scope or not.
+     * Useful for modals or overlays
+     */
+    pushScope(scopeId, options = {}) {
+        if (scopeId) {
+            const position = this.indexOfScope(scopeId);
+            if (position !== -1) {
+                this._scopeChain.splice(position, 1);
+            }
+            this._scopeChain.push(this.wrapScope(scopeId, options));
+        }
+    }
+    popScope(scopeId) {
+        if (scopeId) {
+            const position = this.indexOfScope(scopeId);
+            if (position !== -1) {
+                return this._scopeChain.splice(position, this._scopeChain.length - 1);
+            }
+        }
+        return undefined;
+    }
+    spliceScope(scopeId) {
+        if (scopeId) {
+            const position = this.indexOfScope(scopeId);
+            if (position !== -1) {
+                this._scopeChain.splice(position, 1);
+            }
+        }
+    }
+    setScope(scope) {
+        if (scope) {
+            let scopeChain;
+            if (typeof scope === 'string' || (!Array.isArray(scope) && typeof scope === 'object' && scope !== null)) {
+                scopeChain = [scope];
+            }
+            else {
+                scopeChain = scope;
+            }
+            if (!Array.isArray(scopeChain)) {
+                return;
+            }
+            const scopes = scopeChain.map(scopeItem => {
+                const isScopeId = typeof scopeItem === 'string';
+                return isScopeId ? this.wrapScope(scopeItem) : scopeItem;
+            });
+            this._scopeChain = [this.ROOT_SCOPE].concat(scopes);
+        }
+        else {
+            this._scopeChain = [this.ROOT_SCOPE];
         }
-      }
-
-      if (scopeInChain.options.modal) {
-        return true;
-      }
-    }
-
-    return undefined;
-  };
-
-  /**
-   * Binds a handler to a shortcut
-   *
-   * @param params.key {string | Array.<string>) Keys to bind
-   * @param params.handler {Function} Events handle
-   * @param params.scope {string} Scope (optional)
-   * @param params.type {string} Event type, will be passed to Combokeys (optional)
-   */
-  bind(params) {
-    if (!(params instanceof Object) || typeof params.handler !== 'function') {
-      throw new Error('Shortcut handler should exist');
-    }
-
-    if (!params.scope) {
-      params.scope = this.ROOT_SCOPE.scopeId;
-    }
-
-    if (Array.isArray(params.key)) {
-      for (let i = 0; i < params.key.length; i++) {
-        this.bind(Object.assign({}, params, {key: params.key[i]}));
-      }
-
-      return;
-    }
-
-    if (typeof params.key !== 'string') {
-      throw new Error('Shortcut key should exist');
-    }
-
-    if (!this._scopes[params.scope]) {
-      this._scopes[params.scope] = {};
-    }
-    this._scopes[params.scope][params.key] = params.handler;
-
-    this.combokeys.bind(params.key, this._dispatcher, this._getKeyboardEventType(params));
-  }
-
-  /**
-   * Binds a map of shortcuts to handlers with common options
-   *
-   * @map {Object) Keys to handlers map
-   * @options.scope {string} Scope (optional)
-   * @options.type {string} Event type, will be passed to Combokeys (optional)
-   */
-  bindMap(map, options) {
-    if (!(map instanceof Object)) {
-      throw new Error('Shortcuts map shouldn\'t be empty');
-    }
-
-    for (const key in map) {
-      if (map.hasOwnProperty(key)) {
-        this.bind(Object.assign({}, options || {}, {key, handler: map[key]}));
-      }
-    }
-  }
-
-  unbindScope(scope) {
-    this._scopes[scope] = null;
-  }
-
-  getScope() {
-    return this._scopeChain.slice(1);
-  }
-
-  hasScope(scopeId) {
-    return this.indexOfScope(scopeId) !== -1;
-  }
-
-  /**
-   * Adds a scope to the chain
-   * @param scopeId id of scope to add
-   * @param options options for pushing scope
-   * @param options.modal whether keys should fall through this scope or not.
-   * Useful for modals or overlays
-   */
-  pushScope(scopeId, options = {}) {
-    if (scopeId) {
-      const position = this.indexOfScope(scopeId);
-
-      if (position !== -1) {
-        this._scopeChain.splice(position, 1);
-      }
-
-      this._scopeChain.push(this.wrapScope(scopeId, options));
-    }
-  }
-
-  popScope(scopeId) {
-    if (scopeId) {
-      const position = this.indexOfScope(scopeId);
-
-      if (position !== -1) {
-        return this._scopeChain.splice(position, this._scopeChain.length - 1);
-      }
-    }
-
-    return undefined;
-  }
-
-  spliceScope(scopeId) {
-    if (scopeId) {
-      const position = this.indexOfScope(scopeId);
-
-      if (position !== -1) {
-        this._scopeChain.splice(position, 1);
-      }
-    }
-  }
-
-  setScope(scope) {
-    if (scope) {
-      let scopeChain;
-
-      if (typeof scope === 'string' || (!Array.isArray(scope) && typeof scope === 'object' && scope !== null)) {
-        scopeChain = [scope];
-      } else {
-        scopeChain = scope;
-      }
-
-      if (!Array.isArray(scopeChain)) {
-        return;
-      }
-
-      scopeChain = scopeChain.map(scopeItem => {
-        const isScopeId = typeof scopeItem === 'string';
-        return isScopeId ? this.wrapScope(scopeItem) : scopeItem;
-      });
-
-      this._scopeChain = [this.ROOT_SCOPE].concat(scopeChain);
-    } else {
-      this._scopeChain = [this.ROOT_SCOPE];
-    }
-  }
-
-  wrapScope(scopeId, options = {}) {
-    return {scopeId, options};
-  }
-
-  hasKey(key, scope) {
-    return !!(this._scopes[scope] && this._scopes[scope][key]);
-  }
-
-  _defaultFilter = (e, element, key) => {
-    // if the element or its parents have the class "ring-js-shortcuts" then no need to stop
-    if (
-      element === document ||
-      element.matches(this.ALLOW_SHORTCUTS_SELECTOR) ||
-      (element.dataset.enabledShortcuts != null
-        ? element.dataset.enabledShortcuts.split(',').includes(key)
-        : element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null)
-    ) {
-      return false;
-    }
-
-    // stop for input, select, and textarea
-    return element.matches('input,select,textarea') || (element.contentEditable && element.contentEditable === 'true');
-  };
-
-  _getKeyboardEventType(params) {
-    if (!params.type && sniffr.os.name === 'windows') {
-      const isSystemShortcut = params.key.match(/ctrl/i) && params.key.match(/shift/i) && params.key.match(/[0-9]/);
-      /**
-       * Windows system shortcuts (ctrl+shift+[0-9] are caught by the OS on 'keydown', so let's use 'keyup'
-       */
-      if (isSystemShortcut) {
-        return 'keyup';
-      }
-    }
-    return params.type;
-  }
-
-  setFilter(fn) {
-    this.combokeys.stopCallback = typeof fn === 'function' ? fn : this._defaultFilter;
-  }
-
-  indexOfScope(scopeId) {
-    return this._scopeChain.findIndex(scope => scope.scopeId === scopeId);
-  }
-
-  reset() {
-    this._scopes = {};
-    this.setScope();
-    this.combokeys.reset();
-  }
+    }
+    wrapScope(scopeId, options = {}) {
+        return { scopeId, options };
+    }
+    hasKey(key, scope) {
+        return !!(this._scopes[scope]?.[key]);
+    }
+    _defaultFilter = (e, element, key) => {
+        // if the element or its parents have the class "ring-js-shortcuts" then no need to stop
+        if (element === document ||
+            !(element instanceof HTMLElement) ||
+            key == null ||
+            element.matches(this.ALLOW_SHORTCUTS_SELECTOR) ||
+            (element.dataset.enabledShortcuts != null
+                ? element.dataset.enabledShortcuts.split(',').includes(key)
+                : element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null)) {
+            return false;
+        }
+        // stop for input, select, and textarea
+        return element.matches('input,select,textarea') || (element.contentEditable === 'true');
+    };
+    _getKeyboardEventType(params) {
+        if (!params.type && sniffr.os.name === 'windows') {
+            const isSystemShortcut = typeof params.key === 'string' && params.key.match(/ctrl/i) && params.key.match(/shift/i) && params.key.match(/[0-9]/);
+            /**
+             * Windows system shortcuts (ctrl+shift+[0-9] are caught by the OS on 'keydown', so let's use 'keyup'
+             */
+            if (isSystemShortcut) {
+                return 'keyup';
+            }
+        }
+        return params.type;
+    }
+    setFilter(fn) {
+        this.combokeys.stopCallback = typeof fn === 'function' ? fn : this._defaultFilter;
+    }
+    indexOfScope(scopeId) {
+        return this._scopeChain.findIndex(scope => scope.scopeId === scopeId);
+    }
+    reset() {
+        this._scopes = {};
+        this.setScope();
+        this.combokeys.reset();
+    }
 }
-
 export default new Shortcuts();

package/components/shortcuts/shortcut-title.d.ts

@@ -0,0 +1 @@
+export declare function getShortcutTitle(shortcut: string): string;

package/components/shortcuts/shortcut-title.js

@@ -1,56 +1,50 @@
 import sniffer from '../global/sniffer';
-
 const macSymbolsMap = {
-  enter: '⏎',
-  shift: '⇧',
-  meta: '⌘',
-  mod: '⌘',
-  alt: '⌥',
-  ctrl: '⌃',
-  backspace: '⌫',
-  esc: 'Esc',
-  tab: 'Tab',
-  del: 'Del',
-  home: 'Home',
-  end: 'End',
-  space: 'Space',
-  ins: 'Insert',
-
-  left: '←',
-  up: '↑',
-  right: '→',
-  down: '↓'
+    enter: '⏎',
+    shift: '⇧',
+    meta: '⌘',
+    mod: '⌘',
+    alt: '⌥',
+    ctrl: '⌃',
+    backspace: '⌫',
+    esc: 'Esc',
+    tab: 'Tab',
+    del: 'Del',
+    home: 'Home',
+    end: 'End',
+    space: 'Space',
+    ins: 'Insert',
+    left: '←',
+    up: '↑',
+    right: '→',
+    down: '↓'
 };
-
 const winSymbolsMap = {
-  enter: 'Enter',
-  shift: 'Shift',
-  meta: 'Ctrl',
-  mod: 'Ctrl',
-  alt: 'Alt',
-  ctrl: 'Ctrl',
-  backspace: 'Backspace',
-  esc: 'Esc',
-  tab: 'Tab',
-  del: 'Delete',
-  home: 'Home',
-  end: 'End',
-  space: 'Space',
-  ins: 'Insert',
-
-  left: '←',
-  up: '↑',
-  right: '→',
-  down: '↓'
+    enter: 'Enter',
+    shift: 'Shift',
+    meta: 'Ctrl',
+    mod: 'Ctrl',
+    alt: 'Alt',
+    ctrl: 'Ctrl',
+    backspace: 'Backspace',
+    esc: 'Esc',
+    tab: 'Tab',
+    del: 'Delete',
+    home: 'Home',
+    end: 'End',
+    space: 'Space',
+    ins: 'Insert',
+    left: '←',
+    up: '↑',
+    right: '→',
+    down: '↓'
 };
-
 export function getShortcutTitle(shortcut) {
-  const MAC_OS = sniffer.os.name === 'macos';
-  const KEY_SEPARATOR = MAC_OS ? '' : '+';
-  const symbolsMap = MAC_OS ? macSymbolsMap : winSymbolsMap;
-
-  return shortcut.
-    split(/\+/g).
-    map(symbol => symbolsMap[symbol] || symbol.toUpperCase()).
-    join(KEY_SEPARATOR);
+    const MAC_OS = sniffer.os.name === 'macos';
+    const KEY_SEPARATOR = MAC_OS ? '' : '+';
+    const symbolsMap = MAC_OS ? macSymbolsMap : winSymbolsMap;
+    return shortcut.
+        split(/\+/g).
+        map(symbol => symbolsMap[symbol] || symbol.toUpperCase()).
+        join(KEY_SEPARATOR);
 }