@mezzanine-ui/react 0.7.2 → 0.7.3

package/Upload/UploadInput.js

@@ -5,6 +5,8 @@ import { uploadInputClasses } from '@mezzanine-ui/core/upload';
 const UploadInput = forwardRef((props, ref) => {
     const { accept, disabled = false, multiple = false, onUpload, } = props;
     return (jsx("input", { ref: ref, accept: accept, "aria-disabled": disabled, className: uploadInputClasses.host, disabled: disabled, multiple: multiple, onClick: (event) => {
+            // eslint-disable-next-line no-param-reassign
+            event.currentTarget.value = '';
             event.stopPropagation();
             event.nativeEvent.stopImmediatePropagation();
         }, onChange: (event) => {

package/Upload/UploadPicture.d.ts

@@ -0,0 +1,48 @@
+import { Ref } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type UploadPictureControl = {
+    getData: () => void;
+};
+export interface UploadPictureProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {
+    /**
+     * The accept attributes of native input element.
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * Provide `controllerRef` if you need detail data of file.
+     */
+    controllerRef?: Ref<UploadPictureControl | null>;
+    /**
+     * The default value of uploader.
+     */
+    defaultValue?: string;
+    /**
+     * Whether the input which is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+    * Fired after value changed.
+    */
+    onChange?: (url: string) => void;
+    /**
+    * Fired after user delete image.
+    */
+    onDelete?: () => void;
+    /**
+    * Fired after user upload image failed.
+    */
+    onError?: (file: File) => void;
+    /**
+    * Fired when user upload image, need to return Promise<string>.
+    * Arg1 is target file, arg2 `setProgress` can set the progress of uploading.
+    */
+    onUpload?: (file: File, setProgress: (progress: number) => void) => Promise<string>;
+    /**
+    * Fired after user upload image success.
+    */
+    onUploadSuccess?: (file: File, url: string) => void;
+}
+declare const UploadPicture: import("react").ForwardRefExoticComponent<UploadPictureProps & import("react").RefAttributes<HTMLDivElement>>;
+export default UploadPicture;

package/Upload/UploadPicture.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useImperativeHandle } from 'react';
+import { ImageUploader, uploadPictureClasses } from '@mezzanine-ui/core/upload';
+import UploadPictureBlock from './UploadPictureBlock.js';
+import cx from 'clsx';
+
+const UploadPicture = forwardRef(function UploadPicture(props, ref) {
+    const { accept = 'image/*', className, controllerRef, defaultValue, disabled = false, onChange, onDelete, onError, onUpload, onUploadSuccess, style, } = props;
+    const defaultImageUploader = new ImageUploader(undefined, defaultValue);
+    const uploadPictureImageLoader = useRef(defaultImageUploader);
+    const onImageUpload = useCallback((files) => {
+        if (files.length) {
+            const currentFile = files[0];
+            uploadPictureImageLoader.current.setNewFile(currentFile);
+            uploadPictureImageLoader.current.setPreview();
+            if (onUpload) {
+                const setProgress = (progress) => uploadPictureImageLoader.current.setPercentage(progress);
+                uploadPictureImageLoader.current.setLoadingStatus(true);
+                onUpload(currentFile, setProgress)
+                    .then((url) => {
+                    uploadPictureImageLoader.current.setUrl(url);
+                    uploadPictureImageLoader.current.setLoadingStatus(false);
+                    setProgress(100);
+                    if (onUploadSuccess) {
+                        onUploadSuccess(currentFile, url);
+                    }
+                })
+                    .catch(() => {
+                    uploadPictureImageLoader.current.setErrorStatus(true);
+                    uploadPictureImageLoader.current.setLoadingStatus(false);
+                    setProgress(100);
+                    if (onError) {
+                        onError(currentFile);
+                    }
+                });
+            }
+        }
+    }, [onUpload, onUploadSuccess, onError]);
+    const onImageDelete = useCallback(() => {
+        uploadPictureImageLoader.current.clear();
+        if (onDelete) {
+            onDelete();
+        }
+    }, [onDelete]);
+    useImperativeHandle(controllerRef, () => ({
+        getData: () => uploadPictureImageLoader.current.getAll(),
+    }));
+    return (jsx("div", Object.assign({ ref: ref, className: cx(uploadPictureClasses.host, className), style: style }, { children: jsx(UploadPictureBlock, { accept: accept, disabled: disabled, imageLoader: uploadPictureImageLoader.current, multiple: false, onDelete: onImageDelete, onUpload: onImageUpload, onValueChange: onChange }, void 0) }), void 0));
+});
+var UploadPicture$1 = UploadPicture;
+
+export { UploadPicture$1 as default };

package/Upload/UploadPictureBlock.d.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+import { ImageUploader } from '@mezzanine-ui/core/upload';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface UploadPictureBlockProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children' | 'onChange' | 'value'> {
+    accept?: string;
+    imageLoader: ImageUploader;
+    multiple?: boolean;
+    onDelete?: MouseEventHandler;
+    onUpload?: (files: File[]) => void;
+    onValueChange?: (value: string) => void;
+}
+declare const UploadPictureBlock: import("react").ForwardRefExoticComponent<UploadPictureBlockProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default UploadPictureBlock;

package/Upload/UploadPictureBlock.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { toUploadPictureBlockCssVars, uploadPictureBlockClasses } from '@mezzanine-ui/core/upload';
+import { TimesIcon, SpinnerIcon, UploadIcon, TrashIcon } from '@mezzanine-ui/icons';
+import { usePreviousValue } from '../hooks/usePreviousValue.js';
+import UploadInput from './UploadInput.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const UploadPictureBlock = forwardRef(function UploadPictureBlock(props, ref) {
+    const { accept = 'image/*', disabled = false, imageLoader, multiple = false, onDelete, onUpload, onValueChange, } = props;
+    const [previewImage, setPreviewImage] = useState(imageLoader.getPreview() || '');
+    const [value, setValue] = useState(imageLoader.getUrl() || '');
+    const [percentage, setPercentage] = useState(imageLoader.getPercentage() || 0);
+    const [isLoading, setIsLoading] = useState(imageLoader.getIsLoading() || false);
+    const [isError, setIsError] = useState(imageLoader.getIsError() || false);
+    const inputRef = useRef(null);
+    const prevValue = usePreviousValue(value);
+    useEffect(() => {
+        if (onValueChange && value !== prevValue) {
+            onValueChange(value);
+        }
+    }, [onValueChange, prevValue, value]);
+    const setImageUploaderData = useCallback(() => {
+        const data = imageLoader.getAll();
+        setPreviewImage(data.preview);
+        setValue(data.url);
+        setPercentage(data.percentage);
+        setIsLoading(data.isLoading);
+        setIsError(data.isError);
+    }, [imageLoader]);
+    useEffect(() => {
+        imageLoader.on('fileChange', () => {
+            setImageUploaderData();
+        });
+        imageLoader.on('previewChange', () => {
+            setPreviewImage(imageLoader.getPreview());
+        });
+        imageLoader.on('percentageChange', () => {
+            setPercentage(imageLoader.getPercentage());
+        });
+        imageLoader.on('urlChange', () => {
+            setValue(imageLoader.getUrl());
+        });
+        imageLoader.on('loadingStatusChange', () => {
+            setIsLoading(imageLoader.getIsLoading());
+        });
+        imageLoader.on('errorStatusChange', () => {
+            setIsError(imageLoader.getIsError());
+        });
+        imageLoader.on('clear', () => {
+            setImageUploaderData();
+        });
+        return () => {
+            imageLoader.removeAllListeners();
+        };
+    }, [imageLoader, setImageUploaderData]);
+    const cssVars = toUploadPictureBlockCssVars({ percentage });
+    const style = {
+        ...cssVars,
+    };
+    const showImage = useMemo(() => ((value || previewImage) && !isError), [previewImage, value, isError]);
+    const canDeleteImage = useMemo(() => ((showImage || isError) && !isLoading), [showImage, isError, isLoading]);
+    return (jsxs("button", Object.assign({ ref: ref, type: "button", "aria-disabled": disabled, disabled: disabled, onClick: (event) => {
+            var _a;
+            if (!showImage && !isError) {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+            }
+            if (canDeleteImage && onDelete) {
+                onDelete(event);
+            }
+        }, className: cx(uploadPictureBlockClasses.host, {
+            [uploadPictureBlockClasses.loading]: isLoading,
+            [uploadPictureBlockClasses.error]: isError,
+            [uploadPictureBlockClasses.disabled]: disabled,
+        }), style: style }, { children: [jsx(UploadInput, { ref: inputRef, accept: accept, disabled: disabled, multiple: multiple, onUpload: onUpload }, void 0),
+            isError ? (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: TimesIcon }, void 0),
+                    jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u932F\u8AA4" }), void 0)] }), void 0)) : (jsx(Fragment, { children: showImage ? (jsxs(Fragment, { children: [jsx("img", { alt: "", src: (value || previewImage), className: uploadPictureBlockClasses.preview }, void 0),
+                        isLoading ? (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: SpinnerIcon, spin: true }, void 0),
+                                jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u4E2D..." }), void 0)] }), void 0)) : null] }, void 0)) : (jsxs("div", Object.assign({ className: uploadPictureBlockClasses.group }, { children: [jsx(Icon, { icon: UploadIcon }, void 0),
+                        jsx("span", Object.assign({ className: uploadPictureBlockClasses.status }, { children: "\u4E0A\u50B3\u5F71\u50CF" }), void 0)] }), void 0)) }, void 0)),
+            !disabled && canDeleteImage && (jsx("div", Object.assign({ className: uploadPictureBlockClasses.delete }, { children: jsx(Icon, { icon: TrashIcon }, void 0) }), void 0))] }), void 0));
+});
+var UploadPictureBlock$1 = UploadPictureBlock;
+
+export { UploadPictureBlock$1 as default };

package/Upload/UploadPictureWall.d.ts

@@ -0,0 +1,71 @@
+import { Ref } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export declare type UploadPictureWallControl = {
+    getAllData: () => void;
+};
+export interface UploadPictureWallBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'onChange' | 'onError' | 'value'> {
+    /**
+     * The accept attributes of native input element.
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * Provide `controllerRef` if you need detail data of files.
+     */
+    controllerRef?: Ref<UploadPictureWallControl | null>;
+    /**
+     * The default values of uploader.
+     */
+    defaultValues?: string[];
+    /**
+     * Whether the input which is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input which is multiple.
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+    * Fired after values changed.
+    */
+    onChange?: (urls: string[]) => void;
+    /**
+    * Fired after user delete image.
+    */
+    onDelete?: (urls: string[]) => void;
+    /**
+    * Fired after user upload images failed.
+    */
+    onError?: (files: File | File[]) => void;
+    /**
+    * Fired after user upload images success.
+    */
+    onUploadSuccess?: (files: File | File[], urls: string | string[]) => void;
+}
+export interface UploadPictureWallSingleUploadProps extends UploadPictureWallBaseProps {
+    onMultiUpload?: undefined;
+    /**
+    * Fired when user upload image, need to return Promise<string>.
+    * Arg1 is target file, arg2 `setProgress` can set the progress of uploading.
+    */
+    onUpload?: (file: File, setProgress: (progress: number) => void) => Promise<string>;
+    /**
+     * Whether the uploading which is parallel, only enabled when `onUpload` is given .
+     * @default false
+     */
+    parallel?: boolean;
+}
+export interface UploadPictureWallMultiUploadProps extends UploadPictureWallBaseProps {
+    /**
+    * Fired when user upload images, need to return Promise<string[]>.
+    * Arg1 is target files, arg2 `setProgress` can set the progress of uploading.
+    */
+    onMultiUpload?: (files: File[], setProgress: (progress: number) => void) => Promise<string[]>;
+    onUpload?: undefined;
+    parallel?: undefined;
+}
+export declare type UploadPictureWallProps = UploadPictureWallSingleUploadProps | UploadPictureWallMultiUploadProps;
+declare const UploadPictureWall: import("react").ForwardRefExoticComponent<(UploadPictureWallSingleUploadProps & import("react").RefAttributes<HTMLDivElement>) | (UploadPictureWallMultiUploadProps & import("react").RefAttributes<HTMLDivElement>)>;
+export default UploadPictureWall;

package/Upload/UploadPictureWall.js

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useMemo, useEffect, useCallback, useImperativeHandle } from 'react';
+import { ImageUploader, uploadPictureWallClasses } from '@mezzanine-ui/core/upload';
+import compact from 'lodash/compact';
+import drop from 'lodash/drop';
+import isEqual from 'lodash/isEqual';
+import { usePreviousValue } from '../hooks/usePreviousValue.js';
+import UploadPictureWallItem from './UploadPictureWallItem.js';
+import cx from 'clsx';
+
+const UploadPictureWall = forwardRef(function UploadPictureWall(props, ref) {
+    const { accept = 'image/*', className, controllerRef, defaultValues, disabled = false, multiple = true, onChange, onDelete, onError, onMultiUpload, onUpload, onUploadSuccess, parallel = false, style, } = props;
+    const [uploadPictureImageLoaders, setUploadPictureImageLoader] = useState(defaultValues ? compact(defaultValues).map((value) => new ImageUploader(undefined, value)) : []);
+    const [needUploadImageLoaders, setNeedUploadImageLoaders] = useState([]);
+    const [needUploadImageLoaderSets, setNeedUploadImageLoaderSets] = useState([]);
+    const [values, setValues] = useState(compact(defaultValues) || []);
+    const loaderList = useMemo(() => uploadPictureImageLoaders, [uploadPictureImageLoaders]);
+    const prevNeedUploadImageLoadersLength = usePreviousValue(needUploadImageLoaders.length);
+    const prevNeedUploadImageLoaderSetsLength = usePreviousValue(needUploadImageLoaderSets.length);
+    const prevValues = usePreviousValue(values);
+    useEffect(() => {
+        if (onChange && !isEqual(prevValues, values)) {
+            onChange(values);
+        }
+    }, [onChange, prevValues, values]);
+    useEffect(() => {
+        if (prevNeedUploadImageLoadersLength > needUploadImageLoaders.length ||
+            prevNeedUploadImageLoaderSetsLength > needUploadImageLoaderSets.length) {
+            setValues(compact(uploadPictureImageLoaders.map((loader) => loader.getUrl())));
+        }
+    }, [
+        uploadPictureImageLoaders,
+        needUploadImageLoaders,
+        prevNeedUploadImageLoadersLength,
+        needUploadImageLoaderSets,
+        prevNeedUploadImageLoaderSetsLength,
+    ]);
+    useEffect(() => {
+        if (needUploadImageLoaderSets.length && onUpload) {
+            const imageLoaderSet = needUploadImageLoaderSets[0];
+            if (!imageLoaderSet[0].getIsLoading()) {
+                imageLoaderSet.forEach((imageLoader, index) => {
+                    const setProgress = (progress) => imageLoader.setPercentage(progress);
+                    imageLoader.setLoadingStatus(true);
+                    onUpload(imageLoader.getFile(), setProgress)
+                        .then((url) => {
+                        imageLoader.setUrl(url);
+                        imageLoader.setLoadingStatus(false);
+                        setProgress(100);
+                        if (onUploadSuccess) {
+                            onUploadSuccess(imageLoader.getFile(), url);
+                        }
+                        if (index === imageLoaderSet.length - 1) {
+                            setNeedUploadImageLoaderSets((nup) => drop(nup));
+                        }
+                    })
+                        .catch(() => {
+                        imageLoader.setErrorStatus(true);
+                        imageLoader.setLoadingStatus(false);
+                        setProgress(100);
+                        if (index === imageLoaderSet.length - 1) {
+                            setNeedUploadImageLoaderSets((nup) => drop(nup));
+                        }
+                        if (onError) {
+                            onError(imageLoader.getFile());
+                        }
+                    });
+                });
+            }
+        }
+    }, [needUploadImageLoaderSets, onError, onUpload, onUploadSuccess]);
+    useEffect(() => {
+        if (needUploadImageLoaders.length && onUpload) {
+            const imageLoader = needUploadImageLoaders[0];
+            if (imageLoader && imageLoader.getFile() && !imageLoader.getIsLoading()) {
+                const setProgress = (progress) => imageLoader.setPercentage(progress);
+                imageLoader.setLoadingStatus(true);
+                onUpload(imageLoader.getFile(), setProgress)
+                    .then((url) => {
+                    imageLoader.setUrl(url);
+                    imageLoader.setLoadingStatus(false);
+                    setProgress(100);
+                    setNeedUploadImageLoaders((nup) => drop(nup));
+                    if (onUploadSuccess) {
+                        onUploadSuccess(imageLoader.getFile(), url);
+                    }
+                })
+                    .catch(() => {
+                    imageLoader.setErrorStatus(true);
+                    imageLoader.setLoadingStatus(false);
+                    setProgress(100);
+                    setNeedUploadImageLoaders((nup) => drop(nup));
+                    if (onError) {
+                        onError(imageLoader.getFile());
+                    }
+                });
+            }
+        }
+    }, [needUploadImageLoaders, onError, onUpload, onUploadSuccess]);
+    const onImagesUpload = useCallback((files) => {
+        if (files.length) {
+            const imageLoaders = files.map((file) => new ImageUploader(file));
+            setUploadPictureImageLoader((ups) => [...ups, ...imageLoaders]);
+            if (onMultiUpload) {
+                const uploadFiles = imageLoaders.map((loader) => loader.getFile());
+                const setProgress = (progress) => imageLoaders.forEach((loader) => loader.setPercentage(progress));
+                imageLoaders.forEach((loader) => loader.setLoadingStatus(true));
+                onMultiUpload(uploadFiles, setProgress)
+                    .then((urls) => {
+                    imageLoaders.forEach((loader, index) => loader.setUrl(urls[index]));
+                    imageLoaders.forEach((loader) => loader.setLoadingStatus(false));
+                    setProgress(100);
+                    setValues((v) => [...v, ...urls]);
+                    if (onUploadSuccess) {
+                        onUploadSuccess(uploadFiles, urls);
+                    }
+                })
+                    .catch(() => {
+                    imageLoaders.forEach((loader) => loader.setErrorStatus(true));
+                    imageLoaders.forEach((loader) => loader.setLoadingStatus(false));
+                    setProgress(100);
+                    if (onError) {
+                        onError(uploadFiles);
+                    }
+                });
+                return;
+            }
+            if (onUpload) {
+                if (!parallel) {
+                    setNeedUploadImageLoaders((nups) => [...nups, ...imageLoaders]);
+                }
+                else {
+                    setNeedUploadImageLoaderSets((set) => [...set, imageLoaders]);
+                }
+            }
+        }
+    }, [onError, onMultiUpload, onUpload, onUploadSuccess, parallel]);
+    const onImageDelete = useCallback((uid) => {
+        setUploadPictureImageLoader((ups) => ups.filter((up) => up.getUid() !== uid));
+        setNeedUploadImageLoaders((nUps) => nUps.filter((nUp) => nUp.getUid() !== uid));
+        const nowUploadPictureImageLoaders = uploadPictureImageLoaders.filter((up) => up.getUid() !== uid);
+        const urls = compact(nowUploadPictureImageLoaders.map((loader) => loader.getUrl()));
+        setValues(urls);
+        if (onDelete) {
+            onDelete(urls);
+        }
+    }, [onDelete, uploadPictureImageLoaders]);
+    useImperativeHandle(controllerRef, () => ({
+        getAllData: () => uploadPictureImageLoaders.map((loader) => loader.getAll()),
+    }));
+    return (jsxs("div", Object.assign({ ref: ref, className: cx(uploadPictureWallClasses.host, className), style: style }, { children: [loaderList.map((up) => (jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: up, multiple: multiple, onDelete: () => onImageDelete(up.getUid()) }, up.getUid()))),
+            jsx(UploadPictureWallItem, { accept: accept, disabled: disabled, imageLoader: new ImageUploader(), multiple: multiple, onUpload: onImagesUpload }, void 0)] }), void 0));
+});
+var UploadPictureWall$1 = UploadPictureWall;
+
+export { UploadPictureWall$1 as default };

package/Upload/UploadPictureWallItem.d.ts

@@ -0,0 +1,13 @@
+import { MouseEventHandler } from 'react';
+import { ImageUploader } from '@mezzanine-ui/core/upload';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface UploadPictureWallItemProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'value' | 'onChange' | 'children'> {
+    accept?: string;
+    disabled?: boolean;
+    imageLoader: ImageUploader;
+    multiple?: boolean;
+    onDelete?: MouseEventHandler;
+    onUpload?: (files: File[]) => void;
+}
+declare const UploadPictureWallItem: (props: UploadPictureWallItemProps) => JSX.Element;
+export default UploadPictureWallItem;

package/Upload/UploadPictureWallItem.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { uploadPictureWallClasses } from '@mezzanine-ui/core/upload';
+import UploadPictureBlock from './UploadPictureBlock.js';
+import cx from 'clsx';
+
+const UploadPictureWallItem = (props) => {
+    const { accept, disabled, imageLoader, multiple, onDelete, onUpload, } = props;
+    const loader = useRef(imageLoader);
+    useEffect(() => {
+        if (!loader.current.getPreview()) {
+            loader.current.setPreview();
+        }
+    }, []);
+    return (jsx("div", Object.assign({ className: cx(uploadPictureWallClasses.item) }, { children: jsx(UploadPictureBlock, { accept: accept, disabled: disabled, imageLoader: loader.current, multiple: multiple, onDelete: onDelete, onUpload: onUpload }, void 0) }), void 0));
+};
+var UploadPictureWallItem$1 = UploadPictureWallItem;
+
+export { UploadPictureWallItem$1 as default };

package/Upload/index.d.ts

@@ -1,3 +1,6 @@
 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';

package/Upload/index.js

@@ -1,2 +1,5 @@
 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';

package/index.d.ts

@@ -67,7 +67,7 @@ export { AutoComplete, AutoCompleteProps, SelectValue, TreeSelectOption, SelectC
 export { SwitchSize, SwitchProps, default as Switch, } from './Switch';
 export { TextareaSize, TextareaProps, default as Textarea, } from './Textarea';
 export { TextFieldSize, TextFieldProps, default as TextField, } from './TextField';
-export { UploadButtonProps, UploadButton, UploadResultProps, UploadResultSize, UploadResultStatus, UploadResult, } from './Upload';
+export { UploadButtonProps, UploadButton, UploadPictureControl, UploadPictureProps, UploadPicture, UploadPictureWallControl, UploadPictureWallProps, UploadPictureWall, UploadResultProps, UploadResultSize, UploadResultStatus, UploadResult, } from './Upload';
 export { useTabKeyClose, UsePickerDocumentEventCloseProps, usePickerDocumentEventClose, UsePickerValueProps, usePickerValue, UseRangePickerValueProps, useRangePickerValue, PickerTriggerProps, PickerTrigger, RangePickerTriggerProps, RangePickerTrigger, } from './Picker';
 export { DatePickerCalendarProps, DatePickerCalendar, DatePickerProps, default as DatePicker, } from './DatePicker';
 export { useDateRangeCalendarControls, UseDateRangePickerValueProps, useDateRangePickerValue, DateRangePickerCalendarProps, DateRangePickerCalendar, DateRangePickerProps, default as DateRangePicker, } from './DateRangePicker';

package/index.js

@@ -88,6 +88,8 @@ export { default as Switch } from './Switch/Switch.js';
 export { default as Textarea } from './Textarea/Textarea.js';
 export { default as TextField } from './TextField/TextField.js';
 export { default as UploadButton } from './Upload/UploadButton.js';
+export { default as UploadPicture } from './Upload/UploadPicture.js';
+export { default as UploadPictureWall } from './Upload/UploadPictureWall.js';
 export { default as UploadResult } from './Upload/UploadResult.js';
 export { useTabKeyClose } from './Picker/useTabKeyClose.js';
 export { usePickerDocumentEventClose } from './Picker/usePickerDocumentEventClose.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -32,8 +32,8 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.7.2",
-    "@mezzanine-ui/icons": "^0.5.0",
+    "@mezzanine-ui/core": "^0.7.3",
+    "@mezzanine-ui/icons": "^0.7.3",
     "@mezzanine-ui/system": "^0.7.0",
     "@popperjs/core": "^2.9.2",
     "@types/react-transition-group": "4.4.1",