Add option to provide callback function to iModel action disable prop (#197)

* Enhance context menu options: add disabled state

* Add option to provide callback function for iModel action disable prop

Author: arome

common/changes/@itwin/imodel-browser-react/omar-disable-imodel-action-callback_2026-02-04-21-29.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Add option to provide callback function to iModel action disable prop",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}

packages/apps/storybook/src/imodel-browser/IModelGrid.stories.tsx

@@ -213,19 +213,32 @@ IndividualContextMenu.args = {
       children: "displayName contains 'R'",
       visible: (iModel) => iModel.displayName?.includes("R") ?? false,
       key: "withR",
-      onClick: (iModel) => alert("Contains R" + iModel?.displayName),
+      onClick: (iModel) => alert("Contains R: " + iModel?.displayName),
     },
     {
       children: "Add description",
       visible: (iModel) => !iModel.description,
       key: "addD",
-      onClick: (iModel) => alert("Add description" + iModel?.displayName),
+      onClick: (iModel) => alert("Add description: " + iModel?.displayName),
     },
     {
       children: "Edit description",
       visible: (iModel) => !!iModel.description,
       key: "editD",
-      onClick: (iModel) => alert("Edit description" + iModel?.displayName),
+      onClick: (iModel) => alert("Edit description: " + iModel?.displayName),
+    },
+  ],
+};
+
+export const DisabledContextMenu = Template.bind({});
+DisabledContextMenu.args = {
+  apiOverrides: { serverEnvironmentPrefix: "qa" },
+  iModelActions: [
+    {
+      children: "Disabled if name contains 'T'",
+      disabled: (iModel) => iModel.displayName?.includes("T") ?? false,
+      key: "withT",
+      onClick: (iModel) => alert("Does not contain T: " + iModel?.displayName),
     },
   ],
 };

packages/modules/imodel-browser/src/utils/_buildMenuOptions.tsx

@@ -8,10 +8,11 @@ import React from "react";
 type MenuItemProps = React.ComponentPropsWithoutRef<typeof MenuItem>;
 
 export interface ContextMenuBuilderItem<T = any>
-  extends Omit<MenuItemProps, "onClick" | "value"> {
+  extends Omit<MenuItemProps, "onClick" | "value" | "disabled"> {
   key: string;
   visible?: boolean | ((value: T) => boolean);
   onClick?: ((value?: T, refetchData?: () => void) => void) | undefined;
+  disabled?: MenuItemProps["disabled"] | ((value: T) => boolean);
 }
 
 /** Build MenuItem array for the value for each provided options
@@ -27,10 +28,11 @@ export const _buildManagedContextMenuOptions: <T>(
     ?.filter?.(({ visible }) => {
       return typeof visible === "function" ? visible(value) : visible ?? true;
     })
-    .map(({ key, visible, onClick, ...contextMenuProps }) => {
+    .map(({ key, visible, onClick, disabled, ...contextMenuProps }) => {
       return (
         <MenuItem
           {...contextMenuProps}
+          disabled={typeof disabled === "function" ? disabled(value) : disabled}
           onClick={(e?: React.MouseEvent) => {
             e?.stopPropagation();
             closeMenu?.();