@firecms/ui 3.0.1 → 3.1.0-canary.02232f4

package/src/components/MultiSelect.tsx

@@ -1,7 +1,7 @@
 "use client";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
-import { ChangeEvent, Children, useEffect } from "react";
+import { ChangeEvent, Children, useEffect, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { cls } from "../util";
 import { CheckIcon, CloseIcon, KeyboardArrowDownIcon } from "../icons";
@@ -17,6 +17,7 @@ import {
     focusedDisabled
 } from "../styles";
 import { useInjectStyles } from "../hooks";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type MultiSelectValue = string | number | boolean;
 
@@ -54,11 +55,12 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     multiple?: boolean,
     includeSelectAll?: boolean,
     includeClear?: boolean,
-    inputRef?: React.RefObject<HTMLButtonElement>,
+    inputRef?: React.RefObject<HTMLButtonElement | null>,
     padding?: boolean,
     invisible?: boolean,
     children: React.ReactNode;
     renderValues?: (values: T[]) => React.ReactNode;
+    portalContainer?: HTMLElement | null;
 }
 
 // Use generic type for the forwarded ref
@@ -81,16 +83,30 @@ export const MultiSelect = React.forwardRef<
             includeSelectAll = true,
             useChips = true,
             className,
+            inputClassName,
+            inputRef,
             children,
             renderValues,
             open,
             onOpenChange,
+            portalContainer,
+            endAdornment,
         },
         ref
     ) => {
-        // Properly type the state variables to match the generic props
-        const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
-        const [selectedValues, setSelectedValues] = React.useState<any[]>(value ?? []);
+        const [isMounted, setIsMounted] = useState(false);
+        const [isPopoverOpen, setIsPopoverOpen] = useState(open ?? false);
+        const [selectedValues, setSelectedValues] = useState<any[]>(value ?? []);
+
+        // Get the portal container from context
+        const contextContainer = usePortalContainer();
+
+        // Prioritize manual prop, fallback to context container
+        const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
+        useEffect(() => {
+            setIsMounted(true);
+        }, []);
 
         const onPopoverOpenChange = (open: boolean) => {
             setIsPopoverOpen(open);
@@ -103,20 +119,18 @@ export const MultiSelect = React.forwardRef<
 
         const allValues = React.useMemo(() => children
             ?
-            // @ts-ignore
             Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
+                if (React.isValidElement<MultiSelectItemProps>(child)) {
                     return child.props.value;
                 }
                 return null;
-            }).filter(Boolean) as any[]
+            })?.filter(Boolean) ?? []
             : [], [children]);
 
         const optionsMap = React.useMemo(() => {
             const map = new Map<string, React.ReactNode>();
             Children.forEach(children, (child) => {
-                if (React.isValidElement(child)) {
-                    // @ts-ignore
+                if (React.isValidElement<MultiSelectItemProps>(child)) {
                     map.set(String(child.props.value), child.props.children);
                 }
             });
@@ -195,13 +209,13 @@ export const MultiSelect = React.forwardRef<
                 {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
 
                 <PopoverPrimitive.Root
-                    open={isPopoverOpen}
+                    open={isMounted && isPopoverOpen}
                     onOpenChange={onPopoverOpenChange}
                     modal={modalPopover}
                 >
                     <PopoverPrimitive.Trigger asChild>
                         <button
-                            ref={ref}
+                            ref={inputRef ?? ref}
                             onClick={handleTogglePopover}
                             className={cls(
                                 {
@@ -219,10 +233,12 @@ export const MultiSelect = React.forwardRef<
                                     "px-4": size === "medium" || size === "large",
                                 },
                                 "select-none rounded-md text-sm",
+                                "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                                 "relative flex items-center",
-                                className
+                                className,
+                                inputClassName
                             )}
                         >
                             {selectedValues.length > 0 ? (
@@ -254,7 +270,7 @@ export const MultiSelect = React.forwardRef<
                                         })}
                                     </div>
                                     <div className="flex items-center justify-between">
-                                        {includeClear && <CloseIcon
+                                        {includeClear && !endAdornment && <CloseIcon
                                             className={"ml-4"}
                                             size={"small"}
                                             onClick={(event) => {
@@ -262,75 +278,95 @@ export const MultiSelect = React.forwardRef<
                                                 handleClear();
                                             }}
                                         />}
+                                        {endAdornment && (
+                                            <div className="ml-4 flex items-center" onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }}>
+                                                {endAdornment}
+                                            </div>
+                                        )}
                                         <div className={cls("px-2 h-full flex items-center")}>
                                             <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                                                   className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                                className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
                                         </div>
                                     </div>
                                 </div>
                             ) : (
                                 <div className="flex items-center justify-between w-full mx-auto">
                                     <span className="text-sm">
-                                      {placeholder}
+                                        {placeholder}
                                     </span>
-                                    <div className={cls("px-2 h-full flex items-center")}>
-                                        <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                                               className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                    <div className="flex items-center justify-between">
+                                        {endAdornment && (
+                                            <div className="ml-4 flex items-center" onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                            }}>
+                                                {endAdornment}
+                                            </div>
+                                        )}
+                                        <div className={cls("px-2 h-full flex items-center")}>
+                                            <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
+                                                className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
+                                        </div>
                                     </div>
                                 </div>
                             )}
                         </button>
                     </PopoverPrimitive.Trigger>
-                    <PopoverPrimitive.Content
-                        className={cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin)}
-                        align="start"
-                        sideOffset={8}
-                        onEscapeKeyDown={() => onPopoverOpenChange(false)}
-                    >
-                        <CommandPrimitive>
-                            <div className={"flex flex-row items-center"}>
-                                <CommandPrimitive.Input
-                                    className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ")}
-                                    placeholder="Search..."
-                                    onKeyDown={handleInputKeyDown}
-                                />
-                                {selectedValues.length > 0 && (
-                                    <div
-                                        onClick={handleClear}
-                                        className="text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark">
-                                        Clear
-                                    </div>
-                                )}
-                            </div>
-                            <Separator orientation={"horizontal"} className={"my-0"}/>
-                            <CommandPrimitive.List>
-                                <CommandPrimitive.Empty className={"px-4 py-2"}>
-                                    No results found.
-                                </CommandPrimitive.Empty>
-                                <CommandPrimitive.Group>
-                                    {includeSelectAll && <CommandPrimitive.Item
-                                        key="all"
-                                        onSelect={toggleAll}
-                                        className={
-                                            cls(
-                                                "flex flex-row items-center gap-1.5",
-                                                "cursor-pointer",
-                                                "m-1",
-                                                "ring-offset-transparent",
-                                                "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-                                                "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
-                                                "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
-                                            )
-                                        }
-                                    >
-                                        <InnerCheckBox checked={selectedValues.length === allValues.length}/>
-                                        <span className={"text-sm text-text-secondary dark:text-text-secondary-dark"}>(Select All)</span>
-                                    </CommandPrimitive.Item>}
-                                    {children}
-                                </CommandPrimitive.Group>
-                            </CommandPrimitive.List>
-                        </CommandPrimitive>
-                    </PopoverPrimitive.Content>
+                    <PopoverPrimitive.Portal container={finalContainer}>
+                        <PopoverPrimitive.Content
+                            className={cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin)}
+                            align="start"
+                            sideOffset={8}
+                            onEscapeKeyDown={() => onPopoverOpenChange(false)}
+                        >
+                            <CommandPrimitive>
+                                <div className={"flex flex-row items-center"}>
+                                    <CommandPrimitive.Input
+                                        className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow text-surface-accent-900 dark:text-white")}
+                                        placeholder="Search..."
+                                        onKeyDown={handleInputKeyDown}
+                                    />
+                                    {selectedValues.length > 0 && (
+                                        <div
+                                            onClick={handleClear}
+                                            className="text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark">
+                                            Clear
+                                        </div>
+                                    )}
+                                </div>
+                                <Separator orientation={"horizontal"} className={"my-0"} />
+                                <CommandPrimitive.List>
+                                    <CommandPrimitive.Empty className={"px-4 py-2 text-sm text-text-secondary dark:text-text-secondary-dark"}>
+                                        No results found.
+                                    </CommandPrimitive.Empty>
+                                    <CommandPrimitive.Group>
+                                        {includeSelectAll && <CommandPrimitive.Item
+                                            key="all"
+                                            onSelect={toggleAll}
+                                            className={
+                                                cls(
+                                                    "flex flex-row items-center gap-1.5",
+                                                    "cursor-pointer",
+                                                    "m-1",
+                                                    "ring-offset-transparent",
+                                                    "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
+                                                    "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+                                                    "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
+                                                )
+                                            }
+                                        >
+                                            <InnerCheckBox checked={selectedValues.length === allValues.length} />
+                                            <span className={"text-sm text-text-secondary dark:text-text-secondary-dark"}>(Select All)</span>
+                                        </CommandPrimitive.Item>}
+                                        {children}
+                                    </CommandPrimitive.Group>
+                                </CommandPrimitive.List>
+                            </CommandPrimitive>
+                        </PopoverPrimitive.Content>
+                    </PopoverPrimitive.Portal>
                 </PopoverPrimitive.Root>
             </MultiSelectContext.Provider>
         );
@@ -346,10 +382,10 @@ export interface MultiSelectItemProps<T extends MultiSelectValue = string> {
 }
 
 export const MultiSelectItem = React.memo(function MultiSelectItem<T extends MultiSelectValue = string>({
-                                                                         children,
-                                                                         value,
-                                                                         className
-                                                                     }: MultiSelectItemProps<T>) {
+    children,
+    value,
+    className
+}: MultiSelectItemProps<T>) {
     const context = React.useContext(MultiSelectContext);
     if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
     const {
@@ -373,13 +409,14 @@ export const MultiSelectItem = React.memo(function MultiSelectItem<T extends Mul
             "cursor-pointer",
             "m-1",
             "ring-offset-transparent",
-            "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
+            "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
             "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
             "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+            "text-surface-accent-700 dark:text-surface-accent-300",
             className
         )}
     >
-        <InnerCheckBox checked={isSelected}/>
+        <InnerCheckBox checked={isSelected} />
         {children}
     </CommandPrimitive.Item>;
 });
@@ -398,8 +435,7 @@ const InnerCheckBox = React.memo(function InnerCheckBox({ checked }: { checked:
                 (checked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
                 (checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")
             )}>
-            {checked && <CheckIcon size={16} className={"absolute"}/>}
+            {checked && <CheckIcon size={16} className={"absolute"} />}
         </div>
     </div>
 });
-

package/src/components/Popover.tsx

@@ -5,6 +5,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { paperMixin } from "../styles";
 import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -49,16 +50,24 @@ export function Popover({
 
     useInjectStyles("Popover", popoverStyles);
 
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Prioritize manual prop, fallback to context container
+    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
     if (!enabled)
         return <>{trigger}</>;
 
     return <PopoverPrimitive.Root open={open}
                                   onOpenChange={onOpenChange}
                                   modal={modal}>
+
         <PopoverPrimitive.Trigger asChild>
             {trigger}
         </PopoverPrimitive.Trigger>
-        <PopoverPrimitive.Portal container={portalContainer}>
+
+        <PopoverPrimitive.Portal container={finalContainer}>
             <PopoverPrimitive.Content
                 className={cls(paperMixin,
                     "PopoverContent z-40", className)}
@@ -79,7 +88,7 @@ export function Popover({
 }
 
 const popoverStyles = `
-
+/* ... (styles remain unchanged) ... */
 .PopoverContent {
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -98,7 +107,6 @@ const popoverStyles = `
   animation-name: slideRightAndFade;
 }
 
-
 @keyframes slideUpAndFade {
   from {
     opacity: 0;

package/src/components/ResizablePanels.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cls } from "../util";
+
+export type ResizablePanelsProps = {
+    firstPanel: React.ReactNode;
+    secondPanel: React.ReactNode;
+    /** Whether the first panel is visible (e.g. Sidebar) */
+    showFirstPanel?: boolean;
+    /** Whether the second panel is visible (e.g. Results) */
+    showSecondPanel?: boolean;
+    /** 0-100 representing the width/height of the first panel */
+    panelSizePercent: number;
+    onPanelSizeChange: (sizePercent: number) => void;
+    minPanelSizePx?: number;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+};
+
+export function ResizablePanels({
+    firstPanel,
+    secondPanel,
+    showFirstPanel = true,
+    showSecondPanel = true,
+    panelSizePercent,
+    onPanelSizeChange,
+    minPanelSizePx = 200,
+    orientation = 'horizontal',
+    className
+}: ResizablePanelsProps) {
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const isResizingRef = useRef(false);
+
+    // For local layout tracking without triggering React rerenders during drag
+    const firstPanelRef = useRef<HTMLDivElement>(null);
+    const startPosRef = useRef(0);
+    const startSizeRef = useRef(0);
+
+    const [isResizing, setIsResizing] = useState(false);
+    const isHorizontal = orientation === 'horizontal';
+
+    const handleResizeStart = useCallback((e: React.MouseEvent) => {
+        if (!showFirstPanel || !showSecondPanel) return;
+
+        e.preventDefault();
+        isResizingRef.current = true;
+        setIsResizing(true);
+
+        startPosRef.current = isHorizontal ? e.clientX : e.clientY;
+
+        if (firstPanelRef.current) {
+            const rect = firstPanelRef.current.getBoundingClientRect();
+            startSizeRef.current = isHorizontal ? rect.width : rect.height;
+        }
+
+        document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+        document.body.style.userSelect = 'none';
+    }, [isHorizontal, showFirstPanel, showSecondPanel]);
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isResizingRef.current || !containerRef.current) return;
+
+            const currentPos = isHorizontal ? e.clientX : e.clientY;
+            const delta = currentPos - startPosRef.current; // Dragging right/down increases first panel size
+
+            let newSize = startSizeRef.current + delta;
+
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const containerTotal = isHorizontal ? containerRect.width : containerRect.height;
+
+            // Limit the maximum size to prevent pushing the second panel offscreen
+            const maxSize = containerTotal - minPanelSizePx;
+
+            newSize = Math.max(minPanelSizePx, Math.min(newSize, maxSize));
+
+            // Directly update the DOM for performance while dragging
+            if (firstPanelRef.current) {
+                if (isHorizontal) {
+                    firstPanelRef.current.style.width = `${newSize}px`;
+                } else {
+                    firstPanelRef.current.style.height = `${newSize}px`;
+                }
+            }
+        };
+
+        const handleMouseUp = () => {
+            if (isResizingRef.current && containerRef.current && firstPanelRef.current) {
+                isResizingRef.current = false;
+                setIsResizing(false);
+                document.body.style.cursor = "";
+                document.body.style.userSelect = "";
+
+                // Calculate the final percentage and notify parent
+                const containerRect = containerRef.current.getBoundingClientRect();
+                const firstPanelRect = firstPanelRef.current.getBoundingClientRect();
+
+                const containerSize = isHorizontal ? containerRect.width : containerRect.height;
+                const finalSize = isHorizontal ? firstPanelRect.width : firstPanelRect.height;
+
+                if (containerSize > 0) {
+                    const newPercent = (finalSize / containerSize) * 100;
+                    onPanelSizeChange(Math.max(0, Math.min(100, newPercent)));
+                }
+            }
+        };
+
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [onPanelSizeChange, isHorizontal, minPanelSizePx]);
+
+    // Calculate applied size
+    const appliedBasis = !showFirstPanel ? "0%" : (showSecondPanel ? `${panelSizePercent}%` : "100%");
+
+    return (
+        <div
+            ref={containerRef}
+            className={cls(
+                "relative w-full h-full flex overflow-hidden",
+                isHorizontal ? "flex-row" : "flex-col",
+                className
+            )}
+        >
+            {/* First Panel */}
+            <div
+                ref={firstPanelRef}
+                className={cls(
+                    "relative flex-shrink-0 flex flex-col overflow-hidden",
+                    !showFirstPanel && "hidden"
+                )}
+                style={{
+                    width: isHorizontal ? appliedBasis : "100%",
+                    height: !isHorizontal ? appliedBasis : "100%",
+                    minWidth: isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : undefined,
+                    minHeight: !isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : undefined,
+                    maxWidth: showSecondPanel ? undefined : "100%",
+                    maxHeight: showSecondPanel ? undefined : "100%",
+                }}
+            >
+                {firstPanel}
+            </div>
+
+            {/* Divider */}
+            {showFirstPanel && showSecondPanel && (
+                <div
+                    className={cls(
+                        "relative z-10 flex flex-shrink-0 items-center justify-center",
+                        isHorizontal ? "w-px h-full cursor-col-resize" : "h-px w-full cursor-row-resize"
+                    )}
+                    onMouseDown={handleResizeStart}
+                >
+                    {/* Transparent Hit Area with Pill inside */}
+                    <div className={cls(
+                        "absolute flex items-center justify-center group",
+                        isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"
+                    )}>
+                        <div className={cls(
+                            "bg-primary/60 dark:bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200",
+                            isHorizontal ? "w-1 h-8" : "h-1 w-8"
+                        )} />
+                    </div>
+                </div>
+            )}
+
+            {/* Second Panel */}
+            <div
+                className={cls(
+                    "flex-grow relative flex flex-col overflow-hidden min-w-0 min-h-0",
+                    !showSecondPanel && "hidden"
+                )}
+            >
+                {secondPanel}
+            </div>
+        </div>
+    );
+}

package/src/components/SearchBar.tsx

@@ -12,6 +12,16 @@ interface SearchBarProps {
     onTextSearch?: (searchString?: string) => void;
     placeholder?: string;
     expandable?: boolean;
+    /**
+     * Size of the search bar.
+     * - "small": 32px height (matches TextField small)
+     * - "medium": 44px height (matches TextField medium)
+     * @default "medium"
+     */
+    size?: "small" | "medium";
+    /**
+     * @deprecated Use size="medium" or size="small" instead. This prop will be removed in a future version.
+     */
     large?: boolean;
     innerClassName?: string;
     className?: string;
@@ -22,18 +32,19 @@ interface SearchBarProps {
 }
 
 export function SearchBar({
-                              onClick,
-                              onTextSearch,
-                              placeholder = "Search",
-                              expandable = false,
-                              large = false,
-                              innerClassName,
-                              className,
-                              autoFocus,
-                              disabled,
-                              loading,
-                              inputRef
-                          }: SearchBarProps) {
+    onClick,
+    onTextSearch,
+    placeholder = "Search",
+    expandable = false,
+    size = "medium",
+    large,
+    innerClassName,
+    className,
+    autoFocus,
+    disabled,
+    loading,
+    inputRef
+}: SearchBarProps) {
 
     const [searchText, setSearchText] = useState<string>("");
     const [active, setActive] = useState<boolean>(false);
@@ -58,18 +69,23 @@ export function SearchBar({
         onTextSearch(undefined);
     }, [onTextSearch]);
 
+    // Height classes matching TextField sizes
+    const heightClass = size === "small" ? "h-[36px]" : "h-[44px]";
+    const iconPaddingClass = size === "small" ? "px-2" : "px-4";
+    const inputPaddingClass = size === "small" ? "pl-8" : "pl-12";
+
     return (
         <div
             onClick={onClick}
             className={cls("relative",
-                large ? "h-14" : "h-[44px]",
+                heightClass,
                 "bg-surface-accent-50 dark:bg-surface-800 border",
                 defaultBorderMixin,
                 "rounded-lg",
                 className)}>
             <div
-                className="absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0">
-                {loading ? <CircularProgress size={"smallest"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"}/>}
+                className={cls("absolute p-0 h-full pointer-events-none flex items-center justify-center top-0", iconPaddingClass)}>
+                {loading ? <CircularProgress size={"smallest"} /> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"} size={size === "small" ? "small" : "medium"} />}
             </div>
             <input
                 value={searchText ?? ""}
@@ -89,18 +105,20 @@ export function SearchBar({
                     (disabled || loading) && "pointer-events-none",
                     "placeholder-text-disabled dark:placeholder-text-disabled-dark",
                     "relative flex items-center rounded-lg transition-all bg-transparent outline-none appearance-none border-none",
-                    "pl-12 h-full text-current ",
+                    inputPaddingClass, "h-full text-current",
+                    size === "small" ? "text-sm" : "",
                     expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
                     innerClassName
                 )}
             />
             {searchText
                 ? <IconButton
-                    className={`${large ? "mr-2 top-1" : "mr-1 top-0"} absolute right-0 z-10`}
+                    className={`${size === "small" ? "mr-0 top-0" : "mr-1 top-0"} absolute right-0 z-10`}
+                    size={"small"}
                     onClick={clearText}>
-                    <CloseIcon size={"small"}/>
+                    <CloseIcon size={"smallest"} />
                 </IconButton>
-                : <div style={{ width: 26 }}/>
+                : <div style={{ width: 26 }} />
             }
         </div>
     );