@kwiz/fluentui 1.0.16 → 1.0.20

package/src/index.ts

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

package/src/styles/styles.ts

@@ -1,87 +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;
+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;

package/src/styles/theme.ts

@@ -1,91 +1,91 @@
-import { BrandVariants, Theme, createDarkTheme, createLightTheme, teamsDarkTheme, teamsLightTheme } from "@fluentui/react-components";
-
-export interface iThemeContext {
-    teams?: boolean;
-    dark?: boolean;
-}
-
-export function getTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    return ctx.dark
-        ? getDarkTheme(ctx, t)
-        : getLightTheme(ctx, t);
-}
-
-
-const kThemeDefault: BrandVariants = {
-    10: "#04010A",
-    20: "#16103B",
-    30: "#17176F",
-    40: "#0F1D9A",
-    50: "#2F2AA1",
-    60: "#4338A8",
-    70: "#5546AF",
-    80: "#6555B6",
-    90: "#7563BD",
-    100: "#8472C4",
-    110: "#9282CB",
-    120: "#A191D2",
-    130: "#AFA1D9",
-    140: "#BDB1E0",
-    150: "#CBC1E7",
-    160: "#D9D2EE"
-};
-
-const kThemeOrange: BrandVariants = {
-    10: "#040301",
-    20: "#1E170A",
-    30: "#312610",
-    40: "#403112",
-    50: "#503D14",
-    60: "#604915",
-    70: "#705516",
-    80: "#816216",
-    90: "#926E16",
-    100: "#A37B15",
-    110: "#B58914",
-    120: "#C79612",
-    130: "#DAA40E",
-    140: "#EDB208",
-    150: "#FFC001",
-    160: "#FFD47F"
-};
-
-const kThemeSecondary: BrandVariants = {
-    10: "#020304",
-    20: "#101A1D",
-    30: "#162B32",
-    40: "#1A3742",
-    50: "#1D4552",
-    60: "#1F5363",
-    70: "#216175",
-    80: "#227087",
-    90: "#227F9A",
-    100: "#208EAD",
-    110: "#1E9EC0",
-    120: "#1AADD4",
-    130: "#12BEE8",
-    140: "#02CEFD",
-    150: "#6BDAFF",
-    160: "#A0E5FF"
-};
-
-function getLightTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    if (ctx.teams) return teamsLightTheme;
-    //return jsonClone(webLightTheme);
-    const lightTheme: Theme = {
-        ...createLightTheme(t),
-    };
-    return lightTheme;
-}
-
-function getDarkTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
-    if (ctx.teams) return teamsDarkTheme;
-    //return jsonClone(webDarkTheme);
-    const darkTheme: Theme = {
-        ...createDarkTheme(t),
-    };
-
-    darkTheme.colorBrandForeground1 = t[110];
-    darkTheme.colorBrandForeground2 = t[120];
-    return darkTheme;
+import { BrandVariants, Theme, createDarkTheme, createLightTheme, teamsDarkTheme, teamsLightTheme } from "@fluentui/react-components";
+
+export interface iThemeContext {
+    teams?: boolean;
+    dark?: boolean;
+}
+
+export function getTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
+    return ctx.dark
+        ? getDarkTheme(ctx, t)
+        : getLightTheme(ctx, t);
+}
+
+
+const kThemeDefault: BrandVariants = {
+    10: "#04010A",
+    20: "#16103B",
+    30: "#17176F",
+    40: "#0F1D9A",
+    50: "#2F2AA1",
+    60: "#4338A8",
+    70: "#5546AF",
+    80: "#6555B6",
+    90: "#7563BD",
+    100: "#8472C4",
+    110: "#9282CB",
+    120: "#A191D2",
+    130: "#AFA1D9",
+    140: "#BDB1E0",
+    150: "#CBC1E7",
+    160: "#D9D2EE"
+};
+
+const kThemeOrange: BrandVariants = {
+    10: "#040301",
+    20: "#1E170A",
+    30: "#312610",
+    40: "#403112",
+    50: "#503D14",
+    60: "#604915",
+    70: "#705516",
+    80: "#816216",
+    90: "#926E16",
+    100: "#A37B15",
+    110: "#B58914",
+    120: "#C79612",
+    130: "#DAA40E",
+    140: "#EDB208",
+    150: "#FFC001",
+    160: "#FFD47F"
+};
+
+const kThemeSecondary: BrandVariants = {
+    10: "#020304",
+    20: "#101A1D",
+    30: "#162B32",
+    40: "#1A3742",
+    50: "#1D4552",
+    60: "#1F5363",
+    70: "#216175",
+    80: "#227087",
+    90: "#227F9A",
+    100: "#208EAD",
+    110: "#1E9EC0",
+    120: "#1AADD4",
+    130: "#12BEE8",
+    140: "#02CEFD",
+    150: "#6BDAFF",
+    160: "#A0E5FF"
+};
+
+function getLightTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
+    if (ctx.teams) return teamsLightTheme;
+    //return jsonClone(webLightTheme);
+    const lightTheme: Theme = {
+        ...createLightTheme(t),
+    };
+    return lightTheme;
+}
+
+function getDarkTheme(ctx: iThemeContext, t: BrandVariants = kThemeDefault) {
+    if (ctx.teams) return teamsDarkTheme;
+    //return jsonClone(webDarkTheme);
+    const darkTheme: Theme = {
+        ...createDarkTheme(t),
+    };
+
+    darkTheme.colorBrandForeground1 = t[110];
+    darkTheme.colorBrandForeground2 = t[120];
+    return darkTheme;
 }

package/dist/_modules/build.d.ts

@@ -1,2 +0,0 @@
-export declare const $build = "local-build";
-export declare const $release = "dev";

package/dist/_modules/build.js

@@ -1,3 +0,0 @@
-export const $build = 'local-build';
-export const $release = 'dev';
-//# sourceMappingURL=build.js.map

package/dist/_modules/build.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"build.js","sourceRoot":"","sources":["../../src/_modules/build.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC;AACpC,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC"}

package/dist/_modules/config.d.ts

@@ -1 +0,0 @@
-export declare const GetLogger: (name: string) => import("@kwiz/common").ConsoleLogger;

package/dist/_modules/config.js

@@ -1,9 +0,0 @@
-import { config } from "@kwiz/common";
-import { BuildNumber, ReleaseStatus } from "./constants";
-export const { logger: GetLogger } = config({
-    BuildNumber: BuildNumber,
-    IsLocalDev: false,
-    ReleaseStatus: ReleaseStatus,
-    ProjectName: "[fluentui]"
-});
-//# sourceMappingURL=config.js.map

package/dist/_modules/config.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/_modules/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEzD,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IACxC,WAAW,EAAE,WAAW;IACxB,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,YAAY;CAC5B,CAAC,CAAC"}

package/dist/_modules/constants.d.ts

@@ -1,2 +0,0 @@
-export declare var BuildNumber: string;
-export declare const ReleaseStatus = "npm";

package/dist/_modules/constants.js

@@ -1,3 +0,0 @@
-export var BuildNumber = 'unset';
-export const ReleaseStatus = "npm";
-//# sourceMappingURL=constants.js.map

package/dist/_modules/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/_modules/constants.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,IAAI,WAAW,GAAG,OAAO,CAAC;AACjC,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC"}

package/dist/_modules/exports-index.d.ts

@@ -1 +0,0 @@
-export * from './config';

package/dist/_modules/exports-index.js

@@ -1,2 +0,0 @@
-export * from './config';
-//# sourceMappingURL=exports-index.js.map

package/dist/_modules/exports-index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"exports-index.js","sourceRoot":"","sources":["../../src/_modules/exports-index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/controls/accordion.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-interface iProps {
-    /** optional, send the key for the group you want to open by default */
-    opened?: string;
-    groups: {
-        key: string;
-        title: string;
-        icon?: JSX.Element;
-        content: JSX.Element;
-    }[];
-}
-export declare const AccordionEX: React.FunctionComponent<iProps>;
-export {};

package/dist/controls/accordion.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label, makeStyles } from "@fluentui/react-components";
-import { ChevronRightRegular } from "@fluentui/react-icons";
-import * as React from 'react';
-import { Horizontal } from "./horizontal";
-import { Vertical } from "./vertical";
-const useStyles = makeStyles({
-    opened: {
-        transform: "rotate(90deg)",
-        transition: "transform 200ms ease-out"
-    },
-    header: {
-        cursor: "pointer"
-    },
-    root: {
-        maxHeight: "100%"
-    },
-    body: {
-        overflow: "auto"
-    }
-});
-export const AccordionEX = (props) => {
-    const classes = useStyles();
-    const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
-    return (_jsx(Vertical, { main: true, css: [classes.root], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsxs(Horizontal, { css: [classes.header], onClick: () => setOpened(group.key), children: [_jsx(ChevronRightRegular, { className: opened === group.key && classes.opened }), _jsx(Label, { children: group.title })] }), group.key === opened && _jsx(Vertical, { main: true, css: [classes.body], children: group.content })] }, group.key)) }));
-};
-//# sourceMappingURL=accordion.js.map

package/dist/controls/accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/controls/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,SAAS,EAAE,eAAe;QAC1B,UAAU,EAAE,0BAA0B;KACzC;IACD,MAAM,EAAE;QACJ,MAAM,EAAE,SAAS;KACpB;IACD,IAAI,EAAE;QACF,SAAS,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AAYH,MAAM,CAAC,MAAM,WAAW,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAChF,OAAO,CAAC,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YACrC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,MAAC,KAAK,CAAC,QAAQ,eACtC,MAAC,UAAU,IAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,aAClE,KAAC,mBAAmB,IAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,IAAI,OAAO,CAAC,MAAM,GAAI,EAC1E,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,IACnB,EACZ,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YACtD,KAAK,CAAC,OAAO,GACP,KAPiC,KAAK,CAAC,GAAG,CAQxC,CAAC,GACX,CACV,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/button.d.ts

@@ -1,28 +0,0 @@
-import { ButtonProps, CompoundButtonProps } from '@fluentui/react-components';
-import React from 'react';
-interface IProps {
-    title: string;
-    showTitleWithIcon?: boolean;
-    dontStretch?: boolean;
-    hideOnPrint?: boolean;
-    dontCenterText?: boolean;
-    hoverIcon?: JSX.Element;
-    hoverTitle?: string;
-}
-interface IPropsCompound extends IProps {
-    width?: string | number;
-}
-export type ButtonEXProps = IProps & ButtonProps;
-export type CompoundButtonEXProps = IPropsCompound & CompoundButtonProps;
-export declare const ButtonEX: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const ButtonEXSecondary: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const ButtonEXPrimary: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const ButtonEXDanger: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const ButtonEXSuccess: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const ButtonEXPrimarySubtle: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const ButtonEXDangerSubtle: React.ForwardRefExoticComponent<ButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const CompoundButtonEX: React.ForwardRefExoticComponent<CompoundButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const CompoundButtonEXSecondary: React.ForwardRefExoticComponent<CompoundButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const CompoundButtonEXPrimary: React.ForwardRefExoticComponent<CompoundButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const CompoundButtonEXDanger: React.ForwardRefExoticComponent<CompoundButtonEXProps & React.RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/controls/button.js

@@ -1,113 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, CompoundButton, compoundButtonClassNames, 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';
-import { useCommonStyles, widthMedium } from '../styles/styles';
-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((props, ref) => {
-    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 commonCssNames = useCommonStyles();
-    const cssNames = useStyles();
-    let css = [];
-    if (props.hideOnPrint)
-        PushNoDuplicate(css, commonCssNames.printHide);
-    if (props.dontCenterText)
-        PushNoDuplicate(css, cssNames.buttonNoCenter);
-    if (!isNullOrEmptyString(props.className))
-        css.push(...props.className.split(' '));
-    let btn = _jsx(Button, Object.assign({ ref: ref, appearance: 'subtle' }, props, { className: mergeClasses(...css), "aria-label": title, title: undefined, icon: icon, onMouseEnter: trackHover ? (e) => {
-            setHover(true);
-            if (isFunction(props.onMouseEnter))
-                props.onMouseEnter(e);
-        } : props.onMouseEnter, onMouseLeave: trackHover ? (e) => {
-            setHover(false);
-            if (isFunction(props.onMouseLeave))
-                props.onMouseLeave(e);
-        } : props.onMouseLeave, children: props.children ||
-            //no icon? will show the title by default
-            (hasText && capitalizeFirstLetter(title)) }));
-    if (!hasText || props.children) //icon only or when content is different than props.title
-        btn = _jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: title, children: btn });
-    return (props.dontStretch ? _jsx("div", { children: btn }) : btn);
-});
-export const ButtonEXSecondary = React.forwardRef((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    return (_jsx(ButtonEX, Object.assign({ ref: ref, appearance: 'secondary', shape: ctx.buttonShape }, props)));
-});
-export const ButtonEXPrimary = React.forwardRef((props, ref) => {
-    return (_jsx(ButtonEXSecondary, Object.assign({ ref: ref, appearance: 'primary' }, props, { children: props.children })));
-});
-export const ButtonEXDanger = React.forwardRef((props, ref) => {
-    const cssNames = useStyles();
-    return (_jsx(ButtonEXSecondary, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.danger }, props, { children: props.children })));
-});
-export const ButtonEXSuccess = React.forwardRef((props, ref) => {
-    const cssNames = useStyles();
-    return (_jsx(ButtonEX, Object.assign({ ref: ref, className: cssNames.success }, props, { children: props.children })));
-});
-export const ButtonEXPrimarySubtle = React.forwardRef((props, ref) => {
-    const cssNames = useStyles();
-    return (_jsx(ButtonEX, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.primarySubtle }, props, { children: props.children })));
-});
-export const ButtonEXDangerSubtle = React.forwardRef((props, ref) => {
-    const cssNames = useStyles();
-    return (_jsx(ButtonEX, Object.assign({ ref: ref, className: props.disabled ? undefined : cssNames.dangerSubtle }, props, { children: props.children })));
-});
-export const CompoundButtonEX = React.forwardRef((props, ref) => {
-    let title = props.title || props['aria-label'];
-    let tooltip = isString(props.secondaryContent) ? props.secondaryContent : title;
-    let max = typeof (props.width) === "undefined" ? widthMedium : props.width;
-    return (_jsx(Tooltip, { showDelay: 1000, relationship: 'label', withArrow: true, appearance: 'inverted', content: tooltip, children: _jsx(CompoundButton, Object.assign({ ref: ref, appearance: 'subtle', style: { justifyContent: "flex-start", maxWidth: max } }, props, { "aria-label": tooltip, title: undefined, children: props.children || capitalizeFirstLetter(title) })) }));
-});
-export const CompoundButtonEXSecondary = React.forwardRef((props, ref) => {
-    const ctx = useKWIZFluentContext();
-    return (_jsx(CompoundButtonEX, Object.assign({ ref: ref, appearance: 'secondary', shape: ctx.buttonShape }, props)));
-});
-export const CompoundButtonEXPrimary = React.forwardRef((props, ref) => {
-    return (_jsx(CompoundButtonEXSecondary, Object.assign({ ref: ref, appearance: 'primary' }, props, { children: props.children })));
-});
-export const CompoundButtonEXDanger = React.forwardRef((props, ref) => {
-    const cssNames = useStyles();
-    return (_jsx(CompoundButtonEXSecondary, Object.assign({ ref: ref, className: cssNames.danger }, props, { children: props.children })));
-});
-//# sourceMappingURL=button.js.map