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

package/src/components/DateTimeField.tsx

@@ -1,24 +1,18 @@
 import React, { useRef } from "react";
-// @ts-ignore
 import DatePicker from "react-datepicker";
 
 import { CalendarMonthIcon, ClearIcon, ErrorIcon } from "../icons";
 import { IconButton } from "./IconButton";
-import {
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundMixin,
-    focusedMixin,
-    paperMixin
-} from "../styles";
+import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, paperMixin } from "../styles";
 import { InputLabel } from "./InputLabel";
 import { Typography } from "./Typography";
 import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
 
 interface DateTimeFieldProps {
-    value?: Date;
-    onChange: (date: Date | undefined) => void;
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+
     mode?: "date" | "date_time";
     disabled?: boolean;
     clearable?: boolean;
@@ -29,7 +23,6 @@ interface DateTimeFieldProps {
     style?: React.CSSProperties;
     inputClassName?: string;
     invisible?: boolean;
-    preventOpenOnFocus?: boolean;
     locale?: string;
 }
 
@@ -45,7 +38,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                                                                 className,
                                                                 style,
                                                                 inputClassName,
-                                                                preventOpenOnFocus,
                                                                 invisible,
                                                                 locale
                                                             }) => {
@@ -61,7 +53,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
     const handleClear = (e: React.MouseEvent) => {
         e.preventDefault();
-        onChange(undefined);
+        onChange?.(null);
     }
 
     return (
@@ -97,7 +89,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     onChange={onChange}
                     disabled={false}
                     popperClassName={cls(paperMixin, "my-4 shadow")}
-                    onClick={(e: any) => e.stopPropagation()}
                     onFocus={() => setFocused(true)}
                     onBlur={() => setFocused(false)}
                     showTimeSelect={mode === "date_time"}
@@ -110,7 +101,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                         "w-full outline-none bg-transparent leading-normal text-base px-3",
                         clearable ? "pr-14" : "pr-12",
                         "rounded-md",
-                        !invisible && focusedMixin,
                         size === "small" ? "min-h-[48px]" : "min-h-[64px]",
                         label ? "pt-[28px] pb-2" : "py-2",
                         inputClassName,
@@ -118,7 +108,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     )}
                 />
 
-
                 <IconButton
                     onClick={() => {
                         // @ts-ignore
@@ -528,7 +517,7 @@ const datePickerCss = `
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
   border-radius: 100%;
-  background-color: #5193f6;
+  background-color: #186ef0;
   color: #fff;
 }
 .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
@@ -541,22 +530,22 @@ const datePickerCss = `
 .react-datepicker__year-text--selected:hover,
 .react-datepicker__year-text--in-selecting-range:hover,
 .react-datepicker__year-text--in-range:hover {
-  background-color: #186ef0;
-}
-.react-datepicker__day--keyboard-selected,
-.react-datepicker__month-text--keyboard-selected,
-.react-datepicker__quarter-text--keyboard-selected,
-.react-datepicker__year-text--keyboard-selected {
-  border-radius: 100%;
-  background-color: #cee2ff;
-  color: rgb(0, 0, 0);
-}
-.react-datepicker__day--keyboard-selected:hover,
-.react-datepicker__month-text--keyboard-selected:hover,
-.react-datepicker__quarter-text--keyboard-selected:hover,
-.react-datepicker__year-text--keyboard-selected:hover {
-  background-color: #186ef0;
-}
+  background-color: #5698f9;
+}
+// .react-datepicker__day--keyboard-selected,
+// .react-datepicker__month-text--keyboard-selected,
+// .react-datepicker__quarter-text--keyboard-selected,
+// .react-datepicker__year-text--keyboard-selected {
+//   border-radius: 100%;
+//   background-color: #5193f6;
+//   color: rgb(0, 0, 0);
+// }
+// .react-datepicker__day--keyboard-selected:hover,
+// .react-datepicker__month-text--keyboard-selected:hover,
+// .react-datepicker__quarter-text--keyboard-selected:hover,
+// .react-datepicker__year-text--keyboard-selected:hover {
+//   background-color: #5193f6;
+// }
 .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
 .react-datepicker__month-text--in-range,
 .react-datepicker__quarter-text--in-range,
@@ -839,7 +828,7 @@ const datePickerCss = `
 :is([data-theme="dark"]) .react-datepicker__month-read-view--down-arrow,
 :is([data-theme="dark"]) .react-datepicker__month-year-read-view--down-arrow,
 :is([data-theme="dark"]) .react-datepicker__navigation-icon::before {
-  border-color: #333;
+  border-color: #999;
 }
 
 
@@ -913,7 +902,7 @@ const datePickerCss = `
 :is([data-theme="dark"]) .react-datepicker__year-text--selected:hover,
 :is([data-theme="dark"]) .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover
  {
-  background-color: #1a1a1a;
+  background-color: #262626;
 }
 
 :is([data-theme="dark"]) .react-datepicker__day--selected,
@@ -931,12 +920,12 @@ const datePickerCss = `
   background-color: #0e528f;
 }
 
-:is([data-theme="dark"]) .react-datepicker__day--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__month-text--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__quarter-text--keyboard-selected,
-:is([data-theme="dark"]) .react-datepicker__year-text--keyboard-selected {
-  background-color: #0e529f;
-}
+// :is([data-theme="dark"]) .react-datepicker__day--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__month-text--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__quarter-text--keyboard-selected,
+// :is([data-theme="dark"]) .react-datepicker__year-text--keyboard-selected {
+//   background-color: #0e529f;
+// }
 
 :is([data-theme="dark"]) .react-datepicker__today-button {
   background-color: #262626;

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,19 +65,16 @@ export function FileUpload({
         {...getRootProps()}
         className={cls(
             fieldBackgroundMixin,
-            fieldBackgroundHoverMixin,
-            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",
             {
                 "h-44": size === "medium",
                 "h-28": size === "small",
                 "cursor-pointer": !disabled,
-                "hover:bg-field-hover dark:hover:bg-field-hover-dark": !isDragActive,
+                [fieldBackgroundHoverMixin]: !isDragActive,
                 "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
                 "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500": isDragAccept,
-            })}
-    >
+            })}>
 
         <Typography variant={"caption"} color={"secondary"} className={"absolute top-2 left-3.5 cursor-inherit"}>
             {title}

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,22 @@
-import * as MenubarPrimitive from "@radix-ui/react-Menubar";
+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 className={cls("z-10 flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
+        <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>
     )
@@ -25,11 +34,17 @@ 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
-            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-gray-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-gray-100 data-[state=open]:dark:bg-gray-800",
+            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}
         </MenubarPrimitive.Trigger>
@@ -52,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}
@@ -78,17 +96,21 @@ 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 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-gray-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-gray-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)}
             disabled={disabled}
             {...rest}
@@ -108,7 +130,7 @@ export function MenubarSeparator({
 }) {
     return (
         <MenubarPrimitive.Separator
-            className={cls("h-[1px] bg-gray-100 dark:bg-gray-800 m-[5px]", className)}
+            className={cls("h-[1px] bg-slate-100 dark:bg-gray-800 m-[5px]", className)}
             {...rest}
         >
             {children}
@@ -134,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-gray-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-gray-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}
         >
@@ -154,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)}
@@ -177,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-gray-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}
@@ -219,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,
@@ -231,6 +264,7 @@ export function MenubarRadioGroup({
             className={cls(className)}
             value={value}
             onValueChange={onValueChange}
+            onSelect={onSelect}
             {...rest}>
             {children ?? <CheckIcon size={"small"}/>}
         </MenubarPrimitive.RadioGroup>
@@ -241,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-gray-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}>
@@ -268,8 +305,9 @@ export function MenubarShortcut({
 }) {
     return (
         <div
-            className={cls("ml-auto pl-5 group-data-[highlighted]:text-white group-data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark",
-                className)}>
+            className={cls("ml-auto pl-5 group-data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark",
+                className)}
+            {...rest}>
             {children}
         </div>
     )