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

package/components/message/message.js

@@ -1,43 +1,102 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import gift from '@jetbrains/icons/gift';
-
 import Popup from '../popup/popup';
+import { Directions } from '../popup/popup.consts';
 import Icon from '../icon/icon';
 import Button from '../button/button';
-
+import Theme, { ThemeProvider } from '../global/theme';
+import darkStyles from '../global/variables_dark.css';
 import styles from './message.css';
-
 /**
   * @name Message
   */
-
-const {Directions} = Popup.PopupProps;
-
 const UNIT = 8;
-
-const getTailOffsets = offset => ({
-  [Directions.BOTTOM_RIGHT]: {top: 0, left: offset - UNIT, transform: 'rotate(180deg)'},
-  [Directions.BOTTOM_LEFT]: {top: 0, right: offset - UNIT, transform: 'rotate(180deg)'},
-  [Directions.BOTTOM_CENTER]: {top: 0, left: offset - UNIT, transform: 'rotate(180deg)'},
-  [Directions.TOP_RIGHT]: {bottom: -UNIT + 1, left: offset - UNIT},
-  [Directions.TOP_LEFT]: {bottom: -UNIT + 1, right: offset - UNIT},
-  [Directions.TOP_CENTER]: {bottom: -UNIT + 1, left: offset - UNIT},
-  [Directions.RIGHT_TOP]: {bottom: offset - UNIT, left: -UNIT, transform: 'rotate(90deg)'},
-  [Directions.RIGHT_BOTTOM]: {top: offset, left: -UNIT, transform: 'rotate(90deg)'},
-  [Directions.RIGHT_CENTER]: {top: offset, left: -UNIT, transform: 'rotate(90deg)'},
-  [Directions.LEFT_TOP]: {bottom: offset - UNIT, right: -UNIT, transform: 'rotate(-90deg)'},
-  [Directions.LEFT_BOTTOM]: {top: offset, right: -UNIT, transform: 'rotate(-90deg)'},
-  [Directions.LEFT_CENTER]: {top: offset, right: -UNIT, transform: 'rotate(-90deg)'}
+const getTailOffsets = (offset) => ({
+    [Directions.BOTTOM_RIGHT]: { top: 0, left: offset - UNIT, transform: 'rotate(180deg)' },
+    [Directions.BOTTOM_LEFT]: { top: 0, right: offset - UNIT, transform: 'rotate(180deg)' },
+    [Directions.BOTTOM_CENTER]: { top: 0, left: offset - UNIT, transform: 'rotate(180deg)' },
+    [Directions.TOP_RIGHT]: { bottom: -UNIT + 1, left: offset - UNIT },
+    [Directions.TOP_LEFT]: { bottom: -UNIT + 1, right: offset - UNIT },
+    [Directions.TOP_CENTER]: { bottom: -UNIT + 1, left: offset - UNIT },
+    [Directions.RIGHT_TOP]: { bottom: offset - UNIT, left: -UNIT, transform: 'rotate(90deg)' },
+    [Directions.RIGHT_BOTTOM]: { top: offset, left: -UNIT, transform: 'rotate(90deg)' },
+    [Directions.RIGHT_CENTER]: { top: offset, left: -UNIT, transform: 'rotate(90deg)' },
+    [Directions.LEFT_TOP]: { bottom: offset - UNIT, right: -UNIT, transform: 'rotate(-90deg)' },
+    [Directions.LEFT_BOTTOM]: { top: offset, right: -UNIT, transform: 'rotate(-90deg)' },
+    [Directions.LEFT_CENTER]: { top: offset, right: -UNIT, transform: 'rotate(-90deg)' }
 });
-
-
 /**
  * Displays a popup containing a message.
  */
 export default class Message extends Component {
-  static propTypes = {
+    static defaultProps = {
+        icon: gift,
+        directions: [
+            Directions.TOP_RIGHT, Directions.TOP_LEFT, Directions.TOP_CENTER,
+            Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.BOTTOM_CENTER,
+            Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.RIGHT_CENTER,
+            Directions.LEFT_TOP, Directions.LEFT_BOTTOM, Directions.LEFT_CENTER
+        ],
+        translations: {
+            gotIt: 'Got it',
+            dismiss: 'Dismiss'
+        },
+        theme: Theme.DARK
+    };
+    state = {};
+    static Directions = Directions;
+    static PopupProps = Popup.PopupProps;
+    _onDirectionChange = (direction) => this.setState({ direction });
+    popup;
+    node;
+    popupRef = (el) => {
+        this.popup = el;
+        this.node = this.popup?.node;
+    };
+    getTailOffset() {
+        const DEFAULT_OFFSET = 32;
+        const { popupProps } = this.props;
+        if (this.props.tailOffset != null) {
+            return this.props.tailOffset;
+        }
+        const anchor = popupProps?.anchorElement || this.popup?.parent;
+        if (!anchor) {
+            return DEFAULT_OFFSET;
+        }
+        const offset = Math.floor(anchor.offsetWidth / 2);
+        const isOpenedToRight = this.state.direction != null &&
+            [Directions.TOP_RIGHT, Directions.BOTTOM_RIGHT].includes(this.state.direction);
+        if (popupProps?.left && isOpenedToRight) {
+            return offset - popupProps?.left;
+        }
+        return offset;
+    }
+    render() {
+        const { children, className, tailClassName, title, icon, popupProps, buttonProps, onClose, onDismiss, translations, theme } = this.props;
+        const classes = classNames(styles.message, className, {
+            [darkStyles.dark]: theme === Theme.DARK
+        });
+        const tailClasses = classNames(styles.tail, tailClassName);
+        const popupDirections = this.props.direction
+            ? [this.props.direction]
+            : this.props.directions;
+        const { direction } = this.state;
+        return (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classes} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
+        <ThemeProvider theme={theme} passToPopups>
+          {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
+
+          {icon && <Icon className={styles.icon} glyph={icon}/>}
+          <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>
+          {children && <div className={styles.description}>{children}</div>}
+          {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations.gotIt}</Button>)}
+          {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
+        </ThemeProvider>
+      </Popup>);
+    }
+}
+Message.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     tailClassName: PropTypes.string,
@@ -51,106 +110,4 @@ export default class Message extends Component {
     onClose: PropTypes.func,
     onDismiss: PropTypes.func,
     translations: PropTypes.object
-  };
-
-  static defaultProps = {
-    icon: gift,
-    directions: [
-      Directions.TOP_RIGHT, Directions.TOP_LEFT, Directions.TOP_CENTER,
-      Directions.BOTTOM_RIGHT, Directions.BOTTOM_LEFT, Directions.BOTTOM_CENTER,
-      Directions.RIGHT_TOP, Directions.RIGHT_BOTTOM, Directions.RIGHT_CENTER,
-      Directions.LEFT_TOP, Directions.LEFT_BOTTOM, Directions.LEFT_CENTER
-    ],
-    translations: {
-      gotIt: 'Got it',
-      dismiss: 'Dismiss'
-    }
-  };
-
-  state = {};
-
-  static Directions = Directions;
-  static PopupProps = Popup.PopupProps;
-
-  _onDirectionChange = direction =>
-    this.setState({direction});
-
-  popupRef = el => {
-    this.popup = el;
-    this.node = this.popup?.node;
-  };
-
-  getTailOffset() {
-    const DEFAULT_OFFSET = 32;
-    const {popupProps} = this.props;
-    if (this.props.tailOffset != null) {
-      return this.props.tailOffset;
-    }
-
-    const anchor = popupProps?.anchorElement || this.popup?.parent;
-    if (!anchor) {
-      return DEFAULT_OFFSET;
-    }
-
-    const offset = Math.floor(anchor.offsetWidth / 2);
-
-    const isOpenedToRight = [Directions.TOP_RIGHT, Directions.BOTTOM_RIGHT].
-      includes(this.state.direction);
-    if (popupProps?.left && isOpenedToRight) {
-      return offset - popupProps?.left;
-    }
-
-    return offset;
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      tailClassName,
-      title,
-      icon,
-      popupProps,
-      buttonProps,
-      onClose,
-      onDismiss,
-      translations
-    } = this.props;
-    const classes = classNames(styles.message, className);
-    const tailClasses = classNames(styles.tail, tailClassName);
-    const popupDirections = this.props.direction
-      ? [this.props.direction]
-      : this.props.directions;
-
-    const {direction} = this.state;
-
-    return (
-      <Popup
-        ref={this.popupRef}
-        hidden={false}
-        directions={popupDirections}
-        className={classes}
-        offset={UNIT * 2}
-        onDirectionChange={this._onDirectionChange}
-        {...popupProps}
-      >
-        {direction && (
-          <div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>
-        )}
-
-        {icon && <Icon className={styles.icon} glyph={icon}/>}
-        <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>
-        {children && <div className={styles.description}>{children}</div>}
-        {(onClose || buttonProps) && (
-          <Button
-            className={styles.button}
-            onClick={onClose}
-            primary
-            {...buttonProps}
-          >{translations.gotIt}</Button>
-        )}
-        {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
-      </Popup>
-    );
-  }
-}
+};

package/components/old-browsers-message/old-browsers-message.d.ts

@@ -0,0 +1,2 @@
+declare function stopOldBrowserDetector(): void;
+export { stopOldBrowserDetector as stop };

package/components/old-browsers-message/old-browsers-message.js

@@ -1,99 +1,83 @@
-import {isBrowserInWhiteList} from './white-list';
-
+import { isBrowserInWhiteList } from './white-list';
 /**
  * @name Old Browsers Message
  */
-
 /**
   The list of versions which are definitely supported. "Browser is unsupported"
   won't be displayed for those and higher versions even when a JS error occurs
   on application start.
  */
-
 let smileChanges = 0;
 const MAX_SMILE_CHANGES = 50;
 let previousWindowErrorHandler;
-
 function changeSmileClickListener(event) {
-  const eyes = ['O', 'o', '-', '>', '<'];
-  const target = event.target || event.srcElement;
-
-  smileChanges++;
-
-  function rand(min, max) {
-    return Math.round((Math.random() * (max - min))) + min;
-  }
-
-  function getRandomEye() {
-    return eyes[rand(0, (eyes.length - 1))];
-  }
-
-  function getRandomSmile() {
-    if (smileChanges >= MAX_SMILE_CHANGES) {
-      return '\\\\ (x_x) //';
+    const eyes = ['O', 'o', '-', '>', '<'];
+    const target = (event.target || event.srcElement);
+    smileChanges++;
+    function rand(min, max) {
+        return Math.round((Math.random() * (max - min))) + min;
     }
-
-    return `{{ (${getRandomEye()}_${getRandomEye()}) }}`;
-  }
-
-  target.innerHTML = getRandomSmile();
+    function getRandomEye() {
+        return eyes[rand(0, (eyes.length - 1))];
+    }
+    function getRandomSmile() {
+        if (smileChanges >= MAX_SMILE_CHANGES) {
+            return '\\\\ (x_x) //';
+        }
+        return `{{ (${getRandomEye()}_${getRandomEye()}) }}`;
+    }
+    target.innerHTML = getRandomSmile();
 }
-
 function attachSmileClickListener(smileNode) {
-  if (smileNode.addEventListener) {
-    smileNode.addEventListener('click', changeSmileClickListener);
-  } else if (smileNode.attachEvent) {
-    smileNode.attachEvent('onclick', changeSmileClickListener);
-  }
+    if (smileNode.addEventListener) {
+        smileNode.addEventListener('click', changeSmileClickListener);
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+    }
+    else if (smileNode.attachEvent) {
+        smileNode.attachEvent('onclick', changeSmileClickListener);
+        /* eslint-enable */
+    }
 }
-
 /**
  * Listens to unhandled errors and displays passed node
  */
 function startOldBrowsersDetector(onOldBrowserDetected) {
-  previousWindowErrorHandler = window.onerror;
-
-  window.onerror = function oldBrowsersMessageShower(errorMsg, url, lineNumber) {
-    if (onOldBrowserDetected) {
-      onOldBrowserDetected();
-    }
-
-    if (previousWindowErrorHandler) {
-      return previousWindowErrorHandler(errorMsg, url, lineNumber);
-    }
-
-    return false;
-  };
+    previousWindowErrorHandler = window.onerror;
+    window.onerror = function oldBrowsersMessageShower(errorMsg, url, lineNumber) {
+        if (onOldBrowserDetected) {
+            onOldBrowserDetected();
+        }
+        if (previousWindowErrorHandler) {
+            return previousWindowErrorHandler(errorMsg, url, lineNumber);
+        }
+        return false;
+    };
 }
-
 function stopOldBrowserDetector() {
-  window.onerror = previousWindowErrorHandler;
+    window.onerror = previousWindowErrorHandler;
 }
-
-
 //Start javascript error detection
 startOldBrowsersDetector(() => {
-  const oldBrowsersMessageContainer = document.getElementById('ring-old-browsers-message');
-  const browserMessage = document.getElementById('ring-old-browsers-message__browser-message');
-  const errorMessage = document.getElementById('ring-old-browsers-message__error-message');
-  const smileNode = document.getElementById('ring-old-browsers-message__smile');
-
-  if (isBrowserInWhiteList()) {
-    browserMessage.style.display = 'none';
-    errorMessage.style.display = 'block';
-  } else {
-    browserMessage.style.display = 'block';
-    errorMessage.style.display = 'none';
-  }
-
-  if (oldBrowsersMessageContainer) {
-    oldBrowsersMessageContainer.hidden = false;
-    oldBrowsersMessageContainer.style.display = 'block';
-  }
-
-  if (smileNode) {
-    attachSmileClickListener(smileNode);
-  }
+    const oldBrowsersMessageContainer = document.getElementById('ring-old-browsers-message');
+    const browserMessage = document.getElementById('ring-old-browsers-message__browser-message');
+    const errorMessage = document.getElementById('ring-old-browsers-message__error-message');
+    const smileNode = document.getElementById('ring-old-browsers-message__smile');
+    if (browserMessage != null && errorMessage != null) {
+        if (isBrowserInWhiteList()) {
+            browserMessage.style.display = 'none';
+            errorMessage.style.display = 'block';
+        }
+        else {
+            browserMessage.style.display = 'block';
+            errorMessage.style.display = 'none';
+        }
+    }
+    if (oldBrowsersMessageContainer) {
+        oldBrowsersMessageContainer.hidden = false;
+        oldBrowsersMessageContainer.style.display = 'block';
+    }
+    if (smileNode) {
+        attachSmileClickListener(smileNode);
+    }
 });
-
-export {stopOldBrowserDetector as stop};
+export { stopOldBrowserDetector as stop };

package/components/old-browsers-message/old-browsers-message__stop.d.ts

@@ -0,0 +1 @@
+export { stop as default } from './old-browsers-message';

package/components/old-browsers-message/old-browsers-message__stop.js

@@ -1,2 +1,2 @@
 // Re-export for backward compatibility
-export {stop as default} from './old-browsers-message';
+export { stop as default } from './old-browsers-message';

package/components/old-browsers-message/white-list.d.ts

@@ -0,0 +1,2 @@
+export declare const WHITE_LIST: Record<string, number>;
+export declare function isBrowserInWhiteList(): boolean;

package/components/old-browsers-message/white-list.js

@@ -1,32 +1,25 @@
 import sniffer from '../global/sniffer';
-
 const MAJOR_VERSION_INDEX = 0;
-
 /**
  * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
  */
-/* global SUPPORTED_BROWSERS */
 if (!SUPPORTED_BROWSERS) {
-  // eslint-disable-next-line no-console
-  console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
+    // eslint-disable-next-line no-console
+    console.warn('Ring UI: no SUPPORTED_BROWSERS passed. Please check babel config.');
 }
 const SUPPORTED = SUPPORTED_BROWSERS || [];
-
 const WHITE_LISTED_BROWSERS = ['chrome', 'firefox', 'safari', 'edge'];
-
 export const WHITE_LIST = SUPPORTED.
-  reduce((acc, item) => {
-    const [, browserName, version] = item.match(/(\S+)\s(\S+)/);
+    reduce((acc, item) => {
+    const [, browserName, version] = item.match(/(\S+)\s(\S+)/) ?? [];
     if (!WHITE_LISTED_BROWSERS.includes(browserName)) {
-      return acc;
+        return acc;
     }
-
     return {
-      ...acc,
-      [browserName]: parseInt(version, 10)
+        ...acc,
+        [browserName]: parseInt(version, 10)
     };
-  }, {});
-
+}, {});
 export function isBrowserInWhiteList() {
-  return sniffer.browser.version[MAJOR_VERSION_INDEX] >= WHITE_LIST[sniffer.browser.name];
+    return sniffer.browser.version[MAJOR_VERSION_INDEX] >= WHITE_LIST[sniffer.browser.name];
 }

package/components/pager/pager.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @name Pager
+ */
+import React, { PureComponent, ReactNode } from 'react';
+import { SelectItem } from '../select/select';
+export interface PagerTranslations {
+    perPage: string;
+    firstPage: string;
+    lastPage: string;
+    nextPage: string;
+    previousPage: string;
+}
+export interface PagerProps {
+    total: number;
+    currentPage: number;
+    pageSize: number;
+    pageSizes: readonly number[];
+    visiblePagesLimit: number;
+    disablePageSizeSelector: boolean;
+    openTotal: boolean;
+    canLoadLastPageWithOpenTotal: boolean;
+    translations: PagerTranslations;
+    loader: boolean;
+    loaderNavigation: boolean;
+    onPageSizeChange: (size: number) => void;
+    onLoadPage: (nextPage: number) => void;
+    onPageChange?: ((prevPage: number, event?: React.MouseEvent) => void) | null | undefined;
+    className?: string | null | undefined;
+    hrefFunc?: ((page: number, pageSize: number | undefined) => string) | undefined;
+}
+interface PagerSizeItem {
+    key: number;
+}
+export default class Pager extends PureComponent<PagerProps> {
+    static defaultProps: {
+        currentPage: number;
+        pageSize: number;
+        pageSizes: number[];
+        visiblePagesLimit: number;
+        disablePageSizeSelector: boolean;
+        openTotal: boolean;
+        canLoadLastPageWithOpenTotal: boolean;
+        translations: {
+            perPage: string;
+            firstPage: string;
+            lastPage: string;
+            nextPage: string;
+            previousPage: string;
+        };
+        loader: boolean;
+        loaderNavigation: boolean;
+        onPageSizeChange: () => void;
+        onLoadPage: () => void;
+    };
+    getSelectOptions(): {
+        selected: SelectItem<PagerSizeItem> | undefined;
+        data: SelectItem<PagerSizeItem>[];
+    };
+    getTotal(): number;
+    handlePageSizeChange: (item: PagerSizeItem | null) => void;
+    handlePrevClick: () => void;
+    handleNextClick: () => void;
+    handlePageChange: (arg: number) => (event: React.MouseEvent) => void;
+    handleLoadMore: (arg: number) => () => void;
+    getButton(page: number, content: ReactNode, key?: number, active?: boolean): JSX.Element;
+    getClickProps(onClick: (e: React.MouseEvent) => void): {
+        onPlainLeftClick?: undefined;
+        onClick?: undefined;
+    } | {
+        onPlainLeftClick: (e: React.MouseEvent) => void;
+        onClick?: undefined;
+    } | {
+        onClick: (e: React.MouseEvent) => void;
+        onPlainLeftClick?: undefined;
+    };
+    getPageSizeSelector(): false | JSX.Element;
+    getPagerLinks(): JSX.Element;
+    generateHref(page: number): string | undefined;
+    getPagerContent(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export declare type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
+export {};