@mittwald/flow-react-components 1.2.0-next.61 → 1.2.0-next.62

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

@@ -0,0 +1,32 @@
+import { RefObject } from 'react';
+import { PopoverProps } from '../Popover/Popover';
+export interface CoachMarkProps extends Omit<PopoverProps, "withTip" | "modality" | "isNonModal" | "isDialogContent" | "triggerRef" | "getTargetRect" | "shouldCloseOnInteractOutside" | "maxHeight" | "isKeyboardDismissDisabled" | "UNSTABLE_portalContainer" | "defaultOpen"> {
+    /**
+     * The element the coach mark points at. It is an anchor, not a trigger —
+     * nothing about it opens the coach mark. Give it either this or `anchor`.
+     */
+    anchorRef?: RefObject<Element | null>;
+    /**
+     * The `id` of the element the coach mark points at, looked up once the
+     * element exists. Use it where a ref cannot be shared — an mStudio extension
+     * renders in a different context than the host, so a ref never arrives, while
+     * an id does.
+     */
+    anchor?: string;
+}
+/**
+ * Points at a control the user did not ask about — a feature that is new, moved
+ * or easy to miss. It opens on its own, so it stays out of the way: the page
+ * below keeps scrolling, focus is left alone, and the coach mark rides along
+ * with its anchor instead of closing at the first scroll.
+ *
+ * Nothing announces it. It renders where it is written, so put it directly
+ * behind the element it points at — then it follows that element in the reading
+ * order, and its anchor refers to it through `aria-details`.
+ *
+ * @flr-generate all
+ * @flr-ignore-props anchorRef
+ * @flowStatus beta, new
+ */
+export declare const CoachMark: import('react').FunctionComponent<CoachMarkProps & import('react').RefAttributes<HTMLDivElement>>;
+export default CoachMark;

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

@@ -0,0 +1,3 @@
+export * from './view';
+export { type CoachMarkProps, CoachMark } from './CoachMark';
+export { default } from './CoachMark';

package/dist/types/components/CoachMark/view.d.ts

@@ -0,0 +1,7 @@
+import { CoachMark } from './CoachMark';
+import { ViewComponent } from '../../lib/viewComponentContext';
+declare global {
+    interface FlowViewComponents {
+        CoachMark: ViewComponent<typeof CoachMark>;
+    }
+}

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

@@ -3,7 +3,7 @@ import { MenuItemProps } from '../MenuItem';
 import { PopoverProps } from '../Popover/Popover';
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import type * as Aria from "react-aria-components";
-export interface ContextMenuProps extends Omit<PopoverProps, "withTip">, Pick<Aria.MenuProps<MenuItemProps>, "onAction" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange" | "disabledKeys" | "renderEmptyState">, FlowComponentProps {
+export interface ContextMenuProps extends Omit<PopoverProps, "withTip" | "modality">, Pick<Aria.MenuProps<MenuItemProps>, "onAction" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange" | "disabledKeys" | "renderEmptyState">, FlowComponentProps {
     /** The type of selection that is allowed in the context menu. */
     selectionMode?: ContextMenuSelectionMode;
     /** Sets the context menu to a fixed width. */

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

@@ -1,5 +1,5 @@
 import { PopoverProps } from '../Popover/Popover';
-export type ContextualHelpProps = Omit<PopoverProps, "withTip">;
+export type ContextualHelpProps = Omit<PopoverProps, "withTip" | "modality">;
 /** @flr-generate all */
 export declare const ContextualHelp: import('react').FunctionComponent<ContextualHelpProps & import('react').RefAttributes<HTMLDivElement>>;
 export default ContextualHelp;

package/dist/types/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.d.ts

@@ -0,0 +1,24 @@
+import { FC, PropsWithChildren, Ref, RefObject } from 'react';
+import { Placement } from 'react-aria';
+import { PropsWithClassName } from '../../../../lib/types/props';
+export interface NonModalPopoverContentProps extends PropsWithChildren, PropsWithClassName {
+    withTip?: boolean;
+    isOpen?: boolean;
+    width?: string | number;
+    placement?: Placement;
+    offset?: number;
+    crossOffset?: number;
+    /** Swallowed on purpose — the stylesheet overrides `max-height` here. */
+    maxHeight?: number;
+    shouldFlip?: boolean;
+    shouldUpdatePosition?: boolean;
+    arrowBoundaryOffset?: number;
+    boundaryElement?: Element;
+    /** The id react-aria's trigger points its `aria-controls` at. */
+    id?: string;
+    onOpenChange: (isOpen: boolean) => void;
+    ref?: Ref<HTMLElement>;
+    triggerRef: RefObject<Element | null>;
+}
+export declare const NonModalPopoverContent: FC<NonModalPopoverContentProps>;
+export default NonModalPopoverContent;

package/dist/types/components/Popover/components/NonModalPopoverContent/index.d.ts

@@ -0,0 +1,2 @@
+export { type NonModalPopoverContentProps, NonModalPopoverContent, } from './NonModalPopoverContent';
+export { default } from './NonModalPopoverContent';

package/dist/types/components/Popover/components/PopoverContent/PopoverContent.d.ts

@@ -9,6 +9,9 @@ export interface PopoverContentProps extends PropsWithChildren, PropsWithClassNa
     ref?: Ref<HTMLElement>;
     triggerRef?: RefObject<Element | null>;
 }
-/** @flr-generate all */
+/**
+ * @flr-generate all
+ * @flr-ignore-props modality
+ */
 export declare const PopoverContent: FC<PopoverContentProps>;
 export default PopoverContent;

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

@@ -36,6 +36,7 @@ import { SliderProps } from '../Slider';
 import { CounterBadgeProps } from '../CounterBadge';
 import { FlowComponentName } from './types';
 import { ContextualHelpProps, ContextualHelpTriggerProps } from '../ContextualHelp';
+import { CoachMarkProps } from '../CoachMark';
 import { PopoverProps, PopoverTriggerProps } from '../Popover';
 import { ContextMenuSectionProps } from '../ContextMenu/components/ContextMenuSection';
 import { ListItemViewContentProps, ListProps } from '../List';
@@ -106,6 +107,7 @@ export interface FlowComponentPropsTypes {
     ContextMenu: ContextMenuProps;
     ContextMenuSection: ContextMenuSectionProps;
     ContextMenuTrigger: ContextMenuTriggerProps;
+    CoachMark: CoachMarkProps;
     ContextualHelp: ContextualHelpProps;
     ContextualHelpTrigger: ContextualHelpTriggerProps;
     CopyButton: CopyButtonProps;

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

@@ -33,6 +33,7 @@ export * from './ComponentDefaultsProvider';
 export * from './ComponentPropsContextProvider';
 export * from './Content';
 export * from './ContextMenu';
+export * from './CoachMark';
 export * from './ContextualHelp';
 export * from './CopyButton';
 export * from './CounterBadge';

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

@@ -5023,6 +5023,12 @@ export declare const useDesignTokens: () => {
             path: string[];
         };
     };
+    "coach-mark": {
+        "max-width": {
+            value: string;
+            path: string[];
+        };
+    };
     "contextual-help": {
         "max-width": {
             value: string;

package/dist/types/status/component-status.json.d.ts

@@ -96,6 +96,10 @@ declare const _default: {
     "level": "stable",
     "isNew": false
   },
+  "@mittwald/flow-react-components#CoachMark": {
+    "level": "beta",
+    "isNew": true
+  },
   "@mittwald/flow-react-components#CodeBlock": {
     "level": "stable",
     "isNew": false

package/dist/types/views/CoachMarkView.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CoachMarkProps } from '../components/CoachMark/CoachMark';
+declare const CoachMarkView: FC<CoachMarkProps>;
+export default CoachMarkView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.2.0-next.61",
+  "version": "1.2.0-next.62",
   "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.2.0-next.61",
+    "@mittwald/flow-icons": "^1.2.0-next.62",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.2.0-next.61",
+    "@mittwald/react-tunnel": "^1.2.0-next.62",
     "@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.2.0-next.61",
-    "@mittwald/flow-design-tokens": "1.2.0-next.61",
-    "@mittwald/flow-icons-base": "1.2.0-next.61",
+    "@mittwald/flow-core": "1.2.0-next.62",
+    "@mittwald/flow-design-tokens": "1.2.0-next.62",
+    "@mittwald/flow-icons-base": "1.2.0-next.62",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.2.0-next.61",
+    "@mittwald/typescript-config": "1.2.0-next.62",
     "@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.2.0-next.61",
+    "@mittwald/flow-icons-pro": "1.2.0-next.62",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +219,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "283fa3e69a84acef72d881532ff1e7763bb6def7"
+  "gitHead": "75b21ea1df1a24b8cc753246020e8befaf9dbefe"
 }