@vertesia/ui 1.3.0 → 1.4.0-dev.20260615.042549Z

package/src/core/components/Spinner.tsx

@@ -1,33 +1,46 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 
 function getRealSize(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl') {
     switch (size) {
-        case 'xs': return 'size-2';
-        case 'sm': return 'size-3';
-        case 'md': return 'size-4';
-        case 'lg': return 'size-5';
-        case 'xl': return 'size-7';
-        case '2xl': return 'size-10';
-        default: throw new Error('Unexpected size: ' + size);
+        case 'xs':
+            return 'size-2';
+        case 'sm':
+            return 'size-3';
+        case 'md':
+            return 'size-4';
+        case 'lg':
+            return 'size-5';
+        case 'xl':
+            return 'size-7';
+        case '2xl':
+            return 'size-10';
+        default:
+            throw new Error(`Unexpected size: ${size}`);
     }
 }
 
 interface SpinnerProps {
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl',
-    className?: string
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    className?: string;
 }
 export function Spinner({ size, className }: SpinnerProps) {
     const sizeClass = getRealSize(size || 'md');
     return (
-        <>
-            <svg className={clsx(
-                "animate-[spin_0.8s_linear_infinite] text-indigo-500",
-                sizeClass,
-                className)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-        </>
-    )
-
+        <svg
+            className={clsx('animate-[spin_0.8s_linear_infinite] text-indigo-500', sizeClass, className)}
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            role="img"
+            aria-label="Loading"
+        >
+            <title>Loading</title>
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+        </svg>
+    );
 }

package/src/core/components/TagsInput.tsx

@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import { X } from 'lucide-react';
 import { useContext, useEffect, useRef, useState } from 'react';
+import { onActivateKey } from '../utils/a11y.js';
+import { Button } from './shadcn/button';
 import { Popover, PopoverContent, PopoverContext, PopoverTrigger } from './shadcn/popover';
 
 interface TagsInputProps {
@@ -28,7 +30,7 @@ function TagsInputContent({
     layout = 'horizontal',
     creatable = false,
     createText = 'Create "%value%"',
-    maxDropdownHeight = 200
+    maxDropdownHeight = 200,
 }: TagsInputProps) {
     const popoverContext = useContext(PopoverContext);
     const [searchTerm, setSearchTerm] = useState('');
@@ -41,7 +43,7 @@ function TagsInputContent({
     const highlightedItemRef = useRef<HTMLElement | null>(null);
 
     const isOpen = popoverContext?.open ?? false;
-    const setIsOpen = popoverContext?.setOpen ?? (() => { });
+    const setIsOpen = popoverContext?.setOpen ?? (() => {});
 
     // Measure trigger width for popover
     useEffect(() => {
@@ -67,9 +69,7 @@ function TagsInputContent({
 
     // Filter options based on search term and exclude already selected
     const filteredOptions = options.filter(
-        option =>
-            !value.includes(option) &&
-            option.toLowerCase().includes(searchTerm.toLowerCase())
+        (option) => !value.includes(option) && option.toLowerCase().includes(searchTerm.toLowerCase()),
     );
 
     // Check if create option should be shown
@@ -78,11 +78,6 @@ function TagsInputContent({
     // Total number of items (filtered options + create option if shown)
     const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0);
 
-    // Reset highlighted index when filtered options change
-    useEffect(() => {
-        setHighlightedIndex(0);
-    }, [searchTerm, showCreateOption]);
-
     // Clear pending delete when user starts typing
     useEffect(() => {
         if (searchTerm !== '') {
@@ -92,10 +87,10 @@ function TagsInputContent({
 
     // Scroll highlighted item into view
     useEffect(() => {
-        if (isOpen && highlightedItemRef.current && dropdownRef.current) {
+        if (isOpen && highlightedIndex >= 0 && highlightedItemRef.current && dropdownRef.current) {
             highlightedItemRef.current.scrollIntoView({
                 block: 'nearest',
-                behavior: 'smooth'
+                behavior: 'smooth',
             });
         }
     }, [highlightedIndex, isOpen]);
@@ -133,7 +128,7 @@ function TagsInputContent({
 
     const handleRemove = (option: string, e: React.MouseEvent) => {
         e.stopPropagation();
-        onChange(value.filter(v => v !== option));
+        onChange(value.filter((v) => v !== option));
         setPendingDeleteIndex(null);
     };
 
@@ -157,9 +152,7 @@ function TagsInputContent({
             if (!isOpen) {
                 setIsOpen(true);
             } else {
-                setHighlightedIndex(prev =>
-                    prev < totalItems - 1 ? prev + 1 : prev
-                );
+                setHighlightedIndex((prev) => (prev < totalItems - 1 ? prev + 1 : prev));
             }
             return;
         }
@@ -170,7 +163,7 @@ function TagsInputContent({
             if (!isOpen) {
                 setIsOpen(true);
             } else {
-                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : 0));
+                setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0));
             }
             return;
         }
@@ -226,6 +219,8 @@ function TagsInputContent({
     return (
         <div className={clsx('relative', className)}>
             <PopoverTrigger asChild>
+                {/* biome-ignore lint/a11y/noStaticElementInteractions: PopoverTrigger asChild forwards button semantics + keyboard to this div; container click is a focus delegation pattern. */}
+                {/* biome-ignore lint/a11y/useKeyWithClickEvents: same — keyboard is handled by the input and PopoverTrigger. */}
                 <div
                     ref={triggerRef}
                     className={clsx(
@@ -235,7 +230,7 @@ function TagsInputContent({
                         'cursor-text',
                         'ring-offset-background',
                         disabled && 'opacity-50 cursor-not-allowed',
-                        isOpen ? 'ring-1 ring-inset ring-ring' : ''
+                        isOpen ? 'ring-1 ring-inset ring-ring' : '',
                     )}
                     onClick={handleContainerClick}
                 >
@@ -246,8 +241,9 @@ function TagsInputContent({
                                 <span
                                     key={item}
                                     className={clsx(
-                                        "inline-flex items-center justify-between gap-2 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md w-full transition-all",
-                                        pendingDeleteIndex === index && "ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]"
+                                        'inline-flex items-center justify-between gap-2 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md w-full transition-all',
+                                        pendingDeleteIndex === index &&
+                                            'ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]',
                                     )}
                                 >
                                     <span className="truncate">{item}</span>
@@ -265,32 +261,37 @@ function TagsInputContent({
                     )}
 
                     {/* Selected Items Badges - Horizontal Layout */}
-                    {layout === 'horizontal' && value.map((item, index) => (
-                        <span
-                            key={item}
-                            className={clsx(
-                                "inline-flex items-center gap-1 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md transition-all",
-                                pendingDeleteIndex === index && "ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]"
-                            )}
-                        >
-                            {item}
-                            <button
-                                type="button"
-                                onClick={(e) => handleRemove(item, e)}
-                                disabled={disabled}
-                                className="hover:bg-primary/20 rounded-sm transition-colors"
+                    {layout === 'horizontal' &&
+                        value.map((item, index) => (
+                            <span
+                                key={item}
+                                className={clsx(
+                                    'inline-flex items-center gap-1 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md transition-all',
+                                    pendingDeleteIndex === index &&
+                                        'ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]',
+                                )}
                             >
-                                <X className="h-3 w-3" />
-                            </button>
-                        </span>
-                    ))}
+                                {item}
+                                <button
+                                    type="button"
+                                    onClick={(e) => handleRemove(item, e)}
+                                    disabled={disabled}
+                                    className="hover:bg-primary/20 rounded-sm transition-colors"
+                                >
+                                    <X className="h-3 w-3" />
+                                </button>
+                            </span>
+                        ))}
 
                     {/* Search Input */}
                     <input
                         ref={inputRef}
                         type="text"
                         value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
+                        onChange={(e) => {
+                            setSearchTerm(e.target.value);
+                            setHighlightedIndex(0);
+                        }}
                         onKeyDown={handleKeyDown}
                         onClick={handleInputClick}
                         onFocus={handleInputFocus}
@@ -300,7 +301,7 @@ function TagsInputContent({
                             'flex-1 min-w-[120px] bg-transparent text-sm',
                             'placeholder:text-muted-foreground',
                             'border-none outline-none focus:outline-none focus:ring-0 p-0 m-0',
-                            layout === 'vertical' && 'w-full'
+                            layout === 'vertical' && 'w-full',
                         )}
                     />
                 </div>
@@ -333,13 +334,18 @@ function TagsInputContent({
                                                     highlightedItemRef.current = el;
                                                 }
                                             }}
+                                            // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: ARIA listbox pattern uses <li role="option"> for combobox suggestions
+                                            role="option"
+                                            aria-selected={index === highlightedIndex}
+                                            tabIndex={0}
                                             onClick={() => handleSelect(option)}
+                                            onKeyDown={onActivateKey(() => handleSelect(option))}
                                             onMouseEnter={() => setHighlightedIndex(index)}
                                             className={clsx(
                                                 'px-3 py-2 text-sm cursor-pointer transition-colors',
                                                 index === highlightedIndex
                                                     ? 'bg-blue-500/20 text-foreground'
-                                                    : 'hover:bg-accent/50'
+                                                    : 'hover:bg-accent/50',
                                             )}
                                         >
                                             {option}
@@ -349,26 +355,26 @@ function TagsInputContent({
                             )}
                             {showCreateOption && (
                                 <>
-                                    {filteredOptions.length > 0 && (
-                                        <div className="border-t border-border" />
-                                    )}
-                                    <div
+                                    {filteredOptions.length > 0 && <div className="border-t border-border" />}
+                                    <Button
                                         ref={(el) => {
                                             if (highlightedIndex === filteredOptions.length) {
                                                 highlightedItemRef.current = el;
                                             }
                                         }}
+                                        variant="unstyled"
+                                        size="none"
                                         onClick={() => handleCreate(searchTerm)}
                                         onMouseEnter={() => setHighlightedIndex(filteredOptions.length)}
                                         className={clsx(
-                                            'px-3 py-2 text-sm cursor-pointer transition-colors text-primary',
+                                            '!flex w-full justify-start px-3 py-2 text-sm cursor-pointer transition-colors text-primary',
                                             highlightedIndex === filteredOptions.length
                                                 ? 'bg-blue-500/20'
-                                                : 'hover:bg-accent/50'
+                                                : 'hover:bg-accent/50',
                                         )}
                                     >
                                         {createText.replace('%value%', searchTerm)}
-                                    </div>
+                                    </Button>
                                 </>
                             )}
                         </>

package/src/core/components/index.ts

@@ -1,28 +1,29 @@
+export * from './Avatar.js';
+export * from './Center.js';
+export * from './ComboBox.js';
+export * from './Divider.js';
+export * from './EmptyCollection.js';
+export * from './FileUpload.js';
+export * from './FormItem.js';
+export * from './InputList.js';
+export * from './Link.js';
+export * from './MenuList.js';
+export * from './NumberInput.js';
+export * from './Overlay.js';
+export * from './Portal.js';
+export * from './popup/index.js';
+export * from './SelectList.js';
+export * from './SidePanel.js';
+export * from './Spinner.js';
+export * from './shadcn/index.js';
+export * from './styles.js';
+export * from './TagsInput.js';
+export * from './table/index.js';
+export * from './toast/index.js';
 
-export * from "./Avatar.js";
-export * from "./Center.js";
-export * from "./ComboBox.js";
-export * from "./Divider.js";
-export * from "./EmptyCollection.js";
-export * from "./FileUpload.js";
-export * from "./FormItem.js";
-export * from "./InputList.js";
-export * from "./Link.js";
-export * from "./MenuList.js";
-export * from "./NumberInput.js";
-export * from "./Overlay.js";
-export * from "./popup/index.js";
-export * from "./Portal.js";
-export * from "./SelectList.js";
-export * from "./shadcn/index.js";
-export * from "./SidePanel.js";
-export * from "./Spinner.js";
-export * from "./styles.js";
-export * from "./table/index.js";
-export * from "./TagsInput.js";
-export * from "./toast/index.js";
-
-export type HeroIcon = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
-    title?: string | undefined;
-    titleId?: string | undefined;
-} & React.RefAttributes<SVGSVGElement>>;
+export type HeroIcon = React.ForwardRefExoticComponent<
+    Omit<React.SVGProps<SVGSVGElement>, 'ref'> & {
+        title?: string | undefined;
+        titleId?: string | undefined;
+    } & React.RefAttributes<SVGSVGElement>
+>;

package/src/core/components/libs/utils.tsx

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+    return twMerge(clsx(inputs));
+}

package/src/core/components/libs/visuallyHidden.tsx

@@ -1,25 +1,25 @@
-import React from "react";
+import type React from 'react';
 
 interface VisuallyHiddenProps {
-    children: React.ReactNode
+    children: React.ReactNode;
 }
 export function VisuallyHidden({ children }: VisuallyHiddenProps) {
     return (
         <span
             style={{
                 border: 0,
-                clip: "rect(0 0 0 0)",
-                height: "1px",
-                margin: "-1px",
-                overflow: "hidden",
+                clip: 'rect(0 0 0 0)',
+                height: '1px',
+                margin: '-1px',
+                overflow: 'hidden',
                 padding: 0,
-                position: "absolute",
-                width: "1px",
-                whiteSpace: "nowrap",
-                wordWrap: "normal",
+                position: 'absolute',
+                width: '1px',
+                whiteSpace: 'nowrap',
+                wordWrap: 'normal',
             }}
         >
             {children}
         </span>
-    )
-}
+    );
+}

package/src/core/components/popup/Popup.tsx

@@ -1,14 +1,13 @@
-import { createContext, MutableRefObject, ReactNode, useContext, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { PopupController, PopupControllerOptions } from "./PopupController";
-import { Constraints } from "./position";
-
+import { createContext, type ReactNode, type RefObject, useContext, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { PopupController, type PopupControllerOptions } from './PopupController';
+import type { Constraints } from './position';
 
 const PopupContext = createContext<PopupController | undefined>(undefined);
 
 export function usePopupController() {
     const ctrl = useContext(PopupContext);
-    if (!ctrl) throw new Error("usePopupController must be used inside a Popup component");
+    if (!ctrl) throw new Error('usePopupController must be used inside a Popup component');
     return ctrl;
 }
 
@@ -18,34 +17,59 @@ interface DOMPopupProps extends Omit<PopupControllerOptions, 'anchor' | 'popup'
     anchor: HTMLElement;
     root?: HTMLElement;
     zIndex?: number;
-    position?: "absolute" | "fixed";
+    position?: 'absolute' | 'fixed';
     onClose?: () => void;
     onOpen?: () => void;
     className?: string;
     id?: string;
     children: ReactNode | ReactNode[];
-    ctrlRef?: MutableRefObject<PopupController | undefined>;
+    ctrlRef?: RefObject<PopupController | undefined>;
 }
-export function DOMPopup({ ctrlRef, id, constraints, isOpen, children, className, onClose, zIndex, position, ...props }: DOMPopupProps) {
+export function DOMPopup({
+    ctrlRef,
+    id,
+    constraints,
+    isOpen,
+    children,
+    className,
+    onClose,
+    onOpen,
+    zIndex,
+    position,
+    anchor,
+    root,
+    closeOnClick,
+    closeOnEsc,
+    blockPageScroll,
+}: DOMPopupProps) {
     const popupRef = useRef<HTMLDivElement>(null);
     const [ctrl, setCtrl] = useState<PopupController | undefined>();
+    const onCloseRef = useRef(onClose);
+    const onOpenRef = useRef(onOpen);
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
     useEffect(() => {
-        if (!props.anchor) throw new Error("Anchor element is required");
+        if (!anchor) throw new Error('Anchor element is required');
         const _ctrl = new PopupController({
-            ...props,
-            onClose
+            anchor,
+            root,
+            closeOnClick,
+            closeOnEsc,
+            blockPageScroll,
+            onClose: () => onCloseRef.current?.(),
+            onOpen: () => onOpenRef.current?.(),
         });
         setCtrl(_ctrl);
         return () => {
             _ctrl.tryClose();
-        }
-    }, []);
+        };
+    }, [anchor, blockPageScroll, closeOnClick, closeOnEsc, root]);
 
     useEffect(() => {
         if (ctrlRef) {
             ctrlRef.current = ctrl;
         }
-    }, [ctrl]);
+    }, [ctrl, ctrlRef]);
 
     // effect to open / close the popup
     useEffect(() => {
@@ -62,23 +86,29 @@ export function DOMPopup({ ctrlRef, id, constraints, isOpen, children, className
             // and the popupRef was destroyed by the isOpen && below
             ctrl.close();
         }
-    }, [isOpen, ctrl, popupRef.current]);
+    }, [constraints, isOpen, ctrl]);
 
     return (
         <PopupContext.Provider value={ctrl}>
-            {isOpen && createPortal(
-                <div id={id} style={{
-                    //display: isOpen ? 'block' : 'none',
-                    visibility: 'hidden',
-                    position: position || 'absolute',
-                    zIndex: zIndex || 100,
-                }} ref={popupRef} className={className}>
-                    {children}
-                </div>,
-                document.body
-            )}
+            {isOpen &&
+                createPortal(
+                    <div
+                        id={id}
+                        style={{
+                            //display: isOpen ? 'block' : 'none',
+                            visibility: 'hidden',
+                            position: position || 'absolute',
+                            zIndex: zIndex || 100,
+                        }}
+                        ref={popupRef}
+                        className={className}
+                    >
+                        {children}
+                    </div>,
+                    document.body,
+                )}
         </PopupContext.Provider>
-    )
+    );
 }
 
 export interface PopupProps extends Omit<DOMPopupProps, 'anchor' | 'root'> {
@@ -87,8 +117,9 @@ export interface PopupProps extends Omit<DOMPopupProps, 'anchor' | 'root'> {
 }
 export function Popup({ anchor, root, children, ...others }: PopupProps) {
     return anchor.current && (!root || root.current) ? (
+        // biome-ignore lint/style/noNonNullAssertion: intentional non-null assertion; TS can't prove narrowing here
         <DOMPopup anchor={anchor.current!} root={root?.current || undefined} {...others}>
             {children}
         </DOMPopup>
     ) : null;
-}
+}