@talixo-ds/options-input 1.0.6 → 1.0.7

package/dist/options-input.js

@@ -1,140 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect, useCallback, 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 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 const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOptions = [], defaultValue, displayMinMax = false, disabled = false, readOnly = false, id, className, itemsGap = 1, containerSx = [], error = false, helperText, helperTextSx, ...rest }) => {
-    const [currentOptions, setCurrentOptions] = useState([]);
-    const [inputContainerWidth, setInputContainerWidth] = useState(0);
-    const inputContainerRef = useRef();
-    const [anchorEl, setAnchorEl] = useState();
-    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;
-    }, []), [currentOptions, options]);
-    const isError = useMemo(() => error || !!optionsExceedingBoundaries.length, [error, optionsExceedingBoundaries]);
-    const toggleInput = useCallback((event) => {
-        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
-            }), {}));
-        }
-    };
-    const onInputBlur = () => {
-        if (onBlur) {
-            onBlur(currentOptions.reduce((currentValues, currentOption) => ({
-                ...currentValues,
-                [currentOption.id]: currentOption.quantity
-            }), {}));
-        }
-    };
-    const onValueChange = (optionId, newValue) => {
-        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
-            }), {}));
-        }
-        setCurrentOptions(newCurrentOptions);
-    };
-    const onDropdownItemBlur = (optionId) => () => 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 (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsxs(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, children: [_jsx(Box, { display: "flex", gap: itemsGap, children: currentOptions
-                                    .filter(({ quantity, id: optionId, icon }) => !!(DesignSystemIcons[capitalize(icon)] &&
-                                    (quantity !== 0 || persistentOptions?.includes(optionId))))
-                                    .map((option) => (_jsx(OptionsInputContentItem, { item: option, disabled: disabled, displayMinMax: displayMinMax, error: !!(option?.label && optionsExceedingBoundaries.includes(option.label)) }, option.id))) }), !readOnly &&
-                                (open ? (_jsx(KeyboardArrowUpIcon, { sx: { color: isError ? red[700] : "primary" } })) : (_jsx(KeyboardArrowDownIcon, { sx: {
-                                        color: (theme) => disabled ? theme.palette.grey[400] : theme.palette.action.focus
-                                    } })))] }), (helperText || isError) && (_jsx(Box, { sx: {
-                            fontSize: "small",
-                            ...(helperTextSx || {}),
-                            ...(isError ? { color: red[700] } : {})
-                        }, marginTop: 1, marginLeft: 2, width: inputContainerWidth, children: optionsExceedingBoundaries.length
-                            ? (() => {
-                                const messagePluralForm = optionsExceedingBoundaries.length > 1 ? "s" : "";
-                                return `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(", ")} option${messagePluralForm} ${messagePluralForm ? "are" : "is"} out of range.`;
-                            })()
-                            : helperText }))] }), _jsx(ClickAwayListener, { onClickAway: () => open && setAnchorEl(undefined), children: _jsx(Popper, { open: open, placement: "bottom-start", anchorEl: anchorEl, sx: (theme) => ({ zIndex: theme.zIndex.modal }), children: _jsx(List, { disablePadding: true, "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}`
-                        }, children: currentOptions
-                            .filter(({ icon }) => !!DesignSystemIcons[capitalize(icon)])
-                            .map((option, index) => (_jsx(OptionsInputDropdownItem, { item: option, onBlur: onDropdownItemBlur(option.id), onChange: onValueChange, index: index, displayMinMax: displayMinMax, error: isError }, option.id))) }) }) })] }));
-};
-//# sourceMappingURL=options-input.js.map

package/dist/options-input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"options-input.js","sourceRoot":"","sources":["../src/options-input.tsx"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -1,13 +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/dist/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/utils.d.ts

@@ -1 +0,0 @@
-export declare const capitalize: (str: string) => string;

package/dist/utils.js

@@ -1,2 +0,0 @@
-export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CACzC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC"}

package/src/__tests__/options-input.spec.tsx

@@ -1,163 +0,0 @@
-import {
-	render,
-	screen,
-	fireEvent,
-	waitFor,
-	act
-} from "@testing-library/react";
-import { OptionsInput } from "../options-input";
-
-const props = {
-	options: [
-		{
-			id: "luggage",
-			icon: "luggage",
-			label: "luggage",
-			details: "This is your luggage",
-			min: 0,
-			max: 9
-		},
-		{
-			id: "dog",
-			icon: "this icon does not exist",
-			label: "dog",
-			min: 0,
-			max: 3
-		},
-		{
-			id: "sport-equipment",
-			icon: "football",
-			label: "sport equipment",
-			min: 0,
-			max: 1
-		}
-	],
-	id: "test-id",
-	defaultValue: { luggage: 2, "sport-equipment": 5 },
-	persistentOptions: ["sport-equipment"],
-	className: "test-class",
-	onChange: vi.fn(),
-	onFocus: vi.fn(),
-	onBlur: vi.fn()
-};
-
-describe("OptionsInput", () => {
-	it("should display invalid value error message for items with invalid value", () => {
-		const { queryByText } = render(<OptionsInput {...props} />);
-
-		expect(
-			queryByText("Value for sport equipment option is out of range.")
-		).toBeInTheDocument();
-	});
-
-	describe("events", () => {
-		it("should open input dropdown properly", async () => {
-			const { getAllByTestId } = render(<OptionsInput {...props} />);
-			const optionsInputContainer = getAllByTestId("options-input-container")[0];
-
-			act(() => {
-				fireEvent.click(optionsInputContainer!);
-			});
-
-			await waitFor(() => {
-				expect(screen.queryByTestId("options-dropdown-list")).toBeInTheDocument();
-			});
-		});
-
-		it("should not open dropdown when input is disabled", async () => {
-			const { getAllByTestId } = render(<OptionsInput {...props} disabled />);
-
-			const optionsInputContainer = getAllByTestId("options-input-container")[0];
-
-			act(() => {
-				fireEvent.click(optionsInputContainer!);
-			});
-
-			await waitFor(() => {
-				expect(
-					screen.queryByTestId("options-dropdown-list")
-				).not.toBeInTheDocument();
-			});
-		});
-
-		it("should handle input focus properly", () => {
-			const { getAllByTestId } = render(<OptionsInput {...props} />);
-
-			const optionsInputContainer = getAllByTestId("options-input-container")[0];
-
-			act(() => {
-				fireEvent.focus(optionsInputContainer!);
-			});
-
-			expect(props.onFocus).toHaveBeenCalledWith({
-				dog: 0,
-				luggage: 2,
-				"sport-equipment": 5
-			});
-		});
-
-		it("should handle input blur properly", () => {
-			const { getAllByTestId } = render(<OptionsInput {...props} />);
-
-			const optionsInputContainer = getAllByTestId("options-input-container")[0];
-
-			act(() => {
-				fireEvent.blur(optionsInputContainer!);
-			});
-
-			expect(props.onBlur).toHaveBeenCalledWith({
-				dog: 0,
-				luggage: 2,
-				"sport-equipment": 5
-			});
-		});
-
-		it("should handle input option change properly", async () => {
-			const { getByTestId } = render(<OptionsInput {...props} />);
-
-			const optionsInputContainer = getByTestId("options-input-container");
-
-			fireEvent.click(optionsInputContainer);
-
-			await waitFor(() => screen.findAllByTestId("dropdown-item-input"));
-
-			const optionCountInput = screen.getAllByTestId("dropdown-item-input")[0];
-
-			act(() => {
-				fireEvent.change(optionCountInput!, { target: { value: 9 } });
-			});
-
-			expect(props.onChange).toHaveBeenCalledWith({
-				dog: 0,
-				luggage: 9,
-				"sport-equipment": 5
-			});
-
-			expect(screen.getAllByTestId("option-item")[0]).toHaveTextContent("9");
-		});
-
-		it("should handle input option blur properly", async () => {
-			const { getAllByTestId } = render(<OptionsInput {...props} />);
-
-			const optionsInputContainer = getAllByTestId("options-input-container")[0];
-
-			fireEvent.click(optionsInputContainer!);
-
-			await waitFor(() => {
-				const optionCountInput = screen.getAllByTestId("dropdown-item-input")[0];
-
-				act(() => {
-					fireEvent.change(optionCountInput!, { target: { value: 500 } });
-				});
-
-				expect(optionCountInput).toHaveAttribute("value", "500");
-
-				act(() => {
-					fireEvent.blur(optionCountInput!);
-				});
-
-				expect(optionCountInput).toHaveAttribute("value", "9");
-			});
-		});
-	});
-});

package/src/__tests__/utils.spec.ts

@@ -1,12 +0,0 @@
-import { capitalize } from "../utils";
-
-test("capitalize util converts string properly", () => {
-	const example = "hello world";
-	const expected = "Hello world";
-
-	const result1 = capitalize(example);
-	expect(result1).toBe(expected);
-
-	const result2 = capitalize(expected);
-	expect(result2).toBe(expected);
-});

package/src/components/__tests__/min-max-value-label.spec.tsx

@@ -1,24 +0,0 @@
-import { render } from "@testing-library/react";
-import { MinMaxValueLabel } from "../min-max-value-label";
-
-describe("MinMaxValueLabel", () => {
-	it("should render with min value", () => {
-		const { queryByText } = render(<MinMaxValueLabel min={0} color="black" />);
-
-		expect(queryByText("min: 0")).toBeInTheDocument();
-	});
-
-	it("should render with max value", () => {
-		const { queryByText } = render(
-			<MinMaxValueLabel max={100} color={(theme) => theme.palette.primary.main} />
-		);
-
-		expect(queryByText("max: 100")).toBeInTheDocument();
-	});
-
-	it("should render with min and max value", () => {
-		const { queryByText } = render(<MinMaxValueLabel max={100} min={0} />);
-
-		expect(queryByText("min: 0, max: 100")).toBeInTheDocument();
-	});
-});

package/src/components/__tests__/options-input-content-item.spec.tsx

@@ -1,57 +0,0 @@
-import { fireEvent, render, waitFor } from "@testing-library/react";
-import OptionsInputContentItem, {
-	type OptionsInputContentItemProps
-} from "../options-input-content-item";
-
-const props = {
-	item: {
-		id: "luggage",
-		icon: "luggage",
-		label: "luggage",
-		details: "This is your luggage",
-		min: -10,
-		max: 10,
-		quantity: 0,
-		inputQuantity: 0
-	},
-	displayMinMax: true
-} satisfies OptionsInputContentItemProps;
-
-describe("OptionsInputDropdownItem", () => {
-	it("should render properly and show tooltip with proper content on hover", async () => {
-		const { queryByTestId, queryByText, getByTestId } = render(
-			<OptionsInputContentItem {...props} />
-		);
-
-		expect(queryByTestId("LuggageIcon")).toBeInTheDocument();
-		expect(queryByText("0")).toBeInTheDocument();
-
-		const icon = getByTestId("LuggageIcon");
-
-		fireEvent.mouseOver(icon);
-
-		await waitFor(() => {
-			expect(queryByText("This is your luggage")).toBeInTheDocument();
-			expect(queryByText("luggage")).toBeInTheDocument();
-		});
-	});
-
-	it("should not render tooltip when there is no label", async () => {
-		const { queryByTestId, queryByText, getByTestId } = render(
-			<OptionsInputContentItem
-				item={{ ...props.item, label: undefined, quantity: 1 }}
-			/>
-		);
-
-		expect(queryByTestId("LuggageIcon")).toBeInTheDocument();
-		expect(queryByText("1")).toBeInTheDocument();
-
-		const icon = getByTestId("LuggageIcon");
-
-		fireEvent.mouseOver(icon);
-
-		await waitFor(() => {
-			expect(queryByText("This is your luggage")).not.toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,126 +0,0 @@
-import { render, fireEvent } from "@testing-library/react";
-import OptionsInputDropdownItem, {
-	type OptionsInputDropdownItemProps
-} from "../options-input-dropdown-item";
-
-const onChangeMock = vi.fn();
-const onBlurMock = vi.fn();
-
-const props = {
-	item: {
-		id: "luggage-id",
-		icon: "luggage",
-		details: "This is your luggage. Please, keep your attention not to lose it.",
-		min: -10,
-		max: 10,
-		quantity: 0,
-		inputQuantity: 0
-	},
-	onBlur: onBlurMock,
-	onChange: onChangeMock,
-	index: 1
-} satisfies OptionsInputDropdownItemProps;
-
-describe("OptionsInputDropdownItem", () => {
-	afterEach(() => {
-		vi.clearAllMocks();
-	});
-
-	afterAll(() => {
-		vi.restoreAllMocks();
-	});
-
-	it("should call onChange on text field edit", () => {
-		const { getByTestId } = render(<OptionsInputDropdownItem {...props} />);
-
-		const input = getByTestId("dropdown-item-input");
-
-		fireEvent.change(input, { target: { value: "10" } });
-
-		expect(onChangeMock).toHaveBeenCalledTimes(1);
-		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", "10");
-
-		fireEvent.blur(input);
-		expect(onBlurMock).toHaveBeenCalledTimes(1);
-	});
-
-	it("should call onChange on increment button click", () => {
-		const { getAllByRole } = render(<OptionsInputDropdownItem {...props} />);
-
-		const buttons = getAllByRole("button");
-
-		fireEvent.click(buttons[0]!);
-
-		expect(onChangeMock).toHaveBeenCalledTimes(1);
-		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", 1);
-	});
-
-	it("should call onChange on increment button click when value is below min", () => {
-		const { getAllByRole } = render(
-			<OptionsInputDropdownItem
-				{...{
-					...props,
-					item: {
-						...props.item,
-						quantity: -20,
-						inputQuantity: -20
-					}
-				}}
-			/>
-		);
-
-		const buttons = getAllByRole("button");
-
-		fireEvent.click(buttons[0]!);
-
-		expect(onChangeMock).toHaveBeenCalledTimes(1);
-		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", -10);
-	});
-
-	it("should call onChange on decrement button click", () => {
-		const { getAllByRole } = render(<OptionsInputDropdownItem {...props} />);
-
-		const buttons = getAllByRole("button");
-
-		fireEvent.click(buttons[1]!);
-
-		expect(onChangeMock).toHaveBeenCalledTimes(1);
-		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", -1);
-	});
-
-	it("should call onChange on decrement button click when value is above max", () => {
-		const { getAllByRole } = render(
-			<OptionsInputDropdownItem
-				{...{
-					...props,
-					item: {
-						...props.item,
-						quantity: 20,
-						inputQuantity: 20
-					}
-				}}
-			/>
-		);
-
-		const buttons = getAllByRole("button");
-
-		fireEvent.click(buttons[1]!);
-
-		expect(onChangeMock).toHaveBeenCalledTimes(1);
-		expect(onChangeMock).toHaveBeenCalledWith("luggage-id", 10);
-	});
-
-	it("should expand details content", () => {
-		const { getByTestId } = render(<OptionsInputDropdownItem {...props} />);
-
-		expect(getByTestId("option-details")).toHaveTextContent(
-			props.item.details.slice(0, 15)
-		);
-
-		const optionDetailsContainer = getByTestId("option-details-container");
-
-		fireEvent.mouseEnter(optionDetailsContainer);
-
-		expect(getByTestId("option-details")).toHaveTextContent(props.item.details);
-	});
-});

package/src/components/min-max-value-label.tsx

@@ -1,19 +0,0 @@
-import Typography, { type TypographyProps } from "@mui/material/Typography";
-
-export type MinMaxValueLabelProps = {
-	min?: number;
-	max?: number;
-	color?: TypographyProps["color"];
-};
-
-export const MinMaxValueLabel = ({
-	min,
-	max,
-	color
-}: MinMaxValueLabelProps) => (
-	<Typography variant="caption" color={color} sx={{ my: 0 }}>
-		{!Number.isNaN(Number(min)) && `min: ${min}`}
-		{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && ", "}
-		{!Number.isNaN(Number(max)) && `max: ${max}`}
-	</Typography>
-);

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

@@ -1,72 +0,0 @@
-import Tooltip from "@mui/material/Tooltip";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import * as DesignSystemIcons from "@talixo-ds/icons";
-import { MinMaxValueLabel } from "./min-max-value-label";
-import { capitalize } from "../utils";
-import type { OptionsInputOption } from "../types";
-import { red } from "@mui/material/colors";
-import { useMemo } from "react";
-
-export type OptionsInputContentItemProps = {
-	item: OptionsInputOption;
-	disabled?: boolean;
-	displayMinMax?: boolean;
-	error?: boolean;
-};
-
-const OptionsInputContentItem = ({
-	item: { quantity, details, label, max, min, icon },
-	displayMinMax = false,
-	disabled = false,
-	error = false
-}: OptionsInputContentItemProps) => {
-	const Icon =
-		DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;
-	const itemsColor = useMemo(() => {
-		const defaultItemColor = quantity === 0 || disabled ? "#a4a5b2" : "#000000";
-
-		return error ? red[700] : defaultItemColor;
-	}, [error, quantity, disabled]);
-
-	return (
-		<Box
-			display="flex"
-			alignItems="center"
-			gap={0.5}
-			color={itemsColor}
-			data-testid="option-item"
-		>
-			{label ? (
-				<Tooltip
-					title={
-						<Box display="flex" flexDirection="column">
-							<Typography variant="caption" fontWeight={600} sx={{ my: 0 }}>
-								{label}
-							</Typography>
-							{details && (
-								<Typography variant="caption" sx={{ my: 0 }}>
-									{details}
-								</Typography>
-							)}
-							{displayMinMax && <MinMaxValueLabel min={min} max={max} />}
-						</Box>
-					}
-					placement="top"
-					arrow
-				>
-					<span>
-						<Icon fontSize="medium" sx={{ color: itemsColor }} />
-					</span>
-				</Tooltip>
-			) : (
-				<Icon fontSize="medium" sx={{ color: itemsColor }} />
-			)}
-			<Typography variant="h6" color={itemsColor}>
-				{quantity}
-			</Typography>
-		</Box>
-	);
-};
-
-export default OptionsInputContentItem;