@simoncomputing/mui-bueno-v3 0.1.12

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

@@ -0,0 +1,62 @@
+import { DateFieldProps } from '../DateField';
+import * as React from 'react';
+type BaseDateRangeFieldProps = {
+    /**
+     * Name and ID of the "from" date field. Must match a key from initialValues in MForm.
+     * @required
+     */
+    nameFrom: string;
+    /**
+     * Name and ID of the "to" date field. Must match a key from initialValues in MForm.
+     * @required
+     */
+    nameTo: string;
+    /**
+     * Label for the `from` field.
+     */
+    labelFrom?: string;
+    /**
+     * Label for the `to` field.
+     */
+    labelTo?: 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 (applies to both fields)
+     */
+    format?: string;
+    /**
+     * If true, calendar icon that displays an interactable calendar will appear when interacted with
+     */
+    isDatePicker?: boolean;
+    /**
+     * Props for the `from` field. Use this to apply props *only* to this field. To apply props to both, pass the prop directly on this component.
+     */
+    fromFieldProps?: DateFieldProps;
+    /**
+     * Props for the `to` field. Use this to apply props *only* to this field. To apply props to both, pass the prop directly on this component.
+     */
+    toFieldProps?: DateFieldProps;
+    /**
+     * 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
+     */
+    staticLabels?: boolean;
+};
+export type DateRangeFieldProps = BaseDateRangeFieldProps & Omit<DateFieldProps, 'label' | 'name' | 'isDatePicker' | 'format' | 'readOnly'>;
+/**
+ * `DateRangeField` provides an input for a range of dates (2). For individual Date fields, see `DateField`.
+ */
+export declare const DateRangeField: React.FC<DateRangeFieldProps>;
+export {};

package/dist/components/Form/Inputs/DateField/dayjs-utils.d.ts

@@ -0,0 +1,2 @@
+import { default as dayjs } from 'dayjs';
+export default dayjs;

package/dist/components/Form/Inputs/FileUpload/FileList/FileList.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type FileListProps = {
+    /**
+     * Name of the component. Must match the name of the corresponding FileUpload.
+     * @required
+     */
+    name: string;
+};
+/**
+ * Simple component for displaying the file(s) selected by the user via FileUpload
+ */
+export declare const FileList: React.FC<FileListProps>;
+export default FileList;

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

@@ -0,0 +1,62 @@
+import { TypographyProps } from '@mui/material';
+import * as React from 'react';
+export type FileUploadProps = {
+    /**
+     * Must match a key from initialValues in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * File extensions that FileUpload will accept. Does NOT restrict files selected via drag & drop.
+     *
+     * IMPORTANT: Do not rely on this prop as a validator. The server should be validating all files to ensure they are the correct type. For more information, see [W3Schools HTML Input accept attribute](https://www.w3schools.com/TAGS/att_input_accept.asp).
+     */
+    fileType?: string | string[];
+    /**
+     * If true, the user will be able to upload multiple files.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Choose whether to have a button or drag-and-drop. Drag-and-drop is default when `multiple` is true.
+     */
+    variant?: 'button' | 'drag-and-drop';
+    /**
+     * If `true`, the component becomes readonly. It will only be visible if a file is present.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * [Drag & Drop] Subtitle
+     *
+     * By default, it will display the accepted file extensions, if specified. Blank otherwise. Ex. "Allowed file extensions: .png"
+     */
+    subtitle?: string;
+    /**
+     * Callback that is called when the user attempts to select a file that is already selected. Use this to handle validation and/or UI warnings/errors regarding duplicate files.
+     * @param duplicateFiles List of files that was already selected
+     */
+    duplicateFilesCallback?: (duplicateFiles: File[]) => void;
+    /**
+     * Callback that is called when the user attempts to select a file that is not included in `fileType`. Must have `fileType` defined. Use this to handle validation and/or UI warnings/errors regarding files with prohibitted file extensions.
+     * @param incorrectFileTypes List of files that have prohibitted file types
+     */
+    incorrectFileTypesCallback?: (incorrectFileTypes: File[]) => void;
+    /**
+     * 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;
+};
+/**
+ * Allows the user to select file(s) from their computer.
+ *
+ * Based on [Material UI's File Upload](https://mui.com/material-ui/react-button/#file-upload). Alternatively, a drag-and-drop option is also available.
+ *
+ * This component automatically ignores duplicate files to avoid render issues (primarily in regards to duplicate React keys).
+ *
+ * This component automatically ignores files that have incorrect file extensions when `fileType` is defined. __IMPORTANT: Do not rely on this `fileType` as a validator.__ The server should be validating all files to ensure they are the correct type. For more information, see [W3Schools HTML Input accept attribute](https://www.w3schools.com/TAGS/att_input_accept.asp).
+ *
+ * __NOTE: Input only.__ Does not display the file(s) chosen by the user. You will need to implement this yourself and/or use `FileList`. View the Storybook stories for `FileUpload` for more information.
+ */
+export declare const FileUpload: React.FC<FileUploadProps>;

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

@@ -0,0 +1,69 @@
+import { TypographyProps } from '@mui/material';
+import { TextFieldProps } from '../TextField/TextField';
+import * as React from 'react';
+type BaseLocationProps = {
+    /**
+     * Name of the component. Must match the initialValue name in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * API Key. Needed for Location to work.
+     *
+     * NOTE: MAKE SURE TO TIE YOUR API KEY TO A DOMAIN TO ENSURE THE SECURITY OF YOUR KEY
+     * @required
+     */
+    apiKey: string;
+    /**
+     * The label for the text field.
+     * @recommended
+     * @default props.name
+     */
+    label?: string;
+    /**
+     * If true, the parts of the location suggestions that match the input are highlighted
+     * @default true
+     */
+    highlightMatches?: boolean;
+    /**
+     * The icon shown to the left of each location suggestion.
+     * Use false to indicate no icon
+     * @default <LocationOnIcon/>
+     */
+    resultIcon?: React.ReactElement | false;
+    /**
+     * If specified, restrict results from a Place Autocomplete request to be of a certain type.
+     * More information can be found [here](https://developers.google.com/places/supported_types#table3)
+     */
+    types?: 'geocode' | 'address' | 'establishment' | '(regions)' | '(cities)';
+    /**
+     * Specifies the visual input style.
+     * @default 'standard'
+     */
+    variant?: 'filled' | 'outlined' | 'standard';
+    /**
+     * 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.
+     */
+    staticLabelProps?: TypographyProps;
+    /**
+     * Margin for the FormControl
+     */
+    margin?: 'dense' | 'none' | 'normal';
+};
+export type LocationProps = BaseLocationProps & TextFieldProps;
+/**
+ * The `Location` component provides a Google Maps Places Autocomplete functionality to the Mui Bueno library.
+ * It supplies a text field that upon input provides location suggestions.
+ *
+ * Note: You must have an active Google Maps API key to use this component. More information on creating API keys can be found
+ * at the [Google Maps API documentation](https://developers.google.com/maps/documentation/javascript/get-api-key).
+ */
+export declare const Location: React.FC<LocationProps>;
+export {};

package/dist/components/Form/Inputs/Location/Location.types.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Represents a prediction substring.
+ *
+ * **Props**
+ * - `offset`
+ *      - Type: `number`
+ *      - The offset to the substring's start within the description string.
+ * - `length`
+ *      - Type: `number`
+ *      - The length of the substring
+ *
+ * https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#PredictionSubstring
+ */
+export type PredictionSubstring = google.maps.places.PredictionSubstring;
+/**
+ * Structured information about the place's description, divided into a main text and a secondary text,
+ * including an array of matched substrings from the autocomplete input,
+ * identified by an offset and a length, expressed in unicode characters.
+ *
+ * **Props**
+ * - `main_text`
+ *      - Type: `string`
+ *      - This is the main text part of the unformatted description of the place suggested
+ *      by the Places service. Usually the name of the place.
+ * - `secondary_text`
+ *      - Type: `string`
+ *      - This is the secondary text part of the unformatted description of the place suggested
+ *      by the Places service. Usually the location of the place.
+ * - `main_text_matched_substrings`
+ *      - Type: `PredictionSubstring[]`
+ *      - A set of substrings in the main text that match elements in the user's input, suitable for
+ *      use in highlighting those substrings. Each substring is identified by an offset and a length,
+ *      expressed in unicode characters.
+ *
+ * https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#StructuredFormatting
+ */
+export type StructuredFormatting = google.maps.places.StructuredFormatting;
+/**
+ * Represents a single autocomplete prediction.
+ *
+ * **Props**
+ * - `description`
+ *      - Type: `string`
+ *      - This is the unformatted version of the query suggested by the Places service.
+ * - `structured_formatting`
+ *      - Type: `StructuredFormatting`
+ *      - Structured information about the place's description
+ * - `place_id`
+ *      - Type: `string`
+ *      - A place ID that can be used to retrieve details about this place using the place details service
+ * - `matched_substrings`
+ *      - Type: `PredictionSubstring[]`
+ *      - A set of substrings in the place's description that match elements in the user's input,
+ *      suitable for use in highlighting those substrings. Each substring is identified by an offset
+ *      and a length, expressed in unicode characters.
+ * - `terms`
+ *      - Type: `PredictionTerm`
+ *      - Information about individual terms in the above description, from most to least specific.
+ *      For example, "Taco Bell", "Willitis", and "CA".
+ * - `types`
+ *      - Type: `string[]`
+ *      - An array of types that the prediction belongs to, for example 'establishment' or 'geocode'.
+ *
+ * https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletePrediction
+ */
+export type AutocompletePrediction = google.maps.places.AutocompletePrediction;
+/**
+ * Request for fetching AutocompletePredictions
+ */
+export interface FetchRequest {
+    /**
+     * Text input from autocomplete field
+     * @required
+     */
+    input: string;
+    /**
+     * Acceptable address types for returning responses
+     * @required
+     */
+    types: string[];
+}
+/**
+ * Callback function for fetching AutocompletePredictions
+ */
+export type FetchCallback = (results?: AutocompletePrediction[] | null) => void;

package/dist/components/Form/Inputs/Location/LocationOption.d.ts

@@ -0,0 +1,38 @@
+import { AutocompletePrediction } from './Location.types';
+import * as React from 'react';
+interface LocationOptionProps {
+    /**
+     * Props for list item that wraps custom contents
+     * @required
+     */
+    listItemProps: React.HTMLAttributes<HTMLLIElement>;
+    /**
+     * Definition of PlaceType option being rendered in list item
+     * @required
+     */
+    option: AutocompletePrediction;
+    /**
+     * Icon to render on far left of list item
+     * @required
+     */
+    resultIcon: React.ReactElement | false;
+    /**
+     * Indicates to highlight text in option that matches textfield input
+     * @required
+     */
+    highlightMatches: boolean;
+}
+/**
+ * Function to render custom location list items in the Autocomplete menu
+ *
+ * **Required Props**
+ * - `listItemProps` - Props for list item that wraps custom contents
+ * - `option` - Definition of PlaceType option being rendered in list item
+ * - `resultIcon` - Icon to render on far left of list item
+ * - `highlightMatches` - Indicates to highlight text in option that matches textfield input
+ *
+ * @param props LocationOptionProps
+ * @returns Custom autocomplete option
+ */
+declare const LocationOption: React.FC<LocationOptionProps>;
+export default LocationOption;

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

@@ -0,0 +1,119 @@
+import { RadioProps, RadioGroupProps as MuiRadioGroupProps, TypographyProps } from '@mui/material';
+type BaseRadioProps<T> = {
+    /**
+     * Value of the radio button
+     * @required
+     */
+    value: T;
+    /**
+     * Label of the radio button
+     * @required
+     */
+    label: string;
+    /**
+     * Optional, additional label that appears below `label` and provides additional
+     * context, if necessary.
+     */
+    sublabel?: string;
+};
+/**
+ * *Interface used exclusively for creating radio buttons within RadioGroup*
+ *
+ * Radio is an interface that defines the structure and layout of a single radio button and accompanying label.
+ * An array of this interface (`Radio<T>[]`) is used in the `<RadioGroup>` component as the `radios` prop to
+ * define and create the radio buttons.
+ */
+export type Radio<T> = BaseRadioProps<T> & Omit<RadioProps, 'checked' | 'id' | 'required' | 'value'>;
+type BaseRadioGroupProps<T> = {
+    /**
+     * Name and ID of the component. It should match a key in initialValues.
+     * @required
+     */
+    name: string;
+    /**
+     * Label for the radio group.
+     * @recommended
+     * @default props.name
+     */
+    label?: string;
+    /**
+     * Radio buttons for the radio group.
+     * @recommended
+     */
+    radios?: Radio<T>[];
+    /**
+     * Disables all radio buttons.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the label above the radio buttons is disabled.
+     */
+    disableLabel?: boolean;
+    /**
+     * If true, the label of the the radio 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;
+    /**
+     * If true, the radio buttons take up the entire width of its parent container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Location of the label with respect to the radio button.
+     * @default 'end'
+     */
+    labelPlacement?: 'top' | 'start' | 'bottom' | 'end';
+    /**
+     * Vertical alignment of the label with respect to the radio buttons. This is mainly for longer labels, or radio buttons with sublabels.
+     * Only applied when `labelPlacement` is 'start' or 'end'.
+     *
+     * Center: Verticaly aligns the radio button with the center of the label (& sublabel)
+     *
+     * Top: Vertically aligns the radio button with the first line of the label
+     *
+     * Defaults to 'top' when labelPlacement is 'start' | 'end. Otherwise, defaults to 'center'.
+     * @default 'top'
+     */
+    labelAlignment?: 'center' | 'top';
+    /**
+     * Margin for the FormControl
+     */
+    margin?: 'dense' | 'none' | 'normal';
+    /**
+     * If true, an asterisk will be displayed next to the label
+     * Most browsers will automatically validate this, but it's recommended to also
+     * have ( NOT Formik) also validate as well so that `Error` displays for consistency.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Forces one single color on all of the radio buttons.
+     */
+    sameButtonColor?: 'primary' | 'secondary' | 'default';
+    /**
+     * If `true`, the component becomes readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * OnChange handler, called when the user changes their selection
+     */
+    onChange?: (val: T) => void;
+    /**
+     * 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 RadioGroupProps<T> = BaseRadioGroupProps<T> & Omit<MuiRadioGroupProps, 'onChange' | 'name'>;
+/**
+ * RadioGroup produces a group of radio buttons that's defined as an array of Radio<T>.
+ *
+ * This component is ideal for limited options. For more than 4 options, use an Autocomplete or Select instead.
+ */
+export declare const RadioGroup: <T extends string | number | boolean | object>(props: RadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,34 @@
+import { SliderProps, TypographyProps } from '@mui/material';
+import * as React from 'react';
+type BaseRangeSliderProps = {
+    /**
+     * Must match a key from initialValues in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * The label displayed above the component.
+     * @recommended
+     */
+    label?: string;
+    /**
+     * If set, the component becomes readonly.
+     * By default, will display as a number. To display as a percentage, use readOnly='percent'
+     * @default 'number'
+     */
+    readOnly?: true | 'percent';
+    /**
+     * 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;
+};
+/**
+ * Type used to define props passed into RangeSlider component
+ */
+export type RangeSliderProps = BaseRangeSliderProps & SliderProps;
+/**
+ * The range slider is usually used when the user needs the ability to adjust a value between a minimum and maximum.
+ */
+export declare const RangeSlider: React.FC<RangeSliderProps>;
+export {};

package/dist/components/Form/Inputs/RichTextField/RichTextControls.d.ts

@@ -0,0 +1,6 @@
+import { ImageNodeAttributes } from 'mui-tiptap';
+export type RichTextControlsProps = {
+    onUploadFiles: (files: File[]) => ImageNodeAttributes[] | Promise<ImageNodeAttributes[]>;
+};
+export declare const RichTextControls: (props: RichTextControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default RichTextControls;

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

@@ -0,0 +1,56 @@
+import { TypographyProps } from '@mui/material';
+import { ImageNodeAttributes } from 'mui-tiptap';
+export type RichTextEditorProps = {
+    /**
+     * Name and ID of the component. Must match a key from initialValues in MForm.
+     * @required
+     */
+    name: string;
+    /**
+     * (Optional) Label. NOTE: this won't be floating, it's always static.
+     */
+    label?: string;
+    /**
+     * Styling for label
+     */
+    labelProps?: TypographyProps;
+    /**
+     * Handler for uploading files/images. Use this to save your images to your server (ex. S3 Bucket).
+     */
+    onUploadFiles: (files: File[]) => ImageNodeAttributes[] | Promise<ImageNodeAttributes[]>;
+    /**
+     * If `true`, the component becomes readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    renderContentOnly?: never;
+};
+export type RichTextFieldProps = RichTextEditorProps | {
+    name?: never;
+    label?: never;
+    labelProps?: never;
+    onUploadFiles?: never;
+    readOnly?: never;
+    /**
+     * The component ONLY renders the HTML string. Use this prop when you ONLY want to render HTML (no MForm/field).
+     *
+     * This is similar to using `readOnly`, but is more efficient. This uses Mui TipTap's `RichTextReadOnly` component
+     * internally. For more information on when to use this over just disabling the editor (via `readOnly`),
+     * [read the documentation](https://github.com/sjdemartini/mui-tiptap?tab=readme-ov-file#render-read-only-rich-text-content).
+     *
+     * IMPORTANT: WHEN DEFINED, ONLY THIS PROP CAN HAVE A VALUE. If you need access to other props, consider using `readOnly` instead.
+     */
+    renderContentOnly: string;
+};
+/**
+ * Rich Text field -- uses MUI Tip Tap
+ *
+ * MForm -- This field cannot be completely controlled, so keep in mind that the MForm 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.
+ *
+ * NOTE: If you just want to render the HTML (no editing/MForm), try <RichTextReadOnly content={<your HTML string>} /> instead.
+ * Full details on [TipTap's docs](https://github.com/sjdemartini/mui-tiptap?tab=readme-ov-file#render-read-only-rich-text-content)
+ */
+export declare const RichTextField: (props: RichTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default RichTextField;

package/dist/components/Form/Inputs/RichTextField/SuggestionList.d.ts

@@ -0,0 +1,8 @@
+import { SuggestionOptions, SuggestionProps } from '@tiptap/suggestion';
+import { MentionSuggestion } from './mentionSuggestionOptions';
+export type SuggestionListRef = {
+    onKeyDown: NonNullable<ReturnType<NonNullable<SuggestionOptions<MentionSuggestion>['render']>>['onKeyDown']>;
+};
+export type SuggestionListProps = SuggestionProps<MentionSuggestion>;
+declare const SuggestionList: import('react').ForwardRefExoticComponent<SuggestionListProps & import('react').RefAttributes<SuggestionListRef>>;
+export default SuggestionList;

package/dist/components/Form/Inputs/RichTextField/mentionSuggestionOptions.d.ts

@@ -0,0 +1,6 @@
+import { MentionOptions } from '@tiptap/extension-mention';
+export type MentionSuggestion = {
+    id: string;
+    mentionLabel: string;
+};
+export declare const mentionSuggestionOptions: MentionOptions['suggestion'];

package/dist/components/Form/Inputs/RichTextField/useExtensions.d.ts

@@ -0,0 +1,10 @@
+import { EditorOptions } from '@tiptap/core';
+export type UseExtensionsOptions = {
+    /** Placeholder hint to show in the text input area before a user types a message. */
+    placeholder?: string;
+};
+/**
+ * A hook for providing a default set of useful extensions for the MUI-Tiptap
+ * editor.
+ */
+export default function useExtensions({ placeholder }?: UseExtensionsOptions): EditorOptions['extensions'];

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

@@ -0,0 +1,16 @@
+/**
+ * Interface for SearchField props.
+ * @property {(value?: string) => void} onSearch - called each time user types a character in the input field, or when they click the search bar/'Enter' key
+ * @property {string} initialValue - initial value (may be useful if using Redux)
+ * @property {boolean} lazySearch - If true, onSearch will only be called when user clicks search button/'Enter' key
+ */
+export type SearchFieldProps = {
+    onSearch: (value?: string) => void;
+    initialValue?: string;
+    lazySearch?: boolean;
+};
+/**
+ * Search Field component. Can be used by itself, and/or with a table to filter data (Table/PagingTable).
+ */
+export declare const SearchField: (props: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchField;