@mapsight/ui 7.0.0

package/src/js/helpers/i18n/de.ts

@@ -0,0 +1,145 @@
+import {
+	STATUS_ERROR,
+	STATUS_LOADING,
+} from "@mapsight/core/lib/feature-sources/selectors";
+
+import {
+	STATUS_ACTIVE,
+	STATUS_INACTIVE,
+} from "../../components/switcher/SwitcherEntry";
+import {
+	VIEW_DESKTOP,
+	VIEW_FULLSCREEN,
+	VIEW_MAP_ONLY,
+	VIEW_MOBILE,
+	ZOOM_IN,
+	ZOOM_OUT,
+} from "../../config/constants/app";
+
+/*  eslint quote-props: 0 */
+
+const de: Record<string, string> = {
+	open: "öffnen",
+	close: "schließen",
+	reset: "zurücksetzen",
+	show: "anzeigen",
+	from: "von",
+	nextEntry: "Vorheriger Eintrag",
+	prevEntry: "Nächster Eintrag",
+
+	"ui.query-input.reset": "Suche zurücksetzen",
+
+	"ui.feature-details.share-link.head": "Link teilen...",
+	"ui.feature-details.share-link.place": "Link zum ausgewählten Ort:",
+	"ui.feature-details.share-link.close": "Link-teilen-Dialog schließen",
+
+	"ui.feature-details.content-inner.error": "Fehler beim Laden der Details.",
+	"ui.feature-details.content-inner.gotoPage": "Direkt zur Seite springen",
+	"ui.feature-details.content-inner.loading": "Lade Details …",
+
+	"ui.main-panel.list-toggle.open": "Liste öffnen",
+	"ui.main-panel.list-toggle.close": "Liste schließen",
+
+	"ui.feature-list.sorting.byDistance":
+		"Meldungen nach Entfernung sortieren:",
+	"ui.feature-list.sorting.choose": "Standort wählen ...",
+	"ui.feature-list.sorting.own": "eigenen Standort verwenden",
+	"ui.feature-list.sorting.announcements": "Meldungen sortieren …",
+
+	"ui.feature-list.content.noListSelected": "keine Liste gewählt",
+	"ui.feature-list.content.noEntries": "keine Einträge",
+	"ui.feature-details.content.title": "Bezeichnung",
+	"ui.feature-details.content.description": "Bemerkung",
+
+	"ui.feature-list.query-input.search": "Textsuche in Liste darunter",
+	"ui.feature-list.query-input.placeholder": "In Liste suchen …",
+
+	"ui.time-filter.span": "Vorschauzeitraum festlegen",
+
+	"ui.search.send": "Suchen",
+
+	"ui.search.result.error": "Fehler beim Laden der Suchergebnisse",
+	"ui.search.result.empty": "Keine Ergebnisse gefunden",
+
+	"ui.search.query-input.label": "Straße oder Ort",
+	"ui.search.query-input.placeholder": "Straße oder Ort ...",
+
+	"ui.feature-selection-info.close": "Informationsdialog schließen",
+
+	"ui.map-overlay.search.open": "Suche öffnen",
+	"ui.map-overlay.search.close": "Suche schließen",
+	"ui.map-overlay.search.modal.label": "Suchfunktion",
+	"ui.map-overlay.search.modal.headline": "Suche",
+
+	"ui.map-overlay.logo.copyright": "Diese Kartenanwendung nutzt Mapsight",
+
+	"ui.map-overlay.info.modal.label": "Quellenangaben und Informationen",
+	"ui.map-overlay.info.modal.headline": "Quellenangaben und Informationen",
+	"ui.map-overlay.info.closeSources":
+		"Quellenangaben und Informationen schließen",
+	"ui.map-overlay.info.legend": "Legende",
+	"ui.map-overlay.info.closeLegend": "Legende schließen",
+	"ui.map-overlay.info.open":
+		"Quellenangaben und weitere Informationen öffnen",
+
+	"ui.map-overlay.layer-switcher.modal.label": "Ebenenauswahl",
+	"ui.map-overlay.layer-switcher.layers": "Ebenen",
+	"ui.map-overlay.layer-switcher.closeLayers": "Ebenenauswahl schließen",
+	"ui.map-overlay.layer-switcher.openLayers": "Ebenenauswahl öffnen",
+
+	// HOWTO: wrap the metadata one base layer of the project with something like
+	// 		withLegend(_metadata, `<article><h1>${translate('ui.map.usage.heading')}</h1>${translate('ui.map.usage.html')}</article>`)
+	// change 'ui.map-overlay.info.legend' according to the use case, ie. set it to "Tastaturbedienung" if there are no other legends, or to "Legende und Tastaturbedienung" if there are such further legends
+	// additinally adapt 'ui.map-overlay.info.open'
+	"ui.map.usage.heading": "Tastaturbedienung der Karte",
+	"ui.map.usage.html":
+		'<dl class="ms3-map-usage">' +
+		'<dt><kbd aria-label="Cursor rechts">→</kbd></dt><dd>nach rechts verschieben</dd>' +
+		'<dt><kbd aria-label="Cursor links">←</kbd></dt><dd>nach links verschieben</dd>' +
+		'<dt><kbd aria-label="Cursor runter">↓</kbd></dt><dd>nach unten verschieben</dd>' +
+		'<dt><kbd aria-label="Cursor hoch">↑</kbd></dt><dd>nach oben verschieben</dd>' +
+		"<dt><kbd>+</kbd></dt><dd>hineinzoomen</dd>" +
+		"<dt><kbd>-</kbd></dt><dd>herauszoomen</dd>" +
+		"</dl>",
+	"ui.map.visuallyhidden":
+		"Dieser Bereich der Webseite zeigt eine Landkarte.",
+
+	[`ui.view-toggle-button.ariaLabel${VIEW_MAP_ONLY}`]: "Zur Karte wechseln",
+	[`ui.view-toggle-button.ariaLabel${VIEW_FULLSCREEN}`]:
+		"Zum Vollbild wechseln",
+	[`ui.view-toggle-button.ariaLabel${VIEW_DESKTOP}`]: "Vollbild schließen",
+	[`ui.view-toggle-button.ariaLabel${VIEW_MOBILE}`]: "Zur Liste wechseln",
+
+	[`ui.view-toggle-button.label${VIEW_MAP_ONLY}`]: "Karte",
+	[`ui.view-toggle-button.label${VIEW_FULLSCREEN}`]: "Vollbild",
+	[`ui.view-toggle-button.label${VIEW_DESKTOP}`]: "Vollbild",
+	[`ui.view-toggle-button.label${VIEW_MOBILE}`]: "Liste",
+
+	[`ui.zoom-button.ariaLabel${ZOOM_OUT}`]: "Karte verkleinern",
+	[`ui.zoom-button.ariaLabel${ZOOM_IN}`]: "Karte vergrößern",
+	[`ui.zoom-button.label${ZOOM_OUT}`]: "Verkleinern",
+	[`ui.zoom-button.label${ZOOM_IN}`]: "Vergrößern",
+
+	[`ui.switcher.entry.label${STATUS_ERROR}`]: "Fehler beim Laden",
+	[`ui.switcher.entry.label${STATUS_LOADING}`]: "Lädt",
+	[`ui.switcher.entry.label${STATUS_ACTIVE}`]: "Aktiv",
+	[`ui.switcher.entry.label${STATUS_INACTIVE}`]: "Inaktiv",
+
+	"ui.user-geo-location-button.label": "Zum eigenen Standort springen",
+	"ui.user-geo-location-button.ariaLabel": "Zum eigenen Standort springen",
+
+	"ui.pagination.nextPage": ">",
+	"ui.pagination.prevPage": "<",
+	"ui.pagination.nextPageLabel": "Zur nächsten Seite blättern",
+	"ui.pagination.prevPageLabel": "Zur vorherigen Seite blättern",
+	"ui.pagination.goToSelectedPageLabel": "Sie sind aktuell auf Seite {page}",
+	"ui.pagination.goToPageLabel": "Zur Seite {page} blättern",
+
+	"ui.share-position-link.title": "Ort teilen",
+	"ui.share-position-link.instructions":
+		"Klicken Sie auf die Karte um einen Ort zu teilen.",
+	"ui.share-position-link.shareTitle": "Markierten Ort teilen",
+	"ui.share-position-link.shareButtonLabel": "Markierten Ort teilen",
+};
+
+export default de;

package/src/js/helpers/i18n/en.ts

@@ -0,0 +1,140 @@
+import {
+	STATUS_ERROR,
+	STATUS_LOADING,
+} from "@mapsight/core/lib/feature-sources/selectors";
+
+import {
+	STATUS_ACTIVE,
+	STATUS_INACTIVE,
+} from "../../components/switcher/SwitcherEntry";
+import {
+	VIEW_DESKTOP,
+	VIEW_FULLSCREEN,
+	VIEW_MAP_ONLY,
+	VIEW_MOBILE,
+	ZOOM_IN,
+	ZOOM_OUT,
+} from "../../config/constants/app";
+
+/*  eslint quote-props: 0 */
+
+const en: Record<string, string> = {
+	open: "open",
+	close: "close",
+	reset: "reset",
+	show: "show",
+	from: "from",
+	nextEntry: "next entry",
+	prevEntry: "previous entry",
+
+	"ui.query-input.reset": "reset search",
+
+	"ui.feature-details.share-link.head": "share link ...",
+	"ui.feature-details.share-link.place": "link to choosen location:",
+	"ui.feature-details.share-link.close": "close dialog to share a link",
+
+	"ui.feature-details.content-inner.error": "error at loading details",
+	"ui.feature-details.content-inner.gotoPage": "jump to page",
+	"ui.feature-details.content-inner.loading": "loading details …",
+
+	"ui.main-panel.list-toggle.open": "open list",
+	"ui.main-panel.list-toggle.close": "close list",
+
+	"ui.feature-list.sorting.byDistance": "sort announcements by distance:",
+	"ui.feature-list.sorting.choose": "choose your location",
+	"ui.feature-list.sorting.own": "use device location",
+	"ui.feature-list.sorting.announcements": "sort announcements …",
+
+	"ui.feature-list.content.noListSelected": "no list selected",
+	"ui.feature-list.content.noEntries": "no entries in list",
+	"ui.feature-details.content.title": "title",
+	"ui.feature-details.content.description": "description",
+
+	"ui.feature-list.query-input.search": "text search in list below",
+	"ui.feature-list.query-input.placeholder": "search in list …",
+
+	"ui.time-filter.span": "set preview period", // FIXME prüfen
+
+	"ui.search.send": "search",
+
+	"ui.search.result.error": "error at loading search results",
+	"ui.search.result.empty": "no search results",
+
+	"ui.search.query-input.label": "street or location",
+	"ui.search.query-input.placeholder": "street or location ...",
+
+	"ui.feature-selection-info.close": "close information dialog",
+
+	"ui.map-overlay.search.open": "open search",
+	"ui.map-overlay.search.close": "close search",
+	"ui.map-overlay.search.modal.label": "Search function",
+	"ui.map-overlay.search.modal.headline": "Search",
+
+	"ui.map-overlay.logo.copyright": "The map is based on Mapsight",
+
+	"ui.map-overlay.info.modal.label": "Citations and Information",
+	"ui.map-overlay.info.modal.headline": "Citations and Information",
+	"ui.map-overlay.info.closeSources":
+		"Close Citations and Information dialog",
+	"ui.map-overlay.info.legend": "legend",
+	"ui.map-overlay.info.closeLegend": "close legend",
+	"ui.map-overlay.info.open":
+		"open source disclosures and further information",
+
+	"ui.map-overlay.layer-switcher.modal.label": "Layers",
+	"ui.map-overlay.layer-switcher.layers": "layers",
+	"ui.map-overlay.layer-switcher.closeLayers": "close layer picker",
+	"ui.map-overlay.layer-switcher.openLayers": "open layer picker",
+
+	"ui.map.usage.heading": "Keyboard shortcuts for map usage",
+	"ui.map.usage.html":
+		'<dl class="ms3-map-usage">' +
+		'<dt><kbd aria-label="Arrow right">→</kbd></dt><dd>move right</dd>' +
+		'<dt><kbd aria-label="Arrow left">←</kbd></dt><dd>move left</dd>' +
+		'<dt><kbd aria-label="Arrow down">↓</kbd></dt><dd>move down</dd>' +
+		'<dt><kbd aria-label="Arrow up">↑</kbd></dt><dd>move up</dd>' +
+		"<dt><kbd>+</kbd></dt><dd>zoom in</dd>" +
+		"<dt><kbd>-</kbd></dt><dd>zoom out</dd>" +
+		"</dl>",
+	"ui.map.visuallyhidden": "This part of the page shows a geographical map.",
+
+	[`ui.view-toggle-button.ariaLabel${VIEW_MAP_ONLY}`]: "show map only",
+	[`ui.view-toggle-button.ariaLabel${VIEW_FULLSCREEN}`]:
+		"switch to full screen",
+	[`ui.view-toggle-button.ariaLabel${VIEW_DESKTOP}`]: "close full screen",
+	[`ui.view-toggle-button.ariaLabel${VIEW_MOBILE}`]: "switch to list",
+
+	[`ui.view-toggle-button.label${VIEW_MAP_ONLY}`]: "map",
+	[`ui.view-toggle-button.label${VIEW_FULLSCREEN}`]: "full screen",
+	[`ui.view-toggle-button.label${VIEW_DESKTOP}`]: "full screen",
+	[`ui.view-toggle-button.label${VIEW_MOBILE}`]: "list",
+
+	[`ui.zoom-button.ariaLabel${ZOOM_OUT}`]: "zoom in",
+	[`ui.zoom-button.ariaLabel${ZOOM_IN}`]: "zoom out",
+
+	[`ui.zoom-button.label${ZOOM_OUT}`]: "zoom in",
+	[`ui.zoom-button.label${ZOOM_IN}`]: "zoom out",
+
+	[`ui.switcher.entry.label${STATUS_ERROR}`]: "error at loading",
+	[`ui.switcher.entry.label${STATUS_LOADING}`]: "loading",
+	[`ui.switcher.entry.label${STATUS_ACTIVE}`]: "active",
+	[`ui.switcher.entry.label${STATUS_INACTIVE}`]: "inactive",
+
+	"ui.user-geo-location-button.label": "jump to your location",
+	"ui.user-geo-location-button.ariaLabel": "jump to your location",
+
+	"ui.pagination.nextPage": ">",
+	"ui.pagination.prevPage": "<",
+	"ui.pagination.nextPageLabel": "Go to next page",
+	"ui.pagination.prevPageLabel": "Go to previous page",
+	"ui.pagination.goToSelectedPageLabel": "You are on page {page}",
+	"ui.pagination.goToPageLabel": "Go to page {page}",
+
+	"ui.share-position-link.title": "Share position",
+	"ui.share-position-link.instructions":
+		"Click on the map to share a position.",
+	"ui.share-position-link.shareTitle": "Share marked position",
+	"ui.share-position-link.shareButtonLabel": "Share marked position",
+};
+
+export default en;

package/src/js/helpers/i18n/index.ts

@@ -0,0 +1,41 @@
+// TODO: https://www.npmjs.com/package/i18next ?
+import de from "./de";
+import en from "./en";
+
+const DEFAULT_LANGUAGE = "de";
+let documentLanguage =
+	(typeof document !== "undefined" &&
+		document.documentElement &&
+		document.documentElement.lang) ||
+	DEFAULT_LANGUAGE;
+
+const DICTIONARY: Record<string, Record<string, string>> = {de, en};
+
+// use this to make dictionary expandable/overwritable by clients
+export function getDictionary() {
+	return DICTIONARY;
+}
+
+export function setDocumentLanguage(value) {
+	documentLanguage = value;
+}
+
+export function getDocumentLanguage() {
+	return documentLanguage;
+}
+
+/**
+ * @param key key
+ * @param language language
+ * @returns translation
+ */
+export function translate(
+	key: string,
+	language: string = documentLanguage,
+): string {
+	return (
+		DICTIONARY[language]?.[key] ??
+		DICTIONARY[DEFAULT_LANGUAGE]?.[key] ??
+		key
+	);
+}

package/src/js/helpers/mod-classes.ts

@@ -0,0 +1,47 @@
+import {unreachableValue} from "@mapsight/lib-js/unreachable";
+
+/**
+ * @param name Name of block or element
+ * @param mods modifiers
+ * @returns class string
+ */
+export default function modClasses(
+	name: string,
+	mods:
+		| Record<string, boolean>
+		| Array<string | false | null | undefined>
+		| string
+		| false
+		| null
+		| undefined,
+): string {
+	const modsArr = (() => {
+		// string to array
+		if (typeof mods === "string") {
+			return [mods];
+		}
+
+		// object to array
+		if (mods !== null && typeof mods === "object" && !Array.isArray(mods)) {
+			return Object.entries(mods)
+				.filter(([_, val]) => val === true)
+				.map(([key, _]) => key);
+		}
+
+		if (Array.isArray(mods)) {
+			return mods.filter(isNotFalsy);
+		}
+
+		if (mods === null || mods === false || mods === undefined) {
+			return [];
+		}
+
+		unreachableValue(mods);
+	})();
+
+	return [name, ...modsArr.map((mod) => `${name}--${mod}`)].join(" ");
+}
+
+function isNotFalsy<T>(val: T | false | null | undefined): val is T {
+	return val !== false && val !== null && val !== undefined;
+}

package/src/js/helpers/react.ts

@@ -0,0 +1,14 @@
+import type {ForwardedRef, RefObject} from "react";
+
+export function forwardRefValue<T>(
+	source: RefObject<T>,
+	dest: ForwardedRef<T>,
+): void {
+	if (dest !== null) {
+		if (typeof dest === "function") {
+			dest(source.current);
+		} else {
+			dest.current = source.current;
+		}
+	}
+}

package/src/js/helpers/scroll-to-element-top.ts

@@ -0,0 +1,16 @@
+export default function scrollToElementTop(
+	selector: string,
+	offsetTop: number = 0,
+	immediate: boolean = false,
+): void {
+	if (selector && typeof window !== "undefined") {
+		const element = window.document.querySelector(selector);
+		if (element) {
+			window.scrollBy({
+				left: 0,
+				top: element.getBoundingClientRect().top - offsetTop,
+				behavior: !immediate ? "smooth" : "auto",
+			});
+		}
+	}
+}

package/src/js/helpers/sort-features-by-distance.ts

@@ -0,0 +1,102 @@
+import {getDistance} from "ol/sphere";
+
+import type {
+	MapsightUiPlace,
+	MapsightUiPlaceGroup,
+	MapsightUiPlacesData,
+} from "../components/feature-list-sorting/feature-list-sorting";
+import type {MapsightUiFeature} from "../types";
+
+/**
+ * @param feature feature object
+ * @returns anchor
+ */
+function defaultFeatureAnchorSelector(
+	feature: MapsightUiFeature,
+): [undefined | null | number, undefined | null | number] {
+	if (!feature) {
+		return [null, null];
+	}
+
+	// TODO: document/collect magic property names
+	const bbox = feature.bbox;
+
+	const x = bbox && bbox[0] && bbox[2] && (bbox[0] + bbox[2]) / 2;
+	const y = bbox && bbox[1] && bbox[3] && (bbox[1] + bbox[3]) / 2;
+
+	return [x, y];
+}
+
+/**
+ * @param sorting sorting state
+ * @param places places
+ * @returns place to sort by or null
+ */
+function findPlaceForSorting(
+	sorting: string,
+	places: MapsightUiPlacesData,
+): MapsightUiPlace | null {
+	const sortingKeys = sorting.split(",");
+
+	let placePointer:
+		| MapsightUiPlacesData
+		| MapsightUiPlace
+		| MapsightUiPlaceGroup = places;
+
+	for (const key of sortingKeys) {
+		if (!placePointer[key]) {
+			return null;
+		}
+
+		placePointer = placePointer[key];
+
+		if ("entries" in placePointer) {
+			placePointer = placePointer.entries;
+		}
+	}
+
+	if ("x" in placePointer && "y" in placePointer) {
+		return placePointer as MapsightUiPlace;
+	}
+
+	return null;
+}
+
+/**
+ * sorts features by distance
+ *
+ * @param features features
+ * @param places places
+ * @param sorting sorting state
+ * @param settings settings
+ * @returns sorted features
+ */
+export default function sortFeaturesByDistance(
+	features: Array<MapsightUiFeature>,
+	places: MapsightUiPlacesData,
+	sorting: null | undefined | string,
+	{
+		featureAnchorSelector = defaultFeatureAnchorSelector,
+	}: {
+		// featureAnchorSelector?(feature: MapsightUiFeature): Array<number>;
+		featureAnchorSelector?: (feature: MapsightUiFeature) => Array<any>;
+	} = {},
+): Array<MapsightUiFeature> {
+	if (!sorting) {
+		return features;
+	}
+
+	const placePointer = findPlaceForSorting(sorting, places);
+	if (placePointer) {
+		const placeCoords = [placePointer.x, placePointer.y];
+		return features
+			.slice()
+			.sort(
+				(a, b) =>
+					getDistance(placeCoords, featureAnchorSelector(a)) -
+					getDistance(placeCoords, featureAnchorSelector(b)),
+			);
+	}
+
+	return features;
+}

package/src/js/helpers/sticky.js

@@ -0,0 +1,143 @@
+const parentClass = "js-sticky-parent";
+const willStickClass = "js-will-stick";
+const stickyClass = "js-is-sticky";
+const stuckClass = "js-is-stuck";
+
+const DEFAULT_OPTIONS = {
+	offset: 0,
+	verticalPosition: "top",
+	onChange: (_state) => undefined,
+};
+
+function getStickPositionValue() {
+	const prefix = ["", "-webkit-"];
+	const test = document.head.style;
+	for (let i = 0; i < prefix.length; i += 1) {
+		test.position = `${prefix[i]}sticky`;
+	}
+	let stickyProp = "fixed";
+	if (typeof test.position !== "undefined") {
+		stickyProp = test.position;
+	}
+	test.position = "";
+	return stickyProp;
+}
+
+export default function makeSticky(
+	targetElement,
+	scrollElement = window,
+	options = {},
+) {
+	if (typeof window === "undefined") {
+		return () => undefined;
+	}
+
+	const positionValue = getStickPositionValue();
+	const useFixed = positionValue === "fixed";
+
+	options = {...DEFAULT_OPTIONS, ...options};
+
+	let state = "default";
+
+	if (options.verticalPosition === "top") {
+		targetElement.style[options.verticalPosition] = `${options.offset}px`;
+	}
+
+	if (!useFixed) {
+		targetElement.style.position = positionValue;
+	}
+
+	targetElement.classList.add(willStickClass);
+
+	const isWindow = scrollElement === window;
+	const delay = (isWindow && window.requestAnimationFrame) || ((f) => f());
+	const parentElement = targetElement.parentNode;
+	parentElement.className += ` ${parentClass}`;
+
+	const isFixedWithOffset = !isWindow && positionValue === "fixed";
+	const scrollElementOffset = isFixedWithOffset
+		? scrollElement.getBoundingClientRect().top
+		: 0;
+	const offset = scrollElementOffset + options.offset;
+	const parentOffset = parentElement.getBoundingClientRect().top;
+	const parentHeight = parentElement.offsetHeight;
+	const targetHeight = targetElement.offsetHeight;
+	const stickyStart = parentOffset - scrollElementOffset - offset;
+	const stickyStop =
+		parentOffset + parentHeight - scrollElementOffset - targetHeight;
+	const scrollListener = () => {
+		const scroll = isWindow
+			? window.scrollY || window.pageYOffset
+			: scrollElement.scrollTop;
+
+		const isBelow = scroll >= stickyStop;
+		if (isBelow && state === "sticky") {
+			state = "stuck";
+
+			delay(() => {
+				targetElement.classList.remove(stickyClass);
+				targetElement.classList.add(stuckClass);
+
+				if (useFixed) {
+					targetElement.style.top = "";
+					targetElement.style.bottom = "0";
+					targetElement.style.position = "absolute";
+				}
+
+				options.onChange(state);
+			});
+
+			return;
+		}
+
+		const isAbove = scroll <= stickyStart;
+		if (!isAbove && !isBelow) {
+			if (state !== "sticky") {
+				state = "sticky";
+
+				delay(() => {
+					targetElement.classList.remove(willStickClass);
+					targetElement.classList.remove(stuckClass);
+					targetElement.classList.add(stickyClass);
+					targetElement.style.position = positionValue;
+					targetElement.style.bottom = "";
+					targetElement.style[options.verticalPosition] =
+						`${options.offset}px`;
+
+					options.onChange(state);
+				});
+			}
+
+			return;
+		}
+
+		if (state !== "default") {
+			state = "default";
+
+			delay(() => {
+				targetElement.classList.remove(stickyClass);
+				targetElement.classList.remove(stuckClass);
+				targetElement.classList.add(willStickClass);
+
+				if (useFixed) {
+					targetElement.style.position = "";
+				}
+
+				options.onChange(state);
+			});
+		}
+	};
+	scrollElement.addEventListener("scroll", scrollListener, {passive: true});
+
+	return function cleanup() {
+		scrollElement.removeEventListener("scroll", scrollListener, {
+			passive: true,
+		});
+		targetElement.style.position = "";
+		targetElement.style[options.verticalPosition] = "";
+		targetElement.classList.remove(stickyClass);
+		targetElement.classList.remove(stuckClass);
+		targetElement.classList.remove(willStickClass);
+		targetElement.parentNode.classList.remove(parentClass);
+	};
+}

package/src/js/hooks/useCallbackRef.ts

@@ -0,0 +1,14 @@
+import {useEffect, useMemo, useRef} from "react";
+
+export default function useCallbackRef<
+	T extends (...args: unknown[]) => unknown,
+>(callback: T | undefined): T {
+	const ref = useRef(callback);
+
+	useEffect(() => {
+		ref.current = callback;
+	});
+
+	// See https://github.com/facebook/react/issues/19240#issuecomment-652945246
+	return useMemo(() => ((...args) => ref.current?.(...args)) as T, []);
+}