@firecms/ui 3.0.0-canary.131 → 3.0.0-canary.133

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/ui",
   "type": "module",
-  "version": "3.0.0-canary.131",
+  "version": "3.0.0-canary.133",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -49,29 +49,30 @@
     "generateIcons": "ts-node --esm src/scripts/generateIcons.ts"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.1",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-portal": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.0",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-portal": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
-    "material-icons": "latest",
-    "react-datepicker": "^7.3.0",
-    "react-dropzone": "^14.2.3",
+    "markdown-it": "^14.1.0",
+    "material-icons": "^1.13.12",
+    "react-datepicker": "^7.4.0",
+    "react-dropzone": "^14.2.9",
     "react-fast-compare": "^3.2.2",
-    "tailwind-merge": "^2.4.0"
+    "tailwind-merge": "^2.5.3"
   },
   "peerDependencies": {
     "react": "^18.3.1",
@@ -79,25 +80,25 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.12",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^20.16.11",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.2",
     "cross-env": "^7.0.3",
-    "firebase": "^10.12.4",
+    "firebase": "^10.14.0",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "tsd": "^0.31.1",
-    "typescript": "^5.5.4",
-    "vite": "^5.3.4",
+    "tsd": "^0.31.2",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.8",
     "vite-plugin-static-copy": "^1.0.6"
   },
   "files": [
@@ -105,7 +106,7 @@
     "src",
     "tailwind.config.js"
   ],
-  "gitHead": "4ed84e51a0d5d3409f8ea7371c41af4377128110",
+  "gitHead": "b8b711f9dd66ea8c5326bfe003df80b6f111e5f9",
   "publishConfig": {
     "access": "public"
   }

package/src/components/ExpandablePanel.tsx

@@ -15,7 +15,8 @@ export function ExpandablePanel({
                                     initiallyExpanded = true,
                                     titleClassName,
                                     asField,
-                                    className
+                                    className,
+                                    innerClassName
                                 }: PropsWithChildren<{
     title: React.ReactNode,
     invisible?: boolean,
@@ -24,7 +25,8 @@ export function ExpandablePanel({
     onExpandedChange?: (expanded: boolean) => void,
     titleClassName?: string,
     asField?: boolean,
-    className?: string
+    className?: string,
+    innerClassName?: string
 }>) {
 
     useInjectStyles("ExpandablePanel", `
@@ -79,7 +81,8 @@ export function ExpandablePanel({
                 className={cls(
                     !invisible && defaultBorderMixin + " border",
                     "rounded-md",
-                    "w-full"
+                    "w-full",
+                    className
                 )}
                 open={open}
                 onOpenChange={(updatedOpen: boolean) => {
@@ -90,7 +93,7 @@ export function ExpandablePanel({
                 <Collapsible.Trigger
                     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-20",
+                        "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,
@@ -107,7 +110,7 @@ export function ExpandablePanel({
                         overflow: allowOverflow ? "visible" : "hidden"
                     }}
                 >
-                    <div className={className}>
+                    <div className={innerClassName}>
                         {children}
                     </div>
                 </Collapsible.Content>

package/src/components/FileUpload.tsx

@@ -11,7 +11,7 @@ export interface FileUploadError {
 
 export type OnFileUploadRejected = (fileRejections: {
     file: File;
-    errors: FileUploadError[];
+    errors: readonly FileUploadError[];
 }[], event: object) => void;
 
 export type OnFilesUploadAdded = (files: File[]) => void;

package/src/components/Sheet.tsx

@@ -7,6 +7,7 @@ interface SheetProps {
     children: React.ReactNode;
     open: boolean;
     title?: string;
+    modal?: boolean;
     side?: "top" | "bottom" | "left" | "right";
     darkBackground?: boolean;
     transparent?: boolean;
@@ -19,6 +20,7 @@ export const Sheet: React.FC<SheetProps> = ({
                                                 children,
                                                 side = "right",
                                                 title,
+                                                modal = true,
                                                 open,
                                                 onOpenChange,
                                                 transparent,
@@ -56,7 +58,7 @@ export const Sheet: React.FC<SheetProps> = ({
                 <DialogPrimitive.Title autoFocus tabIndex={0}>
                     {title ?? "Sheet"}
                 </DialogPrimitive.Title>
-                <DialogPrimitive.Overlay
+                {modal && <DialogPrimitive.Overlay
                     className={cls(
                         "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
                         "bg-black bg-opacity-50",
@@ -68,7 +70,7 @@ export const Sheet: React.FC<SheetProps> = ({
                         pointerEvents: displayed ? "auto" : "none"
                     }}
                     onClick={() => onOpenChange && onOpenChange(false)}
-                />
+                />}
                 <DialogPrimitive.Content
                     {...props}
                     onFocusCapture={(event) => event.preventDefault()}