@firecms/ui 3.0.0-canary.11 → 3.0.0-canary.111

package/src/components/RadioGroup.tsx

@@ -1,15 +1,36 @@
 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 +38,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,10 @@
 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 { cls } from "../util";
+import { useDebounceValue } from "../hooks";
 
 interface SearchBarProps {
     onClick?: () => void;
@@ -60,14 +60,14 @@ 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-slate-50 dark:bg-gray-800 border",
                 defaultBorderMixin,
                 "rounded",
                 className)}>
             <div
-                className="absolute p-0 px-4 h-full absolute pointer-events-none flex items-center justify-center top-0">
+                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-slate-500 dark:text-gray-500"}/>}
             </div>
             <input
@@ -84,12 +84,11 @@ 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",
                     "pl-12 h-full text-current ",
                     expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
-                    focusedMixin,
                     innerClassName
                 )}
             />

package/src/components/Select.tsx

@@ -1,15 +1,13 @@
-import React, { useEffect } from "react";
-
+import React, { ChangeEvent, forwardRef, useCallback, useEffect, useState } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import {
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundInvisibleMixin,
-    fieldBackgroundMixin,
-    focusedMixin
+    fieldBackgroundMixin
 } from "../styles";
 import { CheckIcon, ExpandMoreIcon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
 
 export type SelectProps = {
@@ -20,14 +18,14 @@ export type SelectProps = {
     value?: string | string[],
     className?: string,
     inputClassName?: string,
-    onChange?: React.EventHandler<React.ChangeEvent<HTMLSelectElement>>,
+    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
     onValueChange?: (updatedValue: string) => void,
     onMultiValueChange?: (updatedValue: string[]) => void,
     placeholder?: React.ReactNode,
     renderValue?: (value: string, index: number) => React.ReactNode,
     renderValues?: (values: string[]) => React.ReactNode,
     size?: "small" | "medium",
-    label?: React.ReactNode,
+    label?: React.ReactNode | string,
     disabled?: boolean,
     error?: boolean,
     position?: "item-aligned" | "popper",
@@ -40,41 +38,42 @@ export type SelectProps = {
     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,
+                                                                      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
+                                                                  }, ref) => {
+
+    const [openInternal, setOpenInternal] = useState(false);
 
-    const [openInternal, setOpenInternal] = React.useState(false);
     useEffect(() => {
         setOpenInternal(open ?? false);
     }, [open]);
 
-    const onValueChangeInternal = React.useCallback((newValue: string) => {
+    const onValueChangeInternal = useCallback((newValue: string) => {
         if (multiple) {
             if (Array.isArray(value) && value.includes(newValue)) {
                 onMultiValueChange?.(value.filter(v => v !== newValue));
@@ -90,11 +89,13 @@ export function Select({
                     name,
                     value: newValue
                 }
-            } as React.ChangeEvent<HTMLSelectElement>;
+            } as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
     }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
 
+    const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
+
     return (
         <SelectPrimitive.Root
             name={name}
@@ -107,23 +108,22 @@ export function Select({
                 onOpenChange?.(open);
                 setOpenInternal(open);
             }}
-            {...props}>
-
+            {...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(
+                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
+            )}
+            >
                 <SelectPrimitive.Trigger
                     ref={inputRef}
                     id={id}
-                    className={cn(
+                    className={cls(
                         "w-full h-full",
                         size === "small" ? "h-[42px]" : "h-[64px]",
                         padding ? "px-4 " : "",
@@ -133,65 +133,53 @@ export function Select({
                         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 : "",
                         inputClassName
-                    )}>
-
-                    <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}
-
-                        {!renderValue && !renderValues && value}
-
-                    </SelectPrimitive.Value>
+                    )}
+                >
+                    <div
+                        ref={ref}
+                        className={cls(
+                            "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
+                            "overflow-visible",
+                            size === "small" ? "h-[42px]" : "h-[64px]"
+                        )}
+                    >
+                        <SelectPrimitive.Value placeholder={placeholder} className={"w-full"}>
+                            {renderValue && (hasValue && 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 && (!hasValue || Array.isArray(value)) ? renderValues(value as string[] ?? []) : null}
+                            {!renderValue && !renderValues && hasValue}
+                        </SelectPrimitive.Value>
                     </div>
-
-                    <SelectPrimitive.Icon className={cn(
-                        "px-2 h-full flex items-center",
-                    )}>
-                        <ExpandMoreIcon size={"small"}
-                                        className={cn("transition", open ? "rotate-180" : "")}/>
+                    <SelectPrimitive.Icon className={cls("px-2 h-full flex items-center")}>
+                        <ExpandMoreIcon size={"small"} className={cls("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>}
-
+                {endAdornment && (
+                    <div
+                        className={cls("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="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)" }}>
                         {children}
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
             </SelectPrimitive.Portal>
         </SelectPrimitive.Root>
     );
-}
+});
+
+Select.displayName = "Select";
 
 export type SelectItemProps = {
     value: string,
@@ -214,10 +202,9 @@ export function SelectItem({
             e.preventDefault();
             e.stopPropagation();
         }}
-        className={cn(
+        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-slate-700 dark:text-slate-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",
@@ -248,7 +235,7 @@ export function SelectGroup({
                             }: SelectGroupProps) {
     return <>
         <SelectPrimitive.Group
-            className={cn(
+            className={cls(
                 "text-xs text-slate-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
                 "px-2 py-2",
                 className

package/src/components/Sheet.tsx

@@ -1,37 +1,38 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import { cls } from "../util";
+import { defaultBorderMixin } from "../styles";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../util";
 
 interface SheetProps {
     children: React.ReactNode;
     open: boolean;
+    title?: string;
     side?: "top" | "bottom" | "left" | "right";
+    darkBackground?: boolean;
     transparent?: boolean;
     onOpenChange?: (open: boolean) => void;
+    className?: string;
+    overlayClassName?: string;
 }
 
 export const Sheet: React.FC<SheetProps> = ({
                                                 children,
                                                 side = "right",
+                                                title,
                                                 open,
                                                 onOpenChange,
                                                 transparent,
+                                                className,
+                                                overlayClassName,
                                                 ...props
                                             }) => {
-
-    const [displayed, setDisplayed] = React.useState(false);
+    const [displayed, setDisplayed] = useState(false);
 
     useEffect(() => {
-        if (!open) {
-            const timeout = setTimeout(() => {
-                setDisplayed(false);
-            }, 250);
-            return () => clearTimeout(timeout);
-        } else {
-            setDisplayed(true);
-            return () => {
-            };
-        }
+        const timeout = setTimeout(() => {
+            setDisplayed(open);
+        }, 1);
+        return () => clearTimeout(timeout);
     }, [open]);
 
     const transformValue: Record<string, string> = {
@@ -41,36 +42,52 @@ export const Sheet: React.FC<SheetProps> = ({
         right: "translate-x-full"
     };
 
-    return (
+    const borderClass: Record<string, string> = {
+        top: "border-b",
+        bottom: "border-t",
+        left: "border-r",
+        right: "border-l"
+    };
 
+    return (
         <DialogPrimitive.Root open={displayed || open}
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
+                <DialogPrimitive.Title>
+                    {title ?? "Sheet"}
+                </DialogPrimitive.Title>
                 <DialogPrimitive.Overlay
-                    className={cn(
-                        "fixed inset-0 transition-opacity z-20 ease-in-out duration-200  backdrop-blur-sm",
-                        transparent ? "bg-white bg-opacity-80" : "bg-black bg-opacity-50",
-                        "dark:bg-black dark:bg-opacity-60",
-                        displayed && open ? "opacity-100" : "opacity-0"
+                    className={cls(
+                        "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
+                        "bg-black bg-opacity-50",
+                        "dark:bg-gray-900 dark:bg-opacity-60",
+                        displayed && open ? "opacity-100" : "opacity-0",
+                        overlayClassName
                     )}
                     style={{
-                        pointerEvents: displayed ? "auto" : "none",
+                        pointerEvents: displayed ? "auto" : "none"
                     }}
+                    onClick={() => onOpenChange && onOpenChange(false)}
                 />
                 <DialogPrimitive.Content
                     {...props}
-                    className={cn(
-                        // "transform-gpu",
+                    onFocusCapture={(event) => event.preventDefault()}
+                    className={cls(
+                        borderClass[side],
+                        defaultBorderMixin,
+                        "transform-gpu",
                         "will-change-transform",
                         "text-slate-900 dark:text-white",
-                        "fixed transform z-20 transition-all duration-[240ms] ease-in-out",
+                        "fixed transform z-20 transition-all ease-in-out",
+                        !displayed ? "duration-150" : "duration-100",
                         "outline-none focus:outline-none",
-                        !transparent ? "shadow-md" : "",
+                        transparent ? "" : "shadow-md bg-white dark:bg-gray-950",
                         side === "top" || side === "bottom" ? "w-full" : "h-full",
                         side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0",
-                        displayed && open ? "opacity-100" : "opacity-0",
-                        !displayed || !open ? transformValue[side] : "")
-                    }
+                        displayed && open ? "opacity-100" : "opacity-50",
+                        !displayed || !open ? transformValue[side] : "",
+                        className
+                    )}
                 >
                     {children}
                 </DialogPrimitive.Content>

package/src/components/Skeleton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type SkeletonProps = {
     width?: number;
@@ -12,13 +12,16 @@ export function Skeleton({
                              height,
                              className
                          }: SkeletonProps) {
-    return <span className={
-        cn(
+    return <span
+        style={{
+            width: width ? `${width}px` : "100%",
+            height: height ? `${height}px` : "12px"
+        }}
+        className={
+        cls(
             "block",
-            "bg-slate-200 dark:bg-slate-800 rounded",
+            "bg-slate-200 dark:bg-slate-800 rounded-md",
             "animate-pulse",
-            width ? `w-[${width}px]` : "w-full",
-            height ? `h-[${height}px]` : "h-3",
             "max-w-full max-h-full",
             className)
     }/>;