@monolith-forensics/monolith-ui 1.2.78 → 1.2.80
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.
|
@@ -72,20 +72,20 @@ export const MenuItemList = ({ menuItems, searchable, searchValue = "", isObject
|
|
|
72
72
|
const item = (data === null || data === void 0 ? void 0 : data[index]) || {};
|
|
73
73
|
const isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.find((s) => isObjectArray ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value) : s === item));
|
|
74
74
|
if (item.items) {
|
|
75
|
-
return (_jsx(DropDownMenu, { data: item.items, size: size, children: item.label }));
|
|
75
|
+
return (_jsx(DropDownMenu, { data: item.items, size: size, buttonProps: { style }, children: item.label }));
|
|
76
76
|
}
|
|
77
|
-
return (
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
77
|
+
return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": isSelected, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
|
|
78
|
+
var _a;
|
|
79
|
+
newValue ? handleAddItem(item) : handleRemoveItem(item);
|
|
80
|
+
(_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
|
|
81
|
+
} }), (item === null || item === void 0 ? void 0 : item.leftSection) || null] })) : ((item === null || item === void 0 ? void 0 : item.leftSection) || null), rightSection: item === null || item === void 0 ? void 0 : item.rightSection, multiselect: multiselect, size: size, title: !TooltipContent ? item === null || item === void 0 ? void 0 : item.label : undefined, onClick: (e) => {
|
|
82
82
|
e.preventDefault();
|
|
83
83
|
e.stopPropagation();
|
|
84
84
|
handleItemClick(item, isSelected);
|
|
85
|
-
}, style: style, children:
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
85
|
+
}, style: style, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) ||
|
|
86
|
+
(item === null || item === void 0 ? void 0 : item.label) ||
|
|
87
|
+
(typeof item === "string" || typeof item === "number"
|
|
88
|
+
? item
|
|
89
|
+
: null) }, index));
|
|
90
90
|
} }) }));
|
|
91
91
|
};
|
|
@@ -152,12 +152,6 @@ const StyledItem = styled.div `
|
|
|
152
152
|
? "6px 16px"
|
|
153
153
|
: "2px 8px"};
|
|
154
154
|
|
|
155
|
-
// Mantine-Dev syntax, styles if the item is disabled
|
|
156
|
-
&[data-disabled] {
|
|
157
|
-
color: ${(props) => props.theme.palette.text.secondary};
|
|
158
|
-
pointer-events: "none";
|
|
159
|
-
}
|
|
160
|
-
|
|
161
155
|
&:hover {
|
|
162
156
|
background-color: ${(props) => props.theme.palette.action.hover};
|
|
163
157
|
color: ${(props) => props.theme.palette.text.primary};
|
|
@@ -168,6 +162,12 @@ const StyledItem = styled.div `
|
|
|
168
162
|
background-color: ${(props) => props.theme.palette.divider};
|
|
169
163
|
color: ${(props) => props.theme.palette.text.primary};
|
|
170
164
|
}
|
|
165
|
+
|
|
166
|
+
&[data-disabled] {
|
|
167
|
+
color: ${(props) => props.theme.palette.text.secondary};
|
|
168
|
+
opacity: 0.5;
|
|
169
|
+
pointer-events: none;
|
|
170
|
+
}
|
|
171
171
|
`;
|
|
172
172
|
/**
|
|
173
173
|
*
|
|
@@ -211,6 +211,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
|
|
|
211
211
|
value: isObjectArray ? item.value : item,
|
|
212
212
|
label: isObjectArray ? item.label : item,
|
|
213
213
|
group: isObjectArray ? item.group : undefined,
|
|
214
|
+
disabled: isObjectArray ? item.disabled : undefined,
|
|
214
215
|
data: isObjectArray ? item.data : undefined,
|
|
215
216
|
}));
|
|
216
217
|
/**
|
|
@@ -385,8 +386,14 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
|
|
|
385
386
|
if (e.key === "ArrowDown") {
|
|
386
387
|
e.preventDefault();
|
|
387
388
|
let newItem = filteredItems[0]; // Loop back to the first item
|
|
389
|
+
// Find the index of the currently selected item
|
|
388
390
|
const index = filteredItems.findIndex((item) => item.value === (_value === null || _value === void 0 ? void 0 : _value.value));
|
|
389
|
-
|
|
391
|
+
// find next available item
|
|
392
|
+
const nextItem = filteredItems.find((item, i) => i > index && !item.disabled);
|
|
393
|
+
if (nextItem) {
|
|
394
|
+
newItem = nextItem;
|
|
395
|
+
}
|
|
396
|
+
else if (index < filteredItems.length - 1) {
|
|
390
397
|
newItem = filteredItems[index + 1];
|
|
391
398
|
}
|
|
392
399
|
!isControlled && setValueState(newItem);
|
|
@@ -397,8 +404,17 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
|
|
|
397
404
|
if (e.key === "ArrowUp") {
|
|
398
405
|
e.preventDefault();
|
|
399
406
|
let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
|
|
407
|
+
// Find the index of the currently selected item
|
|
400
408
|
const index = filteredItems.findIndex((item) => item.value === (_value === null || _value === void 0 ? void 0 : _value.value));
|
|
401
|
-
|
|
409
|
+
// find previous available item
|
|
410
|
+
const prevItem = filteredItems
|
|
411
|
+
.slice(0, index)
|
|
412
|
+
.reverse()
|
|
413
|
+
.find((item) => !item.disabled);
|
|
414
|
+
if (prevItem) {
|
|
415
|
+
newItem = prevItem;
|
|
416
|
+
}
|
|
417
|
+
else if (index > 0) {
|
|
402
418
|
newItem = filteredItems[index - 1];
|
|
403
419
|
}
|
|
404
420
|
!isControlled && setValueState(newItem);
|
|
@@ -510,10 +526,10 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
|
|
|
510
526
|
: "",
|
|
511
527
|
}, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [loading && _jsx(Loader, {}), !loading && actionComponent && (_jsx(ActionMenu, { children: actionComponent })), !loading && filteredItems.length === 0 && (_jsx(EmptyComponent, { children: "No Items" })), !loading && (_jsx(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: grouped
|
|
512
528
|
? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
|
|
513
|
-
return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
|
|
529
|
+
return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
|
|
514
530
|
})] }, group.label)))
|
|
515
531
|
: filteredItems.map((item, index) => {
|
|
516
|
-
return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
|
|
532
|
+
return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": (_value === null || _value === void 0 ? void 0 : _value.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
|
|
517
533
|
}) }))] })) }) }))] }));
|
|
518
534
|
}) `
|
|
519
535
|
position: relative;
|
package/dist/TagBox/TagBox.js
CHANGED
|
@@ -285,11 +285,6 @@ const StyledItem = styled.div `
|
|
|
285
285
|
? "19px"
|
|
286
286
|
: "11px"};
|
|
287
287
|
|
|
288
|
-
&[data-disabled] {
|
|
289
|
-
color: ${(props) => props.theme.palette.text.secondary};
|
|
290
|
-
pointer-events: "none";
|
|
291
|
-
}
|
|
292
|
-
|
|
293
288
|
&:hover {
|
|
294
289
|
background-color: ${(props) => props.theme.palette.action.hover};
|
|
295
290
|
color: ${(props) => props.theme.palette.text.primary};
|
|
@@ -304,6 +299,12 @@ const StyledItem = styled.div `
|
|
|
304
299
|
background-color: ${(props) => props.theme.palette.divider};
|
|
305
300
|
color: ${(props) => props.theme.palette.text.primary};
|
|
306
301
|
}
|
|
302
|
+
|
|
303
|
+
&[data-disabled="true"] {
|
|
304
|
+
color: ${(props) => props.theme.palette.text.secondary};
|
|
305
|
+
opacity: 0.5;
|
|
306
|
+
pointer-events: none;
|
|
307
|
+
}
|
|
307
308
|
`;
|
|
308
309
|
const EmptyComponent = styled.div `
|
|
309
310
|
display: flex;
|
|
@@ -353,6 +354,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
|
|
|
353
354
|
value: isObjectArray ? item.value : item,
|
|
354
355
|
label: isObjectArray ? item.label : item,
|
|
355
356
|
group: isObjectArray ? item.group : undefined,
|
|
357
|
+
disabled: isObjectArray ? item.disabled : undefined,
|
|
356
358
|
data: isObjectArray ? item.data : undefined,
|
|
357
359
|
}))
|
|
358
360
|
.map((item) => [item.value, item])).values());
|
|
@@ -561,8 +563,14 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
|
|
|
561
563
|
e.preventDefault();
|
|
562
564
|
setPreSelected((prev) => {
|
|
563
565
|
let newItem = filteredItems[0]; // Loop back to the first item
|
|
566
|
+
// find the index of the previous/current item
|
|
564
567
|
const index = filteredItems.findIndex((item) => item.value === (prev === null || prev === void 0 ? void 0 : prev.value));
|
|
565
|
-
|
|
568
|
+
// find next available item
|
|
569
|
+
const nextItem = filteredItems.find((item, i) => i > index && !item.disabled);
|
|
570
|
+
if (nextItem) {
|
|
571
|
+
newItem = nextItem;
|
|
572
|
+
}
|
|
573
|
+
else if (index < filteredItems.length - 1) {
|
|
566
574
|
newItem = filteredItems[index + 1];
|
|
567
575
|
}
|
|
568
576
|
return newItem;
|
|
@@ -573,8 +581,17 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
|
|
|
573
581
|
e.preventDefault();
|
|
574
582
|
setPreSelected((prev) => {
|
|
575
583
|
let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
|
|
584
|
+
// find the index of the previous/current item
|
|
576
585
|
const index = filteredItems.findIndex((item) => item.value === (prev === null || prev === void 0 ? void 0 : prev.value));
|
|
577
|
-
|
|
586
|
+
// find previous available item
|
|
587
|
+
const prevItem = filteredItems
|
|
588
|
+
.slice(0, index)
|
|
589
|
+
.reverse()
|
|
590
|
+
.find((item) => !item.disabled);
|
|
591
|
+
if (prevItem) {
|
|
592
|
+
newItem = prevItem;
|
|
593
|
+
}
|
|
594
|
+
else if (index > 0) {
|
|
578
595
|
newItem = filteredItems[index - 1];
|
|
579
596
|
}
|
|
580
597
|
return newItem;
|
|
@@ -657,16 +674,17 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
|
|
|
657
674
|
e.preventDefault();
|
|
658
675
|
e.stopPropagation();
|
|
659
676
|
handleItemClick(item);
|
|
660
|
-
}, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
|
|
677
|
+
}, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: typeof item === "string"
|
|
661
678
|
? item
|
|
662
679
|
: item === null || item === void 0 ? void 0 : item.label })) }, index) }, index));
|
|
663
680
|
})] }, group.label)))
|
|
664
681
|
: filteredItems.map((item, index) => {
|
|
665
682
|
return (_jsx(Tooltip, { content: OptionTooltip ? (_jsx(OptionTooltip, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
|
|
683
|
+
console.log("clicked");
|
|
666
684
|
e.preventDefault();
|
|
667
685
|
e.stopPropagation();
|
|
668
686
|
handleItemClick(item);
|
|
669
|
-
}, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
|
|
687
|
+
}, "data-highlighted": (preSelected === null || preSelected === void 0 ? void 0 : preSelected.value) === item.value, "data-disabled": item.disabled, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index) }, index));
|
|
670
688
|
}) }))] })) }) }))] }));
|
|
671
689
|
}) `
|
|
672
690
|
position: relative;
|
package/dist/TagBox/types.d.ts
CHANGED