@mapsight/ui 7.0.0

package/src/js/components/map-synced-interlay/tooltip.tsx

@@ -0,0 +1,199 @@
+import {
+	type CSSProperties,
+	type ReactElement,
+	type RefObject,
+	memo,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+import {useSelector} from "react-redux";
+
+import {createSelector} from "reselect";
+
+import {
+	type FeatureSelectionState,
+	createFeatureSelectionSelector,
+	getFilteredFeatures,
+} from "@mapsight/core/lib/feature-selections/selectors";
+import {findFeatureInFeatureSourcesById} from "@mapsight/core/lib/feature-sources/selectors";
+import type {FeatureSourcesState} from "@mapsight/core/lib/feature-sources/types";
+import {mapSizeSelector as getMapSize} from "@mapsight/core/lib/map/selectors";
+import type {MapState} from "@mapsight/core/lib/map/types";
+import type {Feature, State} from "@mapsight/core/types";
+
+import {
+	FEATURE_SELECTIONS,
+	FEATURE_SOURCES,
+	MAP,
+} from "../../config/constants/controllers";
+import {FEATURE_SELECTION_HIGHLIGHT} from "../../config/feature/selections";
+import getFeatureProperty from "../../helpers/get-feature-property";
+import type {MapsightUiFeature} from "../../types";
+import TooltipContent from "./tooltip-content";
+
+const featureSelector = createSelector(
+	(state) => state[FEATURE_SOURCES] as FeatureSourcesState,
+	createFeatureSelectionSelector(
+		FEATURE_SELECTIONS,
+		FEATURE_SELECTION_HIGHLIGHT,
+	),
+	(
+		featureSources: FeatureSourcesState,
+		selection: FeatureSelectionState | undefined,
+	) => {
+		const features = getFilteredFeatures(selection);
+		const featureId = features && features[0];
+		if (featureId) {
+			return findFeatureInFeatureSourcesById(featureSources, featureId);
+		}
+
+		return null;
+	},
+);
+
+function mapSizeSelector(state: State) {
+	return getMapSize(state[MAP] as MapState);
+}
+
+export type Position = null | {
+	left: number;
+	right: number;
+	top: number;
+	bottom: number;
+};
+
+/**
+ * @param feature feature
+ * @param tooltipElementRef feature
+ * @returns position and withTransition
+ */
+function useGetPositionWithTransition(
+	feature: Feature | null,
+	tooltipElementRef: RefObject<HTMLElement | null>,
+): [Position, boolean] {
+	const [withTransition, setWithTransition] = useState(true);
+
+	const mapSize = useSelector(mapSizeSelector);
+
+	const [position, setPosition] = useState<null | Position>(null);
+
+	useEffect(() => {
+		setWithTransition(false);
+	}, [mapSize]);
+
+	useEffect(() => {
+		const mapElNull = tooltipElementRef.current
+			?.closest(".ms3-map-wrapper")
+			?.querySelector(".ms3-map-target");
+
+		if (!mapElNull || !feature) {
+			return undefined;
+		}
+
+		const mapEl = mapElNull;
+
+		function onMouseMove(e: MouseEvent) {
+			const x = e.clientX;
+			const y = e.clientY;
+			const {left, right, top, bottom} = mapEl.getBoundingClientRect();
+			setPosition({
+				left: x - left,
+				right: right - x,
+				top: y - top,
+				bottom: bottom - y,
+			});
+			setWithTransition(true);
+		}
+
+		function onMouseOut() {
+			setPosition(null);
+			setWithTransition(true);
+		}
+
+		mapEl.addEventListener("mousemove", onMouseMove);
+		mapEl.addEventListener("mouseout", onMouseOut);
+
+		return () => {
+			setPosition(null);
+			setWithTransition(true);
+
+			mapEl.removeEventListener("mousemove", onMouseMove);
+			mapEl.removeEventListener("mouseout", onMouseOut);
+		};
+	}, [feature, setPosition, tooltipElementRef]);
+
+	return [position, withTransition];
+}
+
+function Tooltip() {
+	const tooltipElementRef = useRef<HTMLDivElement>(null);
+	const feature = useSelector(featureSelector) as MapsightUiFeature | null;
+
+	// Keeping the last feature to allow fade out without losing the content
+	const [lastFeature, setLastFeature] = useState<MapsightUiFeature | null>(
+		null,
+	);
+
+	useEffect(() => {
+		if (!feature) {
+			setLastFeature(feature);
+		}
+	}, [feature, setLastFeature]);
+
+	const [position, withTransition] = useGetPositionWithTransition(
+		feature,
+		tooltipElementRef,
+	);
+
+	const localFeature = feature || lastFeature;
+	if (!localFeature) {
+		return;
+	}
+
+	const classes = `ms3-tooltip ms3-tooltip--${
+		feature ? "active" : "inactive"
+	}`;
+	const classesInner = `ms3-tooltip__inner ms3-tooltip__inner--${
+		feature ? "active" : "inactive"
+	}`;
+
+	const styles: CSSProperties = {};
+
+	if (position) {
+		styles.transform = `translate(${-position.right}px, ${position.top}px)`;
+	} else {
+		styles.display = "none";
+	}
+
+	if (!withTransition) {
+		styles.transition = "none";
+	}
+
+	const html = getFeatureProperty(localFeature, "tooltip", "") as string;
+	const text = html
+		? ""
+		: (getFeatureProperty(localFeature, "name", "") as string);
+
+	let content: null | ReactElement = null;
+	if (html) {
+		content = (
+			<div
+				className={classesInner}
+				dangerouslySetInnerHTML={{__html: html}}
+			/>
+		);
+	} else if (text) {
+		content = <div className={classesInner}>{text}</div>;
+	}
+
+	return (
+		<div className={classes} style={styles} ref={tooltipElementRef}>
+			<TooltipContent feature={localFeature} html={html} text={text}>
+				{content}
+			</TooltipContent>
+		</div>
+	);
+}
+
+export default memo(Tooltip);

package/src/js/components/map-wrapper.tsx

@@ -0,0 +1,65 @@
+import type {PropsWithChildren, RefCallback} from "react";
+import {memo, useCallback, useRef} from "react";
+import {useInView} from "react-intersection-observer";
+import {useDispatch, useSelector, useStore} from "react-redux";
+
+import useUpdateMapSizeOnRender from "../hooks/useUpdateMapSizeOnRender";
+import useUpdateMapSizeOnTransitionEnd from "../hooks/useUpdateMapSizeOnTransitionEnd";
+import useUpdateMapSizeOnViewChange from "../hooks/useUpdateMapSizeOnViewChange";
+import {setMapIsOutOfViewport} from "../store/actions";
+import {viewSelector} from "../store/selectors";
+import {
+	APP_EVENT_SCROLL_TO_MAP,
+	useAppChannelEventListener,
+} from "./helping/app-channel";
+
+function MapWrapper(props: PropsWithChildren) {
+	const {children} = props;
+
+	const dispatch = useDispatch();
+	const mapWrapperRef = useRef<HTMLDivElement | undefined>(undefined);
+
+	useUpdateMapSizeOnViewChange(
+		useSelector(viewSelector) ?? "desktop",
+		useStore(),
+	);
+	useUpdateMapSizeOnTransitionEnd(mapWrapperRef.current, dispatch);
+	useUpdateMapSizeOnRender(dispatch);
+
+	useAppChannelEventListener(
+		APP_EVENT_SCROLL_TO_MAP,
+		useCallback(() => {
+			mapWrapperRef.current?.scrollIntoView({
+				block: "start",
+				behavior: "smooth",
+			});
+		}, [mapWrapperRef]),
+	);
+
+	const {ref: inViewRef} = useInView({
+		threshold: 0,
+		initialInView: true,
+		fallbackInView: true,
+		onChange: (inView) => dispatch(setMapIsOutOfViewport(!inView)),
+	});
+
+	const setRef: RefCallback<HTMLDivElement> = useCallback(
+		(node) => {
+			mapWrapperRef.current = node ?? undefined;
+			inViewRef(node);
+		},
+		[inViewRef],
+	);
+
+	return (
+		<div
+			ref={setRef}
+			// ms3-map-wrapper--anchored-${anchor}
+			className={`ms3-map-wrapper [ ms3-flex ms3-flex--column ] [ ms3-scroll-target ]`}
+		>
+			{children}
+		</div>
+	);
+}
+
+export default memo(MapWrapper);

package/src/js/components/map.jsx

@@ -0,0 +1,37 @@
+import {memo, useEffect, useRef} from "react";
+import {useStore} from "react-redux";
+import {MAP} from "../config/constants/controllers";
+
+import {translate} from "../helpers/i18n";
+import useMountable from "../hooks/useMountable";
+
+function MapsightMap({
+	controllerName = MAP,
+	enableKeyboardControl = true,
+	...attributes
+}) {
+	const store = useStore();
+	const ref = useRef();
+
+	const handleMount = useMountable(store.getController(controllerName));
+	useEffect(() => {
+		handleMount(ref.current);
+	}, [ref, handleMount]);
+
+	if (enableKeyboardControl) {
+		attributes.tabIndex = 0;
+	}
+
+	return (
+		<div className="ms3-map-target" ref={ref} {...attributes}>
+			<span className="ms3-visuallyhidden">
+				{translate("ui.map.visuallyhidden")}
+			</span>
+			<div className="ol-viewport">
+				<canvas className="ol-unselectable" />
+			</div>
+		</div>
+	);
+}
+
+export default memo(MapsightMap);

package/src/js/components/modal.tsx

@@ -0,0 +1,40 @@
+import type {KeyboardEvent, MouseEvent, ReactNode} from "react";
+import type {Props as ReactModalProps} from "react-modal";
+import ReactModal from "react-modal";
+
+import CloseOverlayButton from "./close-overlay-button";
+
+export type Props = ReactModalProps & {
+	closeLabel?: string;
+	headline: ReactNode;
+};
+
+const Modal = ({children, closeLabel, headline, ...props}: Props) => {
+	const handleClose = (event: MouseEvent | KeyboardEvent) =>
+		props.onRequestClose?.(event);
+
+	return (
+		<ReactModal
+			onRequestClose={handleClose}
+			className="ms3-modal"
+			overlayClassName="ms3-app-overlay"
+			shouldCloseOnOverlayClick={true}
+			{...props}
+		>
+			<div className="ms3-modal__inner ms3-modal__inner--search">
+				<div className="ms3-modal__header">
+					<h3 className="ms3-modal__headline">{headline}</h3>
+					<div className="ms3-modal__close">
+						<CloseOverlayButton
+							label={closeLabel}
+							onClose={(event) => handleClose(event)}
+						/>
+					</div>
+				</div>
+				{children}
+			</div>
+		</ReactModal>
+	);
+};
+
+export default Modal;

package/src/js/components/query-input-with-label.tsx

@@ -0,0 +1,71 @@
+import type {ChangeEvent, ReactNode} from "react";
+import {useCallback, useRef} from "react";
+import {useId} from "react-aria";
+
+import {translate} from "../helpers/i18n";
+
+export type Props = {
+	label: ReactNode;
+	placeholder?: string;
+	query: string;
+	onChange: (query: string) => void;
+};
+
+/**
+ * Same as `QueryInput` but with the label prepended and visible. Not possible to change
+ * `QueryInput` into something like this due to leaky abstractions
+ * (leaking internas like classnames)
+ **/
+function QueryInputWithLabel({label, placeholder, query, onChange}: Props) {
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const handleInput = useCallback(
+		(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
+		[onChange],
+	);
+
+	const handleReset = useCallback(() => {
+		onChange("");
+		inputRef.current?.focus();
+	}, [onChange, inputRef]);
+
+	const inputId = useId();
+
+	return (
+		<fieldset className="ms3-query-input-with-label">
+			<label
+				className="ms3-query-input-with-label__label"
+				htmlFor={inputId}
+			>
+				{label}
+			</label>
+
+			<div className="ms3-query-input-with-label__input-container">
+				<input
+					id={inputId}
+					ref={inputRef}
+					className="ms3-query-input-with-label__input"
+					placeholder={placeholder}
+					type="search"
+					value={query}
+					onChange={handleInput}
+					autoComplete="off"
+				/>
+
+				{query !== "" && (
+					<button
+						className="ms3-query-input-with-label__reset-button"
+						type="button"
+						onClick={handleReset}
+					>
+						<span className="ms3-visuallyhidden">
+							{translate("ui.query-input.reset")}
+						</span>
+					</button>
+				)}
+			</div>
+		</fieldset>
+	);
+}
+
+export default QueryInputWithLabel;

package/src/js/components/query-input.tsx

@@ -0,0 +1,81 @@
+import type {ChangeEvent, ReactNode} from "react";
+import {forwardRef, useCallback, useRef} from "react";
+
+import {translate} from "../helpers/i18n";
+import {forwardRefValue} from "../helpers/react";
+
+/* NOTE: for attribute not required because of nesting */
+
+export type Props = {
+	label: ReactNode;
+	placeholder?: string;
+	className?: string;
+	groupClassName?: string;
+	resetButtonClassName?: string;
+	name?: string;
+	query: string;
+	onChange: (query: string) => void;
+	autoFocus?: boolean;
+};
+
+const QueryInput = forwardRef<HTMLInputElement, Props>(function QueryInput(
+	{
+		label,
+		placeholder,
+		className,
+		groupClassName,
+		resetButtonClassName,
+		name,
+		query,
+		onChange,
+		autoFocus,
+	},
+	forwardedRef,
+) {
+	const inputRef = useRef<HTMLInputElement>(null);
+	forwardRefValue(inputRef, forwardedRef);
+
+	const handleInput = useCallback(
+		(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
+		[onChange],
+	);
+
+	const handleReset = useCallback(() => {
+		onChange("");
+		inputRef.current?.focus();
+	}, [onChange, inputRef]);
+
+	return (
+		<fieldset className={groupClassName}>
+			<label>
+				<span className="ms3-visuallyhidden">{label}</span>
+
+				<input
+					ref={inputRef}
+					className={className}
+					placeholder={placeholder}
+					type="search"
+					name={name}
+					value={query}
+					onChange={handleInput}
+					autoComplete="off"
+					autoFocus={autoFocus}
+				/>
+			</label>
+
+			{query !== "" && (
+				<button
+					className={resetButtonClassName}
+					type="button"
+					onClick={handleReset}
+				>
+					<span className="ms3-visuallyhidden">
+						{translate("ui.query-input.reset")}
+					</span>
+				</button>
+			)}
+		</fieldset>
+	);
+});
+
+export default QueryInput;

package/src/js/components/search/index.jsx

@@ -0,0 +1,83 @@
+import {memo, useCallback, useEffect, useRef} from "react";
+import {useDispatch, useSelector} from "react-redux";
+
+import {translate} from "../../helpers/i18n";
+import useDebounce from "../../hooks/useDebounce";
+import {search} from "../../store/actions.ts";
+import {searchQuerySelector} from "../../store/selectors.ts";
+
+import SearchQueryInput from "./query-input";
+import SearchResult from "./result";
+import useHandleEscapeKeyDown from "../../hooks/useHandleEscapeKeyDown";
+
+const preventDefault = (e) => e.preventDefault();
+
+function Search({closeSearch, autoFocus}) {
+	const dispatch = useDispatch();
+	const query = useSelector(searchQuerySelector);
+
+	const debouncedQuery = useDebounce(query, 200);
+	useEffect(() => {
+		if (debouncedQuery !== "") {
+			dispatch(search(debouncedQuery));
+		}
+	}, [dispatch, debouncedQuery]);
+
+	// needed to "override" debounce if the value is ""
+	useEffect(() => {
+		if (query === "") {
+			dispatch(search(query));
+		}
+	}, [dispatch, query]);
+
+	const handleInput = useCallback(
+		(searchQuery) => {
+			dispatch({type: "SEARCH", query: searchQuery}); // action without ajax side effect
+		},
+		[dispatch],
+	);
+
+	const inputRef = useRef();
+
+	useHandleEscapeKeyDown(
+		inputRef,
+		useCallback(() => dispatch(search(""), [dispatch])),
+	);
+
+	const handleReturnFocus = useCallback(() => inputRef.current?.focus(), []);
+
+	return (
+		<form className="ms3-search" onSubmit={preventDefault}>
+			<div className="ms3-search__query-input">
+				<SearchQueryInput
+					ref={inputRef}
+					query={query}
+					onChange={handleInput}
+					name="search"
+					autoFocus={autoFocus}
+				/>
+
+				<button className="ms3-search__send-button" type="submit">
+					<span className="ms3-visuallyhidden">
+						{translate("ui.search.send")}
+					</span>
+				</button>
+			</div>
+
+			{query && (
+				<output
+					className="ms3-search__output"
+					name="search-output"
+					htmlFor="search"
+				>
+					<SearchResult
+						onReturnFocus={handleReturnFocus}
+						closeSearch={closeSearch}
+					/>
+				</output>
+			)}
+		</form>
+	);
+}
+
+export default memo(Search);

package/src/js/components/search/query-input.jsx

@@ -0,0 +1,20 @@
+import {forwardRef} from "react";
+
+import {translate} from "../../helpers/i18n";
+import QueryInput from "../query-input";
+
+function SearchQueryInput(props, ref) {
+	return (
+		<QueryInput
+			ref={ref}
+			className="ms3-search__input"
+			groupClassName="ms3-search__input-group"
+			resetButtonClassName="ms3-search__reset-button"
+			label={translate("ui.search.query-input.label")}
+			placeholder={translate("ui.search.query-input.placeholder")}
+			{...props}
+		/>
+	);
+}
+
+export default forwardRef(SearchQueryInput);

package/src/js/components/search/result-entry.jsx

@@ -0,0 +1,63 @@
+import {selectExclusively} from "@mapsight/core/lib/feature-selections/actions";
+import {memo, useCallback} from "react";
+import {useDispatch} from "react-redux";
+import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
+import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
+
+import getFeatureProperty from "../../helpers/get-feature-property";
+import {search, selectSearchResult} from "../../store/actions.ts";
+
+function SearchResultEntry({closeSearch, onReturnFocus, feature}) {
+	const dispatch = useDispatch();
+
+	const name = getFeatureProperty(feature, "name");
+	const listInformation = getFeatureProperty(feature, "listInformation");
+	const isIncompleteSuggest =
+		getFeatureProperty(feature, "isIncompleteSuggest") === true;
+
+	const handleClick = useCallback(() => {
+		if (isIncompleteSuggest) {
+			dispatch(search(name.trim() + " "));
+			onReturnFocus();
+		} else {
+			dispatch(selectSearchResult(feature));
+			dispatch(
+				selectExclusively(
+					FEATURE_SELECTIONS,
+					FEATURE_SELECTION_SELECT,
+					feature.id,
+				),
+			);
+
+			if (closeSearch) {
+				closeSearch();
+			}
+		}
+	}, [
+		dispatch,
+		feature,
+		isIncompleteSuggest,
+		name,
+		onReturnFocus,
+		closeSearch,
+	]);
+
+	return (
+		<li className="ms3-search-result__list-item">
+			<button
+				className="ms3-search-result__entry"
+				type="button"
+				onClick={handleClick}
+			>
+				<div className="ms3-search-result__entry__title">{name}</div>
+				{listInformation && (
+					<div className="ms3-search-result__entry__subline">
+						{listInformation}
+					</div>
+				)}
+			</button>
+		</li>
+	);
+}
+
+export default memo(SearchResultEntry);