@mezzanine-ui/react 1.0.0-beta.3 → 1.0.0-beta.5

package/Dropdown/Dropdown.d.ts

@@ -162,5 +162,53 @@ export interface DropdownProps extends DropdownItemSharedProps {
      * The icon of the dropdown empty status.
      */
     emptyIcon?: IconDefinition;
+    /**
+     * Whether to disable portal.
+     * This prop is only relevant when `inputPosition` is set to 'outside'.
+     * Controls whether the dropdown content is rendered within the current hierarchy or portaled to the body.
+     * @default false
+     */
+    disablePortal?: boolean;
+    /**
+     * Callback fired when the dropdown list reaches the bottom.
+     * Only fires when `maxHeight` is set and the list is scrollable.
+     */
+    onReachBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list leaves the bottom.
+     * Only fires when `maxHeight` is set and the list is scrollable.
+     */
+    onLeaveBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list is scrolled.
+     * Receives the scroll event and computed scroll information.
+     */
+    onScroll?: (computed: {
+        scrollTop: number;
+        maxScrollTop: number;
+    }, target: HTMLDivElement) => void;
+    /**
+     * Whether to defer the initialization of OverlayScrollbars.
+     * This can improve initial render performance.
+     * @default true
+     */
+    scrollbarDefer?: boolean | object;
+    /**
+     * Whether to disable the custom scrollbar component.
+     * When false (default), Scrollbar component will be used when maxHeight is set.
+     * When true, falls back to native div scrolling (backward compatible).
+     * @default false
+     */
+    scrollbarDisabled?: boolean;
+    /**
+     * The maximum width of the scrollable container.
+     * Can be a CSS value string (e.g., '500px', '100%') or a number (treated as pixels).
+     */
+    scrollbarMaxWidth?: number | string;
+    /**
+     * Additional options to pass to OverlayScrollbars.
+     * @see https://kingsora.github.io/OverlayScrollbars/#!documentation/options
+     */
+    scrollbarOptions?: import('overlayscrollbars').PartialOptions;
 }
 export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/Dropdown/Dropdown.js

@@ -14,7 +14,7 @@ import DropdownItem from './DropdownItem.js';
 import Popper from '../Popper/Popper.js';
 
 function Dropdown(props) {
-    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, followText: followTextProp, mode, value, } = props;
+    const { activeIndex: activeIndexProp, id, children, options = [], type = 'default', maxHeight, disabled = false, showDropdownActions = false, actionCancelText, actionConfirmText, actionText, actionClearText, actionCustomButtonProps, showActionShowTopBar, isMatchInputValue = false, inputPosition = 'outside', placement = 'bottom', customWidth, sameWidth = false, listboxId: listboxIdProp, listboxLabel, onClose, onOpen, open: openProp, onVisibilityChange, onSelect, onActionConfirm, onActionCancel, onActionCustom, onActionClear, onItemHover, zIndex, status, loadingText, emptyText, emptyIcon, followText: followTextProp, disablePortal = false, onReachBottom, onLeaveBottom, onScroll, mode, value, scrollbarDefer, scrollbarDisabled, scrollbarMaxWidth, scrollbarOptions, } = props;
     const isInline = inputPosition === 'inside';
     const inputId = useId();
     const defaultListboxId = `${inputId}-listbox`;
@@ -229,6 +229,9 @@ function Dropdown(props) {
         sameWidth,
         onHover: handleItemHover,
         onSelect,
+        onReachBottom,
+        onLeaveBottom,
+        onScroll,
         options,
         type,
         status,
@@ -237,6 +240,10 @@ function Dropdown(props) {
         emptyIcon,
         mode,
         value,
+        scrollbarDefer,
+        scrollbarDisabled,
+        scrollbarMaxWidth,
+        scrollbarOptions,
     }), [
         actionConfig,
         mergedActiveIndex,
@@ -248,6 +255,9 @@ function Dropdown(props) {
         sameWidth,
         handleItemHover,
         onSelect,
+        onReachBottom,
+        onLeaveBottom,
+        onScroll,
         options,
         type,
         status,
@@ -256,6 +266,10 @@ function Dropdown(props) {
         emptyIcon,
         mode,
         value,
+        scrollbarDefer,
+        scrollbarDisabled,
+        scrollbarMaxWidth,
+        scrollbarOptions,
     ]);
     const triggerElement = useMemo(() => {
         const childWithRef = children;
@@ -349,7 +363,7 @@ function Dropdown(props) {
     }, [isInline, isOpen, setOpen]);
     return (jsxs("div", { id: id, ref: containerRef, className: cx(dropdownClasses.root, dropdownClasses.inputPosition(inputPosition)), children: [isInline && (jsxs(TransitionGroup, { component: null, children: [!isOpen && inlineTriggerElement && (createElement(Translate, { ...translateProps, from: translateFrom, key: "inline-trigger", in: true },
                         jsx("div", { children: inlineTriggerElement }))), isOpen && (createElement(Translate, { ...translateProps, from: translateFrom, key: "inline-list", in: true },
-                        jsx("div", { children: jsx(DropdownItem, { ...baseDropdownItemProps, headerContent: inlineTriggerElement }) })))] })), !isInline && (jsx(Popper, { ref: popperRef, anchor: anchorRef, controllerRef: popperControllerRef, open: isOpen, disablePortal: true, options: {
+                        jsx("div", { children: jsx(DropdownItem, { ...baseDropdownItemProps, headerContent: inlineTriggerElement }) })))] })), !isInline && (jsx(Popper, { ref: popperRef, anchor: anchorRef, className: dropdownClasses.popperWithPortal, controllerRef: popperControllerRef, open: isOpen, disablePortal: disablePortal, options: {
                     placement: popoverPlacement,
                     middleware: [
                         offsetMiddleware,

package/Dropdown/DropdownItem.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { DropdownItemSharedProps, DropdownOptionsByType, DropdownStatus as DropdownStatusType, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
 import { type IconDefinition } from '@mezzanine-ui/icons';
+import type { PartialOptions } from 'overlayscrollbars';
 import { type DropdownActionProps } from './DropdownAction';
 export interface DropdownItemProps<T extends DropdownType | undefined = DropdownType> extends Omit<DropdownItemSharedProps, 'type'> {
     /**
@@ -73,5 +74,46 @@ export interface DropdownItemProps<T extends DropdownType | undefined = Dropdown
      * The icon of the dropdown empty status.
      */
     emptyIcon?: IconDefinition;
+    /**
+     * Callback fired when the dropdown list reaches the bottom.
+     * Only fires when `maxHeight` is set and the list is scrollable.
+     */
+    onReachBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list leaves the bottom.
+     * Only fires when `maxHeight` is set and the list is scrollable.
+     */
+    onLeaveBottom?: () => void;
+    /**
+     * Callback fired when the dropdown list is scrolled.
+     * Receives the scroll event and computed scroll information.
+     */
+    onScroll?: (computed: {
+        scrollTop: number;
+        maxScrollTop: number;
+    }, target: HTMLDivElement) => void;
+    /**
+     * Whether to defer the initialization of OverlayScrollbars.
+     * This can improve initial render performance.
+     * @default true
+     */
+    scrollbarDefer?: boolean | object;
+    /**
+     * Whether to disable the custom scrollbar component.
+     * When false (default), Scrollbar component will be used when maxHeight is set.
+     * When true, falls back to native div scrolling (backward compatible).
+     * @default false
+     */
+    scrollbarDisabled?: boolean;
+    /**
+     * The maximum width of the scrollable container.
+     * Can be a CSS value string (e.g., '500px', '100%') or a number (treated as pixels).
+     */
+    scrollbarMaxWidth?: number | string;
+    /**
+     * Additional options to pass to OverlayScrollbars.
+     * @see https://kingsora.github.io/OverlayScrollbars/#!documentation/options
+     */
+    scrollbarOptions?: PartialOptions;
 }
 export default function DropdownItem<T extends DropdownType | undefined = DropdownType>(props: DropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/Dropdown/DropdownItem.js

@@ -10,7 +10,19 @@ import DropdownAction from './DropdownAction.js';
 import DropdownItemCard from './DropdownItemCard.js';
 import DropdownStatus from './DropdownStatus.js';
 import { shortcutTextHandler } from './shortcutTextHandler.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
 
+// Helper function to recursively get all descendant IDs from a tree option (excluding the option itself)
+function getAllDescendantIds(option) {
+    const ids = [];
+    if (option.children && option.children.length > 0) {
+        option.children.forEach((child) => {
+            ids.push(String(child.id));
+            ids.push(...getAllDescendantIds(child));
+        });
+    }
+    return ids;
+}
 /**
  * Limits DropdownOption array to a maximum depth, truncating extra children levels and showing error message if exceeded.
  * @param input - The original DropdownOption array
@@ -57,12 +69,16 @@ function truncateArrayDepth(input, maxDepth = 3, warn = true) {
     return truncate(input);
 }
 function DropdownItem(props) {
-    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, } = props;
+    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, onReachBottom, onLeaveBottom, onScroll, scrollbarDefer = true, scrollbarDisabled = false, scrollbarMaxWidth, scrollbarOptions, } = props;
     const optionsContent = truncateArrayDepth(options, 3);
     const listRef = useRef(null);
+    const listWrapperRef = useRef(null);
+    const viewportRef = useRef(null);
+    const wasAtBottomRef = useRef(false);
     const [expandedNodes, setExpandedNodes] = useState(new Set());
     const hasActions = Boolean(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.showActions);
     const hasHeader = Boolean(headerContent);
+    const shouldUseScrollbar = maxHeight && !scrollbarDisabled;
     // Use custom hook to measure element heights
     const [actionRef, actionHeight] = useElementHeight(hasActions && !!maxHeight);
     const [headerRef, headerHeight] = useElementHeight(hasHeader && !!maxHeight);
@@ -199,17 +215,39 @@ function DropdownItem(props) {
         });
         return { elements, nextIndex: currentIndex };
     };
+    const calculateNodeSelectionState = useCallback((option, selectedIds) => {
+        if (!option.children || option.children.length === 0) {
+            const isSelected = selectedIds.includes(String(option.id));
+            return { checked: isSelected, indeterminate: false };
+        }
+        // Get all descendant IDs (excluding the parent node itself)
+        const allDescendantIds = getAllDescendantIds(option);
+        const selectedDescendants = allDescendantIds.filter((id) => selectedIds.includes(id));
+        const totalDescendants = allDescendantIds.length;
+        if (totalDescendants === 0) {
+            // No descendants, check if parent itself is selected
+            const isSelected = selectedIds.includes(String(option.id));
+            return { checked: isSelected, indeterminate: false };
+        }
+        if (selectedDescendants.length === 0) {
+            return { checked: false, indeterminate: false };
+        }
+        if (selectedDescendants.length === totalDescendants) {
+            // All descendants are selected
+            return { checked: true, indeterminate: false };
+        }
+        // Some but not all descendants are selected
+        return { checked: false, indeterminate: true };
+    }, []);
     const renderTreeOptions = (optionList, depth, startIndex) => {
         let currentIndex = startIndex;
+        const selectedIds = Array.isArray(value) ? value.map((id) => String(id)) : value ? [String(value)] : [];
         const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
             var _a, _b, _c;
             currentIndex += 1;
             const optionIndex = currentIndex;
             const level = Math.min(depth, 2);
             const isActive = optionIndex === activeIndex;
-            const isSelected = Array.isArray(value)
-                ? value.includes(option.id)
-                : value === option.id;
             const hasChildren = Boolean(option.children && option.children.length > 0);
             const isExpanded = hasChildren && expandedNodes.has(option.id);
             let prependIcon = undefined;
@@ -220,13 +258,31 @@ function DropdownItem(props) {
             const shortcutText = option.shortcutText
                 ? option.shortcutText
                 : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
-            const card = (jsx(DropdownItemCard, { active: isActive, checked: isSelected, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, level: level, mode: mode, name: option.name, onClick: () => {
+            const selectionState = hasChildren && mode === 'multiple'
+                ? calculateNodeSelectionState(option, selectedIds)
+                : {
+                    checked: selectedIds.includes(String(option.id)),
+                    indeterminate: false,
+                };
+            const card = (jsx(DropdownItemCard, { active: isActive, checked: selectionState.checked, indeterminate: selectionState.indeterminate, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, level: level, mode: mode, name: option.name, onClick: () => {
                     if (disabled)
                         return;
-                    if (hasChildren && type === 'tree') {
+                    if (hasChildren && type === 'tree' && mode === 'multiple' && option.showCheckbox) {
+                        toggleExpand(option.id);
+                    }
+                    else if (hasChildren && type === 'tree') {
                         toggleExpand(option.id);
                     }
                     else {
+                        // In `tree` + `multiple` mode, `DropdownItemCard` already triggers selection via
+                        // `onCheckedChange` when row is clicked (it toggles checked first, then calls `onClick`),
+                        // so calling `onSelect` here would cause it to fire twice for leaf nodes.
+                        if (!(type === 'tree' && mode === 'multiple')) {
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+                        }
+                    }
+                }, onCheckedChange: () => {
+                    if (!disabled) {
                         onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
                     }
                 }, followText: followText, checkSite: checkSite, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: prependIcon, showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, validate: (_c = option.validate) !== null && _c !== void 0 ? _c : 'default', appendContent: shortcutText }, option.id));
@@ -242,7 +298,7 @@ function DropdownItem(props) {
     const renderDefaultOptions = (optionList, startIndex) => {
         let currentIndex = startIndex;
         const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             currentIndex += 1;
             const optionIndex = currentIndex;
             const isSelected = Array.isArray(value)
@@ -252,15 +308,12 @@ function DropdownItem(props) {
             const shortcutText = option.shortcutText
                 ? option.shortcutText
                 : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
-            let checkSite = 'none';
-            if (option === null || option === void 0 ? void 0 : option.checkSite) {
-                checkSite = option.checkSite;
-            }
+            const checkSite = (_b = option === null || option === void 0 ? void 0 : option.checkSite) !== null && _b !== void 0 ? _b : 'none';
             return (jsx(DropdownItemCard, { followText: followText, active: isActive, checked: isSelected, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, mode: mode, name: option.name, onClick: () => {
                     if (disabled)
                         return;
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
-                }, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: option.icon, validate: (_b = option.validate) !== null && _b !== void 0 ? _b : 'default', showUnderline: (_c = option.showUnderline) !== null && _c !== void 0 ? _c : false, checkSite: checkSite, appendContent: shortcutText }, option.id));
+                }, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: option.icon, validate: (_c = option.validate) !== null && _c !== void 0 ? _c : 'default', showUnderline: (_d = option.showUnderline) !== null && _d !== void 0 ? _d : false, checkSite: checkSite, appendContent: shortcutText }, option.id));
         });
         return { elements, nextIndex: currentIndex };
     };
@@ -294,6 +347,10 @@ function DropdownItem(props) {
             maxHeight: `${availableHeight}px`,
         };
     }, [maxHeight, actionHeight, headerHeight]);
+    const getIsAtBottom = useCallback((viewport) => {
+        const { scrollTop, scrollHeight, clientHeight } = viewport;
+        return scrollTop + clientHeight >= scrollHeight - 1;
+    }, []);
     useEffect(() => {
         const listElement = listRef.current;
         if (!listElement || disabled) {
@@ -323,8 +380,82 @@ function DropdownItem(props) {
             listElement.removeEventListener('keydown', handleKeyDown);
         };
     }, [disabled, matchShortcut, onSelect, type, toggleExpand, visibleShortcutOptions]);
+    const handleViewportReady = useCallback((viewport) => {
+        viewportRef.current = viewport;
+        listWrapperRef.current = viewport;
+        wasAtBottomRef.current = getIsAtBottom(viewport);
+    }, [getIsAtBottom]);
+    useEffect(() => {
+        if (shouldUseScrollbar) {
+            return;
+        }
+        const listWrapperElement = listWrapperRef.current;
+        if (!listWrapperElement || !maxHeight || (!onReachBottom && !onLeaveBottom && !onScroll)) {
+            return;
+        }
+        // Initialize wasAtBottom state by checking current position
+        const checkInitialState = () => {
+            const { scrollTop, scrollHeight, clientHeight } = listWrapperElement;
+            return scrollTop + clientHeight >= scrollHeight - 1;
+        };
+        let wasAtBottom = checkInitialState();
+        const handleScroll = () => {
+            const { scrollTop, scrollHeight, clientHeight } = listWrapperElement;
+            const maxScrollTop = scrollHeight - clientHeight;
+            // Call onScroll callback if provided
+            if (onScroll) {
+                onScroll({
+                    scrollTop,
+                    maxScrollTop,
+                }, listWrapperElement);
+            }
+            // Check if scrolled to bottom (with 1px threshold for rounding errors)
+            const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+            // Trigger onReachBottom when entering bottom state
+            if (isAtBottom && !wasAtBottom) {
+                onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom();
+            }
+            // Trigger onLeaveBottom when leaving bottom state
+            if (!isAtBottom && wasAtBottom) {
+                onLeaveBottom === null || onLeaveBottom === void 0 ? void 0 : onLeaveBottom();
+            }
+            wasAtBottom = isAtBottom;
+        };
+        listWrapperElement.addEventListener('scroll', handleScroll);
+        return () => {
+            listWrapperElement.removeEventListener('scroll', handleScroll);
+        };
+    }, [maxHeight, onReachBottom, onLeaveBottom, onScroll, shouldUseScrollbar]);
+    const scrollbarEvents = useMemo(() => {
+        if (!shouldUseScrollbar || (!onReachBottom && !onLeaveBottom && !onScroll)) {
+            return undefined;
+        }
+        return {
+            scroll: (_instance, _event) => {
+                const viewport = viewportRef.current;
+                if (!viewport)
+                    return;
+                const { scrollTop, scrollHeight, clientHeight } = viewport;
+                const maxScrollTop = scrollHeight - clientHeight;
+                if (onScroll) {
+                    onScroll({
+                        scrollTop,
+                        maxScrollTop,
+                    }, viewport);
+                }
+                const isAtBottom = getIsAtBottom(viewport);
+                if (isAtBottom && !wasAtBottomRef.current) {
+                    onReachBottom === null || onReachBottom === void 0 ? void 0 : onReachBottom();
+                }
+                if (!isAtBottom && wasAtBottomRef.current) {
+                    onLeaveBottom === null || onLeaveBottom === void 0 ? void 0 : onLeaveBottom();
+                }
+                wasAtBottomRef.current = isAtBottom;
+            },
+        };
+    }, [getIsAtBottom, shouldUseScrollbar, onReachBottom, onLeaveBottom, onScroll]);
     return (jsxs("ul", { "aria-label": listboxLabel || (optionsContent.length === 0 ? 'Dropdown options' : undefined), className: dropdownClasses.list, id: listboxId, ref: listRef, role: "listbox", style: listStyle, tabIndex: -1, children: [hasHeader && (jsx("li", { className: dropdownClasses.listHeader, role: "presentation", ref: headerRef, children: jsx("div", { className: dropdownClasses.listHeaderInner, children: headerContent }) })), maxHeight
-                ? (jsx("div", { className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) }))
+                ? (shouldUseScrollbar ? (jsx(Scrollbar, { className: dropdownClasses.listWrapper, defer: scrollbarDefer, disabled: false, events: scrollbarEvents, maxHeight: listWrapperStyle === null || listWrapperStyle === void 0 ? void 0 : listWrapperStyle.maxHeight, maxWidth: scrollbarMaxWidth, onViewportReady: handleViewportReady, options: scrollbarOptions, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) })) : (jsx("div", { ref: listWrapperRef, className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions) })))
                 : shouldShowStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (renderedOptions), hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
 }
 

package/Dropdown/DropdownItemCard.d.ts

@@ -1,5 +1,5 @@
-import { DropdownCheckPosition, DropdownItemLevel, DropdownItemValidate, DropdownMode } from "@mezzanine-ui/core/dropdown/dropdown";
-import { type IconDefinition } from "@mezzanine-ui/icons";
+import { DropdownCheckPosition, DropdownItemLevel, DropdownItemValidate, DropdownMode } from '@mezzanine-ui/core/dropdown/dropdown';
+import { type IconDefinition } from '@mezzanine-ui/icons';
 export interface DropdownItemCardProps {
     /**
      * Whether the option is currently active (highlighted by keyboard navigation).
@@ -25,6 +25,11 @@ export interface DropdownItemCardProps {
      * When provided, the state is controlled externally.
      */
     checked?: boolean;
+    /**
+     * Whether the checkbox is in indeterminate state.
+     * Used in tree mode when some but not all children are selected.
+     */
+    indeterminate?: boolean;
     /**
      * Additional className for the list item.
      */

package/Dropdown/DropdownItemCard.js

@@ -4,13 +4,13 @@ import cx from 'clsx';
 import { useMemo, useState } from 'react';
 import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
 import { CheckedIcon } from '@mezzanine-ui/icons';
-import Checkbox from '../Checkbox/Checkbox.js';
 import Typography from '../Typography/Typography.js';
 import { highlightText } from './highlightText.js';
 import Icon from '../Icon/Icon.js';
+import Checkbox from '../Checkbox/Checkbox.js';
 
 function DropdownItemCard(props) {
-    const { active = false, appendIcon, appendContent, followText, id, label, level: levelProp, mode, name: _name, prependIcon, subTitle, validate, disabled, checked, defaultChecked, checkSite, onCheckedChange, onClick, className, onMouseEnter, showUnderline, } = props;
+    const { active = false, appendIcon, appendContent, followText, id, label, level: levelProp, mode, name: _name, prependIcon, subTitle, validate, disabled, checked, defaultChecked, indeterminate = false, checkSite, onCheckedChange, onClick, className, onMouseEnter, showUnderline, } = props;
     const cardLabel = label || '';
     const cardName = _name || cardLabel;
     const level = levelProp || 0;
@@ -51,8 +51,8 @@ function DropdownItemCard(props) {
             : [
                 {
                     text: cardLabel,
-                    highlight: false
-                }
+                    highlight: false,
+                },
             ];
     }, [cardLabel, followText]);
     const showPrependContent = useMemo(() => {
@@ -68,13 +68,15 @@ function DropdownItemCard(props) {
                 ? [
                     {
                         text: subTitle,
-                        highlight: false
-                    }
+                        highlight: false,
+                    },
                 ]
                 : [];
     }, [subTitle, followText]);
     const renderHighlightedText = (parts, className, id) => {
-        return (jsx(Typography, { className: className, id: id, children: parts.map((part, index) => (jsx("span", { className: part.highlight && validate !== 'danger' ? dropdownClasses.cardHighlightedText : '', children: part.text }, index))) }));
+        return (jsx(Typography, { className: className, id: id, children: parts.map((part, index) => (jsx("span", { className: part.highlight && validate !== 'danger'
+                    ? dropdownClasses.cardHighlightedText
+                    : '', children: part.text }, index))) }));
     };
     const toggleChecked = () => {
         if (disabled)
@@ -109,8 +111,9 @@ function DropdownItemCard(props) {
                     [dropdownClasses.cardActive]: active || isChecked,
                     [dropdownClasses.cardDisabled]: disabled,
                     [dropdownClasses.cardDanger]: validate === 'danger',
-                }, className), id: id, role: "option", tabIndex: -1, onMouseEnter: onMouseEnter, onClick: handleClick, onKeyDown: handleKeyDown, children: jsxs("div", { className: dropdownClasses.cardContainer, children: [showPrependContent && (jsxs("div", { className: dropdownClasses.cardPrependContent, children: [prependIcon
-                                    && jsx(Icon, { icon: prependIcon, color: iconColor }), checkSite === 'prefix' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, onChange: handleCheckboxChange }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel && renderHighlightedText(labelParts, dropdownClasses.cardTitle, labelId), subTitleParts.length > 0 && renderHighlightedText(subTitleParts, dropdownClasses.cardDescription)] }), showAppendContent && (jsxs("div", { className: dropdownClasses.cardAppendContent, children: [appendContent && jsx(Typography, { color: "text-neutral-light", children: appendContent }), appendIcon && jsx(Icon, { icon: appendIcon, color: iconColor }), checkSite === 'suffix' && isChecked && jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 })] }))] }) }), showUnderline && jsx("div", { className: dropdownClasses.cardUnderline })] }));
+                }, className), id: id, role: "option", tabIndex: -1, onMouseEnter: onMouseEnter, onClick: handleClick, onKeyDown: handleKeyDown, children: jsxs("div", { className: dropdownClasses.cardContainer, children: [showPrependContent && (jsxs("div", { className: dropdownClasses.cardPrependContent, children: [prependIcon && jsx(Icon, { icon: prependIcon, color: iconColor }), checkSite === 'prefix' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, indeterminate: indeterminate, onChange: handleCheckboxChange }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel &&
+                                    renderHighlightedText(labelParts, dropdownClasses.cardTitle, labelId), subTitleParts.length > 0 &&
+                                    renderHighlightedText(subTitleParts, dropdownClasses.cardDescription)] }), showAppendContent && (jsxs("div", { className: dropdownClasses.cardAppendContent, children: [appendContent && (jsx(Typography, { color: "text-neutral-light", children: appendContent })), appendIcon && jsx(Icon, { icon: appendIcon, color: iconColor }), checkSite === 'suffix' && isChecked && (jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 }))] }))] }) }), showUnderline && jsx("div", { className: dropdownClasses.cardUnderline })] }));
 }
 
 export { DropdownItemCard as default };

package/Empty/Empty.js

@@ -8,6 +8,7 @@ import { EmptyMainInitialDataIcon } from './icons/EmptyMainInitialDataIcon.js';
 import { EmptyMainResultIcon } from './icons/EmptyMainResultIcon.js';
 import { EmptyMainSystemIcon } from './icons/EmptyMainSystemIcon.js';
 import { flattenChildren } from '../utils/flatten-children.js';
+import { EmptyMainNotificationIcon } from './icons/EmptyMainNotificationIcon.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -21,7 +22,7 @@ const iconMap = {
 const mainIconMap = {
     custom: null,
     'initial-data': jsx(EmptyMainInitialDataIcon, { className: emptyClasses.icon }),
-    notification: null,
+    notification: jsx(EmptyMainNotificationIcon, { className: emptyClasses.icon }),
     result: jsx(EmptyMainResultIcon, { className: emptyClasses.icon }),
     system: jsx(EmptyMainSystemIcon, { className: emptyClasses.icon }),
 };

package/Empty/icons/EmptyMainNotificationIcon.d.ts

@@ -0,0 +1,4 @@
+export interface EmptyMainNotificationIconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+}
+export declare const EmptyMainNotificationIcon: import("react").ForwardRefExoticComponent<Omit<EmptyMainNotificationIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/Empty/icons/EmptyMainNotificationIcon.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const EmptyMainNotificationIcon = forwardRef(function EmptyMainNotificationIcon(props, ref) {
+    const { className, size = 64, ...rest } = props;
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 44 47", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_8482_10235", x1: "22", x2: "20.7012", y1: "33", y2: "46.8785", children: [jsx("stop", { stopColor: "#9DA4AE" }), jsx("stop", { offset: "1", stopColor: "#E5E7EB" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_8482_10235", x1: "44", x2: "-3.06232", y1: "-1.43647e-06", y2: "35.9963", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] })] }), jsx("circle", { cx: "22", cy: "40", fill: "url(#paint0_linear_8482_10235)", r: "7" }), jsx("path", { d: "M6.69446 15.305C6.69446 6.85228 13.5467 0 21.9995 0C30.4522 0 37.3045 6.85228 37.3045 15.305V26.5731C37.3045 26.6145 37.3141 26.6552 37.3326 26.6922L43.2746 38.5521C43.6077 39.217 43.1242 40 42.3805 40H1.61938C0.875674 40 0.392197 39.2171 0.725289 38.5521L6.66632 26.6922C6.68483 26.6552 6.69446 26.6145 6.69446 26.5731V15.305Z", fill: "url(#paint1_linear_8482_10235)" })] }));
+});
+
+export { EmptyMainNotificationIcon };

package/Empty/typings.d.ts

@@ -13,14 +13,14 @@ export interface PresetPictogramEmptyProps {
      * The type of empty state, which determines the icon and color theme.
      * @default 'initial-data'
      */
-    type?: 'initial-data' | 'result' | 'system';
+    type?: 'initial-data' | 'result' | 'system' | 'notification';
     /**
      * Custom pictogram element.
      */
     pictogram?: ReactNode;
 }
 export interface CustomPictogramEmptyProps {
-    type?: 'notification' | 'custom';
+    type?: 'custom';
     pictogram?: ReactNode;
 }
 export interface MainOrSubEmptyProps {

package/FilterArea/Filter.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { FilterAlign, FilterSpan } from '@mezzanine-ui/core/filter-area';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { FormFieldProps } from '../Form';
+export interface FilterProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Layout control - Vertical alignment of the field.
+     * @default 'stretch'
+     */
+    align?: FilterAlign;
+    /**
+     * The content of the filter field.
+     */
+    children: ReactElement<FormFieldProps> | ReactElement<FormFieldProps>[];
+    /**
+     * Layout control - Whether the field should automatically expand to fill the entire row (equivalent to span={12}).
+     * @default false
+     */
+    grow?: boolean;
+    /**
+     * Layout control - Minimum width of the field.
+     */
+    minWidth?: string | number;
+    /**
+     * Layout control - Number of columns the field occupies in the Grid (1-12, Grid has 12 columns total).
+     * This property is ignored when grow is true.
+     * @default 2
+     */
+    span?: FilterSpan;
+}
+declare const Filter: import("react").ForwardRefExoticComponent<FilterProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Filter;

package/FilterArea/Filter.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { filterAreaClasses, filterAreaPrefix } from '@mezzanine-ui/core/filter-area';
+import cx from 'clsx';
+
+const Filter = forwardRef(function Filter(props, ref) {
+    const { align = 'stretch', children, className, grow = false, minWidth, span = 2, ...rest } = props;
+    const filterClassName = useMemo(() => cx(filterAreaClasses.filter, {
+        [filterAreaClasses.filterGrow]: grow,
+        [filterAreaClasses.filterAlign(align)]: align,
+    }, className), [align, className, grow]);
+    const style = useMemo(() => ({
+        ...(minWidth && { minWidth: typeof minWidth === 'number' ? `${minWidth}px` : minWidth }),
+        ...(!grow && {
+            [`--${filterAreaPrefix}-filter-span`]: span,
+        }),
+        ...rest.style,
+    }), [grow, minWidth, rest.style, span]);
+    return (jsx("div", { ...rest, ref: ref, className: filterClassName, style: style, children: children }));
+});
+
+export { Filter as default };