@mezzanine-ui/react 0.15.3 → 1.0.0-alpha.0

package/Upload/UploadPictureCard.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useState, useEffect } from 'react';
+import { uploadPictureCardClasses } from '@mezzanine-ui/core/upload';
+import { ImageIcon, FileIcon, SpinnerIcon, ZoomInIcon, DownloadIcon, TrashIcon, ResetIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import ClearActions from '../ClearActions/ClearActions.js';
+import Typography from '../Typography/Typography.js';
+import { isImageFile } from './upload-utils.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` upload picture card.
+ */
+const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
+    var _a;
+    const { ariaLabels, className, file, url, status = 'loading', imageFit = 'cover', size = 'main', disabled = false, errorMessage, errorIcon, onDelete, onZoomIn, onDownload, onReload, ...rest } = props;
+    const defaultAriaLabels = {
+        cancelUpload: 'Cancel upload',
+        uploading: 'Uploading',
+        zoomIn: 'Zoom in image',
+        download: 'Download file',
+        delete: 'Delete file',
+        reload: 'Retry upload',
+    };
+    const labels = { ...defaultAriaLabels, ...ariaLabels };
+    const isImage = useMemo(() => {
+        return isImageFile(file, url);
+    }, [file, url]);
+    const fileName = useMemo(() => {
+        var _a;
+        if (((_a = props.file) === null || _a === void 0 ? void 0 : _a.name) && !props.url)
+            return props.file.name;
+        if (props.url) {
+            try {
+                const url = new URL(props.url);
+                const pathname = url.pathname;
+                const filename = pathname.split('/').pop() || '';
+                return filename;
+            }
+            catch (_b) {
+                const urlWithoutQuery = props.url.split('?')[0].split('#')[0];
+                return urlWithoutQuery.split('/').pop() || '';
+            }
+        }
+        return '';
+    }, [(_a = props.file) === null || _a === void 0 ? void 0 : _a.name, props.url]);
+    const [imageUrl, setImageUrl] = useState('');
+    const errorIconContent = useMemo(() => {
+        if (errorIcon) {
+            return errorIcon;
+        }
+        return isImage ? ImageIcon : FileIcon;
+    }, [isImage, errorIcon]);
+    const errorMessageContent = useMemo(() => {
+        if (errorMessage) {
+            return errorMessage;
+        }
+        return fileName ? fileName : 'Upload error';
+    }, [fileName, errorMessage]);
+    // Warn if both file and url are missing
+    useEffect(() => {
+        if (!file && !url) {
+            console.warn('UploadPictureCard: Both `file` and `url` props are missing. At least one should be provided to display the upload picture card.');
+        }
+    }, [file, url]);
+    useEffect(() => {
+        if (url && isImage) {
+            setImageUrl(url);
+            return undefined;
+        }
+        if (file && isImage) {
+            try {
+                const blobUrl = URL.createObjectURL(file);
+                setImageUrl(blobUrl);
+                return () => {
+                    URL.revokeObjectURL(blobUrl);
+                };
+            }
+            catch (error) {
+                console.error('Failed to create object URL for image:', error);
+                setImageUrl('');
+            }
+        }
+        else {
+            setImageUrl('');
+        }
+        return undefined;
+    }, [file, url, isImage]);
+    if (!isImage && size === 'minor') {
+        console.warn('UploadPictureCard: minor size is not supported for non-image files');
+        return null;
+    }
+    return (jsx("div", { className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, className), "aria-disabled": disabled, ref: ref, role: "group", tabIndex: disabled ? -1 : 0, ...rest, children: jsxs("div", { className: uploadPictureCardClasses.container, children: [isImage && imageUrl && status !== 'error' && (jsx("img", { alt: fileName, src: imageUrl, style: {
+                        objectFit: imageFit,
+                        objectPosition: 'center',
+                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: ZoomInIcon }, onClick: onZoomIn, "aria-label": labels.zoomIn }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: DownloadIcon }, onClick: onDownload, "aria-label": labels.download }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: TrashIcon }, onClick: onDelete, "aria-label": labels.delete })] }) }) })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: ResetIcon }, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: TrashIcon }, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
+});
+
+export { UploadPictureCard as default };

package/Upload/Uploader.d.ts

@@ -0,0 +1,161 @@
+import { ChangeEventHandler, ReactNode, Ref } from 'react';
+import { type UploaderHintType, type UploadPictureControl, type UploadType } from '@mezzanine-ui/core/upload';
+import { type IconDefinition } from '@mezzanine-ui/icons';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+type UploaderInputElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'accept' | 'disabled' | 'multiple' | 'onChange' | 'type' | `aria-${'disabled'}`> & {
+    /**
+     * The id attribute can be provided via inputProps, but it's recommended to use the `id` prop directly.
+     * If both are provided, the `id` prop takes precedence.
+     */
+    id?: string;
+    /**
+     * The name attribute can be provided via inputProps, but it's recommended to use the `name` prop directly.
+     * If both are provided, the `name` prop takes precedence.
+     */
+    name?: string;
+};
+export interface UploaderHint {
+    /**
+     * The label text of the hint.
+     */
+    label: string;
+    /**
+     * The icon element of the hint.
+     */
+    type?: UploaderHintType;
+}
+export interface UploaderLabel {
+    /**
+     * Label text for upload state.
+     */
+    uploadLabel?: string;
+    /**
+     * Label text for uploading state.
+     */
+    uploadingLabel?: string;
+    /**
+     * Label text for success state.
+     */
+    success?: string;
+    /**
+     * Label text for error state.
+     */
+    error?: string;
+    /**
+     * Label text for "Click to upload" when isFillWidth is true.
+     * @default 'Click to upload'
+     */
+    clickToUpload?: string;
+}
+export interface UploaderIcon {
+    /**
+     * Icon for upload action.
+     */
+    upload?: IconDefinition;
+    /**
+     * Icon for error state.
+     */
+    error?: ReactNode;
+    /**
+     * Icon for success state.
+     */
+    success?: ReactNode;
+    /**
+     * Icon for zoom action.
+     */
+    zoom?: ReactNode;
+    /**
+     * Icon for document.
+     */
+    document?: ReactNode;
+    /**
+     * Icon for download action.
+     */
+    download?: ReactNode;
+    /**
+     * Icon for reload action.
+     */
+    reload?: ReactNode;
+    /**
+     * Icon for delete action.
+     */
+    delete?: ReactNode;
+}
+export interface UploaderProps extends Omit<NativeElementPropsWithoutKeyAndRef<'label'>, 'onChange'> {
+    /**
+     * The accept attributes of native input element.
+     * @example 'image/*', '.pdf,.doc,.docx'
+     */
+    accept?: string;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The id of input element.
+     */
+    id?: string;
+    /**
+     * Whether to fill the width of the container.
+     * @default false
+     */
+    isFillWidth?: boolean;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     * If you need direct control to the input element, use this prop to provide to it.
+     */
+    inputProps?: UploaderInputElementProps;
+    /**
+     * The react ref passed to input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * The name attribute of the input element.
+     */
+    name?: string;
+    /**
+     * Whether can select multiple files to upload.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * The type for upload component.
+     * @default 'base'
+     * @example 'base' | 'button'
+     */
+    type?: UploadType;
+    /**
+     * Array of hints to display with the upload component.
+     */
+    hints?: UploaderHint[];
+    /**
+     * Label configuration for different states.
+     */
+    label?: UploaderLabel;
+    /**
+     * Icon configuration for different actions and states.
+     */
+    icon?: UploaderIcon;
+    /**
+     * Provide `controllerRef` if you need detail data of file.
+     */
+    controllerRef?: Ref<UploadPictureControl | null>;
+    /**
+     * Invoked by input change event.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Fired after user selected files.
+     */
+    onUpload?: (files: File[]) => void;
+    /**
+     * Fired after user deletes file.
+     */
+    onDelete?: () => void;
+}
+/**
+ * The react component for `mezzanine` uploader.
+ */
+declare const Uploader: import("react").ForwardRefExoticComponent<UploaderProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default Uploader;

package/Upload/Uploader.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useState, useMemo } from 'react';
+import { uploaderClasses } from '@mezzanine-ui/core/upload';
+import { UploadIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import Typography from '../Typography/Typography.js';
+import { composeRefs } from '../utils/composeRefs.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` uploader.
+ */
+const Uploader = forwardRef(function Uploader(props, ref) {
+    var _a, _b, _c;
+    const { accept, className, disabled = false, id, inputProps, inputRef: inputRefProp, isFillWidth = false, multiple = false, name, type, hints, label: labelConfig, icon: iconConfig, controllerRef: _controllerRef, onChange: onChangeProp, onUpload, onDelete: _onDelete, ...rest } = props;
+    const { name: nameFromInputProps, id: idFromInputProps, ...restInputProps } = inputProps || {};
+    // Generate unique id if not provided
+    const generatedId = useId();
+    const finalInputId = (_a = id !== null && id !== void 0 ? id : idFromInputProps) !== null && _a !== void 0 ? _a : generatedId;
+    const inputElementRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const composedInputRef = useMemo(() => composeRefs([inputRefProp, inputElementRef]), [inputRefProp]);
+    const resolvedName = (_b = name !== null && name !== void 0 ? name : nameFromInputProps) !== null && _b !== void 0 ? _b : finalInputId;
+    const handleChange = (event) => {
+        if (onChangeProp) {
+            onChangeProp(event);
+        }
+        if (onUpload) {
+            const { files: fileList } = event.target;
+            if (fileList) {
+                const files = [];
+                for (let i = 0; i < fileList.length; i += 1) {
+                    files.push(fileList[i]);
+                }
+                onUpload(files);
+            }
+        }
+        // Reset input value to allow selecting the same file again
+        event.currentTarget.value = '';
+    };
+    const handleDragOver = (event) => {
+        if (disabled || type === 'button') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const handleDragEnter = (event) => {
+        if (disabled || type === 'button') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (event) => {
+        if (disabled || type === 'button') {
+            return;
+        }
+        // Only clear dragging state if leaving the label itself (not a child)
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = event.clientX;
+        const y = event.clientY;
+        if (x < rect.left ||
+            x > rect.right ||
+            y < rect.top ||
+            y > rect.bottom) {
+            setIsDragging(false);
+        }
+    };
+    const handleDrop = (event) => {
+        if (disabled || type === 'button') {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(false);
+        const { dataTransfer } = event;
+        if ((dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files) && dataTransfer.files.length > 0) {
+            const files = [];
+            for (let i = 0; i < dataTransfer.files.length; i += 1) {
+                files.push(dataTransfer.files[i]);
+            }
+            if (onUpload) {
+                onUpload(files);
+            }
+            // Note: We cannot directly set input.files from drag & drop
+            // The onChange event will not be triggered for drag & drop
+            // If onChange is needed, it should be handled via onUpload callback
+        }
+    };
+    const uploadIcon = useMemo(() => {
+        var _a;
+        const icon = (_a = iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.upload) !== null && _a !== void 0 ? _a : UploadIcon;
+        return jsx(Icon, { className: uploaderClasses.uploadIcon, icon: icon });
+    }, [iconConfig]);
+    const uploadLabel = (labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.uploadLabel)
+        ? labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.uploadLabel
+        : isFillWidth
+            ? 'Drag the file here or'
+            : 'Upload';
+    const clickToUploadLabel = (_c = labelConfig === null || labelConfig === void 0 ? void 0 : labelConfig.clickToUpload) !== null && _c !== void 0 ? _c : 'Click to upload';
+    const handleClickToUpload = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!disabled && inputElementRef.current) {
+            inputElementRef.current.click();
+        }
+    };
+    return (jsx("label", { className: cx(uploaderClasses.host, type && uploaderClasses.type(type), type !== 'button' && isFillWidth && uploaderClasses.fillWidth, isDragging && uploaderClasses.dragging, type !== 'button' && disabled && uploaderClasses.disabled, className), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, ref: ref, ...rest, children: jsxs(Fragment, { children: [type === 'base'
+                    && isFillWidth
+                    && jsxs("div", { className: uploaderClasses.uploadContent, children: [uploadIcon, jsxs(Typography, { className: uploaderClasses.uploadLabel, children: [uploadLabel && jsxs(Fragment, { children: [uploadLabel, ' '] }), jsx("span", { className: uploaderClasses.clickToUpload, children: clickToUploadLabel })] }), hints === null || hints === void 0 ? void 0 : hints.map((hint, index) => (jsx(Typography, { className: uploaderClasses.fillWidthHints, children: hint.label }, index)))] }), type === 'base'
+                    && !isFillWidth
+                    && jsxs("div", { className: uploaderClasses.uploadContent, children: [uploadIcon, jsx(Typography, { className: uploaderClasses.uploadLabel, children: uploadLabel })] }), type === 'button'
+                    && (jsxs(Button, { disabled: disabled, onClick: handleClickToUpload, children: [uploadIcon, jsx(Typography, { children: uploadLabel })] })), jsx("input", { ...restInputProps, accept: accept, "aria-disabled": disabled, className: uploaderClasses.input, disabled: disabled, id: finalInputId, multiple: multiple, name: resolvedName, onChange: handleChange, ref: composedInputRef, type: "file" })] }) }));
+});
+
+export { Uploader as default };

package/Upload/index.d.ts

@@ -1,6 +1,8 @@
-export type { UploadResultSize, UploadResultStatus, } from '@mezzanine-ui/core/upload';
-export { UploadButtonProps, default as UploadButton } from './UploadButton';
-export { UploadPictureControl, UploadPictureProps, default as UploadPicture, } from './UploadPicture';
-export { UploadPictureBlockProps, default as UploadPictureBlock, } from './UploadPictureBlock';
-export { UploadPictureWallControl, UploadPictureWallProps, default as UploadPictureWall, } from './UploadPictureWall';
-export { UploadResultProps, default as UploadResult } from './UploadResult';
+export { default as Upload } from './Upload';
+export type { UploadFile, UploadProps } from './Upload';
+export { default as Uploader } from './Uploader';
+export type { UploaderProps } from './Uploader';
+export { default as UploadItem } from './UploadItem';
+export type { UploadItemProps } from './UploadItem';
+export { default as UploadPictureCard } from './UploadPictureCard';
+export type { UploadPictureCardProps } from './UploadPictureCard';

package/Upload/index.js

@@ -1,5 +1,4 @@
-export { default as UploadButton } from './UploadButton.js';
-export { default as UploadPicture } from './UploadPicture.js';
-export { default as UploadPictureBlock } from './UploadPictureBlock.js';
-export { default as UploadPictureWall } from './UploadPictureWall.js';
-export { default as UploadResult } from './UploadResult.js';
+export { default as Upload } from './Upload.js';
+export { default as Uploader } from './Uploader.js';
+export { default as UploadItem } from './UploadItem.js';
+export { default as UploadPictureCard } from './UploadPictureCard.js';

package/Upload/upload-utils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Resolves the file type from a File object or URL.
+ * Prefers file.type if available, otherwise infers from URL extension.
+ *
+ * @param file - The File object (optional)
+ * @param url - The URL string (optional)
+ * @returns The resolved MIME type string, or empty string if unable to determine
+ *
+ * @example
+ * ```ts
+ * // From file object
+ * resolveFileType(file, undefined) // 'image/jpeg'
+ *
+ * // From URL
+ * resolveFileType(undefined, 'https://example.com/image.jpg') // 'image/jpeg'
+ *
+ * // Neither provided
+ * resolveFileType(undefined, undefined) // ''
+ * ```
+ */
+export declare function resolveFileType(file?: File, url?: string): string;
+/**
+ * Checks if a file is an image based on File object or URL.
+ *
+ * @param file - The File object (optional)
+ * @param url - The URL string (optional)
+ * @returns true if the file is an image, false otherwise
+ *
+ * @example
+ * ```ts
+ * // From file object
+ * isImageFile(file, undefined) // true if file.type starts with 'image/'
+ *
+ * // From URL
+ * isImageFile(undefined, 'https://example.com/image.jpg') // true
+ *
+ * // Neither provided
+ * isImageFile(undefined, undefined) // false
+ * ```
+ */
+export declare function isImageFile(file?: File, url?: string): boolean;

package/Upload/upload-utils.js

@@ -0,0 +1,65 @@
+/**
+ * Supported image file extensions.
+ */
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'];
+/**
+ * Resolves the file type from a File object or URL.
+ * Prefers file.type if available, otherwise infers from URL extension.
+ *
+ * @param file - The File object (optional)
+ * @param url - The URL string (optional)
+ * @returns The resolved MIME type string, or empty string if unable to determine
+ *
+ * @example
+ * ```ts
+ * // From file object
+ * resolveFileType(file, undefined) // 'image/jpeg'
+ *
+ * // From URL
+ * resolveFileType(undefined, 'https://example.com/image.jpg') // 'image/jpeg'
+ *
+ * // Neither provided
+ * resolveFileType(undefined, undefined) // ''
+ * ```
+ */
+function resolveFileType(file, url) {
+    var _a;
+    // Prefer file.type if available
+    if (file === null || file === void 0 ? void 0 : file.type) {
+        return file.type;
+    }
+    // Infer from URL extension if URL is provided
+    if (url) {
+        const extension = (_a = url.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (extension && IMAGE_EXTENSIONS.includes(extension)) {
+            // Normalize jpg to jpeg
+            return `image/${extension === 'jpg' ? 'jpeg' : extension}`;
+        }
+    }
+    return '';
+}
+/**
+ * Checks if a file is an image based on File object or URL.
+ *
+ * @param file - The File object (optional)
+ * @param url - The URL string (optional)
+ * @returns true if the file is an image, false otherwise
+ *
+ * @example
+ * ```ts
+ * // From file object
+ * isImageFile(file, undefined) // true if file.type starts with 'image/'
+ *
+ * // From URL
+ * isImageFile(undefined, 'https://example.com/image.jpg') // true
+ *
+ * // Neither provided
+ * isImageFile(undefined, undefined) // false
+ * ```
+ */
+function isImageFile(file, url) {
+    const fileType = resolveFileType(file, url);
+    return fileType.startsWith('image/');
+}
+
+export { isImageFile, resolveFileType };

package/_internal/InputCheck/InputCheck.js

@@ -14,6 +14,5 @@ const InputCheck = forwardRef(function InputCheck(props, ref) {
             [inputCheckClasses.withLabel]: !!children,
         }, className), htmlFor: htmlFor, children: [jsx("span", { className: inputCheckClasses.control, children: control }), children && jsx("span", { className: inputCheckClasses.label, children: children })] }));
 });
-var InputCheck$1 = InputCheck;
 
-export { InputCheck$1 as default };
+export { InputCheck as default };

package/_internal/InputCheck/InputCheckGroup.js

@@ -10,6 +10,5 @@ const InputCheckGroup = forwardRef(function InputCheckGroup(props, ref) {
     const { children, className, orientation = 'horizontal', ...rest } = props;
     return (jsx("div", { ...rest, ref: ref, "aria-orientation": orientation, className: cx(inputCheckGroupClasses.host, inputCheckGroupClasses.orientation(orientation), className), children: children }));
 });
-var InputCheckGroup$1 = InputCheckGroup;
 
-export { InputCheckGroup$1 as default };
+export { InputCheckGroup as default };

package/_internal/InputCheck/index.d.ts

@@ -1,3 +1,5 @@
 export type { InputCheckSize, InputCheckGroupOrientation, } from '@mezzanine-ui/core/_internal/input-check';
-export { InputCheckProps, default } from './InputCheck';
-export { InputCheckGroupProps, default as InputCheckGroup, } from './InputCheckGroup';
+export { default } from './InputCheck';
+export type { InputCheckProps } from './InputCheck';
+export { default as InputCheckGroup } from './InputCheckGroup';
+export type { InputCheckGroupProps } from './InputCheckGroup';

package/_internal/InputTriggerPopper/InputTriggerPopper.js

@@ -1,47 +1,36 @@
 import { jsx } from 'react/jsx-runtime';
 import { inputTriggerPopperClasses } from '@mezzanine-ui/core/_internal/input-trigger-popper';
+import { offset, size } from '@floating-ui/react-dom';
 import { forwardRef } from 'react';
 import Fade from '../../Transition/Fade.js';
 import Popper from '../../Popper/Popper.js';
 import cx from 'clsx';
 
+// Middleware to make the popper have the same min-width as the reference element
+const sameWidthMiddleware = size({
+    apply({ rects, elements }) {
+        Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+        });
+    },
+});
 /**
  * The react component for `mezzanine` input popper.
  */
 const InputTriggerPopper = forwardRef(function InputTriggerPopper(props, ref) {
     const { anchor, children, className, fadeProps, open, options, sameWidth, ...restPopperProps } = props;
-    const { modifiers = [], ...restPopperOptions } = options || {};
-    const sameWidthModifier = {
-        name: 'sameWidth',
-        enabled: true,
-        phase: 'beforeWrite',
-        requires: ['computeStyles'],
-        fn: ({ state }) => {
-            const reassignState = state;
-            reassignState.styles.popper.minWidth = `${state.rects.reference.width}px`;
-        },
-        effect: ({ state }) => {
-            const reassignState = state;
-            reassignState.elements.popper.style.minWidth = `${state.elements.reference.getBoundingClientRect().width}px`;
-        },
-    };
-    return (jsx(Fade, { ...fadeProps, in: open, ref: ref, children: jsx(Popper, { ...restPopperProps, open: true, anchor: anchor, className: cx(inputTriggerPopperClasses.host, className), 
+    const { middleware = [], ...restPopperOptions } = options || {};
+    return (jsx(Fade, { ...fadeProps, in: open, ref: ref, children: jsx(Popper, { ...restPopperProps, open: true, anchor: anchor, className: cx(inputTriggerPopperClasses.host, className), disablePortal: true, 
             /** Prevent event bubble (Because popper may use portal, then click away function would be buggy) */
             onClick: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), onTouchMove: (e) => e.stopPropagation(), onTouchEnd: (e) => e.stopPropagation(), options: {
                 placement: 'bottom-start',
                 ...restPopperOptions,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [0, 4],
-                        },
-                    },
-                    ...(sameWidth ? [sameWidthModifier] : []),
-                    ...modifiers,
+                middleware: [
+                    offset({ mainAxis: 4 }),
+                    ...(sameWidth ? [sameWidthMiddleware] : []),
+                    ...middleware,
                 ],
             }, children: children }) }));
 });
-var InputTriggerPopper$1 = InputTriggerPopper;
 
-export { InputTriggerPopper$1 as default };
+export { InputTriggerPopper as default };

package/_internal/InputTriggerPopper/index.d.ts

@@ -1 +1,2 @@
-export { InputTriggerPopperProps, default } from './InputTriggerPopper';
+export { default } from './InputTriggerPopper';
+export type { InputTriggerPopperProps } from './InputTriggerPopper';

package/_internal/SlideFadeOverlay/SlideFadeOverlay.d.ts

@@ -1,7 +1,7 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-import { OverlayProps } from '../../Overlay';
+import { BackdropProps } from '../../Backdrop';
 import { SlideFadeProps, SlideFadeDirection } from '../../Transition';
-export interface SlideFadeOverlayProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Pick<OverlayProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'invisibleBackdrop' | 'hideBackdrop' | 'onBackdropClick' | 'onClose' | 'open'>, Pick<SlideFadeProps, 'children'> {
+export interface SlideFadeOverlayProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Pick<BackdropProps, 'container' | 'disableCloseOnBackdropClick' | 'disablePortal' | 'onBackdropClick' | 'onClose' | 'open'>, Pick<SlideFadeProps, 'children'> {
     /**
      * Control slide fade in direction
      * @default 'down'