@mapsight/ui 7.1.0 → 7.2.1

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

@@ -1,65 +0,0 @@
-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.tsx

@@ -1,55 +0,0 @@
-import type {HTMLAttributes} from "react";
-import {memo, useEffect, useMemo, useRef} from "react";
-import {useStore} from "react-redux";
-
-import type {EnhancedStore} from "@mapsight/core/types";
-
-import {MAP} from "../config/constants/controllers";
-import {translate} from "../helpers/i18n";
-import useMountable, {isMountable} from "../hooks/useMountable";
-
-type MapsightMapProps = HTMLAttributes<HTMLDivElement> & {
-	controllerName?: string;
-	enableKeyboardControl?: boolean;
-};
-
-function MapsightMap({
-	controllerName = MAP,
-	enableKeyboardControl = true,
-	...attributes
-}: MapsightMapProps) {
-	const store = useStore() as EnhancedStore;
-	const ref = useRef<HTMLDivElement>(null);
-
-	const mountable = useMemo(() => {
-		const controller = store.getController(controllerName);
-		if (!isMountable(controller)) {
-			console.error(`Controller '${controllerName}' is not mountable`);
-			return undefined;
-		}
-		return controller;
-	}, [store, controllerName]);
-	const handleMount = useMountable(mountable);
-	useEffect(() => {
-		if (ref.current) {
-			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

@@ -1,40 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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";
-import {searchQuerySelector} from "../../store/selectors";
-
-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

@@ -1,20 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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";
-
-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);

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

@@ -1,71 +0,0 @@
-import {memo} from "react";
-import {useSelector} from "react-redux";
-import getFeatureProperty from "../../helpers/get-feature-property";
-import {translate} from "../../helpers/i18n";
-
-import {
-	SEARCH_STATUS_EMPTY,
-	SEARCH_STATUS_ERROR,
-	SEARCH_STATUS_FOUND,
-	SEARCH_STATUS_LOADING,
-	searchResultFeaturesSelector,
-	searchStatusSelector,
-} from "../../store/selectors";
-
-import SearchResultEntry from "./result-entry";
-
-const defaultGroup = "__default__";
-
-function SearchResult({closeSearch, onReturnFocus}) {
-	const status = useSelector(searchStatusSelector);
-	const features = useSelector(searchResultFeaturesSelector);
-
-	const groupedEntries = {};
-	features.forEach((feature, i) => {
-		const group = getFeatureProperty(feature, "group") || defaultGroup;
-		groupedEntries[group] = groupedEntries[group] || [];
-		groupedEntries[group].push(
-			<SearchResultEntry
-				key={feature.id || i}
-				feature={feature}
-				closeSearch={closeSearch}
-				onReturnFocus={onReturnFocus}
-			/>,
-		);
-	});
-
-	return (
-		<div className={`ms3-search-result ms3-search-result--${status}`}>
-			{status === SEARCH_STATUS_ERROR && (
-				<p className="ms3-search-result__error">
-					{translate("ui.search.result.error")}
-				</p>
-			)}
-
-			{status === SEARCH_STATUS_EMPTY && (
-				<p className="ms3-search-result__empty-message">
-					{translate("ui.search.result.empty")}
-				</p>
-			)}
-
-			{(status === SEARCH_STATUS_FOUND ||
-				status === SEARCH_STATUS_LOADING) &&
-				features &&
-				Object.keys(groupedEntries).map((group) => (
-					<div className="ms3-search-result__group" key={group}>
-						{group && group !== defaultGroup ? (
-							<h4 className="ms3-search-result__group-head">
-								{group}
-							</h4>
-						) : null}
-
-						<ul className="ms3-search-result__list">
-							{groupedEntries[group]}
-						</ul>
-					</div>
-				))}
-		</div>
-	);
-}
-
-export default memo(SearchResult);

package/src/js/components/switcher/GroupedSwitcher.jsx

@@ -1,42 +0,0 @@
-import {Fragment, memo} from "react";
-
-import Switcher from "./Switcher";
-
-function GroupedSwitcher(props) {
-	const {
-		as: T = "div",
-		className = "ms3-grouped-switcher",
-		renderEntry,
-		renderHeader = undefined,
-		ungroupedIds = [],
-		groupedIds = {},
-		...attributes
-	} = props;
-
-	const children = Object.entries(groupedIds).map(([key, group]) => (
-		<Switcher
-			key={key}
-			ids={group}
-			group={key}
-			as={Fragment}
-			renderEntry={renderEntry}
-			renderHeader={renderHeader}
-		/>
-	));
-
-	return (
-		<T className={className} {...attributes}>
-			{ungroupedIds.length !== 0 && (
-				<Switcher
-					ids={ungroupedIds}
-					as={Fragment}
-					renderEntry={renderEntry}
-					renderHeader={renderHeader}
-				/>
-			)}
-			{children}
-		</T>
-	);
-}
-
-export default memo(GroupedSwitcher);

package/src/js/components/switcher/Switcher.jsx

@@ -1,54 +0,0 @@
-import {Fragment, memo} from "react";
-
-import SwitcherHeader from "./SwitcherHeader";
-
-const defaultRenderHeader = (label, props) => (
-	<SwitcherHeader label={label} {...props} />
-);
-
-function Switcher(props) {
-	const {
-		as: T = "div",
-		headlineAs = "h3",
-		entriesAs: V = "ul",
-		baseClass = "ms3-layer-switcher", // TODO: Move to generic class name
-		renderEntry,
-		renderHeader = defaultRenderHeader,
-		ids = [],
-		group = null,
-		headerAttributes: headerAttributes_ = {},
-		entriesAttributes: entriesAttributes_ = {},
-		...attributes
-	} = props;
-
-	const headerAttributes = {...headerAttributes_};
-	const entriesAttributes = {...entriesAttributes_};
-
-	attributes.className = `${baseClass} ${attributes.className || ""}`;
-	headerAttributes.className = `${baseClass}__header ${
-		headerAttributes.className || ""
-	}`;
-	entriesAttributes.className = `${baseClass}__entries ${
-		entriesAttributes.className || ""
-	}`;
-
-	if (group) {
-		attributes["data-ms3-switcher-group"] = group;
-		headerAttributes["data-ms3-switcher-header-group"] = group;
-		entriesAttributes["data-ms3-switcher-entries-group"] = group;
-	}
-
-	return (
-		<T {...(T === Fragment ? {} : attributes)}>
-			{group
-				? renderHeader(group, {as: headlineAs, ...headerAttributes})
-				: null}
-
-			<V {...entriesAttributes}>
-				{ids.map((id) => renderEntry(id, group))}
-			</V>
-		</T>
-	);
-}
-
-export default memo(Switcher);

package/src/js/components/switcher/SwitcherButton.jsx

@@ -1,23 +0,0 @@
-function SwitcherButton(props) {
-	const {
-		baseClass = "ms3-layer-switcher__button", // TODO: Use generic class name
-		children,
-		toggleActive,
-		status,
-		active,
-	} = props;
-
-	return (
-		<button
-			type="button"
-			role="checkbox"
-			aria-checked={active ? "true" : "false"}
-			className={`${baseClass} ${baseClass}--${status}`}
-			onClick={toggleActive}
-		>
-			{children}
-		</button>
-	);
-}
-
-export default SwitcherButton;