@monolith-forensics/monolith-ui 1.9.3-dev.4 → 2.1.0

package/dist/Button/Button.js

@@ -46,14 +46,16 @@ const StyledButton = styled.button `
     return `0px ${getControlSizeTokens(size).buttonPaddingX}px`;
 }};
 
-  color: ${({ theme, variant, color }) => {
+  color: ${({ theme, variant, color, selected }) => {
     var _a, _b;
-    if (variant === "default")
-        return theme.palette.text.primary;
     if (variant === "contained")
         return "white";
     if (variant === "filled")
         return "white";
+    if (selected)
+        return theme.palette.primary.main;
+    if (variant === "default")
+        return theme.palette.text.primary;
     if (color) {
         return (((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.button) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[color]) ||
             colors[color] ||
@@ -69,6 +71,9 @@ const StyledButton = styled.button `
         resolvedColor =
             ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.button) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[color]) || colors[color];
     }
+    if (selected && variant !== "contained" && variant !== "filled") {
+        return theme.palette.primary.main + "20";
+    }
     switch (variant) {
         case "default":
             return theme.button.background.default;
@@ -121,7 +126,9 @@ const StyledButton = styled.button `
 
   cursor: pointer;
 
-  transition: background-color 0.2s, border 0.2s;
+  transition:
+    background-color 0.2s,
+    border 0.2s;
 
   .inner-span {
     display: flex;

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
+import { DEFAULT_DROPDOWN_MAX_HEIGHT } from "./constants";
+const getNumericCssLength = (value) => {
+    if (typeof value === "number")
+        return value;
+    if (typeof value !== "string")
+        return undefined;
+    const pixelMatch = value.trim().match(/^(\d+(?:\.\d+)?)px$/);
+    return pixelMatch ? Number(pixelMatch[1]) : undefined;
+};
 export const DropDownMenu = ({ data, children, defaultValue, value, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, enableSelectAll, enableSelectedOptionStyling, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
+    const maxDropdownHeight = (_f = (_e = (_c = getNumericCssLength((_b = dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.style) === null || _b === void 0 ? void 0 : _b.height)) !== null && _c !== void 0 ? _c : getNumericCssLength((_d = dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.style) === null || _d === void 0 ? void 0 : _d.maxHeight)) !== null && _e !== void 0 ? _e : getNumericCssLength(dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.maxDropdownHeight)) !== null && _f !== void 0 ? _f : DEFAULT_DROPDOWN_MAX_HEIGHT;
     const [internalSelected, setInternalSelected] = useState(defaultValue || []);
     const isControlled = value !== undefined;
     const selected = isControlled ? value || [] : internalSelected;
@@ -35,5 +45,5 @@ export const DropDownMenu = ({ data, children, defaultValue, value, variant, arr
     const handleScrollToBottom = (e) => {
         onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom(e);
     };
-    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, enableSelectAll: enableSelectAll, enableSelectedOptionStyling: enableSelectedOptionStyling, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleSetSelected: handleSetSelected, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
+    return (_jsx(Menu, { label: children, disabled: disabled, arrow: arrow, buttonSize: size, variant: variant, multiselect: multiselect, buttonProps: buttonProps, onMenuClose: handleMenuClose, dropDownProps: dropDownProps, children: _jsxs(StyledInnerItemContainer, { children: [loading && _jsx("div", { children: "Loading..." }), !loading && (_jsx(MenuItemList, { menuItems: data, searchable: searchable, grouped: grouped, onAddNew: onAddNew, onSearch: onSearch, manualSearch: manualSearch, dynamicOptionHeight: dynamicOptionHeight, maxDropdownHeight: maxDropdownHeight, selected: selected, TooltipContent: TooltipContent, multiselect: multiselect, enableSelectAll: enableSelectAll, enableSelectedOptionStyling: enableSelectedOptionStyling, size: size, handleAddItem: handleAddItem, handleRemoveItem: handleRemoveItem, handleSetSelected: handleSetSelected, onItemSelect: onItemSelect, renderOption: renderOption, onScroll: onScroll, onScrollToTop: onScrollToTop, onScrollToBottom: handleScrollToBottom, query: query }))] }) }));
 };

package/dist/DropDownMenu/components/MenuComponent.js

@@ -18,8 +18,14 @@ import { MenuContext } from "./MenuContext";
 import { StyledFloatContainer } from "./StyledFloatContainer";
 import { StyledContent } from "./StyledContent";
 import { MenuItem } from "./MenuItem";
+import { DEFAULT_DROPDOWN_MAX_HEIGHT } from "../constants";
 export const MenuComponent = forwardRef((_a, forwardedRef) => {
     var { children, label, arrow, size, buttonSize, variant, buttonProps, buttonRender, multiselect, onMenuClose, dropDownProps, disabled } = _a, props = __rest(_a, ["children", "label", "arrow", "size", "buttonSize", "variant", "buttonProps", "buttonRender", "multiselect", "onMenuClose", "dropDownProps", "disabled"]);
+    const _b = dropDownProps || {}, { style: dropDownStyle } = _b, contentProps = __rest(_b, ["style"]);
+    const contentStyle = Object.assign({ height: "fit-content", maxHeight: (dropDownStyle === null || dropDownStyle === void 0 ? void 0 : dropDownStyle.maxHeight) ||
+            (dropDownStyle === null || dropDownStyle === void 0 ? void 0 : dropDownStyle.height) ||
+            (dropDownProps === null || dropDownProps === void 0 ? void 0 : dropDownProps.maxDropdownHeight) ||
+            DEFAULT_DROPDOWN_MAX_HEIGHT }, dropDownStyle);
     const [isOpen, setIsOpen] = useState(false);
     const [hasFocusInside, setHasFocusInside] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
@@ -119,5 +125,5 @@ export const MenuComponent = forwardRef((_a, forwardedRef) => {
                     getItemProps,
                     setHasFocusInside,
                     isOpen,
-                }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, className: "Menu", style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, Object.assign({ className: "mfFloatingContent" }, dropDownProps, { children: children })) })) }) })) }) })] }));
+                }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, className: "Menu", style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, Object.assign({ className: "mfFloatingContent", style: contentStyle }, contentProps, { children: children })) })) }) })) }) })] }));
 });

package/dist/DropDownMenu/components/MenuItem.js

@@ -26,7 +26,7 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     return (_jsx(Tooltip, { content: TooltipContent ? _jsx(TooltipContent, { data: itemData }) : null, side: "left", children: _jsx(Button, Object.assign({}, props, { ref: useMergeRefs([
                 item.ref,
                 forwardedRef,
-            ]), type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: disabled, justify: "start", color: props.color }, menu.getItemProps({
+            ]), type: "button", role: "menuitem", tabIndex: isActive ? 0 : -1, disabled: disabled, justify: "start", color: props.color, selected: false }, menu.getItemProps({
             onClick(event) {
                 var _a;
                 (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
@@ -49,7 +49,9 @@ export const MenuItem = styled(forwardRef((_a, forwardedRef) => {
     min-height: ${({ size = "sm" }) => `${getControlSizeTokens(size).menuRowHeight}px`};
     width: 100%;
     min-width: 100%;
-    height: ${({ size = "sm", $dynamicHeight }) => $dynamicHeight ? "auto" : `${getControlSizeTokens(size).menuRowHeight}px`};
+    height: ${({ size = "sm", $dynamicHeight }) => $dynamicHeight
+    ? "auto"
+    : `${getControlSizeTokens(size).menuRowHeight}px`};
     box-sizing: border-box;
     position: relative;
     user-select: none;

package/dist/DropDownMenu/components/MenuItemList.d.ts

@@ -24,5 +24,6 @@ export declare const MenuItemList: React.FC<{
     onScroll?: (e: Event) => void;
     onScrollToTop?: (e: Event) => void;
     onScrollToBottom?: (e: Event) => void;
+    maxDropdownHeight?: number;
     query?: DropDownMenuProps["query"];
 }>;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -22,6 +22,7 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { useDebouncedCallback } from "use-debounce";
 import { SearchInput } from "./SearchInput";
 import Loader from "../../Loader";
+import { DEFAULT_DROPDOWN_MAX_HEIGHT, DROPDOWN_CONTENT_VERTICAL_PADDING, SEARCH_INPUT_MARGIN_BOTTOM, } from "../constants";
 const getItemKey = (item) => item && typeof item === "object" && "value" in item ? item.value : item;
 const filterMenuItems = (menuItems, searchValue) => {
     return menuItems.filter((item) => {
@@ -128,7 +129,7 @@ const MeasuredRow = ({ children, index, setItemSize, style }) => {
     }, [children, index, setItemSize]);
     return (_jsx("div", { style: Object.assign(Object.assign({}, style), { overflow: "visible" }), children: _jsx("div", { ref: rowRef, children: children }) }));
 };
-export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dynamicOptionHeight, selected, TooltipContent, multiselect, enableSelectAll, enableSelectedOptionStyling, grouped, onAddNew, size, handleAddItem, handleRemoveItem, handleSetSelected, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, query, }) => {
+export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dynamicOptionHeight, selected, TooltipContent, multiselect, enableSelectAll, enableSelectedOptionStyling, grouped, onAddNew, size, handleAddItem, handleRemoveItem, handleSetSelected, onItemSelect, renderOption, onScroll, onScrollToTop, onScrollToBottom, maxDropdownHeight = DEFAULT_DROPDOWN_MAX_HEIGHT, query, }) => {
     const [searchValue, setSearchValue] = useState("");
     const _a = query !== null && query !== void 0 ? query : {}, { queryKey, queryFn, getNextPageParam, initialPageParam } = _a, rest = __rest(_a, ["queryKey", "queryFn", "getNextPageParam", "initialPageParam"]);
     const targetElm = useRef(null);
@@ -253,16 +254,25 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
     const getDynamicItemSize = (index) => {
         var _a;
         return itemSizeMap.current[index] ||
-            (((_a = displayItems[index]) === null || _a === void 0 ? void 0 : _a._isGroupHeader) ? itemHeight : estimatedDynamicItemHeight);
+            (((_a = displayItems[index]) === null || _a === void 0 ? void 0 : _a._isGroupHeader)
+                ? itemHeight
+                : estimatedDynamicItemHeight);
     };
     const estimatedHeight = dynamicListEnabled
         ? displayItems.reduce((total, _, index) => total + getDynamicItemSize(index), 0)
         : itemCount * itemHeight;
-    const height = viewPortDimensions.height
-        ? viewPortDimensions.height
-        : estimatedHeight < 200
-            ? estimatedHeight
-            : 200;
+    const searchHeight = searchable
+        ? sizeTokens.height + SEARCH_INPUT_MARGIN_BOTTOM
+        : 0;
+    const selectAllHeight = multiselect && enableSelectAll && selectableItems.length > 0
+        ? itemHeight
+        : 0;
+    const maxListHeight = Math.max(itemHeight, maxDropdownHeight -
+        DROPDOWN_CONTENT_VERTICAL_PADDING -
+        searchHeight -
+        selectAllHeight);
+    const availableHeight = viewPortDimensions.height || maxListHeight;
+    const height = Math.min(estimatedHeight, availableHeight, maxListHeight);
     const width = "100%";
     useLayoutEffect(() => {
         const target = targetElm.current;

package/dist/DropDownMenu/components/SearchInput.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Input from "../../Input";
-export const SearchInput = forwardRef((props, ref) => _jsx(Input, Object.assign({ ref: ref, style: { marginBottom: 8 } }, props)));
+import { SEARCH_INPUT_MARGIN_BOTTOM } from "../constants";
+export const SearchInput = forwardRef((props, ref) => (_jsx(Input, Object.assign({ ref: ref, style: { marginBottom: SEARCH_INPUT_MARGIN_BOTTOM } }, props))));

package/dist/DropDownMenu/components/StyledContent.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { DEFAULT_DROPDOWN_MAX_HEIGHT, DROPDOWN_CONTENT_PADDING, } from "../constants";
 export const StyledContent = styled.div `
   position: relative;
   display: flex;
@@ -11,7 +12,7 @@ export const StyledContent = styled.div `
   max-width: 400px;
   max-height: ${({ maxDropdownHeight }) => Number.isInteger(maxDropdownHeight)
     ? `${maxDropdownHeight}px`
-    : maxDropdownHeight || "250px"};
+    : maxDropdownHeight || `${DEFAULT_DROPDOWN_MAX_HEIGHT}px`};
 
   background-color: ${(props) => props.theme.palette.background.default};
   background-color: ${({ theme, variant }) => {
@@ -30,7 +31,7 @@ export const StyledContent = styled.div `
   border-radius: 5px;
   border: 1px solid ${(props) => props.theme.palette.divider};
   outline: none;
-  padding: 5px;
+  padding: ${DROPDOWN_CONTENT_PADDING}px;
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;

package/dist/DropDownMenu/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_DROPDOWN_MAX_HEIGHT = 250;
+export declare const DROPDOWN_CONTENT_PADDING = 5;
+export declare const DROPDOWN_CONTENT_VERTICAL_PADDING: number;
+export declare const SEARCH_INPUT_MARGIN_BOTTOM = 8;

package/dist/DropDownMenu/constants.js

@@ -0,0 +1,4 @@
+export const DEFAULT_DROPDOWN_MAX_HEIGHT = 250;
+export const DROPDOWN_CONTENT_PADDING = 5;
+export const DROPDOWN_CONTENT_VERTICAL_PADDING = DROPDOWN_CONTENT_PADDING * 2;
+export const SEARCH_INPUT_MARGIN_BOTTOM = 8;

package/dist/QueryFilter/DefaultOperators.d.ts

@@ -0,0 +1,76 @@
+import { Operator } from "./types";
+export declare const Operators: {
+    Equals: {
+        value: string;
+        label: string;
+    };
+    NotEquals: {
+        value: string;
+        label: string;
+    };
+    LessThan: {
+        value: string;
+        label: string;
+    };
+    GreaterThan: {
+        value: string;
+        label: string;
+    };
+    LessThanOrEqual: {
+        value: string;
+        label: string;
+    };
+    GreaterThanOrEqual: {
+        value: string;
+        label: string;
+    };
+    Contains: {
+        value: string;
+        label: string;
+    };
+    BeginsWith: {
+        value: string;
+        label: string;
+    };
+    EndsWith: {
+        value: string;
+        label: string;
+    };
+    DoesNotContain: {
+        value: string;
+        label: string;
+    };
+    DoesNotBeginWith: {
+        value: string;
+        label: string;
+    };
+    DoesNotEndWith: {
+        value: string;
+        label: string;
+    };
+    IsEmpty: {
+        value: string;
+        label: string;
+    };
+    IsNotEmpty: {
+        value: string;
+        label: string;
+    };
+    In: {
+        value: string;
+        label: string;
+    };
+    NIn: {
+        value: string;
+        label: string;
+    };
+    Between: {
+        value: string;
+        label: string;
+    };
+    NotBetween: {
+        value: string;
+        label: string;
+    };
+};
+export declare const DefaultOperators: Operator[];

package/dist/QueryFilter/DefaultOperators.js

@@ -0,0 +1,21 @@
+export const Operators = {
+    Equals: { value: "=", label: "is" },
+    NotEquals: { value: "!=", label: "is not" },
+    LessThan: { value: "<", label: "less than" },
+    GreaterThan: { value: ">", label: "greater than" },
+    LessThanOrEqual: { value: "<=", label: "less than or equal" },
+    GreaterThanOrEqual: { value: ">=", label: "greater than or equal" },
+    Contains: { value: "contains", label: "contains" },
+    BeginsWith: { value: "beginsWith", label: "begins with" },
+    EndsWith: { value: "endsWith", label: "ends with" },
+    DoesNotContain: { value: "doesNotContain", label: "does not contain" },
+    DoesNotBeginWith: { value: "doesNotBeginWith", label: "does not begin with" },
+    DoesNotEndWith: { value: "doesNotEndWith", label: "does not end with" },
+    IsEmpty: { value: "isEmpty", label: "is empty" },
+    IsNotEmpty: { value: "isNotEmpty", label: "is not empty" },
+    In: { value: "in", label: "is any of" },
+    NIn: { value: "nin", label: "is none of" },
+    Between: { value: "between", label: "between" },
+    NotBetween: { value: "notBetween", label: "not between" },
+};
+export const DefaultOperators = Object.values(Operators);

package/dist/QueryFilter/types.d.ts

@@ -0,0 +1,66 @@
+import { DropDownItem, DropDownMenuProps } from "../DropDownMenu";
+export interface UseQueryFilterProps {
+    defaultFilter?: Query | null;
+    /**
+     * Filter definitions for the available fields. Pass `undefined` while the
+     * definitions are still loading (e.g. async fetch in flight) — any rules
+     * already in state will render nothing until definitions resolve. An empty
+     * array means "loaded, no definitions": every rule will render as an
+     * orphan chip and `onUnknownField` will fire for each.
+     */
+    filterDefinitions: FilterDefinition[] | undefined;
+    showCombinator?: boolean;
+    onFilterChange?: (filter: any) => void;
+    onUnknownField?: (rule: Rule) => void;
+}
+export type QueryFilterType = {
+    filter: Query;
+    filterDefinitions: FilterDefinition[] | undefined;
+    showCombinator?: boolean;
+    addRule: (rule: Rule) => void;
+    /**
+     * Remove a rule by `id` (preferred) or by passing the `Rule` object. The
+     * object form falls back to reference equality when `rule.id` is missing,
+     * so chips for un-normalized orphan rules can still delete themselves.
+     */
+    removeRule: (target: string | Rule) => void;
+    updateRule: (rule: Rule) => void;
+    updateRootCombinator: (combinator: Combinator) => void;
+    onUnknownField?: (rule: Rule) => void;
+};
+export type UseQueryFilter = (args: UseQueryFilterProps) => QueryFilterType;
+export type Combinator = "and" | "or";
+export type Operator = {
+    label: string;
+    value: string;
+};
+export type InputType = "text" | "number" | "date" | "datetime" | "multiselect";
+export interface FilterDefinition {
+    dataField: string;
+    label: string;
+    pluralLabel?: string;
+    operators?: Operator[];
+    inputType?: InputType;
+    resolution?: "day" | "second" | "millisecond";
+    isoString?: boolean;
+    placeholder?: string;
+    selectOptions?: DropDownItem[];
+    dropDownOptions?: {
+        style?: React.CSSProperties;
+    };
+    query?: DropDownMenuProps["query"];
+}
+export interface Rule {
+    id?: string;
+    dataField: string;
+    value?: string[];
+    options?: DropDownItem[];
+    operator: Operator;
+    label: string;
+}
+export interface RuleGroup {
+    rules: Rule[];
+    combinator: Combinator;
+}
+export interface Query extends RuleGroup {
+}

package/dist/QueryFilter/types.js

@@ -0,0 +1 @@
+export {};

package/dist/RichTextEditor/Enums/Controls.d.ts

@@ -16,6 +16,7 @@ export declare enum Controls {
     HEADING_4 = "heading_4",
     BULLET_LIST = "bulletList",
     ORDERED_LIST = "orderedList",
+    TASK_LIST = "taskList",
     TEXT_ALIGN_LEFT = "textAlignLeft",
     TEXT_ALIGN_CENTER = "textAlignCenter",
     TEXT_ALIGN_RIGHT = "textAlignRight",

package/dist/RichTextEditor/Enums/Controls.js

@@ -17,6 +17,7 @@ export var Controls;
     Controls["HEADING_4"] = "heading_4";
     Controls["BULLET_LIST"] = "bulletList";
     Controls["ORDERED_LIST"] = "orderedList";
+    Controls["TASK_LIST"] = "taskList";
     Controls["TEXT_ALIGN_LEFT"] = "textAlignLeft";
     Controls["TEXT_ALIGN_CENTER"] = "textAlignCenter";
     Controls["TEXT_ALIGN_RIGHT"] = "textAlignRight";

package/dist/RichTextEditor/Enums/Extensions.d.ts

@@ -14,6 +14,7 @@ export declare enum Extensions {
     Strike = "strike",
     BulletList = "bulletList",
     OrderedList = "orderedList",
+    TaskList = "taskList",
     AlignLeft = "alignLeft",
     AlignCenter = "alignCenter",
     AlignRight = "alignRight",

package/dist/RichTextEditor/Enums/Extensions.js

@@ -15,6 +15,7 @@ export var Extensions;
     Extensions["Strike"] = "strike";
     Extensions["BulletList"] = "bulletList";
     Extensions["OrderedList"] = "orderedList";
+    Extensions["TaskList"] = "taskList";
     Extensions["AlignLeft"] = "alignLeft";
     Extensions["AlignCenter"] = "alignCenter";
     Extensions["AlignRight"] = "alignRight";

package/dist/RichTextEditor/Enums/Fonts.d.ts

@@ -5,6 +5,7 @@ declare enum Fonts {
     TIMES_NEW_ROMAN = "Times New Roman",
     SEGOE_UI = "Segoe UI",
     ROBOTO = "Roboto",
-    VERANDA = "Veranda"
+    VERDANA = "Verdana",
+    CAMBRIA = "Cambria"
 }
 export default Fonts;

package/dist/RichTextEditor/Enums/Fonts.js

@@ -6,6 +6,7 @@ var Fonts;
     Fonts["TIMES_NEW_ROMAN"] = "Times New Roman";
     Fonts["SEGOE_UI"] = "Segoe UI";
     Fonts["ROBOTO"] = "Roboto";
-    Fonts["VERANDA"] = "Veranda";
+    Fonts["VERDANA"] = "Verdana";
+    Fonts["CAMBRIA"] = "Cambria";
 })(Fonts || (Fonts = {}));
 export default Fonts;

package/dist/RichTextEditor/Enums/SlashCommands.d.ts

@@ -6,6 +6,7 @@ export declare enum SlashCommands {
     Heading4 = "Heading 4",
     BulletList = "Bullet List",
     NumberedList = "Numbered List",
+    TaskList = "Task List",
     Code = "Code",
     CodeBlock = "Code Block",
     HorizontalRule = "Horizontal Rule",

package/dist/RichTextEditor/Enums/SlashCommands.js

@@ -7,6 +7,7 @@ export var SlashCommands;
     SlashCommands["Heading4"] = "Heading 4";
     SlashCommands["BulletList"] = "Bullet List";
     SlashCommands["NumberedList"] = "Numbered List";
+    SlashCommands["TaskList"] = "Task List";
     SlashCommands["Code"] = "Code";
     SlashCommands["CodeBlock"] = "Code Block";
     SlashCommands["HorizontalRule"] = "Horizontal Rule";

package/dist/RichTextEditor/Extensions/BubbleMenuExtension.d.ts

@@ -0,0 +1,7 @@
+import { Extension } from "@tiptap/core";
+import { BubbleItem } from "../Components/BubbleMenu";
+export type BubbleMenuOptions = {
+    customMenuItems?: BubbleItem[];
+};
+declare const BubbleMenu: Extension<any, any>;
+export default BubbleMenu;

package/dist/RichTextEditor/Extensions/BubbleMenuExtension.js

@@ -0,0 +1,157 @@
+import { Extension, isNodeSelection, isTextSelection, posToDOMRect, } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { ReactRenderer } from "@tiptap/react";
+import BubbleMenuComponent from "../Components/BubbleMenu";
+class Menu {
+    constructor({ view, editor, customMenuItems, }) {
+        this.mousedownHandler = (event) => {
+            this.preventShow = true;
+        };
+        this.mouseUpHandler = (event) => {
+            this.preventShow = false;
+            this.update(this.editor.view);
+        };
+        this.focusHandler = () => {
+            // this.editor.commands.setTextSelection({ from: 0, to: 0 });
+            // we use `setTimeout` to make sure `selection` is already updated
+            setTimeout(() => this.update(this.editor.view));
+        };
+        this.blurHandler = ({ event }) => {
+            var _a;
+            if (this.preventShow) {
+                this.preventShow = false;
+                return;
+            }
+            if ((event === null || event === void 0 ? void 0 : event.relatedTarget) &&
+                ((_a = this.floating) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.relatedTarget))) {
+                return;
+            }
+            // clear text selection
+            // this.editor.commands.setTextSelection({ from: 0, to: 0 });
+            this.hide();
+        };
+        this.editor = editor;
+        this.view = view;
+        this.rect = null;
+        this.preventShow = false;
+        this.floating = null;
+        this.isOpen = false;
+        // create and mount react component
+        if (!this.component) {
+            this.component = new ReactRenderer(BubbleMenuComponent, {
+                props: {
+                    editor: this.editor,
+                    open: false,
+                    onOpen: (ref) => {
+                        this.floating = ref;
+                    },
+                    customMenuItems,
+                },
+                editor: this.editor,
+            });
+            document.body.appendChild(this.component.element);
+        }
+        // don't show the bubble during selection of text
+        this.view.dom.addEventListener("mousedown", this.mousedownHandler, {
+            capture: true,
+        });
+        this.view.dom.addEventListener("mouseup", this.mouseUpHandler);
+        this.editor.on("blur", this.blurHandler);
+        this.editor.on("focus", this.focusHandler);
+    }
+    update(view, oldState) {
+        var _a;
+        const { state, composing } = view;
+        const { doc, selection } = state;
+        const { empty, ranges } = selection;
+        const from = Math.min(...ranges.map((range) => range.$from.pos));
+        const to = Math.max(...ranges.map((range) => range.$to.pos));
+        const selectionChanged = !(oldState === null || oldState === void 0 ? void 0 : oldState.selection.eq(view.state.selection));
+        const docChanged = !(oldState === null || oldState === void 0 ? void 0 : oldState.doc.eq(view.state.doc));
+        const isSame = !selectionChanged && !docChanged;
+        if (composing || isSame) {
+            return;
+        }
+        // Sometime check for `empty` is not enough.
+        // Doubleclick an empty paragraph returns a node size of 2.
+        // So we check also for an empty text size.
+        const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
+        // When clicking on a element inside the bubble menu the editor "blur" event
+        // is called and the bubble menu item is focussed. In this case we should
+        // consider the menu as part of the editor and keep showing the menu
+        const isChildOfMenu = (_a = this === null || this === void 0 ? void 0 : this.floating) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
+        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+        if (!hasEditorFocus ||
+            empty ||
+            isEmptyTextBlock ||
+            !this.editor.isEditable ||
+            this.preventShow) {
+            this.hide();
+        }
+        else {
+            // only set position when it is not already open
+            // otherwise the menu will jump around when the selection changes or text formatting is applied
+            if (!this.isOpen) {
+                if (isNodeSelection(state.selection)) {
+                    let node = view.nodeDOM(from);
+                    const nodeViewWrapper = node.dataset.nodeViewWrapper
+                        ? node
+                        : node.querySelector("[data-node-view-wrapper]");
+                    if (nodeViewWrapper) {
+                        node = nodeViewWrapper.firstChild;
+                    }
+                    if (node) {
+                        this.rect = node.getBoundingClientRect();
+                    }
+                }
+                else {
+                    this.rect = posToDOMRect(view, from, to);
+                }
+            }
+            this.show();
+        }
+    }
+    show() {
+        if (this.component) {
+            this.component.updateProps({ open: true, rect: this.rect });
+            this.isOpen = true;
+        }
+    }
+    hide() {
+        if (this.component) {
+            this.component.updateProps({ open: false, rect: null });
+            this.isOpen = false;
+        }
+    }
+    destroy() {
+        if (this.component) {
+            this.view.dom.removeEventListener("mousedown", this.mousedownHandler);
+            this.view.dom.removeEventListener("mouseup", this.mouseUpHandler);
+            this.component.destroy();
+        }
+    }
+}
+const BubbleMenu = Extension.create({
+    name: "bubbleMenu",
+    addOptions() {
+        return {
+            bubbleMenuOptions: {},
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey("bubbleMenu"),
+                view: (view) => {
+                    var _a;
+                    return new Menu({
+                        view,
+                        editor: this.editor,
+                        customMenuItems: ((_a = this === null || this === void 0 ? void 0 : this.options) === null || _a === void 0 ? void 0 : _a.customMenuItems) || [],
+                    });
+                },
+            }),
+        ];
+    },
+});
+export default BubbleMenu;

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -11,7 +11,7 @@ import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
-import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, TextQuote, Image as ImageIcon, Calendar, CodeIcon, ClockIcon, SeparatorHorizontalIcon, SquareCodeIcon, Table2Icon, } from "lucide-react";
+import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, TextQuote, Image as ImageIcon, Calendar, CodeIcon, ClockIcon, ListChecksIcon, SeparatorHorizontalIcon, SquareCodeIcon, Table2Icon, } from "lucide-react";
 import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
 import { PluginKey } from "@tiptap/pm/state";
 import SlashCommandList from "./SlashCommandList";
@@ -116,6 +116,15 @@ const getCommandItems = (values, options) => {
                 editor.chain().focus().deleteRange(range).toggleOrderedList().run();
             },
         },
+        {
+            title: SlashCommands.TaskList,
+            description: "Create a checklist with tasks.",
+            searchTerms: ["todo", "checklist", "checkbox"],
+            icon: ListChecksIcon,
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).toggleTaskList().run();
+            },
+        },
         {
             title: SlashCommands.Code,
             description: "Start typing inline code.",

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -4,6 +4,8 @@ import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import TextAlign from "@tiptap/extension-text-align";
 import { Table, TableCell, TableHeader, TableRow, } from "@tiptap/extension-table";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
 import { Focus, Placeholder } from "@tiptap/extensions";
 import { Color } from "@tiptap/extension-color";
 import { Highlight } from "@tiptap/extension-highlight";
@@ -89,6 +91,7 @@ export const MINIMAL_EXTENSIONS = [
 export const FULL_EXTENSIONS = [
     ...BASIC_EXTENSIONS,
     Extensions.CodeBlock,
+    Extensions.TaskList,
     Extensions.Table,
     Extensions.TableCell,
     Extensions.TableHeader,
@@ -269,6 +272,16 @@ const getTipTapExtensions = ({ disabledExtensions = [], extensions = [], slashCo
             name: Extensions.TableCell,
             extension: TableCell,
         },
+        {
+            name: Extensions.TaskList,
+            extension: TaskList,
+        },
+        {
+            name: "taskItem",
+            extension: TaskItem.configure({
+                nested: true,
+            }),
+        },
         {
             name: Extensions.Image,
             extension: CustomImage.configure({
@@ -314,6 +327,8 @@ const getTipTapExtensions = ({ disabledExtensions = [], extensions = [], slashCo
         .filter((ext) => {
         if (ext.name === "starterKit")
             return true;
+        if (ext.name === "taskItem")
+            return isEnabled(Extensions.TaskList);
         return isEnabled(ext.name);
     })
         .map((ext) => ext.extension);

package/dist/RichTextEditor/RichTextEditor.js

@@ -26,6 +26,7 @@ import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
 import { getLinkAttributesAtPosition, getLinkRangeAtPosition, openLink, } from "./Utils/linkUtils";
 import { TABLE_CELL_MIN_WIDTH } from "./Utils/tableUtils";
+import { getControlSizeTokens } from "../core";
 const codeBlockFallbacks = {
     light: {
         background: "#f6f8fa",
@@ -74,6 +75,7 @@ const codeBlockFallbacks = {
         },
     },
 };
+const TASK_CHECKBOX_SIZE = getControlSizeTokens("sm").checkboxIconSize;
 const getCodeBlockTheme = (theme) => {
     if (theme.palette.codeBlock)
         return theme.palette.codeBlock;
@@ -322,6 +324,10 @@ const StyledContent = styled.div `
     font-family: Roboto, sans-serif;
   }
 
+  .editor-content[data-font="Cambria"] {
+    font-family: Cambria, Georgia, "Times New Roman", serif;
+  }
+
   .ProseMirror {
     font-size: 14px;
     font-weight: 400;
@@ -758,59 +764,77 @@ const StyledContent = styled.div `
 
   ul[data-type="taskList"] {
     list-style: none;
+    margin: 0.25rem 0;
     padding: 0;
 
     li {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       margin: 0.25rem 0;
 
       > label {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
         flex: 0 0 auto;
+        height: 1.5rem;
         margin-right: 0.5rem;
         user-select: none;
       }
 
       > div {
         flex: 1 1 auto;
+        min-width: 0;
+      }
+
+      > div > ul[data-type="taskList"] {
+        margin: 0.25rem 0 0;
       }
     }
 
     input[type="checkbox"] {
-      cursor: pointer;
-      margin: 0;
       -webkit-appearance: none;
       appearance: none;
-      border: 2px solid ${({ theme }) => theme.palette.primary.main};
-      border-radius: 0.125rem;
-      background-color: ${({ theme }) => theme.palette.background.default};
-      width: 1.25rem;
-      height: 1.25rem;
-      display: grid;
-      place-content: center;
-
-      &:hover {
-        border-color: ${({ theme }) => theme.palette.primary.main};
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: ${TASK_CHECKBOX_SIZE}px;
+      height: ${TASK_CHECKBOX_SIZE}px;
+      margin: 0;
+      border: 1px solid ${({ theme }) => theme.palette.text.secondary};
+      border-radius: 2px;
+      background-color: transparent;
+      cursor: pointer;
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 45%;
+        width: 32%;
+        height: 56%;
+        border: solid
+          ${({ theme }) => (theme.name === "DARK" ? "#000000" : "#ffffff")};
+        border-width: 0 2px 2px 0;
+        opacity: 0;
+        transform: translate(-50%, -50%) rotate(45deg);
+        transform-origin: center;
       }
 
-      &:active {
-        background-color: ${({ theme }) => theme.palette.divider};
+      &:checked {
+        background-color: ${({ theme }) => theme.name === "DARK" ? "#cdcdcd" : "#646464"};
+        border-color: ${({ theme }) => theme.name === "DARK" ? "#cdcdcd" : "#646464"};
       }
 
-      &::before {
-        content: "";
-        width: 0.75em;
-        height: 0.75em;
-        transform: scale(0);
-        transition: 120ms transform ease-in-out;
-        box-shadow: inset 1em 1em;
-        transform-origin: center;
-        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-        color: ${({ theme }) => theme.palette.text.primary};
+      &:checked::after {
+        opacity: 1;
       }
 
-      &:checked::before {
-        transform: scale(1);
+      &:focus-visible {
+        outline: 2px solid ${({ theme }) => theme.palette.primary.main}40;
+        outline-offset: 2px;
       }
     }
   }
@@ -856,6 +880,9 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         if (command === SlashCommands.Table) {
             return resolvedExtensionSet.has(Extensions.Table);
         }
+        if (command === SlashCommands.TaskList) {
+            return resolvedExtensionSet.has(Extensions.TaskList);
+        }
         return true;
     }), [resolvedExtensionSet, slashCommands]);
     const resolvedToolbarOptions = useMemo(() => {
@@ -872,6 +899,7 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
             [Controls.HORIZONTAL_RULE]: Extensions.HorizontalRule,
             [Controls.BULLET_LIST]: Extensions.BulletList,
             [Controls.ORDERED_LIST]: Extensions.OrderedList,
+            [Controls.TASK_LIST]: Extensions.TaskList,
             [Controls.COLOR]: Extensions.Color,
             [Controls.HIGHLIGHT]: Extensions.Highlight,
             [Controls.LINK]: Extensions.Link,

package/dist/RichTextEditor/Toolbar/Controls.d.ts

@@ -2,6 +2,9 @@ import { Editor } from "@tiptap/react";
 interface ControlProps {
     editor: Editor | null;
 }
+export type HeadingLevel = 1 | 2 | 3 | 4;
+export type TextAlignment = "left" | "center" | "right" | "justify";
+export type ListType = "bullet" | "ordered" | "task";
 export declare const UndoControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const RedoControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const FontControl: () => import("react/jsx-runtime").JSX.Element;
@@ -20,10 +23,20 @@ export declare const Heading1Control: ({ editor }: ControlProps) => import("reac
 export declare const Heading2Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading3Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading4Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HeadingControl: ({ editor, levels, }: ControlProps & {
+    levels?: HeadingLevel[];
+}) => import("react/jsx-runtime").JSX.Element | null;
 export declare const BulletListControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const OrderedListControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TaskListControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListControl: ({ editor, listTypes, }: ControlProps & {
+    listTypes?: ListType[];
+}) => import("react/jsx-runtime").JSX.Element | null;
 export declare const AlignLeftControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AlignRightControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AlignCenterControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AlignJustifiedControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AlignmentControl: ({ editor, alignments, }: ControlProps & {
+    alignments?: TextAlignment[];
+}) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/RichTextEditor/Toolbar/Controls.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, IconBlockquote, IconSeparatorHorizontal, } from "@tabler/icons-react";
-import { CodeIcon, HighlighterIcon, PaletteIcon, RemoveFormattingIcon, SquircleIcon, TypeIcon, } from "lucide-react";
-import { SquareCodeIcon } from "lucide-react";
+import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconHeading, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, IconBlockquote, IconSeparatorHorizontal, } from "@tabler/icons-react";
+import { CodeIcon, HighlighterIcon, ListChecksIcon, PaletteIcon, RemoveFormattingIcon, SquareCodeIcon, SquircleIcon, TypeIcon, } from "lucide-react";
 import { Control } from "./Control";
 import { hasInlineCode, toggleInlineCode } from "../Utils/codeUtils";
 import { hasSyntaxHighlightedCodeBlock, toggleCodeBlock, } from "../Utils/codeBlockUtils";
@@ -12,6 +11,38 @@ import RichTextEditorContext from "../Contexts/RichTextEditorContext";
 import Fonts from "../Enums/Fonts";
 import TextColors from "../Enums/TextColors";
 import HighlightColors from "../Enums/HighlightColors";
+const headingControlOptions = [
+    { level: 1, label: "Heading 1", icon: IconH1 },
+    { level: 2, label: "Heading 2", icon: IconH2 },
+    { level: 3, label: "Heading 3", icon: IconH3 },
+    { level: 4, label: "Heading 4", icon: IconH4 },
+];
+const alignmentControlOptions = [
+    { value: "left", label: "Align text: left", icon: IconAlignLeft },
+    { value: "center", label: "Align text: center", icon: IconAlignCenter },
+    { value: "right", label: "Align text: right", icon: IconAlignRight },
+    { value: "justify", label: "Align text: justify", icon: IconAlignJustified },
+];
+const listControlOptions = [
+    {
+        value: "bullet",
+        label: "Bullet list",
+        nodeName: "bulletList",
+        icon: IconList,
+    },
+    {
+        value: "ordered",
+        label: "Ordered list",
+        nodeName: "orderedList",
+        icon: IconListNumbers,
+    },
+    {
+        value: "task",
+        label: "Task list",
+        nodeName: "taskList",
+        icon: ListChecksIcon,
+    },
+];
 export const UndoControl = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "undoControlLabel", operation: {
             name: "undo",
@@ -204,6 +235,37 @@ export const Heading4Control = ({ editor }) => {
             attributes: { level: 4 },
         }, icon: IconH4 }));
 };
+export const HeadingControl = ({ editor, levels = [1, 2, 3, 4], }) => {
+    const options = headingControlOptions.filter((option) => levels.includes(option.level));
+    const currentHeading = headingControlOptions.find((option) => editor === null || editor === void 0 ? void 0 : editor.isActive("heading", { level: option.level }));
+    const selectedHeading = options.find((option) => option.level === (currentHeading === null || currentHeading === void 0 ? void 0 : currentHeading.level));
+    const ButtonIcon = (currentHeading === null || currentHeading === void 0 ? void 0 : currentHeading.icon) || IconHeading;
+    if (!options.length)
+        return null;
+    return (_jsx(DropDownMenu, { data: options.map((option) => ({
+            label: option.label,
+            value: option.level,
+            onClick: () => {
+                editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleHeading({ level: option.level }).run();
+            },
+        })), value: selectedHeading
+            ? [{ label: selectedHeading.label, value: selectedHeading.level }]
+            : [], enableSelectedOptionStyling: true, renderOption: (item) => {
+            const option = options.find((option) => option.level === item.value);
+            const Icon = (option === null || option === void 0 ? void 0 : option.icon) || IconH1;
+            return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [_jsx(Icon, { size: 14 }), item.label] }));
+        }, size: "xs", variant: "outlined", buttonProps: {
+            title: (currentHeading === null || currentHeading === void 0 ? void 0 : currentHeading.label) || "Heading",
+            "aria-label": "Heading",
+            disabled: !editor,
+            selected: Boolean(currentHeading),
+            style: { padding: "1px 6px" },
+        }, dropDownProps: {
+            style: {
+                width: 150,
+            },
+        }, children: _jsx(ButtonIcon, { size: 14 }) }));
+};
 export const BulletListControl = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "bulletListControlLabel", isActive: {
             name: "bulletList",
@@ -218,6 +280,51 @@ export const OrderedListControl = ({ editor }) => {
             name: "toggleOrderedList",
         }, icon: IconListNumbers }));
 };
+export const TaskListControl = ({ editor }) => {
+    return (_jsx(Control, { editor: editor, label: "taskListControlLabel", isActive: {
+            name: "taskList",
+        }, operation: {
+            name: "toggleTaskList",
+        }, icon: ListChecksIcon }));
+};
+export const ListControl = ({ editor, listTypes = ["bullet", "ordered", "task"], }) => {
+    const options = listControlOptions.filter((option) => listTypes.includes(option.value));
+    const currentList = listControlOptions.find((option) => editor === null || editor === void 0 ? void 0 : editor.isActive(option.nodeName));
+    const selectedList = options.find((option) => option.value === (currentList === null || currentList === void 0 ? void 0 : currentList.value));
+    const fallbackList = options[0] || listControlOptions[0];
+    const ButtonIcon = (currentList === null || currentList === void 0 ? void 0 : currentList.icon) || fallbackList.icon;
+    if (!options.length)
+        return null;
+    return (_jsx(DropDownMenu, { data: options.map((option) => ({
+            label: option.label,
+            value: option.value,
+            onClick: () => {
+                const chain = editor === null || editor === void 0 ? void 0 : editor.chain().focus();
+                if (option.value === "bullet")
+                    chain === null || chain === void 0 ? void 0 : chain.toggleBulletList().run();
+                if (option.value === "ordered")
+                    chain === null || chain === void 0 ? void 0 : chain.toggleOrderedList().run();
+                if (option.value === "task")
+                    chain === null || chain === void 0 ? void 0 : chain.toggleTaskList().run();
+            },
+        })), value: selectedList
+            ? [{ label: selectedList.label, value: selectedList.value }]
+            : [], enableSelectedOptionStyling: true, renderOption: (item) => {
+            const option = options.find((option) => option.value === item.value);
+            const Icon = (option === null || option === void 0 ? void 0 : option.icon) || IconList;
+            return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [_jsx(Icon, { size: 14 }), item.label] }));
+        }, size: "xs", variant: "outlined", buttonProps: {
+            title: (currentList === null || currentList === void 0 ? void 0 : currentList.label) || "List",
+            "aria-label": "List",
+            disabled: !editor,
+            selected: Boolean(currentList),
+            style: { padding: "1px 6px" },
+        }, dropDownProps: {
+            style: {
+                width: 150,
+            },
+        }, children: _jsx(ButtonIcon, { size: 14 }) }));
+};
 export const AlignLeftControl = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "alignLeftControlLabel", isActive: {
             name: { textAlign: "left" },
@@ -247,3 +354,35 @@ export const AlignJustifiedControl = ({ editor }) => {
             name: { textAlign: "justify" },
         }, operation: { name: "setTextAlign", attributes: "justify" }, icon: IconAlignJustified }));
 };
+export const AlignmentControl = ({ editor, alignments = ["left", "center", "right", "justify"], }) => {
+    const options = alignmentControlOptions.filter((option) => alignments.includes(option.value));
+    const activeAlignment = alignmentControlOptions.find((option) => editor === null || editor === void 0 ? void 0 : editor.isActive({ textAlign: option.value }));
+    const currentAlignment = activeAlignment || alignmentControlOptions[0];
+    const selectedAlignment = options.find((option) => option.value === currentAlignment.value);
+    const ButtonIcon = currentAlignment.icon;
+    if (!options.length)
+        return null;
+    return (_jsx(DropDownMenu, { data: options.map((option) => ({
+            label: option.label,
+            value: option.value,
+            onClick: () => {
+                editor === null || editor === void 0 ? void 0 : editor.chain().focus().setTextAlign(option.value).run();
+            },
+        })), value: selectedAlignment
+            ? [{ label: selectedAlignment.label, value: selectedAlignment.value }]
+            : [], enableSelectedOptionStyling: true, renderOption: (item) => {
+            const option = options.find((option) => option.value === item.value);
+            const Icon = (option === null || option === void 0 ? void 0 : option.icon) || IconAlignLeft;
+            return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [_jsx(Icon, { size: 14 }), item.label] }));
+        }, size: "xs", variant: "outlined", buttonProps: {
+            title: currentAlignment.label,
+            "aria-label": "Text alignment",
+            disabled: !editor,
+            selected: Boolean(activeAlignment),
+            style: { padding: "1px 6px" },
+        }, dropDownProps: {
+            style: {
+                width: 170,
+            },
+        }, children: _jsx(ButtonIcon, { size: 14 }) }));
+};

package/dist/RichTextEditor/Toolbar/Labels.d.ts

@@ -10,6 +10,7 @@ declare const Labels: {
     unlinkControlLabel: string;
     bulletListControlLabel: string;
     orderedListControlLabel: string;
+    taskListControlLabel: string;
     h1ControlLabel: string;
     h2ControlLabel: string;
     h3ControlLabel: string;

package/dist/RichTextEditor/Toolbar/Labels.js

@@ -12,6 +12,7 @@ const Labels = {
     unlinkControlLabel: "Remove link",
     bulletListControlLabel: "Bullet list",
     orderedListControlLabel: "Ordered list",
+    taskListControlLabel: "Task list",
     h1ControlLabel: "Heading 1",
     h2ControlLabel: "Heading 2",
     h3ControlLabel: "Heading 3",

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import ControlsGroup from "./ControlsGroup";
-import { UndoControl, RedoControl, FontControl, TextColorControl, HighlightControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, ClearFormattingControl, CodeControl, CodeBlockControl, BlockquoteControl, HorizontalRuleControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
+import { UndoControl, RedoControl, FontControl, TextColorControl, HighlightControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, ClearFormattingControl, CodeControl, CodeBlockControl, BlockquoteControl, HorizontalRuleControl, HeadingControl, ListControl, AlignmentControl, } from "./Controls";
 import { Controls } from "../Enums";
 import { DropDownMenu } from "../../DropDownMenu";
 import { useState } from "react";
@@ -10,6 +10,23 @@ import { Popover } from "../../Popover";
 import LinkEditor from "../Components/LinkEditor";
 import { TableToolsPopover } from "../Components/TableTools";
 import { LinkIcon } from "lucide-react";
+const headingControlLevels = [
+    { control: Controls.HEADING_1, level: 1 },
+    { control: Controls.HEADING_2, level: 2 },
+    { control: Controls.HEADING_3, level: 3 },
+    { control: Controls.HEADING_4, level: 4 },
+];
+const alignmentControls = [
+    { control: Controls.TEXT_ALIGN_LEFT, alignment: "left" },
+    { control: Controls.TEXT_ALIGN_CENTER, alignment: "center" },
+    { control: Controls.TEXT_ALIGN_RIGHT, alignment: "right" },
+    { control: Controls.TEXT_ALIGN_JUSTIFIED, alignment: "justify" },
+];
+const listControls = [
+    { control: Controls.BULLET_LIST, listType: "bullet" },
+    { control: Controls.ORDERED_LIST, listType: "ordered" },
+    { control: Controls.TASK_LIST, listType: "task" },
+];
 const ToolbarContainer = styled.div `
   display: flex;
   flex-direction: row;
@@ -32,6 +49,15 @@ export const Toolbar = ({ editor, toolbarOptions }) => {
     var _a;
     const { controls } = toolbarOptions || {};
     const [linkPopoverOpen, setLinkPopoverOpen] = useState(false);
+    const headingLevels = headingControlLevels
+        .filter(({ control }) => controls === null || controls === void 0 ? void 0 : controls.includes(control))
+        .map(({ level }) => level);
+    const alignments = alignmentControls
+        .filter(({ control }) => controls === null || controls === void 0 ? void 0 : controls.includes(control))
+        .map(({ alignment }) => alignment);
+    const listTypes = listControls
+        .filter(({ control }) => controls === null || controls === void 0 ? void 0 : controls.includes(control))
+        .map(({ listType }) => listType);
     const customItems = controls === null || controls === void 0 ? void 0 : controls.filter((control) => typeof control !== "string" &&
         (control.type === "menu" || control.type === "button"));
     return (_jsxs(ToolbarContainer, { children: [(_a = customItems === null || customItems === void 0 ? void 0 : customItems.map) === null || _a === void 0 ? void 0 : _a.call(customItems, (item, index) => {
@@ -46,5 +72,5 @@ export const Toolbar = ({ editor, toolbarOptions }) => {
                             },
                         } }, item.options, { size: "xs", children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
                 }
-            }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && _jsx(FontControl, {}), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(TextColorControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HIGHLIGHT)) && (_jsx(HighlightControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BLOCKQUOTE)) && (_jsx(BlockquoteControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HORIZONTAL_RULE)) && (_jsx(HorizontalRuleControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.LINK)) && (_jsxs(Popover, { opened: linkPopoverOpen, onChange: setLinkPopoverOpen, position: "bottom", width: 330, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { size: "xs", variant: "outlined", title: "Link", "aria-label": "Link", selected: linkPopoverOpen || Boolean(editor === null || editor === void 0 ? void 0 : editor.isActive("link")), disabled: !editor, style: { padding: "1px 6px" }, children: _jsx(LinkIcon, { size: 14 }) }) }), _jsx(Popover.Dropdown, { children: editor && (_jsx(LinkEditor, { editor: editor, autoFocus: linkPopoverOpen, onClose: () => setLinkPopoverOpen(false) })) })] })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE)) && _jsx(CodeControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE_BLOCK)) && (_jsx(CodeBlockControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TABLE)) && (_jsx(TableToolsPopover, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CLEAR_FORMATTING)) && (_jsx(ClearFormattingControl, { editor: editor }))] }));
+            }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && _jsx(FontControl, {}), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(TextColorControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HIGHLIGHT)) && (_jsx(HighlightControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [headingLevels.length > 0 && (_jsx(HeadingControl, { editor: editor, levels: headingLevels })), alignments.length > 0 && (_jsx(AlignmentControl, { editor: editor, alignments: alignments })), listTypes.length > 0 && (_jsx(ListControl, { editor: editor, listTypes: listTypes })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BLOCKQUOTE)) && (_jsx(BlockquoteControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.LINK)) && (_jsxs(Popover, { opened: linkPopoverOpen, onChange: setLinkPopoverOpen, position: "bottom", width: 330, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { size: "xs", variant: "outlined", title: "Link", "aria-label": "Link", selected: linkPopoverOpen || Boolean(editor === null || editor === void 0 ? void 0 : editor.isActive("link")), disabled: !editor, style: { padding: "1px 6px" }, children: _jsx(LinkIcon, { size: 14 }) }) }), _jsx(Popover.Dropdown, { children: editor && (_jsx(LinkEditor, { editor: editor, autoFocus: linkPopoverOpen, onClose: () => setLinkPopoverOpen(false) })) })] })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE)) && _jsx(CodeControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE_BLOCK)) && (_jsx(CodeBlockControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TABLE)) && (_jsx(TableToolsPopover, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HORIZONTAL_RULE)) && (_jsx(HorizontalRuleControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CLEAR_FORMATTING)) && (_jsx(ClearFormattingControl, { editor: editor }))] }));
 };

package/dist/Table/Utils/resizeHandler.d.ts

@@ -0,0 +1,3 @@
+import { ResizeHandlerProps } from "../types";
+declare const resizeHandler: ({ event, columnId, columnProps, onResize, onResizeFinished, }: ResizeHandlerProps) => void;
+export default resizeHandler;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.9.3-dev.4",
+  "version": "2.1.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -48,7 +48,10 @@
     "@tiptap/extension-horizontal-rule": "3.22.4",
     "@tiptap/extension-image": "3.22.4",
     "@tiptap/extension-link": "3.22.4",
+    "@tiptap/extension-list": "3.22.4",
     "@tiptap/extension-table": "3.22.4",
+    "@tiptap/extension-task-item": "3.22.4",
+    "@tiptap/extension-task-list": "3.22.4",
     "@tiptap/extension-text-align": "3.22.4",
     "@tiptap/extension-text-style": "3.22.4",
     "@tiptap/extensions": "3.22.4",