fix(dialog, modal, popover, sheet): restore focusTrapDisabled reactiveness (#11586)

Author: jcfranco

packages/calcite-components/src/controllers/useFocusTrap.ts

@@ -6,17 +6,13 @@ import { createFocusTrapOptions } from "../utils/focusTrapComponent";
 export interface UseFocusTrap {
   /**
    * Activates the focus trap.
-   *
-   * @see https://github.com/focus-trap/focus-trap#trapactivate
    */
-  activate: (options?: Parameters<FocusTrap["activate"]>[0]) => void;
+  activate: () => void;
 
   /**
    * Deactivates the focus trap.
-   *
-   * @see https://github.com/focus-trap/focus-trap#trapdeactivate
    */
-  deactivate: (options?: Parameters<FocusTrap["deactivate"]>[0]) => void;
+  deactivate: () => void;
 
   /**
    * By default, the host element will be used as the focus-trap element, but if the focus-trap element needs to be a different element, use this method prior to activating to set the focus-trap element.
@@ -110,13 +106,23 @@ export const useFocusTrap = <T extends FocusTrapComponent>(
 
     controller.onConnected(() => {
       if (component[options.triggerProp] && focusTrap) {
-        focusTrap.activate();
+        utils.activate();
       }
     });
 
-    controller.onDisconnected(() => focusTrap?.deactivate());
+    controller.onUpdate((changes) => {
+      if (component.hasUpdated && changes.has("focusTrapDisabled")) {
+        if (component.focusTrapDisabled) {
+          utils.deactivate();
+        } else {
+          utils.activate();
+        }
+      }
+    });
+
+    controller.onDisconnected(() => utils.deactivate());
 
-    return {
+    const utils: UseFocusTrap = {
       activate: () => {
         const targetEl = focusTrapEl || component.el;
 
@@ -158,5 +164,7 @@ export const useFocusTrap = <T extends FocusTrapComponent>(
         return focusTrap?.updateContainerElements(effectiveContainers);
       },
     };
+
+    return utils;
   });
 };