@jetbrains/ring-ui 6.0.3-beta.0 → 6.0.4-beta.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/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-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/button-group/button-group.css

@@ -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;
 }

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

@@ -7,7 +7,7 @@ import { ControlsHeight } from '../global/controls-height';
 export type Props = ConfirmAttributes & {
     buttonsHeight?: ControlsHeight;
 };
-export declare const containerElement: HTMLDivElement;
+export declare const reactRoot: import("react-dom/client").Root;
 export interface ConfirmServiceParams {
     text?: string | undefined;
     description?: ReactNode;

package/components/confirm-service/confirm-service.js

@@ -1,16 +1,17 @@
 import React from 'react';
-import { render } from '../global/react-render-adapter';
+import { createRoot } from 'react-dom/client';
 import Confirm from '../confirm/confirm';
 import { ControlsHeightContext, getGlobalControlsHeight } from '../global/controls-height';
-export const containerElement = document.createElement('div');
+const containerElement = document.createElement('div');
+export const reactRoot = createRoot(containerElement);
 /**
  * Renders Confirm into virtual node to skip maintaining container
  */
 function renderConfirm(props) {
     const { buttonsHeight = getGlobalControlsHeight(), ...restProps } = props;
-    render((<ControlsHeightContext.Provider value={buttonsHeight}>
+    reactRoot.render(<ControlsHeightContext.Provider value={buttonsHeight}>
       <Confirm {...restProps}/>
-    </ControlsHeightContext.Provider>), containerElement);
+    </ControlsHeightContext.Provider>);
 }
 export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm, buttonsHeight }) {
     return new Promise((resolve, reject) => {

package/components/date-picker/consts.d.ts

@@ -70,7 +70,6 @@ export interface DatePopupBaseProps {
     fromPlaceholder?: string | null | undefined;
     toPlaceholder?: string | null | undefined;
     timePlaceholder?: string | null | undefined;
-    hidden: boolean;
     locale?: Locale | undefined;
     parseDateInput: (text: Date | number | string | null | undefined) => Date | null;
     displayFormat: (date: Date, locale: Locale | undefined) => string;

package/components/date-picker/date-input.d.ts

@@ -25,7 +25,6 @@ export default class DateInput extends React.PureComponent<DateInputProps> {
         date: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         time: PropTypes.Requireable<string>;
         displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
-        hidden: PropTypes.Requireable<boolean>;
         translations: PropTypes.Requireable<object>;
         fromPlaceholder: PropTypes.Requireable<string>;
         toPlaceholder: PropTypes.Requireable<string>;

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

@@ -16,7 +16,6 @@ export default class DateInput extends React.PureComponent {
         date: dateType,
         time: PropTypes.string,
         displayFormat: PropTypes.func,
-        hidden: PropTypes.bool,
         translations: PropTypes.object,
         fromPlaceholder: PropTypes.string,
         toPlaceholder: PropTypes.string,
@@ -28,8 +27,8 @@ export default class DateInput extends React.PureComponent {
         locale: PropTypes.object
     };
     componentDidUpdate(prevProps) {
-        const { hidden, text, active } = this.props;
-        if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
+        const { text, active } = this.props;
+        if (text !== prevProps.text || active !== prevProps.active) {
             this.updateInput({ text, active });
         }
     }

package/components/date-picker/date-picker.js

@@ -22,13 +22,13 @@ import DatePopup from './date-popup';
 import { dateType } from './consts';
 import styles from './date-picker.css';
 import formats from './formats';
-const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (<Popup hidden={hidden} keepMounted className={className} ref={popupRef} directions={[
+const PopupComponent = ({ hidden = false, className, popupRef, onClear, datePopupProps, onComplete, ...restProps }) => (<Popup hidden={hidden} className={className} ref={popupRef} directions={[
         Popup.PopupProps.Directions.BOTTOM_RIGHT,
         Popup.PopupProps.Directions.BOTTOM_LEFT,
         Popup.PopupProps.Directions.TOP_LEFT,
         Popup.PopupProps.Directions.TOP_RIGHT
     ]} {...restProps}>
-    <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete} hidden={hidden}/>
+    <DatePopup onClear={onClear} {...datePopupProps} onComplete={onComplete}/>
   </Popup>);
 PopupComponent.propTypes = {
     hidden: PropTypes.bool,

package/components/date-picker/date-popup.d.ts

@@ -20,7 +20,6 @@ export default class DatePopup extends Component<DatePopupProps, DatePopupState>
         onClear: PropTypes.Requireable<(...args: any[]) => any>;
         minDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
         maxDate: PropTypes.Requireable<NonNullable<string | number | Date | null | undefined>>;
-        hidden: PropTypes.Requireable<boolean>;
         fromPlaceholder: PropTypes.Requireable<string>;
         toPlaceholder: PropTypes.Requireable<string>;
         timePlaceholder: PropTypes.Requireable<string>;

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

@@ -36,7 +36,6 @@ export default class DatePopup extends Component {
         onClear: PropTypes.func,
         minDate: dateType,
         maxDate: dateType,
-        hidden: PropTypes.bool,
         fromPlaceholder: PropTypes.string,
         toPlaceholder: PropTypes.string,
         timePlaceholder: PropTypes.string,
@@ -268,7 +267,7 @@ export default class DatePopup extends Component {
         this.componentRef.current?.querySelector('input')?.focus();
     };
     render() {
-        const { range, hidden, withTime, locale } = this.props;
+        const { range, withTime, locale } = this.props;
         const { from, to, date, time, ...restProps } = this.props;
         const parsedDate = this.parse(this.props.date, 'date');
         const parsedTo = this.parse(this.props.to, 'to');
@@ -329,11 +328,11 @@ export default class DatePopup extends Component {
                 if (clearable && name !== 'from' && !this.isInTimeMode()) {
                     onClear = this.onClear.bind(this);
                 }
-                return (<DateInput {...this.props} {...this.state} divider={name === 'from' && (dates[name] != null || parsedTo != null)} name={name} key={name} date={dates[name]} active={this.state.active === name} hidden={hidden} onActivate={this.handleActivate(name)} onInput={this.handleInput} onConfirm={this.handleConfirm(name)} onClear={onClear} locale={locale}/>);
+                return (<DateInput {...this.props} {...this.state} divider={name === 'from' && (dates[name] != null || parsedTo != null)} name={name} key={name} date={dates[name]} active={this.state.active === name} onActivate={this.handleActivate(name)} onInput={this.handleInput} onConfirm={this.handleConfirm(name)} onClear={onClear} locale={locale}/>);
             })}
 
           {this.isInTimeMode()
-                ? (<DateInput {...this.props} text={this.state.text} divider={!!parsedDate} hoverDate={null} name={'time'} key={'time'} date={null} time={time} active={this.state.active === 'time'} hidden={hidden} onActivate={this.handleActivate('time')} onInput={this.handleInput} onConfirm={this.handleConfirm('time')} onClear={clearable && this.onClear || undefined} locale={locale}/>)
+                ? (<DateInput {...this.props} text={this.state.text} divider={!!parsedDate} hoverDate={null} name={'time'} key={'time'} date={null} time={time} active={this.state.active === 'time'} onActivate={this.handleActivate('time')} onInput={this.handleInput} onConfirm={this.handleConfirm('time')} onClear={clearable && this.onClear || undefined} locale={locale}/>)
                 : ('')}
         </div>
         <Weekdays locale={locale}/>

package/components/dialog/dialog.css

@@ -38,6 +38,10 @@
   cursor: default;
   overflow-wrap: break-word;
 
+  & [data-scrollable-container] {
+    padding-bottom: unit;
+  }
+
   & .panel {
     margin-top: 0;
     padding: calc(unit * 2) calc(unit * 4) calc(unit * 4);

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -20,7 +20,17 @@ declare const _default: (<T = unknown>(props: DropdownMenuProps<T> & {
 }) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & {
     ListProps: {
         Type: typeof import("../list/consts").Type;
-        Dimension: typeof import("../list/consts").Dimension;
+        Dimension: {
+            ITEM_PADDING: number;
+            ITEM_HEIGHT: number;
+            COMPACT_ITEM_HEIGHT: number;
+            SEPARATOR_HEIGHT: number;
+            SEPARATOR_FIRST_HEIGHT: number;
+            SEPARATOR_TEXT_HEIGHT: number;
+            TITLE_HEIGHT: number;
+            INNER_PADDING: number;
+            MARGIN: number;
+        };
     };
 };
 export default _default;

package/components/editable-heading/editable-heading.css

@@ -127,6 +127,28 @@
   }
 }
 
+.textarea {
+  resize: none;
+}
+
+.textareaWrapper {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    bottom: 6px;
+    left: 0;
+
+    width: 100%;
+    height: 30px;
+
+    content: "";
+    pointer-events: none;
+
+    background: linear-gradient(to bottom, rgba(var(--ring-content-background-components), 0), rgba(var(--ring-content-background-components), 1));
+  }
+}
+
 .button {
   margin: 6px 0;
 }

package/components/editable-heading/editable-heading.d.ts

@@ -7,7 +7,7 @@ export interface EditableHeadingTranslations {
     save: string;
     cancel: string;
 }
-export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'size'> & {
+export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'value' | 'size'> & {
     level?: Levels;
     headingClassName?: string | null;
     inputClassName?: string | null;
@@ -23,6 +23,7 @@ export type EditableHeadingProps = Omit<InputHTMLAttributes<HTMLInputElement>, '
     'data-test'?: string | null;
     error?: string;
     multiline?: boolean;
+    multilineInputRows?: number;
     renderMenu?: () => React.ReactNode;
     translations?: EditableHeadingTranslations;
 };

package/components/editable-heading/editable-heading.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading';
 import Button from '../button/button';
@@ -9,16 +9,19 @@ import Shortcuts from '../shortcuts/shortcuts';
 import styles from './editable-heading.css';
 export { Levels };
 export { Size };
+const DEFAULT_MULTILINE_INPUT_ROWS = 3;
 function noop() { }
 export const EditableHeading = (props) => {
     const { level = Levels.H1, className, headingClassName, inputClassName, children, isEditing = false, isSavingPossible = false, isSaving = false, embedded = false, size = Size.L, onEdit = noop, onSave = noop, onCancel = noop, autoFocus = true, 'data-test': dataTest, error, disabled, multiline = false, renderMenu = () => null, onFocus, onBlur, translations = {
         save: 'Save',
         cancel: 'Cancel'
-    }, ...restProps } = props;
+    }, multilineInputRows = DEFAULT_MULTILINE_INPUT_ROWS, ...restProps } = props;
     const [shortcutsScope] = React.useState(getUID('ring-editable-heading-'));
     const [isInFocus, setIsInFocus] = React.useState(false);
     const [isMouseDown, setIsMouseDown] = React.useState(false);
     const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
+    const textAreaRef = React.useRef(null);
+    const textAreaWrapperRef = React.useRef(null);
     const hasError = error !== undefined;
     const isSaveDisabled = !isSavingPossible || !children || children.trim() === '' || hasError || isSaving;
     const isCancelDisabled = isSaving;
@@ -42,7 +45,7 @@ export const EditableHeading = (props) => {
         [styles.selectionMode]: isInSelectionMode
     });
     const headingClasses = classNames(styles.heading, headingClassName, styles[`size${size}`]);
-    const inputClasses = classNames('ring-js-shortcuts', styles.input, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
+    const inputClasses = classNames('ring-js-shortcuts', styles.input, styles.textarea, inputStyles[`size${size}`], styles[`level${level}`], inputClassName);
     const onHeadingMouseDown = React.useCallback(() => {
         setIsMouseDown(true);
     }, []);
@@ -67,21 +70,42 @@ export const EditableHeading = (props) => {
         setIsInFocus(false);
         onBlur?.(e);
     }, [onBlur]);
+    const onScroll = useCallback(() => {
+        const scrollHeight = textAreaRef?.current?.scrollHeight || 0;
+        const clientHeight = textAreaRef?.current?.clientHeight || 0;
+        const scrollTop = textAreaRef?.current?.scrollTop || 0;
+        const isScrolledToBottom = scrollHeight - clientHeight <= scrollTop;
+        if (isScrolledToBottom) {
+            textAreaWrapperRef?.current?.classList.remove(styles.textareaWrapper);
+        }
+        else {
+            textAreaWrapperRef?.current?.classList.add(styles.textareaWrapper);
+        }
+    }, []);
     useEffect(() => {
+        const textAreaRefCurrent = textAreaRef?.current;
+        textAreaRefCurrent?.addEventListener('scroll', onScroll);
         window.addEventListener('mousemove', onMouseMove);
         window.addEventListener('mouseup', onMouseUp);
         return () => {
             window.removeEventListener('mousemove', onMouseMove);
             window.removeEventListener('mouseup', onMouseUp);
+            if (textAreaRefCurrent) {
+                textAreaRefCurrent.removeEventListener('scroll', onScroll);
+            }
         };
-    });
+    }, [onMouseMove, onMouseUp, onScroll]);
     return (<>
       <div className={classes}>
         {!disabled && isEditing
             ? (<>
               <Shortcuts map={shortcutsMap} scope={shortcutsScope} disabled={isShortcutsDisabled}/>
 
-              <input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>
+              {!multiline
+                    ? (<input className={inputClasses} value={children} autoFocus={autoFocus} data-test={dataTest} disabled={isSaving} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>)
+                    : (<div ref={textAreaWrapperRef} className={styles.textareaWrapper}>
+                    <textarea ref={textAreaRef} className={inputClasses} value={children} autoFocus={autoFocus} rows={multilineInputRows} data-test={dataTest} disabled={isSaving} {...restProps} onFocus={onInputFocus} onBlur={onInputBlur}/>
+                  </div>)}
             </>)
             : (<button type="button" className={styles.headingWrapperButton} onMouseDown={onHeadingMouseDown}>
               <Heading className={headingClasses} level={level} data-test={dataTest}>{children}</Heading>