@monolith-forensics/monolith-ui 1.8.1-dev.3 → 1.9.1-dev.0

package/dist/Calendar/Calendar.js

@@ -144,13 +144,13 @@ const Calendar = ({ defaultValue = new Date(), value, onChange = () => { }, hour
         const yearOptions = getYearOptions();
         const selectedMonthOption = MONTH_OPTIONS.find((option) => option.value === month);
         const selectedYearOption = yearOptions.find((option) => option.value === year);
-        return (_jsxs(CalendarHeader, { children: [_jsx(CalendarNavButton, { type: "button", onClick: handlePrevious, onMouseUp: clearPressureTimer, "aria-label": "Go to previous month", title: "Previous month. Hold Shift to jump by year.", children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsxs(CalendarHeaderControls, { children: [_jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: MONTH_OPTIONS, value: selectedMonthOption ? [selectedMonthOption] : [], variant: "outlined", size: "xs", arrow: true, onItemSelect: (item) => commitMonthOrYearSelection(Number(item.value), year, "month"), dropDownProps: {
+        return (_jsxs(CalendarHeader, { children: [_jsx(CalendarNavButton, { type: "button", onClick: handlePrevious, onMouseUp: clearPressureTimer, "aria-label": "Go to previous month", title: "Previous month. Hold Shift to jump by year.", children: _jsx(ChevronLeftIcon, { "aria-hidden": "true" }) }), _jsxs(CalendarHeaderControls, { children: [_jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: MONTH_OPTIONS, value: selectedMonthOption ? [selectedMonthOption] : [], enableSelectedOptionStyling: true, variant: "outlined", size: "xs", arrow: true, onItemSelect: (item) => commitMonthOrYearSelection(Number(item.value), year, "month"), dropDownProps: {
                                     style: { maxHeight: 260, width: 125 },
                                 }, buttonProps: {
                                     title: "Select month",
                                     size: "xxs",
                                     style: { minWidth: 95 },
-                                }, children: _jsx(CalendarMonth, { children: monthName }) }) }), _jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: yearOptions, value: selectedYearOption ? [selectedYearOption] : [], variant: "outlined", size: "xs", arrow: true, searchable: true, onItemSelect: (item) => commitMonthOrYearSelection(month, Number(item.value), "year"), dropDownProps: {
+                                }, children: _jsx(CalendarMonth, { children: monthName }) }) }), _jsx(CalendarHeaderSelect, { children: _jsx(DropDownMenu, { data: yearOptions, value: selectedYearOption ? [selectedYearOption] : [], enableSelectedOptionStyling: true, variant: "outlined", size: "xs", arrow: true, searchable: true, onItemSelect: (item) => commitMonthOrYearSelection(month, Number(item.value), "year"), dropDownProps: {
                                     style: { width: 120, maxHeight: 260 },
                                 }, buttonProps: {
                                     title: "Select year",

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Menu, MenuItemList, StyledInnerItemContainer } from "./components";
-export const DropDownMenu = ({ data, children, defaultValue, value, variant, arrow, size, searchable, grouped, onAddNew, loading, onScroll, onScrollToTop, onScrollToBottom, onSearch, manualSearch, multiselect, enableSelectAll, renderOption, dynamicOptionHeight, onItemSelect, onChange, buttonProps, TooltipContent, dropDownProps, query, disabled, }) => {
+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;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const [internalSelected, setInternalSelected] = useState(defaultValue || []);
@@ -35,5 +35,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, 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, 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/MenuItemList.d.ts

@@ -12,6 +12,7 @@ export declare const MenuItemList: React.FC<{
     TooltipContent?: ComponentType<any>;
     multiselect?: boolean;
     enableSelectAll?: boolean;
+    enableSelectedOptionStyling?: boolean;
     grouped?: boolean;
     onAddNew?: (value: string) => void;
     size?: Size;

package/dist/DropDownMenu/components/MenuItemList.js

@@ -121,7 +121,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, 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, 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);
@@ -294,12 +294,15 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
             (_b = variableListRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(selectedDisplayIndex, "smart");
             return;
         }
+        if (!enableSelectedOptionStyling)
+            return;
         if (selectedDisplayIndex < 0)
             return;
         (_c = fixedListRef.current) === null || _c === void 0 ? void 0 : _c.scrollToItem(selectedDisplayIndex, "smart");
         (_d = variableListRef.current) === null || _d === void 0 ? void 0 : _d.scrollToItem(selectedDisplayIndex, "smart");
     }, [
         displayItemsKey,
+        enableSelectedOptionStyling,
         itemCount,
         multiselect,
         selectedDisplayIndex,
@@ -320,7 +323,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         if (item.items) {
             return (_jsx(DropDownMenu, { data: item.items, size: size, buttonProps: style ? Object.assign({ style }, item) : Object.assign({}, item), disabled: item.disabled, dynamicOptionHeight: dynamicListEnabled, children: item.label }));
         }
-        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": !multiselect && isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
+        return (_jsx(MenuItem, { className: "MenuItem", itemData: item, TooltipContent: TooltipContent, "data-selected": enableSelectedOptionStyling && !multiselect && isSelected, "data-disabled": item.disabled, disabled: item.disabled, leftSection: multiselect ? (_jsxs(_Fragment, { children: [_jsx(CheckBox, { value: isSelected, size: size, onChange: (newValue) => {
                             var _a;
                             newValue ? handleAddItem(item) : handleRemoveItem(item);
                             (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);

package/dist/DropDownMenu/types.d.ts

@@ -32,6 +32,7 @@ export type DropDownMenuProps = {
     value?: DropDownItem[];
     multiselect?: boolean;
     enableSelectAll?: boolean;
+    enableSelectedOptionStyling?: boolean;
     size?: Size;
     title?: string;
     TooltipContent?: ComponentType<any>;

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -311,7 +311,9 @@ const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
                     return (_jsx(BubbleItemButton, { variant: "subtle", onClick: () => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, editor); }, color: isActive ? "primary" : undefined, selected: isActive, children: item.icon && _jsx(item.icon, { size: 14 }) }, item.name));
                 }
                 if (item.type === "menu") {
-                    return (_jsx(DropDownMenu, Object.assign({ data: item.items, size: "xs", arrow: item.arrow, buttonProps: item.buttonProps, variant: "subtle", buttonRender: item.buttonRender, onItemSelect: (item) => { var _a, _b; return (_b = (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.command) === null || _b === void 0 ? void 0 : _b.call(_a, editor, selectedText); } }, item.dropDownProps, { children: item.icon
+                    return (_jsx(DropDownMenu, Object.assign({ data: item.items, size: "xs", arrow: item.arrow, buttonProps: item.buttonProps, variant: "subtle", buttonRender: item.buttonRender, onItemSelect: (item) => { var _a, _b; return (_b = (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.command) === null || _b === void 0 ? void 0 : _b.call(_a, editor, selectedText); }, dropDownProps: {
+                            style: { width: 135 },
+                        } }, item.dropDownProps, { children: item.icon
                             ? (_jsx(item.icon, { size: 14 }))
                             : (item.label || item.name) }), item.name));
                 }

package/dist/RichTextEditor/Plugins/ImageActionsPlugin.js

@@ -66,14 +66,84 @@ const getImageBlob = (src) => __awaiter(void 0, void 0, void 0, function* () {
     }
     return response.blob();
 });
+const clipboardPngType = "image/png";
+const canWriteClipboardType = (ClipboardItemCtor, type) => {
+    if (!type)
+        return false;
+    if (typeof ClipboardItemCtor.supports === "function") {
+        return ClipboardItemCtor.supports(type);
+    }
+    return type === clipboardPngType;
+};
+const loadImageSource = (src) => new Promise((resolve, reject) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => resolve(image);
+    image.onerror = () => {
+        reject(new Error("Unable to prepare image for clipboard."));
+    };
+    image.src = src;
+});
+const renderImageSourceToPngBlob = (src) => __awaiter(void 0, void 0, void 0, function* () {
+    const image = yield loadImageSource(src);
+    const width = image.naturalWidth || image.width;
+    const height = image.naturalHeight || image.height;
+    if (!width || !height) {
+        throw new Error("Unable to prepare image for clipboard.");
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext("2d");
+    if (!context) {
+        throw new Error("Unable to prepare image for clipboard.");
+    }
+    context.drawImage(image, 0, 0, width, height);
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (blob) {
+                resolve(blob);
+            }
+            else {
+                reject(new Error("Unable to prepare image for clipboard."));
+            }
+        }, clipboardPngType);
+    });
+});
+const convertBlobToClipboardPng = (blob, fallbackSrc) => __awaiter(void 0, void 0, void 0, function* () {
+    const objectUrl = URL.createObjectURL(blob);
+    try {
+        return yield renderImageSourceToPngBlob(objectUrl);
+    }
+    catch (error) {
+        if (!fallbackSrc || fallbackSrc === objectUrl)
+            throw error;
+        return renderImageSourceToPngBlob(fallbackSrc);
+    }
+    finally {
+        URL.revokeObjectURL(objectUrl);
+    }
+});
+const getClipboardImageBlob = (image, ClipboardItemCtor) => __awaiter(void 0, void 0, void 0, function* () {
+    const src = image.currentSrc || image.src;
+    const blob = yield getImageBlob(src);
+    const type = blob.type || "";
+    if (canWriteClipboardType(ClipboardItemCtor, type)) {
+        return { blob, type };
+    }
+    return {
+        blob: yield convertBlobToClipboardPng(blob, src),
+        type: clipboardPngType,
+    };
+});
 const copyImage = (image) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
-    const ClipboardItemCtor = window.ClipboardItem;
+    const ClipboardItemCtor = window
+        .ClipboardItem;
     if (!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write) || !ClipboardItemCtor) {
         throw new Error("Image copying is not supported by this browser.");
     }
-    const blob = yield getImageBlob(image.src);
-    const type = blob.type || "image/png";
+    const { blob, type } = yield getClipboardImageBlob(image, ClipboardItemCtor);
     yield navigator.clipboard.write([
         new ClipboardItemCtor({
             [type]: blob,

package/dist/RichTextEditor/RichTextEditor.js

@@ -11,6 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { EditorContent, useEditor } from "@tiptap/react";
+import { DOMParser as ProseMirrorDOMParser } from "@tiptap/pm/model";
 import { Toolbar } from "./Toolbar";
 import getTipTapExtensions from "./Extensions/getTiptapExtensions";
 import { Extensions, SlashCommands } from "./Enums";
@@ -83,6 +84,12 @@ const htmlHasContent = (html) => {
     return Boolean(((_a = document.body.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
         document.body.querySelector("table, ul, ol, blockquote, pre, code, hr, iframe, video, audio"));
 };
+const insertHtmlAtSelection = (view, html) => {
+    const container = window.document.createElement("div");
+    container.innerHTML = html;
+    const slice = ProseMirrorDOMParser.fromSchema(view.state.schema).parseSlice(container);
+    view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+};
 const createImageFileFromSource = (imageSource, index) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     const response = yield fetch(imageSource.src);
@@ -191,7 +198,7 @@ const handleImagePaste = (view, event, handleImageUpload, handleImageUrlUpload)
         return false;
     event.preventDefault();
     if (html && htmlHasContent(htmlWithImageMarkers)) {
-        view.pasteHTML(htmlWithImageMarkers);
+        insertHtmlAtSelection(view, htmlWithImageMarkers);
         imageSources.forEach((imageSource) => {
             replaceImageMarkerWithPlaceholder(view, imageSource);
         });

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -23,7 +23,11 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                     return (_jsx(Button, Object.assign({}, item.options, { children: (_a = item === null || item === void 0 ? void 0 : item.options) === null || _a === void 0 ? void 0 : _a.label }), index));
                 }
                 else if (item.type === "menu") {
-                    return (_jsx(DropDownMenu, Object.assign({}, item.options, { children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
+                    return (_jsx(DropDownMenu, Object.assign({ dropDownProps: {
+                            style: {
+                                width: 135,
+                            },
+                        } }, item.options, { children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
                 }
             }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && (_jsx(DropDownMenu, { data: Object.values(Fonts).map((font) => ({
                     label: font,
@@ -31,7 +35,11 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                     onClick: () => {
                         setFont(font);
                     },
-                })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
+                })), size: "xxs", variant: "outlined", arrow: true, dropDownProps: {
+                    style: {
+                        width: 135,
+                    },
+                }, buttonProps: {
                     title: "Select Font",
                 }, children: (font || Fonts.DEFAULT) })), _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 })] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(DropDownMenu, { data: [
                     {
@@ -60,6 +68,10 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                                 borderRadius: "3px",
                             } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
                     title: "Select Color",
+                }, dropDownProps: {
+                    style: {
+                        width: 100,
+                    },
                 }, children: "Color" })), _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 }))] }), _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 }))] })] }));
 }) `
   display: flex;

package/package.json

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

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -1,41 +0,0 @@
-import { ReactNode } from "react";
-import type { FormatOptions } from "../DateInput/DateInput";
-import { Size, Variant } from "../core";
-export type DateTimeRangeValue = {
-    start?: string | null;
-    end?: string | null;
-};
-export type DateTimeRangePreset = {
-    label: string;
-    getRange: () => Required<DateTimeRangeValue>;
-};
-export type DateTimeRangePickerChangeMeta = {
-    source: "apply" | "clear" | "preset";
-    preset?: DateTimeRangePreset;
-};
-export type DateTimeRangePickerProps = {
-    className?: string;
-    style?: React.CSSProperties;
-    defaultValue?: DateTimeRangeValue;
-    value?: DateTimeRangeValue;
-    onChange?: (value: DateTimeRangeValue, meta: DateTimeRangePickerChangeMeta) => void;
-    label?: string;
-    description?: ReactNode;
-    placeholder?: string;
-    startLabel?: string;
-    endLabel?: string;
-    format?: FormatOptions;
-    size?: Size;
-    variant?: Variant;
-    required?: boolean;
-    clearable?: boolean;
-    disabled?: boolean;
-    error?: string;
-    width?: string | number;
-    min?: Date;
-    max?: Date;
-    utc?: boolean;
-    presets?: DateTimeRangePreset[];
-};
-declare const DateTimeRangePicker: import("react").ForwardRefExoticComponent<DateTimeRangePickerProps & import("react").RefAttributes<HTMLElement>>;
-export default DateTimeRangePicker;

package/dist/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,363 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { autoUpdate, flip, FloatingPortal, offset, shift, useDismiss, useFloating, useInteractions, } from "@floating-ui/react";
-import moment from "moment";
-import { CalendarDaysIcon, Clock3Icon } from "lucide-react";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import styled from "styled-components";
-import { Button, Calendar, DateInput, FieldLabel, SegmentedControl } from "..";
-import { ArrowButton, ClearButton, getControlSizeTokens, StyledContent, StyledFloatContainer, } from "../core";
-const DEFAULT_FORMAT = "YYYY-MM-DD HH:mm:ss";
-const resolveNow = (utc) => (utc ? moment.utc() : moment());
-const serializeMoment = (value, utc) => {
-    const next = utc ? value.clone().utc() : value.clone();
-    return next.toISOString();
-};
-const getDefaultPresets = (utc) => {
-    const makePreset = (label, amount, unit) => ({
-        label,
-        getRange: () => {
-            const end = resolveNow(utc);
-            const start = end.clone().subtract(amount, unit);
-            return {
-                start: serializeMoment(start, utc),
-                end: serializeMoment(end, utc),
-            };
-        },
-    });
-    return [
-        makePreset("Last 15 minutes", 15, "minutes"),
-        makePreset("Last 30 minutes", 30, "minutes"),
-        makePreset("Last 1 hour", 1, "hour"),
-        makePreset("Last 24 hours", 24, "hours"),
-        makePreset("Last 7 days", 7, "days"),
-        makePreset("Last 30 days", 30, "days"),
-    ];
-};
-const parseRangeMoment = (value, utc) => {
-    if (!value)
-        return null;
-    const parsed = utc ? moment.utc(value) : moment(value);
-    return parsed.isValid() ? parsed : null;
-};
-const momentToCalendarDate = (value, utc) => {
-    const parsed = parseRangeMoment(value, utc);
-    if (!parsed)
-        return undefined;
-    if (!utc)
-        return parsed.toDate();
-    return new Date(parsed.year(), parsed.month(), parsed.date(), parsed.hour(), parsed.minute(), parsed.second(), parsed.millisecond());
-};
-const calendarDateToMoment = (value, utc) => {
-    if (!utc)
-        return moment(value);
-    return moment.utc({
-        year: value.getFullYear(),
-        month: value.getMonth(),
-        date: value.getDate(),
-        hour: value.getHours(),
-        minute: value.getMinutes(),
-        second: value.getSeconds(),
-        millisecond: value.getMilliseconds(),
-    });
-};
-const formatDisplay = (value, format, utc) => {
-    const parsed = parseRangeMoment(value, utc);
-    if (!parsed)
-        return "";
-    return parsed.format(format);
-};
-const StyledContainer = styled.div.attrs({
-    className: "mfui-DateTimeRangePicker",
-}) `
-  width: ${({ $width }) => {
-    if ($width === undefined || $width === null)
-        return "100%";
-    return typeof $width === "number" ? `${$width}px` : $width;
-}};
-`;
-const StyledTrigger = styled.button `
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: ${({ size }) => `${getControlSizeTokens(size).iconGap}px`};
-  width: 100%;
-  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
-  padding: ${({ size }) => `0 ${getControlSizeTokens(size).adornmentWidth}px 0 ${getControlSizeTokens(size).inputPaddingX}px`};
-  border-radius: 5px;
-  border: 1px solid
-    ${({ theme, variant }) => variant === "filled" || variant === "text"
-    ? "transparent"
-    : theme.palette.input.border};
-  outline: none;
-  background: ${({ theme, variant }) => variant === "text" ? "transparent" : theme.palette.input.background};
-  color: ${({ theme }) => theme.palette.text.primary};
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
-  text-align: left;
-  cursor: pointer;
-  transition: border 0.1s ease-in-out;
-
-  &:focus-visible,
-  &:focus {
-    border-color: ${({ theme }) => theme.palette.primary.main};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
-const TriggerIcon = styled.span `
-  display: inline-flex;
-  align-items: center;
-  color: ${({ theme }) => theme.palette.text.secondary};
-
-  svg {
-    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-  }
-`;
-const TriggerText = styled.span `
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: ${({ theme, $empty }) => $empty ? theme.palette.input.placeholder : theme.palette.text.primary};
-`;
-const TriggerActions = styled.span `
-  position: absolute;
-  right: 0;
-  top: 0;
-  display: flex;
-  height: 100%;
-`;
-const PickerPanel = styled.div `
-  display: grid;
-  grid-template-columns: 172px minmax(430px, 1fr);
-  gap: 10px;
-  width: min(720px, calc(100vw - 32px));
-
-  @media (max-width: 640px) {
-    grid-template-columns: minmax(0, 1fr);
-    width: calc(100vw - 32px);
-  }
-`;
-const PresetColumn = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding-right: 10px;
-  border-right: 1px solid ${({ theme }) => theme.palette.divider};
-
-  @media (max-width: 640px) {
-    padding-right: 0;
-    padding-bottom: 10px;
-    border-right: none;
-    border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-  }
-`;
-const PanelTitle = styled.div `
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1.2;
-  text-transform: uppercase;
-  color: ${({ theme }) => theme.palette.text.secondary};
-  margin-bottom: 4px;
-`;
-const PresetButton = styled.button `
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-height: 28px;
-  padding: 0 8px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: ${({ theme }) => theme.palette.text.primary};
-  font: inherit;
-  font-size: 12px;
-  text-align: left;
-  cursor: pointer;
-
-  &:hover,
-  &:focus-visible {
-    background: ${({ theme }) => theme.palette.action.hover};
-    outline: none;
-  }
-`;
-const CustomColumn = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-width: 0;
-`;
-const InputGrid = styled.div `
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-
-  @media (max-width: 640px) {
-    grid-template-columns: minmax(0, 1fr);
-  }
-`;
-const EndpointField = styled.div `
-  min-width: 0;
-`;
-const ActiveControlRow = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-`;
-const CalendarShell = styled.div `
-  display: flex;
-  justify-content: center;
-  padding: 8px;
-  overflow-x: auto;
-  border: 1px solid ${({ theme }) => theme.palette.divider};
-  border-radius: 5px;
-  background: ${({ theme }) => theme.palette.background.paper};
-`;
-const ValidationText = styled.div `
-  min-height: 16px;
-  font-size: 11px;
-  color: ${({ theme }) => theme.palette.error.main};
-`;
-const ActionRow = styled.div `
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-`;
-const FooterMeta = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin-right: auto;
-  color: ${({ theme }) => theme.palette.text.secondary};
-  font-size: 11px;
-
-  svg {
-    width: 13px;
-    height: 13px;
-  }
-`;
-const DateTimeRangePicker = forwardRef(({ className, style, defaultValue = { start: null, end: null }, value, onChange = () => { }, label, description, placeholder = "Select date/time range", startLabel = "Start", endLabel = "End", format = DEFAULT_FORMAT, size = "sm", variant = "outlined", required = false, clearable = true, disabled = false, error, width, min, max, utc = false, presets, }, ref) => {
-    var _a, _b;
-    const isControlled = useRef(value !== undefined);
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    const _value = isControlled.current ? value || {} : uncontrolledValue;
-    const [isOpen, setIsOpen] = useState(false);
-    const [draftValue, setDraftValue] = useState(_value);
-    const [activeEndpoint, setActiveEndpoint] = useState("start");
-    const resolvedPresets = useMemo(() => presets || getDefaultPresets(utc), [presets, utc]);
-    const { refs, floatingStyles, context } = useFloating({
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        placement: "bottom-start",
-        strategy: "absolute",
-        middleware: [offset(5), flip(), shift({ padding: 8 })],
-        whileElementsMounted: autoUpdate,
-    });
-    const dismiss = useDismiss(context, {
-        outsidePress: (event) => {
-            var _a, _b, _c;
-            const target = event.target;
-            if (((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, ".mfui-DateInput")) ||
-                ((_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, ".mfui-DropDownMenu")) ||
-                ((_c = target === null || target === void 0 ? void 0 : target.closest) === null || _c === void 0 ? void 0 : _c.call(target, ".Menu"))) {
-                return false;
-            }
-            return true;
-        },
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
-    useEffect(() => {
-        if (isOpen) {
-            setDraftValue(_value);
-            setActiveEndpoint(_value.start ? "end" : "start");
-        }
-    }, [isOpen, _value.start, _value.end]);
-    const commitValue = useCallback((nextValue, meta) => {
-        if (!isControlled.current) {
-            setUncontrolledValue(nextValue);
-        }
-        onChange(nextValue, meta);
-    }, [onChange]);
-    const displayValue = useMemo(() => {
-        if (!_value.start && !_value.end)
-            return "";
-        const start = formatDisplay(_value.start, format, utc) || "Start";
-        const end = formatDisplay(_value.end, format, utc) || "End";
-        return `${start} - ${end}${utc ? " UTC" : ""}`;
-    }, [_value.start, _value.end, format, utc]);
-    const validationError = useMemo(() => {
-        const start = parseRangeMoment(draftValue.start, utc);
-        const end = parseRangeMoment(draftValue.end, utc);
-        if (!start || !end)
-            return "Select both a start and end timestamp.";
-        if (start.isAfter(end))
-            return "Start timestamp must be before end.";
-        if (min && start.isBefore(moment(min)))
-            return "Start is before minimum.";
-        if (max && end.isAfter(moment(max)))
-            return "End is after maximum.";
-        return "";
-    }, [draftValue.start, draftValue.end, min, max, utc]);
-    const patchDraft = (patch) => {
-        setDraftValue((prev) => (Object.assign(Object.assign({}, prev), patch)));
-    };
-    const handleClear = (event) => {
-        event === null || event === void 0 ? void 0 : event.preventDefault();
-        event === null || event === void 0 ? void 0 : event.stopPropagation();
-        const emptyValue = { start: null, end: null };
-        setDraftValue(emptyValue);
-        commitValue(emptyValue, { source: "clear" });
-        setIsOpen(false);
-    };
-    const handleApply = () => {
-        if (validationError)
-            return;
-        commitValue(draftValue, { source: "apply" });
-        setIsOpen(false);
-    };
-    const handleCancel = () => {
-        setDraftValue(_value);
-        setIsOpen(false);
-    };
-    const handlePreset = (preset) => {
-        const nextValue = preset.getRange();
-        setDraftValue(nextValue);
-        commitValue(nextValue, { source: "preset", preset });
-        setIsOpen(false);
-    };
-    const handleCalendarChange = (date) => {
-        if (!date) {
-            patchDraft({ [activeEndpoint]: null });
-            return;
-        }
-        patchDraft({
-            [activeEndpoint]: serializeMoment(calendarDateToMoment(date, utc), utc),
-        });
-    };
-    const activeValue = draftValue[activeEndpoint];
-    const activeMin = activeEndpoint === "end"
-        ? ((_a = parseRangeMoment(draftValue.start, utc)) === null || _a === void 0 ? void 0 : _a.toDate()) || min
-        : min;
-    const activeMax = activeEndpoint === "start"
-        ? ((_b = parseRangeMoment(draftValue.end, utc)) === null || _b === void 0 ? void 0 : _b.toDate()) || max
-        : max;
-    return (_jsxs(StyledContainer, Object.assign({ ref: (node) => {
-            if (typeof ref === "function") {
-                ref(node);
-            }
-            else if (ref) {
-                ref.current = node;
-            }
-            refs.setReference(node);
-        }, className: className, "$width": width }, getReferenceProps(), { children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledTrigger, { type: "button", size: size, variant: variant, disabled: disabled, style: style, "aria-haspopup": "dialog", "aria-expanded": isOpen, onClick: () => setIsOpen((prev) => !prev), children: [_jsx(TriggerIcon, { size: size, children: _jsx(CalendarDaysIcon, {}) }), _jsx(TriggerText, { "$empty": !displayValue, children: displayValue || placeholder }), _jsx(TriggerActions, { children: clearable && (_value.start || _value.end) ? (_jsx(ClearButton, { size: size, onClick: handleClear })) : (_jsx(ArrowButton, { size: size })) })] }), !disabled && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsxs(PickerPanel, { children: [_jsxs(PresetColumn, { children: [_jsx(PanelTitle, { children: "Quick ranges" }), resolvedPresets.map((preset) => (_jsx(PresetButton, { type: "button", onClick: () => handlePreset(preset), children: preset.label }, preset.label)))] }), _jsxs(CustomColumn, { children: [_jsxs(InputGrid, { children: [_jsx(EndpointField, { onClick: () => setActiveEndpoint("start"), children: _jsx(DateInput, { label: startLabel, value: draftValue.start, onChange: (next) => patchDraft({ start: next }), format: format, size: size, variant: variant, clearable: true, utc: utc, min: min, max: activeEndpoint === "start" ? activeMax : max }) }), _jsx(EndpointField, { onClick: () => setActiveEndpoint("end"), children: _jsx(DateInput, { label: endLabel, value: draftValue.end, onChange: (next) => patchDraft({ end: next }), format: format, size: size, variant: variant, clearable: true, utc: utc, min: activeEndpoint === "end" ? activeMin : min, max: max }) })] }), _jsxs(ActiveControlRow, { children: [_jsxs(PanelTitle, { children: ["Editing ", activeEndpoint === "start" ? startLabel : endLabel] }), _jsx(SegmentedControl, { data: [
-                                                        { label: startLabel, value: "start" },
-                                                        { label: endLabel, value: "end" },
-                                                    ], value: activeEndpoint, onChange: (next) => setActiveEndpoint(next), size: "xs" })] }), _jsx(CalendarShell, { children: _jsx(Calendar, { value: momentToCalendarDate(activeValue, utc), onChange: handleCalendarChange, includeTime: true, clearable: false, min: activeMin, max: activeMax }) }), _jsx(ValidationText, { children: validationError }), _jsxs(ActionRow, { children: [_jsxs(FooterMeta, { children: [_jsx(Clock3Icon, {}), utc ? "UTC" : "Local time"] }), clearable && (_jsx(Button, { type: "button", size: size, variant: "subtle", onClick: handleClear, children: "Clear" })), _jsx(Button, { type: "button", size: size, variant: "outlined", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { type: "button", size: size, variant: "contained", onClick: handleApply, disabled: Boolean(validationError), children: "Apply" })] })] })] }) }) })) }))] })));
-});
-DateTimeRangePicker.displayName = "DateTimeRangePicker";
-export default DateTimeRangePicker;

package/dist/DateTimeRangePicker/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./DateTimeRangePicker";
-export * from "./DateTimeRangePicker";

package/dist/DateTimeRangePicker/index.js

@@ -1,2 +0,0 @@
-export { default } from "./DateTimeRangePicker";
-export * from "./DateTimeRangePicker";

package/dist/QueryFilter/DefaultOperators.d.ts

@@ -1 +0,0 @@
-export { DefaultOperators, Operators, DEFAULT_QUERY_FILTER_OPERATORS, QUERY_FILTER_OPERATORS, } from "./QueryFilter.constants";

package/dist/QueryFilter/DefaultOperators.js

@@ -1 +0,0 @@
-export { DefaultOperators, Operators, DEFAULT_QUERY_FILTER_OPERATORS, QUERY_FILTER_OPERATORS, } from "./QueryFilter.constants";

package/dist/QueryFilter/types.d.ts

@@ -1 +0,0 @@
-export * from "./QueryFilter.types";

package/dist/QueryFilter/types.js

@@ -1 +0,0 @@
-export * from "./QueryFilter.types";

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

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

package/dist/Table/Utils/resizeHandler.js

@@ -1,84 +0,0 @@
-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;