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

package/src/components/TextField.tsx

@@ -7,10 +7,9 @@ import {
     fieldBackgroundInvisibleMixin,
     fieldBackgroundMixin,
     focusedInvisibleMixin,
-    focusedMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type InputType =
     "text"
@@ -40,7 +39,7 @@ export type TextFieldProps<T extends string | number> = {
     endAdornment?: React.ReactNode,
     autoFocus?: boolean,
     placeholder?: string,
-    size?: "small" | "medium",
+    size?: "smallest" | "small" | "medium",
     className?: string,
     style?: React.CSSProperties,
     inputClassName?: string,
@@ -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={cn(
-                invisible ? focusedInvisibleMixin : focusedMixin,
+            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]",
                 disabled && "border border-transparent outline-none opacity-50 text-slate-600 dark:text-slate-500"
             )}
@@ -123,12 +119,12 @@ export function TextField<T extends string | number>({
             onWheel={type === "number" ? numberInputOnWheelPreventChange : undefined}
             disabled={disabled}
             style={inputStyle}
-            className={cn(
+            className={cls(
                 "w-full outline-none bg-transparent leading-normal px-3",
                 "rounded-md",
-                invisible ? focusedInvisibleMixin : focusedMixin,
+                invisible ? focusedInvisibleMixin : "",
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                size === "small" ? "min-h-[48px]" : "min-h-[64px]",
+                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",
                 focused ? "text-text-primary dark:text-text-primary-dark" : "",
                 endAdornment ? "pr-10" : "pr-3",
@@ -146,12 +142,13 @@ export function TextField<T extends string | number>({
 
     return (
         <div
-            className={cn(
+            className={cls(
                 "rounded-md relative max-w-full",
                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 error ? "border border-red-500 dark:border-red-600" : "",
                 {
+                    "min-h-[32px]": !invisible && size === "smallest",
                     "min-h-[48px]": !invisible && size === "small",
                     "min-h-[64px]": !invisible && size === "medium"
                 },
@@ -160,7 +157,7 @@ export function TextField<T extends string | number>({
 
             {label && (
                 <InputLabel
-                    className={cn(
+                    className={cls(
                         "pointer-events-none absolute",
                         size === "medium" ? "top-1" : "-top-1",
                         !error ? (focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",

package/src/components/TextareaAutosize.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useLayoutEffect } from "react";
 import * as ReactDOM from "react-dom";
-import { cn, debounce } from "../util";
+import { cls, debounce } from "../util";
 
 type State = {
     outerHeightStyle: number;
@@ -276,7 +276,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
             />
             <textarea
                 aria-hidden
-                className={cn(props.className, props.shadowClassName)}
+                className={cls(props.className, props.shadowClassName)}
                 readOnly
                 ref={shadowRef}
                 tabIndex={-1}
@@ -288,7 +288,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
             />
         </React.Fragment>
     );
-});
+}) as React.FC<TextareaAutosizeProps & { ref?: React.ForwardedRef<Element> }>;
 
 export type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
 

package/src/components/Tooltip.tsx

@@ -1,34 +1,41 @@
 import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn, useInjectStyles } from "../util";
+import { cls } from "../util";
+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,
     style?: React.CSSProperties;
 };
 
 export const Tooltip = ({
                             open,
+                            defaultOpen,
                             side = "bottom",
-                            delayDuration = 250,
+                            delayDuration = 200,
                             sideOffset,
                             align,
                             onOpenChange,
                             title,
-                            className,
-                            style,
                             tooltipClassName,
-                            children
+                            tooltipStyle,
+                            children,
+                            asChild = false,
+                            className,
+                            style
                         }: TooltipProps) => {
 
     useInjectStyles("Tooltip", styles);
@@ -36,20 +43,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.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
+                {trigger}
                 <TooltipPrimitive.Portal>
                     <TooltipPrimitive.Content
-                        className={cn("TooltipContent",
+                        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,6 +1,5 @@
 import React, { ReactEventHandler } from "react";
-import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type TextProps<C extends React.ElementType> = {
     align?: "center" | "inherit" | "justify" | "left" | "right";
@@ -43,21 +42,38 @@ const colorToClasses = {
     error: "text-red-600 dark:text-red-500"
 };
 
+const gutterBottomClasses = {
+    h1: "mb-5",
+    h2: "mb-4",
+    h3: "mb-4",
+    h4: "mb-4",
+    h5: "mb-3",
+    h6: "mb-3",
+    subtitle1: "mb-3",
+    subtitle2: "mb-3",
+    body1: "mb-3",
+    body2: "mb-3",
+    inherit: "mb-3",
+    caption: "mb-2",
+    button: "mb-2",
+    label: "mb-2"
+};
+
 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>(
@@ -82,12 +98,11 @@ export function Typography<C extends React.ElementType>(
         (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) ||
         "span";
 
-    const classes = cn(
-        focusedMixin,
+    const classes = cls(
         variantToClasses[variant],
         color ? colorToClasses[color] : "",
         align !== "inherit" && `text-${align}`,
-        gutterBottom && "mb-[0.35em]",
+        gutterBottom && gutterBottomClasses[variant],
         noWrap && "truncate",
         paragraph && "mb-3",
         className

package/src/components/common/SelectInputLabel.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { cn } from "../../util";
+import { cls } from "../../util";
 
 export function SelectInputLabel({ children, error }: { children: React.ReactNode, error?: boolean }) {
-    return <div className={cn("text-sm  font-medium ml-3.5 mb-1",
+    return <div className={cls("text-sm  font-medium ml-3.5 mb-1",
         error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300",)}>
         {children}
     </div>;

package/src/components/index.tsx

@@ -24,14 +24,15 @@ export * from "./Label";
 export * from "./LoadingButton";
 export * from "./Markdown";
 export * from "./Menu";
+export * from "./Menubar";
 export * from "./MultiSelect";
+export * from "./NewMultiSelect";
 export * from "./Paper";
 export * from "./RadioGroup";
 export * from "./SearchBar";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Sheet";
-export * from "./Spinner";
 export * from "./TextareaAutosize";
 export * from "./TextField";
 export * from "./Tooltip";

package/src/hooks/index.ts

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

package/src/hooks/useLocaleConfig.tsx

@@ -0,0 +1,18 @@
+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])
+}

package/src/icons/Icon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import "@material-design-icons/font/filled.css";
-import { cn } from "../util";
+import { cls } from "../util";
+import 'material-icons/iconfont/filled.css';
 
 export type IconColor = "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning";
 export type IconProps = {
@@ -8,7 +8,7 @@ export type IconProps = {
     color?: IconColor,
     className?: string,
     onClick?: (e: React.SyntheticEvent) => void,
-    style?: React.CSSProperties
+    style?: React.CSSProperties,
 }
 
 const colorClassesMapping: Record<IconColor, string> = {
@@ -17,47 +17,50 @@ 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"
 }
 
-export function Icon({
-                         iconKey,
-                         size = "medium",
-                         color,
-                         className,
-                         onClick,
-                         style
-                     }: IconProps & { iconKey: string }) {
-    let sizeInPx: number;
-    switch (size) {
-        case "smallest":
-            sizeInPx = 16;
-            break;
-        case "small":
-            sizeInPx = 20;
-            break;
-        case "medium":
-            sizeInPx = 24;
-            break;
-        case "large":
-            sizeInPx = 28;
-            break
-        default:
-            sizeInPx = size;
-    }
-    if (!sizeInPx) sizeInPx = 24;
+export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: string }>(
+    ({
+         iconKey,
+         size = "medium",
+         color,
+         className,
+         onClick,
+         style
+     }, ref) => {
+        let sizeInPx: number;
+        switch (size) {
+            case "smallest":
+                sizeInPx = 16;
+                break;
+            case "small":
+                sizeInPx = 20;
+                break;
+            case "medium":
+                sizeInPx = 24;
+                break;
+            case "large":
+                sizeInPx = 28;
+                break
+            default:
+                sizeInPx = typeof size === "number" ? size : 24;
+        }
 
-    return <span
-        style={{
-            fontSize: `${sizeInPx}px`,
-            display: "block",
-            ...style
-        }}
-        className={
-            cn("material-icons",
-                color ? colorClassesMapping[color] : "",
-                "select-none",
-                className)}
-        onClick={onClick}>{iconKey}</span>
-}
+        return <span
+            ref={ref} // Attach the ref to the span
+            style={{
+                fontSize: `${sizeInPx}px`,
+                display: "block",
+                ...style
+            }}
+            className={
+                cls("material-icons",
+                    color ? colorClassesMapping[color] : "",
+                    "select-none",
+                    className)}
+            onClick={onClick}>{iconKey}</span>
+    });
+
+Icon.displayName = "Icon";