@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/hooks/useTableSelection.js

@@ -0,0 +1,170 @@
+'use client';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+
+const EMPTY_IDS = /* @__PURE__ */ new Set();
+function safeParseIds(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return null;
+    return parsed.filter((v) => typeof v === "string" || typeof v === "number");
+  } catch {
+    return null;
+  }
+}
+function serializeIds(ids) {
+  return JSON.stringify(Array.from(ids));
+}
+function areSetsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  for (const value of a) {
+    if (!b.has(value)) return false;
+  }
+  return true;
+}
+function useTableSelection({
+  storageKey,
+  items,
+  getId,
+  initialSelectedIds,
+  onSelectionChange,
+  selectionMode = "single",
+  pruneToItems = false,
+  storage = "session"
+}) {
+  const resolvedInitialSelectedIds = initialSelectedIds != null ? initialSelectedIds : EMPTY_IDS;
+  const [selectedIds, setSelectedIds] = useState(resolvedInitialSelectedIds);
+  const [hydrated, setHydrated] = useState(false);
+  const lastWrittenRef = useRef(null);
+  const itemsById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      map.set(getId(item), item);
+    }
+    return map;
+  }, [items, getId]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const storageApi = storage === "local" ? window.localStorage : window.sessionStorage;
+    if (!storageKey) {
+      setSelectedIds(
+        (prev) => areSetsEqual(prev, resolvedInitialSelectedIds) ? prev : new Set(resolvedInitialSelectedIds)
+      );
+      setHydrated(true);
+      lastWrittenRef.current = null;
+      return;
+    }
+    const parsed = safeParseIds(storageApi.getItem(storageKey));
+    const next = new Set(parsed != null ? parsed : Array.from(resolvedInitialSelectedIds));
+    setSelectedIds((prev) => areSetsEqual(prev, next) ? prev : next);
+    lastWrittenRef.current = serializeIds(next);
+    setHydrated(true);
+  }, [storage, storageKey, resolvedInitialSelectedIds]);
+  useEffect(() => {
+    if (!pruneToItems) return;
+    const visibleIds = new Set(Array.from(itemsById.keys()));
+    setSelectedIds((prev) => {
+      if (prev.size === 0) return prev;
+      if (visibleIds.size === 0) return prev;
+      const next = /* @__PURE__ */ new Set();
+      for (const id of prev) {
+        if (visibleIds.has(id)) next.add(id);
+      }
+      return areSetsEqual(prev, next) ? prev : next;
+    });
+  }, [pruneToItems, itemsById]);
+  const selectedItemMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const id of selectedIds) {
+      const item = itemsById.get(id);
+      if (item !== void 0) map.set(id, item);
+    }
+    return map;
+  }, [selectedIds, itemsById]);
+  const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
+  const allSelected = useMemo(() => {
+    if (items.length === 0) return false;
+    return items.every((item) => selectedIds.has(getId(item)));
+  }, [items, selectedIds, getId]);
+  const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
+  useEffect(() => {
+    if (!hydrated) return;
+    if (typeof window === "undefined") return;
+    if (storageKey) {
+      const storageApi = storage === "local" ? window.localStorage : window.sessionStorage;
+      const nextStr = serializeIds(selectedIds);
+      if (lastWrittenRef.current !== nextStr) {
+        storageApi.setItem(storageKey, nextStr);
+        lastWrittenRef.current = nextStr;
+      }
+    }
+    onSelectionChange == null ? void 0 : onSelectionChange({ selectedIds, selectedItems });
+  }, [hydrated, onSelectionChange, selectedIds, selectedItems, storage, storageKey]);
+  const toggleId = useCallback(
+    (id, selected) => {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        const isSelected = next.has(id);
+        const shouldSelect = selected === void 0 ? !isSelected : selected;
+        if (selectionMode === "single") {
+          next.clear();
+          if (shouldSelect) next.add(id);
+          return areSetsEqual(prev, next) ? prev : next;
+        }
+        if (shouldSelect) next.add(id);
+        else next.delete(id);
+        return areSetsEqual(prev, next) ? prev : next;
+      });
+    },
+    [selectionMode]
+  );
+  const toggleItem = useCallback(
+    (item) => {
+      toggleId(getId(item));
+    },
+    [toggleId, getId]
+  );
+  const selectOnly = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = /* @__PURE__ */ new Set([id]);
+      return areSetsEqual(prev, next) ? prev : next;
+    });
+  }, []);
+  const clearSelection = useCallback(() => {
+    setSelectedIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+  }, []);
+  const toggleAll = useCallback(
+    (selected) => {
+      if (!selected) {
+        clearSelection();
+        return;
+      }
+      if (selectionMode === "single") {
+        const first = items[0];
+        const next2 = first ? /* @__PURE__ */ new Set([getId(first)]) : /* @__PURE__ */ new Set();
+        setSelectedIds((prev) => areSetsEqual(prev, next2) ? prev : next2);
+        return;
+      }
+      const next = /* @__PURE__ */ new Set();
+      for (const item of items) {
+        next.add(getId(item));
+      }
+      setSelectedIds((prev) => areSetsEqual(prev, next) ? prev : next);
+    },
+    [clearSelection, getId, items, selectionMode]
+  );
+  return {
+    selectedIds,
+    selectedItems,
+    selectedItemMap,
+    toggleItem,
+    toggleId,
+    selectOnly,
+    clearSelection,
+    allSelected,
+    anySelected,
+    toggleAll
+  };
+}
+
+export { useTableSelection };

package/dist/hooks/useTableSettings.cjs

@@ -0,0 +1,90 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var localStorage_utils = require('../utils/localStorage.utils');
+
+function getDefaultVisibleIds(tableColumns) {
+  var _a;
+  return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => {
+    var _a2;
+    return !((_a2 = c.meta) == null ? void 0 : _a2.hidden);
+  }).map((c) => c.id).filter(Boolean)) != null ? _a : [];
+}
+function mergeDefaults(stored, defaults) {
+  const viewMode = (stored == null ? void 0 : stored.viewMode) === "compact" || (stored == null ? void 0 : stored.viewMode) === "wrapped" ? stored.viewMode : defaults.viewMode;
+  const visibleColumnIds = Array.isArray(stored == null ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0 ? stored.visibleColumnIds : defaults.visibleColumnIds;
+  return { viewMode, visibleColumnIds };
+}
+const localStorageTableSettingsStorage = {
+  get: (key) => {
+    const v = localStorage_utils.readLocalStorage(key);
+    return v && typeof v === "object" ? v : void 0;
+  },
+  set: (key, next) => {
+    localStorage_utils.writeLocalStorage(key, next);
+  }
+};
+function useTableSettings({
+  storageKey,
+  tableColumns,
+  defaultViewMode = "compact",
+  defaultVisibleColumnIds,
+  storage = localStorageTableSettingsStorage
+}) {
+  const defaults = react.useMemo(() => {
+    return {
+      viewMode: defaultViewMode,
+      visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns)
+    };
+  }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
+  const [state, setState] = react.useState(defaults);
+  react.useEffect(() => {
+    const stored = storage.get(storageKey);
+    const next = mergeDefaults(stored, defaults);
+    setState(next);
+  }, [storageKey, storage, defaults]);
+  const persist = react.useCallback(
+    (next) => storage.set(storageKey, next),
+    [storage, storageKey]
+  );
+  const setViewMode = react.useCallback(
+    (mode) => {
+      setState((prev) => {
+        if (prev.viewMode === mode) return prev;
+        const next = { ...prev, viewMode: mode };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const toggleViewMode = react.useCallback(() => {
+    setState((prev) => {
+      const nextMode = prev.viewMode === "wrapped" ? "compact" : "wrapped";
+      const next = { ...prev, viewMode: nextMode };
+      persist(next);
+      return next;
+    });
+  }, [persist]);
+  const setVisibleColumnIds = react.useCallback(
+    (ids) => {
+      setState((prev) => {
+        const next = { ...prev, visibleColumnIds: ids };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  return {
+    viewMode: state.viewMode,
+    toggleViewMode,
+    setViewMode,
+    visibleColumnIds: state.visibleColumnIds,
+    setVisibleColumnIds
+  };
+}
+
+exports.localStorageTableSettingsStorage = localStorageTableSettingsStorage;
+exports.useTableSettings = useTableSettings;

package/dist/hooks/useTableSettings.js

@@ -0,0 +1,87 @@
+'use client';
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { writeLocalStorage, readLocalStorage } from '../utils/localStorage.utils';
+
+function getDefaultVisibleIds(tableColumns) {
+  var _a;
+  return (_a = tableColumns == null ? void 0 : tableColumns.filter((c) => {
+    var _a2;
+    return !((_a2 = c.meta) == null ? void 0 : _a2.hidden);
+  }).map((c) => c.id).filter(Boolean)) != null ? _a : [];
+}
+function mergeDefaults(stored, defaults) {
+  const viewMode = (stored == null ? void 0 : stored.viewMode) === "compact" || (stored == null ? void 0 : stored.viewMode) === "wrapped" ? stored.viewMode : defaults.viewMode;
+  const visibleColumnIds = Array.isArray(stored == null ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0 ? stored.visibleColumnIds : defaults.visibleColumnIds;
+  return { viewMode, visibleColumnIds };
+}
+const localStorageTableSettingsStorage = {
+  get: (key) => {
+    const v = readLocalStorage(key);
+    return v && typeof v === "object" ? v : void 0;
+  },
+  set: (key, next) => {
+    writeLocalStorage(key, next);
+  }
+};
+function useTableSettings({
+  storageKey,
+  tableColumns,
+  defaultViewMode = "compact",
+  defaultVisibleColumnIds,
+  storage = localStorageTableSettingsStorage
+}) {
+  const defaults = useMemo(() => {
+    return {
+      viewMode: defaultViewMode,
+      visibleColumnIds: defaultVisibleColumnIds != null ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns)
+    };
+  }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
+  const [state, setState] = useState(defaults);
+  useEffect(() => {
+    const stored = storage.get(storageKey);
+    const next = mergeDefaults(stored, defaults);
+    setState(next);
+  }, [storageKey, storage, defaults]);
+  const persist = useCallback(
+    (next) => storage.set(storageKey, next),
+    [storage, storageKey]
+  );
+  const setViewMode = useCallback(
+    (mode) => {
+      setState((prev) => {
+        if (prev.viewMode === mode) return prev;
+        const next = { ...prev, viewMode: mode };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  const toggleViewMode = useCallback(() => {
+    setState((prev) => {
+      const nextMode = prev.viewMode === "wrapped" ? "compact" : "wrapped";
+      const next = { ...prev, viewMode: nextMode };
+      persist(next);
+      return next;
+    });
+  }, [persist]);
+  const setVisibleColumnIds = useCallback(
+    (ids) => {
+      setState((prev) => {
+        const next = { ...prev, visibleColumnIds: ids };
+        persist(next);
+        return next;
+      });
+    },
+    [persist]
+  );
+  return {
+    viewMode: state.viewMode,
+    toggleViewMode,
+    setViewMode,
+    visibleColumnIds: state.visibleColumnIds,
+    setVisibleColumnIds
+  };
+}
+
+export { localStorageTableSettingsStorage, useTableSettings };

package/dist/hooks/useTheme.cjs

@@ -0,0 +1,64 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const THEME_VARIANTS = ["light", "dark", "system"];
+const STORAGE_KEY = "dbc_theme";
+function isThemeVariant(x) {
+  return !!x && THEME_VARIANTS.includes(x);
+}
+function getCookie(name) {
+  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]) : null;
+}
+function persistTheme(id) {
+  try {
+    localStorage.setItem(STORAGE_KEY, id);
+  } catch {
+    console.error("Failed to access localStorage");
+  }
+  try {
+    document.cookie = `${STORAGE_KEY}=${encodeURIComponent(
+      id
+    )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
+  } catch {
+    console.error("Failed to set theme cookie");
+  }
+}
+function getTheme() {
+  return document.documentElement.dataset.theme;
+}
+function applyTheme(id) {
+  document.documentElement.dataset.theme = id;
+}
+function useTheme(initialTheme = "system") {
+  const [theme, setTheme] = react.useState(null);
+  react.useEffect(() => {
+    const themeFromDataAttributes = getTheme();
+    let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
+    const fromCookie = getCookie(STORAGE_KEY);
+    if (isThemeVariant(fromCookie)) {
+      resolved = fromCookie;
+    } else {
+      try {
+        const fromStorage = localStorage.getItem(STORAGE_KEY);
+        if (isThemeVariant(fromStorage)) resolved = fromStorage;
+      } catch {
+        console.error("Failed to access localStorage");
+      }
+    }
+    applyTheme(resolved);
+    setTheme(resolved);
+    persistTheme(resolved);
+  }, [initialTheme]);
+  const switchTheme = react.useCallback((id) => {
+    applyTheme(id);
+    setTheme(id);
+    persistTheme(id);
+    return id;
+  }, []);
+  return { theme, switchTheme };
+}
+
+exports.useTheme = useTheme;

package/dist/hooks/useTheme.js

@@ -0,0 +1,62 @@
+'use client';
+import { useState, useEffect, useCallback } from 'react';
+
+const THEME_VARIANTS = ["light", "dark", "system"];
+const STORAGE_KEY = "dbc_theme";
+function isThemeVariant(x) {
+  return !!x && THEME_VARIANTS.includes(x);
+}
+function getCookie(name) {
+  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]) : null;
+}
+function persistTheme(id) {
+  try {
+    localStorage.setItem(STORAGE_KEY, id);
+  } catch {
+    console.error("Failed to access localStorage");
+  }
+  try {
+    document.cookie = `${STORAGE_KEY}=${encodeURIComponent(
+      id
+    )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
+  } catch {
+    console.error("Failed to set theme cookie");
+  }
+}
+function getTheme() {
+  return document.documentElement.dataset.theme;
+}
+function applyTheme(id) {
+  document.documentElement.dataset.theme = id;
+}
+function useTheme(initialTheme = "system") {
+  const [theme, setTheme] = useState(null);
+  useEffect(() => {
+    const themeFromDataAttributes = getTheme();
+    let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
+    const fromCookie = getCookie(STORAGE_KEY);
+    if (isThemeVariant(fromCookie)) {
+      resolved = fromCookie;
+    } else {
+      try {
+        const fromStorage = localStorage.getItem(STORAGE_KEY);
+        if (isThemeVariant(fromStorage)) resolved = fromStorage;
+      } catch {
+        console.error("Failed to access localStorage");
+      }
+    }
+    applyTheme(resolved);
+    setTheme(resolved);
+    persistTheme(resolved);
+  }, [initialTheme]);
+  const switchTheme = useCallback((id) => {
+    applyTheme(id);
+    setTheme(id);
+    persistTheme(id);
+    return id;
+  }, []);
+  return { theme, switchTheme };
+}
+
+export { useTheme };

package/dist/hooks/useTimeDuration.cjs

@@ -0,0 +1,72 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+function defaultDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const sec = Math.floor(ms / 1e3) % 60;
+  const min = Math.floor(ms / (1e3 * 60)) % 60;
+  const hr = Math.floor(ms / (1e3 * 60 * 60));
+  if (hr > 0) {
+    return `${hr}t ${min}m ${sec}s`;
+  }
+  if (min > 0) {
+    return `${min}m ${sec}s`;
+  }
+  return `${sec}s`;
+}
+function useTimeDuration({
+  start,
+  end,
+  dateFormat = {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  },
+  fallback = "\u2014",
+  liveUpdate = false,
+  formatDuration = defaultDuration
+}) {
+  const [hydrated, setHydrated] = react.useState(false);
+  const [tick, setTick] = react.useState(0);
+  react.useEffect(() => setHydrated(true), []);
+  react.useEffect(() => {
+    if (!liveUpdate) return;
+    if (end && end.getTime() <= Date.now()) return;
+    const timer = setInterval(() => {
+      if (end && end.getTime() <= Date.now()) {
+        clearInterval(timer);
+      }
+      setTick((tick2) => tick2 + 1);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [liveUpdate, end]);
+  const started = react.useMemo(() => {
+    if (!start) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat("da-DK", dateFormat).format(start);
+  }, [start, hydrated, fallback, dateFormat]);
+  const ended = react.useMemo(() => {
+    if (!end) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat("da-DK", dateFormat).format(end);
+  }, [end, hydrated, fallback, dateFormat]);
+  const duration = react.useMemo(() => {
+    if (!start || !hydrated) return fallback;
+    const now = Date.now();
+    if (!end) {
+      return formatDuration(now - start.getTime());
+    }
+    if (end.getTime() > now) {
+      return formatDuration(end.getTime() - now);
+    }
+    return formatDuration(end.getTime() - start.getTime());
+  }, [start, end, fallback, hydrated, formatDuration, tick]);
+  return { started, ended, isFinished: !!start && !!end, duration, hydrated };
+}
+
+exports.useTimeDuration = useTimeDuration;

package/dist/hooks/useTimeDuration.js

@@ -0,0 +1,70 @@
+'use client';
+import { useState, useEffect, useMemo } from 'react';
+
+function defaultDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const sec = Math.floor(ms / 1e3) % 60;
+  const min = Math.floor(ms / (1e3 * 60)) % 60;
+  const hr = Math.floor(ms / (1e3 * 60 * 60));
+  if (hr > 0) {
+    return `${hr}t ${min}m ${sec}s`;
+  }
+  if (min > 0) {
+    return `${min}m ${sec}s`;
+  }
+  return `${sec}s`;
+}
+function useTimeDuration({
+  start,
+  end,
+  dateFormat = {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  },
+  fallback = "\u2014",
+  liveUpdate = false,
+  formatDuration = defaultDuration
+}) {
+  const [hydrated, setHydrated] = useState(false);
+  const [tick, setTick] = useState(0);
+  useEffect(() => setHydrated(true), []);
+  useEffect(() => {
+    if (!liveUpdate) return;
+    if (end && end.getTime() <= Date.now()) return;
+    const timer = setInterval(() => {
+      if (end && end.getTime() <= Date.now()) {
+        clearInterval(timer);
+      }
+      setTick((tick2) => tick2 + 1);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [liveUpdate, end]);
+  const started = useMemo(() => {
+    if (!start) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat("da-DK", dateFormat).format(start);
+  }, [start, hydrated, fallback, dateFormat]);
+  const ended = useMemo(() => {
+    if (!end) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat("da-DK", dateFormat).format(end);
+  }, [end, hydrated, fallback, dateFormat]);
+  const duration = useMemo(() => {
+    if (!start || !hydrated) return fallback;
+    const now = Date.now();
+    if (!end) {
+      return formatDuration(now - start.getTime());
+    }
+    if (end.getTime() > now) {
+      return formatDuration(end.getTime() - now);
+    }
+    return formatDuration(end.getTime() - start.getTime());
+  }, [start, end, fallback, hydrated, formatDuration, tick]);
+  return { started, ended, isFinished: !!start && !!end, duration, hydrated };
+}
+
+export { useTimeDuration };

package/dist/hooks/useViewportFill.cjs

@@ -0,0 +1,82 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
+  const [maxHeight, setMaxHeight] = react.useState(min);
+  const raf = react.useRef(null);
+  const measure = react.useCallback(() => {
+    if (typeof window === "undefined" || !ref.current) return;
+    const el = ref.current;
+    const rect = el.getBoundingClientRect();
+    let top = rect.top;
+    if (includeMarginTop) {
+      const marginTop = parseFloat(window.getComputedStyle(el).marginTop || "0") || 0;
+      top -= marginTop;
+    }
+    const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
+    setMaxHeight((prev) => prev === next ? prev : next);
+  }, [ref, bottomOffset, min, includeMarginTop]);
+  const scheduleMeasure = react.useCallback(() => {
+    if (typeof window === "undefined") return;
+    if (raf.current != null) {
+      cancelAnimationFrame(raf.current);
+    }
+    raf.current = window.requestAnimationFrame(() => {
+      raf.current = null;
+      measure();
+    });
+  }, [measure]);
+  useIsomorphicLayoutEffect(() => {
+    measure();
+  }, [measure]);
+  react.useEffect(() => {
+    var _a;
+    if (typeof window === "undefined" || !ref.current) return;
+    const target = ref.current;
+    const extra = (_a = watchRef == null ? void 0 : watchRef.current) != null ? _a : null;
+    const parent = target.parentElement;
+    const onResize = () => scheduleMeasure();
+    const onTransitionOrAnimationEnd = () => scheduleMeasure();
+    window.addEventListener("resize", onResize);
+    document.addEventListener("transitionend", onTransitionOrAnimationEnd, true);
+    document.addEventListener("animationend", onTransitionOrAnimationEnd, true);
+    let resizeObserver = null;
+    if ("ResizeObserver" in window) {
+      resizeObserver = new ResizeObserver(() => scheduleMeasure());
+      resizeObserver.observe(target);
+      if (parent && parent !== target) {
+        resizeObserver.observe(parent);
+      }
+      if (extra && extra !== target && extra !== parent) {
+        resizeObserver.observe(extra);
+      }
+    }
+    return () => {
+      window.removeEventListener("resize", onResize);
+      document.removeEventListener("transitionend", onTransitionOrAnimationEnd, true);
+      document.removeEventListener("animationend", onTransitionOrAnimationEnd, true);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      if (raf.current != null) {
+        cancelAnimationFrame(raf.current);
+        raf.current = null;
+      }
+    };
+  }, [ref, watchRef, scheduleMeasure]);
+  const style = react.useMemo(
+    () => ({
+      maxHeight,
+      overflow: "auto"
+    }),
+    [maxHeight]
+  );
+  return {
+    maxHeight,
+    style,
+    recompute: measure
+  };
+}
+
+exports.useViewportFill = useViewportFill;