myoperator-ui 0.0.195 → 0.0.197

package/dist/index.js

@@ -1941,6 +1941,10 @@ export interface ReadableFieldProps
   headerAction?: {
     label: string;
     onClick: () => void;
+    /** When true, button is shown but non-interactive */
+    disabled?: boolean;
+    /** Tooltip text shown on hover when disabled */
+    disabledTooltip?: string;
   };
   /** Callback when value is copied */
   onValueCopy?: (value: string) => void;
@@ -2041,13 +2045,31 @@ export const ReadableField = React.forwardRef<HTMLDivElement, ReadableFieldProps
             {label}
           </span>
           {headerAction && (
-            <button
-              type="button"
-              onClick={headerAction.onClick}
-              className="text-sm font-semibold text-semantic-text-muted tracking-[0.014px] hover:text-semantic-text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-semantic-text-primary rounded transition-colors"
-            >
-              {headerAction.label}
-            </button>
+            headerAction.disabled ? (
+              <span className="relative group/regen-action">
+                <button
+                  type="button"
+                  disabled
+                  className="text-sm font-semibold text-semantic-text-muted tracking-[0.014px] opacity-50 cursor-not-allowed rounded"
+                >
+                  {headerAction.label}
+                </button>
+                {headerAction.disabledTooltip && (
+                  <span className="pointer-events-none absolute bottom-full right-0 mb-2 whitespace-nowrap rounded bg-semantic-primary px-2 py-1 text-xs text-semantic-text-inverted opacity-0 transition-opacity group-hover/regen-action:opacity-100 z-10">
+                    {headerAction.disabledTooltip}
+                    <span className="absolute top-full right-2 border-4 border-transparent border-t-semantic-primary" />
+                  </span>
+                )}
+              </span>
+            ) : (
+              <button
+                type="button"
+                onClick={headerAction.onClick}
+                className="text-sm font-semibold text-semantic-text-muted tracking-[0.014px] hover:text-semantic-text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-semantic-text-primary rounded transition-colors"
+              >
+                {headerAction.label}
+              </button>
+            )
           )}
         </div>
 
@@ -7607,6 +7629,12 @@ export interface EndpointDetailsProps
   onValueCopy?: (field: string, value: string) => void;
   /** Callback when regenerate is clicked for a field */
   onRegenerate?: (field: "authToken" | "secretKey") => void;
+  /** When false, regenerate buttons are hidden entirely */
+  showRegenerate?: boolean;
+  /** When false, regenerate buttons are visible but disabled */
+  canRegenerate?: boolean;
+  /** Tooltip text shown on hover when regenerate is disabled. Only used when canRegenerate is false */
+  regenerateDisabledTooltip?: string;
   /** Callback when revoke access is clicked - only used in calling variant */
   onRevokeAccess?: () => void;
   /** Whether to show the revoke access section - only used in calling variant */
@@ -7664,6 +7692,9 @@ export const EndpointDetails = React.forwardRef<
       apiKey,
       onValueCopy,
       onRegenerate,
+      showRegenerate = true,
+      canRegenerate = true,
+      regenerateDisabledTooltip = "You are not allowed to regenerate this token",
       onRevokeAccess,
       showRevokeSection = true,
       revokeTitle = "Revoke API Access",
@@ -7679,6 +7710,16 @@ export const EndpointDetails = React.forwardRef<
       onValueCopy?.(field, value);
     };
 
+    const buildRegenerateAction = (field: "authToken" | "secretKey") => {
+      if (!showRegenerate) return undefined;
+      return {
+        label: "Regenerate",
+        onClick: () => onRegenerate?.(field),
+        disabled: !canRegenerate,
+        disabledTooltip: !canRegenerate ? regenerateDisabledTooltip : undefined,
+      };
+    };
+
     // Collect non-secret visible fields for the top rows
     const topFields: Array<{ label: string; value: string; field: string }> =
       [];
@@ -7746,10 +7787,7 @@ export const EndpointDetails = React.forwardRef<
                 value={authToken}
                 secret
                 helperText="Used for client-side integrations."
-                headerAction={{
-                  label: "Regenerate",
-                  onClick: () => onRegenerate?.("authToken"),
-                }}
+                headerAction={buildRegenerateAction("authToken")}
                 onValueCopy={handleCopy("authToken")}
               />
               {secretKey && (
@@ -7758,10 +7796,7 @@ export const EndpointDetails = React.forwardRef<
                   value={secretKey}
                   secret
                   helperText="Never share this key or expose it in client-side code."
-                  headerAction={{
-                    label: "Regenerate",
-                    onClick: () => onRegenerate?.("secretKey"),
-                  }}
+                  headerAction={buildRegenerateAction("secretKey")}
                   onValueCopy={handleCopy("secretKey")}
                 />
               )}
@@ -7772,10 +7807,7 @@ export const EndpointDetails = React.forwardRef<
               label="Authentication"
               value={authToken}
               secret
-              headerAction={{
-                label: "Regenerate",
-                onClick: () => onRegenerate?.("authToken"),
-              }}
+              headerAction={buildRegenerateAction("authToken")}
               onValueCopy={handleCopy("authToken")}
             />
           )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.195",
+  "version": "0.0.197",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",