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

package/src/components/TextField.tsx

@@ -7,7 +7,6 @@ import {
     fieldBackgroundInvisibleMixin,
     fieldBackgroundMixin,
     focusedInvisibleMixin,
-    focusedMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
 import { cls } from "../util";
@@ -70,7 +69,6 @@ export function TextField<T extends string | number>({
                                                          ...inputProps
                                                      }: TextFieldProps<T>) {
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const inputRef = inputRefProp ?? useRef(null);
 
     // @ts-ignore
@@ -106,13 +104,11 @@ export function TextField<T extends string | number>({
             placeholder={focused || hasValue || !label ? placeholder : undefined}
             autoFocus={autoFocus}
             rows={rows}
-            // onFocus={() => setFocused(true)}
-            // onBlur={() => setFocused(false)}
             value={value ?? ""}
             onChange={onChange}
             style={inputStyle}
             className={cls(
-                invisible ? focusedInvisibleMixin : focusedMixin,
+                invisible ? focusedInvisibleMixin :  "",
                 "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-[28px]",
                 disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
             )}
@@ -126,7 +122,7 @@ export function TextField<T extends string | number>({
             className={cls(
                 "w-full outline-none bg-transparent leading-normal px-3",
                 "rounded-md",
-                invisible ? focusedInvisibleMixin : focusedMixin,
+                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",

package/src/components/Tooltip.tsx

@@ -6,30 +6,38 @@ import { useInjectStyles } from "../hooks";
 
 export type TooltipProps = {
     open?: boolean,
+    defaultOpen?: boolean,
     onOpenChange?: (open: boolean) => void,
     side?: "top" | "bottom" | "left" | "right",
     align?: "start" | "center" | "end",
     sideOffset?: number,
     title?: string | React.ReactNode,
     delayDuration?: number;
-    className?: string,
+    asChild?: boolean;
     tooltipClassName?: string,
+    tooltipStyle?: React.CSSProperties;
     children: React.ReactNode,
+    className?: string,
+    container?: HTMLElement,
     style?: React.CSSProperties;
 };
 
 export const Tooltip = ({
                             open,
+                            defaultOpen,
                             side = "bottom",
                             delayDuration = 200,
                             sideOffset,
                             align,
                             onOpenChange,
                             title,
-                            className,
-                            style,
                             tooltipClassName,
-                            children
+                            tooltipStyle,
+                            children,
+                            asChild = false,
+                            container,
+                            className,
+                            style
                         }: TooltipProps) => {
 
     useInjectStyles("Tooltip", styles);
@@ -37,20 +45,27 @@ export const Tooltip = ({
     if (!title)
         return <>{children}</>;
 
+    const trigger = asChild
+        ? <TooltipPrimitive.Trigger asChild={true}>
+            {children}
+        </TooltipPrimitive.Trigger>
+        : <TooltipPrimitive.Trigger asChild={true}>
+            <div style={style} className={className}>
+                {children}
+            </div>
+        </TooltipPrimitive.Trigger>;
+
     return (
         <TooltipPrimitive.Provider delayDuration={delayDuration}>
-            <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
-                <TooltipPrimitive.Trigger asChild>
-                    <div className={className} style={style}>
-                        {children}
-                    </div>
-                </TooltipPrimitive.Trigger>
-                <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
+                {trigger}
+                <TooltipPrimitive.Portal container={container}>
                     <TooltipPrimitive.Content
                         className={cls("TooltipContent",
                             "max-w-lg leading-relaxed",
                             "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
                             tooltipClassName)}
+                        style={tooltipStyle}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}
                         align={align}
                         side={side}>

package/src/components/Typography.tsx

@@ -1,5 +1,4 @@
 import React, { ReactEventHandler } from "react";
-import { focusedMixin } from "../styles";
 import { cls } from "../util";
 
 export type TextProps<C extends React.ElementType> = {
@@ -61,20 +60,20 @@ const gutterBottomClasses = {
 };
 
 const variantToClasses = {
-    h1: "text-6xl font-headers font-light",
-    h2: "text-5xl font-headers font-light",
-    h3: "text-4xl font-headers font-normal",
-    h4: "text-3xl font-headers font-normal",
-    h5: "text-2xl font-headers font-normal",
-    h6: "text-xl font-headers font-medium",
-    subtitle1: "text-lg font-headers font-medium",
-    subtitle2: "text-base font-headers font-medium",
-    body1: "text-base",
-    body2: "text-sm",
-    label: "text-sm font-medium text-slate-500",
-    inherit: "text-inherit",
-    caption: "text-xs",
-    button: "text-sm font-medium"
+    h1: "typography-h1",
+    h2: "typography-h2",
+    h3: "typography-h3",
+    h4: "typography-h4",
+    h5: "typography-h5",
+    h6: "typography-h6",
+    subtitle1: "typography-subtitle1",
+    subtitle2: "typography-subtitle2",
+    body1: "typography-body1",
+    body2: "typography-body2",
+    label: "typography-label",
+    inherit: "typography-inherit",
+    caption: "typography-caption",
+    button: "typography-button"
 };
 
 export function Typography<C extends React.ElementType>(
@@ -100,7 +99,6 @@ export function Typography<C extends React.ElementType>(
         "span";
 
     const classes = cls(
-        focusedMixin,
         variantToClasses[variant],
         color ? colorToClasses[color] : "",
         align !== "inherit" && `text-${align}`,

package/src/components/_MultiSelect.tsx

@@ -0,0 +1,222 @@
+// 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/icons/Icon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import "@material-design-icons/font/filled.css";
 import { cls } from "../util";
+import 'material-icons/iconfont/filled.css';
 
 export type IconColor = "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning";
 export type IconProps = {
@@ -17,7 +17,7 @@ const colorClassesMapping: Record<IconColor, string> = {
     success: "text-green-500",
     warning: "text-yellow-500",
     secondary: "text-secondary",
-    disabled: "text-disabled dark:text-disabled-dark",
+    disabled: "text-text-disabled dark:text-text-disabled-dark",
     error: "text-red-500"
 }