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

package/src/components/Dialog.tsx

@@ -15,6 +15,9 @@ export type DialogProps = {
     maxWidth?: keyof typeof widthClasses;
     modal?: boolean;
     onOpenAutoFocus?: (e: Event) => void;
+    onEscapeKeyDown?: (e: KeyboardEvent) => void;
+    onPointerDownOutside?: (e: Event) => void;
+    onInteractOutside?: (e: Event) => void;
 };
 
 const widthClasses = {
@@ -43,7 +46,10 @@ export const Dialog = ({
                            scrollable = true,
                            maxWidth = "lg",
                            modal = true,
-                           onOpenAutoFocus
+                           onOpenAutoFocus,
+                           onEscapeKeyDown,
+                           onPointerDownOutside,
+                           onInteractOutside
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
 
@@ -51,7 +57,7 @@ export const Dialog = ({
         if (!open) {
             const timeout = setTimeout(() => {
                 setDisplayed(false);
-            }, 250);
+            }, 150);
             return () => clearTimeout(timeout);
         } else {
             setDisplayed(true);
@@ -79,7 +85,10 @@ export const Dialog = ({
                     />
 
                     <DialogPrimitive.Content
+                        onEscapeKeyDown={onEscapeKeyDown}
                         onOpenAutoFocus={onOpenAutoFocus}
+                        onPointerDownOutside={onPointerDownOutside}
+                        onInteractOutside={onInteractOutside}
                         className={cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
                     >
                         <div

package/src/components/ExpandablePanel.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useEffect, useState } from "react";
 
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { defaultBorderMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
+import { defaultBorderMixin, fieldBackgroundMixin } from "../styles";
 import { ExpandMoreIcon } from "../icons";
 import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
@@ -88,9 +88,9 @@ export function ExpandablePanel({
                 }}>
 
                 <Collapsible.Trigger
-                    className={cls(focusedMixin,
+                    className={cls(
                         "rounded flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-10",
+                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,

package/src/components/FileUpload.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useDropzone } from "react-dropzone";
-import { fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
+import { fieldBackgroundHoverMixin, fieldBackgroundMixin } from "../styles";
 import { cls } from "../util";
 import { Typography } from "./Typography";
 
@@ -65,7 +65,6 @@ export function FileUpload({
         {...getRootProps()}
         className={cls(
             fieldBackgroundMixin,
-            focusedMixin,
             "flex gap-2",
             "p-4 box-border relative items-center border-2 border-solid border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
             {

package/src/components/IconButton.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { focusedMixin } from "../styles";
 import { cls } from "../util";
 
 export type IconButtonProps<C extends React.ElementType> =
@@ -15,7 +14,7 @@ export type IconButtonProps<C extends React.ElementType> =
 }
 
 const buttonClasses =
-    "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50";
+    "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800";
 const baseClasses =
     "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses = "text-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-gray-300";
@@ -50,7 +49,6 @@ const IconButtonInner = <C extends React.ElementType = "button">({
             ref={ref}
             {...props}
             className={cls(
-                focusedMixin,
                 disabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
                 toggled ? "outline outline-2 outline-primary" : "",
                 colorClasses,

package/src/components/InputLabel.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { cls } from "../util";
 import { Label } from "./Label";
+import { defaultBorderMixin } from "../styles";
 
 export type InputLabelProps = {
     children?: React.ReactNode;
@@ -28,10 +29,11 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
         }, className);
 
     return (
-        <Label
+        <label
+            className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                defaultBorderMixin, computedClassName)}
             data-shrink={shrink}
             ref={ref}
-            className={computedClassName}
             {...other}
         />
     );

package/src/components/Menu.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { focusedMixin, paperMixin } from "../styles";
+import { focusedDisabled, paperMixin } from "../styles";
 import { cls } from "../util";
 
 export type MenuProps = {
@@ -12,32 +12,45 @@ export type MenuProps = {
     onOpenChange?(open: boolean): void;
 
     portalContainer?: HTMLElement | null;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
 }
 
-export function Menu({
-                         children,
-                         trigger,
-                         open,
-                         defaultOpen,
-                         onOpenChange,
-                         portalContainer
-                     }: MenuProps) {
-    return (
-        <DropdownMenu.Root
-            open={open}
-            defaultOpen={defaultOpen}
-            onOpenChange={onOpenChange}>
-            <DropdownMenu.Trigger asChild>
-                {trigger}
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Portal container={portalContainer}>
-                <DropdownMenu.Content className={cls(paperMixin, "shadow py-2 z-30")}>
-                    {children}
-                </DropdownMenu.Content>
-            </DropdownMenu.Portal>
-        </DropdownMenu.Root>
-    );
-}
+const Menu = React.forwardRef<
+    React.ElementRef<typeof DropdownMenu.Trigger>,
+    MenuProps
+>(({
+       children,
+       trigger,
+       open,
+       defaultOpen,
+       side,
+       align,
+       onOpenChange,
+       portalContainer
+   }, ref) => (
+    <DropdownMenu.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}>
+        <DropdownMenu.Trigger
+            ref={ref}
+            asChild>
+            {trigger}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal container={portalContainer}>
+            <DropdownMenu.Content
+                side={side}
+                align={align}
+                className={cls(paperMixin, focusedDisabled, "shadow py-2 z-30")}>
+                {children}
+            </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+))
+Menu.displayName = "Menu"
+
+export { Menu }
 
 export type MenuItemProps = {
     children: React.ReactNode;
@@ -52,7 +65,6 @@ export function MenuItem({
                          }: MenuItemProps) {
     // Dynamically adjusting the class based on the "dense" prop
     const classNames = cls(
-        focusedMixin,
         onClick && "cursor-pointer",
         "rounded-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center gap-4",
         dense ? "px-3 py-1.5" : "px-4 py-2"

package/src/components/Menubar.tsx

@@ -1,13 +1,21 @@
+import * as React from "react";
+
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { cls } from "../util";
 import { CheckIcon, ChevronRightIcon } from "../icons";
 
 export function Menubar({
                             children,
+                            onSelect,
                             className
-                        }: { children: React.ReactNode, className?: string }) {
+                        }: {
+    children: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
+    className?: string
+}) {
     return (
         <MenubarPrimitive.Root
+            onSelect={onSelect}
             className={cls("z-10 flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
             {children}
         </MenubarPrimitive.Root>
@@ -26,10 +34,16 @@ export function MenubarMenu({
 
 export function MenubarTrigger({
                                    children,
+                                   onSelect,
                                    className
-                               }: { children: React.ReactNode, className?: string }) {
+                               }: {
+    children: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
+    className?: string
+}) {
     return (
         <MenubarPrimitive.Trigger
+            onSelect={onSelect}
             className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50",
                 className)}>
             {children}
@@ -53,16 +67,19 @@ export function MenubarContent({
                                    align,
                                    sideOffset,
                                    alignOffset,
+                                   onSelect,
                                    ...rest
                                }: {
     children: React.ReactNode,
     className?: string,
+    onSelect?: (event: React.SyntheticEvent) => void,
     align?: "start" | "center" | "end",
     sideOffset?: number,
     alignOffset?: number
 }) {
     return (
         <MenubarPrimitive.Content
+            onSelect={onSelect}
             className={cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className)}
             align={align ?? "start"}
             sideOffset={sideOffset ?? 5}
@@ -79,16 +96,19 @@ export function MenubarItem({
                                 leftPadding,
                                 className,
                                 disabled,
+                                onSelect,
                                 ...rest
                             }: {
     children: React.ReactNode,
+    onSelect?: (event: Event) => void;
     leftPadding?: boolean,
     className?: string,
     disabled?: boolean
 }) {
     return (
         <MenubarPrimitive.Item
-            className={cls("group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark data-[disabled]:pointer-events-none",
+            onSelect={onSelect}
+            className={cls("group text-[13px] leading-none rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 leftPadding ? "pl-5" : "",
                 disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark",
                 className)}
@@ -136,14 +156,17 @@ export function MenubarSub({
 export function MenubarSubTrigger({
                                       children,
                                       className,
+                                      onSelect,
                                       ...rest
                                   }: {
     children?: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
     className?: string,
 }) {
     return (
         <MenubarPrimitive.SubTrigger
-            className={cls("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark data-[disabled]:pointer-events-none",
+            onSelect={onSelect}
+            className={cls("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-slate-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             {...rest}
         >
@@ -156,14 +179,17 @@ export function MenubarSubContent({
                                       children,
                                       alignOffset,
                                       className,
+                                      onSelect,
                                       ...rest
                                   }: {
     children?: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
     alignOffset?: number,
     className?: string,
 }) {
     return (
         <MenubarPrimitive.SubContent
+            onSelect={onSelect}
             alignOffset={alignOffset ?? -5}
             className={cls("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]",
                 className)}
@@ -179,16 +205,19 @@ export function MenubarCheckboxItem({
                                         checked,
                                         onCheckedChange,
                                         className,
+                                        onSelect,
                                         ...rest
                                     }: {
     children?: React.ReactNode,
+    onSelect?: (event: Event) => void;
     checked?: boolean,
     onCheckedChange?: () => void,
     className?: string,
 }) {
     return (
         <MenubarPrimitive.CheckboxItem
-            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark data-[disabled]:pointer-events-none",
+            onSelect={onSelect}
+            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             checked={checked}
             onCheckedChange={onCheckedChange}
@@ -221,9 +250,11 @@ export function MenubarRadioGroup({
                                       className,
                                       value,
                                       onValueChange,
+                                      onSelect,
                                       ...rest
                                   }: {
     children?: React.ReactNode,
+    onSelect?: (event: React.SyntheticEvent) => void,
     value?: string,
     onValueChange?: (value: string) => void,
     className?: string,
@@ -233,6 +264,7 @@ export function MenubarRadioGroup({
             className={cls(className)}
             value={value}
             onValueChange={onValueChange}
+            onSelect={onSelect}
             {...rest}>
             {children ?? <CheckIcon size={"small"}/>}
         </MenubarPrimitive.RadioGroup>
@@ -243,15 +275,18 @@ export function MenubarRadioItem({
                                      children,
                                      className,
                                      value,
+                                     onSelect,
                                      ...rest
                                  }: {
     children?: React.ReactNode,
+    onSelect?: (event: Event) => void;
     value: string,
     className?: string,
 }) {
     return (
         <MenubarPrimitive.RadioItem
-            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark data-[disabled]:pointer-events-none",
+            onSelect={onSelect}
+            className={cls("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-slate-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none",
                 className)}
             value={value}
             {...rest}>
@@ -270,7 +305,7 @@ export function MenubarShortcut({
 }) {
     return (
         <div
-            className={cls("ml-auto pl-5 group-data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark",
+            className={cls("ml-auto pl-5 group-data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark",
                 className)}
             {...rest}>
             {children}