@firecms/ui 3.0.0-canary.23 → 3.0.0-canary.231

package/src/components/Popover.tsx

@@ -1,8 +1,10 @@
+"use client";
 import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { paperMixin } from "../styles";
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -23,6 +25,7 @@ export interface PopoverProps {
     enabled?: boolean;
     modal?: boolean;
     className?: string;
+    portalContainer?: HTMLElement | null;
 }
 
 export function Popover({
@@ -40,6 +43,7 @@ export function Popover({
                             avoidCollisions,
                             enabled = true,
                             modal = false,
+                            portalContainer,
                             className
                         }: PopoverProps) {
 
@@ -50,25 +54,25 @@ export function Popover({
 
     return <PopoverPrimitive.Root open={open}
                                   onOpenChange={onOpenChange}
-                                  modal={modal}
-    >
+                                  modal={modal}>
         <PopoverPrimitive.Trigger asChild>
             {trigger}
         </PopoverPrimitive.Trigger>
-        <PopoverPrimitive.Portal>
-            <PopoverPrimitive.Content className={cn(paperMixin,
-                "PopoverContent shadow z-40", className)}
-                                      side={side}
-                                      sideOffset={sideOffset}
-                                      align={align}
-                                      alignOffset={alignOffset}
-                                      arrowPadding={arrowPadding}
-                                      sticky={sticky}
-                                      hideWhenDetached={hideWhenDetached}
-                                      avoidCollisions={avoidCollisions}>
+        <PopoverPrimitive.Portal container={portalContainer}>
+            <PopoverPrimitive.Content
+                className={cls(paperMixin,
+                    "PopoverContent z-40", className)}
+                side={side}
+                sideOffset={sideOffset}
+                align={align}
+                alignOffset={alignOffset}
+                arrowPadding={arrowPadding}
+                sticky={sticky}
+                hideWhenDetached={hideWhenDetached}
+                avoidCollisions={avoidCollisions}>
 
                 {children}
-                <PopoverPrimitive.Arrow className="fill-white dark:fill-slate-950"/>
+                <PopoverPrimitive.Arrow className="fill-white dark:fill-surface-accent-950"/>
             </PopoverPrimitive.Content>
         </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>;

package/src/components/RadioGroup.tsx

@@ -1,15 +1,37 @@
+"use client";
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { cn } from "../util";
-import { CircleIcon } from "../icons";
+import { cls } from "../util";
+
+export interface RadioGroupProps {
+    id?: string;
+    children: React.ReactNode;
+    name?: string
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * Whether keyboard navigation should loop around
+     * @defaultValue false
+     */
+    loop?: boolean;
+    defaultValue?: string;
+    value?: string;
+
+    onValueChange?(value: string): void;
+
+    className?: string;
+}
 
 const RadioGroup = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+    RadioGroupProps
+>(({
+       className,
+       ...props
+   }, ref) => {
     return (
         <RadioGroupPrimitive.Root
-            className={cn("grid gap-2", className)}
+            className={cls("grid gap-2", className)}
             {...props}
             ref={ref}
         />
@@ -17,21 +39,32 @@ const RadioGroup = React.forwardRef<
 })
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
+export interface RadioGroupItemProps {
+    id?: string;
+    value: string;
+    checked?: boolean;
+    required?: boolean;
+    className?: string;
+    disabled?: boolean;
+}
 const RadioGroupItem = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+    RadioGroupItemProps
+>(({
+       className,
+       ...props
+   }, ref) => {
     return (
         <RadioGroupPrimitive.Item
             ref={ref}
-            className={cn(
+            className={cls(
                 "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                 className
             )}
             {...props}
         >
             <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg" />
+                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg"/>
             </RadioGroupPrimitive.Indicator>
         </RadioGroupPrimitive.Item>
     )

package/src/components/SearchBar.tsx

@@ -1,10 +1,11 @@
+"use client";
 import React, { useCallback, useState } from "react";
 
-import { defaultBorderMixin, focusedMixin } from "../styles";
+import { defaultBorderMixin } from "../styles";
 import { CircularProgress, IconButton } from "./index";
-import { ClearIcon, SearchIcon } from "../icons";
-import { cn } from "../util";
-import { useDebounceValue } from "../util/useDebounceValue";
+import { CloseIcon, SearchIcon } from "../icons";
+import { cls } from "../util";
+import { useDebounceValue } from "../hooks";
 
 interface SearchBarProps {
     onClick?: () => void;
@@ -60,15 +61,15 @@ export function SearchBar({
     return (
         <div
             onClick={onClick}
-            className={cn("relative",
+            className={cls("relative",
                 large ? "h-14" : "h-[42px]",
-                "bg-slate-50 dark:bg-gray-800 transition duration-150 ease-in-out border",
+                "bg-surface-accent-50 dark:bg-surface-800 border",
                 defaultBorderMixin,
-                "rounded",
+                "rounded-lg",
                 className)}>
             <div
-                className="absolute p-0 px-4 h-full absolute pointer-events-none flex items-center justify-center top-0">
-                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-slate-500 dark:text-gray-500"}/>}
+                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"}/>}
             </div>
             <input
                 value={searchText ?? ""}
@@ -84,12 +85,12 @@ export function SearchBar({
                 autoFocus={autoFocus}
                 onFocus={() => setActive(true)}
                 onBlur={() => setActive(false)}
-                className={cn(
+                className={cls(
                     (disabled || loading) && "pointer-events-none",
-                    "relative flex items-center rounded transition-all bg-transparent outline-none appearance-none border-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 ",
                     expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
-                    focusedMixin,
                     innerClassName
                 )}
             />
@@ -97,7 +98,7 @@ export function SearchBar({
                 ? <IconButton
                     className={`${large ? "mr-2 top-1" : "mr-1 top-0"} absolute right-0 z-10`}
                     onClick={clearText}>
-                    <ClearIcon size={"small"}/>
+                    <CloseIcon size={"small"}/>
                 </IconButton>
                 : <div style={{ width: 26 }}/>
             }

package/src/components/Select.tsx

@@ -1,105 +1,104 @@
-import React, { useEffect } from "react";
-
+"use client";
+import React, { ChangeEvent, Children, forwardRef, useCallback, useEffect, useState } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import {
+    defaultBorderMixin,
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundInvisibleMixin,
     fieldBackgroundMixin,
-    focusedMixin
+    focusedDisabled
 } from "../styles";
-import { CheckIcon, ExpandMoreIcon } from "../icons";
-import { cn } from "../util";
+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 | string[],
+    value?: T,
     className?: string,
     inputClassName?: string,
-    onChange?: React.EventHandler<React.ChangeEvent<HTMLSelectElement>>,
-    onValueChange?: (updatedValue: string) => void,
-    onMultiValueChange?: (updatedValue: string[]) => void,
+    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
+    onValueChange?: (updatedValue: T) => void,
     placeholder?: React.ReactNode,
-    renderValue?: (value: string, index: number) => React.ReactNode,
-    renderValues?: (values: string[]) => React.ReactNode,
-    size?: "small" | "medium",
-    label?: React.ReactNode,
+    renderValue?: (value: T) => React.ReactNode,
+    size?: "smallest" | "small" | "medium" | "large",
+    label?: React.ReactNode | string,
     disabled?: boolean,
     error?: boolean,
     position?: "item-aligned" | "popper",
     endAdornment?: React.ReactNode,
-    multiple?: boolean,
     inputRef?: React.RefObject<HTMLButtonElement>,
     padding?: boolean,
-    includeFocusOutline?: boolean,
     invisible?: boolean,
-    children?: React.ReactNode
+    children?: React.ReactNode;
 };
 
-export function Select({
-                           inputRef,
-                           open,
-                           name,
-                           id,
-                           onOpenChange,
-                           value,
-                           onChange,
-                           onValueChange,
-                           onMultiValueChange,
-                           className,
-                           inputClassName,
-                           placeholder,
-                           renderValue,
-                           renderValues,
-                           label,
-                           size = "medium",
-                           includeFocusOutline = true,
-                           error,
-                           disabled,
-                           padding = true,
-                           position = "item-aligned",
-                           endAdornment,
-                           multiple,
-                           invisible,
-                           children,
-                           ...props
-                       }: 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) => {
+
+    const [openInternal, setOpenInternal] = useState(open ?? false);
 
-    const [openInternal, setOpenInternal] = React.useState(false);
     useEffect(() => {
         setOpenInternal(open ?? false);
     }, [open]);
 
-    const onValueChangeInternal = React.useCallback((newValue: string) => {
-        if (multiple) {
-            if (Array.isArray(value) && value.includes(newValue)) {
-                onMultiValueChange?.(value.filter(v => v !== newValue));
-            } else {
-                onMultiValueChange?.([...(value as string[] ?? []), newValue]);
-            }
-        } else {
-            onValueChange?.(newValue);
-        }
-        if (!multiple && onChange) {
+    const onValueChangeInternal = useCallback((newValue: string) => {
+        // 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 React.ChangeEvent<HTMLSelectElement>;
+            } as unknown as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
-    }, [multiple, onChange, value, onMultiValueChange, 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={Array.isArray(value) ? undefined : value}
-            defaultOpen={open}
+            value={stringValue}
             open={openInternal}
             disabled={disabled}
             onValueChange={onValueChangeInternal}
@@ -108,125 +107,156 @@ export function Select({
                 setOpenInternal(open);
             }}
             {...props}>
-
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
-
-            <div
-                className={cn(
-                    size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-                    "select-none rounded-md text-sm",
-                    invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
-                    disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                    "relative flex items-center",
-                    className)}>
-
+            <div className={cls(
+                "select-none rounded-md text-sm",
+                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
+                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                "relative flex items-center",
+                className,
+                {
+                    "min-h-[28px]": size === "smallest",
+                    "min-h-[32px]": size === "small",
+                    "min-h-[42px]": size === "medium",
+                    "min-h-[64px]": size === "large",
+                    "w-fit": !fullWidth,
+                    "w-full": fullWidth
+                }
+            )}>
                 <SelectPrimitive.Trigger
                     ref={inputRef}
                     id={id}
-                    className={cn(
-                        "w-full h-full",
-                        size === "small" ? "h-[42px]" : "h-[64px]",
-                        padding ? "px-4 " : "",
+                    asChild
+                >
+                    <div className={cls(
+                        "h-full",
+                        padding ? {
+                            "px-4": size === "large",
+                            "px-3": size === "medium",
+                            "px-2": size === "small" || size === "smallest",
+                        } : "",
                         "outline-none focus:outline-none",
                         "select-none rounded-md text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                         error ? "border border-red-500 dark:border-red-600" : "",
-                        disabled ? "text-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-white",
-                        "relative flex items-center",
-                        includeFocusOutline ? focusedMixin : "",
+                        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 === "smallest",
+                            "min-h-[32px]": size === "small",
+                            "min-h-[42px]": size === "medium",
+                            "min-h-[64px]": size === "large",
+                            "w-full": fullWidth,
+                            "w-fit": !fullWidth
+                        },
                         inputClassName
                     )}>
+                        <div
+                            ref={ref}
+                            className={cls(
+                                "flex-grow max-w-full flex flex-row gap-2 items-center",
+                                "overflow-visible",
+                                {
+                                    "min-h-[28px]": size === "smallest",
+                                    "min-h-[32px]": size === "small",
+                                    "min-h-[42px]": size === "medium",
+                                    "min-h-[64px]": size === "large"
+                                }
+                            )}>
+                            <SelectPrimitive.Value
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                }}
+                                placeholder={placeholder}
+                                className={"w-full"}>
+                                {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)) {
+                                            return child.props;
+                                        }
+                                    }).filter(Boolean);
 
-                    <div className={cn(
-                        "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
-                        "overflow-visible",
-                        size === "small" ? "h-[42px]" : "h-[64px]"
-                    )}>
-                    <SelectPrimitive.Value >
-                        {renderValue &&
-                            (value && Array.isArray(value)
-                                ? value.map((v, i) => (
-                                    <div key={v} className={"flex items-center gap-1 max-w-full"}>
-                                        {renderValue ? renderValue(v, i) : v}
-                                    </div>))
-                                : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
-
-                        {renderValues && (!value || Array.isArray(value))
-                            ? renderValues(value as string[] ?? [])
-                            : null}
+                                    const option = childrenProps.find((o) => String(o.value) === String(value));
+                                    return option?.children;
+                                })()}
 
-                        {!renderValue && !renderValues && value}
+                            </SelectPrimitive.Value>
+                        </div>
 
-                    </SelectPrimitive.Value>
+                        {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",
+                                                   })}/>
+                        </SelectPrimitive.Icon>
                     </div>
-
-                    <SelectPrimitive.Icon className={cn(
-                        "px-2 h-full flex items-center",
-                    )}>
-                        <ExpandMoreIcon size={"small"}
-                                        className={cn("transition", open ? "rotate-180" : "")}/>
-                    </SelectPrimitive.Icon>
-
                 </SelectPrimitive.Trigger>
 
-                {endAdornment && <div className={cn("absolute h-full flex items-center",
-                    size === "small" ? "right-10" : "right-14")}
-                                      onClick={(e) => e.stopPropagation()}>
-                    {endAdornment}
-                </div>}
-
             </div>
             <SelectPrimitive.Portal>
-                <SelectPrimitive.Content
-                    position={position}
-                    className="z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg">
-                    <SelectPrimitive.Viewport
-                        className={"p-1"}
-                        style={{
-                            maxHeight: "var(--radix-select-content-available-height)"
-                        }}>
+                <SelectPrimitive.Content position={position}
+                                         className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
+                    <SelectPrimitive.Viewport className={"p-1"}
+                                              style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
             </SelectPrimitive.Portal>
         </SelectPrimitive.Root>
     );
-}
+});
 
-export type SelectItemProps = {
-    value: string,
+Select.displayName = "Select";
+
+export type SelectItemProps<T extends SelectValue = string> = {
+    value: T,
     children?: React.ReactNode,
     disabled?: boolean,
     className?: string,
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
 };
 
-export function SelectItem({
-                               value,
-                               children,
-                               disabled,
-                               className
-                           }: SelectItemProps) {
+export function SelectItem<T extends SelectValue = string>({
+                                                               value,
+                                                               children,
+                                                               disabled,
+                                                               className,
+                                                               onClick
+                                                           }: 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}
-        onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        }}
-        className={cn(
+        onClick={onClick}
+        className={cls(
             "w-full",
-            "relative relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
-            focusedMixin,
+            "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300",
             "focus:z-10",
-            "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-900 focus:bg-slate-100 dark:focus:bg-slate-950",
-            "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-slate-950",
+            "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-950",
+            "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-950",
             disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
             "[&>*]:w-full",
             "overflow-visible",
             className
-        )}
-    >
+        )}>
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
         <div
             className="absolute left-1 data-[state=checked]:block hidden">
@@ -248,8 +278,8 @@ export function SelectGroup({
                             }: SelectGroupProps) {
     return <>
         <SelectPrimitive.Group
-            className={cn(
-                "text-xs text-slate-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
+            className={cls(
+                "text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
                 "px-2 py-2",
                 className
             )}>