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

package/Dropdown/DropdownItem.js

@@ -8,6 +8,8 @@ import { useElementHeight } from '../hooks/useElementHeight.js';
 import Typography from '../Typography/Typography.js';
 import DropdownAction from './DropdownAction.js';
 import DropdownItemCard from './DropdownItemCard.js';
+import DropdownStatus from './DropdownStatus.js';
+import { shortcutTextHandler } from './shortcutTextHandler.js';
 
 /**
  * Limits DropdownOption array to a maximum depth, truncating extra children levels and showing error message if exceeded.
@@ -55,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, } = 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);
@@ -176,18 +179,21 @@ function DropdownItem(props) {
             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;
+                    var _a, _b, _c;
                     currentIndex += 1;
                     const optionIndex = currentIndex;
                     const isActive = optionIndex === activeIndex;
                     const isSelected = Array.isArray(value)
                         ? value.includes(option.id)
                         : value === option.id;
+                    const shortcutText = option.shortcutText
+                        ? option.shortcutText
+                        : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
                     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));
+                        }, checkSite: "none", validate: (_b = option.validate) !== null && _b !== void 0 ? _b : 'default', onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), showUnderline: (_c = option.showUnderline) !== null && _c !== void 0 ? _c : false, appendContent: shortcutText }, option.id));
                 });
             }
             return groupElements;
@@ -197,7 +203,7 @@ function DropdownItem(props) {
     const renderTreeOptions = (optionList, depth, startIndex) => {
         let currentIndex = startIndex;
         const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
-            var _a, _b;
+            var _a, _b, _c;
             currentIndex += 1;
             const optionIndex = currentIndex;
             const level = Math.min(depth, 2);
@@ -211,7 +217,10 @@ function DropdownItem(props) {
             if (hasChildren && level !== 2) {
                 prependIcon = isExpanded ? CaretDownIcon : CaretRightIcon;
             }
-            const checkSite = option.showCheckbox ? 'prepend' : 'none';
+            const checkSite = option.showCheckbox ? 'prefix' : 'none';
+            const shortcutText = option.shortcutText
+                ? option.shortcutText
+                : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
             const card = (jsx(DropdownItemCard, { active: isActive, checked: isSelected, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, level: level, mode: mode, name: option.name, onClick: () => {
                     if (disabled)
                         return;
@@ -221,7 +230,7 @@ function DropdownItem(props) {
                     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));
+                }, followText: followText, checkSite: checkSite, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: prependIcon, showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, validate: (_c = option.validate) !== null && _c !== void 0 ? _c : 'default', appendContent: shortcutText }, option.id));
             if (hasChildren && isExpanded && type === 'tree') {
                 const childResult = renderTreeOptions(option.children, depth + 1, currentIndex);
                 currentIndex = childResult.nextIndex;
@@ -234,22 +243,22 @@ function DropdownItem(props) {
     const renderDefaultOptions = (optionList, startIndex) => {
         let currentIndex = startIndex;
         const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             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;
-            }
+            const shortcutText = option.shortcutText
+                ? option.shortcutText
+                : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
+            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: (_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));
+                }, 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 };
     };
@@ -263,6 +272,8 @@ function DropdownItem(props) {
         return renderDefaultOptions(optionList, startIndex);
     };
     const { elements: renderedOptions } = renderOptions(optionsContent, 0, -1);
+    // Show status when options are empty and status is provided
+    const shouldShowStatus = optionsContent.length === 0 && status;
     const listStyle = useMemo(() => {
         if (!maxHeight) {
             return undefined;
@@ -310,9 +321,40 @@ 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: renderedOptions }))
-                : renderedOptions, hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
+                ? (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 }) }))] }));
 }
 
 export { DropdownItem as default };

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).

package/Dropdown/DropdownItemCard.js

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

package/Dropdown/DropdownStatus.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
+import { SpinnerIcon, FolderOpenIcon } from '@mezzanine-ui/icons';
+import Typography from '../Typography/Typography.js';
+import Icon from '../Icon/Icon.js';
+
+function DropdownStatus(props) {
+    const { status, loadingText, emptyText, emptyIcon } = props;
+    const defaultStatusText = useMemo(() => {
+        if (status === 'loading') {
+            return loadingText !== null && loadingText !== void 0 ? loadingText : 'Loading...';
+        }
+        if (status === 'empty') {
+            return emptyText !== null && emptyText !== void 0 ? emptyText : 'No matching options.';
+        }
+        return '';
+    }, [status, loadingText, emptyText]);
+    const IconElement = useMemo(() => {
+        if (status === 'loading') {
+            return jsx(Icon, { icon: SpinnerIcon, size: 16, spin: true, color: "brand" });
+        }
+        return jsx(Icon, { icon: emptyIcon !== null && emptyIcon !== void 0 ? emptyIcon : FolderOpenIcon, size: 16 });
+    }, [status, emptyIcon]);
+    return (jsxs("div", { className: dropdownClasses.status, children: [IconElement, jsx(Typography, { className: dropdownClasses.statusText, children: defaultStatusText })] }));
+}
+
+export { DropdownStatus as default };

package/Dropdown/dropdownKeydownHandler.d.ts

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

package/Dropdown/dropdownKeydownHandler.js

@@ -0,0 +1,73 @@
+/**
+ * Provides a keyboard navigation handler for dropdown lists, encapsulating Arrow keys, Enter, and Escape behaviors.
+ * Keeps logic centralized in DropdownItem for easy reuse.
+ */
+function createDropdownKeydownHandler(params) {
+    const { activeIndex, onEnterSelect, onEscape, open, options, setActiveIndex, setListboxHasVisualFocus, setOpen, } = params;
+    return (e) => {
+        if (options.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!open) {
+                    setOpen(true);
+                    setListboxHasVisualFocus(true);
+                    setActiveIndex(() => 0);
+                    return;
+                }
+                setListboxHasVisualFocus(true);
+                setActiveIndex((prev) => {
+                    if (prev === null)
+                        return 0;
+                    return prev >= options.length - 1 ? 0 : prev + 1;
+                });
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!open) {
+                    setOpen(true);
+                    setListboxHasVisualFocus(true);
+                    setActiveIndex(() => options.length - 1);
+                    return;
+                }
+                setListboxHasVisualFocus(true);
+                setActiveIndex((prev) => {
+                    if (prev === null)
+                        return options.length - 1;
+                    return prev <= 0 ? options.length - 1 : prev - 1;
+                });
+                break;
+            }
+            case 'Enter': {
+                if (!open)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
+                if (activeIndex !== null && options[activeIndex]) {
+                    onEnterSelect === null || onEnterSelect === void 0 ? void 0 : onEnterSelect(options[activeIndex]);
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                e.stopPropagation();
+                onEscape === null || onEscape === void 0 ? void 0 : onEscape();
+                break;
+            }
+            case 'Home':
+            case 'End':
+            case 'ArrowLeft':
+            case 'ArrowRight': {
+                setListboxHasVisualFocus(false);
+                setActiveIndex(() => null);
+                break;
+            }
+        }
+    };
+}
+
+export { createDropdownKeydownHandler };

package/Dropdown/highlightText.js

@@ -8,7 +8,11 @@ function highlightText(text, keyword) {
         return [];
     if (!keyword)
         return [{ text, highlight: false }];
-    const safeKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // Ensure keyword is a string
+    const keywordString = String(keyword);
+    if (!keywordString)
+        return [{ text, highlight: false }];
+    const safeKeyword = keywordString.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     const regex = new RegExp(`(${safeKeyword})`, 'gi');
     const parts = [];
     let lastIndex = 0;

package/Dropdown/shortcutTextHandler.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Converts a shortcut key string into a formatted display string.
+ * @param shortcut - Shortcut key string (e.g., 'cmd+n', 'ctrl+n', 'k')
+ * @param isMac - Whether to format as Mac shortcut
+ * @returns Formatted display string
+ */
+export declare const formatShortcut: (shortcut: string | number, isMac: boolean) => string;
+/**
+ * Converts an array of shortcut keys into a display string.
+ * Format: {mac_shortcut} / {windows_shortcut} / {other_keys}
+ *
+ * @param shortcutKeys - Array of shortcut keys
+ * @returns Formatted display string
+ *
+ * @example
+ * shortcutTextHandler(['ctrl+n', 'cmd+n']) // '⌘N / Ctrl+N'
+ * shortcutTextHandler(['delete', 'backspace']) // 'Delete / Backspace'
+ * shortcutTextHandler(['k']) // 'K'
+ * shortcutTextHandler(['ctrl+r', 'cmd+r', 'f5']) // '⌘R / Ctrl+R / F5'
+ * shortcutTextHandler(['cmd+shift+n', 'ctrl+shift+n']) // '⌘⇧N / Ctrl+Shift+N'
+ * shortcutTextHandler(['cmd+option+n', 'ctrl+alt+n']) // '⌘⌥N / Ctrl+Alt+N'
+ */
+export declare const shortcutTextHandler: (shortcutKeys: Array<string | number>) => string;
+export default shortcutTextHandler;

package/Dropdown/shortcutTextHandler.js

@@ -0,0 +1,171 @@
+/**
+ * Parses a shortcut key string into modifiers and main key.
+ * @param shortcut - Shortcut key string (e.g., 'cmd+shift+n', 'ctrl+alt+delete')
+ * @returns Object with modifiers and main key
+ */
+const parseShortcut = (shortcut) => {
+    const str = String(shortcut).toLowerCase();
+    const tokens = str
+        .split('+')
+        .map((token) => token.trim())
+        .filter(Boolean);
+    const modifiers = [];
+    let mainKey = null;
+    tokens.forEach((token) => {
+        switch (token) {
+            case 'cmd':
+            case 'meta':
+            case 'command':
+                modifiers.push('cmd');
+                break;
+            case 'ctrl':
+            case 'control':
+                modifiers.push('ctrl');
+                break;
+            case 'alt':
+            case 'option':
+                modifiers.push(token === 'option' ? 'option' : 'alt');
+                break;
+            case 'shift':
+                modifiers.push('shift');
+                break;
+            default:
+                if (!mainKey) {
+                    mainKey = token;
+                }
+                break;
+        }
+    });
+    return { modifiers, mainKey: mainKey || str };
+};
+/**
+ * Formats a shortcut for Mac display.
+ * @param modifiers - Array of modifier keys
+ * @param mainKey - Main key
+ * @returns Formatted Mac shortcut string
+ */
+const formatMacShortcut = (modifiers, mainKey) => {
+    const symbols = [];
+    modifiers.forEach((mod) => {
+        switch (mod) {
+            case 'cmd':
+                symbols.push('⌘');
+                break;
+            case 'option':
+                symbols.push('⌥');
+                break;
+            case 'shift':
+                symbols.push('⇧');
+                break;
+            case 'ctrl':
+                symbols.push('⌃');
+                break;
+        }
+    });
+    const formattedKey = mainKey.toUpperCase();
+    if (symbols.length > 0) {
+        return `${symbols.join('')}${formattedKey}`;
+    }
+    return formattedKey;
+};
+/**
+ * Formats a shortcut for Windows display.
+ * @param modifiers - Array of modifier keys
+ * @param mainKey - Main key
+ * @returns Formatted Windows shortcut string
+ */
+const formatWindowsShortcut = (modifiers, mainKey) => {
+    const parts = [];
+    modifiers.forEach((mod) => {
+        switch (mod) {
+            case 'ctrl':
+                parts.push('Ctrl');
+                break;
+            case 'alt':
+                parts.push('Alt');
+                break;
+            case 'shift':
+                parts.push('Shift');
+                break;
+            case 'cmd':
+                // Windows doesn't have cmd, but if present, treat as Ctrl
+                parts.push('Ctrl');
+                break;
+            case 'option':
+                // Option on Mac is Alt on Windows
+                parts.push('Alt');
+                break;
+        }
+    });
+    const formattedKey = mainKey.charAt(0).toUpperCase() + mainKey.slice(1).toLowerCase();
+    if (parts.length > 0) {
+        return `${parts.join('+')}+${formattedKey}`;
+    }
+    return formattedKey;
+};
+/**
+ * Converts a shortcut key string into a formatted display string.
+ * @param shortcut - Shortcut key string (e.g., 'cmd+n', 'ctrl+n', 'k')
+ * @param isMac - Whether to format as Mac shortcut
+ * @returns Formatted display string
+ */
+const formatShortcut = (shortcut, isMac) => {
+    const { modifiers, mainKey } = parseShortcut(shortcut);
+    if (isMac) {
+        return formatMacShortcut(modifiers, mainKey);
+    }
+    return formatWindowsShortcut(modifiers, mainKey);
+};
+/**
+ * Converts an array of shortcut keys into a display string.
+ * Format: {mac_shortcut} / {windows_shortcut} / {other_keys}
+ *
+ * @param shortcutKeys - Array of shortcut keys
+ * @returns Formatted display string
+ *
+ * @example
+ * shortcutTextHandler(['ctrl+n', 'cmd+n']) // '⌘N / Ctrl+N'
+ * shortcutTextHandler(['delete', 'backspace']) // 'Delete / Backspace'
+ * shortcutTextHandler(['k']) // 'K'
+ * shortcutTextHandler(['ctrl+r', 'cmd+r', 'f5']) // '⌘R / Ctrl+R / F5'
+ * shortcutTextHandler(['cmd+shift+n', 'ctrl+shift+n']) // '⌘⇧N / Ctrl+Shift+N'
+ * shortcutTextHandler(['cmd+option+n', 'ctrl+alt+n']) // '⌘⌥N / Ctrl+Alt+N'
+ */
+const shortcutTextHandler = (shortcutKeys) => {
+    if (!shortcutKeys || shortcutKeys.length === 0) {
+        return '';
+    }
+    const mac = [];
+    const windows = [];
+    const others = [];
+    shortcutKeys.forEach((shortcut) => {
+        const { modifiers } = parseShortcut(shortcut);
+        const hasMacModifier = modifiers.includes('cmd') || modifiers.includes('option');
+        const hasWindowsModifier = modifiers.includes('ctrl') || modifiers.includes('alt');
+        if (hasMacModifier) {
+            mac.push(formatShortcut(shortcut, true));
+        }
+        else if (hasWindowsModifier) {
+            windows.push(formatShortcut(shortcut, false));
+        }
+        else {
+            // Single key or key with only shift
+            if (modifiers.includes('shift')) {
+                // Shift can be used on both platforms
+                mac.push(formatShortcut(shortcut, true));
+                windows.push(formatShortcut(shortcut, false));
+            }
+            else {
+                others.push(formatShortcut(shortcut, false));
+            }
+        }
+    });
+    // Remove duplicates and combine
+    const uniqueMac = Array.from(new Set(mac));
+    const uniqueWindows = Array.from(new Set(windows));
+    const uniqueOthers = Array.from(new Set(others));
+    const parts = [...uniqueMac, ...uniqueWindows, ...uniqueOthers];
+    return parts.join(' / ');
+};
+
+export { shortcutTextHandler as default, formatShortcut, shortcutTextHandler };

package/Empty/Empty.js

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

package/Empty/icons/EmptyMainNotificationIcon.d.ts

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

package/Empty/icons/EmptyMainNotificationIcon.js

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

package/Empty/typings.d.ts

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