@kwiz/fluentui 1.0.21 → 1.0.24

package/dist/helpers/hooks.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, Toast, ToastBody, Toaster, ToastFooter, ToastTitle, useId, useToastController } from "@fluentui/react-components";
+import { isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GetLogger } from "../_modules/config";
+import { Prompter } from "../controls/prompt";
+import { KnownClassNames } from "../styles/styles";
+import { useKWIZFluentContext } from "./context";
+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(initialValue, options) {
+    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([]);
+    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]);
+    let setValueWithCheck = !options.skipUpdateIfSame ? setValueInState : (newValue) => {
+        logger.groupSync('conditional value change', log => {
+            if (logger.getLevel() === LoggerLevel.VERBOSE) {
+                log('old: ' + jsonStringify(currentValue.current));
+                log('new: ' + jsonStringify(newValue));
+            }
+            if (!objectsEqual(newValue, currentValue.current)) {
+                log(`value changed`);
+                setValueInState(newValue);
+            }
+            else {
+                log(`value unchanged`);
+                resolvePromises();
+            }
+        });
+    };
+    let setValueWithEvents = wrapFunction(setValueWithCheck, {
+        before: newValue => isFunction(options.onChange) ? options.onChange(newValue) : newValue,
+        after: newValue => currentValue.current = newValue
+    });
+    const setValue = useCallback((newState) => new Promise(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];
+}
+export function useTrackFocus(props) {
+    const wrapperDiv = props.ref || useRef(null);
+    useEffect(() => {
+        function focusIn(e) {
+            let elm = e.target; //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: 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 useIsInPrint() {
+    // Initialize state with false
+    const [printMode, setPrintMode] = useState(false);
+    useEffect(() => {
+        function forcePrint(e) {
+            if (e.ctrlKey && e.shiftKey && e.altKey) {
+                if (e.key.toLocaleLowerCase() === "q") {
+                    document.body.classList.remove(KnownClassNames.print);
+                    handlePrint(e, false);
+                }
+                else {
+                    console.warn('forced print mode - to exit refresh to ctrl+shift+alt+q');
+                    document.body.classList.add(KnownClassNames.print);
+                    handlePrint(e, true);
+                }
+            }
+        }
+        // Handler to call on printing
+        function handlePrint(e, force) {
+            if (force === true)
+                setPrintMode(true);
+            else if (window.matchMedia) {
+                var mediaQueryList = window.matchMedia('print');
+                if (mediaQueryList.matches) {
+                    setPrintMode(true);
+                }
+                else {
+                    setPrintMode(false);
+                }
+            }
+        }
+        // Add event listener
+        window.addEventListener("print", handlePrint);
+        if (isDebug())
+            window.addEventListener("keydown", forcePrint);
+        // Call handler right away so state gets updated with initial printing state
+        handlePrint();
+        // Remove event listener on cleanup
+        return () => {
+            window.removeEventListener("print", handlePrint);
+            if (isDebug())
+                window.removeEventListener("keydown", forcePrint);
+        };
+    }, useEffectOnlyOnMount);
+    return printMode;
+}
+/** 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 useBlockNav() {
+    const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX({});
+    const [prompt, setPrompt] = useStateEX(null);
+    const getMessagesArr = useCallback(() => {
+        return Object.keys(blockNavMessagesRef.current).map(id => blockNavMessagesRef.current[id]);
+    }, useEffectOnlyOnMount);
+    const getMessages = useCallback(() => {
+        return getMessagesArr().join();
+    }, useEffectOnlyOnMount);
+    const onNav = useCallback((nav) => {
+        let messages = getMessagesArr();
+        if (isNotEmptyArray(messages)) {
+            //need to release react to re-render the prompt
+            window.setTimeout(() => {
+                //prompt, if ok - clear messages and nav.
+                setPrompt({
+                    okButtonText: "Leave",
+                    cancelButtonText: "Cancel",
+                    title: "Leave page?",
+                    children: messages.length > 1
+                        ? _jsx("ul", { children: messages.map((m, i) => _jsx("li", { children: m }, `m${i}`)) })
+                        : _jsx("p", { children: messages[0] }),
+                    onCancel: () => setPrompt(null),
+                    onOK: () => {
+                        setPrompt(null);
+                        setBlockNavMessages({}); //clear messages
+                        nav();
+                    }
+                });
+            }, 1);
+        }
+        else
+            nav();
+    }, useEffectOnlyOnMount);
+    useEffect(() => {
+        function handleBeforeUnload(e) {
+            //todo: use blockMessageRef.current so that we don't have to re-register every time message changes.
+            //otherwise we would have to add blockMessage as a dependency for this useEffect
+            const message = getMessages();
+            if (!isNullOrEmptyString(message)) {
+                e.preventDefault();
+                e.returnValue = message;
+            }
+        }
+        // Add event listener
+        window.addEventListener("beforeunload", handleBeforeUnload);
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+    }, useEffectOnlyOnMount);
+    return {
+        setMessage: (id, message) => {
+            let current = jsonClone(blockNavMessagesRef.current);
+            if (isNullOrEmptyString(message))
+                delete current[id];
+            else
+                current[id] = message;
+            if (!objectsEqual(current, blockNavMessagesRef.current))
+                setBlockNavMessages(current);
+        },
+        // clearMessages: () => {
+        //     setBlockNavMessages({});
+        // },
+        // getMessages,
+        // getMessagesArr,
+        onNav,
+        navPrompt: prompt ? _jsx(Prompter, Object.assign({}, prompt)) : undefined
+    };
+}
+export function useKeyDown(options) {
+    let elm = options.elm || document;
+    useEffect(() => {
+        let handler = (e) => {
+            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]);
+}
+export function useToast() {
+    const ctx = useKWIZFluentContext();
+    const toasterId = useId("toaster");
+    const { dispatchToast } = useToastController(toasterId);
+    return {
+        control: _jsx(Toaster, { mountNode: ctx.mountNode, toasterId: toasterId }),
+        dispatch: (info) => {
+            dispatchToast(_jsxs(Toast, { children: [info.title && _jsx(ToastTitle, { action: info.titleAction ? _jsx(Link, { onClick: info.titleAction.onClick, children: info.titleAction.text }) : undefined, children: info.title }), info.body && _jsx(ToastBody, { subtitle: info.subtitle, children: info.body }), isNotEmptyArray(info.footerActions) &&
+                        _jsx(ToastFooter, { children: info.footerActions.map((a, i) => _jsx(Link, { onClick: a.onClick, children: a.text }, `l${i}`)) })] }), { intent: info.intent || "info" });
+        }
+    };
+}
+export function useKWIZFluentContextProvider(options) {
+    let v = options && options.ctx || {};
+    const [kwizFluentContext, setKwizFluentContext] = useState(v);
+    useEffect(() => {
+        // 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(Object.assign(Object.assign({}, v), { mountNode: options.root.current }));
+    }, [options.root]);
+    return kwizFluentContext;
+}
+//# sourceMappingURL=hooks.js.map

package/dist/helpers/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export * from './controls/accordion';
+export * from './controls/button';
+export * from './controls/centered';
+export * from './controls/date';
+export * from './controls/dropdown';
+export * from './controls/error-boundary';
+export * from './controls/field-editor';
+export * from './controls/file-upload';
+export * from './controls/horizontal';
+export * from './controls/input';
+export * from './controls/kwizoverflow';
+export * from './controls/list';
+export * from './controls/loading';
+export * from './controls/please-wait';
+export * from './controls/prompt';
+export * from './controls/search';
+export * from './controls/section';
+export * from './controls/svg';
+export * from './controls/toolbar';
+export * from './controls/vertical';
+export * from './controls/vertical-content';
+export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
+export type { iKWIZFluentContext } from './helpers/context';
+export * from './helpers/drag-drop/exports';
+export * from './helpers/hooks';
+export { KnownClassNames } from './styles/styles';

package/dist/index.js

@@ -0,0 +1,26 @@
+export * from './controls/accordion';
+export * from './controls/button';
+export * from './controls/centered';
+export * from './controls/date';
+export * from './controls/dropdown';
+export * from './controls/error-boundary';
+export * from './controls/field-editor';
+export * from './controls/file-upload';
+export * from './controls/horizontal';
+export * from './controls/input';
+export * from './controls/kwizoverflow';
+export * from './controls/list';
+export * from './controls/loading';
+export * from './controls/please-wait';
+export * from './controls/prompt';
+export * from './controls/search';
+export * from './controls/section';
+export * from './controls/svg';
+export * from './controls/toolbar';
+export * from './controls/vertical';
+export * from './controls/vertical-content';
+export { KWIZFluentContext, useKWIZFluentContext } from './helpers/context';
+export * from './helpers/drag-drop/exports';
+export * from './helpers/hooks';
+export { KnownClassNames } from './styles/styles';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE5E,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/styles/styles.d.ts

@@ -0,0 +1,19 @@
+import { GriffelStyle } from "@fluentui/react-components";
+export declare namespace mixins {
+    const main: GriffelStyle;
+    const clickable: GriffelStyle;
+    const float: GriffelStyle;
+    const flex: GriffelStyle;
+    const wrap: GriffelStyle;
+    const nogap: GriffelStyle;
+    const ellipsis: GriffelStyle;
+}
+export declare const KnownClassNames: {
+    print: string;
+    section: string;
+    vertical: string;
+    horizontal: string;
+    list: string;
+};
+export declare const useCommonStyles: () => Record<"printShow" | "printHide", string>;
+export declare const widthMedium = 360;

package/dist/styles/styles.js

@@ -0,0 +1,79 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+export var mixins;
+(function (mixins) {
+    mixins.main = {
+        flexShrink: 1,
+        flexGrow: 1
+    };
+    mixins.clickable = {
+        cursor: "pointer",
+        ['& label']: {
+            cursor: "pointer"
+        }
+    };
+    const box = {
+        padding: tokens.spacingHorizontalM,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: tokens.shadow4,
+        margin: tokens.spacingHorizontalXXS
+    };
+    mixins.float = Object.assign(Object.assign({}, box), { 
+        /** make buttons work */
+        position: "relative", 
+        /** make buttons work */
+        maxWidth: "33%", 
+        /** stop bleeding into page */
+        overflowX: "hidden", ['& img']: {
+            maxWidth: "100%"
+        } });
+    mixins.flex = {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        rowGap: tokens.spacingVerticalM,
+        columnGap: tokens.spacingVerticalM,
+    };
+    mixins.wrap = {
+        flexWrap: "wrap"
+    };
+    mixins.nogap = {
+        rowGap: 0,
+        columnGap: 0
+    };
+    mixins.ellipsis = {
+        whiteSpace: 'nowrap',
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    };
+    // export const box: GriffelStyle = {
+    // }
+})(mixins || (mixins = {}));
+export const KnownClassNames = {
+    print: 'print-root',
+    section: 'kfui-section',
+    vertical: 'kfui-vertical',
+    horizontal: 'kfui-horizontal',
+    list: 'kfui-list'
+};
+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'
+        }
+    },
+});
+export const widthMedium = 360;
+//export const widthWide = 520;
+//# sourceMappingURL=styles.js.map

package/dist/styles/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,KAAQ,MAAM,CAsDnB;AAtDD,WAAc,MAAM;IACH,WAAI,GAAiB;QAC9B,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC;KACd,CAAC;IACW,gBAAS,GAAiB;QACnC,MAAM,EAAE,SAAS;QACjB,CAAC,SAAS,CAAC,EAAE;YACT,MAAM,EAAE,SAAS;SACpB;KACJ,CAAA;IACD,MAAM,GAAG,GAAiB;QACtB,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,YAAY,EAAE,MAAM,CAAC,kBAAkB;QACvC,SAAS,EAAE,MAAM,CAAC,OAAO;QACzB,MAAM,EAAE,MAAM,CAAC,oBAAoB;KACtC,CAAA;IACY,YAAK,mCACX,GAAG;QACN,wBAAwB;QACxB,QAAQ,EAAE,UAAU;QACpB,wBAAwB;QACxB,QAAQ,EAAE,KAAK;QACf,8BAA8B;QAC9B,SAAS,EAAE,QAAQ,EAEnB,CAAC,OAAO,CAAC,EAAE;YACP,QAAQ,EAAE,MAAM;SACnB,GACJ,CAAA;IAEY,WAAI,GAAiB;QAC9B,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM,CAAC,gBAAgB;QAC/B,SAAS,EAAE,MAAM,CAAC,gBAAgB;KACrC,CAAA;IAEY,WAAI,GAAiB;QAC9B,QAAQ,EAAE,MAAM;KACnB,CAAA;IACY,YAAK,GAAiB;QAC/B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACf,CAAA;IACY,eAAQ,GAAiB;QAClC,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B,CAAA;IAED,qCAAqC;IACrC,IAAI;AACR,CAAC,EAtDa,MAAM,KAAN,MAAM,QAsDnB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,iBAAiB;IAC7B,IAAI,EAAE,WAAW;CACpB,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAC;IACtC,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,OAAO;SACnB;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,OAAO;SACnB;KACJ;IACD,SAAS,EAAE;QACP,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,iBAAiB;SAC7B;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,iBAAiB;SAC7B;KACJ;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAC/B,+BAA+B"}

package/dist/styles/theme.d.ts

@@ -0,0 +1,6 @@
+import { BrandVariants, Theme } from "@fluentui/react-components";
+export interface iThemeContext {
+    teams?: boolean;
+    dark?: boolean;
+}
+export declare function getTheme(ctx: iThemeContext, t?: BrandVariants): Theme;

package/dist/styles/theme.js

@@ -0,0 +1,77 @@
+import { createDarkTheme, createLightTheme, teamsDarkTheme, teamsLightTheme } from "@fluentui/react-components";
+export function getTheme(ctx, t = kThemeDefault) {
+    return ctx.dark
+        ? getDarkTheme(ctx, t)
+        : getLightTheme(ctx, t);
+}
+const kThemeDefault = {
+    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 = {
+    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 = {
+    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, t = kThemeDefault) {
+    if (ctx.teams)
+        return teamsLightTheme;
+    //return jsonClone(webLightTheme);
+    const lightTheme = Object.assign({}, createLightTheme(t));
+    return lightTheme;
+}
+function getDarkTheme(ctx, t = kThemeDefault) {
+    if (ctx.teams)
+        return teamsDarkTheme;
+    //return jsonClone(webDarkTheme);
+    const darkTheme = Object.assign({}, createDarkTheme(t));
+    darkTheme.colorBrandForeground1 = t[110];
+    darkTheme.colorBrandForeground2 = t[120];
+    return darkTheme;
+}
+//# sourceMappingURL=theme.js.map

package/dist/styles/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/styles/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,eAAe,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAOtI,MAAM,UAAU,QAAQ,CAAC,GAAkB,EAAE,IAAmB,aAAa;IACzE,OAAO,GAAG,CAAC,IAAI;QACX,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC;QACtB,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;AAChC,CAAC;AAGD,MAAM,aAAa,GAAkB;IACjC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,YAAY,GAAkB;IAChC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;CACjB,CAAC;AAEF,MAAM,eAAe,GAAkB;IACnC,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;CACjB,CAAC;AAEF,SAAS,aAAa,CAAC,GAAkB,EAAE,IAAmB,aAAa;IACvE,IAAI,GAAG,CAAC,KAAK;QAAE,OAAO,eAAe,CAAC;IACtC,kCAAkC;IAClC,MAAM,UAAU,qBACT,gBAAgB,CAAC,CAAC,CAAC,CACzB,CAAC;IACF,OAAO,UAAU,CAAC;AACtB,CAAC;AAED,SAAS,YAAY,CAAC,GAAkB,EAAE,IAAmB,aAAa;IACtE,IAAI,GAAG,CAAC,KAAK;QAAE,OAAO,cAAc,CAAC;IACrC,iCAAiC;IACjC,MAAM,SAAS,qBACR,eAAe,CAAC,CAAC,CAAC,CACxB,CAAC;IAEF,SAAS,CAAC,qBAAqB,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACzC,SAAS,CAAC,qBAAqB,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,SAAS,CAAC;AACrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.21",
+    "version": "1.0.24",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -59,6 +59,8 @@
         "@kwiz/common": "^1.0.58",
         "esbuild": "^0.19.12",
         "get-tsconfig": "^4.7.2",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "resolve-pkg-maps": "^1.0.0"
     },
     "peerDependencies": {

package/src/controls/dropdown.tsx

@@ -20,34 +20,39 @@ interface IProps<dataType, keyType extends string = string> extends ForwardProps
         options?: { key: keyType, value: string, data?: dataType }[]) => void;
 }
 
-/** issue: figure out how to use forward ref with typed controls */
-export function DropdownEXTypedNoForwardRef<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>) {
-    const ctx = useKWIZFluentContext();
-    const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
+/** 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 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 }} 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 }} 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>
+        );
+    });
 }
-
-export const DropdownEX = React.forwardRef(DropdownEXTypedNoForwardRef);
+/** to get typed keys use getDropdownEX */
+export const DropdownEX = getDropdownEX();