@mapsight/ui 7.0.0

package/src/js/components/feature-list-sorting/feature-list-sorting.tsx

@@ -0,0 +1,144 @@
+import type {ChangeEvent, ReactElement} from "react";
+import {memo, useCallback, useState} from "react";
+
+import {FocusTrap} from "focus-trap-react";
+
+import {hasGeolocationSupport} from "@mapsight/core/lib/helpers";
+
+import {translate} from "../../helpers/i18n";
+import StatusIndicator from "./status-indicator";
+
+export type MapsightUiPlace = {title: string; x: number; y: number; z?: number};
+export type MapsightUiPlaceGroup = {
+	type: "group";
+	title: string;
+	entries: MapsightUiPlacesData;
+};
+export type MapsightUiPlacesData = Record<
+	string,
+	MapsightUiPlace | MapsightUiPlaceGroup
+>;
+
+/**
+ * @param places places
+ * @param keyPath key path
+ * @returns option elements
+ */
+function renderOptions(
+	places: MapsightUiPlacesData,
+	keyPath: Array<string> = [],
+): Array<ReactElement> {
+	return Object.entries(places).map(([key, place]) => {
+		const keyArr = [...keyPath, key];
+		const keyStr = keyArr.join(",");
+
+		if ("type" in place && place.type === "group") {
+			return (
+				<optgroup label={place.title} key={keyStr}>
+					{renderOptions(place.entries, keyArr)}
+				</optgroup>
+			);
+		} else {
+			return (
+				<option value={keyStr} key={keyStr}>
+					{place.title}
+				</option>
+			);
+		}
+	});
+}
+
+/* NOTICE: using onChange instead of onBlur as the change occurs just below this input and should be clear */
+function FeatureSorter({
+	places,
+	sorting,
+	geolocationStatus,
+	onChange,
+	requestGeolocation,
+}: {
+	places: MapsightUiPlacesData;
+	sorting: string;
+	geolocationStatus: string;
+	onChange: (value: string) => void;
+	requestGeolocation: () => void;
+}) {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const handleClose = useCallback(() => setIsOpen(false), []);
+	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
+
+	const onSelectChange = useCallback(
+		(e: ChangeEvent<HTMLSelectElement>) => {
+			const newValue = e.target.value;
+
+			if (newValue === "geolocation") {
+				requestGeolocation();
+			}
+
+			onChange(newValue);
+		},
+		[onChange, requestGeolocation],
+	);
+
+	return (
+		<div
+			className={`ms3-features-sorting ms3-features-sorting--${
+				isOpen ? "active" : "inactive"
+			}`}
+		>
+			<button
+				type="button"
+				className={
+					"ms3-filter-button " +
+					(isOpen
+						? " ms3-filter-button--icon-sort-active"
+						: " ms3-filter-button--icon-sort")
+				}
+				onClick={toggleOpen}
+				title={translate("ui.feature-list.sorting.announcements")}
+			>
+				<i>{isOpen ? translate("close") : translate("open")}</i>
+			</button>
+
+			<div>
+				{isOpen && (
+					<FocusTrap
+						focusTrapOptions={{
+							clickOutsideDeactivates: true,
+							onDeactivate: handleClose,
+						}}
+					>
+						<div className="ms3-features-sorting__panel">
+							{translate("ui.feature-list.sorting.byDistance")}
+
+							<select
+								value={sorting || ""}
+								onChange={onSelectChange}
+							>
+								<option value="">
+									{translate(
+										"ui.feature-list.sorting.choose",
+									)}
+								</option>
+
+								{hasGeolocationSupport && (
+									<option value="geolocation">
+										{translate(
+											"ui.feature-list.sorting.own",
+										)}
+									</option>
+								)}
+
+								{renderOptions(places)}
+							</select>
+
+							<StatusIndicator status={geolocationStatus} />
+						</div>
+					</FocusTrap>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default memo(FeatureSorter);

package/src/js/components/feature-list-sorting/index.js

@@ -0,0 +1,25 @@
+import {connect} from "react-redux";
+
+import {createStructuredSelector} from "reselect";
+
+import {getGeolocation} from "@mapsight/core/lib/user-geolocation/actions";
+import {geolocationStatusSelector} from "@mapsight/core/lib/user-geolocation/selectors";
+
+import {USER_GEOLOCATION} from "../../config/constants/controllers";
+import {sortList} from "../../store/actions.ts";
+import {listSortingSelector, placesSelector} from "../../store/selectors.ts";
+import FeatureSorter from "./feature-list-sorting";
+
+export default connect(
+	createStructuredSelector({
+		sorting: listSortingSelector,
+		places: placesSelector,
+		geolocationStatus: (state) =>
+			geolocationStatusSelector(state[USER_GEOLOCATION]),
+	}),
+	// dispatch map:
+	{
+		onChange: sortList,
+		requestGeolocation: getGeolocation,
+	},
+)(FeatureSorter);

package/src/js/components/feature-list-sorting/status-indicator.jsx

@@ -0,0 +1,10 @@
+export default function StatusIndicator({status}) {
+	return (
+		<div
+			className={
+				"ms3-status-indicator" +
+				(status ? " ms3-status-indicator--" + status : "")
+			}
+		/>
+	);
+}

package/src/js/components/feature-select-button.jsx

@@ -0,0 +1,70 @@
+import {useCallback} from "react";
+
+function FeatureSelectButton({
+	featureId,
+	onSelect = null,
+	onDeselect = null,
+	permanentLink = undefined,
+	isSelected = false,
+	selectOnClick = true,
+	deselectOnClick = true,
+	...attributes
+}) {
+	const handleClick = useCallback(
+		(e) => {
+			if (permanentLink) {
+				if (e.which === 2 || e.metaKey) {
+					// Continue as normal for external links and cmd clicks etc
+					return;
+				}
+				e.preventDefault();
+			}
+
+			if (isSelected && deselectOnClick) {
+				if (onDeselect) {
+					onDeselect(featureId);
+				}
+			} else if (selectOnClick && onSelect) {
+				onSelect(featureId, {keyboard: false});
+			}
+		},
+		[
+			permanentLink,
+			isSelected,
+			deselectOnClick,
+			selectOnClick,
+			onDeselect,
+			featureId,
+			onSelect,
+		],
+	);
+
+	const handleKeyDown = useCallback(
+		(e) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+
+				if (selectOnClick && onSelect) {
+					onSelect(featureId, {keyboard: true});
+				}
+			}
+		},
+		[selectOnClick, onSelect, featureId],
+	);
+
+	Object.assign(attributes, {
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+	});
+
+	if (permanentLink) {
+		return (
+			// eslint-disable-next-line jsx-a11y/anchor-has-content
+			<a href={permanentLink} role="button" {...attributes} />
+		);
+	}
+
+	return <button type="button" {...attributes} />;
+}
+
+export default FeatureSelectButton;

package/src/js/components/feature-selection-info/close-button.jsx

@@ -0,0 +1,64 @@
+import {removeFrom} from "@mapsight/core/lib/base/actions";
+import {useCallback} from "react";
+import {useDispatch} from "react-redux";
+import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
+import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
+
+import {translate} from "../../helpers/i18n";
+import {
+	APP_EVENT_FOCUS_FEATURE_LIST,
+	useAppChannelDispatchEvent,
+} from "../helping/app-channel";
+
+function CloseButton({
+	feature,
+	enableKeyboardControl,
+	className = "",
+	...attrs
+}) {
+	const dispatch = useDispatch();
+	const removeSelection = useCallback(() => {
+		console.log("click close fSI");
+		dispatch(
+			removeFrom(
+				[FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT, "features"],
+				feature?.id,
+			),
+		);
+	}, [dispatch, feature?.id]);
+
+	const appChannelDispatch = useAppChannelDispatchEvent();
+	const handleCloseByKeyboard = useCallback(
+		/** @param {KeyboardEvent} ev ev */ (ev) => {
+			if (enableKeyboardControl) {
+				console.log("keyboard close fSI");
+				if (
+					ev.key === "Enter" ||
+					ev.key === "Spacebar" ||
+					ev.key === " "
+				) {
+					appChannelDispatch(new Event(APP_EVENT_FOCUS_FEATURE_LIST));
+				}
+			}
+		},
+		[enableKeyboardControl, appChannelDispatch],
+	);
+
+	return (
+		<button
+			type="button"
+			className={`ms3-button ms3-feature-selection-info__close-button ${className}`}
+			onClick={removeSelection}
+			onKeyDown={handleCloseByKeyboard}
+			// TODO: ARIA
+			//aria-controls={}
+			{...attrs}
+		>
+			<span className="ms3-visuallyhidden">
+				{translate("ui.feature-selection-info.close")}
+			</span>
+		</button>
+	);
+}
+
+export default CloseButton;

package/src/js/components/feature-selection-info/container.jsx

@@ -0,0 +1,9 @@
+function Container({children, className = "", ...attrs}) {
+	return (
+		<div className={`ms3-feature-selection-info ${className}`} {...attrs}>
+			{children}
+		</div>
+	);
+}
+
+export default Container;

package/src/js/components/feature-selection-info/header.tsx

@@ -0,0 +1,27 @@
+import {memo} from "react";
+
+import {makeReplaceableComponent} from "../../helpers/components";
+import getFeatureProperty from "../../helpers/get-feature-property";
+import type {MapsightUiFeature} from "../../types";
+
+export type Props = {
+	feature: MapsightUiFeature;
+};
+
+const Header = memo(function FeatureSelectionInfoHeader({feature}: Props) {
+	const name = getFeatureProperty(feature, "name") as string;
+	return (
+		<header className="ms3-feature-selection-info__header">
+			<h3 className="ms3-feature-selection-info__headline">{name}</h3>
+		</header>
+	);
+});
+
+export default makeReplaceableComponent("FeatureSelectionInfoHeader", Header);
+export {Header as NonReplaceableHeader};
+
+declare module "../../helpers/components" {
+	interface ComponentProps {
+		FeatureSelectionInfoHeader: Props;
+	}
+}

package/src/js/components/feature-selection-info/index.tsx

@@ -0,0 +1,81 @@
+import {useCallback} from "react";
+import {useDispatch, useSelector} from "react-redux";
+
+import {FocusTrap} from "focus-trap-react";
+
+import {removeFrom} from "@mapsight/core/lib/base/actions";
+
+import {FEATURE_SELECTIONS} from "../../config/constants/controllers";
+import {FEATURE_SELECTION_SELECT} from "../../config/feature/selections";
+import {featureSelectionInfoStickyHeaderSelector} from "../../store/selectors";
+import type {MapsightUiFeature} from "../../types";
+import FeatureDetailsContent from "../feature-details-content";
+import CloseButton from "./close-button";
+import Header from "./header";
+import WithStickyHeader from "./with-sticky-header";
+import WithoutStickyHeader from "./without-sticky-header";
+import Wrapper from "./wrapper";
+
+export default function FeatureSelectionInfo({
+	feature,
+	enableKeyboardControl,
+}: {
+	feature: MapsightUiFeature | null;
+	enableKeyboardControl: boolean;
+}) {
+	const dispatch = useDispatch();
+	const hasStickyHeader = useSelector(
+		featureSelectionInfoStickyHeaderSelector,
+	);
+	const renderWrapper = useCallback(
+		(attrs) => (
+			<Wrapper
+				feature={feature}
+				enableKeyboardControl={enableKeyboardControl}
+				{...attrs}
+			/>
+		),
+		[enableKeyboardControl, feature],
+	);
+
+	const removeSelection = useCallback(() => {
+		dispatch(
+			removeFrom(
+				[FEATURE_SELECTIONS, FEATURE_SELECTION_SELECT, "features"],
+				feature?.id,
+			),
+		);
+	}, [dispatch, feature?.id]);
+
+	if (!feature) {
+		return null;
+	}
+
+	const T = hasStickyHeader ? WithStickyHeader : WithoutStickyHeader;
+	return (
+		<FocusTrap
+			active={enableKeyboardControl}
+			focusTrapOptions={{
+				clickOutsideDeactivates: true,
+				onDeactivate: removeSelection,
+			}}
+		>
+			<T
+				feature={feature}
+				close={
+					<CloseButton
+						feature={feature}
+						enableKeyboardControl={enableKeyboardControl}
+					/>
+				}
+				header={<Header feature={feature} />}
+				content={
+					<div className="ms3-feature-selection-info__content">
+						<FeatureDetailsContent feature={feature} />
+					</div>
+				}
+				renderWrapper={renderWrapper}
+			/>
+		</FocusTrap>
+	);
+}

package/src/js/components/feature-selection-info/with-sticky-header.jsx

@@ -0,0 +1,61 @@
+import {useSelector} from "react-redux";
+import useStickyHeader from "../../hooks/useStickyHeader";
+
+import {featureSelectionInfoStuckHeaderHeightSelector} from "../../store/selectors.ts";
+
+import Container from "./container";
+
+const stopEventPropagation = (e) => e.stopPropagation();
+
+function WithStickyHeader({header, content, feature, close, renderWrapper}) {
+	const stuckHeaderHeight = useSelector(
+		featureSelectionInfoStuckHeaderHeightSelector,
+	);
+	const {isHeaderStuck, stickyHeaderRef, stickyScrollAreaRef, onScroll} =
+		useStickyHeader({
+			stuckHeaderSize: stuckHeaderHeight,
+			resetDeps: [feature.id],
+		});
+
+	const stuckClass = (prefix) =>
+		prefix + " " + (isHeaderStuck ? prefix + "--stuck" : "");
+	const stuckHeaderClasses = `ms3-sticky-header__header ${
+		isHeaderStuck
+			? "ms3-sticky-header__header--stuck"
+			: "ms3-sticky-header__header--stuck-placeholder"
+	}`;
+	const stickyHeaderClasses = `ms3-sticky-header__header ${
+		isHeaderStuck
+			? "ms3-sticky-header__header--sticky-placeholder"
+			: "ms3-sticky-header__header--sticky"
+	}`;
+
+	return (
+		<Container className={stuckClass("ms3-sticky-header__container")}>
+			<div aria-hidden="true" className={stuckHeaderClasses}>
+				{header}
+			</div>
+
+			{renderWrapper({
+				ref: stickyScrollAreaRef,
+				className: stuckClass("ms3-sticky-header__scroll-area"),
+				onTouchMove: stopEventPropagation,
+				onScroll: onScroll,
+				children: (
+					<>
+						{close}
+						<div
+							className={stickyHeaderClasses}
+							ref={stickyHeaderRef}
+						>
+							{header}
+						</div>
+						{content}
+					</>
+				),
+			})}
+		</Container>
+	);
+}
+
+export default WithStickyHeader;

package/src/js/components/feature-selection-info/without-sticky-header.jsx

@@ -0,0 +1,19 @@
+import Container from "./container";
+
+function WithoutStickyHeader({renderWrapper, header, content, close}) {
+	return (
+		<Container>
+			{renderWrapper({
+				children: (
+					<>
+						{close}
+						{header}
+						{content}
+					</>
+				),
+			})}
+		</Container>
+	);
+}
+
+export default WithoutStickyHeader;

package/src/js/components/feature-selection-info/wrapper.jsx

@@ -0,0 +1,43 @@
+import {forwardRef, useEffect, useRef} from "react";
+
+import usePrevious from "../../hooks/usePrevious";
+
+function useAutofocus(enabled, ref, feature) {
+	const previousFeature = usePrevious(feature);
+	const previousRef = usePrevious(ref.current);
+
+	useEffect(() => {
+		if (!enabled || !feature || !ref.current) {
+			return;
+		}
+
+		// Autofocus on mount or if feature is selected
+		if (
+			feature &&
+			(ref.current !== previousRef || feature !== previousFeature)
+		) {
+			//ref.current.scrollIntoView({block: 'start', behavior: 'smooth'});
+			ref.current.focus({preventScroll: true});
+		}
+	}, [enabled, feature, previousFeature, previousRef, ref]);
+}
+
+const Wrapper = forwardRef(function Wrapper(
+	{enableKeyboardControl, feature, className = "", ...attrs},
+	forwardedRef,
+) {
+	const ownRef = useRef();
+	const ref = forwardedRef || ownRef;
+	useAutofocus(enableKeyboardControl, ref, feature);
+
+	return (
+		<div
+			ref={ref}
+			className={`ms3-feature-selection-info__wrapper ms3-scroll-target ${className}`}
+			tabIndex={enableKeyboardControl ? -1 : undefined}
+			{...attrs}
+		/>
+	);
+});
+
+export default Wrapper;

package/src/js/components/helping/app-channel.tsx

@@ -0,0 +1,99 @@
+import {
+	type ReactNode,
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+} from "react";
+
+import type {AppChannelListenerDefinition} from "../../types";
+
+/**
+ * App-wide event channel
+ */
+const AppChannelContext = createContext<EventTarget | null>(null);
+AppChannelContext.displayName = "AppChannelContext";
+
+export const APP_EVENT_PARTIAL_CONTENT_CHANGED = "partialContentChanged";
+export const APP_EVENT_FOCUS_MAP = "focusMap";
+export const APP_EVENT_FOCUS_FEATURE_LIST = "focusFeatureList";
+export const APP_EVENT_SCROLL_TO_MAP = "scrollToMap";
+export const APP_EVENT_SCROLL_TO_FEATURE_LIST = "scrollToFeatureList";
+
+/**
+ * @returns {EventTarget} app channel
+ */
+function createAppChannel() {
+	return new EventTarget();
+}
+
+export function AppChannelProvider({
+	children,
+	listeners = [],
+}: {
+	children?: ReactNode;
+	listeners?: AppChannelListenerDefinition[];
+}) {
+	const appChannel = useMemo(() => createAppChannel(), []);
+
+	useEffect(() => {
+		listeners.forEach(([eventName, eventListener]) => {
+			appChannel.addEventListener(eventName, eventListener);
+		});
+
+		return () => {
+			listeners.forEach(([eventName, eventListener]) => {
+				appChannel.removeEventListener(eventName, eventListener);
+			});
+		};
+	}, [appChannel, listeners]);
+
+	return (
+		<AppChannelContext.Provider value={appChannel}>
+			{children}
+		</AppChannelContext.Provider>
+	);
+}
+
+/**
+ * App-wide event channel
+ *
+ * @returns {EventTarget} app channel
+ */
+function useAppChannel() {
+	return useContext(AppChannelContext);
+}
+
+/**
+ * @returns {(Event) => void} dispatch function for the app channel
+ */
+export function useAppChannelDispatchEvent() {
+	const appChannel = useAppChannel();
+
+	return useCallback(
+		(event) => {
+			console.info("@mapsight/ui: app channel event", event.type, event);
+			appChannel?.dispatchEvent(event);
+		},
+		[appChannel],
+	);
+}
+
+/**
+ * Adds and removes event listener to the app channel
+ *
+ * @param {string} event event name
+ * @param {EventListener} eventListener event listener
+ */
+export function useAppChannelEventListener(event, eventListener) {
+	const appChannel = useAppChannel();
+
+	useEffect(() => {
+		appChannel?.addEventListener(event, eventListener);
+
+		return () => {
+			appChannel?.removeEventListener(event, eventListener);
+		};
+	}, [appChannel, event, eventListener]);
+}

package/src/js/components/helping/app-context.tsx

@@ -0,0 +1,32 @@
+import {Provider as ReduxProvider} from "react-redux";
+
+import type {Store} from "redux";
+
+import type {MapsightUiComponents} from "../../helpers/components";
+import {ComponentsContext} from "../../helpers/components";
+import type {AppChannelListenerDefinition} from "../../types";
+import {AppChannelProvider} from "./app-channel";
+
+function AppContext({
+	store,
+	components = {},
+	appChannelListeners = [],
+	children,
+}: {
+	store: Store;
+	components?: MapsightUiComponents;
+	appChannelListeners?: AppChannelListenerDefinition[];
+	children?: React.ReactNode;
+}) {
+	return (
+		<ReduxProvider store={store}>
+			<AppChannelProvider listeners={appChannelListeners}>
+				<ComponentsContext.Provider value={components}>
+					{children}
+				</ComponentsContext.Provider>
+			</AppChannelProvider>
+		</ReduxProvider>
+	);
+}
+
+export default AppContext;