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

package/Dropdown/DropdownItem.js

@@ -0,0 +1,318 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import keycode from 'keycode';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
+import { CaretDownIcon, CaretRightIcon } from '@mezzanine-ui/icons';
+import { useElementHeight } from '../hooks/useElementHeight.js';
+import Typography from '../Typography/Typography.js';
+import DropdownAction from './DropdownAction.js';
+import DropdownItemCard from './DropdownItemCard.js';
+
+/**
+ * Limits DropdownOption array to a maximum depth, truncating extra children levels and showing error message if exceeded.
+ * @param input - The original DropdownOption array
+ * @param maxDepth - Maximum depth (default: 3)
+ * @param warn - Whether to show warning (default: true)
+ * @returns DropdownOption array with at most the specified depth
+ */
+function truncateArrayDepth(input, maxDepth = 3, warn = true) {
+    // Internal recursive function: truncates children to specified depth
+    const truncate = (options, currentDepth = 1) => {
+        if (currentDepth >= maxDepth) {
+            // Stop going deeper once maximum depth is reached, remove children
+            return options.map(({ children: _children, ...option }) => option);
+        }
+        return options.map(option => {
+            if (!option.children)
+                return option;
+            return {
+                ...option,
+                children: truncate(option.children, currentDepth + 1),
+            };
+        });
+    };
+    // Calculate maximum depth by checking all elements (not just the first one)
+    const getDepth = (options, depth = 1) => {
+        if (!options || options.length === 0)
+            return depth - 1;
+        // Find the maximum depth among all options
+        return Math.max(...options.map((option) => {
+            if (!option.children || option.children.length === 0) {
+                return depth - 1;
+            }
+            return getDepth(option.children, depth + 1);
+        }));
+    };
+    const depth = getDepth(input);
+    if (depth <= maxDepth)
+        return input;
+    // Exceeds maximum depth → warn
+    if (warn) {
+        console.error(`[truncateArrayDepth] Input DropdownOption array exceeds ${maxDepth} levels. Extra levels were truncated.`);
+    }
+    // Truncate to specified depth
+    return truncate(input);
+}
+function DropdownItem(props) {
+    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, } = props;
+    const optionsContent = truncateArrayDepth(options, 3);
+    const listRef = useRef(null);
+    const [expandedNodes, setExpandedNodes] = useState(new Set());
+    const hasActions = Boolean(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.showActions);
+    const hasHeader = Boolean(headerContent);
+    // Use custom hook to measure element heights
+    const [actionRef, actionHeight] = useElementHeight(hasActions && !!maxHeight);
+    const [headerRef, headerHeight] = useElementHeight(hasHeader && !!maxHeight);
+    const toggleExpand = useCallback((optionId) => {
+        setExpandedNodes((prev) => {
+            const next = new Set(prev);
+            if (next.has(optionId)) {
+                next.delete(optionId);
+            }
+            else {
+                next.add(optionId);
+            }
+            return next;
+        });
+    }, []);
+    const visibleShortcutOptions = useMemo(() => {
+        const result = [];
+        const collectDefault = (optionList) => {
+            optionList === null || optionList === void 0 ? void 0 : optionList.forEach((option) => {
+                result.push(option);
+            });
+        };
+        const collectGrouped = (optionList) => {
+            optionList === null || optionList === void 0 ? void 0 : optionList.forEach((groupOption) => {
+                var _a;
+                (_a = groupOption.children) === null || _a === void 0 ? void 0 : _a.forEach((option) => {
+                    result.push(option);
+                });
+            });
+        };
+        const collectTree = (optionList) => {
+            optionList === null || optionList === void 0 ? void 0 : optionList.forEach((option) => {
+                result.push(option);
+                if (option.children && expandedNodes.has(option.id)) {
+                    collectTree(option.children);
+                }
+            });
+        };
+        if (type === 'grouped') {
+            collectGrouped(optionsContent);
+        }
+        else if (type === 'tree') {
+            collectTree(optionsContent);
+        }
+        else {
+            collectDefault(optionsContent);
+        }
+        return result;
+    }, [expandedNodes, optionsContent, type]);
+    const matchShortcut = useCallback((event, shortcut) => {
+        var _a, _b;
+        const eventCode = (_a = event.which) !== null && _a !== void 0 ? _a : event.keyCode;
+        if (typeof shortcut === 'number') {
+            return eventCode === shortcut;
+        }
+        const tokens = shortcut
+            .split('+')
+            .map((token) => token.trim().toLowerCase())
+            .filter(Boolean);
+        let requireMeta = false;
+        let requireCtrl = false;
+        let requireAlt = false;
+        let requireShift = false;
+        let mainToken = null;
+        tokens.forEach((token) => {
+            switch (token) {
+                case 'cmd':
+                case 'meta':
+                case 'command':
+                    requireMeta = true;
+                    break;
+                case 'ctrl':
+                case 'control':
+                    requireCtrl = true;
+                    break;
+                case 'alt':
+                case 'option':
+                    requireAlt = true;
+                    break;
+                case 'shift':
+                    requireShift = true;
+                    break;
+                default:
+                    mainToken = token;
+                    break;
+            }
+        });
+        if (!mainToken)
+            return false;
+        if (requireMeta !== event.metaKey
+            || requireCtrl !== event.ctrlKey
+            || requireAlt !== event.altKey
+            || requireShift !== event.shiftKey) {
+            return false;
+        }
+        const mainCode = keycode(mainToken);
+        if (typeof mainCode === 'number' && eventCode === mainCode) {
+            return true;
+        }
+        const eventKey = (_b = event.key) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+        if (eventKey && eventKey === mainToken) {
+            return true;
+        }
+        const eventKeyName = keycode(eventCode);
+        return typeof eventKeyName === 'string' && eventKeyName.toLowerCase() === mainToken;
+    }, []);
+    const renderGroupedOptions = (optionList, startIndex) => {
+        let currentIndex = startIndex;
+        const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((groupOption) => {
+            var _a;
+            const hasChildren = Boolean(groupOption.children && groupOption.children.length > 0);
+            const groupElements = [];
+            if (hasChildren) {
+                groupElements.push(jsx(Typography, { variant: "body", className: dropdownClasses.groupLabel, children: groupOption.name }, groupOption.id));
+                (_a = groupOption.children) === null || _a === void 0 ? void 0 : _a.forEach((option) => {
+                    var _a, _b;
+                    currentIndex += 1;
+                    const optionIndex = currentIndex;
+                    const isActive = optionIndex === activeIndex;
+                    const isSelected = Array.isArray(value)
+                        ? value.includes(option.id)
+                        : value === option.id;
+                    groupElements.push(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);
+                        }, checkSite: "none", validate: (_a = option.validate) !== null && _a !== void 0 ? _a : 'default', onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, appendContent: option.shortcutText }, option.id));
+                });
+            }
+            return groupElements;
+        });
+        return { elements, nextIndex: currentIndex };
+    };
+    const renderTreeOptions = (optionList, depth, startIndex) => {
+        let currentIndex = startIndex;
+        const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
+            var _a, _b;
+            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;
+            if (hasChildren && level !== 2) {
+                prependIcon = isExpanded ? CaretDownIcon : CaretRightIcon;
+            }
+            const checkSite = option.showCheckbox ? 'prepend' : 'none';
+            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: () => {
+                    if (disabled)
+                        return;
+                    if (hasChildren && type === 'tree') {
+                        toggleExpand(option.id);
+                    }
+                    else {
+                        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: (_a = option.showUnderline) !== null && _a !== void 0 ? _a : false, validate: (_b = option.validate) !== null && _b !== void 0 ? _b : 'default', appendContent: option.shortcutText }, option.id));
+            if (hasChildren && isExpanded && type === 'tree') {
+                const childResult = renderTreeOptions(option.children, depth + 1, currentIndex);
+                currentIndex = childResult.nextIndex;
+                return [card, ...childResult.elements];
+            }
+            return [card];
+        });
+        return { elements, nextIndex: currentIndex };
+    };
+    const renderDefaultOptions = (optionList, startIndex) => {
+        let currentIndex = startIndex;
+        const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
+            var _a, _b;
+            currentIndex += 1;
+            const optionIndex = currentIndex;
+            const isSelected = Array.isArray(value)
+                ? value.includes(option.id)
+                : value === option.id;
+            const isActive = optionIndex === activeIndex;
+            let checkSite = 'none';
+            if (option === null || option === void 0 ? void 0 : option.checkSite) {
+                checkSite = option.checkSite;
+            }
+            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: (_a = option.validate) !== null && _a !== void 0 ? _a : 'default', showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, checkSite: checkSite, appendContent: option.shortcutText }, option.id));
+        });
+        return { elements, nextIndex: currentIndex };
+    };
+    const renderOptions = (optionList, depth, startIndex) => {
+        if (type === 'grouped') {
+            return renderGroupedOptions(optionList, startIndex);
+        }
+        if (type === 'tree') {
+            return renderTreeOptions(optionList, depth, startIndex);
+        }
+        return renderDefaultOptions(optionList, startIndex);
+    };
+    const { elements: renderedOptions } = renderOptions(optionsContent, 0, -1);
+    const listStyle = useMemo(() => {
+        if (!maxHeight) {
+            return undefined;
+        }
+        return {
+            maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+        };
+    }, [maxHeight]);
+    const listWrapperStyle = useMemo(() => {
+        if (!maxHeight) {
+            return undefined;
+        }
+        const maxHeightValue = typeof maxHeight === 'number' ? maxHeight : parseFloat(maxHeight);
+        const availableHeight = Math.max(0, maxHeightValue - actionHeight - headerHeight);
+        return {
+            maxHeight: `${availableHeight}px`,
+        };
+    }, [maxHeight, actionHeight, headerHeight]);
+    useEffect(() => {
+        const listElement = listRef.current;
+        if (!listElement || disabled) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (event.repeat)
+                return;
+            const targetOption = visibleShortcutOptions.find((option) => {
+                if (!Array.isArray(option.shortcutKeys) || option.shortcutKeys.length === 0) {
+                    return false;
+                }
+                return option.shortcutKeys.some((shortcut) => matchShortcut(event, shortcut));
+            });
+            if (!targetOption)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (type === 'tree' && targetOption.children && targetOption.children.length > 0) {
+                toggleExpand(targetOption.id);
+                return;
+            }
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(targetOption);
+        };
+        listElement.addEventListener('keydown', handleKeyDown);
+        return () => {
+            listElement.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [disabled, matchShortcut, onSelect, type, toggleExpand, visibleShortcutOptions]);
+    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: renderedOptions }))
+                : renderedOptions, hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
+}
+
+export { DropdownItem as default };

package/Dropdown/DropdownItemCard.d.ts

@@ -0,0 +1,96 @@
+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).
+     * This controls the aria-selected attribute according to W3C ARIA spec.
+     * When an option is referenced by aria-activedescendant, it should have aria-selected="true".
+     */
+    active?: boolean;
+    /**
+     * The icon to append.
+     */
+    appendIcon?: IconDefinition;
+    /**
+     * The content to append.
+     */
+    appendContent?: string;
+    /**
+     * The position of the checkbox.
+     */
+    checkSite?: DropdownCheckPosition;
+    /**
+     * Controlled: Whether the option is selected/checked.
+     * Controls checkbox state in multiple mode.
+     * When provided, the state is controlled externally.
+     */
+    checked?: boolean;
+    /**
+     * Additional className for the list item.
+     */
+    className?: string;
+    /**
+     * Uncontrolled: Default checked/selected state.
+     * Only used when `checked` is not provided.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Whether the dropdown item card is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The text to follow.
+     */
+    followText?: string;
+    /**
+     * DOM id for the option, useful for aria-activedescendant.
+     */
+    id?: string;
+    /**
+     * The label of the dropdown item card.
+     */
+    label?: string;
+    /**
+     * The level of the dropdown item card.
+     */
+    level?: DropdownItemLevel;
+    /**
+     * The mode of the dropdown item card.
+     */
+    mode: DropdownMode;
+    /**
+     * The accessible name / label for the option.
+     * Falls back to label if not provided.
+     */
+    name?: string;
+    /**
+     * Callback fired when the checked/selected state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Click handler when the list item is activated.
+     */
+    onClick?: () => void;
+    /**
+     * Mouse enter handler.
+     */
+    onMouseEnter?: () => void;
+    /**
+     * The icon to prepend.
+     */
+    prependIcon?: IconDefinition;
+    /**
+     * Whether to show the underline.
+     * @default false
+     */
+    showUnderline?: boolean;
+    /**
+     * The subtitle of the dropdown item card.
+     */
+    subTitle?: string;
+    /**
+     * The validation of the dropdown item card.
+     */
+    validate?: DropdownItemValidate;
+}
+export default function DropdownItemCard(props: DropdownItemCardProps): import("react/jsx-runtime").JSX.Element;

package/Dropdown/DropdownItemCard.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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';
+
+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 cardLabel = label || '';
+    const cardName = _name || cardLabel;
+    const level = levelProp || 0;
+    // Generate ID for the label element to use with aria-labelledby
+    // If no id is provided, we'll rely on the visible text content for accessibility
+    const labelId = useMemo(() => {
+        if (!id)
+            return undefined;
+        return `${id}-label`;
+    }, [id]);
+    // If name is different from label, we need to use aria-label as fallback
+    // Note: aria-label on role="option" has limited support, but it's better than nothing
+    const ariaLabel = useMemo(() => {
+        if (cardName !== cardLabel) {
+            return cardName;
+        }
+        return undefined;
+    }, [cardName, cardLabel]);
+    // Controlled/uncontrolled mode for checked/selected state
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
+    const isChecked = isControlled ? checked : internalChecked;
+    const labelColor = useMemo(() => {
+        return validate === 'danger' ? 'text-error' : 'text-neutral-solid';
+    }, [validate]);
+    const appendIconColor = useMemo(() => {
+        return disabled || validate === 'danger' ? 'neutral-light' : 'neutral';
+    }, [disabled, validate]);
+    const iconColor = useMemo(() => {
+        if (disabled)
+            return 'neutral-light';
+        return validate === 'danger' ? 'error' : 'neutral';
+    }, [disabled, validate]);
+    const labelParts = useMemo(() => {
+        return followText
+            ? highlightText(cardLabel, followText)
+            : [
+                {
+                    text: cardLabel,
+                    highlight: false
+                }
+            ];
+    }, [cardLabel, followText]);
+    const showPrependContent = useMemo(() => {
+        return prependIcon || (checkSite === 'prepend' && mode === 'multiple');
+    }, [prependIcon, checkSite, mode]);
+    const showAppendContent = useMemo(() => {
+        return appendContent || appendIcon || (checkSite === 'append' && isChecked);
+    }, [appendContent, appendIcon, checkSite, isChecked]);
+    const subTitleParts = useMemo(() => {
+        return followText && subTitle
+            ? highlightText(subTitle, followText)
+            : subTitle
+                ? [
+                    {
+                        text: subTitle,
+                        highlight: false
+                    }
+                ]
+                : [];
+    }, [subTitle, followText]);
+    const renderHighlightedText = (parts, defaultColor, className, id) => {
+        return (jsx(Typography, { color: defaultColor, 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)
+            return;
+        const newChecked = !isChecked;
+        if (!isControlled) {
+            setInternalChecked(newChecked);
+        }
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(newChecked);
+    };
+    const handleClick = () => {
+        if (disabled)
+            return;
+        if (mode === 'multiple') {
+            toggleChecked();
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    const handleCheckboxChange = (event) => {
+        event.stopPropagation();
+        toggleChecked();
+    };
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }
+    };
+    return (jsxs(Fragment, { children: [jsx("li", { ...(labelId ? { 'aria-labelledby': labelId } : {}), ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), "aria-selected": active, className: cx(dropdownClasses.card, dropdownClasses.cardLevel(level), {
+                    // Highlight: keyboard/mouse focused (active) or selected (isChecked)
+                    [dropdownClasses.cardActive]: active || isChecked,
+                    [dropdownClasses.cardDisabled]: disabled,
+                }, 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 === 'prepend' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, onChange: handleCheckboxChange }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel && renderHighlightedText(labelParts, labelColor, dropdownClasses.cardTitle, labelId), subTitleParts.length > 0 && renderHighlightedText(subTitleParts, 'text-neutral', 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 === 'append' && isChecked && jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 })] }))] }) }), showUnderline && jsx("div", { className: dropdownClasses.cardUnderline })] }));
+}
+
+export { DropdownItemCard as default };

package/Dropdown/DropdownStatus.d.ts

@@ -0,0 +1,22 @@
+import { DropdownStatus as DropdownStatusType } from "@mezzanine-ui/core/dropdown/dropdown";
+import { IconDefinition } from "@mezzanine-ui/icons";
+export interface DropdownStatusProps {
+    /**
+     * The status of the dropdown.
+     * @default 'loading'
+     */
+    status: DropdownStatusType;
+    /**
+     * The text of the dropdown loading status.
+     */
+    loadingText?: string;
+    /**
+     * The text of the dropdown empty status.
+     */
+    emptyText?: string;
+    /**
+     * The icon of the dropdown empty status.
+     */
+    emptyIcon?: IconDefinition;
+}
+export default function DropdownStatus(props: DropdownStatusProps): import("react/jsx-runtime").JSX.Element;

package/Dropdown/dropdownKeydownHandler.d.ts

@@ -0,0 +1,15 @@
+import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
+/**
+ * Provides a keyboard navigation handler for dropdown lists, encapsulating Arrow keys, Enter, and Escape behaviors.
+ * Keeps logic centralized in DropdownItem for easy reuse.
+ */
+export declare function createDropdownKeydownHandler(params: {
+    activeIndex: number | null;
+    onEnterSelect?: (option: DropdownOption) => void;
+    onEscape?: () => void;
+    open: boolean;
+    options: DropdownOption[];
+    setActiveIndex: (updater: (prev: number | null) => number | null) => void;
+    setListboxHasVisualFocus: (focus: boolean) => void;
+    setOpen: (open: boolean) => void;
+}): (e: React.KeyboardEvent<HTMLInputElement>) => void;

package/Dropdown/highlightText.d.ts

@@ -0,0 +1,9 @@
+export type HighlightSegment = {
+    text: string;
+    highlight: boolean;
+};
+/**
+ * Splits the text into segments based on the keyword and marks which segments should be highlighted.
+ * - If the keyword is empty or not found, returns a single non-highlighted segment.
+ */
+export declare function highlightText(text: string, keyword?: string): HighlightSegment[];

package/Dropdown/highlightText.js

@@ -0,0 +1,32 @@
+/**
+ * Splits the text into segments based on the keyword and marks which segments should be highlighted.
+ * - If the keyword is empty or not found, returns a single non-highlighted segment.
+ */
+function highlightText(text, keyword) {
+    var _a;
+    if (!text)
+        return [];
+    if (!keyword)
+        return [{ text, highlight: false }];
+    const safeKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${safeKeyword})`, 'gi');
+    const parts = [];
+    let lastIndex = 0;
+    for (const match of text.matchAll(regex)) {
+        const matchIndex = (_a = match.index) !== null && _a !== void 0 ? _a : 0;
+        if (matchIndex > lastIndex) {
+            parts.push({
+                text: text.slice(lastIndex, matchIndex),
+                highlight: false,
+            });
+        }
+        parts.push({ text: match[0], highlight: true });
+        lastIndex = matchIndex + match[0].length;
+    }
+    if (lastIndex < text.length) {
+        parts.push({ text: text.slice(lastIndex), highlight: false });
+    }
+    return parts.length ? parts : [{ text, highlight: false }];
+}
+
+export { highlightText };

package/Dropdown/index.d.ts

@@ -1,2 +1,2 @@
-export type { DropdownProps } from './Dropdown';
 export { default } from './Dropdown';
+export type { DropdownProps } from './Dropdown';

package/Form/FormControlContext.d.ts

@@ -1,8 +1,8 @@
-import { Severity } from '@mezzanine-ui/system/severity';
+import { SeverityWithInfo } from '@mezzanine-ui/system/severity';
 export interface FormControl {
     disabled: boolean;
     fullWidth: boolean;
     required: boolean;
-    severity?: Severity;
+    severity?: SeverityWithInfo;
 }
 export declare const FormControlContext: import("react").Context<FormControl | undefined>;