@talixo-ds/options-input 1.0.5 → 1.0.6
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/options-input.d.ts +3 -1
- package/dist/options-input.js +33 -31
- package/dist/options-input.js.map +1 -1
- package/package.json +2 -2
- package/src/options-input.tsx +84 -78
package/dist/options-input.d.ts
CHANGED
|
@@ -37,5 +37,7 @@ export type OptionsInputProps = {
|
|
|
37
37
|
error?: boolean;
|
|
38
38
|
/** Additional content displayed with small font under the input */
|
|
39
39
|
helperText?: ReactNode;
|
|
40
|
+
/** Custom styles for helper text container */
|
|
41
|
+
helperTextSx?: SxProps;
|
|
40
42
|
};
|
|
41
|
-
export declare const OptionsInput: ({ options, onChange, onFocus, onBlur, persistentOptions, defaultValue, displayMinMax, disabled, readOnly, id, className, itemsGap, containerSx, error, helperText, ...rest }: OptionsInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare const OptionsInput: ({ options, onChange, onFocus, onBlur, persistentOptions, defaultValue, displayMinMax, disabled, readOnly, id, className, itemsGap, containerSx, error, helperText, helperTextSx, ...rest }: OptionsInputProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/options-input.js
CHANGED
|
@@ -15,7 +15,7 @@ import "./styles.scss";
|
|
|
15
15
|
import "@emotion/react";
|
|
16
16
|
import "@emotion/styled";
|
|
17
17
|
import { capitalize } from "./utils";
|
|
18
|
-
export const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOptions = [], defaultValue, displayMinMax = false, disabled = false, readOnly = false, id, className, itemsGap = 1, containerSx = [], error = false, helperText, ...rest }) => {
|
|
18
|
+
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 }) => {
|
|
19
19
|
const [currentOptions, setCurrentOptions] = useState([]);
|
|
20
20
|
const [inputContainerWidth, setInputContainerWidth] = useState(0);
|
|
21
21
|
const inputContainerRef = useRef();
|
|
@@ -99,36 +99,38 @@ export const OptionsInput = ({ options, onChange, onFocus, onBlur, persistentOpt
|
|
|
99
99
|
inputQuantity: finalQuantity < (option?.min ?? -Infinity) ? option?.min : maxQuantity
|
|
100
100
|
};
|
|
101
101
|
}));
|
|
102
|
-
return (_jsxs(_Fragment, { children: [_jsxs(Box, { id: id, onClick: toggleInput, onBlur: onInputBlur, onFocus: onInputFocus, ref: inputContainerRef, className: classNames("options-input__container", className, {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
102
|
+
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, {
|
|
103
|
+
"options-input__container--open": open,
|
|
104
|
+
"options-input__container--disabled": disabled,
|
|
105
|
+
"options-input__container--read-only": readOnly,
|
|
106
|
+
"options-input__container--error": isError
|
|
107
|
+
}), sx: [
|
|
108
|
+
{ "&:hover": { borderColor: "#d3d3d3" } },
|
|
109
|
+
...(Array.isArray(containerSx) ? containerSx : [containerSx]),
|
|
110
|
+
open && {
|
|
111
|
+
borderColor: (theme) => theme.palette.primary.main,
|
|
112
|
+
"&:hover": { borderColor: (theme) => theme.palette.primary.main }
|
|
113
|
+
},
|
|
114
|
+
isError && {
|
|
115
|
+
borderColor: red[700],
|
|
116
|
+
"&:hover": { borderColor: red[700] }
|
|
117
|
+
}
|
|
118
|
+
], "data-testid": rest["data-testid"] || "options-input-container", tabIndex: 0, children: [_jsx(Box, { display: "flex", gap: itemsGap, children: currentOptions
|
|
119
|
+
.filter(({ quantity, id: optionId, icon }) => !!(DesignSystemIcons[capitalize(icon)] &&
|
|
120
|
+
(quantity !== 0 || persistentOptions?.includes(optionId))))
|
|
121
|
+
.map((option) => (_jsx(OptionsInputContentItem, { item: option, disabled: disabled, displayMinMax: displayMinMax, error: !!(option?.label && optionsExceedingBoundaries.includes(option.label)) }, option.id))) }), !readOnly &&
|
|
122
|
+
(open ? (_jsx(KeyboardArrowUpIcon, { sx: { color: isError ? red[700] : "primary" } })) : (_jsx(KeyboardArrowDownIcon, { sx: {
|
|
123
|
+
color: (theme) => disabled ? theme.palette.grey[400] : theme.palette.action.focus
|
|
124
|
+
} })))] }), (helperText || isError) && (_jsx(Box, { sx: {
|
|
125
|
+
fontSize: "small",
|
|
126
|
+
...(helperTextSx || {}),
|
|
127
|
+
...(isError ? { color: red[700] } : {})
|
|
128
|
+
}, marginTop: 1, marginLeft: 2, width: inputContainerWidth, children: optionsExceedingBoundaries.length
|
|
129
|
+
? (() => {
|
|
130
|
+
const messagePluralForm = optionsExceedingBoundaries.length > 1 ? "s" : "";
|
|
131
|
+
return `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(", ")} option${messagePluralForm} ${messagePluralForm ? "are" : "is"} out of range.`;
|
|
132
|
+
})()
|
|
133
|
+
: 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: {
|
|
132
134
|
bgcolor: "Background",
|
|
133
135
|
border: (theme) => `thin solid ${isError ? red[700] : theme.palette.primary.main}`
|
|
134
136
|
}, children: currentOptions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-input.js","sourceRoot":"","sources":["../src/options-input.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EACb,QAAQ,EACR,SAAS,EACT,WAAW,EAEX,OAAO,EACP,MAAM,EACN,MAAM,OAAO,CAAC;AACf,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,iBAAiB,MAAM,iCAAiC,CAAC;AAChE,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,mBAAmB,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,iBAAiB,MAAM,kBAAkB,CAAC;AAGtD,OAAO,uBAAuB,MAAM,yCAAyC,CAAC;AAC9E,OAAO,wBAAwB,MAAM,0CAA0C,CAAC;AAChF,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,eAAe,CAAC;AAEvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"options-input.js","sourceRoot":"","sources":["../src/options-input.tsx"],"names":[],"mappings":"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"}
|
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.6",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"publishConfig": {
|
|
@@ -13,5 +13,5 @@
|
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@talixo-ds/icons": "^1.0.3"
|
|
15
15
|
},
|
|
16
|
-
"gitHead": "
|
|
16
|
+
"gitHead": "c14163231e3044d4f58413f1cd5344762f688c21"
|
|
17
17
|
}
|
package/src/options-input.tsx
CHANGED
|
@@ -58,6 +58,8 @@ export type OptionsInputProps = {
|
|
|
58
58
|
error?: boolean;
|
|
59
59
|
/** Additional content displayed with small font under the input */
|
|
60
60
|
helperText?: ReactNode;
|
|
61
|
+
/** Custom styles for helper text container */
|
|
62
|
+
helperTextSx?: SxProps;
|
|
61
63
|
};
|
|
62
64
|
|
|
63
65
|
export const OptionsInput = ({
|
|
@@ -76,6 +78,7 @@ export const OptionsInput = ({
|
|
|
76
78
|
containerSx = [],
|
|
77
79
|
error = false,
|
|
78
80
|
helperText,
|
|
81
|
+
helperTextSx,
|
|
79
82
|
...rest
|
|
80
83
|
}: OptionsInputProps) => {
|
|
81
84
|
const [currentOptions, setCurrentOptions] = useState<OptionsInputOption[]>([]);
|
|
@@ -224,88 +227,91 @@ export const OptionsInput = ({
|
|
|
224
227
|
|
|
225
228
|
return (
|
|
226
229
|
<>
|
|
227
|
-
<Box
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
"options-input__container
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
{
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
{
|
|
256
|
-
|
|
257
|
-
(
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
230
|
+
<Box>
|
|
231
|
+
<Box
|
|
232
|
+
id={id}
|
|
233
|
+
onClick={toggleInput}
|
|
234
|
+
onBlur={onInputBlur}
|
|
235
|
+
onFocus={onInputFocus}
|
|
236
|
+
ref={inputContainerRef}
|
|
237
|
+
className={classNames("options-input__container", className, {
|
|
238
|
+
"options-input__container--open": open,
|
|
239
|
+
"options-input__container--disabled": disabled,
|
|
240
|
+
"options-input__container--read-only": readOnly,
|
|
241
|
+
"options-input__container--error": isError
|
|
242
|
+
})}
|
|
243
|
+
sx={[
|
|
244
|
+
{ "&:hover": { borderColor: "#d3d3d3" } },
|
|
245
|
+
...(Array.isArray(containerSx) ? containerSx : [containerSx]),
|
|
246
|
+
open && {
|
|
247
|
+
borderColor: (theme) => theme.palette.primary.main,
|
|
248
|
+
"&:hover": { borderColor: (theme) => theme.palette.primary.main }
|
|
249
|
+
},
|
|
250
|
+
isError && {
|
|
251
|
+
borderColor: red[700],
|
|
252
|
+
"&:hover": { borderColor: red[700] }
|
|
253
|
+
}
|
|
254
|
+
]}
|
|
255
|
+
data-testid={rest["data-testid"] || "options-input-container"}
|
|
256
|
+
tabIndex={0}
|
|
257
|
+
>
|
|
258
|
+
<Box display="flex" gap={itemsGap}>
|
|
259
|
+
{currentOptions
|
|
260
|
+
.filter(
|
|
261
|
+
({ quantity, id: optionId, icon }) =>
|
|
262
|
+
!!(
|
|
263
|
+
DesignSystemIcons[
|
|
264
|
+
capitalize(icon) as keyof typeof DesignSystemIcons
|
|
265
|
+
] &&
|
|
266
|
+
(quantity !== 0 || persistentOptions?.includes(optionId))
|
|
267
|
+
)
|
|
268
|
+
)
|
|
269
|
+
.map((option) => (
|
|
270
|
+
<OptionsInputContentItem
|
|
271
|
+
key={option.id}
|
|
272
|
+
item={option}
|
|
273
|
+
disabled={disabled}
|
|
274
|
+
displayMinMax={displayMinMax}
|
|
275
|
+
error={
|
|
276
|
+
!!(option?.label && optionsExceedingBoundaries.includes(option.label))
|
|
277
|
+
}
|
|
278
|
+
/>
|
|
279
|
+
))}
|
|
280
|
+
</Box>
|
|
281
|
+
{!readOnly &&
|
|
282
|
+
(open ? (
|
|
283
|
+
<KeyboardArrowUpIcon sx={{ color: isError ? red[700] : "primary" }} />
|
|
284
|
+
) : (
|
|
285
|
+
<KeyboardArrowDownIcon
|
|
286
|
+
sx={{
|
|
287
|
+
color: (theme) =>
|
|
288
|
+
disabled ? theme.palette.grey[400] : theme.palette.action.focus
|
|
289
|
+
}}
|
|
274
290
|
/>
|
|
275
291
|
))}
|
|
276
292
|
</Box>
|
|
277
|
-
{
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
...(isError ? { color: red[700] } : {})
|
|
293
|
-
}}
|
|
294
|
-
marginTop={1}
|
|
295
|
-
marginLeft={2}
|
|
296
|
-
width={inputContainerWidth}
|
|
297
|
-
fontSize="small"
|
|
298
|
-
>
|
|
299
|
-
{optionsExceedingBoundaries.length
|
|
300
|
-
? (() => {
|
|
301
|
-
const messagePluralForm =
|
|
302
|
-
optionsExceedingBoundaries.length > 1 ? "s" : "";
|
|
293
|
+
{(helperText || isError) && (
|
|
294
|
+
<Box
|
|
295
|
+
sx={{
|
|
296
|
+
fontSize: "small",
|
|
297
|
+
...(helperTextSx || {}),
|
|
298
|
+
...(isError ? { color: red[700] } : {})
|
|
299
|
+
}}
|
|
300
|
+
marginTop={1}
|
|
301
|
+
marginLeft={2}
|
|
302
|
+
width={inputContainerWidth}
|
|
303
|
+
>
|
|
304
|
+
{optionsExceedingBoundaries.length
|
|
305
|
+
? (() => {
|
|
306
|
+
const messagePluralForm =
|
|
307
|
+
optionsExceedingBoundaries.length > 1 ? "s" : "";
|
|
303
308
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
+
return `Value${messagePluralForm} for ${optionsExceedingBoundaries.join(", ")} option${messagePluralForm} ${messagePluralForm ? "are" : "is"} out of range.`;
|
|
310
|
+
})()
|
|
311
|
+
: helperText}
|
|
312
|
+
</Box>
|
|
313
|
+
)}
|
|
314
|
+
</Box>
|
|
309
315
|
<ClickAwayListener onClickAway={() => open && setAnchorEl(undefined)}>
|
|
310
316
|
<Popper
|
|
311
317
|
open={open}
|