@kwiz/fluentui 1.0.73 → 1.0.75

package/src/controls/date.tsx

@@ -1,88 +1,88 @@
-import { DatePicker, DatePickerProps } from '@fluentui/react-datepicker-compat';
-import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat';
-
-import { CalendarCancelRegular } from '@fluentui/react-icons';
-import { isDate } from '@kwiz/common';
-import * as React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useStateEX } from '../helpers';
-import { Horizontal } from './horizontal';
-
-interface IProps {
-    onDateChange: (newDateObject: Date) => void;
-    value: Date;
-    showTime?: boolean;
-    datePickerProps?: DatePickerProps;
-    timePickerProps?: TimePickerProps;
-    /** don't allow to clear the value */
-    required?: boolean;
-}
-export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const ctx = useKWIZFluentContext();
-
-    //time value will always have a value even when clearing the date
-    const [timeValue, setTimeValue] = useStateEX<Date>(isDate(props.value) ? props.value : new Date());
-    const { showClear, dateValue } = React.useMemo(() => {
-        const showClear = !props.required && isDate(props.value);
-        const dateValue = props.value;
-        return { showClear, dateValue };
-    }, [props.value]);
-
-    function reset() {
-        props.onDateChange(null);
-    }
-
-    const changeDateHandler = React.useCallback((newDateValue: Date): void => {
-        const newDate = new Date(newDateValue);
-        // Use the old time values.
-        newDate.setHours(
-            timeValue ? timeValue.getHours() : 0,
-            timeValue ? timeValue.getMinutes() : 0, 0, 0
-        );
-        props.onDateChange(newDate);
-    }, [timeValue, props.onDateChange]);
-
-    const changeTimeHandler = React.useCallback((newTimeValue: Date): void => {
-        //update our state
-        setTimeValue(newTimeValue);
-        // Use the old date value.
-        const newDate = isDate(dateValue) ? new Date(dateValue) : new Date();
-        newDate.setHours(
-            newTimeValue.getHours(),
-            newTimeValue.getMinutes(), 0, 0
-        );
-        props.onDateChange(newDate);
-    }, [dateValue]);
-
-    const DatePickerControl = <DatePicker
-        {...(props.datePickerProps || {})}
-        appearance={ctx.inputAppearance}
-        mountNode={ctx.mountNode}
-        value={isDate(dateValue) ? dateValue : null}
-        onSelectDate={(newDate) => {
-            changeDateHandler(newDate);
-        }}
-        contentBefore={showClear && <CalendarCancelRegular title='Clear' onClick={() => reset()} />}
-    />
-
-    const TimePickerControl = <TimePicker
-        appearance={ctx.inputAppearance}
-        mountNode={ctx.mountNode}
-        {...props.timePickerProps}
-        //only show time value when there is a selected date. timeValue will never be null.
-        value={isDate(dateValue) ? timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true }) : ""}
-        onTimeChange={(e, date) => {
-            const newDate = date.selectedTime;
-            changeTimeHandler(newDate);
-        }}
-    />
-
-    return (
-        props.showTime
-            ? <Horizontal>
-                {DatePickerControl}
-                {TimePickerControl}
-            </Horizontal>
-            : DatePickerControl
-    );
+import { DatePicker, DatePickerProps } from '@fluentui/react-datepicker-compat';
+import { TimePicker, TimePickerProps } from '@fluentui/react-timepicker-compat';
+
+import { CalendarCancelRegular } from '@fluentui/react-icons';
+import { isDate } from '@kwiz/common';
+import * as React from 'react';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { useStateEX } from '../helpers';
+import { Horizontal } from './horizontal';
+
+interface IProps {
+    onDateChange: (newDateObject: Date) => void;
+    value: Date;
+    showTime?: boolean;
+    datePickerProps?: DatePickerProps;
+    timePickerProps?: TimePickerProps;
+    /** don't allow to clear the value */
+    required?: boolean;
+}
+export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const ctx = useKWIZFluentContext();
+
+    //time value will always have a value even when clearing the date
+    const [timeValue, setTimeValue] = useStateEX<Date>(isDate(props.value) ? props.value : new Date());
+    const { showClear, dateValue } = React.useMemo(() => {
+        const showClear = !props.required && isDate(props.value);
+        const dateValue = props.value;
+        return { showClear, dateValue };
+    }, [props.value]);
+
+    function reset() {
+        props.onDateChange(null);
+    }
+
+    const changeDateHandler = React.useCallback((newDateValue: Date): void => {
+        const newDate = new Date(newDateValue);
+        // Use the old time values.
+        newDate.setHours(
+            timeValue ? timeValue.getHours() : 0,
+            timeValue ? timeValue.getMinutes() : 0, 0, 0
+        );
+        props.onDateChange(newDate);
+    }, [timeValue, props.onDateChange]);
+
+    const changeTimeHandler = React.useCallback((newTimeValue: Date): void => {
+        //update our state
+        setTimeValue(newTimeValue);
+        // Use the old date value.
+        const newDate = isDate(dateValue) ? new Date(dateValue) : new Date();
+        newDate.setHours(
+            newTimeValue.getHours(),
+            newTimeValue.getMinutes(), 0, 0
+        );
+        props.onDateChange(newDate);
+    }, [dateValue]);
+
+    const DatePickerControl = <DatePicker
+        {...(props.datePickerProps || {})}
+        appearance={ctx.inputAppearance}
+        mountNode={ctx.mountNode}
+        value={isDate(dateValue) ? dateValue : null}
+        onSelectDate={(newDate) => {
+            changeDateHandler(newDate);
+        }}
+        contentBefore={showClear && <CalendarCancelRegular title='Clear' onClick={() => reset()} />}
+    />
+
+    const TimePickerControl = <TimePicker
+        appearance={ctx.inputAppearance}
+        mountNode={ctx.mountNode}
+        {...props.timePickerProps}
+        //only show time value when there is a selected date. timeValue will never be null.
+        value={isDate(dateValue) ? timeValue.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit", hour12: true }) : ""}
+        onTimeChange={(e, date) => {
+            const newDate = date.selectedTime;
+            changeTimeHandler(newDate);
+        }}
+    />
+
+    return (
+        props.showTime
+            ? <Horizontal>
+                {DatePickerControl}
+                {TimePickerControl}
+            </Horizontal>
+            : DatePickerControl
+    );
 }

package/src/controls/diagram-picker.tsx

@@ -1,97 +1,97 @@
-import { Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, makeStyles, shorthands, Switch, tokens } from '@fluentui/react-components';
-import { ImageSparkleRegular } from '@fluentui/react-icons';
-import { DiagramOptions, stockUrl } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useStateEX } from '../helpers';
-import { ButtonEXPrimarySubtle } from './button';
-import { Horizontal } from './horizontal';
-import { Section } from './section';
-
-const useStyles = makeStyles({
-    dialog: {
-        maxWidth: '70vw',
-        width: '70vw',
-    },
-    dialogBody: {
-        maxHeight: '60vh',
-    },
-    diagramWrapper: {
-        justifyContent: "center",
-        alignContent: "center"
-    },
-    diagram: {
-        border: `1px solid ${tokens.colorNeutralStroke1}`,
-        padding: tokens.spacingHorizontalS,
-        "&:hover": {
-            ...shorthands.borderColor(tokens.colorBrandBackground),
-        },
-        "&>img": {
-            width: "180px"
-        },
-    },
-});
-
-interface iProps {
-    onSelect?: (diagram: { url: string; name: string; }) => void;
-    onSelectBase64?: (diagram: string) => void;
-    trigger?: JSX.Element;
-    hiRes?: boolean;
-    onlyTransparent?: boolean;
-}
-export const DiagramPicker = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<iProps>)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    const classes = useStyles();
-    const [isOpen, setIsOpen] = useStateEX(false);
-    const [hiRes, setHiRes] = useStateEX(props.hiRes);
-    let options = (hiRes ? DiagramOptions.hiRes : DiagramOptions.options);
-    if (props.onlyTransparent) options = options.filter(o => o.name.endsWith(', transparent'));
-    return (
-        <Dialog open={isOpen} onOpenChange={(e, data) => {
-            setIsOpen(data.open);
-        }}>
-            <DialogTrigger disableButtonEnhancement>
-                {props.trigger || <ButtonEXPrimarySubtle icon={<ImageSparkleRegular />} title='Open gallery' showTitleWithIcon dontCenterText />}
-            </DialogTrigger>
-            <DialogSurface mountNode={ctx.mountNode} className={classes.dialog}>
-                <DialogBody className={classes.dialogBody}>
-                    <DialogTitle>Choose a diagram</DialogTitle>
-                    <DialogContent>
-                        <Switch checked={hiRes === true}
-                            onChange={(e, data) => {
-                                setHiRes(data.checked === true);
-                            }}
-                            label="High resolution diagrams"
-                        />
-                        <Horizontal main wrap css={[classes.diagramWrapper]}>
-                            {options
-                                .map(diagram => <Section key={diagram.name} css={[classes.diagram]}
-                                    title={diagram.name}
-                                    onClick={async () => {
-                                        const fullUrl = `${stockUrl}/${diagram.url}`;
-                                        props.onSelect?.({ name: diagram.name, url: fullUrl });
-                                        if (props.onSelectBase64) {
-                                            const result = await fetch(fullUrl);
-                                            const blob = await result.blob();
-                                            const reader = new FileReader();
-                                            reader.onload = function () {
-                                                props.onSelectBase64?.(reader.result as string);
-                                            };
-                                            reader.readAsDataURL(blob);
-                                        }
-                                        setIsOpen(false);
-                                    }}>
-                                    <img src={`${stockUrl}/${diagram.url}`} />
-                                </Section>)}
-                        </Horizontal>
-                    </DialogContent>
-                    {/* <DialogActions>
-                        <DialogTrigger disableButtonEnhancement>
-                            <Button appearance="secondary">Cancel</Button>
-                        </DialogTrigger>
-                        <Button appearance="primary">Save</Button>
-                    </DialogActions> */}
-                </DialogBody>
-            </DialogSurface>
-        </Dialog>);
+import { Dialog, DialogBody, DialogContent, DialogSurface, DialogTitle, DialogTrigger, makeStyles, shorthands, Switch, tokens } from '@fluentui/react-components';
+import { ImageSparkleRegular } from '@fluentui/react-icons';
+import { DiagramOptions, stockUrl } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { useStateEX } from '../helpers';
+import { ButtonEXPrimarySubtle } from './button';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+
+const useStyles = makeStyles({
+    dialog: {
+        maxWidth: '70vw',
+        width: '70vw',
+    },
+    dialogBody: {
+        maxHeight: '60vh',
+    },
+    diagramWrapper: {
+        justifyContent: "center",
+        alignContent: "center"
+    },
+    diagram: {
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        padding: tokens.spacingHorizontalS,
+        "&:hover": {
+            ...shorthands.borderColor(tokens.colorBrandBackground),
+        },
+        "&>img": {
+            width: "180px"
+        },
+    },
+});
+
+interface iProps {
+    onSelect?: (diagram: { url: string; name: string; }) => void;
+    onSelectBase64?: (diagram: string) => void;
+    trigger?: JSX.Element;
+    hiRes?: boolean;
+    onlyTransparent?: boolean;
+}
+export const DiagramPicker = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<iProps>)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    const classes = useStyles();
+    const [isOpen, setIsOpen] = useStateEX(false);
+    const [hiRes, setHiRes] = useStateEX(props.hiRes);
+    let options = (hiRes ? DiagramOptions.hiRes : DiagramOptions.options);
+    if (props.onlyTransparent) options = options.filter(o => o.name.endsWith(', transparent'));
+    return (
+        <Dialog open={isOpen} onOpenChange={(e, data) => {
+            setIsOpen(data.open);
+        }}>
+            <DialogTrigger disableButtonEnhancement>
+                {props.trigger || <ButtonEXPrimarySubtle icon={<ImageSparkleRegular />} title='Open gallery' showTitleWithIcon dontCenterText />}
+            </DialogTrigger>
+            <DialogSurface mountNode={ctx.mountNode} className={classes.dialog}>
+                <DialogBody className={classes.dialogBody}>
+                    <DialogTitle>Choose a diagram</DialogTitle>
+                    <DialogContent>
+                        <Switch checked={hiRes === true}
+                            onChange={(e, data) => {
+                                setHiRes(data.checked === true);
+                            }}
+                            label="High resolution diagrams"
+                        />
+                        <Horizontal main wrap css={[classes.diagramWrapper]}>
+                            {options
+                                .map(diagram => <Section key={diagram.name} css={[classes.diagram]}
+                                    title={diagram.name}
+                                    onClick={async () => {
+                                        const fullUrl = `${stockUrl}/${diagram.url}`;
+                                        props.onSelect?.({ name: diagram.name, url: fullUrl });
+                                        if (props.onSelectBase64) {
+                                            const result = await fetch(fullUrl);
+                                            const blob = await result.blob();
+                                            const reader = new FileReader();
+                                            reader.onload = function () {
+                                                props.onSelectBase64?.(reader.result as string);
+                                            };
+                                            reader.readAsDataURL(blob);
+                                        }
+                                        setIsOpen(false);
+                                    }}>
+                                    <img src={`${stockUrl}/${diagram.url}`} />
+                                </Section>)}
+                        </Horizontal>
+                    </DialogContent>
+                    {/* <DialogActions>
+                        <DialogTrigger disableButtonEnhancement>
+                            <Button appearance="secondary">Cancel</Button>
+                        </DialogTrigger>
+                        <Button appearance="primary">Save</Button>
+                    </DialogActions> */}
+                </DialogBody>
+            </DialogSurface>
+        </Dialog>);
 }); 

package/src/controls/divider.tsx

@@ -1,16 +1,16 @@
-import { Divider, DividerProps, makeStyles, mergeClasses } from '@fluentui/react-components';
-import React from 'react';
-
-const useStyles = makeStyles({
-    separator: {
-        flexGrow: 0
-    }
-});
-interface IProps extends DividerProps {
-}
-export const DividerEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <Divider ref={ref} {...props} className={mergeClasses(cssNames.separator, props.className)} />
-    );
+import { Divider, DividerProps, makeStyles, mergeClasses } from '@fluentui/react-components';
+import React from 'react';
+
+const useStyles = makeStyles({
+    separator: {
+        flexGrow: 0
+    }
+});
+interface IProps extends DividerProps {
+}
+export const DividerEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <Divider ref={ref} {...props} className={mergeClasses(cssNames.separator, props.className)} />
+    );
 }); 

package/src/controls/dropdown.tsx

@@ -1,67 +1,67 @@
-import { Dropdown, DropdownProps, makeStyles, mergeClasses, Option } from '@fluentui/react-components';
-import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
-import React from 'react';
-import { GetLogger } from '../_modules/config';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-
-const logger = GetLogger("DropdownEX");
-
-const useStyles = makeStyles({
-    root: {
-        minWidth: "auto"
-    },
-});
-
-type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
-
-interface IProps<keyType, dataType> 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<keyType, dataType>, ref: React.ForwardedRef<HTMLButtonElement>) {
-    const classes = useStyles();
-    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 }} className={mergeClasses(classes.root, props.className)} 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);
-
-/** @deprecated use normal DropdownEX it is now generic */
-export function getDropdownEX<keyType extends string = string, dataType = never>() {
-    logger.warn('getDropdownEX is deprecated. use DropdownEX it now supports generic types');
-    return React.forwardRef($DropdownEX<keyType, dataType>);
+import { Dropdown, DropdownProps, makeStyles, mergeClasses, Option } from '@fluentui/react-components';
+import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
+import React from 'react';
+import { GetLogger } from '../_modules/config';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+
+const logger = GetLogger("DropdownEX");
+
+const useStyles = makeStyles({
+    root: {
+        minWidth: "auto"
+    },
+});
+
+type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
+
+interface IProps<keyType, dataType> 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<keyType, dataType>, ref: React.ForwardedRef<HTMLButtonElement>) {
+    const classes = useStyles();
+    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 }} className={mergeClasses(classes.root, props.className)} 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);
+
+/** @deprecated use normal DropdownEX it is now generic */
+export function getDropdownEX<keyType extends string = string, dataType = never>() {
+    logger.warn('getDropdownEX is deprecated. use DropdownEX it now supports generic types');
+    return React.forwardRef($DropdownEX<keyType, dataType>);
 }

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;
+    }
 }