@djangocfg/ui-core 2.1.548 → 2.1.550

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.548",
+  "version": "2.1.550",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -130,7 +130,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.548",
+    "@djangocfg/i18n": "^2.1.550",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,9 +206,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/eslint-config": "^2.1.548",
-    "@djangocfg/i18n": "^2.1.548",
-    "@djangocfg/typescript-config": "^2.1.548",
+    "@djangocfg/eslint-config": "^2.1.550",
+    "@djangocfg/i18n": "^2.1.550",
+    "@djangocfg/typescript-config": "^2.1.550",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",

package/src/components/forms/phone-input/index.tsx

@@ -84,20 +84,25 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
       )
     }, [searchQuery])
 
-    // Initialize input value from props
+    // Mirror the controlled value, empty included. Skipping the empty case
+    // leaves the last number on screen after a parent resets the form, so the
+    // field shows digits the form no longer holds.
     React.useEffect(() => {
-      if (value) {
-        try {
-          const phoneNumber = parsePhoneNumberFromString(value)
-          if (phoneNumber) {
-            setSelectedCountry(phoneNumber.country || defaultCountry)
-            setInputValue(phoneNumber.nationalNumber)
-          } else {
-            setInputValue(value)
-          }
-        } catch {
+      if (!value) {
+        setInputValue('')
+        setSelectedCountry(defaultCountry)
+        return
+      }
+      try {
+        const phoneNumber = parsePhoneNumberFromString(value)
+        if (phoneNumber) {
+          setSelectedCountry(phoneNumber.country || defaultCountry)
+          setInputValue(phoneNumber.nationalNumber)
+        } else {
           setInputValue(value)
         }
+      } catch {
+        setInputValue(value)
       }
     }, [value, defaultCountry])
 

package/src/components/select/multi-select-pro-async.tsx

@@ -242,7 +242,9 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
         badgeAnimation: animationConfig?.badgeAnimation || (animation > 0 ? "bounce" : "none"),
         popoverAnimation: animationConfig?.popoverAnimation || "scale",
         optionHoverAnimation: animationConfig?.optionHoverAnimation || "highlight",
-        duration: animationConfig?.duration || animation || 0.3,
+        // `??`: a caller asking for duration 0 means "no animation",
+        // and `||` swallowed it into the 0.3 default.
+        duration: animationConfig?.duration ?? (animation > 0 ? animation : 0.3),
         delay: animationConfig?.delay || 0,
       }),
       [animation, animationConfig]
@@ -263,9 +265,23 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
     }, [defaultValueKey, resetOnDefaultValueChange])
 
     // Announce changes for screen readers
+    // One timer, cleared on unmount: the announcement is transient UI state,
+    // and stacking a timer per change clears it early for the latest message.
+    const announceTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+    React.useEffect(
+      () => () => {
+        if (announceTimerRef.current) clearTimeout(announceTimerRef.current)
+      },
+      []
+    )
+
     const announce = React.useCallback((message: string) => {
       setAnnouncements(message)
-      setTimeout(() => setAnnouncements(""), 1000)
+      if (announceTimerRef.current) clearTimeout(announceTimerRef.current)
+      announceTimerRef.current = setTimeout(() => {
+        announceTimerRef.current = null
+        setAnnouncements("")
+      }, 1000)
     }, [])
 
     // Toggle selection

package/src/components/select/multi-select-pro.tsx

@@ -233,7 +233,9 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
         badgeAnimation: animationConfig?.badgeAnimation || (animation > 0 ? "bounce" : "none"),
         popoverAnimation: animationConfig?.popoverAnimation || "scale",
         optionHoverAnimation: animationConfig?.optionHoverAnimation || "highlight",
-        duration: animationConfig?.duration || animation || 0.3,
+        // `??`: a caller asking for duration 0 means "no animation",
+        // and `||` swallowed it into the 0.3 default.
+        duration: animationConfig?.duration ?? (animation > 0 ? animation : 0.3),
         delay: animationConfig?.delay || 0,
       }),
       [animation, animationConfig]
@@ -247,9 +249,23 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
     }, [defaultValue, resetOnDefaultValueChange])
 
     // Announce changes for screen readers
+    // One timer, cleared on unmount: the announcement is transient UI state,
+    // and stacking a timer per change clears it early for the latest message.
+    const announceTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+    React.useEffect(
+      () => () => {
+        if (announceTimerRef.current) clearTimeout(announceTimerRef.current)
+      },
+      []
+    )
+
     const announce = React.useCallback((message: string) => {
       setAnnouncements(message)
-      setTimeout(() => setAnnouncements(""), 1000)
+      if (announceTimerRef.current) clearTimeout(announceTimerRef.current)
+      announceTimerRef.current = setTimeout(() => {
+        announceTimerRef.current = null
+        setAnnouncements("")
+      }, 1000)
     }, [])
 
     // Toggle selection

package/src/hooks/dom/useBodyScrollLock.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useDeviceDetect } from '../device/useDeviceDetect';
 
@@ -95,12 +95,20 @@ function releaseLock() {
 export function useBodyScrollLock(locked: boolean): void {
   const device = useDeviceDetect();
 
+  // `isIOS` starts false and flips once the UA parse resolves. With it in the
+  // deps the effect re-ran on that flip: the cleanup dropped the shared
+  // lockCount to 0 and released the lock — unlocking the page under a second
+  // overlay that was still open. The lock strategy is chosen once, on the
+  // acquisition that takes the count from 0 to 1.
+  const isIOSRef = useRef(device.isIOS);
+  isIOSRef.current = device.isIOS;
+
   useEffect(() => {
     if (!locked) return;
     if (typeof document === 'undefined') return;
 
     if (lockCount === 0) {
-      applyLock(device.isIOS);
+      applyLock(isIOSRef.current);
     }
     lockCount += 1;
 
@@ -110,5 +118,5 @@ export function useBodyScrollLock(locked: boolean): void {
         releaseLock();
       }
     };
-  }, [locked, device.isIOS]);
+  }, [locked]);
 }