@mezzanine-ui/react 0.7.1 → 0.8.0

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/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

@@ -43,8 +43,7 @@ export { DropdownProps, default as Dropdown, } from './Dropdown';
 export { NavigationItem, NavigationItemProps, NavigationSubMenu, NavigationSubMenuProps, NavigationSubMenuChild, NavigationSubMenuChildren, NavigationChild, NavigationChildren, NavigationProps, default as Navigation, } from './Navigation';
 export { AppBarChild, AppBarChildren, AppBarBrand, AppBarBrandProps, AppBarMain, AppBarMainProps, AppBarSupport, AppBarSupportProps, default as AppBar, } from './AppBar';
 export { PageFooterProps, default as PageFooter, } from './PageFooter';
-export { StepProps, default as Step, } from './Stepper';
-export { StepperProps, default as Stepper, } from './Stepper';
+export { StepProps, StepperProps, Step, default as Stepper, } from './Stepper';
 /**
  * Data Display
  */
@@ -67,7 +66,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';
@@ -81,7 +80,7 @@ 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, MessageType, default as Message, } from './Message';
-export { ModalSeverity, ModalSize, ModalHeaderProps, ModalHeader, ModalBodyProps, ModalBody, ModalFooterProps, ModalFooter, ModalActionsProps, ModalActions, ModalProps, default as Modal, } from './Modal';
+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,7 @@ 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';
@@ -44,7 +45,8 @@ 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 Step } from './Stepper/Step.js';
+export { 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';
@@ -87,6 +89,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.1",
+  "version": "0.8.0",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -32,8 +32,8 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.7.1",
-    "@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",

package/Modal/useIsTopModal.d.ts

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