@jetbrains/ring-ui 4.1.5 → 5.0.0-beta.2

package/components/global/rerender-hoc.js

@@ -1,35 +1,26 @@
-import {createElement} from 'react';
-import {render} from 'react-dom';
-
+import { createElement } from 'react';
+import { render } from 'react-dom';
 /**
  * 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, {captureNode} = {captureNode: false}) {
-  if (captureNode) {
-    // TODO remove in 5.0
-    throw new Error('rerenderHOC: captureNode={true} is deprecated. Wrapped component must have "node" property captured itself');
-  }
-
-  return class Rerenderer extends ComposedComponent {
-    _propsCache = {};
-
-    rerender(props = {}, callback) {
-      let container;
-
-      try {
-        container = this.node.parentNode;
-      } finally {
-        if (!container) {
-          throw new Error(`${this.constructor.name} component isn't mounted`);
+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);
+            return render(createElement(this.constructor, this._propsCache), container, callback);
         }
-      }
-
-      this._propsCache = Object.assign({}, this.props, this._propsCache, props);
-
-      return render(createElement(this.constructor, this._propsCache), container, callback);
-    }
-  };
+    };
 }

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

@@ -1,27 +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;
+    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

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

package/components/global/supports-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (arg: string) => boolean;
+export default _default;

package/components/global/supports-css.js

@@ -1,17 +1,14 @@
 import memoize from './memoize';
-
-export default memoize(declaration => {
-  const [property, value] = declaration.split(': ');
-  const camelCaseProperty = property.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
-  const div = document.createElement('div');
-  if (div.style[camelCaseProperty] === undefined) {
-    return false;
-  }
-
-  if (value) {
-    div.style[camelCaseProperty] = value;
-    return Boolean(div.style[camelCaseProperty]);
-  }
-
-  return true;
+export default memoize((declaration) => {
+    const [property, value] = declaration.split(': ');
+    const camelCaseProperty = property.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
+    const div = document.createElement('div');
+    if (div.style[camelCaseProperty] === undefined) {
+        return false;
+    }
+    if (value) {
+        div.style[camelCaseProperty] = value;
+        return Boolean(div.style[camelCaseProperty]);
+    }
+    return true;
 });

package/components/global/theme.d.ts

@@ -0,0 +1,26 @@
+import React, { RefAttributes, ExoticComponent, PropsWithoutRef, FunctionComponent } from 'react';
+declare enum Theme {
+    LIGHT = "light",
+    DARK = "dark"
+}
+export declare const ThemeContext: React.Context<Theme | null>;
+export interface ThemeOuterProps {
+    theme?: Theme | null | undefined;
+}
+export interface ThemeProps {
+    theme: Theme;
+}
+declare type ClassComponentType<T, P> = T extends React.Component<P> ? new (props: P) => T : never;
+declare type ExoticComponentType<T, P> = ExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+declare type AnyComponentType<T, P> = ClassComponentType<T, P> | FunctionComponent<P> | ExoticComponentType<T, P>;
+export declare const withTheme: (defaultTheme?: Theme) => <T, P extends ThemeProps, S>(ComposedComponent: AnyComponentType<T, P> & S) => React.NamedExoticComponent<React.PropsWithRef<React.PropsWithoutRef<Omit<JSX.LibraryManagedAttributes<ClassComponentType<T, P> & S, P> | JSX.LibraryManagedAttributes<React.FunctionComponent<P> & S, P> | JSX.LibraryManagedAttributes<ExoticComponentType<T, P> & S, P>, "theme"> & ThemeOuterProps> & React.RefAttributes<T>>> & {
+    readonly type: React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<JSX.LibraryManagedAttributes<ClassComponentType<T, P> & S, P> | JSX.LibraryManagedAttributes<React.FunctionComponent<P> & S, P> | JSX.LibraryManagedAttributes<ExoticComponentType<T, P> & S, P>, "theme"> & ThemeOuterProps> & React.RefAttributes<T>>;
+} & { [K in keyof S]: S[K]; };
+export interface ApplyThemeParams {
+    element?: Element | null | undefined;
+    prevTheme?: string | null | undefined;
+    currentTheme?: string | null | undefined;
+}
+declare function applyTheme(params: ApplyThemeParams): void;
+export { applyTheme };
+export default Theme;

package/components/global/theme.jsx

@@ -0,0 +1,39 @@
+import React, { createContext, forwardRef, memo } from 'react';
+var Theme;
+(function (Theme) {
+    Theme["LIGHT"] = "light";
+    Theme["DARK"] = "dark";
+})(Theme || (Theme = {}));
+export const ThemeContext = createContext(null);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getDisplayName = (Component) => Component.name ?? Component.displayName ?? 'Component';
+export const withTheme = (defaultTheme = Theme.LIGHT) => (ComposedComponent) => {
+    // eslint-disable-next-line react/display-name
+    const WithTheme = memo(forwardRef(({ theme, ...restProps }, ref) => (<ThemeContext.Consumer>
+          {contextTheme => {
+            const usedTheme = theme || contextTheme || defaultTheme;
+            const Component = ComposedComponent;
+            return (<ThemeContext.Provider value={usedTheme}>
+                <Component ref={ref} 
+            // https://github.com/Microsoft/TypeScript/issues/28938#issuecomment-450636046
+            {...restProps} theme={usedTheme}/>
+              </ThemeContext.Provider>);
+        }}
+        </ThemeContext.Consumer>)));
+    const WithThemeAndStatics = Object.assign(WithTheme, ComposedComponent, {
+        displayName: `withTheme(${getDisplayName(ComposedComponent)})`,
+        propTypes: null
+    });
+    return WithThemeAndStatics;
+};
+function applyTheme(params) {
+    if (!params || !params.element || !params.currentTheme) {
+        return;
+    }
+    if (params.prevTheme) {
+        params.element.classList.remove(params.prevTheme);
+    }
+    params.element.classList.add(params.currentTheme);
+}
+export { applyTheme };
+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

@@ -1,11 +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(''));
-  };
+    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

@@ -1,72 +1,61 @@
 /**
  * @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;
+    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;
+    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;
+    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];
+    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
@@ -76,25 +65,20 @@ export function getAbsoluteURL() {
  * @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;
+    if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1 && url.indexOf('/') !== 0) {
+        const baseUrl = baseURIGetter();
+        if (baseUrl) {
+            return baseUrl + url;
+        }
     }
-  }
-
-  return url;
+    return url;
 }
-
 export function joinBaseURLAndPath(baseUrl, path) {
-  if (!baseUrl || path.indexOf('http://') !== -1 || path.indexOf('https://') !== -1) {
-    return path;
-  }
-
-  return baseUrl + path;
+    if (!baseUrl || path.indexOf('http://') !== -1 || path.indexOf('https://') !== -1) {
+        return path;
+    }
+    return baseUrl + path;
 }
-
 /**
  * Parses a queryString into an object.
  * ```
@@ -105,33 +89,27 @@ export function joinBaseURLAndPath(baseUrl, path) {
  * @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;
+    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(str).replace(commaRE, ',');
+    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
@@ -140,23 +118,19 @@ function customEncodeURIComponent(str) {
  * @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]);
+    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;
+    return res;
 }
-
 export function isDataURI(uri) {
-  return uri.indexOf('data:') === 0;
+    return uri.indexOf('data:') === 0;
 }

package/components/global/variables.d.ts

@@ -0,0 +1,88 @@
+import type { Property } from 'csstype';
+export interface RingCSSProperties {
+    '--ring-unit'?: string;
+    '--ring-line-color'?: Property.BorderColor;
+    '--ring-dark-line-color'?: Property.BorderColor;
+    '--ring-borders-color'?: Property.BorderColor;
+    '--ring-dark-borders-color'?: Property.BorderColor;
+    '--ring-icon-color'?: Property.Color;
+    '--ring-icon-secondary-color'?: Property.Color;
+    '--ring-border-disabled-color'?: Property.BorderColor;
+    '--ring-icon-disabled-color'?: Property.Color;
+    '--ring-border-hover-color'?: Property.BorderColor;
+    '--ring-dark-border-hover-color'?: Property.BorderColor;
+    '--ring-icon-hover-color'?: Property.Color;
+    '--ring-main-color'?: Property.Color;
+    '--ring-main-hover-color'?: Property.Color;
+    '--ring-icon-error-color'?: Property.Color;
+    '--ring-icon-warning-color'?: Property.Color;
+    '--ring-icon-success-color'?: Property.Color;
+    '--ring-pale-control-color'?: Property.Color;
+    '--ring-popup-border-components'?: string;
+    '--ring-popup-border-color'?: Property.BorderColor;
+    '--ring-popup-shadow-color'?: Property.Color;
+    '--ring-message-shadow-color'?: Property.Color;
+    '--ring-pinned-shadow-color'?: Property.Color;
+    '--ring-search-color'?: Property.Color;
+    '--ring-hint-color'?: Property.Color;
+    '--ring-link-color'?: Property.Color;
+    '--ring-link-hover-color'?: Property.Color;
+    '--ring-error-color'?: Property.Color;
+    '--ring-warning-color'?: Property.Color;
+    '--ring-success-color'?: Property.Color;
+    '--ring-text-color'?: Property.Color;
+    '--ring-dark-text-color'?: Property.Color;
+    '--ring-heading-color'?: Property.Color;
+    '--ring-secondary-color'?: Property.Color;
+    '--ring-dark-secondary-color'?: Property.Color;
+    '--ring-disabled-color'?: Property.Color;
+    '--ring-dark-disabled-color'?: Property.Color;
+    '--ring-dark-active-color'?: Property.Color;
+    '--ring-content-background-color'?: Property.BackgroundColor;
+    '--ring-popup-background-color'?: Property.BackgroundColor;
+    '--ring-sidebar-background-color'?: Property.BackgroundColor;
+    '--ring-selected-background-color'?: Property.BackgroundColor;
+    '--ring-hover-background-color'?: Property.BackgroundColor;
+    '--ring-dark-selected-background-color'?: Property.BackgroundColor;
+    '--ring-message-background-color'?: Property.BackgroundColor;
+    '--ring-navigation-background-color'?: Property.BackgroundColor;
+    '--ring-tag-background-color'?: Property.BackgroundColor;
+    '--ring-removed-background-color'?: Property.BackgroundColor;
+    '--ring-warning-background-color'?: Property.BackgroundColor;
+    '--ring-added-background-color'?: Property.BackgroundColor;
+    '--ring-code-background-color'?: Property.BackgroundColor;
+    '--ring-code-color'?: Property.Color;
+    '--ring-code-comment-color'?: Property.Color;
+    '--ring-code-meta-color'?: Property.Color;
+    '--ring-code-keyword-color'?: Property.Color;
+    '--ring-code-tag-background-color'?: Property.BackgroundColor;
+    '--ring-code-tag-color'?: Property.Color;
+    '--ring-code-tag-font-weight'?: Property.FontWeight;
+    '--ring-code-field-color'?: Property.Color;
+    '--ring-code-attribute-color'?: Property.Color;
+    '--ring-code-number-color'?: Property.Color;
+    '--ring-code-string-color'?: Property.Color;
+    '--ring-code-addition-color'?: Property.Color;
+    '--ring-code-deletion-color'?: Property.Color;
+    '--ring-border-radius'?: Property.BorderRadius;
+    '--ring-border-radius-small'?: Property.BorderRadius;
+    '--ring-font-size-larger'?: Property.FontSize;
+    '--ring-font-size'?: Property.FontSize;
+    '--ring-font-size-smaller'?: Property.FontSize;
+    '--ring-line-height-taller'?: Property.LineHeight;
+    '--ring-line-height'?: Property.LineHeight;
+    '--ring-line-height-lower'?: Property.LineHeight;
+    '--ring-line-height-lowest'?: Property.LineHeight;
+    '--ring-ease'?: string;
+    '--ring-fast-ease'?: string;
+    '--ring-font-family'?: Property.FontFamily;
+    '--ring-font-family-monospace'?: Property.FontFamily;
+    '--ring-invisible-element-z-index'?: Property.ZIndex;
+    '--ring-fixed-z-index'?: Property.ZIndex;
+    '--ring-overlay-z-index'?: Property.ZIndex;
+    '--ring-alert-z-index'?: Property.ZIndex;
+}
+declare module 'csstype' {
+    interface Properties extends RingCSSProperties {
+    }
+}

package/components/global/variables.js

@@ -0,0 +1 @@
+export {};

package/components/global/variables_dark.d.ts

@@ -0,0 +1,3 @@
+import type { RingCSSProperties } from './variables';
+declare const variables: RingCSSProperties;
+export default variables;