@jetbrains/ring-ui 5.1.22 → 6.0.1

package/components/form/form.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 /**
  * @name Form
 */
@@ -29,25 +27,25 @@
 }
 
 :global(.ring-form_rows.ring-form__control) {
-  width: calc(42 * unit);
+  width: calc(42 * var(--ring-unit));
   margin-left: 0;
 }
 
 :global(.ring-form__wrap) {
   margin-bottom: 0;
-  padding: calc(3 * unit) calc(4 * unit) 0 calc(4 * unit);
+  padding: calc(3 * var(--ring-unit)) calc(4 * var(--ring-unit)) 0 calc(4 * var(--ring-unit));
 }
 
 :global(.ring-form__header) {
   min-height: 13px;
-  padding-bottom: calc(2 * unit);
+  padding-bottom: calc(2 * var(--ring-unit));
 }
 
 :global(.ring-form__control__description) {
   display: block;
 
   max-width: 900px;
-  padding-top: calc(unit / 2);
+  padding-top: calc(var(--ring-unit) / 2);
 
   color: var(--ring-secondary-color);
 
@@ -58,7 +56,7 @@
 :global(.ring-form__title-img) {
   float: left;
 
-  height: calc(4 * unit);
+  height: calc(4 * var(--ring-unit));
 
   border: 0;
 }
@@ -66,7 +64,7 @@
 :global(.ring-form__title) {
   display: block;
 
-  margin-bottom: calc(unit);
+  margin-bottom: calc(var(--ring-unit));
 
   font-weight: bold;
 }
@@ -79,13 +77,13 @@
 }
 
 :global(.ring-form__title_separated) {
-  margin: calc(unit * 3) 0;
+  margin: calc(var(--ring-unit) * 3) 0;
 }
 
 :global(.ring-form__group) {
   position: relative;
 
-  margin: calc(unit * 2) 0;
+  margin: calc(var(--ring-unit) * 2) 0;
 }
 
 :global(.ring-form__group:first-child) {
@@ -105,20 +103,20 @@
 
 :global(.ring-form__group .ring_form__group) {
   padding-top: 0;
-  padding-left: calc(unit * 2);
+  padding-left: calc(var(--ring-unit) * 2);
 }
 
 :global(.ring-form__group .ring_form__group .ring-form__control) {
-  margin-left: calc(18 * unit);
+  margin-left: calc(18 * var(--ring-unit));
 }
 
 :global(.ring-form__group_nested) {
   padding-top: 0;
-  padding-left: calc(unit * 2);
+  padding-left: calc(var(--ring-unit) * 2);
 }
 
 :global(.ring-form__group_nested .ring-form__control) {
-  margin-left: calc(18 * unit);
+  margin-left: calc(18 * var(--ring-unit));
 }
 
 :global(.ring-form__label) {
@@ -128,12 +126,12 @@
   display: inline-block;
   float: left;
 
-  max-width: calc(18 * unit);
-  padding-top: calc(unit / 2);
+  max-width: calc(18 * var(--ring-unit));
+  padding-top: calc(var(--ring-unit) / 2);
 
   vertical-align: top;
 
-  line-height: calc(2 * unit);
+  line-height: calc(2 * var(--ring-unit));
 }
 
 :global(.ring-form__label .ring-radio-btn__label) {
@@ -154,18 +152,18 @@
   position: relative;
 
   width: auto;
-  min-height: calc(3 * unit);
-  margin-left: calc(20 * unit);
+  min-height: calc(3 * var(--ring-unit));
+  margin-left: calc(20 * var(--ring-unit));
 
   vertical-align: top;
 
-  line-height: calc(3 * unit);
+  line-height: calc(3 * var(--ring-unit));
 }
 
 :global(.ring-form__control_text::after) {
   display: inline-block;
 
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   content: "";
   vertical-align: middle;
@@ -174,8 +172,8 @@
 /* Temporary solution, proper grid is necessary */
 :global(.ring-form__control_secondary) {
   position: absolute;
-  top: unit;
-  left: calc(27 * unit);
+  top: var(--ring-unit);
+  left: calc(27 * var(--ring-unit));
 }
 
 :global(.ring-form__control_on) {
@@ -192,19 +190,19 @@
 }
 
 :global(.ring-form__control_small) {
-  margin-left: calc(16 * unit) !important;
+  margin-left: calc(16 * var(--ring-unit)) !important;
 }
 
 :global(.ring-form__info) {
-  width: calc(85 * unit);
-  margin-bottom: calc(-1 * unit + 2px);
-  margin-left: calc(20 * unit);
+  width: calc(85 * var(--ring-unit));
+  margin-bottom: calc(-1 * var(--ring-unit) + 2px);
+  margin-left: calc(20 * var(--ring-unit));
 
   line-height: 20px;
 }
 
 :global(.ring-form__control__part) {
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 /* Form for key-value data
@@ -247,22 +245,22 @@
  </form> */
 
 :global(.ring-form__group_short) {
-  padding-top: calc(unit / 2);
+  padding-top: calc(var(--ring-unit) / 2);
   padding-bottom: 0;
 }
 
 :global(.ring-form__group_short:last-child) {
-  padding-bottom: unit;
+  padding-bottom: var(--ring-unit);
 }
 
 :global(.ring-form__group_short.ring-form__control) {
-  margin-left: calc(unit * 3);
+  margin-left: calc(var(--ring-unit) * 3);
 }
 
 :global(.ring-form_small .ring-form__label) {
-  max-width: calc(12 * unit);
+  max-width: calc(12 * var(--ring-unit));
 }
 
 :global(.ring-form_small .ring-form__control) {
-  margin-left: calc(16 * unit);
+  margin-left: calc(16 * var(--ring-unit));
 }

package/components/form/form.stories.js

@@ -1,128 +1,138 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
+import React from 'react';
 import '../input/input-legacy.css';
 import './form.css';
 import '../input-size/input-size.css';
 import '../error-bubble/error-bubble-legacy.css';
 
-import ButtonNG from '../button-ng/button-ng';
 
 export default {
   title: 'Style-only/Form',
-  decorators: [angularDecorator()],
 
   parameters: {
     notes: 'Helps create forms with various types of controls.'
   }
 };
 
-export const basic = () => {
-  angular.module(APP_NAME, [ButtonNG]);
-
-  return `
-      <div style="width: 700px">
-        <form class="ring-form">
-          <span class="ring-form__title">Form Title</span>
-
-          <div class="ring-form__group">
-            <label for="ring-form-1" class="ring-form__label">Full-Width
-              Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input" id="ring-form-1" type="text">
-            </div>
-          </div>
+export const basic = () => (
+  <div style={{width: 700}}>
+    <form className="ring-form">
+      <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>
+        <div className="ring-form__control">
+          <input className="ring-input" id="ring-form-1" type="text"/>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-2" class="ring-form__label">Medium Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input-size_m" id="ring-form-2"
-                type="text">
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <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"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-3" class="ring-form__label">Medium Input & Error</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input_error ring-input-size_m"
-                id="ring-form-3" type="text">
-              <div class="ring-error-bubble active">Error bubble</div>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <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"
+          />
+          <div className="ring-error-bubble active">Error bubble</div>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-4" class="ring-form__label">Long Input</label>
-            <div class="ring-form__control">
-              <input class="ring-input ring-input-size_l" id="ring-form-4"
-                type="text">
-              <div class="ring-error-bubble active">Error bubble for a long
-                control
-              </div>
-            </div>
+      <div className="ring-form__group">
+        <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>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-5" class="ring-form__label">Full-Width
-              Control</label>
-            <div class="ring-form__control">
-              <input class="ring-input" id="ring-form-5" type="text">
-              <div class="ring-error-bubble active">Error bubble for a full-width
-                control
-              </div>
-            </div>
+      <div className="ring-form__group">
+        <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>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-7" class="ring-form__label">Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input ring-input-size_m"
-                id="ring-form-7"></textarea>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <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"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-8" class="ring-form__label">Long
-              Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input ring-input-size_l"
-                id="ring-form-8"></textarea>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <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"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-9" class="ring-form__label">Full-Width
-              Textarea</label>
-            <div class="ring-form__control">
-              <textarea class="ring-input" id="ring-form-9"></textarea>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <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"/>
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-11" class="ring-form__label">Input in
-              a small container</label>
-            <div class="ring-form__control ring-form__control_small">
-              <input class="ring-input ring-input-size_m" id="ring-form-11"
-                type="text">
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <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"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__group">
-            <label for="ring-form-12" class="ring-form__label">Textarea in
-              a small container</label>
-            <div class="ring-form__control ring-form__control_small">
-              <textarea class="ring-input ring-input-size_m"
-                id="ring-form-12"></textarea>
-            </div>
-          </div>
+      <div className="ring-form__group">
+        <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"
+          />
+        </div>
+      </div>
 
-          <div class="ring-form__footer">
-            <rg-button mode="primary">Save</rg-button>
-            <rg-button>Cancel</rg-button>
-          </div>
-        </form>
+      <div className="ring-form__footer">
+        <rg-button mode="primary">Save</rg-button>
+        {' '}
+        <rg-button>Cancel</rg-button>
       </div>
-    `;
-};
+    </form>
+  </div>
+);
 
 basic.storyName = 'Form';

package/components/global/global.css

@@ -1,11 +1,5 @@
 /* https://readymag.com/artemtiunov/RingUILanguage/colours/ */
 
-/*
-Unit shouldn't be CSS custom property because it is not intended to change
-Also it won't form in FF47 https://bugzilla.mozilla.org/show_bug.cgi?id=594933
-*/
-@value unit: 8px;
-
 .clearfix {
   &::after {
     display: block;
@@ -93,7 +87,7 @@ Also it won't form in FF47 https://bugzilla.mozilla.org/show_bug.cgi?id=594933
 }
 
 /* Note: footer also has top margin which isn't taken into account here */
-@value footer-height: calc(unit * 8);
+@value footer-height: calc(var(--ring-unit) * 8);
 
 /* Media breakpoints (minimal values) */
 @value breakpoint-small: 640px;

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

@@ -1,29 +1 @@
-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 {};
+export declare const setClient: () => void;

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

@@ -1,24 +1,3 @@
-/* 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);
-    };
-}
+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

@@ -1,41 +1,10 @@
-import { Component, RefAttributes } from 'react';
+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>;
 }
-/**
- * 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;
-    };
-};
+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

@@ -1,28 +1,14 @@
-import { createElement } from 'react';
-import { render } from './react-render-adapter';
+import React, { Component, forwardRef } from 'react';
 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);
+    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/variables.css

@@ -17,8 +17,6 @@
   --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #e8e8e8 */
   --ring-border-selected-disabled-components: 212, 212, 212;
   --ring-border-selected-disabled-color: rgb(var(--ring-border-selected-disabled-components)); /* #d4d4d4 */
-  --ring-border-unselected-disabled-components: 232, 232, 232;
-  --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #e8e8e8 */ /* TODO remove in 6.0 */
   --ring-icon-disabled-components: 212, 212, 212;
   --ring-icon-disabled-color: rgb(var(--ring-icon-disabled-components)); /* #d4d4d4 */
   --ring-border-hover-components: 128, 198, 255;
@@ -51,6 +49,7 @@
   --ring-button-danger-hover-color: var(--ring-icon-error-color);
   --ring-button-primary-border-components: 0, 98, 178;
   --ring-button-primary-border-color: rgb(var(--ring-button-primary-border-components)); /* #0062b2 */
+  --ring-dialog-overlay-components: 0, 0, 0;
   --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);
 

package/components/global/variables.d.ts

@@ -6,7 +6,6 @@ export interface RingCSSProperties {
     '--ring-icon-color'?: Property.Color;
     '--ring-icon-secondary-color'?: Property.Color;
     '--ring-border-disabled-color'?: Property.BorderColor;
-    '--ring-border-unselected-disabled-color'?: Property.Color;
     '--ring-icon-disabled-color'?: Property.Color;
     '--ring-border-hover-color'?: Property.BorderColor;
     '--ring-icon-hover-color'?: Property.Color;