@jetbrains/ring-ui-built 6.1.1-beta.0 → 7.0.0-beta.10

package/components/_helpers/theme.js

@@ -1,5 +1,6 @@
-import { i as _slicedToArray, c as _objectWithoutProperties, d as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import { useState, useEffect, forwardRef, useMemo, useContext } from 'react';
+import { a as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { createContext, useState, useEffect, forwardRef, useMemo, useContext } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { PopupTargetContext, PopupTarget } from '../popup/popup.target.js';
@@ -11,92 +12,101 @@ var modules_6381a4b3 = {"light":"light_rui_2ac4"};
 
 var modules_59717246 = {"dark":"dark_rui_f090"};
 
-var _excluded = ["theme", "className", "passToPopups", "children", "target"];
+const _excluded = ["theme", "className", "passToPopups", "children", "WrapperComponent", "target"];
 var Theme;
 (function (Theme) {
   Theme["AUTO"] = "auto";
   Theme["LIGHT"] = "light";
   Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
-var darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
+const ThemeContext = /*#__PURE__*/createContext({
+  theme: Theme.LIGHT
+});
+const GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
+const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 function useTheme() {
-  var _useState = useState(darkMatcher.matches),
-    _useState2 = _slicedToArray(_useState, 2),
-    dark = _useState2[0],
-    setDark = _useState2[1];
-  useEffect(function () {
-    var onChange = function onChange(e) {
-      return setDark(e.matches);
-    };
+  const [dark, setDark] = useState(darkMatcher.matches);
+  useEffect(() => {
+    const onChange = e => setDark(e.matches);
     darkMatcher.addEventListener('change', onChange);
-    return function () {
-      return darkMatcher.removeEventListener('change', onChange);
-    };
+    return () => darkMatcher.removeEventListener('change', onChange);
   }, []);
   return dark ? Theme.DARK : Theme.LIGHT;
 }
 function useThemeClasses(theme) {
-  var systemTheme = useTheme();
-  var resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+  const systemTheme = useTheme();
+  const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
   return classNames({
     [modules_59717246.dark]: resolvedTheme === Theme.DARK,
+    [GLOBAL_DARK_CLASS_NAME]: resolvedTheme === Theme.DARK,
     [modules_6381a4b3.light]: resolvedTheme === Theme.LIGHT
   });
 }
 function WithThemeClasses(_ref) {
-  var theme = _ref.theme,
-    children = _ref.children;
-  var themeClasses = useThemeClasses(theme);
+  let {
+    theme,
+    children
+  } = _ref;
+  const themeClasses = useThemeClasses(theme);
   return children(themeClasses);
 }
 function applyTheme(theme, container) {
   if (theme === Theme.DARK) {
     container.classList.remove(modules_6381a4b3.light);
     container.classList.add(modules_59717246.dark);
-    container.classList.add('ring-ui-theme-dark');
+    container.classList.add(GLOBAL_DARK_CLASS_NAME);
   } else {
     container.classList.remove(modules_59717246.dark);
-    container.classList.remove('ring-ui-theme-dark');
+    container.classList.remove(GLOBAL_DARK_CLASS_NAME);
     container.classList.add(modules_6381a4b3.light);
   }
 }
-var ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
-  var _ref2$theme = _ref2.theme,
-    theme = _ref2$theme === void 0 ? Theme.AUTO : _ref2$theme,
-    className = _ref2.className,
-    passToPopups = _ref2.passToPopups,
-    _children = _ref2.children,
-    target = _ref2.target,
+const DefaultWrapper = /*#__PURE__*/forwardRef(function Wrapper(props, ref) {
+  return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref
+  }));
+});
+const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
+  let {
+      theme = Theme.AUTO,
+      className,
+      passToPopups,
+      children,
+      WrapperComponent = DefaultWrapper,
+      target
+    } = _ref2,
     restProps = _objectWithoutProperties(_ref2, _excluded);
-  var systemTheme = useTheme();
-  var resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
-  var id = useMemo(function () {
-    return getUID('popups-with-theme-');
-  }, []);
-  useEffect(function () {
+  const systemTheme = useTheme();
+  const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+  const id = useMemo(() => getUID('popups-with-theme-'), []);
+  const themeValue = useMemo(() => ({
+    theme: resolvedTheme
+  }), [resolvedTheme]);
+  useEffect(() => {
     if (target != null) {
       applyTheme(resolvedTheme, target);
     }
   }, [resolvedTheme, target]);
-  var themeClasses = useThemeClasses(theme);
-  var parentTarget = useContext(PopupTargetContext);
-  return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
-    ref: ref,
-    className: target != null ? undefined : classNames(className, themeClasses)
-  }, restProps), {}, {
-    children: passToPopups ? /*#__PURE__*/jsx(PopupTarget, {
-      id: id,
-      children: function children(popupTarget) {
-        return /*#__PURE__*/jsxs(Fragment, {
-          children: [_children, /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+  const themeClasses = useThemeClasses(theme);
+  const parentTarget = useContext(PopupTargetContext);
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: themeValue,
+    children: /*#__PURE__*/jsx(WrapperComponent, _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: target != null ? undefined : classNames(className, themeClasses)
+    }, restProps), {}, {
+      children: passToPopups ? /*#__PURE__*/jsx(PopupTarget, {
+        id: id,
+        children: popupTarget => /*#__PURE__*/jsxs(Fragment, {
+          children: [children, /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
             className: themeClasses,
             children: popupTarget
           }), parentTarget && getPopupContainer(parentTarget) || document.body)]
-        });
-      }
-    }) : _children
-  }));
+        })
+      }) : children
+    }))
+  });
 });
 var Theme$1 = Theme;
 
-export { Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, useThemeClasses as b, applyTheme as c, modules_59717246 as m, useTheme as u };
+export { GLOBAL_DARK_CLASS_NAME as G, Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, ThemeContext as b, useThemeClasses as c, applyTheme as d, modules_59717246 as m, useTheme as u };

package/components/_helpers/title.js

@@ -1,105 +1,80 @@
-import { _ as _defineProperty, a as _inherits, b as _createClass, e as _classCallCheck, f as _callSuper } from './_rollupPluginBabelHelpers.js';
-import 'core-js/modules/es.array.concat.js';
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import focusSensorHOC from '../global/focus-sensor-hoc.js';
 import Checkbox from '../checkbox/checkbox.js';
 import getUID from '../global/get-uid.js';
-import { refObject } from '../global/prop-types.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var modules_09d014b4 = {"height":"i__const_height_0","compensate":"i__const_compensate_1","light":"light_rui_2ac4","dataListWrapper":"dataListWrapper_rui_be4b","dataList":"dataList_rui_be4b","itemContent":"itemContent_rui_be4b","title":"title_rui_be4b","disabledHover":"disabledHover_rui_be4b","titleSelected":"titleSelected_rui_be4b","titleFocused":"titleFocused_rui_be4b","showMore":"showMore_rui_be4b","boxes":"boxes_rui_be4b","checkboxBox":"checkboxBox_rui_be4b","collapseButton":"collapseButton_rui_be4b","collapseIcon":"collapseIcon_rui_be4b","loadingOverlay":"loadingOverlay_rui_be4b","showMoreLoader":"showMoreLoader_rui_be4b"};
 
-var Title = /*#__PURE__*/function (_PureComponent) {
-  function Title() {
-    var _this;
-    _classCallCheck(this, Title);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Title, [].concat(args));
-    _defineProperty(_this, "id", getUID('data-list-title'));
-    _defineProperty(_this, "onCheckboxFocus", function () {
-      _this.props.onFocusRestore();
+class Title extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "id", getUID('data-list-title'));
+    _defineProperty(this, "onCheckboxFocus", () => {
+      this.props.onFocusRestore();
     });
-    _defineProperty(_this, "onCheckboxChange", function () {
-      _this.toggleSelection();
+    _defineProperty(this, "onCheckboxChange", () => {
+      this.toggleSelection();
     });
-    return _this;
   }
-  _inherits(Title, _PureComponent);
-  return _createClass(Title, [{
-    key: "toggleSelection",
-    value: function toggleSelection() {
-      var _this$props = this.props,
-        selectable = _this$props.selectable,
-        selected = _this$props.selected,
-        onSelect = _this$props.onSelect;
-      if (selectable) {
-        onSelect(!selected);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        className = _this$props2.className,
-        title = _this$props2.title,
-        offset = _this$props2.offset,
-        showFocus = _this$props2.showFocus,
-        innerRef = _this$props2.innerRef,
-        selectable = _this$props2.selectable,
-        selected = _this$props2.selected,
-        collapserExpander = _this$props2.collapserExpander;
-      var classes = classNames(className, {
-        [modules_09d014b4.title]: true,
-        [modules_09d014b4.titleFocused]: showFocus,
-        [modules_09d014b4.titleSelected]: selected
-      });
-      return /*#__PURE__*/jsxs("div", {
-        id: this.id,
-        className: classes,
-        style: {
-          paddingLeft: offset
-        },
-        ref: innerRef,
-        children: [/*#__PURE__*/jsxs("div", {
-          className: modules_09d014b4.boxes,
-          children: [selectable && /*#__PURE__*/jsx("div", {
-            className: modules_09d014b4.checkboxBox,
-            children: /*#__PURE__*/jsx(Checkbox, {
-              "aria-labelledby": this.id,
-              className: showFocus ? 'ring-checkbox_focus' : '',
-              checked: selected,
-              onFocus: this.onCheckboxFocus,
-              onChange: this.onCheckboxChange,
-              tabIndex: -1
-            })
-          }), collapserExpander]
-        }), title]
-      });
+  toggleSelection() {
+    const {
+      selectable,
+      selected,
+      onSelect
+    } = this.props;
+    if (selectable) {
+      onSelect(!selected);
     }
-  }]);
-}(PureComponent);
+  }
+  render() {
+    const {
+      className,
+      title,
+      offset,
+      showFocus,
+      innerRef,
+      selectable,
+      selected,
+      collapserExpander
+    } = this.props;
+    const classes = classNames(className, {
+      [modules_09d014b4.title]: true,
+      [modules_09d014b4.titleFocused]: showFocus,
+      [modules_09d014b4.titleSelected]: selected
+    });
+    return /*#__PURE__*/jsxs("div", {
+      id: this.id,
+      className: classes,
+      style: {
+        paddingLeft: offset
+      },
+      ref: innerRef,
+      children: [/*#__PURE__*/jsxs("div", {
+        className: modules_09d014b4.boxes,
+        children: [selectable && /*#__PURE__*/jsx("div", {
+          className: modules_09d014b4.checkboxBox,
+          children: /*#__PURE__*/jsx(Checkbox, {
+            "aria-labelledby": this.id,
+            className: showFocus ? 'ring-checkbox_focus' : '',
+            checked: selected,
+            onFocus: this.onCheckboxFocus,
+            onChange: this.onCheckboxChange,
+            tabIndex: -1
+          })
+        }), collapserExpander]
+      }), title]
+    });
+  }
+}
 _defineProperty(Title, "defaultProps", {
   selectable: false,
   selected: false,
   showFocus: false
 });
-Title.propTypes = {
-  className: PropTypes.string,
-  title: PropTypes.node,
-  offset: PropTypes.number,
-  selectable: PropTypes.bool,
-  selected: PropTypes.bool,
-  onSelect: PropTypes.func.isRequired,
-  showFocus: PropTypes.bool,
-  collapserExpander: PropTypes.node,
-  innerRef: PropTypes.oneOfType([refObject(PropTypes.instanceOf(HTMLDivElement)), PropTypes.func]),
-  // focusSensorHOC
-  onFocusRestore: PropTypes.func.isRequired
-};
 var Title$1 = focusSensorHOC(Title);
 
 export { Title$1 as T, modules_09d014b4 as m };

package/components/alert/alert.d.ts

@@ -1,6 +1,5 @@
 import { PureComponent, ReactNode } from 'react';
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Theme from '../global/theme';
 export declare const ANIMATION_TIME = 500;
 /**
@@ -20,10 +19,17 @@ export declare enum AlertType {
 export interface AlertProps {
     theme: Theme;
     timeout: number;
+    /**
+     * Fires when alert starts closing if timeout is out or user clicks "Close" button
+     */
     onCloseRequest: ((event?: React.MouseEvent<HTMLElement>) => void);
     onClose: (() => void);
     isShaking: boolean;
     isClosing: boolean;
+    /**
+     * Whether an alert is rendered inside an **Alerts** container
+     * or standalone.
+     */
     inline: boolean;
     showWithAnimation: boolean;
     closeable: boolean;
@@ -46,29 +52,6 @@ interface State {
  * **Alert** is a component for displaying contextual notifications. If you want to display a stack of notifications, use **Alerts** instead.
  */
 export default class Alert extends PureComponent<AlertProps, State> {
-    static propTypes: {
-        timeout: PropTypes.Requireable<number>;
-        /**
-         * Fires when alert starts closing if timeout is out or user clicks "Close" button
-         */
-        onCloseRequest: PropTypes.Requireable<(...args: any[]) => any>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        isShaking: PropTypes.Requireable<boolean>;
-        isClosing: PropTypes.Requireable<boolean>;
-        /**
-         * Whether an alert is rendered inside an **Alerts** container
-         * or standalone.
-         */
-        inline: PropTypes.Requireable<boolean>;
-        showWithAnimation: PropTypes.Requireable<boolean>;
-        closeable: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<AlertType>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        captionClassName: PropTypes.Requireable<string>;
-        closeButtonClassName: PropTypes.Requireable<string>;
-        'data-test': PropTypes.Requireable<string>;
-    };
     /** @override */
     static defaultProps: {
         theme: Theme;