@mezzanine-ui/react 1.0.0-rc.0 → 1.0.0-rc.2

package/Description/DescriptionContext.js

@@ -0,0 +1,9 @@
+'use client';
+import { createContext, useContext } from 'react';
+
+const DescriptionContext = createContext({
+    size: 'main',
+});
+const useDescriptionContext = () => useContext(DescriptionContext);
+
+export { DescriptionContext, useDescriptionContext };

package/Description/index.d.ts

@@ -6,3 +6,5 @@ export { default as DescriptionContent } from './DescriptionContent';
 export type { DescriptionContentProps } from './DescriptionContent';
 export { default as DescriptionGroup } from './DescriptionGroup';
 export type { DescriptionGroupProps } from './DescriptionGroup';
+export { DescriptionContext } from './DescriptionContext';
+export type { DescriptionContextValue } from './DescriptionContext';

package/Description/index.js

@@ -2,3 +2,4 @@ export { default as Description } from './Description.js';
 export { default as DescriptionTitle } from './DescriptionTitle.js';
 export { default as DescriptionContent } from './DescriptionContent.js';
 export { default as DescriptionGroup } from './DescriptionGroup.js';
+export { DescriptionContext } from './DescriptionContext.js';

package/Form/FormField.d.ts

@@ -37,6 +37,12 @@ export interface FormFieldProps extends NativeElementPropsWithoutKeyAndRef<'div'
      * The icon to display alongside the hint text.
      */
     hintTextIcon?: IconDefinition;
+    /**
+     * Whether to display the hint text icon.
+     * When false, neither the custom icon nor the default severity icon will be shown.
+     * @default true
+     */
+    showHintTextIcon?: boolean;
     /**
      * The label text for the form field.
      */

package/Form/FormField.js

@@ -10,7 +10,7 @@ import cx from 'clsx';
  * The React component for `mezzanine` form field.
  */
 const FormField = forwardRef(function FormField(props, ref) {
-    const { children, className, counter, counterColor, controlFieldSlotLayout = ControlFieldSlotLayout.MAIN, density, disabled = false, fullWidth = false, hintText, hintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, labelSpacing = FormFieldLabelSpacing.MAIN, layout = FormFieldLayout.HORIZONTAL, name, required = false, severity = 'info', ...rest } = props;
+    const { children, className, counter, counterColor, controlFieldSlotLayout = ControlFieldSlotLayout.MAIN, density, disabled = false, fullWidth = false, hintText, hintTextIcon, showHintTextIcon, label, labelInformationIcon, labelInformationText, labelOptionalMarker, labelSpacing = FormFieldLabelSpacing.MAIN, layout = FormFieldLayout.HORIZONTAL, name, required = false, severity = 'info', ...rest } = props;
     const formControl = {
         disabled,
         fullWidth,
@@ -30,7 +30,7 @@ const FormField = forwardRef(function FormField(props, ref) {
             [formFieldClasses.fullWidth]: fullWidth,
         }, className), children: jsxs(FormControlContext.Provider, { value: formControl, children: [label && (jsx(FormLabel, { className: cx(formFieldClasses.labelArea, labelSpacingClass), htmlFor: name, informationIcon: labelInformationIcon, informationText: labelInformationText, labelText: label, optionalMarker: labelOptionalMarker })), jsxs("div", { className: cx(formFieldClasses.dataEntry), children: [jsx("div", { className: cx(`${formFieldClasses.controlFieldSlot}--${controlFieldSlotLayout}`), children: children }), hintText || hintTextIcon || counter ? (jsxs("div", { className: cx(formFieldClasses.hintTextAndCounterArea, {
                                 [formFieldClasses.hintTextAndCounterArea + '--align-right']: !(hintText || hintTextIcon) && counter,
-                            }), children: [(hintText || hintTextIcon) && (jsx(FormHintText, { hintText: hintText, hintTextIcon: hintTextIcon, severity: severity })), counter && (jsx("span", { className: cx(formFieldClasses.counter, formFieldClasses.counterColor(counterColor || FormFieldCounterColor.INFO)), children: counter }))] })) : null] })] }) }));
+                            }), children: [(hintText || hintTextIcon) && (jsx(FormHintText, { hintText: hintText, hintTextIcon: hintTextIcon, severity: severity, showHintTextIcon: showHintTextIcon })), counter && (jsx("span", { className: cx(formFieldClasses.counter, formFieldClasses.counterColor(counterColor || FormFieldCounterColor.INFO)), children: counter }))] })) : null] })] }) }));
 });
 
 export { FormField as default };

package/Form/FormHintText.d.ts

@@ -17,6 +17,12 @@ export type FormHintTextProps = NativeElementPropsWithoutKeyAndRef<'span'> & {
      * if not provided, no icon will be displayed.
      */
     severity?: keyof typeof formHintIcons | undefined;
+    /**
+     * Whether to display the hint text icon.
+     * When false, neither the custom icon nor the default severity icon will be shown.
+     * @default true
+     */
+    showHintTextIcon?: boolean;
 };
 /**
  * The React component for `mezzanine` form message.
@@ -37,5 +43,11 @@ declare const FormHintText: import("react").ForwardRefExoticComponent<NativeElem
      * if not provided, no icon will be displayed.
      */
     severity?: keyof typeof formHintIcons | undefined;
+    /**
+     * Whether to display the hint text icon.
+     * When false, neither the custom icon nor the default severity icon will be shown.
+     * @default true
+     */
+    showHintTextIcon?: boolean;
 } & import("react").RefAttributes<HTMLSpanElement>>;
 export default FormHintText;

package/Form/FormHintText.js

@@ -9,9 +9,10 @@ import cx from 'clsx';
  * The React component for `mezzanine` form message.
  */
 const FormHintText = forwardRef(function FormHintText(props, ref) {
-    const { className, hintText, hintTextIcon, severity = 'info', ...rest } = props;
+    const { className, hintText, hintTextIcon, severity = 'info', showHintTextIcon = true, ...rest } = props;
     const defaultIcon = severity ? formHintIcons[severity] : null;
-    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [hintTextIcon ? (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: hintTextIcon, color: severity })) : (defaultIcon && (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: defaultIcon, color: severity }))), hintText] }));
+    return (jsxs("span", { ...rest, ref: ref, className: cx(formFieldClasses.hintText, severity ? formFieldClasses.hintTextSeverity(severity) : undefined, className), children: [showHintTextIcon &&
+                (hintTextIcon ? (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: hintTextIcon, color: severity })) : (defaultIcon && (jsx(Icon, { className: formFieldClasses.hintTextIcon, icon: defaultIcon, color: severity })))), hintText] }));
 });
 
 export { FormHintText as default };

package/Layout/Layout.d.ts

@@ -1,16 +1,32 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { LayoutLeftPanel, LayoutLeftPanelProps } from './LayoutLeftPanel';
 import { LayoutMain, LayoutMainProps } from './LayoutMain';
-import { LayoutSidePanel, LayoutSidePanelProps } from './LayoutSidePanel';
+import { LayoutRightPanel, LayoutRightPanelProps } from './LayoutRightPanel';
+export { LayoutLeftPanel };
+export type { LayoutLeftPanelProps };
 export { LayoutMain };
 export type { LayoutMainProps };
-export { LayoutSidePanel };
-export type { LayoutSidePanelProps };
+export { LayoutRightPanel };
+export type { LayoutRightPanelProps };
 export interface LayoutProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /** The slot children: use `Layout.Main` and `Layout.SidePanel` as direct children. */
+    /**
+     * Slot children. Place `<Navigation>`, `<Layout.LeftPanel>`, `<Layout.Main>`,
+     * and `<Layout.RightPanel>` as direct children in any order.
+     * They will be re-ordered into the correct DOM sequence automatically.
+     */
     children?: React.ReactNode;
+    /**
+     * Additional class name applied to the content wrapper element.
+     */
+    contentWrapperClassName?: string;
+    /**
+     * Additional class name applied to the navigation wrapper element. Only has effect if a `<Navigation>` component is provided as a child.
+     */
+    navigationClassName?: string;
 }
 declare const LayoutWithSubComponents: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<HTMLDivElement>> & {
+    LeftPanel: typeof LayoutLeftPanel;
     Main: typeof LayoutMain;
-    SidePanel: typeof LayoutSidePanel;
+    RightPanel: typeof LayoutRightPanel;
 };
 export default LayoutWithSubComponents;

package/Layout/Layout.js

@@ -2,36 +2,40 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, Children, isValidElement } from 'react';
 import { layoutClasses } from '@mezzanine-ui/core/layout';
 import { LayoutHost } from './LayoutHost.js';
+import { LayoutLeftPanel } from './LayoutLeftPanel.js';
 import { LayoutMain } from './LayoutMain.js';
-import { LayoutSidePanel } from './LayoutSidePanel.js';
+import { LayoutRightPanel } from './LayoutRightPanel.js';
+import Navigation from '../Navigation/Navigation.js';
+import cx from 'clsx';
 
 const Layout = forwardRef(function Layout(props, ref) {
-    const { children, ...rest } = props;
-    let mainContent = null;
-    let sidePanelNode = null;
-    let initialOpen = false;
-    let initialSidePanelWidth = 320;
+    const { children, contentWrapperClassName, navigationClassName, ...rest } = props;
+    let navigationNode = null;
+    let leftPanelNode = null;
+    let mainNode = null;
+    let rightPanelNode = null;
     Children.forEach(children, (child) => {
-        var _a, _b;
         if (!isValidElement(child))
             return;
-        if (child.type === LayoutMain) {
-            mainContent = child.props
-                .children;
+        if (child.type === Navigation) {
+            navigationNode = child;
         }
-        else if (child.type === LayoutSidePanel) {
-            const sidePanelChild = child;
-            sidePanelNode = sidePanelChild;
-            initialOpen = (_a = sidePanelChild.props.open) !== null && _a !== void 0 ? _a : false;
-            initialSidePanelWidth =
-                (_b = sidePanelChild.props.defaultSidePanelWidth) !== null && _b !== void 0 ? _b : 320;
+        else if (child.type === LayoutLeftPanel) {
+            leftPanelNode = child;
+        }
+        else if (child.type === LayoutMain) {
+            mainNode = child;
+        }
+        else if (child.type === LayoutRightPanel) {
+            rightPanelNode = child;
         }
     });
-    return (jsxs(LayoutHost, { ...rest, initialOpen: initialOpen, initialSidePanelWidth: initialSidePanelWidth, ref: ref, children: [jsx("main", { className: layoutClasses.main, children: mainContent }), sidePanelNode] }));
+    return (jsxs(LayoutHost, { ...rest, ref: ref, children: [navigationNode && (jsx("div", { className: cx(layoutClasses.navigation, navigationClassName), children: navigationNode })), jsxs("div", { className: cx(layoutClasses.contentWrapper, contentWrapperClassName), children: [leftPanelNode, mainNode, rightPanelNode] })] }));
 });
 const LayoutWithSubComponents = Object.assign(Layout, {
+    LeftPanel: LayoutLeftPanel,
     Main: LayoutMain,
-    SidePanel: LayoutSidePanel,
+    RightPanel: LayoutRightPanel,
 });
 
-export { LayoutMain, LayoutSidePanel, LayoutWithSubComponents as default };
+export { LayoutLeftPanel, LayoutMain, LayoutRightPanel, LayoutWithSubComponents as default };

package/Layout/LayoutContext.d.ts

@@ -1,7 +1,7 @@
-export interface LayoutPanelContextValue {
-    onPanelStateChange: (state: {
-        isOpen: boolean;
-        width: number;
-    }) => void;
+import { RefObject } from 'react';
+export interface LayoutContextValue {
+    hostRef: RefObject<HTMLDivElement | null>;
+    mainRef: RefObject<HTMLDivElement | null>;
+    registerMain: (el: HTMLDivElement | null) => void;
 }
-export declare const LayoutPanelContext: import("react").Context<LayoutPanelContextValue | undefined>;
+export declare const LayoutContext: import("react").Context<LayoutContextValue | null>;

package/Layout/LayoutContext.js

@@ -1,6 +1,6 @@
 'use client';
 import { createContext } from 'react';
 
-const LayoutPanelContext = createContext(undefined);
+const LayoutContext = createContext(null);
 
-export { LayoutPanelContext };
+export { LayoutContext };

package/Layout/LayoutHost.d.ts

@@ -2,9 +2,5 @@ import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface LayoutHostProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /** The content rendered inside the layout host. */
     children?: React.ReactNode;
-    /** SSR hint: initial open state read from LayoutSidePanel.props.open */
-    initialOpen?: boolean;
-    /** SSR hint: initial width read from LayoutSidePanel.props.defaultSidePanelWidth */
-    initialSidePanelWidth?: number;
 }
 export declare const LayoutHost: import("react").ForwardRefExoticComponent<LayoutHostProps & import("react").RefAttributes<HTMLDivElement>>;

package/Layout/LayoutHost.js

@@ -1,23 +1,26 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, useMemo } from 'react';
+import { forwardRef, useRef, useCallback, useMemo } from 'react';
 import { layoutClasses } from '@mezzanine-ui/core/layout';
-import { LayoutPanelContext } from './LayoutContext.js';
+import { LayoutContext } from './LayoutContext.js';
 import cx from 'clsx';
 
-const MIN_PANEL_WIDTH = 240;
 const LayoutHost = forwardRef(function LayoutHost(props, ref) {
-    const { children, className, initialOpen = false, initialSidePanelWidth = 320, style, ...rest } = props;
-    const [isOpen, setIsOpen] = useState(initialOpen);
-    const [sidePanelWidth, setSidePanelWidth] = useState(() => Math.max(MIN_PANEL_WIDTH, initialSidePanelWidth));
-    const onPanelStateChange = useCallback(({ isOpen: nextIsOpen, width }) => {
-        setIsOpen(nextIsOpen);
-        setSidePanelWidth(width);
+    const { children, className, ...rest } = props;
+    const hostRef = useRef(null);
+    const mainRef = useRef(null);
+    const registerMain = useCallback((el) => {
+        mainRef.current = el;
     }, []);
-    const contextValue = useMemo(() => ({ onPanelStateChange }), [onPanelStateChange]);
-    return (jsx(LayoutPanelContext.Provider, { value: contextValue, children: jsx("div", { ...rest, className: cx(layoutClasses.host, { [layoutClasses.hostOpen]: isOpen }, className), ref: ref, style: {
-                ...style,
-                '--mzn-layout-side-panel-width': `${sidePanelWidth}px`,
+    const contextValue = useMemo(() => ({ hostRef, mainRef, registerMain }), [registerMain]);
+    return (jsx(LayoutContext.Provider, { value: contextValue, children: jsx("div", { ...rest, className: cx(layoutClasses.host, className), ref: (node) => {
+                hostRef.current = node;
+                if (typeof ref === 'function') {
+                    ref(node);
+                }
+                else if (ref) {
+                    ref.current = node;
+                }
             }, children: children }) }));
 });
 

package/Layout/LayoutLeftPanel.d.ts

@@ -0,0 +1,19 @@
+import { ScrollbarProps } from '../Scrollbar';
+export interface LayoutLeftPanelProps {
+    /** The content rendered inside the left panel. */
+    children?: React.ReactNode;
+    /** Additional class name applied to the panel element. */
+    className?: string;
+    /** Initial width (in px) of the panel. Clamped to a minimum of 240px. */
+    defaultWidth?: number;
+    /** Callback fired when the panel width changes during resize. */
+    onWidthChange?: (width: number) => void;
+    /** Controls whether the panel and its divider are visible. */
+    open?: boolean;
+    /** Props passed to the internal `Scrollbar` component. */
+    scrollbarProps?: Omit<ScrollbarProps, 'children'>;
+}
+export declare function LayoutLeftPanel({ children, className, defaultWidth, onWidthChange, open, scrollbarProps, }: LayoutLeftPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace LayoutLeftPanel {
+    var displayName: string;
+}

package/Layout/LayoutLeftPanel.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext, useState, useRef, useEffect, useCallback } from 'react';
+import { layoutClasses } from '@mezzanine-ui/core/layout';
+import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
+import { LayoutContext } from './LayoutContext.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
+import cx from 'clsx';
+
+const MIN_PANEL_WIDTH = 240;
+const CONTENT_WRAPPER_MIN_WIDTH = 480;
+const ARROW_KEY_STEP = 10;
+function LayoutLeftPanel({ children, className, defaultWidth = 320, onWidthChange, open = false, scrollbarProps = {}, }) {
+    const context = useContext(LayoutContext);
+    const [isDragging, setIsDragging] = useState(false);
+    const [width, setWidth] = useState(() => Math.max(MIN_PANEL_WIDTH, defaultWidth));
+    const dragStartRef = useRef(null);
+    const rafIdRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (rafIdRef.current !== null) {
+                window.cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+        };
+    }, []);
+    const handleDividerMouseDown = useCallback((e) => {
+        var _a;
+        e.preventDefault();
+        const mainWidth = ((_a = context === null || context === void 0 ? void 0 : context.mainRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
+        const maxWidth = width + Math.max(0, mainWidth - CONTENT_WRAPPER_MIN_WIDTH);
+        setIsDragging(true);
+        dragStartRef.current = { maxWidth, width, x: e.clientX };
+    }, [context, width]);
+    const handleDividerKeyDown = useCallback((e) => {
+        var _a;
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+            return;
+        e.preventDefault();
+        const mainWidth = ((_a = context === null || context === void 0 ? void 0 : context.mainRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
+        const maxWidth = width + Math.max(0, mainWidth - CONTENT_WRAPPER_MIN_WIDTH);
+        const step = e.key === 'ArrowRight' ? ARROW_KEY_STEP : -ARROW_KEY_STEP;
+        const newWidth = Math.min(maxWidth, Math.max(MIN_PANEL_WIDTH, width + step));
+        setWidth(newWidth);
+        onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(newWidth);
+    }, [context, onWidthChange, width]);
+    useDocumentEvents(() => {
+        if (!isDragging)
+            return undefined;
+        return {
+            mousemove: (e) => {
+                if (!dragStartRef.current)
+                    return;
+                if (rafIdRef.current !== null) {
+                    window.cancelAnimationFrame(rafIdRef.current);
+                }
+                rafIdRef.current = window.requestAnimationFrame(() => {
+                    rafIdRef.current = null;
+                    if (!dragStartRef.current)
+                        return;
+                    const delta = e.clientX - dragStartRef.current.x;
+                    const newWidth = dragStartRef.current.width + delta;
+                    const clamped = Math.min(dragStartRef.current.maxWidth, Math.max(MIN_PANEL_WIDTH, newWidth));
+                    setWidth(clamped);
+                    onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(clamped);
+                });
+            },
+            mouseup: () => {
+                if (rafIdRef.current !== null) {
+                    window.cancelAnimationFrame(rafIdRef.current);
+                    rafIdRef.current = null;
+                }
+                setIsDragging(false);
+                dragStartRef.current = null;
+            },
+        };
+    }, [isDragging, onWidthChange]);
+    if (!open)
+        return null;
+    return (jsxs("aside", { "aria-label": "Left panel", className: cx(layoutClasses.sidePanel, layoutClasses.sidePanelLeft, className), style: { inlineSize: width }, children: [jsx("div", { className: layoutClasses.sidePanelContent, children: jsx(Scrollbar, { ...scrollbarProps, children: children }) }), jsx("div", { "aria-label": "Resize left panel", "aria-orientation": "vertical", "aria-valuemin": MIN_PANEL_WIDTH, "aria-valuenow": width, className: cx(layoutClasses.divider, {
+                    [layoutClasses.dividerDragging]: isDragging,
+                }), onKeyDown: handleDividerKeyDown, onMouseDown: handleDividerMouseDown, role: "separator", tabIndex: 0 })] }));
+}
+LayoutLeftPanel.displayName = 'Layout.LeftPanel';
+
+export { LayoutLeftPanel };

package/Layout/LayoutMain.d.ts

@@ -1,8 +1,17 @@
+import { ScrollbarProps } from '../Scrollbar';
 export interface LayoutMainProps {
     /** The content rendered inside the main area. */
     children?: React.ReactNode;
+    /**
+     * Additional class name applied to the main element.
+     */
+    className?: string;
+    /**
+     * Props passed to the internal `Scrollbar` component. If not provided, the main area will still be scrollable but without the custom scrollbar styling and behavior.
+     */
+    scrollbarProps?: Omit<ScrollbarProps, 'children'>;
 }
-export declare function LayoutMain({ children }: LayoutMainProps): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutMain(props: LayoutMainProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace LayoutMain {
     var displayName: string;
 }

package/Layout/LayoutMain.js

@@ -1,7 +1,16 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { layoutClasses } from '@mezzanine-ui/core/layout';
+import { LayoutContext } from './LayoutContext.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
+import cx from 'clsx';
 
-function LayoutMain({ children }) {
-    return jsx(Fragment, { children: children });
+function LayoutMain(props) {
+    var _a;
+    const { children, className, scrollbarProps = {} } = props;
+    const context = useContext(LayoutContext);
+    return (jsx("div", { ref: (_a = context === null || context === void 0 ? void 0 : context.registerMain) !== null && _a !== void 0 ? _a : null, className: cx(layoutClasses.main, className), children: jsx(Scrollbar, { ...scrollbarProps, children: jsx("div", { className: layoutClasses.mainContent, children: children }) }) }));
 }
 LayoutMain.displayName = 'Layout.Main';
 

package/Layout/LayoutRightPanel.d.ts

@@ -0,0 +1,19 @@
+import { ScrollbarProps } from '../Scrollbar';
+export interface LayoutRightPanelProps {
+    /** The content rendered inside the right panel. */
+    children?: React.ReactNode;
+    /** Additional class name applied to the panel element. */
+    className?: string;
+    /** Initial width (in px) of the panel. Clamped to a minimum of 240px. */
+    defaultWidth?: number;
+    /** Callback fired when the panel width changes during resize. */
+    onWidthChange?: (width: number) => void;
+    /** Controls whether the panel and its divider are visible. */
+    open?: boolean;
+    /** Props passed to the internal `Scrollbar` component. */
+    scrollbarProps?: Omit<ScrollbarProps, 'children'>;
+}
+export declare function LayoutRightPanel({ children, className, defaultWidth, onWidthChange, open, scrollbarProps, }: LayoutRightPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace LayoutRightPanel {
+    var displayName: string;
+}

package/Layout/{LayoutSidePanel.js → LayoutRightPanel.js}

@@ -1,22 +1,19 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext, useState, useRef, useEffect, useCallback } from 'react';
 import { layoutClasses } from '@mezzanine-ui/core/layout';
 import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
-import { LayoutPanelContext } from './LayoutContext.js';
+import { LayoutContext } from './LayoutContext.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
 import cx from 'clsx';
 
 const MIN_PANEL_WIDTH = 240;
+const CONTENT_WRAPPER_MIN_WIDTH = 480;
 const ARROW_KEY_STEP = 10;
-function LayoutSidePanel({ children, defaultSidePanelWidth = 320, onSidePanelWidthChange, open = false, }) {
-    const context = useContext(LayoutPanelContext);
+function LayoutRightPanel({ children, className, defaultWidth = 320, onWidthChange, open = false, scrollbarProps = {}, }) {
+    const context = useContext(LayoutContext);
     const [isDragging, setIsDragging] = useState(false);
-    const [sidePanelWidth, setSidePanelWidth] = useState(() => {
-        const maxWidth = typeof window !== 'undefined'
-            ? window.innerWidth - MIN_PANEL_WIDTH - 1
-            : Infinity;
-        return Math.min(maxWidth, Math.max(MIN_PANEL_WIDTH, defaultSidePanelWidth));
-    });
+    const [width, setWidth] = useState(() => Math.max(MIN_PANEL_WIDTH, defaultWidth));
     const dragStartRef = useRef(null);
     const rafIdRef = useRef(null);
     useEffect(() => {
@@ -27,24 +24,26 @@ function LayoutSidePanel({ children, defaultSidePanelWidth = 320, onSidePanelWid
             }
         };
     }, []);
-    useEffect(() => {
-        context === null || context === void 0 ? void 0 : context.onPanelStateChange({ isOpen: open, width: sidePanelWidth });
-    }, [context, open, sidePanelWidth]);
+    const handleDividerMouseDown = useCallback((e) => {
+        var _a;
+        e.preventDefault();
+        const mainWidth = ((_a = context === null || context === void 0 ? void 0 : context.mainRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
+        const maxWidth = width + Math.max(0, mainWidth - CONTENT_WRAPPER_MIN_WIDTH);
+        setIsDragging(true);
+        dragStartRef.current = { maxWidth, width, x: e.clientX };
+    }, [context, width]);
     const handleDividerKeyDown = useCallback((e) => {
+        var _a;
         if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
             return;
         e.preventDefault();
+        const mainWidth = ((_a = context === null || context === void 0 ? void 0 : context.mainRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || window.innerWidth;
+        const maxWidth = width + Math.max(0, mainWidth - CONTENT_WRAPPER_MIN_WIDTH);
         const step = e.key === 'ArrowLeft' ? ARROW_KEY_STEP : -ARROW_KEY_STEP;
-        const maxWidth = window.innerWidth - MIN_PANEL_WIDTH - 1;
-        const newWidth = Math.min(maxWidth, Math.max(MIN_PANEL_WIDTH, sidePanelWidth + step));
-        setSidePanelWidth(newWidth);
-        onSidePanelWidthChange === null || onSidePanelWidthChange === void 0 ? void 0 : onSidePanelWidthChange(newWidth);
-    }, [onSidePanelWidthChange, sidePanelWidth]);
-    const handleDividerMouseDown = useCallback((e) => {
-        e.preventDefault();
-        setIsDragging(true);
-        dragStartRef.current = { width: sidePanelWidth, x: e.clientX };
-    }, [sidePanelWidth]);
+        const newWidth = Math.min(maxWidth, Math.max(MIN_PANEL_WIDTH, width + step));
+        setWidth(newWidth);
+        onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(newWidth);
+    }, [context, onWidthChange, width]);
     useDocumentEvents(() => {
         if (!isDragging)
             return undefined;
@@ -59,12 +58,11 @@ function LayoutSidePanel({ children, defaultSidePanelWidth = 320, onSidePanelWid
                     rafIdRef.current = null;
                     if (!dragStartRef.current)
                         return;
-                    const delta = dragStartRef.current.x - e.clientX;
-                    const newWidth = dragStartRef.current.width + delta;
-                    const maxWidth = window.innerWidth - MIN_PANEL_WIDTH - 1;
-                    const clamped = Math.min(maxWidth, Math.max(MIN_PANEL_WIDTH, newWidth));
-                    setSidePanelWidth(clamped);
-                    onSidePanelWidthChange === null || onSidePanelWidthChange === void 0 ? void 0 : onSidePanelWidthChange(clamped);
+                    const delta = e.clientX - dragStartRef.current.x;
+                    const newWidth = dragStartRef.current.width - delta;
+                    const clamped = Math.min(dragStartRef.current.maxWidth, Math.max(MIN_PANEL_WIDTH, newWidth));
+                    setWidth(clamped);
+                    onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(clamped);
                 });
             },
             mouseup: () => {
@@ -76,15 +74,13 @@ function LayoutSidePanel({ children, defaultSidePanelWidth = 320, onSidePanelWid
                 dragStartRef.current = null;
             },
         };
-    }, [isDragging, onSidePanelWidthChange]);
+    }, [isDragging, onWidthChange]);
     if (!open)
         return null;
-    return (jsxs(Fragment, { children: [jsx("div", { "aria-label": "Resize side panel", "aria-orientation": "vertical", "aria-valuemax": typeof window !== 'undefined'
-                    ? window.innerWidth - MIN_PANEL_WIDTH - 1
-                    : undefined, "aria-valuemin": MIN_PANEL_WIDTH, "aria-valuenow": sidePanelWidth, className: cx(layoutClasses.divider, {
+    return (jsxs("aside", { "aria-label": "Right panel", className: cx(layoutClasses.sidePanel, layoutClasses.sidePanelRight, className), style: { inlineSize: width }, children: [jsx("div", { "aria-label": "Resize right panel", "aria-orientation": "vertical", "aria-valuemin": MIN_PANEL_WIDTH, "aria-valuenow": width, className: cx(layoutClasses.divider, {
                     [layoutClasses.dividerDragging]: isDragging,
-                }), onKeyDown: handleDividerKeyDown, onMouseDown: handleDividerMouseDown, role: "separator", tabIndex: 0 }), jsx("aside", { "aria-label": "Side panel", className: layoutClasses.sidePanel, children: children })] }));
+                }), onKeyDown: handleDividerKeyDown, onMouseDown: handleDividerMouseDown, role: "separator", tabIndex: 0 }), jsx("div", { className: layoutClasses.sidePanelContent, children: jsx(Scrollbar, { ...scrollbarProps, children: children }) })] }));
 }
-LayoutSidePanel.displayName = 'Layout.SidePanel';
+LayoutRightPanel.displayName = 'Layout.RightPanel';
 
-export { LayoutSidePanel };
+export { LayoutRightPanel };

package/Layout/index.d.ts

@@ -1,3 +1,3 @@
-export { default, LayoutMain, LayoutSidePanel } from './Layout';
-export type { LayoutMainProps, LayoutProps, LayoutSidePanelProps, } from './Layout';
+export { default, LayoutLeftPanel, LayoutMain, LayoutRightPanel, } from './Layout';
+export type { LayoutLeftPanelProps, LayoutMainProps, LayoutProps, LayoutRightPanelProps, } from './Layout';
 export type { LayoutHostProps } from './LayoutHost';

package/Layout/index.js

@@ -1,3 +1,4 @@
 export { default } from './Layout.js';
+export { LayoutLeftPanel } from './LayoutLeftPanel.js';
 export { LayoutMain } from './LayoutMain.js';
-export { LayoutSidePanel } from './LayoutSidePanel.js';
+export { LayoutRightPanel } from './LayoutRightPanel.js';

package/Modal/MediaPreviewModal.d.ts

@@ -1,6 +1,10 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { ModalContainerProps } from './useModalContainer';
 export interface MediaPreviewModalProps extends Omit<ModalContainerProps, 'children'>, NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The custom class name applied to the modal container.
+     */
+    backdropClassName?: string;
     /**
      * The current index of the media being displayed (controlled mode).
      * If provided along with onNext/onPrev, the component operates in controlled mode.

package/Modal/MediaPreviewModal.js

@@ -15,7 +15,7 @@ import cx from 'clsx';
  * Displays media items with navigation controls and a close button.
  */
 const MediaPreviewModal = forwardRef(function MediaPreviewModal(props, ref) {
-    const { className, container, currentIndex: controlledIndex, defaultIndex = 0, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disableNext = false, disablePortal = false, disablePrev = false, enableCircularNavigation = false, mediaItems, onBackdropClick, onClose, onIndexChange, onNext, onPrev, open, showPaginationIndicator = true, ...rest } = props;
+    const { backdropClassName, className, container, currentIndex: controlledIndex, defaultIndex = 0, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disableNext = false, disablePortal = false, disablePrev = false, enableCircularNavigation = false, mediaItems, onBackdropClick, onClose, onIndexChange, onNext, onPrev, open, showPaginationIndicator = true, ...rest } = props;
     const { Container: ModalContainer } = useModalContainer();
     // Determine if component is in controlled mode
     const isControlled = controlledIndex !== undefined;
@@ -169,7 +169,7 @@ const MediaPreviewModal = forwardRef(function MediaPreviewModal(props, ref) {
                 exit: MOTION_EASING.standard,
             }, in: isCurrent, children: mediaElement.element }, index));
     };
-    return (jsxs(ModalContainer, { className: modalClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: [jsx("div", { ...rest, className: cx(modalClasses.host, modalClasses.mediaPreview, className), role: "dialog", children: jsx("div", { className: modalClasses.mediaPreviewContent, children: jsx("div", { className: modalClasses.mediaPreviewMediaContainer, children: displayedIndices.map((index) => renderMedia(index)) }) }) }), jsx(ClearActions, { className: modalClasses.mediaPreviewCloseButton, onClick: onClose, type: "embedded", variant: "contrast" }), mediaItems.length > 1 && (jsx("button", { "aria-disabled": isPrevDisabled, "aria-label": "Previous media", className: cx(modalClasses.mediaPreviewNavButton, modalClasses.mediaPreviewNavButtonPrev), disabled: isPrevDisabled, onClick: handlePrev, title: "Previous", type: "button", children: jsx(Icon, { icon: ChevronLeftIcon, size: 16, color: "fixed-light" }) })), mediaItems.length > 1 && (jsx("button", { "aria-disabled": isNextDisabled, "aria-label": "Next media", className: cx(modalClasses.mediaPreviewNavButton, modalClasses.mediaPreviewNavButtonNext), disabled: isNextDisabled, onClick: handleNext, title: "Next", type: "button", children: jsx(Icon, { icon: ChevronRightIcon, size: 16, color: "fixed-light" }) })), showPaginationIndicator && mediaItems.length > 1 && (jsxs("div", { "aria-label": `Page ${currentIndex + 1} of ${mediaItems.length}`, className: modalClasses.mediaPreviewPaginationIndicator, children: [currentIndex + 1, "/", mediaItems.length] }))] }));
+    return (jsxs(ModalContainer, { className: backdropClassName, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: [jsx("div", { ...rest, className: cx(modalClasses.host, modalClasses.mediaPreview, className), role: "dialog", children: jsx("div", { className: modalClasses.mediaPreviewContent, children: jsx("div", { className: modalClasses.mediaPreviewMediaContainer, children: displayedIndices.map((index) => renderMedia(index)) }) }) }), jsx(ClearActions, { className: modalClasses.mediaPreviewCloseButton, onClick: onClose, type: "embedded", variant: "contrast" }), mediaItems.length > 1 && (jsx("button", { "aria-disabled": isPrevDisabled, "aria-label": "Previous media", className: cx(modalClasses.mediaPreviewNavButton, modalClasses.mediaPreviewNavButtonPrev), disabled: isPrevDisabled, onClick: handlePrev, title: "Previous", type: "button", children: jsx(Icon, { icon: ChevronLeftIcon, size: 16, color: "fixed-light" }) })), mediaItems.length > 1 && (jsx("button", { "aria-disabled": isNextDisabled, "aria-label": "Next media", className: cx(modalClasses.mediaPreviewNavButton, modalClasses.mediaPreviewNavButtonNext), disabled: isNextDisabled, onClick: handleNext, title: "Next", type: "button", children: jsx(Icon, { icon: ChevronRightIcon, size: 16, color: "fixed-light" }) })), showPaginationIndicator && mediaItems.length > 1 && (jsxs("div", { "aria-label": `Page ${currentIndex + 1} of ${mediaItems.length}`, className: modalClasses.mediaPreviewPaginationIndicator, children: [currentIndex + 1, "/", mediaItems.length] }))] }));
 });
 
 export { MediaPreviewModal as default };

package/Modal/Modal.d.ts

@@ -4,6 +4,10 @@ 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'>> {
+    /**
+     * The custom class name applied to the modal container.
+     */
+    backdropClassName?: string;
     /**
      * Whether to force full screen on any breakpoint.
      * @default false