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

package/AutoComplete/useAutoCompleteKeyboard.d.ts

@@ -0,0 +1,31 @@
+import { Dispatch, KeyboardEvent, KeyboardEventHandler, Ref, SetStateAction } from 'react';
+import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
+import { SelectValue } from '../Select/typings';
+type UseAutoCompleteKeyboardParams = {
+    activeIndex: number | null;
+    addable: boolean;
+    createSeparators: string[];
+    dropdownOptions: DropdownOption[];
+    handleBulkCreate: (texts: string[]) => void;
+    handleDropdownSelect: (option: DropdownOption) => void;
+    inputRef?: Ref<HTMLInputElement>;
+    inputPropsOnKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    isMultiple: boolean;
+    mode: 'single' | 'multiple';
+    onFocus: (focus: boolean) => void;
+    open: boolean;
+    processBulkCreate: (text: string) => string[];
+    searchText: string;
+    searchTextExistWithoutOption: boolean;
+    setActiveIndex: Dispatch<SetStateAction<number | null>>;
+    setListboxHasVisualFocus: (focus: boolean) => void;
+    setInsertText: (value: string) => void;
+    setSearchText: (value: string) => void;
+    toggleOpen: (newOpen: boolean | ((prev: boolean) => boolean)) => void;
+    value: SelectValue[] | SelectValue | null | undefined;
+    wrappedOnChange: (chooseOption: SelectValue | null) => SelectValue[] | SelectValue | null;
+};
+export declare function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, toggleOpen, value, wrappedOnChange, }: UseAutoCompleteKeyboardParams): {
+    handleInputKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+};
+export {};

package/AutoComplete/useAutoCompleteKeyboard.js

@@ -0,0 +1,149 @@
+import { useCallback } from 'react';
+import { createDropdownKeydownHandler } from '../Dropdown/dropdownKeydownHandler.js';
+
+function isMultipleValue(value) {
+    return Array.isArray(value);
+}
+function useAutoCompleteKeyboard({ activeIndex, addable, createSeparators, dropdownOptions, handleBulkCreate, handleDropdownSelect, inputPropsOnKeyDown, inputRef, mode, onFocus, open, processBulkCreate, searchText, searchTextExistWithoutOption, setActiveIndex, setInsertText, setListboxHasVisualFocus, setSearchText, toggleOpen, value, wrappedOnChange, }) {
+    const handleKeyDown = useCallback((e) => createDropdownKeydownHandler({
+        activeIndex,
+        onEnterSelect: (option) => {
+            handleDropdownSelect(option);
+            if (mode === 'single') {
+                toggleOpen(false);
+                onFocus(false);
+            }
+        },
+        onEscape: () => {
+            var _a;
+            toggleOpen(false);
+            setActiveIndex(null);
+            setListboxHasVisualFocus(false);
+            if (inputRef && typeof inputRef !== 'function') {
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        },
+        open,
+        options: dropdownOptions,
+        setActiveIndex,
+        setListboxHasVisualFocus,
+        setOpen: (newOpen) => {
+            if (newOpen && !open) {
+                toggleOpen(true);
+            }
+            else if (!newOpen && open) {
+                toggleOpen(false);
+            }
+        },
+    })(e), [
+        activeIndex,
+        dropdownOptions,
+        handleDropdownSelect,
+        inputRef,
+        mode,
+        onFocus,
+        open,
+        setActiveIndex,
+        setListboxHasVisualFocus,
+        toggleOpen,
+    ]);
+    const handleEnterKey = useCallback((e) => {
+        if (e.key === 'Enter' && open) {
+            if (addable && searchText) {
+                const hasSeparator = createSeparators.some((sep) => searchText.includes(sep));
+                if (hasSeparator && mode === 'multiple') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const textsToCreate = processBulkCreate(searchText);
+                    if (textsToCreate.length > 0) {
+                        handleBulkCreate(textsToCreate);
+                        setSearchText('');
+                        setInsertText('');
+                        return true;
+                    }
+                }
+                if (!hasSeparator && searchTextExistWithoutOption) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const textsToCreate = processBulkCreate(searchText);
+                    if (textsToCreate.length > 0) {
+                        handleBulkCreate(textsToCreate);
+                        setSearchText('');
+                        setInsertText('');
+                    }
+                    return true;
+                }
+            }
+            if (activeIndex === null && dropdownOptions.length > 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                const optionToSelect = dropdownOptions[0];
+                if (optionToSelect) {
+                    handleDropdownSelect(optionToSelect);
+                    if (mode === 'single') {
+                        toggleOpen(false);
+                        onFocus(false);
+                    }
+                }
+                return true;
+            }
+        }
+        return false;
+    }, [
+        activeIndex,
+        addable,
+        createSeparators,
+        dropdownOptions,
+        handleBulkCreate,
+        handleDropdownSelect,
+        mode,
+        onFocus,
+        open,
+        processBulkCreate,
+        searchText,
+        searchTextExistWithoutOption,
+        setInsertText,
+        setSearchText,
+        toggleOpen,
+    ]);
+    const handleInputKeyDown = useCallback((e) => {
+        if (handleEnterKey(e))
+            return;
+        if (mode === 'multiple' &&
+            isMultipleValue(value) &&
+            value.length > 0 &&
+            !searchText) {
+            if (e.key === 'Backspace') {
+                e.preventDefault();
+                const lastValue = value[value.length - 1];
+                if (lastValue) {
+                    wrappedOnChange(lastValue);
+                }
+                return;
+            }
+            if (e.key === 'Delete') {
+                e.preventDefault();
+                const firstValue = value[0];
+                if (firstValue) {
+                    wrappedOnChange(firstValue);
+                }
+                return;
+            }
+        }
+        handleKeyDown(e);
+        inputPropsOnKeyDown === null || inputPropsOnKeyDown === void 0 ? void 0 : inputPropsOnKeyDown(e);
+    }, [
+        handleEnterKey,
+        handleKeyDown,
+        inputPropsOnKeyDown,
+        mode,
+        searchText,
+        value,
+        wrappedOnChange,
+    ]);
+    return {
+        handleInputKeyDown,
+    };
+}
+
+export { useAutoCompleteKeyboard };

package/AutoComplete/useAutoCompleteSearch.d.ts

@@ -0,0 +1,16 @@
+type UseAutoCompleteSearchParams = {
+    asyncData: boolean;
+    loading: boolean;
+    onSearch?: (input: string) => void | Promise<void>;
+    searchDebounceTime: number;
+};
+type RunSearchOptions = {
+    immediate?: boolean;
+};
+export declare function useAutoCompleteSearch({ asyncData, loading, onSearch, searchDebounceTime, }: UseAutoCompleteSearchParams): {
+    cancelSearch: () => void;
+    internalLoading: boolean;
+    isLoading: boolean;
+    runSearch: (searchValue: string, options?: RunSearchOptions) => void;
+};
+export {};

package/AutoComplete/useAutoCompleteSearch.js

@@ -0,0 +1,69 @@
+import debounce from 'lodash/debounce';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+
+function useAutoCompleteSearch({ asyncData, loading, onSearch, searchDebounceTime, }) {
+    const [internalLoading, setInternalLoading] = useState(false);
+    const requestSeqRef = useRef(0);
+    const executeSearch = useCallback((searchValue) => {
+        if (!onSearch) {
+            if (asyncData)
+                setInternalLoading(false);
+            return;
+        }
+        if (!asyncData) {
+            onSearch(searchValue);
+            return;
+        }
+        const currentSeq = requestSeqRef.current + 1;
+        requestSeqRef.current = currentSeq;
+        setInternalLoading(true);
+        try {
+            const result = onSearch(searchValue);
+            const finalize = () => {
+                if (requestSeqRef.current === currentSeq) {
+                    setInternalLoading(false);
+                }
+            };
+            if (result instanceof Promise) {
+                result.finally(finalize);
+            }
+            else {
+                finalize();
+            }
+        }
+        catch (error) {
+            // Handle synchronous errors that occur before Promise creation
+            // Reset loading state to prevent UI from being stuck in loading state
+            if (requestSeqRef.current === currentSeq) {
+                setInternalLoading(false);
+            }
+            // Re-throw error to allow calling code to handle it
+            // This is necessary because the error occurred synchronously and the caller
+            // should be aware of it (e.g., for error logging or user notification)
+            throw error;
+        }
+    }, [asyncData, onSearch]);
+    const debouncedSearch = useMemo(() => debounce((value) => executeSearch(value), searchDebounceTime), [executeSearch, searchDebounceTime]);
+    useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);
+    const runSearch = useCallback((searchValue, options) => {
+        if (options === null || options === void 0 ? void 0 : options.immediate) {
+            debouncedSearch.cancel();
+            executeSearch(searchValue);
+            return;
+        }
+        if (!searchValue) {
+            debouncedSearch.cancel();
+            executeSearch(searchValue);
+            return;
+        }
+        debouncedSearch(searchValue);
+    }, [debouncedSearch, executeSearch]);
+    return {
+        cancelSearch: debouncedSearch.cancel,
+        internalLoading,
+        isLoading: asyncData ? internalLoading || loading : loading,
+        runSearch,
+    };
+}
+
+export { useAutoCompleteSearch };

package/AutoComplete/useCreationTracker.d.ts

@@ -0,0 +1,17 @@
+import { SelectValue } from '../Select/typings';
+type CreationTracker = {
+    newlyCreatedIds: Set<string>;
+    unselectedCreatedIds: Set<string>;
+    allCreatedIds: Set<string>;
+};
+export declare function useCreationTracker(): {
+    creationTrackerRef: import("react").RefObject<CreationTracker>;
+    filterUnselected: (options: SelectValue[]) => SelectValue<string>[];
+    clearUnselected: () => void;
+    markCreated: (id: string) => void;
+    clearNewlyCreated: (ids?: string[]) => void;
+    markUnselected: (ids: string[]) => void;
+    isNewlyCreated: (id: string) => boolean;
+    isCreated: (id: string) => boolean;
+};
+export {};

package/AutoComplete/useCreationTracker.js

@@ -0,0 +1,47 @@
+import { useRef, useCallback } from 'react';
+
+function useCreationTracker() {
+    const creationTrackerRef = useRef({
+        newlyCreatedIds: new Set(),
+        unselectedCreatedIds: new Set(),
+        allCreatedIds: new Set(),
+    });
+    const filterUnselected = useCallback((options) => options.filter((opt) => !creationTrackerRef.current.unselectedCreatedIds.has(opt.id)), [creationTrackerRef]);
+    const clearUnselected = useCallback(() => {
+        creationTrackerRef.current.unselectedCreatedIds.clear();
+    }, []);
+    const clearNewlyCreated = useCallback((ids) => {
+        if (!ids) {
+            creationTrackerRef.current.newlyCreatedIds.clear();
+            return;
+        }
+        ids.forEach((id) => {
+            creationTrackerRef.current.newlyCreatedIds.delete(id);
+        });
+    }, []);
+    const markCreated = useCallback((id) => {
+        creationTrackerRef.current.newlyCreatedIds.add(id);
+        creationTrackerRef.current.allCreatedIds.add(id);
+    }, []);
+    const markUnselected = useCallback((ids) => {
+        ids.forEach((id) => {
+            if (creationTrackerRef.current.allCreatedIds.has(id)) {
+                creationTrackerRef.current.unselectedCreatedIds.add(id);
+            }
+        });
+    }, []);
+    const isNewlyCreated = useCallback((id) => creationTrackerRef.current.newlyCreatedIds.has(id), []);
+    const isCreated = useCallback((id) => creationTrackerRef.current.allCreatedIds.has(id), []);
+    return {
+        creationTrackerRef,
+        filterUnselected,
+        clearUnselected,
+        markCreated,
+        clearNewlyCreated,
+        markUnselected,
+        isNewlyCreated,
+        isCreated,
+    };
+}
+
+export { useCreationTracker };

package/Breadcrumb/Breadcrumb.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, isValidElement, cloneElement } from 'react';
-import { SlashIcon } from '@mezzanine-ui/icons';
 import { breadcrumbClasses } from '@mezzanine-ui/core/breadcrumb';
-import BreadcrumbItem from './BreadcrumbItem.js';
+import { SlashIcon } from '@mezzanine-ui/icons';
 import { flattenChildren } from '../utils/flatten-children.js';
+import BreadcrumbItem from './BreadcrumbItem.js';
+import { BreadcrumbOverflowMenu } from './BreadcrumbOverflowMenu.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -13,32 +14,26 @@ const renderItemWithProps = (item, appendProps) => {
     }
     return jsx(BreadcrumbItem, { ...item, ...appendProps });
 };
+const convertToPropsWithId = (item) => {
+    if (isValidElement(item)) {
+        return { id: item.props.id || item.props.name, ...item.props };
+    }
+    return { id: item.id || item.name, ...item };
+};
 const renderItems = (items, condensed) => {
     if (!items) {
         return null;
     }
     const lastIndex = items.length - 1;
+    const hasOverflowDropdownIcon = !condensed || items.length > 2;
+    const collapsedProps = hasOverflowDropdownIcon
+        ? condensed
+            ? items.map((v) => convertToPropsWithId(v)).slice(0, lastIndex - 1)
+            : items.map((v) => convertToPropsWithId(v)).slice(2, lastIndex - 1)
+        : [];
     return (jsxs(Fragment, { children: [!condensed &&
                 lastIndex >= 0 &&
-                renderItemWithProps(items[0], { current: lastIndex === 0 }), !condensed && lastIndex >= 1 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[1], { current: lastIndex === 1 })] })), !condensed && items.length <= 4 && (jsxs(Fragment, { children: [lastIndex >= 2 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[2], { current: lastIndex === 2 })] })), lastIndex === 3 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[3], { current: true })] }))] })), (items.length > 4 || condensed) && (jsxs(Fragment, { children: [!condensed && jsx(Icon, { icon: SlashIcon, size: 14 }), (!condensed || items.length > 2) && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { options: (condensed
-                                    ? items.slice(0, lastIndex - 1)
-                                    : items.slice(2, lastIndex - 1)).map((item) => {
-                                    if (isValidElement(item)) {
-                                        const { props } = item;
-                                        return {
-                                            label: props.label,
-                                            href: props.href,
-                                            target: props.target,
-                                            id: props.id,
-                                        };
-                                    }
-                                    return {
-                                        label: item.label,
-                                        href: item.href,
-                                        target: item.target,
-                                        id: item.id,
-                                    };
-                                }) }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), lastIndex - 1 >= 0 && (jsxs(Fragment, { children: [renderItemWithProps(items[lastIndex - 1]), jsx(Icon, { icon: SlashIcon, size: 14 })] })), renderItemWithProps(items[lastIndex], { current: true })] }))] }));
+                renderItemWithProps(items[0], { current: lastIndex === 0 }), !condensed && lastIndex >= 1 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[1], { current: lastIndex === 1 })] })), !condensed && items.length <= 4 && (jsxs(Fragment, { children: [lastIndex >= 2 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[2], { current: lastIndex === 2 })] })), lastIndex === 3 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), renderItemWithProps(items[3], { current: true })] }))] })), (items.length > 4 || condensed) && (jsxs(Fragment, { children: [!condensed && jsx(Icon, { icon: SlashIcon, size: 14 }), hasOverflowDropdownIcon && (jsxs(Fragment, { children: [jsx(BreadcrumbOverflowMenu, { collapsedProps: collapsedProps }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), lastIndex - 1 >= 0 && (jsxs(Fragment, { children: [renderItemWithProps(items[lastIndex - 1]), jsx(Icon, { icon: SlashIcon, size: 14 })] })), renderItemWithProps(items[lastIndex], { current: true })] }))] }));
 };
 /**
  * The react component for `mezzanine` breadcrumb.

package/Breadcrumb/BreadcrumbDropdown.d.ts

@@ -0,0 +1,11 @@
+declare const BreadcrumbDropdown: import("react").ForwardRefExoticComponent<Omit<import("../Dropdown").DropdownProps, "children"> & {
+    className?: string;
+    current?: boolean;
+    href?: never;
+    id?: string;
+    name: string;
+    onClick?: () => void;
+    open?: boolean;
+    target?: never;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export default BreadcrumbDropdown;

package/Breadcrumb/BreadcrumbDropdown.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { ChevronDownIcon } from '@mezzanine-ui/icons';
+import { breadcrumbItemClasses } from '@mezzanine-ui/core/breadcrumb';
+import Typography from '../Typography/Typography.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+import Rotate from '../Transition/Rotate.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const BreadcrumbDropdown = forwardRef(function BreadcrumbDropdown(props, ref) {
+    const { className, current, name, onClick, open: openProp, options, ...rest } = props;
+    const [_open, setOpen] = useState(false);
+    const open = openProp !== null && openProp !== void 0 ? openProp : _open;
+    const handleClick = () => {
+        setOpen(!open);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsx("span", { className: cx(breadcrumbItemClasses.host, className), ref: ref, children: jsx(Dropdown, { onClose: () => setOpen(false), onOpen: () => handleClick(), options: options, placement: "bottom-start", ...rest, children: jsxs("button", { className: cx(breadcrumbItemClasses.trigger, open && breadcrumbItemClasses.expanded, current && breadcrumbItemClasses.current), type: "button", children: [name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })), jsx(Rotate, { in: open, children: jsx(Icon, { className: breadcrumbItemClasses.icon, icon: ChevronDownIcon, size: 14 }) })] }) }) }));
+});
+
+export { BreadcrumbDropdown as default };

package/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,4 +1,3 @@
-declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("..").ComponentPropsWithoutKeyAndRef<"button">, "expand" | "label" | "component" | "current" | "options" | "href" | "target"> & (import("./typings").BreadcrumbDropdownItemProps | import("./typings").BreadcrumbItemTextProps | import("./typings").BreadcrumbLinkItemProps), "component"> & {
-    component?: import("./typings").BreadcrumbItemComponent | undefined;
-} & import("react").RefAttributes<HTMLElement>>;
+import type { BreadcrumbItemProps } from './typings';
+declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default BreadcrumbItem;

package/Breadcrumb/BreadcrumbItem.js

@@ -1,45 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
-import { ChevronDownIcon, DotHorizontalIcon } from '@mezzanine-ui/icons';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { breadcrumbItemClasses } from '@mezzanine-ui/core/breadcrumb';
 import Typography from '../Typography/Typography.js';
-import Rotate from '../Transition/Rotate.js';
-import Icon from '../Icon/Icon.js';
-import Menu from '../Menu/Menu.js';
-import MenuItem from '../Menu/MenuItem.js';
+import BreadcrumbDropdown from './BreadcrumbDropdown.js';
 import cx from 'clsx';
 
 const BreadcrumbItem = forwardRef(function BreadcrumbItem(props, ref) {
-    const { className, component, current, expand: expandProp, label, onClick, onTouchEnd, options, ...rest } = props;
-    const [_expand, setExpand] = useState(false);
-    const expand = expandProp !== null && expandProp !== void 0 ? expandProp : _expand;
-    const Component = (() => {
+    if ('options' in props)
+        return jsx(BreadcrumbDropdown, { ...props });
+    const { className, component, current, href, name, onClick, rel, target, ...rest } = props;
+    const TriggerComponent = (() => {
         if (component)
             return component;
-        if ('onClick' in props || 'options' in props) {
-            return 'button';
-        }
-        if (!current && 'href' in props && typeof props.href === 'string') {
+        if ((!current && 'href' in props && typeof props.href === 'string') ||
+            'onClick' in props) {
             return 'a';
         }
-        return 'div';
+        return 'span';
     })();
-    const handleClick = (e) => {
-        setExpand(!expand);
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    };
-    const handleTouchEnd = (e) => {
-        setExpand(!expand);
-        onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+    const handleClick = () => {
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsxs(Component, { ...rest, "aria-expanded": options ? expand : undefined, "aria-haspopup": options ? 'true' : undefined, className: cx(breadcrumbItemClasses.host, expand && breadcrumbItemClasses.expanded, current && breadcrumbItemClasses.current, className), onClick: Component === 'button' ? handleClick : undefined, onTouchEnd: Component === 'button' ? handleTouchEnd : undefined, ref: ref, children: [label && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: label })), 'options' in props &&
-                (label ? (
-                /* normal dropdown icon item */
-                jsx(Rotate, { in: expand, children: jsx(Icon, { className: breadcrumbItemClasses.icon, icon: ChevronDownIcon, size: 14 }) })) : (
-                /* overflow dropdown icon item */
-                jsx(Icon, { className: breadcrumbItemClasses.icon, icon: DotHorizontalIcon, size: 14 }))), options && expand && (jsx(Menu, { className: breadcrumbItemClasses.menu, children: options
-                    .filter((v) => v.label)
-                    .map((option) => (jsx(MenuItem, { children: option.label }, option.id || option.label))) }))] }));
+    return (jsx("span", { ...rest, className: cx(breadcrumbItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: cx(breadcrumbItemClasses.trigger, current && breadcrumbItemClasses.current), href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })) }) }));
 });
 
 export { BreadcrumbItem as default };

package/Breadcrumb/BreadcrumbOverflowMenu.d.ts

@@ -0,0 +1,7 @@
+import { HtmlHTMLAttributes } from 'react';
+import { BreadcrumbItemProps } from './typings';
+export declare const BreadcrumbOverflowMenu: (props: HtmlHTMLAttributes<HTMLButtonElement> & {
+    collapsedProps: (BreadcrumbItemProps & {
+        id: string;
+    })[];
+}) => import("react/jsx-runtime").JSX.Element;

package/Breadcrumb/BreadcrumbOverflowMenu.js

@@ -0,0 +1,77 @@
+'use client';
+import { useState, useRef, useMemo, useCallback, createElement } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { TransitionGroup } from 'react-transition-group';
+import { breadcrumbClasses } from '@mezzanine-ui/core/breadcrumb';
+import { DotHorizontalIcon } from '@mezzanine-ui/icons';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
+import BreadcrumbOverflowMenuItem from './BreadcrumbOverflowMenuItem.js';
+import Icon from '../Icon/Icon.js';
+import Popper from '../Popper/Popper.js';
+import Translate from '../Transition/Translate.js';
+import cx from 'clsx';
+
+const BreadcrumbOverflowMenu = (props) => {
+    const { onClick, className, collapsedProps, ...rest } = props;
+    const [menuOpen, setMenuOpen] = useState(false);
+    const targetRef = useRef(null);
+    const popperRef = useRef(null);
+    const translateProps = useMemo(() => ({
+        duration: {
+            enter: MOTION_DURATION.moderate,
+            exit: MOTION_DURATION.moderate,
+        },
+        easing: {
+            enter: MOTION_EASING.standard,
+            exit: MOTION_EASING.standard,
+        },
+    }), []);
+    useDocumentEvents(() => {
+        if (!menuOpen) {
+            return;
+        }
+        const handleClickAway = (event) => {
+            const target = event.target;
+            const anchor = targetRef.current;
+            const popper = popperRef.current;
+            if (!target)
+                return;
+            if (anchor &&
+                popper &&
+                !anchor.contains(target) &&
+                !popper.contains(target)) {
+                setMenuOpen(false);
+            }
+        };
+        return {
+            click: handleClickAway,
+            touchend: handleClickAway,
+        };
+    }, [menuOpen]);
+    const zIndexMiddleware = useMemo(() => {
+        const zIndexValue = 1;
+        return {
+            name: 'zIndex',
+            fn: ({ elements }) => {
+                const zIndexNum = zIndexValue
+                    ;
+                Object.assign(elements.floating.style, {
+                    zIndex: zIndexNum,
+                });
+                return {};
+            },
+        };
+    }, []);
+    const buttonOnClick = useCallback((e) => {
+        setMenuOpen(!menuOpen);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [menuOpen, onClick]);
+    return (jsxs(Fragment, { children: [jsx("button", { "aria-label": 'more options', type: "button", ...rest, ref: targetRef, className: cx(breadcrumbClasses.iconButton, className), onClick: buttonOnClick, children: jsx(Icon, { icon: DotHorizontalIcon, size: 14 }) }), jsx(Popper, { anchor: targetRef.current, disablePortal: true, open: menuOpen, options: {
+                    middleware: [zIndexMiddleware],
+                    placement: 'bottom-start',
+                }, ref: popperRef, children: jsx(TransitionGroup, { component: null, children: menuOpen && (createElement(Translate, { ...translateProps, from: 'bottom', in: true, key: "popper-list" },
+                        jsx("span", { className: breadcrumbClasses.menu, children: jsx("span", { className: breadcrumbClasses.menuContent, children: collapsedProps.map((v) => (jsx(BreadcrumbOverflowMenuItem, { ...v }, v.id))) }) }))) }) })] }));
+};
+
+export { BreadcrumbOverflowMenu };

package/Breadcrumb/BreadcrumbOverflowMenuDropdown.d.ts

@@ -0,0 +1,11 @@
+declare const BreadcrumbOverflowMenuDropdown: import("react").ForwardRefExoticComponent<Omit<import("../Dropdown").DropdownProps, "children"> & {
+    className?: string;
+    current?: boolean;
+    href?: never;
+    id?: string;
+    name: string;
+    onClick?: () => void;
+    open?: boolean;
+    target?: never;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export default BreadcrumbOverflowMenuDropdown;

package/Breadcrumb/BreadcrumbOverflowMenuDropdown.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { breadcrumbOverflowMenuItemClasses } from '@mezzanine-ui/core/breadcrumb';
+import { ChevronRightIcon } from '@mezzanine-ui/icons';
+import Typography from '../Typography/Typography.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const BreadcrumbOverflowMenuDropdown = forwardRef(function BreadcrumbOverflowMenuDropdown(props, ref) {
+    const { className, name, onClick, open: openProp, options, ...rest } = props;
+    const [_open, setOpen] = useState(false);
+    const open = openProp !== null && openProp !== void 0 ? openProp : _open;
+    const handleClick = () => {
+        setOpen(!open);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    return (jsx("span", { className: cx(breadcrumbOverflowMenuItemClasses.host, open && breadcrumbOverflowMenuItemClasses.expanded, className), ref: ref, children: jsx(Dropdown, { onClose: () => setOpen(false), onOpen: () => handleClick(), options: options, placement: "right-start", ...rest, children: jsxs("button", { className: cx(breadcrumbOverflowMenuItemClasses.trigger), type: "button", children: [jsx(Typography, { variant: 'label-primary', children: name }), jsx(Icon, { className: breadcrumbOverflowMenuItemClasses.icon, icon: ChevronRightIcon, size: 16 })] }) }) }));
+});
+
+export { BreadcrumbOverflowMenuDropdown as default };

package/Breadcrumb/BreadcrumbOverflowMenuItem.d.ts

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