hds-anchored-position - Fix type issues

.changeset/green-dragons-doubt.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START utilities/popover-primitive -->
+`PopoverPrimitive` - Updated type of the `anchoredPositionOptions` object in the `setUpPrimitivePopover` modifier to include `arrowSelector` from the `hds-anchored-position` modifier.
+<!-- END -->

packages/components/src/components/hds/dropdown/index.ts

@@ -31,7 +31,7 @@ import type { HdsDropdownToggleButtonSignature } from './toggle/button';
 import type { HdsDropdownToggleIconSignature } from './toggle/icon';
 import type { HdsDropdownPositions } from './types';
 
-import type { FloatingUIOptions } from '../../../modifiers/hds-anchored-position.ts';
+import type { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts';
 
 export const DEFAULT_POSITION = HdsDropdownPositionValues.BottomRight;
 export const POSITIONS: string[] = Object.values(HdsDropdownPositionValues);
@@ -43,7 +43,7 @@ export interface HdsDropdownSignature {
     isOpen?: boolean;
     listPosition?: HdsDropdownPositions;
     width?: string;
-    enableCollisionDetection?: FloatingUIOptions['enableCollisionDetection'];
+    enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection'];
     preserveContentInDom?: boolean;
     matchToggleWidth?: boolean;
   };
@@ -90,19 +90,19 @@ export default class HdsDropdown extends Component<HdsDropdownSignature> {
     return listPosition;
   }
 
-  get enableCollisionDetection(): FloatingUIOptions['enableCollisionDetection'] {
+  get enableCollisionDetection(): HdsAnchoredPositionOptions['enableCollisionDetection'] {
     return this.args.enableCollisionDetection ?? false;
   }
 
-  get matchToggleWidth(): FloatingUIOptions['matchToggleWidth'] {
+  get matchToggleWidth(): HdsAnchoredPositionOptions['matchToggleWidth'] {
     return this.args.matchToggleWidth ?? false;
   }
 
   get anchoredPositionOptions(): {
-    placement: FloatingUIOptions['placement'];
-    offsetOptions: FloatingUIOptions['offsetOptions'];
-    enableCollisionDetection: FloatingUIOptions['enableCollisionDetection'];
-    matchToggleWidth: FloatingUIOptions['matchToggleWidth'];
+    placement: HdsAnchoredPositionOptions['placement'];
+    offsetOptions: HdsAnchoredPositionOptions['offsetOptions'];
+    enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection'];
+    matchToggleWidth: HdsAnchoredPositionOptions['matchToggleWidth'];
   } {
     // custom options specific for the `RichTooltip` component
     // for details see the `hds-anchored-position` modifier

packages/components/src/components/hds/dropdown/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import type { FloatingUIOptions } from '../../../modifiers/hds-anchored-position.ts';
+import type { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts';
 
 export enum HdsDropdownPositionValues {
   BottomLeft = 'bottom-left',
@@ -17,7 +17,7 @@ export type HdsDropdownPositions = `${HdsDropdownPositionValues}`;
 export const HdsDropdownPositionToPlacementValues: Record<
   // Dropdown's `listPosition` values
   HdsDropdownPositionValues,
-  FloatingUIOptions['placement']
+  HdsAnchoredPositionOptions['placement']
 > = {
   [HdsDropdownPositionValues.BottomLeft]: 'bottom-start',
   [HdsDropdownPositionValues.BottomRight]: 'bottom-end',

packages/components/src/components/hds/popover-primitive/index.ts

@@ -14,7 +14,7 @@ import { modifier } from 'ember-modifier';
 import registerEvent from '../../../modifiers/hds-register-event.ts';
 import anchoredPositionModifier from '../../../modifiers/hds-anchored-position.ts';
 
-import type { FloatingUIOptions } from '../../../modifiers/hds-anchored-position.ts';
+import type { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts';
 import type { ModifierLike } from '@glint/template';
 import type Owner from '@ember/owner';
 
@@ -55,7 +55,7 @@ export interface SetupPrimitivePopoverModifier {
   Element: HTMLElement;
   Args: {
     Positional: [];
-    Named: { anchoredPositionOptions: FloatingUIOptions };
+    Named: { anchoredPositionOptions: HdsAnchoredPositionOptions };
   };
 }
 
@@ -120,7 +120,7 @@ export default class HdsPopoverPrimitive extends Component<HdsPopoverPrimitiveSi
     (
       element: HTMLElement,
       _positional,
-      named: { anchoredPositionOptions: FloatingUIOptions }
+      named: { anchoredPositionOptions: HdsAnchoredPositionOptions }
     ): void => {
       this._popoverElement = element;
 
@@ -167,7 +167,7 @@ export default class HdsPopoverPrimitive extends Component<HdsPopoverPrimitiveSi
       registerEvent(this._popoverElement, ['toggle', this.onTogglePopover]);
 
       // we need to spread the argument because if it's set via `{{ hash … }}` Ember complains when we overwrite one of its values
-      const anchoredPositionOptions: FloatingUIOptions = {
+      const anchoredPositionOptions: HdsAnchoredPositionOptions = {
         ...named.anchoredPositionOptions,
       };
 

packages/components/src/components/hds/rich-tooltip/bubble.ts

@@ -8,17 +8,17 @@ import { assert } from '@ember/debug';
 
 import type { ModifierLike } from '@glint/template';
 import type { SetupPrimitivePopoverModifier } from '../popover-primitive';
-import type { FloatingUIOptions } from '../../../modifiers/hds-anchored-position.ts';
+import type { HdsAnchoredPositionOptions } from '../../../modifiers/hds-anchored-position.ts';
 import {
   DEFAULT_PLACEMENT,
   PLACEMENTS,
 } from '../../../modifiers/hds-anchored-position.ts';
 
 export interface HdsRichTooltipBubbleSignature {
   Args: {
-    placement?: FloatingUIOptions['placement'];
-    offset?: FloatingUIOptions['offsetOptions'];
-    enableCollisionDetection?: FloatingUIOptions['enableCollisionDetection'];
+    placement?: HdsAnchoredPositionOptions['placement'];
+    offset?: HdsAnchoredPositionOptions['offsetOptions'];
+    enableCollisionDetection?: HdsAnchoredPositionOptions['enableCollisionDetection'];
     width?: string;
     height?: string;
     isOpen?: boolean;
@@ -38,7 +38,7 @@ export default class HdsRichTooltipBubble extends Component<HdsRichTooltipBubble
    * @type {string}
    * @description Determines the position of the "popover"
    */
-  get placement(): FloatingUIOptions['placement'] {
+  get placement(): HdsAnchoredPositionOptions['placement'] {
     const { placement = DEFAULT_PLACEMENT } = this.args;
 
     assert(
@@ -51,7 +51,7 @@ export default class HdsRichTooltipBubble extends Component<HdsRichTooltipBubble
     return placement;
   }
 
-  get enableCollisionDetection(): FloatingUIOptions['enableCollisionDetection'] {
+  get enableCollisionDetection(): HdsAnchoredPositionOptions['enableCollisionDetection'] {
     return this.args.enableCollisionDetection ?? true;
   }
 
@@ -77,11 +77,11 @@ export default class HdsRichTooltipBubble extends Component<HdsRichTooltipBubble
   }
 
   get anchoredPositionOptions(): {
-    placement: FloatingUIOptions['placement'];
-    offsetOptions: FloatingUIOptions['offsetOptions'];
-    enableCollisionDetection: FloatingUIOptions['enableCollisionDetection'];
+    placement: HdsAnchoredPositionOptions['placement'];
+    offsetOptions: HdsAnchoredPositionOptions['offsetOptions'];
+    enableCollisionDetection: HdsAnchoredPositionOptions['enableCollisionDetection'];
     arrowSelector: string;
-    arrowPadding: FloatingUIOptions['arrowPadding'];
+    arrowPadding: HdsAnchoredPositionOptions['arrowPadding'];
   } {
     // custom options specific for the `RichTooltip` component
     // for details see the `hds-anchored-position` modifier

packages/components/src/modifiers/hds-anchored-position.ts

@@ -69,6 +69,10 @@ export type FloatingUIOptions = {
   matchToggleWidth?: boolean;
 };
 
+export type HdsAnchoredPositionOptions = FloatingUIOptions & {
+  arrowSelector?: string;
+};
+
 // we use this function to process all the options provided to the modifier in a single place,
 // in relation to the Floating UI APIs, and keep the modifier code more clean/simple
 export const getFloatingUIOptions = (
@@ -158,7 +162,7 @@ export interface HdsAnchoredPositionSignature {
   Element: HTMLElement;
   Args: {
     Positional: [HTMLElement | SVGElement];
-    Named: FloatingUIOptions & { arrowSelector?: string };
+    Named: HdsAnchoredPositionOptions;
   };
 }
 

website/docs/utilities/popover-primitive/partials/code/component-api.md

@@ -90,7 +90,7 @@
         <br />
         For details see: [Floating UI > Arrow](https://floating-ui.com/docs/arrow)
       </C.Property>
-      <C.Property @name="anchoredPositionOptions.arrowElement" @type="string">
+      <C.Property @name="anchoredPositionOptions.arrowSelector" @type="string">
         A DOM selector for the "arrow", if it's not possible to provide a direct reference to the DOM element (internally it's then converted to the `arrowElement` option).
       </C.Property>
       <C.Property @name="anchoredPositionOptions.arrowPadding" @type="number">