@recursica/mui-adapter 0.22.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @recursica/mui-adapter
 
+## 0.24.0
+
+### Minor Changes
+
+- 3d75770: Implement the `FileInput` component (single-line, `TextField`-shaped file picker with a native drag-and-drop drop target, single- and multiple-file modes, and a trailing clear icon) in `mantine-adapter` and `mui-adapter`, replacing the "coming soon" stub, with a shared `RecursicaFileInputProps` contract in `adapter-common` reusing `FileUpload`'s `RecursicaFileUploadItem`/validation interface (`accept`/`maxSize`/`maxFiles`/`readOnly`). Also adds `FileInput` to `RECURSICA_COMPONENTS` and moves `mui-adapter`'s export of it into the standard `wrapComponent` set (it was previously exported unwrapped, alongside the polymorphic layout primitives, as a leftover from its stub form).
+
+### Patch Changes
+
+- b86ca2b: `FileInput` now renders every selected file as a removable `Chip` in a horizontally scrollable row, in both single- and multiple-file mode (previously single-file mode showed plain filename text with no remove affordance). The trailing clear-all control is now a real shared `Button` (icon-only, "text" variant) instead of a bespoke `<span role="button">`.
+- Updated dependencies [3d75770]
+- Updated dependencies [b86ca2b]
+  - @recursica/adapter-common@0.17.0
+
+## 0.23.0
+
+### Minor Changes
+
+- 1c317a3: Implement the `FileUpload` component (drag-and-drop dropzone, browse-button fallback, removable file-chip list) in `mantine-adapter` and `mui-adapter`, replacing the "coming soon" stub, with a shared `RecursicaFileUploadProps`/`RecursicaFileUploadItem` contract in `adapter-common`. Also fixes `mui-adapter`'s `Chip` component's public type to allow `children` (a pre-existing type-only gap; the component already accepted them at runtime).
+
+### Patch Changes
+
+- 1c317a3: `FileUpload` now surfaces a built-in error message ("File type not accepted", overridable via the new `invalidFileTypeMessage` prop) when a dropped/picked file doesn't match `accept`, shown through the standard assistive-text error slot instead of requiring the integrator to wire up `onFilesRejected` themselves. Also reverts `FileUpload`'s assistive/error rendering back to `FormControlWrapper` (file list renders above the assistive/error text again, matching every other form control).
+
+  Fixes `Chip` clipping the descender (e.g. the "g" in "image.png") off long labels — `overflow: hidden` was clipping vertically as well as horizontally, cutting off glyph ink whenever the line-height token was tighter than the font's natural ascent+descent.
+
+- 1c317a3: `FileUpload` now supports a `maxFiles` prop (with an overridable `maxFilesMessage`, defaulting to "Maximum of {maxFiles} files allowed") that rejects files past a total-count cap the same way `accept`/`maxSize` already do.
+
+  Fixes `Chip` rendered without a real handler (`onRemove`/`onClick`/`onChange`) — such as `FileUpload`'s `readOnly` file list — still showing a pointer cursor on hover and picking up a phantom, un-styled keyboard Tab stop on its truncated label text. Both were general `Chip` bugs, not specific to `FileUpload`.
+
+- 1c317a3: Fix `Button` showing the native browser focus outline instead of the recursica focus ring, and fix `Chip` losing its remove (X) icon behind an overflowing long label instead of truncating with an ellipsis. Adds optional `removeTabIndex`/`removeIconRef` props to `Chip` for building keyboard-navigable chip groups. Also fixes the remove icon's own focus ring rendering in the chip's neutral border color instead of the recursica focus-ring color, making it barely visible.
+- Updated dependencies [1c317a3]
+- Updated dependencies [1c317a3]
+- Updated dependencies [1c317a3]
+- Updated dependencies [1c317a3]
+  - @recursica/adapter-common@0.16.0
+
 ## 0.22.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -22,7 +22,6 @@ import { DialogProps } from '@mui/material';
 import { DialogTitleProps } from '@mui/material';
 import { DividerProps } from '@mui/material';
 import { DrawerProps } from '@mui/material';
-import { FC } from 'react';
 import { FormControlProps } from '@mui/material';
 import { FormGroupProps } from '@mui/material';
 import { FormHelperTextProps } from '@mui/material';
@@ -406,9 +405,13 @@ declare type CheckboxWrapperProps = Omit<CheckboxProps_2, "size" | "color"> & Re
 
 export declare const Chip: typeof rawComponents.Chip;
 
-declare const Chip_2: default_2.ForwardRefExoticComponent<(Omit<Omit<WithRecursicaSpacing<Omit<ChipProps_2, "color" | "variant" | "size" | "radius"> & RecursicaChipProps>, BlockedStylingKeys> & ForbiddenStyles & {
+declare const Chip_2: default_2.ForwardRefExoticComponent<(Omit<Omit<WithRecursicaSpacing<Omit<ChipProps_2, "color" | "children" | "variant" | "size" | "radius"> & RecursicaChipProps & {
+children?: default_2.ReactNode;
+}>, BlockedStylingKeys> & ForbiddenStyles & {
     overStyled?: false | undefined;
-}, "ref"> | Omit<Omit<Omit<ChipProps_2, "color" | "variant" | "size" | "radius"> & RecursicaChipProps, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
+}, "ref"> | Omit<Omit<Omit<ChipProps_2, "color" | "children" | "variant" | "size" | "radius"> & RecursicaChipProps & {
+    children?: default_2.ReactNode;
+}, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
     m?: string | number | RecursicaSpacing;
     mx?: string | number | RecursicaSpacing;
     my?: string | number | RecursicaSpacing;
@@ -423,7 +426,9 @@ declare const Chip_2: default_2.ForwardRefExoticComponent<(Omit<Omit<WithRecursi
     overStyled: true;
 }, "ref">) & default_2.RefAttributes<HTMLInputElement>>;
 
-declare type ChipProps = RecursicaOverStyled<Omit<ChipProps_2, "variant" | "size" | "color" | "radius"> & RecursicaChipProps>;
+declare type ChipProps = RecursicaOverStyled<Omit<ChipProps_2, "variant" | "size" | "color" | "radius" | "children"> & RecursicaChipProps & {
+    children?: default_2.ReactNode;
+}>;
 
 export declare const Container: ForwardRefExoticComponent<Omit<rawComponents.ContainerProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
@@ -495,17 +500,81 @@ export declare interface EmptyValueRendererProps {
     emptyText?: string;
 }
 
-export declare const FileInput: FC<rawComponents.FileInputProps>;
+export declare const FileInput: typeof rawComponents.FileInput;
 
-declare const FileInput_2: default_2.FC<FileInputProps>;
+/**
+ * A single-line, `TextField`-shaped control for choosing one or more files, sharing
+ * `FileUpload`'s selection/validation interface (`accept`/`maxSize`/`maxFiles`, `readOnly`)
+ * behind a different presentation.
+ *
+ * @example
+ * <FileInput
+ *   label="Resume"
+ *   files={files}
+ *   onFilesAdded={(added) => setFiles(added.map((file) => ({ file })))}
+ *   onFileRemove={() => setFiles([])}
+ * />
+ */
+declare const FileInput_2: default_2.ForwardRefExoticComponent<(Omit<Omit<WithRecursicaSpacing<RecursicaFileInputProps_2>, BlockedStylingKeys> & ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<RecursicaFileInputProps_2, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
+    m?: string | number | RecursicaSpacing;
+    mx?: string | number | RecursicaSpacing;
+    my?: string | number | RecursicaSpacing;
+    mt?: string | number | RecursicaSpacing;
+    mb?: string | number | RecursicaSpacing;
+    ml?: string | number | RecursicaSpacing;
+    mr?: string | number | RecursicaSpacing;
+    gap?: string | number | RecursicaSpacing;
+    rowGap?: string | number | RecursicaSpacing;
+    columnGap?: string | number | RecursicaSpacing;
+} & {
+    overStyled: true;
+}, "ref">) & default_2.RefAttributes<HTMLDivElement>>;
 
-declare type FileInputProps = default_2.HTMLAttributes<HTMLDivElement>;
+declare type FileInputProps = RecursicaOverStyled<RecursicaFileInputProps_2>;
 
-export declare const FileUpload: FC<rawComponents.FileUploadProps>;
+/**
+ * Mirrors the semantics of the native HTML `accept` attribute (comma-separated file extensions,
+ * MIME types, or MIME wildcards like `image/*`) so drag-and-drop can be validated the same way —
+ * the browser only applies `accept` to its own file-picker dialog, never to a `drop` event, so
+ * without this a dropped file bypasses the restriction entirely.
+ */
+export declare function fileMatchesAccept(file: File, accept?: string): boolean;
 
-declare const FileUpload_2: default_2.FC<FileUploadProps>;
+export declare const FileUpload: typeof rawComponents.FileUpload;
 
-declare type FileUploadProps = default_2.HTMLAttributes<HTMLDivElement>;
+/**
+ * A dropzone for uploading files, with a native browse-button fallback and a
+ * removable-chip list of the currently selected files.
+ *
+ * @example
+ * <FileUpload
+ *   label="Upload Files"
+ *   assistiveText="Max file size 5MB"
+ *   files={files}
+ *   onFilesAdded={(added) => setFiles((f) => [...f, ...added.map((file) => ({ file }))])}
+ *   onFileRemove={(id) => setFiles((f) => f.filter((item) => (item.id ?? item.file.name) !== id))}
+ * />
+ */
+declare const FileUpload_2: default_2.ForwardRefExoticComponent<(Omit<Omit<WithRecursicaSpacing<RecursicaFileUploadProps_2>, BlockedStylingKeys> & ForbiddenStyles & {
+    overStyled?: false | undefined;
+}, "ref"> | Omit<Omit<RecursicaFileUploadProps_2, "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "rowGap" | "columnGap"> & {
+    m?: string | number | RecursicaSpacing;
+    mx?: string | number | RecursicaSpacing;
+    my?: string | number | RecursicaSpacing;
+    mt?: string | number | RecursicaSpacing;
+    mb?: string | number | RecursicaSpacing;
+    ml?: string | number | RecursicaSpacing;
+    mr?: string | number | RecursicaSpacing;
+    gap?: string | number | RecursicaSpacing;
+    rowGap?: string | number | RecursicaSpacing;
+    columnGap?: string | number | RecursicaSpacing;
+} & {
+    overStyled: true;
+}, "ref">) & default_2.RefAttributes<HTMLDivElement>>;
+
+declare type FileUploadProps = RecursicaOverStyled<RecursicaFileUploadProps_2>;
 
 export declare const Flex: ForwardRefExoticComponent<Omit<rawComponents.FlexProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
@@ -1004,8 +1073,11 @@ declare namespace rawComponents {
         RecursicaDropdownProps,
         DropdownProps,
         Dropdown_2 as Dropdown,
+        RecursicaFileUploadItem,
+        RecursicaFileInputProps_2 as RecursicaFileInputProps,
         FileInputProps,
         FileInput_2 as FileInput,
+        RecursicaFileUploadProps_2 as RecursicaFileUploadProps,
         FileUploadProps,
         FileUpload_2 as FileUpload,
         FlexProps,
@@ -1171,7 +1243,7 @@ export declare type ReadOnlyFieldType = "text" | "number" | "date" | "boolean" |
 /**
  * Official list of all components in Recursica.
  */
-export declare const RECURSICA_COMPONENTS: readonly ["Accordion", "AssistiveElement", "Autocomplete", "Avatar", "Badge", "Breadcrumb", "Button", "Card", "Checkbox", "Chip", "Container", "DatePicker", "Dropdown", "EmptyValueRenderer", "Flex", "FormControlLayout", "FormControlWrapper", "Grid", "Group", "HoverCard", "Label", "Layer", "Link", "Loader", "Menu", "Modal", "NumberInput", "Pagination", "Panel", "Popover", "Radio", "ReadOnlyField", "SegmentedControl", "Slider", "Stack", "Stepper", "Switch", "Table", "Tabs", "Text", "TextArea", "TextField", "TimePicker", "Timeline", "Title", "Toast", "Tooltip", "TransferList"];
+export declare const RECURSICA_COMPONENTS: readonly ["Accordion", "AssistiveElement", "Autocomplete", "Avatar", "Badge", "Breadcrumb", "Button", "Card", "Checkbox", "Chip", "Container", "DatePicker", "Dropdown", "EmptyValueRenderer", "FileInput", "Flex", "FormControlLayout", "FormControlWrapper", "Grid", "Group", "HoverCard", "Label", "Layer", "Link", "Loader", "Menu", "Modal", "NumberInput", "Pagination", "Panel", "Popover", "Radio", "ReadOnlyField", "SegmentedControl", "Slider", "Stack", "Stepper", "Switch", "Table", "Tabs", "Text", "TextArea", "TextField", "TimePicker", "Timeline", "Title", "Toast", "Tooltip", "TransferList"];
 
 /**
  * Props for the Recursica Accordion Control component.
@@ -1388,6 +1460,17 @@ export declare interface RecursicaChipProps {
     removeLabel?: string;
     /** Checked state for the chip (acts as a checkbox) */
     checked?: boolean;
+    /**
+     * Tab index for the remove (X) icon. Defaults to `0`. Lets a parent implement a roving-tabindex
+     * pattern across a group of chips (e.g. FileUpload's file list) by setting this to `-1` on every
+     * chip except the currently-active one.
+     */
+    removeTabIndex?: number;
+    /**
+     * Ref to the remove (X) icon element, so a parent can move focus to it imperatively — e.g.
+     * arrow-key navigation across a group of chips.
+     */
+    removeIconRef?: default_2.Ref<HTMLSpanElement>;
 }
 
 /**
@@ -1438,6 +1521,189 @@ declare interface RecursicaDropdownProps_2 {
     placeholder?: string;
 }
 
+/**
+ * Props for the Recursica FileInput component.
+ *
+ * `FileInput` is presented as a single-line, `TextField`-shaped control rather than
+ * `FileUpload`'s dropzone, but shares the same file-selection interface and validation
+ * behavior (`accept`/`maxSize`/`maxFiles`, `onFilesRejected`, `readOnly`) so integrators can
+ * move between them without relearning the contract.
+ */
+export declare interface RecursicaFileInputProps {
+    /**
+     * Files currently selected. This is a controlled list — `onFilesAdded`/`onFileRemove`
+     * report changes, but `FileInput` never mutates this array itself; merge the reported
+     * changes into your own state and pass the updated list back in.
+     */
+    files?: RecursicaFileUploadItem[];
+    /**
+     * Called with the files the user just picked via the native file dialog or dropped onto
+     * the control. Only the newly added files are passed — merge them into `files` yourself.
+     */
+    onFilesAdded?: (files: File[]) => void;
+    /**
+     * Called when a file's remove affordance is activated, identified by its `id` (or
+     * `file.name` when no `id` was given for that entry). In single-file mode this is also
+     * called when the trailing clear icon removes the one selected file.
+     */
+    onFileRemove?: (id: string) => void;
+    /**
+     * Native `accept` attribute for the underlying file input (e.g. `".pdf,.png"` or
+     * `"image/*"`) — constrains the native file-picker dialog. Also enforced against files
+     * dropped onto the control, the same way `FileUpload` enforces it.
+     */
+    accept?: string;
+    /** Whether more than one file can be selected/dropped at once. Defaults to `false`. */
+    multiple?: boolean;
+    /**
+     * Maximum size per file, in bytes. Files exceeding this are passed to
+     * `onFilesRejected` instead of `onFilesAdded`.
+     */
+    maxSize?: number;
+    /**
+     * Maximum total number of files allowed in `files`. Only meaningful when `multiple` is
+     * `true` — Once reached, further dropped/picked files are passed to `onFilesRejected`
+     * instead of `onFilesAdded`.
+     */
+    maxFiles?: number;
+    /**
+     * Called with any files rejected for exceeding `maxSize`/`maxFiles` or not matching
+     * `accept`.
+     */
+    onFilesRejected?: (files: File[]) => void;
+    /**
+     * Error message shown (via the standard assistive-text error slot) when a dropped/picked
+     * file's extension or MIME type doesn't match `accept`. Defaults to
+     * `"File type not accepted"`.
+     */
+    invalidFileTypeMessage?: default_2.ReactNode;
+    /**
+     * Error message shown (via the standard assistive-text error slot) when a dropped/picked
+     * file would exceed `maxFiles`. Defaults to `"Maximum of {maxFiles} files allowed"`.
+     */
+    maxFilesMessage?: default_2.ReactNode;
+    /** Leading icon shown inside the control. Defaults to the built-in upload icon. */
+    icon?: default_2.ReactNode;
+    /** Text shown when no file is selected. Defaults to `"Select a file..."`. */
+    placeholder?: default_2.ReactNode;
+    /** Screen-reader label for the control itself. Defaults to `"Choose file"`. */
+    browseLabel?: string;
+    /** Screen-reader label for a file chip's remove button. Defaults to `"Remove"`. */
+    removeFileLabel?: string;
+    /** Screen-reader label for the trailing clear-all icon. Defaults to `"Clear"`. */
+    clearLabel?: string;
+    /** Disables the control and its remove/clear icons. */
+    disabled?: boolean;
+    /**
+     * Renders `files` as a static, non-interactive display with no clear/remove icons, and
+     * disables picking or dropping new files.
+     */
+    readOnly?: boolean;
+}
+
+declare interface RecursicaFileInputProps_2 extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "children" | "onDrop" | "onChange">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, RecursicaFileInputProps {
+    /** Visually forces the mandatory asterisk. Accepted for API parity with other adapters; MUI's own `required` already renders the asterisk, so this has no separate effect here. */
+    withAsterisk?: boolean;
+}
+
+/**
+ * A single file entry rendered as a removable chip in the FileUpload's file list.
+ */
+declare interface RecursicaFileUploadItem {
+    /** The underlying browser File object. */
+    file: File;
+    /**
+     * Stable identifier for this entry, used as the React key and passed back to
+     * `onFileRemove`. Defaults to the file's `name` when not provided.
+     */
+    id?: string;
+}
+export { RecursicaFileUploadItem as RecursicaFileInputItem }
+export { RecursicaFileUploadItem }
+
+/**
+ * Props for the Recursica FileUpload component.
+ */
+export declare interface RecursicaFileUploadProps {
+    /**
+     * Files currently selected, rendered as removable chips below the dropzone.
+     * This is a controlled list — `onFilesAdded`/`onFileRemove` report changes, but
+     * `FileUpload` never mutates this array itself; merge the reported changes into
+     * your own state and pass the updated list back in.
+     */
+    files?: RecursicaFileUploadItem[];
+    /**
+     * Called with the files the user just dropped onto the dropzone or picked via
+     * the browse button. Only the newly added files are passed — merge them into
+     * `files` yourself (e.g. to assign an `id`, dedupe, or reject some of them).
+     */
+    onFilesAdded?: (files: File[]) => void;
+    /**
+     * Called when a file chip's remove (X) icon is activated, identified by its
+     * `id` (or `file.name` when no `id` was given for that entry).
+     */
+    onFileRemove?: (id: string) => void;
+    /**
+     * Native `accept` attribute for the underlying file input (e.g. `".pdf,.png"`
+     * or `"image/*"`) — constrains the browse-button file picker natively. Also
+     * enforced against files dropped onto the dropzone: the browser only applies
+     * `accept` to its own file-picker dialog, never to a `drop` event, so files
+     * that don't match are rejected the same way (see `onFilesRejected`) rather
+     * than silently bypassing the restriction.
+     */
+    accept?: string;
+    /** Whether more than one file can be selected/dropped at once. Defaults to `true`. */
+    multiple?: boolean;
+    /**
+     * Maximum size per file, in bytes. Files exceeding this are passed to
+     * `onFilesRejected` instead of `onFilesAdded`.
+     */
+    maxSize?: number;
+    /**
+     * Maximum total number of files allowed in `files`. Once reached, further
+     * dropped/picked files are passed to `onFilesRejected` instead of
+     * `onFilesAdded`.
+     */
+    maxFiles?: number;
+    /**
+     * Called with any files rejected for exceeding `maxSize`/`maxFiles` or not
+     * matching `accept`.
+     */
+    onFilesRejected?: (files: File[]) => void;
+    /**
+     * Error message shown (via the standard assistive-text error slot) when a
+     * dropped/picked file's extension or MIME type doesn't match `accept`.
+     * Defaults to `"File type not accepted"`.
+     */
+    invalidFileTypeMessage?: default_2.ReactNode;
+    /**
+     * Error message shown (via the standard assistive-text error slot) when a
+     * dropped/picked file would exceed `maxFiles`. Defaults to
+     * `"Maximum of {maxFiles} files allowed"`.
+     */
+    maxFilesMessage?: default_2.ReactNode;
+    /** Icon shown above the dropzone label. Defaults to the built-in upload icon. */
+    icon?: default_2.ReactNode;
+    /** Text shown inside the dropzone. Defaults to `"Drag and drop files here to upload"`. */
+    dropzoneLabel?: default_2.ReactNode;
+    /** Label for the button that opens the native file picker. Defaults to `"Browse files"`. */
+    browseButtonLabel?: default_2.ReactNode;
+    /** Screen-reader label for each file chip's remove button. Defaults to `"Remove"`. */
+    removeFileLabel?: string;
+    /** Disables the dropzone, browse button, and every file chip's remove icon. */
+    disabled?: boolean;
+    /**
+     * Renders `files` as a static list of chips with no remove icon, and omits
+     * the dropzone/browse button entirely.
+     */
+    readOnly?: boolean;
+}
+
+declare interface RecursicaFileUploadProps_2 extends Omit<default_2.HTMLAttributes<HTMLDivElement>, "children" | "onDrop" | "onChange">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, RecursicaFileUploadProps {
+    /** Visually forces the mandatory asterisk. Accepted for API parity with other adapters; MUI's own `required` already renders the asterisk, so this has no separate effect here. */
+    withAsterisk?: boolean;
+}
+
 /**
  * Props for the Recursica Flex layout component.
  */