microboard-ui-temp 0.0.3

package/src/features/ShareModal/SearchInput.module.css

@@ -0,0 +1,188 @@
+.input {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 4px;
+	font-size: 14px;
+	padding-left: 40px;
+	cursor: text;
+	transition:
+		border 0.3s ease,
+		outline 0.5s ease;
+	max-height: 94px;
+	overflow-y: auto;
+}
+
+.inputWrapper {
+	border: 1px solid #dee0e3;
+	border-radius: 12px;
+	padding: 10px 5px;
+	overflow: hidden;
+}
+
+.nativeInput {
+	resize: none;
+	outline: none;
+	flex-grow: 1;
+	overflow: hidden;
+	font-size: 14px;
+	font-family: Manrope;
+	font-weight: 400;
+	display: flex;
+	align-items: center;
+	line-height: 22px;
+}
+
+.nativeInput::placeholder {
+	font-size: 14px;
+	font-family: Manrope;
+	font-weight: 400;
+	color: rgba(13, 17, 38, 0.4);
+}
+
+.wrapper {
+	max-width: 100%;
+	position: relative;
+}
+
+.item {
+	background-color: #e9eaec;
+	border: 1px solid rgba(10, 15, 41, 0.08);
+	border-radius: 6px;
+	font-size: 12px;
+	font-weight: 500;
+	padding: 2px 6px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 3px;
+	cursor: pointer;
+	transition: 0.3s;
+}
+
+.icon {
+	position: absolute;
+	left: 12px;
+	top: 12px;
+	color: rgba(13, 17, 38, 0.4);
+}
+
+.optionsListContainer {
+	position: absolute;
+	box-shadow:
+		0px 10px 16px -3px rgba(20, 21, 26, 0.08),
+		0px 3px 6px -2px rgba(20, 21, 26, 0.05);
+	background-color: #fff;
+	border-radius: 12px;
+	border: 1px solid #dee0e3;
+	z-index: 1000;
+	padding-right: 2px;
+	padding-left: 2px;
+	max-height: 224px;
+	overflow: hidden;
+}
+
+.optionsListWrapper {
+	padding: 6px;
+	max-height: 224px;
+	overflow-y: auto;
+}
+
+.input::-webkit-scrollbar,
+.optionsListWrapper::-webkit-scrollbar {
+	appearance: none;
+	width: 3px;
+}
+
+.input::-webkit-scrollbar-button,
+.optionsListWrapper::-webkit-scrollbar-button {
+	display: none;
+}
+
+.input::-webkit-scrollbar-thumb,
+.optionsListWrapper::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 2px;
+}
+
+.optionsList {
+	display: flex;
+	flex-direction: column;
+	list-style: none;
+	gap: 2px;
+	max-height: 100%;
+}
+
+.optionWrapper {
+	display: flex;
+	justify-content: stretch;
+	align-items: center;
+	padding: 0;
+	margin: 0;
+}
+
+.optionBtn {
+	display: flex;
+	align-items: center;
+	flex: 1 0;
+	padding: 6px;
+	cursor: pointer;
+	transition:
+		background 0.3s ease,
+		transform 0.3s ease;
+	gap: 8px;
+	border-radius: 6px;
+	padding-right: 30px;
+	position: relative;
+}
+
+@media screen and (hover: hover) {
+	.optionBtn:hover {
+		background-color: rgba(10, 15, 41, 0.04);
+	}
+}
+
+.optionBtn.highlighted {
+	background-color: rgba(10, 15, 41, 0.04);
+	transform: scale(1.01);
+}
+
+.optionBtn.selected {
+	background-color: rgba(10, 15, 41, 0.04);
+}
+
+.optionIcon {
+	position: static;
+	left: auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.optionText {
+	position: static;
+	left: auto;
+	font-size: 14px;
+	font-weight: 400;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.notFound {
+	text-align: center;
+	padding: 6px;
+	font-size: 14px;
+	color: rgba(13, 17, 38, 0.4);
+}
+
+.inputFocused {
+	border: 1px solid rgb(176, 140, 234);
+	box-shadow: 0px 0px 0px 2px rgba(200, 178, 255, 0.5);
+}
+
+.valueHighlight {
+	background-color: rgb(237, 253, 244);
+}

package/src/features/ShareModal/SearchInput.tsx

@@ -0,0 +1,441 @@
+import { Icon } from "shared/ui-lib/Icon";
+import { TopFade } from "shared/ui-lib/Transitions/TopFade";
+import React, {
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+	type ChangeEventHandler,
+	type ClipboardEventHandler,
+	type FocusEventHandler,
+	type MouseEventHandler,
+	type ReactNode,
+	type SyntheticEvent,
+} from "react";
+import { createPortal } from "react-dom";
+import styles from "./SearchInput.module.css";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import isEmail from "validator/lib/isEmail";
+import { validateItemsMap } from "microboard-temp";
+
+export type SearchOption = {
+	value: string;
+	label: string;
+	icon?: ReactNode;
+};
+
+type Props = {
+	onInput: (value: string) => void;
+	options: SearchOption[];
+	onValuesChange: (values: string[], currValue: string) => void;
+	addedEmails?: string[];
+	isLoading?: boolean;
+	placeholder?: string;
+	excludeValues?: string[];
+};
+
+export function SearchInput({
+	onInput,
+	options,
+	onValuesChange,
+	isLoading,
+	placeholder,
+	excludeValues = [],
+	addedEmails = [],
+}: Props) {
+	const { t } = useTranslation();
+	const [addedValues, setAddedValues] = useState<string[]>(addedEmails);
+	const [currValue, setCurrValue] = useState("");
+	const [isFocused, setIsFocused] = useState(false);
+	const inputRef = useRef<HTMLDivElement>(null);
+	const htmlInputRef = useRef<HTMLTextAreaElement>(null);
+	const [highlightedIndex, setHighlightedIndex] = useState<number | null>(
+		null,
+	);
+	const [optionsListPosition, setOptionsListPosition] = useState<
+		Record<"top" | "left" | "width", number>
+	>({ left: 0, top: 0, width: 0 });
+	const [inputWidth, setInputWidth] = useState(20);
+	const [maxWidth, setMaxWidth] = useState<number>(0);
+	const [highlightedValueIdx, setHighlightedValueIdx] = useState<
+		number | null
+	>(null);
+
+	const filteredOptions = options.filter(
+		op => !addedValues.includes(op.value),
+	);
+
+	const calcOptionsListPosition = () => {
+		const inputRect = inputRef.current?.getBoundingClientRect();
+		if (!inputRect) {
+			return;
+		}
+		setOptionsListPosition({
+			top: inputRect.bottom + 12,
+			left: inputRect.left,
+			width: inputRect.width,
+		});
+	};
+
+	useEffect(() => {
+		htmlInputRef.current?.focus();
+	}, []);
+
+	const handleFocus: FocusEventHandler = () => {
+		if (isFocused) {
+			return;
+		}
+		setIsFocused(true);
+		onInput(currValue);
+	};
+
+	const handleBlur: FocusEventHandler = () => {
+		setIsFocused(false);
+	};
+
+	const handleInputClick: MouseEventHandler = ev => {
+		ev.stopPropagation();
+		if (isFocused) {
+			return;
+		}
+		htmlInputRef.current?.focus();
+	};
+
+	const scrollInputToBottom = () => {
+		setTimeout(() => {
+			if (!inputRef.current) {
+				return;
+			}
+			inputRef.current.scrollTo({ top: inputRef.current.scrollHeight });
+		}, 0);
+	};
+
+	useLayoutEffect(() => {
+		calcOptionsListPosition();
+	}, [isFocused, filteredOptions.length]);
+
+	useEffect(() => {
+		options.forEach(option => {
+			const value = option.value;
+			const isExistsInOptions = isEmail(value.trim());
+			const isValidInputValue =
+				value.trim() && isExistsInOptions && highlightedIndex === null;
+			if (isValidInputValue) {
+				addValue(value.trim());
+			}
+		});
+
+		const observer = new ResizeObserver(nodes => {
+			nodes.forEach(node => {
+				if (node.target === inputRef.current) {
+					const size = node.borderBoxSize[0];
+					if (size) {
+						setOptionsListPosition(prev => ({
+							...prev,
+							width: size.inlineSize,
+						}));
+					}
+					const contentSize = node.contentBoxSize[0];
+					if (contentSize) {
+						setMaxWidth(contentSize.inlineSize);
+					}
+				}
+			});
+		});
+
+		if (inputRef.current) {
+			observer.observe(inputRef.current);
+		}
+
+		return () => observer.disconnect();
+	}, []);
+
+	const calcInputSize = (text: string) => {
+		if (!htmlInputRef.current) {
+			return;
+		}
+		htmlInputRef.current.style.height = "auto";
+		htmlInputRef.current.style.height = `${htmlInputRef.current.scrollHeight}px`;
+		const span = document.createElement("span");
+		span.style.visibility = "hidden";
+		span.style.whiteSpace = "pre";
+		span.style.font = window.getComputedStyle(htmlInputRef.current).font;
+		span.textContent = text || " ";
+		document.body.appendChild(span);
+		setInputWidth(
+			span.offsetWidth >= maxWidth ? maxWidth : span.offsetWidth,
+		);
+
+		document.body.removeChild(span);
+		calcOptionsListPosition();
+	};
+
+	const handleInput: ChangeEventHandler<HTMLTextAreaElement> = ev => {
+		const text = ev.target.value;
+		setHighlightedIndex(null);
+		setCurrValue(text);
+		onInput(text);
+		calcInputSize(text);
+	};
+
+	const stopPropagation = (evt: SyntheticEvent) => {
+		evt.stopPropagation();
+	};
+
+	const preventDefault = (evt: SyntheticEvent) => {
+		evt.stopPropagation();
+		evt.preventDefault();
+	};
+
+	const addValue = (currValue: string) => {
+		const addedValueIdx = addedValues.findIndex(
+			val => val === currValue.trim(),
+		);
+		const isExcludedValue = excludeValues.includes(currValue);
+		if (isExcludedValue) {
+			onValuesChange(addedValues, currValue);
+			return;
+		}
+
+		if (addedValueIdx >= 0) {
+			setHighlightedValueIdx(addedValueIdx);
+			setTimeout(() => {
+				setHighlightedValueIdx(null);
+			}, 3000);
+			return;
+		}
+		const values = [...addedValues, currValue];
+		onValuesChange(values, currValue);
+		setAddedValues(values);
+		setCurrValue("");
+		calcInputSize("");
+		scrollInputToBottom();
+	};
+
+	const handleKeyPress = (evt: React.KeyboardEvent) => {
+		evt.stopPropagation();
+		switch (evt.key) {
+			case "Enter":
+			case " ": {
+				evt.preventDefault();
+				const isExistsInOptions = isEmail(currValue.trim());
+				const isValidInputValue =
+					currValue.trim() &&
+					isExistsInOptions &&
+					highlightedIndex === null;
+
+				if (isValidInputValue) {
+					addValue(currValue.trim());
+				}
+
+				if (!isExistsInOptions) {
+					setCurrValue("");
+					calcInputSize("");
+				}
+
+				if (highlightedIndex !== null) {
+					const highlightedValue =
+						filteredOptions[highlightedIndex].value;
+					addValue(highlightedValue);
+					setHighlightedIndex(null);
+				}
+				break;
+			}
+			case "Backspace": {
+				if (!currValue) {
+					setAddedValues(prev => {
+						const newValues = prev.slice(0, -1);
+						onValuesChange(newValues, currValue);
+						return newValues;
+					});
+					calcInputSize("");
+					scrollInputToBottom();
+				}
+				break;
+			}
+			case "Escape": {
+				evt.stopPropagation();
+				if (isFocused) {
+					htmlInputRef.current?.blur();
+				}
+				break;
+			}
+			case "ArrowDown": {
+				setHighlightedIndex(prev => {
+					if (prev === null || prev === filteredOptions.length - 1) {
+						return 0;
+					}
+					return prev + 1;
+				});
+				break;
+			}
+			case "ArrowUp": {
+				setHighlightedIndex(prev => {
+					if (prev === null) {
+						return filteredOptions.length - 1;
+					}
+					if (prev === 0) {
+						return null;
+					}
+					return prev - 1;
+				});
+				break;
+			}
+		}
+	};
+
+	const handlePaste: ClipboardEventHandler = evt => {
+		evt.stopPropagation();
+		const data = evt.clipboardData.getData("text/plain");
+		try {
+			const itemsObj = JSON.parse(data);
+			const isDataValid = validateItemsMap(itemsObj);
+			if (isDataValid) {
+				evt.preventDefault();
+			}
+		} catch {}
+	};
+
+	const handleOptionClick =
+		(opt: SearchOption): MouseEventHandler =>
+		ev => {
+			ev.preventDefault();
+			ev.stopPropagation();
+			const values = [...addedValues, opt.value.trim()];
+			setAddedValues(values);
+			onValuesChange(values, currValue);
+			setCurrValue("");
+			calcInputSize("");
+			scrollInputToBottom();
+		};
+
+	const handleAddedValueClick =
+		(val: string): MouseEventHandler =>
+		ev => {
+			ev.stopPropagation();
+			ev.preventDefault();
+
+			setAddedValues(prev => prev.filter(item => item !== val));
+			onValuesChange(
+				addedValues.filter(item => item !== val),
+				currValue,
+			);
+			calcInputSize("");
+			scrollInputToBottom();
+		};
+
+	return (
+		<div className={styles.wrapper} onClick={stopPropagation}>
+			<div className={styles.icon}>
+				<Icon width={20} height={20} iconName="People" />
+			</div>
+			<div
+				className={clsx(
+					styles.inputWrapper,
+					isFocused && styles.inputFocused,
+				)}
+			>
+				<div
+					ref={inputRef}
+					className={styles.input}
+					onClick={handleInputClick}
+					onPointerDown={stopPropagation}
+					onPointerUp={stopPropagation}
+				>
+					{addedValues.map((val, idx) => (
+						<div
+							className={clsx(
+								styles.item,
+								highlightedValueIdx === idx &&
+									styles.valueHighlight,
+							)}
+							key={val}
+							onClick={handleAddedValueClick(val)}
+						>
+							<span>{val}</span>
+							<Icon width={14} height={14} iconName="Close" />
+						</div>
+					))}
+					<textarea
+						rows={1}
+						className={styles.nativeInput}
+						onFocus={handleFocus}
+						onBlur={handleBlur}
+						onChange={handleInput}
+						onKeyDown={handleKeyPress}
+						onKeyUp={stopPropagation}
+						onKeyPress={stopPropagation}
+						onPaste={handlePaste}
+						value={currValue}
+						ref={htmlInputRef}
+						style={{ width: inputWidth }}
+						placeholder={
+							addedValues.length === 0 ? placeholder : ""
+						}
+					/>
+				</div>
+			</div>
+			{/* {createPortal(
+				<TopFade inProp={isFocused} unmountOnExit>
+					<div
+						onClick={preventDefault}
+						style={optionsListPosition}
+						className={styles.optionsListContainer}
+					>
+						<div className={styles.optionsListWrapper}>
+							{isLoading && (
+								<p className={styles.notFound}>
+									{t("common.loading")}
+								</p>
+							)}
+							{!isLoading &&
+								(filteredOptions.length > 0 ? (
+									<ul className={styles.optionsList}>
+										{filteredOptions.map((opt, idx) => (
+											<li
+												className={styles.optionWrapper}
+												key={opt.value}
+											>
+												<button
+													onClick={handleOptionClick(
+														opt,
+													)}
+													className={clsx(
+														styles.optionBtn,
+														idx ===
+															highlightedIndex &&
+															styles.highlighted,
+													)}
+												>
+													<span
+														className={
+															styles.optionIcon
+														}
+													>
+														{opt.icon}
+													</span>
+													<span
+														className={
+															styles.optionText
+														}
+													>
+														{opt.label}
+													</span>
+												</button>
+											</li>
+										))}
+									</ul>
+								) : (
+									<p className={styles.notFound}>
+										{t("common.notFound")}
+									</p>
+								))}
+						</div>
+					</div>
+				</TopFade>,
+				document.getElementById("selector")!,
+			)} */}
+		</div>
+	);
+}