@kwiz/fluentui 1.0.74 → 1.0.76

package/src/controls/accordion.tsx

@@ -1,62 +1,62 @@
-import { makeStyles } from "@fluentui/react-components";
-import { ChevronRightRegular } from "@fluentui/react-icons";
-import * as React from 'react';
-import { KnownClassNames } from "../styles/styles";
-import { ButtonEX } from "./button";
-import { DividerEX } from "./divider";
-import { Horizontal } from "./horizontal";
-import { Vertical } from "./vertical";
-
-const useStyles = makeStyles({
-    opened: {
-        transform: "rotate(90deg)",
-        transition: "transform 200ms ease-out"
-    },
-    header: {
-        paddingLeft: 0
-    },
-    root: {
-        maxHeight: "100%"
-    },
-    rootFill: {
-        minHeight: "100%"
-    },
-    body: {
-        overflow: "auto",
-    }
-});
-
-interface iProps {
-    /** optional: send the key for the group you want to open by default */
-    opened?: string;
-    fillHeight?: boolean;
-    groups: {
-        key: string;
-        title: string;
-        icon?: JSX.Element;
-        content: JSX.Element;
-    }[];
-}
-export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
-    const classes = useStyles();
-    const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
-    return (<Vertical main css={[classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion]}>
-        {props.groups.map(group => <React.Fragment key={group.key}>
-            <ButtonEX className={`${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`}
-                icon={<ChevronRightRegular className={opened === group.key ? classes.opened : ''} />}
-                title={group.title} showTitleWithIcon dontCenterText
-                onClick={() => setOpened(group.key)}
-            />
-            <DividerEX />
-            {group.key === opened && <>
-                <Horizontal main css={[classes.body, KnownClassNames.accordionBodyWrapper]}>
-                    <Vertical main css={[KnownClassNames.accordionBody]}>
-                        {group.content}
-                    </Vertical>
-                </Horizontal>
-                <DividerEX />
-            </>}
-        </React.Fragment>)}
-    </Vertical>
-    );
-}
+import { makeStyles } from "@fluentui/react-components";
+import { ChevronRightRegular } from "@fluentui/react-icons";
+import * as React from 'react';
+import { KnownClassNames } from "../styles/styles";
+import { ButtonEX } from "./button";
+import { DividerEX } from "./divider";
+import { Horizontal } from "./horizontal";
+import { Vertical } from "./vertical";
+
+const useStyles = makeStyles({
+    opened: {
+        transform: "rotate(90deg)",
+        transition: "transform 200ms ease-out"
+    },
+    header: {
+        paddingLeft: 0
+    },
+    root: {
+        maxHeight: "100%"
+    },
+    rootFill: {
+        minHeight: "100%"
+    },
+    body: {
+        overflow: "auto",
+    }
+});
+
+interface iProps {
+    /** optional: send the key for the group you want to open by default */
+    opened?: string;
+    fillHeight?: boolean;
+    groups: {
+        key: string;
+        title: string;
+        icon?: JSX.Element;
+        content: JSX.Element;
+    }[];
+}
+export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
+    const classes = useStyles();
+    const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
+    return (<Vertical main css={[classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion]}>
+        {props.groups.map(group => <React.Fragment key={group.key}>
+            <ButtonEX className={`${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`}
+                icon={<ChevronRightRegular className={opened === group.key ? classes.opened : ''} />}
+                title={group.title} showTitleWithIcon dontCenterText
+                onClick={() => setOpened(group.key)}
+            />
+            <DividerEX />
+            {group.key === opened && <>
+                <Horizontal main css={[classes.body, KnownClassNames.accordionBodyWrapper]}>
+                    <Vertical main css={[KnownClassNames.accordionBody]}>
+                        {group.content}
+                    </Vertical>
+                </Horizontal>
+                <DividerEX />
+            </>}
+        </React.Fragment>)}
+    </Vertical>
+    );
+}

package/src/controls/button.tsx

@@ -1,181 +1,181 @@
-import { Button, ButtonProps, CompoundButton, compoundButtonClassNames, CompoundButtonProps, makeStyles, mergeClasses, tokens, Tooltip } from '@fluentui/react-components';
-import { capitalizeFirstLetter, isFunction, isNullOrEmptyString, isNullOrUndefined, isString, PushNoDuplicate } from '@kwiz/common';
-import React from 'react';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { commonSizes, KnownClassNames } from '../styles/styles';
-
-interface IProps {
-    title: string;//required
-    showTitleWithIcon?: boolean;
-    dontStretch?: boolean;
-    hideOnPrint?: boolean;
-    dontCenterText?: boolean;
-    hoverIcon?: JSX.Element;
-    hoverTitle?: string;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void | undefined;//type the onClick arg
-}
-interface IPropsCompound extends IProps {
-    width?: string | number;
-}
-
-export type ButtonEXProps = IProps & Omit<ButtonProps, "onClick" | "title">;
-export type CompoundButtonEXProps = IPropsCompound & Omit<CompoundButtonProps, "onClick" | "title">;;
-
-const useStyles = makeStyles({
-    buttonNoCenter: {
-        justifyContent: 'flex-start',
-        '& *': {
-            /* a button with no center that has content of a vertical, or multiple labels */
-            alignItems: 'flex-start'
-        }
-    },
-    danger: {
-        backgroundColor: tokens.colorStatusDangerBackground1,
-        color: tokens.colorStatusWarningForeground2,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorStatusWarningForeground1
-        }
-    },
-    success: {
-        color: tokens.colorStatusSuccessForeground1,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorStatusSuccessForeground1,
-        }
-    },
-    primarySubtle: {
-        color: tokens.colorBrandForeground1,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorBrandForeground1,
-        }
-    },
-    dangerSubtle: {
-        color: tokens.colorStatusWarningForeground2,
-
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: tokens.colorStatusWarningForeground1
-        }
-    }
-})
-
-
-export const ButtonEX = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    const [hover, setHover] = React.useState(false);
-    const trackHover = !isNullOrEmptyString(props.hoverTitle) || !isNullOrUndefined(props.hoverIcon);
-
-    const title = hover && !isNullOrEmptyString(props.hoverTitle) ? props.hoverTitle
-        : props.title || props['aria-label'];
-    const icon = hover && !isNullOrUndefined(props.hoverIcon) ? props.hoverIcon : props.icon;
-    let hasIcon = !isNullOrUndefined(icon);
-    let hasText = props.children || !hasIcon || (hasIcon && props.showTitleWithIcon === true);
-
-    const cssNames = useStyles();
-    let css: string[] = [];
-
-    if (props.hideOnPrint) PushNoDuplicate(css, KnownClassNames.printHide);
-    if (props.dontCenterText) PushNoDuplicate(css, cssNames.buttonNoCenter);
-
-    let btn = <Button ref={ref} appearance='subtle' {...props as any as ButtonProps} className={mergeClasses(...css, props.className)}
-        aria-label={title} title={undefined} icon={icon}
-        onMouseEnter={trackHover ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-            setHover(true);
-            if (isFunction(props.onMouseEnter))
-                props.onMouseEnter(e as any);
-        } : props.onMouseEnter as any}
-        onMouseLeave={trackHover ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-            setHover(false);
-            if (isFunction(props.onMouseLeave))
-                props.onMouseLeave(e as any);
-        } : props.onMouseLeave as any}
-    >{props.children ||
-        //no icon? will show the title by default
-        (hasText && capitalizeFirstLetter(title))}</Button>;
-    if (!hasText || props.children)//icon only or when content is different than props.title
-        btn = <Tooltip showDelay={1000} relationship='label' withArrow appearance='inverted' content={title}
-            mountNode={ctx.mountNode}
-        >
-            {btn}
-        </Tooltip>;
-
-    return (
-        props.dontStretch ? <div>{btn}</div> : btn
-
-    );
-});
-export const ButtonEXSecondary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <ButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...props}></ButtonEX>
-    );
-});
-/** to be used in MessageBarActions for prominent actions. Otherwise use ButtonEX or ButtonEXDangerSubtle */
-export const ButtonEXMessageBarAction = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <ButtonEX ref={ref} appearance='secondary' hideOnPrint {...props}></ButtonEX>
-    );
-});
-export const ButtonEXPrimary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    return (
-        <ButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</ButtonEXSecondary>
-    );
-});
-export const ButtonEXDanger = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEXSecondary ref={ref} className={props.disabled ? undefined : cssNames.danger} {...props}>{props.children}</ButtonEXSecondary>
-    );
-});
-export const ButtonEXSuccess = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEX ref={ref} className={cssNames.success} {...props}>{props.children}</ButtonEX>
-    );
-});
-export const ButtonEXPrimarySubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.primarySubtle} {...props}>{props.children}</ButtonEX>
-    );
-});
-export const ButtonEXDangerSubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.dangerSubtle} {...props}>{props.children}</ButtonEX>
-    );
-});
-
-export const CompoundButtonEX = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    let title = props.title || props['aria-label'];
-    let tooltip = isString(props.secondaryContent) ? props.secondaryContent : title;
-    let max = typeof (props.width) === "undefined" ? commonSizes.widthMedium : props.width;
-    return (
-        <Tooltip showDelay={1000} relationship='label' withArrow appearance='inverted' content={tooltip}
-            mountNode={ctx.mountNode}
-        >
-            <CompoundButton ref={ref} appearance='subtle' style={{ justifyContent: "flex-start", maxWidth: max }} {...props as any as CompoundButtonProps} aria-label={tooltip} title={undefined}>
-                {props.children || capitalizeFirstLetter(title)}</CompoundButton>
-        </Tooltip>
-    );
-});
-export const CompoundButtonEXSecondary = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    return (
-        <CompoundButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...props}></CompoundButtonEX>
-    );
-});
-export const CompoundButtonEXPrimary = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
-    return (
-        <CompoundButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</CompoundButtonEXSecondary>
-    );
-});
-export const CompoundButtonEXDanger = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
-    const cssNames = useStyles();
-    return (
-        <CompoundButtonEXSecondary ref={ref} className={cssNames.danger} {...props}>{props.children}</CompoundButtonEXSecondary>
-    );
+import { Button, ButtonProps, CompoundButton, compoundButtonClassNames, CompoundButtonProps, makeStyles, mergeClasses, tokens, Tooltip } from '@fluentui/react-components';
+import { capitalizeFirstLetter, isFunction, isNullOrEmptyString, isNullOrUndefined, isString, PushNoDuplicate } from '@kwiz/common';
+import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { commonSizes, KnownClassNames } from '../styles/styles';
+
+interface IProps {
+    title: string;//required
+    showTitleWithIcon?: boolean;
+    dontStretch?: boolean;
+    hideOnPrint?: boolean;
+    dontCenterText?: boolean;
+    hoverIcon?: JSX.Element;
+    hoverTitle?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void | undefined;//type the onClick arg
+}
+interface IPropsCompound extends IProps {
+    width?: string | number;
+}
+
+export type ButtonEXProps = IProps & Omit<ButtonProps, "onClick" | "title">;
+export type CompoundButtonEXProps = IPropsCompound & Omit<CompoundButtonProps, "onClick" | "title">;;
+
+const useStyles = makeStyles({
+    buttonNoCenter: {
+        justifyContent: 'flex-start',
+        '& *': {
+            /* a button with no center that has content of a vertical, or multiple labels */
+            alignItems: 'flex-start'
+        }
+    },
+    danger: {
+        backgroundColor: tokens.colorStatusDangerBackground1,
+        color: tokens.colorStatusWarningForeground2,
+
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorStatusWarningForeground1
+        }
+    },
+    success: {
+        color: tokens.colorStatusSuccessForeground1,
+
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorStatusSuccessForeground1,
+        }
+    },
+    primarySubtle: {
+        color: tokens.colorBrandForeground1,
+
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorBrandForeground1,
+        }
+    },
+    dangerSubtle: {
+        color: tokens.colorStatusWarningForeground2,
+
+        [`& .${compoundButtonClassNames.secondaryContent}`]: {
+            color: tokens.colorStatusWarningForeground1
+        }
+    }
+})
+
+
+export const ButtonEX = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    const [hover, setHover] = React.useState(false);
+    const trackHover = !isNullOrEmptyString(props.hoverTitle) || !isNullOrUndefined(props.hoverIcon);
+
+    const title = hover && !isNullOrEmptyString(props.hoverTitle) ? props.hoverTitle
+        : props.title || props['aria-label'];
+    const icon = hover && !isNullOrUndefined(props.hoverIcon) ? props.hoverIcon : props.icon;
+    let hasIcon = !isNullOrUndefined(icon);
+    let hasText = props.children || !hasIcon || (hasIcon && props.showTitleWithIcon === true);
+
+    const cssNames = useStyles();
+    let css: string[] = [];
+
+    if (props.hideOnPrint) PushNoDuplicate(css, KnownClassNames.printHide);
+    if (props.dontCenterText) PushNoDuplicate(css, cssNames.buttonNoCenter);
+
+    let btn = <Button ref={ref} appearance='subtle' {...props as any as ButtonProps} className={mergeClasses(...css, props.className)}
+        aria-label={title} title={undefined} icon={icon}
+        onMouseEnter={trackHover ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            setHover(true);
+            if (isFunction(props.onMouseEnter))
+                props.onMouseEnter(e as any);
+        } : props.onMouseEnter as any}
+        onMouseLeave={trackHover ? (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+            setHover(false);
+            if (isFunction(props.onMouseLeave))
+                props.onMouseLeave(e as any);
+        } : props.onMouseLeave as any}
+    >{props.children ||
+        //no icon? will show the title by default
+        (hasText && capitalizeFirstLetter(title))}</Button>;
+    if (!hasText || props.children)//icon only or when content is different than props.title
+        btn = <Tooltip showDelay={1000} relationship='label' withArrow appearance='inverted' content={title}
+            mountNode={ctx.mountNode}
+        >
+            {btn}
+        </Tooltip>;
+
+    return (
+        props.dontStretch ? <div>{btn}</div> : btn
+
+    );
+});
+export const ButtonEXSecondary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    return (
+        <ButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...props}></ButtonEX>
+    );
+});
+/** to be used in MessageBarActions for prominent actions. Otherwise use ButtonEX or ButtonEXDangerSubtle */
+export const ButtonEXMessageBarAction = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    return (
+        <ButtonEX ref={ref} appearance='secondary' hideOnPrint {...props}></ButtonEX>
+    );
+});
+export const ButtonEXPrimary = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    return (
+        <ButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</ButtonEXSecondary>
+    );
+});
+export const ButtonEXDanger = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <ButtonEXSecondary ref={ref} className={props.disabled ? undefined : cssNames.danger} {...props}>{props.children}</ButtonEXSecondary>
+    );
+});
+export const ButtonEXSuccess = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <ButtonEX ref={ref} className={cssNames.success} {...props}>{props.children}</ButtonEX>
+    );
+});
+export const ButtonEXPrimarySubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.primarySubtle} {...props}>{props.children}</ButtonEX>
+    );
+});
+export const ButtonEXDangerSubtle = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <ButtonEX ref={ref} className={props.disabled ? undefined : cssNames.dangerSubtle} {...props}>{props.children}</ButtonEX>
+    );
+});
+
+export const CompoundButtonEX = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    let title = props.title || props['aria-label'];
+    let tooltip = isString(props.secondaryContent) ? props.secondaryContent : title;
+    let max = typeof (props.width) === "undefined" ? commonSizes.widthMedium : props.width;
+    return (
+        <Tooltip showDelay={1000} relationship='label' withArrow appearance='inverted' content={tooltip}
+            mountNode={ctx.mountNode}
+        >
+            <CompoundButton ref={ref} appearance='subtle' style={{ justifyContent: "flex-start", maxWidth: max }} {...props as any as CompoundButtonProps} aria-label={tooltip} title={undefined}>
+                {props.children || capitalizeFirstLetter(title)}</CompoundButton>
+        </Tooltip>
+    );
+});
+export const CompoundButtonEXSecondary = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
+    const ctx = useKWIZFluentContext();
+    return (
+        <CompoundButtonEX ref={ref} appearance='secondary' shape={ctx.buttonShape} {...props}></CompoundButtonEX>
+    );
+});
+export const CompoundButtonEXPrimary = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
+    return (
+        <CompoundButtonEXSecondary ref={ref} appearance='primary' {...props}>{props.children}</CompoundButtonEXSecondary>
+    );
+});
+export const CompoundButtonEXDanger = React.forwardRef<HTMLButtonElement, (CompoundButtonEXProps)>((props, ref) => {
+    const cssNames = useStyles();
+    return (
+        <CompoundButtonEXSecondary ref={ref} className={cssNames.danger} {...props}>{props.children}</CompoundButtonEXSecondary>
+    );
 });

package/src/controls/canvas/CustomEventTargetBase.ts

@@ -1,33 +1,33 @@
-export class CustomEventTargetBase implements EventTarget {    
-    private _et: EventTarget;    
-
-    public constructor() {
-        try {
-            this._et = new EventTarget();
-        } catch (error) {
-            // Using document as EventTarget to support iOS 13 and older.
-            // Because EventTarget constructor just exists at iOS 14 and later.
-            this._et = document;
-        }
-    }
-
-    public addEventListener(
-        type: string,
-        listener: EventListenerOrEventListenerObject | null,
-        options?: boolean | AddEventListenerOptions,
-    ): void {
-        this._et.addEventListener(type, listener, options);
-    }
-
-    public dispatchEvent(event: Event): boolean {
-        return this._et.dispatchEvent(event);
-    }
-
-    public removeEventListener(
-        type: string,
-        callback: EventListenerOrEventListenerObject | null,
-        options?: boolean | EventListenerOptions,
-    ): void {
-        this._et.removeEventListener(type, callback, options);
-    }
+export class CustomEventTargetBase implements EventTarget {    
+    private _et: EventTarget;    
+
+    public constructor() {
+        try {
+            this._et = new EventTarget();
+        } catch (error) {
+            // Using document as EventTarget to support iOS 13 and older.
+            // Because EventTarget constructor just exists at iOS 14 and later.
+            this._et = document;
+        }
+    }
+
+    public addEventListener(
+        type: string,
+        listener: EventListenerOrEventListenerObject | null,
+        options?: boolean | AddEventListenerOptions,
+    ): void {
+        this._et.addEventListener(type, listener, options);
+    }
+
+    public dispatchEvent(event: Event): boolean {
+        return this._et.dispatchEvent(event);
+    }
+
+    public removeEventListener(
+        type: string,
+        callback: EventListenerOrEventListenerObject | null,
+        options?: boolean | EventListenerOptions,
+    ): void {
+        this._et.removeEventListener(type, callback, options);
+    }
 }