@monolith-forensics/monolith-ui 1.2.57 → 1.2.59

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 (10) hide show
  1. package/dist/DateInput/DateInput.d.ts +5 -3
  2. package/dist/DateInput/DateInput.js +29 -18
  3. package/dist/FileViewer/FileViewer.js +3 -2
  4. package/dist/SelectBox/SelectBox.d.ts +1 -1
  5. package/dist/SelectBox/SelectBox.js +11 -2
  6. package/dist/SelectBox/types.d.ts +1 -0
  7. package/dist/TagBox/TagBox.d.ts +1 -1
  8. package/dist/TagBox/TagBox.js +21 -4
  9. package/dist/TagBox/types.d.ts +1 -0
  10. package/package.json +1 -1
package/dist/DateInput/DateInput.d.ts CHANGED
@@ -5,6 +5,7 @@ interface DateInputProps {
5
5
  className?: string;
6
6
  style?: React.CSSProperties;
7
7
  defaultValue?: string | null | undefined;
8
+ value?: string | null | undefined;
8
9
  format?: FormatOptions;
9
10
  label?: string;
10
11
  description?: string;
@@ -21,10 +22,11 @@ interface DateInputProps {
21
22
  enableCalendar?: boolean;
22
23
  utc?: boolean;
23
24
  closeOnSelect?: boolean;
25
+ disabled?: boolean;
24
26
  }
25
- type DateFormatOptions = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD";
26
- type TimeFormatOptions = "HH:mm:ss" | "h:mm:ss A" | "HH:mm:ss.SSS";
27
- type FormatOptions = DateFormatOptions | `${DateFormatOptions} ${TimeFormatOptions}`;
27
+ export type DateFormatOptions = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD";
28
+ export type TimeFormatOptions = "HH:mm:ss" | "h:mm:ss A" | "HH:mm:ss.SSS";
29
+ export type FormatOptions = DateFormatOptions | `${DateFormatOptions} ${TimeFormatOptions}`;
28
30
  export type Segment = {
29
31
  value: string;
30
32
  text: string;
package/dist/DateInput/DateInput.js CHANGED
@@ -136,6 +136,15 @@ const StyledInputContainer = styled.div `
136
136
  &:focus {
137
137
  border: 1px solid ${(props) => props.theme.palette.primary.main};
138
138
  }
139
+
140
+ &[data-disabled="true"] {
141
+ opacity: 0.5;
142
+ pointer-events: none;
143
+
144
+ > * {
145
+ pointer-events: none;
146
+ }
147
+ }
139
148
  `;
140
149
  const InputSegment = styled.div `
141
150
  user-select: none;
@@ -178,8 +187,10 @@ const InputSegment = styled.div `
178
187
  : "10px"};
179
188
  }
180
189
  `;
181
- const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }, _ref) => {
182
- const [value, setValue] = useState(defaultValue);
190
+ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, disabled = false, }, _ref) => {
191
+ const isControlled = value !== undefined;
192
+ const [unControlledValue, setUncontrolledValue] = useState(defaultValue);
193
+ const _value = isControlled ? value : unControlledValue;
183
194
  const [selectedSegment, setSelectedSegment] = useState();
184
195
  const [isOpen, setIsOpen] = useState(false);
185
196
  // Check if format is date only and does not include time
@@ -197,7 +208,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
197
208
  });
198
209
  const dismiss = useDismiss(context);
199
210
  const { getReferenceProps } = useInteractions([dismiss]);
200
- const segments = useMemo(() => parseTimestamp(moment(value).toISOString(), format, utc), [value, format, utc]);
211
+ const segments = useMemo(() => parseTimestamp(moment(_value).toISOString(), format, utc), [_value, format, utc]);
201
212
  const checkValidRange = (value) => {
202
213
  if (!value)
203
214
  return false;
@@ -210,7 +221,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
210
221
  const handleClear = (e) => {
211
222
  e.preventDefault();
212
223
  e.stopPropagation();
213
- setValue(null);
224
+ setUncontrolledValue(null);
214
225
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
215
226
  setIsOpen(false);
216
227
  };
@@ -285,7 +296,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
285
296
  // Up Arrow
286
297
  if (e.key === "ArrowUp") {
287
298
  e.preventDefault();
288
- setValue((prev) => {
299
+ setUncontrolledValue((prev) => {
289
300
  if (selectedSegment.type === "separator")
290
301
  return prev;
291
302
  let newValue = prev
@@ -303,7 +314,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
303
314
  // Down Arrow
304
315
  if (e.key === "ArrowDown") {
305
316
  e.preventDefault();
306
- setValue((prev) => {
317
+ setUncontrolledValue((prev) => {
307
318
  if (selectedSegment.type === "separator")
308
319
  return prev;
309
320
  let newValue = prev
@@ -332,7 +343,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
332
343
  Array.from(tempValue).every((c) => c === "0")) {
333
344
  tempValue = "01";
334
345
  }
335
- setValue((prev) => {
346
+ setUncontrolledValue((prev) => {
336
347
  if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
337
348
  return prev;
338
349
  const momentValue = utc ? moment.utc(prev) : moment(prev);
@@ -358,7 +369,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
358
369
  if (!selectedSegment) {
359
370
  return;
360
371
  }
361
- setValue((prev) => {
372
+ setUncontrolledValue((prev) => {
362
373
  let newValue = prev;
363
374
  if (selectedSegment.type === "separator") {
364
375
  newValue = prev; // skip all logic if separator
@@ -391,7 +402,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
391
402
  const parsedTimestamp = moment
392
403
  .unix(parseInt(pastedText, 10))
393
404
  .toISOString();
394
- setValue(parsedTimestamp);
405
+ setUncontrolledValue(parsedTimestamp);
395
406
  return;
396
407
  }
397
408
  // check for unix timestamp in seconds with fractional seconds
@@ -399,7 +410,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
399
410
  const parsedTimestamp = moment
400
411
  .unix(parseFloat(pastedText))
401
412
  .toISOString();
402
- setValue(parsedTimestamp);
413
+ setUncontrolledValue(parsedTimestamp);
403
414
  return;
404
415
  }
405
416
  // check for unix timestamp in milliseconds
@@ -407,7 +418,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
407
418
  const parsedTimestamp = moment
408
419
  .unix(parseInt(pastedText, 10) / 1000)
409
420
  .toISOString();
410
- setValue(parsedTimestamp);
421
+ setUncontrolledValue(parsedTimestamp);
411
422
  return;
412
423
  }
413
424
  // check for windows ldap or filetime timestamp
@@ -415,7 +426,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
415
426
  const parsedTimestamp = moment
416
427
  .unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000)
417
428
  .toISOString();
418
- setValue(parsedTimestamp);
429
+ setUncontrolledValue(parsedTimestamp);
419
430
  return;
420
431
  }
421
432
  // check for YMD ldap timestamp in format YYYYMMDDHHMMSSZ
@@ -423,14 +434,14 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
423
434
  const parsedTimestamp = moment
424
435
  .utc(pastedText, "YYYYMMDDHHmmssZ")
425
436
  .toISOString();
426
- setValue(parsedTimestamp);
437
+ setUncontrolledValue(parsedTimestamp);
427
438
  return;
428
439
  }
429
440
  // check if pasted text is any other valid timestamp
430
441
  if (!moment(pastedText).isValid())
431
442
  return;
432
443
  const parsedTimestamp = moment.utc(pastedText).toISOString();
433
- setValue(parsedTimestamp);
444
+ setUncontrolledValue(parsedTimestamp);
434
445
  });
435
446
  // Close on outside click
436
447
  useEffect(() => {
@@ -471,16 +482,16 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, format = "Y
471
482
  setSelectedSegment(segments[0]);
472
483
  }, onBlur: () => {
473
484
  setSelectedSegment(null);
474
- }, "data-empty": !value, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, style: style, children: [segments.map((segment, i) => {
485
+ }, "data-empty": !_value, "data-disabled": disabled, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, style: style, children: [segments.map((segment, i) => {
475
486
  if (segment.type === "separator") {
476
487
  return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
477
488
  e.preventDefault();
478
489
  e.stopPropagation();
479
490
  }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
480
491
  }
481
- return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
482
- }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getReferenceProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
483
- setValue((prev) => {
492
+ return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: _value ? segment.text : segment.placeholder }, i));
493
+ }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && _value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), !disabled && enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getReferenceProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: _value ? moment(_value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
494
+ setUncontrolledValue((prev) => {
484
495
  // make copy of prev variable
485
496
  const oldValue = moment(prev).toISOString();
486
497
  const result = `${moment(date).format("YYYY-MM-DD")}T${moment(prev || undefined).format("HH:mm:ss")}`;
package/dist/FileViewer/FileViewer.js CHANGED
@@ -125,9 +125,10 @@ const StyledInnerContainer = styled.div.attrs({
125
125
  }
126
126
  `;
127
127
  const resolveViewerType = (file) => {
128
- let ext = file.ext;
128
+ var _a, _b;
129
+ let ext = (_a = file === null || file === void 0 ? void 0 : file.ext) === null || _a === void 0 ? void 0 : _a.toLowerCase();
129
130
  if (!ext) {
130
- ext = file.name.split(".").pop();
131
+ ext = (_b = file.name.split(".").pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
131
132
  }
132
133
  if (!ext) {
133
134
  return ViewerTypes.Code;
package/dist/SelectBox/SelectBox.d.ts CHANGED
@@ -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, 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>>;
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, disabled, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
6
6
  export default SelectBox;
package/dist/SelectBox/SelectBox.js CHANGED
@@ -36,6 +36,15 @@ export const StyledInputContainer = styled.div `
36
36
  if (typeof width === "number")
37
37
  return `${width}px`;
38
38
  }};
39
+
40
+ &[data-disabled="true"] {
41
+ opacity: 0.5;
42
+ pointer-events: none;
43
+
44
+ > * {
45
+ pointer-events: none;
46
+ }
47
+ }
39
48
  `;
40
49
  const StyledInnerItemContainer = styled.div `
41
50
  overflow-y: auto;
@@ -193,7 +202,7 @@ const resolveValue = (value, data) => {
193
202
  return value;
194
203
  };
195
204
  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
196
- DropDownProps = {}, debounceTime = 150, sort = false, }) => {
205
+ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
197
206
  var _a, _b, _c, _d, _e, _f, _g;
198
207
  const theme = useTheme();
199
208
  const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
@@ -481,7 +490,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, }) => {
481
490
  setDropDownHeight(bottomHeight);
482
491
  };
483
492
  }, [topHeight, bottomHeight, isOpen]);
484
- return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (_value || !!inputValue) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
493
+ return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, children: [_jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable && !allowCustomValue, "data-button-right": arrow || clearable, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), clearable && (_value || !!inputValue) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
485
494
  e.preventDefault();
486
495
  e.stopPropagation();
487
496
  } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
package/dist/SelectBox/types.d.ts CHANGED
@@ -31,6 +31,7 @@ export interface SelectBoxProps {
31
31
  DropDownProps?: any;
32
32
  debounceTime?: number;
33
33
  sort?: boolean;
34
+ disabled?: boolean;
34
35
  renderOption?: (item: Option | string) => React.ReactNode;
35
36
  OptionTooltip?: (props: {
36
37
  data: any;
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, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, renderOption, OptionTooltip, DropDownProps, }: 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, disabled, renderOption, OptionTooltip, DropDownProps, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
3
3
  export default TagBox;
package/dist/TagBox/TagBox.js CHANGED
@@ -137,6 +137,15 @@ const StyledInputContainer = styled.div `
137
137
  &:focus {
138
138
  border: 1px solid ${(props) => props.theme.palette.primary.main};
139
139
  }
140
+
141
+ &[data-disabled="true"] {
142
+ opacity: 0.5;
143
+ pointer-events: none;
144
+
145
+ > * {
146
+ pointer-events: none;
147
+ }
148
+ }
140
149
  `;
141
150
  const StyledInnerItemContainer = styled.div `
142
151
  overflow-y: auto;
@@ -169,6 +178,14 @@ const StyledInput = styled((_a) => {
169
178
  border: 0;
170
179
  }
171
180
  }
181
+
182
+ &[data-disabled="true"] {
183
+ pointer-events: none;
184
+
185
+ > * {
186
+ pointer-events: none;
187
+ }
188
+ }
172
189
  `;
173
190
  const GroupTitle = styled((_a) => {
174
191
  var { className, children } = _a, props = __rest(_a, ["className", "children"]);
@@ -323,7 +340,7 @@ const resolveValues = (value, data) => {
323
340
  }
324
341
  return resolvedValues;
325
342
  };
326
- 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, DropDownProps = {}, }) => {
343
+ 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, disabled = false, renderOption, OptionTooltip, DropDownProps = {}, }) => {
327
344
  var _a, _b, _c, _d, _e, _f, _g;
328
345
  const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
329
346
  const isControlled = value !== undefined;
@@ -607,7 +624,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
607
624
  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: () => {
608
625
  setIsOpen(true);
609
626
  handleFocus();
610
- }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, tabIndex: 0, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [_value === null || _value === void 0 ? void 0 : _value.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index))), (searchable || allowCustomValue || (_value === null || _value === void 0 ? void 0 : _value.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
627
+ }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, "data-disabled": disabled, tabIndex: 0, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [_value === null || _value === void 0 ? void 0 : _value.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || _jsx(_Fragment, { children: item === null || item === void 0 ? void 0 : item.label }) }, index))), (searchable || allowCustomValue || (_value === null || _value === void 0 ? void 0 : _value.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
611
628
  if (searchFn !== undefined) {
612
629
  searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
613
630
  }
@@ -615,7 +632,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
615
632
  setSearchValue(e.target.value);
616
633
  }
617
634
  update();
618
- }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue) }))] }) }), clearable &&
635
+ }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue), "data-disabled": disabled }))] }) }), clearable &&
619
636
  (((_f = _value === null || _value === void 0 ? void 0 : _value.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) => {
620
637
  e.preventDefault();
621
638
  e.stopPropagation();
@@ -625,7 +642,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
625
642
  e.preventDefault();
626
643
  e.stopPropagation();
627
644
  toggleOpen();
628
- } })) : null] }), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
645
+ } })) : null] }), !disabled && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: (ref) => {
629
646
  containerRef.current = ref;
630
647
  refs.setFloating(ref);
631
648
  }, style: floatingStyles, className: "mfFloating", children: _jsxs(StyledContent, Object.assign({ className: "mfFloatingContent", style: {
package/dist/TagBox/types.d.ts CHANGED
@@ -29,6 +29,7 @@ export interface TagBoxProps {
29
29
  DropDownProps?: any;
30
30
  debounceTime?: number;
31
31
  sort?: boolean;
32
+ disabled?: boolean;
32
33
  renderOption?: (item: Option | string) => React.ReactNode;
33
34
  OptionTooltip?: (props: {
34
35
  data: any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monolith-forensics/monolith-ui",
3
- "version": "1.2.57",
3
+ "version": "1.2.59",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Matt Danner (Monolith Forensics LLC)",