@kwiz/fluentui 1.0.78 → 1.0.79

package/src/controls/prompt.tsx

@@ -1,122 +0,0 @@
-import { Dialog, DialogActions, DialogBody, DialogContent, DialogModalType, DialogSurface, DialogTitle, DialogTrigger, useId } from '@fluentui/react-components';
-import { DismissRegular } from '@fluentui/react-icons';
-import { isNotEmptyArray, isNullOrEmptyString, noops, PushNoDuplicate, RemoveItemFromArr, stopEvent } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useKeyDown } from '../helpers/hooks-events';
-import { ButtonEX, ButtonEXProps, ButtonEXSecondary } from './button';
-
-export interface IPrompterProps {
-    hideOk?: boolean;
-    hideCancel?: boolean;
-    showCancelInTitle?: boolean;
-    /** return false to prevent closing the dialog. */
-    onOK?: () => Promise<void> | void;
-    onCancel?: () => void;
-    /** OK */
-    okButtonText?: string;
-    /** Cancel */
-    cancelButtonText?: string;
-    title?: string | JSX.Element;
-    okButtonProps?: Partial<ButtonEXProps>;
-    cancelButtonProps?: Partial<ButtonEXProps>;
-    children?: JSX.Element;
-
-    /** allow to epand the dialog to be wider */
-    maxWidth?: number | string;
-
-    /** additional button actions at the bottom */
-    actions?: JSX.Element[];
-
-    /** dialog title actions */
-    titleActions?: JSX.Element[];
-    /** specify a specific mount node for this dialog */
-    mountNode?: HTMLElement | null | {
-        element?: HTMLElement | null;
-        className?: string;
-    }
-
-    modalType?: DialogModalType;
-    /** do not fire ok/cancel on esc/enter press */
-    disableKeyboardActions?: boolean;
-}
-const dialogsOrder: string[] = [];
-export const Prompter = React.forwardRef<HTMLDivElement, (IPrompterProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    const disableKeyboardActions = React.useRef(props.disableKeyboardActions);
-    disableKeyboardActions.current = props.disableKeyboardActions;
-
-    const myId = useId();
-    React.useEffect(() => {
-        PushNoDuplicate(dialogsOrder, myId);
-        //cleanup
-        return () => RemoveItemFromArr(dialogsOrder, myId);
-    }, [myId]);
-
-    const onOK = props.onOK || noops;
-    const onCancel = props.onCancel || noops;
-
-    let okProps: ButtonEXProps = {
-        ...(props.okButtonProps as any || {}),
-        onClick: () => onOK(),
-        title: props.okButtonText || 'OK'
-    };
-    let cancelProps: ButtonEXProps = {
-        ...(props.cancelButtonProps as any || {}),
-        onClick: () => onCancel(),
-        title: props.cancelButtonText || 'Cancel'
-    };
-
-    useKeyDown({
-        onEnter: (e) => {
-            const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
-            if (topMost && !disableKeyboardActions.current) {
-                stopEvent(e);
-                onOK();
-            }
-        },
-        onEscape: (e) => {
-            const topMost = dialogsOrder.indexOf(myId) === dialogsOrder.length - 1;
-            if (topMost && !disableKeyboardActions.current) {
-                stopEvent(e);
-                onCancel();
-            }
-        }
-    });
-
-    const actions: JSX.Element[] = [];
-    if (!props.hideOk) actions.push(<DialogTrigger key='ok' disableButtonEnhancement>
-        <ButtonEXSecondary {...okProps} />
-    </DialogTrigger>);
-    if (!props.hideCancel) actions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
-        <ButtonEXSecondary {...cancelProps} />
-    </DialogTrigger>);
-    if (isNotEmptyArray(props.actions))
-        actions.push(...props.actions);
-
-    const titleActions: JSX.Element[] = props.titleActions ? [...props.titleActions] : [];
-    if (props.showCancelInTitle)
-        titleActions.push(<DialogTrigger key='cancel' disableButtonEnhancement>
-            <ButtonEX {...cancelProps} icon={<DismissRegular />} />
-        </DialogTrigger>);
-
-
-    return (
-        <Dialog open modalType={props.modalType}>
-            <DialogSurface mountNode={props.mountNode || ctx.mountNode}
-                style={!isNullOrEmptyString(props.maxWidth) ? { maxWidth: props.maxWidth } : undefined}>
-                <DialogBody>
-                    {(!isNullOrEmptyString(props.title) || isNotEmptyArray(titleActions)) && <DialogTitle
-                        action={titleActions}
-                    >{props.title}</DialogTitle>}
-                    <DialogContent ref={ref}>
-                        {props.children}
-                    </DialogContent>
-                    {isNotEmptyArray(actions) && <DialogActions fluid={actions.length > 2}>
-                        {actions}
-                    </DialogActions>}
-                </DialogBody>
-            </DialogSurface>
-        </Dialog>
-    );
-});

package/src/controls/qrcode.tsx

@@ -1,37 +0,0 @@
-import { makeStyles } from '@fluentui/react-components';
-import { colorToHex } from '@kwiz/common';
-import QRCode from 'qrcode';
-import React, { useEffect, useRef } from 'react';
-
-const useStyles = makeStyles({
-    center: {
-        justifyContent: 'center'
-    },
-})
-
-interface IProps {
-    value: string;
-    color?: string;
-    width?: number;
-    backgroundColor?: string;
-    foregroundColor?: string;
-}
-export const QRCodeEX: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const container = useRef<HTMLCanvasElement>();
-    useEffect(() => {
-        if (container.current) {
-            let dark = props.foregroundColor ? colorToHex(props.foregroundColor) : "#000000ff";
-            let light = props.backgroundColor ? colorToHex(props.backgroundColor) : "#ffffffff";
-            QRCode.toCanvas(container.current, props.value, {
-                color: {
-                    dark,
-                    light
-                },
-                width: props.width
-            });
-        }
-    }, [container]);
-    return (
-        <canvas ref={container} />
-    );
-}

package/src/controls/search.tsx

@@ -1,72 +0,0 @@
-import { Input, InputProps, makeStyles, mergeClasses } from '@fluentui/react-components';
-import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
-import { debounce, isNullOrEmptyString, isNullOrUndefined } from '@kwiz/common';
-import React, { useEffect, useRef } from 'react';
-import { GetLogger } from '../_modules/config';
-import { useEffectOnlyOnMount, useStateEX } from '../helpers';
-import { mixins } from '../styles/styles';
-const logger = GetLogger("Search");
-
-const useStyles = makeStyles({
-    main: mixins.main,
-    clickable: mixins.clickable,
-    root: {
-    },
-    searchIcon: {
-    },
-});
-
-interface IProps extends Omit<InputProps, "onChange"> {
-    main?: boolean;
-    /** number of seconds to debounce the deferred event */
-    delay?: number;
-    /** if changing the value in the caller - change this prop to reset */
-    resetValue?: string;
-    onChangeDeferred?: (newValue: string) => void;
-    onChange?: (newValue: string) => void;
-}
-
-/** value is set on first load. to change the value after it was first set - change the compoenet's key. */
-export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const cssNames = useStyles();
-
-    let delay = props.delay || 1;
-
-    let refonChangeDeferred = useRef(props.onChangeDeferred);
-    //keep updating the ref
-    React.useEffect(() => { refonChangeDeferred.current = props.onChangeDeferred; }, [props.onChangeDeferred]);
-
-    //cannot call debounce every render, since it won't be the same debounced instance...
-    var notifyParent = React.useCallback(debounce(v => {
-        logger.log(`Set: ${v}`);
-        //Call the latest ref - we don't want to call an old version of this function
-        refonChangeDeferred.current?.(v);
-    }, delay * 1000), [delay]);
-
-    const [currentValue, setCurrentValue] = useStateEX(props.value || props.defaultValue || "", { skipUpdateIfSame: true });
-    useEffect(() => {
-        if (!isNullOrUndefined(props.value))
-            setCurrentValue(props.value);
-    }, [props.value]);
-
-    var changeValue = React.useCallback((newValue: string) => {
-        newValue = newValue || "";//no null or undefined here
-        setCurrentValue(newValue);//keep our state updated in sync
-        props.onChange?.(newValue);//if parent is using search as managed control, keep it up to date in sync
-        notifyParent(newValue);//trigger a search async
-    }, useEffectOnlyOnMount);
-
-    return (
-        <Input {...props} autoFocus defaultValue={undefined} value={currentValue} onChange={(e, data) => {
-            changeValue(data.value);
-        }}
-            className={mergeClasses(cssNames.root, props.main && cssNames.main)}
-            contentBefore={!isNullOrEmptyString(currentValue) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
-            contentAfter={isNullOrEmptyString(currentValue)
-                ? undefined
-                : <DismissRegular className={cssNames.clickable} onClick={() => {
-                    changeValue("");
-                }} />
-            } />
-    );
-}

package/src/controls/section.tsx

@@ -1,134 +0,0 @@
-import { makeStyles, mergeClasses, Portal, tokens } from '@fluentui/react-components';
-import { getScrollParent, isFunction, isNotEmptyArray, isNotEmptyString, isNullOrUndefined } from '@kwiz/common';
-import React, { useEffect, useState } from 'react';
-import { useElementSize, useRefWithState } from '../helpers';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { KnownClassNames, mixins, useCommonStyles } from '../styles/styles';
-
-const useStyles = makeStyles({
-    main: mixins.main,
-    clickable: mixins.clickable,
-    left: {
-        ...mixins.float,
-        float: "left",
-        marginRight: tokens.spacingHorizontalXXL
-    },
-    right: {
-        ...mixins.float,
-        float: "right",
-        marginLeft: tokens.spacingHorizontalXXL
-    },
-    sticky: {
-        ...mixins.box,
-        position: "sticky",
-        top: 0,
-        overflow: "auto",
-        height: "fit-content",
-        maxHeight: "fit-content"
-    },
-    selfCentered: {
-        alignSelf: "center"
-    }
-});
-
-
-export interface ISectionProps {
-    main?: boolean;
-    css?: string[];
-    style?: React.CSSProperties;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    rootProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    title?: string;
-    left?: boolean;
-    right?: boolean;
-    /** set height to match scroll parent's height, and stick to top */
-    sticky?: 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) => {
-    const ctx = useKWIZFluentContext();
-    const commonStyles = useCommonStyles();
-    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);
-        css.push(KnownClassNames.left);
-    }
-    else if (props.right) {
-        css.push(cssNames.right);
-        css.push(KnownClassNames.right);
-    }
-    else if (props.sticky) {
-        css.push(cssNames.sticky);
-    }
-
-    /** need scrollparent if we are sticky */
-    const [scrollParent, setScrollParent] = useState<HTMLElement>(null);
-    const divRef = useRefWithState<HTMLDivElement>();
-
-    //wait for my content to finish loading, it might change scrollparent
-    const mySize = useElementSize(divRef.ref.current);
-
-    useEffect(() => {
-        //setting the forwardRef 
-        if (!isNullOrUndefined(ref)) {
-            if (isFunction(ref)) ref(divRef.ref.current);
-            else (ref as React.MutableRefObject<HTMLDivElement>).current = divRef.ref.current;
-        }
-    }, [divRef.value]);
-
-    useEffect(() => {
-        if (props.sticky) {
-            let scrollParent = getScrollParent(divRef.ref.current ? divRef.ref.current.parentElement : null);
-            setScrollParent(scrollParent);
-        }
-    }, [divRef.value, mySize.height]);
-
-    const parentSize = useElementSize(scrollParent);
-    useEffect(() => {
-        if (props.sticky && divRef.ref.current) {
-            let maxHeight = "fit-content";
-            if (scrollParent) {
-                let height = parseFloat(getComputedStyle(scrollParent).height);
-                let myStyle = getComputedStyle(divRef.ref.current);
-
-                let pTop = parseFloat(myStyle.paddingTop);
-                let pBottom = parseFloat(myStyle.paddingBottom);
-                let mTop = parseFloat(myStyle.marginTop);
-                let mBottom = parseFloat(myStyle.marginBottom);
-                if (pTop > 0) height -= pTop;
-                if (pBottom > 0) height -= pBottom;
-                if (mTop > 0) height -= mTop;
-                if (mBottom > 0) height -= mBottom;
-
-                maxHeight = `${height}px`;
-            }
-            divRef.ref.current.style.maxHeight = maxHeight;
-        }
-    }, [props.sticky, parentSize.height, divRef.value]);
-
-    //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={divRef.set} {...(props.rootProps || {})} title={props.title} style={props.style}
-        className={mergeClasses(...css)}
-        onClick={props.onClick}>
-        {props.children}
-    </div>;
-
-    return (
-        props.fullscreen === "portal"
-            ? <Portal mountNode={ctx.mountNode}>
-                {control}
-            </Portal>
-            : control
-    );
-});

package/src/controls/svg.tsx

@@ -1,139 +0,0 @@
-import { tokens } from '@fluentui/react-components';
-import React from 'react';
-import { flushSync } from 'react-dom';
-import { createRoot } from 'react-dom/client';
-
-interface IProps {
-    size: number;
-}
-export const YouTubeIcon: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    return (
-        <svg height={`${props.size}px`} width={`${props.size}px`} version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
-            viewBox="0 0 461.001 461.001" xmlSpace="preserve">
-            <g>
-                <path style={{ fill: "#F61C0D" }} d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
-c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
-C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
-c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"/>
-            </g>
-        </svg>
-    );
-}
-
-export const MermaidIcon: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    return (
-        <svg height={`${props.size}px`} width={`${props.size}px`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16">
-            <defs>
-                <style>{`.mm-cls-1{fill:#ff3670;}.mm-cls-2{fill:#fff;}`}</style></defs>
-            <rect className="mm-cls-1" width="490.16" height="490.16" rx="84.61" />
-            <path className="mm-cls-2" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z" />
-            <path className="mm-cls-2" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z" />
-            <path className="mm-cls-2" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z" />
-        </svg>
-    );
-}
-
-export const TeamsIcon: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    return (
-        <svg height={`${props.size}px`} width={`${props.size}px`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2228.833 2073.333">
-            <path fill="#5059C9" d="M1554.637,777.5h575.713c54.391,0,98.483,44.092,98.483,98.483c0,0,0,0,0,0v524.398 c0,199.901-162.051,361.952-361.952,361.952h0h-1.711c-199.901,0.028-361.975-162-362.004-361.901c0-0.017,0-0.034,0-0.052V828.971 C1503.167,800.544,1526.211,777.5,1554.637,777.5L1554.637,777.5z" />
-            <circle fill="#5059C9" cx="1943.75" cy="440.583" r="233.25" />
-            <circle fill="#7B83EB" cx="1218.083" cy="336.917" r="336.917" />
-            <path fill="#7B83EB" d="M1667.323,777.5H717.01c-53.743,1.33-96.257,45.931-95.01,99.676v598.105 c-7.505,322.519,247.657,590.16,570.167,598.053c322.51-7.893,577.671-275.534,570.167-598.053V877.176 C1763.579,823.431,1721.066,778.83,1667.323,777.5z" />
-            <path opacity=".1" d="M1244,777.5v838.145c-0.258,38.435-23.549,72.964-59.09,87.598 c-11.316,4.787-23.478,7.254-35.765,7.257H667.613c-6.738-17.105-12.958-34.21-18.142-51.833 c-18.144-59.477-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1244z" />
-            <path opacity=".2" d="M1192.167,777.5v889.978c-0.002,12.287-2.47,24.449-7.257,35.765 c-14.634,35.541-49.163,58.833-87.598,59.09H691.975c-8.812-17.105-17.105-34.21-24.362-51.833 c-7.257-17.623-12.958-34.21-18.142-51.833c-18.144-59.476-27.402-121.307-27.472-183.49V877.02 c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z" />
-            <path opacity=".2" d="M1192.167,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855h-447.84 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1192.167z" />
-            <path opacity=".2" d="M1140.333,777.5v786.312c-0.395,52.223-42.632,94.46-94.855,94.855H649.472 c-18.144-59.476-27.402-121.307-27.472-183.49V877.02c-1.246-53.659,41.198-98.19,94.855-99.52H1140.333z" />
-            <path opacity=".1" d="M1244,509.522v163.275c-8.812,0.518-17.105,1.037-25.917,1.037 c-8.812,0-17.105-0.518-25.917-1.037c-17.496-1.161-34.848-3.937-51.833-8.293c-104.963-24.857-191.679-98.469-233.25-198.003 c-7.153-16.715-12.706-34.071-16.587-51.833h258.648C1201.449,414.866,1243.801,457.217,1244,509.522z" />
-            <path opacity=".2" d="M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z" />
-            <path opacity=".2" d="M1192.167,561.355v111.442c-17.496-1.161-34.848-3.937-51.833-8.293 c-104.963-24.857-191.679-98.469-233.25-198.003h190.228C1149.616,466.699,1191.968,509.051,1192.167,561.355z" />
-            <path opacity=".2" d="M1140.333,561.355v103.148c-104.963-24.857-191.679-98.469-233.25-198.003 h138.395C1097.783,466.699,1140.134,509.051,1140.333,561.355z" />
-            <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="198.099" y1="1683.0726" x2="942.2344" y2="394.2607" gradientTransform="matrix(1 0 0 -1 0 2075.3333)">
-                <stop offset="0" stopColor="#5a62c3" />
-                <stop offset=".5" stopColor="#4d55bd" />
-                <stop offset="1" stopColor="#3940ab" />
-            </linearGradient>
-            <path fill="url(#a)" d="M95.01,466.5h950.312c52.473,0,95.01,42.538,95.01,95.01v950.312c0,52.473-42.538,95.01-95.01,95.01 H95.01c-52.473,0-95.01-42.538-95.01-95.01V561.51C0,509.038,42.538,466.5,95.01,466.5z" />
-            <path fill="#FFF" d="M820.211,828.193H630.241v517.297H509.211V828.193H320.123V727.844h500.088V828.193z" />
-        </svg>
-    );
-}
-
-export const SVGLinkIcon = (props: { size: number }) => {
-    return (
-        <svg fill={tokens.colorNeutralForeground1} height={`${props.size}px`} width={`${props.size}px`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16">
-            <g>
-                <g>
-                    <path d="M409.657,32.474c-43.146-43.146-113.832-43.146-156.978,0l-84.763,84.762c29.07-8.262,60.589-6.12,88.129,6.732
-			l44.063-44.064c17.136-17.136,44.982-17.136,62.118,0c17.136,17.136,17.136,44.982,0,62.118l-55.386,55.386l-36.414,36.414
-			c-17.136,17.136-44.982,17.136-62.119,0l-47.43,47.43c11.016,11.017,23.868,19.278,37.332,24.48
-			c36.415,14.382,78.643,8.874,110.467-16.219c3.06-2.447,6.426-5.201,9.18-8.262l57.222-57.222l34.578-34.578
-			C453.109,146.306,453.109,75.926,409.657,32.474z"/>
-                    <path d="M184.135,320.114l-42.228,42.228c-17.136,17.137-44.982,17.137-62.118,0c-17.136-17.136-17.136-44.981,0-62.118
-			l91.8-91.799c17.136-17.136,44.982-17.136,62.119,0l47.43-47.43c-11.016-11.016-23.868-19.278-37.332-24.48
-			c-38.25-15.3-83.232-8.262-115.362,20.502c-1.53,1.224-3.06,2.754-4.284,3.978l-91.8,91.799
-			c-43.146,43.146-43.146,113.832,0,156.979c43.146,43.146,113.832,43.146,156.978,0l82.927-83.845
-			C230.035,335.719,220.243,334.496,184.135,320.114z"/>
-                </g>
-            </g>
-        </svg>
-    );
-}
-
-export const SVGSplitIcon = (props: { size: number }) => {
-    return <svg fill={tokens.colorNeutralForeground1} height={`${props.size}px`} width={`${props.size}px`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
-        <path d="M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z" />
-    </svg>;
-}
-
-export const HubSpotIcon = (props: { size: number }) => {
-    return <svg fill={tokens.colorNeutralForeground1} height={`${props.size}px`} width={`${props.size}px`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-        <path d="M267.4 211.6c-25.1 23.7-40.8 57.3-40.8 94.6 0 29.3 9.7 56.3 26 78L203.1 434c-4.4-1.6-9.1-2.5-14-2.5-10.8 0-20.9 4.2-28.5 11.8-7.6 7.6-11.8 17.8-11.8 28.6s4.2 20.9 11.8 28.5c7.6 7.6 17.8 11.6 28.5 11.6 10.8 0 20.9-3.9 28.6-11.6 7.6-7.6 11.8-17.8 11.8-28.5 0-4.2-.6-8.2-1.9-12.1l50-50.2c22 16.9 49.4 26.9 79.3 26.9 71.9 0 130-58.3 130-130.2 0-65.2-47.7-119.2-110.2-128.7V116c17.5-7.4 28.2-23.8 28.2-42.9 0-26.1-20.9-47.9-47-47.9S311.2 47 311.2 73.1c0 19.1 10.7 35.5 28.2 42.9v61.2c-15.2 2.1-29.6 6.7-42.7 13.6-27.6-20.9-117.5-85.7-168.9-124.8 1.2-4.4 2-9 2-13.8C129.8 23.4 106.3 0 77.4 0 48.6 0 25.2 23.4 25.2 52.2c0 28.9 23.4 52.3 52.2 52.3 9.8 0 18.9-2.9 26.8-7.6l163.2 114.7zm89.5 163.6c-38.1 0-69-30.9-69-69s30.9-69 69-69 69 30.9 69 69-30.9 69-69 69z" />
-    </svg>;
-}
-
-
-//get icons as html
-export const GetSVGLinkIcon = (props: { size: number }) => {
-    return (
-        `<svg fill="${tokens.colorNeutralForeground1}" height="${props.size}px" width="${props.size}px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16">
-            <g>
-                <g>
-                    <path d="M409.657,32.474c-43.146-43.146-113.832-43.146-156.978,0l-84.763,84.762c29.07-8.262,60.589-6.12,88.129,6.732
-			l44.063-44.064c17.136-17.136,44.982-17.136,62.118,0c17.136,17.136,17.136,44.982,0,62.118l-55.386,55.386l-36.414,36.414
-			c-17.136,17.136-44.982,17.136-62.119,0l-47.43,47.43c11.016,11.017,23.868,19.278,37.332,24.48
-			c36.415,14.382,78.643,8.874,110.467-16.219c3.06-2.447,6.426-5.201,9.18-8.262l57.222-57.222l34.578-34.578
-			C453.109,146.306,453.109,75.926,409.657,32.474z"/>
-                    <path d="M184.135,320.114l-42.228,42.228c-17.136,17.137-44.982,17.137-62.118,0c-17.136-17.136-17.136-44.981,0-62.118
-			l91.8-91.799c17.136-17.136,44.982-17.136,62.119,0l47.43-47.43c-11.016-11.016-23.868-19.278-37.332-24.48
-			c-38.25-15.3-83.232-8.262-115.362,20.502c-1.53,1.224-3.06,2.754-4.284,3.978l-91.8,91.799
-			c-43.146,43.146-43.146,113.832,0,156.979c43.146,43.146,113.832,43.146,156.978,0l82.927-83.845
-			C230.035,335.719,220.243,334.496,184.135,320.114z"/>
-                </g>
-            </g>
-        </svg>`
-    );
-}
-
-export const GetSVGSplitIcon = (props: { size: number }) => {
-    return `<svg fill="${tokens.colorNeutralForeground1}" height="${props.size}px" width="${props.size}px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
-	<path d="M10.646 13.146l0.707 0.707-2.853 2.854-2.854-2.854 0.707-0.707 1.647 1.647v-3.772h1v3.772l1.646-1.647zM8 2.207v3.772h1v-3.772l1.646 1.646 0.707-0.707-2.853-2.853-2.854 2.853 0.707 0.707 1.647-1.646zM0 8v1h17v-1h-17z" />
-</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);
-    flushSync(() => {
-        root.render(icon);
-    });
-    return iconDiv.innerHTML;
-}

package/src/controls/toolbar.tsx

@@ -1,47 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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} ref={ref} />
-    );
-});