@monolith-forensics/monolith-ui 1.9.3-dev.0 → 1.9.3-dev.2

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js

@@ -34,6 +34,19 @@ const readFileAsDataUrl = (file) => {
         reader.readAsDataURL(file);
     });
 };
+const getImageExtensionFromMimeType = (mimeType) => {
+    var _a;
+    const subtype = (_a = mimeType.toLowerCase().split("/")[1]) === null || _a === void 0 ? void 0 : _a.split(";")[0];
+    if (!subtype)
+        return "png";
+    if (subtype === "jpeg" || subtype === "pjpeg")
+        return "jpg";
+    if (subtype === "svg+xml")
+        return "svg";
+    if (subtype === "x-icon" || subtype === "vnd.microsoft.icon")
+        return "ico";
+    return subtype.replace(/[^a-z0-9]/g, "") || "png";
+};
 export const addImagePlaceholder = ({ view, id, pos, src, label = "Processing image...", }) => {
     if (!uploadKey.getState(view.state))
         return;
@@ -71,6 +84,7 @@ export const startImageUpload = (file, view, pos, handleImageUpload) => {
     }
     // A fresh object to act as the ID for this upload
     const id = nanoid(25);
+    const uploadName = `${id}.${getImageExtensionFromMimeType(file.type)}`;
     // Replace the selection with a placeholder
     (() => __awaiter(void 0, void 0, void 0, function* () {
         let placeholderAdded = false;
@@ -92,7 +106,7 @@ export const startImageUpload = (file, view, pos, handleImageUpload) => {
             const hashes = yield calculateFileHash(file);
             const src = yield handleImageUpload({
                 file,
-                name: `${id}.png`,
+                name: uploadName,
                 id,
                 md5: hashes.md5Hash,
                 sha1: hashes.sha1Hash,
@@ -111,10 +125,10 @@ export const startImageUpload = (file, view, pos, handleImageUpload) => {
             const imageSrc = typeof src === "object" ? previewSrc : src;
             const node = view.state.schema.nodes.image.create({
                 src: imageSrc,
-                alt: `${id}.png`,
+                alt: uploadName,
                 "data-uuid": id,
                 crossorigin: "anonymous",
-                title: `Filename: ${id}.png`,
+                title: `Filename: ${uploadName}`,
             });
             const insertTransaction = view.state.tr
                 .replaceWith(placeholderPos, placeholderPos, node)

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -1,15 +1,18 @@
 import { Editor } from "@tiptap/react";
 import { ExtensionPreset, ExtensionType } from "./Extensions/getTiptapExtensions";
+import type { CustomSlashCommand } from "./Extensions/getSlashCommand";
+import { SlashCommands } from "./Enums";
 import { HandleImageUrlUpload, HandleImageUpload } from "./Plugins/UploadImagesPlugin";
 import { BubbleMenuOptions } from "./Components/BubbleMenu";
 import { ToolbarOptions } from "./Toolbar/Toolbar";
-type RichTextEditorProps = {
+export type RichTextEditorProps = {
     className?: string;
     editorInstanceRef?: React.RefObject<Editor | null>;
     extensions?: ExtensionType[];
     disabledExtensions?: ExtensionType[];
     extensionPreset?: ExtensionPreset;
-    slashCommands?: any[];
+    slashCommands?: SlashCommands[];
+    customSlashCommands?: CustomSlashCommand[];
     defaultValue?: string;
     value?: string;
     readOnly?: boolean;
@@ -25,5 +28,5 @@ type RichTextEditorProps = {
     autoFocus?: boolean;
     style?: React.CSSProperties;
 };
+export type { CustomSlashCommand, SlashCommandActionProps, SlashCommandRange, } from "./Extensions/getSlashCommand";
 export declare const RichTextEditor: React.FC<RichTextEditorProps>;
-export {};

package/dist/RichTextEditor/RichTextEditor.js

@@ -338,11 +338,6 @@ const StyledContent = styled.div `
       max-width: 100%;
       overflow-x: auto;
       padding: 5px 0px;
-      cursor: default;
-
-      table {
-        cursor: text;
-      }
     }
 
     table {
@@ -818,7 +813,7 @@ const StyledContent = styled.div `
     margin: 0 0.125rem;
   }
 `;
-export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, disabledExtensions = [], extensionPreset = "basic", extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
+export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, disabledExtensions = [], extensionPreset = "basic", extensions = [], slashCommands = [], customSlashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
     const resolvedExtensions = useMemo(() => resolveExtensions({
         disabledExtensions,
         extensionPreset,
@@ -873,11 +868,14 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
     const hasImageSlashCommand = hasSlashCommandExtension &&
         resolvedSlashCommands.includes(SlashCommands.Image);
     const onChangeRef = useRef(onChange);
+    const customSlashCommandsRef = useRef(customSlashCommands);
     const bubbleMenuPortalRef = useRef(null);
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
+    customSlashCommandsRef.current = customSlashCommands;
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    const getCustomSlashCommands = useCallback(() => customSlashCommandsRef.current, []);
     const getBubbleMenuPortalRoot = useCallback(() => {
         if (bubbleMenuPortalRef.current) {
             return bubbleMenuPortalRef.current;
@@ -932,6 +930,8 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
             disabledExtensions,
             extensions: resolvedExtensions,
             slashCommands: resolvedSlashCommands,
+            customSlashCommands,
+            getCustomSlashCommands,
             handleImageUpload,
         }),
         editorProps: {

package/dist/SegmentedControl/SegmentedControl.js

@@ -55,7 +55,7 @@ export const SegmentedControl = (_a) => {
     });
     const columnCount = Math.max(normalizedData.length, 1);
     const firstEnabledIndex = getFirstEnabledIndex(normalizedData);
-    return (_jsxs(StyledRoot, Object.assign({ role: "radiogroup", "aria-disabled": disabled, className: className, style: Object.assign({ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }, style), "$fullWidth": fullWidth, "$disabled": disabled, onKeyDown: handleKeyDown }, other, { children: [name && _jsx("input", { type: "hidden", name: name, value: _value || "" }), activeIndex >= 0 && !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.disabled) && (_jsx(StyledIndicator, { "$index": activeIndex, "$count": columnCount, "$variant": variant, "$activeColor": activeColor })), normalizedData.map((item, index) => {
+    return (_jsxs(StyledRoot, Object.assign({ role: "radiogroup", "aria-disabled": disabled, className: className, style: Object.assign({ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }, style), "$fullWidth": fullWidth, "$disabled": disabled, "$size": size, onKeyDown: handleKeyDown }, other, { children: [name && _jsx("input", { type: "hidden", name: name, value: _value || "" }), activeIndex >= 0 && !(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.disabled) && (_jsx(StyledIndicator, { "$index": activeIndex, "$count": columnCount, "$variant": variant, "$activeColor": activeColor })), normalizedData.map((item, index) => {
                 const isActive = item.value === _value && !item.disabled;
                 const isSegmentDisabled = disabled || item.disabled;
                 return (_jsx(StyledSegmentButton, { ref: (node) => {

package/dist/SegmentedControl/SegmentedControl.styles.d.ts

@@ -3,6 +3,7 @@ import { SegmentedControlVariant } from "./SegmentedControl.types";
 export declare const StyledRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $fullWidth: boolean;
     $disabled: boolean;
+    $size?: Size;
 }>> & string;
 export declare const StyledIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $index: number;

package/dist/SegmentedControl/SegmentedControl.styles.js

@@ -1,27 +1,33 @@
 import styled from "styled-components";
-import { getSegmentFontSize, getSegmentHeight, resolveActiveColor, } from "./SegmentedControl.utils";
+import { getSegmentFontSize, getSegmentHeight, getSegmentPaddingX, resolveActiveColor, } from "./SegmentedControl.utils";
+const SEGMENT_GAP = 2;
 export const StyledRoot = styled.div `
   user-select: none;
   position: relative;
   display: grid;
   align-items: center;
+  grid-auto-rows: minmax(0, 1fr);
+  column-gap: ${SEGMENT_GAP}px;
+  box-sizing: border-box;
   width: ${({ $fullWidth }) => ($fullWidth ? "100%" : "fit-content")};
-  min-width: ${({ $fullWidth }) => ($fullWidth ? "0" : "200px")};
-  padding: 3px;
-  border-radius: 8px;
-  border: 1px solid ${({ theme }) => theme.palette.action.hover};
+  min-width: 0;
+  height: ${({ $size }) => `${getSegmentHeight($size)}px`};
+  padding: 2px;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.palette.input.border};
   background: ${({ theme }) => theme.palette.background.secondary};
   opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
   pointer-events: ${({ $disabled }) => ($disabled ? "none" : "auto")};
 `;
 export const StyledIndicator = styled.div `
   position: absolute;
-  top: 3px;
-  left: 3px;
+  top: 2px;
+  left: 2px;
   z-index: 1;
-  height: calc(100% - 6px);
-  width: ${({ $count }) => `calc((100% - 6px) / ${$count})`};
-  border-radius: 6px;
+  box-sizing: border-box;
+  height: calc(100% - 4px);
+  width: ${({ $count }) => `calc((100% - 4px - ${($count - 1) * SEGMENT_GAP}px) / ${$count})`};
+  border-radius: 4px;
   border: 1px solid
     ${({ theme, $variant, $activeColor }) => {
     const resolved = resolveActiveColor(theme, $activeColor);
@@ -33,17 +39,26 @@ export const StyledIndicator = styled.div `
         ? resolved.main
         : theme.palette.background.paper;
 }};
-  transform: translateX(${({ $index }) => `${$index * 100}%`});
+  transform: translateX(
+    ${({ $index }) => `calc(${$index * 100}% + ${$index * SEGMENT_GAP}px)`}
+  );
   transition: transform 160ms ease;
 `;
 export const StyledSegmentButton = styled.button `
   position: relative;
   z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   border: none;
   outline: none;
-  padding: 0 12px;
+  padding: ${({ $size }) => `0 ${getSegmentPaddingX($size)}px`};
   margin: 0;
-  border-radius: 6px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 4px;
   background: transparent;
   color: ${({ theme, $active, $variant, $activeColor }) => {
     const resolved = resolveActiveColor(theme, $activeColor);
@@ -54,7 +69,8 @@ export const StyledSegmentButton = styled.button `
   font-size: ${({ $size }) => getSegmentFontSize($size)};
   font-weight: 500;
   line-height: 1;
-  height: ${({ $size }) => `${getSegmentHeight($size)}px`};
+  height: 100%;
+  min-height: 0;
   white-space: nowrap;
   cursor: pointer;
   transition:

package/dist/SegmentedControl/SegmentedControl.utils.d.ts

@@ -6,6 +6,7 @@ export declare const resolveActiveColor: (theme: any, activeColor?: string) => {
 };
 export declare const getSegmentHeight: (size?: Size) => number;
 export declare const getSegmentFontSize: (size?: Size) => string;
+export declare const getSegmentPaddingX: (size?: Size) => number;
 export declare const normalizeSegmentedData: (data: SegmentedControlDataItem[]) => NormalizedSegmentedItem[];
 export declare const getFirstEnabledIndex: (data: NormalizedSegmentedItem[]) => number;
 export declare const getNextEnabledIndex: (data: NormalizedSegmentedItem[], startIndex: number, direction: 1 | -1) => number;

package/dist/SegmentedControl/SegmentedControl.utils.js

@@ -22,10 +22,13 @@ export const resolveActiveColor = (theme, activeColor) => {
     };
 };
 export const getSegmentHeight = (size) => {
-    return getControlSizeTokens(size).segmentedHeight;
+    return getControlSizeTokens(size).height;
 };
 export const getSegmentFontSize = (size) => {
-    return `${getControlSizeTokens(size).segmentedFontSize}px`;
+    return `${getControlSizeTokens(size).fontSize}px`;
+};
+export const getSegmentPaddingX = (size) => {
+    return getControlSizeTokens(size).buttonPaddingX;
 };
 export const normalizeSegmentedData = (data) => data.map((item) => {
     var _a;

package/dist/Table/Table.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useOverlayScrollbars } from "overlayscrollbars-react";
-import { StyledTable } from "./TableComponents";
+import { StyledTable, TableEmptyState, TableEmptyStateDescription, TableEmptyStateTitle, } from "./TableComponents";
 import TableHeader from "./TableHeader";
 import TableProvider from "./TableProvider";
 import shortUUID from "short-uuid";
@@ -33,12 +33,13 @@ const StyledTableContainer = styled.div `
 `;
 const TableContent = ({ children, }) => {
     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;
+    const visibleColumnCount = columnState.filter((column) => column.visible !== false).length;
+    const allColumnsHidden = columnState.length > 0 && visibleColumnCount === 0;
     return (_jsxs(StyledTableContainer, { children: [_jsx(TableMenu, {}), children, _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("div", { children: "No columns visible" }), virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
+                }, ref: tableElement, "data-compact": compactState, "data-all-columns-hidden": allColumnsHidden, children: [_jsx(LoadingIndicator, { visible: loading }), _jsx(TableHeader, { headerRowElm: headerRowElm }), allColumnsHidden ? (_jsxs(TableEmptyState, { className: "mfui-table-empty-state", role: "status", children: [_jsx(TableEmptyStateTitle, { children: "All columns are hidden" }), _jsx(TableEmptyStateDescription, { children: "No data is currently displaying because every table column is hidden." })] })) : null, virtualized === true ? (_jsx(VirtualizedRows, { tableDimensions: tableDimensions, targetElm: targetElm, listElm: listElm, rowHeight: rowHeight, headerRowHeight: headerRowHeight })) : (_jsx(StaticRows, { targetElm: targetElm, listElm: listElm }))] })] }));
 };
 export const Table = (_a) => {
     var { data, columnProps, children, treeOptions } = _a, props = __rest(_a, ["data", "columnProps", "children", "treeOptions"]) // pass through props straight to table context

package/dist/Table/TableComponents.d.ts

@@ -18,5 +18,8 @@ export declare const TreeChevronPlaceholder: import("styled-components/dist/type
 export declare const TreeCellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableViewPort: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableListElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableEmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableEmptyStateTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TableEmptyStateDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/Table/TableComponents.js

@@ -175,6 +175,36 @@ export const TableListElement = styled.div `
   flex-direction: column;
   min-width: 100%;
 `;
+export const TableEmptyState = styled.div `
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  background-color: ${({ theme }) => theme.palette.background.default};
+  text-align: center;
+  font-size: 12px;
+
+  svg {
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+`;
+export const TableEmptyStateTitle = styled.div `
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-size: 16px;
+  font-weight: 600;
+`;
+export const TableEmptyStateDescription = styled.div `
+  max-width: 320px;
+  line-height: 1.45;
+`;
 export const TableWrapper = styled.div `
   position: relative;
   flex: 1 1 auto;
@@ -189,6 +219,17 @@ export const StyledTable = styled.div `
   display: flex;
   flex-direction: column;
 
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    box-shadow:
+      inset 1px 0 ${({ theme }) => theme.palette.divider},
+      inset -1px 0 ${({ theme }) => theme.palette.divider};
+  }
+
   &[data-compact="true"] .mfui-tr,
   &[data-compact="true"] .mfui-thr,
   &[data-compact="true"] .mfui-td {
@@ -213,4 +254,10 @@ export const StyledTable = styled.div `
     pointer-events: auto;
     visibility: visible;
   }
+
+  &[data-all-columns-hidden="true"] .mfui-thead,
+  &[data-all-columns-hidden="true"] .mfui-tbody-viewport {
+    visibility: hidden;
+    pointer-events: none;
+  }
 `;

package/dist/Table/TableHeader.js

@@ -58,7 +58,7 @@ const TableHeader = ({ headerRowElm }) => {
                         flexShrink: 0,
                         justifyContent: "center",
                         alignItems: "center",
-                    }, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: disableSelectAll !== true && (_jsx(CheckBox, { value: selectionState.selectionStatus === "all", partialCheck: (_a = selectionState.selectionStatus) === null || _a === void 0 ? void 0 : _a.includes("some"), onChange: handleChangeSelection })) }) })), enableActionButton && (_jsx(TH, { className: `mfui-th column-action`, style: {
+                    }, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content", children: disableSelectAll !== true && (_jsx(CheckBox, { size: "xs", value: selectionState.selectionStatus === "all", partialCheck: (_a = selectionState.selectionStatus) === null || _a === void 0 ? void 0 : _a.includes("some"), onChange: handleChangeSelection })) }) })), enableActionButton && (_jsx(TH, { className: `mfui-th column-action`, style: {
                         width: TableDefaults.actionCell.width,
                         minWidth: TableDefaults.actionCell.minWidth,
                         maxWidth: TableDefaults.actionCell.maxWidth,

package/dist/Table/TableMenu/TableMenu.js

@@ -30,7 +30,7 @@ const FlexedRow = styled.div `
 `;
 const TableMenu = () => {
     var _a, _b, _c, _d, _e;
-    const { data, columnState, searchState, toggleColumnVisibility, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, handleTableExport, filterState, handleFilterChange, clearSearch, } = useTable();
+    const { data, columnState, searchState, setVisibleColumns, tableMenuOptions, runSearch, enableSelection, compactState, toggleCompact, totalRecords, getCalculatedSelectionTotal, handleTableExport, filterState, handleFilterChange, } = useTable();
     const inputRef = useRef(null);
     if ((tableMenuOptions === null || tableMenuOptions === void 0 ? void 0 : tableMenuOptions.enabled) !== true)
         return null;
@@ -116,13 +116,14 @@ const TableMenu = () => {
                                 }, 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),
                                 })), defaultValue: columnState
                                     .filter((col) => col.visible !== false)
                                     .map((col) => ({
                                     label: (col === null || col === void 0 ? void 0 : col.caption) || col.dataField,
                                     value: col.dataField,
-                                })), multiselect: true, searchable: true, buttonProps: {
+                                })), multiselect: true, enableSelectAll: true, searchable: true, onChange: (e) => {
+                                    setVisibleColumns(e.map((item) => item.value));
+                                }, buttonProps: {
                                     title: "Show/Hide Columns",
                                     size: "xs",
                                     style: { padding: "0px 4px", height: 24 },

package/dist/Table/TableProvider.js

@@ -595,6 +595,39 @@ const TableProvider = (_a) => {
         });
         updateColumnState(newColumnState);
     };
+    const setVisibleColumns = (dataFields) => {
+        const newColumnState = columnState.map((col) => {
+            if (dataFields.includes(col.dataField)) {
+                return Object.assign(Object.assign({}, col), { visible: true });
+            }
+            return Object.assign(Object.assign({}, col), { visible: false });
+        });
+        updateColumnState(newColumnState);
+    };
+    const showColumn = (dataField) => {
+        const column = columnState.find((col) => col.dataField === dataField);
+        if (column && column.visible === false) {
+            const newColumnState = columnState.map((col) => {
+                if (col.dataField === dataField) {
+                    return Object.assign(Object.assign({}, col), { visible: true });
+                }
+                return col;
+            });
+            updateColumnState(newColumnState);
+        }
+    };
+    const hideColumn = (dataField) => {
+        const column = columnState.find((col) => col.dataField === dataField);
+        if (column && column.visible === true) {
+            const newColumnState = columnState.map((col) => {
+                if (col.dataField === dataField) {
+                    return Object.assign(Object.assign({}, col), { visible: false });
+                }
+                return col;
+            });
+            updateColumnState(newColumnState);
+        }
+    };
     const toggleCompact = () => {
         setCompactState((prev) => !prev);
     };
@@ -852,6 +885,9 @@ const TableProvider = (_a) => {
             setColumnState: updateColumnState,
             getColumnState,
             toggleColumnVisibility,
+            showColumn,
+            hideColumn,
+            setVisibleColumns,
             getColumnVisibility,
             getSelectedRows,
             getSelectedRowKeys,
@@ -900,6 +936,9 @@ const TableProvider = (_a) => {
             selectAllRows,
             clearSelections,
             toggleColumnVisibility,
+            setVisibleColumns,
+            showColumn,
+            hideColumn,
             runSearch,
             clearSearch,
             handleTableExport,

package/dist/Table/TableRow.js

@@ -13,7 +13,7 @@ const TableRow = ({ rowData, loading, rowStyle }) => {
     const handleSelectionChange = (e) => {
         e === true ? selectRow(rowData) : deselectRow(rowData);
     };
-    return (_jsxs(TR, { className: "mfui-tr", "data-key": rowData.__key, "data-selected": selected, "data-focused": focused, style: Object.assign(Object.assign({}, rowStyle), { width: tableLayout.contentWidth }), children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action row-selection-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
+    return (_jsxs(TR, { className: "mfui-tr", "data-key": rowData.__key, "data-selected": selected, "data-focused": focused, style: Object.assign(Object.assign({}, rowStyle), { width: tableLayout.contentWidth }), children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action row-selection-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, size: "xs", value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
                 var _a;
                 if (column.visible === false)
                     return null;

package/dist/Table/types.d.ts

@@ -168,6 +168,9 @@ export type TableContextType = {
     focusedRowId?: string | number;
     toggleCompact: () => void;
     toggleColumnVisibility: (dataField: string) => void;
+    setVisibleColumns: (dataFields: string[]) => void;
+    showColumn: (dataField: string) => void;
+    hideColumn: (dataField: string) => void;
     runSearch: (query: string) => void;
     clearSearch: () => void;
     handleTableExport: (e: TableExportOptions) => Promise<void> | void;
@@ -388,6 +391,9 @@ export type TableInstance = {
     onColumnReorder?: (e: OnColumnChangeProps) => void;
     onColumnStateChange?: (e: ColumnState[]) => void;
     toggleColumnVisibility: (dataField: string) => void;
+    setVisibleColumns: (dataFields: string[]) => void;
+    showColumn: (dataField: string) => void;
+    hideColumn: (dataField: string) => void;
     getColumnVisibility: (dataField: string) => boolean;
     getSelectedRows: () => any[];
     getSelectedRowKeys: () => string[];

package/dist/core/controlSizes.js

@@ -26,7 +26,7 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 6,
         pillIconSize: 10,
         pillGap: 4,
-        segmentedHeight: 22,
+        segmentedHeight: 24,
         segmentedFontSize: 11,
         sectionTitleFontSize: 12,
         sectionIconSize: 12,
@@ -57,7 +57,7 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 8,
         pillIconSize: 12,
         pillGap: 5,
-        segmentedHeight: 26,
+        segmentedHeight: 28,
         segmentedFontSize: 12,
         sectionTitleFontSize: 13,
         sectionIconSize: 12,
@@ -89,7 +89,7 @@ const CONTROL_SIZE_TOKENS = {
         pillIconSize: 14,
         pillGap: 5,
         segmentedHeight: 32,
-        segmentedFontSize: 14,
+        segmentedFontSize: 13,
         sectionTitleFontSize: 14,
         sectionIconSize: 14,
     },
@@ -119,8 +119,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 12,
         pillIconSize: 16,
         pillGap: 5,
-        segmentedHeight: 38,
-        segmentedFontSize: 16,
+        segmentedHeight: 36,
+        segmentedFontSize: 14,
         sectionTitleFontSize: 16,
         sectionIconSize: 18,
     },
@@ -150,8 +150,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 14,
         pillIconSize: 18,
         pillGap: 5,
-        segmentedHeight: 46,
-        segmentedFontSize: 18,
+        segmentedHeight: 44,
+        segmentedFontSize: 15,
         sectionTitleFontSize: 18,
         sectionIconSize: 24,
     },
@@ -181,8 +181,8 @@ const CONTROL_SIZE_TOKENS = {
         pillPaddingX: 16,
         pillIconSize: 20,
         pillGap: 5,
-        segmentedHeight: 56,
-        segmentedFontSize: 20,
+        segmentedHeight: 52,
+        segmentedFontSize: 16,
         sectionTitleFontSize: 20,
         sectionIconSize: 28,
     },

package/package.json

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

package/dist/RichTextEditor/Components/TableCornerMenu.d.ts

@@ -1,16 +0,0 @@
-import { Editor } from "@tiptap/react";
-import type { MouseEvent as ReactMouseEvent } from "react";
-import type { TableRailTarget } from "./TableTools";
-type TableCornerMenuProps = {
-    editor: Editor | null;
-    target: TableRailTarget;
-    opened: boolean;
-    onOpen: () => void;
-    onClose: () => void;
-    onAction: () => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    onMouseDown: (event: ReactMouseEvent<HTMLButtonElement>) => void;
-};
-export declare const TableCornerMenu: ({ editor, target, opened, onOpen, onClose, onAction, onMouseEnter, onMouseLeave, onMouseDown, }: TableCornerMenuProps) => import("react/jsx-runtime").JSX.Element;
-export {};