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

package/ContentHeader/ContentHeader.d.ts

@@ -0,0 +1,160 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from '../Button';
+import { SearchInputProps } from '../Input';
+import { SelectProps } from '../Select';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { DropdownProps } from '../Dropdown';
+type SegmentedControlProps = {
+    mock: 'SegmentedControlProps';
+};
+type ContentHeaderChild = ReactElement<SearchInputProps> | ReactElement<SelectProps> | ReactElement<SegmentedControlProps> | ReactElement<ButtonProps> | ReactElement<DropdownProps> | ReactElement<{
+    href: string;
+}> | null | false | undefined;
+/**
+ * Props for the ContentHeader component.
+ *
+ * Defines a flexible header with title, description, filter, action buttons, and utility icons.
+ * Commonly used in page headers for primary user actions.
+ */
+export type ContentHeaderProps = Omit<NativeElementPropsWithoutKeyAndRef<'header'>, 'children'> & {
+    /**
+     * Button configuration for actions. <br />
+     * Automatically applies proper styling and order. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     * Buttons with variants other than primary, secondary, and destructive will not be rendered. <br />
+     */
+    actions?: ButtonProps[];
+    /**
+     * Children elements: <br />
+     * - Back button which Component with href prop.
+     *     - example 1: `<a href="..." />` <br />
+     *     - example 2: `<Link href="..." />` <br />
+     *     - conflicting prop: `onBackClick` <br />
+     * - Filter component (SearchInput, Select, or SegmentedControl) <br />
+     * - Action buttons `<Button />` <br />
+     * - Icon-only utility buttons `<Button icon="..." />` <br />
+     * - Overflow icon utility dropdown `<Dropdown> <Button icon="..." /> </Dropdown>` <br />
+     * <br />
+     * Can mix and match the above children. <br />
+     * The order of children does not matter as they will be arranged properly. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     */
+    children?: ContentHeaderChild[] | ContentHeaderChild;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Filter component (SearchInput, Select, or SegmentedControl) */
+    filter?: {
+        variant: 'search' | 'select' | 'segmentedControl';
+    } & (SearchInputProps | SelectProps | SegmentedControlProps);
+    /**
+     * Optional back button properties. <br />
+     * When provided, a back button will be rendered on the left side of the title. <br />
+     * href prop from children will be ignored if onBackClick is provided. <br />
+     * */
+    onBackClick?: () => void;
+    /**
+     * Size variant of the toolbar. <br />
+     * Affects the size of buttons and filter component. <br />
+     */
+    size?: 'main' | 'sub';
+    /** Main title text for the content header */
+    title: string;
+    /**
+     * HTML element type for the title (defaults to 'h1' for main size and 'h2' for sub size)
+     */
+    titleComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    /**
+     * Icon-only utility buttons `<Button icon="..." />`. <br />
+     * They usually appear as smaller buttons with only an icon and no text.
+     */
+    utilities?: ((ButtonProps & {
+        icon: IconDefinition;
+    }) | DropdownProps)[];
+};
+/**
+ * ContentHeader component. <br />
+ * A flexible header with title, description, filter, action buttons, and utility icons. <br />
+ * Commonly used in page headers for primary user actions. <br />
+ *
+ * @example
+ * ```tsx
+ *  <ContentHeader
+ *    size="main"
+ *    title={'ContentHeader Title'}
+ *    description="description."
+ *  >
+ *    <a href="" title="back" />  <-- Back button
+ *
+ *    <Input variant="search" placeholder="Search..." />  <-- Filter component
+ *    <Button variant="base-secondary">Secondary</Button>  <-- Action buttons
+ *    <Button>Primary</Button>
+ *
+ *    <Button icon={PlusIcon} />  <-- Utility icon button
+ *    <Dropdown
+ *      options={[
+ *        { id: '1', name: 'Option 1' },
+ *        { id: '2', name: 'Option 2' },
+ *      ]}
+ *    >
+ *      <Button icon={DotHorizontalIcon} />
+ *    </Dropdown>  <-- Utility dropdown
+ *  </ContentHeader>
+ * ```
+ */
+declare const ContentHeader: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"header">, "children"> & {
+    /**
+     * Button configuration for actions. <br />
+     * Automatically applies proper styling and order. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     * Buttons with variants other than primary, secondary, and destructive will not be rendered. <br />
+     */
+    actions?: ButtonProps[];
+    /**
+     * Children elements: <br />
+     * - Back button which Component with href prop.
+     *     - example 1: `<a href="..." />` <br />
+     *     - example 2: `<Link href="..." />` <br />
+     *     - conflicting prop: `onBackClick` <br />
+     * - Filter component (SearchInput, Select, or SegmentedControl) <br />
+     * - Action buttons `<Button />` <br />
+     * - Icon-only utility buttons `<Button icon="..." />` <br />
+     * - Overflow icon utility dropdown `<Dropdown> <Button icon="..." /> </Dropdown>` <br />
+     * <br />
+     * Can mix and match the above children. <br />
+     * The order of children does not matter as they will be arranged properly. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     */
+    children?: ContentHeaderChild[] | ContentHeaderChild;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Filter component (SearchInput, Select, or SegmentedControl) */
+    filter?: {
+        variant: "search" | "select" | "segmentedControl";
+    } & (SearchInputProps | SelectProps | SegmentedControlProps);
+    /**
+     * Optional back button properties. <br />
+     * When provided, a back button will be rendered on the left side of the title. <br />
+     * href prop from children will be ignored if onBackClick is provided. <br />
+     * */
+    onBackClick?: () => void;
+    /**
+     * Size variant of the toolbar. <br />
+     * Affects the size of buttons and filter component. <br />
+     */
+    size?: "main" | "sub";
+    /** Main title text for the content header */
+    title: string;
+    /**
+     * HTML element type for the title (defaults to 'h1' for main size and 'h2' for sub size)
+     */
+    titleComponent?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+    /**
+     * Icon-only utility buttons `<Button icon="..." />`. <br />
+     * They usually appear as smaller buttons with only an icon and no text.
+     */
+    utilities?: ((ButtonProps & {
+        icon: IconDefinition;
+    }) | DropdownProps)[];
+} & import("react").RefAttributes<HTMLElement>>;
+export default ContentHeader;

package/ContentHeader/ContentHeader.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { contentHeaderClasses } from '@mezzanine-ui/core/content-header';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import { renderFilterProp, renderActionsProp, renderIconButtonsProp, resolveContentHeaderChild } from './utils.js';
+import Typography from '../Typography/Typography.js';
+import cx from 'clsx';
+
+/**
+ * ContentHeader component. <br />
+ * A flexible header with title, description, filter, action buttons, and utility icons. <br />
+ * Commonly used in page headers for primary user actions. <br />
+ *
+ * @example
+ * ```tsx
+ *  <ContentHeader
+ *    size="main"
+ *    title={'ContentHeader Title'}
+ *    description="description."
+ *  >
+ *    <a href="" title="back" />  <-- Back button
+ *
+ *    <Input variant="search" placeholder="Search..." />  <-- Filter component
+ *    <Button variant="base-secondary">Secondary</Button>  <-- Action buttons
+ *    <Button>Primary</Button>
+ *
+ *    <Button icon={PlusIcon} />  <-- Utility icon button
+ *    <Dropdown
+ *      options={[
+ *        { id: '1', name: 'Option 1' },
+ *        { id: '2', name: 'Option 2' },
+ *      ]}
+ *    >
+ *      <Button icon={DotHorizontalIcon} />
+ *    </Dropdown>  <-- Utility dropdown
+ *  </ContentHeader>
+ * ```
+ */
+const ContentHeader = forwardRef(function ContentHeader(props, ref) {
+    const { actions, children, className, description, filter, onBackClick, size = 'main', title, titleComponent = size === 'main' ? 'h1' : 'h2', utilities, ...rest } = props;
+    const renderFilter = renderFilterProp(filter, size);
+    const renderActions = actions ? renderActionsProp(actions, size) : null;
+    const renderUtilities = utilities
+        ? renderIconButtonsProp(utilities, size)
+        : null;
+    const { backButton, filter: filterFromChildren, actions: actionsFromChildren, utilities: utilitiesFromChildren, } = resolveContentHeaderChild(children, size);
+    // prop onBack takes precedence over backButtonOrLink
+    const renderBackButton = onBackClick ? (jsx(Button, { iconType: "icon-only", icon: ChevronLeftIcon, onClick: onBackClick, "aria-label": "Back", type: "button", size: "sub", variant: "base-tertiary" })) : (backButton);
+    return (jsxs("header", { ...rest, className: cx(contentHeaderClasses.host, contentHeaderClasses.size(size), className), ref: ref, children: [jsxs("span", { className: contentHeaderClasses.titleArea, children: [renderBackButton && (jsx("span", { className: contentHeaderClasses.backButton, children: renderBackButton })), jsxs("span", { className: contentHeaderClasses.textGroup, children: [jsx(Typography, { component: titleComponent, align: "left", color: "text-neutral-solid", variant: size === 'main' ? 'h2' : 'h3', children: title }), description && (jsx(Typography, { align: "left", color: "text-neutral", variant: "caption", children: description }))] })] }), jsxs("span", { className: contentHeaderClasses.actionArea, children: [renderFilter || filterFromChildren, (renderActions || actionsFromChildren.length > 0) && (jsx(ButtonGroup, { children: renderActions || actionsFromChildren })), (renderUtilities || utilitiesFromChildren.length > 0) && (jsx("span", { className: contentHeaderClasses.utilities, children: renderUtilities || utilitiesFromChildren }))] })] }));
+});
+
+export { ContentHeader as default };

package/ContentHeader/index.d.ts

@@ -0,0 +1,2 @@
+export type { ContentHeaderProps } from './ContentHeader';
+export { default } from './ContentHeader';

package/ContentHeader/index.js

@@ -0,0 +1 @@
+export { default } from './ContentHeader.js';

package/ContentHeader/utils.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+import { ButtonProps, ButtonGroupChild } from '../Button';
+import { ContentHeaderProps } from './ContentHeader';
+import { DropdownProps } from '../Dropdown';
+/**
+ * Renders a button from either ButtonProps or a React element.
+ * Applies the specified size and variant to the button.
+ */
+export declare const renderButton: (button: ButtonProps | ButtonGroupChild | undefined, size: ButtonProps["size"]) => ReactElement<ButtonProps> | null;
+export declare const renderFilterProp: (prop: ContentHeaderProps["filter"], size: "main" | "sub") => import("react/jsx-runtime").JSX.Element | null;
+export declare const renderIconButtonWithProps: (child: ReactElement<ButtonProps>, size: ButtonProps["size"]) => ReactElement<ButtonProps>;
+export declare const renderIconButtonsProp: (utilities: ContentHeaderProps["utilities"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
+/**
+ * Renders action buttons based on the actions configuration.
+ * Supports both structured actions object and single button element/props.
+ */
+export declare const renderActionsProp: (actions: ContentHeaderProps["actions"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
+export declare const resolveContentHeaderChild: (children: ContentHeaderProps["children"], size: "main" | "sub") => {
+    filter: null;
+    actions: ReactElement<ButtonProps, string | import("react").JSXElementConstructor<any>>[];
+    utilities: (ButtonGroupChild | ReactElement<DropdownProps, string | import("react").JSXElementConstructor<any>>)[];
+    backButton: null;
+};

package/ContentHeader/utils.js

@@ -0,0 +1,215 @@
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement, cloneElement, Children } from 'react';
+import Button from '../Button/Button.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import Input from '../Input/Input.js';
+import Select from '../Select/Select.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+
+/**
+ * Renders a button from either ButtonProps or a React element.
+ * Applies the specified size and variant to the button.
+ */
+const renderButton = (button, size) => {
+    if (!button) {
+        return null;
+    }
+    if (isValidElement(button)) {
+        return cloneElement(button, {
+            size,
+            type: 'button',
+        });
+    }
+    return jsx(Button, { ...button, size: size, type: "button" });
+};
+const withSize = (target, size) => {
+    return cloneElement(target, { size });
+};
+const renderFilterProp = (prop, size) => {
+    if (!prop) {
+        return null;
+    }
+    const { variant } = prop;
+    if (variant === 'search') {
+        return (jsx(Input, { ...prop, size: size, variant: "search" }));
+    }
+    if (variant === 'select') {
+        return jsx(Select, { ...prop, size: size });
+    }
+    if (variant === 'segmentedControl') {
+        console.warn('SegmentedControl component is not implemented yet.');
+        return null;
+    }
+    return null;
+};
+const renderIconButtonWithProps = (child, size) => {
+    const { icon } = child.props;
+    return cloneElement(child, {
+        icon,
+        iconType: 'icon-only',
+        size,
+        variant: 'base-secondary',
+        type: 'button',
+    });
+};
+const renderIconButtonsProp = (utilities, size) => {
+    const result = [];
+    utilities === null || utilities === void 0 ? void 0 : utilities.forEach((props) => {
+        if (props instanceof Object && 'icon' in props) {
+            result.push(jsx(Button, { ...props, type: "button", size: size, iconType: "icon-only", variant: "base-secondary" }));
+        }
+        if (props instanceof Object && 'options' in props) {
+            if (!isValidElement(props.children) ||
+                !(props.children.type === Button)) {
+                console.warn('[Mezzanine][ContentHeader]: Dropdown in utilities should have Button with icon as its children.');
+                return;
+            }
+            result.push(jsx(Dropdown, { ...props, children: cloneElement(props.children, {
+                    type: 'button',
+                    size: size,
+                    iconType: 'icon-only',
+                    variant: 'base-secondary',
+                }) }));
+        }
+    });
+    return result;
+};
+const variantOrder = {
+    'destructive-secondary': 0,
+    'base-secondary': 1,
+    'base-primary': 2,
+    // undefined: 2,
+    'base-tertiary': 0,
+    'base-ghost': 0,
+    'base-dashed': 0,
+    'base-text-link': 0,
+    'destructive-primary': 0,
+    'destructive-ghost': 0,
+    'destructive-text-link': 0,
+    inverse: 0,
+    'inverse-ghost': 0,
+};
+/**
+ * Renders action buttons based on the actions configuration.
+ * Supports both structured actions object and single button element/props.
+ */
+const renderActionsProp = (actions, size) => {
+    if (actions) {
+        return actions
+            .filter((v) => {
+            if (v.variant === 'destructive-secondary' ||
+                v.variant === 'base-secondary' ||
+                v.variant === 'base-primary' ||
+                v.variant === undefined) {
+                return true;
+            }
+            else {
+                console.warn(`[Mezzanine][ContentHeader]: Button with variant "${v.variant}" will not be rendered in ContentHeader actions.`);
+                return false;
+            }
+        })
+            .sort((a, b) => variantOrder[a.variant || 'base-primary'] -
+            variantOrder[b.variant || 'base-primary'])
+            .map((v) => renderButton(v, size));
+    }
+    return null;
+};
+const resolveContentHeaderChild = (children, size) => {
+    let filter = null;
+    // [destructive-secondary[], base-secondary[], base-primary[]]
+    const actionsWithOrder = [[], [], []];
+    const utilities = [];
+    let backButton = null;
+    if (children) {
+        const flatChildren = flattenChildren(children);
+        Children.forEach(flatChildren, (child) => {
+            if (!isValidElement(child)) {
+                return;
+            }
+            const { type, props } = child;
+            if (type === 'a' || props.href) {
+                backButton = cloneElement(child, {
+                    children: (jsx(Button, { component: 'span', iconType: "icon-only", icon: ChevronLeftIcon, "aria-label": "Back", type: "button", size: "sub", variant: "base-tertiary" })),
+                });
+                return;
+            }
+            const sizeProp = props.size;
+            if (sizeProp !== undefined && sizeProp !== size) {
+                console.warn('[Mezzanine][ContentHeader]: Input, Button, Select size in ContentHeader utilities is forced to match ContentHeader size.');
+            }
+            // is filter
+            if ((type === Input && props.variant === 'search') ||
+                type === Select) {
+                if (filter) {
+                    console.warn('[Mezzanine][ContentHeader]: ContentHeader only accepts one filter component.');
+                }
+                filter = withSize(child, size);
+            }
+            else if (type.toString() === 'SegmentedControl') {
+                console.warn('SegmentedControl component is not implemented yet.');
+            }
+            // is utilities (icon button)
+            else if ((type === Button && props.iconType === 'icon-only') ||
+                (type === Button &&
+                    props.icon &&
+                    !props.children)) {
+                utilities.push(renderIconButtonWithProps(child, size));
+            }
+            else if (type === Dropdown) {
+                const childProps = child.props
+                    .children;
+                if (!isValidElement(childProps) || childProps.type !== Button) {
+                    console.warn('[Mezzanine][ContentHeader]: Dropdown in utilities should have Button with icon as its children.');
+                    return;
+                }
+                utilities.push(cloneElement(child, {
+                    children: renderIconButtonWithProps(child.props
+                        .children, size),
+                }));
+            }
+            // is actions (normal button)
+            else if (type === Button) {
+                const variant = props.variant;
+                if (variant !== 'base-primary' &&
+                    variant !== 'base-secondary' &&
+                    variant !== 'destructive-secondary' &&
+                    variant !== undefined) {
+                    console.warn(`[Mezzanine][ContentHeader]: Button with variant "${variant}" will not be rendered in ContentHeader actions.`);
+                    return;
+                }
+                const buttonElement = renderButton(child, size);
+                if (!buttonElement) {
+                    return;
+                }
+                if (variant === 'destructive-secondary') {
+                    actionsWithOrder[0].push(buttonElement);
+                }
+                else if (variant === 'base-secondary') {
+                    actionsWithOrder[1].push(buttonElement);
+                }
+                else if (variant === 'base-primary') {
+                    actionsWithOrder[2].push(buttonElement);
+                }
+                else if (variant === undefined) {
+                    actionsWithOrder[2].push(buttonElement);
+                }
+            }
+            else {
+                console.warn('[Mezzanine][ContentHeader]: ContentHeader only accepts Input (search variant), Select, SegmentedControl, Dropdown with Icon Button, or Button as children.');
+            }
+        });
+    }
+    return {
+        filter,
+        actions: [
+            ...actionsWithOrder[0],
+            ...actionsWithOrder[1],
+            ...actionsWithOrder[2],
+        ],
+        utilities,
+        backButton,
+    };
+};
+
+export { renderActionsProp, renderButton, renderFilterProp, renderIconButtonWithProps, renderIconButtonsProp, resolveContentHeaderChild };

package/Dropdown/Dropdown.d.ts

@@ -162,5 +162,22 @@ 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;
 }
 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, mode, value, } = props;
     const isInline = inputPosition === 'inside';
     const inputId = useId();
     const defaultListboxId = `${inputId}-listbox`;
@@ -229,6 +229,8 @@ function Dropdown(props) {
         sameWidth,
         onHover: handleItemHover,
         onSelect,
+        onReachBottom,
+        onLeaveBottom,
         options,
         type,
         status,
@@ -248,6 +250,8 @@ function Dropdown(props) {
         sameWidth,
         handleItemHover,
         onSelect,
+        onReachBottom,
+        onLeaveBottom,
         options,
         type,
         status,
@@ -349,7 +353,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

@@ -73,5 +73,15 @@ 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;
 }
 export default function DropdownItem<T extends DropdownType | undefined = DropdownType>(props: DropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/Dropdown/DropdownItem.js

@@ -57,9 +57,10 @@ 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, } = props;
     const optionsContent = truncateArrayDepth(options, 3);
     const listRef = useRef(null);
+    const listWrapperRef = useRef(null);
     const [expandedNodes, setExpandedNodes] = useState(new Set());
     const hasActions = Boolean(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.showActions);
     const hasHeader = Boolean(headerContent);
@@ -242,7 +243,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 +253,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 };
     };
@@ -323,8 +321,39 @@ function DropdownItem(props) {
             listElement.removeEventListener('keydown', handleKeyDown);
         };
     }, [disabled, matchShortcut, onSelect, type, toggleExpand, visibleShortcutOptions]);
+    // Handle scroll to bottom detection
+    useEffect(() => {
+        const listWrapperElement = listWrapperRef.current;
+        if (!listWrapperElement || !maxHeight || (!onReachBottom && !onLeaveBottom)) {
+            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;
+            // 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]);
     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) }))
+                ? (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).