@monolith-forensics/monolith-ui 1.2.92 → 1.2.94

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.
@@ -52,8 +52,8 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
52
52
  });
53
53
  const click = useClick(context, {
54
54
  event: "click",
55
- toggle: !isNested,
56
- ignoreMouse: isNested,
55
+ toggle: true,
56
+ ignoreMouse: false,
57
57
  });
58
58
  const role = useRole(context, { role: "menu" });
59
59
  const dismiss = useDismiss(context, { bubbles: true });
@@ -75,8 +75,8 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
75
75
  useEffect(() => {
76
76
  if (!tree)
77
77
  return;
78
- function handleTreeClick() {
79
- if (!multiselect) {
78
+ function handleTreeClick(event) {
79
+ if (!multiselect && !event.nested) {
80
80
  setIsOpen(false);
81
81
  }
82
82
  }
@@ -107,7 +107,7 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
107
107
  (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
108
108
  setHasFocusInside(false);
109
109
  parent.setHasFocusInside(true);
110
- } }))), { rightSection: arrow ? (_jsx(ChevronDownIcon, { size: 12 })) : isNested ? (_jsx(ChevronRightIcon, { size: 12 })) : null, size: buttonSize, variant: variant, selected: isOpen }, buttonProps, { children: label })), _jsx(MenuContext.Provider, { value: {
110
+ } }))), { rightSection: arrow ? (_jsx(ChevronDownIcon, { size: 12 })) : isNested ? (_jsx(ChevronRightIcon, { size: 12 })) : null, size: buttonSize, variant: variant, selected: isOpen, nested: isNested }, buttonProps, { children: label })), _jsx(MenuContext.Provider, { value: {
111
111
  activeIndex,
112
112
  setActiveIndex,
113
113
  getItemProps,
@@ -17,7 +17,7 @@ import { useFloatingTree, useListItem, useMergeRefs } from "@floating-ui/react";
17
17
  import { MenuContext } from "./MenuContext";
18
18
  import Tooltip from "../../Tooltip";
19
19
  export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
20
- var { label, children, disabled, multiselect, TooltipContent, itemData } = _a, props = __rest(_a, ["label", "children", "disabled", "multiselect", "TooltipContent", "itemData"]);
20
+ var { label, children, disabled, multiselect, TooltipContent, itemData, nested } = _a, props = __rest(_a, ["label", "children", "disabled", "multiselect", "TooltipContent", "itemData", "nested"]);
21
21
  const menu = useContext(MenuContext);
22
22
  const item = useListItem({ label: disabled ? null : label });
23
23
  const tree = useFloatingTree();
@@ -26,7 +26,7 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
26
26
  onClick(event) {
27
27
  var _a;
28
28
  (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
29
- tree === null || tree === void 0 ? void 0 : tree.events.emit("click");
29
+ tree === null || tree === void 0 ? void 0 : tree.events.emit("click", { nested });
30
30
  },
31
31
  onFocus(event) {
32
32
  var _a;
@@ -27,7 +27,7 @@ const FlexedRow = styled.div `
27
27
  }
28
28
  `;
29
29
  const TableMenu = () => {
30
- var _a, _b, _c;
30
+ var _a, _b, _c, _d;
31
31
  const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, filterState, handleFilterChange, } = useTable();
32
32
  if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
33
33
  return null;
@@ -59,7 +59,13 @@ const TableMenu = () => {
59
59
  label: item.label,
60
60
  });
61
61
  };
62
- return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true && (_jsx(Button, { color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a, _b; return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a); }, children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" })), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: ((_b = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _b === void 0 ? void 0 : _b.map((filter) => ({
62
+ return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [(addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true &&
63
+ ((addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.type) === "button" ||
64
+ (addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.type) === undefined) && (_jsx(Button, Object.assign({ color: "primary", variant: "contained", size: "xxs", onClick: () => { var _a; return (_a = addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.onClick) === null || _a === void 0 ? void 0 : _a.call(addButtonOptions); } }, addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.buttonProps, { children: ((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.label) || "+ Add Record" }))), (addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.enabled) === true &&
65
+ (addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.type) === "menu" && (_jsx(DropDownMenu, Object.assign({ data: [], variant: "contained", arrow: true, size: "xxs", buttonProps: {
66
+ color: "primary",
67
+ size: "xxs",
68
+ } }, addButtonOptions === null || addButtonOptions === void 0 ? void 0 : addButtonOptions.dropdownOptions, { children: ((_b = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _b === void 0 ? void 0 : _b.label) || "Options" }))), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: ((_c = filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) === null || _c === void 0 ? void 0 : _c.map((filter) => ({
63
69
  label: filter.label,
64
70
  value: filter.dataField,
65
71
  data: filter,
@@ -100,9 +106,9 @@ const TableMenu = () => {
100
106
  })), multiselect: true, searchable: true, buttonProps: {
101
107
  title: "Show/Hide Columns",
102
108
  size: "xs",
103
- style: { padding: "0px 4px" },
109
+ style: { padding: "0px 4px", height: 24 },
104
110
  }, dropDownProps: {
105
111
  style: { width: 175, maxWidth: 400 },
106
- }, children: _jsx(Columns3Icon, { size: 14 }) })), (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.enabled) === true && (_jsx(TextInput, { size: "xs", placeholder: ((_c = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.searchOptions) === null || _c === void 0 ? void 0 : _c.placeholder) || "Search", defaultValue: searchState, onChange: handleSearch }))] })] }), _jsx(QueryFilter, { queryFilter: queryFilter })] }));
112
+ }, children: _jsx(Columns3Icon, { size: 14 }) })), (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.enabled) === true && (_jsx(TextInput, { size: "xs", placeholder: ((_d = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.searchOptions) === null || _d === void 0 ? void 0 : _d.placeholder) || "Search", defaultValue: searchState, onChange: handleSearch }))] })] }), _jsx(QueryFilter, { queryFilter: queryFilter })] }));
107
113
  };
108
114
  export default TableMenu;
@@ -2,6 +2,8 @@ import { LucideIcon } from "lucide-react";
2
2
  import { MutableRefObject, Ref } from "react";
3
3
  import { SelectionStatus, TableExportOptions } from "./enums";
4
4
  import { FilterDefinition, Query } from "../QueryFilter";
5
+ import { DropDownMenuProps } from "../DropDownMenu";
6
+ import { ButtonProps } from "../Button";
5
7
  export type StateStorage = {
6
8
  enabled: boolean;
7
9
  type: "localStorage";
@@ -213,7 +215,10 @@ export type TableMenuOptions = {
213
215
  addButtonOptions?: {
214
216
  enabled?: boolean;
215
217
  label?: string;
218
+ type?: "button" | "menu";
216
219
  onClick?: () => void;
220
+ buttonProps?: ButtonProps;
221
+ dropdownOptions?: DropDownMenuProps;
217
222
  };
218
223
  tableCountOptions?: {
219
224
  recordsTotalEnabled?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@monolith-forensics/monolith-ui",
3
- "version": "1.2.92",
3
+ "version": "1.2.94",
4
4
  "main": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Matt Danner (Monolith Forensics LLC)",