@kwiz/fluentui 1.0.16 → 1.0.19

package/src/controls/list.tsx

@@ -1,118 +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>
-    );
+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

@@ -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/please-wait.tsx

@@ -1,33 +1,33 @@
-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;
-    label?: string;
-}
-export const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const field = <Field validationMessage={props.label || "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>
+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;
+    label?: string;
+}
+export const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const field = <Field validationMessage={props.label || "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

@@ -1,97 +1,97 @@
-import { Dialog, DialogActions, DialogBody, DialogContent, DialogModalType, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
-import { DismissRegular } from '@fluentui/react-icons';
-import { isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-import { useKeyDown } from '../helpers/hooks';
-import { ButtonEX, ButtonEXProps, ButtonEXSecondary } from './button';
-
-export interface IPrompterProps {
-    hideOk?: boolean;
-    hideCancel?: boolean;
-    showCancelInTitle?: boolean;
-    /** return false to prevent closing the dialog. */
-    onOK?: () => Promise<void> | void;
-    onCancel?: () => void;
-    okButtonText?: string;
-    cancelButtonText?: string;
-    title?: string | JSX.Element;
-    okButtonProps?: Partial<ButtonEXProps>;
-    cancelButtonProps?: Partial<ButtonEXProps>;
-    children?: JSX.Element;
-
-    /** allow to epand the dialog to be wider */
-    maxWidth?: number | string;
-
-    /** additional button actions at the bottom */
-    actions?: JSX.Element[];
-
-    /** dialog title actions */
-    titleActions?: JSX.Element[];
-    /** specify a specific mount node for this dialog */
-    mountNode?: HTMLElement | null | {
-        element?: HTMLElement | null;
-        className?: string;
-    }
-
-    modalType?: DialogModalType;
-    /** do not fire ok/cancel on esc/enter press */
-    disableKeyboardActions?: boolean;
-}
-export const Prompter = React.forwardRef<HTMLDivElement, (IPrompterProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
-    disableKeyboardActions.current = props.disableKeyboardActions;
-
-    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'
-    };
-
-    useKeyDown({
-        onEnter: () => !disableKeyboardActions.current && props.onOK(),
-        onEscape: () => !disableKeyboardActions.current && props.onCancel(),
-    });
-
-    const actions: JSX.Element[] = [];
-    if (!props.hideOk) actions.push(<DialogTrigger key='ok' disableButtonEnhancement>
-        <ButtonEXSecondary {...okProps} />
-    </DialogTrigger>);
-    if (!props.hideCancel) actions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
-        <ButtonEXSecondary {...cancelProps} />
-    </DialogTrigger>);
-    if (isNotEmptyArray(props.actions))
-        actions.push(...props.actions);
-
-    const titleActions: JSX.Element[] = props.titleActions ? [...props.titleActions] : [];
-    if (props.showCancelInTitle)
-        titleActions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
-            <ButtonEX {...cancelProps} icon={<DismissRegular />} />
-        </DialogTrigger>);
-
-
-    return (
-        <Dialog open modalType={props.modalType}>
-            <DialogSurface mountNode={props.mountNode || ctx.mountNode}
-                style={!isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined}>
-                <DialogBody>
-                    {(!isNullOrEmptyString(props.title) || isNotEmptyArray(titleActions)) && <DialogTitle
-                        action={titleActions}
-                    >{props.title}</DialogTitle>}
-                    <DialogContent ref={ref}>
-                        {props.children}
-                    </DialogContent>
-                    {isNotEmptyArray(actions) && <DialogActions fluid={actions.length > 2}>
-                        {actions}
-                    </DialogActions>}
-                </DialogBody>
-            </DialogSurface>
-        </Dialog>
-    );
+import { Dialog, DialogActions, DialogBody, DialogContent, DialogModalType, DialogSurface, DialogTitle, DialogTrigger } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+import { isNotEmptyArray, isNullOrEmptyString } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context';
+import { useKeyDown } from '../helpers/hooks';
+import { ButtonEX, ButtonEXProps, ButtonEXSecondary } from './button';
+
+export interface IPrompterProps {
+    hideOk?: boolean;
+    hideCancel?: boolean;
+    showCancelInTitle?: boolean;
+    /** return false to prevent closing the dialog. */
+    onOK?: () => Promise<void> | void;
+    onCancel?: () => void;
+    okButtonText?: string;
+    cancelButtonText?: string;
+    title?: string | JSX.Element;
+    okButtonProps?: Partial<ButtonEXProps>;
+    cancelButtonProps?: Partial<ButtonEXProps>;
+    children?: JSX.Element;
+
+    /** allow to epand the dialog to be wider */
+    maxWidth?: number | string;
+
+    /** additional button actions at the bottom */
+    actions?: JSX.Element[];
+
+    /** dialog title actions */
+    titleActions?: JSX.Element[];
+    /** specify a specific mount node for this dialog */
+    mountNode?: HTMLElement | null | {
+        element?: HTMLElement | null;
+        className?: string;
+    }
+
+    modalType?: DialogModalType;
+    /** do not fire ok/cancel on esc/enter press */
+    disableKeyboardActions?: boolean;
+}
+export const Prompter = React.forwardRef<HTMLDivElement, (IPrompterProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
+    disableKeyboardActions.current = props.disableKeyboardActions;
+
+    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'
+    };
+
+    useKeyDown({
+        onEnter: () => !disableKeyboardActions.current && props.onOK(),
+        onEscape: () => !disableKeyboardActions.current && props.onCancel(),
+    });
+
+    const actions: JSX.Element[] = [];
+    if (!props.hideOk) actions.push(<DialogTrigger key='ok' disableButtonEnhancement>
+        <ButtonEXSecondary {...okProps} />
+    </DialogTrigger>);
+    if (!props.hideCancel) actions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
+        <ButtonEXSecondary {...cancelProps} />
+    </DialogTrigger>);
+    if (isNotEmptyArray(props.actions))
+        actions.push(...props.actions);
+
+    const titleActions: JSX.Element[] = props.titleActions ? [...props.titleActions] : [];
+    if (props.showCancelInTitle)
+        titleActions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
+            <ButtonEX {...cancelProps} icon={<DismissRegular />} />
+        </DialogTrigger>);
+
+
+    return (
+        <Dialog open modalType={props.modalType}>
+            <DialogSurface mountNode={props.mountNode || ctx.mountNode}
+                style={!isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined}>
+                <DialogBody>
+                    {(!isNullOrEmptyString(props.title) || isNotEmptyArray(titleActions)) && <DialogTitle
+                        action={titleActions}
+                    >{props.title}</DialogTitle>}
+                    <DialogContent ref={ref}>
+                        {props.children}
+                    </DialogContent>
+                    {isNotEmptyArray(actions) && <DialogActions fluid={actions.length > 2}>
+                        {actions}
+                    </DialogActions>}
+                </DialogBody>
+            </DialogSurface>
+        </Dialog>
+    );
 });

package/src/controls/search.tsx

@@ -1,66 +1,66 @@
-import { Input, InputProps, makeStyles } from '@fluentui/react-components';
-import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
-import { debounce, isFunction, isNullOrEmptyString } from '@kwiz/common';
-import React, { useState } from 'react';
-import { GetLogger } from '../_modules/config';
-import { useStateEX } from '../helpers/hooks';
-import { mixins } from '../styles/styles';
-const logger = GetLogger("Search");
-
-const useStyles = makeStyles({
-    main: mixins.main,
-    clickable: mixins.clickable,
-})
-
-interface IProps extends InputProps {
-    main?: boolean;
-    delay?: number;
-    /** if changing the value in the caller - change this prop to reset */
-    resetValue?: string;
-    onChangeDeferred?: (newValue: string) => void;
-    onChangeSync?: (newValue: string) => void;
-}
-
-/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
-export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const cssNames = useStyles();
-
-    const [resetKey, setResetKey] = useState(1);
-
-    let delay = props.delay || 1;
-
-    //cannot call debounce every render, since it won't be the same debounced instance...
-    var notifyParent = React.useMemo(() => debounce(v => {
-        logger.log(`Set: ${v}`);
-        props.onChangeDeferred(v);
-    }, delay * 1000), [delay]);
-
-    let [value, setValue] = useStateEX(props.value, {
-        onChange: newValue => {
-            if (isFunction(props.onChangeSync)) props.onChangeSync(newValue as string);
-            if (isFunction(props.onChangeDeferred)) notifyParent(newValue);
-            return newValue;
-        }
-    });
-
-    //once props change, reset this control value to match
-    React.useEffect(() => {
-        setValue(props.resetValue);
-        //todo: bug: setting value does not sync into the text box
-        setResetKey(resetKey + 1)
-    }, [props.resetValue]);
-
-    return (
-        <Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
-            className={props.main ? cssNames.main : undefined}
-            contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular />}
-            contentAfter={isNullOrEmptyString(value)
-                ? undefined
-                : <DismissRegular className={cssNames.clickable} onClick={() => {
-                    setValue("");
-                    //todo: bug: setting value does not sync into the text box
-                    setResetKey(resetKey + 1)
-                }} />
-            } />
-    );
+import { Input, InputProps, makeStyles } from '@fluentui/react-components';
+import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
+import { debounce, isFunction, isNullOrEmptyString } from '@kwiz/common';
+import React, { useState } from 'react';
+import { GetLogger } from '../_modules/config';
+import { useStateEX } from '../helpers/hooks';
+import { mixins } from '../styles/styles';
+const logger = GetLogger("Search");
+
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+})
+
+interface IProps extends InputProps {
+    main?: boolean;
+    delay?: number;
+    /** if changing the value in the caller - change this prop to reset */
+    resetValue?: string;
+    onChangeDeferred?: (newValue: string) => void;
+    onChangeSync?: (newValue: string) => void;
+}
+
+/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
+export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const cssNames = useStyles();
+
+    const [resetKey, setResetKey] = useState(1);
+
+    let delay = props.delay || 1;
+
+    //cannot call debounce every render, since it won't be the same debounced instance...
+    var notifyParent = React.useMemo(() => debounce(v => {
+        logger.log(`Set: ${v}`);
+        props.onChangeDeferred(v);
+    }, delay * 1000), [delay]);
+
+    let [value, setValue] = useStateEX(props.value, {
+        onChange: newValue => {
+            if (isFunction(props.onChangeSync)) props.onChangeSync(newValue as string);
+            if (isFunction(props.onChangeDeferred)) notifyParent(newValue);
+            return newValue;
+        }
+    });
+
+    //once props change, reset this control value to match
+    React.useEffect(() => {
+        setValue(props.resetValue);
+        //todo: bug: setting value does not sync into the text box
+        setResetKey(resetKey + 1)
+    }, [props.resetValue]);
+
+    return (
+        <Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
+            className={props.main ? cssNames.main : undefined}
+            contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular />}
+            contentAfter={isNullOrEmptyString(value)
+                ? undefined
+                : <DismissRegular className={cssNames.clickable} onClick={() => {
+                    setValue("");
+                    //todo: bug: setting value does not sync into the text box
+                    setResetKey(resetKey + 1)
+                }} />
+            } />
+    );
 }