fix: use custom modifiers instead of did-insert

shleewhite · shleewhite · commit 345c5509093e · 2025-05-14T17:32:43.000-07:00
diff --git a/packages/components/src/components/hds/app-side-nav/index.hbs b/packages/components/src/components/hds/app-side-nav/index.hbs
@@ -10,7 +10,7 @@
   {{on "transitionend" (fn this.setTransition "end")}}
   {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }}
   {{focus-trap isActive=this.shouldTrapFocus}}
-  {{did-insert this.didInsert}}
+  {{this._setUpBodyElement}}
 >
   <h2 class="sr-only" id="hds-app-side-nav-header">Application local navigation</h2>
 
@@ -27,7 +27,7 @@
       />
     {{/if}}
 
-    <div class="hds-app-side-nav__wrapper-body" {{did-insert this.didInsertNavWrapperBody}}>
+    <div class="hds-app-side-nav__wrapper-body" {{this._setUpNavWrapperBody}}>
       {{~yield~}}
     </div>
   </div>
diff --git a/packages/components/src/components/hds/app-side-nav/index.ts b/packages/components/src/components/hds/app-side-nav/index.ts
@@ -8,6 +8,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { registerDestructor } from '@ember/destroyable';
 import type Owner from '@ember/owner';
+import { modifier } from 'ember-modifier';
 
 import { hdsBreakpoints } from '@hashicorp/design-system-components/utils/hds-breakpoints';
 
@@ -49,6 +50,17 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
     });
   }
 
+  private _setUpBodyElement = modifier(() => {
+    this._body = document.body;
+    // Store the initial `overflow` value of `<body>` so we can reset to it
+    this._bodyInitialOverflowValue =
+      this._body.style.getPropertyValue('overflow');
+  });
+
+  private _setUpNavWrapperBody = modifier((element: HTMLElement) => {
+    this._navWrapperBody = element;
+  });
+
   addEventListeners(): void {
     // eslint-disable-next-line @typescript-eslint/unbound-method
     document.addEventListener('keydown', this.escapePress, true);
@@ -183,19 +195,6 @@ export default class HdsAppSideNav extends Component<HdsAppSideNavSignature> {
     }
   }
 
-  @action
-  didInsert(): void {
-    this._body = document.body;
-    // Store the initial `overflow` value of `<body>` so we can reset to it
-    this._bodyInitialOverflowValue =
-      this._body.style.getPropertyValue('overflow');
-  }
-
-  @action
-  didInsertNavWrapperBody(element: HTMLElement): void {
-    this._navWrapperBody = element;
-  }
-
   @action
   setTransition(phase: string, event: TransitionEvent): void {
     // we only want to respond to `width` animation/transitions
