@kwiz/fluentui 1.0.0

package/src/controls/button.tsx

@@ -0,0 +1,154 @@
+import { Button, ButtonProps, CompoundButton, compoundButtonClassNames, CompoundButtonProps, makeStyles, mergeClasses, tokens, Tooltip } from '@fluentui/react-components';
+import { capitalizeFirstLetter, isFunction, isNullOrEmptyString, isNullOrUndefined, isString, PushNoDuplicate } from '@kwiz/common';
+import React from 'react';
+import { useCommonStyles, widthMedium } from '../styles/styles';
+
+interface IProps {
+    title: string;//required
+    showTitleWithIcon?: boolean;
+    dontStretch?: boolean;
+    hideOnPrint?: boolean;
+    dontCenterText?: boolean;
+    hoverIcon?: JSX.Element;
+    hoverTitle?: string;
+}
+interface IPropsCompound extends IProps {
+    width?: string | number;
+}
+
+export type ButtonEXProps = IProps & ButtonProps;
+export type CompoundButtonEXProps = IPropsCompound & CompoundButtonProps;
+
+const useStyles = makeStyles({
+    buttonNoCenter: {
+        justifyContent: 'flex-start',
+        '& *': {
+            /* a button with no center that has content of a vertical, or multiple labels */
+            alignItems: 'flex-start'
+        }
+    },
+    danger: {
+        backgroundColor: tokens.colorStatusDangerBackground1,
+        color: tokens.colorStatusWarningForeground2,
+
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorStatusWarningForeground1
+        }
+    },
+    success: {
+        color: tokens.colorStatusSuccessForeground1,
+
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorStatusSuccessForeground1,
+        }
+    },
+    primarySubtle: {
+        color: tokens.colorBrandForeground1,
+
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorBrandForeground1,
+        }
+    },
+})
+
+
+export const ButtonEX = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const [hover, setHover] = React.useState(false);
+    const trackHover = !isNullOrEmptyString(props.hoverTitle) || !isNullOrUndefined(props.hoverIcon);
+
+    const title = hover && !isNullOrEmptyString(props.hoverTitle) ? props.hoverTitle
+        : props.title || props['aria-label'];
+    const icon = hover && !isNullOrUndefined(props.hoverIcon) ? props.hoverIcon : props.icon;
+    let hasIcon = !isNullOrUndefined(icon);
+    let hasText = props.children || !hasIcon || (hasIcon && props.showTitleWithIcon === true);
+
+    const commonCssNames = useCommonStyles();
+    const cssNames = useStyles();
+    let css: string[] = [];
+
+    if (props.hideOnPrint) PushNoDuplicate(css, commonCssNames.printHide);
+    if (props.dontCenterText) PushNoDuplicate(css, cssNames.buttonNoCenter);
+
+    if (!isNullOrEmptyString(props.className)) css.push(...props.className.split(' '));
+
+    let btn = <Button ref={ref} appearance='subtle' {...props} className={mergeClasses(...css)}
+        aria-label={title} title={undefined} icon={icon}
+        onMouseEnter={trackHover ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            setHover(true);
+            if (isFunction(props.onMouseEnter))
+                props.onMouseEnter(e as any);
+        } : props.onMouseEnter as any}
+        onMouseLeave={trackHover ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            setHover(false);
+            if (isFunction(props.onMouseLeave))
+                props.onMouseLeave(e as any);
+        } : props.onMouseLeave as any}
+    >{props.children ||
+        //no icon? will show the title by default
+        (hasText && capitalizeFirstLetter(title))}</Button>;
+    if (!hasText || props.children)//icon only or when content is different than props.title
+        btn = <Tooltip showDelay={1000} relationship='label' withArrow appearance='inverted' content={title}>
+            {btn}
+        </Tooltip>;
+
+    return (
+        props.dontStretch ? <div>{btn}</div> : btn
+
+    );
+});
+export const ButtonEXSecondary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    return (
+        <ButtonEX ref={ref} appearance='secondary' shape='circular' {...props}></ButtonEX>
+    );
+});
+export const ButtonEXPrimary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    return (
+        <ButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</ButtonEXSecondary>
+    );
+});
+export const ButtonEXDanger = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <ButtonEXSecondary ref={ref} className={props.disabled ? undefined : cssNames.danger} {...props}>{props.children}</ButtonEXSecondary>
+    );
+});
+export const ButtonEXSuccess = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <ButtonEX ref={ref} className={cssNames.success} {...props}>{props.children}</ButtonEX>
+    );
+});
+export const ButtonEXPrimarySubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.primarySubtle} {...props}>{props.children}</ButtonEX>
+    );
+});
+
+export const CompoundButtonEX = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
+    let title = props.title || props['aria-label'];
+    let tooltip = isString(props.secondaryContent) ? props.secondaryContent : title;
+    let max = typeof (props.width) === "undefined" ? widthMedium : props.width;
+    return (
+        <Tooltip showDelay={1000} relationship='label' withArrow appearance='inverted' content={tooltip}>
+            <CompoundButton ref={ref} appearance='subtle' style={{ justifyContent: "flex-start", maxWidth: max }} {...props} aria-label={tooltip} title={undefined}>
+                {props.children || capitalizeFirstLetter(title)}</CompoundButton>
+        </Tooltip>
+    );
+});
+export const CompoundButtonEXSecondary = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
+    return (
+        <CompoundButtonEX ref={ref} appearance='secondary' shape='circular' {...props}></CompoundButtonEX>
+    );
+});
+export const CompoundButtonEXPrimary = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
+    return (
+        <CompoundButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</CompoundButtonEXSecondary>
+    );
+});
+export const CompoundButtonEXDanger = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <CompoundButtonEXSecondary ref={ref} className={cssNames.danger} {...props}>{props.children}</CompoundButtonEXSecondary>
+    );
+});

package/src/controls/centered.tsx

@@ -0,0 +1,23 @@
+import { makeStyles } from '@fluentui/react-components';
+import React from 'react';
+import { Horizontal } from './horizontal';
+import { Vertical } from './vertical';
+
+const useStyles = makeStyles({
+    center: {
+        justifyContent: 'center'
+    },
+})
+
+interface IProps {
+}
+export const Centered: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const cssNames = useStyles();
+    return (
+        <Vertical main css={[cssNames.center]}>
+            <Horizontal css={[cssNames.center]}>
+                {props.children}
+            </Horizontal>
+        </Vertical>
+    );
+}

package/src/controls/dropdown.tsx

@@ -0,0 +1,28 @@
+import { Dropdown, Option } from '@fluentui/react-components';
+import { filterEmptyEntries, firstOrNull } from '@kwiz/common';
+import React from 'react';
+
+interface IProps<dataType, keyType extends string = string> {
+    selected: keyType[];
+    items: { key: keyType, value: string, data?: dataType, option?: JSX.Element; }[];
+    onSelect: (item: { key: keyType, value: string, data?: dataType }) => void;
+    placeholder?: string;
+}
+
+function $DropdownEX<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>) {
+    let text = filterEmptyEntries(props.selected.map(s => {
+        let v = firstOrNull(props.items, i => i.key === s);
+        return v ? v.value : ''
+    })).join(', ');
+    return (
+        <Dropdown placeholder={props.placeholder} ref={ref} appearance='underline' selectedOptions={props.selected} value={text} >
+            {props.items.map(i => <Option key={i.key} value={i.key}
+                onClick={() => { props.onSelect(i); }}
+                text={i.value}
+            >{i.option ? i.option : i.value}</Option>)}
+        </Dropdown>
+
+    );
+}
+
+export const DropdownEX = React.forwardRef($DropdownEX);

package/src/controls/error-boundary.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { GetLogger } from "../_modules/config";
+
+const logger = GetLogger("ErrorBoundary");
+
+interface iProps {
+    errorComponent?: JSX.Element,
+    /** If changeMarker changes, it will check the error again */
+    changeMarker: string | number
+}
+interface iState { hasError: boolean; marker: string | number; }
+export class ErrorBoundary extends React.Component<React.PropsWithChildren<iProps>, iState> {
+    constructor(props: iProps) {
+        super(props);
+        this.state = { hasError: false, marker: props.changeMarker };
+    }
+
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    static getDerivedStateFromProps(props: iProps, state: iState) {
+        if (props.changeMarker !== state.marker)
+            return { hasError: false, marker: props.changeMarker };
+        else return null;
+    }
+
+    componentDidCatch(error, errorInfo) {
+        // You can also log the error to an error reporting service
+        logger.error(error);
+        logger.error(errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return this.props.errorComponent || <h1>Something went wrong.</h1>;
+        }
+
+        return this.props.children;
+    }
+}

package/src/controls/field-editor.tsx

@@ -0,0 +1,42 @@
+import { Field, mergeClasses, Textarea } from '@fluentui/react-components';
+import { isNullOrUndefined } from '@kwiz/common';
+import React from 'react';
+import { GetLogger } from '../_modules/config';
+import { InputEx } from './input';
+
+const logger = GetLogger('FieldEditor');
+
+interface IProps {
+    required?: boolean;
+    error?: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    css: string[];
+    label: string;
+    description?: string;
+    type?: "text" | "multiline"
+}
+export const FieldEditor: React.FunctionComponent<IProps> = (props) => {
+    if (isNullOrUndefined(props.value)) {
+        logger.error(`${props.label}: value should not be null`);
+    }
+    return (
+        <Field required={props.required}
+            validationMessage={props.error || props.description}
+            validationState={props.error ? "error" : "none"}>
+            {props.type === "multiline"
+                ? <Textarea className={props.css && mergeClasses(...props.css)}
+                    required={props.required}
+                    placeholder={props.label}
+                    value={props.value || ""}
+                    onChange={(e, data) => props.onChange(data.value)}
+                />
+                : <InputEx className={props.css && mergeClasses(...props.css)}
+                    required={props.required}
+                    appearance='underline'
+                    placeholder={props.label}
+                    value={props.value || ""}
+                    onChange={(e, data) => props.onChange(data.value)} />}
+        </Field>
+    );
+}

package/src/controls/file-upload.tsx

@@ -0,0 +1,68 @@
+import { ButtonProps } from "@fluentui/react-components";
+import { isFunction, isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
+import * as React from "react";
+import { ButtonEX, CompoundButtonEXSecondary } from "./button";
+
+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 | FileList) => void;
+    /** only works for single file, reads it as base64 */
+    asBase64?: (base64: string) => void;
+    buttonProps?: ButtonProps;
+    disabled?: boolean;
+}
+
+export const FileUpload = React.forwardRef<HTMLButtonElement, (iProps)>((props, ref) => {
+    const hiddenFileInput = React.useRef(null);
+    const isMulti = props.allowMultiple === true;
+    return <>
+        {isNullOrEmptyString(props.secondaryContent)
+            ? <ButtonEX ref={ref} {...(props.buttonProps || {})} icon={props.icon} showTitleWithIcon={props.showTitleWithIcon} onClick={() => {
+                hiddenFileInput.current.value = "";
+                hiddenFileInput.current.click();
+            }} title={props.title}
+                disabled={props.disabled}
+            />
+            : <CompoundButtonEXSecondary ref={ref} {...(props.buttonProps || {})} icon={props.icon}
+                secondaryContent={props.secondaryContent}
+                onClick={() => {
+                    hiddenFileInput.current.value = "";
+                    hiddenFileInput.current.click();
+                }} title={props.title}
+                disabled={props.disabled}
+            />}
+        <input type="file" ref={hiddenFileInput} style={{ display: "none" }} multiple={isMulti}
+            accept={isNotEmptyArray(props.limitFileTypes) ? props.limitFileTypes.map(ft => `.${ft}`).join() : undefined}
+            onChange={(e) => {
+                if (e.target.files && e.target.files.length > 0) {
+                    if (isMulti) {
+                        if (isFunction(props.onChange)) {
+                            props.onChange(e.target.files);
+                        }
+                    }
+                    else {
+                        const fileUploaded = e.target.files && e.target.files[0];
+                        if (isFunction(props.onChange)) {
+                            props.onChange(fileUploaded);
+                        }
+                        if (isFunction(props.asBase64) && fileUploaded) {
+                            const reader = new FileReader();
+                            reader.onloadend = () => {
+                                console.log(reader.result);
+                                if (!isNullOrEmptyString(reader.result))
+                                    props.asBase64(reader.result as string);
+                            };
+                            reader.readAsDataURL(fileUploaded);
+                        }
+                    }
+                }
+            }}
+        />
+    </>;
+});

package/src/controls/horizontal.tsx

@@ -0,0 +1,35 @@
+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
+})
+
+interface IProps extends ISectionProps {
+    wrap?: boolean;
+    nogap?: boolean;
+}
+export const Horizontal: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    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 (isNotEmptyArray(props.css)) css.push(...props.css);
+
+    return (
+        <Section {...props} css={css} />
+    );
+}

package/src/controls/input.tsx

@@ -0,0 +1,59 @@
+import { GriffelStyle, Input, InputProps, makeStyles, mergeClasses, Textarea, TextareaProps } from '@fluentui/react-components';
+import { isFunction } from '@kwiz/common';
+import React from 'react';
+
+
+interface IProps extends InputProps {
+    onOK?: () => void;
+    onCancel?: () => void;
+}
+export const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    return (
+        <Input appearance='underline' {...props}
+            onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
+                ? e => {
+                    if (isFunction(props.onOK) && e.key === "Enter") props.onOK();
+                    else if (isFunction(props.onCancel) && e.key === "Escape") props.onCancel();
+                }
+                : undefined
+            }
+        />
+    );
+}
+
+const fullSize: GriffelStyle = {
+    width: '100% !important',
+    maxHeight: '100% !important'
+};
+const useStyles = makeStyles({
+    fullSizeTextArea: {
+        ...fullSize,
+        ['& > textarea']: fullSize
+    },
+})
+
+interface IPropsTextArea extends TextareaProps {
+    fullSize?: boolean;
+    growNoShrink?: boolean;
+}
+export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>> = (props) => {
+    const cssNames = useStyles();
+    let css: string[] = [];
+
+    if (props.fullSize) css.push(cssNames.fullSizeTextArea);
+    const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
+    const recalcHeight = React.useCallback(() => {
+        if (textAreaRef.current && props.growNoShrink) {
+            if (textAreaRef.current.scrollHeight > textAreaRef.current.clientHeight)
+                textAreaRef.current.style.minHeight = textAreaRef.current.scrollHeight + 'px';
+        }
+    }, [textAreaRef]);
+
+    let style: React.CSSProperties = { height: '100%', ...props.style };
+    return (
+        <Textarea ref={textAreaRef} className={mergeClasses(...css)} {...props} style={style} onChange={(e, d) => {
+            if (props.onChange) props.onChange(e, d);
+            recalcHeight();
+        }} />
+    );
+}

package/src/controls/list.tsx

@@ -0,0 +1,118 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
+import React from 'react';
+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 cssNames = useStyles();
+
+    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('${props.dark ? 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

@@ -0,0 +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>
+    );
+}

package/src/controls/please-wait.tsx

@@ -0,0 +1,32 @@
+import { Field, ProgressBar } from '@fluentui/react-components';
+import { isFunction } from '@kwiz/common';
+import React from 'react';
+import { IPrompterProps, Prompter } from './prompt';
+
+interface IProps {
+    step?: number; max?: number;
+    /** do not wrap in a dialog */
+    contentOnly?: boolean;
+    cancelText?: string;
+    onCancel?: () => void;
+}
+export const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const field = <Field validationMessage="please wait..." validationState="none">
+        <ProgressBar value={props.step} max={props.max} />
+    </Field>;
+    return (props.contentOnly
+        ? field
+        : <Prompter hideOk
+            hideCancel={!isFunction(props.onCancel)}
+            cancelButtonText={props.cancelText || 'cancel'}
+            onCancel={props.onCancel}>{field}</Prompter>
+    );
+}
+
+export const PleaseWaitPrompt = (props: { message: string; step?: number; max?: number; }): IPrompterProps => ({
+    //title: 'please wait...',
+    hideOk: true, hideCancel: true,
+    children: <Field validationMessage={props.message} validationState="none">
+        <ProgressBar value={props.step} max={props.max} />
+    </Field>
+});

package/src/controls/prompt.tsx

@@ -0,0 +1,59 @@
+import { Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
+import { isNullOrEmptyString } from '@kwiz/common';
+import React from 'react';
+import { ButtonEXProps, ButtonEXSecondary } from './button';
+
+export interface IPrompterProps {
+    hideOk?: boolean;
+    hideCancel?: boolean;
+    /** return false to prevent closing the dialog. */
+    onOK?: () => Promise<void> | void;
+    onCancel?: () => void;
+    okButtonText?: string;
+    cancelButtonText?: string;
+    title?: string;
+    okButtonProps?: Partial<ButtonEXProps>;
+    cancelButtonProps?: Partial<ButtonEXProps>;
+    children?: JSX.Element;
+}
+export const Prompter: React.FunctionComponent<React.PropsWithChildren<IPrompterProps>> = (props) => {
+    let okProps: ButtonEXProps = {
+        ...(props.okButtonProps as any || {}),
+        onClick: () => props.onOK(),
+        title: props.okButtonText || 'yes'
+    };
+    let cancelProps: ButtonEXProps = {
+        ...(props.cancelButtonProps as any || {}),
+        onClick: () => props.onCancel(),
+        title: props.cancelButtonText || 'no'
+    };
+    React.useEffect(() => {
+        let handler = (e: KeyboardEvent) => {
+            if (e.key === "Enter") props.onOK();
+            else if (e.key === "Escape") props.onCancel();
+
+        };
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    });
+    return (
+        <Dialog open>
+            <DialogSurface>
+                {!isNullOrEmptyString(props.title) && <DialogTitle>{props.title}</DialogTitle>}
+                <DialogBody>
+                    <DialogContent>
+                        {props.children}
+                    </DialogContent>
+                    <DialogActions>
+                        {props.hideOk ? undefined : <DialogTrigger disableButtonEnhancement>
+                            <ButtonEXSecondary {...okProps} />
+                        </DialogTrigger>}
+                        {props.hideCancel ? undefined : <DialogTrigger disableButtonEnhancement>
+                            <ButtonEXSecondary {...cancelProps} />
+                        </DialogTrigger>}
+                    </DialogActions>
+                </DialogBody>
+            </DialogSurface>
+        </Dialog>
+    );
+}