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

package/components/editable-heading/editable-heading.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading';
 import Button from '../button/button';
@@ -11,7 +11,7 @@ export { Levels };
 export { Size };
 function noop() { }
 export const EditableHeading = (props) => {
-    const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, multiline = false, renderMenu = () => null, onFocus, onBlur, translations = {
+    const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, multiline = false, renderMenu = () => null, onFocus, onBlur, onChange, onScroll, maxInputRows, translations = {
         save: 'Save',
         cancel: 'Cancel'
     }, ...restProps } = props;
@@ -19,6 +19,9 @@ export const EditableHeading = (props) => {
     const [isInFocus, setIsInFocus] = React.useState(false);
     const [isMouseDown, setIsMouseDown] = React.useState(false);
     const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
+    const textAreaRef = React.useRef(null);
+    const [isScrolledToBottom, setIsScrolledToBottom] = React.useState(false);
+    const [isOverflow, setIsOverflow] = React.useState(false);
     const hasError = error !== undefined;
     const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
     const isCancelDisabled = isSaving;
@@ -42,7 +45,27 @@ export const EditableHeading = (props) => {
         [styles.selectionMode]: isInSelectionMode
     });
     const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
-    const inputClasses = classNames('ring-js-shortcuts', styles.input, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
+    const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, { [styles.textareaNotOverflow]: !isOverflow }, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
+    const stretch = useCallback((el) => {
+        if (!el || !el.style) {
+            return;
+        }
+        el.style.height = '0';
+        const { paddingTop, paddingBottom } = window.getComputedStyle(el);
+        el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
+    }, []);
+    const checkValue = useCallback((el) => {
+        if (multiline && el != null && el.scrollHeight >= el.clientHeight) {
+            stretch(el);
+        }
+    }, [stretch, multiline]);
+    const checkOverflow = useCallback((el) => {
+        const scrollHeight = el.scrollHeight || 0;
+        const clientHeight = el.clientHeight || 0;
+        const scrollTop = el.scrollTop || 0;
+        setIsScrolledToBottom(scrollHeight - clientHeight <= scrollTop);
+        setIsOverflow(scrollHeight > clientHeight);
+    }, [setIsScrolledToBottom]);
     const onHeadingMouseDown = React.useCallback(() => {
         setIsMouseDown(true);
     }, []);
@@ -61,8 +84,19 @@ export const EditableHeading = (props) => {
     }, [isMouseDown, isInSelectionMode, disabled, onEdit]);
     const onInputFocus = React.useCallback((e) => {
         setIsInFocus(true);
+        checkValue(e.target);
+        checkOverflow(e.target);
         onFocus?.(e);
-    }, [onFocus]);
+    }, [onFocus, checkOverflow, checkValue]);
+    const onInputChange = React.useCallback((e) => {
+        checkValue(e.target);
+        checkOverflow(e.target);
+        onChange?.(e);
+    }, [onChange, checkOverflow, checkValue]);
+    const onInputScroll = React.useCallback((e) => {
+        checkOverflow(e.target);
+        onScroll?.(e);
+    }, [onScroll, checkOverflow]);
     const onInputBlur = React.useCallback((e) => {
         setIsInFocus(false);
         onBlur?.(e);
@@ -74,14 +108,19 @@ export const EditableHeading = (props) => {
             window.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('mouseup', onMouseUp);
         };
-    });
+    }, [onMouseMove, onMouseUp]);
     return (<>
       <div className={classes}>
         {!disabled && isEditing
             ? (<>
               <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
 
-              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>
+              {!multiline
+                    ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>)
+                    : (<div className={classNames(styles.textareaWrapper, inputStyles[`size${size}`])}>
+                    <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} onChange={onInputChange} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur} onScroll={onInputScroll} style={{ maxHeight: maxInputRows ? `${maxInputRows}lh` : '' }}/>
+                    {!isScrolledToBottom && <div className={styles.textareaFade}/>}
+                  </div>)}
             </>)
             : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
               <Heading className={headingClasses} level={level} data-test={dataTest}>{children}</Heading>

package/components/error-bubble/error-bubble-legacy.css

@@ -1,5 +1,3 @@
-@value unit from "../global/global.css";
-
 :global(.ring-error-bubble) {
   position: absolute;
   z-index: 2;
@@ -9,9 +7,9 @@
   display: none;
 
   box-sizing: border-box;
-  min-height: calc(3 * unit);
-  padding-right: calc(2 * unit);
-  padding-left: calc(2 * unit);
+  min-height: calc(3 * var(--ring-unit));
+  padding-right: calc(2 * var(--ring-unit));
+  padding-left: calc(2 * var(--ring-unit));
 
   white-space: nowrap;
 
@@ -41,8 +39,8 @@
 
   display: block;
 
-  width: unit;
-  height: unit;
+  width: var(--ring-unit);
+  height: var(--ring-unit);
 
   content: "";
   transform: rotate(45deg);
@@ -55,7 +53,7 @@
 }
 
 :global(.ring-error-bubble_material) {
-  padding-left: unit;
+  padding-left: var(--ring-unit);
 
   border: 0;
   background: transparent none;

package/components/error-bubble/error-bubble.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .errorBubblePopup {
   overflow: visible;
 
@@ -18,9 +16,9 @@
 
 .errorBubble {
   box-sizing: border-box;
-  min-height: calc(unit * 3);
-  padding-right: calc(unit * 2);
-  padding-left: calc(unit * 2);
+  min-height: calc(var(--ring-unit) * 3);
+  padding-right: calc(var(--ring-unit) * 2);
+  padding-left: calc(var(--ring-unit) * 2);
 
   white-space: nowrap;
 
@@ -38,13 +36,13 @@
 
 .errorBubble::before {
   position: absolute;
-  top: unit;
+  top: var(--ring-unit);
   left: -4px;
 
   display: block;
 
-  width: unit;
-  height: unit;
+  width: var(--ring-unit);
+  height: var(--ring-unit);
 
   content: "";
   transform: rotate(45deg);

package/components/footer/footer.css

@@ -1,16 +1,14 @@
 @import "../global/variables.css";
 
-@value unit, footer-height from "../global/global.css";
-
 .footer {
   composes: font from "../global/global.css";
 
   position: relative;
 
   box-sizing: border-box;
-  height: footer-height;
-  margin: calc(unit * 5) calc(unit * 4) 0 calc(unit * 4);
-  padding-top: calc(unit * 2);
+  height: calc(var(--ring-unit) * 8);
+  margin: calc(var(--ring-unit) * 5) calc(var(--ring-unit) * 4) 0 calc(var(--ring-unit) * 4);
+  padding-top: calc(var(--ring-unit) * 2);
 
   text-align: center;
 
@@ -28,7 +26,7 @@
 
   width: 100%;
   margin-right: 0;
-  margin-bottom: unit;
+  margin-bottom: var(--ring-unit);
   margin-left: 0;
 }
 
@@ -66,7 +64,7 @@
 .columnRight {
   composes: column;
 
-  top: calc(unit * 2);
+  top: calc(var(--ring-unit) * 2);
   right: 0;
 
   text-align: right;
@@ -77,7 +75,7 @@
 
   list-style: none;
 
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }
 
 .lineCenter {

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

@@ -0,0 +1,138 @@
+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';
+
+
+export default {
+  title: 'Style-only/Form',
+
+  parameters: {
+    notes: 'Helps create forms with various types of controls.'
+  }
+};
+
+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 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 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 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 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 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 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 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 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 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 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>>;