@firecms/core 3.0.0-alpha.27 → 3.0.0-alpha.29

package/dist/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const focusedMixin = "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
+export declare const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-gray-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
 export declare const fieldBackgroundMixin = "bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";

package/dist/types/collections.d.ts

@@ -6,6 +6,7 @@ import { EntityCallbacks } from "./entity_callbacks";
 import { Permissions, PermissionsBuilder } from "./permissions";
 import { EnumValues, PropertiesOrBuilders } from "./properties";
 import { FormContext } from "./fields";
+import { EntityAction } from "./entity_actions";
 /**
  * This interface represents a view that includes a collection of entities.
  * It can be in the root level of the configuration, defining the main
@@ -13,7 +14,7 @@ import { FormContext } from "./fields";
  *
  * @category Models
  */
-export interface EntityCollection<M extends Record<string, any> = any, AdditionalKey extends string = string, UserType extends User = User> {
+export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
     /**
      * Name of the collection, typically plural.
      * E.g. `Products`, `Blog`
@@ -48,9 +49,9 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
     alias?: string;
     /**
      * Icon key to use in this collection.
-     * You can use any of the icons in the MUI specs:
-     * https://mui.com/material-ui/material-icons/
-     * e.g. 'AccountTree' or 'Person'
+     * You can use any of the icons in the Material specs:
+     * https://fonts.google.com/icons
+     * e.g. 'account_tree' or 'person'
      */
     icon?: string;
     /**
@@ -80,7 +81,7 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
      *     - If you are using a collection group, you will also have an
      *       additional `collectionGroupParent` column.
      */
-    propertiesOrder?: Extract<keyof M | AdditionalKey, string>[];
+    propertiesOrder?: Extract<keyof M, string>[];
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
      * collection are loaded.
@@ -97,7 +98,7 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
      * Permissions the logged-in user can perform on this collection.
      * If not specified everything defaults to `true`.
      */
-    permissions?: Permissions | PermissionsBuilder<EntityCollection<M>, UserType, M>;
+    permissions?: Permissions | PermissionsBuilder<any, UserType, M>;
     /**
      * Are the entities in this collection selectable. Defaults to `true`
      */
@@ -119,6 +120,30 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
      * collection toolbar
      */
     Actions?: React.ComponentType<CollectionActionsProps> | React.ComponentType<CollectionActionsProps>[];
+    /**
+     * You can define additional actions that can be performed on the entities
+     * in this collection. These actions can be displayed in the collection
+     * view or in the entity view.
+     *
+     * You can use the `onClick` method to implement your own logic.
+     * In the `context` prop you can access all the controllers of FireCMS.
+     *
+     * ```
+     * const archiveEntityAction: EntityAction = {
+     *     icon: <ArchiveIcon/>,
+     *     name: "Archive",
+     *     onClick({
+     *                 entity,
+     *                 collection,
+     *                 context,
+     *             }): Promise<void> {
+     *         // Add your code here
+     *         return Promise.resolve(undefined);
+     *     }
+     * }
+     * ```
+     */
+    entityActions?: EntityAction<M, UserType>[];
     /**
      * Pass your own selection controller if you want to control selected
      * entities externally.
@@ -163,7 +188,7 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
      * You can add additional fields to the collection view by implementing
      * an additional field delegate.
      */
-    additionalFields?: AdditionalFieldDelegate<M, AdditionalKey, UserType>[];
+    additionalFields?: AdditionalFieldDelegate<M, UserType>[];
     /**
      * Default size of the rendered collection
      */
@@ -208,10 +233,8 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.
- * Note that actions are rendered in the collection toolbar, as well
- * as in the home page card.
- * If you don't want to render the actions in the home page card, you can
- * return `null` if mode is `home`.
+ * The component will receive this prop when it is rendered in the collection
+ * toolbar.
  *
  * @category Models
  */
@@ -296,12 +319,12 @@ export type AdditionalFieldDelegateProps<M extends Record<string, any> = any, Us
  * If you need to do some async loading you can use {@link AsyncPreviewComponent}
  * @category Models
  */
-export interface AdditionalFieldDelegate<M extends Record<string, any> = any, AdditionalKey extends string = string, UserType extends User = User> {
+export interface AdditionalFieldDelegate<M extends Record<string, any> = any, UserType extends User = User> {
     /**
      * ID of this column. You can use this id in the `properties` field of the
      * collection in any order you want
      */
-    id: AdditionalKey;
+    id: string;
     /**
      * Header of this column
      */

package/dist/types/datasource.d.ts

@@ -1,6 +1,6 @@
-import { Entity, EntityStatus, EntityValues } from "./entities";
+import { Entity, EntityReference, EntityStatus, EntityValues, GeoPoint } from "./entities";
 import { EntityCollection, FilterValues } from "./collections";
-import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
+import { ResolvedEntityCollection } from "./resolved_entities";
 /**
  * @category Datasource
  */
@@ -131,7 +131,7 @@ export interface DataSource {
      * @param entityId
      * @return `true` if there are no other fields besides the given entity
      */
-    checkUniqueField(path: string, name: string, value: any, property: ResolvedProperty, entityId?: string): Promise<boolean>;
+    checkUniqueField(path: string, name: string, value: any, entityId?: string): Promise<boolean>;
     /**
      * Generate an id for a new entity
      */
@@ -142,12 +142,121 @@ export interface DataSource {
     countEntities<M extends Record<string, any> = any>(props: FetchCollectionProps<M>): Promise<number>;
     /**
      * Check if the given filter combination is valid
-     * @param params
-     */
-    isFilterCombinationValid?(params: {
-        path: string;
-        collection: EntityCollection<any>;
-        filterValues: FilterValues<any>;
-        sortBy?: [string, "asc" | "desc"];
-    }): boolean;
+     * @param props
+     */
+    isFilterCombinationValid?(props: FilterCombinationValidProps): boolean;
+}
+export type FilterCombinationValidProps = {
+    path: string;
+    collection: EntityCollection<any>;
+    filterValues: FilterValues<any>;
+    sortBy?: [string, "asc" | "desc"];
+};
+export type SaveEntityDelegateProps<M extends Record<string, any> = any> = Omit<SaveEntityProps<M>, "collection">;
+export type FetchCollectionDelegateProps<M extends Record<string, any> = any> = Omit<FetchCollectionProps<M>, "collection"> & {
+    isCollectionGroup?: boolean;
+};
+export type ListenCollectionDelegateProps<M extends Record<string, any> = any> = Omit<ListenCollectionProps<M>, "collection"> & {
+    isCollectionGroup?: boolean;
+};
+export interface DataSourceDelegate {
+    /**
+     * Fetch data from a collection
+     * @param path
+     * @param filter
+     * @param limit
+     * @param startAfter
+     * @param orderBy
+     * @param order
+     * @param searchString
+     * @return Function to cancel subscription
+     * @see useCollectionFetch if you need this functionality implemented as a hook
+     */
+    fetchCollection<M extends Record<string, any> = any>({ path, filter, limit, startAfter, orderBy, order, searchString }: FetchCollectionDelegateProps<M>): Promise<Entity<M>[]>;
+    /**
+     * Listen to a collection in a given path. If you don't implement this method
+     * `fetchCollection` will be used instead, with no real time updates.
+     * @param path
+     * @param onUpdate
+     * @param onError
+     * @param filter
+     * @param limit
+     * @param startAfter
+     * @param orderBy
+     * @param order
+     * @param searchString
+     * @return Function to cancel subscription
+     * @see useCollectionFetch if you need this functionality implemented as a hook
+     */
+    listenCollection?<M extends Record<string, any> = any>({ path, filter, limit, startAfter, searchString, orderBy, order, onUpdate, onError }: ListenCollectionDelegateProps<M>): () => void;
+    /**
+     * Retrieve an entity given a path and a collection
+     * @param path
+     * @param entityId
+     */
+    fetchEntity<M extends Record<string, any> = any>({ path, entityId, }: Omit<FetchEntityProps<M>, "collection">): Promise<Entity<M> | undefined>;
+    /**
+     * Get realtime updates on one entity.
+     * @param path
+     * @param entityId
+     * @param collection
+     * @param onUpdate
+     * @param onError
+     * @return Function to cancel subscription
+     */
+    listenEntity?<M extends Record<string, any> = any>({ path, entityId, onUpdate, onError }: Omit<ListenEntityProps<M>, "collection">): () => void;
+    /**
+     * Save entity to the specified path
+     * @param path
+     * @param id
+     * @param collection
+     * @param status
+     */
+    saveEntity<M extends Record<string, any> = any>({ path, entityId, values, status }: SaveEntityDelegateProps<M>): Promise<Entity<M>>;
+    /**
+     * Delete an entity
+     * @param entity
+     * @return was the whole deletion flow successful
+     */
+    deleteEntity<M extends Record<string, any> = any>({ entity }: DeleteEntityProps<M>): Promise<void>;
+    /**
+     * Check if the given property is unique in the given collection
+     * @param path Collection path
+     * @param name of the property
+     * @param value
+     * @param entityId
+     * @return `true` if there are no other fields besides the given entity
+     */
+    checkUniqueField(path: string, name: string, value: any, entityId?: string): Promise<boolean>;
+    /**
+     * Generate an id for a new entity
+     */
+    generateEntityId(path: string): string;
+    /**
+     * Count the number of entities in a collection
+     */
+    countEntities<M extends Record<string, any> = any>(props: FetchCollectionDelegateProps<M>): Promise<number>;
+    /**
+     * Check if the given filter combination is valid
+     * @param props
+     */
+    isFilterCombinationValid?(props: Omit<FilterCombinationValidProps, "collection">): boolean;
+    /**
+     * Convert a FireCMS reference to a reference that can be used by the datasource
+     * @param reference
+     */
+    buildReference: (reference: EntityReference) => any;
+    /**
+     * Convert a FireCMS GeoPoint to a GeoPoint that can be used by the datasource
+     * @param geoPoint
+     */
+    buildGeoPoint: (geoPoint: GeoPoint) => any;
+    /**
+     * Get the object to generate the current time in the datasource
+     */
+    currentTime(): any;
+    buildDate: (date: Date) => any;
+    buildDeleteFieldValue: () => any;
+    delegateToCMSModel: (data: any) => any;
+    setDateToMidnight: (input?: any) => any;
 }

package/dist/types/dialogs_controller.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Controller to open the side dialog
+ * @category Hooks and utilities
+ */
+export interface DialogsController {
+    /**
+     * Close the last dialog
+     */
+    close: () => void;
+    /**
+     * Open a dialog
+     * @param props
+     */
+    open: (props: DialogControllerEntryProps) => {
+        closeDialog: () => void;
+    };
+}
+/**
+ * Props used to open a side dialog
+ * @category Hooks and utilities
+ */
+export interface DialogControllerEntryProps {
+    key: string;
+    /**
+     * The component type that will be rendered
+     */
+    Component: React.ComponentType<{
+        open: boolean;
+    }>;
+}

package/dist/types/entity_actions.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { FireCMSContext } from "./firecms_context";
+import { Entity } from "./entities";
+import { EntityCollection, SelectionController } from "./collections";
+import { User } from "./user";
+import { SideEntityController } from "./side_entity_controller";
+export type EntityAction<M extends object = any, UserType extends User = User> = {
+    name: string;
+    icon?: React.ReactElement;
+    onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void>;
+    /**
+     * Show this action in the menu, defaults to true
+     */
+    collapsed?: boolean;
+    /**
+     * Show this action in the form, defaults to true
+     */
+    includeInForm?: boolean;
+};
+export type EntityActionClickProps<M extends object, UserType extends User = User> = {
+    entity: Entity<M>;
+    context: FireCMSContext<UserType>;
+    fullPath?: string;
+    collection?: EntityCollection<M>;
+    selectionController?: SelectionController;
+    highlightEntity?: (entity: Entity<any>) => void;
+    unhighlightEntity?: (entity: Entity<any>) => void;
+    onCollectionChange?: () => void;
+    /**
+     * If this actions is being called from a side dialog
+     */
+    sideEntityController?: SideEntityController;
+};

package/dist/types/fields.d.ts

@@ -7,7 +7,7 @@ import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities"
  *
  * @category Form custom fields
  */
-export interface FieldProps<T extends CMSType = CMSType, CustomProps = any, M extends Record<string, any> = any> {
+export interface FieldProps<T extends CMSType = any, CustomProps = any, M extends Record<string, any> = any> {
     /**
      * Key of the property
      * E.g. "user.name" for a property with path "user.name"

package/dist/types/firecms.d.ts

@@ -5,7 +5,7 @@ import { DataSource } from "./datasource";
 import { EntityCollection, EntityCustomView } from "./collections";
 import { CMSView } from "./navigation";
 import { FireCMSContext } from "./firecms_context";
-import { FieldConfig } from "./field_config";
+import { PropertyConfig } from "./property_config";
 import { Locale } from "./locales";
 import { StorageSource } from "./storage";
 import { EntityLinkBuilder } from "./entity_link_builder";
@@ -22,11 +22,11 @@ import { CMSAnalyticsEvent } from "./analytics";
  * APIs directly, or a REST API.
  * @category Models
  */
-export type EntityCollectionsBuilder = (params: {
+export type EntityCollectionsBuilder<EC extends EntityCollection> = (params: {
     user: User | null;
     authController: AuthController;
     dataSource: DataSource;
-}) => EntityCollection[] | Promise<EntityCollection[]>;
+}) => EC[] | Promise<EC[]>;
 /**
  * Use this callback to build custom views dynamically.
  * You can use the user to decide which views to show.
@@ -44,7 +44,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @category Models
  */
-export type FireCMSProps<UserType extends User> = {
+export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
     /**
      * Use this function to return the components you want to render under
      * FireCMS
@@ -68,7 +68,7 @@ export type FireCMSProps<UserType extends User> = {
      * Each of the navigation entries in this field
      * generates an entry in the main menu.
      */
-    collections?: EntityCollection[] | EntityCollectionsBuilder;
+    collections?: EC[] | EntityCollectionsBuilder<EC>;
     /**
      * Custom additional views created by the developer, added to the main
      * navigation
@@ -77,9 +77,9 @@ export type FireCMSProps<UserType extends User> = {
     /**
      * Record of custom form fields to be used in the CMS.
      * You can use the key to reference the custom field in
-     * the `fieldConfig` prop of a property in a collection.
+     * the `propertyConfig` prop of a property in a collection.
      */
-    fields?: Record<string, FieldConfig>;
+    fields?: Record<string, PropertyConfig>;
     /**
      * List of additional custom views for entities.
      * You can use the key to reference the custom view in
@@ -130,7 +130,7 @@ export type FireCMSProps<UserType extends User> = {
      * Use plugins to modify the behaviour of the CMS.
      * Currently, in ALPHA, and likely subject to change.
      */
-    plugins?: FireCMSPlugin[];
+    plugins?: FireCMSPlugin<any, any, any>[];
     /**
      * Callback used to get analytics events from the CMS
      */

package/dist/types/firecms_context.d.ts

@@ -11,8 +11,9 @@ import { UserConfigurationPersistence } from "./local_config_persistence";
 import { SideDialogsController } from "./side_dialogs_controller";
 import { FireCMSPlugin } from "./plugins";
 import { CMSAnalyticsEvent } from "./analytics";
-import { FieldConfig } from "./field_config";
+import { PropertyConfig } from "./property_config";
 import { EntityCustomView } from "./collections";
+import { DialogsController } from "./dialogs_controller";
 /**
  * Context that includes the internal controllers and contexts used by the app.
  * Some controllers and context included in this context can be accessed
@@ -51,8 +52,14 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
     sideEntityController: SideEntityController;
     /**
      * Controller used to open side dialogs
+     * This is the controller used internally by side entity dialogs
+     * or reference dialogs.
      */
     sideDialogsController: SideDialogsController;
+    /**
+     * Controller used to open regular dialogs
+     */
+    dialogsController: DialogsController;
     /**
      * Used auth controller
      */
@@ -81,9 +88,9 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
     /**
      * Record of custom form fields to be used in the CMS.
      * You can use the key to reference the custom field in
-     * the `fieldConfig` prop of a property in a collection.
+     * the `propertyConfig` prop of a property in a collection.
      */
-    fields: Record<string, FieldConfig>;
+    fields: Record<string, PropertyConfig>;
     /**
      * List of additional custom views for entities.
      * You can use the key to reference the custom view in

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./auth";
 export * from "./entities";
+export * from "./entity_actions";
 export * from "./resolved_entities";
 export * from "./properties";
 export * from "./collections";
@@ -10,7 +11,7 @@ export * from "./user";
 export * from "./colors";
 export * from "./storage";
 export * from "./fields";
-export * from "./field_config";
+export * from "./property_config";
 export * from "./datasource";
 export * from "./entity_link_builder";
 export * from "./side_entity_controller";

package/dist/types/navigation.d.ts

@@ -127,9 +127,9 @@ export interface CMSView {
     description?: string;
     /**
      * Icon key to use in this view.
-     * You can use any of the icons in the MUI specs:
-     * https://mui.com/material-ui/material-icons/
-     * e.g. 'AccountTree' or 'Person'
+     * You can use any of the icons in the Material specs:
+     * https://fonts.google.com/icons
+     * e.g. 'account_tree' or 'person'
      */
     icon?: string;
     /**

package/dist/types/plugins.d.ts

@@ -11,7 +11,7 @@ import { ResolvedProperty } from "./resolved_entities";
  * NOTE: This is a work in progress and the API is not stable yet.
  * @category Core
  */
-export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
+export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection> = {
     /**
      * Name of the plugin
      */
@@ -34,15 +34,15 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
          * Use this component to add custom actions to the entity collections
          * toolbar.
          */
-        CollectionActions?: React.ComponentType<CollectionActionsProps> | React.ComponentType<CollectionActionsProps>[];
+        CollectionActions?: React.ComponentType<CollectionActionsProps<any, any, EC>> | React.ComponentType<CollectionActionsProps<any, any, EC>>[];
     };
     form?: {
         provider?: {
-            Component: React.ComponentType<PropsWithChildren<FORM_PROPS & PluginFormActionProps<any>>>;
+            Component: React.ComponentType<PropsWithChildren<FORM_PROPS & PluginFormActionProps<any, EC>>>;
             props?: FORM_PROPS;
         };
-        Actions?: React.ComponentType<PluginFormActionProps>;
-        fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => React.ComponentType<FieldProps<T>> | null;
+        Actions?: React.ComponentType<PluginFormActionProps<any, EC>>;
+        fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T, any, EC>) => React.ComponentType<FieldProps<T>> | null;
         fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
     };
     /**
@@ -95,6 +95,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
             fullPath: string;
             parentPathSegments: string[];
             onHover: boolean;
+            collection: EC;
         }>;
         /**
          * If you add this callback to your plugin, an add button will be added to the collection table.
@@ -103,7 +104,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
         AddColumnComponent?: React.ComponentType<{
             fullPath: string;
             parentPathSegments: string[];
-            collection: EntityCollection;
+            collection: EC;
         }>;
     };
 };
@@ -129,23 +130,23 @@ export interface PluginHomePageActionsProps<EP extends object = object, M extend
     context: FireCMSContext<UserType>;
     extraProps?: EP;
 }
-export interface PluginFormActionProps<UserType extends User = User> {
+export interface PluginFormActionProps<UserType extends User = User, EC extends EntityCollection = EntityCollection> {
     entityId?: string;
     path: string;
     status: EntityStatus;
-    collection: EntityCollection;
+    collection: EC;
     formContext?: FormContext<any>;
     context: FireCMSContext<UserType>;
     currentEntityId?: string;
 }
-export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any> = {
+export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {
     fieldConfigId: string;
     propertyKey: string;
     property: Property<T> | ResolvedProperty<T>;
     Field: React.ComponentType<FieldProps<T, any, M>>;
     plugin: FireCMSPlugin;
     path: string;
-    collection: EntityCollection<M>;
+    collection: EC;
 };
 export interface PluginGenericProps<UserType extends User = User> {
     context: FireCMSContext<UserType>;

package/dist/types/properties.d.ts

@@ -44,7 +44,7 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
      * All the configuration will be taken from the inherited config, and
      * overwritten by the current property config.
      */
-    fieldConfig?: string;
+    propertyConfig?: string;
     /**
      * Longer description of a field, displayed under a popover
      */

package/dist/types/{field_config.d.ts → property_config.d.ts}

@@ -1,14 +1,13 @@
 import React from "react";
 import { CMSType, PropertyOrBuilder } from "./properties";
 /**
- * This is the configuration object for the field component generated for a
- * property.
+ * This is the configuration object for a property.
  * These configs are generated by default for the properties defined in your
  * collections' configuration, but you can define your own to be used.
  */
-export type FieldConfig<T extends CMSType = any> = {
+export type PropertyConfig<T extends CMSType = any> = {
     /**
-     * Key used to identify this field type.
+     * Key used to identify this property config.
      */
     key: string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/core",
-  "version": "3.0.0-alpha.27",
+  "version": "3.0.0-alpha.29",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -101,7 +101,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.6",
-    "@types/node": "^18.18.7",
+    "@types/node": "^20.8.9",
     "@types/object-hash": "^3.0.5",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
@@ -133,7 +133,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "deb0ef4491986b9a599919a2cd581f40ac6920c1",
+  "gitHead": "65c1ea189696ea89b29b2416680a1dc541da0b36",
   "publishConfig": {
     "access": "public"
   }

package/src/components/Popover.tsx

@@ -22,6 +22,8 @@ export interface PopoverProps {
     hideWhenDetached?: boolean;
     avoidCollisions?: boolean;
     enabled?: boolean;
+    modal?: boolean;
+    className?: string;
 }
 
 export function Popover({
@@ -37,7 +39,9 @@ export function Popover({
                             sticky,
                             hideWhenDetached,
                             avoidCollisions,
-                            enabled = true
+                            enabled = true,
+                            modal = false,
+                            className
                         }: PopoverProps) {
 
     useInjectStyles("Popover", popoverStyles);
@@ -45,12 +49,15 @@ export function Popover({
     if (!enabled)
         return <>{trigger}</>;
 
-    return <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+    return <PopoverPrimitive.Root open={open}
+                                  onOpenChange={onOpenChange}
+                                  modal={modal}
+    >
         <PopoverPrimitive.Trigger asChild>
             {trigger}
         </PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
-            <PopoverPrimitive.Content className={cn(paperMixin, "PopoverContent shadow z-50")}
+            <PopoverPrimitive.Content className={cn(paperMixin, "PopoverContent shadow z-40", className)}
                                       side={side}
                                       sideOffset={sideOffset}
                                       align={align}

package/src/components/Sheet.tsx

@@ -61,6 +61,7 @@ export const Sheet: React.FC<SheetProps> = ({
                     {...props}
                     className={cn(
                         // "transform-gpu",
+                        "will-change-transform",
                         "text-gray-900 dark:text-white",
                         "fixed transform z-20 transition-all duration-[240ms] ease-in-out",
                         "outline-none focus:outline-none",