@mezzanine-ui/react 1.0.0-beta.6 → 1.0.0-beta.7

package/ContentHeader/utils.js

@@ -1,17 +1,22 @@
 import { jsx } from 'react/jsx-runtime';
-import { isValidElement, cloneElement, Children } from 'react';
+import { createElement, isValidElement, cloneElement, Children } from 'react';
 import Button from '../Button/Button.js';
 import { flattenChildren } from '../utils/flatten-children.js';
 import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import ContentHeaderResponsive from './ContentHeaderResponsive.js';
+import { contentHeaderClasses } from '@mezzanine-ui/core/content-header';
 import Input from '../Input/Input.js';
 import Select from '../Select/Select.js';
+import Toggle from '../Toggle/Toggle.js';
+import Checkbox from '../Checkbox/Checkbox.js';
 import Dropdown from '../Dropdown/Dropdown.js';
+import cx from 'clsx';
 
 /**
  * Renders a button from either ButtonProps or a React element.
  * Applies the specified size and variant to the button.
  */
-const renderButton = (button, size) => {
+const renderButton = (button, size, key) => {
     if (!button) {
         return null;
     }
@@ -19,31 +24,41 @@ const renderButton = (button, size) => {
         return cloneElement(button, {
             size,
             type: 'button',
+            key: button.key || key,
         });
     }
-    return jsx(Button, { ...button, size: size, type: "button" });
+    return (createElement(Button, { ...button, size: size, type: "button", key: key || button.title }));
 };
 const withSize = (target, size) => {
     return cloneElement(target, { size });
 };
-const renderFilterProp = (prop, size) => {
-    if (!prop) {
+const renderFilterProp = (props, size) => {
+    if (!props) {
         return null;
     }
-    const { variant } = prop;
+    const { variant } = props;
+    if ('size' in props) {
+        console.warn('[Mezzanine][ContentHeader]: size in ContentHeader filter is forced to match ContentHeader size.');
+    }
     if (variant === 'search') {
-        return (jsx(Input, { ...prop, size: size, variant: "search" }));
+        return (jsx(Input, { ...props, size: size, variant: "search" }));
     }
     if (variant === 'select') {
-        return jsx(Select, { ...prop, size: size });
+        return jsx(Select, { ...props, size: size });
     }
     if (variant === 'segmentedControl') {
         console.warn('SegmentedControl component is not implemented yet.');
         return null;
     }
+    if (variant === 'toggle') {
+        return jsx(Toggle, { ...props, size: size });
+    }
+    if (variant === 'checkbox') {
+        return jsx(Checkbox, { ...props });
+    }
     return null;
 };
-const renderIconButtonWithProps = (child, size) => {
+const renderIconButtonWithProps = (child, size, key) => {
     const { icon } = child.props;
     return cloneElement(child, {
         icon,
@@ -51,13 +66,14 @@ const renderIconButtonWithProps = (child, size) => {
         size,
         variant: 'base-secondary',
         type: 'button',
+        key: child.key || key,
     });
 };
 const renderIconButtonsProp = (utilities, size) => {
     const result = [];
-    utilities === null || utilities === void 0 ? void 0 : utilities.forEach((props) => {
+    utilities === null || utilities === void 0 ? void 0 : utilities.forEach((props, index) => {
         if (props instanceof Object && 'icon' in props) {
-            result.push(jsx(Button, { ...props, type: "button", size: size, iconType: "icon-only", variant: "base-secondary" }));
+            result.push(createElement(Button, { ...props, type: "button", size: size, iconType: "icon-only", variant: "base-secondary", key: props.id || props['aria-label'] || `utility-${index}` }));
         }
         if (props instanceof Object && 'options' in props) {
             if (!isValidElement(props.children) ||
@@ -65,12 +81,12 @@ const renderIconButtonsProp = (utilities, size) => {
                 console.warn('[Mezzanine][ContentHeader]: Dropdown in utilities should have Button with icon as its children.');
                 return;
             }
-            result.push(jsx(Dropdown, { ...props, children: cloneElement(props.children, {
-                    type: 'button',
-                    size: size,
-                    iconType: 'icon-only',
-                    variant: 'base-secondary',
-                }) }));
+            result.push(createElement(Dropdown, { ...props, key: props.id || `utility-dropdown-${index}` }, cloneElement(props.children, {
+                type: 'button',
+                size: size,
+                iconType: 'icon-only',
+                variant: 'base-secondary',
+            })));
         }
     });
     return result;
@@ -111,7 +127,7 @@ const renderActionsProp = (actions, size) => {
         })
             .sort((a, b) => variantOrder[a.variant || 'base-primary'] -
             variantOrder[b.variant || 'base-primary'])
-            .map((v) => renderButton(v, size));
+            .map((v, index) => renderButton(v, size, `action-${index}`));
     }
     return null;
 };
@@ -123,7 +139,29 @@ const resolveContentHeaderChild = (children, size) => {
     let backButton = null;
     if (children) {
         const flatChildren = flattenChildren(children);
+        const responsiveChildren = [];
         Children.forEach(flatChildren, (child) => {
+            if (isValidElement(child) && child.type === ContentHeaderResponsive) {
+                const props = child.props;
+                const breakpointClass = contentHeaderClasses.breakpoint(props.breakpoint);
+                Children.forEach(flattenChildren(props.children), (rwdChild) => {
+                    if (isValidElement(rwdChild)) {
+                        const rwdProps = rwdChild.props;
+                        responsiveChildren.push(cloneElement(rwdChild, {
+                            ...rwdProps,
+                            className: cx(breakpointClass, rwdProps === null || rwdProps === void 0 ? void 0 : rwdProps.className),
+                        }));
+                    }
+                    else {
+                        responsiveChildren.push(jsx("span", { className: breakpointClass, children: rwdChild }));
+                    }
+                });
+            }
+            else {
+                responsiveChildren.push(child);
+            }
+        });
+        Children.forEach(responsiveChildren, (child) => {
             if (!isValidElement(child)) {
                 return;
             }
@@ -140,7 +178,8 @@ const resolveContentHeaderChild = (children, size) => {
             }
             // is filter
             if ((type === Input && props.variant === 'search') ||
-                type === Select) {
+                type === Select ||
+                type === Toggle) {
                 if (filter) {
                     console.warn('[Mezzanine][ContentHeader]: ContentHeader only accepts one filter component.');
                 }
@@ -149,8 +188,15 @@ const resolveContentHeaderChild = (children, size) => {
             else if (type.toString() === 'SegmentedControl') {
                 console.warn('SegmentedControl component is not implemented yet.');
             }
+            else if (type === Checkbox) {
+                if (filter) {
+                    console.warn('[Mezzanine][ContentHeader]: ContentHeader only accepts one filter component.');
+                }
+                filter = child;
+            }
+            else if (
             // is utilities (icon button)
-            else if ((type === Button && props.iconType === 'icon-only') ||
+            (type === Button && props.iconType === 'icon-only') ||
                 (type === Button &&
                     props.icon &&
                     !props.children)) {

package/Cropper/Cropper.d.ts

@@ -0,0 +1,66 @@
+import type { ReactElement } from 'react';
+import type { ModalProps } from '../Modal';
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { CropArea, CropperComponent, CropperPropsBase } from './typings';
+export type CropperModalProps = Omit<ModalProps, 'children' | 'modalType' | 'extendedSplitLeftSideContent' | 'extendedSplitRightSideContent' | 'onCancel' | 'onConfirm' | 'showCancelButton' | 'showModalFooter' | 'showModalHeader' | 'confirmText' | 'title'> & {
+    /**
+     * The text for the cancel button.
+     */
+    cancelText?: ModalProps['cancelText'];
+    /**
+     * The text for the confirm button.
+     * @default '確認'
+     */
+    confirmText?: string;
+    /**
+     * Additional className for the cropper content wrapper.
+     */
+    cropperContentClassName?: string;
+    /**
+     * Props for the CropperElement component.
+     */
+    cropperProps?: CropperPropsBase;
+    /**
+     * Callback fired when the cancel button is clicked.
+     */
+    onCancel?: () => void;
+    /**
+     * Callback fired when the confirm button is clicked.
+     * Receives the cropping context with canvas, cropArea, and imageSrc.
+     */
+    onConfirm?: (context: CropperModalConfirmContext) => void | Promise<void>;
+    /**
+     * Whether to show the modal footer with confirm and cancel buttons.
+     * @default true
+     */
+    showModalFooter?: boolean;
+    /**
+     * Whether to show the modal header.
+     * @default true
+     */
+    showModalHeader?: boolean;
+    /**
+     * The title of the modal header.
+     * @default '圖片裁切'
+     */
+    title?: string;
+};
+export interface CropperModalConfirmContext {
+    canvas: HTMLCanvasElement | null;
+    cropArea: CropArea | null;
+    imageSrc?: string | File | Blob;
+}
+export type CropperModalResult = CropperModalConfirmContext;
+export type CropperModalOpenOptions = Omit<CropperModalProps, 'open'>;
+export type CropperProps<C extends CropperComponent = 'div'> = ComponentOverridableForwardRefComponentPropsFactory<CropperComponent, C, CropperPropsBase>;
+/**
+ * The react component for `mezzanine` cropper.
+ */
+declare const Cropper: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"div">, keyof CropperPropsBase> & CropperPropsBase, "component"> & {
+    component?: CropperComponent | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type CropperModalType = ((props: CropperModalProps) => ReactElement | null) & {
+    open: (options: CropperModalOpenOptions) => Promise<CropperModalResult | null>;
+};
+export declare const CropperModal: CropperModalType;
+export default Cropper;

package/Cropper/Cropper.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { cropperClasses } from '@mezzanine-ui/core/cropper';
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import CropperElement from './CropperElement.js';
+import Modal from '../Modal/Modal.js';
+import { createNotifier } from '../Notifier/createNotifier.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` cropper.
+ */
+const Cropper = forwardRef(function Cropper(props, ref) {
+    const { children, className, component: Component = 'div', size = 'main', ...rest } = props;
+    return (jsx(Component, { ...rest, ref: ref, className: cx(cropperClasses.host, cropperClasses.size(size), className), children: children }));
+});
+/**
+ * The react component for `mezzanine` cropper with modal wrapper.
+ */
+const CropperModalComponent = forwardRef(function CropperModal(props, ref) {
+    const { cropperProps, onConfirm, onClose, showModalFooter = true, showModalHeader = true, title = '圖片裁切', size = 'wide', confirmText = '確認', cancelText = '取消', onCancel, open = false, cropperContentClassName, ...restModalProps } = props;
+    const { aspectRatio, imageSrc, initialCropArea, minHeight, minWidth, onCropChange, onCropDragEnd, onImageDragEnd, onScaleChange, onImageLoad, onImageError, size: cropperSize = 'main', } = cropperProps !== null && cropperProps !== void 0 ? cropperProps : {};
+    const [currentCropArea, setCurrentCropArea] = useState(initialCropArea !== null && initialCropArea !== void 0 ? initialCropArea : null);
+    const canvasRef = useRef(null);
+    const handleCropChange = useCallback((area) => {
+        setCurrentCropArea(area);
+        onCropChange === null || onCropChange === void 0 ? void 0 : onCropChange(area);
+    }, [onCropChange]);
+    const handleCancel = useCallback(() => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onCancel, onClose]);
+    const handleConfirm = useCallback(async () => {
+        try {
+            await (onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
+                canvas: canvasRef.current,
+                cropArea: currentCropArea,
+                imageSrc,
+            }));
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+        catch (error) {
+            console.error('CropperModal onConfirm failed:', error);
+        }
+    }, [currentCropArea, imageSrc, onClose, onConfirm]);
+    const modalFooterProps = showModalFooter
+        ? {
+            showModalFooter: true,
+            confirmText,
+            showCancelButton: true,
+            cancelText,
+            onCancel: handleCancel,
+            onConfirm: handleConfirm,
+        }
+        : {
+            showModalFooter: false,
+        };
+    const modalHeaderProps = showModalHeader
+        ? {
+            showModalHeader: true,
+            title,
+        }
+        : {
+            showModalHeader: false,
+        };
+    return (jsx(Modal, { modalType: "standard", onClose: onClose, open: open, ref: ref, size: size, ...restModalProps, ...modalHeaderProps, ...modalFooterProps, children: jsx(CropperElement, { className: cx(cropperClasses.content, cropperContentClassName), aspectRatio: aspectRatio, imageSrc: imageSrc, initialCropArea: initialCropArea, minHeight: minHeight, minWidth: minWidth, onCropChange: handleCropChange, onCropDragEnd: onCropDragEnd, onImageDragEnd: onImageDragEnd, onScaleChange: onScaleChange, onImageLoad: onImageLoad, onImageError: onImageError, ref: canvasRef, size: cropperSize }) }));
+});
+const CropperModal = CropperModalComponent;
+const CropperModalNotifier = (props) => {
+    const { instanceKey, notifierKey, onCancel, onClose, onConfirm, resolve, maxCount: _maxCount, duration: _duration, ...rest } = props;
+    const resolvedRef = useRef(false);
+    const resolveOnce = useCallback((result) => {
+        if (resolvedRef.current)
+            return;
+        resolvedRef.current = true;
+        resolve(result);
+        cropperModalNotifier.remove(instanceKey !== null && instanceKey !== void 0 ? instanceKey : notifierKey);
+    }, [instanceKey, notifierKey, resolve]);
+    const handleClose = useCallback(() => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        resolveOnce(null);
+    }, [onClose, resolveOnce]);
+    const handleConfirm = useCallback(async (context) => {
+        try {
+            await (onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(context));
+            resolveOnce(context);
+        }
+        catch (error) {
+            console.error('CropperModalNotifier onConfirm failed:', error);
+            resolveOnce(null);
+        }
+    }, [onConfirm, resolveOnce]);
+    const mergedModalProps = {
+        ...rest,
+        onCancel,
+        onClose: handleClose,
+        onConfirm: handleConfirm,
+        open: true,
+    };
+    return (jsx(CropperModal, { ...mergedModalProps }));
+};
+const cropperModalNotifier = createNotifier({
+    render: (notifierProps) => {
+        const { key, ...restProps } = notifierProps;
+        return (jsx(CropperModalNotifier, { ...restProps, notifierKey: key }));
+    },
+});
+CropperModal.open = (options) => new Promise((resolve) => {
+    cropperModalNotifier.add({
+        ...options,
+        resolve,
+    });
+});
+
+export { CropperModal, Cropper as default };

package/Cropper/CropperElement.d.ts

@@ -0,0 +1,10 @@
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { CropperElementComponent, CropperPropsBase } from './typings';
+export type CropperElementProps<C extends CropperElementComponent = 'canvas'> = ComponentOverridableForwardRefComponentPropsFactory<CropperElementComponent, C, CropperPropsBase>;
+/**
+ * The react component for `mezzanine` cropper element (canvas).
+ */
+declare const CropperElement: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"canvas">, keyof CropperPropsBase> & CropperPropsBase, "component"> & {
+    component?: "canvas" | undefined;
+} & import("react").RefAttributes<HTMLCanvasElement>>;
+export default CropperElement;