Add triggerHtmlTag to resolve glint issue, fix triggerElement type in calculate Position

Author: mkszepp

docs/app/components/snippets/custom-position-1.gts

@@ -7,7 +7,7 @@ import type {
 
 export default class extends Component {
   calculatePosition(
-    trigger: Element,
+    trigger: HTMLElement,
     content: HTMLElement,
     _destination: HTMLElement,
     { horizontalPosition, verticalPosition }: CalculatePositionOptions,

ember-basic-dropdown/src/components/basic-dropdown.gts

@@ -35,24 +35,37 @@ export type { Dropdown, DropdownActions, TRootEventType };
 const UNINITIALIZED = {};
 const IGNORED_STYLES = ['top', 'left', 'right', 'width', 'height'];
 
-export interface BasicDropdownDefaultBlock {
+export interface BasicDropdownDefaultBlock<
+  TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> {
   uniqueId: string;
   disabled: boolean;
   isOpen: boolean;
   actions: DropdownActions;
-  Trigger: ComponentLike<BasicDropdownTriggerSignature>;
+  Trigger: ComponentLike<
+    Omit<BasicDropdownTriggerSignature<TriggerHtmlTag>, 'Args'> & {
+      Args: Omit<
+        BasicDropdownTriggerSignature<TriggerHtmlTag>['Args'],
+        'htmlTag'
+      >;
+    }
+  >;
   Content: ComponentLike<BasicDropdownContentSignature>;
 }
 
-export interface BasicDropdownSignature {
+export interface BasicDropdownSignature<
+  TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> {
   Element: HTMLElement;
-  Args: BasicDropdownArgs;
+  Args: BasicDropdownArgs<TriggerHtmlTag>;
   Blocks: {
-    default: [BasicDropdownDefaultBlock];
+    default: [BasicDropdownDefaultBlock<TriggerHtmlTag>];
   };
 }
 
-export interface BasicDropdownArgs {
+export interface BasicDropdownArgs<
+  TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> {
   initiallyOpened?: boolean;
   renderInPlace?: boolean;
   verticalPosition?: VerticalPosition;
@@ -64,16 +77,21 @@ export interface BasicDropdownArgs {
   rootEventType?: TRootEventType;
   preventScroll?: boolean;
   matchTriggerWidth?: boolean;
+  triggerHtmlTag?: TriggerHtmlTag;
   onInit?: (dropdown: Dropdown) => void;
   registerAPI?: (dropdown: Dropdown | null) => void;
   onOpen?: (dropdown: Dropdown, e?: Event) => boolean | void;
   onClose?: (dropdown: Dropdown, e?: Event) => boolean | void;
-  triggerComponent?: ComponentLike<BasicDropdownTriggerSignature> | undefined;
+  triggerComponent?:
+    | ComponentLike<BasicDropdownTriggerSignature<TriggerHtmlTag>>
+    | undefined;
   contentComponent?: ComponentLike<BasicDropdownContentSignature> | undefined;
   calculatePosition?: CalculatePosition;
 }
 
-export default class BasicDropdown extends Component<BasicDropdownSignature> {
+export default class BasicDropdown<
+  TriggerHtmlTag extends keyof HTMLElementTagNameMap = 'div',
+> extends Component<BasicDropdownSignature<TriggerHtmlTag>> {
   @tracked hPosition: HorizontalPosition | null = null;
   @tracked vPosition: VerticalPosition | null = null;
   @tracked top: string | undefined;
@@ -171,7 +189,7 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
   }
 
   // Lifecycle hooks
-  constructor(owner: Owner, args: BasicDropdownArgs) {
+  constructor(owner: Owner, args: BasicDropdownArgs<TriggerHtmlTag>) {
     super(owner, args);
     if (this.args.onInit) {
       this.args.onInit(this.publicAPI);
@@ -306,7 +324,6 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
         previousVerticalPosition,
         renderInPlace,
         matchTriggerWidth,
-        dropdown: this,
       },
     );
     return this.applyReposition(triggerElement, dropdownElement, positionData);
@@ -491,10 +508,14 @@ export default class BasicDropdown extends Component<BasicDropdownSignature> {
     );
   }
 
-  get triggerComponent(): ComponentLike<BasicDropdownTriggerSignature> {
+  get triggerComponent(): ComponentLike<
+    BasicDropdownTriggerSignature<TriggerHtmlTag>
+  > {
     return (
       this.args.triggerComponent ||
-      (BasicDropdownTrigger as ComponentLike<BasicDropdownTriggerSignature>)
+      (BasicDropdownTrigger as ComponentLike<
+        BasicDropdownTriggerSignature<TriggerHtmlTag>
+      >)
     );
   }
 

ember-basic-dropdown/src/utils/calculate-position.ts

@@ -1,4 +1,3 @@
-import type BasicDropdown from '../components/basic-dropdown.gts';
 import type { VerticalPosition, HorizontalPosition } from '../types.ts';
 
 // To avoid breaking the current types export we need this
@@ -11,7 +10,6 @@ export interface CalculatePositionOptions {
   previousHorizontalPosition?: HorizontalPosition | undefined;
   previousVerticalPosition?: VerticalPosition | undefined;
   renderInPlace: boolean;
-  dropdown: BasicDropdown;
 }
 
 export type CalculatePositionResultStyle = {
@@ -30,24 +28,24 @@ export type CalculatePositionResult = {
 };
 
 export type CalculatePosition = (
-  trigger: Element,
+  trigger: HTMLElement,
   content: HTMLElement,
   destination: HTMLElement,
   options: CalculatePositionOptions,
 ) => CalculatePositionResult;
 
-export const calculateWormholedPosition: CalculatePosition = (
-  trigger,
-  content,
-  destination,
+export function calculateWormholedPosition(
+  trigger: HTMLElement,
+  content: HTMLElement,
+  destination: HTMLElement,
   {
     horizontalPosition,
     verticalPosition,
     matchTriggerWidth,
     previousHorizontalPosition,
     previousVerticalPosition,
-  },
-) => {
+  }: CalculatePositionOptions,
+): CalculatePositionResult {
   // Collect information about all the involved DOM elements
   const scroll = { left: window.pageXOffset, top: window.pageYOffset };
   let { left: triggerLeft, top: triggerTop } = trigger.getBoundingClientRect();
@@ -202,14 +200,14 @@ export const calculateWormholedPosition: CalculatePosition = (
   }
 
   return { horizontalPosition, verticalPosition, style };
-};
+}
 
-export const calculateInPlacePosition: CalculatePosition = (
-  trigger,
-  content,
-  _destination,
-  { horizontalPosition, verticalPosition },
-) => {
+export function calculateInPlacePosition(
+  trigger: HTMLElement,
+  content: HTMLElement,
+  _destination: HTMLElement,
+  { horizontalPosition, verticalPosition }: CalculatePositionOptions,
+): CalculatePositionResult {
   let dropdownRect;
   const positionData: CalculatePositionResult = {
     horizontalPosition: 'left',
@@ -243,7 +241,7 @@ export const calculateInPlacePosition: CalculatePosition = (
     positionData.verticalPosition = 'below';
   }
   return positionData;
-};
+}
 
 export function getScrollParent(element: Element) {
   let style = window.getComputedStyle(element);
@@ -268,17 +266,18 @@ export function getScrollParent(element: Element) {
 
   return document.body;
 }
-const calculatePosition: CalculatePosition = (
-  trigger,
-  content,
-  destination,
-  options,
-) => {
+
+function calculatePosition(
+  trigger: HTMLElement,
+  content: HTMLElement,
+  destination: HTMLElement,
+  options: CalculatePositionOptions,
+): CalculatePositionResult {
   if (options.renderInPlace) {
     return calculateInPlacePosition(trigger, content, destination, options);
   } else {
     return calculateWormholedPosition(trigger, content, destination, options);
   }
-};
+}
 
 export default calculatePosition;

test-app/tests/integration/components/basic-dropdown-test.gts

@@ -1057,13 +1057,8 @@ module('Integration | Component | basic-dropdown', function (hooks) {
     const self = this;
 
     assert.expect(4);
-    this.calculatePosition = function (
-      _triggerElement,
-      _dropdownElement,
-      _destinationElement,
-      { dropdown },
-    ) {
-      assert.ok(dropdown, 'dropdown should be passed to the component');
+    this.calculatePosition = function () {
+      assert.ok('dropdown should be passed to the component');
       return {
         horizontalPosition: 'right',
         verticalPosition: 'above',
@@ -1118,9 +1113,9 @@ module('Integration | Component | basic-dropdown', function (hooks) {
       _triggerElement,
       _dropdownElement,
       _destinationElement,
-      { dropdown, renderInPlace },
+      { renderInPlace },
     ) {
-      assert.ok(dropdown, 'dropdown should be passed to the component');
+      assert.ok(renderInPlace, 'dropdown should be passed to the component');
       if (renderInPlace) {
         return {
           horizontalPosition: 'right',
@@ -1327,27 +1322,25 @@ module('Integration | Component | basic-dropdown', function (hooks) {
 
     await render(
       <template>
-        <BasicDropdown as |parent|>
-          <parent.Trigger class="parent" @htmlTag="button">Trigger of the first
+        <BasicDropdown @triggerHtmlTag="button" as |parent|>
+          <parent.Trigger class="parent" type="button">Trigger of the first
             dropdown</parent.Trigger>
           <parent.Content @overlay={{true}}>
-            <BasicDropdown as |child|>
+            <BasicDropdown @triggerHtmlTag="button" as |child|>
               <p class="body-parent">
                 <br />First level of the dropdpwn<br />
               </p>
-              <child.Trigger class="child" @htmlTag="button">Trigger of the
-                second dropdown</child.Trigger>
+              <child.Trigger class="child" type="button">Trigger of the second
+                dropdown</child.Trigger>
               <child.Content @overlay={{true}}>
                 <p class="body-child">
                   <br />Second level of the second<br />
-                  <BasicDropdown as |grandchild|>
+                  <BasicDropdown @triggerHtmlTag="button" as |grandchild|>
                     <p>
                       <br />Second level of the dropdpwn<br />
                     </p>
-                    <grandchild.Trigger
-                      class="grandchild"
-                      @htmlTag="button"
-                    >Trigger of the Third dropdown</grandchild.Trigger>
+                    <grandchild.Trigger class="grandchild" type="button">Trigger
+                      of the Third dropdown</grandchild.Trigger>
                     <grandchild.Content @overlay={{true}}>
                       <p class="body-grandchild">
                         <br />Third level of the third<br />