@kwiz/fluentui 1.0.78 → 1.0.79

package/src/helpers/hooks-events.ts

@@ -1,150 +0,0 @@
-import { isDebug, isFunction } from "@kwiz/common";
-import { MutableRefObject, useEffect, useRef, useState } from "react";
-import { KnownClassNames } from "../styles/styles";
-import { useEffectOnlyOnMount } from "./hooks";
-
-export function useTrackFocus<elmType extends HTMLElement>(props: { onFocus: () => void, onLoseFocus: () => void, ref?: MutableRefObject<elmType> }) {
-    const wrapperDiv: MutableRefObject<elmType> = props.ref || useRef<HTMLDivElement>(null) as any;
-    useEffect(() => {
-        function focusIn(e: FocusEvent) {
-            let elm = e.target as HTMLElement;//document.activeElement;
-            if (wrapperDiv.current) {
-                while (elm && elm !== wrapperDiv.current) {
-                    elm = elm.parentElement;
-                }
-            } else elm = null;
-            if (wrapperDiv.current && elm === wrapperDiv.current) props.onFocus();
-            else props.onLoseFocus();
-        }
-
-        if (wrapperDiv.current) {
-            if (wrapperDiv.current) wrapperDiv.current.tabIndex = 1;
-            window.addEventListener("focusin", focusIn);
-            // Remove event listener on cleanup
-            return () => window.removeEventListener("focusin", focusIn);
-        }
-    }, [wrapperDiv.current]);
-    return wrapperDiv;
-}
-export function useWindowSize() {
-    // Initialize state with undefined width/height so server and client renders match
-    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-    const [windowSize, setWindowSize] = useState<{
-        width: number,
-        height: number
-    }>({
-        width: undefined,
-        height: undefined
-    });
-    useEffect(() => {
-        // Handler to call on window resize
-        function handleResize() {
-
-            // Set window width/height to state
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
-        }
-        // Add event listener
-        window.addEventListener("resize", handleResize);
-        // Call handler right away so state gets updated with initial window size
-        handleResize();
-        // Remove event listener on cleanup
-        return () => window.removeEventListener("resize", handleResize);
-    }, useEffectOnlyOnMount);
-    return windowSize;
-}
-export function useElementSize(elm: HTMLElement) {
-    // Initialize state with undefined width/height so server and client renders match
-    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
-    const [elmSize, setELmSize] = useState<{
-        width: number,
-        height: number
-    }>({
-        width: undefined,
-        height: undefined
-    });
-    useEffect(() => {
-        if (elm) {
-            // Handler to call on elm resize
-            function handleResize() {
-                // Set elm width/height to state
-                setELmSize({
-                    width: (elm instanceof Window) ? elm.innerWidth : elm.clientWidth,
-                    height: (elm instanceof Window) ? elm.innerHeight : elm.clientHeight,
-                });
-            }
-            // Add event listener
-            const observer = new ResizeObserver(handleResize);
-            observer.observe(elm);
-            // Call handler right away so state gets updated with initial elm size
-            handleResize();
-            // Remove event listener on cleanup
-            return () => observer.disconnect();
-        }
-    }, [elm]);
-    return elmSize;
-}
-export function useIsInPrint() {
-    // Initialize state with media query
-    const [printMode, setPrintMode] = useState<boolean>(window.matchMedia ? window.matchMedia('print').matches : false);
-    useEffect(() => {
-        if (printMode)
-            document.body.classList.add(KnownClassNames.print);
-        else
-            document.body.classList.remove(KnownClassNames.print);
-    }, [printMode]);
-
-    useEffect(() => {
-        const forcePrintOn = () => setPrintMode(true);
-        const forcePrintOff = () => setPrintMode(false);
-
-        function printDebugHelper(e: KeyboardEvent) {
-            if (e.ctrlKey && e.shiftKey && e.altKey) {
-                if (e.key.toLocaleLowerCase() === "q") {
-                    forcePrintOff();
-                }
-                else {
-                    console.warn('forced print mode - to exit refresh to ctrl+shift+alt+q');
-                    forcePrintOn();
-                }
-            }
-        }
-
-        // Add event listener
-        window.addEventListener("beforeprint", forcePrintOn);
-        window.addEventListener("afterprint", forcePrintOff);
-        if (isDebug())
-            window.addEventListener("keydown", printDebugHelper);
-        // Remove event listener on cleanup
-        return () => {
-            window.removeEventListener("beforeprint", forcePrintOn);
-            window.removeEventListener("afterprint", forcePrintOff);
-            if (isDebug())
-                window.removeEventListener("keydown", printDebugHelper);
-        };
-    }, useEffectOnlyOnMount);
-    return printMode;
-}
-
-export function useKeyDown(options: {
-    //default use document
-    elm?: HTMLElement | Document;
-    onEnter?: (e: KeyboardEvent) => void;
-    onEscape?: (e: KeyboardEvent) => void;
-    onKeyDown?: (e: KeyboardEvent) => void;
-}) {
-    let elm = options.elm || document;
-
-    useEffect(() => {
-        let handler = (e: KeyboardEvent) => {
-            if (e.key === "Enter" && isFunction(options.onEnter)) options.onEnter(e);
-            else if (e.key === "Escape" && isFunction(options.onEscape)) options.onEscape(e);
-            if (isFunction(options.onKeyDown))
-                options.onKeyDown(e);
-        };
-        elm.addEventListener("keydown", handler);
-        return () => elm.removeEventListener("keydown", handler);
-    }, [elm, options.onEnter, options.onEscape, options.onKeyDown]);
-}

package/src/helpers/hooks.tsx

@@ -1,175 +0,0 @@
-import { makeStyles } from "@fluentui/react-components";
-import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual } from "@kwiz/common";
-import { HTMLAttributes, MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
-import { GetLogger } from "../_modules/config";
-import { mixins } from "../styles/styles";
-
-/** Empty array ensures that effect is only run on mount */
-export const useEffectOnlyOnMount = [];
-
-type stateExOptions<ValueType> = {
-    onChange?: (newValue: ValueType, isValueChanged: boolean) => ValueType;
-    //will not set state if value did not change
-    skipUpdateIfSame?: boolean;
-    //optional, provide a name for better logging
-    name?: string;
-};
-function extractStringValue(e: any) {
-    try {
-        if (e instanceof HTMLElement)
-            return e.outerHTML;
-    } catch (e) { }
-    try {
-        let json = jsonStringify(e);
-        if (json === "{}") return Object.keys(e).join();//maybe just object with functions, no members or values
-        else return json;
-    } catch (e) { }
-    try {
-        return e.toString();
-    } catch (e) { }
-    return '';
-}
-/** set state on steroids. provide promise callback after render, onChange transformer and automatic skip-set when value not changed */
-export function useStateEX<ValueType>(initialValue: ValueType, options?: stateExOptions<ValueType>):
-    [ValueType, (newValue: SetStateAction<ValueType>) => Promise<ValueType>, MutableRefObject<ValueType>] {
-    options = options || {};
-    const name = options.name || '';
-
-    let logger = GetLogger(`useStateWithTrack${isNullOrEmptyString(name) ? '' : ` ${name}`}`);
-    logger.setLevel(LoggerLevel.WARN);
-
-    const [value, setValueInState] = useState<ValueType>(initialValue);
-
-    const currentValue = useRef<ValueType>();
-    //json clone complex/ref values so we can compare if value changed, in case caller makes chagnes on the value object directly.
-    const currentValueForChecks = useRef<ValueType>();
-    useEffect(() => {
-        updateCurrentRef(initialValue);
-    }, useEffectOnlyOnMount);
-
-    //keep a ref to onChange so the caller's latet state is accessible
-    const onChange = useRef(options.onChange);
-    onChange.current = options.onChange;
-
-    /** make this a collection in case several callers are awaiting the same propr update */
-    const resolveState = useRef<((v: ValueType) => void)[]>([]);
-    const isMounted = useRef(false);
-
-    useEffect(() => {
-        isMounted.current = true;
-
-        return () => {
-            isMounted.current = false;
-        };
-    }, useEffectOnlyOnMount);
-
-    function resolvePromises() {
-        if (isNotEmptyArray(resolveState.current)) {
-            let resolvers = resolveState.current.slice();
-            resolveState.current = [];//clear
-            resolvers.map(r => r(currentValue.current));
-        }
-    };
-    useEffect(() => {
-        resolvePromises();
-    }, [value]);
-
-    function getIsValueChanged(newValue: ValueType): boolean {
-        let error: Error = null;
-        let result: boolean;
-        try {
-            if (!objectsEqual(newValue as object, currentValueForChecks.current as object)) {
-                result = true;
-            }
-            else {
-                result = false;
-            }
-        } catch (e) {
-            error = e;
-            result = true;
-        }
-
-        return logger.groupSync(result ? 'value changed' : 'value not changed', log => {
-            if (logger.getLevel() === LoggerLevel.VERBOSE) {
-                log('old: ' + extractStringValue(currentValueForChecks.current));
-                log('new: ' + extractStringValue(newValue));
-                if (error) log({ label: "Error", value: error });
-            }
-            return result;
-        });
-    };
-    function updateCurrentRef(newValue: ValueType) {
-        currentValue.current = newValue;
-        currentValueForChecks.current = isPrimitiveValue(newValue) || isFunction(newValue)
-            ? newValue
-            //fix skipUpdateIfSame for complex objects
-            //if we don't clone it, currentValue.current will be a ref to the value in the owner
-            //and will be treated as unchanged object, and it will be out of sync
-            //this leads to skipUpdateIfSame failing after just 1 unchanged update
-            : jsonClone(newValue) as ValueType;
-    }
-
-    const setValue = useCallback((newState: ValueType) => new Promise<ValueType>(resolve => {
-        if (!isMounted.current) {
-            //unmounted may never resolve
-            logger.log(`resolved without wait`);
-            resolve(newState);
-        }
-        else {
-            resolveState.current.push(resolve);
-            const isChanged = isFunction(onChange.current) || options.skipUpdateIfSame
-                ? getIsValueChanged(newState)//don't call this if there is no onChange handler and if we don't need to monitor skipUpdateIfSame
-                : true;
-            if (isFunction(onChange.current))
-                newState = onChange.current(newState, isChanged);
-
-            //keep current value ref up to date
-            updateCurrentRef(newState);
-
-            //set state
-            if (!options.skipUpdateIfSame || isChanged)
-                setValueInState(newState);
-            else//don't set in state - just resolve pending promises, UI will not be updated.
-                resolvePromises();
-        }
-    }), useEffectOnlyOnMount);
-
-    return [value, setValue, currentValue];
-}
-
-/** use a ref, that can be tracked as useEffect dependency */
-export function useRefWithState<T>(initialValue?: T, stateOptions: stateExOptions<T> = { skipUpdateIfSame: true, name: "useRefWithState" }) {
-    let asRef = useRef<T>(initialValue);
-    let [asState, setState] = useStateEX<T>(initialValue, stateOptions);
-    let setRef = useCallback((newValue: T) => {
-        asRef.current = newValue;
-        setState(newValue);
-    }, useEffectOnlyOnMount);
-    return {
-        /** ref object for getting latest value in handlers */
-        ref: asRef,
-        /** for useEffect dependency */
-        value: asState,
-        /** for setting on element: ref={e.set} */
-        set: setRef
-    };
-}
-
-const useStyles = makeStyles({
-    clickable: mixins.clickable,
-});
-
-/** return props to make div appear as clickable, and accept enter key as click */
-export function useClickableDiv() {
-    const cssNames = useStyles();
-
-    const props: HTMLAttributes<HTMLDivElement> = {
-        className: cssNames.clickable,
-        tabIndex: 0,
-        onKeyDown: e => {
-            if (e.key === "Enter") (e.target as HTMLDivElement).click();
-        }
-    };
-
-    return props;
-}

package/src/helpers/index.ts

@@ -1,8 +0,0 @@
-export * from './block-nav';
-export * from './context-export';
-export * from './drag-drop';
-export * from './hooks';
-export * from './hooks-events';
-export * from './use-alerts';
-export * from './use-editable-control';
-export * from './use-toast';

package/src/helpers/use-alerts.tsx

@@ -1,75 +0,0 @@
-import { Label } from "@fluentui/react-components";
-import { isFunction, isString } from "@kwiz/common";
-import { useCallback } from "react";
-import { IPrompterProps, Prompter } from "../controls/prompt";
-import { useEffectOnlyOnMount, useStateEX } from "./hooks";
-
-export interface iAlerts {
-    promptEX: (info: IPrompterProps) => void;
-    confirmEX: (message: string | JSX.Element, onOK?: () => void, onCancel?: () => void) => Promise<boolean>;
-    alertEX: (message: string | JSX.Element, onOK?: () => void) => Promise<void>;
-    alertPrompt?: JSX.Element;
-    close: () => void;
-}
-
-/** set block message if you want to block nav.
- * - call setMessage to  add a blocker message
- * - call onNav when you have internal navigation (open / close popups)
- * - render the navPrompt control to your page
- * FYI for page unload, most modern browsers won't show your message but a generic one instead. */
-export function useAlerts(): iAlerts {
-    const [_prompt, _setPrompt] = useStateEX<IPrompterProps>(null);
-
-    const promptEX = useCallback((info: IPrompterProps) => {
-        //need to release react to re-render the prompt
-        window.setTimeout(() => {
-            //prompt, if ok - clear messages and nav.
-            _setPrompt({
-                ...info,
-                onCancel: () => {
-                    _setPrompt(null);
-                    if (isFunction(info.onCancel)) info.onCancel();
-                },
-                onOK: () => {
-                    _setPrompt(null);
-                    if (isFunction(info.onOK)) info.onOK();
-                }
-            });
-        }, 1);
-    }, useEffectOnlyOnMount);
-
-    const confirmEX = useCallback((message: string | JSX.Element, onOK?: () => void, onCancel?: () => void) => {
-        return new Promise<boolean>(resolve => {
-            promptEX({
-                children: isString(message) ? <Label>{message}</Label> : message,
-                onCancel: () => {
-                    if (isFunction(onCancel)) onCancel();
-                    resolve(false);
-                },
-                onOK: () => {
-                    if (isFunction(onOK)) onOK();
-                    resolve(true);
-                }
-            });
-        });
-    }, useEffectOnlyOnMount);
-
-    const alertEX = useCallback((message: string | JSX.Element, onOK: () => void) => {
-        return new Promise<void>(resolve => {
-            promptEX({
-                children: isString(message) ? <Label>{message}</Label> : message,
-                hideCancel: true,
-                onOK: () => {
-                    if (isFunction(onOK)) onOK();
-                    resolve();
-                }
-            });
-        });
-    }, useEffectOnlyOnMount);
-
-    return {
-        promptEX, confirmEX, alertEX,
-        alertPrompt: _prompt ? <Prompter {..._prompt} /> : undefined,
-        close: () => _setPrompt(null)
-    };
-}

package/src/helpers/use-editable-control.tsx

@@ -1,38 +0,0 @@
-import { Toast, ToastTitle, Toaster, useId, useToastController } from "@fluentui/react-components";
-import { useCallback, useState } from "react";
-import { PleaseWait } from "../controls/please-wait";
-import { useEffectOnlyOnMount, useStateEX } from "./hooks";
-
-/* Provides useful helpers for tracking if control has changes, and handling the save changes with progress bar and on success/fail messages. */
-export function useEditableControl() {
-    const [showProgress, setShowProgress] = useState(false);
-    const [hasChanges, setHasChanges, hasChangesRef] = useStateEX(false, { skipUpdateIfSame: true });
-
-    const toasterId = useId("toaster");
-    const { dispatchToast } = useToastController(toasterId);
-
-    const onSaveChanges = useCallback(async (worker: () => Promise<{ success: boolean; message?: string; }>) => {
-        setShowProgress(true);
-        const success = await worker();
-        setShowProgress(false);
-
-        if (success.success !== true) {
-            dispatchToast(<Toast>
-                <ToastTitle>{success.message || "Could not save your changes."}</ToastTitle>
-            </Toast>, { intent: "warning", timeout: 10000 });
-        }
-        else {
-            setHasChanges(false);
-            dispatchToast(<Toast>
-                <ToastTitle>{success.message || "Changes saved!"}</ToastTitle>
-            </Toast>, { intent: "success", timeout: 2000 });
-        }
-    }, useEffectOnlyOnMount);
-
-    return {
-        hasChanges, hasChangesRef, setHasChanges, onSaveChanges, editablePageElement: <>
-            {showProgress && <PleaseWait />}
-            <Toaster toasterId={toasterId} />
-        </>
-    };
-}

package/src/helpers/use-toast.tsx

@@ -1,30 +0,0 @@
-import { Link, Toast, ToastBody, Toaster, ToastFooter, ToastIntent, ToastTitle, useId, useToastController } from "@fluentui/react-components";
-import { isNotEmptyArray } from "@kwiz/common";
-import { useKWIZFluentContext } from "./context-internal";
-
-export function useToast() {
-    const ctx = useKWIZFluentContext();
-    const toasterId = useId("toaster");
-    const { dispatchToast } = useToastController(toasterId);
-    return {
-        control: <Toaster mountNode={ctx.mountNode} toasterId={toasterId} />,
-        dispatch: (info: {
-            title?: string;
-            body?: string;
-            subtitle?: string;
-            titleAction?: { text: string, onClick: () => void },
-            footerActions?: { text: string, onClick: () => void }[],
-            intent?: ToastIntent
-        }) => {
-            dispatchToast(<Toast>
-                {info.title && <ToastTitle action={info.titleAction ? <Link onClick={info.titleAction.onClick}>{info.titleAction.text}</Link> : undefined}>{info.title}</ToastTitle>}
-                {info.body && <ToastBody subtitle={info.subtitle}>{info.body}</ToastBody>}
-                {isNotEmptyArray(info.footerActions) &&
-                    <ToastFooter>
-                        {info.footerActions.map((a, i) => <Link key={`l${i}`} onClick={a.onClick}>{a.text}</Link>)}
-                    </ToastFooter>
-                }
-            </Toast>, { intent: info.intent || "info" });
-        }
-    }
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './controls';
-export * from './helpers';
-export * from './styles';

package/src/styles/index.ts

@@ -1 +0,0 @@
-export { commonSizes, KnownClassNames } from './styles';

package/src/styles/styles.ts

@@ -1,105 +0,0 @@
-import { GriffelStyle, makeStyles, tokens } from "@fluentui/react-components";
-
-export module mixins {
-    export const main: GriffelStyle = {
-        flexShrink: 1,
-        flexGrow: 1
-    };
-    export const clickable: GriffelStyle = {
-        cursor: "pointer",
-        ['& label']: {
-            cursor: "pointer"
-        }
-    }
-    export const box: GriffelStyle = {
-        padding: tokens.spacingHorizontalM,
-        borderRadius: tokens.borderRadiusMedium,
-        boxShadow: tokens.shadow4,
-        margin: tokens.spacingHorizontalXXS
-    }
-    export const float: GriffelStyle = {
-        ...box,
-        /** make buttons work */
-        position: "relative",
-        /** make buttons work */
-        maxWidth: "33%",
-        /** stop bleeding into page */
-        overflowX: "hidden",
-
-        ['& img']: {
-            maxWidth: "100%"
-        }
-    }
-
-    export const flex: GriffelStyle = {
-        display: 'flex',
-        flexWrap: 'nowrap',
-        rowGap: tokens.spacingVerticalM,
-        columnGap: tokens.spacingVerticalM,
-    }
-
-    export const wrap: GriffelStyle = {
-        flexWrap: "wrap"
-    }
-    export const nogap: GriffelStyle = {
-        rowGap: 0,
-        columnGap: 0
-    }
-    export const ellipsis: GriffelStyle = {
-        whiteSpace: 'nowrap',
-        display: 'block',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    }
-
-    // export const box: GriffelStyle = {
-    // }
-}
-
-export const KnownClassNames = {
-    print: 'print-root',
-    printHide: 'print-hide',
-    printShow: 'print-show',
-    section: 'kfui-section',
-    vertical: 'kfui-vertical',
-    horizontal: 'kfui-horizontal',
-    list: 'kfui-list',
-    accordion: 'kfui-accordion',
-    accordionHeader: 'kfui-accordion-header',
-    accordionBody: 'kfui-accordion-body',
-    accordionBodyWrapper: 'kfui-accordion-body-wrapper',
-    isOpen: 'is-opened',
-    progressBarStepLabel: 'step-label',
-    left: 'float-left',
-    right: 'float-right'
-}
-export const useCommonStyles = makeStyles({
-    hintLabel: {
-        color: tokens.colorNeutralForeground3,
-        fontSize: tokens.fontSizeBase200,
-        fontWeight: tokens.fontWeightRegular,
-        lineHeight: tokens.lineHeightBase200
-    },
-    validationLabel: {
-        color: tokens.colorPaletteRedForeground1,
-        fontSize: tokens.fontSizeBase200,
-        fontWeight: tokens.fontWeightRegular,
-        lineHeight: tokens.lineHeightBase200
-    },
-    fullscreen: {
-        position: "fixed",
-        top: 0, bottom: 0, left: 0, right: 0,
-        zIndex: 1,
-        backgroundColor: tokens.colorNeutralBackground1,
-        overflow: "auto",
-        padding: tokens.spacingHorizontalL,
-        paddingLeft: "20px",
-        paddingRight: "20px"
-    }
-});
-
-export const commonSizes = {
-    widthMedium: 360,
-    widthWide: 520,
-    extraWidthWide: 820,
-}

package/src/styles/theme.ts

@@ -1,91 +0,0 @@
-import { BrandVariants, Theme, createDarkTheme, createLightTheme, teamsDarkTheme, teamsLightTheme } from "@fluentui/react-components";
-
-export interface iThemeContext {
-    teams?: boolean;
-    dark?: boolean;
-}
-
-export function getTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    return ctx.dark
-        ? getDarkTheme(ctx, t)
-        : getLightTheme(ctx, t);
-}
-
-
-const kThemeDefault: BrandVariants = {
-    10: "#04010A",
-    20: "#16103B",
-    30: "#17176F",
-    40: "#0F1D9A",
-    50: "#2F2AA1",
-    60: "#4338A8",
-    70: "#5546AF",
-    80: "#6555B6",
-    90: "#7563BD",
-    100: "#8472C4",
-    110: "#9282CB",
-    120: "#A191D2",
-    130: "#AFA1D9",
-    140: "#BDB1E0",
-    150: "#CBC1E7",
-    160: "#D9D2EE"
-};
-
-const kThemeOrange: BrandVariants = {
-    10: "#040301",
-    20: "#1E170A",
-    30: "#312610",
-    40: "#403112",
-    50: "#503D14",
-    60: "#604915",
-    70: "#705516",
-    80: "#816216",
-    90: "#926E16",
-    100: "#A37B15",
-    110: "#B58914",
-    120: "#C79612",
-    130: "#DAA40E",
-    140: "#EDB208",
-    150: "#FFC001",
-    160: "#FFD47F"
-};
-
-const kThemeSecondary: BrandVariants = {
-    10: "#020304",
-    20: "#101A1D",
-    30: "#162B32",
-    40: "#1A3742",
-    50: "#1D4552",
-    60: "#1F5363",
-    70: "#216175",
-    80: "#227087",
-    90: "#227F9A",
-    100: "#208EAD",
-    110: "#1E9EC0",
-    120: "#1AADD4",
-    130: "#12BEE8",
-    140: "#02CEFD",
-    150: "#6BDAFF",
-    160: "#A0E5FF"
-};
-
-function getLightTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    if (ctx.teams) return teamsLightTheme;
-    //return jsonClone(webLightTheme);
-    const lightTheme: Theme = {
-        ...createLightTheme(t),
-    };
-    return lightTheme;
-}
-
-function getDarkTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    if (ctx.teams) return teamsDarkTheme;
-    //return jsonClone(webDarkTheme);
-    const darkTheme: Theme = {
-        ...createDarkTheme(t),
-    };
-
-    darkTheme.colorBrandForeground1 = t[110];
-    darkTheme.colorBrandForeground2 = t[120];
-    return darkTheme;
-}