@vertesia/ui 0.79.0 → 0.79.1

package/src/core/components/shadcn/resizeable.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
+import { Minus } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "../libs/utils"
@@ -37,14 +37,14 @@ function ResizableHandle({
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-muted focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
+        <div className="z-10 flex size-4 items-center justify-center rounded-xs font-semibold">
+          <Minus className="size-4 rotate-90" />
         </div>
       )}
     </ResizablePrimitive.PanelResizeHandle>

package/src/core/components/shadcn/selectBox.tsx

@@ -6,8 +6,9 @@ import { useState, useEffect, useRef } from 'react';
 import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
 import { Input } from './input';
+import { Button } from '@vertesia/ui/core';
 
-interface VSelectBoxBaseProps<T> {
+export interface VSelectBoxBaseProps<T> {
     options: T[] | undefined;
     optionLabel?: (option: T) => React.ReactNode;
     onBlur?: () => void;
@@ -23,6 +24,7 @@ interface VSelectBoxBaseProps<T> {
     popupClass?: string;
     isClearable?: boolean;
     border?: boolean;
+    inline?: boolean;
 }
 
 interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
@@ -39,7 +41,7 @@ interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
 
 type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
 
-export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by }: Readonly<VSelectBoxProps<T>>) {
+export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false }: Readonly<VSelectBoxProps<T>>) {
     const triggerRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
     const [width, setWidth] = useState<number>(0);
@@ -169,6 +171,82 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
         );
     };
 
+    // Render the options list content
+    const renderOptionsContent = () => (
+        <>
+            {filterBy && (
+                <div className='flex justify-start items-center mb-1'>
+                    <div className='mx-2'>
+                        <SearchIcon className="size-4" />
+                    </div>
+                    <Input variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
+                </div>
+            )}
+            <Command className="overflow-hidden">
+                <CommandList className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}>
+                    <CommandEmpty>No result found.</CommandEmpty>
+                    <CommandGroup className="overflow-visible">
+                        {filteredOptions?.map((opt, index) => {
+                            const isSelected = multiple
+                                ? isOptionSelected(opt, Array.isArray(value) ? value : [])
+                                : value != null ? isOptionsEqual(value as T, opt) : false;
+
+                            return (
+                                <CommandItem
+                                    key={index}
+                                    onSelect={() => _onClick(opt)}
+                                    className="w-full"
+                                >
+                                    {multiple || inline ? (
+                                        <div className='w-full flex justify-between items-center cursor-pointer'>
+                                            <div className='w-full truncate text-left'>
+                                                {optionLabel ? optionLabel(opt) : opt as String}
+                                            </div>
+                                            {isSelected && <Check className="size-4" />}
+                                        </div>
+                                    ) : (
+                                        <PopoverClose className='w-full flex justify-between items-center'>
+                                            <div className='w-full truncate text-left'>
+                                                {optionLabel ? optionLabel(opt) : opt as String}
+                                            </div>
+                                            {isSelected && <Check className="size-4" />}
+                                        </PopoverClose>
+                                    )}
+                                </CommandItem>
+                            );
+                        })}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+            {addNew && (
+                <div className='p-1'>
+                    <a
+                        onClick={addNew}
+                        className={clsx(
+                            'gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent',
+                        )}
+                    >
+                        <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />
+                        {addNewLabel}
+                    </a>
+                </div>
+            )}
+        </>
+    );
+
+    if (inline) {
+        return (
+            <div className={clsx(
+                className,
+                border && 'border border-border rounded-md',
+                "bg-popover p-1",
+                popupClass
+            )}>
+                {renderOptionsContent()}
+            </div>
+        );
+    }
+
     return (
         <Popover>
             <PopoverTrigger asChild>
@@ -178,7 +256,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     className={clsx(
                         className,
                         border && 'border border-border',
-                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative',
+                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative [&:hover_.clear-button]:opacity-100',
                         !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
                     )}
                 >
@@ -194,9 +272,10 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                             {multiple ? renderMultipleValue() : renderSingleValue()}
                         </div>
                     </div>
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 group">
                         {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
-                            <div
+                            <Button variant={"link"} size={"icon"}
+                                alt="Clear selection"
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     if (multiple) {
@@ -205,10 +284,10 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                                         (onChange as (option: T) => void)(undefined as any);
                                     }
                                 }}
-                                className="cursor-pointer hover:bg-muted/20 rounded p-1"
+                                className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
                             >
                                 <X className="size-4" />
-                            </div>
+                            </Button>
                         )}
                         {!disabled && (
                             <ChevronsUpDown className="size-4 opacity-50" />
@@ -225,66 +304,7 @@ export function VSelectBox<T = any>({ options, optionLabel, value, onChange, add
                     popupClass
                 )}
             >
-                {filterBy && (
-
-                    <div className='flex justify-start items-center mb-1'>
-                        <div className='mx-2'>
-                            <SearchIcon className="size-4" />
-                        </div>
-                        <Input variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
-                    </div>
-                )}
-                <Command className="overflow-hidden">
-                    <CommandList className="max-h-[200px] overflow-y-auto">
-                        <CommandEmpty>No result found.</CommandEmpty>
-                        <CommandGroup className="overflow-visible">
-                            {filteredOptions?.map((opt, index) => {
-                                const isSelected = multiple
-                                    ? isOptionSelected(opt, Array.isArray(value) ? value : [])
-                                    : value != null ? isOptionsEqual(value as T, opt) : false;
-
-                                return (
-                                    <CommandItem
-                                        key={index}
-                                        onSelect={() => _onClick(opt)}
-                                        className="w-full"
-                                    >
-                                        {multiple ? (
-                                            <div className='w-full flex justify-between items-center cursor-pointer'>
-                                                <div className='w-full truncate text-left'>
-                                                    {optionLabel ? optionLabel(opt) : opt as String}
-                                                </div>
-                                                {isSelected && <Check className="size-4" />}
-                                            </div>
-                                        ) : (
-                                            <PopoverClose className='w-full flex justify-between items-center'>
-                                                <div className='w-full truncate text-left'>
-                                                    {optionLabel ? optionLabel(opt) : opt as String}
-                                                </div>
-                                                {isSelected && <Check className="size-4" />}
-                                            </PopoverClose>
-                                        )}
-                                    </CommandItem>
-                                );
-                            })}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-                {
-                    addNew && (
-                        <div className='p-1'>
-                            <a
-                                onClick={addNew}
-                                className={clsx(
-                                    'gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent',
-                                )}
-                            >
-                                <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />
-                                {addNewLabel}
-                            </a>
-                        </div>
-                    )
-                }
+                {renderOptionsContent()}
             </PopoverContent>
         </Popover>
     );

package/src/core/components/shadcn/tabs.tsx

@@ -106,7 +106,10 @@ const VTabs = ({
     
     // Update the URL hash when tab changes (only if updateHash is true and not controlled by parent)
     if (updateHash && !current) {
-      window.location.hash = newValue;
+      // Preserve existing history state when changing hash
+      const currentState = window.history.state;
+      const newUrl = window.location.pathname + window.location.search + '#' + newValue;
+      window.history.pushState(currentState, '', newUrl);
     }
     
     if (onTabChange) {
@@ -143,7 +146,9 @@ const VTabsBar = ({ className }: { className?: string }) => {
     const tab = tabs.find(t => t.name === tabName);
 
     if (tab?.href && updateHash) {
-      window.history.pushState(null, '', tab.href);
+      // Preserve existing history state when changing tabs
+      const currentState = window.history.state;
+      window.history.pushState(currentState, '', tab.href);
     }
 
     setTab(tabName);
@@ -236,7 +241,9 @@ const TabsTrigger = React.forwardRef<
   const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     if (href) {
       event.preventDefault();
-      window.history.pushState(null, '', href);
+      // Preserve existing history state when changing tabs
+      const currentState = window.history.state;
+      window.history.pushState(currentState, '', href);
     }
     if (props.onClick) {
       (props.onClick as React.MouseEventHandler<HTMLButtonElement>)(event);

package/src/core/components/shadcn/textarea.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "../libs/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "py-2 text-sm",
+        "flex w-full rounded-md border border-input bg-background ring-offset-background",
+        "placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/core/hooks/index.ts

@@ -11,4 +11,5 @@ export * from "./useFlag.js"
 export * from "./useIntersectionObserver.js"
 export * from "./useIsFistRendering.js"
 export * from "./useSafeLayoutEffect.js"
+export * from "./useScrollableSearch.js"
 export * from "./useSharedValue.js"

package/src/core/hooks/useScrollableSearch.tsx

@@ -0,0 +1,193 @@
+import { useIntersectionObserver } from "@vertesia/ui/core";
+import { useEffect, useRef, useState } from "react";
+
+interface SearchResponse<ResultT, PageT> {
+    /**
+     * The search result
+     */
+    result: ResultT[];
+
+    /**
+     * The next page information or null if no more pages are available
+     */
+    nextPage: PageT | null;
+}
+
+/**
+ * The search function signature.
+ * @param payload The search payload
+ * @param page The information for the page to fetch. Use null to fetch the first page
+ * @param pageSize The number of items per page
+ * @returns A promise that resolves to the search response
+ */
+type SearchFn<PayloadT, ResultT, PageT = number> = (payload: PayloadT, page: PageT | null, pageSize: number) => Promise<SearchResponse<ResultT, PageT>>;
+
+
+interface ScrollableSearchOptions<ResultT, PayloadT, PageT = number> {
+    /**
+     * the search function
+     */
+    search: SearchFn<PayloadT, ResultT, PageT>;
+
+    /**
+     * Initial paylload for the first search
+     */
+    payload: PayloadT;
+
+    /**
+     * Which page size to use. Defaults to 50.
+     */
+    pageSize?: number;
+
+    /**
+     * A ref to the element that triggers loading the next page when it enters the viewport
+     */
+    nextPageTrigger: React.RefObject<HTMLElement | null>;
+}
+
+interface ScrollableSearchResult<ResultT, PayloadT, PageT = number> {
+    /**
+     * Initiates a new search with the given payload
+     * @param payload The search payload
+     */
+    search: (payload: PayloadT) => void;
+
+    /**
+     * Refreshes the current search with the last used payload
+     */
+    refresh: () => void;
+
+    /**
+     * Loads the next page of results
+     */
+    searchMore: () => void;
+
+    /**
+     * The current accumulated search result
+     */
+    result: ResultT[];
+
+    /**
+     * The current page information
+     */
+    page: PageT | null;
+
+    /**
+     * Whether there are more pages to load
+     */
+    hasMore: boolean;
+
+    /**
+     * Any error that occurred during the last search
+     */
+    error: Error | null;
+
+    /**
+     * Whether a search is currently in progress
+     */
+    isSearching: boolean;
+}
+
+/**
+ * A hook that provides paginated search functionality with infinite scrolling support.
+ */
+export function useScrollableSearch<ResultT, PayloadT, PageT = number>(opts: ScrollableSearchOptions<ResultT, PayloadT, PageT>, dependencies: any[] = []): ScrollableSearchResult<ResultT, PayloadT, PageT> {
+    const pageSize = opts.pageSize || 50;
+    const [page, setPage] = useState<PageT | null>(null);
+    const [lastPayload, setLastPayload] = useState<PayloadT>(opts.payload);
+    const [error, setError] = useState<Error | null>(null);
+    const [results, setResults] = useState<ResultT[]>([]);
+    const [nextPage, setNextPage] = useState<PageT | null>(null);
+    const [isSearching, setIsSearching] = useState(false);
+
+    // Track current request to prevent stale results
+    const requestIdRef = useRef(0);
+
+    const search = (payload: PayloadT) => {
+        setPage(null);
+        setResults([]);  // Clear old results immediately
+        setNextPage(null);
+        setLastPayload(payload);
+    }
+
+    const searchMore = () => {
+        if (nextPage !== null) {
+            setPage(nextPage);
+        }
+    }
+
+    useEffect(() => {
+        // Increment request ID to mark previous requests as stale
+        requestIdRef.current += 1;
+        const currentRequestId = requestIdRef.current;
+
+        setIsSearching(true);
+        opts.search(lastPayload, page, pageSize).then(r => {
+            // Only update state if this is still the current request
+            if (currentRequestId !== requestIdRef.current) {
+                return; // Stale request, ignore results
+            }
+
+            // If page is null, it's a new search - replace results
+            // Otherwise, it's loading more - append results
+            if (page === null) {
+                setResults(r.result);
+            } else {
+                setResults(prev => [...prev, ...r.result]);
+            }
+            setNextPage(r.nextPage);
+            setError(null);
+        }).catch(error => {
+            // Only update error if this is still the current request
+            if (currentRequestId !== requestIdRef.current) {
+                return; // Stale request, ignore error
+            }
+            setError(error);
+        }).finally(() => {
+            // Only update isSearching if this is still the current request
+            if (currentRequestId === requestIdRef.current) {
+                setIsSearching(false);
+            }
+        });
+    }, [...dependencies, lastPayload, page]);
+
+    // Intersection observer for infinite scrolling
+    useIntersectionObserver(opts.nextPageTrigger, () => {
+        if (!isSearching && nextPage) {
+            searchMore();
+        }
+    }, { threshold: 0.1, deps: [nextPage, isSearching] });
+
+    return {
+        search,
+        refresh: () => search(lastPayload),
+        searchMore,
+        result: results,
+        page,
+        hasMore: nextPage !== null,
+        error,
+        isSearching,
+    }
+}
+
+type DefaultSearchFn<PayloadT, ResultT> = (payload: PayloadT, offset: number, limit: number) => Promise<ResultT[]>;
+
+interface DefaultScrollableSearchOptions<ResultT, PayloadT> extends Omit<ScrollableSearchOptions<ResultT, PayloadT, number>, 'search'> {
+    search: DefaultSearchFn<PayloadT, ResultT>;
+}
+
+export function useDefaultScrollableSearch<ResultT, PayloadT>(opts: DefaultScrollableSearchOptions<ResultT, PayloadT>, dependencies: any[] = []): ScrollableSearchResult<ResultT, PayloadT, number> {
+    const actualOpts: ScrollableSearchOptions<ResultT, PayloadT, number> = {
+        ...opts,
+        async search(payload, page, pageSize) {
+            const currentPage = page ?? 0;
+            const offset = currentPage * pageSize;
+            const result = await opts.search(payload, offset, pageSize);
+            return {
+                result,
+                nextPage: result.length === 0 ? null : currentPage + 1
+            };
+        }
+    };
+    return useScrollableSearch<ResultT, PayloadT, number>(actualOpts, dependencies);
+}