@talixo-ds/options-input 1.0.0 → 1.0.2

package/src/options-input.tsx

@@ -1,274 +1,270 @@
-import React, { useState, useEffect } 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 MuiIcons from '@mui/icons-material';
-import * as DesignSystemIcons from '@talixo-ds/icons';
-import type { SxProps } from '@mui/material';
-import { OptionsInputOption, OptionsInputValue } from './types';
-import OptionsInputContentItem from './components/options-input-content-item';
-import OptionsInputDropdownItem from './components/options-input-dropdown-item';
-import './styles.scss';
+import React, { useState, useEffect, useCallback } 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/src";
+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 "./styles.scss";
 
-import '@emotion/react';
-import '@emotion/styled';
+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) => void;
-  /** Function which handles options input focus event */
-  onFocus?: (OptionsInputValue) => void;
-  /** Function which handles options input blur event */
-  onBlur?: (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;
+	/** 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;
 };
 
 export const OptionsInput = ({
-  options,
-  onChange,
-  onFocus,
-  onBlur,
-  persistentOptions = [],
-  defaultValue,
-  displayMinMax = false,
-  disabled = false,
-  readOnly = false,
-  id,
-  className,
-  itemsGap = 1,
-  containerSx = [],
-  ...rest
+	options,
+	onChange,
+	onFocus,
+	onBlur,
+	persistentOptions = [],
+	defaultValue,
+	displayMinMax = false,
+	disabled = false,
+	readOnly = false,
+	id,
+	className,
+	itemsGap = 1,
+	containerSx = [],
+	...rest
 }: OptionsInputProps) => {
-  console.log('XXXXX',useState)
-  const [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>(
-    []
-  );
-  const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();
-  const open = !!anchorEl;
+	const [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);
+	const [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();
+	const open = !!anchorEl;
 
-  useEffect(
-    () =>
-      setCurrentOptions(
-        options.map((option) => {
-          const defaultQuantity = defaultValue?.[option.id] ?? 0;
-          const minQuantity =
-            defaultQuantity < option?.min ? option?.min : defaultQuantity;
-          const quantity =
-            minQuantity > option?.max ? option?.max : minQuantity;
+	useEffect(
+		() =>
+			setCurrentOptions(
+				options.map((option) => {
+					const defaultQuantity = defaultValue?.[option.id] ?? 0;
+					const minQuantity =
+						typeof option?.min === "number" && defaultQuantity < option.min
+							? option.min
+							: defaultQuantity;
+					const quantity =
+						typeof option?.max === "number" && minQuantity > option.max ? option.max : minQuantity;
 
-          return {
-            ...option,
-            quantity,
-            inputQuantity: quantity,
-          };
-        })
-      ),
-    [options, defaultValue]
-  );
+					return {
+						...option,
+						quantity,
+						inputQuantity: quantity
+					};
+				})
+			),
+		[options, defaultValue]
+	);
 
-  const toggleInput = (event: React.MouseEvent<HTMLElement>) => {
-    const { currentTarget } = event;
+	const toggleInput = useCallback(
+		(event: React.MouseEvent<HTMLElement>) => {
+			const { currentTarget } = event;
 
-    if (!disabled && !readOnly) {
-      setTimeout(() => {
-        setAnchorEl(anchorEl ? undefined : currentTarget);
-      }, 0);
-    }
-  };
+			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 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 onInputBlur = () => {
+		if (onBlur) {
+			onBlur(
+				currentOptions.reduce(
+					(currentValues, currentOption) => ({
+						...currentValues,
+						[currentOption.id]: currentOption.quantity
+					}),
+					{}
+				)
+			);
+		}
+	};
 
-  const onValueChange = (optionId: string, newValue: string | number) => {
-    const newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);
+	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;
+		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,
-        }),
-      };
-    });
+			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,
-          }),
-          {}
-        )
-      );
-    }
+		if (onChange) {
+			onChange(
+				newCurrentOptions.reduce(
+					(currentValues, currentOption) => ({
+						...currentValues,
+						[currentOption.id]: currentOption.quantity
+					}),
+					{}
+				)
+			);
+		}
 
-    setCurrentOptions(newCurrentOptions);
-  };
+		setCurrentOptions(newCurrentOptions);
+	};
 
-  const onDropdownItemBlur = (optionId: string) => () =>
-    setCurrentOptions(
-      currentOptions.map((option) => {
-        if (optionId !== option.id) return option;
+	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;
+				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 {
+					...option,
+					inputQuantity: finalQuantity < (option.min || -Infinity) ? option.min : maxQuantity
+				};
+			})
+		);
 
-  return (
-    <>
-      <Box
-        id={id}
-        onClick={toggleInput}
-        onBlur={onInputBlur}
-        onFocus={onInputFocus}
-        className={classNames('options-input__container', {
-          'options-input__container--open': open,
-          'options-input__container--disabled': disabled,
-          'options-input__container--read-only': readOnly,
-          [className]: !!className,
-        })}
-        sx={[
-          { '&:hover': { borderColor: '#d3d3d3' } },
-          ...(Array.isArray(containerSx) ? containerSx : [containerSx]),
-          open && {
-            borderColor: (theme) => theme.palette.primary.main,
-            '&:hover': { borderColor: (theme) => theme.palette.primary.main },
-          },
-        ]}
-        data-testid={rest['data-testid'] || 'options-input-container'}
-        tabIndex={0}
-      >
-        <Box display="flex" gap={itemsGap}>
-          {currentOptions
-            .filter(
-              ({ quantity, id: optionId, icon }) =>
-                !!(MuiIcons?.[icon] || DesignSystemIcons?.[icon]) &&
-                (quantity !== 0 || persistentOptions.includes(optionId))
-            )
-            .map((option) => (
-              <OptionsInputContentItem
-                key={option.id}
-                item={option}
-                disabled={disabled}
-                displayMinMax={displayMinMax}
-              />
-            ))}
-        </Box>
-        {!readOnly &&
-          (open ? (
-            <KeyboardArrowUpIcon color="primary" />
-          ) : (
-            <KeyboardArrowDownIcon
-              sx={{
-                color: (theme) =>
-                  disabled
-                    ? theme.palette.grey[400]
-                    : theme.palette.action.focus,
-              }}
-            />
-          ))}
-      </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 ${theme.palette.primary.main}`,
-            }}
-          >
-            {currentOptions
-              .filter(
-                ({ icon }) => !!(MuiIcons?.[icon] || DesignSystemIcons?.[icon])
-              )
-              .map((option, index) => (
-                <OptionsInputDropdownItem
-                  key={option.id}
-                  item={option}
-                  onBlur={onDropdownItemBlur(option.id)}
-                  onChange={onValueChange}
-                  index={index}
-                  displayMinMax={displayMinMax}
-                />
-              ))}
-          </List>
-        </Popper>
-      </ClickAwayListener>
-    </>
-  );
+	return (
+		<>
+			<Box
+				id={id}
+				onClick={toggleInput}
+				onBlur={onInputBlur}
+				onFocus={onInputFocus}
+				className={classNames("options-input__container", {
+					"options-input__container--open": open,
+					"options-input__container--disabled": disabled,
+					"options-input__container--read-only": readOnly,
+					className
+				})}
+				sx={[
+					{ "&:hover": { borderColor: "#d3d3d3" } },
+					...(Array.isArray(containerSx) ? containerSx : [containerSx]),
+					open && {
+						borderColor: (theme) => theme.palette.primary.main,
+						"&:hover": { borderColor: (theme) => theme.palette.primary.main }
+					}
+				]}
+				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}
+							/>
+						))}
+				</Box>
+				{!readOnly &&
+					(open ? (
+						<KeyboardArrowUpIcon color="primary" />
+					) : (
+						<KeyboardArrowDownIcon
+							sx={{
+								color: (theme) => (disabled ? theme.palette.grey[400] : theme.palette.action.focus)
+							}}
+						/>
+					))}
+			</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 ${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}
+								/>
+							))}
+					</List>
+				</Popper>
+			</ClickAwayListener>
+		</>
+	);
 };

package/src/utils.ts

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

package/tsconfig.build.json

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

package/__tests__/__snapshots__/options-input.spec.tsx.snap

@@ -1,119 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`OptionsInput > snapshots > should match snapshot 1`] = `
-<React.Fragment>
-  <ForwardRef(Box)
-    className="options-input__container options-input__container--open test-class"
-    data-testid="options-input-container"
-    id="test-id"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    sx={
-      [
-        {
-          "&:hover": {
-            "borderColor": "#d3d3d3",
-          },
-        },
-        {
-          "&:hover": {
-            "borderColor": [Function],
-          },
-          "borderColor": [Function],
-        },
-      ]
-    }
-    tabIndex={0}
-  >
-    <ForwardRef(Box)
-      display="flex"
-      gap={1}
-    />
-    <Memo
-      color="primary"
-    />
-  </ForwardRef(Box)>
-  <ClickAwayListener
-    onClickAway={[Function]}
-  >
-    <ForwardRef(Popper)
-      anchorEl={[]}
-      open={true}
-      placement="bottom-start"
-      sx={[Function]}
-    >
-      <ForwardRef(List)
-        className="options-input__dropdown-items-list"
-        data-testid="options-dropdown-list"
-        disablePadding={true}
-        sx={
-          {
-            "bgcolor": "Background",
-            "border": [Function],
-          }
-        }
-      />
-    </ForwardRef(Popper)>
-  </ClickAwayListener>
-</React.Fragment>
-`;
-
-exports[`OptionsInput > snapshots > should render disabled input properly 1`] = `
-<React.Fragment>
-  <ForwardRef(Box)
-    className="options-input__container options-input__container--open options-input__container--disabled test-class"
-    data-testid="options-input-container"
-    id="test-id"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    sx={
-      [
-        {
-          "&:hover": {
-            "borderColor": "#d3d3d3",
-          },
-        },
-        {
-          "&:hover": {
-            "borderColor": [Function],
-          },
-          "borderColor": [Function],
-        },
-      ]
-    }
-    tabIndex={0}
-  >
-    <ForwardRef(Box)
-      display="flex"
-      gap={1}
-    />
-    <Memo
-      color="primary"
-    />
-  </ForwardRef(Box)>
-  <ClickAwayListener
-    onClickAway={[Function]}
-  >
-    <ForwardRef(Popper)
-      anchorEl={[]}
-      open={true}
-      placement="bottom-start"
-      sx={[Function]}
-    >
-      <ForwardRef(List)
-        className="options-input__dropdown-items-list"
-        data-testid="options-dropdown-list"
-        disablePadding={true}
-        sx={
-          {
-            "bgcolor": "Background",
-            "border": [Function],
-          }
-        }
-      />
-    </ForwardRef(Popper)>
-  </ClickAwayListener>
-</React.Fragment>
-`;