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

package/components/global/global.css

@@ -0,0 +1,101 @@
+/* https://readymag.com/artemtiunov/RingUILanguage/colours/ */
+
+.clearfix {
+  &::after {
+    display: block;
+    clear: both;
+
+    content: "";
+  }
+}
+
+.font {
+  font-family: var(--ring-font-family);
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.font-lower {
+  composes: font;
+
+  line-height: var(--ring-line-height-lower);
+}
+
+.font-smaller {
+  composes: font-lower;
+
+  font-size: var(--ring-font-size-smaller);
+}
+
+.font-smaller-lower {
+  composes: font-smaller;
+
+  line-height: var(--ring-line-height-lowest);
+}
+
+.font-larger-lower {
+  composes: font-lower;
+
+  font-size: var(--ring-font-size-larger);
+}
+
+.font-larger {
+  composes: font-larger-lower;
+
+  line-height: var(--ring-line-height-taller);
+}
+
+/* To be used at large sizes */
+/* As close as possible to Helvetica Neue Thin (to replace Gotham) */
+.thin-font {
+  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: var(--ring-font-size);
+  font-weight: 100; /* Renders Helvetica Neue UltraLight on OS X  */
+}
+
+.monospace-font {
+  font-family: var(--ring-font-family-monospace);
+  font-size: var(--ring-font-size-smaller);
+}
+
+.ellipsis {
+  overflow: hidden;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.resetButton {
+  overflow: visible;
+
+  padding: 0;
+
+  text-align: left;
+
+  color: inherit;
+  border: 0;
+
+  background-color: transparent;
+
+  font: inherit;
+
+  &::-moz-focus-inner {
+    padding: 0;
+
+    border: 0;
+  }
+}
+
+/* Note: footer also has top margin which isn't taken into account here */
+@value footer-height: calc(var(--ring-unit) * 8);
+
+/* Media breakpoints (minimal values) */
+@value breakpoint-small: 640px;
+@value breakpoint-middle: 960px;
+@value breakpoint-large: 1200px;
+
+/* Media queries */
+@value extra-small-screen-media: (max-width: calc(breakpoint-small - 1px));
+@value small-screen-media: (min-width: breakpoint-small) and (max-width: calc(breakpoint-middle - 1px));
+@value middle-screen-media: (min-width: breakpoint-middle) and (max-width: calc(breakpoint-large - 1px));
+@value large-screen-media: (min-width: breakpoint-large);

package/components/global/inject-styles.d.ts

@@ -0,0 +1,3 @@
+import type { PropertiesHyphen } from 'csstype';
+export declare const injectStyleSheet: (styles: string) => HTMLStyleElement;
+export declare const injectRuleSet: (selector: string, declarations: PropertiesHyphen) => HTMLStyleElement;

package/components/global/inject-styles.js

@@ -0,0 +1,12 @@
+export const injectStyleSheet = (styles) => {
+    const styleTag = document.createElement('style');
+    styleTag.setAttribute('type', 'text/css');
+    styleTag.textContent = styles;
+    document.head.appendChild(styleTag);
+    return styleTag;
+};
+export const injectRuleSet = (selector, declarations) => injectStyleSheet(`
+${selector} {
+  ${Object.entries(declarations).map(([property, value]) => `${property}: ${value};`).join(`
+  `)}
+}`);

package/components/global/linear-function.d.ts

@@ -0,0 +1,6 @@
+export interface LinearFunction {
+    y(x: number): number;
+    x(y: number): number;
+}
+export default function linearFunction(x0: number, y0: number, a: number): LinearFunction;
+export declare function interpolateLinear(x0: number, x1: number, phase: number): number;

package/components/global/linear-function.js

@@ -0,0 +1,13 @@
+export default function linearFunction(x0, y0, a) {
+    return {
+        y(x) {
+            return +y0 + (x - x0) * a;
+        },
+        x(y) {
+            return +x0 + (y - y0) / a;
+        }
+    };
+}
+export function interpolateLinear(x0, x1, phase) {
+    return linearFunction(x0, x0, phase).y(x1);
+}

package/components/global/listeners.d.ts

@@ -0,0 +1,8 @@
+export type Handler<PM extends Record<string, [unknown, unknown]>, E extends keyof PM> = (data: PM[E][0]) => PM[E][1] | Promise<PM[E][1]>;
+export default class Listeners<PM extends Record<string, [unknown, unknown]> = Record<string, [void, unknown]>> {
+    _all: Map<keyof PM, Set<Handler<PM, keyof PM>>>;
+    trigger<E extends keyof PM>(...[event, data]: PM[E][0] extends void ? [E] : [E, PM[E][0]]): Promise<PM[E][1][]>;
+    add<E extends keyof PM>(event: E, handler: Handler<PM, E>): void;
+    remove<E extends keyof PM>(event: E, handler: Handler<PM, E>): void;
+    removeAll(): void;
+}

package/components/global/listeners.js

@@ -0,0 +1,27 @@
+export default class Listeners {
+    _all = new Map();
+    trigger(...[event, data]) {
+        const handlers = this._all.get(event);
+        if (handlers) {
+            return Promise.all([...handlers].map(fn => fn(data)));
+        }
+        return Promise.resolve([]);
+    }
+    add(event, handler) {
+        let handlers = this._all.get(event);
+        if (!handlers) {
+            handlers = new Set();
+            this._all.set(event, handlers);
+        }
+        handlers.add(handler);
+    }
+    remove(event, handler) {
+        const handlers = this._all.get(event);
+        if (handlers) {
+            handlers.delete(handler);
+        }
+    }
+    removeAll() {
+        this._all = new Map();
+    }
+}

package/components/global/memoize.d.ts

@@ -0,0 +1 @@
+export default function memoize<A = void, T = void>(fn: (arg: A) => T): (arg: A) => T;

package/components/global/memoize.js

@@ -0,0 +1,15 @@
+export default function memoize(fn) {
+    const primitiveCache = new Map();
+    const objectCache = new WeakMap();
+    return function memoized(arg) {
+        const key = arg ?? '__singleValue__';
+        const cache = key instanceof Object ? objectCache : primitiveCache;
+        const cached = cache.get(key);
+        if (cached != null) {
+            return cached;
+        }
+        const value = fn(arg);
+        cache.set(key, value);
+        return value;
+    };
+}

package/components/global/normalize-indent.d.ts

@@ -0,0 +1 @@
+export default function normalizeIndent(string: string): string;

package/components/global/normalize-indent.js

@@ -0,0 +1,30 @@
+export default function normalizeIndent(string) {
+    const nonemptyRE = /\S/;
+    const indentRE = /^\s*/;
+    const lines = string.split(/\n/g);
+    const linesCopy = [...lines];
+    //remove empty lines at the beginning and the end
+    for (const line of linesCopy) {
+        if (nonemptyRE.test(line)) {
+            break;
+        }
+        else {
+            lines.shift();
+        }
+    }
+    for (const line of linesCopy.reverse()) {
+        if (nonemptyRE.test(line)) {
+            break;
+        }
+        else {
+            lines.pop();
+        }
+    }
+    const indents = lines.
+        filter(line => nonemptyRE.test(line)).
+        map(line => line.match(indentRE)?.[0].length ?? 0);
+    const minIndent = Math.min(...indents);
+    return lines.
+        map(line => line.slice(minIndent)).
+        join('\n');
+}

package/components/global/promise-with-timeout.d.ts

@@ -0,0 +1,5 @@
+export interface PromiseWithTimeoutConfig {
+    error?: Error | null | undefined;
+    onTimeout?: () => void | undefined;
+}
+export default function promiseWithTimeout<T>(promise: Promise<T>, timeout: number, { error, onTimeout }: PromiseWithTimeoutConfig): Promise<unknown>;

package/components/global/promise-with-timeout.js

@@ -0,0 +1,11 @@
+// Useful for using fetch with timeout
+// https://github.com/github/fetch/issues/175#issuecomment-284787564
+export default function promiseWithTimeout(promise, timeout, { error, onTimeout = () => { } }) {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            onTimeout();
+            reject(error || new Error('Timeout'));
+        }, timeout);
+        promise.then(resolve, reject);
+    });
+}

package/components/global/prop-types.d.ts

@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+export declare const refObject: <T>(value: PropTypes.Validator<T>) => PropTypes.Requireable<PropTypes.InferProps<{
+    current: PropTypes.Validator<T>;
+}>>;

package/components/global/prop-types.js

@@ -0,0 +1,4 @@
+import PropTypes from 'prop-types';
+export const refObject = (value) => PropTypes.shape({
+    current: value
+});

package/components/global/react-dom-renderer.d.ts

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+export interface RendererProps {
+    className?: string | undefined;
+    nodes: readonly Node[] | NodeList;
+}
+export default class Renderer extends Component<RendererProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        nodes: PropTypes.Requireable<object>;
+    };
+    componentDidMount(): void;
+    node?: HTMLElement | null;
+    nodeRef: (node: HTMLElement | null) => void;
+    render(): React.JSX.Element;
+}

package/components/global/react-dom-renderer.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+export default class Renderer extends Component {
+    static propTypes = {
+        className: PropTypes.string,
+        nodes: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+    };
+    componentDidMount() {
+        const { node } = this;
+        const { nodes } = this.props;
+        if (!node || !nodes || !nodes.length) {
+            return;
+        }
+        Array.from(this.props.nodes).
+            forEach(nodeToRender => node.appendChild(nodeToRender));
+    }
+    node;
+    nodeRef = (node) => {
+        this.node = node;
+    };
+    render() {
+        const { className } = this.props;
+        return (<div className={className} ref={this.nodeRef}/>);
+    }
+}

package/components/global/react-render-adapter.d.ts

@@ -0,0 +1 @@
+export declare const setClient: () => void;

package/components/global/react-render-adapter.js

@@ -0,0 +1,3 @@
+import deprecate from 'util-deprecate';
+// TODO remove in 7.0
+export const setClient = deprecate(() => { }, 'setClient does nothing in Ring UI 6.0 and will be removed in 7.0');

package/components/global/rerender-hoc.d.ts

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+export interface RerenderableComponent<P, S> extends Component<P, S> {
+    node?: HTMLElement | null;
+}
+export interface RerenderableComponentClass<P, S> {
+    new (props: P): RerenderableComponent<P, S>;
+}
+export default function rerenderHOC<P extends {}, C extends Component<P, unknown>>(ComposedComponent: {
+    new (props: P): C;
+}): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<C>>;

package/components/global/rerender-hoc.js

@@ -0,0 +1,14 @@
+import React, { Component, forwardRef } from 'react';
+import composeRefs from './composeRefs';
+export default function rerenderHOC(ComposedComponent) {
+    class Rerenderer extends Component {
+        state = this.props.props;
+        render() {
+            const ref = composeRefs(this.props.forwardedRef);
+            return (<ComposedComponent {...this.state} ref={instance => ref(instance != null ? { ...instance, rerender: this.setState.bind(this) } : null)}/>);
+        }
+    }
+    return forwardRef(function RerendererForwardRef(props, ref) {
+        return <Rerenderer props={props} forwardedRef={ref}/>;
+    });
+}

package/components/global/schedule-raf.d.ts

@@ -0,0 +1 @@
+export default function scheduleRAF(trailingCall?: boolean): (cb: () => void) => void;

package/components/global/schedule-raf.js

@@ -0,0 +1,27 @@
+export default function scheduleRAF(trailingCall) {
+    let scheduledCb;
+    let RAF;
+    let trailingCallScheduled = false;
+    function doSchedule() {
+        RAF = window.requestAnimationFrame(() => {
+            scheduledCb?.();
+            if (trailingCallScheduled) {
+                trailingCallScheduled = false;
+                doSchedule();
+            }
+            else {
+                RAF = null;
+                scheduledCb = null;
+            }
+        });
+    }
+    return function schedule(cb) {
+        scheduledCb = cb;
+        if (!RAF) {
+            doSchedule();
+        }
+        else if (trailingCall) {
+            trailingCallScheduled = true;
+        }
+    };
+}

package/components/global/sniffer.d.ts

@@ -0,0 +1,3 @@
+import Sniffr from 'sniffr';
+declare const sniffr: Sniffr;
+export default sniffr;

package/components/global/sniffer.js

@@ -0,0 +1,4 @@
+import Sniffr from 'sniffr';
+const sniffr = new Sniffr();
+sniffr.sniff();
+export default sniffr;

package/components/global/theme.d.ts

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, ReactElement } from 'react';
+declare enum Theme {
+    AUTO = "auto",
+    LIGHT = "light",
+    DARK = "dark"
+}
+export declare function useTheme(): Theme.LIGHT | Theme.DARK;
+export declare function useThemeClasses(theme: Theme): string;
+export interface WithThemeClassesProps {
+    theme: Theme;
+    children: (classes: string) => ReactElement;
+}
+export declare function WithThemeClasses({ theme, children }: WithThemeClassesProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
+export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: Theme;
+    passToPopups?: boolean;
+    target?: HTMLElement;
+}
+export declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
+export default Theme;

package/components/global/theme.js

@@ -0,0 +1,70 @@
+import React, { useMemo, useState, useEffect, forwardRef, useContext } from 'react';
+import classNames from 'classnames';
+import { createPortal } from 'react-dom';
+import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
+import { getPopupContainer } from '../popup/popup';
+import defaultStyles from './variables.css';
+import styles from './variables_dark.css';
+import getUID from './get-uid';
+var Theme;
+(function (Theme) {
+    Theme["AUTO"] = "auto";
+    Theme["LIGHT"] = "light";
+    Theme["DARK"] = "dark";
+})(Theme || (Theme = {}));
+const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+export function useTheme() {
+    const [dark, setDark] = useState(darkMatcher.matches);
+    useEffect(() => {
+        const onChange = (e) => setDark(e.matches);
+        darkMatcher.addEventListener('change', onChange);
+        return () => darkMatcher.removeEventListener('change', onChange);
+    }, []);
+    return dark ? Theme.DARK : Theme.LIGHT;
+}
+export function useThemeClasses(theme) {
+    const systemTheme = useTheme();
+    const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+    return classNames({
+        [styles.dark]: resolvedTheme === Theme.DARK,
+        [defaultStyles.light]: resolvedTheme === Theme.LIGHT
+    });
+}
+export function WithThemeClasses({ theme, children }) {
+    const themeClasses = useThemeClasses(theme);
+    return children(themeClasses);
+}
+export function applyTheme(theme, container) {
+    if (theme === Theme.DARK) {
+        container.classList.remove(defaultStyles.light);
+        container.classList.add(styles.dark);
+        container.classList.add('ring-ui-theme-dark');
+    }
+    else {
+        container.classList.remove(styles.dark);
+        container.classList.remove('ring-ui-theme-dark');
+        container.classList.add(defaultStyles.light);
+    }
+}
+export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, target, ...restProps }, ref) {
+    const systemTheme = useTheme();
+    const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+    const id = useMemo(() => getUID('popups-with-theme-'), []);
+    useEffect(() => {
+        if (target != null) {
+            applyTheme(resolvedTheme, target);
+        }
+    }, [resolvedTheme, target]);
+    const themeClasses = useThemeClasses(theme);
+    const parentTarget = useContext(PopupTargetContext);
+    return (<div ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
+            ? (<PopupTarget id={id}>
+              {popupTarget => (<>
+                  {children}
+                  {createPortal(<div className={themeClasses}>{popupTarget}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
+                </>)}
+            </PopupTarget>)
+            : children}
+    </div>);
+});
+export default Theme;

package/components/global/trivial-template-tag.d.ts

@@ -0,0 +1 @@
+export default function trivialTemplateTag(f: (string: string) => void): (strings: TemplateStringsArray, ...interpolations: unknown[]) => void;

package/components/global/trivial-template-tag.js

@@ -0,0 +1,9 @@
+const TWO = 2;
+export default function trivialTemplateTag(f) {
+    return (strings, ...interpolations) => {
+        const chunks = [...strings];
+        // insert the interpolations where they belong to
+        interpolations.forEach((value, i) => chunks.splice(TWO * i + 1, 0, value));
+        return f(chunks.join(''));
+    };
+}

package/components/global/typescript-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isArray: (arg: unknown) => arg is readonly unknown[];
+export declare const isTruthy: <T>(arg: false | "" | 0 | T | null | undefined) => arg is T;

package/components/global/typescript-utils.js

@@ -0,0 +1,2 @@
+export const isArray = (arg) => Array.isArray(arg);
+export const isTruthy = (arg) => Boolean(arg);

package/components/global/url.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @description Provides a set of utilities for URL manipulation.
+ */
+/**
+ * @const {RegExp}
+ */
+export declare const ENDING_SLASH_PATTERN: RegExp;
+/**
+ * Get URI from the <base> tag
+ * @return {string|undefined} base URI
+ */
+export declare function getBaseURI(): string | undefined;
+/**
+ * Get absolute URI from the <base> tag
+ * @return {string} absolute base URI
+ */
+export declare function getAbsoluteBaseURL(): string;
+/**
+ * Get origin from the URL
+ * @param {string} url URL to extract origin from
+ * @returns {string|undefined} origin
+ */
+export declare function getOrigin(url: string): string | undefined;
+/**
+ * Get absolute URI from current page
+ * @return {string} absolute URL of current page
+ */
+export declare function getAbsoluteURL(): string;
+/**
+ * Fixes the URL
+ * If the URL is relative and the page contains a <base> TAG, the URL will be converted to absolute
+ * <base href="/">: some/path => /some/path
+ * @param {string} url URL to fix
+ * @param {Function} baseURIGetter a function that returns base URI
+ * @return {string} fixed URL
+ */
+export declare function fixUrl(url: string, baseURIGetter?: typeof getBaseURI): string;
+export declare function joinBaseURLAndPath(baseUrl: string | null | undefined, path: string): string;
+/**
+ * Parses a queryString into an object.
+ * ```
+ * parseQueryString("access_token=2YotnFZFEjr1zCsicMWpAA&state=xyz&token_type=example&expires_in=3600");
+ * // is {access_token: "2YotnFZFEjr1zCsicMWpAA", state: "xyz", token_type: "example", expires_in: "3600"}
+ * ```
+ * @param {string} queryString query parameter string to parse
+ * @return {AuthResponse} object with query parameters map
+ */
+export declare function parseQueryString(queryString: string | null | undefined): Record<string, string>;
+/**
+ * Takes a URL as input and a params object.
+ * Each property in the params is added to the URL as query string parameters
+ * @param {string} url URL to add parameters to
+ * @param {Object} params parameters to add
+ * @returns {string} encoded URL
+ */
+export declare function encodeURL(url: string, params: Record<string, unknown>): string;
+export declare function isDataURI(uri: string): boolean;