@mittwald/flow-react-components 1.3.5 → 1.4.0-next.1

package/dist/types/components/Action/models/ActionModel.d.ts

@@ -2,8 +2,7 @@ import { OverlayController } from '../../../lib/controller';
 import { ActionProps } from '../types';
 import { ActionState } from './ActionState';
 import { OverlayContext } from '../../../lib/controller/overlay/context';
-import { FlowComponentName } from '../../propTypes';
-import { CloseModalOptions, CloseOverlayOptions } from '../../../lib/controller/overlay/OverlayController';
+import { OverlayReference } from '../../../lib/controller/overlay/OverlayController';
 interface InitObject {
     actionProps: ActionProps;
     parentAction?: ActionModel;
@@ -23,8 +22,17 @@ export declare class ActionModel {
     static useNew(actionProps: ActionProps, init?: Partial<InitObject>): ActionModel;
     static use(): ActionModel;
     static useConfirmationAction(): ActionModel;
-    getOverlayController(from: FlowComponentName | OverlayController | CloseOverlayOptions | CloseModalOptions): OverlayController | undefined;
-    static getCloseOverlayOptions: (options?: OverlayController | FlowComponentName | CloseOverlayOptions | CloseModalOptions | true) => CloseModalOptions | undefined;
+    /**
+     * Resolves an overlay reference against this action's overlay context.
+     *
+     * Returns `undefined` unless the action carries one of the overlay props –
+     * `Action` relies on that to tell whether it owns a surrounding `Modal`'s
+     * controller.
+     */
+    getOverlayController(from: OverlayReference): OverlayController | undefined;
+    private get hasOverlayProps();
+    private resolveOverlayReference;
+    static getCloseOverlayOptions: (options?: OverlayReference) => import('../../../lib/controller/overlay/OverlayController').CloseOverlayOptions | undefined;
     execute: (...args: unknown[]) => void;
 }
 export {};

package/dist/types/components/Action/types.d.ts

@@ -16,8 +16,15 @@ export interface ActionProps extends PropsWithChildren, FlowComponentProps {
      * components share one action state.
      */
     actionModel?: ActionModel;
-    /** The overlay to close when the action is triggered. */
-    closeOverlay?: FlowComponentName | OverlayController | CloseOverlayOptions;
+    /**
+     * The overlay to close when the action is triggered. `true` closes the
+     * nearest enclosing overlay, whichever component it is — a name still wins,
+     * so `closeOverlay="Modal"` inside a `Popover` closes the outer modal.
+     *
+     * There is no `openOverlay={true}` counterpart: the nearest overlay is the
+     * one this action renders inside, so it is open by definition.
+     */
+    closeOverlay?: boolean | FlowComponentName | OverlayController | CloseOverlayOptions;
     /** The overlay to open when the action is triggered. */
     openOverlay?: FlowComponentName | OverlayController;
     /** The overlay to open or close when the action is triggered. */

package/dist/types/components/ContextMenu/lib.d.ts

@@ -1,4 +1,8 @@
 export type ContextMenuSelectionMode = "single" | "multiple" | "navigation" | "switch";
 export declare const getAriaSelectionMode: (selectionMode?: ContextMenuSelectionMode) => "single" | "multiple" | "none" | undefined;
 export declare const getMenuItemSelectionVariant: (selectionMode?: ContextMenuSelectionMode) => "switch" | "navigation" | "control" | undefined;
-export declare const getCloseOverlayType: (selectionMode?: ContextMenuSelectionMode) => "ContextMenu" | undefined;
+/**
+ * Whether selecting an item closes the menu. A mode that collects several
+ * selections keeps it open.
+ */
+export declare const closesOnSelect: (selectionMode?: ContextMenuSelectionMode) => selectionMode is "single" | "navigation" | undefined;

package/dist/types/components/CopyButton/CopyButton.d.ts

@@ -3,6 +3,11 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 export interface CopyButtonProps extends Omit<ButtonProps, "onPress" | "aria-label" | "render">, FlowComponentProps<HTMLButtonElement> {
     /** The text to copy. */
     text?: string;
+    /**
+     * Called with the copied text once it has been written to the clipboard. Not
+     * called when copying fails.
+     */
+    onCopy?: (text: string) => void;
 }
 /** @flr-generate all */
 export declare const CopyButton: import('react').FunctionComponent<CopyButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Icon/components/icons/IconAIHosting.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, FC } from 'react';
+import { Icon } from '../..';
+export declare const IconAIHosting: FC<Omit<ComponentProps<typeof Icon>, "children">>;
+export default IconAIHosting;

package/dist/types/components/Icon/components/icons/index.d.ts

@@ -54,6 +54,7 @@ export { IconUnorderedList } from './IconUnorderedList';
 export { IconUpload } from './IconUpload';
 export { IconView } from './IconView';
 export { IconAI } from './IconAI';
+export { IconAIHosting } from './IconAIHosting';
 export { IconAnalytics } from './IconAnalytics';
 export { IconApp } from './IconApp';
 export { IconAutoresponder } from './IconAutoresponder';

package/dist/types/components/Image/Image.d.ts

@@ -1,8 +1,14 @@
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import { ComponentProps } from 'react';
 export interface ImageProps extends Omit<ComponentProps<"img">, "ref">, FlowComponentProps<HTMLImageElement> {
-    /** Display the image with border and rounded edges. */
+    /** Display the image with a border. */
     withBorder?: boolean;
+    /**
+     * Display the image with rounded corners.
+     *
+     * @default true
+     */
+    withRoundedCorners?: boolean;
     /**
      * The aspect ratio of the images container. Larger images will be centered
      * and their overflow will be hidden.

package/dist/types/components/MarkdownEditor/MarkdownEditor.d.ts

@@ -1,13 +1,33 @@
 import { ComponentType } from 'react';
 import { MarkdownProps } from '../Markdown';
 import { TextAreaProps } from '../TextArea';
+import { MarkdownEditorUpload } from './lib/fileUpload';
 export type MarkdownEditorMode = "editor" | "preview";
+export type { MarkdownEditorUpload };
 export interface MarkdownEditorProps extends TextAreaProps, Pick<MarkdownProps, "headingOffset"> {
     /**
      * Allows replacing the markdown preview renderer implementation. Defaults to
      * the internal `Markdown` component.
      */
     markdownComponent?: ComponentType<MarkdownProps>;
+    /**
+     * Uploads a file the user dropped onto the editor, pasted into it or picked
+     * with its attachment button. A placeholder comment sits at the cursor while
+     * the returned promise is pending: resolving replaces it with markdown
+     * linking to the file — an image embed for an image — and rejecting takes it
+     * back out. Without this prop the editor takes no files at all.
+     *
+     * Named without an `on` prefix on purpose: the remote generator turns an
+     * `on*` prop into a fire-and-forget event, and this one has to hand a result
+     * back.
+     */
+    uploadFile?: (file: File) => Promise<MarkdownEditorUpload>;
+    /**
+     * Which file types the editor takes, as the `accept` attribute of a file
+     * input: a comma separated list of MIME types (`image/png`), MIME wildcards
+     * (`image/*`) and file extensions (`.png`). Defaults to every type.
+     */
+    accept?: string;
 }
 /** @flr-generate all */
 export declare const MarkdownEditor: import('react').FunctionComponent<MarkdownEditorProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/types/components/MarkdownEditor/components/AttachmentButton.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/MarkdownEditor/components/Toolbar.d.ts

@@ -1,11 +1,20 @@
 import { FC } from 'react';
-import { ToolBarButtonProps } from './ToolbarButton';
 import { ModeButtonProps } from './ModeButton';
 import { ButtonProps } from '../../Button';
+import { InsertType } from '../lib/modifyValueByType';
 interface ToolbarProps extends Pick<ButtonProps, "isDisabled"> {
     currentMode: ModeButtonProps["currentMode"];
     onModeChange: ModeButtonProps["onChange"];
-    onToolPressed: ToolBarButtonProps["onPress"];
+    onToolPressed: (type: InsertType) => void;
+    /** Which file types the attachment button offers. */
+    accept?: string;
+    /** Renders the attachment button when set. */
+    onFilesSelected?: (files: File[]) => void;
+    /**
+     * Disables the attachment button, which a read-only editor takes no files
+     * for.
+     */
+    isReadOnly?: boolean;
 }
 export declare const Toolbar: FC<ToolbarProps>;
 export {};

package/dist/types/components/MarkdownEditor/components/ToolbarButton.d.ts

@@ -1,8 +1,14 @@
 import { FC } from 'react';
 import { InsertType } from '../lib/modifyValueByType';
 import { ButtonProps } from '../../Button';
+/**
+ * What a toolbar button is: every markdown syntax it inserts, plus the one tool
+ * that does something else. The name is also the `toolbar.<type>` locale key of
+ * the button's label.
+ */
+export type ToolbarButtonType = InsertType | "attachment";
 export interface ToolBarButtonProps extends Pick<ButtonProps, "isDisabled" | "children"> {
-    type: InsertType;
-    onPress?: (type: InsertType) => void;
+    type: ToolbarButtonType;
+    onPress?: () => void;
 }
 export declare const ToolbarButton: FC<ToolBarButtonProps>;

package/dist/types/components/MarkdownEditor/index.d.ts

@@ -1,2 +1,2 @@
-export { type MarkdownEditorProps, MarkdownEditor } from './MarkdownEditor';
+export { type MarkdownEditorProps, type MarkdownEditorUpload, MarkdownEditor, } from './MarkdownEditor';
 export { default } from './MarkdownEditor';

package/dist/types/components/MarkdownEditor/lib/fileUpload.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The result of uploading a file dropped into, pasted into or selected in a
+ * `MarkdownEditor`.
+ */
+export interface MarkdownEditorUpload {
+    /** The URL the uploaded file is available at. */
+    url: string;
+    /**
+     * The link text of the inserted markdown — the alt text for an image.
+     * Defaults to the name of the uploaded file.
+     */
+    name?: string;
+}
+/** A new editor value together with where the cursor ends up in it. */
+export interface ValueEdit {
+    value: string;
+    selectionStart: number;
+    selectionEnd: number;
+}

package/dist/types/components/MarkdownEditor/lib/useFileUpload.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/lib/controller/overlay/OverlayContextProvider.d.ts

@@ -4,6 +4,15 @@ import { OverlayController } from '..';
 interface Props extends PropsWithChildren {
     type: FlowComponentName;
     controller: OverlayController;
+    /**
+     * Whether the children are the overlay's content. Content also registers the
+     * controller as the _nearest_ overlay, which is what `closeOverlay` without a
+     * name resolves to. Set `false` where the subtree is not inside the overlay –
+     * `OverlayTrigger` wraps the trigger too.
+     *
+     * @default true
+     */
+    isOverlayContent?: boolean;
 }
 export declare const OverlayContextProvider: FC<Props>;
 export default OverlayContextProvider;

package/dist/types/lib/controller/overlay/OverlayController.d.ts

@@ -5,13 +5,23 @@ export type OverlayCloseHandler = () => unknown;
 export type OverlayOpenStateHandler = (isOpen: boolean) => unknown;
 type DisposerFn = () => void;
 export interface CloseOverlayOptions {
-    overlay: FlowComponentName | OverlayController;
+    /**
+     * The overlay to close. Omitted, the nearest enclosing overlay is closed –
+     * the same thing `closeOverlay={true}` means.
+     */
+    overlay?: FlowComponentName | OverlayController;
     bypassConfirmation?: boolean;
 }
 export interface OnOverlayClosedOptions {
     dependencies?: DependencyList;
 }
 export type CloseModalOptions = Omit<CloseOverlayOptions, "overlay">;
+/**
+ * Every way an action can point at an overlay: by the Flow component name it
+ * registers under, by controller, by options, or with `true` – the nearest
+ * enclosing overlay, whatever its name.
+ */
+export type OverlayReference = FlowComponentName | OverlayController | CloseOverlayOptions | true;
 type CloseOptions = CloseOverlayOptions | CloseModalOptions;
 export interface OverlayControllerOptions {
     isDefaultOpen?: boolean;

package/dist/types/lib/controller/overlay/context.d.ts

@@ -1,5 +1,22 @@
 import { OverlayController } from './OverlayController';
 import { FlowComponentName } from '../../../components/propTypes';
-export type OverlayContext = Partial<Record<FlowComponentName, OverlayController | undefined>>;
-export declare const overlayContext: import('react').Context<Partial<Record<keyof import('../../../components/propTypes').FlowComponentPropsTypes, OverlayController | undefined>>>;
+export interface OverlayContext {
+    /**
+     * The enclosing overlays' controllers, keyed by the Flow component name the
+     * providing overlay registers itself under. Innermost wins per name – a
+     * `Modal` inside a `Modal` overwrites the `Modal` entry – but the map does
+     * not record which of two differently named overlays is the inner one.
+     */
+    byType: Partial<Record<FlowComponentName, OverlayController | undefined>>;
+    /**
+     * The controller of the innermost overlay this subtree is the _content_ of,
+     * whatever its component name. `undefined` outside any overlay content.
+     *
+     * Only providers that wrap overlay content set it. `OverlayTrigger` wraps the
+     * trigger as well, so it contributes to `byType` only – an `Action` in the
+     * trigger button is not inside the overlay it opens.
+     */
+    nearest?: OverlayController;
+}
+export declare const overlayContext: import('react').Context<OverlayContext>;
 export declare const useOverlayContext: () => OverlayContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.3.5",
+  "version": "1.4.0-next.1",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -83,9 +83,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.3.5",
+    "@mittwald/flow-icons": "^1.4.0-next.1",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.3.5",
+    "@mittwald/react-tunnel": "^1.4.0-next.1",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -138,12 +138,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.3.5",
-    "@mittwald/flow-design-tokens": "1.3.5",
-    "@mittwald/flow-icons-base": "1.3.5",
+    "@mittwald/flow-core": "1.4.0-next.1",
+    "@mittwald/flow-design-tokens": "1.4.0-next.1",
+    "@mittwald/flow-icons-base": "1.4.0-next.1",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.3.5",
+    "@mittwald/typescript-config": "1.4.0-next.1",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -195,7 +195,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.3.5",
+    "@mittwald/flow-icons-pro": "1.4.0-next.1",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +219,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "f480c1dd2738050ce09ec534ff2c08f84ee66f5d"
+  "gitHead": "31ec95af38164122f89af7755bd2c05a9f5ca807"
 }