@czi-sds/components 20.1.2 → 20.3.0
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.cjs.d.ts +2 -1
- package/dist/index.cjs.js +49 -15
- package/dist/index.esm.d.ts +2 -1
- package/dist/index.esm.js +49 -15
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.d.ts
CHANGED
|
@@ -1179,9 +1179,10 @@ interface ComplexFilterProps<T extends DefaultAutocompleteOption, Multiple exten
|
|
|
1179
1179
|
className?: string;
|
|
1180
1180
|
PopperComponent?: typeof StyledPopper$1;
|
|
1181
1181
|
InputDropdownComponent?: typeof InputDropdown;
|
|
1182
|
+
isTriggerChangeOnOptionClick?: boolean;
|
|
1182
1183
|
}
|
|
1183
1184
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
1184
|
-
declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
|
|
1185
|
+
declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, isTriggerChangeOnOptionClick, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
|
|
1185
1186
|
type DialogPaperProps = PaperProps;
|
|
1186
1187
|
/**
|
|
1187
1188
|
* @see https://mui.com/material-ui/react-paper/
|
package/dist/index.cjs.js
CHANGED
|
@@ -4568,7 +4568,13 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4568
4568
|
},
|
|
4569
4569
|
], open: popperOpen, anchorEl: anchorEl, placement: PopperPlacement, disablePortal: true }, PopperBaseProps, { children: jsxRuntime.jsx(StyledAutocompleteGroupWrapper, { className: "SdsAutocompleteMultiColumn-wrapper", children: options.map(function (autocompleteOptions) { return (jsxRuntime.jsx(AutocompleteGroup, __assign({ autocompleteProps: autocompleteOptions, onValueChange: defaultOnValueChange, value: autocompleteMultiColumnValue
|
|
4570
4570
|
? autocompleteMultiColumnValue[autocompleteOptions.name]
|
|
4571
|
-
: undefined, multiple: multiple, label: label,
|
|
4571
|
+
: undefined, multiple: multiple, label: label,
|
|
4572
|
+
/**
|
|
4573
|
+
* (masoudmanson): In a multi-column autocomplete, the search input for
|
|
4574
|
+
* inner autocompletes should remain hidden and unfocused when the parent
|
|
4575
|
+
* input is focused. This prevents blurring of the main search input.
|
|
4576
|
+
*/
|
|
4577
|
+
InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
|
|
4572
4578
|
function clearInput() {
|
|
4573
4579
|
setInputValue("");
|
|
4574
4580
|
/**
|
|
@@ -5338,7 +5344,7 @@ var DropdownMenu = function (props) {
|
|
|
5338
5344
|
: width });
|
|
5339
5345
|
}, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
|
|
5340
5346
|
var DefaultInputBaseProps = React.useMemo(function () {
|
|
5341
|
-
return __assign(__assign({}, InputBaseProps), { onClick: noop });
|
|
5347
|
+
return __assign(__assign({}, InputBaseProps), { autoFocus: true, onClick: noop });
|
|
5342
5348
|
}, [InputBaseProps]);
|
|
5343
5349
|
return (jsxRuntime.jsx(PopperComponent, __assign({ id: id, modifiers: [
|
|
5344
5350
|
{
|
|
@@ -5558,12 +5564,12 @@ function renderDetailsText(_a) {
|
|
|
5558
5564
|
var tagSizeS = function (props) {
|
|
5559
5565
|
var spaces = getSpaces(props);
|
|
5560
5566
|
var iconSizes = getIconSizes(props);
|
|
5561
|
-
return react.css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n
|
|
5567
|
+
return react.css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: white;\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: white;\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
5562
5568
|
};
|
|
5563
5569
|
var tagSizeL = function (props) {
|
|
5564
5570
|
var spaces = getSpaces(props);
|
|
5565
5571
|
var iconSizes = getIconSizes(props);
|
|
5566
|
-
return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n
|
|
5572
|
+
return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: white;\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: white;\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
5567
5573
|
};
|
|
5568
5574
|
var rounded = function (props) {
|
|
5569
5575
|
var corners = getCorners(props);
|
|
@@ -5705,11 +5711,11 @@ var Chips = function (_a) {
|
|
|
5705
5711
|
return null;
|
|
5706
5712
|
if (!multiple) {
|
|
5707
5713
|
var name_1 = value.name;
|
|
5708
|
-
return jsxRuntime.jsx(TagFilter, { label: name_1, onDelete: onDelete });
|
|
5714
|
+
return (jsxRuntime.jsx(TagFilter, { label: name_1, onDelete: onDelete, onClick: function () { return onDelete(name_1); } }));
|
|
5709
5715
|
}
|
|
5710
5716
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.map(function (item) {
|
|
5711
5717
|
var name = item.name;
|
|
5712
|
-
return (jsxRuntime.jsx(TagFilter, { label: name, onDelete: function () { return onDelete(item); } }, name));
|
|
5718
|
+
return (jsxRuntime.jsx(TagFilter, { label: name, onDelete: function () { return onDelete(item); }, onClick: function () { return onDelete(item); } }, name));
|
|
5713
5719
|
}) }));
|
|
5714
5720
|
};
|
|
5715
5721
|
|
|
@@ -5722,11 +5728,16 @@ var templateObject_1$v, templateObject_2$g;
|
|
|
5722
5728
|
|
|
5723
5729
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
5724
5730
|
var ComplexFilter = function (_a) {
|
|
5725
|
-
var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent"]);
|
|
5731
|
+
var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, _h = _a.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _h === void 0 ? false : _h, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent", "isTriggerChangeOnOptionClick"]);
|
|
5726
5732
|
var isControlled = propValue !== undefined;
|
|
5727
|
-
var
|
|
5728
|
-
var
|
|
5729
|
-
var
|
|
5733
|
+
var _j = React.useState(false), open = _j[0], setOpen = _j[1];
|
|
5734
|
+
var _k = React.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
|
|
5735
|
+
var _l = React.useState(getInitialValue()), value = _l[0], setValue = _l[1];
|
|
5736
|
+
var _m = React.useState(getInitialValue()), pendingValue = _m[0], setPendingValue = _m[1];
|
|
5737
|
+
React.useEffect(function () {
|
|
5738
|
+
onChange(value);
|
|
5739
|
+
setPendingValue(value);
|
|
5740
|
+
}, [onChange, value]);
|
|
5730
5741
|
React.useEffect(function () {
|
|
5731
5742
|
if (isControlled) {
|
|
5732
5743
|
setValue(propValue);
|
|
@@ -5735,9 +5746,12 @@ var ComplexFilter = function (_a) {
|
|
|
5735
5746
|
// * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
|
|
5736
5747
|
// * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
|
|
5737
5748
|
// * such as sliders for ranges, inline multi selects, etc.
|
|
5738
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1,
|
|
5749
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, rest)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] }), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: multiple ? pendingValue : value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
|
|
5739
5750
|
function handleClick(event) {
|
|
5740
5751
|
if (open) {
|
|
5752
|
+
if (multiple) {
|
|
5753
|
+
setValue(pendingValue);
|
|
5754
|
+
}
|
|
5741
5755
|
setOpen(false);
|
|
5742
5756
|
if (anchorEl) {
|
|
5743
5757
|
anchorEl.focus();
|
|
@@ -5745,6 +5759,9 @@ var ComplexFilter = function (_a) {
|
|
|
5745
5759
|
setAnchorEl(null);
|
|
5746
5760
|
}
|
|
5747
5761
|
else {
|
|
5762
|
+
if (multiple) {
|
|
5763
|
+
setPendingValue(value);
|
|
5764
|
+
}
|
|
5748
5765
|
setAnchorEl(event.currentTarget);
|
|
5749
5766
|
setOpen(true);
|
|
5750
5767
|
}
|
|
@@ -5752,6 +5769,9 @@ var ComplexFilter = function (_a) {
|
|
|
5752
5769
|
function handleClose() {
|
|
5753
5770
|
if (open) {
|
|
5754
5771
|
setOpen(false);
|
|
5772
|
+
if (multiple) {
|
|
5773
|
+
setValue(pendingValue);
|
|
5774
|
+
}
|
|
5755
5775
|
}
|
|
5756
5776
|
}
|
|
5757
5777
|
function handleMenuSelectClose(event, reason) {
|
|
@@ -5761,11 +5781,20 @@ var ComplexFilter = function (_a) {
|
|
|
5761
5781
|
}
|
|
5762
5782
|
}
|
|
5763
5783
|
function handleChange(event, newValue) {
|
|
5784
|
+
if (multiple) {
|
|
5785
|
+
if (isTriggerChangeOnOptionClick) {
|
|
5786
|
+
setPendingValue(newValue);
|
|
5787
|
+
return setValueAndCallOnChange(event, newValue);
|
|
5788
|
+
}
|
|
5789
|
+
return setPendingValue(newValue);
|
|
5790
|
+
}
|
|
5791
|
+
setValueAndCallOnChange(event, newValue);
|
|
5792
|
+
if (!multiple)
|
|
5793
|
+
setOpen(false);
|
|
5794
|
+
}
|
|
5795
|
+
function setValueAndCallOnChange(event, newValue) {
|
|
5764
5796
|
setValue(newValue);
|
|
5765
5797
|
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
5766
|
-
if (!multiple) {
|
|
5767
|
-
setOpen(false);
|
|
5768
|
-
}
|
|
5769
5798
|
}
|
|
5770
5799
|
function handleDelete(option) {
|
|
5771
5800
|
if (!multiple) {
|
|
@@ -5774,6 +5803,11 @@ var ComplexFilter = function (_a) {
|
|
|
5774
5803
|
var newValue = (value === null || value === void 0 ? void 0 : value.filter(function (item) { return item !== option; })) || null;
|
|
5775
5804
|
setValue(newValue);
|
|
5776
5805
|
}
|
|
5806
|
+
function getInitialValue() {
|
|
5807
|
+
return multiple
|
|
5808
|
+
? []
|
|
5809
|
+
: null;
|
|
5810
|
+
}
|
|
5777
5811
|
};
|
|
5778
5812
|
|
|
5779
5813
|
var DialogContext = React.createContext({ sdsSize: "m" });
|
|
@@ -5964,7 +5998,7 @@ var Dropdown = function (props) {
|
|
|
5964
5998
|
setValue(propValue);
|
|
5965
5999
|
}
|
|
5966
6000
|
}, [isControlled, propValue]);
|
|
5967
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps,
|
|
6001
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, rest)), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
|
|
5968
6002
|
function getInitialValue() {
|
|
5969
6003
|
return multiple
|
|
5970
6004
|
? []
|
package/dist/index.esm.d.ts
CHANGED
|
@@ -1179,9 +1179,10 @@ interface ComplexFilterProps<T extends DefaultAutocompleteOption, Multiple exten
|
|
|
1179
1179
|
className?: string;
|
|
1180
1180
|
PopperComponent?: typeof StyledPopper$1;
|
|
1181
1181
|
InputDropdownComponent?: typeof InputDropdown;
|
|
1182
|
+
isTriggerChangeOnOptionClick?: boolean;
|
|
1182
1183
|
}
|
|
1183
1184
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
1184
|
-
declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
|
|
1185
|
+
declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, isTriggerChangeOnOptionClick, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
|
|
1185
1186
|
type DialogPaperProps = PaperProps;
|
|
1186
1187
|
/**
|
|
1187
1188
|
* @see https://mui.com/material-ui/react-paper/
|
package/dist/index.esm.js
CHANGED
|
@@ -4548,7 +4548,13 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4548
4548
|
},
|
|
4549
4549
|
], open: popperOpen, anchorEl: anchorEl, placement: PopperPlacement, disablePortal: true }, PopperBaseProps, { children: jsx(StyledAutocompleteGroupWrapper, { className: "SdsAutocompleteMultiColumn-wrapper", children: options.map(function (autocompleteOptions) { return (jsx(AutocompleteGroup, __assign({ autocompleteProps: autocompleteOptions, onValueChange: defaultOnValueChange, value: autocompleteMultiColumnValue
|
|
4550
4550
|
? autocompleteMultiColumnValue[autocompleteOptions.name]
|
|
4551
|
-
: undefined, multiple: multiple, label: label,
|
|
4551
|
+
: undefined, multiple: multiple, label: label,
|
|
4552
|
+
/**
|
|
4553
|
+
* (masoudmanson): In a multi-column autocomplete, the search input for
|
|
4554
|
+
* inner autocompletes should remain hidden and unfocused when the parent
|
|
4555
|
+
* input is focused. This prevents blurring of the main search input.
|
|
4556
|
+
*/
|
|
4557
|
+
InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
|
|
4552
4558
|
function clearInput() {
|
|
4553
4559
|
setInputValue("");
|
|
4554
4560
|
/**
|
|
@@ -5318,7 +5324,7 @@ var DropdownMenu = function (props) {
|
|
|
5318
5324
|
: width });
|
|
5319
5325
|
}, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
|
|
5320
5326
|
var DefaultInputBaseProps = useMemo(function () {
|
|
5321
|
-
return __assign(__assign({}, InputBaseProps), { onClick: noop });
|
|
5327
|
+
return __assign(__assign({}, InputBaseProps), { autoFocus: true, onClick: noop });
|
|
5322
5328
|
}, [InputBaseProps]);
|
|
5323
5329
|
return (jsx(PopperComponent, __assign({ id: id, modifiers: [
|
|
5324
5330
|
{
|
|
@@ -5538,12 +5544,12 @@ function renderDetailsText(_a) {
|
|
|
5538
5544
|
var tagSizeS = function (props) {
|
|
5539
5545
|
var spaces = getSpaces(props);
|
|
5540
5546
|
var iconSizes = getIconSizes(props);
|
|
5541
|
-
return css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n
|
|
5547
|
+
return css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: white;\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: white;\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
5542
5548
|
};
|
|
5543
5549
|
var tagSizeL = function (props) {
|
|
5544
5550
|
var spaces = getSpaces(props);
|
|
5545
5551
|
var iconSizes = getIconSizes(props);
|
|
5546
|
-
return css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n
|
|
5552
|
+
return css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: white;\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: white;\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
5547
5553
|
};
|
|
5548
5554
|
var rounded = function (props) {
|
|
5549
5555
|
var corners = getCorners(props);
|
|
@@ -5685,11 +5691,11 @@ var Chips = function (_a) {
|
|
|
5685
5691
|
return null;
|
|
5686
5692
|
if (!multiple) {
|
|
5687
5693
|
var name_1 = value.name;
|
|
5688
|
-
return jsx(TagFilter, { label: name_1, onDelete: onDelete });
|
|
5694
|
+
return (jsx(TagFilter, { label: name_1, onDelete: onDelete, onClick: function () { return onDelete(name_1); } }));
|
|
5689
5695
|
}
|
|
5690
5696
|
return (jsx(Fragment, { children: value.map(function (item) {
|
|
5691
5697
|
var name = item.name;
|
|
5692
|
-
return (jsx(TagFilter, { label: name, onDelete: function () { return onDelete(item); } }, name));
|
|
5698
|
+
return (jsx(TagFilter, { label: name, onDelete: function () { return onDelete(item); }, onClick: function () { return onDelete(item); } }, name));
|
|
5693
5699
|
}) }));
|
|
5694
5700
|
};
|
|
5695
5701
|
|
|
@@ -5702,11 +5708,16 @@ var templateObject_1$v, templateObject_2$g;
|
|
|
5702
5708
|
|
|
5703
5709
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
5704
5710
|
var ComplexFilter = function (_a) {
|
|
5705
|
-
var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent"]);
|
|
5711
|
+
var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, _h = _a.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _h === void 0 ? false : _h, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent", "isTriggerChangeOnOptionClick"]);
|
|
5706
5712
|
var isControlled = propValue !== undefined;
|
|
5707
|
-
var
|
|
5708
|
-
var
|
|
5709
|
-
var
|
|
5713
|
+
var _j = useState(false), open = _j[0], setOpen = _j[1];
|
|
5714
|
+
var _k = useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
|
|
5715
|
+
var _l = useState(getInitialValue()), value = _l[0], setValue = _l[1];
|
|
5716
|
+
var _m = useState(getInitialValue()), pendingValue = _m[0], setPendingValue = _m[1];
|
|
5717
|
+
useEffect(function () {
|
|
5718
|
+
onChange(value);
|
|
5719
|
+
setPendingValue(value);
|
|
5720
|
+
}, [onChange, value]);
|
|
5710
5721
|
useEffect(function () {
|
|
5711
5722
|
if (isControlled) {
|
|
5712
5723
|
setValue(propValue);
|
|
@@ -5715,9 +5726,12 @@ var ComplexFilter = function (_a) {
|
|
|
5715
5726
|
// * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
|
|
5716
5727
|
// * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
|
|
5717
5728
|
// * such as sliders for ranges, inline multi selects, etc.
|
|
5718
|
-
return (jsxs(Fragment, { children: [jsxs(Wrapper$1,
|
|
5729
|
+
return (jsxs(Fragment, { children: [jsxs(Wrapper$1, { children: [jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, rest)), jsx(StyledChipsWrapper, { children: jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] }), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: multiple ? pendingValue : value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
|
|
5719
5730
|
function handleClick(event) {
|
|
5720
5731
|
if (open) {
|
|
5732
|
+
if (multiple) {
|
|
5733
|
+
setValue(pendingValue);
|
|
5734
|
+
}
|
|
5721
5735
|
setOpen(false);
|
|
5722
5736
|
if (anchorEl) {
|
|
5723
5737
|
anchorEl.focus();
|
|
@@ -5725,6 +5739,9 @@ var ComplexFilter = function (_a) {
|
|
|
5725
5739
|
setAnchorEl(null);
|
|
5726
5740
|
}
|
|
5727
5741
|
else {
|
|
5742
|
+
if (multiple) {
|
|
5743
|
+
setPendingValue(value);
|
|
5744
|
+
}
|
|
5728
5745
|
setAnchorEl(event.currentTarget);
|
|
5729
5746
|
setOpen(true);
|
|
5730
5747
|
}
|
|
@@ -5732,6 +5749,9 @@ var ComplexFilter = function (_a) {
|
|
|
5732
5749
|
function handleClose() {
|
|
5733
5750
|
if (open) {
|
|
5734
5751
|
setOpen(false);
|
|
5752
|
+
if (multiple) {
|
|
5753
|
+
setValue(pendingValue);
|
|
5754
|
+
}
|
|
5735
5755
|
}
|
|
5736
5756
|
}
|
|
5737
5757
|
function handleMenuSelectClose(event, reason) {
|
|
@@ -5741,11 +5761,20 @@ var ComplexFilter = function (_a) {
|
|
|
5741
5761
|
}
|
|
5742
5762
|
}
|
|
5743
5763
|
function handleChange(event, newValue) {
|
|
5764
|
+
if (multiple) {
|
|
5765
|
+
if (isTriggerChangeOnOptionClick) {
|
|
5766
|
+
setPendingValue(newValue);
|
|
5767
|
+
return setValueAndCallOnChange(event, newValue);
|
|
5768
|
+
}
|
|
5769
|
+
return setPendingValue(newValue);
|
|
5770
|
+
}
|
|
5771
|
+
setValueAndCallOnChange(event, newValue);
|
|
5772
|
+
if (!multiple)
|
|
5773
|
+
setOpen(false);
|
|
5774
|
+
}
|
|
5775
|
+
function setValueAndCallOnChange(event, newValue) {
|
|
5744
5776
|
setValue(newValue);
|
|
5745
5777
|
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
5746
|
-
if (!multiple) {
|
|
5747
|
-
setOpen(false);
|
|
5748
|
-
}
|
|
5749
5778
|
}
|
|
5750
5779
|
function handleDelete(option) {
|
|
5751
5780
|
if (!multiple) {
|
|
@@ -5754,6 +5783,11 @@ var ComplexFilter = function (_a) {
|
|
|
5754
5783
|
var newValue = (value === null || value === void 0 ? void 0 : value.filter(function (item) { return item !== option; })) || null;
|
|
5755
5784
|
setValue(newValue);
|
|
5756
5785
|
}
|
|
5786
|
+
function getInitialValue() {
|
|
5787
|
+
return multiple
|
|
5788
|
+
? []
|
|
5789
|
+
: null;
|
|
5790
|
+
}
|
|
5757
5791
|
};
|
|
5758
5792
|
|
|
5759
5793
|
var DialogContext = createContext({ sdsSize: "m" });
|
|
@@ -5944,7 +5978,7 @@ var Dropdown = function (props) {
|
|
|
5944
5978
|
setValue(propValue);
|
|
5945
5979
|
}
|
|
5946
5980
|
}, [isControlled, propValue]);
|
|
5947
|
-
return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps,
|
|
5981
|
+
return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
|
|
5948
5982
|
function getInitialValue() {
|
|
5949
5983
|
return multiple
|
|
5950
5984
|
? []
|