@firecms/ui 3.0.0-beta.12 → 3.0.0-beta.14

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,
@@ -36,6 +38,7 @@ export type SelectProps = {
     padding?: boolean,
     invisible?: boolean,
     children?: React.ReactNode;
+    dataType?: "string" | "number" | "boolean";
 };
 
 export const Select = forwardRef<HTMLDivElement, SelectProps>(({
@@ -61,6 +64,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                                                                    endAdornment,
                                                                    invisible,
                                                                    children,
+                                                                   dataType = "string",
                                                                    ...props
                                                                }, ref) => {
 
@@ -71,24 +75,35 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
     }, [open]);
 
     const onValueChangeInternal = useCallback((newValue: string) => {
-        onValueChange?.(newValue);
+
+        let typedValue: SelectValue = newValue;
+        if (dataType === "boolean") {
+            if (newValue === "true") typedValue = true;
+            else if (newValue === "false") typedValue = false;
+        } else if (dataType === "number") {
+            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 +120,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 +138,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 +147,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 +162,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 +175,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,33 +185,33 @@ 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;
                                 })()}
 
                             </SelectPrimitive.Value>
                         </div>
 
-                        {endAdornment && (
-                            <div
-                                className={cls("h-full flex items-center")}
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                }}>
-                                {endAdornment}
-                            </div>
-                        )}
                         <SelectPrimitive.Icon asChild>
-                            <KeyboardArrowDownIcon size={"medium"}
-                                            className={cls("transition", open ? "rotate-180" : "", {
-                                                "px-2": size === "large",
-                                                "px-1": size === "medium" || size === "small",
-                                            })}/>
+                            <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
+                                                   className={cls("transition", open ? "rotate-180" : "", {
+                                                       "px-2": size === "large",
+                                                       "px-1": size === "medium" || size === "small",
+                                                   })}/>
                         </SelectPrimitive.Icon>
                     </div>
                 </SelectPrimitive.Trigger>
 
+                {endAdornment && (
+                    <div
+                        className={cls("h-full flex items-center absolute right-0 pr-12",)}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }}>
+                        {endAdornment}
+                    </div>
+                )}
             </div>
             <SelectPrimitive.Portal>
                 <SelectPrimitive.Content position={position}
@@ -211,22 +228,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/TextField.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useCallback, useEffect, useRef, forwardRef, ForwardedRef } from "react";
+import React, { ForwardedRef, forwardRef, useEffect, useRef } from "react";
 
 import { TextareaAutosize } from "./TextareaAutosize";
 import {
@@ -33,19 +33,27 @@ export type TextFieldProps<T extends string | number> = {
     onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     label?: React.ReactNode;
     multiline?: boolean;
-    rows?: number;
     disabled?: boolean;
     invisible?: boolean;
     error?: boolean;
     endAdornment?: React.ReactNode;
     autoFocus?: boolean;
     placeholder?: string;
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     className?: string;
     style?: React.CSSProperties;
     inputClassName?: string;
     inputStyle?: React.CSSProperties;
     inputRef?: React.ForwardedRef<any>;
+    /**
+     * Maximum number of rows to display.
+     */
+    maxRows?: number | string;
+    /**
+     * Minimum number of rows to display.
+     * @default 1
+     */
+    minRows?: number | string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
 export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | number>>(
@@ -57,7 +65,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
             type = "text",
             multiline = false,
             invisible,
-            rows,
+            maxRows,
+            minRows,
             disabled,
             error,
             endAdornment,
@@ -101,7 +110,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                 ref={inputRef}
                 placeholder={focused || hasValue || !label ? placeholder : undefined}
                 autoFocus={autoFocus}
-                rows={rows}
+                minRows={minRows}
+                maxRows={maxRows}
                 value={value ?? ""}
                 onChange={onChange}
                 style={inputStyle}
@@ -124,11 +134,12 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                     "focused:text-text-primary focused:dark:text-text-primary-dark",
                     invisible ? focusedInvisibleMixin : "",
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                    size === "small"
-                        ? "min-h-[32px]"
-                        : size === "medium"
-                            ? "min-h-[48px]"
-                            : "min-h-[64px]",
+                    {
+                        "min-h-[28px]": size === "smallest",
+                        "min-h-[32px]": size === "small",
+                        "min-h-[42px]": size === "medium",
+                        "min-h-[64px]": size === "large",
+                    },
                     label
                         ? size === "large"
                             ? "pt-8 pb-2"
@@ -158,9 +169,10 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     error ? "border border-red-500 dark:border-red-600" : "",
                     {
-                        "min-h-[32px]": !invisible && size === "small",
-                        "min-h-[48px]": !invisible && size === "medium",
-                        "min-h-[64px]": !invisible && size === "large",
+                        "min-h-[28px]": size === "smallest",
+                        "min-h-[32px]": size === "small",
+                        "min-h-[42px]": size === "medium",
+                        "min-h-[64px]": size === "large",
                     },
                     className
                 )}
@@ -193,7 +205,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                             {
                                 "mr-4": size === "large",
                                 "mr-3": size === "medium",
-                                "mr-2": size === "small",
+                                "mr-2": size === "small" || size === "smallest",
                             }
                         )}
                     >

package/src/icons/Icon.tsx

@@ -54,11 +54,11 @@ export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: str
             ref={ref} // Attach the ref to the span
             style={{
                 fontSize: `${sizeInPx}px`,
+                verticalAlign: "middle",
                 ...style
             }}
             className={
                 cls("material-icons",
-                    "block",
                     color ? colorClassesMapping[color] : "",
                     "select-none",
                     className)}

package/src/index.css

@@ -71,3 +71,4 @@
 a {
     @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
 }
+