@djangocfg/ui-core 2.1.541 → 2.1.543

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

@@ -56,8 +56,7 @@ export interface TagsInputRootProps
   children?: React.ReactNode | ((context: { value: TagValue[] }) => React.ReactNode);
 }
 
-export interface TagsInputInputProps
-  extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue"> {}
+export type TagsInputInputProps = Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue">;
 
 export interface TagsInputItemProps extends React.ComponentPropsWithoutRef<"div"> {
   /** The value of the item. */
@@ -66,11 +65,9 @@ export interface TagsInputItemProps extends React.ComponentPropsWithoutRef<"div"
   disabled?: boolean;
 }
 
-export interface TagsInputItemTextProps
-  extends React.ComponentPropsWithoutRef<"span"> {}
+export type TagsInputItemTextProps = React.ComponentPropsWithoutRef<"span">;
 
-export interface TagsInputItemDeleteProps
-  extends React.ComponentPropsWithoutRef<"button"> {}
+export type TagsInputItemDeleteProps = React.ComponentPropsWithoutRef<"button">;
 
 // =============================================================================
 // Context
@@ -169,7 +166,16 @@ const TagsInput = React.forwardRef<HTMLDivElement, TagsInputRootProps>(
     } = props;
 
     const [value = [], setValue] = React.useState<TagValue[] | undefined>(defaultValue);
-    const resolvedValue = valueProp !== undefined ? valueProp : (value ?? []);
+    /*
+     * Memoised because the `?? []` branch mints a NEW array each render, and
+     * four `useCallback`s below take `resolvedValue` as a dependency — so an
+     * uncontrolled, empty TagsInput rebuilt all four on every render and the
+     * memoisation bought nothing. Identity is what those hooks compare.
+     */
+    const resolvedValue = React.useMemo(
+      () => (valueProp !== undefined ? valueProp : (value ?? [])),
+      [valueProp, value],
+    );
 
     const [highlightedIndex, setHighlightedIndex] = React.useState<number | null>(null);
     const [editingIndex, setEditingIndex] = React.useState<number | null>(null);
@@ -531,46 +537,47 @@ const TagsInputInput = React.forwardRef<HTMLInputElement, TagsInputInputProps>(
   (props, ref) => {
     const { autoFocus, ...inputProps } = props;
     const context = useTagsInput("TagsInputInput");
+    const { onItemAdd, setHighlightedIndex, addOnTab, inputRef } = context;
 
     const onCustomKeydown = React.useCallback(
       (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.defaultPrevented) return;
         const value = event.currentTarget.value;
         if (!value) return;
-        const isAdded = context.onItemAdd(value);
+        const isAdded = onItemAdd(value);
         if (isAdded) {
           event.currentTarget.value = "";
-          context.setHighlightedIndex(null);
+          setHighlightedIndex(null);
         }
         event.preventDefault();
       },
-      [context.onItemAdd, context.setHighlightedIndex]
+      [onItemAdd, setHighlightedIndex]
     );
 
     const onTab = React.useCallback(
       (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (!context.addOnTab) return;
+        if (!addOnTab) return;
         onCustomKeydown(event);
       },
-      [context.addOnTab, onCustomKeydown]
+      [addOnTab, onCustomKeydown]
     );
 
     React.useEffect(() => {
       if (!autoFocus) return;
-      const id = requestAnimationFrame(() => context.inputRef.current?.focus());
+      const id = requestAnimationFrame(() => inputRef.current?.focus());
       return () => cancelAnimationFrame(id);
-    }, [autoFocus, context.inputRef]);
+    }, [autoFocus, inputRef]);
 
     const composedRef = React.useCallback(
       (node: HTMLInputElement | null) => {
-        context.inputRef.current = node;
+        inputRef.current = node;
         if (typeof ref === "function") {
           ref(node);
         } else if (ref) {
           (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
         }
       },
-      [ref, context.inputRef]
+      [ref, inputRef]
     );
 
     return (
@@ -664,10 +671,11 @@ const TagsInputItem = React.forwardRef<HTMLDivElement, TagsInputItemProps>(
     const itemDisabled = itemDisabledProp || context.disabled;
     const displayValue = context.displayValue(value);
 
+    const { setHighlightedIndex, inputRef } = context;
     const onItemSelect = React.useCallback(() => {
-      context.setHighlightedIndex(index);
-      context.inputRef.current?.focus();
-    }, [context.setHighlightedIndex, context.inputRef, index]);
+      setHighlightedIndex(index);
+      inputRef.current?.focus();
+    }, [setHighlightedIndex, inputRef, index]);
 
     return (
       <TagsInputItemContext.Provider
@@ -694,6 +702,10 @@ const TagsInputItem = React.forwardRef<HTMLDivElement, TagsInputItemProps>(
           data-editing={isEditing ? "" : undefined}
           data-editable={context.editable ? "" : undefined}
           data-disabled={itemDisabled ? "" : undefined}
+          {...itemProps}
+          // Spread stays ABOVE className and the handlers: below them, a consumer
+          // that passes any of these props replaces the composed behaviour
+          // outright — a tag with an onClick stops being selectable.
           className={cn(
             "inline-flex items-center gap-1 rounded-[var(--radius)] border bg-secondary px-2 py-0.5 text-sm text-secondary-foreground transition-colors",
             isHighlighted && "ring-1 ring-ring",
@@ -707,14 +719,14 @@ const TagsInputItem = React.forwardRef<HTMLDivElement, TagsInputItemProps>(
               onItemSelect();
             }
           }}
-          onDoubleClick={() => {
-            itemProps.onDoubleClick?.(undefined as unknown as React.MouseEvent<HTMLDivElement>);
+          onDoubleClick={(event) => {
+            itemProps.onDoubleClick?.(event);
             if (context.editable && !itemDisabled) {
               requestAnimationFrame(() => context.setEditingIndex(index));
             }
           }}
-          onPointerUp={() => {
-            itemProps.onPointerUp?.(undefined as unknown as React.PointerEvent<HTMLDivElement>);
+          onPointerUp={(event) => {
+            itemProps.onPointerUp?.(event);
             if (pointerTypeRef.current === "mouse") onItemSelect();
           }}
           onPointerDown={(event) => {
@@ -736,7 +748,6 @@ const TagsInputItem = React.forwardRef<HTMLDivElement, TagsInputItemProps>(
               context.onItemLeave();
             }
           }}
-          {...itemProps}
         />
       </TagsInputItemContext.Provider>
     );
@@ -754,10 +765,13 @@ function TagsInputEditableItemText() {
   const itemContext = useTagsInputItem("TagsInputEditableItemText");
   const [editValue, setEditValue] = React.useState(itemContext.displayValue);
 
+  const { setEditingIndex, setHighlightedIndex, onItemUpdate, inputRef, value: contextValue } = context;
+  const { displayValue, value: itemValue, index: itemIndex } = itemContext;
+
   const onBlur = React.useCallback(() => {
-    setEditValue(itemContext.displayValue);
-    context.setEditingIndex(null);
-  }, [context.setEditingIndex, itemContext.displayValue]);
+    setEditValue(displayValue);
+    setEditingIndex(null);
+  }, [setEditingIndex, displayValue]);
 
   const onChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     const target = event.target;
@@ -775,26 +789,26 @@ function TagsInputEditableItemText() {
   const onKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key === "Enter") {
-        const index = context.value.indexOf(itemContext.value);
-        context.onItemUpdate(index, editValue);
+        const index = contextValue.indexOf(itemValue);
+        onItemUpdate(index, editValue);
       } else if (event.key === "Escape") {
-        setEditValue(itemContext.displayValue);
-        context.setEditingIndex(null);
-        context.setHighlightedIndex(itemContext.index);
-        context.inputRef.current?.focus();
+        setEditValue(displayValue);
+        setEditingIndex(null);
+        setHighlightedIndex(itemIndex);
+        inputRef.current?.focus();
       }
       event.stopPropagation();
     },
     [
-      context.value,
-      context.onItemUpdate,
-      context.setEditingIndex,
-      itemContext.displayValue,
+      contextValue,
+      onItemUpdate,
+      setEditingIndex,
+      displayValue,
       editValue,
-      itemContext.value,
-      context.setHighlightedIndex,
-      itemContext.index,
-      context.inputRef,
+      itemValue,
+      setHighlightedIndex,
+      itemIndex,
+      inputRef,
     ]
   );
 

package/src/components/forms/time-picker/index.tsx

@@ -3,6 +3,7 @@
 import { Clock } from "lucide-react";
 import * as React from "react";
 
+import { useComposedRefs } from "../../../lib/compose-refs";
 import { cn } from "../../../lib/utils";
 import { Button } from "../../forms/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../../overlay/popover";
@@ -166,8 +167,11 @@ const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
     }, [minuteStep]);
 
     const isFormControl = React.useRef(false);
-    const rootRef = React.useRef<HTMLDivElement>(null);
-    React.useImperativeHandle(ref, () => rootRef.current as unknown as HTMLButtonElement);
+    // The trigger is a <button>, and the caller's ref must see `null` before it
+    // mounts. useImperativeHandle cannot express that — it must produce a
+    // handle — so the two refs are composed onto the element instead.
+    const rootRef = React.useRef<HTMLButtonElement | null>(null);
+    const composedRef = useComposedRefs(rootRef, ref);
 
     React.useEffect(() => {
       if (rootRef.current) {
@@ -180,7 +184,7 @@ const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
             <Button
-              ref={rootRef as unknown as React.Ref<HTMLButtonElement>}
+              ref={composedRef}
               variant={variant}
               disabled={disabled}
               className={cn(

package/src/components/index.ts

@@ -31,6 +31,10 @@ export type { DownloadButtonProps } from './forms/button-download';
 export { PopoverActionButton } from './forms/popover-action-button';
 export type { PopoverActionButtonProps } from './forms/popover-action-button';
 
+// Money Field — amount in, minor units out.
+export { MoneyField, minorUnitFactor, currencyFractionDigits } from './forms/money-field';
+export type { MoneyFieldProps } from './forms/money-field';
+
 // Mask Input
 export { MaskInput } from './forms/mask-input';
 export type { MaskInputProps, MaskDefinition } from './forms/mask-input';

package/src/components/layout/key-value/index.tsx

@@ -408,7 +408,10 @@ function KeyValueKeyInput(props: KeyValueKeyInputProps) {
   const {
     onChange: onChangeProp,
     onPaste: onPasteProp,
-    asChild,
+    // Declared on the props type but not honoured here: unlike the `div`-based
+    // parts of this component, this one renders a concrete <Input>, so there is
+    // no element to Slot into. Destructured only to keep it off the DOM.
+    asChild: _asChild,
     disabled,
     readOnly,
     required,
@@ -565,10 +568,7 @@ function KeyValueKeyInput(props: KeyValueKeyInputProps) {
           store.setState("value", newValue)
 
           if (context.onPaste) {
-            context.onPaste(
-              event.nativeEvent as unknown as ClipboardEvent,
-              parsed,
-            )
+            context.onPaste(event.nativeEvent, parsed)
           }
         }
       }
@@ -608,7 +608,9 @@ interface KeyValueValueInputProps
 function KeyValueValueInput(props: KeyValueValueInputProps) {
   const {
     onChange: onChangeProp,
-    asChild,
+    // Same as KeyValueKeyInput: renders a concrete <Textarea>, nothing to Slot
+    // into. Destructured only to keep it off the DOM.
+    asChild: _asChild,
     disabled,
     readOnly,
     required,
@@ -724,7 +726,7 @@ function KeyValueValueInput(props: KeyValueValueInputProps) {
   )
 }
 
-interface KeyValueRemoveProps extends React.ComponentProps<typeof Button> {}
+type KeyValueRemoveProps = React.ComponentProps<typeof Button>;
 
 function KeyValueRemove(props: KeyValueRemoveProps) {
   const { onClick: onClickProp, children, ...removeProps } = props

package/src/components/layout/resizable/index.tsx

@@ -66,7 +66,12 @@ const ResizablePanel = React.forwardRef<
 
   // SSR fallback - render static div with default size
   if (!mounted) {
-    const direction = (props as any)['data-panel-group-direction']
+    // `data-*` attributes are not part of the typed prop surface, so the read
+    // needs a cast. Narrowed to the one attribute rather than `any` on `props`:
+    // this opens exactly the key it uses and leaves the rest checked.
+    const direction = (props as { 'data-panel-group-direction'?: string })[
+      'data-panel-group-direction'
+    ]
     const sizeStyle = defaultSize
       ? direction === 'vertical'
         ? { height: `${defaultSize}%` }

package/src/components/navigation/command/index.tsx

@@ -28,7 +28,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -36,11 +36,15 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   )
 }
 
+// The wrapper is marked with `data-cmdk-input-wrapper` rather than the bare
+// `cmdk-input-wrapper`: this div is ours, not cmdk's, and React only forwards
+// unknown attributes to the DOM under a `data-` prefix. CommandDialog's
+// `[&_[data-cmdk-input-wrapper]_svg]` sizing selector matches this same name.
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div className="flex items-center border-b px-3" data-cmdk-input-wrapper="">
     <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
@@ -59,9 +63,23 @@ const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, style, ...props }, ref) => {
-  const listRef = React.useRef<HTMLDivElement>(null)
-
-  React.useImperativeHandle(ref, () => listRef.current as HTMLDivElement)
+  const listRef = React.useRef<React.ElementRef<typeof CommandPrimitive.List> | null>(null)
+
+  // The element is needed locally (for the cssText fix below) AND by the
+  // caller, so it is captured and forwarded in one callback. useImperativeHandle
+  // cannot be used here: it must produce a non-null handle, and the element is
+  // genuinely null until the primitive mounts.
+  const setRef = React.useCallback(
+    (node: React.ElementRef<typeof CommandPrimitive.List> | null) => {
+      listRef.current = node
+      if (typeof ref === 'function') {
+        ref(node)
+      } else if (ref) {
+        ref.current = node
+      }
+    },
+    [ref]
+  )
 
   React.useEffect(() => {
     if (listRef.current) {
@@ -71,7 +89,7 @@ const CommandList = React.forwardRef<
 
   return (
     <CommandPrimitive.List
-      ref={listRef as any}
+      ref={setRef}
       className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
       style={{
         maxHeight: '300px',

package/src/components/navigation/link/LinkContext.tsx

@@ -46,7 +46,9 @@ export type LinkComponent = ComponentType<LinkComponentProps>;
  * makes the two instances agree whatever the bundler decides.
  */
 const CONTEXT_KEY = Symbol.for('@djangocfg/ui-core.LinkComponentContext');
-const globalScope = globalThis as unknown as Record<symbol, unknown>;
+// `typeof globalThis` carries no index signature, but the object genuinely
+// accepts symbol keys — this asserts a property the runtime has.
+const globalScope = globalThis as Record<symbol, unknown>;
 
 export const LinkComponentContext =
   (globalScope[CONTEXT_KEY] as ReturnType<typeof createContext<LinkComponent | null>> | undefined) ??

package/src/components/navigation/pagination/pagination-static.tsx

@@ -18,7 +18,7 @@ import {
     Pagination, PaginationContent, PaginationEllipsis, PaginationItem
 } from './pagination';
 
-export interface DRFPaginatedResponse<T = any> {
+export interface DRFPaginatedResponse<T = unknown> {
   count: number;
   page: number;
   pages: number;

package/src/components/navigation/tabs/index.tsx

@@ -50,6 +50,17 @@ export interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPri
   storageType?: StorageType
 }
 
+/**
+ * The part of a trigger's props the mobile sheet re-writes when it clones one.
+ *
+ * Not the trigger's full prop type: everything else passes through untouched,
+ * and naming more than is read would be a claim this file cannot check.
+ */
+type TriggerProps = {
+  onClick?: (event: React.MouseEvent) => void
+  className?: string
+}
+
 const Tabs = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Root>,
   TabsProps
@@ -67,12 +78,13 @@ const Tabs = React.forwardRef<
   );
 
   // Wrap onValueChange to persist tab changes
+  const { onValueChange } = props;
   const handleValueChange = React.useCallback(
     (newValue: string) => {
       if (storageKey) setStoredTab(newValue);
-      props.onValueChange?.(newValue);
+      onValueChange?.(newValue);
     },
-    [storageKey, setStoredTab, props.onValueChange],
+    [storageKey, setStoredTab, onValueChange],
   );
 
   // Build enhanced props: inject stored defaultValue when no value/defaultValue given
@@ -123,9 +135,14 @@ const Tabs = React.forwardRef<
     (child) => React.isValidElement(child) && child.type === TabsContent
   )
 
-  // Extract triggers from TabsList children
-  const triggers = React.isValidElement(tabsList)
-    ? React.Children.toArray((tabsList.props as any).children)
+  // Extract triggers from TabsList children.
+  //
+  // `isValidElement` narrows to `ReactElement<unknown>` unless it is told the
+  // prop shape, which is why reading `.props.children` used to need a cast.
+  // Naming the shape is the same assertion, made once and checked: this branch
+  // only runs for an element whose `type === TabsList`.
+  const triggers = React.isValidElement<{ children?: React.ReactNode }>(tabsList)
+    ? React.Children.toArray(tabsList.props.children)
     : []
 
   // Mobile Sheet Navigation
@@ -155,11 +172,15 @@ const Tabs = React.forwardRef<
               <nav className="flex flex-col gap-2 mt-6">
                 <TabsPrimitive.List className="flex flex-col gap-2">
                   {triggers.map((trigger, index) => {
-                    if (!React.isValidElement(trigger)) return null
+                    // Typed here rather than cast at each use: the two props
+                    // this clone actually touches are the two it declares, so
+                    // `cloneElement` checks the override instead of taking it
+                    // on faith.
+                    if (!React.isValidElement<TriggerProps>(trigger)) return null
 
                     // Clone trigger and wrap in mobile-friendly container
-                    const triggerProps = (trigger as any).props || {};
-                    return React.cloneElement(trigger as React.ReactElement, {
+                    const triggerProps = trigger.props
+                    return React.cloneElement(trigger, {
                       key: index,
                       onClick: (e: React.MouseEvent) => {
                         setOpen(false)
@@ -171,7 +192,7 @@ const Tabs = React.forwardRef<
                         "hover:bg-muted",
                         triggerProps.className
                       ),
-                    } as any)
+                    })
                   })}
                 </TabsPrimitive.List>
               </nav>

package/src/components/overlay/responsive-sheet/index.tsx

@@ -168,7 +168,7 @@ ResponsiveSheetContent.displayName = "ResponsiveSheetContent"
 // Header
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface ResponsiveSheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+type ResponsiveSheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
 function ResponsiveSheetHeader({ className, ...props }: ResponsiveSheetHeaderProps) {
   const { isMobile } = React.useContext(ResponsiveSheetContext);
@@ -185,7 +185,7 @@ ResponsiveSheetHeader.displayName = "ResponsiveSheetHeader"
 // Title
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface ResponsiveSheetTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+type ResponsiveSheetTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
 function ResponsiveSheetTitle({ className, ...props }: ResponsiveSheetTitleProps) {
   const { isMobile } = React.useContext(ResponsiveSheetContext);
@@ -202,7 +202,7 @@ ResponsiveSheetTitle.displayName = "ResponsiveSheetTitle"
 // Description
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface ResponsiveSheetDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+type ResponsiveSheetDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 
 function ResponsiveSheetDescription({ className, ...props }: ResponsiveSheetDescriptionProps) {
   const { isMobile } = React.useContext(ResponsiveSheetContext);
@@ -219,7 +219,7 @@ ResponsiveSheetDescription.displayName = "ResponsiveSheetDescription"
 // Footer
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface ResponsiveSheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+type ResponsiveSheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
 function ResponsiveSheetFooter({ className, ...props }: ResponsiveSheetFooterProps) {
   const { isMobile } = React.useContext(ResponsiveSheetContext);

package/src/components/select/helpers.tsx

@@ -10,7 +10,7 @@ import type { MultiSelectProAsyncOption } from './multi-select-pro-async'
 /**
  * Generic option builder config
  */
-export interface OptionBuilderConfig<T = any> {
+export interface OptionBuilderConfig<T = unknown> {
   /** Extract unique ID/value from item */
   getValue: (item: T) => string
   /** Extract main label text */

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

@@ -248,12 +248,19 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
       [animation, animationConfig]
     )
 
-    // Reset on defaultValue change
+    // Reset on defaultValue change.
+    // Keyed on the serialized contents, not the array identity: callers commonly
+    // pass an inline literal, which would otherwise reset the user's selection on
+    // every render. `defaultValue` itself is read through a ref for the same reason.
+    const defaultValueKey = JSON.stringify(defaultValue)
+    const defaultValueRef = React.useRef(defaultValue)
+    defaultValueRef.current = defaultValue
+
     React.useEffect(() => {
       if (resetOnDefaultValueChange) {
-        setSelectedValues(defaultValue)
+        setSelectedValues(defaultValueRef.current)
       }
-    }, [JSON.stringify(defaultValue), resetOnDefaultValueChange])
+    }, [defaultValueKey, resetOnDefaultValueChange])
 
     // Announce changes for screen readers
     const announce = React.useCallback((message: string) => {
@@ -347,7 +354,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
     )
 
     // Render badge with custom styles
-    const renderBadge = (option: MultiSelectProAsyncOption, index: number) => {
+    const renderBadge = React.useCallback((option: MultiSelectProAsyncOption, index: number) => {
       const { style, icon: Icon } = option
       const badgeStyle: React.CSSProperties = {}
 
@@ -393,7 +400,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
           )}
         </Badge>
       )
-    }
+    }, [animConfig, variant, disabled, toggleOption, translations])
 
     // Display value
     const displayValue = React.useMemo(() => {
@@ -414,7 +421,7 @@ export const MultiSelectProAsync = React.forwardRef<MultiSelectProAsyncRef, Mult
           )}
         </div>
       )
-    }, [selectedOptions, maxCount, translations, singleLine, variant, disabled, animConfig])
+    }, [selectedOptions, maxCount, translations, singleLine, renderBadge])
 
     // Render options
     const renderOptions = () => {

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

@@ -214,7 +214,6 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
     }, [flatOptions, selectedValues])
 
     // Responsive configuration (reserved for future use)
-    // @ts-ignore reserved for future use
     const _responsiveConfig = React.useMemo((): ResponsiveConfig => {
       if (typeof responsive === 'boolean') {
         return responsive
@@ -364,7 +363,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
     )
 
     // Render badge with custom styles
-    const renderBadge = (option: MultiSelectProOption, index: number) => {
+    const renderBadge = React.useCallback((option: MultiSelectProOption, index: number) => {
       const { style, icon: Icon } = option
       const badgeStyle: React.CSSProperties = {}
 
@@ -410,7 +409,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
           )}
         </Badge>
       )
-    }
+    }, [animConfig, variant, disabled, toggleOption, translations])
 
     // Display value
     const displayValue = React.useMemo(() => {
@@ -431,7 +430,7 @@ export const MultiSelectPro = React.forwardRef<MultiSelectProRef, MultiSelectPro
           )}
         </div>
       )
-    }, [selectedOptions, maxCount, translations, singleLine, variant, disabled, animConfig])
+    }, [selectedOptions, maxCount, translations, singleLine, renderBadge])
 
     // Render options
     const renderOptions = () => {

package/src/components/specialized/flag/Flag.tsx

@@ -7,11 +7,20 @@ import { cn } from '../../../lib/utils';
 import { FLAG_COMPONENTS } from './flag-map';
 import { getLanguageCountryCode } from './language-to-country';
 
-export interface FlagProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'children'> {
+/**
+ * Presentational attributes only. The underlying `country-flag-icons`
+ * components type their handlers against an element that cannot exist, so no
+ * event handler passed here could be given an honest signature.
+ */
+export interface FlagProps {
   /** ISO 3166-1 alpha-2 country code (e.g. `'US'`, `'JP'`). Case-insensitive. */
   countryCode: string;
   /** Optional rounded corners — common for tile / chip presentations. */
   rounded?: boolean;
+  className?: string;
+  width?: number | string;
+  height?: number | string;
+  title?: string;
 }
 
 /**
@@ -22,11 +31,8 @@ export function Flag({ countryCode, rounded, className, ...props }: FlagProps) {
   const code = countryCode?.toUpperCase();
   const Component = code ? FLAG_COMPONENTS[code] : undefined;
   if (!Component) return null;
-  // `country-flag-icons` types its components against an HTML+SVG intersection;
-  // we narrow to plain `SVGAttributes` for our consumers.
-  const Tag = Component as unknown as React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
   return (
-    <Tag
+    <Component
       className={cn(
         'inline-block shrink-0 select-none',
         rounded && 'overflow-hidden rounded-[2px]',