@yogiswara/honcho-editor-ui 3.3.4 → 3.4.1

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.d.ts

@@ -1,8 +1,15 @@
-import React from "react";
-import type { PhotoData } from "../../../hooks/editor/useHonchoEditorBulk";
-interface ImageGalleryProps {
-    imageCollection: PhotoData[];
-    onToggleSelect: (photo: PhotoData) => void;
+import { GallerySetup } from "../../../services/type";
+interface ImageGalleryInfiniteProps {
+    imageCollection: GallerySetup[];
+    isSelectedMode?: boolean;
+    isHiddenGallery?: boolean;
+    isLoading?: boolean;
+    isLoadingMore?: boolean;
+    hasMore?: boolean;
+    onPreview?: (photo: GallerySetup) => () => void;
+    onSelectedMode?: () => void;
+    onToggleSelect?: (photo: GallerySetup) => () => void;
+    onLoadMore?: () => Promise<void>;
 }
-export declare const AlbumImageGallery: React.FC<ImageGalleryProps>;
-export {};
+declare const AlbumImageGalleryInfinite: React.FC<ImageGalleryInfiniteProps>;
+export default AlbumImageGalleryInfinite;

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.js

@@ -1,7 +1,209 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Stack } from "@mui/material";
-export const AlbumImageGallery = (props) => {
-    const { imageCollection, onToggleSelect } = props;
-    return (_jsx(Stack, { sx: { width: '100%', maxHeight: '100%', overflowY: 'auto' } }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useMediaQuery, CircularProgress } from "@mui/material";
+import { memo, useCallback, useMemo, useRef, useEffect } from "react";
+import { MasonryInfiniteGrid } from "@egjs/react-infinitegrid";
+import ImageItemComponents from "./ImageItemComponents";
+import useColors from '../../../themes/colors';
+// Custom comparison function for ImageItem (reusing existing logic)
+const imageItemPropsAreEqual = (prevProps, nextProps) => {
+    // Compare photo data deeply
+    const prevPhoto = prevProps.photo;
+    const nextPhoto = nextProps.photo;
+    const prevData = prevProps.data;
+    const nextData = nextProps.data;
+    // Check if photo key/ID is the same
+    if (prevPhoto.key !== nextPhoto.key)
+        return false;
+    // Check critical photo properties that affect rendering
+    if (prevData.isSelected !== nextData.isSelected)
+        return false;
+    if (JSON.stringify(prevData.adjustments) !== JSON.stringify(nextData.adjustments))
+        return false;
+    if (prevData.frame !== nextData.frame)
+        return false;
+    if (prevPhoto.src !== nextPhoto.src)
+        return false;
+    // Compare other relevant props
+    if (prevProps.isSelectedMode !== nextProps.isSelectedMode)
+        return false;
+    if (prevProps.isHiddenGallery !== nextProps.isHiddenGallery)
+        return false;
+    if (prevProps.index !== nextProps.index)
+        return false;
+    if (prevProps.isSelected !== nextProps.isSelected)
+        return false;
+    // If all critical properties are the same, don't re-render
+    return true;
 };
+// Memoized component with custom comparison
+const MemoizedImageItem = memo(ImageItemComponents, imageItemPropsAreEqual);
+// Custom comparison function for AlbumImageGalleryInfinite
+const albumGalleryInfinitePropsAreEqual = (prevProps, nextProps) => {
+    // Compare simple props first
+    if (prevProps.isSelectedMode !== nextProps.isSelectedMode)
+        return false;
+    if (prevProps.isHiddenGallery !== nextProps.isHiddenGallery)
+        return false;
+    if (prevProps.isLoading !== nextProps.isLoading)
+        return false;
+    if (prevProps.isLoadingMore !== nextProps.isLoadingMore)
+        return false;
+    if (prevProps.hasMore !== nextProps.hasMore)
+        return false;
+    // Compare imageCollection array deeply
+    const prevCollection = prevProps.imageCollection;
+    const nextCollection = nextProps.imageCollection;
+    // Allow incremental updates - if next has more items, only check if existing items changed
+    const minLength = Math.min(prevCollection.length, nextCollection.length);
+    // If next collection is smaller, something was removed - need re-render
+    if (nextCollection.length < prevCollection.length)
+        return false;
+    // Check if existing items (at same positions) have changed
+    for (let i = 0; i < minLength; i++) {
+        const prev = prevCollection[i];
+        const next = nextCollection[i];
+        if (prev.key !== next.key)
+            return false;
+        if (prev.src !== next.src)
+            return false;
+        if (prev.isSelected !== next.isSelected)
+            return false;
+        if (prev.original !== next.original)
+            return false;
+        if (JSON.stringify(prev.adjustments) !== JSON.stringify(next.adjustments))
+            return false;
+        if (prev.frame !== next.frame)
+            return false;
+    }
+    // If we reach here, existing items are the same
+    // If lengths are equal, no changes - return true
+    // If next is longer, new items added - return true (let InfiniteGrid handle new items)
+    return true;
+};
+const AlbumImageGalleryInfinite = (props) => {
+    const { imageCollection, isSelectedMode, isHiddenGallery, onPreview, 
+    // isLoading = false,
+    isLoadingMore = false, hasMore = false, onSelectedMode = () => { }, onToggleSelect, onLoadMore, } = props;
+    // const theme = useTheme();
+    const colors = useColors();
+    const scrollContainerRef = useRef(null);
+    const loadingTriggerRef = useRef(false);
+    // Responsive column calculation based on breakpoints (matching original)
+    const isMobile = useMediaQuery("(max-width: 750px)");
+    // const isTablet = useMediaQuery("(max-width: 900px)");
+    const columnWidth = useMemo(() => {
+        // if (isMobile) return "100%"; // 1 column on mobile
+        if (isMobile)
+            return "calc(50% - 0px)"; // 2 columns on tablet
+        return "calc(25% - 0px)"; // 4 columns on desktop
+    }, [isMobile, isMobile]);
+    // Memoize callback functions to prevent unnecessary re-renders
+    const handlePreview = useCallback((photo) => () => {
+        if (onPreview) {
+            onPreview(photo)();
+        }
+    }, [onPreview]);
+    const handleToggleSelect = useCallback((photo) => () => {
+        if (onToggleSelect) {
+            onToggleSelect(photo)();
+        }
+    }, [onToggleSelect]);
+    const handleScroll = useCallback(async (event) => {
+        if (!onLoadMore || !hasMore || isLoadingMore || loadingTriggerRef.current) {
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+        const scrollPercent = (scrollTop + clientHeight) / scrollHeight;
+        // Trigger load more when user scrolls to 80% of the content
+        if (scrollPercent > 0.8) {
+            loadingTriggerRef.current = true;
+            try {
+                console.log('[AlbumImageGalleryInfinite] Loading more images...');
+                await onLoadMore();
+            }
+            catch (error) {
+                console.error('[AlbumImageGalleryInfinite] Error loading more images:', error);
+            }
+            finally {
+                // Reset the trigger after a short delay to prevent rapid firing
+                setTimeout(() => {
+                    loadingTriggerRef.current = false;
+                }, 1000);
+            }
+        }
+    }, [onLoadMore, hasMore, isLoadingMore]);
+    // Reset loading trigger when loading state changes
+    useEffect(() => {
+        if (!isLoadingMore) {
+            loadingTriggerRef.current = false;
+        }
+    }, [isLoadingMore]);
+    return (_jsxs(Box, { ref: scrollContainerRef, onScroll: handleScroll, sx: {
+            width: '100%',
+            height: '100%',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            // Hide scrollbar
+            scrollbarWidth: 'none', // Firefox
+            msOverflowStyle: 'none', // IE/Edge
+            '&::-webkit-scrollbar': {
+                display: 'none'
+            }
+        }, children: [_jsx(MasonryInfiniteGrid, { className: "album-masonry-grid", gap: 0, useRecycle: false, threshold: 200, defaultDirection: "end", useFirstRender: true, container: true, containerTag: "div", column: isMobile ? 2 : 4, columnSize: 0, columnSizeRatio: 0, 
+                // Animation and transition settings to reduce blinking
+                transitionDuration: 0, easing: "linear", isEqualSize: false, isConstantSize: false, 
+                // Prevent layout shifts during updates
+                observeChildren: false, renderOnPropertyChange: false, style: {
+                    // Disable CSS transitions that might cause blinking
+                    transition: 'none',
+                    // Improve rendering performance
+                    willChange: 'auto',
+                    // Prevent layout shifts
+                    minHeight: 'auto',
+                    // width: '100%',
+                    minWidth: '100%',
+                    overflow: 'hidden',
+                    // overflowY: 'scroll', // Enable scrolling
+                    scrollbarWidth: 'none', // Firefox
+                    msOverflowStyle: 'none', // IE/Edge
+                    '&::-webkit-scrollbar': {
+                        display: 'none'
+                    }
+                }, children: imageCollection.map((photo, index) => (_jsx(Box, { sx: {
+                        width: columnWidth,
+                        padding: "4px",
+                        // Disable transitions to prevent blinking
+                        transition: 'none !important',
+                        // Ensure stable layout
+                        // minHeight: 'auto',
+                        // Improve rendering performance
+                        willChange: 'auto',
+                        // Ensure images maintain aspect ratio
+                        "& img": {
+                            width: "100%",
+                            // height: "auto",
+                            // objectFit: "cover",
+                            // borderRadius: "8px",
+                            // Disable image transitions
+                            transition: 'none !important',
+                            // Prevent layout shifts during loading
+                            display: 'block'
+                        }
+                    }, children: _jsx(MemoizedImageItem, { margin: "0px", index: index, photo: photo, data: photo, direction: "column", isFullScreenMode: false, isSelected: photo.isSelected ?? false, isSelectedMode: isSelectedMode, isHiddenGallery: isHiddenGallery, onPreview: handlePreview(photo), onSelectedMode: onSelectedMode, onToggleSelect: handleToggleSelect(photo) }) }, photo.key + photo.adjustments?.toString()))) }), isLoadingMore && (_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 2,
+                    width: '100%'
+                }, children: _jsx(CircularProgress, { size: 24, sx: { color: colors.onSurfaceVariant } }) })), !hasMore && imageCollection.length > 0 && (_jsx(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 2,
+                    width: '100%',
+                    color: colors.onSurfaceVariant,
+                    fontSize: '0.875rem'
+                }, children: "No more images to load" }))] }));
+};
+export default AlbumImageGalleryInfinite;

package/dist/components/editor/GalleryAlbum/ImageItemComponents.d.ts

@@ -0,0 +1,25 @@
+import { GallerySetup } from "../../../services/type";
+interface PhotoProps<T> {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    key: string;
+}
+interface Props {
+    margin?: any;
+    index: number;
+    photo: PhotoProps<GallerySetup>;
+    data: GallerySetup;
+    direction: "row" | "column";
+    isSelectedMode: boolean | undefined;
+    isFullScreenMode: boolean;
+    isSelected: boolean;
+    isHiddenGallery: boolean | undefined;
+    onToggleSelect: () => void;
+    onPreview: () => void;
+    onSelectedMode: () => void | undefined;
+    enableEditor?: boolean;
+}
+declare const ImageItemComponents: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default ImageItemComponents;

package/dist/components/editor/GalleryAlbum/ImageItemComponents.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, CardMedia, useTheme } from "@mui/material";
+import { TickCircle } from "iconsax-react";
+import useColors from '../../../themes/colors';
+import CustomTickIcon from "./svg/Tick";
+import { useImageProcessor } from "../../../lib/hooks/useImageProcessor";
+import { neutral } from "./colorsGallery";
+import { log } from "../../../utils/logger";
+const imgStyle = {
+    transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s",
+    width: "100%",
+    // objectFit: "contain",
+    //height: "100%",
+};
+const selectedImgStyle = {
+    borderRadius: "8px",
+    transform: "translateZ(0px) scale3d(1, 1, 1)",
+    // transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s"
+};
+const ImageItemComponents = (props) => {
+    const { photo, margin, enableEditor = true, data } = props;
+    const theme = useTheme();
+    const imageData = data;
+    const colors = useColors();
+    // Memoize adjustments to prevent infinite re-renders
+    // Use the image processor hook
+    const { processedImageSrc, isProcessingComplete } = useImageProcessor({
+        photoId: photo.key,
+        photoSrc: photo.src,
+        enableEditor,
+        adjustments: imageData?.adjustments,
+        frame: imageData?.frame || null,
+    });
+    const styleHiddenGallery = useMemo(() => {
+        if (props.isHiddenGallery) {
+            return { filter: "blur(20px)", pointerEvents: "none" };
+        }
+        else {
+            return {};
+        }
+    }, [props.isHiddenGallery]);
+    const commonStyle = useMemo(() => {
+        return {
+            backgroundColor: neutral.white,
+            overflow: "hidden",
+            position: "relative",
+            width: "100%",
+            aspectRatio: `${photo.width}/${photo.height}`,
+        };
+    }, [props.direction, props.photo]);
+    const handleImageClick = () => {
+        log.debug({
+            isFullMode: props.isFullScreenMode,
+            isShowGallery: props.isHiddenGallery,
+            isSelectedMode: props.isSelectedMode,
+            isSelected: props.isSelected,
+        }, "handleImageClick");
+        if (!props.isSelectedMode && !props.isSelected) {
+            props.onSelectedMode();
+        }
+        if (!props.isFullScreenMode && !props.isHiddenGallery) {
+            if (props.isSelectedMode || props.isSelected) {
+                // If we're in selection mode OR this image is already selected,
+                // clicking toggles the selection
+                log.debug("handleImageClick with toggle select");
+                props.onToggleSelect();
+            }
+            else {
+                // Not in selection mode and image not selected
+                // Enter selection mode and select this image in one action
+                log.debug("handleImageClick entering selection mode and selecting image");
+                if (props.onSelectedMode) {
+                    props.onSelectedMode(); // This should trigger selection mode globally
+                }
+                props.onToggleSelect(); // Select this specific image
+            }
+        }
+    };
+    const handleImageSelectedIconClick = () => {
+        log.debug("handleImageSelectedIconClick");
+        if (!props.isFullScreenMode) {
+            if (!props.isSelectedMode) {
+                props.onSelectedMode();
+            }
+            props.onToggleSelect();
+        }
+    };
+    const imageSx = useMemo(() => {
+        const baseStyles = props.isSelected ? {
+            ...imgStyle,
+            ...selectedImgStyle,
+            ...styleHiddenGallery,
+            aspectRatio: `${photo.width}/${photo.height}`,
+        } : {
+            ...imgStyle,
+            ...styleHiddenGallery,
+        };
+        return {
+            ...baseStyles,
+            // Show loading state only on first load, then keep images visible during transitions
+            opacity: (!processedImageSrc || !isProcessingComplete) && processedImageSrc === '' ? 0 : 1,
+            transition: 'opacity 0.15s ease-in-out',
+        };
+    }, [props.isSelected, styleHiddenGallery, photo.width, photo.height, processedImageSrc, isProcessingComplete]);
+    const boxNotSelected = useMemo(() => ({
+        margin,
+        // height: photo.height,
+        ...commonStyle,
+        transition: ".3s",
+        // "&:hover": { padding: "12px", backgroundColor: "primary.light1" },
+        "&:-webkit-transition": { transition: ".3s" },
+        "&:hover > .checkbox": { display: props.isHiddenGallery ? "" : "block" },
+        cursor: props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
+        backgroundColor: props.isFullScreenMode
+            ? "rgba(0,0,0,0.1)"
+            : "transparent",
+    }), [margin, commonStyle, props.isHiddenGallery, props.isFullScreenMode]);
+    const boxSelected = useMemo(() => ({
+        margin,
+        // height: photo.height,
+        ...commonStyle,
+        cursor: props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
+        transition: ".3s",
+        "&:-webkit-transition": { transition: ".3s" },
+        padding: { xs: "13px 12px", sm: "21.31px 25.56px 21.32px 27.68px" },
+        backgroundColor: colors.onSurface,
+    }), [margin, commonStyle, theme.palette.light, props.isFullScreenMode, props.isHiddenGallery,]);
+    const boxOuterSx = useMemo(() => {
+        if (props.isFullScreenMode) {
+            return {
+                margin,
+                ...commonStyle,
+                //width: props.data.width,
+                //height: props.data.height,
+            };
+        }
+        else {
+            if (props.isSelected) {
+                return { ...boxSelected };
+            }
+            else {
+                return { ...boxNotSelected };
+            }
+        }
+    }, [
+        props.isFullScreenMode,
+        photo.height,
+        photo.width,
+        commonStyle,
+        boxSelected,
+        boxNotSelected,
+        margin,
+        props.isSelected,
+    ]);
+    return (_jsxs(Box, { id: "Box_image", sx: boxOuterSx, className: "image", children: [!props.isHiddenGallery &&
+                (props.isSelected ? (_jsx(Box, { color: colors.onSurface, onClick: handleImageSelectedIconClick, sx: {
+                        position: "absolute",
+                        width: "19px",
+                        height: "19px",
+                        zIndex: "2",
+                        left: "5px",
+                        top: "5px",
+                        borderRadius: { xs: "50%", sm: 0 },
+                    }, className: "checkbox", children: _jsx(CustomTickIcon, {}) })) : (_jsx(Box, { color: "neutral.light2", onClick: handleImageSelectedIconClick, sx: {
+                        position: "absolute",
+                        width: "19px",
+                        height: "19px",
+                        zIndex: "1",
+                        left: "5px",
+                        top: "5px",
+                        display: props.isSelectedMode ? "block" : "none",
+                        visibility: {
+                            xs: props.isSelectedMode ? "visible" : "hidden",
+                            sm: "visible",
+                        },
+                    }, className: "checkbox", children: _jsx(TickCircle, { style: { width: "24px", height: "24px", fill: "black" }, color: "white" }) }))), _jsx(CardMedia, { id: "card_media", component: "img", className: "image", loading: "lazy", alt: photo.alt, sx: imageSx, src: processedImageSrc, width: "100%", onClick: handleImageClick })] }, photo.key));
+};
+export default ImageItemComponents;

package/dist/components/editor/GalleryAlbum/colorsGallery.d.ts

@@ -0,0 +1,9 @@
+export declare const neutral: {
+    white: string;
+    10: string;
+    25: string;
+    50: string;
+    75: string;
+    100: string;
+    200: string;
+};

package/dist/components/editor/GalleryAlbum/colorsGallery.js

@@ -0,0 +1,9 @@
+export const neutral = {
+    white: "#FFFFFF",
+    10: "#F9F9F9",
+    25: "#DBDBDB",
+    50: "#8D8D8D",
+    75: "#575757",
+    100: "#0A0A1C",
+    200: "#000000",
+};

package/dist/components/editor/GalleryAlbum/svg/Tick.d.ts

@@ -0,0 +1,2 @@
+declare const Tick: () => import("react/jsx-runtime").JSX.Element;
+export default Tick;

package/dist/components/editor/GalleryAlbum/svg/Tick.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgIcon } from "@mui/material";
+const Tick = () => {
+    return (_jsx(SvgIcon, { style: { width: "29px", height: "29px" }, children: _jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "5", y: "5", width: "22", height: "22", rx: "11", fill: "white" }), _jsx("path", { d: "M20 13L14.5 18.5L12 16", stroke: "black", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+};
+export default Tick;

package/dist/components/editor/HBulkAccordionColorAdjustment.js

@@ -4,7 +4,6 @@ import useHonchoTypography from "../../themes/honchoTheme";
 import useColors from "../../themes/colors";
 import HBulkAccordionColorAdjustmentColors from "./HBulkAccordionColorAdjustmentColors";
 import HBulkAccordionColorAdjustmentLight from "./HBulkAccordionColorAdjustmentLight";
-import HBulkAccordionColorAdjustmentDetails from "./HBulkAccordionColorAdjustmentDetails";
 export default function HBulkAccordionColorAdjustment(props) {
     const typography = useHonchoTypography();
     const colors = useColors();
@@ -27,5 +26,5 @@ export default function HBulkAccordionColorAdjustment(props) {
         }
     };
     const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", sx: { accordionStyle }, children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('whiteBalance'), onChange: props.onPanelChange('whiteBalance'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Color" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('whiteBalance') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HBulkAccordionColorAdjustmentColors, { onTempDecreaseMax: props.onTempDecreaseMax, onTempDecrease: props.onTempDecrease, onTempIncrease: props.onTempIncrease, onTempIncreaseMax: props.onTempIncreaseMax, onTintDecreaseMax: props.onTintDecreaseMax, onTintDecrease: props.onTintDecrease, onTintIncrease: props.onTintIncrease, onTintIncreaseMax: props.onTintIncreaseMax, onVibranceDecreaseMax: props.onVibranceDecreaseMax, onVibranceDecrease: props.onVibranceDecrease, onVibranceIncrease: props.onVibranceIncrease, onVibranceIncreaseMax: props.onVibranceIncreaseMax, onSaturationDecreaseMax: props.onSaturationDecreaseMax, onSaturationDecrease: props.onSaturationDecrease, onSaturationIncrease: props.onSaturationIncrease, onSaturationIncreaseMax: props.onSaturationIncreaseMax }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('light'), onChange: props.onPanelChange('light'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Light" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('light') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HBulkAccordionColorAdjustmentLight, { onExposureDecreaseMax: props.onExposureDecreaseMax, onExposureDecrease: props.onExposureDecrease, onExposureIncrease: props.onExposureIncrease, onExposureIncreaseMax: props.onExposureIncreaseMax, onContrastDecreaseMax: props.onContrastDecreaseMax, onContrastDecrease: props.onContrastDecrease, onContrastIncrease: props.onContrastIncrease, onContrastIncreaseMax: props.onContrastIncreaseMax, onHighlightsDecreaseMax: props.onHighlightsDecreaseMax, onHighlightsDecrease: props.onHighlightsDecrease, onHighlightsIncrease: props.onHighlightsIncrease, onHighlightsIncreaseMax: props.onHighlightsIncreaseMax, onShadowsDecreaseMax: props.onShadowsDecreaseMax, onShadowsDecrease: props.onShadowsDecrease, onShadowsIncrease: props.onShadowsIncrease, onShadowsIncreaseMax: props.onShadowsIncreaseMax, onWhitesDecreaseMax: props.onWhitesDecreaseMax, onWhitesDecrease: props.onWhitesDecrease, onWhitesIncrease: props.onWhitesIncrease, onWhitesIncreaseMax: props.onWhitesIncreaseMax, onBlacksDecreaseMax: props.onBlacksDecreaseMax, onBlacksDecrease: props.onBlacksDecrease, onBlacksIncrease: props.onBlacksIncrease, onBlacksIncreaseMax: props.onBlacksIncreaseMax }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('details'), onChange: props.onPanelChange('details'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Details" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('details') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HBulkAccordionColorAdjustmentDetails, { onClarityDecreaseMax: props.onClarityDecreaseMax, onClarityDecrease: props.onClarityDecrease, onClarityIncrease: props.onClarityIncrease, onClarityIncreaseMax: props.onClarityIncreaseMax, onSharpnessDecreaseMax: props.onSharpnessDecreaseMax, onSharpnessDecrease: props.onSharpnessDecrease, onSharpnessIncrease: props.onSharpnessIncrease, onSharpnessIncreaseMax: props.onSharpnessIncreaseMax }) })] })] }) }));
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", sx: { accordionStyle }, children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('whiteBalance'), onChange: props.onPanelChange('whiteBalance'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%', pr: "16px" }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Color" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('whiteBalance') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "2px" }, children: _jsx(HBulkAccordionColorAdjustmentColors, { onTempDecreaseMax: props.onTempDecreaseMax, onTempDecrease: props.onTempDecrease, onTempIncrease: props.onTempIncrease, onTempIncreaseMax: props.onTempIncreaseMax, onTintDecreaseMax: props.onTintDecreaseMax, onTintDecrease: props.onTintDecrease, onTintIncrease: props.onTintIncrease, onTintIncreaseMax: props.onTintIncreaseMax, onVibranceDecreaseMax: props.onVibranceDecreaseMax, onVibranceDecrease: props.onVibranceDecrease, onVibranceIncrease: props.onVibranceIncrease, onVibranceIncreaseMax: props.onVibranceIncreaseMax, onSaturationDecreaseMax: props.onSaturationDecreaseMax, onSaturationDecrease: props.onSaturationDecrease, onSaturationIncrease: props.onSaturationIncrease, onSaturationIncreaseMax: props.onSaturationIncreaseMax }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('light'), onChange: props.onPanelChange('light'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%', pr: "16px" }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Light" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('light') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "2px" }, children: _jsx(HBulkAccordionColorAdjustmentLight, { onExposureDecreaseMax: props.onExposureDecreaseMax, onExposureDecrease: props.onExposureDecrease, onExposureIncrease: props.onExposureIncrease, onExposureIncreaseMax: props.onExposureIncreaseMax, onContrastDecreaseMax: props.onContrastDecreaseMax, onContrastDecrease: props.onContrastDecrease, onContrastIncrease: props.onContrastIncrease, onContrastIncreaseMax: props.onContrastIncreaseMax, onHighlightsDecreaseMax: props.onHighlightsDecreaseMax, onHighlightsDecrease: props.onHighlightsDecrease, onHighlightsIncrease: props.onHighlightsIncrease, onHighlightsIncreaseMax: props.onHighlightsIncreaseMax, onShadowsDecreaseMax: props.onShadowsDecreaseMax, onShadowsDecrease: props.onShadowsDecrease, onShadowsIncrease: props.onShadowsIncrease, onShadowsIncreaseMax: props.onShadowsIncreaseMax, onWhitesDecreaseMax: props.onWhitesDecreaseMax, onWhitesDecrease: props.onWhitesDecrease, onWhitesIncrease: props.onWhitesIncrease, onWhitesIncreaseMax: props.onWhitesIncreaseMax, onBlacksDecreaseMax: props.onBlacksDecreaseMax, onBlacksDecrease: props.onBlacksDecrease, onBlacksIncrease: props.onBlacksIncrease, onBlacksIncreaseMax: props.onBlacksIncreaseMax }) })] })] }) }));
 }

package/dist/components/editor/HBulkAccordionColorAdjustmentColors.js

@@ -89,7 +89,7 @@ export default function HBulkAccordionColorAdjustmentColors(props) {
                                 mr: "12px",
                                 border: "1px solid white",
                                 borderRadius: "100px",
-                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Saturation" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "2px" }, children: [_jsx(IconButton, { onClick: props.onSaturationDecreaseMax, sx: {
+                            }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/bulk-editor-max-button-right.svg", sx: { ml: "2px" } }) })] }), _jsx(Stack, { direction: "row", justifyContent: "space-between", sx: { pb: "8px", pt: "16px" }, children: _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Saturation" }) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { p: "0px", m: "0px", pt: "2px", pb: "16px" }, children: [_jsx(IconButton, { onClick: props.onSaturationDecreaseMax, sx: {
                                 width: "38.5px",
                                 height: "26px",
                                 py: "2px",

package/dist/components/editor/HBulkPreset.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { SelectChangeEvent } from "@mui/material";
 type Preset = {
     id: string;
     name: string;
@@ -10,14 +9,11 @@ interface Props {
     expandedPanels: string[];
     presetMenuAnchorEl: null | HTMLElement;
     activePresetMenuId: string | null;
-    isMenuOpen: boolean;
-    onPanelChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
-    onSelectPreset: (event: SelectChangeEvent<string>) => void;
+    isPresetCreatedSet?: boolean;
+    onChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
+    onSelectPreset: (id: string) => void;
     onPresetMenuClick: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
     onPresetMenuClose: () => void;
-    onRemovePreset: () => void;
-    onRenamePreset: () => void;
-    onDeletePreset: () => void;
     onOpenPresetModal: () => void;
 }
 export default function HBulkPreset(props: Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/HBulkPreset.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { Box, MenuItem, FormControl, Select, Stack, Accordion, AccordionSummary, AccordionDetails, CardMedia, Typography, IconButton, Button } from "@mui/material";
 import useHonchoTypography from "../../themes/honchoTheme";
 import useColors from "../../themes/colors";
-// Static `presets` array has been removed.
 export default function HBulkPreset(props) {
     const typography = useHonchoTypography();
     const colors = useColors();
-    const isMenuOpen = Boolean(props.presetMenuAnchorEl);
     const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
     const accordionStyle = {
         backgroundColor: colors.onBackground,
@@ -18,26 +17,26 @@ export default function HBulkPreset(props) {
     };
     const CustomSelectIcon = (iconProps) => {
         const isExpanded = iconProps.className?.includes('MuiSelect-iconOpen');
-        return (_jsx(CardMedia, { component: "img", image: isExpanded ? "/v1/svg/expand-editor.svg" : "/v1/svg/expanded-editor.svg", sx: { width: "11.67px", height: "5.83px", right: '14px', position: 'absolute', pointerEvents: 'none' } }));
+        return (_jsx(CardMedia, { component: "img", image: isExpanded ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px", right: '14px', position: 'absolute', pointerEvents: 'none' } }));
     };
-    return (_jsx(_Fragment, { children: _jsx(Stack, { children: _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onPanelChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(FormControl, { fullWidth: true, children: _jsxs(Select, { fullWidth: true, value: props.selectedPreset, onChange: props.onSelectPreset, IconComponent: CustomSelectIcon, renderValue: (selectedId) => {
-                                    // Handle empty selection case
-                                    if (!selectedId) {
-                                        return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, opacity: 0.7 }, children: "Select Preset" });
-                                    }
-                                    // Uses props.presets to find the name
-                                    const selectedPresetObject = props.presets.find(p => p.id === selectedId);
-                                    if (!selectedPresetObject) {
-                                        return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, opacity: 0.7 }, children: "Select Preset" });
-                                    }
-                                    return _jsx(Typography, { sx: { ...typography.bodyMedium }, children: selectedPresetObject.name });
-                                }, MenuProps: {
+    const handleSelectChange = (event) => {
+        props.onSelectPreset(event.target.value);
+    };
+    const renderValue = useCallback((selectedId) => {
+        if (selectedId === 'MULTIPLE_PRESETS') {
+            return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Multiple presets" });
+        }
+        if (selectedId === 'NO_SELECTION' || !selectedId || selectedId === '') {
+            return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Select" });
+        }
+        const selectedPresetObject = props.presets.find(p => p.id === selectedId);
+        if (!selectedPresetObject) {
+            return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Select" });
+        }
+        return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: selectedPresetObject.name });
+    }, [props.presets, typography.bodyMedium, colors.surface]);
+    // The useEffect that forced re-renders has been removed.
+    return (_jsx(_Fragment, { children: _jsx(Stack, { children: _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%', pr: "16px" }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pl: "16px" }, children: _jsx(FormControl, { fullWidth: true, children: _jsxs(Select, { fullWidth: true, value: props.selectedPreset, onChange: handleSelectChange, IconComponent: CustomSelectIcon, renderValue: renderValue, MenuProps: {
                                     slotProps: { paper: { sx: { backgroundColor: colors.onBackground, color: colors.surface, border: `1px solid ${colors.onSurfaceVariant1}`, mt: '20px', width: '178px', boxShadow: 'none' } } }
-                                }, sx: { border: `1px solid ${colors.outlineVariant}`, height: '44px', width: '215px', boxShadow: 'none' }, children: [_jsx(MenuItem, { value: "", sx: { borderRadius: '4px', py: '4px', my: '0px', px: '0px', mx: '0px' }, children: _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: { width: '100%', py: '0px', px: '0px', mx: '0px', my: '4px' }, children: _jsx(Typography, { sx: {
-                                                    width: '100%',
-                                                    textAlign: 'center',
-                                                    color: colors.surface,
-                                                    opacity: 0.7,
-                                                    ...typography.bodyMedium
-                                                }, children: "No Preset" }) }) }), props.presets.map((preset) => (_jsx(MenuItem, { value: preset.id, sx: { borderRadius: '4px', py: '4px', my: '0px', px: '0px', mx: '0px' }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-around", alignItems: "center", sx: { width: '100%', py: '0px', px: '0px', mx: '0px', my: '4px' }, children: [_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", mr: '-16px', px: '0px', visibility: props.selectedPreset === preset.id ? 'visible' : 'hidden' } }), _jsx(Typography, { sx: { width: '24px', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, pr: "82px", pl: "0px", ml: "0px", justifyContent: 'flex-start', ...typography.bodyMedium }, children: preset.name }), _jsx(IconButton, { "aria-label": `Options for ${preset.name}`, onClick: (event) => props.onPresetMenuClick(event, preset.id), sx: { padding: "0px", margin: "0px", mr: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options", sx: { width: '20px', height: '20px' } }) })] }) }, preset.id))), _jsx(Box, { sx: { px: '16px', my: '8px' }, children: _jsx(Button, { fullWidth: true, variant: "outlined", sx: { ...typography.labelMedium, height: '40px', color: colors.onBackground, backgroundColor: colors.surface, borderRadius: '100px', borderColor: colors.surface, textTransform: 'none', '&:hover': { backgroundColor: '#e0e0e0', borderColor: colors.surface } }, onClick: props.onOpenPresetModal, children: "Create Preset" }) })] }) }) })] }) }) }));
+                                }, sx: { border: `1px solid ${colors.outlineVariant}`, height: '44px', width: '202px', boxShadow: 'none' }, children: [props.presets.map((preset) => (_jsx(MenuItem, { value: preset.id, sx: { borderRadius: '4px', py: '4px', my: '0px', px: '0px', mx: '0px' }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-around", alignItems: "center", sx: { width: '100%', py: '0px', px: '0px', mx: '0px', my: '4px' }, children: [_jsx(CardMedia, { component: "img", image: "/v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", mr: '-16px', px: '0px', visibility: props.selectedPreset === preset.id ? 'visible' : 'hidden' } }), _jsx(Typography, { sx: { width: '24px', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, pr: "82px", pl: "0px", ml: "0px", justifyContent: 'flex-start', ...typography.bodyMedium }, children: preset.name }), _jsx(IconButton, { "aria-label": `Options for ${preset.name}`, onClick: (event) => props.onPresetMenuClick(event, preset.id), sx: { padding: "0px", margin: "0px", mr: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options", sx: { width: '20px', height: '20px' } }) })] }) }, preset.id))), _jsx(Box, { sx: { px: '16px', my: '8px' }, children: _jsx(Button, { fullWidth: true, variant: "outlined", sx: { ...typography.labelMedium, height: '40px', color: colors.onBackground, backgroundColor: colors.surface, borderRadius: '100px', borderColor: colors.surface, textTransform: 'none', '&:hover': { backgroundColor: '#e0e0e0', borderColor: colors.surface } }, onClick: props.onOpenPresetModal, disabled: props.isPresetCreatedSet, children: "Create Preset" }) })] }) }) })] }) }) }));
 }

package/dist/components/editor/HBulkPresetMobile.d.ts

@@ -8,8 +8,8 @@ interface Props {
     presets: Preset[];
     selectedPresetBulk: string;
     onOpenPresetModalBulk: () => void;
-    onSelectPresetBulk: (event: SelectChangeEvent<string>) => void;
-    onPresetMenuClickBulk: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
+    onSelectPreset: (event: SelectChangeEvent<string>) => void;
+    onPresetMenuClick: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
 }
 export default function HBulkPresetMobile(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};