@monolith-forensics/monolith-ui 1.1.71 → 1.1.72
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.
|
@@ -2,5 +2,5 @@ import { SelectBoxProps } from "..";
|
|
|
2
2
|
export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
3
3
|
width?: string | number | null;
|
|
4
4
|
}>> & string;
|
|
5
|
-
declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, OptionTooltip, DropDownProps, debounceTime, sort, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
5
|
+
declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, OptionTooltip, DropDownProps, debounceTime, sort, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
6
6
|
export default SelectBox;
|
|
@@ -160,7 +160,7 @@ const StyledItem = styled.div `
|
|
|
160
160
|
color: ${(props) => props.theme.palette.text.primary};
|
|
161
161
|
}
|
|
162
162
|
`;
|
|
163
|
-
const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
|
|
163
|
+
const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
|
|
164
164
|
DropDownProps = {}, debounceTime = 300, sort = false, }) => {
|
|
165
165
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
166
166
|
const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
|
|
@@ -403,16 +403,14 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
|
|
|
403
403
|
}, [refs.floating, refs.reference, handleBlur]);
|
|
404
404
|
// Handle default value
|
|
405
405
|
useEffect(() => {
|
|
406
|
-
if (
|
|
407
|
-
const isOption =
|
|
408
|
-
const searchPattern = isOption
|
|
409
|
-
? defaultValue.value
|
|
410
|
-
: defaultValue;
|
|
406
|
+
if (value) {
|
|
407
|
+
const isOption = value.value !== undefined;
|
|
408
|
+
const searchPattern = isOption ? value.value : value;
|
|
411
409
|
setSelected(data.find((item) => isObjectArray
|
|
412
410
|
? item.value === searchPattern
|
|
413
411
|
: item === searchPattern) || null);
|
|
414
412
|
}
|
|
415
|
-
}, [data,
|
|
413
|
+
}, [data, value, isObjectArray]);
|
|
416
414
|
// handle input value change
|
|
417
415
|
useEffect(() => {
|
|
418
416
|
if (inputRef.current) {
|
package/dist/TagBox/TagBox.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { TagBoxProps } from "./types";
|
|
2
|
-
declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, renderOption, OptionTooltip, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
2
|
+
declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, renderOption, OptionTooltip, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
3
3
|
export default TagBox;
|
package/dist/TagBox/TagBox.js
CHANGED
|
@@ -292,11 +292,11 @@ const EmptyComponent = styled.div `
|
|
|
292
292
|
font-size: 1 rem;
|
|
293
293
|
color: ${(props) => props.theme.palette.text.secondary};
|
|
294
294
|
`;
|
|
295
|
-
const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, renderOption, OptionTooltip, }) => {
|
|
296
|
-
var _a, _b, _c, _d, _e, _f;
|
|
295
|
+
const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], value = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, renderOption, OptionTooltip, }) => {
|
|
296
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
297
297
|
const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
|
|
298
298
|
const [isOpen, setIsOpen] = useState(false);
|
|
299
|
-
const [selectedItems, setSelectedItems] = useState(
|
|
299
|
+
const [selectedItems, setSelectedItems] = useState(value);
|
|
300
300
|
const [preSelected, setPreSelected] = useState(null);
|
|
301
301
|
const [customItems, setCustomItems] = useState([]);
|
|
302
302
|
const [searchValue, setSearchValue] = useState("");
|
|
@@ -305,9 +305,9 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
|
|
|
305
305
|
const filteredItems = data
|
|
306
306
|
.concat(customItems) // Add custom items to the list
|
|
307
307
|
.filter((item) => {
|
|
308
|
-
const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
|
|
308
|
+
const isSelected = !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((selectedItem) => isObjectArray
|
|
309
309
|
? selectedItem.value === item.value
|
|
310
|
-
: selectedItem === item);
|
|
310
|
+
: selectedItem === item));
|
|
311
311
|
return !isSelected;
|
|
312
312
|
})
|
|
313
313
|
.filter((item) => {
|
|
@@ -483,7 +483,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
|
|
|
483
483
|
// Backspace key
|
|
484
484
|
if (e.key === "Backspace" && currentInputValue === "") {
|
|
485
485
|
setSelectedItems((prev) => {
|
|
486
|
-
const newItems = prev.slice(0, prev.length - 1);
|
|
486
|
+
const newItems = prev === null || prev === void 0 ? void 0 : prev.slice(0, prev.length - 1);
|
|
487
487
|
onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
|
|
488
488
|
return newItems;
|
|
489
489
|
});
|
|
@@ -552,9 +552,9 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
|
|
|
552
552
|
return (_jsxs("div", { className: className + " mfTagBox", children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onMouseDown: () => {
|
|
553
553
|
setIsOpen(true);
|
|
554
554
|
handleFocus();
|
|
555
|
-
}, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [selectedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
|
|
555
|
+
}, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
|
|
556
556
|
allowCustomValue ||
|
|
557
|
-
selectedItems.length === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
|
|
557
|
+
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
|
|
558
558
|
if (searchFn !== undefined) {
|
|
559
559
|
searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
|
|
560
560
|
}
|
|
@@ -563,7 +563,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
|
|
|
563
563
|
}
|
|
564
564
|
update();
|
|
565
565
|
}, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue) }))] }) }), clearable &&
|
|
566
|
-
(selectedItems.length > 0 || !!((
|
|
566
|
+
(((_f = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) !== null && _f !== void 0 ? _f : 0) > 0 || !!((_g = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _g === void 0 ? void 0 : _g.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
|
|
567
567
|
e.preventDefault();
|
|
568
568
|
e.stopPropagation();
|
|
569
569
|
} })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
|
package/dist/TagBox/types.d.ts
CHANGED