@jetbrains/ring-ui 5.0.89 → 5.0.90

package/components/button-ng/button-ng.examples.js

@@ -8,7 +8,6 @@ import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 import IconNG from '../icon-ng/icon-ng';
 import CheckboxNG from '../checkbox-ng/checkbox-ng';
 import Theme from '../global/theme';
-import styles from '../global/variables_dark.css';
 
 import ButtonNG from './button-ng';
 
@@ -87,8 +86,6 @@ export const basic = () => {
   return `
     <div ng-controller="testCtrl">
       <div class="buttons">${renderAllButtons()}</div>
-
-      <div class="buttons ${styles.dark}">${renderAllButtons()}</div>
     </div>
   `;
 

package/components/global/theme.d.ts

@@ -1,14 +1,21 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactElement } from 'react';
 declare enum Theme {
     AUTO = "auto",
     LIGHT = "light",
     DARK = "dark"
 }
 export declare function useTheme(): Theme.LIGHT | Theme.DARK;
+export declare function useThemeClasses(theme: Theme): string;
+export interface WithThemeClassesProps {
+    theme: Theme;
+    children: (classes: string) => ReactElement;
+}
+export declare function WithThemeClasses({ theme, children }: WithThemeClassesProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
 export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
     theme?: Theme;
     passToPopups?: boolean;
+    target?: HTMLElement;
 }
 export declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
 export default Theme;

package/components/global/theme.js

@@ -22,6 +22,18 @@ export function useTheme() {
     }, []);
     return dark ? Theme.DARK : Theme.LIGHT;
 }
+export function useThemeClasses(theme) {
+    const systemTheme = useTheme();
+    const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+    return classNames({
+        [styles.dark]: resolvedTheme === Theme.DARK,
+        [defaultStyles.light]: resolvedTheme === Theme.LIGHT
+    });
+}
+export function WithThemeClasses({ theme, children }) {
+    const themeClasses = useThemeClasses(theme);
+    return children(themeClasses);
+}
 export function applyTheme(theme, container) {
     if (theme === Theme.DARK) {
         container.classList.remove(defaultStyles.light);
@@ -34,20 +46,22 @@ export function applyTheme(theme, container) {
         container.classList.add(defaultStyles.light);
     }
 }
-export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, ...restProps }, ref) {
+export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.AUTO, className, passToPopups, children, target, ...restProps }, ref) {
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
     const id = useMemo(() => getUID('popups-with-theme-'), []);
-    const themeClasses = classNames({
-        [styles.dark]: resolvedTheme === Theme.DARK,
-        [defaultStyles.light]: resolvedTheme === Theme.LIGHT
-    });
+    useEffect(() => {
+        if (target != null) {
+            applyTheme(resolvedTheme, target);
+        }
+    }, [resolvedTheme, target]);
+    const themeClasses = useThemeClasses(theme);
     const parentTarget = useContext(PopupTargetContext);
-    return (<div ref={ref} className={classNames(className, themeClasses)} {...restProps}>{passToPopups
+    return (<div ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
             ? (<PopupTarget id={id}>
-              {target => (<>
+              {popupTarget => (<>
                   {children}
-                  {createPortal(<div className={themeClasses}>{target}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
+                  {createPortal(<div className={themeClasses}>{popupTarget}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
                 </>)}
             </PopupTarget>)
             : children}

package/components/global/variables_dark.css

@@ -11,8 +11,8 @@
   --ring-icon-color: rgb(var(--ring-icon-components)); /* #80929d */
   --ring-icon-secondary-components: 128, 146, 157;
   --ring-icon-secondary-color: rgb(var(--ring-icon-secondary-components)); /* #80929d */
-  --ring-border-disabled-components: 71, 81, 89;
-  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #475159 */
+  --ring-border-disabled-components: 54, 54, 54;
+  --ring-border-disabled-color: rgb(var(--ring-border-disabled-components)); /* #363636 */
   --ring-border-unselected-disabled-components: 54, 54, 54;
   --ring-border-unselected-disabled-color: rgb(var(--ring-border-unselected-disabled-components)); /* #363636 */
   --ring-icon-disabled-components: 80, 82, 83;
@@ -59,8 +59,8 @@
   --ring-heading-color: var(--ring-text-color);
   --ring-secondary-components: 128, 146, 157;
   --ring-secondary-color: rgb(var(--ring-secondary-components)); /* #80929d */
-  --ring-disabled-components: 128, 146, 157;
-  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #80929d */
+  --ring-disabled-components: 81, 95, 104;
+  --ring-disabled-color: rgb(var(--ring-disabled-components)); /* #515F68 */
 
   /* Background */
   --ring-content-background-components: 35, 39, 43;
@@ -85,10 +85,10 @@
   --ring-warning-background-color: rgb(var(--ring-warning-background-components)); /* #593d01 */
   --ring-added-background-components: 54, 89, 71;
   --ring-added-background-color: rgb(var(--ring-added-background-components)); /* #365947 */
-  --ring-disabled-background-components: 48, 48, 48;
-  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #303030 */
-  --ring-disabled-selected-background-components: 54, 54, 54;
-  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #363636 */
+  --ring-disabled-background-components: 54, 54, 54;
+  --ring-disabled-background-color: rgb(var(--ring-disabled-background-components)); /* #363636 */
+  --ring-disabled-selected-background-components: 44, 47, 51;
+  --ring-disabled-selected-background-color: rgb(var(--ring-disabled-selected-background-components)); /* #2C2F33 */
   --ring-button-danger-active-components: 38, 8, 10;
   --ring-button-danger-active-color: rgb(var(--ring-button-danger-active-components)); /* #26080a */
   --ring-button-primary-background-components: 0, 126, 229;

package/components/header/header.css

@@ -11,7 +11,8 @@
   --ring-header-link-color: var(--ring-link-color);
 }
 
-.dark {
+.dark,
+:global(.ring-ui-theme-dark) {
   --ring-header-link-color: var(--ring-text-color);
 }
 

package/components/loader-inline/loader-inline.css

@@ -8,7 +8,8 @@
   --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
 }
 
-.dark {
+.dark,
+:global(.ring-ui-theme-dark) {
   /* stylelint-disable-next-line color-no-hex */
   --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;
 }

package/components/message/message.js

@@ -6,7 +6,7 @@ import Popup from '../popup/popup';
 import { Directions } from '../popup/popup.consts';
 import Icon from '../icon/icon';
 import Button from '../button/button';
-import Theme, { ThemeProvider } from '../global/theme';
+import Theme, { ThemeProvider, WithThemeClasses } from '../global/theme';
 import darkStyles from '../global/variables_dark.css';
 import styles from './message.css';
 /**
@@ -96,17 +96,19 @@ export default class Message extends Component {
             ? [this.props.direction]
             : this.props.directions;
         const { direction } = this.state;
-        return (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classes} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
-        <ThemeProvider theme={theme} passToPopups>
-          {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
+        return (<WithThemeClasses theme={theme}>
+        {themeClasses => (<Popup ref={this.popupRef} hidden={false} directions={popupDirections} className={classNames(classes, themeClasses)} offset={UNIT * 2} onDirectionChange={this._onDirectionChange} {...popupProps}>
+            <ThemeProvider theme={theme} passToPopups>
+              {direction && (<div className={tailClasses} style={getTailOffsets(this.getTailOffset())[direction]}/>)}
 
-          {icon && <Icon className={styles.icon} glyph={icon}/>}
-          {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
-          {children && <div className={styles.description}>{children}</div>}
-          {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations.gotIt}</Button>)}
-          {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
-        </ThemeProvider>
-      </Popup>);
+              {icon && <Icon className={styles.icon} glyph={icon}/>}
+              {title && <h1 data-test="rgMessageTitle" className={styles.title}>{title}</h1>}
+              {children && <div className={styles.description}>{children}</div>}
+              {(onClose || buttonProps) && (<Button className={styles.button} onClick={onClose} primary {...buttonProps}>{translations.gotIt}</Button>)}
+              {onDismiss && <Button onClick={onDismiss} text>{translations.dismiss}</Button>}
+            </ThemeProvider>
+          </Popup>)}
+      </WithThemeClasses>);
     }
 }
 Message.propTypes = {

package/components/place-under-ng/place-under-ng.examples.js

@@ -68,8 +68,7 @@ basic.parameters = {
     right: 0;
     width: 50%;
     padding: 16px;
-    background-color: #666;
-    color: #fff;
+    background-color: var(--ring-selected-background-color);
   }
 
   .head {
@@ -81,14 +80,14 @@ basic.parameters = {
     top: 0;
     width: 100%;
     padding: 16px;
-    background-color: #CCC;
+    background-color: var(--ring-hover-background-color);
   }
 
   .scrollable {
     height: 1000px;
     padding: 16px;
     padding-top: 64px;
-    background-color: #EEE;
+    background-color: var(--ring-sidebar-background-color);
   }
 </style>
       `

package/components/progress-bar/progress-bar.css

@@ -8,7 +8,8 @@
   --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.6);
 }
 
-.dark {
+.dark,
+:global(.ring-ui-theme-dark) {
   --ring-progress-bar-background-color: rgba(255, 255, 255, 0.3);
   --ring-progress-bar-line-background-color: rgba(255, 255, 255, 0.4);
 }

package/components/progress-bar-ng/progress-bar-ng.examples.js

@@ -1,7 +1,6 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import darkStyles from '../global/variables_dark.css';
 
 import RingProgressBar from './progress-bar-ng';
 
@@ -34,9 +33,6 @@ export const basic = () => {
         <div style="height: 25px; padding-top: 25px;">
           <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>
-        <div class="${darkStyles.dark}" style="height: 25px; background: var(--ring-content-background-color); padding-top: 25px;">
-          <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
-        </div>
         <div style="height: 25px; background: #F0F0F0; padding-top: 25px;">
           <rg-progress-bar label="'Progress'" value="ctrl.value" class="example-progress"></rg-progress-bar>
         </div>

package/components/table-legacy-ng/table-legacy-ng.examples.js

@@ -173,7 +173,6 @@ export const withSidebar = () => {
             <rg-legacy-table-title>Avatar</rg-legacy-table-title>
             <rg-legacy-table-title>Check</rg-legacy-table-title>
             <rg-legacy-table-title active>Name</rg-legacy-table-title>
-            <rg-legacy-table-title></rg-legacy-table-title>
           </rg-legacy-table-header>
 
           <rg-legacy-table-row row-item="item" ng-repeat="item in ctrl.itemsArray">
@@ -183,10 +182,6 @@ export const withSidebar = () => {
             </rg-legacy-table-column>
             <rg-legacy-table-checkbox-cell aria-label="Toggle row checked state"></rg-legacy-table-checkbox-cell>
             <rg-legacy-table-column limited>{{::item.name }}</rg-legacy-table-column>
-            <rg-legacy-table-column>
-              <rg-sidebar-toggle-button ng-show="item.active"
-                model="ctrl.isShowSideBar"></rg-sidebar-toggle-button>
-            </rg-legacy-table-column>
           </rg-legacy-table-row>
         </rg-legacy-table>
       </div>

package/components/tabs/tabs.css

@@ -9,7 +9,8 @@
   --ring-selected-tab-color: var(--ring-text-color);
 }
 
-.dark {
+.dark,
+:global(.ring-ui-theme-dark) {
   --ring-selected-tab-color: var(--ring-main-color);
 }
 

package/components/tabs-ng/tabs-ng.examples.js

@@ -1,7 +1,6 @@
 import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import darkStyles from '../global/variables_dark.css';
 
 import RingTabs from './tabs-ng';
 
@@ -29,36 +28,3 @@ export const basic = () => {
 };
 
 basic.storyName = 'basic';
-
-export const dark = () => {
-  angular.module(APP_NAME, [RingTabs]);
-
-  return `
-    <div class="${darkStyles.dark}">
-      <rg-tabs class="container container_tabs">
-        <rg-tabs-pane x-title="Settings">Settings tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Access" counter="7">Access tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Disabled" ng-disabled="true" counter="8">Inaccessible tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Members">Members tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Members" counter="666">Members 666 tab content</rg-tabs-pane>
-      </rg-tabs>
-    </div>
-    `;
-};
-
-dark.storyName = 'dark';
-
-dark.parameters = {
-  storyStyles: `
-    <style>
-      body {
-        margin: 0 !important;
-      }
-
-      .container {
-        padding: 8px;
-        background: var(--ring-content-background-color);
-        color: var(--ring-text-color);
-      }
-    </style>`
-};

package/dist/_helpers/theme.js

@@ -26,6 +26,22 @@ function useTheme() {
   }, []);
   return dark ? Theme.DARK : Theme.LIGHT;
 }
+function useThemeClasses(theme) {
+  const systemTheme = useTheme();
+  const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
+  return classNames({
+    [modules_59717246.dark]: resolvedTheme === Theme.DARK,
+    [modules_6381a4b3.light]: resolvedTheme === Theme.LIGHT
+  });
+}
+function WithThemeClasses(_ref) {
+  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);
@@ -37,31 +53,34 @@ function applyTheme(theme, container) {
     container.classList.add(modules_6381a4b3.light);
   }
 }
-const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref, ref) {
+const ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
   let {
     theme = Theme.AUTO,
     className,
     passToPopups,
     children,
+    target,
     ...restProps
-  } = _ref;
+  } = _ref2;
   const systemTheme = useTheme();
   const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
   const id = useMemo(() => getUID('popups-with-theme-'), []);
-  const themeClasses = classNames({
-    [modules_59717246.dark]: resolvedTheme === Theme.DARK,
-    [modules_6381a4b3.light]: resolvedTheme === Theme.LIGHT
-  });
+  useEffect(() => {
+    if (target != null) {
+      applyTheme(resolvedTheme, target);
+    }
+  }, [resolvedTheme, target]);
+  const themeClasses = useThemeClasses(theme);
   const parentTarget = useContext(PopupTargetContext);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: classNames(className, themeClasses)
+    className: target != null ? undefined : classNames(className, themeClasses)
   }, restProps), passToPopups ? /*#__PURE__*/React.createElement(PopupTarget, {
     id: id
-  }, target => /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+  }, popupTarget => /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
     className: themeClasses
-  }, target), parentTarget && getPopupContainer(parentTarget) || document.body))) : children);
+  }, popupTarget), parentTarget && getPopupContainer(parentTarget) || document.body))) : children);
 });
 var Theme$1 = Theme;
 
-export { Theme$1 as T, ThemeProvider as a, applyTheme as b, modules_59717246 as m, useTheme as u };
+export { Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, useThemeClasses as b, applyTheme as c, modules_59717246 as m, useTheme as u };

package/dist/global/theme.d.ts

@@ -1,14 +1,21 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactElement } from 'react';
 declare enum Theme {
     AUTO = "auto",
     LIGHT = "light",
     DARK = "dark"
 }
 export declare function useTheme(): Theme.LIGHT | Theme.DARK;
+export declare function useThemeClasses(theme: Theme): string;
+export interface WithThemeClassesProps {
+    theme: Theme;
+    children: (classes: string) => ReactElement;
+}
+export declare function WithThemeClasses({ theme, children }: WithThemeClassesProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare function applyTheme(theme: Theme.DARK | Theme.LIGHT, container: HTMLElement): void;
 export interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
     theme?: Theme;
     passToPopups?: boolean;
+    target?: HTMLElement;
 }
 export declare const ThemeProvider: React.ForwardRefExoticComponent<ThemeProviderProps & React.RefAttributes<HTMLDivElement>>;
 export default Theme;

package/dist/global/theme.js

@@ -4,7 +4,7 @@ import 'classnames';
 import 'react-dom';
 import '../popup/popup.target.js';
 import '../popup/popup.js';
-export { a as ThemeProvider, b as applyTheme, T as default, u as useTheme } from '../_helpers/theme.js';
+export { a as ThemeProvider, W as WithThemeClasses, c as applyTheme, T as default, u as useTheme, b as useThemeClasses } from '../_helpers/theme.js';
 import './get-uid.js';
 import 'prop-types';
 import './schedule-raf.js';

package/dist/message/message.js

@@ -7,7 +7,7 @@ import Popup from '../popup/popup.js';
 import { Directions } from '../popup/popup.consts.js';
 import Icon from '../icon/icon.js';
 import { Button } from '../button/button.js';
-import { T as Theme, m as modules_59717246, a as ThemeProvider } from '../_helpers/theme.js';
+import { T as Theme, m as modules_59717246, W as WithThemeClasses, a as ThemeProvider } from '../_helpers/theme.js';
 import 'react-dom';
 import '../global/get-uid.js';
 import '../global/schedule-raf.js';
@@ -159,11 +159,13 @@ class Message extends Component {
     const {
       direction
     } = this.state;
-    return /*#__PURE__*/React.createElement(Popup, _extends({
+    return /*#__PURE__*/React.createElement(WithThemeClasses, {
+      theme: theme
+    }, themeClasses => /*#__PURE__*/React.createElement(Popup, _extends({
       ref: this.popupRef,
       hidden: false,
       directions: popupDirections,
-      className: classes,
+      className: classNames(classes, themeClasses),
       offset: UNIT * 2,
       onDirectionChange: this._onDirectionChange
     }, popupProps), /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -187,7 +189,7 @@ class Message extends Component {
     }, buttonProps), translations.gotIt), onDismiss && /*#__PURE__*/React.createElement(Button, {
       onClick: onDismiss,
       text: true
-    }, translations.dismiss)));
+    }, translations.dismiss))));
   }
 }
 _defineProperty(Message, "defaultProps", {