@kwiz/fluentui 1.0.73 → 1.0.75

package/src/controls/toolbar.tsx

@@ -1,47 +1,47 @@
-import { Toolbar, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components';
-import React from 'react';
-import { KnownClassNames } from '../styles/styles';
-import { KWIZOverflow } from './kwizoverflow';
-
-interface IProps {
-    /** toolbar buttons that may render or render in overflow */
-    buttonGroups: { elm: JSX.Element, overflowElement?: JSX.Element }[][];
-    /** side buttons that will always render, never overflow */
-    sideButtons?: JSX.Element;
-}
-export const ToolbarEX: React.FunctionComponent<IProps> = (props) => {
-    let elements: { id: string, priority?: number, elm: JSX.Element, overflowElement?: JSX.Element }[] = [];
-    props.buttonGroups.forEach((group, groupIndex) => {
-        group.forEach((button, buttonIndex) => {
-            const mapped = { ...button, id: `m${groupIndex}-${buttonIndex}` };
-            if (buttonIndex === 0 && groupIndex > 0 && props.buttonGroups[groupIndex - 1].length > 0) {
-                //first button, not first group, and previous group was not empty
-                //add divider
-                mapped.overflowElement = mapped.overflowElement || mapped.elm;
-                //this way if button rendes it is with the divider, but if it is in overflow - there will be no divider
-                mapped.elm = <span>
-                    <ToolbarDivider style={{ display: 'inline-flex' }} />
-                    {mapped.elm}
-                </span>;
-
-            }
-            elements.push(mapped);
-        })
-    });
-
-    return (
-        <KWIZOverflow className={KnownClassNames.printHide}
-            items={elements}
-            getKey={e => e.id}
-            renderItem={(e, i, overflow) => overflow && e.overflowElement || e.elm}
-            getPriority={e => e.priority || -1}
-            groupWrapper={children => <Toolbar aria-label="Default" style={{ justifyContent: "space-between" }}>
-                <ToolbarGroup role="presentation">
-                    {children}
-                </ToolbarGroup>
-                <ToolbarGroup role="presentation">
-                    {props.sideButtons}
-                </ToolbarGroup>
-            </Toolbar>}
-        />);
+import { Toolbar, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components';
+import React from 'react';
+import { KnownClassNames } from '../styles/styles';
+import { KWIZOverflow } from './kwizoverflow';
+
+interface IProps {
+    /** toolbar buttons that may render or render in overflow */
+    buttonGroups: { elm: JSX.Element, overflowElement?: JSX.Element }[][];
+    /** side buttons that will always render, never overflow */
+    sideButtons?: JSX.Element;
+}
+export const ToolbarEX: React.FunctionComponent<IProps> = (props) => {
+    let elements: { id: string, priority?: number, elm: JSX.Element, overflowElement?: JSX.Element }[] = [];
+    props.buttonGroups.forEach((group, groupIndex) => {
+        group.forEach((button, buttonIndex) => {
+            const mapped = { ...button, id: `m${groupIndex}-${buttonIndex}` };
+            if (buttonIndex === 0 && groupIndex > 0 && props.buttonGroups[groupIndex - 1].length > 0) {
+                //first button, not first group, and previous group was not empty
+                //add divider
+                mapped.overflowElement = mapped.overflowElement || mapped.elm;
+                //this way if button rendes it is with the divider, but if it is in overflow - there will be no divider
+                mapped.elm = <span>
+                    <ToolbarDivider style={{ display: 'inline-flex' }} />
+                    {mapped.elm}
+                </span>;
+
+            }
+            elements.push(mapped);
+        })
+    });
+
+    return (
+        <KWIZOverflow className={KnownClassNames.printHide}
+            items={elements}
+            getKey={e => e.id}
+            renderItem={(e, i, overflow) => overflow && e.overflowElement || e.elm}
+            getPriority={e => e.priority || -1}
+            groupWrapper={children => <Toolbar aria-label="Default" style={{ justifyContent: "space-between" }}>
+                <ToolbarGroup role="presentation">
+                    {children}
+                </ToolbarGroup>
+                <ToolbarGroup role="presentation">
+                    {props.sideButtons}
+                </ToolbarGroup>
+            </Toolbar>}
+        />);
 }

package/src/controls/vertical-content.tsx

@@ -1,50 +1,50 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-components';
-import { isNotEmptyArray } from '@kwiz/common';
-import React from 'react';
-import { useWindowSize } from '../helpers';
-
-const useStyles = makeStyles({
-    verticalContainer: {
-        position: "relative",
-        ['& > div']: {
-            position: "absolute",
-            transform: "rotate(90deg)"
-        }
-    }
-});
-
-interface IProps {
-    css?: string[];
-}
-export const VerticalContent: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const classes = useStyles();
-    let css: string[] = [classes.verticalContainer];
-    const size = useWindowSize();
-
-    let div = React.useRef();
-    let rotate = React.useRef();
-
-    if (isNotEmptyArray(props.css)) css.push(...props.css);
-
-    React.useEffect(() => {
-        if (div.current && rotate.current) {
-            let rootDiv = (div.current as HTMLDivElement);
-            let rotateDiv = (rotate.current as HTMLDivElement);
-            rootDiv.style.height = `${rotateDiv.clientWidth}px`;
-            rootDiv.style.width = `${rotateDiv.clientHeight}px`;
-            rootDiv.style.minHeight = `${rotateDiv.clientWidth}px`;
-            rootDiv.style.minWidth = `${rotateDiv.clientHeight}px`;
-
-            rotateDiv.style.top = `${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
-            rotateDiv.style.left = `-${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
-        }
-    }, [div, rotate, size.height, size.width]);
-
-    return (
-        <div ref={div} className={mergeClasses(...css)}>
-            <div ref={rotate}>
-                {props.children}
-            </div>
-        </div>
-    );
+import { makeStyles, mergeClasses } from '@fluentui/react-components';
+import { isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { useWindowSize } from '../helpers';
+
+const useStyles = makeStyles({
+    verticalContainer: {
+        position: "relative",
+        ['& > div']: {
+            position: "absolute",
+            transform: "rotate(90deg)"
+        }
+    }
+});
+
+interface IProps {
+    css?: string[];
+}
+export const VerticalContent: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const classes = useStyles();
+    let css: string[] = [classes.verticalContainer];
+    const size = useWindowSize();
+
+    let div = React.useRef();
+    let rotate = React.useRef();
+
+    if (isNotEmptyArray(props.css)) css.push(...props.css);
+
+    React.useEffect(() => {
+        if (div.current && rotate.current) {
+            let rootDiv = (div.current as HTMLDivElement);
+            let rotateDiv = (rotate.current as HTMLDivElement);
+            rootDiv.style.height = `${rotateDiv.clientWidth}px`;
+            rootDiv.style.width = `${rotateDiv.clientHeight}px`;
+            rootDiv.style.minHeight = `${rotateDiv.clientWidth}px`;
+            rootDiv.style.minWidth = `${rotateDiv.clientHeight}px`;
+
+            rotateDiv.style.top = `${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
+            rotateDiv.style.left = `-${(rotateDiv.clientWidth - rotateDiv.clientHeight) / 2}px`;
+        }
+    }, [div, rotate, size.height, size.width]);
+
+    return (
+        <div ref={div} className={mergeClasses(...css)}>
+            <div ref={rotate}>
+                {props.children}
+            </div>
+        </div>
+    );
 }

package/src/controls/vertical.tsx

@@ -1,43 +1,43 @@
-import { makeStyles } from '@fluentui/react-components';
-import { isNotEmptyArray } from '@kwiz/common';
-import React from 'react';
-import { KnownClassNames, mixins } from '../styles/styles';
-import { ISectionProps, Section } from './section';
-
-const useStyles = makeStyles({
-    vertical: {
-        ...mixins.flex,
-        flexDirection: 'column'
-    },
-    wrap: mixins.wrap,
-    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();
-    let css: string[] = [KnownClassNames.vertical];
-
-    css.push(cssNames.vertical);
-    if (props.wrap)
-        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);
-
-    return (
-        <Section {...props} css={css} />
-    );
+import { makeStyles } from '@fluentui/react-components';
+import { isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames, mixins } from '../styles/styles';
+import { ISectionProps, Section } from './section';
+
+const useStyles = makeStyles({
+    vertical: {
+        ...mixins.flex,
+        flexDirection: 'column'
+    },
+    wrap: mixins.wrap,
+    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();
+    let css: string[] = [KnownClassNames.vertical];
+
+    css.push(cssNames.vertical);
+    if (props.wrap)
+        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);
+
+    return (
+        <Section {...props} css={css} />
+    );
 });

package/src/helpers/block-nav.tsx

@@ -1,89 +1,89 @@
-import { IDictionary, isNotEmptyArray, isNullOrEmptyString, jsonClone, objectsEqual } from "@kwiz/common";
-import { useCallback, useEffect } from "react";
-import { IPrompterProps, Prompter } from "../controls/prompt";
-import { useEffectOnlyOnMount, useStateEX } from "./hooks";
-
-export interface iBlockNav {
-    setMessage: (id: string, message?: string) => void;
-    onNav: (nav: () => void) => void;
-    navPrompt?: JSX.Element;
-
-}
-/** 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(): iBlockNav {
-    const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX<IDictionary<string>>({});
-    const [_prompt, setPrompt] = useStateEX<IPrompterProps>(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: () => void) => {
-        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
-                        ? <ul>
-                            {messages.map((m, i) => <li key={`m${i}`}>{m}</li>)}
-                        </ul>
-                        : <p>{messages[0]}</p>,
-                    onCancel: () => setPrompt(null),
-                    onOK: () => {
-                        setPrompt(null);
-                        setBlockNavMessages({});//clear messages
-                        nav();
-                    }
-                });
-            }, 1);
-        }
-        else nav();
-    }, useEffectOnlyOnMount);
-
-
-    useEffect(() => {
-        function handleBeforeUnload(e: BeforeUnloadEvent) {
-            //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: string, message?: string) => {
-            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 ? <Prompter {..._prompt} /> : undefined
-    };
+import { IDictionary, isNotEmptyArray, isNullOrEmptyString, jsonClone, objectsEqual } from "@kwiz/common";
+import { useCallback, useEffect } from "react";
+import { IPrompterProps, Prompter } from "../controls/prompt";
+import { useEffectOnlyOnMount, useStateEX } from "./hooks";
+
+export interface iBlockNav {
+    setMessage: (id: string, message?: string) => void;
+    onNav: (nav: () => void) => void;
+    navPrompt?: JSX.Element;
+
+}
+/** 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(): iBlockNav {
+    const [, setBlockNavMessages, blockNavMessagesRef] = useStateEX<IDictionary<string>>({});
+    const [_prompt, setPrompt] = useStateEX<IPrompterProps>(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: () => void) => {
+        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
+                        ? <ul>
+                            {messages.map((m, i) => <li key={`m${i}`}>{m}</li>)}
+                        </ul>
+                        : <p>{messages[0]}</p>,
+                    onCancel: () => setPrompt(null),
+                    onOK: () => {
+                        setPrompt(null);
+                        setBlockNavMessages({});//clear messages
+                        nav();
+                    }
+                });
+            }, 1);
+        }
+        else nav();
+    }, useEffectOnlyOnMount);
+
+
+    useEffect(() => {
+        function handleBeforeUnload(e: BeforeUnloadEvent) {
+            //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: string, message?: string) => {
+            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 ? <Prompter {..._prompt} /> : undefined
+    };
 }

package/src/helpers/context-const.ts

@@ -1,30 +1,30 @@
-import React from "react";
-export interface iKWIZFluentContext {
-    /**
-     * Where the portal children are mounted on DOM
-     *
-     * @default a new element on document.body without any styling
-     */
-    mountNode?: HTMLElement | null | {
-        element?: HTMLElement | null;
-        className?: string;
-    }
-    /**
-     * Controls the colors and borders of the input.
-     * 
-     * @default 'underline'
-     */
-    inputAppearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
-
-    /**
-     * A button can be rounded, circular, or square.
-     *
-     * @default 'rounded'
-     */
-    buttonShape?: 'rounded' | 'circular' | 'square';
-    /** true if using dark theme */
-    dark?: boolean;
-}
-
-//create context
+import React from "react";
+export interface iKWIZFluentContext {
+    /**
+     * Where the portal children are mounted on DOM
+     *
+     * @default a new element on document.body without any styling
+     */
+    mountNode?: HTMLElement | null | {
+        element?: HTMLElement | null;
+        className?: string;
+    }
+    /**
+     * Controls the colors and borders of the input.
+     * 
+     * @default 'underline'
+     */
+    inputAppearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
+
+    /**
+     * A button can be rounded, circular, or square.
+     *
+     * @default 'rounded'
+     */
+    buttonShape?: 'rounded' | 'circular' | 'square';
+    /** true if using dark theme */
+    dark?: boolean;
+}
+
+//create context
 export const KWIZFluentContext = React.createContext<iKWIZFluentContext>(null);