@mezzanine-ui/react 1.0.0-alpha.0 → 1.0.0-beta.1

package/Dropdown/DropdownAction.d.ts

@@ -0,0 +1,50 @@
+import { ButtonProps } from "../Button";
+export interface DropdownActionProps {
+    /**
+     * The text of the custom action button.
+     */
+    actionText?: string;
+    /**
+     * The text of the cancel button.
+     */
+    cancelText?: string;
+    /**
+     * The text of the clear button.
+     */
+    clearText?: string;
+    /**
+     * The text of the confirm button.
+     */
+    confirmText?: string;
+    /**
+     * The custom action button props of the dropdown.
+     */
+    customActionButtonProps?: ButtonProps;
+    /**
+     * Click handler for cancel button.
+     */
+    onCancel?: () => void;
+    /**
+     * Click handler for clear button.
+     */
+    onClear?: () => void;
+    /**
+     * Click handler for confirm button.
+     */
+    onConfirm?: () => void;
+    /**
+     * Click handler for custom action button.
+     */
+    onClick?: () => void;
+    /**
+     * Whether to show the actions.
+     * @default false
+     */
+    showActions?: boolean;
+    /**
+     * If true, display a bar at the top of the dropdown action area.
+     * @default false
+     */
+    showTopBar?: boolean;
+}
+export default function DropdownAction(props: DropdownActionProps): import("react/jsx-runtime").JSX.Element;

package/Dropdown/DropdownAction.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
+import { CloseIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+
+const actionButtonSize = 'minor';
+function DropdownAction(props) {
+    const { showActions = false, showTopBar, customActionButtonProps, cancelText, confirmText, actionText, clearText, onCancel, onConfirm, onClick, onClear, } = props;
+    const cancelLabel = cancelText || 'Cancel';
+    const confirmLabel = confirmText || 'Confirm';
+    const actionLabel = actionText || 'Custom Action';
+    const clearLabel = clearText || 'Clear Options';
+    const hasAnyEvent = Boolean(onCancel || onConfirm || onClick || onClear);
+    const isClearMode = Boolean(onClear && !onClick);
+    const isCustomMode = Boolean(onClick && !onClear);
+    const isDefaultMode = !isClearMode && !isCustomMode;
+    const hasCancel = Boolean(onCancel && isDefaultMode);
+    const hasConfirm = Boolean(onConfirm && isDefaultMode);
+    return (jsx(Fragment, { children: showActions && hasAnyEvent && (jsxs("div", { className: dropdownClasses.action, children: [showTopBar && jsx("i", { className: dropdownClasses.actionTopBar }), jsxs("div", { className: dropdownClasses.actionTools, children: [hasCancel && (jsx(Button, { variant: "base-ghost", size: actionButtonSize, onClick: onCancel, children: cancelLabel })), hasConfirm && (jsx(Button, { size: actionButtonSize, style: hasCancel ? undefined : { marginLeft: 'auto' }, onClick: onConfirm, children: confirmLabel })), isCustomMode && (jsx(Button, { size: actionButtonSize, variant: "base-ghost", ...customActionButtonProps, onClick: onClick, children: actionLabel })), isClearMode && (jsx(Button, { size: actionButtonSize, variant: "base-ghost", icon: {
+                                position: 'leading',
+                                src: CloseIcon,
+                            }, onClick: onClear, children: clearLabel }))] })] })) }));
+}
+
+export { DropdownAction as default };

package/Dropdown/DropdownItem.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { DropdownItemSharedProps, DropdownOptionsByType, dropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { type DropdownActionProps } from './DropdownAction';
+export interface DropdownItemProps<T extends dropdownType | undefined = dropdownType> extends Omit<DropdownItemSharedProps, 'type'> {
+    /**
+     * The action configuration for the dropdown.
+     */
+    actionConfig?: DropdownActionProps;
+    /**
+     * The active option index for hover/focus state.
+     */
+    activeIndex: number | null;
+    /**
+     * The text to follow.
+     */
+    followText?: string;
+    /**
+     * Custom content rendered before options (e.g. inline trigger).
+     */
+    headerContent?: ReactNode;
+    /**
+     * The listbox id for aria usage.
+     */
+    listboxId: string;
+    /**
+     * The aria-label for the listbox.
+     * If not provided, a default label will be used when there are no options.
+     */
+    listboxLabel?: string;
+    /**
+     * The max height of the dropdown list.
+     */
+    maxHeight?: number | string;
+    /**
+     * Whether to set the same width as its anchor element.
+     * @default false
+     */
+    sameWidth?: boolean;
+    /**
+     * Callback when hovering option index changes.
+    */
+    onHover?: (index: number) => void;
+    /**
+     * Options to render.
+     * The structure is constrained based on the `type` prop:
+     * - 'default': flat array (no children allowed)
+     * - 'grouped': array with one level of children (children cannot have children)
+     * - 'tree': array with nested children up to 3 levels (strictly enforced at compile time)
+     */
+    options: DropdownOptionsByType<T>;
+    /**
+     * The type of the dropdown.
+     * This prop determines the structure of the `options` array:
+     * - 'default': flat array (no children allowed)
+     * - 'grouped': array with one level of children (children cannot have children)
+     * - 'tree': array with nested children up to 3 levels
+     */
+    type?: dropdownType;
+}
+export default function DropdownItem<T extends dropdownType | undefined = dropdownType>(props: DropdownItemProps<T>): import("react/jsx-runtime").JSX.Element;

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 };