feat(MenuItem): support action states

Lisa18289 · web-flow · commit dbf53375da08 · 2026-01-28T09:35:03.000+01:00
diff --git a/apps/docs/src/content/04-components/actions/action/examples/menuItem.tsx b/apps/docs/src/content/04-components/actions/action/examples/menuItem.tsx
@@ -0,0 +1,17 @@
+import {
+  Action,
+  Button,
+  ContextMenuTrigger,
+  ContextMenu,
+  MenuItem,
+} from "@mittwald/flow-react-components";
+import { sleepLong } from "@/content/04-components/actions/action/examples/lib";
+
+<ContextMenuTrigger>
+  <Button>Trigger</Button>
+  <ContextMenu>
+    <Action onAction={sleepLong}>
+      <MenuItem>Herunterladen</MenuItem>
+    </Action>
+  </ContextMenu>
+</ContextMenuTrigger>;
diff --git a/apps/docs/src/content/04-components/actions/action/overview.mdx b/apps/docs/src/content/04-components/actions/action/overview.mdx
@@ -42,3 +42,11 @@ Wenn mehrere Aktionen auf eine Userinteraktion folgen, können Actions auch
 ineinander verschachtelt werden.
 
 <LiveCodeEditor example="nested" editorCollapsed />
+
+---
+
+# In MenuItems
+
+Actions können auch um `MenuItems` gelegt werden, um deren State zu steuern.
+
+<LiveCodeEditor example="menuItem" editorCollapsed />
diff --git a/apps/docs/src/content/04-components/actions/button/overview.mdx b/apps/docs/src/content/04-components/actions/button/overview.mdx
@@ -114,8 +114,8 @@ deinen Button neben Input Feldern zu platzieren.
 
 # States
 
-Ein Button hat sieben verschiedene States: **Default, Hover, Pressed, Disabled,
-Pending, Succeeded** und Failed.
+Ein Button kann unterschiedliche States annehmen, die anzeigen, dass aktuell
+keine Interaktion möglich ist.
 
 <LiveCodeEditor example="states" editorCollapsed />
 
diff --git a/apps/docs/src/content/04-components/actions/context-menu/examples/states.tsx b/apps/docs/src/content/04-components/actions/context-menu/examples/states.tsx
@@ -0,0 +1,16 @@
+import {
+  Button,
+  ContextMenu,
+  ContextMenuTrigger,
+  MenuItem,
+} from "@mittwald/flow-react-components";
+
+<ContextMenuTrigger>
+  <Button>Trigger</Button>
+  <ContextMenu>
+    <MenuItem isDisabled>Disabled</MenuItem>
+    <MenuItem isPending>Pending</MenuItem>
+    <MenuItem isSucceeded>Succeeded</MenuItem>
+    <MenuItem isFailed>Failed</MenuItem>
+  </ContextMenu>
+</ContextMenuTrigger>;
diff --git a/apps/docs/src/content/04-components/actions/context-menu/overview.mdx b/apps/docs/src/content/04-components/actions/context-menu/overview.mdx
@@ -94,6 +94,23 @@ Verwende das ContextMenu als Profilmenü, indem innerhalb ein
 
 ---
 
+# States
+
+Ein MenuItem kann unterschiedliche States annehmen, die anzeigen, dass aktuell
+keine Interaktion möglich ist.
+
+<LiveCodeEditor example="states" editorCollapsed />
+
+**Disabled:** Verwende den Disabled-State, wenn das MenuItem keine Aktion oder
+kein Ereignis auslösen soll.
+
+**Pending, Succeeded und Failed:** Pending, Succeeded und Failed sollen dem
+Nutzer signalisieren, dass im Hintergrund etwas passiert, wenn er auf ein
+MenuItem geklickt hat. Verwende das MenuItem zusammen mit der Komponente
+[Action](/04-components/actions/action/overview), um die States zu steuern.
+
+---
+
 # Kombiniere mit
 
 ## Modal
diff --git a/apps/remote-dom-demo/src/app/remote/modal/page.tsx b/apps/remote-dom-demo/src/app/remote/modal/page.tsx
@@ -134,7 +134,7 @@ export default function Page() {
         </LightBox>
       </LightBoxTrigger>
 
-      <Action action={() => console.log("Projekt löschen clicked")}>
+      <Action onAction={() => console.log("Projekt löschen clicked")}>
         <Modal slot="actionConfirm">
           <Heading>Projekt löschen</Heading>
           <Content>
diff --git a/packages/components/src/components/Action/Action.tsx b/packages/components/src/components/Action/Action.tsx
@@ -8,6 +8,7 @@ import { useActionButtonState } from "@/components/Action/hooks/useActionButtonS
 import type { ComponentPropsContext } from "@/lib/propsContext/types";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
 import type { ActionFn } from "@/components/Action/types";
+import { useActionState } from "@/components/Action/hooks/useActionState";
 
 const actionButtonContext: ComponentPropsContext<"Button"> = {
   onPress: dynamic((props) => {
@@ -77,6 +78,26 @@ export const Action = flowComponent(
 
       MenuItem: {
         onAction: dynamic(() => ActionModel.use().execute),
+        isPending: dynamic((props) => {
+          const actionState = useActionState();
+          return props.isPending ?? actionState === "isPending";
+        }),
+        isSucceeded: dynamic((props) => {
+          const actionState = useActionState();
+          return props.isSucceeded ?? actionState === "isSucceeded";
+        }),
+        isFailed: dynamic((props) => {
+          const actionState = useActionState();
+          return props.isFailed ?? actionState === "isFailed";
+        }),
+        "aria-disabled": dynamic((props) => {
+          const state = useActionState();
+          const someActionInContextIsBusy = useActionStateContext().useIsBusy();
+          return (
+            props["aria-disabled"] ??
+            (state === "isExecuting" || someActionInContextIsBusy)
+          );
+        }),
       },
 
       Modal: {
diff --git a/packages/components/src/components/Action/hooks/useActionState.ts b/packages/components/src/components/Action/hooks/useActionState.ts
@@ -0,0 +1,7 @@
+import type { ActionStateValue } from "@/components/Action/models/ActionState";
+import { ActionModel } from "@/components/Action/models/ActionModel";
+
+export const useActionState = (): ActionStateValue => {
+  const action = ActionModel.use();
+  return action.state.useValue();
+};
diff --git a/packages/components/src/components/Action/stories/Default.stories.tsx b/packages/components/src/components/Action/stories/Default.stories.tsx
@@ -13,6 +13,8 @@ import { Button } from "@/components/Button";
 import { Heading } from "@/components/Heading";
 import { Content } from "@/components/Content";
 import { Action } from "@/components/Action";
+import ContextMenu, { ContextMenuTrigger } from "@/components/ContextMenu";
+import { MenuItem } from "@/components/MenuItem";
 
 const meta: Meta<typeof Action> = {
   title: "Actions/Action",
@@ -114,3 +116,24 @@ export const WithConfirmationModal: Story = {
     </Action>
   ),
 };
+
+export const InContextMenu: Story = {
+  render: (props) => (
+    <ContextMenuTrigger>
+      <Button>Trigger</Button>
+      <ContextMenu {...props}>
+        <Action onAction={asyncFunction}>
+          <MenuItem>Async</MenuItem>
+        </Action>
+        <Action onAction={asyncLongFunction}>
+          <MenuItem>Async Long</MenuItem>
+        </Action>
+        <Action onAction={asyncFunction}>
+          <Action onAction={asyncFunction}>
+            <MenuItem>Nested Async</MenuItem>
+          </Action>
+        </Action>
+      </ContextMenu>
+    </ContextMenuTrigger>
+  ),
+};
diff --git a/packages/components/src/components/ContextMenu/stories/Default.stories.tsx b/packages/components/src/components/ContextMenu/stories/Default.stories.tsx
@@ -209,3 +209,17 @@ export const WithSectionSelectionMode: Story = {
     defaultOpen: true,
   },
 };
+
+export const MenuItemStates: Story = {
+  render: (props) => (
+    <ContextMenuTrigger>
+      <Button>Trigger</Button>
+      <ContextMenu {...props}>
+        <MenuItem isDisabled>Disabled</MenuItem>
+        <MenuItem isPending>Pending</MenuItem>
+        <MenuItem isSucceeded>Succeeded</MenuItem>
+        <MenuItem isFailed>Failed</MenuItem>
+      </ContextMenu>
+    </ContextMenuTrigger>
+  ),
+};
diff --git a/packages/components/src/components/MenuItem/MenuItem.module.scss b/packages/components/src/components/MenuItem/MenuItem.module.scss
@@ -1,5 +1,15 @@
 @use "../../styles/mixins/menuItem";
 
 .menuItem {
+  position: relative;
+
   @include menuItem.menuItem();
+
+  .stateIcon {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
diff --git a/packages/components/src/components/MenuItem/MenuItem.tsx b/packages/components/src/components/MenuItem/MenuItem.tsx
@@ -5,19 +5,96 @@ import clsx from "clsx";
 import { MenuItemContent } from "@/components/MenuItem/components/MenuItemContent/MenuItemContent";
 import type { FlowComponentProps } from "@/lib/componentFactory/flowComponent";
 import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import { useAriaAnnounceActionState } from "@/components/Action/lib/ariaLive";
+import { IconFailed, IconSucceeded } from "@/components/Icon/components/icons";
+import LoadingSpinner from "@/components/LoadingSpinner";
 
 export interface MenuItemProps
   extends
     Omit<Aria.MenuItemProps, "children">,
     PropsWithChildren,
     FlowComponentProps {
   selectionVariant?: "control" | "navigation" | "switch";
+  /** Whether the button is in a pending state. */
+  isPending?: boolean;
+  /** Whether the button is in a succeeded state. */
+  isSucceeded?: boolean;
+  /** Whether the button is in a failed state. */
+  isFailed?: boolean;
+  /** Disables button but keeps it focusable. */
+  "aria-disabled"?: boolean;
 }
 
+const disablePendingProps = (props: MenuItemProps) => {
+  if (
+    props.isPending ||
+    props.isSucceeded ||
+    props.isFailed ||
+    props["aria-disabled"]
+  ) {
+    props = { ...props };
+    props.onPress = undefined;
+    props.onPressStart = undefined;
+    props.onPressEnd = undefined;
+    props.onPressChange = undefined;
+    props.onPressUp = undefined;
+  }
+
+  return props;
+};
+
 /** @flr-generate all */
 export const MenuItem = flowComponent("MenuItem", (props) => {
-  const { children, className, selectionVariant, id, ref, ...rest } = props;
-  const rootClassName = clsx(styles.menuItem, className);
+  props = disablePendingProps(props);
+
+  const {
+    children,
+    className,
+    selectionVariant,
+    id,
+    ref,
+    "aria-disabled": ariaDisabled,
+    isPending,
+    isSucceeded,
+    isFailed,
+    ...rest
+  } = props;
+
+  const rootClassName = clsx(
+    styles.menuItem /**
+     * Workaround warning: The Aria.MenuItem does not support "aria-disabled" by
+     * now, so this MenuItem will be visually disabled via CSS.
+     */,
+    (ariaDisabled || isFailed || isSucceeded || isPending) &&
+      styles.ariaDisabled,
+    className,
+  );
+
+  useAriaAnnounceActionState(
+    isPending
+      ? "isPending"
+      : isSucceeded
+        ? "isSucceeded"
+        : isFailed
+          ? "isFailed"
+          : "isIdle",
+  );
+
+  const StateIconComponent = isSucceeded
+    ? IconSucceeded
+    : isFailed
+      ? IconFailed
+      : isPending
+        ? LoadingSpinner
+        : undefined;
+
+  const stateIcon = StateIconComponent && (
+    <div className={styles.stateIcon}>
+      <StateIconComponent
+        status={isFailed ? "danger" : isSucceeded ? "success" : undefined}
+      />
+    </div>
+  );
 
   return (
     <Aria.MenuItem
@@ -28,9 +105,12 @@ export const MenuItem = flowComponent("MenuItem", (props) => {
       ref={ref}
     >
       {(props) => (
-        <MenuItemContent {...props} selectionVariant={selectionVariant}>
-          {children}
-        </MenuItemContent>
+        <>
+          <MenuItemContent {...props} selectionVariant={selectionVariant}>
+            {children}
+          </MenuItemContent>
+          {stateIcon}
+        </>
       )}
     </Aria.MenuItem>
   );
diff --git a/packages/components/src/styles/mixins/menuItem.scss b/packages/components/src/styles/mixins/menuItem.scss
@@ -63,7 +63,8 @@
     }
   }
 
-  &[aria-disabled] {
+  &[aria-disabled],
+  &.ariaDisabled {
     background-color: var(--menu-item--disabled-background-color);
     color: var(--menu-item--disabled-color);
 
diff --git a/packages/remote-elements/src/auto-generated/RemoteMenuItemElement.ts b/packages/remote-elements/src/auto-generated/RemoteMenuItemElement.ts
@@ -11,6 +11,7 @@ export class RemoteMenuItemElement extends FlowRemoteElement<RemoteMenuItemEleme
 
   static override get remoteProperties() {
     return {
+      "aria-disabled": {},
       "aria-label": {},
       className: {},
       dir: {},
@@ -21,6 +22,9 @@ export class RemoteMenuItemElement extends FlowRemoteElement<RemoteMenuItemEleme
       id: {},
       inert: {},
       isDisabled: {},
+      isFailed: {},
+      isPending: {},
+      isSucceeded: {},
       lang: {},
       ping: {},
       referrerPolicy: {},
diff --git a/packages/remote-react-components/src/tests/visual/ContextMenu.browser.test.tsx b/packages/remote-react-components/src/tests/visual/ContextMenu.browser.test.tsx
@@ -62,6 +62,12 @@ test.each(testEnvironments)(
             <MenuItem id="checkbox1">Checkbox 1</MenuItem>
             <MenuItem id="checkbox2">Checkbox 2</MenuItem>
           </ContextMenuSection>
+          <ContextMenuSection>
+            <MenuItem isDisabled>Disabled</MenuItem>
+            <MenuItem isPending>Pending</MenuItem>
+            <MenuItem isSucceeded>Succeeded</MenuItem>
+            <MenuItem isFailed>Failed</MenuItem>
+          </ContextMenuSection>
         </ContextMenu>
       </ContextMenuTrigger>,
     );
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/ContextMenu.browser.test.tsx/ContextMenu-opened-firefox-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/ContextMenu.browser.test.tsx/ContextMenu-opened-firefox-darwin.png
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/ContextMenu.browser.test.tsx/ContextMenu-opened-firefox-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/ContextMenu.browser.test.tsx/ContextMenu-opened-firefox-linux.png
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/ContextMenu.browser.test.tsx/ContextMenu-opened-webkit-darwin.png b/packages/remote-react-components/src/tests/visual/__screenshots__/ContextMenu.browser.test.tsx/ContextMenu-opened-webkit-darwin.png
diff --git a/packages/remote-react-components/src/tests/visual/__screenshots__/ContextMenu.browser.test.tsx/ContextMenu-opened-webkit-linux.png b/packages/remote-react-components/src/tests/visual/__screenshots__/ContextMenu.browser.test.tsx/ContextMenu-opened-webkit-linux.png
