@talixo-ds/options-input 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
package/dist/index.d.mts
CHANGED
|
@@ -54,4 +54,4 @@ type OptionsInputProps = {
|
|
|
54
54
|
};
|
|
55
55
|
declare const OptionsInput: ({ options, onChange, onFocus, onBlur, persistentOptions, defaultValue, displayMinMax, disabled, readOnly, id, className, itemsGap, containerSx, error, helperText, helperTextSx, ...rest }: OptionsInputProps) => react_jsx_runtime.JSX.Element;
|
|
56
56
|
|
|
57
|
-
export { OptionsInput, type OptionsInputProps };
|
|
57
|
+
export { OptionsInput, type OptionsInputOption, type OptionsInputProps, type OptionsInputValue };
|
package/dist/index.d.ts
CHANGED
|
@@ -54,4 +54,4 @@ type OptionsInputProps = {
|
|
|
54
54
|
};
|
|
55
55
|
declare const OptionsInput: ({ options, onChange, onFocus, onBlur, persistentOptions, defaultValue, displayMinMax, disabled, readOnly, id, className, itemsGap, containerSx, error, helperText, helperTextSx, ...rest }: OptionsInputProps) => react_jsx_runtime.JSX.Element;
|
|
56
56
|
|
|
57
|
-
export { OptionsInput, type OptionsInputProps };
|
|
57
|
+
export { OptionsInput, type OptionsInputOption, type OptionsInputProps, type OptionsInputValue };
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/options-input.tsx","../src/components/options-input-content-item.tsx","../src/components/min-max-value-label.tsx","../src/utils.ts","../src/components/options-input-dropdown-item.tsx"],"sourcesContent":["export * from \"./options-input\";\n","import React, {\n\tuseState,\n\tuseEffect,\n\tuseCallback,\n\ttype ReactNode,\n\tuseMemo,\n\tuseRef\n} from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport List from \"@mui/material/List\";\nimport Popper from \"@mui/material/Popper\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport type { SxProps } from \"@mui/material\";\nimport type { OptionsInputOption, OptionsInputValue } from \"./types\";\nimport OptionsInputContentItem from \"./components/options-input-content-item\";\nimport OptionsInputDropdownItem from \"./components/options-input-dropdown-item\";\nimport { capitalize } from \"./utils\";\nimport { red } from \"@mui/material/colors\";\nimport \"./styles.scss\";\n\nimport \"@emotion/react\";\nimport \"@emotion/styled\";\n\nexport type OptionsInputProps = {\n\t/** Array of objects representing options available to choose from */\n\toptions: OptionsInputOption[];\n\t/** Object with default values of some options */\n\tdefaultValue?: OptionsInputValue;\n\t/** Array with ids of options which should remain displayed even if value is 0 */\n\tpersistentOptions?: string[];\n\t/** Boolean to determine if input is disabled */\n\tdisabled?: boolean;\n\t/** Boolean to determine if input is readOnly */\n\treadOnly?: boolean;\n\t/** Boolean to determine if min and max input values should be displayed */\n\tdisplayMinMax?: boolean;\n\t/** Function which handles options input value change */\n\tonChange?: (OptionsInputValue: OptionsInputValue) => void;\n\t/** Function which handles options input focus event */\n\tonFocus?: (OptionsInputValue: OptionsInputValue) => void;\n\t/** Function which handles options input blur event */\n\tonBlur?: (OptionsInputValue: OptionsInputValue) => void;\n\t/** className attached to an input container */\n\tclassName?: string;\n\t/** id attached to an input container */\n\tid?: string;\n\t/** data test id attached to an input container */\n\t\"data-testid\"?: string;\n\t/** Gap between input items */\n\titemsGap?: string | number;\n\t/** Custom styles for container */\n\tcontainerSx?: SxProps;\n\t/** Flag indicating if there is an validation error */\n\terror?: boolean;\n\t/** Additional content displayed with small font under the input */\n\thelperText?: ReactNode;\n\t/** Custom styles for helper text container */\n\thelperTextSx?: SxProps;\n};\n\nexport const OptionsInput = ({\n\toptions,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tpersistentOptions = [],\n\tdefaultValue,\n\tdisplayMinMax = false,\n\tdisabled = false,\n\treadOnly = false,\n\tid,\n\tclassName,\n\titemsGap = 1,\n\tcontainerSx = [],\n\terror = false,\n\thelperText,\n\thelperTextSx,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst inputContainerRef = useRef<HTMLElement>();\n\tconst [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tuseEffect(\n\t\t() =>\n\t\t\tsetCurrentOptions(\n\t\t\t\toptions.map((option) => {\n\t\t\t\t\tconst quantity = defaultValue?.[option.id] ?? 0;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...option,\n\t\t\t\t\t\tquantity,\n\t\t\t\t\t\tinputQuantity: quantity\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t),\n\t\t[options, defaultValue]\n\t);\n\n\tuseEffect(() => {\n\t\tsetInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);\n\t}, [inputContainerRef?.current?.clientWidth]);\n\n\tconst optionsExceedingBoundaries = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce((exceedingOptions, { quantity, id, label }) => {\n\t\t\t\tconst option = options.find((option) => option.id === id);\n\n\t\t\t\tif (\n\t\t\t\t\tlabel &&\n\t\t\t\t\tquantity !== undefined &&\n\t\t\t\t\t((option?.max !== undefined && option?.max < quantity) ||\n\t\t\t\t\t\t(option?.min !== undefined && option?.min > quantity))\n\t\t\t\t) {\n\t\t\t\t\treturn [...exceedingOptions, label];\n\t\t\t\t}\n\n\t\t\t\treturn exceedingOptions;\n\t\t\t}, [] as string[]),\n\t\t[currentOptions, options]\n\t);\n\n\tconst isError = useMemo(\n\t\t() => error || !!optionsExceedingBoundaries.length,\n\t\t[error, optionsExceedingBoundaries]\n\t);\n\n\tconst toggleInput = useCallback(\n\t\t(event: React.MouseEvent<HTMLElement>) => {\n\t\t\tconst { currentTarget } = event;\n\n\t\t\tif (!disabled && !readOnly) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tsetAnchorEl((currentAnchor) =>\n\t\t\t\t\t\tcurrentAnchor ? undefined : currentTarget\n\t\t\t\t\t);\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t},\n\t\t[disabled, readOnly, setAnchorEl]\n\t);\n\n\tconst onInputFocus = () => {\n\t\tif (onFocus) {\n\t\t\tonFocus(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onInputBlur = () => {\n\t\tif (onBlur) {\n\t\t\tonBlur(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onValueChange = (optionId: string, newValue: string | number) => {\n\t\tconst newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);\n\n\t\tconst newCurrentOptions = currentOptions.map((option) => {\n\t\t\tconst maxQuantity =\n\t\t\t\tnewQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;\n\n\t\t\treturn {\n\t\t\t\t...option,\n\t\t\t\t...(optionId === option.id && {\n\t\t\t\t\tquantity:\n\t\t\t\t\t\tnewQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,\n\t\t\t\t\tinputQuantity: newValue\n\t\t\t\t})\n\t\t\t};\n\t\t});\n\n\t\tif (onChange) {\n\t\t\tonChange(\n\t\t\t\tnewCurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\n\t\tsetCurrentOptions(newCurrentOptions);\n\t};\n\n\tconst onDropdownItemBlur = (optionId: string) => () =>\n\t\tsetCurrentOptions(\n\t\t\tcurrentOptions.map((option) => {\n\t\t\t\tif (optionId !== option.id) return option;\n\n\t\t\t\tconst finalQuantity = Number.isNaN(Number(option?.inputQuantity))\n\t\t\t\t\t? 0\n\t\t\t\t\t: Number(option?.inputQuantity);\n\t\t\t\tconst maxQuantity =\n\t\t\t\t\tfinalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;\n\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\tinputQuantity:\n\t\t\t\t\t\tfinalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Box>\n\t\t\t\t<Box\n\t\t\t\t\tid={id}\n\t\t\t\t\tonClick={toggleInput}\n\t\t\t\t\tonBlur={onInputBlur}\n\t\t\t\t\tonFocus={onInputFocus}\n\t\t\t\t\tref={inputContainerRef}\n\t\t\t\t\tclassName={classNames(\"options-input__container\", className, {\n\t\t\t\t\t\t\"options-input__container--open\": open,\n\t\t\t\t\t\t\"options-input__container--disabled\": disabled,\n\t\t\t\t\t\t\"options-input__container--read-only\": readOnly,\n\t\t\t\t\t\t\"options-input__container--error\": isError\n\t\t\t\t\t})}\n\t\t\t\t\tsx={[\n\t\t\t\t\t\t{ \"&:hover\": { borderColor: \"#d3d3d3\" } },\n\t\t\t\t\t\t...(Array.isArray(containerSx) ? containerSx : [containerSx]),\n\t\t\t\t\t\topen && {\n\t\t\t\t\t\t\tborderColor: (theme) => theme.palette.primary.main,\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: (theme) => theme.palette.primary.main }\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisError && {\n\t\t\t\t\t\t\tborderColor: red[700],\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: red[700] }\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t\tdata-testid={rest[\"data-testid\"] || \"options-input-container\"}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t<Box display=\"flex\" gap={itemsGap}>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ quantity, id: optionId, icon }) =>\n\t\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\t\tDesignSystemIcons[\n\t\t\t\t\t\t\t\t\t\t\tcapitalize(icon) as keyof typeof DesignSystemIcons\n\t\t\t\t\t\t\t\t\t\t] &&\n\t\t\t\t\t\t\t\t\t\t(quantity !== 0 || persistentOptions?.includes(optionId))\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option) => (\n\t\t\t\t\t\t\t\t<OptionsInputContentItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={\n\t\t\t\t\t\t\t\t\t\t!!(option?.label && optionsExceedingBoundaries.includes(option.label))\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t\t{!readOnly &&\n\t\t\t\t\t\t(open ? (\n\t\t\t\t\t\t\t<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : \"primary\" }} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<KeyboardArrowDownIcon\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: (theme) =>\n\t\t\t\t\t\t\t\t\t\tdisabled ? theme.palette.grey[400] : theme.palette.action.focus\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t{(helperText || isError) && (\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tfontSize: \"small\",\n\t\t\t\t\t\t\t...(helperTextSx || {}),\n\t\t\t\t\t\t\t...(isError ? { color: red[700] } : {})\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmarginTop={1}\n\t\t\t\t\t\tmarginLeft={2}\n\t\t\t\t\t\twidth={inputContainerWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsExceedingBoundaries.length\n\t\t\t\t\t\t\t? (() => {\n\t\t\t\t\t\t\t\t\tconst messagePluralForm =\n\t\t\t\t\t\t\t\t\t\toptionsExceedingBoundaries.length > 1 ? \"s\" : \"\";\n\n\t\t\t\t\t\t\t\t\treturn `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(\", \")} option${messagePluralForm} ${messagePluralForm ? \"are\" : \"is\"} out of range.`;\n\t\t\t\t\t\t\t\t})()\n\t\t\t\t\t\t\t: helperText}\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</Box>\n\t\t\t<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>\n\t\t\t\t<Popper\n\t\t\t\t\topen={open}\n\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\tanchorEl={anchorEl}\n\t\t\t\t\tsx={(theme) => ({ zIndex: theme.zIndex.modal })}\n\t\t\t\t>\n\t\t\t\t\t<List\n\t\t\t\t\t\tdisablePadding\n\t\t\t\t\t\tdata-testid=\"options-dropdown-list\"\n\t\t\t\t\t\tclassName=\"options-input__dropdown-items-list\"\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: \"Background\",\n\t\t\t\t\t\t\tborder: (theme) =>\n\t\t\t\t\t\t\t\t`thin solid ${isError ? red[700] : theme.palette.primary.main}`\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ icon }) =>\n\t\t\t\t\t\t\t\t\t!!DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons]\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option, index) => (\n\t\t\t\t\t\t\t\t<OptionsInputDropdownItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tonBlur={onDropdownItemBlur(option.id)}\n\t\t\t\t\t\t\t\t\tonChange={onValueChange}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={isError}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</List>\n\t\t\t\t</Popper>\n\t\t\t</ClickAwayListener>\n\t\t</>\n\t);\n};\n","import Tooltip from \"@mui/material/Tooltip\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\nimport { red } from \"@mui/material/colors\";\nimport { useMemo } from \"react\";\n\nexport type OptionsInputContentItemProps = {\n\titem: OptionsInputOption;\n\tdisabled?: boolean;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false\n}: OptionsInputContentItemProps) => {\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;\n\tconst itemsColor = useMemo(() => {\n\t\tconst defaultItemColor = quantity === 0 || disabled ? \"#a4a5b2\" : \"#000000\";\n\n\t\treturn error ? red[700] : defaultItemColor;\n\t}, [error, quantity, disabled]);\n\n\treturn (\n\t\t<Box\n\t\t\tdisplay=\"flex\"\n\t\t\talignItems=\"center\"\n\t\t\tgap={0.5}\n\t\t\tcolor={itemsColor}\n\t\t\tdata-testid=\"option-item\"\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<Tooltip\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Box display=\"flex\" flexDirection=\"column\">\n\t\t\t\t\t\t\t<Typography variant=\"caption\" fontWeight={600} sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t\t<Typography variant=\"caption\" sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t\t{details}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} />}\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t}\n\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\tarrow\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t\t\t</span>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography variant=\"h6\" color={itemsColor}>\n\t\t\t\t{quantity}\n\t\t\t</Typography>\n\t\t</Box>\n\t);\n};\n\nexport default OptionsInputContentItem;\n","import Typography, { type TypographyProps } from \"@mui/material/Typography\";\n\nexport type MinMaxValueLabelProps = {\n\tmin?: number;\n\tmax?: number;\n\tcolor?: TypographyProps[\"color\"];\n};\n\nexport const MinMaxValueLabel = ({\n\tmin,\n\tmax,\n\tcolor\n}: MinMaxValueLabelProps) => (\n\t<Typography variant=\"caption\" color={color} sx={{ my: 0 }}>\n\t\t{!Number.isNaN(Number(min)) && `min: ${min}`}\n\t\t{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && \", \"}\n\t\t{!Number.isNaN(Number(max)) && `max: ${max}`}\n\t</Typography>\n);\n","export const capitalize = (str: string) =>\n\tstr.charAt(0).toUpperCase() + str.slice(1);\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport ButtonGroup from \"@mui/material/ButtonGroup\";\nimport Divider from \"@mui/material/Divider\";\nimport TextField from \"@mui/material/TextField\";\nimport ListItem from \"@mui/material/ListItem\";\nimport Button from \"@mui/material/Button\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport RemoveIcon from \"@mui/icons-material/Remove\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\n\nexport type OptionsInputDropdownItemProps = {\n\titem: OptionsInputOption;\n\tonBlur: (event: React.FocusEvent<HTMLInputElement>) => void;\n\tonChange: (id: string, value: number | string) => void;\n\tindex: number;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputDropdownItem = ({\n\titem: { id, quantity = 0, label, max, min, icon, details, inputQuantity },\n\tonChange,\n\tonBlur,\n\tindex,\n\tdisplayMinMax,\n\terror = false\n}: OptionsInputDropdownItemProps) => {\n\tconst [shouldDisplayFullDetails, setShouldDisplayFullDetails] =\n\t\tuseState<boolean>(false);\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;\n\n\tconst onIncrement = (inputId: string) => () => {\n\t\tconst isValueBelowMin = !!(min && quantity < min);\n\n\t\tonChange(inputId, (isValueBelowMin ? min : quantity + 1)!);\n\t};\n\n\tconst onDecrement = (inputId: string) => () => {\n\t\tconst isValueAboveMax = !!(max && quantity > max);\n\n\t\treturn onChange(inputId, (isValueAboveMax ? max : quantity - 1)!);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{!!index && (\n\t\t\t\t<Divider sx={{ color: (theme) => theme.palette.primary.main }} />\n\t\t\t)}\n\t\t\t<ListItem\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"space-between\"\n\t\t\t\t}}\n\t\t\t\tclassName={classNames(\"options-input__dropdown-item\", {\n\t\t\t\t\t\"options-input__dropdown-item--empty\": !quantity\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Box display=\"flex\" alignItems=\"center\">\n\t\t\t\t\t<Icon fontSize=\"small\" sx={{ color: \"black\" }} />\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tonChange={({ target }) => onChange(id, target.value)}\n\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\tvalue={inputQuantity}\n\t\t\t\t\t\tvariant=\"standard\"\n\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\tinputMode: \"numeric\",\n\t\t\t\t\t\t\tpattern: \"-?[0-9]*\",\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\ttextAlign: \"center\"\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\"data-testid\": \"dropdown-item-input\"\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-no-duplicate-props\n\t\t\t\t\t\tInputProps={{ disableUnderline: true }}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-input\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tdisplay=\"flex\"\n\t\t\t\t\t\tflexDirection=\"column\"\n\t\t\t\t\t\tjustifyContent=\"center\"\n\t\t\t\t\t\tpaddingRight={2}\n\t\t\t\t\t\tpaddingLeft={1}\n\t\t\t\t\t\tminWidth=\"5rem\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\tfontWeight={600}\n\t\t\t\t\t\t\tfontSize={13}\n\t\t\t\t\t\t\tsx={{ my: 0 }}\n\t\t\t\t\t\t\tcolor=\"black\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label || id}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tposition=\"relative\"\n\t\t\t\t\t\t\t\theight=\"1rem\"\n\t\t\t\t\t\t\t\tdata-testid=\"option-details-container\"\n\t\t\t\t\t\t\t\tonMouseEnter={() => setShouldDisplayFullDetails(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setShouldDisplayFullDetails(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t\tcolor=\"gray\"\n\t\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\t\tmy: 0,\n\t\t\t\t\t\t\t\t\t\tzIndex: 10000,\n\t\t\t\t\t\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t\t\t\t\t\t...(shouldDisplayFullDetails && {\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: quantity ? \"#ffffff\" : \"#eeeeee\",\n\t\t\t\t\t\t\t\t\t\t\tborder: \"thin solid #d3d3d3\"\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdata-testid=\"option-details\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{details?.length <= 15 || shouldDisplayFullDetails\n\t\t\t\t\t\t\t\t\t\t? details\n\t\t\t\t\t\t\t\t\t\t: `${details?.slice(0, 15)}...`}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} color=\"gray\" />}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t\t<ButtonGroup\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"options-input__dropdown-item-buttons\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onIncrement(id)}\n\t\t\t\t\t\tdisabled={!!(max && quantity && quantity >= max)}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AddIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onDecrement(id)}\n\t\t\t\t\t\tdisabled={!!(quantity && min) && quantity <= min}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RemoveIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t</ButtonGroup>\n\t\t\t</ListItem>\n\t\t</>\n\t);\n};\n\nexport default OptionsInputDropdownItem;\n"],"mappings":"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","names":["src_exports","__export","OptionsInput","__toCommonJS","import_react","import_classnames","import_Box","import_List","import_Popper","import_ClickAwayListener","import_KeyboardArrowDown","import_KeyboardArrowUp","DesignSystemIcons","import_Tooltip","import_Box","import_Typography","DesignSystemIcons","import_Typography","import_jsx_runtime","MinMaxValueLabel","min","max","color","Typography","capitalize","str","import_colors","import_react","import_jsx_runtime","OptionsInputContentItem","quantity","details","label","max","min","icon","displayMinMax","disabled","error","Icon","DesignSystemIcons","capitalize","itemsColor","Box","Tooltip","Typography","MinMaxValueLabel","options_input_content_item_default","import_react","import_classnames","import_Box","import_Typography","import_ButtonGroup","import_Divider","import_TextField","import_ListItem","import_Button","import_Add","import_Remove","DesignSystemIcons","import_jsx_runtime","OptionsInputDropdownItem","id","quantity","label","max","min","icon","details","inputQuantity","onChange","onBlur","index","displayMinMax","error","shouldDisplayFullDetails","setShouldDisplayFullDetails","Icon","DesignSystemIcons","capitalize","onIncrement","inputId","isValueBelowMin","onDecrement","isValueAboveMax","Divider","theme","ListItem","classNames","Box","TextField","target","Typography","MinMaxValueLabel","ButtonGroup","Button","AddIcon","RemoveIcon","options_input_dropdown_item_default","import_colors","import_react","import_styled","import_jsx_runtime","OptionsInput","options","onChange","onFocus","onBlur","persistentOptions","defaultValue","displayMinMax","disabled","readOnly","id","className","itemsGap","containerSx","error","helperText","helperTextSx","rest","currentOptions","setCurrentOptions","inputContainerWidth","setInputContainerWidth","inputContainerRef","anchorEl","setAnchorEl","open","option","quantity","optionsExceedingBoundaries","exceedingOptions","label","isError","toggleInput","event","currentTarget","currentAnchor","onInputFocus","currentValues","currentOption","onInputBlur","onValueChange","optionId","newValue","newQuantity","newCurrentOptions","maxQuantity","onDropdownItemBlur","finalQuantity","Box","classNames","theme","icon","DesignSystemIcons","capitalize","options_input_content_item_default","KeyboardArrowUpIcon","KeyboardArrowDownIcon","messagePluralForm","ClickAwayListener","Popper","List","index","options_input_dropdown_item_default"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/options-input.tsx","../src/components/options-input-content-item.tsx","../src/components/min-max-value-label.tsx","../src/utils.ts","../src/components/options-input-dropdown-item.tsx"],"sourcesContent":["export * from \"./options-input\";\nexport * from \"./types\";\n","import React, {\n\tuseState,\n\tuseEffect,\n\tuseCallback,\n\ttype ReactNode,\n\tuseMemo,\n\tuseRef\n} from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport List from \"@mui/material/List\";\nimport Popper from \"@mui/material/Popper\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\nimport KeyboardArrowDownIcon from \"@mui/icons-material/KeyboardArrowDown\";\nimport KeyboardArrowUpIcon from \"@mui/icons-material/KeyboardArrowUp\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport type { SxProps } from \"@mui/material\";\nimport type { OptionsInputOption, OptionsInputValue } from \"./types\";\nimport OptionsInputContentItem from \"./components/options-input-content-item\";\nimport OptionsInputDropdownItem from \"./components/options-input-dropdown-item\";\nimport { capitalize } from \"./utils\";\nimport { red } from \"@mui/material/colors\";\nimport \"./styles.scss\";\n\nimport \"@emotion/react\";\nimport \"@emotion/styled\";\n\nexport type OptionsInputProps = {\n\t/** Array of objects representing options available to choose from */\n\toptions: OptionsInputOption[];\n\t/** Object with default values of some options */\n\tdefaultValue?: OptionsInputValue;\n\t/** Array with ids of options which should remain displayed even if value is 0 */\n\tpersistentOptions?: string[];\n\t/** Boolean to determine if input is disabled */\n\tdisabled?: boolean;\n\t/** Boolean to determine if input is readOnly */\n\treadOnly?: boolean;\n\t/** Boolean to determine if min and max input values should be displayed */\n\tdisplayMinMax?: boolean;\n\t/** Function which handles options input value change */\n\tonChange?: (OptionsInputValue: OptionsInputValue) => void;\n\t/** Function which handles options input focus event */\n\tonFocus?: (OptionsInputValue: OptionsInputValue) => void;\n\t/** Function which handles options input blur event */\n\tonBlur?: (OptionsInputValue: OptionsInputValue) => void;\n\t/** className attached to an input container */\n\tclassName?: string;\n\t/** id attached to an input container */\n\tid?: string;\n\t/** data test id attached to an input container */\n\t\"data-testid\"?: string;\n\t/** Gap between input items */\n\titemsGap?: string | number;\n\t/** Custom styles for container */\n\tcontainerSx?: SxProps;\n\t/** Flag indicating if there is an validation error */\n\terror?: boolean;\n\t/** Additional content displayed with small font under the input */\n\thelperText?: ReactNode;\n\t/** Custom styles for helper text container */\n\thelperTextSx?: SxProps;\n};\n\nexport const OptionsInput = ({\n\toptions,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tpersistentOptions = [],\n\tdefaultValue,\n\tdisplayMinMax = false,\n\tdisabled = false,\n\treadOnly = false,\n\tid,\n\tclassName,\n\titemsGap = 1,\n\tcontainerSx = [],\n\terror = false,\n\thelperText,\n\thelperTextSx,\n\t...rest\n}: OptionsInputProps) => {\n\tconst [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);\n\tconst [inputContainerWidth, setInputContainerWidth] = useState(0);\n\tconst inputContainerRef = useRef<HTMLElement>();\n\tconst [anchorEl, setAnchorEl] = useState<undefined | HTMLElement>();\n\tconst open = !!anchorEl;\n\n\tuseEffect(\n\t\t() =>\n\t\t\tsetCurrentOptions(\n\t\t\t\toptions.map((option) => {\n\t\t\t\t\tconst quantity = defaultValue?.[option.id] ?? 0;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...option,\n\t\t\t\t\t\tquantity,\n\t\t\t\t\t\tinputQuantity: quantity\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t),\n\t\t[options, defaultValue]\n\t);\n\n\tuseEffect(() => {\n\t\tsetInputContainerWidth(inputContainerRef?.current?.clientWidth ?? 0);\n\t}, [inputContainerRef?.current?.clientWidth]);\n\n\tconst optionsExceedingBoundaries = useMemo(\n\t\t() =>\n\t\t\tcurrentOptions.reduce((exceedingOptions, { quantity, id, label }) => {\n\t\t\t\tconst option = options.find((option) => option.id === id);\n\n\t\t\t\tif (\n\t\t\t\t\tlabel &&\n\t\t\t\t\tquantity !== undefined &&\n\t\t\t\t\t((option?.max !== undefined && option?.max < quantity) ||\n\t\t\t\t\t\t(option?.min !== undefined && option?.min > quantity))\n\t\t\t\t) {\n\t\t\t\t\treturn [...exceedingOptions, label];\n\t\t\t\t}\n\n\t\t\t\treturn exceedingOptions;\n\t\t\t}, [] as string[]),\n\t\t[currentOptions, options]\n\t);\n\n\tconst isError = useMemo(\n\t\t() => error || !!optionsExceedingBoundaries.length,\n\t\t[error, optionsExceedingBoundaries]\n\t);\n\n\tconst toggleInput = useCallback(\n\t\t(event: React.MouseEvent<HTMLElement>) => {\n\t\t\tconst { currentTarget } = event;\n\n\t\t\tif (!disabled && !readOnly) {\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tsetAnchorEl((currentAnchor) =>\n\t\t\t\t\t\tcurrentAnchor ? undefined : currentTarget\n\t\t\t\t\t);\n\t\t\t\t}, 0);\n\t\t\t}\n\t\t},\n\t\t[disabled, readOnly, setAnchorEl]\n\t);\n\n\tconst onInputFocus = () => {\n\t\tif (onFocus) {\n\t\t\tonFocus(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onInputBlur = () => {\n\t\tif (onBlur) {\n\t\t\tonBlur(\n\t\t\t\tcurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\t};\n\n\tconst onValueChange = (optionId: string, newValue: string | number) => {\n\t\tconst newQuantity = Number.isNaN(Number(newValue)) ? 0 : Number(newValue);\n\n\t\tconst newCurrentOptions = currentOptions.map((option) => {\n\t\t\tconst maxQuantity =\n\t\t\t\tnewQuantity > (option?.max ?? Infinity) ? option?.max : newQuantity;\n\n\t\t\treturn {\n\t\t\t\t...option,\n\t\t\t\t...(optionId === option.id && {\n\t\t\t\t\tquantity:\n\t\t\t\t\t\tnewQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity,\n\t\t\t\t\tinputQuantity: newValue\n\t\t\t\t})\n\t\t\t};\n\t\t});\n\n\t\tif (onChange) {\n\t\t\tonChange(\n\t\t\t\tnewCurrentOptions.reduce(\n\t\t\t\t\t(currentValues, currentOption) => ({\n\t\t\t\t\t\t...currentValues,\n\t\t\t\t\t\t[currentOption.id]: currentOption.quantity\n\t\t\t\t\t}),\n\t\t\t\t\t{}\n\t\t\t\t) as OptionsInputValue\n\t\t\t);\n\t\t}\n\n\t\tsetCurrentOptions(newCurrentOptions);\n\t};\n\n\tconst onDropdownItemBlur = (optionId: string) => () =>\n\t\tsetCurrentOptions(\n\t\t\tcurrentOptions.map((option) => {\n\t\t\t\tif (optionId !== option.id) return option;\n\n\t\t\t\tconst finalQuantity = Number.isNaN(Number(option?.inputQuantity))\n\t\t\t\t\t? 0\n\t\t\t\t\t: Number(option?.inputQuantity);\n\t\t\t\tconst maxQuantity =\n\t\t\t\t\tfinalQuantity > (option?.max ?? Infinity) ? option?.max : finalQuantity;\n\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\tinputQuantity:\n\t\t\t\t\t\tfinalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity\n\t\t\t\t};\n\t\t\t})\n\t\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Box>\n\t\t\t\t<Box\n\t\t\t\t\tid={id}\n\t\t\t\t\tonClick={toggleInput}\n\t\t\t\t\tonBlur={onInputBlur}\n\t\t\t\t\tonFocus={onInputFocus}\n\t\t\t\t\tref={inputContainerRef}\n\t\t\t\t\tclassName={classNames(\"options-input__container\", className, {\n\t\t\t\t\t\t\"options-input__container--open\": open,\n\t\t\t\t\t\t\"options-input__container--disabled\": disabled,\n\t\t\t\t\t\t\"options-input__container--read-only\": readOnly,\n\t\t\t\t\t\t\"options-input__container--error\": isError\n\t\t\t\t\t})}\n\t\t\t\t\tsx={[\n\t\t\t\t\t\t{ \"&:hover\": { borderColor: \"#d3d3d3\" } },\n\t\t\t\t\t\t...(Array.isArray(containerSx) ? containerSx : [containerSx]),\n\t\t\t\t\t\topen && {\n\t\t\t\t\t\t\tborderColor: (theme) => theme.palette.primary.main,\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: (theme) => theme.palette.primary.main }\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisError && {\n\t\t\t\t\t\t\tborderColor: red[700],\n\t\t\t\t\t\t\t\"&:hover\": { borderColor: red[700] }\n\t\t\t\t\t\t}\n\t\t\t\t\t]}\n\t\t\t\t\tdata-testid={rest[\"data-testid\"] || \"options-input-container\"}\n\t\t\t\t\ttabIndex={0}\n\t\t\t\t>\n\t\t\t\t\t<Box display=\"flex\" gap={itemsGap}>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ quantity, id: optionId, icon }) =>\n\t\t\t\t\t\t\t\t\t!!(\n\t\t\t\t\t\t\t\t\t\tDesignSystemIcons[\n\t\t\t\t\t\t\t\t\t\t\tcapitalize(icon) as keyof typeof DesignSystemIcons\n\t\t\t\t\t\t\t\t\t\t] &&\n\t\t\t\t\t\t\t\t\t\t(quantity !== 0 || persistentOptions?.includes(optionId))\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option) => (\n\t\t\t\t\t\t\t\t<OptionsInputContentItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={\n\t\t\t\t\t\t\t\t\t\t!!(option?.label && optionsExceedingBoundaries.includes(option.label))\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</Box>\n\t\t\t\t\t{!readOnly &&\n\t\t\t\t\t\t(open ? (\n\t\t\t\t\t\t\t<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : \"primary\" }} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<KeyboardArrowDownIcon\n\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\tcolor: (theme) =>\n\t\t\t\t\t\t\t\t\t\tdisabled ? theme.palette.grey[400] : theme.palette.action.focus\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t</Box>\n\t\t\t\t{(helperText || isError) && (\n\t\t\t\t\t<Box\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tfontSize: \"small\",\n\t\t\t\t\t\t\t...(helperTextSx || {}),\n\t\t\t\t\t\t\t...(isError ? { color: red[700] } : {})\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmarginTop={1}\n\t\t\t\t\t\tmarginLeft={2}\n\t\t\t\t\t\twidth={inputContainerWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsExceedingBoundaries.length\n\t\t\t\t\t\t\t? (() => {\n\t\t\t\t\t\t\t\t\tconst messagePluralForm =\n\t\t\t\t\t\t\t\t\t\toptionsExceedingBoundaries.length > 1 ? \"s\" : \"\";\n\n\t\t\t\t\t\t\t\t\treturn `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(\", \")} option${messagePluralForm} ${messagePluralForm ? \"are\" : \"is\"} out of range.`;\n\t\t\t\t\t\t\t\t})()\n\t\t\t\t\t\t\t: helperText}\n\t\t\t\t\t</Box>\n\t\t\t\t)}\n\t\t\t</Box>\n\t\t\t<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>\n\t\t\t\t<Popper\n\t\t\t\t\topen={open}\n\t\t\t\t\tplacement=\"bottom-start\"\n\t\t\t\t\tanchorEl={anchorEl}\n\t\t\t\t\tsx={(theme) => ({ zIndex: theme.zIndex.modal })}\n\t\t\t\t>\n\t\t\t\t\t<List\n\t\t\t\t\t\tdisablePadding\n\t\t\t\t\t\tdata-testid=\"options-dropdown-list\"\n\t\t\t\t\t\tclassName=\"options-input__dropdown-items-list\"\n\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\tbgcolor: \"Background\",\n\t\t\t\t\t\t\tborder: (theme) =>\n\t\t\t\t\t\t\t\t`thin solid ${isError ? red[700] : theme.palette.primary.main}`\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{currentOptions\n\t\t\t\t\t\t\t.filter(\n\t\t\t\t\t\t\t\t({ icon }) =>\n\t\t\t\t\t\t\t\t\t!!DesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons]\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.map((option, index) => (\n\t\t\t\t\t\t\t\t<OptionsInputDropdownItem\n\t\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\t\titem={option}\n\t\t\t\t\t\t\t\t\tonBlur={onDropdownItemBlur(option.id)}\n\t\t\t\t\t\t\t\t\tonChange={onValueChange}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tdisplayMinMax={displayMinMax}\n\t\t\t\t\t\t\t\t\terror={isError}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</List>\n\t\t\t\t</Popper>\n\t\t\t</ClickAwayListener>\n\t\t</>\n\t);\n};\n","import Tooltip from \"@mui/material/Tooltip\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\nimport { red } from \"@mui/material/colors\";\nimport { useMemo } from \"react\";\n\nexport type OptionsInputContentItemProps = {\n\titem: OptionsInputOption;\n\tdisabled?: boolean;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputContentItem = ({\n\titem: { quantity, details, label, max, min, icon },\n\tdisplayMinMax = false,\n\tdisabled = false,\n\terror = false\n}: OptionsInputContentItemProps) => {\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;\n\tconst itemsColor = useMemo(() => {\n\t\tconst defaultItemColor = quantity === 0 || disabled ? \"#a4a5b2\" : \"#000000\";\n\n\t\treturn error ? red[700] : defaultItemColor;\n\t}, [error, quantity, disabled]);\n\n\treturn (\n\t\t<Box\n\t\t\tdisplay=\"flex\"\n\t\t\talignItems=\"center\"\n\t\t\tgap={0.5}\n\t\t\tcolor={itemsColor}\n\t\t\tdata-testid=\"option-item\"\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<Tooltip\n\t\t\t\t\ttitle={\n\t\t\t\t\t\t<Box display=\"flex\" flexDirection=\"column\">\n\t\t\t\t\t\t\t<Typography variant=\"caption\" fontWeight={600} sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t\t<Typography variant=\"caption\" sx={{ my: 0 }}>\n\t\t\t\t\t\t\t\t\t{details}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} />}\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t}\n\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\tarrow\n\t\t\t\t>\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t\t\t</span>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Icon fontSize=\"medium\" sx={{ color: itemsColor }} />\n\t\t\t)}\n\t\t\t<Typography variant=\"h6\" color={itemsColor}>\n\t\t\t\t{quantity}\n\t\t\t</Typography>\n\t\t</Box>\n\t);\n};\n\nexport default OptionsInputContentItem;\n","import Typography, { type TypographyProps } from \"@mui/material/Typography\";\n\nexport type MinMaxValueLabelProps = {\n\tmin?: number;\n\tmax?: number;\n\tcolor?: TypographyProps[\"color\"];\n};\n\nexport const MinMaxValueLabel = ({\n\tmin,\n\tmax,\n\tcolor\n}: MinMaxValueLabelProps) => (\n\t<Typography variant=\"caption\" color={color} sx={{ my: 0 }}>\n\t\t{!Number.isNaN(Number(min)) && `min: ${min}`}\n\t\t{!Number.isNaN(Number(max)) && !Number.isNaN(Number(min)) && \", \"}\n\t\t{!Number.isNaN(Number(max)) && `max: ${max}`}\n\t</Typography>\n);\n","export const capitalize = (str: string) =>\n\tstr.charAt(0).toUpperCase() + str.slice(1);\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport ButtonGroup from \"@mui/material/ButtonGroup\";\nimport Divider from \"@mui/material/Divider\";\nimport TextField from \"@mui/material/TextField\";\nimport ListItem from \"@mui/material/ListItem\";\nimport Button from \"@mui/material/Button\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport RemoveIcon from \"@mui/icons-material/Remove\";\nimport * as DesignSystemIcons from \"@talixo-ds/icons\";\nimport { MinMaxValueLabel } from \"./min-max-value-label\";\nimport { capitalize } from \"../utils\";\nimport type { OptionsInputOption } from \"../types\";\n\nexport type OptionsInputDropdownItemProps = {\n\titem: OptionsInputOption;\n\tonBlur: (event: React.FocusEvent<HTMLInputElement>) => void;\n\tonChange: (id: string, value: number | string) => void;\n\tindex: number;\n\tdisplayMinMax?: boolean;\n\terror?: boolean;\n};\n\nconst OptionsInputDropdownItem = ({\n\titem: { id, quantity = 0, label, max, min, icon, details, inputQuantity },\n\tonChange,\n\tonBlur,\n\tindex,\n\tdisplayMinMax,\n\terror = false\n}: OptionsInputDropdownItemProps) => {\n\tconst [shouldDisplayFullDetails, setShouldDisplayFullDetails] =\n\t\tuseState<boolean>(false);\n\tconst Icon =\n\t\tDesignSystemIcons[capitalize(icon) as keyof typeof DesignSystemIcons] || null;\n\n\tconst onIncrement = (inputId: string) => () => {\n\t\tconst isValueBelowMin = !!(min && quantity < min);\n\n\t\tonChange(inputId, (isValueBelowMin ? min : quantity + 1)!);\n\t};\n\n\tconst onDecrement = (inputId: string) => () => {\n\t\tconst isValueAboveMax = !!(max && quantity > max);\n\n\t\treturn onChange(inputId, (isValueAboveMax ? max : quantity - 1)!);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{!!index && (\n\t\t\t\t<Divider sx={{ color: (theme) => theme.palette.primary.main }} />\n\t\t\t)}\n\t\t\t<ListItem\n\t\t\t\tsx={{\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\tjustifyContent: \"space-between\"\n\t\t\t\t}}\n\t\t\t\tclassName={classNames(\"options-input__dropdown-item\", {\n\t\t\t\t\t\"options-input__dropdown-item--empty\": !quantity\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<Box display=\"flex\" alignItems=\"center\">\n\t\t\t\t\t<Icon fontSize=\"small\" sx={{ color: \"black\" }} />\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tonChange={({ target }) => onChange(id, target.value)}\n\t\t\t\t\t\tonBlur={onBlur}\n\t\t\t\t\t\tvalue={inputQuantity}\n\t\t\t\t\t\tvariant=\"standard\"\n\t\t\t\t\t\tinputProps={{\n\t\t\t\t\t\t\tinputMode: \"numeric\",\n\t\t\t\t\t\t\tpattern: \"-?[0-9]*\",\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\ttextAlign: \"center\"\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\"data-testid\": \"dropdown-item-input\"\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t// eslint-disable-next-line react/jsx-no-duplicate-props\n\t\t\t\t\t\tInputProps={{ disableUnderline: true }}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-input\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Box\n\t\t\t\t\t\tdisplay=\"flex\"\n\t\t\t\t\t\tflexDirection=\"column\"\n\t\t\t\t\t\tjustifyContent=\"center\"\n\t\t\t\t\t\tpaddingRight={2}\n\t\t\t\t\t\tpaddingLeft={1}\n\t\t\t\t\t\tminWidth=\"5rem\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\tfontWeight={600}\n\t\t\t\t\t\t\tfontSize={13}\n\t\t\t\t\t\t\tsx={{ my: 0 }}\n\t\t\t\t\t\t\tcolor=\"black\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{label || id}\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t{details && (\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tposition=\"relative\"\n\t\t\t\t\t\t\t\theight=\"1rem\"\n\t\t\t\t\t\t\t\tdata-testid=\"option-details-container\"\n\t\t\t\t\t\t\t\tonMouseEnter={() => setShouldDisplayFullDetails(true)}\n\t\t\t\t\t\t\t\tonMouseLeave={() => setShouldDisplayFullDetails(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Typography\n\t\t\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t\t\tcolor=\"gray\"\n\t\t\t\t\t\t\t\t\tsx={{\n\t\t\t\t\t\t\t\t\t\tmy: 0,\n\t\t\t\t\t\t\t\t\t\tzIndex: 10000,\n\t\t\t\t\t\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t\t\t\t\t\t...(shouldDisplayFullDetails && {\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: quantity ? \"#ffffff\" : \"#eeeeee\",\n\t\t\t\t\t\t\t\t\t\t\tborder: \"thin solid #d3d3d3\"\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdata-testid=\"option-details\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{details?.length <= 15 || shouldDisplayFullDetails\n\t\t\t\t\t\t\t\t\t\t? details\n\t\t\t\t\t\t\t\t\t\t: `${details?.slice(0, 15)}...`}\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{displayMinMax && <MinMaxValueLabel min={min} max={max} color=\"gray\" />}\n\t\t\t\t\t</Box>\n\t\t\t\t</Box>\n\t\t\t\t<ButtonGroup\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tclassName=\"options-input__dropdown-item-buttons\"\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onIncrement(id)}\n\t\t\t\t\t\tdisabled={!!(max && quantity && quantity >= max)}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AddIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={onDecrement(id)}\n\t\t\t\t\t\tdisabled={!!(quantity && min) && quantity <= min}\n\t\t\t\t\t\tclassName=\"options-input__dropdown-item-button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tcolor={error ? \"error\" : \"primary\"}\n\t\t\t\t\t>\n\t\t\t\t\t\t<RemoveIcon sx={{ color: error ? \"black\" : \"primary\" }} />\n\t\t\t\t\t</Button>\n\t\t\t\t</ButtonGroup>\n\t\t\t</ListItem>\n\t\t</>\n\t);\n};\n\nexport default OptionsInputDropdownItem;\n"],"mappings":"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","names":["src_exports","__export","OptionsInput","__toCommonJS","import_react","import_classnames","import_Box","import_List","import_Popper","import_ClickAwayListener","import_KeyboardArrowDown","import_KeyboardArrowUp","DesignSystemIcons","import_Tooltip","import_Box","import_Typography","DesignSystemIcons","import_Typography","import_jsx_runtime","MinMaxValueLabel","min","max","color","Typography","capitalize","str","import_colors","import_react","import_jsx_runtime","OptionsInputContentItem","quantity","details","label","max","min","icon","displayMinMax","disabled","error","Icon","DesignSystemIcons","capitalize","itemsColor","Box","Tooltip","Typography","MinMaxValueLabel","options_input_content_item_default","import_react","import_classnames","import_Box","import_Typography","import_ButtonGroup","import_Divider","import_TextField","import_ListItem","import_Button","import_Add","import_Remove","DesignSystemIcons","import_jsx_runtime","OptionsInputDropdownItem","id","quantity","label","max","min","icon","details","inputQuantity","onChange","onBlur","index","displayMinMax","error","shouldDisplayFullDetails","setShouldDisplayFullDetails","Icon","DesignSystemIcons","capitalize","onIncrement","inputId","isValueBelowMin","onDecrement","isValueAboveMax","Divider","theme","ListItem","classNames","Box","TextField","target","Typography","MinMaxValueLabel","ButtonGroup","Button","AddIcon","RemoveIcon","options_input_dropdown_item_default","import_colors","import_react","import_styled","import_jsx_runtime","OptionsInput","options","onChange","onFocus","onBlur","persistentOptions","defaultValue","displayMinMax","disabled","readOnly","id","className","itemsGap","containerSx","error","helperText","helperTextSx","rest","currentOptions","setCurrentOptions","inputContainerWidth","setInputContainerWidth","inputContainerRef","anchorEl","setAnchorEl","open","option","quantity","optionsExceedingBoundaries","exceedingOptions","label","isError","toggleInput","event","currentTarget","currentAnchor","onInputFocus","currentValues","currentOption","onInputBlur","onValueChange","optionId","newValue","newQuantity","newCurrentOptions","maxQuantity","onDropdownItemBlur","finalQuantity","Box","classNames","theme","icon","DesignSystemIcons","capitalize","options_input_content_item_default","KeyboardArrowUpIcon","KeyboardArrowDownIcon","messagePluralForm","ClickAwayListener","Popper","List","index","options_input_dropdown_item_default"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@talixo-ds/options-input",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"types": "./dist/index.d.ts",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"build": "rm -rf dist && tsup src/index.ts --tsconfig tsconfig.build.json --config ../../tsup.config.ts && npm run inject-styles",
|
|
16
16
|
"inject-styles": "echo 'require(\"./index.css\");' | cat - ./dist/index.js > temp && mv temp ./dist/index.js && echo 'import \"./index.css\";' | cat - ./dist/esm/index.js > temp && mv temp ./dist/esm/index.js",
|
|
17
17
|
"test": "vitest",
|
|
18
|
+
"test:ci": "vitest run",
|
|
18
19
|
"check-exports": "attw --pack ."
|
|
19
20
|
},
|
|
20
21
|
"dependencies": {
|
|
@@ -22,8 +23,8 @@
|
|
|
22
23
|
"@emotion/styled": "^11.13.0",
|
|
23
24
|
"@mui/icons-material": "^5.16.4",
|
|
24
25
|
"@mui/material": "^5.16.4",
|
|
25
|
-
"@talixo-ds/icons": "^1.0.
|
|
26
|
+
"@talixo-ds/icons": "^1.0.7",
|
|
26
27
|
"classnames": "^2.5.1"
|
|
27
28
|
},
|
|
28
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "285f92ff51f1ad280df03b5a3ac9319a93536a08"
|
|
29
30
|
}
|