Skip to content

Commit

Permalink
feat(core): add anchor slot to dropdown for cases when trigger and an…
Browse files Browse the repository at this point in the history
…chor are 2 different elements (#527)

Co-authored-by: anastasiia_glushkova <[email protected]>
  • Loading branch information
glushkova91 and anastasiia_glushkova authored Jul 16, 2024
1 parent 7faf108 commit 146cb42
Showing 1 changed file with 24 additions and 5 deletions.
29 changes: 24 additions & 5 deletions core/src/components/cat-dropdown/cat-dropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { autoUpdate, computePosition, flip, offset, Placement, size } from '@floating-ui/dom';
import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, size } from '@floating-ui/dom';
import { timeTransitionS } from '@haiilo/catalyst-tokens';
import { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';
import * as focusTrap from 'focus-trap';
Expand All @@ -21,6 +21,8 @@ export class CatDropdown {
private readonly id = nextUniqueId++;
private triggerSlot!: HTMLSlotElement;
private trigger?: FocusableElement;
private anchorSlot!: HTMLSlotElement;
private anchor?: Element;
private content!: HTMLElement;
private trap?: focusTrap.FocusTrap;
private isOpen: boolean | null = false;
Expand Down Expand Up @@ -110,6 +112,9 @@ export class CatDropdown {
*/
@Method()
async open(): Promise<void> {
// we need to delay the initialization of the trigger until first
// interaction because the element might still be hidden (and thus not
// tabbable) if contained in another Stencil web component
if (!this.trigger) {
this.initTrigger();
}
Expand Down Expand Up @@ -192,6 +197,7 @@ export class CatDropdown {
render() {
return (
<Host>
<slot name="anchor" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>
<slot name="trigger" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>
<div
id={this.contentId}
Expand All @@ -204,6 +210,10 @@ export class CatDropdown {
);
}

componentDidLoad() {
this.initAnchor();
}

private get contentId() {
return `cat-dropdown-${this.id}`;
}
Expand All @@ -214,7 +224,16 @@ export class CatDropdown {
this.trigger.setAttribute('aria-expanded', 'false');
this.trigger.setAttribute('aria-controls', this.contentId);
this.trigger.addEventListener('click', () => this.toggle());
autoUpdate(this.trigger, this.content, () => this.update());
if (!this.anchor) {
autoUpdate(this.trigger, this.content, () => this.update(this.trigger));
}
}

private initAnchor() {
this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];
if (this.anchor) {
autoUpdate(this.anchor, this.content, () => this.update(this.anchor));
}
}

private findTrigger() {
Expand All @@ -235,8 +254,8 @@ export class CatDropdown {
return trigger;
}

private update() {
if (this.trigger) {
private update(anchorElement: ReferenceElement | undefined) {
if (anchorElement) {
const resize = this.noResize
? []
: [
Expand All @@ -250,7 +269,7 @@ export class CatDropdown {
}
})
];
computePosition(this.trigger, this.content, {
computePosition(anchorElement, this.content, {
strategy: 'fixed',
placement: this.placement,
middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]
Expand Down

0 comments on commit 146cb42

Please sign in to comment.