@kwiz/fluentui 1.0.74 → 1.0.76

package/src/controls/merge-text.tsx

@@ -1,126 +1,126 @@
-import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, Field, Label, makeStyles, Radio, tokens } from '@fluentui/react-components';
-import { DismissRegular, SaveRegular } from '@fluentui/react-icons';
-import { isNullOrUndefined, waitFor } from '@kwiz/common';
-import { DefaultDarkColors, DefaultLightColors, MisMerge2 } from '@mismerge/react';
-import * as React from 'react';
-
-import '@mismerge/core/dark.css';
-import '@mismerge/core/styles.css';
-import { useStateEX, useWindowSize } from '../helpers';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { ButtonEX, ButtonEXPrimarySubtle } from './button';
-import { Horizontal } from './horizontal';
-import { Section } from './section';
-import { Vertical } from './vertical';
-
-const useStyles = makeStyles({
-    root: {
-        // position: 'fixed',
-        // top: 0,
-        // left: 0,
-        // right: 0,
-        // bottom: 0,
-        // backgroundColor: tokens.colorNeutralBackground1,
-        // zIndex: 10,
-        "& .mismerge": {
-            // height: "100%",
-            "--background": tokens.colorNeutralBackground1,
-            //line number background
-            "--primary-100": tokens.colorNeutralBackground2,
-            //selection background
-            "--selection": tokens.colorNeutralBackground1Selected,
-            //scrollbar hover
-            "--primary-300": tokens.colorNeutralBackground1Hover,
-            //border / scroll
-            "--primary-200": tokens.colorNeutralStroke1,
-            //line number color
-            "--primary-400": tokens.colorNeutralForeground2,
-            //button hover color
-            "--primary-500": tokens.colorNeutralForeground1Hover,
-            //main text color
-            "--primary-600": tokens.colorNeutralForeground1,
-            "& TEXTAREA": {
-                lineHeight: "20px"
-            }
-        }
-    },
-    menu: {
-        justifyContent: "space-between"
-    }
-});
-
-interface IProps {
-    title: string;
-    description?: string;
-    lhsTitle: string;
-    lhsValue: string;
-    rhsTitle: string;
-    rhsValue: string;
-    dark?: boolean;
-    save: (merged: string) => void;
-    cancel: () => void;
-}
-export const MergeText: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const classes = useStyles();
-    const ctx = useKWIZFluentContext();
-
-    let size = useWindowSize();
-    let wrapper = React.useRef<HTMLDivElement>();
-    let [lhs, setLhs] = useStateEX(props.lhsValue || "", {
-        skipUpdateIfSame: true, onChange: (v, changed) => {
-            if (changed) setKeep("left"); return v;
-        }
-    });
-    let [rhs, setRhs] = useStateEX(props.rhsValue || "", {
-        skipUpdateIfSame: true, onChange: (v, changed) => {
-            if (changed) setKeep("right"); return v;
-        }
-    });
-    let [keep, setKeep] = useStateEX<"cancel" | "left" | "right">("cancel");
-
-    React.useEffect(() => {
-        if (wrapper.current) {
-            waitFor(() => !isNullOrUndefined(wrapper.current.querySelector(".mismerge"))).then(() => {
-                let mismerge = wrapper.current.querySelector(".mismerge") as HTMLDivElement;
-                if (mismerge)
-                    mismerge.style.height = `${mismerge.offsetParent.clientHeight - mismerge.offsetTop - 10}px`;
-            });
-        }
-    }, [wrapper.current, size.height]);
-
-    return <Drawer type='overlay' open size='full' className={classes.root} mountNode={ctx.mountNode}>
-        <DrawerHeader>
-            <DrawerHeaderTitle action={<ButtonEX icon={<DismissRegular />} title="Close" onClick={props.cancel} />}>
-                {props.title}
-            </DrawerHeaderTitle>
-        </DrawerHeader>
-        <DrawerBody>
-            <Vertical>
-                {props.description && <Label>{props.description}</Label>}
-                <Field label="Which version would you like to keep?"
-                    hint="Merge the changes to either side and save. Close this panel to keep editing the page without saving">
-                    <Horizontal css={[classes.menu]}>
-                        <Horizontal nogap>
-                            <Radio value="left" label={props.lhsTitle} checked={keep === "left"} onClick={() => setKeep("left")} />
-                            <ButtonEXPrimarySubtle showTitleWithIcon dontCenterText icon={<SaveRegular />} disabled={keep !== "left"} title={`Save ${props.lhsTitle.toLowerCase()}`} onClick={() => props.save(lhs)} />
-                        </Horizontal>
-                        <Horizontal nogap>
-                            <Radio value="right" label={props.rhsTitle} checked={keep === "right"} onClick={() => setKeep("right")} />
-                            <ButtonEXPrimarySubtle showTitleWithIcon dontCenterText icon={<SaveRegular />} disabled={keep !== "right"} title={`Save ${props.rhsTitle.toLowerCase()}`} onClick={() => props.save(rhs)} />
-                        </Horizontal>
-                    </Horizontal>
-                </Field>
-                <Section main ref={wrapper}>
-                    <MisMerge2
-                        lhs={lhs}
-                        rhs={rhs}
-                        lhsEditable rhsEditable
-                        onLhsChange={v => setLhs(v)}
-                        onRhsChange={v => setRhs(v)}
-                        colors={props.dark ? DefaultDarkColors : DefaultLightColors}
-                    />
-                </Section>
-            </Vertical>
-        </DrawerBody>
-    </Drawer>;
-}
+import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, Field, Label, makeStyles, Radio, tokens } from '@fluentui/react-components';
+import { DismissRegular, SaveRegular } from '@fluentui/react-icons';
+import { isNullOrUndefined, waitFor } from '@kwiz/common';
+import { DefaultDarkColors, DefaultLightColors, MisMerge2 } from '@mismerge/react';
+import * as React from 'react';
+
+import '@mismerge/core/dark.css';
+import '@mismerge/core/styles.css';
+import { useStateEX, useWindowSize } from '../helpers';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { ButtonEX, ButtonEXPrimarySubtle } from './button';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+import { Vertical } from './vertical';
+
+const useStyles = makeStyles({
+    root: {
+        // position: 'fixed',
+        // top: 0,
+        // left: 0,
+        // right: 0,
+        // bottom: 0,
+        // backgroundColor: tokens.colorNeutralBackground1,
+        // zIndex: 10,
+        "& .mismerge": {
+            // height: "100%",
+            "--background": tokens.colorNeutralBackground1,
+            //line number background
+            "--primary-100": tokens.colorNeutralBackground2,
+            //selection background
+            "--selection": tokens.colorNeutralBackground1Selected,
+            //scrollbar hover
+            "--primary-300": tokens.colorNeutralBackground1Hover,
+            //border / scroll
+            "--primary-200": tokens.colorNeutralStroke1,
+            //line number color
+            "--primary-400": tokens.colorNeutralForeground2,
+            //button hover color
+            "--primary-500": tokens.colorNeutralForeground1Hover,
+            //main text color
+            "--primary-600": tokens.colorNeutralForeground1,
+            "& TEXTAREA": {
+                lineHeight: "20px"
+            }
+        }
+    },
+    menu: {
+        justifyContent: "space-between"
+    }
+});
+
+interface IProps {
+    title: string;
+    description?: string;
+    lhsTitle: string;
+    lhsValue: string;
+    rhsTitle: string;
+    rhsValue: string;
+    dark?: boolean;
+    save: (merged: string) => void;
+    cancel: () => void;
+}
+export const MergeText: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const classes = useStyles();
+    const ctx = useKWIZFluentContext();
+
+    let size = useWindowSize();
+    let wrapper = React.useRef<HTMLDivElement>();
+    let [lhs, setLhs] = useStateEX(props.lhsValue || "", {
+        skipUpdateIfSame: true, onChange: (v, changed) => {
+            if (changed) setKeep("left"); return v;
+        }
+    });
+    let [rhs, setRhs] = useStateEX(props.rhsValue || "", {
+        skipUpdateIfSame: true, onChange: (v, changed) => {
+            if (changed) setKeep("right"); return v;
+        }
+    });
+    let [keep, setKeep] = useStateEX<"cancel" | "left" | "right">("cancel");
+
+    React.useEffect(() => {
+        if (wrapper.current) {
+            waitFor(() => !isNullOrUndefined(wrapper.current.querySelector(".mismerge"))).then(() => {
+                let mismerge = wrapper.current.querySelector(".mismerge") as HTMLDivElement;
+                if (mismerge)
+                    mismerge.style.height = `${mismerge.offsetParent.clientHeight - mismerge.offsetTop - 10}px`;
+            });
+        }
+    }, [wrapper.current, size.height]);
+
+    return <Drawer type='overlay' open size='full' className={classes.root} mountNode={ctx.mountNode}>
+        <DrawerHeader>
+            <DrawerHeaderTitle action={<ButtonEX icon={<DismissRegular />} title="Close" onClick={props.cancel} />}>
+                {props.title}
+            </DrawerHeaderTitle>
+        </DrawerHeader>
+        <DrawerBody>
+            <Vertical>
+                {props.description && <Label>{props.description}</Label>}
+                <Field label="Which version would you like to keep?"
+                    hint="Merge the changes to either side and save. Close this panel to keep editing the page without saving">
+                    <Horizontal css={[classes.menu]}>
+                        <Horizontal nogap>
+                            <Radio value="left" label={props.lhsTitle} checked={keep === "left"} onClick={() => setKeep("left")} />
+                            <ButtonEXPrimarySubtle showTitleWithIcon dontCenterText icon={<SaveRegular />} disabled={keep !== "left"} title={`Save ${props.lhsTitle.toLowerCase()}`} onClick={() => props.save(lhs)} />
+                        </Horizontal>
+                        <Horizontal nogap>
+                            <Radio value="right" label={props.rhsTitle} checked={keep === "right"} onClick={() => setKeep("right")} />
+                            <ButtonEXPrimarySubtle showTitleWithIcon dontCenterText icon={<SaveRegular />} disabled={keep !== "right"} title={`Save ${props.rhsTitle.toLowerCase()}`} onClick={() => props.save(rhs)} />
+                        </Horizontal>
+                    </Horizontal>
+                </Field>
+                <Section main ref={wrapper}>
+                    <MisMerge2
+                        lhs={lhs}
+                        rhs={rhs}
+                        lhsEditable rhsEditable
+                        onLhsChange={v => setLhs(v)}
+                        onRhsChange={v => setRhs(v)}
+                        colors={props.dark ? DefaultDarkColors : DefaultLightColors}
+                    />
+                </Section>
+            </Vertical>
+        </DrawerBody>
+    </Drawer>;
+}

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/progress-bar.tsx

@@ -1,110 +1,110 @@
-import { DividerProps, makeStyles, mergeClasses, ProgressBar, tokens } from '@fluentui/react-components';
-import { CheckmarkRegular, FluentIcon } from '@fluentui/react-icons';
-import { isFunction, isNotEmptyString } from '@kwiz/common';
-import React from 'react';
-import { KnownClassNames } from '../styles/styles';
-import { Horizontal } from './horizontal';
-import { Section } from './section';
-import { Vertical } from './vertical';
-
-const useStyles = makeStyles({
-    root: {
-        position: "relative"
-    },
-    stepNumber: {
-        border: `2px solid ${tokens.colorNeutralStroke1}`,
-        borderRadius: tokens.borderRadiusCircular,
-        width: '24px',
-        height: '24px',
-        position: 'relative',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: tokens.colorNeutralBackground1,
-    },
-    stepLabel: {
-        backgroundColor: tokens.colorNeutralBackground1,
-        position: "absolute",
-        top: '-10px',
-        left: 0,
-        right: 0,
-        "& > span": {
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            display: "inline-block"
-        }
-    },
-    stepNumberCurrent: {
-        border: `2px solid ${tokens.colorBrandBackground}`,
-    },
-    stepNumberCompleted: {
-        border: `2px solid ${tokens.colorBrandBackground}`,
-        backgroundColor: tokens.colorBrandBackground,
-        color: tokens.colorNeutralBackground1,
-    },
-    stepNumberClickable: {
-        cursor: "pointer"
-    },
-    stepTitle: {
-        fontSize: tokens.fontSizeBase400,
-        lineHeight: tokens.lineHeightBase400,
-    },
-    progressBar: {
-        position: "absolute",
-        top: "14px"
-    },
-    stepSpacer: {
-        position: "relative"
-    }
-});
-interface IProps extends DividerProps {
-    steps: number;
-    step: number;
-    stepLabel?: string;
-    css?: string[];
-    /** optional, send an icon instead of the step number */
-    stepIcons?: FluentIcon[];
-    onStepClick?: (step: number) => void;
-}
-export const ProgressBarEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
-    const classes = useStyles();
-
-    let stepLabels: JSX.Element[] = [];
-    for (let i = 0; i < props.steps; i++) {
-        const stepClasses = [classes.stepNumber];
-        let addLabel = false;
-        let canClick = false;
-        if (props.step === i) {
-            stepClasses.push(classes.stepNumberCurrent);
-            if (isNotEmptyString(props.stepLabel))
-                addLabel = true;
-        }
-        else if (props.step > i) {
-            stepClasses.push(classes.stepNumberCompleted);
-            canClick = isFunction(props.onStepClick);
-            if (canClick)
-                stepClasses.push(classes.stepNumberClickable);
-        }
-        let StepIcon = props.stepIcons?.[i];
-        stepLabels.push(<Section key={`step${i}`} css={stepClasses} onClick={canClick ? () => props.onStepClick(i) : undefined}>{StepIcon ? <StepIcon /> : `${i + 1}`}</Section>);
-        stepLabels.push(<Section main key={`step${i}Spacer`} css={[classes.stepSpacer]}>
-            {addLabel && <Horizontal key="label" hCentered css={[classes.stepLabel, KnownClassNames.progressBarStepLabel]}>
-                <span>{props.stepLabel}</span>
-            </Horizontal>}
-        </Section>);
-
-    }
-
-    let StepIcon = props.stepIcons?.[props.steps];
-    //add last submit step
-    stepLabels.push(<span key='stepSubmit' className={mergeClasses(classes.stepNumber, props.step === props.steps && classes.stepNumberCompleted)}>{StepIcon ? <StepIcon /> : <CheckmarkRegular />}</span>);
-
-    return (
-        <Vertical css={[classes.root, ...(props.css || [])]}>
-            {/* progress bar first so labels will cover it without the need for zindex */}
-            <ProgressBar className={classes.progressBar} value={(props.step * 2) + 1} max={props.steps * 2} />
-            <Horizontal css={[classes.stepTitle]}>{...stepLabels}</Horizontal>
-        </Vertical >
-    );
+import { DividerProps, makeStyles, mergeClasses, ProgressBar, tokens } from '@fluentui/react-components';
+import { CheckmarkRegular, FluentIcon } from '@fluentui/react-icons';
+import { isFunction, isNotEmptyString } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames } from '../styles/styles';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+import { Vertical } from './vertical';
+
+const useStyles = makeStyles({
+    root: {
+        position: "relative"
+    },
+    stepNumber: {
+        border: `2px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusCircular,
+        width: '24px',
+        height: '24px',
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: tokens.colorNeutralBackground1,
+    },
+    stepLabel: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        position: "absolute",
+        top: '-10px',
+        left: 0,
+        right: 0,
+        "& > span": {
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            display: "inline-block"
+        }
+    },
+    stepNumberCurrent: {
+        border: `2px solid ${tokens.colorBrandBackground}`,
+    },
+    stepNumberCompleted: {
+        border: `2px solid ${tokens.colorBrandBackground}`,
+        backgroundColor: tokens.colorBrandBackground,
+        color: tokens.colorNeutralBackground1,
+    },
+    stepNumberClickable: {
+        cursor: "pointer"
+    },
+    stepTitle: {
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400,
+    },
+    progressBar: {
+        position: "absolute",
+        top: "14px"
+    },
+    stepSpacer: {
+        position: "relative"
+    }
+});
+interface IProps extends DividerProps {
+    steps: number;
+    step: number;
+    stepLabel?: string;
+    css?: string[];
+    /** optional, send an icon instead of the step number */
+    stepIcons?: FluentIcon[];
+    onStepClick?: (step: number) => void;
+}
+export const ProgressBarEX = React.forwardRef<HTMLDivElement, (React.PropsWithChildren<IProps>)>((props, ref) => {
+    const classes = useStyles();
+
+    let stepLabels: JSX.Element[] = [];
+    for (let i = 0; i < props.steps; i++) {
+        const stepClasses = [classes.stepNumber];
+        let addLabel = false;
+        let canClick = false;
+        if (props.step === i) {
+            stepClasses.push(classes.stepNumberCurrent);
+            if (isNotEmptyString(props.stepLabel))
+                addLabel = true;
+        }
+        else if (props.step > i) {
+            stepClasses.push(classes.stepNumberCompleted);
+            canClick = isFunction(props.onStepClick);
+            if (canClick)
+                stepClasses.push(classes.stepNumberClickable);
+        }
+        let StepIcon = props.stepIcons?.[i];
+        stepLabels.push(<Section key={`step${i}`} css={stepClasses} onClick={canClick ? () => props.onStepClick(i) : undefined}>{StepIcon ? <StepIcon /> : `${i + 1}`}</Section>);
+        stepLabels.push(<Section main key={`step${i}Spacer`} css={[classes.stepSpacer]}>
+            {addLabel && <Horizontal key="label" hCentered css={[classes.stepLabel, KnownClassNames.progressBarStepLabel]}>
+                <span>{props.stepLabel}</span>
+            </Horizontal>}
+        </Section>);
+
+    }
+
+    let StepIcon = props.stepIcons?.[props.steps];
+    //add last submit step
+    stepLabels.push(<span key='stepSubmit' className={mergeClasses(classes.stepNumber, props.step === props.steps && classes.stepNumberCompleted)}>{StepIcon ? <StepIcon /> : <CheckmarkRegular />}</span>);
+
+    return (
+        <Vertical css={[classes.root, ...(props.css || [])]}>
+            {/* progress bar first so labels will cover it without the need for zindex */}
+            <ProgressBar className={classes.progressBar} value={(props.step * 2) + 1} max={props.steps * 2} />
+            <Horizontal css={[classes.stepTitle]}>{...stepLabels}</Horizontal>
+        </Vertical >
+    );
 });