@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.9.0

package/dist/Table/Utils/resizeHandler.js

@@ -0,0 +1,84 @@
+import TableDefaults from "../TableDefaults";
+const enableResizeClass = (dataField) => {
+    if (dataField === undefined) {
+        return;
+    }
+    document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
+        resizer.classList.add("isResizing");
+    });
+};
+const disableResizeClass = (dataField) => {
+    if (dataField === undefined) {
+        return;
+    }
+    document.querySelectorAll(`.resizer.col-${dataField}`).forEach((resizer) => {
+        resizer.classList.remove("isResizing");
+    });
+};
+const resizeHandler = ({ event, columnId, columnProps, onResize, onResizeFinished, }) => {
+    let col = event.target
+        .parentElement;
+    let newColumns = [];
+    let x = 0;
+    let w = 0;
+    const mouseMoveHandler = function (e) {
+        const selectedColumn = document.querySelectorAll(`.column-${columnId}`);
+        const columnHeaders = document.querySelectorAll(`.mfui-th.column-${columnId}`);
+        const dx = e.clientX - x;
+        let newWidth = w + dx;
+        // Calculate what the minimum width should be
+        // min width should be the defined column width or the default min width
+        if (columnProps.minWidth === undefined) {
+            if (newWidth < TableDefaults.td.minWidth)
+                newWidth = TableDefaults.td.minWidth;
+        }
+        else {
+            if (newWidth < columnProps.minWidth)
+                newWidth = columnProps.minWidth;
+        }
+        selectedColumn.forEach((col) => {
+            var _a;
+            col.style.width = `${newWidth}px`;
+            col.style.flex = "0 0 auto";
+            // col.style.maxWidth = `${newWidth}px`;
+            // col.style.minWidth = `${newWidth}px`;
+            newColumns.push({
+                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
+                width: newWidth,
+            });
+        });
+        newColumns = Array.from(columnHeaders).map((col) => {
+            var _a;
+            return {
+                dataField: ((_a = col === null || col === void 0 ? void 0 : col.dataset) === null || _a === void 0 ? void 0 : _a.field) || "",
+                width: newWidth,
+            };
+        });
+        onResize({
+            columns: newColumns,
+        });
+    };
+    const mouseUpHandler = function () {
+        var _a, _b, _c;
+        let newWidth = ((_c = (_b = (_a = document === null || document === void 0 ? void 0 : document.querySelector) === null || _a === void 0 ? void 0 : _a.call(document, `.column-${columnId}`)) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.width) || null;
+        if (newWidth) {
+            newWidth = newWidth.replace("px", "");
+        }
+        disableResizeClass(columnId);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        onResizeFinished === null || onResizeFinished === void 0 ? void 0 : onResizeFinished({
+            column: columnProps,
+            columnId: columnId,
+            targetColumn: document.querySelector(`.column-${columnId}`),
+            newWidth,
+        });
+    };
+    x = event.clientX;
+    const styles = window.getComputedStyle(col);
+    w = parseInt(styles.width, 10);
+    document.addEventListener("mousemove", mouseMoveHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+    enableResizeClass(columnId);
+};
+export default resizeHandler;

package/dist/Table/types.d.ts

@@ -10,42 +10,6 @@ export type StateStorage = {
     type: "localStorage";
     key: string;
 };
-export type TreeMode = "nested" | "flat";
-export type TreeOptions = {
-    /** Enable tree-row behavior. Default: false */
-    enabled?: boolean;
-    /** Input shape. Default: "nested" */
-    mode?: TreeMode;
-    /** For mode="nested": field name that holds child array. Default: "children" */
-    childrenField?: string;
-    /** For mode="flat": field name that holds parent id. Default: "parentId" */
-    parentIdField?: string;
-    /** For mode="flat": field name that holds the row's stable id. Falls back to keyField. */
-    idField?: string;
-    /** Pixel width of one indentation level. Default: 16 */
-    indentPx?: number;
-    /** If a descendant matches search/filter, auto-expand its ancestors for the effective view. Default: true */
-    autoExpandOnMatch?: boolean;
-};
-export type ResolvedTreeOptions = {
-    enabled: boolean;
-    mode: TreeMode;
-    childrenField: string;
-    parentIdField: string;
-    idField?: string;
-    indentPx: number;
-    autoExpandOnMatch: boolean;
-};
-export type ExpandedKeysState = string[];
-export type OnExpandedChangeFn = (keys: string[]) => void;
-export type TreeMeta = {
-    /** Map of row key -> parent row key (undefined for roots) */
-    parentKeyMap: Map<string, string | undefined>;
-    /** Map of parent key -> ordered list of direct child keys */
-    childrenKeyMap: Map<string | undefined, string[]>;
-    /** All row keys that have children (eligible for expansion) */
-    expandableKeys: string[];
-};
 export type RenderOptions = {
     rowData: any;
     onRowUpdated?: (context: {
@@ -91,9 +55,27 @@ export type TableState = {
     sortState?: SortState;
     filterState?: Query;
     searchState?: string;
-    expandedKeys?: ExpandedKeysState;
 };
+export interface onResizeFinishedProps {
+    column: ColumnState;
+    columnId?: string;
+    targetColumn: Element | null;
+    newWidth: string | null;
+}
+export interface onResizeProps {
+    columns: {
+        dataField: string;
+        width: number;
+    }[];
+}
 export type ColumnStateUpdate = ColumnState[] | ((prevColumnState: ColumnState[]) => ColumnState[]);
+export interface ResizeHandlerProps {
+    event: React.MouseEvent<HTMLDivElement>;
+    columnId?: string;
+    columnProps: ColumnState;
+    onResize: (e: onResizeProps) => void;
+    onResizeFinished?: (e: onResizeFinishedProps) => void;
+}
 export interface TableHeaderProps {
     headerRowHeight?: number;
     enableColumnResize?: boolean;
@@ -112,32 +94,15 @@ export type TableDimensions = {
     width: number;
     height: number;
 };
-export type TableLayout = {
-    contentWidth: number;
-    columnWidths: Record<string, number>;
-};
 export type TableContextType = {
     columnState: ColumnState[];
     setColumnState: (columnStateUpdate: ColumnStateUpdate) => void;
-    tableLayout: TableLayout;
-    setResizeColumnWidths: (widths: Record<string, number> | null) => void;
     sortState?: SortState | null;
     filterState?: Query | null;
     searchState?: string | null;
     data: any[];
     totalRecords?: number;
     keyField?: string;
-    treeOptions: ResolvedTreeOptions;
-    firstVisibleDataField?: string;
-    expandedKeys: string[];
-    effectiveExpandedKeys: Set<string>;
-    isRowExpanded: (row: any) => boolean;
-    toggleRowExpanded: (row: any) => void;
-    expandRow: (row: any) => void;
-    collapseRow: (row: any) => void;
-    expandAllRows: () => void;
-    collapseAllRows: () => void;
-    onExpandedChange?: OnExpandedChangeFn;
     tableHeight?: number;
     tableMaxHeight?: number;
     tableMinHeight?: number;
@@ -249,11 +214,6 @@ export interface TableProviderProps {
     defaultFilterState?: Query;
     filterState?: Query;
     onFilterChange?: (e: Query) => void;
-    treeOptions?: ResolvedTreeOptions;
-    defaultExpandedKeys?: ExpandedKeysState;
-    expandedKeys?: ExpandedKeysState;
-    onExpandedChange?: OnExpandedChangeFn;
-    treeMeta?: TreeMeta;
 }
 export interface TableRowProps {
     rowData: {
@@ -375,10 +335,6 @@ export interface TableProps {
     defaultFilterState?: Query;
     filterState?: Query;
     onFilterChange?: (e: Query) => void;
-    treeOptions?: TreeOptions;
-    defaultExpandedKeys?: ExpandedKeysState;
-    expandedKeys?: ExpandedKeysState;
-    onExpandedChange?: OnExpandedChangeFn;
 }
 export type TableInstance = {
     columnState: ColumnState[];
@@ -399,11 +355,4 @@ export type TableInstance = {
     clearSearch: () => void;
     clearSelections: () => void;
     getTableState: () => TableState;
-    expandRow: (row: any) => void;
-    collapseRow: (row: any) => void;
-    toggleRowExpanded: (row: any) => void;
-    isRowExpanded: (row: any) => boolean;
-    expandAllRows: () => void;
-    collapseAllRows: () => void;
-    getExpandedRowKeys: () => string[];
 };

package/dist/Tabs/Tab.js

@@ -12,14 +12,6 @@ const StyledTabButton = styled(Button) `
   color: ${({ theme }) => theme.palette.text.secondary};
   font-weight: 500;
 
-  &:focus {
-    text-decoration: none;
-  }
-
-  &:focus-visible {
-    background-color: ${({ theme }) => theme.palette.action.hover};
-  }
-
   ${({ orientation }) => orientation === "horizontal" &&
     css `
       border-bottom: 2px solid transparent;

package/dist/TagBox/TagBox.d.ts

@@ -1,3 +1,3 @@
 import { TagBoxProps } from "./types";
-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, dynamicOptionHeight, renderOption, renderTag, OptionTooltip, DropDownProps, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+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, enableSelectAll, maxDisplayed, openOnFocus, label, description, required, error, loading, sort, disabled, renderOption, renderTag, OptionTooltip, DropDownProps, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default TagBox;