@jetbrains/ring-ui 7.0.0-beta.8 → 7.0.0

package/components/form/form.stories.js

@@ -3,13 +3,12 @@ import './form.css';
 import '../input-size/input-size.css';
 import '../error-bubble/error-bubble-legacy.css';
 
-
 export default {
   title: 'Style-only/Form',
 
   parameters: {
-    notes: 'Helps create forms with various types of controls.'
-  }
+    notes: 'Helps create forms with various types of controls.',
+  },
 };
 
 export const basic = () => (
@@ -18,117 +17,100 @@ export const basic = () => (
       <span className="ring-form__title">Form Title</span>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-1" className="ring-form__label">Full-Width
-          Input</label>
+        <label htmlFor="ring-form-1" className="ring-form__label">
+          Full-Width Input
+        </label>
         <div className="ring-form__control">
-          <input className="ring-input" id="ring-form-1" type="text"/>
+          <input className="ring-input" id="ring-form-1" type="text" />
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-2" className="ring-form__label">Medium Input</label>
+        <label htmlFor="ring-form-2" className="ring-form__label">
+          Medium Input
+        </label>
         <div className="ring-form__control">
-          <input
-            className="ring-input ring-input-size_m"
-            id="ring-form-2"
-            type="text"
-          />
+          <input className="ring-input ring-input-size_m" id="ring-form-2" type="text" />
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-3" className="ring-form__label">Medium Input & Error</label>
+        <label htmlFor="ring-form-3" className="ring-form__label">
+          Medium Input & Error
+        </label>
         <div className="ring-form__control">
-          <input
-            className="ring-input ring-input_error ring-input-size_m"
-            id="ring-form-3"
-            type="text"
-          />
+          <input className="ring-input ring-input_error ring-input-size_m" id="ring-form-3" type="text" />
           <div className="ring-error-bubble active">Error bubble</div>
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-4" className="ring-form__label">Long Input</label>
+        <label htmlFor="ring-form-4" className="ring-form__label">
+          Long Input
+        </label>
         <div className="ring-form__control">
-          <input
-            className="ring-input ring-input-size_l"
-            id="ring-form-4"
-            type="text"
-          />
-          <div className="ring-error-bubble active">Error bubble for a long
-            control
-          </div>
+          <input className="ring-input ring-input-size_l" id="ring-form-4" type="text" />
+          <div className="ring-error-bubble active">Error bubble for a long control</div>
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-5" className="ring-form__label">Full-Width
-          Control</label>
+        <label htmlFor="ring-form-5" className="ring-form__label">
+          Full-Width Control
+        </label>
         <div className="ring-form__control">
-          <input className="ring-input" id="ring-form-5" type="text"/>
-          <div className="ring-error-bubble active">Error bubble for a full-width
-            control
-          </div>
+          <input className="ring-input" id="ring-form-5" type="text" />
+          <div className="ring-error-bubble active">Error bubble for a full-width control</div>
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-7" className="ring-form__label">Textarea</label>
+        <label htmlFor="ring-form-7" className="ring-form__label">
+          Textarea
+        </label>
         <div className="ring-form__control">
-          <textarea
-            className="ring-input ring-input-size_m"
-            id="ring-form-7"
-          />
+          <textarea className="ring-input ring-input-size_m" id="ring-form-7" />
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-8" className="ring-form__label">Long
-          Textarea</label>
+        <label htmlFor="ring-form-8" className="ring-form__label">
+          Long Textarea
+        </label>
         <div className="ring-form__control">
-          <textarea
-            className="ring-input ring-input-size_l"
-            id="ring-form-8"
-          />
+          <textarea className="ring-input ring-input-size_l" id="ring-form-8" />
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-9" className="ring-form__label">Full-Width
-          Textarea</label>
+        <label htmlFor="ring-form-9" className="ring-form__label">
+          Full-Width Textarea
+        </label>
         <div className="ring-form__control">
-          <textarea className="ring-input" id="ring-form-9"/>
+          <textarea className="ring-input" id="ring-form-9" />
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-11" className="ring-form__label">Input in
-          a small container</label>
+        <label htmlFor="ring-form-11" className="ring-form__label">
+          Input in a small container
+        </label>
         <div className="ring-form__control ring-form__control_small">
-          <input
-            className="ring-input ring-input-size_m"
-            id="ring-form-11"
-            type="text"
-          />
+          <input className="ring-input ring-input-size_m" id="ring-form-11" type="text" />
         </div>
       </div>
 
       <div className="ring-form__group">
-        <label htmlFor="ring-form-12" className="ring-form__label">Textarea in
-          a small container</label>
+        <label htmlFor="ring-form-12" className="ring-form__label">
+          Textarea in a small container
+        </label>
         <div className="ring-form__control ring-form__control_small">
-          <textarea
-            className="ring-input ring-input-size_m"
-            id="ring-form-12"
-          />
+          <textarea className="ring-input ring-input-size_m" id="ring-form-12" />
         </div>
       </div>
 
       <div className="ring-form__footer">
-        <rg-button mode="primary">Save</rg-button>
-        {' '}
-        <rg-button>Cancel</rg-button>
+        <rg-button mode="primary">Save</rg-button> <rg-button>Cancel</rg-button>
       </div>
     </form>
   </div>

package/components/global/create-stateful-context.js

@@ -5,9 +5,7 @@ export default function createStatefulContext(initialValue, name = '') {
     function Provider({ children }) {
         const [value, update] = useState(initialValue);
         return (<ValueContext.Provider value={value}>
-        <UpdateContext.Provider value={update}>
-          {children}
-        </UpdateContext.Provider>
+        <UpdateContext.Provider value={update}>{children}</UpdateContext.Provider>
       </ValueContext.Provider>);
     }
     Provider.displayName = `${name}Provider`;
@@ -29,6 +27,6 @@ export default function createStatefulContext(initialValue, name = '') {
         UpdateContext,
         Provider,
         useUpdate,
-        Updater: memo(Updater)
+        Updater: memo(Updater),
     };
 }

package/components/global/data-tests.js

@@ -1,10 +1,9 @@
 function expandMap(attrsMap) {
-    return Object.entries(attrsMap).
-        reduce((result, [key, value]) => (value ? [...result, key] : result), []);
+    return Object.entries(attrsMap).reduce((result, [key, value]) => (value ? [...result, key] : result), []);
 }
 export default function joinDataTestAttributes(...attrs) {
-    return attrs.
-        reduce((result, attr) => {
+    return attrs
+        .reduce((result, attr) => {
         if (!attr) {
             return result;
         }
@@ -12,6 +11,6 @@ export default function joinDataTestAttributes(...attrs) {
             return [...result, ...expandMap(attr)];
         }
         return [...result, attr];
-    }, []).
-        join(' ');
+    }, [])
+        .join(' ');
 }

package/components/global/dom.js

@@ -10,7 +10,7 @@ export function isMounted(node) {
 }
 const rectStub = { top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 };
 export function getRect(node) {
-    if (node instanceof Range || node != null && isMounted(node)) {
+    if (node instanceof Range || (node != null && isMounted(node))) {
         const { top, right, bottom, left, width, height } = node.getBoundingClientRect();
         return { top, right, bottom, left, width, height };
     }
@@ -32,18 +32,16 @@ export function isNodeInVisiblePartOfPage(node) {
     return !(bottom < 0 || right < 0 || getWindowHeight() - top < 0 || getWindowWidth() - left < 0);
 }
 export function getDocumentScrollTop() {
-    return (document.documentElement && document.documentElement.scrollTop) ||
-        document.body.scrollTop;
+    return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
 }
 export function getDocumentScrollLeft() {
-    return (document.documentElement && document.documentElement.scrollLeft) ||
-        document.body.scrollLeft;
+    return (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
 }
 export const applyMethodToClasses = (method) => (classList, classes = '') => {
-    classes.
-        split(/\s+/g).
-        filter(className => !!className).
-        forEach(className => classList[method](className));
+    classes
+        .split(/\s+/g)
+        .filter(className => !!className)
+        .forEach(className => classList[method](className));
 };
 export const addClasses = applyMethodToClasses('add');
 export const removeClasses = applyMethodToClasses('remove');
@@ -56,8 +54,7 @@ export function setRootStyleProperties(properties = {}) {
 }
 export function resetRootStyleProperties(properties = {}) {
     const rootStyle = document.documentElement.style;
-    Object.keys(properties).
-        forEach(key => rootStyle.removeProperty(key));
+    Object.keys(properties).forEach(key => rootStyle.removeProperty(key));
 }
 export class Listeners {
     _all = new Set();

package/components/global/focus-sensor-hoc.js

@@ -3,10 +3,10 @@ import { createComposedRef } from './composeRefs';
 export default function focusSensorHOC(ComposedComponent) {
     class FocusSensor extends Component {
         state = {
-            focused: this.props.focused
+            focused: this.props.focused,
         };
         componentDidMount() {
-            const { props: { autofocus, scrollOnTableFocus }, node } = this;
+            const { props: { autofocus, scrollOnTableFocus }, node, } = this;
             node?.setAttribute('tabindex', '0');
             if (node != null) {
                 node.style.outline = 'none';
@@ -50,11 +50,10 @@ export default function focusSensorHOC(ComposedComponent) {
             }
         };
         onBlurCapture = ({ target }) => {
-            const { state: { focused }, node } = this;
+            const { state: { focused }, node, } = this;
             if (focused) {
                 setTimeout(() => {
-                    const blurred = target instanceof Node &&
-                        node?.contains(target) && !node.contains(document.activeElement);
+                    const blurred = target instanceof Node && node?.contains(target) && !node.contains(document.activeElement);
                     if (blurred) {
                         this.setState({ focused: false });
                         this.props.onBlur?.();
@@ -80,7 +79,7 @@ export default function focusSensorHOC(ComposedComponent) {
         autofocus: false,
         scrollOnTableFocus: true,
         onFocus: () => { },
-        onBlur: () => { }
+        onBlur: () => { },
     };
     return FocusSensor;
 }

package/components/global/fuzzy-highlight.js

@@ -13,7 +13,7 @@ export default function fuzzyHighlight(needle, haystack, caseSensitive = false)
             }
             highlight += haystack.slice(prevMatch.to);
         }
-        return ({ matched, matches, highlight });
+        return { matched, matches, highlight };
     };
     const hlen = hstck.length;
     const nlen = ndl.length;

package/components/global/get-event-key.js

@@ -10,7 +10,7 @@ const normalizeKey = {
     Menu: 'ContextMenu',
     Apps: 'ContextMenu',
     Scroll: 'ScrollLock',
-    MozPrintableKey: 'Unidentified'
+    MozPrintableKey: 'Unidentified',
 };
 const translateToKey = {
     8: 'Backspace',
@@ -48,7 +48,7 @@ const translateToKey = {
     123: 'F12',
     144: 'NumLock',
     145: 'ScrollLock',
-    224: 'Meta'
+    224: 'Meta',
 };
 const ENTER = 13;
 const SPACE = 32;

package/components/global/global.css

@@ -86,9 +86,6 @@
   }
 }
 
-/* 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;

package/components/global/linear-function.js

@@ -5,7 +5,7 @@ export default function linearFunction(x0, y0, a) {
         },
         x(y) {
             return +x0 + (y - y0) / a;
-        }
+        },
     };
 }
 export function interpolateLinear(x0, x1, phase) {

package/components/global/normalize-indent.js

@@ -20,11 +20,7 @@ export default function normalizeIndent(string) {
             lines.pop();
         }
     }
-    const indents = lines.
-        filter(line => nonemptyRE.test(line)).
-        map(line => line.match(indentRE)?.[0].length ?? 0);
+    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');
+    return lines.map(line => line.slice(minIndent)).join('\n');
 }

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

@@ -6,8 +6,7 @@ export default class Renderer extends Component {
         if (!node || !nodes || !nodes.length) {
             return;
         }
-        Array.from(this.props.nodes).
-            forEach(nodeToRender => node.appendChild(nodeToRender));
+        Array.from(this.props.nodes).forEach(nodeToRender => node.appendChild(nodeToRender));
     }
     node;
     nodeRef = (node) => {
@@ -15,6 +14,6 @@ export default class Renderer extends Component {
     };
     render() {
         const { className } = this.props;
-        return (<div className={className} ref={this.nodeRef}/>);
+        return <div className={className} ref={this.nodeRef}/>;
     }
 }

package/components/global/theme.d.ts

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

package/components/global/theme.js

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect, forwardRef, useContext, createContext } from 'react';
+import { useMemo, useState, useEffect, forwardRef, useContext, createContext, } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
@@ -30,7 +30,7 @@ export function useThemeClasses(theme) {
     return classNames({
         [styles.dark]: resolvedTheme === Theme.DARK,
         [GLOBAL_DARK_CLASS_NAME]: resolvedTheme === Theme.DARK,
-        [defaultStyles.light]: resolvedTheme === Theme.LIGHT
+        [defaultStyles.light]: resolvedTheme === Theme.LIGHT,
     });
 }
 export function WithThemeClasses({ theme, children }) {
@@ -49,7 +49,10 @@ export function applyTheme(theme, container) {
         container.classList.add(defaultStyles.light);
     }
 }
-export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, target, ...restProps }, ref) {
+const DefaultWrapper = forwardRef(function Wrapper(props, ref) {
+    return <div {...props} ref={ref}/>;
+});
+export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, WrapperComponent = DefaultWrapper, target, ...restProps }, ref) {
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
     const id = useMemo(() => getUID('popups-with-theme-'), []);
@@ -62,15 +65,14 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     const themeClasses = useThemeClasses(theme);
     const parentTarget = useContext(PopupTargetContext);
     return (<ThemeContext.Provider value={themeValue}>
-      <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>
+      <WrapperComponent 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)}
+      </WrapperComponent>
     </ThemeContext.Provider>);
 });
 export default Theme;

package/components/global/url.js

@@ -101,15 +101,12 @@ export function parseQueryString(queryString) {
     }
     let matchedQueryPair;
     while ((matchedQueryPair = queryParameterPairRE.exec(queryString)) != null) {
-        urlParams[decode(matchedQueryPair[FIRST_PAIR_ELEMENT])] =
-            decode(matchedQueryPair[SECOND_PAIR_ELEMENT]);
+        urlParams[decode(matchedQueryPair[FIRST_PAIR_ELEMENT])] = decode(matchedQueryPair[SECOND_PAIR_ELEMENT]);
     }
     return urlParams;
 }
 function customEncodeURIComponent(str) {
-    return encodeURIComponent(String(str)).
-        replace(/%2C/g, ',').
-        replace(/%24/g, '$');
+    return encodeURIComponent(String(str)).replace(/%2C/g, ',').replace(/%24/g, '$');
 }
 /**
  * Takes a URL as input and a params object.
@@ -120,14 +117,17 @@ function customEncodeURIComponent(str) {
  */
 export function encodeURL(url, params) {
     const equalsSign = '=';
-    const firstSeparator = (url.indexOf('?') === -1) ? '?' : '&';
+    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]);
+            res +=
+                (i++ === 0 ? firstSeparator : '&') +
+                    customEncodeURIComponent(k) +
+                    equalsSign +
+                    customEncodeURIComponent(params[k]);
         }
     }
     return res;

package/components/global/variables.css

@@ -56,7 +56,6 @@
   --ring-popup-shadow: 0 2px 8px var(--ring-popup-shadow-color), 0 1px 2px var(--ring-popup-secondary-shadow-color);
   --ring-dialog-shadow: 0 4px 24px var(--ring-popup-shadow-color), 0 2px 6px var(--ring-popup-secondary-shadow-color);
 
-
   /* Text */
   --ring-search-components: 112, 156, 245;
   --ring-search-color: rgb(var(--ring-search-components)); /* #709CF5 */
@@ -165,13 +164,7 @@
   --ring-ease: 0.3s ease-out;
   --ring-fast-ease: 0.15s ease-out;
   --ring-font-family: system-ui, Arial, sans-serif;
-  --ring-font-family-monospace:
-    Menlo,
-    "Bitstream Vera Sans Mono",
-    "Ubuntu Mono",
-    Consolas,
-    "Courier New",
-    Courier,
+  --ring-font-family-monospace: Menlo, "Bitstream Vera Sans Mono", "Ubuntu Mono", Consolas, "Courier New", Courier,
     monospace;
   --ring-font-weight-bold: 600;
 

package/components/global/variables_dark.css

@@ -110,7 +110,6 @@
   --ring-added-subtle-background-components: 37, 54, 39;
   --ring-added-subtle-background-color: rgb(var(--ring-added-subtle-background-components)); /* #253627 */
 
-
   /* Code */
   --ring-code-background-components: 30, 31, 34;
   --ring-code-background-color: rgb(var(--ring-code-background-components)); /* #1E1F22 */

package/components/grid/col.js

@@ -9,7 +9,7 @@ const classMap = {
     xsOffset: 'col-xs-offset',
     smOffset: 'col-sm-offset',
     mdOffset: 'col-md-offset',
-    lgOffset: 'col-lg-offset'
+    lgOffset: 'col-lg-offset',
 };
 /**
  * Converts props like "xs=9 xsOffset={2}" to classes "col-xs-9 col-xs-offset-2"
@@ -17,17 +17,17 @@ const classMap = {
  * @returns {Array} result classnames
  */
 function getClassNames(props) {
-    return Object.entries(props).
-        filter(([key]) => classMap[key]).
-        map(([key, value]) => styles[Number.isInteger(value) ? `${classMap[key]}-${value}` : classMap[key]]);
+    return Object.entries(props)
+        .filter(([key]) => classMap[key])
+        .map(([key, value]) => styles[Number.isInteger(value) ? `${classMap[key]}-${value}` : classMap[key]]);
 }
 export default class Col extends Component {
     render() {
         const { children, className, reverse, ...restProps } = this.props;
         const classes = classNames(styles.col, className, getClassNames(restProps), {
-            [styles.reverse]: reverse
+            [styles.reverse]: reverse,
         });
-        return (<div className={classes}>
+        return (<div className={classes} data-test="ring-grid-column">
         {children}
       </div>);
     }