@kwiz/fluentui 1.0.77 → 1.0.79

package/src/controls/file-upload.tsx

@@ -1,156 +0,0 @@
-import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
-import { ArrowUploadRegular } from "@fluentui/react-icons";
-import { isFunction, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, lastOrNull } from '@kwiz/common';
-import * as React from "react";
-import { dropFiles, useDragDropContext, useEffectOnlyOnMount } from "../helpers";
-import { ButtonEX, ButtonEXProps, CompoundButtonEXSecondary } from "./button";
-
-const useStyles = makeStyles({
-    addRowIsOver: {
-        ...shorthands.borderColor(tokens.colorBrandBackground)
-    }
-});
-
-type base64Result = { base64: string, filename: string };
-interface iProps {
-    showTitleWithIcon?: boolean;
-    title?: string;
-    /** Passing this will turn the button into a compound button */
-    secondaryContent?: string;
-    limitFileTypes?: string[];
-    allowMultiple?: boolean;
-    icon?: JSX.Element;
-    onChange?: (newFile: File | File[], errors: string[]) => void;
-    asBase64?: (files: base64Result[], errors: string[]) => void;
-    buttonProps?: Partial<ButtonEXProps>;
-    disabled?: boolean;
-    /** limit file size in MB, for the asBase64 */
-    fileSizeLimit?: number;
-}
-
-export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props, ref) => {
-    const classes = useStyles();
-    const hiddenFileInput = React.useRef(null);
-    const onChangeRef = React.useRef(props.onChange);
-    const asBase64Ref = React.useRef(props.asBase64);
-
-    const isMulti = props.allowMultiple === true;
-    const icon = props.icon || <ArrowUploadRegular />;
-    const title = isNotEmptyString(props.title) ? props.title : `Drop or select ${isMulti ? 'files' : 'file'}`;
-
-    //keep onChange up to date
-    React.useEffect(() => {
-        onChangeRef.current = props.onChange;
-    }, [props.onChange]);
-    //keep onChange up to date
-    React.useEffect(() => {
-        asBase64Ref.current = props.asBase64;
-    }, [props.asBase64]);
-
-
-    const onGotFiles = React.useCallback(async (rawFiles: FileList) => {
-        let errors: string[] = [];
-        let acceptedFiles: File[] = [];
-        if (rawFiles && rawFiles.length > 0) {
-            //filter by types and size
-            for (let i = 0; i < (isMulti ? rawFiles.length : 1); i++) {
-                const currentFile = rawFiles[i];
-                let hadError = false;
-                if (props.fileSizeLimit > 0) {
-                    const megabytes = currentFile.size / (1024 * 1024);
-                    if (megabytes > props.fileSizeLimit) {
-                        errors.push(`File ${currentFile.name} is over the size limit`);
-                        hadError = true;
-                    }
-                }
-                if (!hadError) {
-                    if (isNotEmptyArray(props.limitFileTypes)) {
-                        let fileType = lastOrNull(currentFile.name.split('.')).toLowerCase();
-                        if (props.limitFileTypes.indexOf(fileType) < 0) {
-                            errors.push(`File ${currentFile.name} is not allowed`);
-                            hadError = true;
-                        }
-                    }
-                }
-                if (!hadError) acceptedFiles.push(currentFile);
-            }
-        }
-
-        if (isMulti) {
-            onChangeRef.current?.(acceptedFiles, errors);
-        }
-        else {
-            const fileUploaded = acceptedFiles[0];
-            onChangeRef.current?.(fileUploaded, errors);
-        }
-
-        if (isFunction(asBase64Ref.current)) {
-            const filesAs64: base64Result[] = [];
-            for (let i = 0; i < (isMulti ? acceptedFiles.length : 1); i++) {
-                const currentFile = acceptedFiles[i];
-                let hadError = false;
-                if (props.fileSizeLimit > 0) {
-                    const megabytes = currentFile.size / (1024 * 1024);
-                    if (megabytes > props.fileSizeLimit) {
-                        errors.push(`File ${currentFile.name} is over the size limit`);
-                        hadError = true;
-                    }
-                }
-                if (!hadError) {
-                    let as64 = await getFileAsBase64(acceptedFiles[i]);
-                    if (as64) filesAs64.push(as64);
-                    else errors.push(`Could not read file ${acceptedFiles[i].name}`);
-                }
-            }
-            asBase64Ref.current?.(filesAs64, errors);
-        }
-    }, useEffectOnlyOnMount);
-
-    const dropContext = useDragDropContext<never, dropFiles>({
-        dropInfo: {
-            acceptTypes: ["__NATIVE_FILE__"],
-            onItemDrop: item => {
-                onGotFiles(item.files);
-            }
-        }
-    });
-
-    return <>
-        {isNullOrEmptyString(props.secondaryContent)
-            ? <ButtonEX ref={ref || dropContext.dragDropRef} {...(props.buttonProps || {})} icon={icon} showTitleWithIcon={props.showTitleWithIcon} onClick={() => {
-                hiddenFileInput.current.value = "";
-                hiddenFileInput.current.click();
-            }}
-                title={title} disabled={props.disabled}
-                className={dropContext.drop.isOver && classes.addRowIsOver}
-            />
-            : <CompoundButtonEXSecondary ref={ref || dropContext.dragDropRef} {...(props.buttonProps || {})} icon={icon}
-                secondaryContent={props.secondaryContent}
-                onClick={() => {
-                    hiddenFileInput.current.value = "";
-                    hiddenFileInput.current.click();
-                }}
-                title={title} disabled={props.disabled}
-                className={dropContext.drop.isOver && classes.addRowIsOver}
-            />}
-        <input type="file" ref={hiddenFileInput} style={{ display: "none" }} multiple={isMulti}
-            accept={isNotEmptyArray(props.limitFileTypes) ? props.limitFileTypes.map(ft => `.${ft}`).join() : undefined}
-            onChange={async (e) => onGotFiles(e.target.files)}
-        />
-    </>;
-});
-
-async function getFileAsBase64(file: File): Promise<base64Result> {
-    return new Promise<base64Result>(resolve => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            if (!isNullOrEmptyString(reader.result))
-                resolve({ filename: file.name, base64: reader.result as string });
-            else {
-                console.warn("Empty file selected");
-                resolve(null);
-            }
-        };
-        reader.readAsDataURL(file);
-    });
-}

package/src/controls/horizontal.tsx

@@ -1,49 +0,0 @@
-import { makeStyles } from '@fluentui/react-components';
-import { isNotEmptyArray } from '@kwiz/common';
-import React from 'react';
-import { KnownClassNames, mixins } from '../styles/styles';
-import { ISectionProps, Section } from './section';
-
-const useStyles = makeStyles({
-    horizontal: {
-        ...mixins.flex,
-        flexDirection: 'row'
-    },
-    wrap: mixins.wrap,
-    nogap: mixins.nogap,
-    centered: {
-        alignItems: "center"
-    },
-    hCentered: {
-        justifyContent: "center"
-    },
-})
-
-interface IProps extends ISectionProps {
-    wrap?: boolean;
-    nogap?: boolean;
-    /** vertical align center */
-    centered?: boolean;
-    /** horizontal centered */
-    hCentered?: boolean;
-}
-export const Horizontal = React.forwardRef<HTMLDivElement, React.PropsWithChildren<IProps>>((props, ref) => {
-    const cssNames = useStyles();
-    let css: string[] = [KnownClassNames.horizontal];
-
-    css.push(cssNames.horizontal);
-    if (props.wrap)
-        css.push(cssNames.wrap);
-    if (props.nogap)
-        css.push(cssNames.nogap);
-    if (props.centered)
-        css.push(cssNames.centered);
-    if (props.hCentered)
-        css.push(cssNames.hCentered);
-
-    if (isNotEmptyArray(props.css)) css.push(...props.css);
-
-    return (
-        <Section {...props} css={css} ref={ref} />
-    );
-});

package/src/controls/html-editor/editor.tsx

@@ -1,182 +0,0 @@
-import { makeStyles, tokens } from '@fluentui/react-components';
-import { ArrowMaximize16Regular, ArrowMinimize16Regular, Dismiss16Regular, Save16Regular } from '@fluentui/react-icons';
-import { isObject } from '@kwiz/common';
-import JoditEditor, { Jodit } from "jodit-react";
-import React, { useRef } from 'react';
-import { ButtonEX, ButtonEXProps } from '../button';
-import { Section } from '../section';
-import { IconToSVG } from '../svg';
-
-//const logger = GetLogger("html-editor");
-
-const useStyles = makeStyles({
-    htmlDiv: {
-        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
-        padding: tokens.spacingHorizontalS,
-        minHeight: `100px`
-    }
-});
-
-interface IProps {
-    value?: string;
-    /** get notified as soon as user is out of the control */
-    onChange?: (value: string) => void;
-    /** add a save button and get the value once the user clicks save, close the editor after */
-    onSave?: (value: string) => void;
-    /** add a cancel button to close this editor */
-    onCancel?: () => void;
-    readonly?: boolean;
-    css?: string[];
-    /** render a smaller toolbar */
-    smallToolbar?: boolean;
-    /** show a div, click on it to render the editor */
-    editOnDemand?: boolean;
-
-    /** all designers */
-    kitchensink?: boolean;
-    speech?: boolean;
-    spellcheck?: boolean;
-    table?: boolean;
-    media?: boolean;
-    source?: boolean;
-    /**
-     * true: render the control in full screen
-     * button: render only a button that opens the editor in full screen
-     */
-    fullScreen?: boolean | ButtonEXProps;
-}
-type JoditExpanded = Jodit & {//& IViewBased<IViewOptions>
-    //value: string;
-    kwizInstance: {
-        props: IProps,
-        setShowFullScreen: (value: boolean) => void;
-    }
-};
-
-const saveIcon = IconToSVG(<Save16Regular title='Save' />);
-const cancelIcon = IconToSVG(<Dismiss16Regular title='Cancel' />);
-const maxIcon = IconToSVG(<ArrowMaximize16Regular title='Maximize' />);
-const minIcon = IconToSVG(<ArrowMinimize16Regular title='Minimize' />);
-export const HtmlEditor: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const classes = useStyles();
-    const [active, setActive] = React.useState(false);
-    const [showFullScreen, setShowFullScreen] = React.useState(false);
-
-
-    //quill react demos: https://codesandbox.io/examples/package/react-quill
-    const editorRef = useRef<JoditExpanded>(null);
-
-    const extraConfig = {
-        uploader: {
-            insertImageAsBase64URI: true,
-            toolbarStickyOffset: 30,
-        },
-        autofocus: props.editOnDemand || showFullScreen,
-    };
-
-    const fullScreenButton = isObject(props.fullScreen) ? props.fullScreen as ButtonEXProps : null;
-
-    const options = props.kitchensink ? {
-        speech: true,
-        spellcheck: true,
-        table: true,
-        media: true,
-        source: true,
-        fullScreen: true
-    } : props
-
-
-    Jodit.defaultOptions.controls.save = {
-        template: () => saveIcon,
-        exec: (view: JoditExpanded) => {
-            view.kwizInstance.props.onChange?.(view.value);
-            view.kwizInstance.props.onSave?.(view.value);
-            view.kwizInstance.setShowFullScreen(false);
-        }
-    };
-    Jodit.defaultOptions.controls.cancel = {
-        template: () => cancelIcon,
-        exec: (view: JoditExpanded) => {
-            view.kwizInstance.props.onCancel?.();
-            view.kwizInstance.setShowFullScreen(false);
-        }
-    };
-    Jodit.defaultOptions.controls.maximize = {
-        template: () => maxIcon,
-        exec: (view: JoditExpanded) => {
-            view.kwizInstance.props.onChange?.(view.value);//pass value from smaller editor to bigger one
-            view.kwizInstance.setShowFullScreen(true);
-        }
-    };
-    Jodit.defaultOptions.controls.minimize = {
-        template: () => minIcon,
-        exec: (view: JoditExpanded) => {
-            view.kwizInstance.props.onChange?.(view.value);
-            view.kwizInstance.setShowFullScreen(false);
-        }
-    };
-
-    const minimalToolbar = !showFullScreen && options.fullScreen;
-    const buttons = (minimalToolbar
-        ? `${props.onSave && 'save,'}${props.onCancel && 'cancel,'}maximize,bold,ul,ol`//inline, with full screen option - show very minimal toolbar
-        : `${props.onSave && 'save,'}${props.onCancel && 'cancel,'}${options.fullScreen && (showFullScreen
-            ? fullScreenButton ? 'save,' : 'minimize,'//when in full screen, if we don't have a small editor but just a button - change the minimize button to save&close button
-            : 'maximize,')}${(props.onSave || props.onCancel || options.fullScreen) && '|,'}bold,italic,underline,strikethrough,|,ul,ol,font,fontsize,paragraph,lineHeight,superscript,subscript,copyformat,brush,eraser,|,${options.media && 'image,video,'}${options.spellcheck && 'spellcheck,'}${options.speech && 'speechRecognize,'}hr,${options.table && 'table,'}link,indent,outdent,${options.source && '---,source,'}`)
-        .replace(/undefined/g, '');
-    const removeButtons: string[] = minimalToolbar
-        //some buttons must be explicitly removed
-        ? ["strikethrough", "italic", "eraser", "font", "fontsize", "paragraph", "lineHeight", "brush", "underline"]
-        : undefined;
-
-    const config = {
-        ...extraConfig,
-        readonly: props.readonly,
-        inline: true,
-        statusbar: false,
-        toolbarButtonSize: props.smallToolbar ? "xsmall" : "middle",
-        buttons, removeButtons,
-        toolbarAdaptive: !minimalToolbar,
-        // events: {
-        //     afterInit: (view: IViewBasedExpanded) => {
-        //         view.kwizInstance = {
-        //             props: props,
-        //             setShowFullScreen: setShowFullScreen
-        //         };
-        //     }
-        // }
-    };
-    const editorElement = <JoditEditor key={"the-editor"}
-        {...({
-            editorRef: (view: JoditExpanded) => {
-                //expand it for toolbar buttons
-                view.kwizInstance = {
-                    props: props,
-                    setShowFullScreen: setShowFullScreen
-                };
-                editorRef.current = view;
-            }
-        })}
-        value={props.value || ""}
-        config={{ ...config as any }}
-        onBlur={newContent => {
-            props.onChange?.(newContent);
-            setActive(false);
-        }} // preferred to use only this option to update the content for performance reasons
-    //onChange={newContent => {            }}
-    />;
-
-    return (showFullScreen
-        ? <Section fullscreen="portal">
-            {editorElement}
-        </Section>
-        : fullScreenButton
-            ? <ButtonEX {...fullScreenButton} onClick={() => {
-                setShowFullScreen(true);
-            }} />
-            : props.editOnDemand && !active
-                ? <div className={classes.htmlDiv} dangerouslySetInnerHTML={{ __html: props.value || "" }}
-                    tabIndex={0} onFocus={() => setActive(true)}
-                    onClick={() => setActive(true)} />
-                : editorElement
-    );
-}

package/src/controls/index.ts

@@ -1,33 +0,0 @@
-export * from './accordion';
-export * from './button';
-export * from './canvas/DrawPad';
-export * from './card';
-export * from './card-list';
-export * from './centered';
-export * from './ColorPickerDialog';
-export * from './date';
-export * from './diagram-picker';
-export * from './divider';
-export * from './dropdown';
-export * from './error-boundary';
-export * from './field-editor';
-export * from './file-upload';
-export * from './horizontal';
-export * from './html-editor/editor';
-export * from './input';
-export * from './kwizoverflow';
-export * from './list';
-export * from './loading';
-export * from './menu';
-export * from './merge-text';
-export * from './please-wait';
-export * from './progress-bar';
-export * from './prompt';
-export * from './qrcode';
-export * from './search';
-export * from './section';
-export * from './svg';
-export * from './toolbar';
-export * from './vertical';
-export * from './vertical-content';
-

package/src/controls/input.tsx

@@ -1,161 +0,0 @@
-import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, Link, makeStyles, mergeClasses, Textarea, TextareaOnChangeData, TextareaProps } from '@fluentui/react-components';
-import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber, pasteTextAtCursor, stopEvent } from '@kwiz/common';
-import React, { useCallback, useEffect } from 'react';
-import { useEffectOnlyOnMount, useRefWithState } from '../helpers';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useCommonStyles } from '../styles/styles';
-import { Horizontal } from './horizontal';
-import { MenuEx } from './menu';
-import { Section } from './section';
-import { Vertical } from './vertical';
-
-
-interface IProps extends InputProps {
-    /** fire on enter */
-    onOK?: () => void;
-    /** fire on escape */
-    onCancel?: () => void;
-    tokens?: { title: string; value: string; replace?: boolean; }[];
-    tokenMenuLabel?: string;
-}
-export const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const ctx = useKWIZFluentContext();
-    const input = <Input appearance={ctx.inputAppearance} {...props}
-        onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
-            ? e => {
-                if (e.key === "Enter") props.onOK?.();
-                if (e.key === "Escape") props.onCancel?.();
-            }
-            : undefined
-        }
-    />;
-    return (
-        isNotEmptyArray(props.tokens)
-            ? <Vertical nogap>
-                {input}
-                <Horizontal nogap>
-                    <Section main />
-                    <MenuEx trigger={<Link>{props.tokenMenuLabel || "tokens"}</Link>} items={props.tokens.map(token =>
-                    ({
-                        title: token.title, onClick: () => {
-                            let newValue = props.value || "";
-                            if (token.replace) {
-                                newValue = token.value;
-                            }
-                            else {
-                                if (isNullOrEmptyString(props.value))
-                                    newValue = token.value;
-                                else
-                                    newValue += ` ${token.value}`;
-                            }
-                            props.onChange(null, {
-                                value: newValue
-                            });
-                        }
-                    }))} />
-                </Horizontal>
-            </Vertical>
-            : input
-    );
-}
-
-const fullSize: GriffelStyle = {
-    width: '100% !important',
-    maxHeight: '100% !important'
-};
-const useStyles = makeStyles({
-    fullSizeTextArea: {
-        ...fullSize,
-        ['& > textarea']: fullSize
-    },
-})
-
-interface IPropsTextArea extends TextareaProps {
-    fullSize?: boolean;
-    /** recalc the height to grow to show all text */
-    growNoShrink?: boolean;
-    allowTab?: boolean;
-    /** fire on enter */
-    onOK?: () => void;
-    /** fire on escape */
-    onCancel?: () => void;
-    onValueChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: {
-        value: string;
-        elm: HTMLTextAreaElement;
-    }) => void;
-}
-export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>> = (props) => {
-    const cssNames = useStyles();
-    let css: string[] = [];
-
-    if (props.fullSize) css.push(cssNames.fullSizeTextArea);
-    const textAreaRef = useRefWithState<HTMLTextAreaElement>(null);
-    const recalcHeight = React.useCallback(() => {
-        if (textAreaRef.ref.current && props.growNoShrink) {
-            if (textAreaRef.ref.current.scrollHeight > textAreaRef.ref.current.clientHeight)
-                textAreaRef.ref.current.style.minHeight = textAreaRef.ref.current.scrollHeight + 'px';
-        }
-    }, useEffectOnlyOnMount);
-
-    useEffect(() => { recalcHeight(); }, [textAreaRef.value]);
-
-    const onChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: TextareaOnChangeData) => {
-        props.onValueChange?.(e, { value: d.value, elm: textAreaRef.ref.current });
-        recalcHeight();
-    }, [props.onChange]);
-
-    const needOnKeyDown = props.allowTab || isFunction(props.onOK) || isFunction(props.onCancel);
-
-    let style: React.CSSProperties = { height: '100%', ...props.style };
-
-    return (
-        <Textarea ref={textAreaRef.set} className={mergeClasses(...css)} {...props} style={style}
-            onKeyDown={needOnKeyDown ? (e) => {
-                if (props.allowTab && e.key === "Tab") {
-                    stopEvent(e);
-                    const textArea = e.target as HTMLTextAreaElement;
-                    pasteTextAtCursor(textArea, "\t");
-                    onChange(e, { value: textArea.value });
-                    return;
-                }
-                if (e.key === "Enter") props.onOK?.();
-                if (e.key === "Escape") props.onCancel?.();
-                props.onKeyDown?.(e);
-            } : props.onKeyDown}
-            onChange={(e, d) => {
-                props.onChange?.(e, d);
-                onChange(e, d);
-            }} />
-    );
-}
-
-
-interface INumberProps extends Omit<IProps, "value" | "onChange" | "defaultValue" | "inputMode"> {
-    defaultValue?: number;
-    onChange: (value: number) => void;
-    allowDecimals?: boolean;
-    /** if sent true - onChange will only be called when a valid non-empty value is being set */
-    required?: boolean;
-}
-export const InputNumberEx: React.FunctionComponent<React.PropsWithChildren<INumberProps>> = (props) => {
-    const commonStyles = useCommonStyles();
-    const [valueStr, setValueStr] = React.useState(isNumber(props.defaultValue) ? `${props.defaultValue}` : '');
-    const [isValid, setIsValid] = React.useState(true);
-    const onChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-        const newValue = data.value;
-        setValueStr(newValue);//update text box anyways
-        const asNumber = props.allowDecimals ? parseFloat(newValue) : parseInt(newValue, 10);
-        const isValid = props.required ? !isNullOrNaN(asNumber) : isNullOrUndefined(asNumber) || !isNaN(asNumber);
-        setIsValid(isValid);
-        props.onChange(isValid ? asNumber : null);
-    }, [props.allowDecimals, props.onChange, props.required]);
-
-    const passProps: IProps = { ...props, defaultValue: undefined, value: undefined, onChange: undefined };
-
-    return (
-        <Vertical nogap>
-            <InputEx inputMode={props.allowDecimals ? "decimal" : "numeric"} {...passProps} value={valueStr} onChange={onChange} />
-            {!isValid && <Label className={commonStyles.validationLabel}>this is not a valid value</Label>}
-        </Vertical>
-    );
-}

package/src/controls/kwizoverflow.tsx

@@ -1,107 +0,0 @@
-import {
-    Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem,
-    useIsOverflowItemVisible, useOverflowMenu
-} from "@fluentui/react-components";
-import { MoreHorizontalFilled } from "@fluentui/react-icons";
-import { isNumber } from '@kwiz/common';
-import { useKWIZFluentContext } from "../helpers/context-internal";
-
-interface IProps<ItemType> {
-    /** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
-    items: ItemType[];
-    getKey: (item: ItemType, index: number) => string;
-    getPriority?: (item: ItemType, index: number) => number;
-    renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
-    groupWrapper?: (children: React.ReactNode) => JSX.Element;
-    menuRef?: React.RefObject<HTMLButtonElement>;
-    menuWrapper?: (children: React.ReactNode) => JSX.Element;
-    menuTrigger?: (ref: React.RefObject<HTMLButtonElement>, overflowCount: number) => JSX.Element;
-    className?: string;
-}
-const OverflowMenu = <ItemType,>(props: IProps<ItemType>) => {
-    const ctx = useKWIZFluentContext();
-
-    const { ref, isOverflowing, overflowCount } =
-        useOverflowMenu<HTMLButtonElement>();
-
-    if (!isOverflowing) {
-        return null;
-    }
-
-    let menu = <Menu mountNode={ctx.mountNode}>
-        <MenuTrigger disableButtonEnhancement>
-            {props.menuTrigger
-                ? props.menuTrigger(props.menuRef || ref, overflowCount)
-                : <MenuButton
-                    icon={<MoreHorizontalFilled />}
-                    ref={props.menuRef || ref}
-                    aria-label="More items"
-                    appearance="subtle"
-                />}
-        </MenuTrigger>
-        <MenuPopover>
-            <MenuList>
-                {props.items.map((item, index) => (
-                    <OverflowMenuItem key={props.getKey(item, index)} {...props} item={item} index={index} />
-                ))}
-            </MenuList>
-        </MenuPopover>
-    </Menu>;
-
-    return (
-        props.menuWrapper
-            ? props.menuWrapper(menu)
-            : menu
-    );
-}
-
-const OverflowMenuItem = <ItemType,>(props: IProps<ItemType> & { item: ItemType, index: number }) => {
-    const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
-
-    if (isVisible) {
-        return null;
-    }
-
-    return (
-        <MenuItem key={props.getKey(props.item, props.index)}>
-            {props.renderItem(props.item, props.index, true)}
-        </MenuItem>
-    );
-};
-export const KWIZOverflow = <ItemType,>(props: IProps<ItemType>) => {
-    let content: JSX.Element[] = [];
-    let addMenu = () => {
-        if (menuIndex >= 0)
-            content.splice(menuIndex, 0, <OverflowMenu key="overflow_menu" {...props} />);
-        else
-            content.push(<OverflowMenu key="overflow_menu" {...props} />);
-    };
-
-    let menuIndex = -1;
-
-    props.items.forEach((item, index) => {
-        //add the menu before the first item with priority
-        let priority = props.getPriority ? props.getPriority(item, index) : undefined;
-        if (isNumber(priority) && priority > 0)
-            menuIndex = index;
-
-        content.push(<OverflowItem key={props.getKey(item, index)} id={props.getKey(item, index)}
-            priority={priority}>
-            {props.renderItem(item, index)}
-        </OverflowItem>);
-    });
-
-    addMenu();
-
-    return (
-        <Overflow minimumVisible={2} padding={60} key={`overflow_${props.items.length}`}>
-            <div style={{ overflow: "hidden" }} className={props.className}>
-                {
-                    props.groupWrapper
-                        ? props.groupWrapper(content)
-                        : content
-                }
-            </div>
-        </Overflow>
-    )
-};