@kwiz/fluentui 1.0.0

package/src/controls/search.tsx

@@ -0,0 +1,66 @@
+import { Input, InputProps, makeStyles } from '@fluentui/react-components';
+import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
+import { debounce, isFunction, isNullOrEmptyString } from '@kwiz/common';
+import React, { useState } from 'react';
+import { GetLogger } from '../_modules/config';
+import { useStateEX } from '../helpers/hooks';
+import { mixins } from '../styles/styles';
+const logger = GetLogger("Search");
+
+const useStyles = makeStyles({
+    main: mixins.main,
+    clickable: mixins.clickable,
+})
+
+interface IProps extends InputProps {
+    main?: boolean;
+    delay?: number;
+    /** if changing the value in the caller - change this prop to reset */
+    resetValue?: string;
+    onChangeDeferred?: (newValue: string) => void;
+    onChangeSync?: (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();
+
+    const [resetKey, setResetKey] = useState(1);
+
+    let delay = props.delay || 1;
+
+    //cannot call debounce every render, since it won't be the same debounced instance...
+    var notifyParent = React.useMemo(() => debounce(v => {
+        logger.log(`Set: ${v}`);
+        props.onChangeDeferred(v);
+    }, delay * 1000), [delay]);
+
+    let [value, setValue] = useStateEX(props.value, {
+        onChange: newValue => {
+            if (isFunction(props.onChangeSync)) props.onChangeSync(newValue as string);
+            if (isFunction(props.onChangeDeferred)) notifyParent(newValue);
+            return newValue;
+        }
+    });
+
+    //once props change, reset this control value to match
+    React.useEffect(() => {
+        setValue(props.resetValue);
+        //todo: bug: setting value does not sync into the text box
+        setResetKey(resetKey + 1)
+    }, [props.resetValue]);
+
+    return (
+        <Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
+            className={props.main ? cssNames.main : undefined}
+            contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular />}
+            contentAfter={isNullOrEmptyString(value)
+                ? undefined
+                : <DismissRegular className={cssNames.clickable} onClick={() => {
+                    setValue("");
+                    //todo: bug: setting value does not sync into the text box
+                    setResetKey(resetKey + 1)
+                }} />
+            } />
+    );
+}

package/src/controls/section.tsx

@@ -0,0 +1,52 @@
+import { makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { isFunction, isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames, mixins } 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",
+        marginRight: tokens.spacingHorizontalXXL
+    }
+});
+
+
+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;
+}
+
+export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<ISectionProps>>((props, ref) => {
+    const cssNames = useStyles();
+    let css: string[] = [KnownClassNames.section];
+    if (props.main) css.push(cssNames.main);
+    if (isFunction(props.onClick))
+        css.push(cssNames.clickable);
+
+    if (props.left) css.push(cssNames.left);
+    else if (props.right) css.push(cssNames.right);
+
+    if (isNotEmptyArray(props.css)) css.push(...props.css);
+
+    return (
+        <div ref={ref} {...(props.rootProps || {})} title={props.title} style={props.style}
+            className={mergeClasses(...css)}
+            onClick={props.onClick}>
+            {props.children}
+        </div>
+    );
+});

package/src/controls/svg.tsx

@@ -0,0 +1,120 @@
+import { tokens } from '@fluentui/react-components';
+import React from 'react';
+
+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>`;
+}

package/src/controls/vertical-content.tsx

@@ -0,0 +1,50 @@
+import { makeStyles, mergeClasses } from '@fluentui/react-components';
+import { isNotEmptyArray } from '@kwiz/common';
+import React from 'react';
+import { useWindowSize } from '../helpers/hooks';
+
+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

@@ -0,0 +1,35 @@
+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
+})
+
+interface IProps extends ISectionProps {
+    wrap?: boolean;
+    nogap?: boolean;
+}
+export const Vertical: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    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 (isNotEmptyArray(props.css)) css.push(...props.css);
+
+    return (
+        <Section {...props} css={css} />
+    );
+}

package/src/helpers/hooks.ts

@@ -0,0 +1,189 @@
+import { isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
+import { MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
+import { GetLogger } from "../_modules/config";
+import { KnownClassNames } from "../styles/styles";
+
+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>;
+    //will not set state if value did not change
+    skipUpdateIfSame?: boolean;
+    //optional, provide a name for better logging
+    name?: string;
+}):
+    [ValueType, (newValue: SetStateAction<ValueType>) => Promise<ValueType>, MutableRefObject<ValueType>] {
+    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<((v: ValueType) => void)[]>([]);
+    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: ValueType) => {
+        logger.groupSync('conditional value change', 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);
+            }
+            else {
+                log(`value unchanged`);
+                resolvePromises();
+            }
+        });
+    }
+
+
+    let setValueWithEvents = wrapFunction(setValueWithCheck, {
+        before: newValue => isFunction(options.onChange) ? options.onChange(newValue) : newValue,
+        after: newValue => currentValue.current = newValue as ValueType
+    });
+
+    const setValue = useCallback((newState: ValueType) => new Promise<ValueType>(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: { onFocus: () => void, onLoseFocus: () => void }) {
+    const wrapperDiv = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        function focusIn(e: FocusEvent) {
+            let elm = e.target as HTMLElement;//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: number,
+        height: number
+    }>({
+        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<boolean>(false);
+    useEffect(() => {
+        function forcePrint(e: KeyboardEvent) {
+            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?: Event, force?: boolean) {
+            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;
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+export * from './controls/button';
+export * from './controls/centered';
+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/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/vertical';
+export * from './controls/vertical-content';
+export * from './helpers/hooks';
+export { KnownClassNames } from './styles/styles';

package/src/styles/styles.ts

@@ -0,0 +1,87 @@
+import { GriffelStyle, makeStyles, tokens } from "@fluentui/react-components";
+
+export module mixins {
+    export const main: GriffelStyle = {
+        flexShrink: 1,
+        flexGrow: 1
+    };
+    export const clickable: GriffelStyle = {
+        cursor: "pointer",
+        ['& label']: {
+            cursor: "pointer"
+        }
+    }
+    const box: GriffelStyle = {
+        padding: tokens.spacingHorizontalM,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: tokens.shadow4,
+        margin: tokens.spacingHorizontalXXS
+    }
+    export const float: GriffelStyle = {
+        ...box,
+        /** make buttons work */
+        position: "relative",
+        /** make buttons work */
+        maxWidth: "33%",
+        /** stop bleeding into page */
+        overflowX: "hidden",
+
+        ['& img']: {
+            maxWidth: "100%"
+        }
+    }
+
+    export const flex: GriffelStyle = {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        rowGap: tokens.spacingVerticalM,
+        columnGap: tokens.spacingVerticalM,
+    }
+
+    export const wrap: GriffelStyle = {
+        flexWrap: "wrap"
+    }
+    export const nogap: GriffelStyle = {
+        rowGap: 0,
+        columnGap: 0
+    }
+    export const ellipsis: GriffelStyle = {
+        whiteSpace: 'nowrap',
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    }
+
+    // export const box: GriffelStyle = {
+    // }
+}
+
+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;