@firecms/ui 3.0.0-beta.8 → 3.0.0-beta.9

package/src/components/Select.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
-
+import React, { ChangeEvent, 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 { cls } from "../util";
@@ -17,90 +17,75 @@ export type SelectProps = {
     name?: string,
     id?: string,
     onOpenChange?: (open: boolean) => void,
-    value?: string | string[],
+    value?: 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,
+    renderValue?: (value: string) => React.ReactNode,
     size?: "small" | "medium",
     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,
+                                                                   id,
+                                                                   onOpenChange,
+                                                                   value,
+                                                                   onChange,
+                                                                   onValueChange,
+                                                                   className,
+                                                                   inputClassName,
+                                                                   placeholder,
+                                                                   renderValue,
+                                                                   label,
+                                                                   size = "medium",
+                                                                   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) => {
+        onValueChange?.(newValue);
+        if (onChange) {
             const event = {
                 target: {
                     name,
                     value: newValue
                 }
-            } as React.ChangeEvent<HTMLSelectElement>;
+            } as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
-    }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
+    }, [onChange, value, onValueChange]);
 
     const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
+
     return (
         <SelectPrimitive.Root
             name={name}
-            value={Array.isArray(value) ? undefined : value}
-            defaultOpen={open}
+            value={value}
             open={openInternal}
             disabled={disabled}
             onValueChange={onValueChangeInternal}
@@ -108,19 +93,18 @@ export function Select({
                 onOpenChange?.(open);
                 setOpenInternal(open);
             }}
-            {...props}>
-
+            {...props}
+        >
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
-
-            <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)}>
-
+            <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}
@@ -134,65 +118,62 @@ 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={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}>
-                            {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}
-
+                    )}
+
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }}
+                >
+                    <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
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}
+                            placeholder={placeholder}
+                            className={"w-full"}>
+                            {hasValue && value && renderValue ? renderValue(value) : placeholder}
+                            {hasValue && !renderValue && value}
                         </SelectPrimitive.Value>
                     </div>
-
-                    <SelectPrimitive.Icon className={cls(
-                        "px-2 h-full flex items-center",
-                    )}>
-                        <ExpandMoreIcon size={"small"}
-                                        className={cls("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={cls("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.preventDefault();
+                            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-gray-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>
     );
-}
+});
+
+Select.displayName = "Select";
 
 export type SelectItemProps = {
     value: string,
@@ -217,17 +198,15 @@ export function SelectItem({
         }}
         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",
+            "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-800 focus:bg-slate-100 dark:focus:bg-gray-950",
+            "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-gray-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">

package/src/components/Separator.tsx

@@ -1,20 +1,26 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cls } from "../util";
 
-export function Separator({ orientation, decorative }: {
+export function Separator({
+                              orientation,
+                              decorative,
+                              className
+                          }: {
     orientation: "horizontal" | "vertical",
-    decorative?: boolean
+    decorative?: boolean,
+    className?: string
 }) {
     if (orientation === "horizontal")
         return (
             <SeparatorPrimitive.Root
                 decorative={decorative}
                 orientation="horizontal"
-                className="dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[8px]"/>
+                className={cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
         );
     else
         return (
             <SeparatorPrimitive.Root
-                className="dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[8px]"
+                className={cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
                 decorative={decorative}
                 orientation="vertical"
             />

package/src/components/Sheet.tsx

@@ -1,37 +1,38 @@
-import React, { useEffect } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import React, { useEffect, useState } from "react";
 import { cls } from "../util";
+import { defaultBorderMixin } from "../styles";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 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 autoFocus tabIndex={0}>
+                    {title ?? "Sheet"}
+                </DialogPrimitive.Title>
                 <DialogPrimitive.Overlay
                     className={cls(
-                        "fixed inset-0 transition-opacity z-20 ease-in-out duration-200  backdrop-blur-sm",
+                        "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"
+                        displayed && open ? "opacity-100" : "opacity-0",
+                        overlayClassName
                     )}
                     style={{
-                        pointerEvents: displayed ? "auto" : "none",
+                        pointerEvents: displayed ? "auto" : "none"
                     }}
+                    onClick={() => onOpenChange && onOpenChange(false)}
                 />
                 <DialogPrimitive.Content
                     {...props}
+                    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 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

@@ -20,7 +20,7 @@ export function Skeleton({
         className={
         cls(
             "block",
-            "bg-slate-200 dark:bg-slate-800 rounded",
+            "bg-slate-200 dark:bg-slate-800 rounded-md",
             "animate-pulse",
             "max-w-full max-h-full",
             className)

package/src/components/Table.tsx

@@ -6,16 +6,19 @@ export type TableProps = {
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-};
+} & React.TableHTMLAttributes<HTMLTableElement>;
 
 export const Table = ({
                           children,
                           className,
-                          style
+                          style,
+                          ...rest
                       }: TableProps) => (
-    <table className={cls("w-full text-left text-gray-800 dark:text-white rounded-md overflow-x-auto",
-        className)}
-           style={style}>
+    <table
+        className={cls("text-left text-gray-800 dark:text-white rounded-md overflow-x-auto", className)}
+        style={style}
+        {...rest}
+    >
         {children}
     </table>
 );
@@ -23,13 +26,17 @@ export const Table = ({
 export type TableBodyProps = {
     children?: React.ReactNode;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLTableSectionElement>;
+
 export const TableBody = ({
                               children,
-                              className
+                              className,
+                              ...rest
                           }: TableBodyProps) => (
     <tbody
-        className={cls("bg-white text-sm dark:bg-gray-800 divide-y divide-slate-200 dark:divide-gray-700", className)}>
+        className={cls("bg-white dark:bg-gray-950 text-sm divide-y divide-slate-200 dark:divide-gray-700", className)}
+        {...rest}
+    >
     {children}
     </tbody>
 );
@@ -37,17 +44,22 @@ export const TableBody = ({
 export type TableHeaderProps = {
     children?: React.ReactNode;
     className?: string;
-};
+} & React.HTMLAttributes<HTMLTableSectionElement>;
 
 export const TableHeader = ({
                                 children,
-                                className
+                                className,
+                                ...rest
                             }: TableHeaderProps) => (
-    <thead>
-    <tr className={cls(
-        defaultBorderMixin,
-        "text-sm font-medium text-gray-700 dark:text-slate-300",
-        "bg-slate-50 border-b dark:bg-gray-900", className)}>
+    <thead {...rest}>
+    <tr
+        className={cls(
+            defaultBorderMixin,
+            "text-sm font-medium text-gray-700 dark:text-slate-300",
+            "bg-slate-50 border-b dark:bg-gray-900",
+            className
+        )}
+    >
         {children}
     </tr>
     </thead>
@@ -58,13 +70,14 @@ export type TableRowProps = {
     className?: string;
     onClick?: React.MouseEventHandler<any>;
     style?: React.CSSProperties;
-};
+} & React.HTMLAttributes<HTMLTableRowElement>;
 
 export const TableRow = ({
                              children,
                              className,
                              onClick,
-                             style
+                             style,
+                             ...rest
                          }: TableRowProps) => (
     <tr
         onClick={onClick}
@@ -73,7 +86,9 @@ export const TableRow = ({
             "divide-slate-100 dark:divide-gray-800",
             "bg-white dark:bg-gray-950",
             onClick ? "hover:bg-slate-100 dark:hover:bg-gray-800 cursor-pointer" : "",
-            className)}
+            className
+        )}
+        {...rest}
     >
         {children}
     </tr>
@@ -87,7 +102,7 @@ export type TableCellProps = {
     style?: React.CSSProperties;
     align?: "left" | "center" | "right";
     colspan?: number;
-};
+} & React.HTMLAttributes<HTMLTableCellElement>;
 
 export const TableCell = ({
                               children,
@@ -96,20 +111,24 @@ export const TableCell = ({
                               align,
                               className,
                               style,
-                              colspan
+                              colspan,
+                              ...rest
                           }: TableCellProps) => {
-
     const ref = useRef<HTMLTableCellElement>(null);
-
     const Tag = header || getParentName(ref.current) === "TableHeader" ? "th" : "td";
     return (
-        <Tag scope={scope}
-             colSpan={colspan}
-             ref={ref}
-             style={style}
-             className={cls("px-4 py-3 text-clip ",
-                 align === "center" ? "text-center" : (align === "right" ? "text-right" : "text-left"),
-                 className)}>
+        <Tag
+            scope={scope}
+            colSpan={colspan}
+            ref={ref}
+            style={style}
+            className={cls(
+                "px-4 py-3 text-clip ",
+                align === "center" ? "text-center" : (align === "right" ? "text-right" : "text-left"),
+                className
+            )}
+            {...rest}
+        >
             {children}
         </Tag>
     );
@@ -124,7 +143,6 @@ function getParentName(element: HTMLElement | null): string | undefined {
                 key.startsWith("__reactInternalInstance$")
             );
         });
-
         // @ts-ignore
         const domFiber = element[key];
         // @ts-ignore

package/src/components/Tabs.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { focusedMixin } from "../styles";
 import { cls } from "../util";
 
 export type TabsProps = {
@@ -42,7 +41,7 @@ export function Tab({
                     }: TabProps) {
     return <TabsPrimitive.Trigger value={value}
                                   disabled={disabled}
-                                  className={cls(focusedMixin,
+                                  className={cls(
                                       "border-b-2 border-transparent",
                                       "data-[state=active]:border-secondary",
                                       disabled
@@ -54,7 +53,7 @@ export function Tab({
                                       // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",
                                       className)}>
         <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-slate-100 dark:hover:bg-slate-800")}>
+            "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800")}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;