@firecms/ui 3.0.0-canary.84 → 3.0.0-canary.85

package/dist/components/DateTimeField.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface DateTimeFieldProps {
     value?: Date;
-    onChange: (date: Date | undefined) => void;
+    onChange?: (date: Date | null) => void;
     mode?: "date" | "date_time";
     disabled?: boolean;
     clearable?: boolean;
@@ -12,7 +12,6 @@ interface DateTimeFieldProps {
     style?: React.CSSProperties;
     inputClassName?: string;
     invisible?: boolean;
-    preventOpenOnFocus?: boolean;
     locale?: string;
 }
 export declare const DateTimeField: React.FC<DateTimeFieldProps>;

package/dist/index.es.js

@@ -4278,7 +4278,7 @@ const colorClassesMapping = {
   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"
 };
 const Icon = React.forwardRef(
@@ -15055,7 +15055,6 @@ const DateTimeField = ({
   className,
   style,
   inputClassName,
-  preventOpenOnFocus,
   invisible,
   locale
 }) => {
@@ -15067,7 +15066,7 @@ const DateTimeField = ({
   useInjectStyles("DateTimeField", datePickerCss);
   const handleClear = (e) => {
     e.preventDefault();
-    onChange(void 0);
+    onChange?.(null);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -15106,7 +15105,6 @@ const DateTimeField = ({
               onChange,
               disabled: false,
               popperClassName: cls(paperMixin, "my-4 shadow"),
-              onClick: (e) => e.stopPropagation(),
               onFocus: () => setFocused(true),
               onBlur: () => setFocused(false),
               showTimeSelect: mode === "date_time",
@@ -15547,7 +15545,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,
@@ -15560,22 +15558,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,
@@ -15858,7 +15856,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;
 }
 
 
@@ -15932,7 +15930,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,
@@ -15950,12 +15948,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;
@@ -16486,7 +16484,7 @@ function MenubarItem({
     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",
+        "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
@@ -16532,7 +16530,7 @@ function MenubarSubTrigger({
     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",
+        "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,
@@ -16570,7 +16568,7 @@ function MenubarCheckboxItem({
     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",
+        "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,
@@ -16622,7 +16620,7 @@ function MenubarRadioItem({
     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",
+        "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,
@@ -16640,7 +16638,7 @@ function MenubarShortcut({
     "div",
     {
       className: cls(
-        "ml-auto pl-5 group-data-[disabled]:text-disabled data-[disabled]:dark:text-disabled-dark",
+        "ml-auto pl-5 group-data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark",
         className
       ),
       ...rest,
@@ -17103,11 +17101,11 @@ function Select({
           SelectPrimitive.Content,
           {
             position,
-            className: "z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg",
+            className: "z-50 relative overflow-y-auto max-h-[10rem] border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg",
             children: /* @__PURE__ */ jsx(
               SelectPrimitive.Viewport,
               {
-                className: "p-1",
+                className: "p-1 overflow-y-auto max-h-[10rem]",
                 style: {
                   maxHeight: "var(--radix-select-content-available-height)"
                 },