@mezzanine-ui/react 1.0.0-rc.5 → 1.0.0-rc.7

package/Modal/Modal.d.ts

@@ -3,7 +3,8 @@ import { ModalContainerProps } from './useModalContainer';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { ModalHeaderProps } from './ModalHeader';
 import { ModalFooterProps } from './ModalFooter';
-interface CommonModalProps extends Omit<ModalContainerProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Partial<Omit<ModalHeaderProps, 'children' | 'className' | 'title'>>, Partial<Omit<ModalFooterProps, 'children' | 'className' | 'confirmText'>> {
+export type ModalHeaderLayoutProps = Pick<ModalHeaderProps, 'statusTypeIconLayout' | 'titleAlign' | 'supportingTextAlign'>;
+interface CommonModalProps extends Omit<ModalContainerProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Partial<Omit<ModalFooterProps, 'cancelText' | 'children' | 'className' | 'confirmText' | 'showCancelButton'>> {
     /**
      * The custom class name applied to the modal container.
      */
@@ -29,6 +30,15 @@ interface CommonModalProps extends Omit<ModalContainerProps, 'children'>, Pick<N
      * @default true
      */
     showDismissButton?: boolean;
+    /**
+     * Whether to show status type icon.
+     * @default false
+     */
+    showStatusTypeIcon?: boolean;
+    /**
+     * Supporting text displayed below the title.
+     */
+    supportingText?: string;
 }
 interface ExtendedSplitModalProps extends CommonModalProps {
     /**
@@ -41,6 +51,13 @@ interface ExtendedSplitModalProps extends CommonModalProps {
      * Required when modalType is 'extendedSplit'.
      */
     extendedSplitRightSideContent: React.ReactNode;
+    /**
+     * Controls which side the sidebar panel (narrow column with footer) appears on.
+     * - `'left'`: sidebar on the left, wide content on the right
+     * - `'right'`: wide content on the left, sidebar on the right
+     * @default 'right'
+     */
+    extendedSplitSidebarPosition?: 'left' | 'right';
     /**
      * Controls the type/layout of the modal.
      * - 'extendedSplit': Modal with split layout (footer inside left content)
@@ -64,6 +81,10 @@ interface OtherModalProps extends CommonModalProps {
      * Cannot be provided when modalType is not 'extendedSplit'.
      */
     extendedSplitRightSideContent?: never;
+    /**
+     * 此模式下不適用。
+     */
+    extendedSplitSidebarPosition?: never;
     /**
      * Controls the type/layout of the modal.
      * - 'standard': Default modal with body container
@@ -102,6 +123,7 @@ type ModalHeaderPropsWithoutHeader = {
      */
     title?: never;
 };
+export type ModalFooterCancelProps = Pick<ModalFooterProps, 'cancelText' | 'showCancelButton'>;
 type ModalFooterPropsWithFooter = {
     /**
      * Whether to show modal footer.
@@ -111,7 +133,7 @@ type ModalFooterPropsWithFooter = {
      * The confirm button text of the modal footer (required when showModalFooter is true).
      */
     confirmText: string;
-};
+} & ModalFooterCancelProps;
 type ModalFooterPropsWithoutFooter = {
     /**
      * Whether to show modal footer.
@@ -123,10 +145,60 @@ type ModalFooterPropsWithoutFooter = {
      * Cannot be provided when showModalFooter is false.
      */
     confirmText?: never;
+    /**
+     * 此模式下不適用。
+     */
+    cancelText?: never;
+    /**
+     * 此模式下不適用。
+     */
+    showCancelButton?: never;
 };
-export type ModalProps = BaseModalProps & ((ModalHeaderPropsWithHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithHeader & ModalFooterPropsWithoutFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithoutFooter));
+export type ModalProps = BaseModalProps & ModalHeaderLayoutProps & ((ModalHeaderPropsWithHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithHeader & ModalFooterPropsWithoutFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithoutFooter));
 /**
- * The react component for `mezzanine` modal.
+ * 對話框元件，以 Backdrop 遮罩呈現需要使用者互動或確認的浮動視窗。
+ *
+ * 透過 `showModalHeader` 與 `showModalFooter` 分別啟用標題列與操作列，
+ * `modalStatusType` 可在標題旁顯示狀態圖示（`info`、`success`、`warning`、`error`）。
+ * `modalType` 支援 `standard`、`extended`、`mediaPreview`、`verification` 及 `extendedSplit` 佈局，
+ * 其中 `extendedSplit` 需同時傳入 `extendedSplitLeftSideContent` 與 `extendedSplitRightSideContent`。
+ * `size` 可選 `regular`、`large`、`wide` 等尺寸，`fullScreen` 則強制全螢幕顯示。
+ *
+ * @example
+ * ```tsx
+ * import Modal from '@mezzanine-ui/react/Modal';
+ *
+ * // 基本對話框（含標題與操作列）
+ * <Modal
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   showModalHeader
+ *   title="確認刪除"
+ *   showModalFooter
+ *   confirmText="確認"
+ *   cancelText="取消"
+ *   onConfirm={handleConfirm}
+ *   onCancel={() => setIsOpen(false)}
+ * >
+ *   <p>此操作無法復原，確定要刪除嗎？</p>
+ * </Modal>
+ *
+ * // 帶狀態圖示的對話框
+ * <Modal
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   showModalHeader
+ *   title="操作成功"
+ *   showStatusTypeIcon
+ *   modalStatusType="success"
+ *   showModalFooter
+ *   confirmText="關閉"
+ *   onConfirm={() => setIsOpen(false)}
+ * />
+ * ```
+ *
+ * @see {@link Drawer} 從側邊滑入的抽屜式對話框元件
+ * @see {@link useModalContainer} 用於自訂 Modal 掛載容器的 Hook
  */
 declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Modal;

package/Modal/Modal.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { modalClasses } from '@mezzanine-ui/core/modal';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
 import { ModalControlContext } from './ModalControl.js';
 import useModalContainer from './useModalContainer.js';
 import ModalHeader from './ModalHeader.js';
@@ -9,23 +9,134 @@ import ClearActions from '../ClearActions/ClearActions.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` modal.
+ * 對話框元件，以 Backdrop 遮罩呈現需要使用者互動或確認的浮動視窗。
+ *
+ * 透過 `showModalHeader` 與 `showModalFooter` 分別啟用標題列與操作列，
+ * `modalStatusType` 可在標題旁顯示狀態圖示（`info`、`success`、`warning`、`error`）。
+ * `modalType` 支援 `standard`、`extended`、`mediaPreview`、`verification` 及 `extendedSplit` 佈局，
+ * 其中 `extendedSplit` 需同時傳入 `extendedSplitLeftSideContent` 與 `extendedSplitRightSideContent`。
+ * `size` 可選 `regular`、`large`、`wide` 等尺寸，`fullScreen` 則強制全螢幕顯示。
+ *
+ * @example
+ * ```tsx
+ * import Modal from '@mezzanine-ui/react/Modal';
+ *
+ * // 基本對話框（含標題與操作列）
+ * <Modal
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   showModalHeader
+ *   title="確認刪除"
+ *   showModalFooter
+ *   confirmText="確認"
+ *   cancelText="取消"
+ *   onConfirm={handleConfirm}
+ *   onCancel={() => setIsOpen(false)}
+ * >
+ *   <p>此操作無法復原，確定要刪除嗎？</p>
+ * </Modal>
+ *
+ * // 帶狀態圖示的對話框
+ * <Modal
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   showModalHeader
+ *   title="操作成功"
+ *   showStatusTypeIcon
+ *   modalStatusType="success"
+ *   showModalFooter
+ *   confirmText="關閉"
+ *   onConfirm={() => setIsOpen(false)}
+ * />
+ * ```
+ *
+ * @see {@link Drawer} 從側邊滑入的抽屜式對話框元件
+ * @see {@link useModalContainer} 用於自訂 Modal 掛載容器的 Hook
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, backdropClassName, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = true, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
+    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, backdropClassName, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, extendedSplitSidebarPosition = 'right', fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = true, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
+    const bodyContentRef = useRef(null);
+    const [hasTopSeparator, setHasTopSeparator] = useState(false);
+    const [hasBottomSeparator, setHasBottomSeparator] = useState(false);
+    const scrollCleanupRef = useRef(null);
+    const handleBodyContainerRef = useCallback((node) => {
+        if (scrollCleanupRef.current) {
+            scrollCleanupRef.current();
+            scrollCleanupRef.current = null;
+        }
+        if (!node) {
+            setHasTopSeparator(false);
+            setHasBottomSeparator(false);
+            return;
+        }
+        const checkScroll = () => {
+            const { scrollTop, scrollHeight, clientHeight } = node;
+            setHasTopSeparator(scrollTop > 0);
+            setHasBottomSeparator(scrollTop + clientHeight < scrollHeight);
+        };
+        const rafId = requestAnimationFrame(checkScroll);
+        node.addEventListener('scroll', checkScroll);
+        const observer = new ResizeObserver(checkScroll);
+        observer.observe(node);
+        const content = bodyContentRef.current;
+        if (content) {
+            observer.observe(content);
+        }
+        scrollCleanupRef.current = () => {
+            cancelAnimationFrame(rafId);
+            node.removeEventListener('scroll', checkScroll);
+            observer.disconnect();
+        };
+    }, []);
     const modalControl = useMemo(() => ({
         loading,
         modalStatusType: modalStatusType,
     }), [loading, modalStatusType]);
     const { Container: ModalContainer } = useModalContainer();
-    const renderModalFooter = () => (jsx(ModalFooter, { actionsButtonLayout: actionsButtonLayout, annotation: annotation, auxiliaryContentButtonProps: auxiliaryContentButtonProps, auxiliaryContentButtonText: auxiliaryContentButtonText, auxiliaryContentChecked: auxiliaryContentChecked, auxiliaryContentLabel: auxiliaryContentLabel, auxiliaryContentOnChange: auxiliaryContentOnChange, auxiliaryContentOnClick: auxiliaryContentOnClick, auxiliaryContentType: auxiliaryContentType, cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, loading: loading, onCancel: onCancel, onConfirm: onConfirm, passwordButtonProps: passwordButtonProps, passwordButtonText: passwordButtonText, passwordChecked: passwordChecked, passwordCheckedLabel: passwordCheckedLabel, passwordCheckedOnChange: passwordCheckedOnChange, passwordOnClick: passwordOnClick, showCancelButton: showCancelButton }));
+    const renderModalFooter = () => (jsx(ModalFooter, { ...{
+            actionsButtonLayout,
+            annotation,
+            auxiliaryContentButtonProps,
+            auxiliaryContentButtonText,
+            auxiliaryContentChecked,
+            auxiliaryContentLabel,
+            auxiliaryContentOnChange,
+            auxiliaryContentOnClick,
+            auxiliaryContentType,
+            cancelButtonProps,
+            cancelText,
+            confirmButtonProps,
+            confirmText: confirmText,
+            loading,
+            onCancel,
+            onConfirm,
+            passwordButtonProps,
+            passwordButtonText,
+            passwordChecked,
+            passwordCheckedLabel,
+            passwordCheckedOnChange,
+            passwordOnClick,
+            showCancelButton,
+        } }));
     return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: backdropClassName, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsxs("div", { ...rest, className: cx(modalClasses.host, modalClasses.modalStatusType(modalStatusType), modalClasses.size(size), {
                     [modalClasses.fullScreen]: fullScreen,
                     [modalClasses.withCloseIcon]: showDismissButton,
-                }, className), role: "dialog", children: [showModalHeader && (jsx(ModalHeader, { showStatusTypeIcon: showStatusTypeIcon, statusTypeIconLayout: statusTypeIconLayout, supportingText: supportingText, supportingTextAlign: supportingTextAlign, title: title, titleAlign: titleAlign })), modalType === 'extendedSplit' && (jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplit, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitRight, children: extendedSplitRightSideContent }), jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplitLeft, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitLeftSideContent, children: extendedSplitLeftSideContent }), showModalFooter && renderModalFooter()] })] })), (modalType === 'standard' ||
+                }, className), role: "dialog", children: [showModalHeader && (jsx(ModalHeader, { ...{
+                            showStatusTypeIcon,
+                            statusTypeIconLayout,
+                            supportingText,
+                            supportingTextAlign,
+                            title: title,
+                            titleAlign,
+                        } })), modalType === 'extendedSplit' && (jsxs("div", { className: cx(modalClasses.modalBodyContainerExtendedSplit, {
+                            [modalClasses.modalBodyContainerExtendedSplitSidebarLeft]: extendedSplitSidebarPosition === 'left',
+                        }), children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitRight, children: extendedSplitRightSideContent }), jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplitLeft, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitLeftSideContent, children: extendedSplitLeftSideContent }), showModalFooter && renderModalFooter()] })] })), (modalType === 'standard' ||
                         modalType === 'verification' ||
                         modalType === 'extended' ||
-                        modalType === 'mediaPreview') && (jsxs(Fragment, { children: [children && (jsx("div", { className: modalClasses.modalBodyContainer, children: children })), showModalFooter && renderModalFooter()] })), showDismissButton && (jsx(ClearActions, { onClick: onClose, className: modalClasses.closeIcon, variant: "base" }))] }) }) }));
+                        modalType === 'mediaPreview') && (jsxs(Fragment, { children: [children && (jsx("div", { ref: handleBodyContainerRef, className: cx(modalClasses.modalBodyContainer, {
+                                    [modalClasses.modalBodyContainerWithTopSeparator]: modalType === 'extended' || hasTopSeparator,
+                                    [modalClasses.modalBodyContainerWithBottomSeparator]: modalType === 'extended' || hasBottomSeparator,
+                                }), children: jsx("div", { ref: bodyContentRef, children: children }) })), showModalFooter && renderModalFooter()] })), showDismissButton && (jsx(ClearActions, { onClick: onClose, className: modalClasses.closeIcon, variant: "base" }))] }) }) }));
 });
 
 export { Modal as default };

package/Modal/ModalBodyForVerification.js

@@ -89,7 +89,9 @@ const ModalBodyForVerification = forwardRef(function ModalBodyForVerification(pr
     const handleInputChange = (index, e) => {
         handleChange(index, e.target.value);
     };
-    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalBodyVerification, className), children: [jsx("div", { className: modalClasses.modalBodyVerificationInputs, children: Array.from({ length }).map((_, index) => (jsx("input", { ref: (el) => {
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalBodyVerification, className), children: [jsx("div", { className: cx(modalClasses.modalBodyVerificationInputs, {
+                    [modalClasses.modalBodyVerificationInputsExtended]: length > 4,
+                }), children: Array.from({ length }).map((_, index) => (jsx("input", { ref: (el) => {
                         inputRefs.current[index] = el;
                     }, type: "text", inputMode: "numeric", maxLength: 1, value: codes[index] || '', onChange: (e) => handleInputChange(index, e), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, className: cx(modalClasses.modalBodyVerificationInput, {
                         [modalClasses.modalBodyVerificationInputError]: error,

package/Modal/ModalFooter.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { ButtonProps } from '../Button/Button';
-export interface ModalFooterProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+interface ModalFooterBaseProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * Layout of action buttons.
      * - 'fixed': Buttons maintain fixed width
@@ -58,10 +58,6 @@ export interface ModalFooterProps extends NativeElementPropsWithoutKeyAndRef<'di
      * Additional props for the cancel button.
      */
     cancelButtonProps?: ButtonProps;
-    /**
-     * Text content of the cancel button.
-     */
-    cancelText?: ReactNode;
     /**
      * Additional props for the confirm button.
      */
@@ -112,12 +108,31 @@ export interface ModalFooterProps extends NativeElementPropsWithoutKeyAndRef<'di
      * Only used when auxiliaryContentType is 'password'.
      */
     passwordOnClick?: ButtonProps['onClick'];
+}
+interface ModalFooterWithCancelButtonProps extends ModalFooterBaseProps {
+    /**
+     * Text content of the cancel button.
+     * Required when cancel button is shown (showCancelButton is true or not provided).
+     */
+    cancelText: ReactNode;
     /**
      * Whether to show the cancel button.
      * @default true
      */
-    showCancelButton?: boolean;
+    showCancelButton?: true;
+}
+interface ModalFooterWithoutCancelButtonProps extends ModalFooterBaseProps {
+    /**
+     * Text content of the cancel button.
+     * Cannot be provided when showCancelButton is false.
+     */
+    cancelText?: never;
+    /**
+     * Whether to show the cancel button.
+     */
+    showCancelButton: false;
 }
+export type ModalFooterProps = ModalFooterWithCancelButtonProps | ModalFooterWithoutCancelButtonProps;
 /**
  * The react component for `mezzanine` modal footer.
  */

package/Modal/ModalHeader.d.ts

@@ -1,36 +1,75 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface ModalHeaderProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+interface ModalHeaderBaseProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * Whether to show status type icon.
      * @default false
      */
     showStatusTypeIcon?: boolean;
+    /**
+     * Supporting text displayed below the title.
+     */
+    supportingText?: string;
+    /**
+     * The title text of the modal header.
+     */
+    title: string;
+}
+interface ModalHeaderHorizontalIconProps extends ModalHeaderBaseProps {
     /**
      * Layout of the status type icon relative to title.
-     * - 'vertical': Icon above title
      * - 'horizontal': Icon to the left of title
-     * @default 'vertical'
      */
-    statusTypeIconLayout?: 'vertical' | 'horizontal';
+    statusTypeIconLayout: 'horizontal';
     /**
-     * Supporting text displayed below the title.
+     * Alignment of the supporting text.
+     * Only 'left' is allowed when statusTypeIconLayout is 'horizontal'.
+     * @default 'left'
      */
-    supportingText?: string;
+    supportingTextAlign?: 'left';
     /**
-     * Alignment of the supporting text.
+     * Alignment of the title.
+     * Only 'left' is allowed when statusTypeIconLayout is 'horizontal'.
      * @default 'left'
      */
-    supportingTextAlign?: 'left' | 'center';
+    titleAlign?: 'left';
+}
+interface ModalHeaderVerticalLeftTitleProps extends ModalHeaderBaseProps {
     /**
-     * The title text of the modal header.
+     * Layout of the status type icon relative to title.
+     * - 'vertical': Icon above title
+     * @default 'vertical'
      */
-    title: string;
+    statusTypeIconLayout?: 'vertical';
+    /**
+     * Alignment of the supporting text.
+     * Only 'left' is allowed when titleAlign is 'left'.
+     * @default 'left'
+     */
+    supportingTextAlign?: 'left';
     /**
      * Alignment of the title.
      * @default 'left'
      */
-    titleAlign?: 'left' | 'center';
+    titleAlign?: 'left';
+}
+interface ModalHeaderVerticalCenterTitleProps extends ModalHeaderBaseProps {
+    /**
+     * Layout of the status type icon relative to title.
+     * - 'vertical': Icon above title
+     * @default 'vertical'
+     */
+    statusTypeIconLayout?: 'vertical';
+    /**
+     * Alignment of the supporting text.
+     * @default 'left'
+     */
+    supportingTextAlign?: 'left' | 'center';
+    /**
+     * Alignment of the title.
+     */
+    titleAlign: 'center';
 }
+export type ModalHeaderProps = ModalHeaderHorizontalIconProps | ModalHeaderVerticalCenterTitleProps | ModalHeaderVerticalLeftTitleProps;
 /**
  * The React component for `mezzanine` modal header.
  */

package/Modal/ModalHeader.js

@@ -37,7 +37,7 @@ const ModalHeader = forwardRef(function ModalHeader(props, ref) {
             [modalClasses.modalHeader + '--title-align-left']: titleAlign === 'left',
             [modalClasses.modalHeader + '--title-align-center']: titleAlign === 'center',
             [modalClasses.modalHeader + '--show-modal-status-type-icon']: showStatusTypeIcon,
-        }, className), children: [showStatusTypeIcon && (jsx("div", { className: cx(modalClasses.modalHeaderStatusTypeIcon), children: jsx(Icon, { icon: modalStatusTypeIcons[modalStatusType], color: iconColor(modalStatusType), size: 20 }) })), jsxs("div", { className: cx(modalClasses.modalHeaderTitleAndSupportingTextContainer), children: [jsx(Typography, { variant: "h3", color: "text-neutral-solid", className: cx(modalClasses.modalHeaderTitle), title: typeof title === 'string' ? title : undefined, children: title }), jsx(Typography, { variant: "body", color: "text-neutral-strong", className: cx(modalClasses.modalHeaderSupportingText, {
+        }, className), children: [showStatusTypeIcon && (jsx("div", { className: cx(modalClasses.modalHeaderStatusTypeIcon), children: jsx(Icon, { icon: modalStatusTypeIcons[modalStatusType], color: iconColor(modalStatusType), size: 20 }) })), jsxs("div", { className: cx(modalClasses.modalHeaderTitleAndSupportingTextContainer), children: [jsx(Typography, { variant: "h2", color: "text-neutral-solid", className: cx(modalClasses.modalHeaderTitle), title: typeof title === 'string' ? title : undefined, children: title }), jsx(Typography, { variant: "body", color: "text-neutral-strong", className: cx(modalClasses.modalHeaderSupportingText, {
                             [modalClasses.modalHeaderSupportingText + '--align-left']: supportingTextAlign === 'left',
                             [modalClasses.modalHeaderSupportingText + '--align-center']: supportingTextAlign === 'center',
                         }), children: supportingText })] })] }));

package/Modal/index.d.ts

@@ -9,5 +9,5 @@ export type { MediaPreviewModalProps } from './MediaPreviewModal';
 export { default as MediaPreviewModal } from './MediaPreviewModal';
 export { default as useModalContainer } from './useModalContainer';
 export type { ModalContainerProps } from './useModalContainer';
-export type { ModalProps } from './Modal';
+export type { ModalFooterCancelProps, ModalHeaderLayoutProps, ModalProps, } from './Modal';
 export { default } from './Modal';

package/Navigation/Navigation.js

@@ -12,6 +12,7 @@ import { useCurrentPathname } from './useCurrentPathname.js';
 import { useVisibleItems } from './useVisibleItems.js';
 import { NavigationOverflowMenu } from './NavigationOverflowMenu.js';
 import Input from '../Input/Input.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
 import cx from 'clsx';
 
 const Navigation = forwardRef((props, ref) => {
@@ -102,29 +103,37 @@ const Navigation = forwardRef((props, ref) => {
         };
         checkActivatedPathKey(level1Items, []);
         hrefActivated.current = true;
-    }, [combineSetActivatedPath, currentPathname, exactActivatedMatch, level1Items]);
+    }, [
+        combineSetActivatedPath,
+        currentPathname,
+        exactActivatedMatch,
+        level1Items,
+    ]);
     const { contentRef, visibleCount } = useVisibleItems(items, collapsed);
-    const { collapsedItems, collapsedMenuItems } = useMemo(() => {
-        return {
-            collapsedItems: visibleCount !== null
-                ? level1Items.slice(0, visibleCount)
-                : level1Items,
-            collapsedMenuItems: visibleCount !== null ? level1Items.slice(visibleCount) : [],
-        };
+    const collapsedMenuItems = useMemo(() => {
+        return visibleCount !== null ? level1Items.slice(visibleCount) : [];
     }, [level1Items, visibleCount]);
+    const collapsedHiddenKeys = useMemo(() => {
+        if (!collapsed || visibleCount === null)
+            return new Set();
+        return new Set(level1Items
+            .slice(visibleCount)
+            .map((item) => item.props.id || item.props.title || item.props.href || ''));
+    }, [collapsed, visibleCount, level1Items]);
     const [filterText, setFilterText] = useState('');
     return (jsx("nav", { ...rest, ref: ref, className: cx(navigationClasses.host, collapsed ? navigationClasses.collapsed : navigationClasses.expand, className), children: jsxs(NavigationActivatedContext.Provider, { value: {
                 activatedPath: activatedPath || innerActivatedPath,
                 activatedPathKey,
                 collapsed,
+                collapsedHiddenKeys,
                 currentPathname,
                 filterText,
                 handleCollapseChange,
                 setActivatedPath: combineSetActivatedPath,
                 optionsAnchorComponent,
-            }, children: [headerComponent, jsx(NavigationOptionLevelContext.Provider, { value: navigationOptionLevelContextDefaultValues, children: jsxs("div", { ref: contentRef, className: navigationClasses.content, children: [filter && (jsx(Input, { size: "sub", variant: "search", className: cx(navigationClasses.searchInput), value: filterText, onChange: (e) => setFilterText(e.target.value) })), jsxs("ul", { children: [collapsed ? collapsedItems : items, collapsed &&
-                                        visibleCount !== null &&
-                                        visibleCount < level1Items.length && (jsx(NavigationOverflowMenu, { items: collapsedMenuItems }))] }, collapsed ? 'collapsed' : 'expand')] }) }), footerComponent] }) }));
+            }, children: [headerComponent, jsx(NavigationOptionLevelContext.Provider, { value: navigationOptionLevelContextDefaultValues, children: jsxs("div", { ref: contentRef, className: navigationClasses.content, children: [filter && (jsx(Input, { size: "sub", variant: "search", className: cx(navigationClasses.searchInput), value: filterText, onChange: (e) => setFilterText(e.target.value) })), jsx(Scrollbar, { disabled: collapsed, style: { flex: '1 1 0', minHeight: 0 }, children: jsxs("ul", { className: navigationClasses.list, children: [items, collapsed &&
+                                            visibleCount !== null &&
+                                            visibleCount < level1Items.length && (jsx(NavigationOverflowMenu, { items: collapsedMenuItems }))] }) })] }) }), footerComponent] }) }));
 });
 
 export { Navigation as default };

package/Navigation/NavigationHeader.js

@@ -4,13 +4,14 @@ import { navigationHeaderClasses } from '@mezzanine-ui/core/navigation';
 import { SiderIcon } from '@mezzanine-ui/icons';
 import NavigationIconButton from './NavigationIconButton.js';
 import { NavigationActivatedContext } from './context.js';
+import Fade from '../Transition/Fade.js';
 import cx from 'clsx';
 
 const NavigationHeader = forwardRef((props, ref) => {
     const { children, className, title, onBrandClick, ...rest } = props;
     const { collapsed, handleCollapseChange } = use(NavigationActivatedContext);
     const BrandComponent = onBrandClick ? 'button' : 'span';
-    return (jsxs("header", { ...rest, ref: ref, className: cx(navigationHeaderClasses.host, collapsed && navigationHeaderClasses.collapsed, className), children: [jsx(NavigationIconButton, { onClick: () => handleCollapseChange(!collapsed), icon: SiderIcon }), jsxs(BrandComponent, { type: "button", className: navigationHeaderClasses.content, onClick: onBrandClick, children: [children, jsx("span", { className: navigationHeaderClasses.title, children: collapsed ? title === null || title === void 0 ? void 0 : title[0] : title })] })] }));
+    return (jsxs("header", { ...rest, ref: ref, className: cx(navigationHeaderClasses.host, collapsed && navigationHeaderClasses.collapsed, !!children && navigationHeaderClasses.hasChildren, className), children: [jsx(NavigationIconButton, { onClick: () => handleCollapseChange(!collapsed), icon: SiderIcon }), jsxs(BrandComponent, { type: onBrandClick ? 'button' : undefined, className: navigationHeaderClasses.content, onClick: onBrandClick, children: [!!children && (jsx("span", { className: navigationHeaderClasses.childrenWrapper, children: children })), jsx(Fade, { in: !collapsed || !children, children: jsx("span", { className: navigationHeaderClasses.title, children: collapsed ? title === null || title === void 0 ? void 0 : title[0] : title }) })] })] }));
 });
 
 export { NavigationHeader as default };

package/Navigation/NavigationIconButton.d.ts

@@ -1,12 +1,20 @@
 import { IconDefinition } from '@mezzanine-ui/icons';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export type NavigationIconButtonProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children'> & {
+    /**
+     * Whether the button is in an active state.
+     */
+    active?: boolean;
     /**
      * The icon to be displayed.
      */
     icon: IconDefinition;
 };
 declare const NavigationIconButton: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"button">, "children"> & {
+    /**
+     * Whether the button is in an active state.
+     */
+    active?: boolean;
     /**
      * The icon to be displayed.
      */

package/Navigation/NavigationIconButton.js

@@ -5,8 +5,8 @@ import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 const NavigationIconButton = forwardRef((props, ref) => {
-    const { className, icon, ...rest } = props;
-    return (jsx("button", { ...rest, ref: ref, className: cx(navigationIconButtonClasses.host, className), type: "button", children: jsx(Icon, { icon: icon, size: 16 }) }));
+    const { active, className, icon, ...rest } = props;
+    return (jsx("button", { ...rest, ref: ref, className: cx(navigationIconButtonClasses.host, active && navigationIconButtonClasses.active, className), type: "button", children: jsx(Icon, { icon: icon, size: 16 }) }));
 });
 
 export { NavigationIconButton as default };

package/Navigation/NavigationOption.js

@@ -15,7 +15,7 @@ import cx from 'clsx';
 const NavigationOption = forwardRef((props, ref) => {
     var _a;
     const { active, children, className, anchorComponent, defaultOpen, href, icon, id, onTriggerClick, title, ...rest } = props;
-    const { activatedPathKey, activatedPath, collapsed, filterText, handleCollapseChange, setActivatedPath, optionsAnchorComponent, } = use(NavigationActivatedContext);
+    const { activatedPathKey, activatedPath, collapsed, collapsedHiddenKeys, filterText, handleCollapseChange, setActivatedPath, optionsAnchorComponent, } = use(NavigationActivatedContext);
     const [open, setOpen] = useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
     const GroupToggleIcon = open ? ChevronUpIcon : ChevronDownIcon;
     const { level, path: parentPath } = use(NavigationOptionLevelContext);
@@ -84,7 +84,10 @@ const NavigationOption = forwardRef((props, ref) => {
         };
     }, [title]);
     return (jsxs("li", { ...rest, ref: ref, className: cx(navigationOptionClasses.host, open && navigationOptionClasses.open, !children && navigationOptionClasses.basic, (active !== null && active !== void 0 ? active : (activatedPath === null || activatedPath === void 0 ? void 0 : activatedPath[currentLevel - 1]) === currentKey) &&
-            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, !collapsed && !filter && navigationOptionClasses.hidden, className), "data-id": currentKey, children: [jsx(Tooltip, { disablePortal: false, options: {
+            navigationOptionClasses.active, collapsed && navigationOptionClasses.collapsed, (collapsed && collapsedHiddenKeys.has(currentKey)) ||
+            (!collapsed && !filter)
+            ? navigationOptionClasses.hidden
+            : undefined, className), "data-id": currentKey, children: [jsx(Tooltip, { disablePortal: false, offsetMainAxis: 8 + 6 /* 6 is the padding of the item */, options: {
                     placement: collapsed ? 'right' : 'top',
                 }, title: collapsed || titleOverflow ? title : undefined, children: ({ onMouseEnter, onMouseLeave, ref: tooltipChildRef }) => (jsxs(Component, { className: cx(navigationOptionClasses.content, navigationOptionClasses.level(currentLevel)), href: Component === 'div' ? undefined : href, onClick: () => {
                         setOpen(!open);
@@ -101,7 +104,7 @@ const NavigationOption = forwardRef((props, ref) => {
                             if (!children)
                                 setActivatedPath(currentPath);
                         }
-                    }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx(Fade, { ref: titleRef, in: collapsed === false || !icon, children: jsx("span", { className: navigationOptionClasses.title, children: title }) }), badge, children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { lazyMount: true, className: cx(navigationOptionClasses.childrenWrapper), in: open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
+                    }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: tooltipChildRef, role: "menuitem", tabIndex: 0, children: [icon && jsx(Icon, { className: navigationOptionClasses.icon, icon: icon }), jsx("span", { className: navigationOptionClasses.titleWrapper, children: jsx(Fade, { ref: titleRef, in: collapsed === false || !icon, children: jsx("span", { className: navigationOptionClasses.title, children: title }) }) }), badge, children && (jsx(Icon, { className: navigationOptionClasses.toggleIcon, icon: GroupToggleIcon }))] })) }), children && !collapsed && (jsx(Collapse, { lazyMount: true, className: cx(navigationOptionClasses.childrenWrapper), in: open, children: jsx(NavigationOptionLevelContext.Provider, { value: {
                         level: currentLevel,
                         path: currentPath,
                     }, children: jsx("ul", { className: navigationOptionClasses.group, children: items }) }) }))] }));