design-react-kit 5.9.3 → 5.10.0

package/package.json

@@ -25,7 +25,7 @@
   "bugs": {
     "url": "https://github.com/italia/design-react-kit/issues"
   },
-  "version": "5.9.3",
+  "version": "5.10.0",
   "license": "BSD-3",
   "type": "module",
   "module": "./dist/index.js",
@@ -72,7 +72,7 @@
     "postversion": "echo \"You can now publish your version using 'git push --follow-tags'\""
   },
   "peerDependencies": {
-    "bootstrap-italia": "^2.17.4",
+    "bootstrap-italia": "^2.18.0",
     "react": ">=18.2.0"
   },
   "browserslist": [
@@ -105,7 +105,7 @@
     "@types/react-dom": "^18.2.24",
     "@types/react-transition-group": "^4.4.10",
     "@types/uuid": "^10.0.0",
-    "bootstrap-italia": "^2.17.4",
+    "bootstrap-italia": "^2.18.0",
     "browserslist-config-design-italia": "^1.0.0",
     "conventional-changelog": "^7.1.1",
     "eslint": "^9.10.0",

package/src/Collapse/Collapse.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ElementType, FC, HTMLAttributes, Ref } from 'react';
+import React, { ElementType, FC, HTMLAttributes, Ref, useEffect, useRef, useState } from 'react';
 
 import { Collapse as CollapseBase } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
@@ -63,25 +63,98 @@ export const Collapse: FC<CollapseProps> = ({
     '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<HTMLElement>(null);
+  const triggerRef = useRef<Element | null>(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 as HTMLElement | null)?.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: KeyboardEvent) => {
+      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
     });
+    const displayStyle = { display: isVisible ? 'block' : 'none' };
     return (
       <CollapseBase
         className={classes}
         cssModule={newCssModule}
         navbar={navbar}
-        style={style}
+        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}
       >
-        <div className={overlayClasses} style={style} onClick={onOverlayClick}></div>
+        <div className={overlayClasses} style={displayStyle} onClick={onOverlayClick}></div>
         <div className='close-div'>
           <button className='btn close-menu' type='button' onClick={onOverlayClick}>
             <span className='visually-hidden'>{closeSrText}</span>

package/src/Input/Input.tsx

@@ -5,7 +5,6 @@ import React, {
   ReactNode,
   Ref,
   useCallback,
-  useEffect,
   useRef,
   useState
 } from 'react';
@@ -152,19 +151,7 @@ export const Input = ({
     toggleIcon(!hasIcon);
   }, [hasIcon, isHidden]);
 
-  const divResizeRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [width, setWidth] = useState('100');
-
-  useEffect(() => {
-    if (divResizeRef.current != null && divResizeRef.current.classList.contains('input-number-adaptive')) {
-      if (!value) {
-        setWidth(`calc(70px)`);
-      } else {
-        setWidth(`calc(70px + ${`${value}`.length}ch)`);
-      }
-    }
-  }, [value]);
 
   // eslint-disable-next-line prefer-const
   let { bsSize, valid, ...rest } = attributes;
@@ -312,8 +299,7 @@ export const Input = ({
             disabled: rest.disabled,
             'input-number-adaptive': type === 'adaptive'
           })}
-          style={{ width }}
-          ref={divResizeRef}
+          style={type === 'adaptive' ? { width: !value ? '70px' : `min(calc(70px + ${`${value}`.length}ch), 100%)` } : undefined}
         >
           {['currency', 'percentage'].includes(type) && (
             <span className='input-group-text fw-semibold'>{addonText}</span>