@jetbrains/ring-ui 5.0.0-beta.3 → 5.0.0-beta.7

package/dist/data-list/item.js

@@ -5,8 +5,8 @@ import chevronRightIcon from '@jetbrains/icons/chevron-right';
 import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import Link from '../link/link.js';
 import Text from '../text/text.js';
-import ThemedLoaderInline from '../loader-inline/loader-inline.js';
-import ThemedButton from '../button/button.js';
+import LoaderInline from '../loader-inline/loader-inline.js';
+import { Button } from '../button/button.js';
 import Selection from '../table/selection.js';
 import { m as modules_09d014b4, T as Title } from '../_helpers/title.js';
 import 'focus-visible';
@@ -15,20 +15,14 @@ import '../global/memoize.js';
 import '../global/data-tests.js';
 import '../link/clickableLink.js';
 import '../_helpers/link.js';
-import '../global/theme.js';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
-import '../global/get-uid.js';
+import '../_helpers/loader-inline.js';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../global/focus-sensor-hoc.js';
 import '../global/prop-types.js';
@@ -37,6 +31,7 @@ import '../checkbox/checkbox.js';
 import '@jetbrains/icons/checkmark';
 import '@jetbrains/icons/remove-10px';
 import '../_helpers/checkbox.js';
+import '../global/get-uid.js';
 
 var moreLessButtonStates;
 
@@ -140,7 +135,7 @@ class Item extends PureComponent {
         inherit: true,
         pseudo: true,
         onClick: this.onShowMore
-      }, 'Show more'), showMoreLessButton === moreLessButtonStates.MORE_LOADING && /*#__PURE__*/React.createElement(ThemedLoaderInline, {
+      }, 'Show more'), showMoreLessButton === moreLessButtonStates.MORE_LOADING && /*#__PURE__*/React.createElement(LoaderInline, {
         className: modules_09d014b4.showMoreLoader
       }));
     } else if (showMoreLessButton === moreLessButtonStates.LESS) {
@@ -157,7 +152,7 @@ class Item extends PureComponent {
 
     if (collapsible) {
       if (collapsed) {
-        collapserExpander = /*#__PURE__*/React.createElement(ThemedButton, {
+        collapserExpander = /*#__PURE__*/React.createElement(Button, {
           title: "Expand",
           onClick: onExpand,
           icon: chevronRightIcon,
@@ -166,7 +161,7 @@ class Item extends PureComponent {
           "data-test": "ring-data-list-expand"
         });
       } else {
-        collapserExpander = /*#__PURE__*/React.createElement(ThemedButton, {
+        collapserExpander = /*#__PURE__*/React.createElement(Button, {
           title: "Collapse",
           onClick: onCollapse,
           icon: chevronDownIcon,

package/dist/data-list-ng/data-list-ng.js

@@ -34,13 +34,7 @@ import '../link/clickableLink.js';
 import '../_helpers/link.js';
 import '../text/text.js';
 import '../loader-inline/loader-inline.js';
-import '../global/theme.js';
-import '../_helpers/inject-styles.js';
-import '../global/conic-gradient.js';
-import 'conic-gradient';
-import '../global/supports-css.js';
-import '../global/inject-styles.js';
-import '../global/radial-gradient-mask.js';
+import '../_helpers/loader-inline.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
@@ -48,6 +42,7 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../_helpers/title.js';
 import '../checkbox/checkbox.js';

package/dist/date-picker/date-input.js

@@ -2,11 +2,11 @@ import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import ThemedInput from '../input/input.js';
+import { Input } from '../input/input.js';
+import { ControlsHeight } from '../global/controls-height.js';
 import { dateType } from './consts.js';
 import { m as modules_0c7b7d96 } from '../_helpers/date-picker.js';
 import '@jetbrains/icons/close';
-import '../global/theme.js';
 import '../global/prop-types.js';
 import '../button/button.js';
 import 'focus-visible';
@@ -124,9 +124,10 @@ class DateInput extends React.PureComponent {
     })();
 
     const classes = classNames(modules_0c7b7d96.filter, modules_0c7b7d96[`${name}Input`], divider && modules_0c7b7d96[`${name}InputWithDivider`], 'ring-js-shortcuts');
-    return /*#__PURE__*/React.createElement(ThemedInput, {
+    return /*#__PURE__*/React.createElement(Input, {
       autoComplete: "off",
       borderless: true,
+      height: ControlsHeight.L,
       "data-name": name,
       inputRef: this.inputRef,
       className: classes,

package/dist/date-picker/date-picker.js

@@ -71,12 +71,12 @@ import './weekdays.js';
 import 'date-fns/add';
 import '../input/input.js';
 import '@jetbrains/icons/close';
-import '../global/theme.js';
 import '../global/prop-types.js';
 import '../button/button.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../global/composeRefs.js';
 import '../_helpers/input.js';

package/dist/date-picker/date-popup.js

@@ -21,12 +21,12 @@ import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../input/input.js';
 import '@jetbrains/icons/close';
-import '../global/theme.js';
 import '../global/prop-types.js';
 import '../button/button.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import '../global/get-uid.js';
 import '../global/composeRefs.js';

package/dist/dialog/dialog.js

@@ -9,7 +9,7 @@ import getUID from '../global/get-uid.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
 import TabTrap from '../tab-trap/tab-trap.js';
-import ThemedButton from '../button/button.js';
+import { Button } from '../button/button.js';
 import { PopupTarget } from '../popup/popup.target.js';
 import { p as preventerFactory, m as modules_5e9b8c03 } from '../_helpers/dialog__body-scroll-preventer.js';
 import '../island/adaptive-island-hoc.js';
@@ -32,8 +32,8 @@ import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../global/memoize.js';
-import '../global/theme.js';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 import 'scrollbar-width';
 
@@ -151,7 +151,7 @@ class Dialog extends PureComponent {
       "data-test": "ring-dialog",
       role: "dialog",
       "aria-label": label
-    }, children, showCloseButton && /*#__PURE__*/React.createElement(ThemedButton, {
+    }, children, showCloseButton && /*#__PURE__*/React.createElement(Button, {
       icon: closeIcon,
       "data-test": "ring-dialog-close-button",
       className: classNames(modules_5e9b8c03.closeButton, {

package/dist/dialog-ng/dialog-ng.js

@@ -18,12 +18,12 @@ import '../icon-ng/icon-ng.js';
 import '../icon/icon__constants.js';
 import '../template-ng/template-ng.js';
 import '../_helpers/icon.js';
-import '../global/theme.js';
-import 'react';
 import '../_helpers/button__classes.js';
+import '../global/controls-height.js';
+import 'react';
 import 'scrollbar-width';
 
-var modules_b378ce5a = {"unit":"8px","dialogContainer":"dialogContainer_rui_6e55","wide":"wide_rui_6e55","autoWidth":"autoWidth_rui_6e55","header":"header_rui_6e55","inSidebar":"inSidebar_rui_6e55","scrollableWrapper":"scrollableWrapper_rui_6e55","content":"content_rui_6e55","error":"error_rui_6e55","footer":"footer_rui_6e55","footerDescription":"footerDescription_rui_6e55","footerItems":"footerItems_rui_6e55","footerItem":"footerItem_rui_6e55"};
+var modules_b378ce5a = {"unit":"8px","dialogContainer":"dialogContainer_rui_a094","wide":"wide_rui_a094","autoWidth":"autoWidth_rui_a094","header":"header_rui_a094","inSidebar":"inSidebar_rui_a094","scrollableWrapper":"scrollableWrapper_rui_a094","content":"content_rui_a094","error":"error_rui_a094","footer":"footer_rui_a094","footerDescription":"footerDescription_rui_a094","footerItems":"footerItems_rui_a094","footerItem":"footerItem_rui_a094"};
 
 rgDialogContentDirective.$inject = ["$compile", "$q"];
 rgDialogDirective.$inject = ["$timeout"];

package/dist/dialog-ng/dialog-ng__template.js

@@ -3,6 +3,7 @@ var dialogTemplate = `<div
   ng-class="[!dialog.inSidebar && dialog.dialogStyles.container]"
   ng-click="dialog.handleClick($event)"
   ng-attr-data-portaltarget="{{!dialog.inSidebar  ? 'dialog-ng-popup-container' : null}}"
+  ng-attr-data-test="ring-dialog-container"
 >
   <div ng-class="[dialog.dialogStyles.innerContainer]">
     <div data-anchor="dialog-container"

package/dist/docked-panel-ng/docked-panel-ng.js

@@ -3,7 +3,7 @@ import scheduleRAF from '../global/schedule-raf.js';
 import { getDocumentScrollTop, getWindowHeight } from '../global/dom.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
 
-var modules_655b40c7 = {"unit":"8px","dockedPanel":"dockedPanel_rui_46a7","fixed":"fixed_rui_46a7"};
+var modules_655b40c7 = {"unit":"8px","dockedPanel":"dockedPanel_rui_be55","fixed":"fixed_rui_be55"};
 
 const scheduleAction = scheduleRAF();
 /**

package/dist/dropdown/anchor.js

@@ -12,6 +12,6 @@ import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
 import '../global/memoize.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.js

@@ -15,8 +15,8 @@ import '../icon/icon__svg.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

@@ -50,7 +50,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';

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

@@ -18,7 +18,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_5695","errorBubbleWrapper":"errorBubbleWrapper_rui_5695","errorBubble":"errorBubble_rui_5695"};
 
 /**
  * @name Error Bubble

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/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;

package/dist/global/theme.js

@@ -1,62 +1,7 @@
-import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
-import React, { createContext, memo, forwardRef } from 'react';
-
-var Theme;
-
-(function (Theme) {
-  Theme["LIGHT"] = "light";
-  Theme["DARK"] = "dark";
-})(Theme || (Theme = {}));
-
-const ThemeContext = /*#__PURE__*/createContext(null); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-const getDisplayName = Component => {
-  var _ref, _Component$name;
-
-  return (_ref = (_Component$name = Component.name) !== null && _Component$name !== void 0 ? _Component$name : Component.displayName) !== null && _ref !== void 0 ? _ref : 'Component';
-};
-
-const withTheme = function () {
-  let defaultTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Theme.LIGHT;
-  return ComposedComponent => {
-    // eslint-disable-next-line react/display-name
-    const WithTheme = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((_ref2, ref) => {
-      let {
-        theme,
-        ...restProps
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, contextTheme => {
-        const usedTheme = theme || contextTheme || defaultTheme;
-        const Component = ComposedComponent;
-        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-          value: usedTheme
-        }, /*#__PURE__*/React.createElement(Component, _extends({
-          ref: ref // https://github.com/Microsoft/TypeScript/issues/28938#issuecomment-450636046
-
-        }, restProps, {
-          theme: usedTheme
-        })));
-      });
-    }));
-    const WithThemeAndStatics = Object.assign(WithTheme, ComposedComponent, {
-      displayName: `withTheme(${getDisplayName(ComposedComponent)})`,
-      propTypes: null
-    });
-    return WithThemeAndStatics;
-  };
-};
-
-function applyTheme(params) {
-  if (!params || !params.element || !params.currentTheme) {
-    return;
-  }
-
-  if (params.prevTheme) {
-    params.element.classList.remove(params.prevTheme);
-  }
-
-  params.element.classList.add(params.currentTheme);
-}
-var Theme$1 = Theme;
-
-export { ThemeContext, applyTheme, Theme$1 as default, withTheme };
+import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'react';
+import 'classnames';
+import '../popup/popup.target.js';
+export { a as ThemeProvider, T as default, u as useTheme } from '../_helpers/theme.js';
+import './get-uid.js';
+import 'prop-types';

package/dist/global/variables.d.ts

@@ -2,15 +2,13 @@ import type { Property } from 'csstype';
 export interface RingCSSProperties {
     '--ring-unit'?: string;
     '--ring-line-color'?: Property.BorderColor;
-    '--ring-dark-line-color'?: Property.BorderColor;
     '--ring-borders-color'?: Property.BorderColor;
-    '--ring-dark-borders-color'?: Property.BorderColor;
     '--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-dark-border-hover-color'?: Property.BorderColor;
     '--ring-icon-hover-color'?: Property.Color;
     '--ring-main-color'?: Property.Color;
     '--ring-main-hover-color'?: Property.Color;
@@ -23,6 +21,8 @@ export interface RingCSSProperties {
     '--ring-popup-shadow-color'?: Property.Color;
     '--ring-message-shadow-color'?: Property.Color;
     '--ring-pinned-shadow-color'?: Property.Color;
+    '--ring-button-danger-hover-color'?: Property.Color;
+    '--ring-button-primary-border-color'?: Property.Color;
     '--ring-search-color'?: Property.Color;
     '--ring-hint-color'?: Property.Color;
     '--ring-link-color'?: Property.Color;
@@ -31,25 +31,27 @@ export interface RingCSSProperties {
     '--ring-warning-color'?: Property.Color;
     '--ring-success-color'?: Property.Color;
     '--ring-text-color'?: Property.Color;
-    '--ring-dark-text-color'?: Property.Color;
+    '--ring-active-text-color'?: Property.Color;
+    '--ring-white-text-color'?: Property.Color;
     '--ring-heading-color'?: Property.Color;
     '--ring-secondary-color'?: Property.Color;
-    '--ring-dark-secondary-color'?: Property.Color;
     '--ring-disabled-color'?: Property.Color;
-    '--ring-dark-disabled-color'?: Property.Color;
-    '--ring-dark-active-color'?: Property.Color;
     '--ring-content-background-color'?: Property.BackgroundColor;
     '--ring-popup-background-color'?: Property.BackgroundColor;
     '--ring-sidebar-background-color'?: Property.BackgroundColor;
     '--ring-selected-background-color'?: Property.BackgroundColor;
     '--ring-hover-background-color'?: Property.BackgroundColor;
-    '--ring-dark-selected-background-color'?: Property.BackgroundColor;
     '--ring-message-background-color'?: Property.BackgroundColor;
     '--ring-navigation-background-color'?: Property.BackgroundColor;
     '--ring-tag-background-color'?: Property.BackgroundColor;
+    '--ring-tag-hover-background-color'?: Property.BackgroundColor;
     '--ring-removed-background-color'?: Property.BackgroundColor;
     '--ring-warning-background-color'?: Property.BackgroundColor;
     '--ring-added-background-color'?: Property.BackgroundColor;
+    '--ring-disabled-background-color'?: Property.BackgroundColor;
+    '--ring-button-danger-active-color'?: Property.BackgroundColor;
+    '--ring-button-loader-background'?: Property.BackgroundColor;
+    '--ring-button-primary-background-color'?: Property.BackgroundColor;
     '--ring-code-background-color'?: Property.BackgroundColor;
     '--ring-code-color'?: Property.Color;
     '--ring-code-comment-color'?: Property.Color;