@mezzanine-ui/react 0.6.4 → 0.7.3

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/UploadResult.js

@@ -25,6 +25,7 @@ const UploadResult = forwardRef(function UploadResult(props, ref) {
             jsxs("div", Object.assign({ className: uploadResultClasses.actions }, { children: [loading && (jsx(Icon, { icon: SpinnerIcon, spin: true }, void 0)),
                     done && (jsx(Icon, { icon: DownloadIcon, onClick: onDownload, role: "button" }, void 0)),
                     (done || error) && (jsx(Icon, { icon: TimesIcon, onClick: onDelete, role: "button" }, void 0))] }), void 0)] }), void 0));
-});
+});
+var UploadResult$1 = UploadResult;
 
-export default UploadResult;
+export { UploadResult$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/_internal/InputCheck/InputCheck.js

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

package/_internal/InputCheck/InputCheckGroup.js

@@ -9,6 +9,7 @@ import cx from 'clsx';
 const InputCheckGroup = forwardRef(function InputCheckGroup(props, ref) {
     const { children, className, orientation = 'horizontal', ...rest } = props;
     return (jsx("div", Object.assign({}, rest, { ref: ref, "aria-orientation": orientation, className: cx(inputCheckGroupClasses.host, inputCheckGroupClasses.orientation(orientation), className) }, { children: children }), void 0));
-});
+});
+var InputCheckGroup$1 = InputCheckGroup;
 
-export default InputCheckGroup;
+export { InputCheckGroup$1 as default };

package/_internal/InputTriggerPopper/InputTriggerPopper.js

@@ -39,6 +39,7 @@ const InputTriggerPopper = forwardRef(function InputTriggerPopper(props, ref) {
                     ...modifiers,
                 ],
             } }, { children: children }), void 0) }), void 0));
-});
+});
+var InputTriggerPopper$1 = InputTriggerPopper;
 
-export default InputTriggerPopper;
+export { InputTriggerPopper$1 as default };

package/_internal/SlideFadeOverlay/SlideFadeOverlay.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+import { OverlayProps } from '../../Overlay';
+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'> {
+    /**
+     * Control slide fade in direction
+     * @default 'down'
+     */
+    direction?: SlideFadeDirection;
+    /**
+     * Controls whether to disable closing modal while escape key down.
+     * @default false
+     */
+    disableCloseOnEscapeKeyDown?: boolean;
+}
+/**
+ * The react component for slide fade + overlay compose
+ */
+declare const SlideFadeOverlay: import("react").ForwardRefExoticComponent<SlideFadeOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SlideFadeOverlay;

package/_internal/SlideFadeOverlay/SlideFadeOverlay.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { overlayWithSlideFadeClasses } from '@mezzanine-ui/core/_internal/overlay-with-slide-fade';
+import { forwardRef, useState, useLayoutEffect, useEffect } from 'react';
+import { useDocumentEscapeKeyDown } from '../../hooks/useDocumentEscapeKeyDown.js';
+import { lockBodyScroll, allowBodyScroll } from '../../utils/scroll-lock.js';
+import useTopStack from './useTopStack.js';
+import Overlay from '../../Overlay/Overlay.js';
+import SlideFade from '../../Transition/SlideFade.js';
+import cx from 'clsx';
+
+/**
+ * The react component for slide fade + overlay compose
+ */
+const SlideFadeOverlay = forwardRef(function SlideFadeOverlay(props, ref) {
+    const { children, className, container, direction = 'down', disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, hideBackdrop = false, invisibleBackdrop = false, onBackdropClick, onClose, open, } = props;
+    const [exited, setExited] = useState(true);
+    /**
+     * Escape keydown close: escape will only close the top modal
+     */
+    const checkIsOnTheTop = useTopStack(open);
+    useDocumentEscapeKeyDown(() => {
+        if (!open || disableCloseOnEscapeKeyDown || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (checkIsOnTheTop()) {
+                event.stopPropagation();
+                onClose();
+            }
+        };
+    }, [
+        disableCloseOnEscapeKeyDown,
+        checkIsOnTheTop,
+        open,
+        onClose,
+    ]);
+    /** lock body scroll */
+    useLayoutEffect(() => {
+        if (open) {
+            lockBodyScroll();
+        }
+    }, [open]);
+    /** unlock body scroll */
+    useEffect(() => {
+        function checkAndAllowScroll() {
+            // wait until dom element unmount, and check if other modal existed
+            const allStacks = document.querySelectorAll('.mzn-overlay-with-slide-fade');
+            if (!allStacks.length) {
+                allowBodyScroll();
+            }
+        }
+        if (!open && exited) {
+            checkAndAllowScroll();
+        }
+        return (() => {
+            requestAnimationFrame(checkAndAllowScroll);
+        });
+    }, [open, exited]);
+    if (!open && exited) {
+        return null;
+    }
+    return (jsx(Overlay, Object.assign({ className: cx(overlayWithSlideFadeClasses.host, className), container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, role: "presentation" }, { children: jsx(SlideFade, Object.assign({ ref: ref, in: open, direction: direction, onEntered: () => setExited(false), onExited: () => setExited(true) }, { children: children }), void 0) }), void 0));
+});
+var SlideFadeOverlay$1 = SlideFadeOverlay;
+
+export { SlideFadeOverlay$1 as default };

package/_internal/SlideFadeOverlay/index.d.ts

@@ -0,0 +1 @@
+export { SlideFadeOverlayProps, default, } from './SlideFadeOverlay';

package/_internal/SlideFadeOverlay/index.js

@@ -0,0 +1 @@
+export { default } from './SlideFadeOverlay.js';

package/_internal/SlideFadeOverlay/useTopStack.d.ts

@@ -0,0 +1 @@
+export default function useTopStack(open?: boolean): () => boolean;

package/{Modal/useIsTopModal.js → _internal/SlideFadeOverlay/useTopStack.js}

@@ -1,8 +1,8 @@
-import { useCallback, useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useCallback } from 'react';
 
 let seedStack = [];
 let seed = 1;
-function useIsTopModal(open) {
+function useTopStack(open) {
     const modalSeed = useMemo(() => {
         seed += 1;
         return seed;
@@ -19,4 +19,4 @@ function useIsTopModal(open) {
     return useCallback(() => seedStack[seedStack.length - 1] === modalSeed, [modalSeed]);
 }
 
-export { useIsTopModal };
+export { useTopStack as default };

package/index.d.ts

@@ -2,7 +2,7 @@ export * from './utils/composeRefs';
 export * from './utils/cx';
 export * from './utils/getElement';
 export * from './utils/jsx-types';
-export * from './utils/rename-types';
+export * from './utils/general';
 export * from './utils/scroll-lock';
 export * from './hooks/useClickAway';
 export * from './hooks/useComposeRefs';
@@ -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';
@@ -80,8 +80,8 @@ export { SingleSliderValue, RangeSliderValue, SliderValue, SliderRect, UseSlider
 export { AlertSeverity, AlertProps, default as Alert, } from './Alert';
 export { ConfirmActionsProps, default as ConfirmActions, } from './ConfirmActions';
 export { LoadingProps, default as Loading, } from './Loading';
-export { MessageData, MessageSeverity, default as Message, } from './Message';
-export { ModalSeverity, ModalSize, ModalHeaderProps, ModalHeader, ModalBodyProps, ModalBody, ModalFooterProps, ModalFooter, ModalActionsProps, ModalActions, ModalProps, default as Modal, } from './Modal';
+export { MessageData, MessageSeverity, MessageType, default as Message, } from './Message';
+export { ModalSeverity, ModalSize, ModalHeaderProps, ModalHeader, ModalBodyProps, ModalBody, ModalFooterProps, ModalFooter, ModalActionsProps, ModalActions, ModalProps, useModalContainer, default as Modal, } from './Modal';
 export { PopconfirmProps, default as Popconfirm, } from './Popconfirm';
 export { NotificationData, NotificationSeverity, default as Notification, } from './Notification';
 export { ProgressProps, ProgressType, ProgressStatus, ProgressTypes, ProgressStatuses, default as Progress, } from './Progress';

package/index.js

@@ -23,6 +23,11 @@ export { useSelectValueControl } from './Form/useSelectValueControl.js';
 export { useSwitchControlValue } from './Form/useSwitchControlValue.js';
 export { IconButton } from './Button/index.js';
 export { default as Typography } from './Typography/Typography.js';
+export { default as useModalContainer } from './Modal/useModalContainer.js';
+export { default as Transition } from './Transition/Transition.js';
+export { default as Button } from './Button/Button.js';
+export { default as ButtonGroup } from './Button/ButtonGroup.js';
+export { default as Icon } from './Icon/Icon.js';
 export { default as MenuDivider } from './Menu/MenuDivider.js';
 export { default as MenuItem } from './Menu/MenuItem.js';
 export { default as MenuItemGroup, default as OptionGroup } from './Menu/MenuItemGroup.js';
@@ -30,24 +35,51 @@ export { default as Menu } from './Menu/Menu.js';
 export { default as Tab } from './Tabs/Tab.js';
 export { default as TabPane } from './Tabs/TabPane.js';
 export { default as Tabs } from './Tabs/Tabs.js';
+export { default as Drawer } from './Drawer/Drawer.js';
+export { default as Dropdown } from './Dropdown/Dropdown.js';
 export { default as NavigationItem } from './Navigation/NavigationItem.js';
 export { default as NavigationSubMenu } from './Navigation/NavigationSubMenu.js';
 export { default as Navigation } from './Navigation/Navigation.js';
+export { default as AppBarBrand } from './AppBar/AppBarBrand.js';
+export { default as AppBarMain } from './AppBar/AppBarMain.js';
+export { default as AppBarSupport } from './AppBar/AppBarSupport.js';
+export { default as AppBar } from './AppBar/AppBar.js';
 export { default as PageFooter } from './PageFooter/PageFooter.js';
 export { default as Step, default as Stepper } from './Stepper/Stepper.js';
+export { default as AccordionSummary } from './Accordion/AccordionSummary.js';
+export { default as AccordionDetails } from './Accordion/AccordionDetails.js';
+export { default as Accordion } from './Accordion/Accordion.js';
+export { default as BadgeContainer } from './Badge/BadgeContainer.js';
+export { default as Badge } from './Badge/Badge.js';
+export { default as CardActions } from './Card/CardActions.js';
+export { default as Card } from './Card/Card.js';
+export { default as Empty } from './Empty/Empty.js';
 export { default as TableRefresh } from './Table/refresh/TableRefresh.js';
 export { default as Table } from './Table/Table.js';
 export { default as Tag } from './Tag/Tag.js';
+export { usePagination } from './Pagination/usePagination.js';
 export { default as PaginationItem } from './Pagination/PaginationItem.js';
 export { default as PaginationJumper } from './Pagination/PaginationJumper.js';
 export { default as Pagination } from './Pagination/Pagination.js';
+export { toggleValue, toggleValueWithStatusControl, uniqueArray } from './Tree/toggleValue.js';
+export { traverseTree } from './Tree/traverseTree.js';
+export { useTreeExpandedValue } from './Tree/useTreeExpandedValue.js';
+export { getTreeNodeEntities } from './Tree/getTreeNodeEntities.js';
 export { default as TreeNode } from './Tree/TreeNode.js';
 export { default as TreeNodeList } from './Tree/TreeNodeList.js';
 export { default as Tree } from './Tree/Tree.js';
+export { default as CheckboxGroup } from './Checkbox/CheckboxGroup.js';
+export { default as CheckAll } from './Checkbox/CheckAll.js';
+export { default as Checkbox } from './Checkbox/Checkbox.js';
+export { FormControlContext } from './Form/FormControlContext.js';
+export { default as FormField } from './Form/FormField.js';
+export { default as FormLabel } from './Form/FormLabel.js';
+export { default as FormMessage } from './Form/FormMessage.js';
 export { default as Input } from './Input/Input.js';
 export { default as RadioGroup } from './Radio/RadioGroup.js';
 export { default as Radio } from './Radio/Radio.js';
 export { default as AutoComplete } from './Select/AutoComplete.js';
+export { SelectControlContext } from './Select/SelectControlContext.js';
 export { default as SelectTrigger } from './Select/SelectTrigger.js';
 export { default as Option } from './Select/Option.js';
 export { default as TreeSelect } from './Select/TreeSelect.js';
@@ -56,12 +88,29 @@ 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';
+export { usePickerValue } from './Picker/usePickerValue.js';
+export { useRangePickerValue } from './Picker/useRangePickerValue.js';
 export { default as PickerTrigger } from './Picker/PickerTrigger.js';
 export { default as RangePickerTrigger } from './Picker/RangePickerTrigger.js';
+export { default as DatePickerCalendar } from './DatePicker/DatePickerCalendar.js';
+export { default as DatePicker } from './DatePicker/DatePicker.js';
+export { useDateRangeCalendarControls } from './DateRangePicker/useDateRangeCalendarControls.js';
+export { useDateRangePickerValue } from './DateRangePicker/useDateRangePickerValue.js';
+export { default as DateRangePickerCalendar } from './DateRangePicker/DateRangePickerCalendar.js';
+export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.js';
 export { default as TimePickerPanel } from './TimePicker/TimePickerPanel.js';
 export { default as TimePicker } from './TimePicker/TimePicker.js';
+export { default as DateTimePickerPanel } from './DateTimePicker/DateTimePickerPanel.js';
+export { default as DateTimePicker } from './DateTimePicker/DateTimePicker.js';
+export { useSlider } from './Slider/useSlider.js';
 export { default as Slider } from './Slider/Slider.js';
+export { default as Alert } from './Alert/Alert.js';
+export { default as ConfirmActions } from './ConfirmActions/ConfirmActions.js';
 export { default as Loading } from './Loading/Loading.js';
 export { default as Message } from './Message/Message.js';
 export { default as ModalHeader } from './Modal/ModalHeader.js';
@@ -77,61 +126,12 @@ export { default as Overlay } from './Overlay/Overlay.js';
 export { default as Popover } from './Popover/Popover.js';
 export { default as Popper } from './Popper/Popper.js';
 export { default as Portal } from './Portal/Portal.js';
-export { default as Transition } from './Transition/Transition.js';
 export { default as Collapse } from './Transition/Collapse.js';
 export { default as Fade } from './Transition/Fade.js';
 export { default as Grow } from './Transition/Grow.js';
 export { default as SlideFade } from './Transition/SlideFade.js';
 export { default as Zoom } from './Transition/Zoom.js';
 export { default as Tooltip } from './Tooltip/Tooltip.js';
-export { default as TimePanelAction } from './TimePanel/TimePanelAction.js';
-export { default as TimePanelColumn } from './TimePanel/TimePanelColumn.js';
-export { default as TimePanel } from './TimePanel/TimePanel.js';
-export { default as Button } from './Button/Button.js';
-export { default as ButtonGroup } from './Button/ButtonGroup.js';
-export { default as Icon } from './Icon/Icon.js';
-export { default as Drawer } from './Drawer/Drawer.js';
-export { default as Dropdown } from './Dropdown/Dropdown.js';
-export { default as AppBarBrand } from './AppBar/AppBarBrand.js';
-export { default as AppBarMain } from './AppBar/AppBarMain.js';
-export { default as AppBarSupport } from './AppBar/AppBarSupport.js';
-export { default as AppBar } from './AppBar/AppBar.js';
-export { default as AccordionSummary } from './Accordion/AccordionSummary.js';
-export { default as AccordionDetails } from './Accordion/AccordionDetails.js';
-export { default as Accordion } from './Accordion/Accordion.js';
-export { default as BadgeContainer } from './Badge/BadgeContainer.js';
-export { default as Badge } from './Badge/Badge.js';
-export { default as CardActions } from './Card/CardActions.js';
-export { default as Card } from './Card/Card.js';
-export { default as Empty } from './Empty/Empty.js';
-export { usePagination } from './Pagination/usePagination.js';
-export { toggleValue, toggleValueWithStatusControl, uniqueArray } from './Tree/toggleValue.js';
-export { traverseTree } from './Tree/traverseTree.js';
-export { useTreeExpandedValue } from './Tree/useTreeExpandedValue.js';
-export { getTreeNodeEntities } from './Tree/getTreeNodeEntities.js';
-export { default as CheckboxGroup } from './Checkbox/CheckboxGroup.js';
-export { default as CheckAll } from './Checkbox/CheckAll.js';
-export { default as Checkbox } from './Checkbox/Checkbox.js';
-export { FormControlContext } from './Form/FormControlContext.js';
-export { default as FormField } from './Form/FormField.js';
-export { default as FormLabel } from './Form/FormLabel.js';
-export { default as FormMessage } from './Form/FormMessage.js';
-export { SelectControlContext } from './Select/SelectControlContext.js';
-export { useTabKeyClose } from './Picker/useTabKeyClose.js';
-export { usePickerDocumentEventClose } from './Picker/usePickerDocumentEventClose.js';
-export { usePickerValue } from './Picker/usePickerValue.js';
-export { useRangePickerValue } from './Picker/useRangePickerValue.js';
-export { default as DatePickerCalendar } from './DatePicker/DatePickerCalendar.js';
-export { default as DatePicker } from './DatePicker/DatePicker.js';
-export { useDateRangeCalendarControls } from './DateRangePicker/useDateRangeCalendarControls.js';
-export { useDateRangePickerValue } from './DateRangePicker/useDateRangePickerValue.js';
-export { default as DateRangePickerCalendar } from './DateRangePicker/DateRangePickerCalendar.js';
-export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.js';
-export { default as DateTimePickerPanel } from './DateTimePicker/DateTimePickerPanel.js';
-export { default as DateTimePicker } from './DateTimePicker/DateTimePicker.js';
-export { useSlider } from './Slider/useSlider.js';
-export { default as Alert } from './Alert/Alert.js';
-export { default as ConfirmActions } from './ConfirmActions/ConfirmActions.js';
 export { useCalendarControlModifiers } from './Calendar/useCalendarControlModifiers.js';
 export { useCalendarModeStack } from './Calendar/useCalendarModeStack.js';
 export { useCalendarControls } from './Calendar/useCalendarControls.js';
@@ -144,5 +144,8 @@ export { default as CalendarDayOfWeek } from './Calendar/CalendarDayOfWeek.js';
 export { default as CalendarControls } from './Calendar/CalendarControls.js';
 export { default as CalendarCell } from './Calendar/CalendarCell.js';
 export { default as Calendar } from './Calendar/Calendar.js';
+export { default as TimePanelAction } from './TimePanel/TimePanelAction.js';
+export { default as TimePanelColumn } from './TimePanel/TimePanelColumn.js';
+export { default as TimePanel } from './TimePanel/TimePanel.js';
 export { default as cx } from 'clsx';
 export { createNotifier } from './Notifier/createNotifier.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.6.4",
+  "version": "0.7.3",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -32,9 +32,9 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.6.3",
-    "@mezzanine-ui/icons": "^0.5.0",
-    "@mezzanine-ui/system": "^0.5.2",
+    "@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",
     "clsx": "^1.1.1",
@@ -43,7 +43,7 @@
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "^6.3.4",
+    "@storybook/react": "^6.3.8",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.1.0",
     "@types/lodash": "^4.14.168",
@@ -51,7 +51,7 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "@types/react-test-renderer": "^17.0.1",
-    "chromatic": "^5.9.2",
+    "chromatic": "^5.10.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "react": "^17.0.1",

package/utils/{rename-types.d.ts → general.d.ts}

@@ -3,3 +3,6 @@ export declare type PickRenameMulti<T, R extends {
 }> = {
     [P in keyof T as P extends keyof R ? R[P] : P]: T[P];
 };
+export declare type ExtendedProperties<T> = {
+    [P in keyof T]: T[P];
+};

package/Modal/useIsTopModal.d.ts

@@ -1 +0,0 @@
-export declare function useIsTopModal(open?: boolean): () => boolean;