@homecode/ui 5.20.23 → 5.20.24

package/dist/esm/src/components/LightBox/LightBox.js

@@ -6,8 +6,14 @@ import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/Icon.js';
 import S from './LightBox.styl.js';
 
+/** Matches the fade-out in LightBox.styl: the blur stays until it ends. */
+const FADE_MS = 200;
 function LightBox({ children, className, onClose, blur, ...props }) {
     const [isOpen, setOpen] = useState(false);
+    // A closed light box stays mounted at opacity 0, and an invisible
+    // full-screen blur still costs a backdrop pass every frame (a list of cards,
+    // each with its own light box, stalled the page). Blur only while it shows.
+    const [blurOn, setBlurOn] = useState(false);
     const onKeyDown = useCallback(e => {
         if (isOpen && e.key === 'Escape') {
             e.stopPropagation();
@@ -18,11 +24,19 @@ function LightBox({ children, className, onClose, blur, ...props }) {
     useEffect(() => {
         setOpen(props.isOpen);
     }, [props.isOpen]);
+    useEffect(() => {
+        if (isOpen) {
+            setBlurOn(true);
+            return;
+        }
+        const timer = setTimeout(() => setBlurOn(false), FADE_MS);
+        return () => clearTimeout(timer);
+    }, [isOpen]);
     useEffect(() => {
         document.addEventListener('keydown', onKeyDown, true);
         return () => document.removeEventListener('keydown', onKeyDown, true);
     }, [isOpen]);
-    return (jsxs(Paranja, { className: cn(S.root, isOpen && S.open, className), blur: blur, children: [children, jsx(Button, { className: S.close, onClick: onClose, variant: "clear", children: jsx(Icon, { type: "close", size: "l" }) })] }));
+    return (jsxs(Paranja, { className: cn(S.root, isOpen && S.open, className), blur: blur && blurOn, children: [children, jsx(Button, { className: S.close, onClick: onClose, variant: "clear", children: jsx(Icon, { type: "close", size: "l" }) })] }));
 }
 
 export { LightBox };

package/dist/esm/src/components/Popup/Popup.js

@@ -503,7 +503,10 @@ class Popup extends Component {
         const wrapperClasses = cn(S.contentWrapper, inline && S.inline, isOpen && S.isOpen, animating && S.animating, wrapperProps.className);
         const trigger = this.triggerElem.current;
         const [axis, float] = direction.split('-');
-        const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], blur && S.blur, round && S.round, contentProps.className);
+        const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], 
+        // A closed popup stays mounted at opacity 0; its blur would still cost
+        // a backdrop pass every frame, so blur only while the content is shown.
+        blur && isContentVisible && S.blur, round && S.round, contentProps.className);
         if (trigger && !inline && triggerBounds) {
             const shiftTf = boundaryFit.left !== 0 || boundaryFit.top !== 0
                 ? `translate3d(${boundaryFit.left}px, ${boundaryFit.top}px, 0)`

package/dist/esm/types/src/components/LightBox/LightBox.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.20.23",
+  "version": "5.20.24",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",