@kwiz/fluentui 1.0.74 → 1.0.76

package/src/helpers/hooks.tsx

@@ -1,142 +1,163 @@
-import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
-import { MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
-import { GetLogger } from "../_modules/config";
-
-/** Empty array ensures that effect is only run on mount */
-export const useEffectOnlyOnMount = [];
-
-type stateExOptions<ValueType> = {
-    onChange?: (newValue: SetStateAction<ValueType>, isValueChanged: boolean) => SetStateAction<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(initialValue);
-    const currentValue = useRef(value);
-
-    /** 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();
-        if (isNotEmptyArray(resolveState.current)) {
-            logger.log(`resolved after render`);
-            let resolvers = resolveState.current.slice();
-            resolveState.current = [];//clear
-            resolvers.map(r => r(value));
-        }
-    }, [value, resolveState.current]);
-
-    function getIsValueChanged(newValue: ValueType): boolean {
-        let result: boolean;
-        if (!objectsEqual(newValue as object, currentValue.current as object)) {
-            result = true;
-        }
-        else {
-            result = false;
-        }
-
-        return logger.groupSync(result ? 'value changed' : 'value not changed', log => {
-            if (logger.getLevel() === LoggerLevel.VERBOSE) {
-                log('old: ' + extractStringValue(currentValue.current));
-                log('new: ' + extractStringValue(newValue));
-            }
-            return result;
-        });
-    };
-
-    let setValueWithCheck = !options.skipUpdateIfSame ? setValueInState : (newValue: ValueType) => {
-        const isValueChanged = getIsValueChanged(newValue);
-        if (isValueChanged) {
-            setValueInState(newValue);
-        }
-        else {
-            resolvePromises();
-        }
-    }
-
-
-    let setValueWithEvents = wrapFunction(setValueWithCheck, {
-        before: (newValue: ValueType) => isFunction(options.onChange) ? options.onChange(newValue, getIsValueChanged(newValue)) : newValue,
-        after: (newValue: ValueType) => currentValue.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);
-            setValueWithEvents(newState);
-        }
-    }), []);
-
-    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
-    };
+import { makeStyles } from "@fluentui/react-components";
+import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } 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: SetStateAction<ValueType>, isValueChanged: boolean) => SetStateAction<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(initialValue);
+    const currentValue = useRef(value);
+
+    /** 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();
+        if (isNotEmptyArray(resolveState.current)) {
+            logger.log(`resolved after render`);
+            let resolvers = resolveState.current.slice();
+            resolveState.current = [];//clear
+            resolvers.map(r => r(value));
+        }
+    }, [value, resolveState.current]);
+
+    function getIsValueChanged(newValue: ValueType): boolean {
+        let result: boolean;
+        if (!objectsEqual(newValue as object, currentValue.current as object)) {
+            result = true;
+        }
+        else {
+            result = false;
+        }
+
+        return logger.groupSync(result ? 'value changed' : 'value not changed', log => {
+            if (logger.getLevel() === LoggerLevel.VERBOSE) {
+                log('old: ' + extractStringValue(currentValue.current));
+                log('new: ' + extractStringValue(newValue));
+            }
+            return result;
+        });
+    };
+
+    let setValueWithCheck = !options.skipUpdateIfSame ? setValueInState : (newValue: ValueType) => {
+        const isValueChanged = getIsValueChanged(newValue);
+        if (isValueChanged) {
+            setValueInState(newValue);
+        }
+        else {
+            resolvePromises();
+        }
+    }
+
+
+    let setValueWithEvents = wrapFunction(setValueWithCheck, {
+        before: (newValue: ValueType) => isFunction(options.onChange) ? options.onChange(newValue, getIsValueChanged(newValue)) : newValue,
+        after: (newValue: ValueType) => currentValue.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);
+            setValueWithEvents(newState);
+        }
+    }), []);
+
+    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 +1,8 @@
-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';
+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 +1,75 @@
-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)
-    };
+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 +1,38 @@
-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} />
-        </>
-    };
+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 +1,30 @@
-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" });
-        }
-    }
+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 +1,3 @@
-export * from './controls';
-export * from './helpers';
+export * from './controls';
+export * from './helpers';
 export * from './styles';

package/src/styles/index.ts

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