@apollohg/react-native-prose-editor 0.3.0 → 0.4.1

package/dist/EditorToolbar.d.ts

@@ -1,8 +1,10 @@
 import type { ActiveState, HistoryState } from './NativeEditorBridge';
 import type { EditorToolbarTheme } from './EditorTheme';
 export type EditorToolbarListType = 'bulletList' | 'orderedList';
+export type EditorToolbarHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export type EditorToolbarCommand = 'indentList' | 'outdentList' | 'undo' | 'redo';
-export type EditorToolbarDefaultIconId = 'bold' | 'italic' | 'underline' | 'strike' | 'link' | 'image' | 'blockquote' | 'bulletList' | 'orderedList' | 'indentList' | 'outdentList' | 'lineBreak' | 'horizontalRule' | 'undo' | 'redo';
+export type EditorToolbarGroupPresentation = 'expand' | 'menu';
+export type EditorToolbarDefaultIconId = 'bold' | 'italic' | 'underline' | 'strike' | 'link' | 'image' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'blockquote' | 'bulletList' | 'orderedList' | 'indentList' | 'outdentList' | 'lineBreak' | 'horizontalRule' | 'undo' | 'redo';
 export interface EditorToolbarSFSymbolIcon {
     type: 'sfSymbol';
     name: string;
@@ -23,7 +25,7 @@ export type EditorToolbarIcon = {
     android?: EditorToolbarMaterialIcon;
     fallbackText?: string;
 };
-export type EditorToolbarItem = {
+export type EditorToolbarLeafItem = {
     type: 'mark';
     mark: string;
     label: string;
@@ -39,6 +41,12 @@ export type EditorToolbarItem = {
     label: string;
     icon: EditorToolbarIcon;
     key?: string;
+} | {
+    type: 'heading';
+    level: EditorToolbarHeadingLevel;
+    label: string;
+    icon: EditorToolbarIcon;
+    key?: string;
 } | {
     type: 'blockquote';
     label: string;
@@ -62,9 +70,6 @@ export type EditorToolbarItem = {
     label: string;
     icon: EditorToolbarIcon;
     key?: string;
-} | {
-    type: 'separator';
-    key?: string;
 } | {
     type: 'action';
     key: string;
@@ -73,6 +78,19 @@ export type EditorToolbarItem = {
     isActive?: boolean;
     isDisabled?: boolean;
 };
+export type EditorToolbarGroupChildItem = EditorToolbarLeafItem;
+export interface EditorToolbarGroupItem {
+    type: 'group';
+    key: string;
+    label: string;
+    icon: EditorToolbarIcon;
+    presentation?: EditorToolbarGroupPresentation;
+    items: readonly EditorToolbarGroupChildItem[];
+}
+export type EditorToolbarItem = EditorToolbarLeafItem | EditorToolbarGroupItem | {
+    type: 'separator';
+    key?: string;
+};
 export declare const DEFAULT_EDITOR_TOOLBAR_ITEMS: readonly EditorToolbarItem[];
 export interface EditorToolbarProps {
     /** Currently active marks and nodes from the Rust engine. */
@@ -109,6 +127,8 @@ export interface EditorToolbarProps {
     onToggleMark?: (mark: string) => void;
     /** Generic list toggle handler used by configurable list buttons. */
     onToggleListType?: (listType: EditorToolbarListType) => void;
+    /** Generic heading toggle handler used by configurable heading buttons. */
+    onToggleHeading?: (level: EditorToolbarHeadingLevel) => void;
     /** Generic node insertion handler used by configurable node buttons. */
     onInsertNodeType?: (nodeType: string) => void;
     /** Generic command handler used by configurable command buttons. */
@@ -126,4 +146,4 @@ export interface EditorToolbarProps {
     /** Whether to render the built-in top separator line. */
     showTopBorder?: boolean;
 }
-export declare function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems, theme, showTopBorder, }: EditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems, theme, showTopBorder, }: EditorToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/EditorToolbar.js

@@ -50,6 +50,8 @@ const BUTTON_HIT = 44;
 const BUTTON_VISIBLE = 32;
 const TOOLBAR_PADDING_H = 12;
 const TOOLBAR_PADDING_V = 4;
+const MENU_MARGIN = 8;
+const MENU_WIDTH = 192;
 const ACTIVE_BG = 'rgba(0, 122, 255, 0.12)';
 const ACTIVE_COLOR = '#007AFF';
 const DEFAULT_COLOR = '#666666';
@@ -59,6 +61,8 @@ const TOOLBAR_BG = '#FFFFFF';
 const TOOLBAR_BORDER = '#E5E5EA';
 const TOOLBAR_RADIUS = 0;
 const BUTTON_RADIUS = 6;
+const MENU_BORDER = '#D1D1D6';
+const MENU_SHADOW = '#000000';
 const DEFAULT_GLYPH_ICONS = {
     bold: 'B',
     italic: 'I',
@@ -67,6 +71,12 @@ const DEFAULT_GLYPH_ICONS = {
     link: '🔗',
     image: '🖼',
     blockquote: '❝',
+    h1: 'H1',
+    h2: 'H2',
+    h3: 'H3',
+    h4: 'H4',
+    h5: 'H5',
+    h6: 'H6',
     bulletList: '•≡',
     orderedList: '1.',
     indentList: '→',
@@ -83,6 +93,12 @@ const DEFAULT_MATERIAL_ICONS = {
     strike: 'strikethrough-s',
     link: 'link',
     image: 'image',
+    h1: 'title',
+    h2: 'title',
+    h3: 'title',
+    h4: 'title',
+    h5: 'title',
+    h6: 'title',
     blockquote: 'format-quote',
     bulletList: 'format-list-bulleted',
     orderedList: 'format-list-numbered',
@@ -93,20 +109,22 @@ const DEFAULT_MATERIAL_ICONS = {
     undo: 'undo',
     redo: 'redo',
 };
-function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS, theme, showTopBorder = true, }) {
+function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike, onToggleBulletList, onToggleHeading, onToggleBlockquote, onToggleOrderedList, onIndentList, onOutdentList, onInsertHorizontalRule, onInsertLineBreak, onUndo, onRedo, onToggleMark, onToggleListType, onInsertNodeType, onRunCommand, onToolbarAction, onRequestLink, onRequestImage, toolbarItems = exports.DEFAULT_EDITOR_TOOLBAR_ITEMS, theme, showTopBorder = true, }) {
     const marks = activeState.marks ?? {};
     const nodes = activeState.nodes ?? {};
     const commands = activeState.commands ?? {};
     const allowedMarks = activeState.allowedMarks ?? [];
     const insertableNodes = activeState.insertableNodes ?? [];
+    const groupButtonRefs = (0, react_1.useRef)(new Map());
+    const { width: windowWidth, height: windowHeight } = (0, react_native_1.useWindowDimensions)();
+    const [expandedGroupKey, setExpandedGroupKey] = (0, react_1.useState)(null);
+    const [menuState, setMenuState] = (0, react_1.useState)(null);
     const isMarkActive = (0, react_1.useCallback)((mark) => !!marks[mark], [marks]);
     const isInList = !!nodes['bulletList'] || !!nodes['orderedList'];
     const canIndentList = isInList && !!commands['indentList'];
     const canOutdentList = isInList && !!commands['outdentList'];
     const getActionForItem = (0, react_1.useCallback)((item) => {
         switch (item.type) {
-            case 'separator':
-                return null;
             case 'mark':
                 if (onToggleMark) {
                     return () => onToggleMark(item.mark);
@@ -134,6 +152,8 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                 return onRequestLink ?? null;
             case 'image':
                 return onRequestImage ?? null;
+            case 'heading':
+                return onToggleHeading ? () => onToggleHeading(item.level) : null;
             case 'blockquote':
                 return onToggleBlockquote ?? null;
             case 'node':
@@ -173,49 +193,44 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
         onOutdentList,
         onRedo,
         onRunCommand,
-        onRequestLink,
         onRequestImage,
-        onToolbarAction,
-        onToggleBold,
+        onRequestLink,
         onToggleBlockquote,
+        onToggleBold,
         onToggleBulletList,
+        onToggleHeading,
         onToggleItalic,
         onToggleListType,
         onToggleMark,
         onToggleOrderedList,
         onToggleStrike,
         onToggleUnderline,
+        onToolbarAction,
         onUndo,
     ]);
-    const makeButtonKey = (0, react_1.useCallback)((item, index) => item.key ??
-        (item.type === 'mark'
-            ? `mark:${item.mark}:${index}`
+    const makeButtonKey = (0, react_1.useCallback)((item, index, prefix = '') => item.key != null
+        ? `${prefix}${item.key}`
+        : item.type === 'mark'
+            ? `${prefix}mark:${item.mark}:${index}`
             : item.type === 'link'
-                ? `link:${index}`
+                ? `${prefix}link:${index}`
                 : item.type === 'image'
-                    ? `image:${index}`
-                    : item.type === 'blockquote'
-                        ? `blockquote:${index}`
-                        : item.type === 'list'
-                            ? `list:${item.listType}:${index}`
-                            : item.type === 'command'
-                                ? `command:${item.command}:${index}`
-                                : item.type === 'node'
-                                    ? `node:${item.nodeType}:${index}`
-                                    : `action:${item.key}:${index}`), []);
-    const renderedItems = [];
-    for (let index = 0; index < toolbarItems.length; index += 1) {
-        const item = toolbarItems[index];
-        if (item.type === 'separator') {
-            renderedItems.push({
-                type: 'separator',
-                key: item.key ?? `separator:${index}`,
-            });
-            continue;
-        }
+                    ? `${prefix}image:${index}`
+                    : item.type === 'heading'
+                        ? `${prefix}heading:${item.level}:${index}`
+                        : item.type === 'blockquote'
+                            ? `${prefix}blockquote:${index}`
+                            : item.type === 'list'
+                                ? `${prefix}list:${item.listType}:${index}`
+                                : item.type === 'command'
+                                    ? `${prefix}command:${item.command}:${index}`
+                                    : item.type === 'node'
+                                        ? `${prefix}node:${item.nodeType}:${index}`
+                                        : `${prefix}action:${item.key}:${index}`, []);
+    const resolveButton = (0, react_1.useCallback)((item, index, prefix = '', groupKey) => {
         const action = getActionForItem(item);
         if (!action) {
-            continue;
+            return null;
         }
         let isActive = false;
         let isDisabled = false;
@@ -231,6 +246,12 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
             case 'image':
                 isDisabled = !insertableNodes.includes('image') || !onRequestImage;
                 break;
+            case 'heading': {
+                const headingNodeType = `h${item.level}`;
+                isActive = !!nodes[headingNodeType];
+                isDisabled = !commands[`toggleHeading${item.level}`];
+                break;
+            }
             case 'blockquote':
                 isActive = !!nodes['blockquote'];
                 isDisabled = !commands['toggleBlockquote'];
@@ -265,46 +286,176 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
                 isDisabled = !insertableNodes.includes(item.nodeType);
                 break;
         }
-        renderedItems.push({
-            type: 'button',
-            button: {
-                key: makeButtonKey(item, index),
-                label: item.label,
-                icon: item.icon,
-                action,
-                isActive,
-                isDisabled,
-            },
-        });
-    }
-    const compactItems = renderedItems.filter((entry, index, list) => {
-        if (entry.type !== 'separator') {
-            return true;
+        return {
+            key: makeButtonKey(item, index, prefix),
+            label: item.label,
+            icon: item.icon,
+            action,
+            isActive,
+            isDisabled,
+            groupKey,
+        };
+    }, [
+        allowedMarks,
+        canIndentList,
+        canOutdentList,
+        commands,
+        getActionForItem,
+        historyState.canRedo,
+        historyState.canUndo,
+        insertableNodes,
+        isMarkActive,
+        makeButtonKey,
+        nodes,
+        onRequestImage,
+        onRequestLink,
+        onToolbarAction,
+    ]);
+    const { renderedItems, groupsByKey } = (0, react_1.useMemo)(() => {
+        const entries = [];
+        const nextGroups = new Map();
+        for (let index = 0; index < toolbarItems.length; index += 1) {
+            const item = toolbarItems[index];
+            if (item.type === 'separator') {
+                entries.push({
+                    type: 'separator',
+                    key: item.key ?? `separator:${index}`,
+                });
+                continue;
+            }
+            if (item.type === 'group') {
+                const children = item.items
+                    .map((child, childIndex) => resolveButton(child, childIndex, `${item.key}:`, item.key))
+                    .filter((child) => child != null);
+                if (children.length === 0) {
+                    continue;
+                }
+                const presentation = item.presentation ?? 'expand';
+                const isExpanded = presentation === 'expand' && expandedGroupKey === item.key;
+                const isMenuOpen = presentation === 'menu' && menuState?.groupKey === item.key;
+                const group = {
+                    key: item.key,
+                    label: item.label,
+                    icon: item.icon,
+                    presentation,
+                    children,
+                    isActive: children.some((child) => child.isActive) || isExpanded || isMenuOpen,
+                    isDisabled: children.every((child) => child.isDisabled),
+                    isExpanded,
+                    isOpen: isExpanded || isMenuOpen,
+                };
+                nextGroups.set(group.key, group);
+                entries.push({ type: 'group', group });
+                if (group.isExpanded) {
+                    entries.push(...children.map((child) => ({ type: 'button', button: child })));
+                }
+                continue;
+            }
+            const button = resolveButton(item, index);
+            if (button) {
+                entries.push({ type: 'button', button });
+            }
+        }
+        return {
+            renderedItems: entries.filter((entry, index, list) => {
+                if (entry.type !== 'separator') {
+                    return true;
+                }
+                const previous = list[index - 1];
+                const next = list[index + 1];
+                return (previous != null &&
+                    previous.type !== 'separator' &&
+                    next != null &&
+                    next.type !== 'separator');
+            }),
+            groupsByKey: nextGroups,
+        };
+    }, [expandedGroupKey, menuState?.groupKey, resolveButton, toolbarItems]);
+    (0, react_1.useEffect)(() => {
+        if (expandedGroupKey != null && !groupsByKey.has(expandedGroupKey)) {
+            setExpandedGroupKey(null);
+        }
+    }, [expandedGroupKey, groupsByKey]);
+    (0, react_1.useEffect)(() => {
+        if (menuState != null && !groupsByKey.has(menuState.groupKey)) {
+            setMenuState(null);
+        }
+    }, [groupsByKey, menuState]);
+    const handleButtonPress = (0, react_1.useCallback)((button) => {
+        button.action();
+        if (button.groupKey) {
+            setExpandedGroupKey((current) => (current === button.groupKey ? null : current));
         }
-        const previous = list[index - 1];
-        const next = list[index + 1];
-        return previous?.type === 'button' && next?.type === 'button';
-    });
-    const renderButton = ({ key, label, icon, action, isActive, isDisabled }) => {
+        setMenuState(null);
+    }, []);
+    const handleGroupPress = (0, react_1.useCallback)((group) => {
+        if (group.isDisabled) {
+            return;
+        }
+        if (group.presentation === 'expand') {
+            setMenuState(null);
+            setExpandedGroupKey((current) => (current === group.key ? null : group.key));
+            return;
+        }
+        const anchor = groupButtonRefs.current.get(group.key);
+        if (!anchor) {
+            return;
+        }
+        anchor.measureInWindow((x, y, width, height) => {
+            setExpandedGroupKey(null);
+            setMenuState((current) => current?.groupKey === group.key
+                ? null
+                : {
+                    groupKey: group.key,
+                    x,
+                    y,
+                    width,
+                    height,
+                });
+        });
+    }, []);
+    const menuGroup = menuState != null ? groupsByKey.get(menuState.groupKey) ?? null : null;
+    const menuHeight = menuGroup ? menuGroup.children.length * 40 + 16 : 0;
+    const menuTop = menuState == null
+        ? 0
+        : Math.max(MENU_MARGIN, Math.min(menuState.y + menuState.height + 8, windowHeight - menuHeight - MENU_MARGIN));
+    const menuLeft = menuState == null
+        ? 0
+        : Math.max(MENU_MARGIN, Math.min(menuState.x + menuState.width - MENU_WIDTH, windowWidth - MENU_WIDTH - MENU_MARGIN));
+    const renderButton = (button, onPress, options) => {
         const activeColor = theme?.buttonActiveColor ?? ACTIVE_COLOR;
         const defaultColor = theme?.buttonColor ?? DEFAULT_COLOR;
         const disabledColor = theme?.buttonDisabledColor ?? DISABLED_COLOR;
-        const color = isActive ? activeColor : isDisabled ? disabledColor : defaultColor;
-        return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: action, disabled: isDisabled, style: [
-                styles.button,
-                {
-                    borderRadius: theme?.buttonBorderRadius ?? BUTTON_RADIUS,
-                },
-                isActive && {
-                    backgroundColor: theme?.buttonActiveBackgroundColor ?? ACTIVE_BG,
-                },
-            ], activeOpacity: 0.5, accessibilityRole: 'button', accessibilityLabel: label, accessibilityState: { selected: isActive, disabled: isDisabled }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(ToolbarIcon, { icon: icon, color: color }) }) }, key));
+        const color = button.isActive ? activeColor : button.isDisabled ? disabledColor : defaultColor;
+        const anchorGroupKey = options?.anchorGroupKey;
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: anchorGroupKey == null
+                ? undefined
+                : (node) => {
+                    if (node) {
+                        groupButtonRefs.current.set(anchorGroupKey, node);
+                    }
+                    else {
+                        groupButtonRefs.current.delete(anchorGroupKey);
+                    }
+                }, collapsable: false, style: styles.buttonAnchor, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: onPress, disabled: button.isDisabled, style: [
+                        styles.button,
+                        {
+                            borderRadius: theme?.buttonBorderRadius ?? BUTTON_RADIUS,
+                        },
+                        button.isActive && {
+                            backgroundColor: theme?.buttonActiveBackgroundColor ?? ACTIVE_BG,
+                        },
+                    ], activeOpacity: 0.5, accessibilityRole: 'button', accessibilityLabel: button.label, accessibilityState: {
+                        selected: button.isActive,
+                        disabled: button.isDisabled,
+                        expanded: options?.showsDisclosure ? options.expanded : undefined,
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsx)(ToolbarIcon, { icon: button.icon, color: color }) }) }), options?.showsDisclosure ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.groupDisclosure, { color }], children: '\u25BE' })) : null] }, button.key));
     };
     const renderSeparator = (key) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
             styles.separator,
             theme?.separatorColor != null ? { backgroundColor: theme.separatorColor } : null,
         ] }, key));
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
             styles.container,
             !showTopBorder && styles.containerWithoutTopBorder,
             theme?.backgroundColor != null ? { backgroundColor: theme.backgroundColor } : null,
@@ -321,9 +472,55 @@ function EditorToolbar({ activeState, historyState, onToggleBold, onToggleItalic
             {
                 borderRadius: theme?.borderRadius ?? TOOLBAR_RADIUS,
             },
-        ], children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.scrollContent, keyboardShouldPersistTaps: 'always', children: compactItems.map((item) => item.type === 'separator'
-                ? renderSeparator(item.key)
-                : renderButton(item.button)) }) }));
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.scrollContent, keyboardShouldPersistTaps: 'always', onScrollBeginDrag: () => setMenuState(null), children: renderedItems.map((item) => {
+                    if (item.type === 'separator') {
+                        return renderSeparator(item.key);
+                    }
+                    if (item.type === 'group') {
+                        return renderButton({
+                            key: item.group.key,
+                            label: item.group.label,
+                            icon: item.group.icon,
+                            isActive: item.group.isActive,
+                            isDisabled: item.group.isDisabled,
+                        }, () => handleGroupPress(item.group), {
+                            anchorGroupKey: item.group.key,
+                            showsDisclosure: true,
+                            expanded: item.group.isOpen,
+                        });
+                    }
+                    return renderButton(item.button, () => handleButtonPress(item.button));
+                }) }), menuState != null && menuGroup != null ? ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { transparent: true, visible: true, animationType: 'fade', onRequestClose: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.menuBackdrop, onPress: () => setMenuState(null), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                            styles.menuCard,
+                            {
+                                top: menuTop,
+                                left: menuLeft,
+                                backgroundColor: theme?.backgroundColor ?? TOOLBAR_BG,
+                                borderColor: theme?.borderColor ?? MENU_BORDER,
+                            },
+                        ], children: menuGroup.children.map((button) => {
+                            const activeColor = theme?.buttonActiveColor ?? ACTIVE_COLOR;
+                            const defaultColor = theme?.buttonColor ?? DEFAULT_COLOR;
+                            const disabledColor = theme?.buttonDisabledColor ?? DISABLED_COLOR;
+                            const color = button.isActive
+                                ? activeColor
+                                : button.isDisabled
+                                    ? disabledColor
+                                    : defaultColor;
+                            return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => handleButtonPress(button), disabled: button.isDisabled, style: ({ pressed }) => [
+                                    styles.menuItem,
+                                    button.isActive && {
+                                        backgroundColor: theme?.buttonActiveBackgroundColor ?? ACTIVE_BG,
+                                    },
+                                    pressed &&
+                                        !button.isDisabled && {
+                                        opacity: 0.75,
+                                    },
+                                ], accessibilityRole: 'button', accessibilityLabel: button.label, accessibilityState: {
+                                    selected: button.isActive,
+                                    disabled: button.isDisabled,
+                                }, children: [(0, jsx_runtime_1.jsx)(ToolbarIcon, { icon: button.icon, color: color }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.menuLabel, { color }], children: button.label })] }, button.key));
+                        }) }) }) })) : null] }));
 }
 function ToolbarIcon({ icon, color }) {
     const materialIconName = resolveMaterialIconName(icon);
@@ -370,6 +567,9 @@ const styles = react_native_1.StyleSheet.create({
         paddingHorizontal: TOOLBAR_PADDING_H,
         minWidth: '100%',
     },
+    buttonAnchor: {
+        position: 'relative',
+    },
     button: {
         width: BUTTON_HIT,
         height: BUTTON_VISIBLE,
@@ -377,6 +577,13 @@ const styles = react_native_1.StyleSheet.create({
         alignItems: 'center',
         borderRadius: BUTTON_RADIUS,
     },
+    groupDisclosure: {
+        position: 'absolute',
+        right: 5,
+        bottom: 2,
+        fontSize: 9,
+        fontWeight: '700',
+    },
     separator: {
         width: react_native_1.StyleSheet.hairlineWidth,
         height: 20,
@@ -391,4 +598,31 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 16,
         fontWeight: '600',
     },
+    menuBackdrop: {
+        flex: 1,
+    },
+    menuCard: {
+        position: 'absolute',
+        width: MENU_WIDTH,
+        borderRadius: 14,
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        paddingVertical: 8,
+        shadowColor: MENU_SHADOW,
+        shadowOpacity: 0.16,
+        shadowRadius: 18,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 10,
+    },
+    menuItem: {
+        minHeight: 40,
+        paddingHorizontal: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    menuLabel: {
+        flex: 1,
+        marginLeft: 10,
+        fontSize: 14,
+        fontWeight: '500',
+    },
 });