@cahyo-dimas/freeday 1.7.0

package/adapters/vue/components/FdyDateRange.vue

@@ -0,0 +1,78 @@
+<script lang="ts">
+export interface DateRangeValue {
+  start: string | null;
+  end: string | null;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, type ComputedRef } from 'vue';
+import FdyDatepicker from './FdyDatepicker.vue';
+
+// A controlled date range over freeday's `.fdy-daterange` layout (src/components/datepicker.css):
+// two linked FdyDatepickers where the end can't precede the start (start.max = end, end.min =
+// start). A real `v-model:DateRangeValue` that composes the single-date picker rather than
+// re-implementing the calendar. The vanilla enhancer's cross-calendar `.in-range` day shading is
+// not reproduced (each picker is independent) — the min/max linkage is what keeps the range valid.
+
+const props = defineProps<{
+  modelValue: DateRangeValue;
+  min?: string;
+  max?: string;
+  locale?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+  startPlaceholder?: string;
+  endPlaceholder?: string;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DateRangeValue];
+  change: [value: DateRangeValue];
+}>();
+
+const startMax: ComputedRef<string | undefined> = computed((): string | undefined => props.modelValue.end ?? props.max);
+const endMin: ComputedRef<string | undefined> = computed((): string | undefined => props.modelValue.start ?? props.min);
+
+function setStart(start: string): void {
+  const next: DateRangeValue = { start, end: props.modelValue.end };
+  emit('update:modelValue', next);
+  emit('change', next);
+}
+function setEnd(end: string): void {
+  const next: DateRangeValue = { start: props.modelValue.start, end };
+  emit('update:modelValue', next);
+  emit('change', next);
+}
+</script>
+
+<template>
+  <div class="fdy-daterange" role="group" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby">
+    <FdyDatepicker
+      :model-value="modelValue.start"
+      :min="min"
+      :max="startMax"
+      :locale="locale"
+      :disabled="disabled"
+      :invalid="invalid"
+      :describedby="describedby"
+      :placeholder="startPlaceholder ?? 'Dari'"
+      @update:model-value="setStart"
+    />
+    <span class="fdy-daterange__sep" aria-hidden="true">–</span>
+    <FdyDatepicker
+      :model-value="modelValue.end"
+      :min="endMin"
+      :max="max"
+      :locale="locale"
+      :disabled="disabled"
+      :invalid="invalid"
+      :describedby="describedby"
+      :placeholder="endPlaceholder ?? 'Sampai'"
+      @update:model-value="setEnd"
+    />
+  </div>
+</template>

package/adapters/vue/components/FdyDatepicker.vue

@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, type ComputedRef, type Ref } from 'vue';
+import { usePopover } from '../usePopover';
+
+// A Vue-native binding over freeday's `.fdy-datepicker` / `.fdy-cal__*` classes
+// (see src/components/datepicker.css). freeday ships the styled trigger+popover
+// pair plus a framework-agnostic enhancer (freeday-datepicker.js) whose own
+// header says the DOM it builds is meant for markup it owns wholesale. Letting
+// that enhancer manage the DOM would fight Vue's rendering, so this component
+// re-implements its single-date calendar behavior (month grid, keyboard nav,
+// min/max clamping, Intl locale formatting) in Vue, giving a real `v-model`
+// over the same kit classes. Open/close (outside-click + focusout) mirrors the
+// already-approved FdyCombo.vue pattern. Range mode is out of scope (v1 = single date).
+
+interface DayCell {
+  date: Date;
+  iso: string;
+  label: number;
+  ariaLabel: string;
+  outside: boolean;
+  today: boolean;
+  selected: boolean;
+  disabled: boolean;
+  focusable: boolean;
+}
+
+const props = defineProps<{
+  modelValue: string | null;
+  min?: string;
+  max?: string;
+  locale?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+  id?: string;
+  ariaLabelledby?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  change: [value: string];
+}>();
+
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+function toISO(d: Date): string {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function parseISO(s: string | null | undefined): Date | null {
+  if (s === null || s === undefined || s === '') return null;
+  const parts: string[] = s.split('-');
+  if (parts.length !== 3) return null;
+  const y: number = Number(parts[0]);
+  const m: number = Number(parts[1]);
+  const day: number = Number(parts[2]);
+  const d: Date = new Date(y, m - 1, day);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function startOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function sameDay(a: Date | null, b: Date | null): boolean {
+  return a !== null && b !== null && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function addDays(d: Date, n: number): Date {
+  const x: Date = new Date(d);
+  x.setDate(x.getDate() + n);
+  return x;
+}
+function addMonths(d: Date, n: number): Date {
+  const x: Date = new Date(d);
+  x.setMonth(x.getMonth() + n);
+  return x;
+}
+
+const baseId: string = useId();
+const triggerId: ComputedRef<string> = computed((): string => props.id ?? `${baseId}-trigger`);
+const titleId: string = `${baseId}-title`;
+
+const rootEl: Ref<HTMLDivElement | null> = ref(null);
+const triggerEl: Ref<HTMLButtonElement | null> = ref(null);
+const panelEl: Ref<HTMLDivElement | null> = ref(null);
+const dayRefs: Record<string, HTMLButtonElement | null> = {};
+
+const open: Ref<boolean> = ref(false);
+
+// Render the calendar panel in the top layer (popover) so it never gets clipped by a card or
+// scroll container; positions against the trigger.
+usePopover(panelEl, triggerEl, open);
+
+const selectedDate: ComputedRef<Date | null> = computed((): Date | null => parseISO(props.modelValue));
+const minDate: ComputedRef<Date | null> = computed((): Date | null => parseISO(props.min));
+const maxDate: ComputedRef<Date | null> = computed((): Date | null => parseISO(props.max));
+const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
+const displayPlaceholder: ComputedRef<string> = computed((): string => props.placeholder ?? 'Pilih tanggal');
+
+const view: Ref<Date> = ref(startOfMonth(selectedDate.value ?? new Date()));
+const focusDate: Ref<Date> = ref(selectedDate.value ?? new Date());
+
+// Keep the roving-tabindex cell inside the visible month so the grid stays keyboard-reachable
+// after navigating with Home/End/PageUp/PageDown (mirrors freeday-datepicker.js's clamp).
+const effectiveFocusDate: ComputedRef<Date> = computed((): Date => {
+  const f: Date = focusDate.value;
+  if (f.getMonth() === view.value.getMonth() && f.getFullYear() === view.value.getFullYear()) return f;
+  const daysInMonth: number = new Date(view.value.getFullYear(), view.value.getMonth() + 1, 0).getDate();
+  return new Date(view.value.getFullYear(), view.value.getMonth(), Math.min(f.getDate(), daysInMonth));
+});
+
+const monthFmt: ComputedRef<Intl.DateTimeFormat> = computed(
+  (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' }),
+);
+const valueFmt: ComputedRef<Intl.DateTimeFormat> = computed(
+  (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { day: '2-digit', month: 'short', year: 'numeric' }),
+);
+const dayLabelFmt: ComputedRef<Intl.DateTimeFormat> = computed(
+  (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }),
+);
+const dowFmt: ComputedRef<Intl.DateTimeFormat> = computed(
+  (): Intl.DateTimeFormat => new Intl.DateTimeFormat(props.locale, { weekday: 'short' }),
+);
+
+const displayValue: ComputedRef<string> = computed((): string =>
+  selectedDate.value !== null ? valueFmt.value.format(selectedDate.value) : displayPlaceholder.value,
+);
+
+const weekdayHeaders: ComputedRef<string[]> = computed((): string[] => {
+  const monday: Date = new Date(2024, 0, 1); // a known Monday
+  return Array.from({ length: 7 }, (_unused: unknown, i: number): string => dowFmt.value.format(addDays(monday, i)));
+});
+
+function isDayDisabled(d: Date): boolean {
+  if (minDate.value !== null && startOfDay(d).getTime() < startOfDay(minDate.value).getTime()) return true;
+  if (maxDate.value !== null && startOfDay(d).getTime() > startOfDay(maxDate.value).getTime()) return true;
+  return false;
+}
+
+const gridCells: ComputedRef<DayCell[]> = computed((): DayCell[] => {
+  const first: Date = new Date(view.value.getFullYear(), view.value.getMonth(), 1);
+  const offset: number = (first.getDay() + 6) % 7; // Monday-first
+  const startCell: Date = addDays(first, -offset);
+  const today: Date = new Date();
+  const focus: Date = effectiveFocusDate.value;
+  const cells: DayCell[] = [];
+  for (let i = 0; i < 42; i++) {
+    const d: Date = addDays(startCell, i);
+    cells.push({
+      date: d,
+      iso: toISO(d),
+      label: d.getDate(),
+      ariaLabel: dayLabelFmt.value.format(d),
+      outside: d.getMonth() !== view.value.getMonth(),
+      today: sameDay(d, today),
+      selected: sameDay(d, selectedDate.value),
+      disabled: isDayDisabled(d),
+      focusable: sameDay(d, focus),
+    });
+  }
+  return cells;
+});
+
+function setDayRef(iso: string, el: Element | null): void {
+  dayRefs[iso] = el as HTMLButtonElement | null;
+}
+
+function focusCell(): void {
+  dayRefs[toISO(effectiveFocusDate.value)]?.focus();
+}
+
+function moveFocus(next: Date): void {
+  focusDate.value = next;
+  view.value = new Date(next.getFullYear(), next.getMonth(), 1);
+  void nextTick((): void => focusCell());
+}
+
+function pick(d: Date): void {
+  if (isDayDisabled(d)) return;
+  const day: Date = startOfDay(d);
+  focusDate.value = day;
+  const iso: string = toISO(day);
+  emit('update:modelValue', iso);
+  emit('change', iso);
+  closePanel(true);
+}
+
+function openPanel(): void {
+  if (isDisabled.value || open.value) return;
+  focusDate.value = selectedDate.value ?? focusDate.value ?? new Date();
+  view.value = new Date(focusDate.value.getFullYear(), focusDate.value.getMonth(), 1);
+  open.value = true;
+  void nextTick((): void => focusCell());
+}
+
+function closePanel(returnFocus: boolean): void {
+  if (!open.value) return;
+  open.value = false;
+  if (returnFocus) triggerEl.value?.focus();
+}
+
+function toggle(): void {
+  if (open.value) closePanel(false);
+  else openPanel();
+}
+
+function onGridKeydown(e: KeyboardEvent): void {
+  const f: Date = effectiveFocusDate.value;
+  switch (e.key) {
+    case 'ArrowLeft':
+      e.preventDefault();
+      moveFocus(addDays(f, -1));
+      break;
+    case 'ArrowRight':
+      e.preventDefault();
+      moveFocus(addDays(f, 1));
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      moveFocus(addDays(f, -7));
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+      moveFocus(addDays(f, 7));
+      break;
+    case 'Home':
+      e.preventDefault();
+      moveFocus(addDays(f, -((f.getDay() + 6) % 7)));
+      break;
+    case 'End':
+      e.preventDefault();
+      moveFocus(addDays(f, 6 - ((f.getDay() + 6) % 7)));
+      break;
+    case 'PageUp':
+      e.preventDefault();
+      moveFocus(addMonths(f, e.shiftKey ? -12 : -1));
+      break;
+    case 'PageDown':
+      e.preventDefault();
+      moveFocus(addMonths(f, e.shiftKey ? 12 : 1));
+      break;
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      pick(f);
+      break;
+    case 'Escape':
+      e.preventDefault();
+      closePanel(true);
+      break;
+    default:
+      break;
+  }
+}
+
+// Close when a pointer lands outside the whole control.
+function onDocPointerDown(e: MouseEvent): void {
+  const target: EventTarget | null = e.target;
+  if (rootEl.value !== null && target instanceof Node && !rootEl.value.contains(target)) {
+    closePanel(false);
+  }
+}
+
+// Close when focus leaves the control entirely (e.g. Shift+Tab off the trigger).
+function onFocusout(e: FocusEvent): void {
+  const next: EventTarget | null = e.relatedTarget;
+  if (rootEl.value !== null && !(next instanceof Node && rootEl.value.contains(next))) {
+    closePanel(false);
+  }
+}
+
+onMounted((): void => {
+  document.addEventListener('mousedown', onDocPointerDown);
+});
+onBeforeUnmount((): void => {
+  document.removeEventListener('mousedown', onDocPointerDown);
+});
+</script>
+
+<template>
+  <div ref="rootEl" class="fdy-datepicker" :class="{ 'fdy-datepicker--error': isInvalid }" @focusout="onFocusout">
+    <button
+      :id="triggerId"
+      ref="triggerEl"
+      type="button"
+      class="fdy-datepicker__trigger"
+      :class="{ 'is-open': open }"
+      aria-haspopup="dialog"
+      :aria-expanded="open"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-describedby="describedby"
+      :disabled="isDisabled"
+      @click="toggle"
+    >
+      <span class="fdy-datepicker__value" :class="{ 'fdy-datepicker__value--placeholder': selectedDate === null }">{{ displayValue }}</span>
+      <span class="fdy-datepicker__icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="4" width="18" height="18" rx="2"></rect>
+          <path d="M16 2v4M8 2v4M3 10h18"></path>
+        </svg>
+      </span>
+    </button>
+
+    <div ref="panelEl" class="fdy-datepicker__panel" role="dialog" aria-modal="false" popover="manual" :aria-labelledby="titleId" :hidden="!open">
+      <div class="fdy-cal__head">
+        <button type="button" class="fdy-cal__nav" aria-label="Bulan sebelumnya" @click="view = addMonths(view, -1)">‹</button>
+        <div :id="titleId" class="fdy-cal__title">{{ monthFmt.format(view) }}</div>
+        <button type="button" class="fdy-cal__nav" aria-label="Bulan berikutnya" @click="view = addMonths(view, 1)">›</button>
+      </div>
+      <div class="fdy-cal__grid" role="grid" :aria-labelledby="titleId" @keydown="onGridKeydown">
+        <div v-for="w in weekdayHeaders" :key="w" class="fdy-cal__dow" role="columnheader" :aria-label="w">{{ w }}</div>
+        <button
+          v-for="cell in gridCells"
+          :key="cell.iso"
+          :ref="(el) => setDayRef(cell.iso, el as Element | null)"
+          type="button"
+          class="fdy-cal__day"
+          :class="{ 'is-outside': cell.outside, 'is-today': cell.today, 'is-selected': cell.selected }"
+          role="gridcell"
+          :aria-label="cell.ariaLabel"
+          :aria-selected="cell.selected ? 'true' : undefined"
+          :disabled="cell.disabled"
+          :tabindex="cell.focusable ? 0 : -1"
+          @click="pick(cell.date)"
+        >{{ cell.label }}</button>
+      </div>
+    </div>
+  </div>
+</template>

package/adapters/vue/index.d.ts

@@ -0,0 +1,44 @@
+import type { Ref } from 'vue';
+
+export interface UseFreedayReturn {
+  /** Manually re-run all Freeday enhancers over the scoped subtree. */
+  rehydrate: () => void;
+}
+
+/**
+ * Auto-initialise Freeday enhancers over a component's subtree on mount and
+ * after every update. Pass a template ref to scope the work; omit it to scan
+ * the whole document.
+ */
+export declare function useFreeday(rootRef?: Ref<HTMLElement | null>): UseFreedayReturn;
+
+export { default as FdyCombo } from './components/FdyCombo.vue';
+export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
+export { default as FdyDateRange } from './components/FdyDateRange.vue';
+export type { DateRangeValue } from './components/FdyDateRange.vue';
+export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
+export { default as FdyCascade } from './components/FdyCascade.vue';
+export type { CascadeNode } from './components/FdyCascade.vue';
+export { default as FdyCfl } from './components/FdyCfl.vue';
+export { default as FdyChart } from './components/FdyChart.vue';
+
+/** One data series for the cartesian chart types (line / area / multi-series & stacked bar). */
+export interface FdyChartSeries {
+  label: string;
+  values: number[];
+  role?: string;
+}
+
+/** `event.detail` shapes for the bubbling `fdy-*` CustomEvents. */
+export interface FdyChangeDetail { value: string }
+export interface FdyAutocompleteSelectDetail { value: string }
+export interface FdyCascadeChangeDetail { value: string; path: string; labels: string[] }
+export interface FdyDatepickerChangeDetail { value: string; date: Date | null }
+export interface FdyTimeSelectDetail { value: string }
+export interface FdyDatetimeChangeDetail { date: string; time: string; value: string }
+export interface FdyMaskDetail { value: string; raw: string }
+export interface FdyFormInvalidDetail { invalid: HTMLElement[] }
+export interface FdyChipChangeDetail { value: string; pressed: boolean; selected: string[] }
+export interface FdyChipRemoveDetail { value: string }
+export interface FdyCflSelectDetail { row?: unknown; rows?: unknown[] }
+export interface FdyTableChangeDetail { page: number; sort: string | null; query: string }

package/adapters/vue/index.js

@@ -0,0 +1,8 @@
+export { useFreeday } from './useFreeday.js';
+export { default as FdyCombo } from './components/FdyCombo.vue';
+export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
+export { default as FdyDateRange } from './components/FdyDateRange.vue';
+export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
+export { default as FdyCascade } from './components/FdyCascade.vue';
+export { default as FdyCfl } from './components/FdyCfl.vue';
+export { default as FdyChart } from './components/FdyChart.vue';

package/adapters/vue/useFreeday.js

@@ -0,0 +1,44 @@
+/* Freeday — Vue 3 adapter (thin). The enhancers stay the source of truth; this
+ * composable just re-runs every registered window.Freeday*.initAll() over a
+ * subtree after Vue renders it, so [data-fdy-*] markup rendered by Vue gets
+ * enhanced (and re-enhanced after updates). Enhancers are idempotent, so the
+ * repeated calls are safe. Requires `import 'freeday'` once at app entry to
+ * register the enhancers.
+ *
+ * Usage:
+ *   const root = ref(null);
+ *   useFreeday(root);            // scopes init to this component's subtree
+ *   // <div ref="root"> ...[data-fdy-*] markup... </div>
+ *
+ * Events come straight through as native bubbling CustomEvents — bind them with
+ * plain v-on (e.g. @fdy-cascade-change) and read event.detail. See index.d.ts
+ * for the detail types.
+ */
+import { onMounted, onUpdated, nextTick } from 'vue';
+
+// Discover Freeday enhancer namespaces once (all registered by the time an app
+// mounts, since `import 'freeday'` runs first). Each exposes initAll(el?).
+function freedayApis() {
+  var apis = [];
+  var names = Object.getOwnPropertyNames(window);
+  for (var i = 0; i < names.length; i++) {
+    var key = names[i];
+    if (key.slice(0, 7) === 'Freeday') {
+      var api = window[key];
+      if (api && typeof api.initAll === 'function') apis.push(api);
+    }
+  }
+  return apis;
+}
+
+export function useFreeday(rootRef) {
+  var apis = null;
+  function rehydrate() {
+    if (!apis) apis = freedayApis();
+    var el = rootRef && 'value' in rootRef ? (rootRef.value || undefined) : undefined;
+    for (var i = 0; i < apis.length; i++) apis[i].initAll(el);
+  }
+  onMounted(rehydrate);
+  onUpdated(function () { nextTick(rehydrate); });
+  return { rehydrate: rehydrate };
+}

package/adapters/vue/usePopover.ts

@@ -0,0 +1,78 @@
+import { watch, onBeforeUnmount, type Ref } from 'vue';
+
+// Vue equivalent of the vanilla freeday-popover.js helper. Lifts a dropdown panel into the top
+// layer via the native Popover API so it escapes any ancestor overflow clip (a card, a scroll
+// container), then positions it `fixed` against its trigger (flip above when there's no room
+// below; match the trigger width). The panel stays in the component's DOM, so focus / outside-
+// click / ARIA are untouched. Degrades to the panel's own [hidden]/absolute CSS where the
+// Popover API is unavailable. Drive it with the component's existing `open` ref.
+
+interface PopoverElement extends HTMLElement {
+  showPopover(): void;
+  hidePopover(): void;
+}
+
+const GAP = 4; // ~ --space-1
+const supported: boolean =
+  typeof HTMLElement !== 'undefined'
+  && typeof (HTMLElement.prototype as Partial<PopoverElement>).showPopover === 'function';
+
+function place(panel: HTMLElement, trigger: HTMLElement): void {
+  const r: DOMRect = trigger.getBoundingClientRect();
+  panel.style.position = 'fixed';
+  panel.style.margin = '0';
+  panel.style.inset = 'auto';
+  panel.style.minWidth = `${r.width}px`;
+  const ph: number = panel.offsetHeight;
+  const pw: number = panel.offsetWidth;
+  const vw: number = document.documentElement.clientWidth;
+  const vh: number = document.documentElement.clientHeight;
+  const below: number = vh - r.bottom - GAP;
+  const above: number = r.top - GAP;
+  const top: number = ph <= below || below >= above ? r.bottom + GAP : Math.max(GAP, r.top - GAP - ph);
+  let left: number = r.left;
+  if (left + pw > vw - GAP) left = Math.max(GAP, vw - GAP - pw);
+  panel.style.top = `${Math.round(top)}px`;
+  panel.style.left = `${Math.round(left)}px`;
+}
+
+/**
+ * Anchor a dropdown `panelRef` to `triggerRef` in the top layer while `open` is true.
+ * The panel element must carry `popover="manual"` in the template (ignored where unsupported).
+ */
+export function usePopover(
+  panelRef: Ref<HTMLElement | null>,
+  triggerRef: Ref<HTMLElement | null>,
+  open: Ref<boolean>,
+): void {
+  function reposition(): void {
+    const panel: PopoverElement | null = panelRef.value as PopoverElement | null;
+    const trigger: HTMLElement | null = triggerRef.value;
+    if (supported && panel !== null && trigger !== null && panel.matches(':popover-open')) place(panel, trigger);
+  }
+
+  watch(
+    open,
+    (isOpen: boolean): void => {
+      const panel: PopoverElement | null = panelRef.value as PopoverElement | null;
+      const trigger: HTMLElement | null = triggerRef.value;
+      if (!supported || panel === null || trigger === null) return;
+      if (isOpen) {
+        if (!panel.matches(':popover-open')) panel.showPopover();
+        place(panel, trigger);
+        window.addEventListener('scroll', reposition, true);
+        window.addEventListener('resize', reposition);
+      } else {
+        window.removeEventListener('scroll', reposition, true);
+        window.removeEventListener('resize', reposition);
+        if (panel.matches(':popover-open')) panel.hidePopover();
+      }
+    },
+    { flush: 'post' },
+  );
+
+  onBeforeUnmount((): void => {
+    window.removeEventListener('scroll', reposition, true);
+    window.removeEventListener('resize', reposition);
+  });
+}