@monolith-forensics/monolith-ui 1.8.1-dev.4 → 1.9.1-dev.1

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

@@ -60,20 +60,123 @@ const getImageFilename = (image) => {
     return "image.png";
 };
 const getImageBlob = (src) => __awaiter(void 0, void 0, void 0, function* () {
-    const response = yield fetch(src);
+    const response = yield fetch(src, {
+        mode: "cors",
+        credentials: "omit",
+    });
     if (!response.ok) {
         throw new Error("Unable to load image.");
     }
-    return response.blob();
+    return {
+        blob: yield response.blob(),
+        contentType: response.headers.get("content-type") || "",
+    };
+});
+const clipboardPngType = "image/png";
+const imageMimeTypesByExtension = {
+    gif: "image/gif",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: clipboardPngType,
+    svg: "image/svg+xml",
+    webp: "image/webp",
+};
+const normalizeMimeType = (type) => type.toLowerCase().split(";")[0].trim();
+const getImageMimeTypeFromSource = (src) => {
+    var _a;
+    try {
+        const url = new URL(src);
+        const filename = url.pathname.split("/").filter(Boolean).pop();
+        const extension = (_a = filename === null || filename === void 0 ? void 0 : filename.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        return extension ? imageMimeTypesByExtension[extension] || "" : "";
+    }
+    catch (_b) {
+        const dataUrlMatch = src.match(/^data:([^;,]+)/);
+        return (dataUrlMatch === null || dataUrlMatch === void 0 ? void 0 : dataUrlMatch[1]) || "";
+    }
+};
+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, contentType } = yield getImageBlob(src);
+    const type = normalizeMimeType(blob.type) ||
+        normalizeMimeType(contentType) ||
+        getImageMimeTypeFromSource(src);
+    if (canWriteClipboardType(ClipboardItemCtor, type)) {
+        return {
+            blob: blob.type === type ? blob : new Blob([blob], { type }),
+            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,
@@ -85,7 +188,7 @@ const downloadImage = (image) => __awaiter(void 0, void 0, void 0, function* ()
     let href = image.src;
     let objectUrl = null;
     try {
-        const blob = yield getImageBlob(image.src);
+        const { blob } = yield getImageBlob(image.src);
         objectUrl = URL.createObjectURL(blob);
         href = objectUrl;
     }

package/package.json

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