From 88daa47396fcdc3d785a83c219df3371000900d9 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Thu, 10 Jul 2025 15:34:50 -0400 Subject: [PATCH 1/4] HDS-5091 Fix: Add `HdsAnchoredPositionOptions` type --- .../src/components/hds/dropdown/index.ts | 16 +++++++-------- .../src/components/hds/dropdown/types.ts | 4 ++-- .../components/hds/popover-primitive/index.ts | 8 ++++---- .../src/components/hds/rich-tooltip/bubble.ts | 20 +++++++++---------- .../src/modifiers/hds-anchored-position.ts | 6 +++++- 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/packages/components/src/components/hds/dropdown/index.ts b/packages/components/src/components/hds/dropdown/index.ts index 68b030475c6..e13651a75f3 100644 --- a/packages/components/src/components/hds/dropdown/index.ts +++ b/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 { 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 diff --git a/packages/components/src/components/hds/dropdown/types.ts b/packages/components/src/components/hds/dropdown/types.ts index 8eed4d96356..f8c8f541764 100644 --- a/packages/components/src/components/hds/dropdown/types.ts +++ b/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', diff --git a/packages/components/src/components/hds/popover-primitive/index.ts b/packages/components/src/components/hds/popover-primitive/index.ts index 0c91476fcf7..d4b83294c69 100644 --- a/packages/components/src/components/hds/popover-primitive/index.ts +++ b/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 { this._popoverElement = element; @@ -167,7 +167,7 @@ export default class HdsPopoverPrimitive extends Component Date: Fri, 11 Jul 2025 10:22:47 -0400 Subject: [PATCH 2/4] Chore: add changeset --- .changeset/green-dragons-doubt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/green-dragons-doubt.md diff --git a/.changeset/green-dragons-doubt.md b/.changeset/green-dragons-doubt.md new file mode 100644 index 00000000000..738821e36a7 --- /dev/null +++ b/.changeset/green-dragons-doubt.md @@ -0,0 +1,5 @@ +--- +"@hashicorp/design-system-components": patch +--- + +`PopoverPrimitive` - Updated type of the `anchoredPositionOptions` object in the `setUpPrimitivePopover` modifier to include `arrowSelector` from the `hds-anchored-position` modifier. From 7956e1355928ad8022514779b1bb7c5adb7ac9bc Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Fri, 11 Jul 2025 10:39:42 -0400 Subject: [PATCH 3/4] Fix: `PoopoverPrimitive` component api docs `arrowSelector` name --- .../utilities/popover-primitive/partials/code/component-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/utilities/popover-primitive/partials/code/component-api.md b/website/docs/utilities/popover-primitive/partials/code/component-api.md index 5f859ae5038..d8b4b408c89 100644 --- a/website/docs/utilities/popover-primitive/partials/code/component-api.md +++ b/website/docs/utilities/popover-primitive/partials/code/component-api.md @@ -90,7 +90,7 @@
For details see: [Floating UI > Arrow](https://floating-ui.com/docs/arrow) - + 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). From 9f9adb5407e5058f3c451415b1f5e3ca2ab074e8 Mon Sep 17 00:00:00 2001 From: Dylan Hyun Date: Mon, 14 Jul 2025 10:37:52 -0400 Subject: [PATCH 4/4] Fix: Update changeset format --- .changeset/green-dragons-doubt.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/green-dragons-doubt.md b/.changeset/green-dragons-doubt.md index 738821e36a7..6fd209fd091 100644 --- a/.changeset/green-dragons-doubt.md +++ b/.changeset/green-dragons-doubt.md @@ -2,4 +2,6 @@ "@hashicorp/design-system-components": patch --- + `PopoverPrimitive` - Updated type of the `anchoredPositionOptions` object in the `setUpPrimitivePopover` modifier to include `arrowSelector` from the `hds-anchored-position` modifier. +