@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 (defaultValue) {
407
- const isOption = defaultValue.value !== undefined;
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, defaultValue, isObjectArray]);
413
+ }, [data, value, isObjectArray]);
416
414
  // handle input value change
417
415
  useEffect(() => {
418
416
  if (inputRef.current) {
@@ -8,6 +8,7 @@ export type Option = {
8
8
  export interface SelectBoxProps {
9
9
  className?: string;
10
10
  defaultValue?: Option | string;
11
+ value?: Option | string;
11
12
  data?: Option[] | string[];
12
13
  placeholder?: string;
13
14
  arrow?: boolean;
@@ -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;
@@ -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(defaultValue);
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 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
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) => {
@@ -7,7 +7,8 @@ export type Option = {
7
7
  };
8
8
  export interface TagBoxProps {
9
9
  className?: string;
10
- defaultValue?: Option[];
10
+ defaultValue?: Option[] | string[];
11
+ value?: Option[] | string[];
11
12
  data?: Option[] | string[];
12
13
  placeholder?: string;
13
14
  arrow?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monolith-forensics/monolith-ui",
3
- "version": "1.1.71",
3
+ "version": "1.1.72",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Matt Danner (Monolith Forensics LLC)",