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

package/README.md

@@ -1,27 +1,31 @@
 # Ring UI — JetBrains Web UI components
 [![Storybook][storybook-img]][docsite] [![Build Status][ci-img]][ci-bt] [![Storybook][browserstack-img]][browserstack-build-page] [![NPM version][npm-version-img]][npm-package] [![NPM downloads][npm-count-img]][npm-package]
 
-[![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
+[![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://github.com/JetBrains#jetbrains-on-github)
 
 This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.
 
 ## Try now
-* Try the [codesandbox](https://codesandbox.io/s/ring-ui-sandbox-wrigs), based on `create-react-app` tooling, to see and try the UI components
+* Try the [codesandbox](https://codesandbox.io/p/devbox/ring-ui-6-0-demo-l5v5fk), based on `create-react-app` tooling, to see and try the UI components
 * Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component
 
 ## Installation
 
-`npm install @jetbrains/ring-ui`
+* For Quick Start, use pre-built version: 
+  `npm install @jetbrains/ring-ui-built`
+* For complex projects, use "sources" version
+  `npm install @jetbrains/ring-ui`
+  You will then need to include building Ring UI into your WebPack build (see "Building Ring UI from source via Webpack" below)
 
 ### Quick start
 
 The easiest way is to import necessary components as ES modules:
 ```js
 // You need to import RingUI styles once
-import '@jetbrains/ring-ui/dist/style.css';
+import '@jetbrains/ring-ui-built/components/style.css';
 
-import alertService from '@jetbrains/ring-ui/dist/alert-service/alert-service';
-import Button from '@jetbrains/ring-ui/dist/button/button';
+import alertService from '@jetbrains/ring-ui-built/components/alert-service/alert-service';
+import Button from '@jetbrains/ring-ui-built/components/button/button';
 
 ...
 

package/components/alert/alert.css

@@ -1,7 +1,6 @@
 @import "../global/variables.css";
 
 @value link from "../link/link.css";
-@value unit from "../global/global.css";
 @value animation-duration: 300ms;
 @value animation-easing: ease-out;
 
@@ -12,9 +11,9 @@
   align-items: baseline;
 
   box-sizing: border-box;
-  min-height: calc(unit * 5);
-  margin: unit auto;
-  padding: 0 calc(unit * 2);
+  min-height: calc(var(--ring-unit) * 5);
+  margin: var(--ring-unit) auto;
+  padding: 0 calc(var(--ring-unit) * 2);
 
   transition:
     transform animation-duration animation-easing,
@@ -28,11 +27,11 @@
   box-shadow: var(--ring-popup-shadow);
 
   font-size: var(--ring-font-size);
-  line-height: calc(unit * 5);
+  line-height: calc(var(--ring-unit) * 5);
 }
 
 .alertInline {
-  margin: unit;
+  margin: var(--ring-unit);
 }
 
 .error {
@@ -42,13 +41,13 @@
 }
 
 .icon {
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .caption {
   overflow: hidden;
 
-  max-width: calc(100% - calc(unit * 5));
+  max-width: calc(100% - calc(var(--ring-unit) * 5));
 
   margin: 12px 0;
 
@@ -65,12 +64,12 @@
   }
 
   &.withCloseButton {
-    margin-right: calc(unit * 5);
+    margin-right: calc(var(--ring-unit) * 5);
   }
 }
 
 .badge {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   vertical-align: baseline;
 }
@@ -78,7 +77,7 @@
 .loader {
   top: 2px;
 
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .close.close {
@@ -86,8 +85,8 @@
   top: 2px;
   right: 0;
 
-  margin: calc(unit / 2);
-  padding: unit;
+  margin: calc(var(--ring-unit) / 2);
+  padding: var(--ring-unit);
 
   font-size: 0;
   line-height: 0;

package/components/alert/container.css

@@ -1,12 +1,10 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .alertContainer {
   position: fixed;
   z-index: var(--ring-alert-z-index);
-  right: calc(unit * 2);
-  bottom: calc(unit);
+  right: calc(var(--ring-unit) * 2);
+  bottom: calc(var(--ring-unit));
 
   display: flex;
   overflow: visible;
@@ -22,7 +20,7 @@
 .alertInContainer {
   composes: alert from "./alert.css";
 
-  min-width: calc(unit * 30);
-  max-width: calc(unit * 50);
+  min-width: calc(var(--ring-unit) * 30);
+  max-width: calc(var(--ring-unit) * 50);
   margin-top: 0;
 }

package/components/alert-service/alert-service.d.ts

@@ -1,8 +1,9 @@
-import React, { ReactNode } from 'react';
-import { AlertProps, AlertType } from '../alert/alert';
+import React, { ReactNode, Ref } from 'react';
+import Alert, { AlertProps, AlertType } from '../alert/alert';
 export interface AlertItem extends Partial<Omit<AlertProps, 'children'>> {
     key: string | number;
     message: ReactNode;
+    ref?: Ref<Alert>;
 }
 /**
  * @name Alert Service
@@ -11,6 +12,7 @@ declare class AlertService {
     defaultTimeout: number;
     showingAlerts: AlertItem[];
     containerElement: HTMLDivElement;
+    reactRoot: import("react-dom/client").Root;
     _getShowingAlerts(): AlertItem[];
     renderAlertContainer(alerts: readonly AlertItem[]): React.JSX.Element;
     /**

package/components/alert-service/alert-service.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '../global/react-render-adapter';
+import { createRoot } from 'react-dom/client';
 import getUID from '../global/get-uid';
 import Alert, { ANIMATION_TIME, Container as AlertContainer } from '../alert/alert';
 /**
@@ -10,6 +10,7 @@ class AlertService {
     // This alerts are stored in inverse order (last shown is first in array)
     showingAlerts = [];
     containerElement = document.createElement('div');
+    reactRoot = createRoot(this.containerElement);
     _getShowingAlerts() {
         return [...this.showingAlerts];
     }
@@ -28,7 +29,7 @@ class AlertService {
      * Renders alert container into virtual node to skip maintaining container
      */
     renderAlerts() {
-        render(this.renderAlertContainer(this.showingAlerts), this.containerElement);
+        this.reactRoot.render(this.renderAlertContainer(this.showingAlerts));
     }
     findSameAlert(message, type) {
         return this.showingAlerts.filter(it => it.type === type && it.message === message)[0];

package/components/alert-service/alert-service.stories.css

@@ -1,9 +1,6 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value icon from "../button/button.css";
-@value animation-duration: 300ms;
-@value animation-easing: ease-out;
 
 .customAlert {
   color: var(--ring-white-text-color);

package/components/analytics/analytics.d.ts

@@ -2,10 +2,6 @@ export type Serializable = string | number | boolean | null | undefined | {
     [K in string | number]?: Serializable;
 };
 export interface AnalyticsPlugin {
-    /**
-     * @deprecated
-     */
-    serializeAdditionalInfo: boolean;
     trackEvent(category: string, action: string, additionalData?: Record<string, Serializable>): void;
     trackPageView(path: string): void;
 }
@@ -16,23 +12,7 @@ export declare class Analytics {
     private _plugins;
     constructor();
     config(plugins: readonly AnalyticsPlugin[]): void;
-    /**
-     * @deprecated
-     */
-    track(rawTrackingData: string, additionalData: Record<string, Serializable>): void;
-    /**
-     * @deprecated
-     */
-    trackPageView(path: string): void;
     trackEvent(category: string, action: string, additionalData?: Record<string, Serializable>): void;
-    /**
-     * @deprecated
-     */
-    trackShortcutEvent(category: string, action: string, additionalData: Record<string, Serializable>): void;
-    /**
-     * @deprecated
-     */
-    trackEntityProperties(entityName: string, entity: Serializable, propertiesNames: readonly string[], additionalData?: Record<string, Serializable>): void;
 }
 declare const _default: Analytics;
 export default _default;

package/components/analytics/analytics.js

@@ -1,5 +1,3 @@
-import deprecate from 'util-deprecate';
-const warnOnDeprecationOfAnalyticsMethod = (methodName) => deprecate(() => { }, `Method analytics::${methodName} is deprecated, use analytics::trackEvent instead`)();
 /**
  * @name Analytics
  */
@@ -11,72 +9,10 @@ export class Analytics {
     config(plugins) {
         this._plugins = plugins;
     }
-    /**
-     * @deprecated
-     */
-    track(rawTrackingData, additionalData) {
-        if (!rawTrackingData) {
-            return;
-        }
-        warnOnDeprecationOfAnalyticsMethod('track');
-        let splitIdx = rawTrackingData.indexOf(':');
-        if (splitIdx < 0) {
-            splitIdx = rawTrackingData.indexOf('_');
-        }
-        if (splitIdx < 0) {
-            splitIdx = rawTrackingData.length;
-        }
-        const category = rawTrackingData.substr(0, splitIdx);
-        const subcategory = rawTrackingData.substr(splitIdx + 1);
-        this.trackEvent(category, subcategory, additionalData);
-    }
-    /**
-     * @deprecated
-     */
-    trackPageView(path) {
-        warnOnDeprecationOfAnalyticsMethod('trackPageView');
-        this._plugins.forEach(plugin => {
-            plugin.trackPageView(path);
-        });
-    }
     trackEvent(category, action, additionalData) {
         this._plugins.forEach(plugin => {
             plugin.trackEvent(category, action, additionalData);
         });
     }
-    /**
-     * @deprecated
-     */
-    trackShortcutEvent(category, action, additionalData) {
-        warnOnDeprecationOfAnalyticsMethod('trackShortcutEvent');
-        this.trackEvent(category, action, additionalData);
-    }
-    /**
-     * @deprecated
-     */
-    trackEntityProperties(entityName, entity, propertiesNames, additionalData) {
-        warnOnDeprecationOfAnalyticsMethod('trackEntityProperties');
-        for (let i = 0; i < propertiesNames.length; ++i) {
-            const keys = propertiesNames[i].split('.');
-            let value = entity;
-            if (!keys.length) {
-                continue;
-            }
-            for (let j = 0; j < keys.length; ++j) {
-                if (typeof value === 'object' && value != null && value.hasOwnProperty(keys[j])) {
-                    value = value[keys[j]];
-                }
-                else {
-                    value = 'no-value';
-                    break;
-                }
-            }
-            if (typeof value === 'string') {
-                value = value.toLowerCase().replace(/[._]+/g, '-');
-            }
-            const resultAction = `${keys.join('-')}__${value}`;
-            this.trackEvent(entityName, resultAction, additionalData);
-        }
-    }
 }
 export default new Analytics();

package/components/analytics/analytics__custom-plugin.d.ts

@@ -25,5 +25,4 @@ export default class AnalyticsCustomPlugin implements AnalyticsPlugin {
     private _initSendSchedule;
     private _processEvent;
     private _addDataToFlushingPack;
-    get serializeAdditionalInfo(): boolean;
 }

package/components/analytics/analytics__custom-plugin.js

@@ -55,7 +55,4 @@ export default class AnalyticsCustomPlugin {
             this._flush?.();
         }
     }
-    get serializeAdditionalInfo() {
-        return true;
-    }
 }

package/components/auth/down-notification.css

@@ -1,17 +1,15 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .title {
   font-weight: 600;
 }
 
 .error {
-  margin-top: calc(unit / 2);
+  margin-top: calc(var(--ring-unit) / 2);
 
   word-wrap: break-word;
 
   color: var(--ring-text-color);
 
-  line-height: calc(unit * 2);
+  line-height: calc(var(--ring-unit) * 2);
 }

package/components/auth/request-builder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="typings" />
 import uuid from 'simply-uuid';
 import AuthStorage, { AuthState } from './storage';
 export interface AuthRequestBuilderConfig {

package/components/auth-dialog/auth-dialog.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .dialog.dialog {
   width: auto;
   max-width: 400px;
@@ -14,23 +12,23 @@
   align-items: center;
   flex-direction: column;
 
-  margin: calc(unit * 2) 0;
+  margin: calc(var(--ring-unit) * 2) 0;
 }
 
 .button {
-  width: calc(unit * 25);
-  margin-top: unit;
+  width: calc(var(--ring-unit) * 25);
+  margin-top: var(--ring-unit);
 }
 
 .firstButton {
   composes: button;
 
-  margin-top: calc(unit * 4);
+  margin-top: calc(var(--ring-unit) * 4);
 }
 
 .title.title {
   margin-top: 0;
-  margin-bottom: unit;
+  margin-bottom: var(--ring-unit);
 
   text-align: center;
 
@@ -38,14 +36,14 @@
 }
 
 .logo {
-  width: calc(unit * 12);
-  height: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
+  height: calc(var(--ring-unit) * 12);
   margin-bottom: 12px;
   object-fit: contain;
 
-  @media (max-height: 400px) {
-    width: calc(unit * 4);
-    height: calc(unit * 4);
+  @media (height <= 400px) {
+    width: calc(var(--ring-unit) * 4);
+    height: calc(var(--ring-unit) * 4);
   }
 }
 

package/components/auth-dialog-service/auth-dialog-service.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import AuthDialog, { AuthDialogProps } from '../auth-dialog/auth-dialog';
+export declare const reactRoot: import("react-dom/client").Root;
 type AuthDialogAttributes = JSX.LibraryManagedAttributes<typeof AuthDialog, AuthDialogProps>;
 export default function showAuthDialog(props?: AuthDialogAttributes): () => void;
 export {};

package/components/auth-dialog-service/auth-dialog-service.js

@@ -1,18 +1,19 @@
 import React from 'react';
+import { createRoot } from 'react-dom/client';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
-import { render } from '../global/react-render-adapter';
 import AuthDialog from '../auth-dialog/auth-dialog';
 /**
  * @name Auth Dialog Service
  */
 const containerElement = document.createElement('div');
+export const reactRoot = createRoot(containerElement);
 /**
  * Renders AuthDialog into virtual node to skip maintaining container
  */
 function renderAuthDialog(props) {
-    render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
+    reactRoot.render((<ControlsHeightContext.Provider value={getGlobalControlsHeight()}>
         <AuthDialog {...props}/>
-      </ControlsHeightContext.Provider>), containerElement);
+      </ControlsHeightContext.Provider>));
 }
 export default function showAuthDialog(props = {}) {
     renderAuthDialog({

package/components/badge/badge.css

@@ -1,13 +1,11 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .badge {
   display: inline-block;
 
   box-sizing: border-box;
   height: 20px;
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 
   cursor: default;
 

package/components/button/button.css

@@ -1,22 +1,20 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button-shadow: inset 0 0 0 1px;
-@value height: var(--ring-button-height);
-@value loaderWidth: calc(unit * 8);
+@value loaderWidth: calc(var(--ring-unit) * 8);
 
 .heightS {
-  --ring-button-height: calc(unit * 3);
+  --ring-button-height: calc(var(--ring-unit) * 3);
   --ring-button-font-size: var(--ring-font-size-smaller);
 }
 
 .heightM {
-  --ring-button-height: calc(unit * 3.5);
+  --ring-button-height: calc(var(--ring-unit) * 3.5);
   --ring-button-font-size: var(--ring-font-size);
 }
 
 .heightL {
-  --ring-button-height: calc(unit * 4);
+  --ring-button-height: calc(var(--ring-unit) * 4);
   --ring-button-font-size: var(--ring-font-size);
 }
 
@@ -26,9 +24,9 @@
   display: inline-block;
 
   box-sizing: border-box;
-  height: height;
+  height: var(--ring-button-height);
   margin: 0;
-  padding: 0 calc(unit * 2);
+  padding: 0 calc(var(--ring-unit) * 2);
 
   cursor: pointer;
   transition: color var(--ring-ease), background-color var(--ring-ease), box-shadow var(--ring-ease);
@@ -45,7 +43,7 @@
   font-family: var(--ring-font-family);
   font-size: var(--ring-button-font-size);
 
-  line-height: height;
+  line-height: var(--ring-button-height);
 
   &:hover {
     transition: none;
@@ -78,7 +76,7 @@
   }
 
   &[disabled] {
-    pointer-events: none;
+    cursor: auto;
 
     background-color: var(--ring-disabled-background-color);
     box-shadow: button-shadow var(--ring-border-disabled-color);
@@ -94,7 +92,8 @@
     color: var(--ring-disabled-color);
   }
 
-  &[disabled] .icon {
+  /* stylelint-disable-next-line selector-max-specificity */
+  &[disabled] .icon.icon {
     color: var(--ring-icon-disabled-color);
   }
 
@@ -247,7 +246,7 @@
 }
 
 .withIcon {
-  padding: 0 unit;
+  padding: 0 var(--ring-unit);
 }
 
 .text {
@@ -278,7 +277,7 @@
   line-height: normal;
 
   &:not(:last-child) {
-    margin-right: calc(unit * 0.5);
+    margin-right: calc(var(--ring-unit) * 0.5);
   }
 }
 
@@ -359,7 +358,7 @@
 }
 
 .short {
-  width: calc(unit * 4);
+  width: calc(var(--ring-unit) * 4);
   padding: 0;
 }
 

package/components/button-group/button-group.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button, active, primary, button-shadow from "../button/button.css";
 
 :root {
@@ -104,8 +103,9 @@
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
-.buttonGroup .button.button:hover,
-.buttonGroup .button.button:active {
+.buttonGroup .button.button:hover:not(:disabled),
+/* stylelint-disable-next-line selector-max-specificity */
+.buttonGroup .button.button:active:not(:disabled) {
   border-radius: var(--ring-border-radius);
   box-shadow: button-shadow var(--ring-border-hover-color);
 }
@@ -154,7 +154,7 @@
 .caption {
   composes: font from "../global/global.css";
 
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 
   font-size: var(--ring-font-size);
 
@@ -172,6 +172,14 @@
   border-bottom-left-radius: var(--ring-border-radius);
 }
 
+/* stylelint-disable-next-line selector-max-specificity */
+.common > button:first-child > div:first-child,
+.common > .button:first-child > div:first-child,
+.common > :first-child .button > div:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .common > .button:last-child,
 .common > button:last-child,
 .common > :last-child .button {
@@ -179,6 +187,14 @@
   border-bottom-right-radius: var(--ring-border-radius);
 }
 
+/* stylelint-disable-next-line selector-max-specificity */
+.common > .button:last-child > div:first-child,
+.common > button:last-child > div:first-child,
+.common > :last-child .button > div:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 .split .primary:not(:last-child) {
   margin-right: 1px;
 }
@@ -200,7 +216,8 @@
       z-index: var(--ring-button-group-active-z-index);
     }
 
-    &:hover {
+    /* stylelint-disable-next-line selector-max-specificity */
+    &:hover:not(:disabled) {
       z-index: var(--ring-button-group-hover-z-index);
     }
 

package/components/button-set/button-set.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button from "../button/button.css";
 
 .buttonSet {
@@ -13,7 +12,7 @@
   font-size: 0;
 
   & .button {
-    margin: 0 unit 0 0;
+    margin: 0 var(--ring-unit) 0 0;
   }
 
   & > .button:last-child {

package/components/button-toolbar/button-toolbar.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value button from "../button/button.css";
 
 .buttonToolbar {
@@ -18,7 +17,7 @@
 .buttonToolbar > .buttonGroup,
 .buttonToolbar > .split,
 .buttonToolbar > .buttonToolbar {
-  margin-right: unit;
+  margin-right: var(--ring-unit);
 }
 
 .buttonToolbar > :last-child {

package/components/checkbox/checkbox.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value checkboxSize: 14px;
 
 .checkbox {
@@ -46,8 +45,8 @@
   top: -1px;
   left: -1px;
 
-  width: calc(unit * 2);
-  height: calc(unit * 2);
+  width: calc(var(--ring-unit) * 2);
+  height: calc(var(--ring-unit) * 2);
 
   opacity: 0;
   color: var(--ring-white-text-color);
@@ -140,7 +139,7 @@
 }
 
 .label {
-  margin-left: unit;
+  margin-left: var(--ring-unit);
 
   line-height: normal;
 }