@kwiz/fluentui 1.0.16 → 1.0.19

package/src/controls/button.tsx

@@ -1,170 +1,170 @@
-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 { useKWIZFluentContext } from '../helpers/context';
-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,
-        }
-    },
-    dangerSubtle: {
-        color: tokens.colorStatusWarningForeground2,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorStatusWarningForeground1
-        }
-    }
-})
-
-
-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) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <ButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...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 ButtonEXDangerSubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.dangerSubtle} {...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) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <CompoundButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...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>
-    );
+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 { useKWIZFluentContext } from '../helpers/context';
+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,
+        }
+    },
+    dangerSubtle: {
+        color: tokens.colorStatusWarningForeground2,
+
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorStatusWarningForeground1
+        }
+    }
+})
+
+
+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) => {
+    const ctx = useKWIZFluentContext();
+    return (
+        <ButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...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 ButtonEXDangerSubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.dangerSubtle} {...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) => {
+    const ctx = useKWIZFluentContext();
+    return (
+        <CompoundButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...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

@@ -1,23 +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>
-    );
+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/date.tsx

@@ -1,40 +1,40 @@
-import { DatePicker, DatePickerProps } from '@fluentui/react-datepicker-compat';
-import { CalendarCancelRegular } from '@fluentui/react-icons';
-import { isDate, isFunction, isNullOrEmptyString } from '@kwiz/common';
-import * as React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-
-
-interface IProps extends DatePickerProps {
-    onOK?: () => void;
-    onCancel?: () => void;
-}
-export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const ctx = useKWIZFluentContext();
-    const [showClear, setShowClear] = React.useState(isDate(props.value));
-    const reset = React.useCallback(() => {
-        setShowClear(false);
-        if (isFunction(props.onSelectDate)) props.onSelectDate(undefined);
-    }, [showClear]);
-
-    return (
-        <DatePicker appearance={ctx.inputAppearance} mountNode={ctx.mountNode} {...props}
-            onSelectDate={(date) => {
-                setShowClear(isDate(date));
-                if (isFunction(props.onSelectDate)) props.onSelectDate(date);
-            }}
-            onChange={(e, data) => {
-                setShowClear(!isNullOrEmptyString(data.value));
-                if (isFunction(props.onChange)) props.onChange(e, data);
-            }}
-            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
-            }
-            contentBefore={showClear && <CalendarCancelRegular title='Clear' onClick={() => reset()} />}
-        />
-    );
+import { DatePicker, DatePickerProps } from '@fluentui/react-datepicker-compat';
+import { CalendarCancelRegular } from '@fluentui/react-icons';
+import { isDate, isFunction, isNullOrEmptyString } from '@kwiz/common';
+import * as React from 'react';
+import { useKWIZFluentContext } from '../helpers/context';
+
+
+interface IProps extends DatePickerProps {
+    onOK?: () => void;
+    onCancel?: () => void;
+}
+export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const ctx = useKWIZFluentContext();
+    const [showClear, setShowClear] = React.useState(isDate(props.value));
+    const reset = React.useCallback(() => {
+        setShowClear(false);
+        if (isFunction(props.onSelectDate)) props.onSelectDate(undefined);
+    }, [showClear]);
+
+    return (
+        <DatePicker appearance={ctx.inputAppearance} mountNode={ctx.mountNode} {...props}
+            onSelectDate={(date) => {
+                setShowClear(isDate(date));
+                if (isFunction(props.onSelectDate)) props.onSelectDate(date);
+            }}
+            onChange={(e, data) => {
+                setShowClear(!isNullOrEmptyString(data.value));
+                if (isFunction(props.onChange)) props.onChange(e, data);
+            }}
+            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
+            }
+            contentBefore={showClear && <CalendarCancelRegular title='Clear' onClick={() => reset()} />}
+        />
+    );
 }

package/src/controls/dropdown.tsx

@@ -1,52 +1,52 @@
-import { Dropdown, DropdownProps, Option } from '@fluentui/react-components';
-import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context';
-
-type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
-
-interface IProps<dataType, keyType extends string = string> extends ForwardProps {
-    required?: boolean;
-    selected: keyType | keyType[];
-    items: {
-        key: keyType, value: string, data?: dataType,
-        /** display complex controls in the drop down */
-        option?: JSX.Element;
-    }[];
-    onSelect: (
-        /** the specific option that was selected/unselected */
-        option: { key: keyType, value: string, data?: dataType },
-        /** only sent for multi select - all selected options, in case of multi select */
-        options?: { key: keyType, value: string, data?: dataType }[]) => void;
-}
-
-function $DropdownEX<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>) {
-    const ctx = useKWIZFluentContext();
-    const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
-
-    //sometimes control will lose value when re-rendered
-    //use case: public forms when editing other fields after the dropdown was set
-    //re-set the text value manually to fix
-    let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
-        let v = firstOrNull(props.items, i => i.key === s);
-        return v ? v.value : ''
-    })).join(', ');
-
-    return (
-        <Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
-            appearance={ctx.inputAppearance} mountNode={ctx.mountNode}
-            selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
-                let o = firstOrNull(props.items, i => i.key === data.optionValue);
-                if (props.multiselect) {
-                    let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
-                    props.onSelect(o, current);
-                }
-                else props.onSelect(o);
-            }}>
-            {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
-        </Dropdown>
-
-    );
-}
-
+import { Dropdown, DropdownProps, Option } from '@fluentui/react-components';
+import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context';
+
+type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
+
+interface IProps<dataType, keyType extends string = string> extends ForwardProps {
+    required?: boolean;
+    selected: keyType | keyType[];
+    items: {
+        key: keyType, value: string, data?: dataType,
+        /** display complex controls in the drop down */
+        option?: JSX.Element;
+    }[];
+    onSelect: (
+        /** the specific option that was selected/unselected */
+        option: { key: keyType, value: string, data?: dataType },
+        /** only sent for multi select - all selected options, in case of multi select */
+        options?: { key: keyType, value: string, data?: dataType }[]) => void;
+}
+
+function $DropdownEX<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>) {
+    const ctx = useKWIZFluentContext();
+    const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
+
+    //sometimes control will lose value when re-rendered
+    //use case: public forms when editing other fields after the dropdown was set
+    //re-set the text value manually to fix
+    let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
+        let v = firstOrNull(props.items, i => i.key === s);
+        return v ? v.value : ''
+    })).join(', ');
+
+    return (
+        <Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
+            appearance={ctx.inputAppearance} mountNode={ctx.mountNode}
+            selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
+                let o = firstOrNull(props.items, i => i.key === data.optionValue);
+                if (props.multiselect) {
+                    let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
+                    props.onSelect(o, current);
+                }
+                else props.onSelect(o);
+            }}>
+            {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
+        </Dropdown>
+
+    );
+}
+
 export const DropdownEX = React.forwardRef($DropdownEX);

package/src/controls/error-boundary.tsx

@@ -1,42 +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;
-    }
+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;
+    }
 }