@mittwald/flow-react-components 1.3.0-next.3 → 1.3.0-next.30

package/dist/types/components/CartesianChart/context.d.ts

@@ -1,6 +1,12 @@
 import { CartesianChartLayout } from './types';
 interface CartesianChartContext {
     layout: CartesianChartLayout;
+    /**
+     * Prefix that scopes a stack ID to this chart. Recharts derives DOM IDs from
+     * the stack ID, so two charts on one page sharing a stack ID would otherwise
+     * share their clip paths.
+     */
+    stackIdPrefix: string;
 }
 export declare const useCartesianChartContext: () => CartesianChartContext;
 export declare const CartesianChartContextProvider: import('react').Provider<CartesianChartContext>;

package/dist/types/components/CartesianChart/hooks/useChartAnimation.d.ts

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

package/dist/types/components/CartesianChart/hooks/useScopedStackId.d.ts

@@ -0,0 +1,6 @@
+import { StackId } from 'recharts/types/util/ChartUtils';
+/**
+ * Scopes a stack ID to the surrounding chart, so that charts on the same page
+ * using the same stack ID do not share the DOM IDs Recharts derives from it.
+ */
+export declare const useScopedStackId: (stackId: StackId | undefined) => string | 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/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/List/hooks/useInfiniteScrollTrigger.d.ts

@@ -0,0 +1,17 @@
+import { RefCallback } from 'react';
+interface InfiniteScrollTrigger {
+    /**
+     * Attach to whatever the view renders for `triggerIndex`. A callback ref, so
+     * the observer follows the trigger as it moves on with every loaded batch — a
+     * ref object would leave the effect without a signal that the element it
+     * observes has been replaced.
+     */
+    triggerRef: RefCallback<HTMLElement>;
+    /**
+     * Index of the item that loads the next batch once it scrolls into view, or
+     * `undefined` while infinite scrolling is off.
+     */
+    triggerIndex: number | undefined;
+}
+export declare const useInfiniteScrollTrigger: () => InfiniteScrollTrigger;
+export {};

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/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.d.ts

@@ -1,8 +1 @@
-import { FC } from 'react';
-import { ActionFn } from '../../../Action';
-interface Props {
-    isDisabled?: boolean;
-    onGeneratePasswordAction?: ActionFn;
-}
-export declare const PasswordGenerateButton: FC<Props>;
 export {};

package/dist/types/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.d.ts

@@ -1,10 +1 @@
-import { FC } from 'react';
-import { ResolvedPolicyValidationResult } from '../../PasswordCreationField';
-import { PropsWithClassName } from '../../../../lib/types/props';
-interface Props extends PropsWithClassName {
-    policyValidationResult?: ResolvedPolicyValidationResult;
-    isDisabled?: boolean;
-    isEmptyValue: boolean;
-}
-export declare const ValidationResultButton: FC<Props>;
 export {};

package/dist/types/components/PasswordCreationField/lib/ariaAnnounce.d.ts

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

package/dist/types/components/PasswordCreationField/lib/generateValidationTranslation.d.ts

@@ -1,3 +1 @@
-import { RuleValidationResult } from '../../../integrations/@mittwald/password-tools-js';
-export declare const generateValidationTranslation: (r: Partial<RuleValidationResult>, shotVersion?: boolean) => [string, Record<string, string | number | boolean> | undefined];
 export default generateValidationTranslation;

package/dist/types/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult.d.ts

@@ -1,4 +1 @@
-import { ResolvedPolicyValidationResult } from '../PasswordCreationField';
-import { ComplexityStatus } from '../components/ComplexityIndicator/ComplexityIndicator';
-export declare const getStatusFromPolicyValidationResult: (isValid: ResolvedPolicyValidationResult["isValid"], result: ResolvedPolicyValidationResult) => ComplexityStatus;
 export default getStatusFromPolicyValidationResult;

package/dist/types/components/PasswordCreationField/lib/usePolicyValidationResult.d.ts

@@ -1,7 +1 @@
-import { Policy } from '../../../integrations/@mittwald/password-tools-js';
-import { ResolvedPolicyValidationResult } from '../PasswordCreationField';
-export declare const usePolicyValidationResult: (validationPolicy: Policy, password: string, onValidationStart?: () => void, onValidationResult?: (data: {
-    password: string;
-    isValid: boolean;
-    results: ResolvedPolicyValidationResult;
-}) => void) => void;
+export {};

package/dist/types/lib/files/acceptedFiles.d.ts

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

package/dist/types/lib/hooks/dom/useKeepBrowserExtensionsInteractive.d.ts

@@ -1,3 +1,4 @@
+export declare const isBrowserExtensionNode: (element: Element) => boolean;
 /**
  * While a modal overlay is open, react-aria isolates the rest of the document
  * by setting `inert` on every sibling of the modal (see `ariaHideOutside`) —

package/dist/types/lib/theming/hooks/useDesignTokens.d.ts

@@ -4007,6 +4007,12 @@ export declare const useDesignTokens: () => {
             path: string[];
         };
     };
+    "cartesian-chart": {
+        "transition-duration": {
+            value: string;
+            path: string[];
+        };
+    };
     "cartesian-grid": {
         color: {
             value: string;
@@ -4024,6 +4030,10 @@ export declare const useDesignTokens: () => {
         };
     };
     "donut-chart": {
+        "transition-duration": {
+            value: string;
+            path: string[];
+        };
         "border-color": {
             value: string;
             path: string[];
@@ -6278,6 +6288,10 @@ export declare const useDesignTokens: () => {
         };
     };
     "progress-bar": {
+        "transition-duration": {
+            value: string;
+            path: string[];
+        };
         "font-size": {
             value: string;
             path: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.3.0-next.3",
+  "version": "1.3.0-next.30",
   "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.0-next.3",
+    "@mittwald/flow-icons": "^1.3.0-next.30",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.3.0-next.3",
+    "@mittwald/react-tunnel": "^1.3.0-next.30",
     "@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.0-next.3",
-    "@mittwald/flow-design-tokens": "1.3.0-next.3",
-    "@mittwald/flow-icons-base": "1.3.0-next.3",
+    "@mittwald/flow-core": "1.3.0-next.30",
+    "@mittwald/flow-design-tokens": "1.3.0-next.30",
+    "@mittwald/flow-icons-base": "1.3.0-next.30",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.3.0-next.3",
+    "@mittwald/typescript-config": "1.3.0-next.30",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -153,7 +153,7 @@
     "@storybook/react-vite": "^10.5.10",
     "@tabler/icons-react": "^3.46.0",
     "@teispace/next-themes": "^2.0.4",
-    "@types/node": "25.9.5",
+    "@types/node": "25.9.7",
     "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "5.2.0",
     "@vitest/browser": "^4.1.11",
@@ -195,7 +195,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.3.0-next.3",
+    "@mittwald/flow-icons-pro": "1.3.0-next.30",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +219,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "6afc49e243f752620463555a0f7e34d58ac80def"
+  "gitHead": "4a376bc408f5bd42eb2bb622813fb606c6c938d5"
 }

package/dist/js/packages/components/src/components/List/components/Items/hooks/useInfiniteScrollTrigger.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useInfiniteScrollTrigger.mjs","names":[],"sources":["../../../../../../../../../../src/components/List/components/Items/hooks/useInfiniteScrollTrigger.ts"],"sourcesContent":["import { useEffect, useEffectEvent, type RefObject } from \"react\";\nimport { useList } from \"@/components/List/hooks/useList\";\n\nconst loadMoreThresholdFactor = 0.2;\nconst minLoadMoreThresholdRows = 1;\nconst maxLoadMoreThresholdRows = 8;\n\nexport const getLoadMoreThresholdRows = (batchSize: number): number =>\n  Math.min(\n    maxLoadMoreThresholdRows,\n    Math.max(\n      minLoadMoreThresholdRows,\n      Math.round(batchSize * loadMoreThresholdFactor),\n    ),\n  );\n\nexport const useInfiniteScrollTrigger = (\n  triggerRef: RefObject<HTMLElement | null>,\n): void => {\n  const list = useList();\n  const isLoading = list.loader.useIsLoading();\n  const visibleItemsCount = list.batches.getVisibleItemsCount();\n\n  const loadNextBatch = useEffectEvent(() => {\n    if (list.batches.hasNextBatch() && !isLoading) {\n      list.batches.nextBatch();\n    }\n  });\n\n  useEffect(() => {\n    const trigger = triggerRef.current;\n    if (!trigger) {\n      return;\n    }\n\n    const observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        loadNextBatch();\n      }\n    });\n    observer.observe(trigger);\n\n    return () => observer.disconnect();\n  }, [loadNextBatch, triggerRef, visibleItemsCount]);\n};\n"],"mappings":";;;;;AAGA,IAAM,0BAA0B;AAChC,IAAM,2BAA2B;AACjC,IAAM,2BAA2B;AAEjC,IAAa,4BAA4B,cACvC,KAAK,IACH,0BACA,KAAK,IACH,0BACA,KAAK,MAAM,YAAY,uBAAuB,CAChD,CACF;AAEF,IAAa,4BACX,eACS;CACT,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,KAAK,OAAO,aAAa;CAC3C,MAAM,oBAAoB,KAAK,QAAQ,qBAAqB;CAE5D,MAAM,gBAAgB,qBAAqB;EACzC,IAAI,KAAK,QAAQ,aAAa,KAAK,CAAC,WAClC,KAAK,QAAQ,UAAU;CAE3B,CAAC;CAED,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SACH;EAGF,MAAM,WAAW,IAAI,sBAAsB,YAAY;GACrD,IAAI,QAAQ,MAAM,UAAU,MAAM,cAAc,GAC9C,cAAc;EAElB,CAAC;EACD,SAAS,QAAQ,OAAO;EAExB,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAe;EAAY;CAAiB,CAAC;AACnD"}

package/dist/types/components/List/components/Items/hooks/useInfiniteScrollTrigger.d.ts

@@ -1,3 +0,0 @@
-import { RefObject } from 'react';
-export declare const getLoadMoreThresholdRows: (batchSize: number) => number;
-export declare const useInfiniteScrollTrigger: (triggerRef: RefObject<HTMLElement | null>) => void;