@monolith-forensics/monolith-ui 1.2.77 → 1.2.79

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.
Files changed (5) hide show
  1. package/dist/SelectBox/SelectBox.js +26 -10
  2. package/dist/SelectBox/types.d.ts +1 -0
  3. package/dist/TagBox/TagBox.js +30 -12
  4. package/dist/TagBox/types.d.ts +2 -1
  5. package/package.json +1 -1
package/dist/SelectBox/SelectBox.js CHANGED
@@ -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
- if (index < filteredItems.length - 1) {
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
- if (index > 0) {
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/SelectBox/types.d.ts CHANGED
@@ -3,6 +3,7 @@ export type Option = {
3
3
  label: string;
4
4
  value: any;
5
5
  group?: string;
6
+ disabled?: boolean;
6
7
  data?: any;
7
8
  };
8
9
  export type Value = number | boolean | string | Option;
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());
@@ -463,7 +465,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
463
465
  const handleChangeSelection = useCallback((option) => {
464
466
  const newValue = [..._value, option];
465
467
  !isControlled && setValueState(newValue);
466
- onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
468
+ onChange === null || onChange === void 0 ? void 0 : onChange(newValue.map((v) => v.value), newValue);
467
469
  }, [onChange, _value]);
468
470
  const handleFocus = () => {
469
471
  var _a, _b;
@@ -487,7 +489,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
487
489
  const handleRemoveItem = (item) => {
488
490
  const newItems = _value.filter((prevItem, idx) => prevItem.value !== item.value);
489
491
  !isControlled && setValueState(newItems);
490
- onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
492
+ onChange === null || onChange === void 0 ? void 0 : onChange(newItems.map((v) => v.value), newItems);
491
493
  };
492
494
  const handleAddItem = useCallback((newItem) => {
493
495
  const existingItem = resolvedOptions
@@ -554,15 +556,21 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
554
556
  if (e.key === "Backspace" && currentInputValue === "") {
555
557
  const newItems = _value === null || _value === void 0 ? void 0 : _value.slice(0, _value.length - 1);
556
558
  !isControlled && setValueState(newItems);
557
- onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
559
+ onChange === null || onChange === void 0 ? void 0 : onChange(newItems.map((v) => v.value), newItems);
558
560
  }
559
561
  // Arrow down
560
562
  if (e.key === "ArrowDown") {
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
- if (index < filteredItems.length - 1) {
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
- if (index > 0) {
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
@@ -3,6 +3,7 @@ export type Option = {
3
3
  label: string;
4
4
  value: any;
5
5
  group?: string;
6
+ disabled?: boolean;
6
7
  data?: any;
7
8
  };
8
9
  export interface TagBoxProps {
@@ -34,7 +35,7 @@ export interface TagBoxProps {
34
35
  OptionTooltip?: (props: {
35
36
  data: any;
36
37
  }) => JSX.Element | React.ReactNode;
37
- onChange?: (value: any[]) => void;
38
+ onChange?: (value: unknown[], options?: Option[]) => void;
38
39
  onScroll?: (e: any) => void;
39
40
  onSearch?: (value: string) => void;
40
41
  searchFn?: (value: string) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monolith-forensics/monolith-ui",
3
- "version": "1.2.77",
3
+ "version": "1.2.79",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Matt Danner (Monolith Forensics LLC)",