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

package/components/error-message/error-message.js

@@ -1,54 +1,35 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Icon from '../icon/icon';
-import {Size} from '../icon/icon__constants';
-
+import { Size } from '../icon/icon__constants';
 import styles from './error-message.css';
-
-
 /**
  * @name Error Message
  */
-
 export default class ErrorMessage extends Component {
-  static propTypes = {
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-    code: PropTypes.string,
-    message: PropTypes.string,
-    description: PropTypes.string,
-    children: PropTypes.node,
-    className: PropTypes.string
-  };
-
-
-  render() {
-    const {className, icon, code, message, description, children} = this.props;
-    const classes = classNames(styles.errorMessage, className);
-
-    return (
-      <div className={classes}>
-        {icon && (
-          <Icon
-            className={styles.icon}
-            glyph={icon}
-            size={Size.Size64}
-            suppressSizeWarning
-          />
-        )}
+    static propTypes = {
+        icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+        code: PropTypes.string,
+        message: PropTypes.string,
+        description: PropTypes.string,
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { className, icon, code, message, description, children } = this.props;
+        const classes = classNames(styles.errorMessage, className);
+        return (<div className={classes}>
+        {icon && (<Icon className={styles.icon} glyph={icon} size={Size.Size64} suppressSizeWarning/>)}
         <div className={styles.content}>
           <div className={styles.title}>
             {code && `${code}:`} {message}
           </div>
-          {description && (
-            <div className={styles.description}>
+          {description && (<div className={styles.description}>
               {description}
-            </div>
-          )}
+            </div>)}
           {children}
         </div>
-      </div>
-    );
-  }
+      </div>);
+    }
 }

package/components/error-message-ng/error-message-ng.examples.js

@@ -4,7 +4,7 @@ import frownIcon from '@jetbrains/icons/frown';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ErrorMessageNG from '@jetbrains/ring-ui/components/error-message-ng/error-message-ng';
+import ErrorMessageNG from './error-message-ng';
 
 export default {
   title: 'Legacy Angular/Error Message Ng',

package/components/error-page-ng/error-page-ng.examples.js

@@ -4,9 +4,9 @@ import AngularRoute from 'angular-route';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import authMock from '@jetbrains/ring-ui/components/auth-ng/auth-ng.mock';
+import authMock from '../auth-ng/auth-ng.mock';
 
-import ErrorPageNG from '@jetbrains/ring-ui/components/error-page-ng/error-page-ng';
+import ErrorPageNG from './error-page-ng';
 
 export default {
   title: 'Legacy Angular/Error Page Ng',

package/components/footer/footer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @name Footer
+ */
+import React, { HTMLAttributeAnchorTarget, ReactChild } from 'react';
+/**
+ * Return copyright string
+ * @param year {int}
+ * @returns {string}
+ */
+export declare function copyright(year: number): string;
+export interface FooterLinkItem {
+    copyright?: number | null | undefined;
+    label?: string | null | undefined;
+    url?: string | null | undefined;
+    target?: HTMLAttributeAnchorTarget | undefined;
+    title?: string | undefined;
+}
+declare type FooterItem = FooterLinkItem | ReactChild;
+declare type FooterItems = readonly (FooterItem | readonly FooterItem[])[];
+export interface FooterProps {
+    className?: string | null | undefined;
+    floating?: boolean | null | undefined;
+    left?: FooterItems | null | undefined;
+    center?: FooterItems | null | undefined;
+    right?: FooterItems | null | undefined;
+}
+declare const Footer: React.NamedExoticComponent<FooterProps>;
+export default Footer;

package/components/footer/footer.js

@@ -1,138 +1,96 @@
 /**
  * @name Footer
  */
-import React, {memo, isValidElement} from 'react';
+import React, { memo, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import Link from '../link/link';
-
 import styles from './footer.css';
-
-const FooterColumn = memo(function FooterColumn({position, children}) {
-  const classes = classNames({
-    [styles.columnLeft]: position === 'left',
-    [styles.columnCenter]: position === 'center',
-    [styles.columnRight]: position === 'right'
-  });
-  return (
-    <div className={classes}>
+const FooterColumn = memo(function FooterColumn({ position, children }) {
+    const classes = classNames({
+        [styles.columnLeft]: position === 'left',
+        [styles.columnCenter]: position === 'center',
+        [styles.columnRight]: position === 'right'
+    });
+    return (<div className={classes}>
       <ul className={styles.columnItem}>
         {children}
       </ul>
-    </div>
-  );
+    </div>);
 });
 FooterColumn.propTypes = {
-  position: PropTypes.string,
-  children: PropTypes.node
+    position: PropTypes.oneOf(['left', 'center', 'right']).isRequired,
+    children: PropTypes.node
 };
-
 /**
  * Return copyright string
  * @param year {int}
  * @returns {string}
  */
 export function copyright(year) {
-  const currentYear = (new Date()).getUTCFullYear();
-  const ndash = '–';
-  let ret = 'Copyright © ';
-
-  if (year >= currentYear) {
-    ret += year;
-  } else {
-    ret += year + ndash + currentYear;
-  }
-
-  return ret;
+    const currentYear = (new Date()).getUTCFullYear();
+    const ndash = '–';
+    let ret = 'Copyright © ';
+    if (year >= currentYear) {
+        ret += year;
+    }
+    else {
+        ret += year + ndash + currentYear;
+    }
+    return ret;
 }
-
 /**
  * @constructor
  * @extends {ReactComponent}
  */
 const FooterLine = memo(function FooterLine(props) {
-  const items = Array.isArray(props.item) ? props.item : [props.item];
-
-  function renderItem(item) {
-    if (isValidElement(item)) {
-      return item;
-    }
-
-    const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
-
-    if (item.url) {
-      return (
-        <Link
-          href={item.url}
-          target={item.target}
-          key={item.url + item.title}
-          title={item.title}
-        >{element}</Link>
-      );
+    const items = Array.isArray(props.item) ? props.item : [props.item];
+    function renderItem(item) {
+        if (isValidElement(item) || typeof item !== 'object') {
+            return item;
+        }
+        const element = (item.copyright ? copyright(item.copyright) : '') + (item.label || item);
+        if (item.url) {
+            return (<Link href={item.url} target={item.target} key={item.url + item.title} title={item.title}>{element}</Link>);
+        }
+        return element;
     }
-
-    return element;
-  }
-
-  return (
-    <li className={styles.line}>
+    return (<li className={styles.line}>
       {items.map(renderItem)}
-    </li>
-  );
+    </li>);
 });
 FooterLine.propTypes = {
-  item: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.array,
-    PropTypes.string
-  ])
+    item: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.array,
+        PropTypes.string
+    ])
 };
-
-const Footer = memo(function Footer({floating, className, left, center, right}) {
-  function content(elements, position) {
-    if (!elements) {
-      return false;
-    }
-
-    return (
-      <FooterColumn
-        key={position}
-        position={position}
-      >
-        {elements.map((item, idx) => (
-          <FooterLine
+const Footer = memo(function Footer({ floating, className, left, center, right }) {
+    function content(elements, position) {
+        if (!elements) {
+            return false;
+        }
+        return (<FooterColumn key={position} position={position}>
+        {elements.map((item, idx) => (<FooterLine 
             // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            item={item}
-          />
-        ))}
-      </FooterColumn>
-    );
-  }
-
-  const classes = classNames(styles.footer, className, {
-    [styles.footerFloating]: floating
-  });
-
-  return (
-    <footer
-      className={classes}
-      data-test="ring-footer"
-    >{
-        [
-          content(left, 'left'),
-          content(center, 'center'),
-          content(right, 'right')
-        ]
-      }</footer>
-  );
+            key={idx} item={item}/>))}
+      </FooterColumn>);
+    }
+    const classes = classNames(styles.footer, className, {
+        [styles.footerFloating]: floating
+    });
+    return (<footer className={classes} data-test="ring-footer">{[
+            content(left, 'left'),
+            content(center, 'center'),
+            content(right, 'right')
+        ]}</footer>);
 });
 Footer.propTypes = {
-  className: PropTypes.string,
-  floating: PropTypes.bool,
-  left: PropTypes.array,
-  center: PropTypes.array,
-  right: PropTypes.array
+    className: PropTypes.string,
+    floating: PropTypes.bool,
+    left: PropTypes.array,
+    center: PropTypes.array,
+    right: PropTypes.array
 };
 export default Footer;

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

@@ -1,9 +1,9 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import '@jetbrains/ring-ui/components/link/link__legacy.css';
+import '../link/link__legacy.css';
 
-import FooterNG from '@jetbrains/ring-ui/components/footer-ng/footer-ng';
+import FooterNG from './footer-ng';
 
 export default {
   title: 'Legacy Angular/Footer Ng',

package/components/form/form.examples.js

@@ -2,11 +2,11 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import '@jetbrains/ring-ui/components/input/input-legacy.css';
-import '@jetbrains/ring-ui/components/form/form.css';
-import '@jetbrains/ring-ui/components/input-size/input-size.css';
+import '../input/input-legacy.css';
+import './form.css';
+import '../input-size/input-size.css';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
+import ButtonNG from '../button-ng/button-ng';
 
 export default {
   title: 'Style-only/Form',

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

@@ -2,15 +2,15 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import '@jetbrains/ring-ui/components/form/form.css';
+import '../form/form.css';
 
-import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
-import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
-import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
+import ButtonNG from '../button-ng/button-ng';
+import SelectNG from '../select-ng/select-ng';
+import CheckboxNG from '../checkbox-ng/checkbox-ng';
 
-import InputNG from '@jetbrains/ring-ui/components/input-ng/input-ng';
+import InputNG from '../input-ng/input-ng';
 
-import FormNG from '@jetbrains/ring-ui/components/form-ng/form-ng';
+import FormNG from './form-ng';
 
 export default {
   title: 'Legacy Angular/Form Ng',

package/components/global/compose.d.ts

@@ -0,0 +1,7 @@
+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 +1,4 @@
-const compose = (...funcs) =>
-  funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
-
+function compose(...funcs) {
+    return funcs.reduce((acc, func) => arg => acc(func(arg)), arg => arg);
+}
 export default compose;

package/components/global/composeRefs.d.ts

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

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

package/components/global/controls-height.js

@@ -0,0 +1,8 @@
+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);

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

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+declare 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): JSX.Element;
+        propTypes: {
+            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        };
+        displayName: string;
+    };
+    useUpdate: (value: T, skipUpdate?: boolean | undefined) => void;
+    Updater: React.MemoExoticComponent<{
+        ({ value, skipUpdate }: UpdaterProps<T>): null;
+        displayName: string;
+    }>;
+};
+export {};

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

@@ -1,46 +1,38 @@
-import React, {createContext, memo, useContext, useEffect, useState} from 'react';
+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}>
+    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)
-  };
+      </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

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

package/components/global/dom.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @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;