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

package/Cascader/Cascader.d.ts

@@ -0,0 +1,3 @@
+import { CascaderProps } from './typings';
+declare const Cascader: import("react").ForwardRefExoticComponent<CascaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Cascader;

package/Cascader/Cascader.js

@@ -0,0 +1,241 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useState, useRef, useCallback, useMemo, createElement } from 'react';
+import { cascaderClasses } from '@mezzanine-ui/core/cascader';
+import { offset } from '@floating-ui/react-dom';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import { TransitionGroup } from 'react-transition-group';
+import { useControlValueState } from '../Form/useControlValueState.js';
+import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
+import SelectTrigger from '../Select/SelectTrigger.js';
+import Translate from '../Transition/Translate.js';
+import CascaderPanel from './CascaderPanel.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import Popper from '../Popper/Popper.js';
+import cx from 'clsx';
+
+/**
+ * Walks the options tree using ids from `value` and returns a new activePath
+ * whose items carry proper `children` references from the tree.
+ * Items in `value` may omit `children`, so we cannot rely on them directly
+ * for panel expansion.
+ */
+function resolveActivePath(options, value) {
+    const result = [];
+    let currentOptions = options;
+    for (const selectedItem of value) {
+        const found = currentOptions.find((o) => o.id === selectedItem.id);
+        if (!found)
+            break;
+        result.push(found);
+        if (found.children && found.children.length > 0) {
+            currentOptions = found.children;
+        }
+        else {
+            break;
+        }
+    }
+    return result;
+}
+const Cascader = forwardRef(function Cascader(props, ref) {
+    var _a, _b;
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, dropdownZIndex, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, globalPortal = true, menuMaxHeight, onBlur, onChange: onChangeProp, onFocus, options, placeholder = '', readOnly = false, required = requiredFromFormControl || false, size, value: valueProp, } = props;
+    const [open, setOpen] = useState(false);
+    const [activePath, setActivePath] = useState([]);
+    const [keyboardFocusedIndex, setKeyboardFocusedIndex] = useState(-1);
+    const [value, setValue] = useControlValueState({
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : [],
+        value: valueProp,
+    });
+    const anchorRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const handleOpen = useCallback(() => {
+        if (readOnly || disabled)
+            return;
+        setActivePath(resolveActivePath(options, value));
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        setOpen(true);
+    }, [disabled, onFocus, options, readOnly, value]);
+    const handleClose = useCallback(() => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        setOpen(false);
+        setKeyboardFocusedIndex(-1);
+    }, [onBlur]);
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        setValue([]);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([]);
+        if (open) {
+            handleClose();
+        }
+    }, [handleClose, onChangeProp, open, setValue]);
+    const handleItemSelect = useCallback((panelIndex, option, isLeaf) => {
+        const newActivePath = [...activePath.slice(0, panelIndex), option];
+        setActivePath(newActivePath);
+        if (isLeaf) {
+            setValue(newActivePath);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newActivePath);
+            handleClose();
+        }
+        else {
+            setKeyboardFocusedIndex(-1);
+        }
+    }, [activePath, handleClose, onChangeProp, setValue]);
+    const panels = useMemo(() => {
+        const result = [options];
+        for (const activeOption of activePath) {
+            if (activeOption.children && activeOption.children.length > 0) {
+                result.push(activeOption.children);
+            }
+            else {
+                break;
+            }
+        }
+        return result;
+    }, [activePath, options]);
+    useDocumentEvents(() => {
+        if (!open)
+            return;
+        const handleClickAway = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            const anchor = anchorRef.current;
+            const dropdown = dropdownRef.current;
+            if ((anchor === null || anchor === void 0 ? void 0 : anchor.contains(target)) || (dropdown === null || dropdown === void 0 ? void 0 : dropdown.contains(target)))
+                return;
+            handleClose();
+        };
+        return {
+            click: handleClickAway,
+            touchend: handleClickAway,
+        };
+    }, [handleClose, open]);
+    useDocumentEvents(() => {
+        if (!open)
+            return;
+        const currentPanelOptions = panels[panels.length - 1];
+        return {
+            keydown(event) {
+                switch (event.key) {
+                    case 'Escape': {
+                        event.preventDefault();
+                        handleClose();
+                        break;
+                    }
+                    case 'ArrowDown': {
+                        event.preventDefault();
+                        let next = keyboardFocusedIndex + 1;
+                        while (next < currentPanelOptions.length &&
+                            currentPanelOptions[next].disabled) {
+                            next++;
+                        }
+                        if (next < currentPanelOptions.length) {
+                            setKeyboardFocusedIndex(next);
+                        }
+                        break;
+                    }
+                    case 'ArrowUp': {
+                        event.preventDefault();
+                        let prev = keyboardFocusedIndex === -1
+                            ? currentPanelOptions.length - 1
+                            : keyboardFocusedIndex - 1;
+                        while (prev >= 0 && currentPanelOptions[prev].disabled) {
+                            prev--;
+                        }
+                        if (prev >= 0) {
+                            setKeyboardFocusedIndex(prev);
+                        }
+                        break;
+                    }
+                    case 'ArrowRight':
+                    case 'Enter':
+                    case ' ': {
+                        if (keyboardFocusedIndex === -1)
+                            return;
+                        const focusedOption = currentPanelOptions[keyboardFocusedIndex];
+                        if (!focusedOption || focusedOption.disabled)
+                            return;
+                        const isLeaf = !focusedOption.children || focusedOption.children.length === 0;
+                        if (event.key === 'ArrowRight' && isLeaf)
+                            return;
+                        event.preventDefault();
+                        handleItemSelect(panels.length - 1, focusedOption, isLeaf);
+                        break;
+                    }
+                    case 'ArrowLeft': {
+                        event.preventDefault();
+                        if (activePath.length === 0)
+                            return;
+                        const removedItem = activePath[activePath.length - 1];
+                        const parentPanel = panels[activePath.length - 1];
+                        const idx = parentPanel.findIndex((o) => o.id === removedItem.id);
+                        setActivePath(activePath.slice(0, -1));
+                        setKeyboardFocusedIndex(idx >= 0 ? idx : -1);
+                        break;
+                    }
+                }
+            },
+        };
+    }, [
+        activePath,
+        handleClose,
+        handleItemSelect,
+        keyboardFocusedIndex,
+        open,
+        panels,
+    ]);
+    const displayPath = open ? activePath : value;
+    const displayString = displayPath.map((o) => o.name).join(' / ');
+    const triggerValue = useMemo(() => {
+        if (displayPath.length === 0)
+            return undefined;
+        return { id: 'cascader-value', name: displayString };
+    }, [displayPath.length, displayString]);
+    const isPartial = open &&
+        activePath.length > 0 &&
+        !!((_b = (_a = activePath[activePath.length - 1]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length);
+    const zIndexMiddleware = useMemo(() => ({
+        name: 'zIndex',
+        fn: ({ elements }) => {
+            const val = dropdownZIndex !== null && dropdownZIndex !== void 0 ? dropdownZIndex : 1;
+            const num = typeof val === 'number' ? val : parseInt(val, 10) || val;
+            Object.assign(elements.floating.style, { zIndex: num });
+            return {};
+        },
+    }), [dropdownZIndex]);
+    const offsetMiddleware = useMemo(() => offset({ mainAxis: 4 }), []);
+    const translateProps = useMemo(() => ({
+        duration: {
+            enter: MOTION_DURATION.moderate,
+            exit: MOTION_DURATION.moderate,
+        },
+        easing: {
+            enter: MOTION_EASING.standard,
+            exit: MOTION_EASING.standard,
+        },
+    }), []);
+    return (jsxs("div", { ref: ref, className: cx(cascaderClasses.host, fullWidth && cascaderClasses.hostFullWidth), children: [jsx(Popper, { anchor: anchorRef, open: open, disablePortal: !globalPortal, options: {
+                    placement: 'bottom-start',
+                    middleware: [offsetMiddleware, zIndexMiddleware],
+                }, children: jsx(TransitionGroup, { component: null, children: open && (createElement(Translate, { ...translateProps, from: "bottom", key: "cascader-dropdown", in: true },
+                        jsx("div", { children: jsx("div", { ref: dropdownRef, className: cascaderClasses.dropdownPanels, children: panels.map((panelOptions, panelIndex) => {
+                                    var _a, _b, _c;
+                                    return (jsx(CascaderPanel, { activeId: (_a = activePath[panelIndex]) === null || _a === void 0 ? void 0 : _a.id, focusedId: panelIndex === panels.length - 1 &&
+                                            keyboardFocusedIndex >= 0
+                                            ? (_b = panels[panelIndex][keyboardFocusedIndex]) === null || _b === void 0 ? void 0 : _b.id
+                                            : undefined, maxHeight: menuMaxHeight, onSelect: (option, isLeaf) => handleItemSelect(panelIndex, option, isLeaf), options: panelOptions, selectedId: value.length > 0 && panelIndex === value.length - 1
+                                            ? (_c = value[panelIndex]) === null || _c === void 0 ? void 0 : _c.id
+                                            : undefined }, panelIndex));
+                                }) }) }))) }) }), jsx(SelectTrigger, { ref: anchorRef, active: open, className: cx(className, isPartial && cascaderClasses.triggerPartial), disabled: disabled, fullWidth: fullWidth, inputProps: {
+                    onKeyDown: (e) => {
+                        if (!open && (e.key === ' ' || e.key === 'Enter')) {
+                            e.preventDefault();
+                            handleOpen();
+                        }
+                    },
+                }, isForceClearable: clearable && !disabled && !readOnly && value.length > 0, mode: "single", onClick: open ? handleClose : handleOpen, onClear: handleClear, placeholder: placeholder, readOnly: readOnly, required: required, size: size, type: error ? 'error' : 'default', value: triggerValue })] }));
+});
+
+export { Cascader as default };

package/Cascader/CascaderPanel.d.ts

@@ -0,0 +1,29 @@
+import { CascaderOption } from './typings';
+export interface CascaderPanelProps {
+    /**
+     * The id of the currently active (navigating) option.
+     */
+    activeId?: string;
+    /**
+     * The id of the keyboard-focused option in this panel.
+     */
+    focusedId?: string;
+    /**
+     * The max height for the panel.
+     */
+    maxHeight?: number | string;
+    /**
+     * Called when an option is clicked.
+     * `isLeaf` is true if the option has no children.
+     */
+    onSelect: (option: CascaderOption, isLeaf: boolean) => void;
+    /**
+     * The options to render in this panel.
+     */
+    options: CascaderOption[];
+    /**
+     * The id of the confirmed selected option at this level.
+     */
+    selectedId?: string;
+}
+export default function CascaderPanel({ activeId, focusedId, maxHeight, onSelect, options, selectedId, }: CascaderPanelProps): import("react/jsx-runtime").JSX.Element;

package/Cascader/CascaderPanel.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cascaderClasses } from '@mezzanine-ui/core/cascader';
+import { CheckedIcon, CaretRightIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+function CascaderPanel({ activeId, focusedId, maxHeight, onSelect, options, selectedId, }) {
+    const toItemId = (optionId) => `mzn-cascader-option-${optionId}`;
+    return (jsx("div", { className: cascaderClasses.panel, style: maxHeight ? { maxHeight } : undefined, children: jsx("ul", { "aria-activedescendant": focusedId ? toItemId(focusedId) : undefined, "aria-label": "Options", role: "listbox", style: { listStyle: 'none', margin: 0, padding: 0 }, tabIndex: -1, children: options.map((option) => {
+                const isLeaf = !option.children || option.children.length === 0;
+                const isActive = option.id === activeId;
+                const isSelected = option.id === selectedId;
+                return (jsxs("li", { "aria-disabled": option.disabled || undefined, "aria-expanded": !isLeaf ? isActive : undefined, "aria-selected": isSelected, className: cx(cascaderClasses.item, isActive && cascaderClasses.itemActive, option.disabled && cascaderClasses.itemDisabled, option.id === focusedId && cascaderClasses.itemFocused, isSelected && cascaderClasses.itemSelected), id: toItemId(option.id), onClick: () => {
+                        if (!option.disabled) {
+                            onSelect(option, isLeaf);
+                        }
+                    }, onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            if (!option.disabled) {
+                                onSelect(option, isLeaf);
+                            }
+                        }
+                    }, role: "option", children: [jsx("span", { className: cascaderClasses.itemLabel, children: option.name }), jsx("span", { className: cascaderClasses.itemAppend, children: isLeaf ? (isSelected && jsx(Icon, { icon: CheckedIcon })) : (jsx(Icon, { icon: CaretRightIcon })) })] }, option.id));
+            }) }) }));
+}
+
+export { CascaderPanel as default };

package/Cascader/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './Cascader';
+export type { CascaderProps } from './typings';
+export type { CascaderOption, CascaderSize } from './typings';
+export { default as CascaderPanel } from './CascaderPanel';
+export type { CascaderPanelProps } from './CascaderPanel';

package/Cascader/index.js

@@ -0,0 +1,2 @@
+export { default } from './Cascader.js';
+export { default as CascaderPanel } from './CascaderPanel.js';

package/Cascader/typings.d.ts

@@ -0,0 +1,92 @@
+import { CascaderSize } from '@mezzanine-ui/core/cascader';
+export type { CascaderSize };
+export interface CascaderOption {
+    children?: CascaderOption[];
+    disabled?: boolean;
+    id: string;
+    name: string;
+}
+export interface CascaderBaseProps {
+    /**
+     * Additional class name.
+     */
+    className?: string;
+    /**
+     * Whether to show the clear button when a value is selected.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Whether the cascader is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show in error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Whether the cascader takes full width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * The z-index of the dropdown.
+     */
+    dropdownZIndex?: number | string;
+    /**
+     * Whether to enable portal for the dropdown.
+     * @default true
+     */
+    globalPortal?: boolean;
+    /**
+     * The max height of each cascader panel column.
+     */
+    menuMaxHeight?: number | string;
+    /**
+     * Callback fired when the dropdown is closed.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback fired when the dropdown is opened.
+     */
+    onFocus?: () => void;
+    /**
+     * The tree options for the cascader.
+     */
+    options: CascaderOption[];
+    /**
+     * Placeholder text for the trigger input.
+     */
+    placeholder?: string;
+    /**
+     * Whether the cascader is read-only.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the cascader is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The size of the trigger input.
+     * @default 'main'
+     */
+    size?: CascaderSize;
+}
+export interface CascaderProps extends CascaderBaseProps {
+    /**
+     * Uncontrolled default value (array from root to leaf).
+     */
+    defaultValue?: CascaderOption[];
+    /**
+     * Callback fired when the final leaf option is selected.
+     */
+    onChange?: (value: CascaderOption[]) => void;
+    /**
+     * Controlled value (array from root to leaf).
+     */
+    value?: CascaderOption[];
+}

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

package/Modal/Modal.js

@@ -12,14 +12,14 @@ import cx from 'clsx';
  * The react component for `mezzanine` modal.
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, 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, 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 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 }));
-    return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: modalClasses.overlay, 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), {
+    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' ||

package/Modal/useModalContainer.js

@@ -9,7 +9,6 @@ import Scale from '../Transition/Scale.js';
 import cx from 'clsx';
 
 const defaultOptions = {
-    className: modalClasses.overlay,
     disableCloseOnBackdropClick: false,
     disableCloseOnEscapeKeyDown: false,
     disablePortal: false,

package/index.d.ts

@@ -42,8 +42,8 @@ export { default as Cropper } from './Cropper';
 export type { CropperComponent, CropperProps, CropperPropsBase, CropperSize, } from './Cropper';
 export { default as Icon } from './Icon';
 export type { IconColor, IconProps } from './Icon';
-export { default as Layout, LayoutMain, LayoutSidePanel } from './Layout';
-export type { LayoutMainProps, LayoutProps, LayoutSidePanelProps } from './Layout';
+export { default as Layout, LayoutLeftPanel, LayoutMain, LayoutRightPanel, } from './Layout';
+export type { LayoutLeftPanelProps, LayoutMainProps, LayoutProps, LayoutRightPanelProps, } from './Layout';
 export { default as Separator } from './Separator';
 export type { SeparatorProps } from './Separator';
 export { default as Typography } from './Typography';
@@ -116,6 +116,8 @@ export { PickerTrigger, RangePickerTrigger, usePickerDocumentEventClose, usePick
 export type { PickerTriggerProps, RangePickerTriggerProps, UsePickerDocumentEventCloseProps, UsePickerValueProps, } from './Picker';
 export { default as Radio, RadioGroup } from './Radio';
 export type { RadioGroupOrientation, RadioGroupProps, RadioProps, RadioSize, } from './Radio';
+export { default as Cascader, CascaderPanel } from './Cascader';
+export type { CascaderOption, CascaderPanelProps, CascaderProps, CascaderSize, } from './Cascader';
 export { default as Select, SelectControlContext, SelectTrigger, SelectTriggerTags, } from './Select';
 export type { SelectControl, SelectProps, SelectTriggerInputProps, SelectTriggerProps, SelectTriggerTagsProps, SelectValue, } from './Select';
 export { default as Selection } from './Selection';

package/index.js

@@ -104,6 +104,8 @@ export { default as PickerTrigger } from './Picker/PickerTrigger.js';
 export { default as RangePickerTrigger } from './Picker/RangePickerTrigger.js';
 export { default as Radio } from './Radio/Radio.js';
 export { default as RadioGroup } from './Radio/RadioGroup.js';
+export { default as Cascader } from './Cascader/Cascader.js';
+export { default as CascaderPanel } from './Cascader/CascaderPanel.js';
 export { default as Select } from './Select/Select.js';
 export { default as SelectTrigger } from './Select/SelectTrigger.js';
 export { default as SelectTriggerTags } from './Select/SelectTriggerTags.js';
@@ -161,8 +163,9 @@ export { default as Slide } from './Transition/Slide.js';
 export { default as Transition } from './Transition/Transition.js';
 export { default as Translate } from './Transition/Translate.js';
 export { default as Dropdown } from './Dropdown/Dropdown.js';
+export { LayoutLeftPanel } from './Layout/LayoutLeftPanel.js';
 export { LayoutMain } from './Layout/LayoutMain.js';
-export { LayoutSidePanel } from './Layout/LayoutSidePanel.js';
+export { LayoutRightPanel } from './Layout/LayoutRightPanel.js';
 export { useStepper } from './Stepper/useStepper.js';
 export { usePagination } from './Pagination/usePagination.js';
 export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext } from './Table/TableContext.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,9 +31,9 @@
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "1.0.0-rc.1",
-    "@mezzanine-ui/icons": "1.0.0-rc.1",
-    "@mezzanine-ui/system": "1.0.0-rc.1",
+    "@mezzanine-ui/core": "1.0.0-rc.2",
+    "@mezzanine-ui/icons": "1.0.0-rc.2",
+    "@mezzanine-ui/system": "1.0.0-rc.2",
     "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",

package/Layout/LayoutSidePanel.d.ts

@@ -1,14 +0,0 @@
-export interface LayoutSidePanelProps {
-    /** The content rendered inside the side panel. */
-    children?: React.ReactNode;
-    /** Initial width (in px) of the side panel. Clamped to a minimum of 240px. */
-    defaultSidePanelWidth?: number;
-    /** Callback fired when the side panel width changes during resize. */
-    onSidePanelWidthChange?: (width: number) => void;
-    /** Controls whether the side panel and divider are visible. */
-    open?: boolean;
-}
-export declare function LayoutSidePanel({ children, defaultSidePanelWidth, onSidePanelWidthChange, open, }: LayoutSidePanelProps): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace LayoutSidePanel {
-    var displayName: string;
-}