@talixo-ds/options-input 1.0.6 → 1.0.7

package/src/components/options-input-dropdown-item.tsx

@@ -1,161 +0,0 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import ButtonGroup from "@mui/material/ButtonGroup";
-import Divider from "@mui/material/Divider";
-import TextField from "@mui/material/TextField";
-import ListItem from "@mui/material/ListItem";
-import Button from "@mui/material/Button";
-import AddIcon from "@mui/icons-material/Add";
-import RemoveIcon from "@mui/icons-material/Remove";
-import * as DesignSystemIcons from "@talixo-ds/icons";
-import { MinMaxValueLabel } from "./min-max-value-label";
-import { capitalize } from "../utils";
-import type { OptionsInputOption } from "../types";
-
-export type OptionsInputDropdownItemProps = {
-	item: OptionsInputOption;
-	onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
-	onChange: (id: string, value: number | string) => void;
-	index: number;
-	displayMinMax?: boolean;
-	error?: boolean;
-};
-
-const OptionsInputDropdownItem = ({
-	item: { id, quantity = 0, label, max, min, icon, details, inputQuantity },
-	onChange,
-	onBlur,
-	index,
-	displayMinMax,
-	error = false
-}: OptionsInputDropdownItemProps) => {
-	const [shouldDisplayFullDetails, setShouldDisplayFullDetails] =
-		useState<boolean>(false);
-	const Icon =
-		DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;
-
-	const onIncrement = (inputId: string) => () => {
-		const isValueBelowMin = !!(min && quantity < min);
-
-		onChange(inputId, (isValueBelowMin ? min : quantity + 1)!);
-	};
-
-	const onDecrement = (inputId: string) => () => {
-		const isValueAboveMax = !!(max && quantity > max);
-
-		return onChange(inputId, (isValueAboveMax ? max : quantity - 1)!);
-	};
-
-	return (
-		<>
-			{!!index && (
-				<Divider sx={{ color: (theme) => theme.palette.primary.main }} />
-			)}
-			<ListItem
-				sx={{
-					display: "flex",
-					justifyContent: "space-between"
-				}}
-				className={classNames("options-input__dropdown-item", {
-					"options-input__dropdown-item--empty": !quantity
-				})}
-			>
-				<Box display="flex" alignItems="center">
-					<Icon fontSize="small" sx={{ color: "black" }} />
-					<TextField
-						onChange={({ target }) => onChange(id, target.value)}
-						onBlur={onBlur}
-						value={inputQuantity}
-						variant="standard"
-						inputProps={{
-							inputMode: "numeric",
-							pattern: "-?[0-9]*",
-							style: {
-								textAlign: "center"
-							},
-							"data-testid": "dropdown-item-input"
-						}}
-						// eslint-disable-next-line react/jsx-no-duplicate-props
-						InputProps={{ disableUnderline: true }}
-						className="options-input__dropdown-item-input"
-					/>
-					<Box
-						display="flex"
-						flexDirection="column"
-						justifyContent="center"
-						paddingRight={2}
-						paddingLeft={1}
-						minWidth="5rem"
-					>
-						<Typography
-							variant="caption"
-							fontWeight={600}
-							fontSize={13}
-							sx={{ my: 0 }}
-							color="black"
-						>
-							{label || id}
-						</Typography>
-						{details && (
-							<Box
-								position="relative"
-								height="1rem"
-								data-testid="option-details-container"
-								onMouseEnter={() => setShouldDisplayFullDetails(true)}
-								onMouseLeave={() => setShouldDisplayFullDetails(false)}
-							>
-								<Typography
-									variant="caption"
-									color="gray"
-									sx={{
-										my: 0,
-										zIndex: 10000,
-										position: "fixed",
-										...(shouldDisplayFullDetails && {
-											backgroundColor: quantity ? "#ffffff" : "#eeeeee",
-											border: "thin solid #d3d3d3"
-										})
-									}}
-									data-testid="option-details"
-								>
-									{details?.length <= 15 || shouldDisplayFullDetails
-										? details
-										: `${details?.slice(0, 15)}...`}
-								</Typography>
-							</Box>
-						)}
-						{displayMinMax && <MinMaxValueLabel min={min} max={max} color="gray" />}
-					</Box>
-				</Box>
-				<ButtonGroup
-					variant="outlined"
-					size="small"
-					className="options-input__dropdown-item-buttons"
-				>
-					<Button
-						onClick={onIncrement(id)}
-						disabled={!!(max && quantity && quantity >= max)}
-						className="options-input__dropdown-item-button"
-						role="button"
-						color={error ? "error" : "primary"}
-					>
-						<AddIcon sx={{ color: error ? "black" : "primary" }} />
-					</Button>
-					<Button
-						onClick={onDecrement(id)}
-						disabled={!!(quantity && min) && quantity <= min}
-						className="options-input__dropdown-item-button"
-						role="button"
-						color={error ? "error" : "primary"}
-					>
-						<RemoveIcon sx={{ color: error ? "black" : "primary" }} />
-					</Button>
-				</ButtonGroup>
-			</ListItem>
-		</>
-	);
-};
-
-export default OptionsInputDropdownItem;

package/src/index.ts

@@ -1,2 +0,0 @@
-export { OptionsInput } from "./options-input";
-export type { OptionsInputProps } from "./options-input";

package/src/options-input.tsx

@@ -1,353 +0,0 @@
-import React, {
-	useState,
-	useEffect,
-	useCallback,
-	type ReactNode,
-	useMemo,
-	useRef
-} from "react";
-import classNames from "classnames";
-import Box from "@mui/material/Box";
-import List from "@mui/material/List";
-import Popper from "@mui/material/Popper";
-import ClickAwayListener from "@mui/material/ClickAwayListener";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import * as DesignSystemIcons from "@talixo-ds/icons";
-import type { SxProps } from "@mui/material";
-import type { OptionsInputOption, OptionsInputValue } from "./types";
-import OptionsInputContentItem from "./components/options-input-content-item";
-import OptionsInputDropdownItem from "./components/options-input-dropdown-item";
-import { red } from "@mui/material/colors";
-import "./styles.scss";
-
-import "@emotion/react";
-import "@emotion/styled";
-import { capitalize } from "./utils";
-
-export type OptionsInputProps = {
-	/** Array of objects representing options available to choose from */
-	options: OptionsInputOption[];
-	/** Object with default values of some options */
-	defaultValue?: OptionsInputValue;
-	/** Array with ids of options which should remain displayed even if value is 0 */
-	persistentOptions?: string[];
-	/** Boolean to determine if input is disabled */
-	disabled?: boolean;
-	/** Boolean to determine if input is readOnly */
-	readOnly?: boolean;
-	/** Boolean to determine if min and max input values should be displayed */
-	displayMinMax?: boolean;
-	/** Function which handles options input value change */
-	onChange?: (OptionsInputValue: OptionsInputValue) => void;
-	/** Function which handles options input focus event */
-	onFocus?: (OptionsInputValue: OptionsInputValue) => void;
-	/** Function which handles options input blur event */
-	onBlur?: (OptionsInputValue: OptionsInputValue) => void;
-	/** className attached to an input container */
-	className?: string;
-	/** id attached to an input container */
-	id?: string;
-	/** data test id attached to an input container */
-	"data-testid"?: string;
-	/** Gap between input items */
-	itemsGap?: string | number;
-	/** Custom styles for container */
-	containerSx?: SxProps;
-	/** Flag indicating if there is an validation error */
-	error?: boolean;
-	/** Additional content displayed with small font under the input */
-	helperText?: ReactNode;
-	/** Custom styles for helper text container */
-	helperTextSx?: SxProps;
-};
-
-export const OptionsInput = ({
-	options,
-	onChange,
-	onFocus,
-	onBlur,
-	persistentOptions = [],
-	defaultValue,
-	displayMinMax = false,
-	disabled = false,
-	readOnly = false,
-	id,
-	className,
-	itemsGap = 1,
-	containerSx = [],
-	error = false,
-	helperText,
-	helperTextSx,
-	...rest
-}: OptionsInputProps) => {
-	const [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);
-	const [inputContainerWidth, setInputContainerWidth] = useState(0);
-	const inputContainerRef = useRef<HTMLElement>();
-	const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();
-	const open = !!anchorEl;
-
-	useEffect(
-		() =>
-			setCurrentOptions(
-				options.map((option) => {
-					const quantity = defaultValue?.[option.id] ?? 0;
-
-					return {
-						...option,
-						quantity,
-						inputQuantity: quantity
-					};
-				})
-			),
-		[options, defaultValue]
-	);
-
-	useEffect(() => {
-		setInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);
-	}, [inputContainerRef?.current?.clientWidth]);
-
-	const optionsExceedingBoundaries = useMemo(
-		() =>
-			currentOptions.reduce((exceedingOptions, { quantity, id, label }) => {
-				const option = options.find((option) => option.id === id);
-
-				if (
-					label &&
-					quantity !== undefined &&
-					((option?.max !== undefined && option?.max < quantity) ||
-						(option?.min !== undefined && option?.min > quantity))
-				) {
-					return [...exceedingOptions, label];
-				}
-
-				return exceedingOptions;
-			}, [] as string[]),
-		[currentOptions, options]
-	);
-
-	const isError = useMemo(
-		() => error || !!optionsExceedingBoundaries.length,
-		[error, optionsExceedingBoundaries]
-	);
-
-	const toggleInput = useCallback(
-		(event: React.MouseEvent<HTMLElement>) => {
-			const { currentTarget } = event;
-
-			if (!disabled && !readOnly) {
-				setTimeout(() => {
-					setAnchorEl((currentAnchor) =>
-						currentAnchor ? undefined : currentTarget
-					);
-				}, 0);
-			}
-		},
-		[disabled, readOnly, setAnchorEl]
-	);
-
-	const onInputFocus = () => {
-		if (onFocus) {
-			onFocus(
-				currentOptions.reduce(
-					(currentValues, currentOption) => ({
-						...currentValues,
-						[currentOption.id]: currentOption.quantity
-					}),
-					{}
-				) as OptionsInputValue
-			);
-		}
-	};
-
-	const onInputBlur = () => {
-		if (onBlur) {
-			onBlur(
-				currentOptions.reduce(
-					(currentValues, currentOption) => ({
-						...currentValues,
-						[currentOption.id]: currentOption.quantity
-					}),
-					{}
-				) as OptionsInputValue
-			);
-		}
-	};
-
-	const onValueChange = (optionId: string, newValue: string | number) => {
-		const newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);
-
-		const newCurrentOptions = currentOptions.map((option) => {
-			const maxQuantity =
-				newQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;
-
-			return {
-				...option,
-				...(optionId === option.id && {
-					quantity:
-						newQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,
-					inputQuantity: newValue
-				})
-			};
-		});
-
-		if (onChange) {
-			onChange(
-				newCurrentOptions.reduce(
-					(currentValues, currentOption) => ({
-						...currentValues,
-						[currentOption.id]: currentOption.quantity
-					}),
-					{}
-				) as OptionsInputValue
-			);
-		}
-
-		setCurrentOptions(newCurrentOptions);
-	};
-
-	const onDropdownItemBlur = (optionId: string) => () =>
-		setCurrentOptions(
-			currentOptions.map((option) => {
-				if (optionId !== option.id) return option;
-
-				const finalQuantity = Number.isNaN(Number(option?.inputQuantity))
-					? 0
-					: Number(option?.inputQuantity);
-				const maxQuantity =
-					finalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;
-
-				return {
-					...option,
-					inputQuantity:
-						finalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity
-				};
-			})
-		);
-
-	return (
-		<>
-			<Box>
-				<Box
-					id={id}
-					onClick={toggleInput}
-					onBlur={onInputBlur}
-					onFocus={onInputFocus}
-					ref={inputContainerRef}
-					className={classNames("options-input__container", className, {
-						"options-input__container--open": open,
-						"options-input__container--disabled": disabled,
-						"options-input__container--read-only": readOnly,
-						"options-input__container--error": isError
-					})}
-					sx={[
-						{ "&:hover": { borderColor: "#d3d3d3" } },
-						...(Array.isArray(containerSx) ? containerSx : [containerSx]),
-						open && {
-							borderColor: (theme) => theme.palette.primary.main,
-							"&:hover": { borderColor: (theme) => theme.palette.primary.main }
-						},
-						isError && {
-							borderColor: red[700],
-							"&:hover": { borderColor: red[700] }
-						}
-					]}
-					data-testid={rest["data-testid"] || "options-input-container"}
-					tabIndex={0}
-				>
-					<Box display="flex" gap={itemsGap}>
-						{currentOptions
-							.filter(
-								({ quantity, id: optionId, icon }) =>
-									!!(
-										DesignSystemIcons[
-											capitalize(icon) as keyof typeof DesignSystemIcons
-										] &&
-										(quantity !== 0 || persistentOptions?.includes(optionId))
-									)
-							)
-							.map((option) => (
-								<OptionsInputContentItem
-									key={option.id}
-									item={option}
-									disabled={disabled}
-									displayMinMax={displayMinMax}
-									error={
-										!!(option?.label && optionsExceedingBoundaries.includes(option.label))
-									}
-								/>
-							))}
-					</Box>
-					{!readOnly &&
-						(open ? (
-							<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : "primary" }} />
-						) : (
-							<KeyboardArrowDownIcon
-								sx={{
-									color: (theme) =>
-										disabled ? theme.palette.grey[400] : theme.palette.action.focus
-								}}
-							/>
-						))}
-				</Box>
-				{(helperText || isError) && (
-					<Box
-						sx={{
-							fontSize: "small",
-							...(helperTextSx || {}),
-							...(isError ? { color: red[700] } : {})
-						}}
-						marginTop={1}
-						marginLeft={2}
-						width={inputContainerWidth}
-					>
-						{optionsExceedingBoundaries.length
-							? (() => {
-									const messagePluralForm =
-										optionsExceedingBoundaries.length > 1 ? "s" : "";
-
-									return `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(", ")} option${messagePluralForm} ${messagePluralForm ? "are" : "is"} out of range.`;
-								})()
-							: helperText}
-					</Box>
-				)}
-			</Box>
-			<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>
-				<Popper
-					open={open}
-					placement="bottom-start"
-					anchorEl={anchorEl}
-					sx={(theme) => ({ zIndex: theme.zIndex.modal })}
-				>
-					<List
-						disablePadding
-						data-testid="options-dropdown-list"
-						className="options-input__dropdown-items-list"
-						sx={{
-							bgcolor: "Background",
-							border: (theme) =>
-								`thin solid ${isError ? red[700] : theme.palette.primary.main}`
-						}}
-					>
-						{currentOptions
-							.filter(
-								({ icon }) =>
-									!!DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons]
-							)
-							.map((option, index) => (
-								<OptionsInputDropdownItem
-									key={option.id}
-									item={option}
-									onBlur={onDropdownItemBlur(option.id)}
-									onChange={onValueChange}
-									index={index}
-									displayMinMax={displayMinMax}
-									error={isError}
-								/>
-							))}
-					</List>
-				</Popper>
-			</ClickAwayListener>
-		</>
-	);
-};

package/src/styles.scss

@@ -1,54 +0,0 @@
-.options-input {
-	&__container {
-		border: thin solid transparent;
-		border-radius: 0.25rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0.25rem;
-		gap: 1rem;
-		cursor: pointer;
-		width: fit-content;
-
-		&--open {
-			border-bottom-width: 0;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-
-		&--disabled {
-			cursor: unset;
-		}
-
-		&--read-only {
-			cursor: unset;
-
-			&:hover {
-				border-color: transparent;
-			}
-		}
-	}
-
-	&__dropdown-item {
-		gap: 1rem;
-
-		&--empty {
-			background-color: #eeeeee;
-		}
-	}
-
-	&__dropdown-item-input {
-		width: 2rem;
-	}
-
-	&__dropdown-item-buttons {
-		& > button[role="button"] {
-			min-width: 2rem;
-			padding: 0;
-
-			&[disabled] > svg {
-				color: #0000001f;
-			}
-		}
-	}
-}

package/src/types.ts

@@ -1,14 +0,0 @@
-export interface OptionsInputOption {
-	id: string;
-	icon: string;
-	label?: string;
-	details?: string;
-	min?: number;
-	max?: number;
-	quantity?: number;
-	inputQuantity?: string | number;
-}
-
-export interface OptionsInputValue {
-	[key: string]: number;
-}

package/src/utils.ts

@@ -1,2 +0,0 @@
-export const capitalize = (str: string) =>
-	str.charAt(0).toUpperCase() + str.slice(1);

package/tsconfig.build.json

@@ -1,8 +0,0 @@
-{
-	"extends": "../../tsconfig.json",
-	"compilerOptions": {
-		"outDir": "dist",
-		"baseUrl": "../.."
-	},
-	"exclude": ["src/**/__tests__/**"]
-}