@kwiz/fluentui 1.0.73 → 1.0.75

package/src/controls/list.tsx

@@ -1,120 +1,120 @@
-import { makeStyles, tokens } from '@fluentui/react-components';
-import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { KnownClassNames, mixins } from '../styles/styles';
-import { Horizontal } from './horizontal';
-import { Section } from './section';
-import { Vertical } from './vertical';
-
-const useStyles = makeStyles({
-    list: {
-        rowGap: 0
-    },
-    listItem: {
-        padding: tokens.spacingVerticalS,
-        ':hover': {
-            backgroundColor: tokens.colorNeutralBackground1Hover
-        }
-    },
-    listItemSelected: {
-        backgroundColor: tokens.colorNeutralBackground1Selected
-    },
-    media: {
-        width: '32px',
-        fontSize: tokens.fontSizeBase600,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center'
-    },
-    image: {
-        width: tokens.lineHeightBase600,
-        height: tokens.lineHeightBase600,
-        backgroundPosition: 'center center',
-        backgroundSize: 'cover',
-        borderRadius: tokens.borderRadiusCircular,
-        border: `1px solid ${tokens.colorNeutralStroke1}`
-    },
-    listItemBody: {
-        rowGap: 0,
-        width: 'calc(100% - 44px)'
-    },
-    listItemHeader: mixins.ellipsis,
-    listItemContent: {
-        ...mixins.ellipsis,
-        fontSize: tokens.fontSizeBase200
-    },
-    listItemMedia: {
-        ...mixins.ellipsis,
-        maxWidth: '20%',
-        '& svg': {
-            height: tokens.fontSizeBase300
-        },
-        '& button': {
-            padding: 0,
-            minWidth: 0,
-            minHeight: 0,
-            height: '14px'
-        }
-    },
-    listItemMediaNoTrim: {
-        overflow: 'visible',
-        maxWidth: 'fit-content'
-    },
-    listItemMultilineContent: {
-        whiteSpace: 'pre-line'
-    }
-});
-
-export interface iListItem {
-    key: string | number;
-    media?: JSX.Element | string;
-    header: string;
-    headerMedia?: JSX.Element | string;
-    content?: string | JSX.Element | (string | JSX.Element)[];
-    onClickOnMedia?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    selected?: boolean;
-}
-interface IProps {
-    selectable?: boolean;
-    items: iListItem[];
-    showAllHeaderMedia?: boolean;
-    /** allow multiline content */
-    multiline?: boolean;
-    dark?: boolean;
-}
-
-export const ListEx = (props: IProps) => {
-    const ctx = useKWIZFluentContext();
-    const cssNames = useStyles();
-    const isDark = ctx.dark === true || props.dark === true;
-
-    const listItemElm = (item: iListItem) => <Horizontal key={item.key} css={[cssNames.listItem, item.selected && cssNames.listItemSelected]} onClick={item.onClick}>
-        {item.media && <Section css={[cssNames.media]} onClick={(e) => {
-            if (!item.onClickOnMedia)
-                e.stopPropagation();//media may have its on onclick
-        }}>{
-                isString(item.media)
-                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${isDark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
-                    : item.media
-            }</Section>}
-        <Vertical main css={[cssNames.listItemBody]}>
-            <Horizontal main>
-                <Section main css={[cssNames.listItemHeader]}>{item.header}</Section>
-                {item.headerMedia && <Section onClick={(e) => {
-                    e.stopPropagation();//media may have its on onclick
-                }} css={[cssNames.listItemMedia, props.showAllHeaderMedia && cssNames.listItemMediaNoTrim]}>{item.headerMedia}</Section>}
-            </Horizontal>
-            {!isNullOrUndefined(item.content)
-                ? (Array.isArray(item.content) ? item.content : [item.content]).map((c, idx) => isNullOrUndefined(c) ? undefined : <Section key={idx} css={[cssNames.listItemContent, props.multiline ? cssNames.listItemMultilineContent : undefined]}>{c}</Section>)
-                : undefined}
-        </Vertical>
-    </Horizontal>;
-
-    return (
-        <Vertical css={[cssNames.list, KnownClassNames.list]}>
-            {props.items.map(item => listItemElm(item))}
-        </Vertical>
-    );
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { KnownClassNames, mixins } from '../styles/styles';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+import { Vertical } from './vertical';
+
+const useStyles = makeStyles({
+    list: {
+        rowGap: 0
+    },
+    listItem: {
+        padding: tokens.spacingVerticalS,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover
+        }
+    },
+    listItemSelected: {
+        backgroundColor: tokens.colorNeutralBackground1Selected
+    },
+    media: {
+        width: '32px',
+        fontSize: tokens.fontSizeBase600,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center'
+    },
+    image: {
+        width: tokens.lineHeightBase600,
+        height: tokens.lineHeightBase600,
+        backgroundPosition: 'center center',
+        backgroundSize: 'cover',
+        borderRadius: tokens.borderRadiusCircular,
+        border: `1px solid ${tokens.colorNeutralStroke1}`
+    },
+    listItemBody: {
+        rowGap: 0,
+        width: 'calc(100% - 44px)'
+    },
+    listItemHeader: mixins.ellipsis,
+    listItemContent: {
+        ...mixins.ellipsis,
+        fontSize: tokens.fontSizeBase200
+    },
+    listItemMedia: {
+        ...mixins.ellipsis,
+        maxWidth: '20%',
+        '& svg': {
+            height: tokens.fontSizeBase300
+        },
+        '& button': {
+            padding: 0,
+            minWidth: 0,
+            minHeight: 0,
+            height: '14px'
+        }
+    },
+    listItemMediaNoTrim: {
+        overflow: 'visible',
+        maxWidth: 'fit-content'
+    },
+    listItemMultilineContent: {
+        whiteSpace: 'pre-line'
+    }
+});
+
+export interface iListItem {
+    key: string | number;
+    media?: JSX.Element | string;
+    header: string;
+    headerMedia?: JSX.Element | string;
+    content?: string | JSX.Element | (string | JSX.Element)[];
+    onClickOnMedia?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    selected?: boolean;
+}
+interface IProps {
+    selectable?: boolean;
+    items: iListItem[];
+    showAllHeaderMedia?: boolean;
+    /** allow multiline content */
+    multiline?: boolean;
+    dark?: boolean;
+}
+
+export const ListEx = (props: IProps) => {
+    const ctx = useKWIZFluentContext();
+    const cssNames = useStyles();
+    const isDark = ctx.dark === true || props.dark === true;
+
+    const listItemElm = (item: iListItem) => <Horizontal key={item.key} css={[cssNames.listItem, item.selected && cssNames.listItemSelected]} onClick={item.onClick}>
+        {item.media && <Section css={[cssNames.media]} onClick={(e) => {
+            if (!item.onClickOnMedia)
+                e.stopPropagation();//media may have its on onclick
+        }}>{
+                isString(item.media)
+                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${isDark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
+                    : item.media
+            }</Section>}
+        <Vertical main css={[cssNames.listItemBody]}>
+            <Horizontal main>
+                <Section main css={[cssNames.listItemHeader]}>{item.header}</Section>
+                {item.headerMedia && <Section onClick={(e) => {
+                    e.stopPropagation();//media may have its on onclick
+                }} css={[cssNames.listItemMedia, props.showAllHeaderMedia && cssNames.listItemMediaNoTrim]}>{item.headerMedia}</Section>}
+            </Horizontal>
+            {!isNullOrUndefined(item.content)
+                ? (Array.isArray(item.content) ? item.content : [item.content]).map((c, idx) => isNullOrUndefined(c) ? undefined : <Section key={idx} css={[cssNames.listItemContent, props.multiline ? cssNames.listItemMultilineContent : undefined]}>{c}</Section>)
+                : undefined}
+        </Vertical>
+    </Horizontal>;
+
+    return (
+        <Vertical css={[cssNames.list, KnownClassNames.list]}>
+            {props.items.map(item => listItemElm(item))}
+        </Vertical>
+    );
 }

package/src/controls/loading.tsx

@@ -1,11 +1,11 @@
-import { LOGO_ANIM_SMALL } from '@kwiz/common';
-import { Centered } from './centered';
-import React from 'react';
-
-interface IProps {
-}
-export const Loading: React.FunctionComponent<IProps> = (props) => {
-    return (
-        <Centered><img src={LOGO_ANIM_SMALL} alt="loading" style={{ width: '15vw' }} /></Centered>
-    );
+import { LOGO_ANIM_SMALL } from '@kwiz/common';
+import { Centered } from './centered';
+import React from 'react';
+
+interface IProps {
+}
+export const Loading: React.FunctionComponent<IProps> = (props) => {
+    return (
+        <Centered><img src={LOGO_ANIM_SMALL} alt="loading" style={{ width: '15vw' }} /></Centered>
+    );
 }

package/src/controls/menu.tsx

@@ -1,174 +1,174 @@
-import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuListProps, MenuPopover, menuPopoverClassNames, MenuPopoverProps, MenuProps, MenuTrigger } from '@fluentui/react-components';
-import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
-import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useStateEX } from '../helpers';
-import { ButtonEX, ButtonEXProps } from './button';
-import { Horizontal } from './horizontal';
-import { Search } from './search';
-import { Section } from './section';
-
-interface iMenuItemEXItem {
-    type?: "item";
-    title: string;
-    onClick: () => void;
-    disabled?: boolean;
-    icon?: JSX.Element;
-    items?: iMenuItemEX[];
-    checked?: boolean;
-}
-interface iMenuItemEXSeparator {
-    type: "separator";
-}
-interface iMenuItemEXGroup {
-    type: "group";
-    title: string;
-    items: iMenuItemEX[];
-}
-export type iMenuItemEX = iMenuItemEXItem | iMenuItemEXSeparator | iMenuItemEXGroup;
-
-interface IProps {
-    menuProps?: MenuProps;
-    menuPopOverProps?: MenuPopoverProps;
-    menuListProps?: MenuListProps;
-    trigger: JSX.Element | string | ButtonEXProps;
-    items: iMenuItemEX[];
-    /** default 8 null/false to disable */
-    filterThreshold?: number | false;
-    /** default 8, null/false to disable */
-    pageSize?: number | false;
-}
-export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const ctx = useKWIZFluentContext();
-    const [startIndexPerLevel, setStartIndexPerLevel] = useStateEX<IDictionary<number>>({});
-    const [filterPerLevel, setFilterPerLevel] = useStateEX<IDictionary<string>>({});
-    let pageSize: number = isUndefined(props.pageSize) ? 8 : isNumber(props.pageSize) ? props.pageSize : 99999999999;
-    let filterThreshold: number = isUndefined(props.filterThreshold) ? 8 : isNumber(props.filterThreshold) ? props.filterThreshold : 99999999999;
-
-    //when hovering over sub menu the parent would close - have menu trigger keep open on the parent level
-    const [keepOpen, setKeepOpen] = useStateEX<IDictionary<boolean>>({});
-    const [opened, setOpened] = useStateEX<IDictionary<boolean>>({});
-
-    React.useEffect(() => {
-        window.setTimeout(() => {
-            var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
-            menus.forEach((menu: HTMLDivElement) => {
-                var rect = menu.getBoundingClientRect();
-                if (rect.bottom > document.documentElement.clientHeight) {
-                    menu.style.overflow = "auto";
-                    menu.style.height = `${rect.height - (rect.bottom - document.documentElement.clientHeight)}px`;
-                }
-            });
-        }, 100);
-    }, [opened]);
-
-    function renderItems(items: iMenuItemEX[], level: number) {
-        const myLevelFilter = filterPerLevel[level];
-        //get rid of empty/null items
-        items = items.filter(i => !isNullOrUndefined(i) && (isNotEmptyString(i.type) || isNotEmptyString((i as iMenuItemEXItem).title)))
-        if (isNotEmptyString(myLevelFilter)) {
-            items = items.filter(i => i.type !== "separator" && i.title.toLowerCase().indexOf(myLevelFilter) >= 0);
-        }
-
-        let menuItems = items.map((item, index) => {
-            switch (item.type) {
-                case "group":
-                    return <MenuGroup key={index}>
-                        <MenuGroupHeader>{item.title}</MenuGroupHeader>
-                        {renderItems(item.items, level + 1)}
-                    </MenuGroup>;
-                case "separator":
-                    return <MenuDivider key={index} />;
-                case "item":
-                default:
-                    const openKey = `${level}|${index}`;
-                    const menuItem = <MenuItem key={index} icon={item.icon}
-                        disabled={item.disabled}
-                        onClick={item.onClick}
-                    >{item.title}</MenuItem>;
-                    return isNotEmptyArray(item.items)
-                        ? <Menu key={index} mountNode={ctx.mountNode} open={opened[openKey] || false} onOpenChange={(e, data) => {
-                            if (data.open) {
-                                setOpened({ ...opened, [openKey]: true });
-                                setKeepOpen({ ...keepOpen, [level]: true });
-                            }
-                            else if (!keepOpen[openKey]) {
-                                setOpened({ ...opened, [openKey]: false });
-                                setKeepOpen({ ...keepOpen, [level]: false });
-                            }
-                        }}>
-                            <MenuTrigger disableButtonEnhancement>
-                                {menuItem}
-                            </MenuTrigger>
-                            <MenuPopover>
-                                <MenuList>
-                                    {renderItems(item.items, level + 1)}
-                                </MenuList>
-                            </MenuPopover>
-                        </Menu>
-                        : menuItem;
-            }
-        });
-
-        const paged = menuItems.length > pageSize;
-        const filtered = menuItems.length > filterThreshold || !isNullOrEmptyString(myLevelFilter);
-        const filterControl = filtered && <Search value={myLevelFilter || ""} onChangeDeferred={(newValue) => {
-            const s = jsonClone(filterPerLevel);
-            s[level] = newValue ? newValue.toLowerCase() : "";
-            setFilterPerLevel(s);
-        }} />;
-        if (paged) {
-            let start = startIndexPerLevel[level];
-            if (isNullOrUndefined(start)) start = 0;
-            let hasMore = menuItems.length > start + pageSize;
-            menuItems = menuItems.slice(start, start + pageSize);
-            if (start > 0 || hasMore) menuItems.splice(0, 0, <Horizontal key='$next'>
-                <ButtonEX disabled={start < 1} icon={<ChevronLeftRegular />} title='previous' onClick={() => {
-                    const s = jsonClone(startIndexPerLevel);
-                    s[level] = start - pageSize;
-                    setStartIndexPerLevel(s);
-                }} />
-                <Section main>
-                    {filterControl}
-                </Section>
-                <ButtonEX disabled={!hasMore} icon={<ChevronRightRegular />} title='next' onClick={() => {
-                    const s = jsonClone(startIndexPerLevel);
-                    s[level] = start + pageSize;
-                    setStartIndexPerLevel(s);
-                }} />
-            </Horizontal>);
-        }
-        else if (filtered) {
-            //just filter - no paging
-            menuItems.splice(0, 0, <Horizontal key='$next'>
-                {filterControl}
-            </Horizontal>);
-        }
-        return menuItems;
-    }
-
-    return (
-        <Menu mountNode={ctx.mountNode} {...props.menuProps} open={opened[0] || false} onOpenChange={(e, data) => {
-            if (data.open) setOpened({ ...opened, 0: true });
-            else if (!keepOpen[0]) setOpened({ ...opened, 0: false });
-        }}>
-            <MenuTrigger disableButtonEnhancement>
-                {isString(props.trigger)
-                    ? <ButtonEX title={props.trigger} onClick={(e) => {
-                        stopEvent(e);
-                    }} />
-                    : isString((props.trigger as ButtonEXProps).title)
-                        ? <ButtonEX {...(props.trigger as ButtonEXProps)} onClick={(e) => {
-                            stopEvent(e);
-                        }} />
-                        : props.trigger as JSX.Element}
-            </MenuTrigger>
-            <MenuPopover {...props.menuPopOverProps}>
-                <MenuList {...props.menuListProps}>
-                    {renderItems(props.items, 0)}
-                </MenuList>
-            </MenuPopover>
-        </Menu>
-    );
+import { Menu, MenuDivider, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuListProps, MenuPopover, menuPopoverClassNames, MenuPopoverProps, MenuProps, MenuTrigger } from '@fluentui/react-components';
+import { ChevronLeftRegular, ChevronRightRegular } from '@fluentui/react-icons';
+import { IDictionary, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, isNullOrUndefined, isNumber, isString, isUndefined, jsonClone, stopEvent } from '@kwiz/common';
+import React from 'react';
+import { useStateEX } from '../helpers';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { ButtonEX, ButtonEXProps } from './button';
+import { Horizontal } from './horizontal';
+import { Search } from './search';
+import { Section } from './section';
+
+interface iMenuItemEXItem {
+    type?: "item";
+    title: string;
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: JSX.Element;
+    items?: iMenuItemEX[];
+    checked?: boolean;
+}
+interface iMenuItemEXSeparator {
+    type: "separator";
+}
+interface iMenuItemEXGroup {
+    type: "group";
+    title: string;
+    items: iMenuItemEX[];
+}
+export type iMenuItemEX = iMenuItemEXItem | iMenuItemEXSeparator | iMenuItemEXGroup;
+
+interface IProps {
+    menuProps?: MenuProps;
+    menuPopOverProps?: MenuPopoverProps;
+    menuListProps?: MenuListProps;
+    trigger: JSX.Element | string | ButtonEXProps;
+    items: iMenuItemEX[];
+    /** default 8 null/false to disable */
+    filterThreshold?: number | false;
+    /** default 8, null/false to disable */
+    pageSize?: number | false;
+}
+export const MenuEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const ctx = useKWIZFluentContext();
+    const [startIndexPerLevel, setStartIndexPerLevel] = useStateEX<IDictionary<number>>({});
+    const [filterPerLevel, setFilterPerLevel] = useStateEX<IDictionary<string>>({});
+    let pageSize: number = isUndefined(props.pageSize) ? 8 : isNumber(props.pageSize) ? props.pageSize : 99999999999;
+    let filterThreshold: number = isUndefined(props.filterThreshold) ? 8 : isNumber(props.filterThreshold) ? props.filterThreshold : 99999999999;
+
+    //when hovering over sub menu the parent would close - have menu trigger keep open on the parent level
+    const [keepOpen, setKeepOpen] = useStateEX<IDictionary<boolean>>({});
+    const [opened, setOpened] = useStateEX<IDictionary<boolean>>({});
+
+    React.useEffect(() => {
+        window.setTimeout(() => {
+            var menus = document.querySelectorAll(`.${menuPopoverClassNames.root}`);
+            menus.forEach((menu: HTMLDivElement) => {
+                var rect = menu.getBoundingClientRect();
+                if (rect.bottom > document.documentElement.clientHeight) {
+                    menu.style.overflow = "auto";
+                    menu.style.height = `${rect.height - (rect.bottom - document.documentElement.clientHeight)}px`;
+                }
+            });
+        }, 100);
+    }, [opened]);
+
+    function renderItems(items: iMenuItemEX[], level: number) {
+        const myLevelFilter = filterPerLevel[level];
+        //get rid of empty/null items
+        items = items.filter(i => !isNullOrUndefined(i) && (isNotEmptyString(i.type) || isNotEmptyString((i as iMenuItemEXItem).title)))
+        if (isNotEmptyString(myLevelFilter)) {
+            items = items.filter(i => i.type !== "separator" && i.title.toLowerCase().indexOf(myLevelFilter) >= 0);
+        }
+
+        let menuItems = items.map((item, index) => {
+            switch (item.type) {
+                case "group":
+                    return <MenuGroup key={index}>
+                        <MenuGroupHeader>{item.title}</MenuGroupHeader>
+                        {renderItems(item.items, level + 1)}
+                    </MenuGroup>;
+                case "separator":
+                    return <MenuDivider key={index} />;
+                case "item":
+                default:
+                    const openKey = `${level}|${index}`;
+                    const menuItem = <MenuItem key={index} icon={item.icon}
+                        disabled={item.disabled}
+                        onClick={item.onClick}
+                    >{item.title}</MenuItem>;
+                    return isNotEmptyArray(item.items)
+                        ? <Menu key={index} mountNode={ctx.mountNode} open={opened[openKey] || false} onOpenChange={(e, data) => {
+                            if (data.open) {
+                                setOpened({ ...opened, [openKey]: true });
+                                setKeepOpen({ ...keepOpen, [level]: true });
+                            }
+                            else if (!keepOpen[openKey]) {
+                                setOpened({ ...opened, [openKey]: false });
+                                setKeepOpen({ ...keepOpen, [level]: false });
+                            }
+                        }}>
+                            <MenuTrigger disableButtonEnhancement>
+                                {menuItem}
+                            </MenuTrigger>
+                            <MenuPopover>
+                                <MenuList>
+                                    {renderItems(item.items, level + 1)}
+                                </MenuList>
+                            </MenuPopover>
+                        </Menu>
+                        : menuItem;
+            }
+        });
+
+        const paged = menuItems.length > pageSize;
+        const filtered = menuItems.length > filterThreshold || !isNullOrEmptyString(myLevelFilter);
+        const filterControl = filtered && <Search defaultValue={myLevelFilter || ""} onChangeDeferred={(newValue) => {
+            const s = jsonClone(filterPerLevel);
+            s[level] = newValue ? newValue.toLowerCase() : "";
+            setFilterPerLevel(s);
+        }} />;
+        if (paged) {
+            let start = startIndexPerLevel[level];
+            if (isNullOrUndefined(start)) start = 0;
+            let hasMore = menuItems.length > start + pageSize;
+            menuItems = menuItems.slice(start, start + pageSize);
+            if (start > 0 || hasMore) menuItems.splice(0, 0, <Horizontal key='$next'>
+                <ButtonEX disabled={start < 1} icon={<ChevronLeftRegular />} title='previous' onClick={() => {
+                    const s = jsonClone(startIndexPerLevel);
+                    s[level] = start - pageSize;
+                    setStartIndexPerLevel(s);
+                }} />
+                <Section main>
+                    {filterControl}
+                </Section>
+                <ButtonEX disabled={!hasMore} icon={<ChevronRightRegular />} title='next' onClick={() => {
+                    const s = jsonClone(startIndexPerLevel);
+                    s[level] = start + pageSize;
+                    setStartIndexPerLevel(s);
+                }} />
+            </Horizontal>);
+        }
+        else if (filtered) {
+            //just filter - no paging
+            menuItems.splice(0, 0, <Horizontal key='$next'>
+                {filterControl}
+            </Horizontal>);
+        }
+        return menuItems;
+    }
+
+    return (
+        <Menu mountNode={ctx.mountNode} {...props.menuProps} open={opened[0] || false} onOpenChange={(e, data) => {
+            if (data.open) setOpened({ ...opened, 0: true });
+            else if (!keepOpen[0]) setOpened({ ...opened, 0: false });
+        }}>
+            <MenuTrigger disableButtonEnhancement>
+                {isString(props.trigger)
+                    ? <ButtonEX title={props.trigger} onClick={(e) => {
+                        stopEvent(e);
+                    }} />
+                    : isString((props.trigger as ButtonEXProps).title)
+                        ? <ButtonEX {...(props.trigger as ButtonEXProps)} onClick={(e) => {
+                            stopEvent(e);
+                        }} />
+                        : props.trigger as JSX.Element}
+            </MenuTrigger>
+            <MenuPopover {...props.menuPopOverProps}>
+                <MenuList {...props.menuListProps}>
+                    {renderItems(props.items, 0)}
+                </MenuList>
+            </MenuPopover>
+        </Menu>
+    );
 }