@monolith-forensics/monolith-ui 1.2.14 → 1.2.16

package/dist/Table/Table.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import Column from "./Column";
 import { useOverlayScrollbars } from "overlayscrollbars-react";
 import { StyledTable } from "./TableComponents";
 import TableHeader from "./TableHeader";
@@ -32,21 +31,21 @@ const StyledTableContainer = styled.div `
   flex: 1 1 auto;
 `;
 const TableContent = () => {
-    const { columnState, tableElement, headerRowElm, tableDimensions, targetElm, listElm, rowHeight, headerRowHeight, compactState, virtualized, loading, } = useTable();
+    const { columnState, tableElement, tableHeight, tableMaxHeight, tableMinHeight, headerRowElm, tableDimensions, targetElm, listElm, rowHeight, headerRowHeight, compactState, virtualized, loading, } = useTable();
     const visibleColumnCount = columnState.filter((column) => column.visible === true).length;
-    return (_jsxs(StyledTableContainer, { children: [_jsx(TableMenu, {}), _jsxs(StyledTable, { className: "mfui-table", ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx(_Fragment, {}), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
+    return (_jsxs(StyledTableContainer, { children: [_jsx(TableMenu, {}), _jsxs(StyledTable, { className: "mfui-table", style: {
+                    height: tableHeight || "100%",
+                    maxHeight: tableMaxHeight,
+                    minHeight: tableMinHeight,
+                }, ref: tableElement, "data-compact": compactState, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), visibleColumnCount === 0 && _jsx(_Fragment, {}), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
 };
 const Table = (_a) => {
-    var { data, children } = _a, props = __rest(_a, ["data", "children"]) // pass through props straight to table context
+    var { data, columnProps } = _a, props = __rest(_a, ["data", "columnProps"]) // pass through props straight to table context
     ;
     const tableElement = useRef(null);
     const targetElm = useRef(null);
     const listElm = useRef(null);
     const headerRowElm = useRef(null);
-    // check if children is array and convert if not
-    if (!Array.isArray(children)) {
-        children = [children];
-    }
     const [tableDimensions, setTableDimensions] = useState({
         width: 0,
         height: 0,
@@ -111,8 +110,6 @@ const Table = (_a) => {
         };
     }, []);
     const __data = useMemo(() => data === null || data === void 0 ? void 0 : data.map((d, i) => (Object.assign(Object.assign({}, d), { __key: shortUUID.generate(), __index: i }))), [data]);
-    return (_jsx(TableProvider, Object.assign({ columns: children
-            .filter((child) => child.type === Column)
-            .map((child) => child.props), data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm }, props, { children: _jsx(TableContent, {}) })));
+    return (_jsx(TableProvider, Object.assign({ columns: columnProps, data: __data, tableElement: tableElement, headerRowElm: headerRowElm, tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm }, props, { children: _jsx(TableContent, {}) })));
 };
 export default Table;

package/dist/Table/TableComponents.js

@@ -116,7 +116,6 @@ export const TableWrapper = styled.div `
 `;
 export const StyledTable = styled.div `
   position: relative;
-  flex: 1 1 auto;
   overflow: hidden;
   display: flex;
   flex-direction: column;

package/dist/Table/TableMenu/TableMenu.js

@@ -27,11 +27,11 @@ const FlexedRow = styled.div `
   }
 `;
 const TableMenu = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c;
     const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, filterState, handleFilterChange, } = useTable();
     if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
         return null;
-    const { filterOptions } = tableMenuOptions;
+    const { addButtonOptions, filterOptions, tableCountOptions, exportOptions, compactOptions, columnSelectorOptions, searchOptions, } = tableMenuOptions;
     const queryFilter = useQueryFilter({
         defaultFilter: filterState,
         filterDefinitions: (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.filterDefinitions) || [],
@@ -58,7 +58,7 @@ const TableMenu = () => {
             label: item.label,
         });
     };
-    return (_jsxs(StyledContainer, { children: [_jsxs(FlexedRow, { className: "justify-sb", children: [_jsxs(FlexedRow, { children: [((_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _a === void 0 ? void 0 : _a.enabled) !== false && (_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: ((_b = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.addButtonOptions) === null || _b === void 0 ? void 0 : _b.label) || "+ Add Record" })), (filterOptions === null || filterOptions === void 0 ? void 0 : filterOptions.enabled) !== false && (_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) => ({
+    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) => ({
                                     label: filter.label,
                                     value: filter.dataField,
                                     data: filter,
@@ -68,7 +68,8 @@ const TableMenu = () => {
                                     leftSection: _jsx(FilterIcon, { size: 12 }),
                                 }, onItemSelect: handleSelectFilter, dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },
-                                }, searchable: true, children: "Filter" })), _jsx(InfoBadge, { total: totalRecords || data.length }), enableSelection === true && (_jsx(InfoBadge, { total: getCalculatedSelectionTotal(), hint: "Selected Items", icon: CheckSquareIcon }))] }), _jsxs(FlexedRow, { children: [((_d = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.exportOptions) === null || _d === void 0 ? void 0 : _d.enabled) !== false && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: [
+                                }, searchable: true, children: "Filter" })), (tableCountOptions === null || tableCountOptions === void 0 ? void 0 : tableCountOptions.recordsTotalEnabled) === true && (_jsx(InfoBadge, { total: totalRecords || data.length })), enableSelection === true &&
+                                (tableCountOptions === null || tableCountOptions === void 0 ? void 0 : tableCountOptions.selectionTotalEnabled) === true && (_jsx(InfoBadge, { total: getCalculatedSelectionTotal(), hint: "Selected Items", icon: CheckSquareIcon }))] }), _jsxs(FlexedRow, { children: [(exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: [
                                     {
                                         label: "Export Visible Columns",
                                         value: TableExportOptions.ExportVisible,
@@ -86,7 +87,7 @@ const TableMenu = () => {
                                     return (_b = (_a = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.exportOptions) === null || _a === void 0 ? void 0 : _a.onExport) === null || _b === void 0 ? void 0 : _b.call(_a, item.value);
                                 }, dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },
-                                }, children: _jsx(DownloadIcon, { size: 14 }) })), ((_e = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.compactOptions) === null || _e === void 0 ? void 0 : _e.enabled) !== false && (_jsx(Button, { variant: "outlined", title: "Toggle Compact", size: "xxs", style: { padding: "0px 4px" }, onClick: () => toggleCompact(), children: compactState ? _jsx(Rows4Icon, { size: 14 }) : _jsx(Rows3Icon, { size: 14 }) })), ((_f = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.columnSelectorOptions) === null || _f === void 0 ? void 0 : _f.enabled) !== false && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: columnState.map((col) => ({
+                                }, children: _jsx(DownloadIcon, { size: 14 }) })), (compactOptions === null || compactOptions === void 0 ? void 0 : compactOptions.enabled) === true && (_jsx(Button, { variant: "outlined", title: "Toggle Compact", size: "xxs", style: { padding: "0px 4px" }, onClick: () => toggleCompact(), children: compactState ? _jsx(Rows4Icon, { size: 14 }) : _jsx(Rows3Icon, { size: 14 }) })), (columnSelectorOptions === null || columnSelectorOptions === void 0 ? void 0 : columnSelectorOptions.enabled) === true && (_jsx(DropDownMenu, { variant: "outlined", size: "xs", data: columnState.map((col) => ({
                                     label: (col === null || col === void 0 ? void 0 : col.caption) || col.dataField,
                                     value: col.dataField,
                                     onClick: () => toggleColumnVisibility(col.dataField),
@@ -101,6 +102,6 @@ const TableMenu = () => {
                                     style: { padding: "0px 4px" },
                                 }, dropDownProps: {
                                     style: { width: 175, maxWidth: 400 },
-                                }, children: _jsx(Columns3Icon, { size: 14 }) })), ((_g = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.searchOptions) === null || _g === void 0 ? void 0 : _g.enabled) !== false && (_jsx(TextInput, { size: "xs", placeholder: ((_h = tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.searchOptions) === null || _h === void 0 ? void 0 : _h.placeholder) || "Search", defaultValue: searchState, onChange: handleSearch }))] })] }), _jsx(QueryFilter, { queryFilter: queryFilter })] }));
+                                }, 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 })] }));
 };
 export default TableMenu;

package/dist/Table/TableProvider.js

@@ -19,7 +19,7 @@ import { SelectionStatus } from "./enums";
 import moment from "moment";
 export const TableContext = createContext(null);
 const TableProvider = (_a) => {
-    var { children, columns, tableInstanceRef, stateStorage } = _a, props = __rest(_a, ["children", "columns", "tableInstanceRef", "stateStorage"]);
+    var { children, columns, tableInstanceRef, stateStorage, height, maxHeight, minHeight } = _a, props = __rest(_a, ["children", "columns", "tableInstanceRef", "stateStorage", "height", "maxHeight", "minHeight"]);
     const _columns = columns
         .map((child, index) => {
         if (child.dataField === "__key") {
@@ -501,6 +501,6 @@ const TableProvider = (_a) => {
             filterState,
             compactState,
             toggleCompact,
-            getCalculatedSelectionTotal }, props), { data: _data }), children: children }));
+            getCalculatedSelectionTotal, tableHeight: height, tableMaxHeight: maxHeight, tableMinHeight: minHeight }, props), { data: _data }), children: children }));
 };
 export default TableProvider;

package/dist/Table/index.d.ts

@@ -1,4 +1,3 @@
 export { default as Table } from "./Table";
-export { default as Column } from "./Column";
 export * from "./types";
 export * from "./enums";

package/dist/Table/index.js

@@ -1,4 +1,3 @@
 export { default as Table } from "./Table";
-export { default as Column } from "./Column";
 export * from "./types";
 export * from "./enums";

package/dist/Table/types.d.ts

@@ -1,5 +1,5 @@
 import { LucideIcon } from "lucide-react";
-import { MutableRefObject, ReactElement, Ref } from "react";
+import { MutableRefObject, Ref } from "react";
 import { SelectionStatus, TableExportOptions } from "./enums";
 import { FilterDefinition, Query } from "../QueryFilter";
 export type StateStorage = {
@@ -91,6 +91,9 @@ export type TableContextType = {
     totalRecords?: number;
     setColumnState: React.Dispatch<React.SetStateAction<ColumnState[]>>;
     keyField?: string;
+    tableHeight?: number;
+    tableMaxHeight?: number;
+    tableMinHeight?: number;
     compact?: boolean;
     headerRowHeight?: number;
     rowHeight?: number;
@@ -142,6 +145,9 @@ export interface TableProviderProps {
     totalRecords?: number;
     keyField?: string;
     tableInstanceRef?: MutableRefObject<TableInstance | undefined>;
+    height?: number;
+    maxHeight?: number;
+    minHeight?: number;
     compact?: boolean;
     headerRowHeight?: number;
     rowHeight?: number;
@@ -203,6 +209,10 @@ export type TableMenuOptions = {
         label?: string;
         onClick?: () => void;
     };
+    tableCountOptions?: {
+        recordsTotalEnabled?: boolean;
+        selectionTotalEnabled?: boolean;
+    };
     searchOptions?: {
         enabled?: boolean;
         placeholder?: string;
@@ -218,11 +228,14 @@ export type TableMenuOptions = {
     };
 };
 export interface TableProps {
-    children: ReactElement<ColumnProps> | ReactElement<ColumnProps>[];
+    columnProps: ColumnProps[];
     data: any[];
     totalRecords?: number;
     keyField?: string;
     tableInstanceRef?: MutableRefObject<TableInstance | undefined>;
+    height?: number;
+    maxHeight?: number;
+    minHeight?: number;
     virtualized?: boolean;
     loading?: boolean;
     compact?: boolean;

package/dist/index.d.ts

@@ -33,5 +33,5 @@ export { default as Loader } from "./Loader";
 export type { LoaderProps } from "./Loader";
 export * from "./hooks";
 export { QueryFilter, useQueryFilter } from "./QueryFilter";
-export { Table, Column } from "./Table";
+export { Table } from "./Table";
 export type { ColumnProps, TableProps } from "./Table";

package/dist/index.js

@@ -27,4 +27,4 @@ export { default as RichTextEditor, Extensions, SlashCommands, Controls, } from
 export { default as Loader } from "./Loader";
 export * from "./hooks";
 export { QueryFilter, useQueryFilter } from "./QueryFilter";
-export { Table, Column } from "./Table";
+export { Table } from "./Table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",

package/dist/Table/Column.d.ts

@@ -1,3 +0,0 @@
-import { ColumnProps } from "./types";
-declare const Column: React.FC<ColumnProps>;
-export default Column;

package/dist/Table/Column.js

@@ -1,5 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-const Column = () => {
-    return _jsx(_Fragment, {});
-};
-export default Column;