@firecms/ui 3.0.0-canary.136 → 3.0.0-canary.138

package/src/components/DebouncedTextField.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { ChangeEvent, useCallback, useDeferredValue, useEffect } from "react";
 import { TextField, TextFieldProps } from "./index";
 

package/src/components/Dialog.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useState } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { paperMixin } from "../styles";

package/src/components/DialogContent.tsx

@@ -17,7 +17,7 @@ export function DialogContent({
         </div>;
 
     return <div
-        className={cls("py-6 px-6 h-full flex-grow", className)}>
+        className={cls("my-6 mx-6 h-full flex-grow", className)}>
         {children}
     </div>;
 }

package/src/components/DialogTitle.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { Typography, TypographyProps, TypographyVariant } from "./Typography";
+import { cls } from "../util";
 
 export type DialogContentProps = TypographyProps & {
     children: React.ReactNode,
@@ -14,13 +15,13 @@ export function DialogTitle({
                                 children,
                                 hidden,
                                 className,
-                                variant = "h4",
+                                variant = "subtitle2",
                                 ...props
                             }: DialogContentProps) {
 
     const title = <DialogPrimitive.Title asChild>
         <Typography variant={variant}
-                    className={className}
+                    className={cls("mt-8 mb-6 mx-6", className)}
                     {...props}>
             {children}
         </Typography>

package/src/components/ExpandablePanel.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { PropsWithChildren, useEffect, useState } from "react";
 
 import * as Collapsible from "@radix-ui/react-collapsible";
@@ -95,6 +96,8 @@ export function ExpandablePanel({
                         "rounded-t flex items-center justify-between w-full min-h-[52px]",
                         "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
+                        open ? "py-6" : "py-4",
+                        "transition-all duration-200",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,
                         titleClassName

package/src/components/FileUpload.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import { useDropzone } from "react-dropzone";
 import { fieldBackgroundHoverMixin, fieldBackgroundMixin } from "../styles";

package/src/components/InputLabel.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { cls } from "../util";
-import { Label } from "./Label";
 import { defaultBorderMixin } from "../styles";
 
 export type InputLabelProps = {

package/src/components/Markdown.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useMemo } from "react";
 import equal from "react-fast-compare"
 

package/src/components/MultiSelect.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
 import { ChangeEvent, Children, useEffect } from "react";
@@ -81,7 +82,7 @@ export const MultiSelect = React.forwardRef<
             invisible,
             disabled,
             placeholder,
-            modalPopover = false,
+            modalPopover = true,
             includeClear = true,
             useChips = true,
             className,

package/src/components/Popover.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 

package/src/components/SearchBar.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useCallback, useState } from "react";
 
 import { defaultBorderMixin } from "../styles";

package/src/components/Select.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { ChangeEvent, forwardRef, useCallback, useEffect, useState } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import {
@@ -80,7 +81,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
         }
     }, [onChange, value, onValueChange]);
 
-    const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
+    const hasValue = Array.isArray(value) ? value.length > 0 : (value != null && value !== "" && value !== undefined);
 
     return (
         <SelectPrimitive.Root
@@ -93,8 +94,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                 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]",
@@ -103,8 +103,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 "relative flex items-center",
                 className
-            )}
-            >
+            )}>
                 <SelectPrimitive.Trigger
                     ref={inputRef}
                     id={id}
@@ -117,15 +116,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         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",
+                        "relative flex flex-row items-center",
                         inputClassName
-                    )}
+                    )}>
 
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }}
-                >
                     <div
                         ref={ref}
                         className={cls(
@@ -145,20 +139,23 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                             {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" : "")}/>
+
+                    {endAdornment && (
+                        <div
+                            className={cls("h-full flex items-center")}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}>
+                            {endAdornment}
+                        </div>
+                    )}
+                    <SelectPrimitive.Icon asChild>
+                        <ExpandMoreIcon size={"small"}
+                                        className={cls("px-2 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.preventDefault();
-                            e.stopPropagation();
-                        }}>
-                        {endAdornment}
-                    </div>
-                )}
+
             </div>
             <SelectPrimitive.Portal>
                 <SelectPrimitive.Content position={position}
@@ -192,10 +189,6 @@ export function SelectItem({
         key={value}
         value={value}
         disabled={disabled}
-        onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        }}
         className={cls(
             "w-full",
             "relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",

package/src/components/Sheet.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useState } from "react";
 import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";
@@ -72,7 +73,6 @@ export const Sheet: React.FC<SheetProps> = ({
                     style={{
                         pointerEvents: displayed ? "auto" : "none"
                     }}
-                    onClick={() => onOpenChange && onOpenChange(false)}
                 />}
                 <DialogPrimitive.Content
                     {...props}

package/src/components/TextField.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React, { useCallback, useEffect, useRef } from "react";
 
 import { TextareaAutosize } from "./TextareaAutosize";
@@ -109,7 +110,7 @@ export function TextField<T extends string | number>({
             style={inputStyle}
             className={cls(
                 invisible ? focusedInvisibleMixin :  "",
-                "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-[28px]",
+                "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
                 disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
             )}
         />
@@ -125,7 +126,7 @@ export function TextField<T extends string | number>({
                 invisible ? focusedInvisibleMixin : "",
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 size === "smallest" ? "min-h-[32px]" : (size === "small" ? "min-h-[48px]" : "min-h-[64px]"),
-                label ? (size === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2") : "py-2",
+                label ? (size === "medium" ? "pt-8 pb-2" : "pt-4 pb-2") : "py-2",
                 focused ? "text-text-primary dark:text-text-primary-dark" : "",
                 endAdornment ? "pr-10" : "pr-3",
                 disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-slate-800 dark:text-white",

package/src/components/TextareaAutosize.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useLayoutEffect } from "react";
 import * as ReactDOM from "react-dom";

package/src/components/Tooltip.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 

package/src/hooks/index.ts

@@ -1,4 +1,3 @@
-export * from "./useLocaleConfig";
 export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";
 export * from "./useDebounceValue";

package/src/index.css

@@ -71,7 +71,3 @@
 a {
     @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
 }
-
-body {
-    @apply w-full min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center;
-}

package/dist/hooks/useLocaleConfig.d.ts

@@ -1 +0,0 @@
-export declare function useLocaleConfig(locale?: string): void;

package/src/components/_MultiSelect.tsx

@@ -1,222 +0,0 @@
-// import * as React from "react";
-// import { useEffect } from "react";
-// import * as Dialog from "@radix-ui/react-dialog";
-//
-// import { Command as CommandPrimitive } from "cmdk";
-//
-// import { ExpandMoreIcon } from "../icons";
-// import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedDisabled } from "../styles";
-// import { cls } from "../util";
-// import { SelectInputLabel } from "./common/SelectInputLabel";
-// import { useOutsideAlerter } from "../hooks";
-//
-// export type MultiSelectProps = {
-//     open?: boolean,
-//     name?: string,
-//     id?: string,
-//     onOpenChange?: (open: boolean) => void,
-//     value?: string[],
-//     containerClassName?: string,
-//     className?: string,
-//     inputClassName?: string,
-//     onMultiValueChange?: (updatedValue: string[]) => void,
-//     placeholder?: React.ReactNode,
-//     renderValue?: (values: string, index:number) => React.ReactNode,
-//     renderValues?: (values: string[]) => React.ReactNode,
-//     size?: "small" | "medium",
-//     label?: React.ReactNode,
-//     disabled?: boolean,
-//     error?: boolean,
-//     position?: "item-aligned" | "popper",
-//     inputRef?: React.RefObject<HTMLButtonElement>,
-//     children?: React.ReactNode,
-// };
-//
-// interface MultiSelectContextProps {
-//     fieldValue?: string[];
-//     setInputValue: (v: string) => void;
-//     onValueChangeInternal: (v: string) => void;
-// }
-//
-// export const MultiSelectContext = React.createContext<MultiSelectContextProps>({} as any);
-//
-// export function MultiSelect({
-//                                 value,
-//                                 open,
-//                                 onMultiValueChange,
-//                                 size = "medium",
-//                                 label,
-//                                 disabled,
-//                                 renderValue,
-//                                 renderValues,
-//                                 containerClassName,
-//                                 className,
-//                                 children,
-//                                 error
-//                             }: MultiSelectProps) {
-//
-//     const containerRef = React.useRef<HTMLInputElement>(null);
-//     const inputRef = React.useRef<HTMLInputElement>(null);
-//     const listRef = React.useRef<HTMLDivElement>(null);
-//     useOutsideAlerter(listRef, () => setOpenInternal(false));
-//
-//     const [openInternal, setOpenInternal] = React.useState(false);
-//     useEffect(() => {
-//         setOpenInternal(open ?? false);
-//     }, [open]);
-//
-//     const onValueChangeInternal = React.useCallback((newValue: string) => {
-//         if (Array.isArray(value) && value.includes(newValue)) {
-//             onMultiValueChange?.(value.filter(v => v !== newValue));
-//         } else {
-//             onMultiValueChange?.([...(value ?? []), newValue]);
-//         }
-//     }, [value, onMultiValueChange]);
-//
-//     const [inputValue, setInputValue] = React.useState("");
-//     const [boundingRect, setBoundingRect] = React.useState<DOMRect | null>(null);
-//
-//     const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
-//         const input = inputRef.current
-//         if (input) {
-//             if (e.key === "Delete" || e.key === "Backspace") {
-//                 if (input.value === "") {
-//                     const newSelected = [...(value ?? [])];
-//                     newSelected.pop();
-//                     onMultiValueChange?.(newSelected);
-//                 }
-//             }
-//             // This is not a default behaviour of the <input /> field
-//             if (e.key === "Escape") {
-//                 input.blur();
-//                 setOpenInternal(false);
-//                 e.stopPropagation();
-//             }
-//         }
-//     }, [onMultiValueChange, value]);
-//
-//     const openDialog = React.useCallback(() => {
-//         setBoundingRect(containerRef.current?.getBoundingClientRect() ?? null);
-//         setOpenInternal(true);
-//     }, []);
-//
-//     const usedBoundingRect = boundingRect ?? containerRef.current?.getBoundingClientRect();
-//     const maxHeight = window.innerHeight - (usedBoundingRect?.top ?? 0) - (usedBoundingRect?.height ?? 0) - 16;
-//
-//     return (<>
-//
-//             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
-//
-//             <CommandPrimitive onKeyDown={handleKeyDown}
-//                               onClick={() => {
-//                                   inputRef.current?.focus();
-//                                   openDialog()
-//                               }}
-//                               className={cls("relative overflow-visible bg-transparent", containerClassName)}>
-//                 <div
-//                     ref={containerRef}
-//                     className={cls(
-//                         "flex flex-row",
-//                         size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-//                         "select-none rounded-md text-sm",
-//                         fieldBackgroundMixin,
-//                         disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-//                         "relative flex items-center",
-//                         "p-4",
-//                         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" : "",
-//                         className)}
-//                 >
-//                     <div className={cls("flex-grow flex gap-1.5 flex-wrap items-center")}>
-//                         {renderValue && (value ?? []).map((v, i) => renderValue(v, i))}
-//                         {renderValues && renderValues(value ?? [])}
-//                         <CommandPrimitive.Input
-//                             ref={inputRef}
-//                             value={inputValue}
-//                             onValueChange={setInputValue}
-//                             // onBlur={() => setOpenInternal(false)}
-//                             onFocus={openDialog}
-//                             className={cls("ml-2 bg-transparent outline-none flex-1 h-full w-full ", focusedDisabled)}
-//                         />
-//                     </div>
-//                     <div className={"px-2 h-full flex items-center"}>
-//                         <ExpandMoreIcon size={"small"}
-//                                         className={cls("transition ", openInternal ? "rotate-180" : "")}/>
-//                     </div>
-//
-//                 </div>
-//
-//                 <Dialog.Root open={openInternal}
-//                              modal={true}
-//                              onOpenChange={setOpenInternal}>
-//                     <Dialog.Portal>
-//                         <MultiSelectContext.Provider
-//                             value={{
-//                                 fieldValue: value,
-//                                 setInputValue,
-//                                 onValueChangeInternal
-//                             }}>
-//                             <div
-//                                 ref={listRef}
-//                                 className={"z-50 absolute overflow-auto outline-none"}
-//                                 style={{
-//                                     pointerEvents: openInternal ? "auto" : "none",
-//                                     top: (usedBoundingRect?.top ?? 0) + (usedBoundingRect?.height ?? 0),
-//                                     left: usedBoundingRect?.left,
-//                                     width: usedBoundingRect?.width,
-//                                     maxHeight: maxHeight,
-//
-//                                 }}>
-//
-//                                 <CommandPrimitive.Group
-//                                     className="mt-2 text-slate-900 dark:text-white animate-in z-50 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg flex flex-col outline-none w-full"
-//                                 >
-//
-//                                     {children}
-//                                 </CommandPrimitive.Group>
-//
-//                             </div>
-//                         </MultiSelectContext.Provider>
-//                     </Dialog.Portal>
-//                 </Dialog.Root>
-//             </CommandPrimitive>
-//
-//         </>
-//     )
-// }
-//
-// export interface MultiSelectItemProps {
-//     value: string;
-//     children?: React.ReactNode,
-//     className?: string;
-// }
-//
-// export function MultiSelectItem({ children, value, className }: MultiSelectItemProps) {
-//
-//     const context = React.useContext(MultiSelectContext);
-//     if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
-//     const { fieldValue, setInputValue, onValueChangeInternal } = context;
-//
-//     return <CommandPrimitive.Item
-//         onMouseDown={(e) => {
-//             e.preventDefault();
-//             e.stopPropagation();
-//         }}
-//         onSelect={(_) => {
-//             setInputValue("");
-//             onValueChangeInternal(value);
-//         }}
-//         className={cls(
-//             (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
-//             "cursor-pointer",
-//             "m-1",
-//             "ring-offset-transparent",
-//             "p-2 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-//             "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-//             "cursor-pointer p-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-//             className
-//         )}
-//     >
-//         {children}
-//     </CommandPrimitive.Item>;
-// }

package/src/hooks/useLocaleConfig.tsx

@@ -1,18 +0,0 @@
-import * as locales from "date-fns/locale";
-// @ts-ignore
-import { registerLocale, setDefaultLocale } from "react-datepicker";
-import { useEffect } from "react";
-
-export function useLocaleConfig(locale?: string) {
-    useEffect(() => {
-        if (!locale) {
-            return;
-        }
-        // @ts-ignore
-        const dateFnsLocale = locales[locale];
-        if (dateFnsLocale) {
-            registerLocale(locale, dateFnsLocale);
-            setDefaultLocale(locale);
-        }
-    }, [locale])
-}