@firecms/ui 3.0.0-beta.11 → 3.0.0-beta.13

package/src/components/MultiSelect.tsx

@@ -18,41 +18,33 @@ import {
 } from "../styles";
 import { useInjectStyles } from "../hooks";
 
-interface MultiSelectContextProps {
-    fieldValue?: string[];
-    onItemClick: (v: string) => void;
+export type MultiSelectValue = string | number | boolean;
+
+// Make the context properly generic
+interface MultiSelectContextProps<T extends MultiSelectValue = string> {
+    fieldValue?: T[];
+    onItemClick: (v: T) => void;
 }
 
-export const MultiSelectContext = React.createContext<MultiSelectContextProps>({} as any);
+// Create a proper generic context
+export const MultiSelectContext = React.createContext<MultiSelectContextProps<any>>({} as any);
 
 /**
  * Props for MultiSelect component
  */
-interface MultiSelectProps {
-
-    /**
-     * The modality of the popover. When set to true, interaction with outside elements
-     * will be disabled and only popover content will be visible to screen readers.
-     * Optional, defaults to false.
-     */
+interface MultiSelectProps<T extends MultiSelectValue = string> {
     modalPopover?: boolean;
-
-    /**
-     * Additional class names to apply custom styles to the multi-select component.
-     * Optional, can be used to add custom styles.
-     */
     className?: string;
-
     open?: boolean,
     name?: string,
     id?: string,
     onOpenChange?: (open: boolean) => void,
-    value?: string[],
+    value?: T[],
     inputClassName?: string,
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
-    onValueChange?: (updatedValue: string[]) => void,
+    onValueChange?: (updatedValue: T[]) => void,
     placeholder?: React.ReactNode,
-    size?: "small" | "medium",
+    size?: "smallest" | "small" | "medium" | "large",
     useChips?: boolean,
     label?: React.ReactNode | string,
     disabled?: boolean,
@@ -66,9 +58,10 @@ interface MultiSelectProps {
     padding?: boolean,
     invisible?: boolean,
     children: React.ReactNode;
-    renderValues?: (values: string[]) => React.ReactNode;
+    renderValues?: (values: T[]) => React.ReactNode;
 }
 
+// Use generic type for the forwarded ref
 export const MultiSelect = React.forwardRef<
     HTMLButtonElement,
     MultiSelectProps
@@ -76,7 +69,7 @@ export const MultiSelect = React.forwardRef<
     (
         {
             value,
-            size,
+            size = "large",
             label,
             error,
             onValueChange,
@@ -95,8 +88,9 @@ export const MultiSelect = React.forwardRef<
         },
         ref
     ) => {
+        // Properly type the state variables to match the generic props
         const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
-        const [selectedValues, setSelectedValues] = React.useState<string[]>(value ?? []);
+        const [selectedValues, setSelectedValues] = React.useState<any[]>(value ?? []);
 
         const onPopoverOpenChange = (open: boolean) => {
             setIsPopoverOpen(open);
@@ -115,24 +109,24 @@ export const MultiSelect = React.forwardRef<
                     return child.props.value;
                 }
                 return null;
-            }).filter(Boolean) as string[]
+            }).filter(Boolean) as any[]
             : [];
 
         React.useEffect(() => {
             setSelectedValues(value ?? []);
         }, [value]);
 
-        function onItemClick(newValue: string) {
-            let newSelectedValues: string[];
-            if (selectedValues.includes(newValue)) {
-                newSelectedValues = selectedValues.filter((v) => v !== newValue);
+        function onItemClick(newValue: any) {
+            let newSelectedValues: any[];
+            if (selectedValues.some(v => String(v) === String(newValue))) {
+                newSelectedValues = selectedValues.filter(v => String(v) !== String(newValue));
             } else {
                 newSelectedValues = [...selectedValues, newValue];
             }
             updateValues(newSelectedValues);
         }
 
-        function updateValues(values: string[]) {
+        function updateValues(values: any[]) {
             setSelectedValues(values);
             onValueChange?.(values);
         }
@@ -149,9 +143,9 @@ export const MultiSelect = React.forwardRef<
             }
         };
 
-        const toggleOption = (value: string) => {
-            const newSelectedValues = selectedValues.includes(value)
-                ? selectedValues.filter((v) => v !== value)
+        const toggleOption = (value: any) => {
+            const newSelectedValues = selectedValues.some(v => String(v) === String(value))
+                ? selectedValues.filter(v => String(v) !== String(value))
                 : [...selectedValues, value];
             updateValues(newSelectedValues);
         };
@@ -199,9 +193,20 @@ export const MultiSelect = React.forwardRef<
                             ref={ref}
                             onClick={handleTogglePopover}
                             className={cls(
-                                size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-                                "py-2",
-                                "px-4",
+                                {
+                                    "min-h-[28px]": size === "smallest",
+                                    "min-h-[32px]": size === "small",
+                                    "min-h-[42px]": size === "medium",
+                                    "min-h-[64px]": size === "large",
+                                },
+                                {
+                                    "py-1": size === "small" || size === "smallest",
+                                    "py-2": size === "medium" || size === "large",
+                                },
+                                {
+                                    "px-2": size === "small" || size === "smallest",
+                                    "px-4": size === "medium" || size === "large",
+                                },
                                 "select-none rounded-md text-sm",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -222,14 +227,14 @@ export const MultiSelect = React.forwardRef<
                                                 }
                                             }).filter(Boolean);
 
-                                            const option = childrenProps.find((o) => o.value === value);
+                                            const option = childrenProps.find((o) => String(o.value) === String(value));
                                             if (!useChips) {
                                                 return option?.children;
                                             }
                                             return (
                                                 <Chip
                                                     size={"medium"}
-                                                    key={value}
+                                                    key={String(value)}
                                                     className={cls("flex flex-row items-center p-1")}
                                                 >
                                                     {option?.children}
@@ -255,7 +260,7 @@ export const MultiSelect = React.forwardRef<
                                         />}
                                         <div className={cls("px-2 h-full flex items-center")}>
                                             <KeyboardArrowDownIcon size={"small"}
-                                                            className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                                                   className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
                                         </div>
                                     </div>
                                 </div>
@@ -266,7 +271,7 @@ export const MultiSelect = React.forwardRef<
                                     </span>
                                     <div className={cls("px-2 h-full flex items-center")}>
                                         <KeyboardArrowDownIcon size={"small"}
-                                                        className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                                               className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
                                     </div>
                                 </div>
                             )}
@@ -319,7 +324,6 @@ export const MultiSelect = React.forwardRef<
                                     </CommandPrimitive.Item>}
                                     {children}
                                 </CommandPrimitive.Group>
-
                             </CommandPrimitive.List>
                         </CommandPrimitive>
                     </PopoverPrimitive.Content>
@@ -331,18 +335,17 @@ export const MultiSelect = React.forwardRef<
 
 MultiSelect.displayName = "MultiSelect";
 
-export interface MultiSelectItemProps {
-    value: string;
+export interface MultiSelectItemProps<T extends MultiSelectValue = string> {
+    value: T;
     children?: React.ReactNode,
     className?: string;
 }
 
-export function MultiSelectItem({
-                                    children,
-                                    value,
-                                    className
-                                }: MultiSelectItemProps) {
-
+export function MultiSelectItem<T extends MultiSelectValue = string>({
+                                                                         children,
+                                                                         value,
+                                                                         className
+                                                                     }: MultiSelectItemProps<T>) {
     const context = React.useContext(MultiSelectContext);
     if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
     const {
@@ -350,9 +353,9 @@ export function MultiSelectItem({
         onItemClick
     } = context;
 
-    const isSelected = (fieldValue ?? []).includes(value);
+    const isSelected = (fieldValue ?? []).some(v => String(v) === String(value));
+
     return <CommandPrimitive.Item
-        // value={value}
         onMouseDown={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -375,9 +378,9 @@ export function MultiSelectItem({
         <InnerCheckBox checked={isSelected}/>
         {children}
     </CommandPrimitive.Item>;
-
 }
 
+
 function InnerCheckBox({ checked }: { checked: boolean }) {
     return <div className={cls(
         "p-2",

package/src/components/SearchBar.tsx

@@ -69,7 +69,7 @@ export function SearchBar({
                 className)}>
             <div
                 className="absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0">
-                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"}/>}
+                {loading ? <CircularProgress size={"smallest"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"}/>}
             </div>
             <input
                 value={searchText ?? ""}

package/src/components/Select.tsx

@@ -13,20 +13,22 @@ import { CheckIcon, KeyboardArrowDownIcon } from "../icons";
 import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
 
-export type SelectProps = {
+export type SelectValue = string | number | boolean;
+
+export type SelectProps<T extends SelectValue = string> = {
     open?: boolean,
     name?: string,
     fullWidth?: boolean,
     id?: string,
     onOpenChange?: (open: boolean) => void,
-    value?: string,
+    value?: T,
     className?: string,
     inputClassName?: string,
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
-    onValueChange?: (updatedValue: string) => void,
+    onValueChange?: (updatedValue: T) => void,
     placeholder?: React.ReactNode,
-    renderValue?: (value: string) => React.ReactNode,
-    size?: "small" | "medium" | "large",
+    renderValue?: (value: T) => React.ReactNode,
+    size?: "smallest" | "small" | "medium" | "large",
     label?: React.ReactNode | string,
     disabled?: boolean,
     error?: boolean,
@@ -39,30 +41,30 @@ export type SelectProps = {
 };
 
 export const Select = forwardRef<HTMLDivElement, SelectProps>(({
-                                                                   inputRef,
-                                                                   open,
-                                                                   name,
-                                                                   fullWidth = false,
-                                                                   id,
-                                                                   onOpenChange,
-                                                                   value,
-                                                                   onChange,
-                                                                   onValueChange,
-                                                                   className,
-                                                                   inputClassName,
-                                                                   placeholder,
-                                                                   renderValue,
-                                                                   label,
-                                                                   size = "large",
-                                                                   error,
-                                                                   disabled,
-                                                                   padding = true,
-                                                                   position = "item-aligned",
-                                                                   endAdornment,
-                                                                   invisible,
-                                                                   children,
-                                                                   ...props
-                                                               }, ref) => {
+                                                                                inputRef,
+                                                                                open,
+                                                                                name,
+                                                                                fullWidth = false,
+                                                                                id,
+                                                                                onOpenChange,
+                                                                                value,
+                                                                                onChange,
+                                                                                onValueChange,
+                                                                                className,
+                                                                                inputClassName,
+                                                                                placeholder,
+                                                                                renderValue,
+                                                                                label,
+                                                                                size = "large",
+                                                                                error,
+                                                                                disabled,
+                                                                                padding = true,
+                                                                                position = "item-aligned",
+                                                                                endAdornment,
+                                                                                invisible,
+                                                                                children,
+                                                                                ...props
+                                                                            }, ref) => {
 
     const [openInternal, setOpenInternal] = useState(open ?? false);
 
@@ -71,24 +73,32 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
     }, [open]);
 
     const onValueChangeInternal = useCallback((newValue: string) => {
-        onValueChange?.(newValue);
+        // Convert string value to appropriate type
+        let typedValue: SelectValue = newValue;
+        if (newValue === "true") typedValue = true;
+        else if (newValue === "false") typedValue = false;
+        else if (!isNaN(Number(newValue)) && newValue.trim() !== '') typedValue = Number(newValue);
+
+        onValueChange?.(typedValue as any);
         if (onChange) {
             const event = {
                 target: {
                     name,
-                    value: newValue
+                    value: typedValue
                 }
-            } as ChangeEvent<HTMLSelectElement>;
+            } as unknown as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
-    }, [onChange, value, onValueChange]);
+    }, [onChange, onValueChange, name]);
 
     const hasValue = Array.isArray(value) ? value.length > 0 : (value != null && value !== "" && value !== undefined);
+    // Convert non-string values to strings for Radix UI
+    const stringValue = value !== undefined ? String(value) : undefined;
 
     return (
         <SelectPrimitive.Root
             name={name}
-            value={value}
+            value={stringValue}
             open={openInternal}
             disabled={disabled}
             onValueChange={onValueChangeInternal}
@@ -105,7 +115,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                 "relative flex items-center",
                 className,
                 {
-                    "min-h-[28px]": size === "small",
+                    "min-h-[28px]": size === "smallest",
+                    "min-h-[32px]": size === "small",
                     "min-h-[42px]": size === "medium",
                     "min-h-[64px]": size === "large",
                     "w-fit": !fullWidth,
@@ -122,7 +133,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         padding ? {
                             "px-4": size === "large",
                             "px-3": size === "medium",
-                            "px-2": size === "small"
+                            "px-2": size === "small" || size === "smallest",
                         } : "",
                         "outline-none focus:outline-none",
                         "select-none rounded-md text-sm",
@@ -131,7 +142,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
                         "relative flex flex-row items-center",
                         {
-                            "min-h-[28px]": size === "small",
+                            "min-h-[28px]": size === "smallest",
+                            "min-h-[32px]": size === "small",
                             "min-h-[42px]": size === "medium",
                             "min-h-[64px]": size === "large",
                             "w-full": fullWidth,
@@ -145,7 +157,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                                 "flex-grow max-w-full flex flex-row gap-2 items-center",
                                 "overflow-visible",
                                 {
-                                    "min-h-[28px]": size === "small",
+                                    "min-h-[28px]": size === "smallest",
+                                    "min-h-[32px]": size === "small",
                                     "min-h-[42px]": size === "medium",
                                     "min-h-[64px]": size === "large"
                                 }
@@ -157,10 +170,9 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                                 }}
                                 placeholder={placeholder}
                                 className={"w-full"}>
-                                {hasValue && value && renderValue ? renderValue(value) : placeholder}
+                                {hasValue && value !== undefined && renderValue ? renderValue(value) : placeholder}
                                 {/*{hasValue && !renderValue && value}*/}
                                 {hasValue && !renderValue && (() => {
-
                                     // @ts-ignore
                                     const childrenProps: SelectItemProps[] = Children.map(children, (child) => {
                                         if (React.isValidElement(child)) {
@@ -168,7 +180,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                                         }
                                     }).filter(Boolean);
 
-                                    const option = childrenProps.find((o) => o.value === value);
+                                    const option = childrenProps.find((o) => String(o.value) === String(value));
                                     return option?.children;
                                 })()}
 
@@ -187,10 +199,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         )}
                         <SelectPrimitive.Icon asChild>
                             <KeyboardArrowDownIcon size={"medium"}
-                                            className={cls("transition", open ? "rotate-180" : "", {
-                                                "px-2": size === "large",
-                                                "px-1": size === "medium" || size === "small",
-                                            })}/>
+                                                   className={cls("transition", open ? "rotate-180" : "", {
+                                                       "px-2": size === "large",
+                                                       "px-1": size === "medium" || size === "small",
+                                                   })}/>
                         </SelectPrimitive.Icon>
                     </div>
                 </SelectPrimitive.Trigger>
@@ -211,22 +223,25 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
 
 Select.displayName = "Select";
 
-export type SelectItemProps = {
-    value: string,
+export type SelectItemProps<T extends SelectValue = string> = {
+    value: T,
     children?: React.ReactNode,
     disabled?: boolean,
     className?: string,
 };
 
-export function SelectItem({
-                               value,
-                               children,
-                               disabled,
-                               className
-                           }: SelectItemProps) {
+export function SelectItem<T extends SelectValue = string>({
+                                                               value,
+                                                               children,
+                                                               disabled,
+                                                               className
+                                                           }: SelectItemProps<T>) {
+    // Convert value to string for Radix UI
+    const stringValue = String(value);
+
     return <SelectPrimitive.Item
-        key={value}
-        value={value}
+        key={stringValue}
+        value={stringValue}
         disabled={disabled}
         className={cls(
             "w-full",

package/src/components/Sheet.tsx

@@ -15,7 +15,9 @@ interface SheetProps {
     transparent?: boolean;
     onOpenChange?: (open: boolean) => void;
     className?: string;
+    style?: React.CSSProperties;
     overlayClassName?: string;
+    overlayStyle?: React.CSSProperties;
 }
 
 export const Sheet: React.FC<SheetProps> = ({
@@ -28,7 +30,9 @@ export const Sheet: React.FC<SheetProps> = ({
                                                 onOpenChange,
                                                 transparent,
                                                 className,
+                                                style,
                                                 overlayClassName,
+                                                overlayStyle,
                                                 ...props
                                             }) => {
     const [displayed, setDisplayed] = useState(false);
@@ -64,6 +68,7 @@ export const Sheet: React.FC<SheetProps> = ({
                 </DialogPrimitive.Title>
                 {includeBackgroundOverlay && <DialogPrimitive.Overlay
                     className={cls(
+                        "outline-none",
                         "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
                         "bg-black bg-opacity-50",
                         "dark:bg-surface-900 dark:bg-opacity-60",
@@ -71,13 +76,15 @@ export const Sheet: React.FC<SheetProps> = ({
                         overlayClassName
                     )}
                     style={{
-                        pointerEvents: displayed ? "auto" : "none"
+                        pointerEvents: displayed ? "auto" : "none",
+                        ...overlayStyle
                     }}
                 />}
                 <DialogPrimitive.Content
                     {...props}
                     onFocusCapture={(event) => event.preventDefault()}
                     className={cls(
+                        "outline-none",
                         borderClass[side],
                         defaultBorderMixin,
                         "transform-gpu",
@@ -93,6 +100,7 @@ export const Sheet: React.FC<SheetProps> = ({
                         !displayed || !open ? transformValue[side] : "",
                         className
                     )}
+                    style={style}
                 >
                     {children}
                 </DialogPrimitive.Content>

package/src/components/Tabs.tsx

@@ -20,6 +20,7 @@ export function Tabs({
 
     return <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={className}>
         <TabsPrimitive.List className={cls(
+            "w-max",
             "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar items-end",
             innerClassName)
         }>
@@ -54,7 +55,8 @@ export function Tab({
                                               "data-[state=active]:text-surface-accent-900 data-[state=active]:dark:text-white",
                                               "hover:text-surface-accent-800 dark:hover:text-surface-accent-200"),
                                       className)}>
-        <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
+        <div className={cls("line-clamp-1",
+            "uppercase inline-block p-2 px-4 rounded",
             "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
             innerClassName)}>
             {children}