@kwiz/fluentui 1.0.61 → 1.0.62

package/src/controls/dropdown.tsx

@@ -1,18 +1,20 @@
 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<dataType, keyType extends string = string> extends ForwardProps {
+interface IProps<keyType, dataType> extends ForwardProps {
     required?: boolean;
     selected: keyType | keyType[];
     items: {
@@ -27,40 +29,39 @@ interface IProps<dataType, keyType extends string = string> extends ForwardProps
         options?: { key: keyType, value: string, data?: dataType }[]) => void;
 }
 
-/** get a DropdownEX typed with forward ref. Usage:
- * const MyDropdownEX = DropdownEX3<myKeyType, myDataType>();
- * ...
- * <MyDropdownEX ... />
- */
-export function getDropdownEX<keyType extends string = string, dataType = never>() {
-    return React.forwardRef<HTMLButtonElement, (IProps<dataType, keyType>)>((props, ref) => {
-        const classes = useStyles();
-        const ctx = useKWIZFluentContext();
-        const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
+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(', ');
+    //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>
-        );
-    });
+    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>
+    );
 }
-/** to get typed keys use getDropdownEX */
-export const DropdownEX = getDropdownEX();
+
+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/index.ts

@@ -19,6 +19,7 @@ export * from './kwizoverflow';
 export * from './list';
 export * from './loading';
 export * from './menu';
+export * from './merge-text';
 export * from './please-wait';
 export * from './progress-bar';
 export * from './prompt';
@@ -29,3 +30,4 @@ export * from './svg';
 export * from './toolbar';
 export * from './vertical';
 export * from './vertical-content';
+

package/src/controls/input.tsx

@@ -112,7 +112,7 @@ export const InputNumberEx: React.FunctionComponent<React.PropsWithChildren<INum
         const isValid = props.required ? !isNullOrNaN(asNumber) : isNullOrUndefined(asNumber) || !isNaN(asNumber);
         setIsValid(isValid);
         props.onChange(isValid ? asNumber : null);
-    }, [props.allowDecimals]);
+    }, [props.allowDecimals, props.onChange, props.required]);
 
     const passProps: IProps = { ...props, defaultValue: undefined, value: undefined, onChange: undefined };
 

package/src/controls/list.tsx

@@ -1,6 +1,7 @@
 import { makeStyles, tokens } from '@fluentui/react-components';
 import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
 import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context-internal';
 import { KnownClassNames, mixins } from '../styles/styles';
 import { Horizontal } from './horizontal';
 import { Section } from './section';
@@ -85,8 +86,9 @@ interface IProps {
 }
 
 export const ListEx = (props: IProps) => {
-
+    const ctx = useKWIZFluentContext();
     const cssNames = useStyles();
+    const isDark = ctx.dark === true || props.dark === true;
 
     const listItemElm = (item: iListItem) => <Horizontal key={item.key} css={[cssNames.listItem, item.selected && cssNames.listItemSelected]} onClick={item.onClick}>
         {item.media && <Section css={[cssNames.media]} onClick={(e) => {
@@ -94,7 +96,7 @@ export const ListEx = (props: IProps) => {
                 e.stopPropagation();//media may have its on onclick
         }}>{
                 isString(item.media)
-                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${props.dark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
+                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${isDark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
                     : item.media
             }</Section>}
         <Vertical main css={[cssNames.listItemBody]}>

package/src/controls/merge-text.tsx

@@ -0,0 +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>;
+}

package/src/controls/search.tsx

@@ -11,12 +11,8 @@ const useStyles = makeStyles({
     main: mixins.main,
     clickable: mixins.clickable,
     root: {
-        paddingLeft: 0
     },
     searchIcon: {
-        position: "absolute",
-        left: '5px',
-        top: '5px'
     },
 })
 

package/src/controls/section.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, mergeClasses, Portal, tokens } from '@fluentui/react-components';
-import { isFunction, isNotEmptyArray } from '@kwiz/common';
+import { isFunction, isNotEmptyArray, isNotEmptyString } from '@kwiz/common';
 import React from 'react';
 import { useKWIZFluentContext } from '../helpers/context-internal';
 import { KnownClassNames, mixins, useCommonStyles } from '../styles/styles';
@@ -15,7 +15,10 @@ const useStyles = makeStyles({
     right: {
         ...mixins.float,
         float: "right",
-        marginRight: tokens.spacingHorizontalXXL
+        marginLeft: tokens.spacingHorizontalXXL
+    },
+    selfCentered: {
+        alignSelf: "center"
     }
 });
 
@@ -31,6 +34,7 @@ export interface ISectionProps {
     right?: boolean;
     /** true - will add css position fixed. portal will also wrap it in a portal. */
     fullscreen?: boolean | "portal";
+    centerSelf?: boolean;
 }
 
 export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<ISectionProps>>((props, ref) => {
@@ -39,13 +43,21 @@ export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<
     const cssNames = useStyles();
     let css: string[] = [KnownClassNames.section];
     if (props.main) css.push(cssNames.main);
+    if (props.centerSelf) css.push(cssNames.selfCentered);
     if (isFunction(props.onClick))
         css.push(cssNames.clickable);
 
-    if (props.left) css.push(cssNames.left);
-    else if (props.right) css.push(cssNames.right);
+    if (props.left) {
+        css.push(cssNames.left);
+        css.push(KnownClassNames.left);
+    }
+    else if (props.right) {
+        css.push(cssNames.right);
+        css.push(KnownClassNames.right);
+    }
 
-    if (isNotEmptyArray(props.css)) css.push(...props.css);
+    //a css class might have space and  multiuple classes in it
+    if (isNotEmptyArray(props.css)) props.css.filter(c => isNotEmptyString(c)).forEach(c => css.push(...c.split(" ")));
     if (props.fullscreen) css.push(commonStyles.fullscreen);
     const control = <div ref={ref} {...(props.rootProps || {})} title={props.title} style={props.style}
         className={mergeClasses(...css)}

package/src/controls/svg.tsx

@@ -121,6 +121,14 @@ export const GetSVGSplitIcon = (props: { size: number }) => {
 </svg>`;
 }
 
+export function GetSVGCopyIcon(props: { size: number }) {
+    return (
+        `<svg fill="var(--colorNeutralForeground1)" width="${props.size}px" height="${props.size}px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"></path>
+        </svg>`
+    )
+}
+
 export function IconToSVG(icon: JSX.Element) {
     const iconDiv = document.createElement('div');
     const root = createRoot(iconDiv);

package/src/controls/toolbar.tsx

@@ -1,6 +1,6 @@
 import { Toolbar, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components';
 import React from 'react';
-import { useCommonStyles } from '../styles/styles';
+import { KnownClassNames } from '../styles/styles';
 import { KWIZOverflow } from './kwizoverflow';
 
 interface IProps {
@@ -10,8 +10,6 @@ interface IProps {
     sideButtons?: JSX.Element;
 }
 export const ToolbarEX: React.FunctionComponent<IProps> = (props) => {
-    const commonCssNames = useCommonStyles();
-
     let elements: { id: string, priority?: number, elm: JSX.Element, overflowElement?: JSX.Element }[] = [];
     props.buttonGroups.forEach((group, groupIndex) => {
         group.forEach((button, buttonIndex) => {
@@ -32,7 +30,7 @@ export const ToolbarEX: React.FunctionComponent<IProps> = (props) => {
     });
 
     return (
-        <KWIZOverflow className={commonCssNames.printHide}
+        <KWIZOverflow className={KnownClassNames.printHide}
             items={elements}
             getKey={e => e.id}
             renderItem={(e, i, overflow) => overflow && e.overflowElement || e.elm}

package/src/controls/vertical.tsx

@@ -10,12 +10,18 @@ const useStyles = makeStyles({
         flexDirection: 'column'
     },
     wrap: mixins.wrap,
-    nogap: mixins.nogap
+    nogap: mixins.nogap,
+    vCentered: {
+        justifyContent: "center"
+    },
+
 })
 
 interface IProps extends ISectionProps {
     wrap?: boolean;
     nogap?: boolean;
+    /** vertical centered */
+    vCentered?: boolean;
 }
 export const Vertical = React.forwardRef<HTMLDivElement, React.PropsWithChildren<IProps>>((props, ref) => {
     const cssNames = useStyles();
@@ -26,6 +32,8 @@ export const Vertical = React.forwardRef<HTMLDivElement, React.PropsWithChildren
         css.push(cssNames.wrap);
     if (props.nogap)
         css.push(cssNames.nogap);
+    if (props.vCentered)
+        css.push(cssNames.vCentered);
 
     if (isNotEmptyArray(props.css)) css.push(...props.css);
 

package/src/helpers/context-const.ts

@@ -22,6 +22,8 @@ export interface iKWIZFluentContext {
      * @default 'rounded'
      */
     buttonShape?: 'rounded' | 'circular' | 'square';
+    /** true if using dark theme */
+    dark?: boolean;
 }
 
 //create context

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,