@jetbrains/ring-ui 7.0.0 → 7.0.2-beta.0

package/README.md

@@ -6,7 +6,7 @@
 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/p/sandbox/ring-ui-sandbox-6-0-demo-qk5vgv), based on `create-react-app` tooling, to see and try the UI components
+* Try the [codesandbox](https://codesandbox.io/p/sandbox/ring-ui-7-0-demo-z6v6ym), 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

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

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

package/components/collapse/collapse-content.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import { useState, useEffect, useRef, useContext, useMemo } from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import dataTests from '../global/data-tests';
 import { getRect } from '../global/dom';
@@ -19,30 +20,19 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
     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(collapsed);
-    const [shouldHideContent, setShouldHideContent] = useState(collapsed && minHeight <= DEFAULT_HEIGHT);
+    const [showFade, setShowFade] = useState(true);
     useEffect(() => {
-        function onTransitionEnd() {
-            if (initialContentHeight.current <= DEFAULT_HEIGHT) {
-                setShouldHideContent(collapsed);
-            }
+        if (!collapsed) {
+            setShowFade(false);
         }
-        const container = containerRef.current;
-        if (container) {
-            container.addEventListener('transitionend', onTransitionEnd);
+        else {
+            setShowFade(true);
         }
-        return () => {
-            if (container) {
-                container.removeEventListener('transitionend', onTransitionEnd);
-            }
-        };
-    }, [collapsed]);
-    useEffect(() => {
-        setShowFade(collapsed);
-        if (!collapsed)
-            setShouldHideContent(false);
     }, [collapsed]);
     useEffect(() => {
         if (contentRef.current) {
@@ -73,10 +63,9 @@ export const CollapseContent = ({ children, minHeight = DEFAULT_HEIGHT, 'data-te
         };
     }, [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)}>
-        {shouldRenderContent ? children : null}
+        {children}
       </div>
       {fadeShouldBeVisible && <div className={styles.fade}/>}
     </div>);

package/components/shortcuts/core.js

@@ -156,8 +156,9 @@ class Shortcuts {
             !(element instanceof HTMLElement) ||
             key == null ||
             element.matches(this.ALLOW_SHORTCUTS_SELECTOR) ||
-            element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null ||
-            (element.dataset.enabledShortcuts != null && element.dataset.enabledShortcuts.split(',').includes(key))) {
+            (element.dataset.enabledShortcuts != null
+                ? element.dataset.enabledShortcuts.split(',').includes(key)
+                : element.closest(this.ALLOW_SHORTCUTS_SELECTOR) != null)) {
             return false;
         }
         const elementContentEditableAttribute = element.contentEditable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.0",
+  "version": "7.0.2-beta.0",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -127,7 +127,7 @@
     "acorn": "^8.14.0",
     "axe-playwright": "^2.0.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001677",
+    "caniuse-lite": "^1.0.30001678",
     "chai": "^5.1.2",
     "chai-as-promised": "^8.0.0",
     "chai-dom": "^1.10.0",