@simoncomputing/mui-bueno-v2 0.18.9 → 0.18.11

package/CHANGELOG.md

@@ -11,6 +11,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Minor increment --> singlular/minor changes. Minimal breaking changes.
 - Patch increment --> singlular/minor changes. Zero breaking changes.
 
+## [0.18.11] - 2025-09-26
+
+### Added
+
+- `CitationField`
+    - Added helper text for Classification field
+
+- `CitationField`, `CitationManger`, `SelectableCitationManager`
+    - Added `canOpenPublicUrls` prop to enable launch url button to display for public source URLs
+    
+- `CitationManger`, `SelectableCitationManager`
+    - Added tooltips to actions (Edit, Delete, Download, Open URL)
+    - Improved performance of Delete popper by reducing unnecessary re-renders
+
+- `RadioGroup`
+    - Added `helperText` prop
+
+### Changed
+
+- `Radio`/`Checkbox`
+    - Renamed `sublabel` to `helperText`
+
+## [0.18.10] - 2025-09-25
+
+### Added
+
+- All Form Input components (`Autocomplete`, `MultiAutocomplete`, `Checkbox`, `CheckboxGroup`, `CitationField`, `DateField`, `DateRangeField`, `FileUpload`, `Location`, `RadioGroup`, `Select`, `Switch`, `TextField`)
+    - added `collapseErrorWhenEmpty`, which will collapse or leave padding (default) for the internal `Error` component. (The value is passed directly to `Error`'s `collapseWhenEmpty` prop).
+
+### Removed
+
+- `Checkbox`
+    - Removed `noError`. Migration: use `collapseErrorWhenEmpty` instead.
+
 ## [0.18.9] - 2025-09-25
 
 ### Changed

package/dist/@types/index.d.ts

@@ -154,7 +154,7 @@ export interface AutocompleteOption<T> {
  * Can be string OR:
  * {
  *      label: string;          // UI label
- *      sublabel?: string;      // Smaller text that appears below UI label. Supplemental/help text.
+ *      helperText?: string;      // Smaller text that appears below UI label. Supplemental/help text.
  *      withTextField?: string; // Displays textfield for additional information needed from user (ex. "Other" checkbox). At mininmum, make sure to pass in `name` property.
  * }
  */
@@ -162,7 +162,7 @@ export type CheckboxOption =
     | string
     | {
           label: string;
-          sublabel?: string;
+          helperText?: string;
           textField?: TextFieldProps;
       };
 

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

@@ -1,10 +1,6 @@
 import { AutocompleteProps as MuiAutocompleteProps, TypographyProps } from '@mui/material';
-export type BaseAutocompleteProps<T> = {
-    /**
-     * Name of the component. Must match a key from initialValues in Formik.
-     * @required
-     */
-    name: string;
+import { BaseInputProps } from '../BaseInputProps';
+export type BaseAutocompleteProps<T> = BaseInputProps & {
     /**
      * The label for the text field.
      * @recommended

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

@@ -0,0 +1,22 @@
+/**
+ * Base props for ALL inputs
+ *
+ * TODO: Add other shared props, if possible. Maybe `label`, `required`, etc.?
+ */
+export type BaseInputProps = {
+    /**
+     * Must match a key from initialValues in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * When true, compoent will not take up space when no error(s) exist. This is recommended when
+     * validation is not needed.
+     *
+     * When false or undefined, component will take up space when no error(s) exist. This is recommended when
+     * the field and/or form requires validation, to prevent form jittering as errors show/hide.
+     *
+     * @default undefined
+     */
+    collapseErrorWhenEmpty?: boolean;
+};

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

@@ -1,31 +1,26 @@
 import { CheckboxProps as MuiCheckboxProps, TypographyProps } from '@mui/material';
+import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
-type BaseCheckboxProps = {
-    /**
-     * Must match a key from initialValues in Formik.
-     * @required
-     */
-    name: string;
+type BaseCheckboxProps = BaseInputProps & {
     /**
      * The label for the checkbox.
      * @recommended
      */
     label?: string;
     /**
-     * Optional, additional label that appears below `label` and provides additional
-     * context, if necessary.
+     * Helpful text that appears below `label` and provides additional context (optional)
      */
-    sublabel?: string;
+    helperText?: 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.
+     * Vertical alignment of the label with respect to the checkbox. This is mainly for longer labels, or checkboxes with helperText.
      * Only applied when `labelPlacement` is 'start' or 'end'.
      *
-     * Center: Verticaly aligns the checkbox with the center of the label (& sublabel)
+     * Center: Verticaly aligns the checkbox with the center of the label (& helperText)
      *
      * Top: Vertically aligns the checkbox with the first line of the label
      *
@@ -49,12 +44,6 @@ type BaseCheckboxProps = {
      * Used to customize the label when the static label option is selected or the field is readOnly.
      */
     staticLabelProps?: TypographyProps;
-    /**
-     * Does not display error and does not leave padding for error.
-     *
-     * Use this if handling validation errors elsewhere.
-     */
-    noError?: boolean;
 };
 export type CheckboxProps = BaseCheckboxProps & Omit<MuiCheckboxProps, 'checked' | 'name'>;
 /**

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

@@ -1,11 +1,7 @@
 import { TypographyProps } from '@mui/material';
 import { CheckboxOption } from '../../../../@types';
-export type CheckboxGroupProps = {
-    /**
-     * Name and ID of the component. It should match a key in initialValues.
-     * @required
-     */
-    name: string;
+import { BaseInputProps } from '../BaseInputProps';
+export type CheckboxGroupProps = BaseInputProps & {
     /**
      * Label for the checkbox group.
      * @recommended
@@ -40,10 +36,10 @@ export type CheckboxGroupProps = {
      */
     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.
+     * Vertical alignment of the label with respect to the checkboxes. This is mainly for longer labels, or checkboxes with helperText.
      * Only applied when `labelPlacement` is 'start' or 'end'.
      *
-     * Center: Verticaly aligns the checkbox with the center of the label (& sublabel)
+     * Center: Verticaly aligns the checkbox with the center of the label (& helperText)
      *
      * Top: Vertically aligns the checkbox with the first line of the label
      *

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

@@ -1,10 +1,6 @@
 import { Citation, PageState, PageResponse, UnsavedCitation } from '../../../../@types';
-export type CitationFieldProps = {
-    /**
-     * Name and ID of the component. Must match a key from initialValues in Formik.
-     * @required
-     */
-    name: string;
+import { BaseInputProps } from '../BaseInputProps';
+export type CitationFieldProps = BaseInputProps & {
     /**
      * (Optional) Label. NOTE: this won't be floating, it's always static.
      */
@@ -88,6 +84,10 @@ export type CitationFieldProps = {
      * NOTE: This feature is a prototype and is not fully implemented.
      */
     notApplicableName?: string;
+    /**
+     * When true, users have the option to open public urls
+     */
+    canOpenPublicUrls?: boolean;
 };
 /**
  * Rich Text field -- uses MUI Tip Tap

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

@@ -62,6 +62,10 @@ export interface BaseCitationManagerProps {
      * Additional actions to be displayed for each row. Will be inserted in between Download (if applicable) and Edit button.
      */
     addlActions?: (citation: Citation) => ReactNode;
+    /**
+     * When true, users have the option to open public urls
+     */
+    canOpenPublicUrls?: boolean;
 }
 export declare enum CitationManagerState {
     CITATIONS_TABLE = "Insert Citation/Attachment(s)",
@@ -77,5 +81,5 @@ export declare enum CitationManagerState {
  *
  * For in-line citations, see CitationField instead.
  */
-export declare function BaseCitationManager({ getCitationsPaginated, onCreateCitation, onUpdateCitation, onDeleteCitation, getCitationById, onDownloadAttachment, onSelectCitations, onCancel, initialSelectedIds, onContentChange, onError, renderAsSelectablePopup, addlActions, }: BaseCitationManagerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseCitationManager({ getCitationsPaginated, onCreateCitation, onUpdateCitation, onDeleteCitation, getCitationById, onDownloadAttachment, onSelectCitations, onCancel, initialSelectedIds, onContentChange, onError, renderAsSelectablePopup, addlActions, canOpenPublicUrls, }: BaseCitationManagerProps): import("react/jsx-runtime").JSX.Element;
 export default BaseCitationManager;

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

@@ -24,4 +24,4 @@ export type CitationBubbleMenuProps = Partial<Except<ControlledBubbleMenuProps,
  * update, which will happen if it's a child of the component using
  * `useEditor`).
  */
-export default function CitationBubbleMenuTipTap({ getCitationsPaginated, onCreateCitation, onUpdateCitation, onDeleteCitation, getCitationById, onDownloadAttachment, ...controlledBubbleMenuProps }: CitationBubbleMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default function CitationBubbleMenuTipTap({ getCitationsPaginated, onCreateCitation, onUpdateCitation, onDeleteCitation, getCitationById, onDownloadAttachment, canOpenPublicUrls, ...controlledBubbleMenuProps }: CitationBubbleMenuProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -43,6 +43,10 @@ export type CitationTableProps = {
      * When true, edit citation icon buttons will display for each row.
      */
     canEdit?: boolean;
+    /**
+     * When true, users can open public urls
+     */
+    canOpenPublicUrls?: boolean;
     /**
      * Additional actions to be displayed for each row. Will be inserted in between Download (if applicable) and Edit button.
      */

package/dist/components/Form/Inputs/CitationField/CitationManager/Poppers/DeleteCitationPopper/DeleteCitationPopper.d.ts

@@ -0,0 +1,12 @@
+import { Citation } from '../../../../../../../@types';
+type Props = {
+    citation: Citation | null;
+    anchorEl: HTMLElement | null;
+    onDeleteCitation?: (id: number) => Promise<void>;
+    onClose: () => void;
+};
+/**
+ * Popper to ask the user to confirm if they want to delete the citation.
+ */
+declare const DeleteCitationPopper: (props: Props) => import("react/jsx-runtime").JSX.Element | undefined;
+export default DeleteCitationPopper;

package/dist/components/Form/Inputs/CitationField/CitationManager/Poppers/LaunchUrlPopper/LaunchUrlPopper.d.ts

@@ -0,0 +1,11 @@
+import { Citation } from '../../../../../../../@types';
+type Props = {
+    citation: Citation | null;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+};
+/**
+ * Popper to ask the user to confirm if they want to navigate to the citation's URL.
+ */
+declare const LaunchLinkPopper: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default LaunchLinkPopper;

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

@@ -3,13 +3,9 @@ import { DateFieldProps as MuiDateFieldProps } from '@mui/x-date-pickers/DateFie
 import { Dayjs } from 'dayjs';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { DateValidationError, PickerChangeHandlerContext } from '@mui/x-date-pickers';
+import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
-type BaseDateFieldProps = {
-    /**
-     * Name and ID of the component. Must match a key from initialValues in Formik.
-     * @required
-     */
-    name: string;
+type BaseDateFieldProps = BaseInputProps & {
     /**
      * Label for the Date field. `name` will be used if none is provided
      */

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

@@ -1,11 +1,7 @@
 import { TypographyProps } from '@mui/material';
+import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
-export type FileUploadProps = {
-    /**
-     * Must match a key from initialValues in Formik.
-     * @required
-     */
-    name: string;
+export type FileUploadProps = BaseInputProps & {
     /**
      * File extensions that FileUpload will accept. Does NOT restrict files selected via drag & drop.
      *

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

@@ -1,12 +1,8 @@
 import { TypographyProps } from '@mui/material';
 import { TextFieldProps } from '../TextField/TextField';
+import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
-type BaseLocationProps = {
-    /**
-     * Name of the component. Must match the initialValue name in Formik.
-     * @required
-     */
-    name: string;
+type BaseLocationProps = BaseInputProps & {
     /**
      * API Key. Needed for Location to work.
      *

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

@@ -1,4 +1,5 @@
 import { RadioProps, RadioGroupProps as MuiRadioGroupProps, TypographyProps } from '@mui/material';
+import { BaseInputProps } from '../BaseInputProps';
 type BaseRadioProps<T> = {
     /**
      * Value of the radio button
@@ -14,7 +15,7 @@ type BaseRadioProps<T> = {
      * Optional, additional label that appears below `label` and provides additional
      * context, if necessary.
      */
-    sublabel?: string;
+    helperText?: string;
 };
 /**
  * *Interface used exclusively for creating radio buttons within RadioGroup*
@@ -24,12 +25,7 @@ type BaseRadioProps<T> = {
  * 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;
+type BaseRadioGroupProps<T> = BaseInputProps & {
     /**
      * Label for the radio group.
      * @recommended
@@ -68,10 +64,10 @@ type BaseRadioGroupProps<T> = {
      */
     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.
+     * Vertical alignment of the label with respect to the radio buttons. This is mainly for longer labels, or radio buttons with helperText.
      * Only applied when `labelPlacement` is 'start' or 'end'.
      *
-     * Center: Verticaly aligns the radio button with the center of the label (& sublabel)
+     * Center: Verticaly aligns the radio button with the center of the label (& helperText)
      *
      * Top: Vertically aligns the radio button with the first line of the label
      *
@@ -108,6 +104,11 @@ type BaseRadioGroupProps<T> = {
      * Used to customize the label when the static label option is selected or the field is readOnly.
      */
     staticLabelProps?: TypographyProps;
+    /**
+     * Used to show more information to help the user understand the RadioGroup label.
+     * NOTE: Radios have their own `helperText` for more fine-grained details about specific options.
+     */
+    helperText?: string;
 };
 export type RadioGroupProps<T> = BaseRadioGroupProps<T> & Omit<MuiRadioGroupProps, 'onChange' | 'name'>;
 /**

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

@@ -1,4 +1,5 @@
 import { SelectProps as MuiSelectProps, TypographyProps } from '@mui/material';
+import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
 /**
  * *Interface used exclusively for creating the select menu within Select*
@@ -40,12 +41,7 @@ export interface SelectOption<T> {
      */
     required?: boolean;
 }
-type BaseSelectProps<T> = {
-    /**
-     * Must match the initialValue name in BForm.
-     * @required
-     */
-    name: string;
+type BaseSelectProps<T> = BaseInputProps & {
     /**
      * Label for the select component
      */

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

@@ -1,12 +1,8 @@
 import { SwitchProps as MuiSwitchProps, TypographyProps, Theme, SwitchPropsColorOverrides } from '@mui/material';
 import { OverridableStringUnion } from '@mui/types';
 import { SystemProps } from '@mui/system';
-export type BaseSwitchProps<T = boolean> = {
-    /**
-     * Name and ID of the component. Must match a key from initialValues in Formik.
-     * @required
-     */
-    name: string;
+import { BaseInputProps } from '../BaseInputProps';
+export type BaseSwitchProps<T = boolean> = BaseInputProps & {
     /**
      * Label that goes next to the switch.
      * @recommended

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

@@ -1,11 +1,7 @@
 import { TypographyProps, TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
-type BaseTextFieldProps = {
-    /**
-     * Name and ID of the component. Must match a key from initialValues in Formik.
-     * @required
-     */
-    name: string;
+type BaseTextFieldProps = BaseInputProps & {
     /**
      * If true, ensures that user enters only input that matches the format.
      * Defaults to true if a format is specified.