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

package/dist/dropdown/anchor.js

@@ -10,8 +10,10 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'focus-visible';
-import '../global/theme.js';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';

package/dist/dropdown/dropdown.d.ts

@@ -6,7 +6,7 @@ export interface AnchorProps {
     active: boolean;
     pinned: boolean;
 }
-export interface DropdownProps extends HTMLAttributes<HTMLElement> {
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     anchor: ReactElement | readonly ReactElement[] | string | ((props: AnchorProps) => ReactNode);
     children: ReactElement<PopupAttrs> | ((props: Omit<PopupAttrs, 'children'>) => ReactNode);
     initShown: boolean;
@@ -32,7 +32,7 @@ export default class Dropdown extends Component<DropdownProps, DropdownState> {
          * Can be string, React element, or a function accepting an object with {active, pinned} properties and returning a React element
          * React element should render some interactive HTML element like `button` or `a`
          */
-        anchor: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        anchor: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray | ((...args: any[]) => any)>;
         children: PropTypes.Validator<PropTypes.ReactElementLike | ((...args: any[]) => any)>;
         initShown: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;

package/dist/dropdown/dropdown.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { Component, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -12,11 +13,12 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 import '../button/button.js';
 import 'focus-visible';
-import '../global/theme.js';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 
 /**

package/dist/dropdown-menu/dropdown-menu.js

@@ -7,6 +7,7 @@ import PopupMenu from '../popup-menu/popup-menu.js';
 import getUID from '../global/get-uid.js';
 import { A as Anchor } from '../_helpers/anchor.js';
 import { isArray } from '../global/typescript-utils.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'classnames';
 import 'react-virtualized/dist/es/List';
 import 'react-virtualized/dist/es/AutoSizer';
@@ -33,9 +34,10 @@ import '../_helpers/list.js';
 import '../list/list__item.js';
 import '../avatar/avatar.js';
 import '../global/url.js';
+import 'core-js/modules/es.string.replace.js';
 import '../avatar/fallback-avatar.js';
 import '../checkbox/checkbox.js';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/checkmark-14px';
 import '@jetbrains/icons/remove-10px';
 import '../icon/icon.js';
 import '../icon/icon__constants.js';
@@ -50,7 +52,7 @@ import '../list/list__hint.js';
 import '../list/consts.js';
 import '@jetbrains/icons/chevron-10px';
 import '../button/button.js';
-import '../global/theme.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../popup/popup.js';
 import 'react-dom';
@@ -98,7 +100,7 @@ function DropdownAnchorWrapper(_ref) {
     ...anchorAriaProps
   }), [pinned, active, restProps, anchorAriaProps]);
   const anchorComponentProps = useMemo(() => ({ ...anchorProps,
-    pinned: `${anchorProps.pinned}`
+    pinned: "".concat(anchorProps.pinned)
   }), [anchorProps]);
 
   if (typeof anchor === 'string') {

package/dist/error-bubble/error-bubble.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Popup from '../popup/popup.js';
 import { Directions } from '../popup/popup.consts.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.string.replace.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
@@ -18,7 +20,7 @@ import '../tab-trap/tab-trap.js';
 import '../popup/position.js';
 import '../popup/popup.target.js';
 
-var modules_ee284100 = {"unit":"8px","errorBubblePopup":"errorBubblePopup_rui_9251","errorBubbleWrapper":"errorBubbleWrapper_rui_9251","errorBubble":"errorBubble_rui_9251"};
+var modules_ee284100 = {"unit":"8px","errorBubblePopup":"errorBubblePopup_rui_b075","errorBubbleWrapper":"errorBubbleWrapper_rui_b075","errorBubble":"errorBubble_rui_b075"};
 
 /**
  * @name Error Bubble

package/dist/error-message/error-message.js

@@ -8,7 +8,9 @@ import { m as modules_2c5e8509 } from '../_helpers/error-message.js';
 import 'util-deprecate';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
 /**
  * @name Error Message
@@ -36,7 +38,7 @@ class ErrorMessage extends Component {
       className: modules_2c5e8509.content
     }, /*#__PURE__*/React.createElement("div", {
       className: modules_2c5e8509.title
-    }, code && `${code}:`, " ", message), description && /*#__PURE__*/React.createElement("div", {
+    }, code && "".concat(code, ":"), " ", message), description && /*#__PURE__*/React.createElement("div", {
       className: modules_2c5e8509.description
     }, description), children));
   }

package/dist/error-message-ng/error-message-ng.js

@@ -2,6 +2,8 @@ import angular from 'angular';
 import IconNG from '../icon-ng/icon-ng.js';
 import LinkNG from '../link-ng/link-ng.js';
 import { m as modules_2c5e8509 } from '../_helpers/error-message.js';
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../icon/icon__constants.js';
 import '../template-ng/template-ng.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
@@ -18,27 +20,7 @@ angularModule.directive('rgErrorMessage', function rgErrorMessageDirective() {
   return {
     replace: true,
     transclude: true,
-    template: `
-<div class="${modules_2c5e8509.errorMessage}" data-test="ring-error-message">
-
-    <rg-icon class="${modules_2c5e8509.icon}" glyph="{{icon}}" color="gray" size="64"></rg-icon>
-    
-    <div class="${modules_2c5e8509.content}">
-      <div class="${modules_2c5e8509.title}" data-test="ring-error-message-title"
-      ><span ng-if="code">{{ code }}:</span> {{ message }}</div>
-      
-      <div class="${modules_2c5e8509.description}" ng-transclude></div>
-      
-      
-       <div ng-if="links">
-          <span ng-repeat="link in links">
-            <rg-link ng-if="link.target" ng-href="{{link.href}}" target="{{link.target}}">{{link.text}}</rg-link><rg-link
-            ng-if="!link.target" ng-href="{{link.href}}">{{link.text}}</rg-link>{{$last ? '' : ','}}
-          </span>
-        </div>
-    </div>
-</div>
-    `,
+    template: "\n<div class=\"".concat(modules_2c5e8509.errorMessage, "\" data-test=\"ring-error-message\">\n\n    <rg-icon class=\"").concat(modules_2c5e8509.icon, "\" glyph=\"{{icon}}\" color=\"gray\" size=\"64\"></rg-icon>\n    \n    <div class=\"").concat(modules_2c5e8509.content, "\">\n      <div class=\"").concat(modules_2c5e8509.title, "\" data-test=\"ring-error-message-title\"\n      ><span ng-if=\"code\">{{ code }}:</span> {{ message }}</div>\n      \n      <div class=\"").concat(modules_2c5e8509.description, "\" ng-transclude></div>\n      \n      \n       <div ng-if=\"links\">\n          <span ng-repeat=\"link in links\">\n            <rg-link ng-if=\"link.target\" ng-href=\"{{link.href}}\" target=\"{{link.target}}\">{{link.text}}</rg-link><rg-link\n            ng-if=\"!link.target\" ng-href=\"{{link.href}}\">{{link.text}}</rg-link>{{$last ? '' : ','}}\n          </span>\n        </div>\n    </div>\n</div>\n    "),
     restrict: 'E',
     scope: {
       code: '@',

package/dist/footer/footer.js

@@ -6,6 +6,7 @@ export { c as copyright, F as default } from '../_helpers/footer.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 import 'focus-visible';
 import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/data-tests.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';

package/dist/footer-ng/footer-ng.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import angular from 'angular';
 import RingAngularComponent from '../global/ring-angular-component.js';
 import { m as modules_7385b3fd, c as copyright } from '../_helpers/footer.js';
@@ -33,25 +34,13 @@ _defineProperty(rgFooterComponent, "transclude", {
   right: '?rgFooterRight'
 });
 
-_defineProperty(rgFooterComponent, "template", `<footer ng-class=":: $ctrl.styles.footer" data-test="ring-footer">
-  <div ng-class=":: $ctrl.styles.columnLeft">
-    <div ng-transclude="left" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-
-  <div ng-class=":: $ctrl.styles.columnCenter">
-    <div ng-transclude="center" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-
-  <div ng-class=":: $ctrl.styles.columnRight">
-    <div ng-transclude="right" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-</footer>`);
+_defineProperty(rgFooterComponent, "template", "<footer ng-class=\":: $ctrl.styles.footer\" data-test=\"ring-footer\">\n  <div ng-class=\":: $ctrl.styles.columnLeft\">\n    <div ng-transclude=\"left\" ng-class=\":: $ctrl.styles.columnItem\"></div>\n  </div>\n\n  <div ng-class=\":: $ctrl.styles.columnCenter\">\n    <div ng-transclude=\"center\" ng-class=\":: $ctrl.styles.columnItem\"></div>\n  </div>\n\n  <div ng-class=\":: $ctrl.styles.columnRight\">\n    <div ng-transclude=\"right\" ng-class=\":: $ctrl.styles.columnItem\"></div>\n  </div>\n</footer>");
 
 class rgFooterLineComponent extends RingAngularComponent {}
 
 _defineProperty(rgFooterLineComponent, "transclude", true);
 
-_defineProperty(rgFooterLineComponent, "template", `<div class="${modules_7385b3fd.line}" ng-transclude></div>`);
+_defineProperty(rgFooterLineComponent, "template", "<div class=\"".concat(modules_7385b3fd.line, "\" ng-transclude></div>"));
 
 class rgFooterCopyrightComponent extends RingAngularComponent {
   $onInit() {

package/dist/form-ng/form-ng.js

@@ -9,7 +9,7 @@ import MessageBundle from '../message-bundle-ng/message-bundle-ng.js';
 const angularModule = angular.module('Ring.form', [MessageBundle, AngularElastic]);
 angularModule.factory('getFormErrorMessages', ["RingMessageBundle", function getFormErrorMessagesDirective(RingMessageBundle) {
   function msg(id, formError) {
-    const messageBundleId = `form_${id}`;
+    const messageBundleId = "form_".concat(id);
 
     if (RingMessageBundle.hasOwnProperty(messageBundleId)) {
       return RingMessageBundle[messageBundleId]();
@@ -51,9 +51,7 @@ angularModule.directive('rgErrorBubble', ["getFormErrorMessages", function rgErr
       errorBubble: '&rgErrorBubble'
     },
     replace: true,
-    template: `<div class="ring-error-bubble" ng-class="{ active: active, 'ring-error-bubble_material': material }" ng-style="style">
-  <div ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</div>
-</div>`,
+    template: "<div class=\"ring-error-bubble\" ng-class=\"{ active: active, 'ring-error-bubble_material': material }\" ng-style=\"style\">\n  <div ng-repeat=\"errorMessage in getFormErrorMessages(errorBubble().$error)\">{{ errorMessage }}</div>\n</div>",
     link: function link(scope, iElement, iAttrs) {
       scope.style = {};
       const siblings = Array.from(iElement[0].parentNode.children);

package/dist/global/angular-component-factory.js

@@ -1,24 +1,26 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import angular from 'angular';
 import React from 'react';
-import { unmountComponentAtNode, render } from 'react-dom';
+import { unmountComponentAtNode, render } from './react-render-adapter.js';
 import RingAngularComponent from './ring-angular-component.js';
 import Renderer from './react-dom-renderer.js';
+import 'react-dom';
 import 'prop-types';
 
 function getAngularComponentName(name) {
-  return `rg${name}`;
+  return "rg".concat(name);
 }
 
 function createAngularComponent(Component) {
-  var _class, _temp;
+  var _class;
 
   const propKeys = Object.keys(Component.propTypes);
   const bindings = {};
   propKeys.forEach(key => {
     bindings[key] = '<';
   });
-  return _temp = _class = class AngularComponent extends RingAngularComponent {
+  return _class = class AngularComponent extends RingAngularComponent {
     $postLink() {
       const {
         $transclude
@@ -71,11 +73,11 @@ function createAngularComponent(Component) {
       }) : null), container);
     }
 
-  }, _defineProperty(_class, "$inject", ['$scope', '$element', '$transclude']), _defineProperty(_class, "bindings", bindings), _defineProperty(_class, "transclude", true), _temp;
+  }, _defineProperty(_class, "$inject", ['$scope', '$element', '$transclude']), _defineProperty(_class, "bindings", bindings), _defineProperty(_class, "transclude", true), _class;
 }
 
 function angularComponentFactory(Component, name) {
-  const angularModuleName = `Ring.${name[0].toLowerCase() + name.slice(1)}`;
+  const angularModuleName = "Ring.".concat(name[0].toLowerCase() + name.slice(1));
   return angular.module(angularModuleName, []).component(getAngularComponentName(name), createAngularComponent(Component));
 }
 

package/dist/global/controls-height.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare enum ControlsHeight {
+    S = "S",
+    M = "M",
+    L = "L"
+}
+export declare const ControlsHeightContext: import("react").Context<ControlsHeight>;

package/dist/global/controls-height.js

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+var ControlsHeight;
+
+(function (ControlsHeight) {
+  ControlsHeight["S"] = "S";
+  ControlsHeight["M"] = "M";
+  ControlsHeight["L"] = "L";
+})(ControlsHeight || (ControlsHeight = {}));
+
+const ControlsHeightContext = /*#__PURE__*/createContext(ControlsHeight.M);
+
+export { ControlsHeight, ControlsHeightContext };

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

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { memo, createContext, useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
@@ -21,7 +22,7 @@ function createStatefulContext(initialValue) {
   Provider.propTypes = {
     children: PropTypes.node
   };
-  Provider.displayName = `${name}Provider`;
+  Provider.displayName = "".concat(name, "Provider");
 
   function useUpdate(value, skipUpdate) {
     const update = useContext(UpdateContext);
@@ -41,7 +42,7 @@ function createStatefulContext(initialValue) {
     return null;
   }
 
-  Updater.displayName = `${name}Updater`;
+  Updater.displayName = "".concat(name, "Updater");
   return {
     ValueContext,
     UpdateContext,

package/dist/global/data-tests.js

@@ -1,3 +1,5 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
 function expandMap(attrsMap) {
   return Object.entries(attrsMap).reduce((result, _ref) => {
     let [key, value] = _ref;

package/dist/global/dom.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
 /**
  * @name DOM

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

@@ -1,4 +1,5 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { refObject } from './prop-types.js';

package/dist/global/fuzzy-highlight.js

@@ -22,7 +22,7 @@ function fuzzyHighlight(needle, haystack) {
 
   if (nlen === hlen) {
     const matched = ndl === hstck;
-    return result(matched, matched ? `${marker}${haystack}${marker}` : haystack);
+    return result(matched, matched ? "".concat(marker).concat(haystack).concat(marker) : haystack);
   }
 
   let highlight = '';

package/dist/global/inject-styles.js

@@ -1,3 +1,5 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
 const injectStyleSheet = styles => {
   const styleTag = document.createElement('style');
   styleTag.setAttribute('type', 'text/css');
@@ -5,13 +7,9 @@ const injectStyleSheet = styles => {
   document.head.appendChild(styleTag);
   return styleTag;
 };
-const injectRuleSet = (selector, declarations) => injectStyleSheet(`
-${selector} {
-  ${Object.entries(declarations).map(_ref => {
+const injectRuleSet = (selector, declarations) => injectStyleSheet("\n".concat(selector, " {\n  ").concat(Object.entries(declarations).map(_ref => {
   let [property, value] = _ref;
-  return `${property}: ${value};`;
-}).join(`
-  `)}
-}`);
+  return "".concat(property, ": ").concat(value, ";");
+}).join("\n  "), "\n}"));
 
 export { injectRuleSet, injectStyleSheet };

package/dist/global/listeners.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
 class Listeners {
   constructor() {

package/dist/global/memoize.js

@@ -1,3 +1,5 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
 function memoize(fn) {
   const primitiveCache = new Map();
   const objectCache = new WeakMap();

package/dist/global/normalize-indent.js

@@ -1,3 +1,5 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
 function normalizeIndent(string) {
   const nonemptyRE = /\S/;
   const indentRE = /^\s*/;

package/dist/global/promise-with-timeout.d.ts

@@ -1,4 +1,5 @@
 export interface PromiseWithTimeoutConfig {
     error?: Error | null | undefined;
+    onTimeout?: () => void | undefined;
 }
-export default function promiseWithTimeout<T>(promise: Promise<T>, timeout: number, { error }: PromiseWithTimeoutConfig): Promise<unknown>;
+export default function promiseWithTimeout<T>(promise: Promise<T>, timeout: number, { error, onTimeout }: PromiseWithTimeoutConfig): Promise<unknown>;

package/dist/global/promise-with-timeout.js

@@ -2,10 +2,14 @@
 // https://github.com/github/fetch/issues/175#issuecomment-284787564
 function promiseWithTimeout(promise, timeout, _ref) {
   let {
-    error
+    error,
+    onTimeout = () => {}
   } = _ref;
   return new Promise((resolve, reject) => {
-    setTimeout(() => reject(error || new Error('Timeout')), timeout);
+    setTimeout(() => {
+      onTimeout();
+      reject(error || new Error('Timeout'));
+    }, timeout);
     promise.then(resolve, reject);
   });
 }

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

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 

package/dist/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/dist/global/react-render-adapter.js

@@ -0,0 +1,41 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { render as render$1, unmountComponentAtNode as unmountComponentAtNode$1, hydrate as hydrate$1 } from 'react-dom';
+
+/* eslint-disable import/no-mutable-exports */
+
+let render = render$1;
+let unmountComponentAtNode = unmountComponentAtNode$1;
+let hydrate = hydrate$1;
+/* eslint-enable */
+
+function setClient(_ref) {
+  let {
+    createRoot,
+    hydrateRoot
+  } = _ref;
+  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 => {
+    var _roots$get;
+
+    return (_roots$get = roots.get(container)) === null || _roots$get === void 0 ? void 0 : _roots$get.unmount();
+  };
+
+  hydrate = (element, container) => {
+    const root = hydrateRoot(container, element);
+    roots.set(container, root);
+  };
+}
+
+export { hydrate, render, setClient, unmountComponentAtNode };

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

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, RefAttributes } from 'react';
 export interface RerenderableComponent<P, S> extends Component<P, S> {
     node?: HTMLElement | null;
 }
@@ -13,18 +13,14 @@ export interface RerenderableComponentClass<P, S> {
  */
 export default function rerenderHOC<P, S>(ComposedComponent: RerenderableComponentClass<P, S>): {
     new (props: P): {
-        _propsCache: Readonly<P> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
-        rerender(props?: Partial<P>, callback?: (() => void) | undefined): void | Element | Component<P, any, any>;
+        _propsCache: P & RefAttributes<unknown>;
+        rerender(props?: Partial<P>, callback?: (() => void) | undefined): void;
         node?: HTMLElement | null | undefined;
-        context: any;
+        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> & Readonly<{
-            children?: import("react").ReactNode;
-        }>;
+        readonly props: Readonly<P>;
         state: Readonly<S>;
         refs: {
             [key: string]: import("react").ReactInstance;

package/dist/global/rerender-hoc.js

@@ -1,6 +1,9 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { render } from './react-render-adapter.js';
+import composeRefs from './composeRefs.js';
+import 'react-dom';
 
 /**
  * Wraps a component to add a "rerender" method
@@ -28,12 +31,13 @@ function rerenderHOC(ComposedComponent) {
         container = (_this$node = this.node) === null || _this$node === void 0 ? void 0 : _this$node.parentNode;
       } finally {
         if (!container || !(container instanceof Element)) {
-          throw new Error(`${this.constructor.name} component isn't mounted`);
+          throw new Error("".concat(this.constructor.name, " component isn't mounted"));
         }
       }
 
       this._propsCache = Object.assign({}, this.props, this._propsCache, props);
-      return render( /*#__PURE__*/createElement(this.constructor, this._propsCache), container, callback);
+      this._propsCache.ref = composeRefs(this._propsCache.ref, callback);
+      render( /*#__PURE__*/createElement(this.constructor, this._propsCache), container);
     }
 
   };

package/dist/global/theme.d.ts

@@ -1,26 +1,13 @@
-import React, { RefAttributes, ExoticComponent, PropsWithoutRef, FunctionComponent } from 'react';
+import React, { HTMLAttributes } from 'react';
 declare enum Theme {
+    AUTO = "auto",
     LIGHT = "light",
     DARK = "dark"
 }
-export declare const ThemeContext: React.Context<Theme | null>;
-export interface ThemeOuterProps {
-    theme?: Theme | null | undefined;
+export declare function useTheme(): Theme.LIGHT | Theme.DARK;
+export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+    theme?: Theme;
+    passToPopups?: boolean;
 }
-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 declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
 export default Theme;