design-react-kit 5.9.3 → 5.10.0

package/dist/Collapse/Collapse.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Collapse as CollapseBase } from 'reactstrap';
 import { Icon } from '../Icon/Icon';
 export const Collapse = ({ header = false, className, navbar, megamenu, children, isOpen = false, onOverlayClick, cssModule, testId, closeSrText = 'Nascondi la navigazione', ...attributes }) => {
@@ -7,17 +7,85 @@ export const Collapse = ({ header = false, className, navbar, megamenu, children
         'navbar-collapse': 'navbar-collapsable',
         ...cssModule
     };
+    // Two-phase state to allow CSS transitions to play.
+    // isVisible controls display:block/none; isExpanded controls the animation class.
+    const [isVisible, setIsVisible] = useState(isOpen);
+    const [isExpanded, setIsExpanded] = useState(isOpen);
+    const panelRef = useRef(null);
+    const triggerRef = useRef(null);
+    useEffect(() => {
+        if (!(megamenu || navbar))
+            return;
+        if (isOpen) {
+            triggerRef.current = document.activeElement;
+            setIsVisible(true);
+            // Double rAF ensures the browser has painted display:block before adding
+            // the expanded class, so the CSS transform transition can fire.
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setIsExpanded(true);
+                    panelRef.current?.focus();
+                });
+            });
+            return;
+        }
+        setIsExpanded(false);
+        // Wait for the CSS transition to complete before hiding.
+        const timer = setTimeout(() => {
+            setIsVisible(false);
+            triggerRef.current?.focus();
+        }, PANEL_TRANSITION_MS);
+        return () => clearTimeout(timer);
+    }, [isOpen, megamenu, navbar]);
+    useEffect(() => {
+        if (!(megamenu || navbar))
+            return;
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => { document.body.style.overflow = ''; };
+    }, [isOpen, megamenu, navbar]);
+    useEffect(() => {
+        if (!(megamenu || navbar))
+            return;
+        const main = document.querySelector('main');
+        if (!main)
+            return;
+        if (isOpen) {
+            main.setAttribute('inert', '');
+        }
+        else {
+            main.removeAttribute('inert');
+        }
+        return () => main.removeAttribute('inert');
+    }, [isOpen, megamenu, navbar]);
+    useEffect(() => {
+        if (!(megamenu || navbar))
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                onOverlayClick?.();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, megamenu, navbar, onOverlayClick]);
+    // Must match the longest CSS transition on .navbar-collapsable (currently 0.3s + buffer).
+    const PANEL_TRANSITION_MS = 350;
     if (megamenu || navbar) {
         const classes = classNames(className, 'navbar-collapse', {
-            expanded: isOpen
+            expanded: isExpanded
         });
-        const style = { display: isOpen ? 'block' : 'none' };
         const overlayClasses = classNames('overlay', {
-            fade: isOpen,
-            show: isOpen
+            fade: isVisible,
+            show: isExpanded
         });
-        return (React.createElement(CollapseBase, { className: classes, cssModule: newCssModule, navbar: navbar, style: style, "data-testid": testId, ...attributes },
-            React.createElement("div", { className: overlayClasses, style: style, onClick: onOverlayClick }),
+        const displayStyle = { display: isVisible ? 'block' : 'none' };
+        return (React.createElement(CollapseBase, { className: classes, cssModule: newCssModule, navbar: navbar, style: displayStyle, tabIndex: -1, innerRef: panelRef, role: isOpen ? 'dialog' : undefined, "aria-modal": isOpen ? true : undefined, "aria-label": isOpen ? 'Menu di navigazione' : undefined, "data-testid": testId, ...attributes },
+            React.createElement("div", { className: overlayClasses, style: displayStyle, onClick: onOverlayClick }),
             React.createElement("div", { className: 'close-div' },
                 React.createElement("button", { className: 'btn close-menu', type: 'button', onClick: onOverlayClick },
                     React.createElement("span", { className: 'visually-hidden' }, closeSrText),

package/dist/Collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AAGtD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AA0CpC,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,MAAM,GAAG,KAAK,EACd,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,cAAc,EACd,SAAS,EACT,MAAM,EACN,WAAW,GAAG,yBAAyB,EACvC,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,YAAY,GAAG;QACnB,iBAAiB,EAAE,oBAAoB;QACvC,GAAG,SAAS;KACb,CAAC;IACF,IAAI,QAAQ,IAAI,MAAM,EAAE,CAAC;QACvB,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE,iBAAiB,EAAE;YACvD,QAAQ,EAAE,MAAM;SACjB,CAAC,CAAC;QACH,MAAM,KAAK,GAAG,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;QACrD,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,EAAE;YAC3C,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;SACb,CAAC,CAAC;QACH,OAAO,CACL,oBAAC,YAAY,IACX,SAAS,EAAE,OAAO,EAClB,SAAS,EAAE,YAAY,EACvB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,iBACC,MAAM,KACf,UAAU;YAEd,6BAAK,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,GAAQ;YAC7E,6BAAK,SAAS,EAAC,WAAW;gBACxB,gCAAQ,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,cAAc;oBACtE,8BAAM,SAAS,EAAC,iBAAiB,IAAE,WAAW,CAAQ;oBACtD,oBAAC,IAAI,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,cAAc,GAAG,CACnC,CACL;YACL,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,eAAe,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,0CAAG,QAAQ,CAAI,CAChE,CAChB,CAAC;IACJ,CAAC;IACD,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,EAAE;QACpC,mBAAmB,EAAE,MAAM;KAC5B,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,YAAY,IACX,SAAS,EAAE,OAAO,EAClB,SAAS,EAAE,YAAY,KACnB,UAAU,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,iBACD,MAAM,IAElB,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../src/Collapse/Collapse.tsx"],"names":[],"mappings":"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"}