@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/markdown/markdown.css

@@ -0,0 +1,126 @@
+@import "../global/variables.css";
+
+@value p-margin: 10px;
+
+.inline {
+  &,
+  & p {
+    display: inline;
+  }
+}
+
+.markdown {
+  composes: font from  "../global/global.css";
+
+  & ol,
+  & ul {
+    margin: 0;
+  }
+
+  & p,
+  & blockquote,
+  & pre {
+    margin: 0;
+
+    &:not(:first-child) {
+      margin-top: p-margin;
+    }
+  }
+
+  & li {
+    margin-top: p-margin;
+  }
+
+  & li {
+    & p,
+    & blockquote,
+    & pre {
+      &:not(:first-child) {
+        margin-top: 6px;
+      }
+    }
+  }
+
+  & hr {
+    margin: p-margin 0;
+
+    border: none;
+    border-bottom: 1px solid var(--ring-line-color);
+  }
+
+  & blockquote {
+    padding: 0 0 0 calc(2 * var(--ring-unit));
+
+    color: var(--ring-secondary-color);
+    box-shadow: inset 2px 0 0 var(--ring-line-color);
+
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  & ul {
+    padding: 0 0 0 calc(2 * var(--ring-unit));
+  }
+
+  & ol {
+    padding: 0;
+
+    list-style-position: inside;
+    font-variant-numeric: tabular-nums;
+  }
+
+  & ul {
+    list-style-type: none;
+  }
+
+  & pre {
+    position: relative;
+
+    padding: calc(var(--ring-unit) * 3) calc(var(--ring-unit) * 2);
+
+    white-space: pre;
+    tab-size: 2;
+
+    border-radius: var(--ring-border-radius);
+    background-color: rgba(var(--ring-tag-background-components), 0.5);
+
+    font-family: var(--ring-font-family-monospace);
+
+    &:first-child {
+      margin-top: calc(var(--ring-unit) * 4);
+    }
+
+    &:last-child {
+      margin-bottom: calc(var(--ring-unit) * 4);
+    }
+  }
+
+  & code {
+    padding: 2px 4px;
+
+    white-space: pre-wrap;
+
+    color: var(--ring-text-color);
+
+    border-radius: var(--ring-border-radius-small);
+
+    font-family: var(--ring-font-family-monospace);
+    font-size: var(--ring-font-size);
+  }
+
+  & :not(pre) > code {
+    background-color: var(--ring-disabled-background-color);
+  }
+
+  & pre > code {
+    display: block;
+
+    padding: 0;
+
+    white-space: inherit;
+
+    color: var(--ring-code-color);
+
+    font-size: var(--ring-font-size);
+  }
+}

package/components/markdown/markdown.d.ts

@@ -0,0 +1,12 @@
+import React, { PureComponent, ReactNode } from 'react';
+export interface MarkdownProps {
+    inline?: boolean | null | undefined;
+    children: ReactNode;
+    className?: string | null | undefined;
+}
+/**
+  * @name Markdown
+*/
+export default class Markdown extends PureComponent<MarkdownProps> {
+    render(): React.JSX.Element;
+}

package/components/markdown/markdown.js

@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import headingStyles from '../heading/heading.css';
+import linkStyles from '../link/link.css';
+import styles from './markdown.css';
+/**
+  * @name Markdown
+*/
+export default class Markdown extends PureComponent {
+    render() {
+        const { className, children, inline } = this.props;
+        const classes = classNames(className, headingStyles.contentWithHeadings, linkStyles.withLinks, {
+            [styles.markdown]: !inline,
+            [styles.inline]: inline
+        });
+        return (<div className={classes}>
+        {children}
+      </div>);
+    }
+}
+Markdown.propTypes = {
+    inline: PropTypes.bool,
+    className: PropTypes.string
+};

package/components/message/message.css

@@ -0,0 +1,61 @@
+@import "../global/variables.css";
+
+.container {
+  display: inline;
+}
+
+.message {
+  overflow: visible;
+
+  max-width: calc(var(--ring-unit) * 40);
+
+  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 5);
+
+  text-align: left;
+
+  color: var(--ring-active-text-color);
+
+  background-color: var(--ring-popup-background-color);
+}
+
+.icon {
+  position: absolute;
+  top: 10px;
+  left: calc(var(--ring-unit) * 1.5);
+}
+
+.title {
+  composes: font-lower from "../global/global.css";
+
+  margin: 0;
+
+  font-weight: normal;
+}
+
+.description {
+  margin: calc(var(--ring-unit) / 2) 0 0;
+
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+}
+
+.button {
+  margin-top: calc(var(--ring-unit) * 1.5);
+}
+
+.tail {
+  position: absolute;
+
+  box-sizing: border-box;
+  width: 11px;
+  height: 11px;
+
+  transform-origin: 0 0;
+
+  border: 1px solid;
+  border-color: transparent transparent var(--ring-popup-border-color) var(--ring-popup-border-color);
+
+  background-color: var(--ring-popup-background-color);
+}

package/components/message/message.d.ts

@@ -0,0 +1,55 @@
+import React, { Component, ReactNode } from 'react';
+import Popup, { PopupAttrs } from '../popup/popup';
+import { Directions } from '../popup/popup.consts';
+import { IconType } from '../icon/icon';
+import { ButtonAttrs } from '../button/button';
+import Theme from '../global/theme';
+export interface MessageTranslations {
+    gotIt: string;
+    dismiss: string;
+}
+export interface MessageProps {
+    icon: string | IconType | null;
+    directions: readonly Directions[];
+    translations?: MessageTranslations | null | undefined;
+    theme: Theme;
+    title?: string | null | undefined;
+    children?: ReactNode;
+    className?: string | null | undefined;
+    tailClassName?: string | null | undefined;
+    direction?: Directions | null | undefined;
+    popupProps?: Partial<PopupAttrs> | null | undefined;
+    buttonProps?: ButtonAttrs | null | undefined;
+    tailOffset?: number | null | undefined;
+    onClose?: (() => void) | undefined;
+    onDismiss?: (() => void) | null | undefined;
+}
+interface MessageState {
+    direction?: Directions;
+}
+/**
+ * Displays a popup containing a message.
+ */
+export default class Message extends Component<MessageProps> {
+    static defaultProps: {
+        icon: string;
+        directions: Directions[];
+        theme: Theme;
+    };
+    state: MessageState;
+    static Directions: typeof Directions;
+    static PopupProps: {
+        Directions: typeof Directions;
+        Dimension: typeof import("../popup/popup.consts").Dimension;
+        MinWidth: typeof import("../popup/popup.consts").MinWidth;
+        MaxHeight: typeof import("../popup/popup.consts").MaxHeight;
+    };
+    private _onDirectionChange;
+    popup?: Popup | null;
+    node?: HTMLElement | null;
+    popupRef: (el: Popup | null) => void;
+    getTailOffset(): number;
+    render(): React.JSX.Element;
+}
+export type MessageAttrs = JSX.LibraryManagedAttributes<typeof Message, MessageProps>;
+export {};

package/components/message/message.js

@@ -0,0 +1,129 @@
+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 { I18nContext } from '../i18n/i18n-context';
+import Theme, { ThemeProvider, WithThemeClasses } from '../global/theme';
+import darkStyles from '../global/variables_dark.css';
+import styles from './message.css';
+/**
+  * @name Message
+  */
+const UNIT = 8;
+const TAIL_SIZE = 11;
+const getTailOffsets = (offset) => ({
+    [Directions.BOTTOM_RIGHT]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
+    [Directions.BOTTOM_LEFT]: {
+        top: 0,
+        right: offset - UNIT - TAIL_SIZE,
+        transform: 'rotate(135deg)'
+    },
+    [Directions.BOTTOM_CENTER]: { top: 0, left: offset + UNIT, transform: 'rotate(135deg)' },
+    [Directions.TOP_RIGHT]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
+    [Directions.TOP_LEFT]: {
+        bottom: -TAIL_SIZE,
+        right: offset + UNIT - TAIL_SIZE,
+        transform: 'rotate(-45deg)'
+    },
+    [Directions.TOP_CENTER]: { bottom: -TAIL_SIZE, left: offset - UNIT, transform: 'rotate(-45deg)' },
+    [Directions.RIGHT_TOP]: { bottom: offset + UNIT - TAIL_SIZE, left: 0, transform: 'rotate(45deg)' },
+    [Directions.RIGHT_BOTTOM]: { top: offset - UNIT, left: 0, transform: 'rotate(45deg)' },
+    [Directions.RIGHT_CENTER]: { top: offset - UNIT, left: 0, transform: 'rotate(45deg)' },
+    [Directions.LEFT_TOP]: {
+        bottom: offset - UNIT - TAIL_SIZE,
+        right: -TAIL_SIZE,
+        transform: 'rotate(-135deg)'
+    },
+    [Directions.LEFT_BOTTOM]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' },
+    [Directions.LEFT_CENTER]: { top: offset + UNIT, right: -TAIL_SIZE, transform: 'rotate(-135deg)' }
+});
+/**
+ * Displays a popup containing a message.
+ */
+export default class Message extends Component {
+    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
+        ],
+        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 (<I18nContext.Consumer>
+        {({ translate }) => (<WithThemeClasses theme={theme}>
+            {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} 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}/>}
+                  {title && <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 ?? translate('gotIt')}</Button>)}
+                  {onDismiss && (<Button onClick={onDismiss} text>
+                      {translations?.dismiss ?? translate('dismiss')}
+                    </Button>)}
+                </ThemeProvider>
+              </Popup>)}
+          </WithThemeClasses>)}
+      </I18nContext.Consumer>);
+    }
+}
+Message.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    tailClassName: PropTypes.string,
+    title: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+    directions: PropTypes.arrayOf(PropTypes.string),
+    direction: PropTypes.string,
+    popupProps: PropTypes.object,
+    buttonProps: PropTypes.object,
+    tailOffset: PropTypes.number,
+    onClose: PropTypes.func,
+    onDismiss: PropTypes.func,
+    translations: PropTypes.object
+};

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

@@ -0,0 +1,26 @@
+@import "../global/variables.css";
+
+:global(.ring-old-browsers-message) {
+  display: block;
+
+  margin-top: 15%;
+
+  text-align: center;
+
+  color: var(--ring-text-color);
+
+  font-family: -apple-system, BlinkMacSystemFont, Ubuntu, "Helvetica Neue", Arial, sans-serif;
+  font-size: var(--ring-font-size-larger);
+  line-height: calc(2.5 * var(--ring-unit));
+}
+
+:global(.ring-old-browsers-message_hidden) {
+  display: none;
+}
+
+:global(.ring-old-browsers-message__smile) {
+  cursor: pointer;
+  user-select: none;
+
+  font-size: calc(3 * var(--ring-unit));
+}

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

@@ -0,0 +1,83 @@
+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) //';
+        }
+        return `{{ (${getRandomEye()}_${getRandomEye()}) }}`;
+    }
+    target.innerHTML = getRandomSmile();
+}
+function attachSmileClickListener(smileNode) {
+    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;
+    };
+}
+function stopOldBrowserDetector() {
+    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 (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 };

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

@@ -0,0 +1,2 @@
+// Re-export for backward compatibility
+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

@@ -0,0 +1,25 @@
+import sniffer from '../global/sniffer';
+const MAJOR_VERSION_INDEX = 0;
+/**
+ * SUPPORTED_BROWSERS are defined by Babel plugin, see babel config
+ */
+if (!SUPPORTED_BROWSERS) {
+    // 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+)/) ?? [];
+    if (!WHITE_LISTED_BROWSERS.includes(browserName)) {
+        return acc;
+    }
+    return {
+        ...acc,
+        [browserName]: parseInt(version, 10)
+    };
+}, {});
+export function isBrowserInWhiteList() {
+    return sniffer.browser.version[MAJOR_VERSION_INDEX] >= WHITE_LIST[sniffer.browser.name];
+}

package/components/pager/pager.css

@@ -0,0 +1,19 @@
+@import "../global/variables.css";
+
+.pager {
+  user-select: none;
+}
+
+.links {
+  margin-bottom: calc(var(--ring-unit) * 2);
+}
+
+.link {
+  display: inline-block;
+
+  margin-right: calc(var(--ring-unit) * 2);
+}
+
+.linkDisabled {
+  color: var(--ring-secondary-color);
+}

package/components/pager/pager.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @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 | null | undefined;
+    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;
+        loader: boolean;
+        loaderNavigation: boolean;
+        onPageSizeChange: () => void;
+        onLoadPage: () => void;
+    };
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof Pager.contextType>;
+    getSelectOptions(): {
+        selected: SelectItem<PagerSizeItem> | undefined;
+        data: SelectItem<PagerSizeItem>[];
+    };
+    getTotalPages(): 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): React.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 | React.JSX.Element;
+    getPagerLinks(): React.JSX.Element;
+    generateHref(page: number): string | undefined;
+    getPagerContent(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export type PagerAttrs = JSX.LibraryManagedAttributes<typeof Pager, PagerProps>;
+export {};