@jetbrains/ring-ui 7.0.0-beta.9 → 7.0.0

package/components/code/code.js

@@ -20,7 +20,7 @@ export default class Code extends PureComponent {
     static defaultProps = {
         inline: false,
         softWrap: false,
-        replacer: noop
+        replacer: noop,
     };
     componentDidMount() {
         this.highlight();
@@ -66,7 +66,7 @@ export default class Code extends PureComponent {
         const Tag = inline ? 'span' : 'pre';
         const classes = classNames(styles.code, className, language, {
             [styles.inline]: inline,
-            [styles.softWrap]: softWrap
+            [styles.softWrap]: softWrap,
         });
         return (<Tag className={classes} data-test="ring-code">
         <code 

package/components/code/highlight.css

@@ -31,7 +31,9 @@
 
   & :global(.hljs-tag) {
     background: var(--ring-code-tag-background-color);
-    box-shadow: 0 1px var(--ring-code-tag-background-color), 0 -1px var(--ring-code-tag-background-color);
+    box-shadow:
+      0 1px var(--ring-code-tag-background-color),
+      0 -1px var(--ring-code-tag-background-color);
   }
 
   & :global(.hljs-section),

package/components/collapse/collapse-content.d.ts

@@ -1,5 +1,4 @@
-import { PropsWithChildren } from 'react';
-import * as React from 'react';
+import React, { PropsWithChildren } from 'react';
 type Props = {
     minHeight?: number;
     className?: string;

package/components/collapse/collapse-content.js

@@ -1,5 +1,4 @@
-import { useState, useEffect, useRef, useContext, useMemo } from 'react';
-import * as React from 'react';
+import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
@@ -14,25 +13,36 @@ const HIDDEN = 0;
 /**
  * @name CollapseContent
  */
-export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest }) => {
+export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-test': dataTest, }) => {
     const { collapsed, duration, id, disableAnimation } = useContext(CollapseContext);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
     const initialContentHeight = useRef(minHeight);
     const contentHeight = useRef(DEFAULT_HEIGHT);
-    const [dimensions, setDimensions] = useState({
-        width: 0,
-        height: 0
-    });
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
     const [height, setHeight] = useState(toPx(minHeight));
-    const [showFade, setShowFade] = useState(true);
+    const [showFade, setShowFade] = useState(collapsed);
+    const [shouldHideContent, setShouldHideContent] = useState(collapsed && minHeight <= DEFAULT_HEIGHT);
     useEffect(() => {
-        if (!collapsed) {
-            setShowFade(false);
+        function onTransitionEnd() {
+            if (initialContentHeight.current <= DEFAULT_HEIGHT) {
+                setShouldHideContent(collapsed);
+            }
         }
-        else {
-            setShowFade(true);
+        const container = containerRef.current;
+        if (container) {
+            container.addEventListener('transitionend', onTransitionEnd);
         }
+        return () => {
+            if (container) {
+                container.removeEventListener('transitionend', onTransitionEnd);
+            }
+        };
+    }, [collapsed]);
+    useEffect(() => {
+        setShowFade(collapsed);
+        if (!collapsed)
+            setShouldHideContent(false);
     }, [collapsed]);
     useEffect(() => {
         if (contentRef.current) {
@@ -59,13 +69,14 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
         return {
             '--duration': `${calculatedDuration}ms`,
             height,
-            opacity: collapsed && !minHeight ? HIDDEN : VISIBLE
+            opacity: collapsed && !minHeight ? HIDDEN : VISIBLE,
         };
     }, [duration, height, collapsed, minHeight]);
     const fadeShouldBeVisible = useMemo(() => Boolean(minHeight && showFade), [minHeight, showFade]);
+    const shouldRenderContent = disableAnimation ? !collapsed : !shouldHideContent;
     return (<div ref={containerRef} id={`collapse-content-${id}`} data-test={dataTests(COLLAPSE_CONTENT_CONTAINER_TEST_ID)} className={classNames(styles.container, { [styles.transition]: !disableAnimation })} style={style}>
       <div ref={contentRef} data-test={dataTests(COLLAPSE_CONTENT_TEST_ID, dataTest)}>
-        {children}
+        {shouldRenderContent ? children : null}
       </div>
       {fadeShouldBeVisible && <div className={styles.fade}/>}
     </div>);

package/components/collapse/collapse-context.js

@@ -5,6 +5,6 @@ export const CollapseContext = createContext({
     duration: BASE_ANIMATION_DURATION,
     disableAnimation: false,
     setCollapsed: () => { },
-    id: ''
+    id: '',
 });
 export default CollapseContext;

package/components/collapse/collapse-control.js

@@ -14,10 +14,12 @@ export const CollapseControl = ({ children, 'data-test': dataTest }) => {
         }
         return children;
     }, [children, collapsed]);
-    return (<p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>{cloneElement(child, {
+    return (<p data-test={dataTests(COLLAPSE_CONTROL_TEST_ID, dataTest)}>
+      {cloneElement(child, {
             onClick: setCollapsed,
             'aria-controls': `collapse-content-${id}`,
-            'aria-expanded': String(!collapsed)
-        })}</p>);
+            'aria-expanded': String(!collapsed),
+        })}
+    </p>);
 };
 export default CollapseControl;

package/components/collapse/collapse.css

@@ -1,40 +1,41 @@
 .container {
-    position: relative;
-    will-change: height, opacity;
-
-    overflow: hidden;
+  position: relative;
+  will-change: height, opacity;
 
+  overflow: hidden;
 }
 
 .transition {
-    transition: height var(--duration) ease-in-out 0s, opacity var(--duration) ease-in-out 0s;
+  transition:
+    height var(--duration) ease-in-out 0s,
+    opacity var(--duration) ease-in-out 0s;
 }
 
 .summary {
-    list-style: none;
+  list-style: none;
 
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .trigger {
-    cursor: pointer;
+  cursor: pointer;
 
-    border: none;
-    outline: none;
-    background: transparent;
+  border: none;
+  outline: none;
+  background: transparent;
 }
 
 .fade {
-    position: absolute;
-    z-index: 10;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
+  left: 0;
 
-    height: calc(var(--ring-unit) * 3);
+  height: calc(var(--ring-unit) * 3);
 
-    pointer-events: none;
+  pointer-events: none;
 
-    color: var(--ring-content-background-color);
-    background-image: linear-gradient(to bottom, transparent 0%, currentColor 50%);
+  color: var(--ring-content-background-color);
+  background-image: linear-gradient(to bottom, transparent 0%, currentColor 50%);
 }

package/components/collapse/collapse.js

@@ -5,7 +5,7 @@ import { BASE_ANIMATION_DURATION } from './consts';
 /**
  * @name Collapse
  */
-export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { } }) => {
+export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disableAnimation = false, className = '', onChange = () => { }, }) => {
     const [collapsed, toggle] = useState(true);
     const id = useId();
     const setCollapsed = useCallback(() => {
@@ -18,7 +18,7 @@ export const Collapse = ({ children, duration = BASE_ANIMATION_DURATION, disable
             setCollapsed,
             duration,
             disableAnimation,
-            id
+            id,
         }}>
         {children}
       </CollapseContext.Provider>

package/components/confirm/confirm.d.ts

@@ -9,8 +9,8 @@ export interface ConfirmProps {
     cancelIsDefault: boolean;
     confirmLabel: string;
     rejectLabel: string;
-    onConfirm: ((event: React.MouseEvent<HTMLButtonElement>) => void);
-    onReject: ((event?: React.MouseEvent<HTMLButtonElement>) => void);
+    onConfirm: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onReject: (event?: React.MouseEvent<HTMLButtonElement>) => void;
     className?: string | undefined;
     native?: boolean;
 }

package/components/confirm/confirm.js

@@ -19,7 +19,7 @@ export default class Confirm extends PureComponent {
         confirmLabel: 'OK',
         rejectLabel: 'Cancel',
         onConfirm: () => { },
-        onReject: () => { }
+        onReject: () => { },
     };
     onEscPress = () => {
         if (this.props.rejectOnEsc) {
@@ -27,7 +27,7 @@ export default class Confirm extends PureComponent {
         }
     };
     render() {
-        const { show, className, inProgress, cancelIsDefault, text, description, confirmLabel, rejectLabel, onConfirm, onReject, native } = this.props;
+        const { show, className, inProgress, cancelIsDefault, text, description, confirmLabel, rejectLabel, onConfirm, onReject, native, } = this.props;
         return (<Dialog label={text || (typeof description === 'string' ? description : undefined)} className={className} onEscPress={this.onEscPress} show={show} trapFocus data-test="ring-confirm" native={native}>
         {text && <Header>{text}</Header>}
         {description && (<Content>

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

@@ -17,5 +17,5 @@ export interface ConfirmServiceParams {
     onBeforeConfirm?: (() => void) | undefined;
     buttonsHeight?: ControlsHeight | undefined;
 }
-export default function confirm({ text, description, confirmLabel, rejectLabel, cancelIsDefault, onBeforeConfirm, buttonsHeight }: ConfirmServiceParams): Promise<void>;
+export default function confirm({ text, description, confirmLabel, rejectLabel, cancelIsDefault, onBeforeConfirm, buttonsHeight, }: ConfirmServiceParams): Promise<void>;
 export declare function hideConfirm(): void;

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

@@ -12,7 +12,7 @@ function renderConfirm(props) {
       <Confirm {...restProps}/>
     </ControlsHeightContext.Provider>);
 }
-export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm, buttonsHeight }) {
+export default function confirm({ text, description, confirmLabel = 'OK', rejectLabel = 'Cancel', cancelIsDefault, onBeforeConfirm, buttonsHeight, }) {
     return new Promise((resolve, reject) => {
         const props = {
             text,
@@ -25,12 +25,12 @@ export default function confirm({ text, description, confirmLabel = 'OK', reject
             onConfirm: () => {
                 if (onBeforeConfirm) {
                     renderConfirm({ ...props, inProgress: true });
-                    return Promise.resolve(onBeforeConfirm()).
-                        then(() => {
+                    return Promise.resolve(onBeforeConfirm())
+                        .then(() => {
                         renderConfirm({ ...props, show: false });
                         resolve();
-                    }).
-                        catch(err => {
+                    })
+                        .catch(err => {
                         renderConfirm({ ...props, show: false });
                         reject(err);
                     });
@@ -41,7 +41,7 @@ export default function confirm({ text, description, confirmLabel = 'OK', reject
             onReject: () => {
                 renderConfirm({ ...props, show: false });
                 reject(new Error('Confirm(@jetbrains/ring-ui): null exception'));
-            }
+            },
         };
         renderConfirm(props);
     });

package/components/content-layout/content-layout.css

@@ -1,9 +1,10 @@
 @import "../global/variables.css";
 
 @value extra-small-screen-media, small-screen-media from "../global/global.css";
-@value sidebarWidth: calc(var(--ring-unit) * 30);
 
 .contentLayout {
+  --ring-content-layout-sidebar-width: calc(var(--ring-unit) * 30);
+
   position: relative;
 
   display: flex;
@@ -19,8 +20,8 @@
 }
 
 .sidebarContainer {
-  min-width: sidebarWidth;
-  max-width: sidebarWidth;
+  min-width: var(--ring-content-layout-sidebar-width);
+  max-width: var(--ring-content-layout-sidebar-width);
 }
 
 .sidebarContainerRight {
@@ -31,8 +32,8 @@
   overflow: auto;
 
   box-sizing: border-box;
-  min-width: sidebarWidth;
-  max-width: sidebarWidth;
+  min-width: var(--ring-content-layout-sidebar-width);
+  max-width: var(--ring-content-layout-sidebar-width);
   height: 100%;
   padding-right: calc(var(--ring-unit) * 2);
   padding-left: calc(var(--ring-unit) * 4);

package/components/content-layout/content-layout.js

@@ -7,10 +7,10 @@ import styles from './content-layout.css';
  */
 export default class ContentLayout extends Component {
     static defaultProps = {
-        responsive: true
+        responsive: true,
     };
     state = {
-        contentNode: null
+        contentNode: null,
     };
     saveContentNode = (contentNode) => {
         this.setState({ contentNode });
@@ -18,14 +18,15 @@ export default class ContentLayout extends Component {
     render() {
         const { children, className, contentClassName, responsive, ...restProps } = this.props;
         const classes = classNames(styles.contentLayout, className, {
-            [styles.contentLayoutResponsive]: responsive
+            [styles.contentLayoutResponsive]: responsive,
         });
         const contentClasses = classNames(styles.contentLayoutContent, contentClassName);
         const childrenArray = Children.toArray(children);
         const sidebarChild = childrenArray.filter((child) => child != null && typeof child === 'object' && 'type' in child && child.type === Sidebar)[0];
-        const sidebar = sidebarChild && cloneElement(sidebarChild, {
-            contentNode: this.state.contentNode
-        });
+        const sidebar = sidebarChild &&
+            cloneElement(sidebarChild, {
+                contentNode: this.state.contentNode,
+            });
         const contentChildren = childrenArray.filter(child => child !== sidebarChild);
         return (<div data-test="content-layout" {...restProps} className={classes}>
         {sidebar}

package/components/content-layout/sidebar.js

@@ -8,7 +8,7 @@ export default class Sidebar extends Component {
     state = {
         topIsOutside: true,
         bottomIsOutside: true,
-        sidebarVisibleHeight: undefined
+        sidebarVisibleHeight: undefined,
     };
     sidebarNode;
     handleTopWaypoint = ({ currentPosition }) => {
@@ -17,7 +17,7 @@ export default class Sidebar extends Component {
     handleBottomWaypoint = ({ currentPosition, waypointTop }) => {
         this.setState({
             sidebarVisibleHeight: waypointTop,
-            bottomIsOutside: currentPosition !== INSIDE
+            bottomIsOutside: currentPosition !== INSIDE,
         });
     };
     shouldUseFixation() {
@@ -41,16 +41,16 @@ export default class Sidebar extends Component {
         const shouldFixateTop = bottomIsOutside && topIsOutside && this.shouldUseFixation();
         const shouldFixateBottom = this.shouldFixateBottom();
         const containerClasses = classNames(styles.sidebarContainer, containerClassName, {
-            [styles.sidebarContainerRight]: right
+            [styles.sidebarContainerRight]: right,
         });
         const classes = classNames(styles.sidebar, className, {
             [styles.sidebarRight]: right,
             [styles.sidebarFixedTop]: shouldFixateTop,
             [styles.sidebarFixedBottom]: shouldFixateBottom,
-            [fixedClassName ?? '']: shouldFixateTop || shouldFixateBottom
+            [fixedClassName ?? '']: shouldFixateTop || shouldFixateBottom,
         });
         const style = {
-            maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : undefined
+            maxHeight: shouldFixateBottom && sidebarVisibleHeight ? `${sidebarVisibleHeight}px` : undefined,
         };
         return (<aside className={containerClasses} ref={this.sidebarRef}>
         <Waypoint onEnter={this.handleTopWaypoint} onLeave={this.handleTopWaypoint}/>

package/components/contenteditable/contenteditable.d.ts

@@ -5,7 +5,7 @@ import { Component, HTMLAttributes, Ref } from 'react';
 declare function noop(): void;
 export interface ContentEditableBaseProps extends HTMLAttributes<HTMLElement> {
     disabled: boolean;
-    onComponentUpdate: ((prevProps: ContentEditableBaseProps) => void);
+    onComponentUpdate: (prevProps: ContentEditableBaseProps) => void;
     inputRef?: Ref<HTMLDivElement> | null | undefined;
     __html: string;
 }

package/components/contenteditable/contenteditable.js

@@ -9,11 +9,10 @@ class ContentEditableBase extends Component {
         disabled: false,
         tabIndex: 0,
         onInput: noop,
-        onComponentUpdate: noop
+        onComponentUpdate: noop,
     };
     shouldComponentUpdate(nextProps) {
-        return nextProps.disabled !== this.props.disabled ||
-            nextProps.__html !== this.props.__html;
+        return nextProps.disabled !== this.props.disabled || nextProps.__html !== this.props.__html;
     }
     componentDidUpdate(prevProps) {
         this.props.onComponentUpdate(prevProps);
@@ -26,5 +25,5 @@ class ContentEditableBase extends Component {
         disabled={disabled} role="textbox" tabIndex={disabled ? undefined : tabIndex} contentEditable={!this.props.disabled} dangerouslySetInnerHTML={{ __html }}/>);
     }
 }
-const ContentEditable = ({ children, ...props }) => <ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>;
+const ContentEditable = ({ children, ...props }) => (<ContentEditableBase {...props} __html={renderToStaticMarkup(children)}/>);
 export default ContentEditable;

package/components/control-label/control-label.js

@@ -8,9 +8,11 @@ export var LabelType;
 })(LabelType || (LabelType = {}));
 const classNameByType = {
     [LabelType.SECONDARY]: styles.secondaryLabel,
-    [LabelType.FORM]: styles.formLabel
+    [LabelType.FORM]: styles.formLabel,
 };
 export const ControlLabel = ({ children, type = LabelType.SECONDARY, disabled, ...rest }) => (<label className={classNames(styles.label, classNameByType[type], {
-        [styles.disabledLabel]: disabled
-    })} {...rest}>{children}</label>);
+        [styles.disabledLabel]: disabled,
+    })} {...rest}>
+    {children}
+  </label>);
 export default ControlLabel;

package/components/data-list/data-list.css

@@ -1,8 +1,8 @@
 @import "../global/variables.css";
 
-@value height, compensate from "../table/table.css";
-
 .dataListWrapper {
+  --ring-table-compensate: 2px;
+
   position: relative;
 }
 
@@ -25,7 +25,7 @@
 
   box-sizing: content-box;
   height: calc(4 * var(--ring-unit));
-  padding: 0 calc(var(--ring-unit) * 5) compensate 0;
+  padding: 0 calc(var(--ring-unit) * 5) var(--ring-table-compensate) 0;
 
   outline: none;
 

package/components/data-list/data-list.d.ts

@@ -1,6 +1,6 @@
 /**
-  * @name Data List
-  */
+ * @name Data List
+ */
 import { Component } from 'react';
 import { FocusSensorOuterProps } from '../global/focus-sensor-hoc';
 import { SelectionShortcutsAddProps, SelectionShortcutsOuterProps } from '../table/selection-shortcuts-hoc';

package/components/data-list/data-list.js

@@ -1,6 +1,6 @@
 /**
-  * @name Data List
-  */
+ * @name Data List
+ */
 import { PureComponent, Component } from 'react';
 import classNames from 'classnames';
 import focusSensorHOC from '../global/focus-sensor-hoc';
@@ -16,7 +16,7 @@ class DataList extends PureComponent {
         loading: false,
         onItemMoreLess: () => { },
         itemMoreLessState: () => moreLessButtonStates.UNUSED,
-        remoteSelection: false
+        remoteSelection: false,
     };
     componentDidUpdate(prevProps) {
         const { data, selection, onSelect, selectable } = this.props;
@@ -56,7 +56,7 @@ class DataList extends PureComponent {
         }
     };
     shortcutsMap = {
-        '=': this.onEqualPress
+        '=': this.onEqualPress,
     };
     render() {
         const { data, className, loading, selection, disabledHover, itemFormatter, focused, innerRef } = this.props;
@@ -64,11 +64,10 @@ class DataList extends PureComponent {
         const classes = classNames(className, {
             [styles.dataList]: true,
             [styles.disabledHover]: disabledHover,
-            [styles.multiSelection]: selection.getSelected().size > 0
+            [styles.multiSelection]: selection.getSelected().size > 0,
         });
         return (<div className={styles.dataListWrapper} data-test="ring-data-list" ref={innerRef}>
-        {focused &&
-                (<Shortcuts map={shortcutsMap} scope={this.shortcutsScope}/>)}
+        {focused && <Shortcuts map={shortcutsMap} scope={this.shortcutsScope}/>}
 
         <ul className={classes}>
           {data.map(model => {