@simoncomputing/mui-bueno-v3 0.1.12

package/dist/components/Form/Inputs/Autocomplete/DynamicAutocomplete/DynamicAutocomplete.d.ts

@@ -0,0 +1,31 @@
+import { AutocompleteProps } from '../Autocomplete';
+export type DynamicAutocompleteProps<T> = {
+    /**
+     * Execute your API call to retrieve your list of options
+     * @param searchInput Search string entered by the user
+     * @returns List of options T[]
+     */
+    onFilter: (searchInput: string) => Promise<T[]>;
+    /**
+     * Callback when `onFilter` fails
+     * @param error Error thrown by retrieving the list of options (onFilter)
+     */
+    onFilterError: (error: any) => void;
+    /**
+     * Fetches when the users input is at least `fetchOnCount` characters long. Default is 1. Recommend no larger than 3.
+     */
+    fetchOnCount?: number;
+    /**
+     * This message displays in the dropdown when the user input is empty, or less than `fetchOnCount` to let the
+     * user know they need to input more characters to get options back.
+     *
+     * @default the message defined in `noOptionsText` is used
+     */
+    preFilterMessage?: string;
+} & Omit<AutocompleteProps<T>, 'options' | 'useFieldAsValue'>;
+/**
+ * Like a normal Autocomplete, but filters the options as the user types (intended for server-side filtering).
+ *
+ * Useful when you have thousands of options, as it reduces the memory load and amount of data coming over the network.
+ */
+export declare const DynamicAutocomplete: <T>(props: DynamicAutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/Inputs/Autocomplete/MultiAutocomplete/MultiAutocomplete.d.ts

@@ -0,0 +1,22 @@
+import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
+import { BaseAutocompleteProps } from '../Autocomplete';
+/**
+ * Type used to define props passed into Autocomplete component
+ */
+export type MultiAutocompleteProps<T> = Omit<BaseAutocompleteProps<T>, 'clearOnSelect'> & Omit<MuiAutocompleteProps<T, // Option type
+true, // Multiple -- allows multiple options to be selected (enables `multiple` prop)
+false, // DisableClearable -- disables the clear button (enables `disableClearable` prop)
+false>, 'renderInput' | 'options' | 'value' | 'multiple' | 'freeSolo' | 'inputValue'>;
+/**
+ * `Autocomplete` is a mix between a `TextField` and `Select` component.
+ * As the user types, options that match their query are presented.
+ *
+ * Use this component when you have a lot of options and want to reduce the amount of scrolling
+ * users would have to do if they were to use a `Select`.
+ *
+ * Can be used with primitives or objects. For objects, make sure to override `getOptionLabel`.
+ *
+ * __IMPORTANT__: If you need to dynamically load options as the user types, check out `DynamicAutocomplete`, as this
+ * has automated a lot of the settings.
+ */
+export declare const MultiAutocomplete: <T>(props: MultiAutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/Inputs/Autocomplete/utils.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteOption } from '../../../../@types';
+export declare const getMultiAutocompleteValue: <T>(value: T[] | undefined, options: AutocompleteOption<T>[] | undefined, isEqual: (obj1?: T | null, obj2?: T | null) => boolean) => AutocompleteOption<T>[];

package/dist/components/Form/Inputs/Checkbox/Checkbox.d.ts

@@ -0,0 +1,58 @@
+import { CheckboxProps as MuiCheckboxProps, TypographyProps } from '@mui/material';
+import * as React from "react";
+type BaseCheckboxProps = {
+    /**
+     * Must match a key from initialValues in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * The label for the checkbox.
+     * @recommended
+     */
+    label?: string;
+    /**
+     * Optional, additional label that appears below `label` and provides additional
+     * context, if necessary.
+     */
+    sublabel?: string;
+    /**
+     * Where the label is placed in relation to the box.
+     * @default 'end'
+     */
+    labelPlacement?: "start" | "end" | "top" | "bottom";
+    /**
+     * Vertical alignment of the label with respect to the checkbox. This is mainly for longer labels, or checkboxes with sublabels.
+     * Only applied when `labelPlacement` is 'start' or 'end'.
+     *
+     * Center: Verticaly aligns the checkbox with the center of the label (& sublabel)
+     *
+     * Top: Vertically aligns the checkbox with the first line of the label
+     *
+     * Defaults to 'top' when labelPlacement is 'start' | 'end. Otherwise, defaults to 'center'.
+     * @default 'top'
+     */
+    labelAlignment?: "center" | "top";
+    /**
+     * If true, an asterisk will be displayed next to the label
+     * Most browsers will automatically validate this, but it's recommended to also
+     * have Formik also validate as well so that `Error` displays for consistency.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * If set, this component is read only and will only display if the checkbox is checked.
+     */
+    readOnly?: boolean;
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    staticLabelProps?: TypographyProps;
+};
+export type CheckboxProps = BaseCheckboxProps & Omit<MuiCheckboxProps, "checked" | "name">;
+/**
+ * `Checkbox` provides a Material-UI Checkbox.
+ */
+export declare const Checkbox: React.FC<CheckboxProps>;
+export {};

package/dist/components/Form/Inputs/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,112 @@
+import { TypographyProps, TextFieldProps } from '@mui/material';
+import * as React from "react";
+export type CheckboxOption = string | {
+    label: string;
+    sublabel?: string;
+    textField?: TextFieldProps;
+};
+export type CheckboxGroupProps = {
+    /**
+     * Name and ID of the component. It should match a key in initialValues.
+     * @required
+     */
+    name: string;
+    /**
+     * Label for the checkbox group.
+     * @recommended
+     * @default props.name
+     */
+    label?: string;
+    /**
+     * Array of labels for the checkboxes in the group
+     * @recommended
+     */
+    checkboxes?: CheckboxOption[];
+    /**
+     * Disables all checkboxes.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the label above the checkboxes is disabled.
+     */
+    disableLabel?: boolean;
+    /**
+     * If true, the label of the the checkbox group will not be displayed in an error state if there are errors present.
+     */
+    disableRedLabelOnError?: boolean;
+    /**
+     * If true, causes the label to enter a focused state.
+     */
+    focused?: boolean;
+    /**
+     * Location of the label with respect to the checkboxes
+     * @default 'end'
+     */
+    labelPlacement?: "top" | "start" | "bottom" | "end";
+    /**
+     * Vertical alignment of the label with respect to the checkboxes. This is mainly for longer labels, or checkboxes with sublabels.
+     * Only applied when `labelPlacement` is 'start' or 'end'.
+     *
+     * Center: Verticaly aligns the checkbox with the center of the label (& sublabel)
+     *
+     * Top: Vertically aligns the checkbox with the first line of the label
+     *
+     * Defaults to 'top' when labelPlacement is 'start' | 'end. Otherwise, defaults to 'center'.
+     * @default 'top'
+     */
+    labelAlignment?: "center" | "top";
+    /**
+     * If true, an asterisk will be displayed next to the label
+     * Most browsers will automatically validate this, but it's recommended to also
+     * have Formik also validate as well so that `Error` displays for consistency.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * If `true`, the component becomes readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * If set, the user can select up to `max` options
+     */
+    max?: number;
+    /**
+     * If set, the user must select, at minimum, `min` options
+     */
+    min?: number;
+    /**
+     * If set, this subtitle is displayed under the label to notify the user of how many options they can select max.
+     * @default `Up to ${max} max`
+     */
+    maxSubtitle?: string;
+    /**
+     * If set, this subtitle is displayed under the label to notify the user of how many options they can select minimum.
+     * @requires min
+     * @default `Please select ${min} or more`
+     */
+    minSubtitle?: string;
+    /**
+     * If set, this subtitle is displayed under the label to notify the user of how many options they can select within a range.
+     * @requires min
+     * @requires max
+     * @default `Please select between ${min} and ${max} options`
+     */
+    minMaxSubtitle?: string;
+    /**
+     * Margin for the FormControl
+     */
+    margin?: "dense" | "none" | "normal";
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    staticLabelProps?: TypographyProps;
+};
+/**
+ * CheckboxGroup produces a group of checkboxes that's defined as an array of strings or Checkboxes.
+ *
+ * This component is ideal for limited options. For more than 4 options, use a MultiAutocomplete instead.
+ */
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;

package/dist/components/Form/Inputs/CitationField/CitationBubbleMenuHandler.d.ts

@@ -0,0 +1,43 @@
+import { Extension } from '@tiptap/core';
+import { CitationBubbleMenuProps } from './CitationMenu/CitationBubbleMenu';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        citation: {
+            /**
+             * Open/show the link bubble menu. Create a link if one doesn't exist at
+             * the current cursor selection, or edit the existing link if there is
+             * already a link at the current selection.
+             *
+             * If the options are provided, they're used to override the bubble menu
+             * props, which can be useful for specific positioning needs. Each call to
+             * `openLinkBubbleMenu` will reset the options based on the provided
+             * argument, falling back to default behavior if not provided.
+             *
+             * For instance, if the anchorEl option is provided, it overrides the
+             * anchor point for positioning the bubble menu. (The default anchorEl for
+             * LinkBubbleMenu is to anchor to the location in the editor content where
+             * the link appears or will appear.)
+             */
+            openCitationBubbleMenu: (options?: Partial<CitationBubbleMenuProps>, selectedNodePos?: number) => ReturnType;
+            /** Close/hide the link bubble menu, canceling any ongoing edits. */
+            closeCitationBubbleMenu: () => ReturnType;
+        };
+    }
+}
+export type CitationBubbleMenuHandlerStorage = {
+    isOpen: boolean;
+    selectedIds: number[];
+    bubbleMenuOptions: Partial<CitationBubbleMenuProps> | undefined;
+    selectedNodePos: number | undefined;
+};
+/**
+ * To be used in conjunction with the `CitationBubbleMenuTipTap` component, as this
+ * extension provides editor commands to control the state of the link bubble
+ * menu.
+ *
+ * The Tiptap Link extension (@tiptap/extension-link) should also be installed
+ * and included in your extensions when using CitationBubbleMenuHandler:
+ * https://tiptap.dev/api/marks/link.
+ */
+declare const CitationBubbleMenuHandler: Extension<undefined, CitationBubbleMenuHandlerStorage>;
+export default CitationBubbleMenuHandler;

package/dist/components/Form/Inputs/CitationField/CitationField.d.ts

@@ -0,0 +1,78 @@
+import { TypographyProps } from '@mui/material';
+import { Citation, PageState, PageResponse, UnsavedCitation, UnsavedAttachment } from '../../../../@types';
+export type CitationFieldProps = {
+    /**
+     * Name and ID of the component. Must match a key from initialValues in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * (Optional) Label. NOTE: this won't be floating, it's always static.
+     */
+    label?: string;
+    /**
+     * Styling for label
+     */
+    labelProps?: TypographyProps;
+    /**
+     * If `true`, the component becomes readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Margin for the FormControl
+     */
+    margin?: 'dense' | 'none' | 'normal';
+    renderContentOnly?: never;
+    /**
+     * API call for fetching paginated citations. These will populate the "Insert Citation/Attachment(s)" table.
+     *
+     * If an error occurs during the API call, notify the user then throw the error so that
+     * Mui Bueno can handle updating state.
+     */
+    fetchExistingCitations: (req: PageState) => Promise<PageResponse<Citation>>;
+    /**
+     * API call for creating a new citation/attachment.
+     *
+     * If an error occurs during the API call, notify the user then throw the error so that
+     * Mui Bueno can handle updating state.
+     */
+    onCreateCitation: (citation: UnsavedCitation) => Promise<Citation>;
+    /**
+     * API call for updating a citation/attachment.
+     *
+     * If an error occurs during the API call, notify the user then throw the error so that
+     * Mui Bueno can handle updating state.
+     */
+    onUpdateCitation: (citation: Citation) => Promise<Citation>;
+    /**
+     * API call for retrieving a citation by id
+     *
+     * If an error occurs during the API call, notify the user then throw the error so that
+     * Mui Bueno can handle updating state.
+     */
+    getCitationById: (id: number) => Promise<Citation>;
+    /**
+     * API call for storing an attachment (ex. in an s3 bucket)
+     *
+     * If an error occurs during the API call, notify the user then throw the error so that
+     * Mui Bueno can handle updating state.
+     */
+    onStoreAttachment: (citation: UnsavedAttachment) => Promise<Citation>;
+    /**
+     * API call for retrieving an array citations by an array ids
+     *
+     * If an error occurs during the API call, notify the user then throw the error so that
+     * Mui Bueno can handle updating state.
+     */
+    getCitationsByIds: (ids: number[]) => Promise<Citation[]>;
+};
+/**
+ * Rich Text field -- uses MUI Tip Tap
+ *
+ * Formik -- This field cannot be completely controlled, so keep in mind that the Formik value will not update until the field
+ * __loses focus__. This is to prevent issues with converting from rich text to HTML as the user types as it could override
+ * their changes unintentionally.
+ */
+export declare const CitationField: (props: CitationFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default CitationField;

package/dist/components/Form/Inputs/CitationField/CitationMenu/AttachmentForm.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { Citation, UnsavedAttachment } from '../../../../../@types';
+export type NewAttachmentFormProps = {
+    id?: number;
+    editMenuTitle: ReactNode;
+    onSave: (citation: UnsavedAttachment) => Promise<void>;
+    onCancel: () => void;
+    getCitationById: (id: number) => Promise<Citation>;
+    disableFileUpload?: boolean;
+    onTitleChanged?: (id: number) => void;
+};
+declare const NewAttachmentForm: (props: NewAttachmentFormProps) => import("react/jsx-runtime").JSX.Element;
+export default NewAttachmentForm;

package/dist/components/Form/Inputs/CitationField/CitationMenu/CitationBubbleMenu.d.ts

@@ -0,0 +1,25 @@
+import { Except } from 'type-fest';
+import { ControlledBubbleMenuProps } from 'mui-tiptap';
+import { CitationMenuProps } from './CitationMenu';
+export type CitationBubbleMenuProps = Partial<Except<ControlledBubbleMenuProps, 'open' | 'editor' | 'children'>> & Omit<CitationMenuProps, 'onSelectCitations' | 'onCancel'>;
+/**
+ * TipTap Wrapper for CitationMenu so that it renders as a bubble/pop-up menu integrated
+ * with TipTap
+ *
+ * A component that renders a bubble menu when viewing, creating, or editing a
+ * link. Requires the mui-tiptap CitationBubbleMenuHandler extension and Tiptap's
+ * Link extension (@tiptap/extension-link, https://tiptap.dev/api/marks/link) to
+ * both be included in your editor `extensions` array.
+ *
+ * Pairs well with the `<MenuButtonEditLink />` component.
+ *
+ * If you're using `RichTextEditor`, include this component via
+ * `RichTextEditor`’s `children` render-prop. Otherwise, include the
+ * `LinkBubbleMenu` as a child of the component where you call `useEditor` and
+ * render your `RichTextField` or `RichTextContent`. (The bubble menu itself
+ * will be positioned appropriately no matter where you put it in your React
+ * tree, as long as it is re-rendered whenever the Tiptap `editor` forces an
+ * update, which will happen if it's a child of the component using
+ * `useEditor`).
+ */
+export default function CitationBubbleMenuTipTap({ fetchExistingCitations, onCreateCitation, onUpdateCitation, getCitationById, onStoreAttachment, onTitleChanged, ...controlledBubbleMenuProps }: CitationBubbleMenuProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Form/Inputs/CitationField/CitationMenu/CitationForm.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { Citation, UnsavedCitation } from '../../../../../@types';
+export type NewCitationFormProps = {
+    id?: number;
+    editMenuTitle: ReactNode;
+    onSave: (citation: UnsavedCitation) => Promise<void>;
+    onCancel: () => void;
+    getCitationById: (id: number) => Promise<Citation>;
+    onTitleChanged?: (id: number) => void;
+};
+declare const NewCitationForm: (props: NewCitationFormProps) => import("react/jsx-runtime").JSX.Element;
+export default NewCitationForm;

package/dist/components/Form/Inputs/CitationField/CitationMenu/CitationMenu.d.ts

@@ -0,0 +1,62 @@
+import { Citation, PageState, PageResponse, UnsavedCitation, UnsavedAttachment } from '../../../../../@types';
+export interface CitationMenuProps {
+    /**
+     * API call for fetching citations. These will populate the "Insert Citation/Attachment(s)" table.
+     */
+    fetchExistingCitations: (req: PageState) => Promise<PageResponse<Citation>>;
+    /**
+     * API call for creating a new citation/attachment.
+     */
+    onCreateCitation: (citation: UnsavedCitation) => Promise<Citation>;
+    /**
+     * API call for updating a citation/attachment.
+     */
+    onUpdateCitation: (citation: Citation) => Promise<Citation>;
+    /**
+     * API call for retrieving a citation by id
+     */
+    getCitationById: (id: number) => Promise<Citation>;
+    /**
+     * API call for storing an attachment (ex. in an s3 bucket)
+     */
+    onStoreAttachment: (citation: UnsavedAttachment) => Promise<Citation>;
+    /**
+     * Set which citations should be pre-checked in the citations table when this component is first rendered (used
+     * to initialize useState).
+     */
+    initialSelectedIds?: number[];
+    /**
+     * Callback for when the user clicks the "Select" button. This passes an array of selected citations
+     * that the user chose to the parent component.
+     */
+    onSelectCitations: (citationIds: number[]) => void;
+    /**
+     * Callback for when the user clicks the "Cancel" button. If you're using a modal, close your modal here.
+     */
+    onCancel: () => void;
+    /**
+     * Callback whenever the size of the content potentially changes. Use this if you're using something like
+     * a Popper, so that it can reposition itself when the dimensions of its content changes.
+     *
+     * Currently, this will be called when the data in the citations table changes, and when the content itself changes (ex. clicks on "Add Citation")
+     */
+    onContentUpdate?: () => void;
+    /**
+     * Optional callback, used to notify parent that the user has changed their Citation's title.
+     */
+    onTitleChanged?: (id: number) => void;
+}
+export declare enum CitationMenuState {
+    CITATIONS_TABLE = 0,
+    ADD_CITATION = 1,
+    EDIT_CITATION = 2,
+    ADD_ATTACHMENT = 3,
+    EDIT_ATTACHMENT = 4
+}
+/**
+ * CitationMenu handles creating, updating, and selecting citations.
+ *
+ * Intended to be used within a bubble/pop-up/modal/dialog. For in-line citations, see CitationField instead.
+ */
+export declare function CitationMenu({ fetchExistingCitations, onCreateCitation, onUpdateCitation, getCitationById, onStoreAttachment, onSelectCitations, onCancel, initialSelectedIds, onContentUpdate, onTitleChanged, }: CitationMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default CitationMenu;

package/dist/components/Form/Inputs/CitationField/CitationMenu/CitationTable.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { PageState, PageResponse, Citation } from '../../../../../@types';
+export type CitationTableProps = {
+    editMenuTitle: ReactNode;
+    onCancel: () => void;
+    onNewCitation: () => void;
+    onNewAttachment: () => void;
+    onEditCitation: (citation: Citation) => void;
+    onEditAttachment: (citation: Citation) => void;
+    onSelect: (selectedIds: number[]) => void;
+    fetchExistingCitations: (req: PageState) => Promise<PageResponse<Citation>>;
+    selectedIds: number[];
+    toggleCheckbox: (citation: Citation) => void;
+};
+declare const CitationTable: (props: CitationTableProps) => import("react/jsx-runtime").JSX.Element;
+export default CitationTable;

package/dist/components/Form/Inputs/CitationField/CitationNode.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@tiptap/core';
+export declare const CitationNode: Node<any, any>;

package/dist/components/Form/Inputs/CitationField/CitationNodeComponent.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { NodeViewProps } from '@tiptap/react';
+/**
+ * Handles API fetch for CitationNode in order to dynamically load the title, based on a citation's id
+ */
+declare const CitationNodeComponent: React.FC<NodeViewProps>;
+export default CitationNodeComponent;

package/dist/components/Form/Inputs/CitationField/CitationRefreshContext/CitationRefreshContext.d.ts

@@ -0,0 +1,29 @@
+import { Citation } from '../../../../../@types';
+type CitationRefreshProviderProps = {
+    /**
+     * CitationField(s)
+     */
+    children: React.ReactNode;
+    /**
+     *  array of unqiue ids of citations currently being referenced in the editor
+     */
+    citationIds: number[];
+    /**
+     * API call for fetching citations. Triggered internally when citationIds changes.
+     */
+    getCitationsByIds: (ids: number[]) => Promise<Citation[]>;
+    /**
+     * Id of the citation that had a title changed. Used internally to determine whether or
+     * not to trigger an API refresh of the citation list.
+     */
+    titleChangedId: number | undefined;
+};
+export declare function CitationRefreshProvider({ children, citationIds, getCitationsByIds, titleChangedId, }: CitationRefreshProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useCitationRefreshContext: () => {
+    /**
+     * Array of ALL UNIQUE citations being referenced in the editor.
+     * (Not to be confused with table of citations in the bubble menu -- this is only the citations actually in the editor itself)
+     */
+    citations: Citation[];
+};
+export {};

package/dist/components/Form/Inputs/CitationField/MenuButtonEditCitation.d.ts

@@ -0,0 +1,3 @@
+import { MenuButtonProps } from 'mui-tiptap';
+export type MenuButtonEditCitationProps = Partial<MenuButtonProps>;
+export default function MenuButtonEditCitation(props: MenuButtonEditCitationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/Inputs/DateField/DateField.d.ts

@@ -0,0 +1,73 @@
+import { TypographyProps } from '@mui/material';
+import { DateFieldProps as MuiDateFieldProps } from '@mui/x-date-pickers/DateField';
+import { Dayjs } from 'dayjs';
+import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { DateValidationError, PickerChangeHandlerContext } from '@mui/x-date-pickers';
+import * as React from 'react';
+type BaseDateFieldProps = {
+    /**
+     * Name and ID of the component. Must match a key from initialValues in MForm.
+     * @required
+     */
+    name: string;
+    /**
+     * Label for the Date field. `name` will be used if none is provided
+     */
+    label?: string;
+    /**
+     * If true, an asterisk will be displayed next to the labels
+     * Most browsers will automatically validate this, but it's recommended to also
+     * have MForm also validate as well so that `Error` displays for consistency.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * If `true`, the component becomes readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Format of the date as shown to the user (not used internally)
+     */
+    format?: string;
+    /**
+     * Customize error messages for each key (maxDate, minDate, invalidDate, etc.)
+     */
+    errorMessages?: {
+        [key: string]: string;
+    };
+    /**
+     * If true, field will render as a Date Picker (Date Field w/ calendar) rather than a Date Field (no calendar, just input w/ mask)
+     */
+    isDatePicker?: boolean;
+    /**
+     * Margin for the FormControl
+     */
+    margin?: 'dense' | 'none' | 'normal';
+    /**
+     * If true, the prepackaged dynamic input label that comes with Material UI's input components
+     * will be replaced with a static typography label above the input.
+     * @default false
+     */
+    staticLabel?: boolean;
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    staticLabelProps?: TypographyProps;
+    onChange?: (val: string | undefined, context: PickerChangeHandlerContext<DateValidationError>) => void;
+};
+interface DateFieldOnlyProps extends BaseDateFieldProps, Omit<DatePickerProps<Dayjs>, 'label' | 'name' | 'onChange'> {
+    isDatePicker?: false;
+}
+interface DatePickerOnlyProps extends BaseDateFieldProps, Omit<MuiDateFieldProps<Dayjs>, 'label' | 'name' | 'onChange'> {
+    isDatePicker: true;
+}
+export type DateFieldProps = DateFieldOnlyProps | DatePickerOnlyProps;
+/**
+ * Date Field with optional Picker
+ *
+ * MForm will use ISO dates (in UTC) internally as the value.
+ */
+export declare const DateField: React.FC<DateFieldProps>;
+export {};