refactor(input-date-picker, input-time-picker): wire up useFocusTrap controller

packages/calcite-components/src/components/dialog/dialog.tsx

@@ -70,7 +70,7 @@ export class Dialog extends LitElement implements OpenCloseComponent, LoadableCo
 
   private dragPosition: DialogDragPosition = { ...initialDragPosition };
 
-  focusTrap = useFocusTrap<Dialog>({
+  focusTrap = useFocusTrap<this>({
     triggerProp: "open",
     focusTrapOptions: {
       // scrim closes on click, so we let it take over
@@ -161,6 +161,9 @@ export class Dialog extends LitElement implements OpenCloseComponent, LoadableCo
    */
   @property({ reflect: true }) escapeDisabled = false;
 
+  /** Allows special focus-trap configuration. */
+  @property() focusTrapOptions;
+
   /** The component header text. */
   @property() heading: string;
 

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

@@ -1,5 +1,4 @@
 // @ts-strict-ignore
-import { FocusTrap } from "focus-trap";
 import { PropertyValues } from "lit";
 import {
   LitElement,
@@ -11,6 +10,7 @@ import {
   JsxNode,
   stringOrBoolean,
 } from "@arcgis/lumina";
+import { useFocusTrap } from "../../controllers/useFocusTrap";
 import {
   dateFromISO,
   dateFromLocalizedString,
@@ -64,12 +64,6 @@ import {
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { DateLocaleData, getLocaleData, getValueAsDateRange } from "../date-picker/utils";
 import { HeadingLevel } from "../functional/Heading";
-import {
-  activateFocusTrap,
-  connectFocusTrap,
-  deactivateFocusTrap,
-  FocusTrapComponent,
-} from "../../utils/focusTrapComponent";
 import { guid } from "../../utils/guid";
 import { getIconScale } from "../../utils/component";
 import { Status } from "../interfaces";
@@ -97,7 +91,6 @@ export class InputDatePicker
   extends LitElement
   implements
     FloatingUIComponent,
-    FocusTrapComponent,
     FormComponent,
     InteractiveComponent,
     LabelableComponent,
@@ -136,11 +129,27 @@ export class InputDatePicker
 
   private focusOnOpen = false;
 
-  focusTrap: FocusTrap;
-
-  private focusTrapDeactivates = (): void => {
+  focusTrap = useFocusTrap<this>({
+    triggerProp: "open",
+    focusTrapOptions: {
+      onActivate: () => {
+        if (this.focusOnOpen) {
+          this.datePickerEl?.setFocus();
+          this.focusOnOpen = false;
+        }
+      },
+      allowOutsideClick: true,
+      // Allow outside click and let the popover manager take care of closing the popover.
+      clickOutsideDeactivates: false,
+      initialFocus: false,
+      setReturnFocus: false,
+      onDeactivate: this.focusTrapDeactivates,
+    },
+  })(this);
+
+  private focusTrapDeactivates(): void {
     this.open = false;
-  };
+  }
 
   formEl: HTMLFormElement;
 
@@ -460,10 +469,6 @@ export class InputDatePicker
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
     Please refactor your code to reduce the need for this check.
     Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
-    if (changes.has("focusTrapDisabled") && (this.hasUpdated || this.focusTrapDisabled !== false)) {
-      this.handleFocusTrapDisabled(this.focusTrapDisabled);
-    }
-
     if (changes.has("disabled") && (this.hasUpdated || this.disabled !== false)) {
       this.handleDisabledAndReadOnlyChange(this.disabled);
     }
@@ -523,7 +528,6 @@ export class InputDatePicker
   }
 
   override disconnectedCallback(): void {
-    deactivateFocusTrap(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this);
@@ -533,18 +537,6 @@ export class InputDatePicker
 
   // #region Private Methods
 
-  private handleFocusTrapDisabled(focusTrapDisabled: boolean): void {
-    if (!this.open) {
-      return;
-    }
-
-    if (focusTrapDisabled) {
-      deactivateFocusTrap(this);
-    } else {
-      activateFocusTrap(this);
-    }
-  }
-
   private handleDisabledAndReadOnlyChange(value: boolean): void {
     if (!value) {
       this.open = false;
@@ -699,14 +691,7 @@ export class InputDatePicker
   }
 
   onOpen(): void {
-    activateFocusTrap(this, {
-      onActivate: () => {
-        if (this.focusOnOpen) {
-          this.datePickerEl?.setFocus();
-          this.focusOnOpen = false;
-        }
-      },
-    });
+    this.focusTrap.activate();
     this.calciteInputDatePickerOpen.emit();
   }
 
@@ -717,7 +702,7 @@ export class InputDatePicker
   onClose(): void {
     this.calciteInputDatePickerClose.emit();
     hideFloatingUI(this);
-    deactivateFocusTrap(this);
+    this.focusTrap.deactivate();
     this.focusOnOpen = false;
     this.datePickerEl?.reset();
   }
@@ -840,18 +825,12 @@ export class InputDatePicker
   }
 
   private setDatePickerRef(el: DatePicker["el"]): void {
+    if (!el) {
+      return;
+    }
+
     this.datePickerEl = el;
-    connectFocusTrap(this, {
-      focusTrapEl: el,
-      focusTrapOptions: {
-        allowOutsideClick: true,
-        // Allow outside click and let the popover manager take care of closing the popover.
-        clickOutsideDeactivates: false,
-        initialFocus: false,
-        setReturnFocus: false,
-        onDeactivate: this.focusTrapDeactivates,
-      },
-    });
+    this.focusTrap.overrideFocusTrapEl(el);
   }
 
   private async loadLocaleData(): Promise<void> {

packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx

@@ -1079,7 +1079,7 @@ export class InputTimePicker
         <calcite-popover
           autoClose={true}
           focusTrapDisabled={this.focusTrapDisabled}
-          initialFocusTrapFocus={false}
+          focusTrapOptions={{ initialFocus: false }}
           label={messages.chooseTime}
           lang={this.messages._lang}
           oncalcitePopoverBeforeClose={this.popoverBeforeCloseHandler}

packages/calcite-components/src/components/modal/modal.tsx

@@ -18,14 +18,6 @@ import {
   slotChangeGetAssignedElements,
   slotChangeHasAssignedElement,
 } from "../../utils/dom";
-import {
-  activateFocusTrap,
-  connectFocusTrap,
-  deactivateFocusTrap,
-  FocusTrap,
-  FocusTrapComponent,
-  updateFocusTrapElements,
-} from "../../utils/focusTrapComponent";
 import {
   componentFocusable,
   LoadableComponent,
@@ -38,6 +30,7 @@ import { Kind, Scale } from "../interfaces";
 import { getIconScale } from "../../utils/component";
 import { logger } from "../../utils/logger";
 import { useT9n } from "../../controllers/useT9n";
+import { useFocusTrap } from "../../controllers/useFocusTrap";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { CSS, ICONS, SLOTS } from "./resources";
 import { styles } from "./modal.scss";
@@ -61,10 +54,7 @@ let initialDocumentOverflowStyle: string = "";
  * @slot secondary - A slot for adding a secondary button.
  * @slot back - A slot for adding a back button.
  */
-export class Modal
-  extends LitElement
-  implements OpenCloseComponent, FocusTrapComponent, LoadableComponent
-{
+export class Modal extends LitElement implements OpenCloseComponent, LoadableComponent {
   // #region Static Members
 
   static override styles = styles;
@@ -81,7 +71,21 @@ export class Modal
     this.updateSizeCssVars();
   });
 
-  focusTrap: FocusTrap;
+  focusTrap = useFocusTrap<this>({
+    triggerProp: "open",
+    focusTrapOptions: {
+      // scrim closes on click, so we let it take over
+      clickOutsideDeactivates: false,
+      escapeDeactivates: (event) => {
+        if (!event.defaultPrevented && !this.escapeDisabled) {
+          this.open = false;
+          event.preventDefault();
+        }
+
+        return false;
+      },
+    },
+  })(this);
 
   private ignoreOpenChange = false;
 
@@ -233,7 +237,7 @@ export class Modal
   /** Updates the element(s) that are used within the focus-trap of the component. */
   @method()
   async updateFocusTrapElements(): Promise<void> {
-    updateFocusTrapElements(this);
+    this.focusTrap.updateContainerElements();
   }
 
   // #endregion
@@ -265,20 +269,6 @@ export class Modal
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] });
     this.updateSizeCssVars();
-    connectFocusTrap(this, {
-      focusTrapOptions: {
-        // scrim closes on click, so we let it take over
-        clickOutsideDeactivates: false,
-        escapeDeactivates: (event) => {
-          if (!event.defaultPrevented && !this.escapeDisabled) {
-            this.open = false;
-            event.preventDefault();
-          }
-
-          return false;
-        },
-      },
-    });
   }
 
   async load(): Promise<void> {
@@ -299,10 +289,6 @@ export class Modal
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
     Please refactor your code to reduce the need for this check.
     Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
-    if (changes.has("focusTrapDisabled") && (this.hasUpdated || this.focusTrapDisabled !== false)) {
-      this.handleFocusTrapDisabled(this.focusTrapDisabled);
-    }
-
     if (
       (changes.has("hasBack") && (this.hasUpdated || this.hasBack !== false)) ||
       (changes.has("hasPrimary") && (this.hasUpdated || this.hasPrimary !== false)) ||
@@ -324,7 +310,6 @@ export class Modal
     this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
     this.cssVarObserver?.disconnect();
-    deactivateFocusTrap(this);
   }
 
   // #endregion
@@ -346,18 +331,6 @@ export class Modal
     }
   };
 
-  private handleFocusTrapDisabled(focusTrapDisabled: boolean): void {
-    if (!this.open) {
-      return;
-    }
-
-    if (focusTrapDisabled) {
-      deactivateFocusTrap(this);
-    } else {
-      activateFocusTrap(this);
-    }
-  }
-
   private handleHeaderSlotChange(event: Event): void {
     this.titleEl = slotChangeGetAssignedElements<HTMLElement>(event)[0];
   }
@@ -390,7 +363,7 @@ export class Modal
   onOpen(): void {
     this.transitionEl?.classList.remove(CSS.openingIdle, CSS.openingActive);
     this.calciteModalOpen.emit();
-    activateFocusTrap(this);
+    this.focusTrap.activate();
   }
 
   onBeforeClose(): void {
@@ -401,7 +374,7 @@ export class Modal
   onClose(): void {
     this.transitionEl?.classList.remove(CSS.closingIdle, CSS.closingActive);
     this.calciteModalClose.emit();
-    deactivateFocusTrap(this);
+    this.focusTrap.deactivate();
   }
 
   private toggleModal(value: boolean): void {