@firecms/ui 3.0.0-canary.16 → 3.0.0-canary.160

package/README.md

@@ -1,174 +1,84 @@
-<p align="center">
-    <img src="https://firecms.co/img/dark_mode.webp" alt="Intro video" style="max-width: 100%;"/>
-</p>
+## FireCMS UI
 
-<p align="center">
-  <a href="https://firecms.co">
-    <img src="https://firecms.co/img/logo_small.png" width="240px" alt="FireCMS logo" />
-  </a>
-</p>
 
-<h1 align="center">FireCMS</h1>
-<h3 align="center">Awesome Firebase/Firestore-based headless CMS</h3>
-<p align="center"><a href="https://demo.firecms.co">Live demo</a></p>
+**FireCMS UI** is a high quality set of components that you can use to build your own custom views. You can
+use these components to build your own FireCMS views, or in any other React application. You just need to install
+`tailwindcss` and the `@firecms/ui` package.
 
-<br />
+### Why build this UI kit?
+FireCMS was using MUI until version 3.0. MUI provides ready to use components with intuitive APIs, but it also
+comes with a lot of complexity and overhead. We wanted to build a simpler and more flexible UI kit that could be used
+in any React project, not just in FireCMS.
+We also wanted to make it easy to transition from MUI to our new UI kit, so we kept the API as similar as possible.
+The result it a set of components that are easy to use, easy to customize, **much more performant** and with a smaller bundle size.
 
+The components are primarily built using **Radix UI** primitives and **tailwindcss**. This means that you can easily customize them
+using tailwindcss classes or override the styles using CSS.
 
-[![NPM](https://img.shields.io/npm/v/firecms.svg)](https://www.npmjs.com/package/firecms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+See the full list of components in https://firecms.co/docs/components
 
-Designed by developers for developers, FireCMS is a headless CMS and admin panel
-that seamlessly integrates with **Firebase and Firestore** by default, but is
-also
-compatible with any backend.
 
-Effortlessly generate **CRUD views** based on your configuration. FireCMS is
-simple
-to set up for standard cases and easy to extend and customize for more specific
-needs.
+> All the components are exported from the `@firecms/ui` package. These are the same components used internally in **FireCMS**.
 
-Built to produce collection and form views that naturally align with the
-collection/document model, FireCMS covers a wide range of basic and advanced use
-cases. With extensibility in mind, it's easy to create your own views or modify
-existing ones.
 
-FireCMS does **not impose any data structure** restrictions, ensuring a smooth,
-out-of-the-box experience for any project.
+## Installation
 
-### Core technologies
+If you are using FireCMS, you don't need to install this package, as it is already included, and
+configured for you.
 
-FireCMS is based on this great technologies:
+To use the components in your own project, you need to install the `@firecms/ui` package:
 
-- Typescript
-- Tailwind CSS
-- Firebase SDK 10
-- React + React Router 6
+```bash
+yarn add @firecms/ui
+```
+or
+```bash
+npm install @firecms/ui
+```
 
-### Quickstart
+You also need to install `tailwindcss`:
 
-The easiest way to get going is to check our quickstart guide! You will just
-need to follow some quick steps:
+```bash
+yarn add tailwindcss @tailwindcss/typography
+```
 
-https://firecms.co/docs/quickstart
+And initialize it in your project:
 
-### Demo
+```bash
+npx tailwindcss init
+```
 
-Check the demo with all the core functionalities.
+And add then add the fireCMS preset in your `tailwind.config.js`:
 
-https://demo.firecms.co
+```javascript
+import fireCMSConfig from "@firecms/ui/tailwind.config.js";
 
-> You can modify the data, but it gets periodically restored.
+export default {
+    presets: [fireCMSConfig],
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/firecms/src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
+    ]
+};
+```
+(You might need to adjust the paths in the `content` array to match your project structure)
 
-### Changelog
+Finally, you need to define your primary and secondary colors in your `index.css` file:
 
-https://firecms.co/docs/changelog
+```css
+@import "@firecms/ui/index.css";
 
-## Features
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-FireCMS has been meticulously crafted to make it incredibly easy for developers
-to build a CMS/admin tool while offering an excellent data editing experience
-and a user-friendly interface for marketers and content managers.
+:root {
+    --fcms-primary: #0070F4;
+    --fcms-primary-dark: #0061e6;
+    --fcms-primary-bg: #0061e610;
+    --fcms-secondary: #FF5B79;
+}
+```
 
-### 🏓 Exceptional Spreadsheet View
-
-We've developed a highly efficient windowed **spreadsheet view** for
-collections, allowing inline editing for most common fields, as well as popup
-views for other cases and your custom field implementations.
-
-Featuring **real-time** support, FireCMS is perfect for apps that require
-constant updates. It also supports **text search** (through an external provider
-like Algolia, if using Firestore), **filtering and sorting**, and **exporting**
-data.
-
-### ✨ Robust Forms
-
-![fields](https://firecms.co/img/form_editing.webp)
-
-When editing an entity, FireCMS offers a nested system of side dialogs for
-navigating through **subcollections** and accessing custom views (such as custom
-forms or blog previews). This functionality can also be accessed
-programmatically using the `useSideEntityController` hook.
-
-FireCMS includes **over 15 built-in fields** with numerous customization and
-validation options. The components have been carefully designed for an
-outstanding user experience, including advanced features like **references** to
-other collections, **markdown**, and **array reordering**.
-
-For unsupported use cases, create your own **custom field** as a React
-component.
-
-FireCMS also supports **conditional fields** in forms, allowing you to define
-rules for active fields based on your logic.
-
-### 👮 Authentication, Permissions, and Role System
-
-Define which navigation views users can see and the operations (create, edit,
-delete) they can perform based on your role system. You can even configure this
-on a per-entity or collection level.
-
-By default, FireCMS supports all Firebase authorization mechanisms, but you can
-implement your own.
-
-### 🏹 Relational Support
-
-Define references to entities in other collections and benefit from the
-integrated reference fields and shortcuts.
-
-You can also define subcollections at the entity level for nesting data in a
-collection/document/collection model.
-
-### 🆒 Real-Time Data
-
-Every view in the CMS supports real-time data, making it suitable for displaying
-constantly updated information.
-
-Forms also support this feature, with any modified value in the database being
-updated in any open form view as long as it hasn't been touched by the user.
-This enables advanced cases where a Cloud Function is triggered after saving an
-entity, modifying some values, and requiring real-time updates.
-
-### 🗂️ File Storage
-
-FireCMS supports uploading files to Firebase Storage out of the box and provides
-specific fields for handling single and multiple file uploads, as well as
-reordering.
-
-You can replace the Firebase Storage implementation with your own.
-
-## Included example
-
-You can access the code for the demo project under
-[`example`](https://github.com/FireCMSco/firecms/tree/master/example). It includes
-every feature provided by this CMS.
-
-Keep in mind you need to update the dependencies in that project if you want to
-use it as it is, without linking it to the library source code. More details in
-its README
-
-## Contact and support
-
-If you need general support, you can open a GitHub issue.
-
-Do you need consulting setting up your Firestore-based CMS in no time? We are
-happy to help!
-`hello@firecms.co`
-
-## Development
-
-If you would like to make changes to the source, feel free to submit a PR!
-
-When developing, the core library can be found under `lib`.
-There is an example project in the folder `example`.
-
-In order to run the project, you need to create a file
-called `firebase_config.ts`
-in `example/src`.
-
-That file needs to export a valid Firebase config, that you can get
-from your Firebase console when creating a webapp for your project.
-
-Then simply run `yarn` and `yarn dev`
-
-## License
-
-MIT © [FireCMS](https://github.com/FireCMSco)

package/dist/components/Avatar.d.ts

@@ -4,6 +4,7 @@ export interface AvatarProps {
     alt?: string;
     children?: React.ReactNode;
     className?: string;
+    outerClassName?: string;
     style?: React.CSSProperties;
 }
 export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/BooleanSwitch.d.ts

@@ -3,7 +3,7 @@ export type BooleanSwitchProps = {
     value: boolean | null;
     className?: string;
     disabled?: boolean;
-    size?: "small" | "medium";
+    size?: "small" | "medium" | "large";
 } & ({
     allowIndeterminate: true;
     onValueChange?: (newValue: boolean | null) => void;

package/dist/components/BooleanSwitchWithLabel.d.ts

@@ -6,9 +6,12 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     label?: React.ReactNode;
     error?: boolean;
     autoFocus?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    inputClassName?: string;
 };
 /**
  * Simple boolean switch.
  *
  */
-export declare const BooleanSwitchWithLabel: ({ value, position, invisible, onValueChange, error, label, autoFocus, disabled, size, ...props }: BooleanSwitchWithLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BooleanSwitchWithLabel: ({ value, position, invisible, onValueChange, error, label, autoFocus, disabled, size, className, fullWidth, inputClassName, ...props }: BooleanSwitchWithLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export type ButtonProps<P extends React.ElementType> = Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick"> & {
-    variant?: "filled" | "outlined" | "text";
+    variant?: "filled" | "neutral" | "outlined" | "text";
     disabled?: boolean;
     color?: "primary" | "secondary" | "text" | "error";
     size?: "small" | "medium" | "large" | "xl" | "2xl";

package/dist/components/CenteredView.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
-export declare function CenteredView({ children, maxWidth, className, fullScreen }: {
+export type CenteredViewProps = {
     children: React.ReactNode;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+    outerClassName?: string;
     className?: string;
     fullScreen?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare const CenteredView: React.ForwardRefExoticComponent<CenteredViewProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Checkbox.d.ts

@@ -1,10 +1,11 @@
 export interface CheckboxProps {
     checked: boolean;
+    id?: string;
     disabled?: boolean;
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     padding?: boolean;
-    size?: "tiny" | "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
-export declare const Checkbox: ({ checked, indeterminate, padding, disabled, size, onCheckedChange, color }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ id, checked, indeterminate, padding, disabled, size, onCheckedChange, color }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chip.d.ts

@@ -8,14 +8,15 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "tiny" | "small" | "medium";
+    size?: "small" | "medium" | "large";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;
     onClick?: () => void;
     icon?: React.ReactNode;
+    style?: React.CSSProperties;
 }
 /**
  * @group Preview components
  */
-export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className, style }: ChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DateTimeField.d.ts

@@ -1,19 +1,17 @@
 import React from "react";
-interface DateTimeFieldProps {
-    value?: Date;
-    onChange: (date: Date | null) => void;
+export type DateTimeFieldProps = {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
     mode?: "date" | "date_time";
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
-    size: "small" | "medium";
+    size?: "medium" | "large";
     label?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
     inputClassName?: string;
     invisible?: boolean;
-    preventOpenOnFocus?: boolean;
     locale?: string;
-}
+};
 export declare const DateTimeField: React.FC<DateTimeFieldProps>;
-export {};

package/dist/components/Dialog.d.ts

@@ -11,6 +11,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;
 };
 declare const widthClasses: {
     xs: string;
@@ -26,5 +29,5 @@ declare const widthClasses: {
     "7xl": string;
     full: string;
 };
-export declare const Dialog: ({ open, onOpenChange, children, className, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ open, onOpenChange, children, className, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DialogContent.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-export declare function DialogContent({ children, className, fullHeight }: {
+export declare function DialogContent({ children, className, fullHeight, includeMargin }: {
     children: React.ReactNode;
+    includeMargin?: boolean;
     fullHeight?: boolean;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/DialogTitle.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { TypographyProps, TypographyVariant } from "./Typography";
+export type DialogContentProps = TypographyProps & {
+    children: React.ReactNode;
+    hidden?: boolean;
+    className?: string;
+    includeMargin?: boolean;
+    variant?: TypographyVariant;
+};
+export declare function DialogTitle({ children, hidden, className, variant, gutterBottom, includeMargin, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ExpandablePanel.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-export declare function ExpandablePanel({ title, children, invisible, expanded, onExpandedChange, initiallyExpanded, titleClassName, asField, className }: PropsWithChildren<{
+export declare function ExpandablePanel({ title, children, invisible, expanded, onExpandedChange, initiallyExpanded, titleClassName, asField, className, innerClassName }: PropsWithChildren<{
     title: React.ReactNode;
     invisible?: boolean;
     initiallyExpanded?: boolean;
@@ -8,4 +8,5 @@ export declare function ExpandablePanel({ title, children, invisible, expanded,
     titleClassName?: string;
     asField?: boolean;
     className?: string;
+    innerClassName?: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/components/FileUpload.d.ts

@@ -5,7 +5,7 @@ export interface FileUploadError {
 }
 export type OnFileUploadRejected = (fileRejections: {
     file: File;
-    errors: FileUploadError[];
+    errors: readonly FileUploadError[];
 }[], event: object) => void;
 export type OnFilesUploadAdded = (files: File[]) => void;
 export type FileUploadProps = {
@@ -18,6 +18,6 @@ export type FileUploadProps = {
     title?: React.ReactNode;
     uploadDescription?: React.ReactNode;
     preventDropOnDocument?: boolean;
-    size?: "small" | "medium";
+    size?: "medium" | "large";
 };
 export declare function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, children, preventDropOnDocument, size }: React.PropsWithChildren<FileUploadProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/InputLabel.d.ts

@@ -6,6 +6,6 @@ export type InputLabelProps = {
 } & React.LabelHTMLAttributes<HTMLLabelElement>;
 export declare const InputLabel: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
-    className?: string | undefined;
-    shrink?: boolean | undefined;
+    className?: string;
+    shrink?: boolean;
 } & React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/Label.d.ts

@@ -1,4 +1,7 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
+    border?: boolean;
+    onClick?: React.MouseEventHandler<HTMLLabelElement>;
+} & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/components/Markdown.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export interface MarkdownProps {
     source: string;
+    size?: "small" | "medium" | "large" | "xl" | "2xl";
     className?: string;
 }
 /**

package/dist/components/Menu.d.ts

@@ -6,11 +6,15 @@ export type MenuProps = {
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
     portalContainer?: HTMLElement | null;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
 };
-export declare function Menu({ children, trigger, open, defaultOpen, onOpenChange, portalContainer }: MenuProps): import("react/jsx-runtime").JSX.Element;
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;
+export { Menu };
 export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;
     onClick?: (event: React.MouseEvent) => void;
 };
-export declare function MenuItem({ children, dense, onClick }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ children, dense, // Default value is false if not provided
+onClick }: MenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menubar.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+export declare function Menubar({ children, onSelect, className }: {
+    children: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarMenu({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarTrigger({ children, onSelect, className }: {
+    children: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarPortal({ children, }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarContent({ children, className, align, sideOffset, alignOffset, onSelect, ...rest }: {
+    children: React.ReactNode;
+    className?: string;
+    onSelect?: (event: React.SyntheticEvent) => void;
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    alignOffset?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarItem({ children, leftPadding, className, disabled, onSelect, ...rest }: {
+    children: React.ReactNode;
+    onSelect?: (event: Event) => void;
+    leftPadding?: boolean;
+    className?: string;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarSeparator({ children, className, ...rest }: {
+    children?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarSub({ children, ...rest }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarSubTrigger({ children, className, onSelect, ...rest }: {
+    children?: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarSubContent({ children, alignOffset, className, onSelect, ...rest }: {
+    children?: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
+    alignOffset?: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarCheckboxItem({ children, checked, onCheckedChange, className, onSelect, ...rest }: {
+    children?: React.ReactNode;
+    onSelect?: (event: Event) => void;
+    checked?: boolean;
+    onCheckedChange?: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarItemIndicator({ children, className, ...rest }: {
+    children?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarRadioGroup({ children, className, value, onValueChange, onSelect, ...rest }: {
+    children?: React.ReactNode;
+    onSelect?: (event: React.SyntheticEvent) => void;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarRadioItem({ children, className, value, onSelect, ...rest }: {
+    children?: React.ReactNode;
+    onSelect?: (event: Event) => void;
+    value: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarShortcut({ children, className, ...rest }: {
+    children?: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarSubTriggerIndicator(): import("react/jsx-runtime").JSX.Element;

package/dist/components/MultiSelect.d.ts

@@ -1,35 +1,51 @@
 import * as React from "react";
-export type MultiSelectProps = {
+import { ChangeEvent } from "react";
+interface MultiSelectContextProps {
+    fieldValue?: string[];
+    onItemClick: (v: string) => void;
+}
+export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps {
+    /**
+     * The modality of the popover. When set to true, interaction with outside elements
+     * will be disabled and only popover content will be visible to screen readers.
+     * Optional, defaults to false.
+     */
+    modalPopover?: boolean;
+    /**
+     * Additional class names to apply custom styles to the multi-select component.
+     * Optional, can be used to add custom styles.
+     */
+    className?: string;
     open?: boolean;
     name?: string;
     id?: string;
     onOpenChange?: (open: boolean) => void;
     value?: string[];
-    containerClassName?: string;
-    className?: string;
     inputClassName?: string;
-    onMultiValueChange?: (updatedValue: string[]) => void;
+    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
+    onValueChange?: (updatedValue: string[]) => void;
     placeholder?: React.ReactNode;
-    renderValue?: (values: string, index: number) => React.ReactNode;
-    renderValues?: (values: string[]) => React.ReactNode;
     size?: "small" | "medium";
-    label?: React.ReactNode;
+    useChips?: boolean;
+    label?: React.ReactNode | string;
     disabled?: boolean;
     error?: boolean;
     position?: "item-aligned" | "popper";
     endAdornment?: React.ReactNode;
+    multiple?: boolean;
+    includeSelectAll?: boolean;
+    includeClear?: boolean;
     inputRef?: React.RefObject<HTMLButtonElement>;
     padding?: boolean;
-    includeFocusOutline?: boolean;
-    children?: React.ReactNode;
-};
-interface MultiSelectContextProps {
-    fieldValue?: string[];
-    setInputValue: (v: string) => void;
-    onValueChangeInternal: (v: string) => void;
+    invisible?: boolean;
+    children: React.ReactNode;
+    renderValues?: (values: string[]) => React.ReactNode;
 }
-export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
-export declare function MultiSelect({ value, open, onMultiValueChange, size, label, disabled, renderValue, renderValues, includeFocusOutline, containerClassName, className, children, error }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
 export interface MultiSelectItemProps {
     value: string;
     children?: React.ReactNode;

package/dist/components/Popover.d.ts

@@ -17,5 +17,6 @@ export interface PopoverProps {
     enabled?: boolean;
     modal?: boolean;
     className?: string;
+    portalContainer?: HTMLElement | null;
 }
-export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, className }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, portalContainer, className }: PopoverProps): import("react/jsx-runtime").JSX.Element;