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

package/components/code/code.js

@@ -0,0 +1,94 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import highlight from 'highlight.js/lib/core';
+import normalizeIndent from '../global/normalize-indent';
+import trivialTemplateTag from '../global/trivial-template-tag';
+import memoize from '../global/memoize';
+import styles from './code.css';
+import highlightStyles from './highlight.css';
+function noop() { }
+const registerLanguage = memoize(async (language) => {
+    const languageExports = await import(
+    /* webpackChunkName: "highlight-[request]" */
+    `highlight.js/lib/languages/${language}`);
+    highlight.registerLanguage(language, languageExports.default);
+});
+/**
+ * @name Code
+ */
+export default class Code extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        code: PropTypes.string.isRequired,
+        inline: PropTypes.bool,
+        softWrap: PropTypes.bool,
+        language: PropTypes.string,
+        replacer: PropTypes.func,
+        codeRef: PropTypes.oneOfType([
+            PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+            PropTypes.func
+        ])
+    };
+    static defaultProps = {
+        inline: false,
+        softWrap: false,
+        replacer: noop
+    };
+    componentDidMount() {
+        this.highlight();
+    }
+    componentDidUpdate() {
+        this.highlight();
+    }
+    code;
+    async highlight() {
+        const codeRef = this.codeRef;
+        if (codeRef == null) {
+            return;
+        }
+        const { language, inline, replacer } = this.props;
+        if (!inline) {
+            if (language != null && highlight.getLanguage(language) == null) {
+                await registerLanguage(language);
+            }
+            // @ts-expect-error https://github.com/highlightjs/highlight.js/issues/2945
+            highlight.highlightElement(codeRef);
+        }
+        replacer(codeRef);
+    }
+    get codeRef() {
+        const { codeRef } = this.props;
+        return !codeRef || typeof codeRef === 'function' ? this.code : codeRef.current;
+    }
+    get initCodeRef() {
+        const { codeRef } = this.props;
+        const isFunctionCodeRef = typeof codeRef === 'function';
+        if (codeRef && !isFunctionCodeRef) {
+            return codeRef;
+        }
+        return (ref) => {
+            this.code = ref;
+            if (isFunctionCodeRef) {
+                codeRef(this.code);
+            }
+        };
+    }
+    render() {
+        const { code, className, inline, softWrap, language } = this.props;
+        const Tag = inline ? 'span' : 'pre';
+        const classes = classNames(styles.code, className, language, {
+            [styles.inline]: inline,
+            [styles.softWrap]: softWrap
+        });
+        return (<Tag className={classes} data-test="ring-code">
+        <code 
+        // should be focusable because it can be scrollable
+        tabIndex={inline ? -1 : 0} ref={this.initCodeRef} className={highlightStyles.highlightContainer}>
+          {normalizeIndent(code)}
+        </code>
+      </Tag>);
+    }
+}
+const code = trivialTemplateTag((source) => <Code code={source}/>);
+export { code, highlight };

package/components/code/highlight.css

@@ -0,0 +1,112 @@
+/*
+  Custom theme for highlight.js
+  Based on "idea.css" and "darcula.css" themes of hljs distributive
+*/
+
+.highlightContainer {
+  &:global(.hljs) {
+    display: block;
+    overflow-x: auto;
+
+    color: var(--ring-code-color);
+  }
+
+  & :global(.hljs-subst),
+  & :global(.hljs-title) {
+    color: var(--ring-code-color);
+
+    font-weight: normal;
+  }
+
+  & :global(.hljs-comment),
+  & :global(.hljs-quote) {
+    color: var(--ring-code-comment-color);
+
+    font-style: italic;
+  }
+
+  & :global(.hljs-meta) {
+    color: var(--ring-code-meta-color);
+  }
+
+  & :global(.hljs-tag) {
+    background: var(--ring-code-tag-background-color);
+    box-shadow: 0 1px var(--ring-code-tag-background-color), 0 -1px var(--ring-code-tag-background-color);
+  }
+
+  & :global(.hljs-section),
+  & :global(.hljs-literal),
+  & :global(.hljs-keyword),
+  & :global(.hljs-type) {
+    color: var(--ring-code-keyword-color);
+
+    font-weight: bold;
+  }
+
+  & :global(.hljs-name),
+  & :global(.hljs-selector-pseudo),
+  & :global(.hljs-selector-id),
+  & :global(.hljs-selector-class) {
+    color: var(--ring-code-tag-color);
+
+    font-weight: var(--ring-code-tag-font-weight);
+  }
+
+  & :global(.hljs-selector-tag) {
+    color: var(--ring-code-keyword-color);
+
+    font-weight: var(--ring-code-tag-font-weight);
+  }
+
+  & :global(.hljs-attr) {
+    color: var(--ring-code-field-color);
+
+    font-weight: bold;
+  }
+
+  & :global(.hljs-tag) > :global(.hljs-attr),
+  & :global(.hljs-attribute) {
+    color: var(--ring-code-attribute-color);
+
+    font-weight: var(--ring-code-tag-font-weight);
+  }
+
+  & :global(.hljs-number),
+  & :global(.hljs-regexp),
+  & :global(.hljs-link) {
+    color: var(--ring-code-number-color);
+
+    font-weight: normal;
+  }
+
+  & :global(.hljs-string) {
+    color: var(--ring-code-string-color);
+
+    font-weight: bold;
+  }
+
+  & :global(.hljs-doctag) {
+    text-decoration: underline;
+  }
+
+  & :global(.hljs-variable),
+  & :global(.hljs-template-variable) {
+    color: var(--ring-code-field-color);
+  }
+
+  & :global(.hljs-addition) {
+    background: var(--ring-code-addition-color);
+  }
+
+  & :global(.hljs-deletion) {
+    background: var(--ring-code-deletion-color);
+  }
+
+  & :global(.hljs-emphasis) {
+    font-style: italic;
+  }
+
+  & :global(.hljs-strong) {
+    font-weight: bold;
+  }
+}

package/components/collapse/collapse-content.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react';
+type Props = {
+    minHeight?: number;
+    className?: string;
+    'data-test'?: string | null | undefined;
+};
+/**
+ * @name CollapseContent
+ */
+export declare const CollapseContent: React.FC<PropsWithChildren<Props>>;
+export default CollapseContent;

package/components/collapse/collapse-content.js

@@ -0,0 +1,72 @@
+import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import dataTests from '../global/data-tests';
+import { getRect } from '../global/dom';
+import { toPx } from './utils';
+import CollapseContext from './collapse-context';
+import { COLLAPSE_CONTENT_TEST_ID, COLLAPSE_CONTENT_CONTAINER_TEST_ID } from './consts';
+import styles from './collapse.css';
+const DURATION_FACTOR = 0.5;
+const DEFAULT_HEIGHT = 0;
+const VISIBLE = 1;
+const HIDDEN = 0;
+/**
+ * @name CollapseContent
+ */
+export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest }) => {
+    const { collapsed, duration, id, disableAnimation } = useContext(CollapseContext);
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const initialContentHeight = useRef(minHeight);
+    const contentHeight = useRef(DEFAULT_HEIGHT);
+    const [dimensions, setDimensions] = useState({
+        width: 0,
+        height: 0
+    });
+    const [height, setHeight] = useState(toPx(minHeight));
+    const [showFade, setShowFade] = useState(true);
+    useEffect(() => {
+        if (!collapsed) {
+            setShowFade(false);
+        }
+        else {
+            setShowFade(true);
+        }
+    }, [collapsed]);
+    useEffect(() => {
+        if (contentRef.current) {
+            contentHeight.current = getRect(contentRef.current).height;
+        }
+    }, [minHeight, dimensions.height]);
+    useEffect(() => {
+        const nextHeight = collapsed ? initialContentHeight.current : contentHeight.current;
+        setHeight(toPx(nextHeight));
+    }, [collapsed, dimensions.height]);
+    useEffect(() => {
+        if (contentRef.current) {
+            const observer = new ResizeObserver(([entry]) => {
+                if (entry && entry.borderBoxSize) {
+                    const { inlineSize, blockSize } = entry.borderBoxSize[0];
+                    setDimensions({ width: inlineSize, height: blockSize });
+                }
+            });
+            observer.observe(contentRef.current);
+        }
+    }, []);
+    const style = useMemo(() => {
+        const calculatedDuration = duration + contentHeight.current * DURATION_FACTOR;
+        return {
+            '--duration': `${calculatedDuration}ms`,
+            height,
+            opacity: collapsed && !minHeight ? HIDDEN : VISIBLE
+        };
+    }, [duration, height, collapsed, minHeight]);
+    const fadeShouldBeVisible = useMemo(() => Boolean(minHeight && showFade), [minHeight, showFade]);
+    return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
+      <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>
+        {children}
+      </div>
+      {fadeShouldBeVisible && <div className={styles.fade}/>}
+    </div>);
+};
+export default CollapseContent;

package/components/collapse/collapse-context.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface CollapseContextInterface {
+    collapsed: boolean;
+    duration: number;
+    disableAnimation: boolean;
+    setCollapsed: () => void;
+    id: string;
+}
+export declare const CollapseContext: import("react").Context<CollapseContextInterface>;
+export default CollapseContext;

package/components/collapse/collapse-context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import { BASE_ANIMATION_DURATION } from './consts';
+export const CollapseContext = createContext({
+    collapsed: true,
+    duration: BASE_ANIMATION_DURATION,
+    disableAnimation: false,
+    setCollapsed: () => { },
+    id: ''
+});
+export default CollapseContext;

package/components/collapse/collapse-control.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ChildrenFunction = (collapsed: boolean) => React.ReactNode;
+type Props = {
+    children: ChildrenFunction | React.ReactNode;
+    'data-test'?: string | null | undefined;
+};
+/**
+ * @name CollapseControl
+ */
+export declare const CollapseControl: React.FC<Props>;
+export default CollapseControl;

package/components/collapse/collapse-control.js

@@ -0,0 +1,22 @@
+import React, { useMemo, useContext, cloneElement } from 'react';
+import dataTests from '../global/data-tests';
+import { CollapseContext } from './collapse-context';
+import { COLLAPSE_CONTROL_TEST_ID } from './consts';
+/**
+ * @name CollapseControl
+ */
+export const CollapseControl = ({ children, 'data-test': dataTest }) => {
+    const { setCollapsed, collapsed, id } = useContext(CollapseContext);
+    const child = useMemo(() => {
+        if (typeof children === 'function') {
+            return <p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{children(collapsed)}</p>;
+        }
+        return <p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{children}</p>;
+    }, [children, collapsed, dataTest]);
+    return cloneElement(child, {
+        onClick: setCollapsed,
+        'aria-controls': `collapse-content-${id}`,
+        'aria-expanded': String(!collapsed)
+    });
+};
+export default CollapseControl;

package/components/collapse/collapse.css

@@ -0,0 +1,40 @@
+.container {
+    position: relative;
+    will-change: height, opacity;
+
+    overflow: hidden;
+
+}
+
+.transition {
+    transition: height var(--duration) ease-in-out 0s, opacity var(--duration) ease-in-out 0s;
+}
+
+.summary {
+    list-style: none;
+
+    cursor: pointer;
+}
+
+.trigger {
+    cursor: pointer;
+
+    border: none;
+    outline: none;
+    background: transparent;
+}
+
+.fade {
+    position: absolute;
+    z-index: 10;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    height: calc(var(--ring-unit) * 3);
+
+    pointer-events: none;
+
+    color: var(--ring-content-background-color);
+    background-image: linear-gradient(to bottom, transparent 0%, currentColor 50%);
+}

package/components/collapse/collapse.d.ts

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+type Props = {
+    onChange?: (collapsed: boolean) => void;
+    duration?: number;
+    disableAnimation?: boolean;
+    className?: string;
+};
+/**
+ * @name Collapse
+ */
+export declare const Collapse: React.FC<PropsWithChildren<Props>>;
+export default Collapse;

package/components/collapse/collapse.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useId, useState } from 'react';
+import { CollapseContext } from './collapse-context';
+import { BASE_ANIMATION_DURATION } from './consts';
+/**
+ * @name Collapse
+ */
+export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { } }) => {
+    const [collapsed, toggle] = useState(true);
+    const id = useId();
+    const setCollapsed = useCallback(() => {
+        toggle(!collapsed);
+        onChange(!collapsed);
+    }, [toggle, onChange, collapsed]);
+    return (<div className={className}>
+      <CollapseContext.Provider value={{
+            collapsed,
+            setCollapsed,
+            duration,
+            disableAnimation,
+            id
+        }}>
+        {children}
+      </CollapseContext.Provider>
+    </div>);
+};
+export default Collapse;

package/components/collapse/collapse.stories.css

@@ -0,0 +1,25 @@
+.container {
+  width: 400px;
+  padding: 10px;
+}
+
+.border {
+  border: 1px solid var(--ring-line-color);
+  border-radius: 5px;
+}
+
+.loaderWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 200px;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 500px;
+}

package/components/collapse/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const COLLAPSE_CONTROL_TEST_ID = "ring-collapse-control";
+export declare const COLLAPSE_CONTENT_CONTAINER_TEST_ID = "ring-collapse-content-container";
+export declare const COLLAPSE_CONTENT_TEST_ID = "ring-collapse-content";
+export declare const BASE_ANIMATION_DURATION = 200;

package/components/collapse/consts.js

@@ -0,0 +1,4 @@
+export const COLLAPSE_CONTROL_TEST_ID = 'ring-collapse-control';
+export const COLLAPSE_CONTENT_CONTAINER_TEST_ID = 'ring-collapse-content-container';
+export const COLLAPSE_CONTENT_TEST_ID = 'ring-collapse-content';
+export const BASE_ANIMATION_DURATION = 200;

package/components/collapse/utils.d.ts

@@ -0,0 +1 @@
+export declare const toPx: (value: number) => string;

package/components/collapse/utils.js

@@ -0,0 +1 @@
+export const toPx = (value) => `${value}px`;

package/components/confirm/confirm.css

@@ -0,0 +1,7 @@
+@import "../global/variables.css";
+
+.description {
+  margin-top: var(--ring-unit);
+
+  font-size: var(--ring-font-size);
+}

package/components/confirm/confirm.d.ts

@@ -0,0 +1,48 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface ConfirmProps {
+    text: string;
+    description: ReactNode;
+    show: boolean;
+    rejectOnEsc: boolean;
+    inProgress: boolean;
+    cancelIsDefault: boolean;
+    confirmLabel: string;
+    rejectLabel: string;
+    onConfirm: ((event: React.MouseEvent<HTMLButtonElement>) => void);
+    onReject: ((event?: React.MouseEvent<HTMLButtonElement>) => void);
+    className?: string | undefined;
+}
+/**
+ * @name Confirm
+ */
+export default class Confirm extends PureComponent<ConfirmProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        text: PropTypes.Requireable<string>;
+        description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        show: PropTypes.Requireable<boolean>;
+        rejectOnEsc: PropTypes.Requireable<boolean>;
+        inProgress: PropTypes.Requireable<boolean>;
+        cancelIsDefault: PropTypes.Requireable<boolean>;
+        confirmLabel: PropTypes.Requireable<string>;
+        rejectLabel: PropTypes.Requireable<string>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onReject: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        text: null;
+        description: null;
+        show: boolean;
+        rejectOnEsc: boolean;
+        inProgress: boolean;
+        cancelIsDefault: boolean;
+        confirmLabel: string;
+        rejectLabel: string;
+        onConfirm: () => void;
+        onReject: () => void;
+    };
+    onEscPress: () => void;
+    render(): React.JSX.Element;
+}
+export type ConfirmAttributes = JSX.LibraryManagedAttributes<typeof Confirm, ConfirmProps>;

package/components/confirm/confirm.js

@@ -0,0 +1,59 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Dialog from '../dialog/dialog';
+import Button from '../button/button';
+import { Content, Header } from '../island/island';
+import Panel from '../panel/panel';
+import styles from './confirm.css';
+/**
+ * @name Confirm
+ */
+export default class Confirm extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        text: PropTypes.string,
+        description: PropTypes.node,
+        show: PropTypes.bool,
+        rejectOnEsc: PropTypes.bool,
+        inProgress: PropTypes.bool,
+        cancelIsDefault: PropTypes.bool,
+        confirmLabel: PropTypes.string,
+        rejectLabel: PropTypes.string,
+        onConfirm: PropTypes.func,
+        onReject: PropTypes.func
+    };
+    static defaultProps = {
+        text: null,
+        description: null,
+        show: false,
+        rejectOnEsc: true,
+        inProgress: false,
+        cancelIsDefault: false,
+        confirmLabel: 'OK',
+        rejectLabel: 'Cancel',
+        onConfirm: () => { },
+        onReject: () => { }
+    };
+    onEscPress = () => {
+        if (this.props.rejectOnEsc) {
+            this.props.onReject();
+        }
+    };
+    render() {
+        const { show, className, inProgress, cancelIsDefault, text, description, confirmLabel, rejectLabel, onConfirm, onReject } = this.props;
+        return (<Dialog label={text || (typeof description === 'string' ? description : undefined)} className={className} onEscPress={this.onEscPress} show={show} trapFocus data-test="ring-confirm">
+        {text && <Header>{text}</Header>}
+        {description && (<Content>
+            <div className={styles.description}>{description}</div>
+          </Content>)}
+        <Panel>
+          <Button data-test="confirm-ok-button" primary={!cancelIsDefault} loader={inProgress} disabled={inProgress} onClick={onConfirm}>
+            {confirmLabel}
+          </Button>
+          <Button data-test="confirm-reject-button" onClick={onReject} disabled={inProgress} primary={cancelIsDefault}>
+            {rejectLabel}
+          </Button>
+        </Panel>
+      </Dialog>);
+    }
+}

package/components/confirm-service/confirm-service.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ConfirmAttributes } from '../confirm/confirm';
+import { ControlsHeight } from '../global/controls-height';
+/**
+ * @name Confirm Service
+ */
+export type Props = ConfirmAttributes & {
+    buttonsHeight?: ControlsHeight;
+};
+export declare const reactRoot: import("react-dom/client").Root;
+export interface ConfirmServiceParams {
+    text?: string | undefined;
+    description?: ReactNode;
+    cancelIsDefault?: boolean | undefined;
+    confirmLabel?: string | undefined;
+    rejectLabel?: string | undefined;
+    onBeforeConfirm?: (() => void) | undefined;
+    buttonsHeight?: ControlsHeight | undefined;
+}
+export default function confirm({ text, description, confirmLabel, rejectLabel, cancelIsDefault, onBeforeConfirm, buttonsHeight }: ConfirmServiceParams): Promise<void>;
+export declare function hideConfirm(): void;

package/components/confirm-service/confirm-service.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Confirm from '../confirm/confirm';
+import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
+const containerElement = document.createElement('div');
+export const reactRoot = createRoot(containerElement);
+/**
+ * Renders Confirm into virtual node to skip maintaining container
+ */
+function renderConfirm(props) {
+    const { buttonsHeight = getGlobalControlsHeight(), ...restProps } = props;
+    reactRoot.render(<ControlsHeightContext.Provider value={buttonsHeight}>
+      <Confirm {...restProps}/>
+    </ControlsHeightContext.Provider>);
+}
+export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm, buttonsHeight }) {
+    return new Promise((resolve, reject) => {
+        const props = {
+            text,
+            description,
+            confirmLabel,
+            rejectLabel,
+            cancelIsDefault,
+            buttonsHeight,
+            show: true,
+            onConfirm: () => {
+                if (onBeforeConfirm) {
+                    renderConfirm({ ...props, inProgress: true });
+                    return Promise.resolve(onBeforeConfirm()).
+                        then(() => {
+                        renderConfirm({ ...props, show: false });
+                        resolve();
+                    }).
+                        catch(err => {
+                        renderConfirm({ ...props, show: false });
+                        reject(err);
+                    });
+                }
+                renderConfirm({ ...props, show: false });
+                return resolve();
+            },
+            onReject: () => {
+                renderConfirm({ ...props, show: false });
+                reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
+            }
+        };
+        renderConfirm(props);
+    });
+}
+export function hideConfirm() {
+    renderConfirm({ text: '', show: false });
+}