@simoncomputing/mui-bueno-v2 0.23.2 → 0.24.0

package/CHANGELOG.md

@@ -11,6 +11,34 @@ 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.24.0] - 2026-02-02
+
+### Fixed
+
+- `Table` / `PaginatedTable`
+    - Added some padding in between column tooltip & column header text
+
+### Added
+
+- Ability to render whole forms/form sections as read-only or diff (text diff/change tracking). **Note: Not all form field components are supported yet, see list below.**
+    - `ReadOnlyProvider` - Wrap around formik (or specific form fields/sections) to render as readOnly
+        - To enable your custom inputs to work with this provider, use the `ReadOnly` component and the `useReadOnly` hook in your component
+    - `DiffProvider` - Wrap around formik (or specific form fields/sections) to render text diff
+        - To enable your custom inputs to work with this provider, use the `Diff` component and the `useDiff` hook in your component
+    - The following components have support for `ReadOnlyProvider` & `DiffProvider`:
+        - `TextField`
+        - `TextArea`
+        - `Select`
+        - `Autocomplete`
+        - `RadioGroup`
+        - `CitationField`
+            - _Note: For citations, only added/removed citations can be shown. Edits to existing citations are not shown._
+
+### Changed
+
+- Update `tsconfig`
+    - `target` & `lib` updated ES2020 --> ES2022
+
 ## [0.23.2] - 2026-01-29
 
 ### Fixed

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

@@ -0,0 +1,5 @@
+// src/types/htmldiff-js.d.ts
+declare module 'htmldiff-js' {
+    const HtmlDiff: any;
+    export default HtmlDiff;
+}

package/dist/components/Form/Diff/Diff.d.ts

@@ -0,0 +1,10 @@
+export type DiffProps = {
+    beforeTxt?: string;
+    afterTxt?: string;
+    /**
+     * Set to `true` for HTML
+     */
+    useHtmlDiff?: boolean;
+};
+export declare const Diff: (props: DiffProps) => import("react/jsx-runtime").JSX.Element;
+export default Diff;

package/dist/components/Form/Diff/DiffContext.d.ts

@@ -0,0 +1,17 @@
+type DiffContextType = {
+    showDiff?: boolean;
+    previousSnapshot?: any;
+    children: React.ReactNode;
+};
+/**
+ * Wrap around your form (or form section) that should render as a text diff (i.e. to compare the current form to a previous snapshot)
+ *
+ * @param showDiff - when true (default), enables text diff. Set to false to return form to normal.
+ * @param previousSnapshot - previous snapshot. This should match the same stucture as your fields (i.e. formik initialValues)
+ */
+export declare const DiffProvider: ({ showDiff, previousSnapshot, children }: DiffContextType) => import("react/jsx-runtime").JSX.Element;
+export declare const useDiff: () => {
+    showDiff: boolean;
+    previousSnapshot: null;
+};
+export {};

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

@@ -1,11 +1,6 @@
 import { AutocompleteProps as MuiAutocompleteProps, TypographyProps } from '@mui/material';
 import { BaseInputProps } from '../BaseInputProps';
 export type BaseAutocompleteProps<T> = BaseInputProps & {
-    /**
-     * The label for the text field.
-     * @recommended
-     */
-    label?: string;
     /**
      * List of options for the autocomplete in label/value format
      * @recommended

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

@@ -11,6 +11,10 @@ export type BaseInputProps = {
      * @required
      */
     name: string;
+    /**
+     * Field label
+     */
+    label?: string;
     /**
      * Error mode for showing validation error messages.
      *

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

@@ -2,11 +2,6 @@ import { CheckboxProps as MuiCheckboxProps, TypographyProps } from '@mui/materia
 import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
 type BaseCheckboxProps = BaseInputProps & {
-    /**
-     * The label for the checkbox.
-     * @recommended
-     */
-    label?: string;
     /**
      * Helpful text that appears below `label` and provides additional context (optional)
      */

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

@@ -2,12 +2,6 @@ import { TypographyProps } from '@mui/material';
 import { CheckboxOption } from '../../../../@types';
 import { BaseInputProps } from '../BaseInputProps';
 export type CheckboxGroupProps = BaseInputProps & {
-    /**
-     * Label for the checkbox group.
-     * @recommended
-     * @default props.name
-     */
-    label?: string;
     /**
      * Array of labels for the checkboxes in the group
      * @recommended

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

@@ -2,10 +2,6 @@ import { Citation } from '../../../../@types';
 import { BaseInputProps } from '../BaseInputProps';
 import { BaseCitationManagerApiProps } from './CitationManager/BaseCitationManager';
 export type CitationFieldProps = BaseInputProps & BaseCitationManagerApiProps & {
-    /**
-     * (Optional) Label. NOTE: this won't be floating, it's always static.
-     */
-    label?: string;
     /**
      * If `true`, the component becomes readonly.
      * @default false
@@ -65,6 +61,8 @@ export type CitationFieldProps = BaseInputProps & BaseCitationManagerApiProps &
  * shown in the editor will not match the Formik value until the field __loses focus__.
  *
  * Recommended to use with `CitationFieldProvider` for cross-field synchronization.
+ *
+ * NOTE: `label` will always be static (non-floating)
  */
 export declare const CitationField: (props: CitationFieldProps) => import("react/jsx-runtime").JSX.Element;
 export default CitationField;

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

@@ -6,10 +6,6 @@ import { DateValidationError, PickerChangeHandlerContext } from '@mui/x-date-pic
 import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
 type BaseDateFieldProps = BaseInputProps & {
-    /**
-     * 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

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

@@ -1,7 +1,7 @@
 import { TypographyProps } from '@mui/material';
 import { BaseInputProps } from '../BaseInputProps';
 import * as React from 'react';
-export type FileUploadProps = BaseInputProps & {
+export type FileUploadProps = Omit<BaseInputProps, 'label'> & {
     /**
      * File extensions that FileUpload will accept. Does NOT restrict files selected via drag & drop.
      *

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

@@ -10,12 +10,6 @@ type BaseLocationProps = BaseInputProps & {
      * @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

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

@@ -26,12 +26,6 @@ type BaseRadioProps<T> = {
  */
 export type Radio<T> = BaseRadioProps<T> & Omit<RadioProps, 'checked' | 'id' | 'required' | 'value'>;
 type BaseRadioGroupProps<T> = BaseInputProps & {
-    /**
-     * Label for the radio group.
-     * @recommended
-     * @default props.name
-     */
-    label?: string;
     /**
      * Radio buttons for the radio group.
      * @recommended

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

@@ -42,10 +42,6 @@ export interface SelectOption<T> {
     required?: boolean;
 }
 type BaseSelectProps<T> = BaseInputProps & {
-    /**
-     * Label for the select component
-     */
-    label?: string;
     /**
      * A list of options for the select component.
      */

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

@@ -3,11 +3,6 @@ import { OverridableStringUnion } from '@mui/types';
 import { SystemProps } from '@mui/system';
 import { BaseInputProps } from '../BaseInputProps';
 export type BaseSwitchProps<T = boolean> = BaseInputProps & {
-    /**
-     * Label that goes next to the switch.
-     * @recommended
-     */
-    label?: string;
     /**
      * Disabled
      */

package/dist/components/Form/ReadOnly/ReadOnly.d.ts

@@ -0,0 +1,15 @@
+import { TypographyProps } from '@mui/material';
+import { DiffProps } from '../Diff/Diff';
+import { ReactNode } from 'react';
+export type ReadOnlyProps = {
+    label: string;
+    value: string;
+    readOnlyValue?: ReactNode;
+    staticLabel?: boolean;
+    staticLabelProps?: TypographyProps;
+    showDiff?: boolean;
+    diffSnapshot?: string;
+    useHtmlDiff?: boolean;
+} & Omit<DiffProps, 'beforeTxt' | 'afterTxt'>;
+export declare const ReadOnly: (props: ReadOnlyProps) => import("react/jsx-runtime").JSX.Element;
+export default ReadOnly;

package/dist/components/Form/ReadOnly/ReadOnlyContext.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Wrap around your form (or form section) that should render as read-only
+ *
+ * @param readOnly - when true (default), the form is read-only. Set to false to return form to normal (edit mode).
+ */
+export declare const ReadOnlyProvider: ({ readOnly, children }: {
+    readOnly?: boolean;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useReadOnly: () => boolean;