@jetbrains/ring-ui 5.1.23 → 5.1.25

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,29 @@
+import type { ReactChild, ReactElement, ReactNode } from 'react';
+import { unmountComponentAtNode as legacyUnmountComponentAtNode } from 'react-dom';
+export declare let render: (element: ReactElement, container: Element | DocumentFragment) => void;
+export declare let unmountComponentAtNode: typeof legacyUnmountComponentAtNode;
+export declare let hydrate: (element: ReactElement, container: Element | Document) => void;
+interface Root {
+    render(children: ReactChild | Iterable<ReactNode>): void;
+    unmount(): void;
+}
+interface RootOptions {
+    /**
+     * Prefix for `useId`.
+     */
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+}
+interface HydrationOptions {
+    /**
+     * Prefix for `useId`.
+     */
+    identifierPrefix?: string;
+    onRecoverableError?: (error: unknown) => void;
+}
+interface Client {
+    createRoot(container: Element | DocumentFragment, options?: RootOptions): Root;
+    hydrateRoot(container: Element | Document, initialChildren: ReactChild | Iterable<ReactNode>, options?: HydrationOptions): Root;
+}
+export declare function setClient({ createRoot, hydrateRoot }: Client): void;
+export {};

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

@@ -0,0 +1,24 @@
+/* eslint-disable react/no-deprecated */
+import { render as legacyRender, unmountComponentAtNode as legacyUnmountComponentAtNode, hydrate as legacyHydrate } from 'react-dom';
+/* eslint-enable */
+/* eslint-disable import/no-mutable-exports */
+export let render = legacyRender;
+export let unmountComponentAtNode = legacyUnmountComponentAtNode;
+export let hydrate = legacyHydrate;
+// TODO replace with a noop with warning in 6.0, remove in 7.0
+export function setClient({ createRoot, hydrateRoot }) {
+    const roots = new WeakMap();
+    render = (element, container) => {
+        let root = roots.get(container);
+        if (root == null) {
+            root = createRoot(container);
+            roots.set(container, root);
+        }
+        root.render(element);
+    };
+    unmountComponentAtNode = container => roots.get(container)?.unmount();
+    hydrate = (element, container) => {
+        const root = hydrateRoot(container, element);
+        roots.set(container, root);
+    };
+}

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

@@ -0,0 +1,41 @@
+import { Component, RefAttributes } 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>;
+}
+/**
+ * Wraps a component to add a "rerender" method
+ * @param ComposedComponent
+ * @param captureNode, whether the wrapper should capture this.node itself. Set to false if the component already has "node" property captured
+ * @returns {Rerenderer}
+ */
+export default function rerenderHOC<P extends {}, S>(ComposedComponent: RerenderableComponentClass<P, S>): {
+    new (props: P): {
+        _propsCache: P & RefAttributes<unknown>;
+        rerender(props?: Partial<P>, callback?: () => void): void;
+        node?: HTMLElement | null | undefined;
+        context: unknown;
+        setState<K extends keyof S>(state: S | ((prevState: Readonly<S>, props: Readonly<P>) => S | Pick<S, K> | null) | Pick<S, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        render(): import("react").ReactNode;
+        readonly props: Readonly<P>;
+        state: Readonly<S>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>): any;
+        componentDidUpdate?(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
+    };
+};

package/components/global/rerender-hoc.js

@@ -0,0 +1,28 @@
+import { createElement } from 'react';
+import { render } from './react-render-adapter';
+import composeRefs from './composeRefs';
+/**
+ * Wraps a component to add a "rerender" method
+ * @param ComposedComponent
+ * @param captureNode, whether the wrapper should capture this.node itself. Set to false if the component already has "node" property captured
+ * @returns {Rerenderer}
+ */
+export default function rerenderHOC(ComposedComponent) {
+    return class Rerenderer extends ComposedComponent {
+        _propsCache = this.props;
+        rerender(props = {}, callback) {
+            let container;
+            try {
+                container = this.node?.parentNode;
+            }
+            finally {
+                if (!container || !(container instanceof Element)) {
+                    throw new Error(`${this.constructor.name} component isn't mounted`);
+                }
+            }
+            this._propsCache = Object.assign({}, this.props, this._propsCache, props);
+            this._propsCache.ref = composeRefs(this._propsCache.ref, callback);
+            render(createElement(this.constructor, this._propsCache), container);
+        }
+    };
+}

package/components/global/ring-angular-component.js

@@ -0,0 +1,13 @@
+export default class RingAngularComponent {
+  static get controller() {
+    return this;
+  }
+
+  $inject = {};
+
+  constructor(...args) {
+    (this.constructor.$inject ?? []).forEach((injectName, i) => {
+      this.$inject[injectName] = args[i];
+    });
+  }
+}

package/components/global/ring-angular-component.test.js

@@ -0,0 +1,32 @@
+/* global inject: false */
+import angular from 'angular';
+import 'angular-mocks';
+
+import RingAngularComponent from './ring-angular-component';
+
+class TestComponent extends RingAngularComponent {
+
+}
+TestComponent.$inject = ['$scope'];
+
+const testModule = angular.module('Test', []).component('testComponent', TestComponent).name;
+
+describe('RingAngularComponent', () => {
+  let $componentController;
+
+  beforeEach(window.module(testModule));
+
+  beforeEach(inject(_$componentController_ => {
+    $componentController = _$componentController_;
+  }));
+
+  it('should return a controller as a static property', () => {
+    const ctrl = $componentController('testComponent');
+    ctrl.should.not.be.undefined;
+  });
+
+  it('should copy dependencies to class instances', () => {
+    const ctrl = $componentController('testComponent');
+    ctrl.should.have.nested.property('$inject.$scope');
+  });
+});

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;

package/components/global/url.js

@@ -0,0 +1,136 @@
+/**
+ * @description Provides a set of utilities for URL manipulation.
+ */
+/**
+ * @const {RegExp}
+ */
+const ORIGIN_PATTERN = /^[a-z]+:\/\/[^/]+/i;
+/**
+ * @const {RegExp}
+ */
+const ABSOLUTE_URL_PATTERN = /^[a-z]+:\/\//i;
+/**
+ * @const {RegExp}
+ */
+export const ENDING_SLASH_PATTERN = /\/$/;
+/**
+ * Get URI from the <base> tag
+ * @return {string|undefined} base URI
+ */
+export function getBaseURI() {
+    const baseElement = document.getElementsByTagName('base')[0];
+    return baseElement ? baseElement.href : undefined;
+}
+/**
+ * Get absolute URI from the <base> tag
+ * @return {string} absolute base URI
+ */
+export function getAbsoluteBaseURL() {
+    const baseUrl = getBaseURI();
+    const host = `${window.location.protocol}//${window.location.host}`;
+    let uri;
+    if (baseUrl) {
+        uri = ABSOLUTE_URL_PATTERN.test(baseUrl) ? baseUrl : host + baseUrl;
+    }
+    else {
+        uri = host;
+    }
+    return uri;
+}
+/**
+ * Get origin from the URL
+ * @param {string} url URL to extract origin from
+ * @returns {string|undefined} origin
+ */
+export function getOrigin(url) {
+    const matches = url.match(ORIGIN_PATTERN);
+    if (matches) {
+        return matches[0];
+    }
+    return undefined;
+}
+/**
+ * Get absolute URI from current page
+ * @return {string} absolute URL of current page
+ */
+export function getAbsoluteURL() {
+    return window.location.href.split('#')[0];
+}
+/**
+ * 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 function fixUrl(url, baseURIGetter = getBaseURI) {
+    if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1 && url.indexOf('/') !== 0) {
+        const baseUrl = baseURIGetter();
+        if (baseUrl) {
+            return baseUrl + url;
+        }
+    }
+    return url;
+}
+export function joinBaseURLAndPath(baseUrl, path) {
+    if (!baseUrl || path.indexOf('http://') !== -1 || path.indexOf('https://') !== -1) {
+        return path;
+    }
+    return baseUrl + path;
+}
+/**
+ * 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 function parseQueryString(queryString) {
+    if (queryString == null) {
+        return {};
+    }
+    const queryParameterPairRE = /([^&;=]+)=?([^&;]*)/g;
+    const FIRST_PAIR_ELEMENT = 1;
+    const SECOND_PAIR_ELEMENT = 2;
+    const urlParams = {};
+    function decode(s) {
+        return decodeURIComponent(s.replace(/\+/g, ' '));
+    }
+    let matchedQueryPair;
+    while ((matchedQueryPair = queryParameterPairRE.exec(queryString)) != null) {
+        urlParams[decode(matchedQueryPair[FIRST_PAIR_ELEMENT])] =
+            decode(matchedQueryPair[SECOND_PAIR_ELEMENT]);
+    }
+    return urlParams;
+}
+function customEncodeURIComponent(str) {
+    const commaRE = /%2C/g;
+    return encodeURIComponent(String(str)).replace(commaRE, ',');
+}
+/**
+ * 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 function encodeURL(url, params) {
+    const equalsSign = '=';
+    const firstSeparator = (url.indexOf('?') === -1) ? '?' : '&';
+    let res = url;
+    let k;
+    let i = 0;
+    for (k in params) {
+        if (params.hasOwnProperty(k) && params[k] != null) {
+            res += (i++ === 0 ? firstSeparator : '&') +
+                customEncodeURIComponent(k) + equalsSign + customEncodeURIComponent(params[k]);
+        }
+    }
+    return res;
+}
+export function isDataURI(uri) {
+    return uri.indexOf('data:') === 0;
+}

package/components/global/use-event-callback.d.ts

@@ -0,0 +1 @@
+export default function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/components/global/use-event-callback.js

@@ -0,0 +1,14 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+export default function useEventCallback(fn) {
+    const ref = useRef();
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return useCallback((...args) => {
+        const { current } = ref;
+        if (current == null) {
+            throw new Error('callback created in useEventCallback can only be called from event handlers');
+        }
+        return current(...args);
+    }, []);
+}