@kwiz/fluentui 1.0.61 → 1.0.63

package/src/helpers/context-export.tsx

@@ -1,31 +1,75 @@
-import { makeStyles } from "@fluentui/react-components";
-import React, { useEffect, useState } from "react";
+import { makeStaticStyles, makeStyles } from "@fluentui/react-components";
+import React, { PropsWithChildren, useEffect, useState } from "react";
+import { GetLogger } from "../_modules/config";
+import { KnownClassNames } from "../styles";
 import { iKWIZFluentContext, KWIZFluentContext } from "./context-const";
+import { DragDropContextProvider } from "./drag-drop";
 export type { iKWIZFluentContext } from "./context-const";
-
+const logger = GetLogger("KWIZFluentContextProvider");
 const useContextStyles = makeStyles({
     root: {
         "& *": {
             scrollbarWidth: "thin"
-        }
+        },
+        [`& .${KnownClassNames.printShow}`]: {
+            '@media print': {
+                display: 'unset',
+            }
+        },
+        [`& .${KnownClassNames.printHide}`]: {
+            '@media print': {
+                display: 'none !important'
+            }
+        },
+    },
+});
+export const useStaticStyles = makeStaticStyles({
+    [`.${KnownClassNames.printShow}`]: {
+        display: 'none'
     },
-})
+    [`body.${KnownClassNames.print} .${KnownClassNames.printHide}`]: {
+        display: "none !important"
+    },
+    [`body.${KnownClassNames.print} .${KnownClassNames.printShow}`]: {
+        display: "unset"
+    }
+});
 
+/** @deprecated - use KWIZFluentProvider instead of using this + DragDropContextProvider */
 export function useKWIZFluentContextProvider(options: {
     root?: React.MutableRefObject<HTMLDivElement>;
     ctx?: iKWIZFluentContext;
 }) {
+    useStaticStyles();
     const classes = useContextStyles();
     let v: iKWIZFluentContext = options && options.ctx || {};
     const [kwizFluentContext, setKwizFluentContext] = useState<iKWIZFluentContext>(v);
     useEffect(() => {
-        options.root?.current?.classList.add(...classes.root.split(' '));
+        if (options.root?.current) logger.warn('Sending a root node is not recommended, if you have set up your packages correctly to mark react and fluent UI as external dialogs should open correctly.');
+        let styleRoot = options.root?.current || document.body;
+        styleRoot.classList.add(...classes.root.split(' '));
         // ref only updates in useEffect, not in useMemo or anything else.
         // we need to set it into state so it will trigger a ui update
         setKwizFluentContext({
             ...v,
-            mountNode: options.root.current
+            mountNode: options.root?.current
         });
     }, [options.root]);
-    return { KWIZFluentContext, value: kwizFluentContext };
+    return {
+        KWIZFluentContext,
+        value: kwizFluentContext
+    };
+}
+
+export const KWIZFluentProvider = (props: PropsWithChildren<{
+    ctx?: iKWIZFluentContext;
+}>) => {
+
+    const cp = useKWIZFluentContextProvider({ ctx: props.ctx });
+
+    return <cp.KWIZFluentContext.Provider value={cp.value}>
+        <DragDropContextProvider>
+            {props.children}
+        </DragDropContextProvider>
+    </cp.KWIZFluentContext.Provider>;
 }

package/src/helpers/forwardRef.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+//need to redeclare to support forward ref with generic types
+declare module "react" {
+    function forwardRef<T, P = {}>(
+        render: (props: P, ref: React.Ref<T>) => React.JSX.Element | null
+    ): (props: P & React.RefAttributes<T>) => React.JSX.Element | null;
+}

package/src/helpers/hooks-events.ts

@@ -3,8 +3,8 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { KnownClassNames } from "../styles/styles";
 import { useEffectOnlyOnMount } from "./hooks";
 
-export function useTrackFocus(props: { onFocus: () => void, onLoseFocus: () => void, ref?: MutableRefObject<HTMLElement> }) {
-    const wrapperDiv = props.ref || useRef<HTMLDivElement>(null);
+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;

package/src/helpers/hooks.tsx

@@ -2,13 +2,12 @@ import { isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jso
 import { MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import { GetLogger } from "../_modules/config";
 
-const logger = GetLogger("helpers/hooks");
 /** Empty array ensures that effect is only run on mount */
 export const useEffectOnlyOnMount = [];
 
 /** 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?: {
-    onChange?: (newValue: SetStateAction<ValueType>) => SetStateAction<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
@@ -53,26 +52,36 @@ export function useStateEX<ValueType>(initialValue: ValueType, options?: {
         }
     }, [value, resolveState.current]);
 
-    let setValueWithCheck = !options.skipUpdateIfSame ? setValueInState : (newValue: ValueType) => {
-        logger.groupSync('conditional value change', log => {
+    function getIsValueChanged(newValue: ValueType): boolean {
+        return logger.groupSync('getIsValueChanged', log => {
             if (logger.getLevel() === LoggerLevel.VERBOSE) {
                 log('old: ' + jsonStringify(currentValue.current));
                 log('new: ' + jsonStringify(newValue));
             }
             if (!objectsEqual(newValue as object, currentValue.current as object)) {
                 log(`value changed`);
-                setValueInState(newValue);
+                return true;
             }
             else {
                 log(`value unchanged`);
-                resolvePromises();
+                return false;
             }
         });
+    };
+
+    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) : newValue,
+        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

package/src/styles/styles.ts

@@ -58,6 +58,8 @@ export module mixins {
 
 export const KnownClassNames = {
     print: 'print-root',
+    printHide: 'print-hide',
+    printShow: 'print-show',
     section: 'kfui-section',
     vertical: 'kfui-vertical',
     horizontal: 'kfui-horizontal',
@@ -67,26 +69,11 @@ export const KnownClassNames = {
     accordionBody: 'kfui-accordion-body',
     accordionBodyWrapper: 'kfui-accordion-body-wrapper',
     isOpen: 'is-opened',
-    progressBarStepLabel: 'step-label'
+    progressBarStepLabel: 'step-label',
+    left: 'float-left',
+    right: 'float-right'
 }
 export const useCommonStyles = makeStyles({
-    printShow: {
-        display: 'none',
-        [`:global(body.${KnownClassNames.print})`]: {
-            display: 'unset',
-        },
-        '@media print': {
-            display: 'unset',
-        }
-    },
-    printHide: {
-        [`:global(body.${KnownClassNames.print})`]: {
-            display: 'none !important'
-        },
-        '@media print': {
-            display: 'none !important'
-        }
-    },
     hintLabel: {
         color: tokens.colorNeutralForeground3,
         fontSize: tokens.fontSizeBase200,