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

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/Utilities/getImageTextContent.d.ts

@@ -0,0 +1,78 @@
+export type ImageOcrProgress = {
+    status: string;
+    progress: number;
+};
+export type ImageOcrLine = {
+    text: string;
+    confidence?: number;
+    bbox?: {
+        x0: number;
+        y0: number;
+        x1: number;
+        y1: number;
+    };
+};
+export type ImageTextContent = {
+    text: string;
+    confidence?: number;
+    language: string;
+    lines: ImageOcrLine[];
+};
+export declare const ImageOcrPageSegModes: {
+    readonly OSD_ONLY: "0";
+    readonly AUTO_OSD: "1";
+    readonly AUTO_ONLY: "2";
+    readonly AUTO: "3";
+    readonly SINGLE_COLUMN: "4";
+    readonly SINGLE_BLOCK_VERT_TEXT: "5";
+    readonly SINGLE_BLOCK: "6";
+    readonly SINGLE_LINE: "7";
+    readonly SINGLE_WORD: "8";
+    readonly CIRCLE_WORD: "9";
+    readonly SINGLE_CHAR: "10";
+    readonly SPARSE_TEXT: "11";
+    readonly SPARSE_TEXT_OSD: "12";
+    readonly RAW_LINE: "13";
+};
+export type ImageOcrPageSegMode = (typeof ImageOcrPageSegModes)[keyof typeof ImageOcrPageSegModes];
+export type ImageOcrPreprocessOptions = {
+    grayscale?: boolean;
+    contrast?: number;
+    scale?: number;
+    threshold?: number;
+    maxDimension?: number;
+};
+export type ImageOcrRectangle = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export type ImageOcrRecognizeOptions = {
+    rectangle?: ImageOcrRectangle;
+    rotateAuto?: boolean;
+    rotateRadians?: number;
+};
+export type ImageOcrParameters = {
+    tessedit_pageseg_mode?: ImageOcrPageSegMode;
+    tessedit_char_whitelist?: string;
+    tessedit_char_blacklist?: string;
+    preserve_interword_spaces?: "0" | "1";
+    user_defined_dpi?: string;
+    [key: string]: string | undefined;
+};
+export type ImageOcrPreset = "default" | "document" | "driver-license";
+export type GetImageTextContentOptions = {
+    language?: string;
+    preset?: ImageOcrPreset;
+    onProgress?: (progress: ImageOcrProgress) => void;
+    preprocess?: ImageOcrPreprocessOptions;
+    recognizeOptions?: ImageOcrRecognizeOptions;
+    parameters?: ImageOcrParameters;
+    workerOptions?: {
+        workerPath?: string;
+        corePath?: string;
+        langPath?: string;
+    };
+};
+export declare const getImageTextContent: (image: File, options?: GetImageTextContentOptions) => Promise<ImageTextContent>;