@djangocfg/ui-core 2.1.480 → 2.1.481

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.480",
+  "version": "2.1.481",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -128,7 +128,7 @@
     "check:contrast": "node scripts/check-preset-contrast.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.480",
+    "@djangocfg/i18n": "^2.1.481",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -206,8 +206,8 @@
     "@chenglou/pretext": "^0.0.8"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.480",
-    "@djangocfg/typescript-config": "^2.1.480",
+    "@djangocfg/i18n": "^2.1.481",
+    "@djangocfg/typescript-config": "^2.1.481",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",

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

@@ -177,7 +177,11 @@ const TagsInput = React.forwardRef<HTMLDivElement, TagsInputRootProps>(
     const collectionRef = React.useRef<HTMLDivElement>(null);
     const inputRef = React.useRef<HTMLInputElement>(null);
 
-    const id = idProp ?? React.useId();
+    // useId must be called unconditionally — `idProp ?? React.useId()` skips the
+    // hook whenever a caller passes `id`, so the hook count differs between
+    // renders/instances and React crashes (#310). Call it, then prefer idProp.
+    const generatedId = React.useId();
+    const id = idProp ?? generatedId;
     const inputId = React.useId();
     const labelId = React.useId();
 

package/src/components/select/country-select.tsx

@@ -195,6 +195,56 @@ export function CountrySelect({
     onChange?.(value.filter((v) => v !== code))
   }, [value, onChange])
 
+  // Used only by the dropdown variant below, but MUST be declared before the
+  // `inline` early return — a hook after a conditional return changes the hook
+  // count when `variant` differs between renders and crashes React (#310).
+  const displayValue = React.useMemo(() => {
+    if (selectedCountries.length === 0) {
+      return <span className="text-muted-foreground">{resolvedPlaceholder}</span>
+    }
+
+    if (!multiple && selectedCountries.length === 1) {
+      const country = selectedCountries[0]!;
+      return (
+        <div className="flex items-center gap-2">
+          <Flag countryCode={country.code} rounded className="h-3 w-4 shrink-0" />
+          <span>{country.name}</span>
+        </div>
+      );
+    }
+
+    const displayed = selectedCountries.slice(0, maxDisplay)
+    const remaining = selectedCountries.length - maxDisplay
+
+    return (
+      <div className="flex flex-wrap gap-1">
+        {displayed.map((country) => (
+          <Badge
+            key={country.code}
+            variant="secondary"
+            className="mr-1 text-xs"
+          >
+            <Flag countryCode={country.code} rounded className="mr-1 h-3 w-4 shrink-0" />
+            {country.name}
+            <button
+              className="ml-1 rounded-full hover:bg-muted-foreground/20"
+              onClick={(e) => handleRemove(country.code, e)}
+              disabled={disabled}
+              aria-label={`Remove ${country.name}`}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </Badge>
+        ))}
+        {remaining > 0 && (
+          <Badge variant="outline" className="text-xs">
+            {moreItemsLabel(remaining)}
+          </Badge>
+        )}
+      </div>
+    )
+  }, [selectedCountries, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel])
+
   // Inline variant
   if (variant === 'inline') {
     return (
@@ -276,54 +326,7 @@ export function CountrySelect({
     );
   }
 
-  // Dropdown variant
-  const displayValue = React.useMemo(() => {
-    if (selectedCountries.length === 0) {
-      return <span className="text-muted-foreground">{resolvedPlaceholder}</span>
-    }
-
-    if (!multiple && selectedCountries.length === 1) {
-      const country = selectedCountries[0]!;
-      return (
-        <div className="flex items-center gap-2">
-          <Flag countryCode={country.code} rounded className="h-3 w-4 shrink-0" />
-          <span>{country.name}</span>
-        </div>
-      );
-    }
-
-    const displayed = selectedCountries.slice(0, maxDisplay)
-    const remaining = selectedCountries.length - maxDisplay
-
-    return (
-      <div className="flex flex-wrap gap-1">
-        {displayed.map((country) => (
-          <Badge
-            key={country.code}
-            variant="secondary"
-            className="mr-1 text-xs"
-          >
-            <Flag countryCode={country.code} rounded className="mr-1 h-3 w-4 shrink-0" />
-            {country.name}
-            <button
-              className="ml-1 rounded-full hover:bg-muted-foreground/20"
-              onClick={(e) => handleRemove(country.code, e)}
-              disabled={disabled}
-              aria-label={`Remove ${country.name}`}
-            >
-              <X className="h-3 w-3" />
-            </button>
-          </Badge>
-        ))}
-        {remaining > 0 && (
-          <Badge variant="outline" className="text-xs">
-            {moreItemsLabel(remaining)}
-          </Badge>
-        )}
-      </div>
-    )
-  }, [selectedCountries, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel])
-
+  // Dropdown variant (displayValue is memoized above, before the inline guard)
   return (
     <Popover
       open={open}

package/src/components/select/language-select.tsx

@@ -209,6 +209,58 @@ export function LanguageSelect({
     onChange?.(value.filter((v) => v !== code))
   }, [value, onChange])
 
+  // Used only by the dropdown variant below, but MUST be declared before the
+  // `inline` early return — a hook after a conditional return changes the hook
+  // count when `variant` differs between renders and crashes React (#310).
+  const displayValue = React.useMemo(() => {
+    if (selectedLanguages.length === 0) {
+      return <span className="text-muted-foreground">{resolvedPlaceholder}</span>
+    }
+
+    if (!multiple && selectedLanguages.length === 1) {
+      const language = selectedLanguages[0]!;
+      return (
+        <div className="flex items-center gap-2">
+          {showFlag && <LanguageFlag code={language.code} className="h-3 w-4" rounded />}
+          {showCode && <span className="text-xs text-muted-foreground uppercase">{language.code}</span>}
+          <span>{language.name}</span>
+        </div>
+      );
+    }
+
+    const displayed = selectedLanguages.slice(0, maxDisplay)
+    const remaining = selectedLanguages.length - maxDisplay
+
+    return (
+      <div className="flex flex-wrap gap-1">
+        {displayed.map((language) => (
+          <Badge
+            key={language.code}
+            variant="secondary"
+            className="mr-1 text-xs"
+          >
+            {showFlag && <LanguageFlag code={language.code} className="mr-1 h-3 w-4" rounded />}
+            {showCode && <span className="mr-1 text-muted-foreground uppercase">{language.code}</span>}
+            {language.name}
+            <button
+              className="ml-1 rounded-full hover:bg-muted-foreground/20"
+              onClick={(e) => handleRemove(language.code, e)}
+              disabled={disabled}
+              aria-label={`Remove ${language.name}`}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </Badge>
+        ))}
+        {remaining > 0 && (
+          <Badge variant="outline" className="text-xs">
+            {moreItemsLabel(remaining)}
+          </Badge>
+        )}
+      </div>
+    )
+  }, [selectedLanguages, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel, showFlag, showCode])
+
   // Inline variant
   if (variant === 'inline') {
     return (
@@ -307,56 +359,7 @@ export function LanguageSelect({
     );
   }
 
-  // Dropdown variant
-  const displayValue = React.useMemo(() => {
-    if (selectedLanguages.length === 0) {
-      return <span className="text-muted-foreground">{resolvedPlaceholder}</span>
-    }
-
-    if (!multiple && selectedLanguages.length === 1) {
-      const language = selectedLanguages[0]!;
-      return (
-        <div className="flex items-center gap-2">
-          {showFlag && <LanguageFlag code={language.code} className="h-3 w-4" rounded />}
-          {showCode && <span className="text-xs text-muted-foreground uppercase">{language.code}</span>}
-          <span>{language.name}</span>
-        </div>
-      );
-    }
-
-    const displayed = selectedLanguages.slice(0, maxDisplay)
-    const remaining = selectedLanguages.length - maxDisplay
-
-    return (
-      <div className="flex flex-wrap gap-1">
-        {displayed.map((language) => (
-          <Badge
-            key={language.code}
-            variant="secondary"
-            className="mr-1 text-xs"
-          >
-            {showFlag && <LanguageFlag code={language.code} className="mr-1 h-3 w-4" rounded />}
-            {showCode && <span className="mr-1 text-muted-foreground uppercase">{language.code}</span>}
-            {language.name}
-            <button
-              className="ml-1 rounded-full hover:bg-muted-foreground/20"
-              onClick={(e) => handleRemove(language.code, e)}
-              disabled={disabled}
-              aria-label={`Remove ${language.name}`}
-            >
-              <X className="h-3 w-3" />
-            </button>
-          </Badge>
-        ))}
-        {remaining > 0 && (
-          <Badge variant="outline" className="text-xs">
-            {moreItemsLabel(remaining)}
-          </Badge>
-        )}
-      </div>
-    )
-  }, [selectedLanguages, maxDisplay, resolvedPlaceholder, disabled, multiple, handleRemove, moreItemsLabel, showFlag, showCode])
-
+  // Dropdown variant (displayValue is memoized above, before the inline guard)
   return (
     <Popover
       open={open}

package/src/hooks/debug/useDebugTools.ts

@@ -5,33 +5,41 @@ import { useDebugValue } from 'react';
 type DebugValue = Record<string, unknown> | unknown[] | null | undefined;
 
 export function useDebugTools(values: DebugValue, prefix = '') {
+    // useDebugValue must be called EXACTLY ONCE and UNCONDITIONALLY. The prior
+    // version called it inside branches and per-array-element/object-key loops,
+    // so the hook count varied with the shape of `values` between renders —
+    // a rules-of-hooks violation (React #310 territory). Instead, call it once
+    // with a lazy formatter that builds the full multi-line label; the formatter
+    // still only runs when React DevTools inspects the hook, so nothing is
+    // eagerly serialized in normal renders.
+    useDebugValue(values, (v) => formatDebugValues(v, prefix));
+}
+
+function formatDebugValues(values: DebugValue, prefix: string): string {
     if (values === null || values === undefined) {
-        useDebugValue(values, () => `${prefix}: ${values === null ? 'null' : 'undefined'}`);
-        return;
+        return `${prefix}: ${values === null ? 'null' : 'undefined'}`;
     }
 
     if (Array.isArray(values)) {
-        values.forEach((value, index) => {
-            useDebugValue(value, (v) => {
+        return values
+            .map((value, index) => {
                 const label = prefix ? `${prefix}[${index}]` : `[${index}]`;
-                return `${label}: ${formatValue(v)}`;
-            });
-        });
-        return;
+                return `${label}: ${formatValue(value)}`;
+            })
+            .join('\n');
     }
 
     if (typeof values === 'object') {
-        for (const [key, value] of Object.entries(values)) {
-            useDebugValue(value, (v) => {
+        return Object.entries(values)
+            .map(([key, value]) => {
                 const label = prefix ? `${prefix}.${key}` : key;
-                return `${label}: ${formatValue(v)}`;
-            });
-        }
-        return;
+                return `${label}: ${formatValue(value)}`;
+            })
+            .join('\n');
     }
 
-    // Handle primitive values
-    useDebugValue(values, (v) => `${prefix}: ${formatValue(v)}`);
+    // Primitive
+    return `${prefix}: ${formatValue(values)}`;
 }
 
 function formatValue(value: unknown): string {