@firecms/ui 3.0.0-canary.12 → 3.0.0-canary.120

package/src/components/Select.tsx

@@ -1,15 +1,14 @@
-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
+    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 +19,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 +39,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 +90,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 +109,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 +134,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={cls("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,
@@ -214,13 +203,12 @@ 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",
+            "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",
@@ -248,7 +236,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)
     }/>;

package/src/components/Table.tsx

@@ -1,21 +1,24 @@
 import React, { useRef } from "react";
 import { defaultBorderMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 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={cn("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={cn("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={cn(
-        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,22 +70,25 @@ 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}
         style={style}
-        className={cn(
+        className={cls(
             "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={cn("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,7 +1,6 @@
 import React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type TabsProps = {
     value: string,
@@ -18,7 +17,7 @@ export function Tabs({
                      }: TabsProps) {
 
     return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
-        <TabsPrimitive.List className={cn(
+        <TabsPrimitive.List className={cls(
             "flex text-sm font-medium text-center text-slate-800 dark:text-white max-w-full overflow-auto no-scrollbar",
             className)
         }>
@@ -42,19 +41,19 @@ export function Tab({
                     }: TabProps) {
     return <TabsPrimitive.Trigger value={value}
                                   disabled={disabled}
-                                  className={cn(focusedMixin,
+                                  className={cls(
                                       "border-b-2 border-transparent",
                                       "data-[state=active]:border-secondary",
                                       disabled
                                           ? "text-slate-400 dark:text-slate-500"
-                                          : cn("text-slate-700 dark:text-slate-300",
+                                          : cls("text-slate-700 dark:text-slate-300",
                                               "data-[state=active]:text-slate-900 data-[state=active]:dark:text-white",
                                               "hover:text-slate-800 dark:hover:text-slate-200"),
                                       // disabled ? "text-slate-400 dark:text-slate-500" : "data-[state=active]:text-primary",
                                       // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",
                                       className)}>
-        <div className={cn("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-slate-100 dark:hover:bg-slate-800")}>
+        <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
+            "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800")}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;