@kwiz/fluentui 1.0.16 → 1.0.20

package/src/controls/kwizoverflow.tsx

@@ -1,104 +1,104 @@
-import {
-    Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem,
-    useIsOverflowItemVisible, useOverflowMenu
-} from "@fluentui/react-components";
-import { MoreHorizontalFilled } from "@fluentui/react-icons";
-import { isNumber } from '@kwiz/common';
-
-interface IProps<ItemType> {
-    /** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
-    items: ItemType[];
-    getKey: (item: ItemType, index: number) => string;
-    getPriority?: (item: ItemType, index: number) => number;
-    renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
-    groupWrapper?: (children: React.ReactNode) => JSX.Element;
-    menuRef?: React.RefObject<HTMLButtonElement>;
-    menuWrapper?: (children: React.ReactNode) => JSX.Element;
-    menuTrigger?: (ref: React.RefObject<HTMLButtonElement>, overflowCount: number) => JSX.Element;
-    className?: string;
-}
-const OverflowMenu = <ItemType,>(props: IProps<ItemType>) => {
-    const { ref, isOverflowing, overflowCount } =
-        useOverflowMenu<HTMLButtonElement>();
-
-    if (!isOverflowing) {
-        return null;
-    }
-
-    let menu = <Menu>
-        <MenuTrigger disableButtonEnhancement>
-            {props.menuTrigger
-                ? props.menuTrigger(props.menuRef || ref, overflowCount)
-                : <MenuButton
-                    icon={<MoreHorizontalFilled/>}
-                    ref={props.menuRef || ref}
-                    aria-label="More items"
-                    appearance="subtle"
-                />}
-        </MenuTrigger>
-        <MenuPopover>
-            <MenuList>
-                {props.items.map((item, index) => (
-                    <OverflowMenuItem key={props.getKey(item, index)} {...props} item={item} index={index} />
-                ))}
-            </MenuList>
-        </MenuPopover>
-    </Menu>;
-
-    return (
-        props.menuWrapper
-            ? props.menuWrapper(menu)
-            : menu
-    );
-}
-
-const OverflowMenuItem = <ItemType,>(props: IProps<ItemType> & { item: ItemType, index: number }) => {
-    const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
-
-    if (isVisible) {
-        return null;
-    }
-
-    return (
-        <MenuItem key={props.getKey(props.item, props.index)}>
-            {props.renderItem(props.item, props.index, true)}
-        </MenuItem>
-    );
-};
-export const KWIZOverflow = <ItemType,>(props: IProps<ItemType>) => {
-    let content: JSX.Element[] = [];
-    let addMenu = () => {
-        if (menuIndex >= 0)
-            content.splice(menuIndex, 0, <OverflowMenu key="overflow_menu" {...props} />);
-        else
-            content.push(<OverflowMenu key="overflow_menu" {...props} />);
-    };
-
-    let menuIndex = -1;
-
-    props.items.forEach((item, index) => {
-        //add the menu before the first item with priority
-        let priority = props.getPriority ? props.getPriority(item, index) : undefined;
-        if (isNumber(priority) && priority > 0)
-            menuIndex = index;
-
-        content.push(<OverflowItem key={props.getKey(item, index)} id={props.getKey(item, index)}
-            priority={priority}>
-            {props.renderItem(item, index)}
-        </OverflowItem>);
-    });
-
-    addMenu();
-
-    return (
-        <Overflow minimumVisible={2} padding={60} key={`overflow_${props.items.length}`}>
-            <div style={{ overflow: "hidden" }} className={props.className}>
-                {
-                    props.groupWrapper
-                        ? props.groupWrapper(content)
-                        : content
-                }
-            </div>
-        </Overflow>
-    )
+import {
+    Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger, Overflow, OverflowItem,
+    useIsOverflowItemVisible, useOverflowMenu
+} from "@fluentui/react-components";
+import { MoreHorizontalFilled } from "@fluentui/react-icons";
+import { isNumber } from '@kwiz/common';
+
+interface IProps<ItemType> {
+    /** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
+    items: ItemType[];
+    getKey: (item: ItemType, index: number) => string;
+    getPriority?: (item: ItemType, index: number) => number;
+    renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
+    groupWrapper?: (children: React.ReactNode) => JSX.Element;
+    menuRef?: React.RefObject<HTMLButtonElement>;
+    menuWrapper?: (children: React.ReactNode) => JSX.Element;
+    menuTrigger?: (ref: React.RefObject<HTMLButtonElement>, overflowCount: number) => JSX.Element;
+    className?: string;
+}
+const OverflowMenu = <ItemType,>(props: IProps<ItemType>) => {
+    const { ref, isOverflowing, overflowCount } =
+        useOverflowMenu<HTMLButtonElement>();
+
+    if (!isOverflowing) {
+        return null;
+    }
+
+    let menu = <Menu>
+        <MenuTrigger disableButtonEnhancement>
+            {props.menuTrigger
+                ? props.menuTrigger(props.menuRef || ref, overflowCount)
+                : <MenuButton
+                    icon={<MoreHorizontalFilled/>}
+                    ref={props.menuRef || ref}
+                    aria-label="More items"
+                    appearance="subtle"
+                />}
+        </MenuTrigger>
+        <MenuPopover>
+            <MenuList>
+                {props.items.map((item, index) => (
+                    <OverflowMenuItem key={props.getKey(item, index)} {...props} item={item} index={index} />
+                ))}
+            </MenuList>
+        </MenuPopover>
+    </Menu>;
+
+    return (
+        props.menuWrapper
+            ? props.menuWrapper(menu)
+            : menu
+    );
+}
+
+const OverflowMenuItem = <ItemType,>(props: IProps<ItemType> & { item: ItemType, index: number }) => {
+    const isVisible = useIsOverflowItemVisible(props.getKey(props.item, props.index));
+
+    if (isVisible) {
+        return null;
+    }
+
+    return (
+        <MenuItem key={props.getKey(props.item, props.index)}>
+            {props.renderItem(props.item, props.index, true)}
+        </MenuItem>
+    );
+};
+export const KWIZOverflow = <ItemType,>(props: IProps<ItemType>) => {
+    let content: JSX.Element[] = [];
+    let addMenu = () => {
+        if (menuIndex >= 0)
+            content.splice(menuIndex, 0, <OverflowMenu key="overflow_menu" {...props} />);
+        else
+            content.push(<OverflowMenu key="overflow_menu" {...props} />);
+    };
+
+    let menuIndex = -1;
+
+    props.items.forEach((item, index) => {
+        //add the menu before the first item with priority
+        let priority = props.getPriority ? props.getPriority(item, index) : undefined;
+        if (isNumber(priority) && priority > 0)
+            menuIndex = index;
+
+        content.push(<OverflowItem key={props.getKey(item, index)} id={props.getKey(item, index)}
+            priority={priority}>
+            {props.renderItem(item, index)}
+        </OverflowItem>);
+    });
+
+    addMenu();
+
+    return (
+        <Overflow minimumVisible={2} padding={60} key={`overflow_${props.items.length}`}>
+            <div style={{ overflow: "hidden" }} className={props.className}>
+                {
+                    props.groupWrapper
+                        ? props.groupWrapper(content)
+                        : content
+                }
+            </div>
+        </Overflow>
+    )
 };

package/src/controls/list.tsx

@@ -1,118 +1,118 @@
-import { makeStyles, tokens } from '@fluentui/react-components';
-import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
-import React from 'react';
-import { KnownClassNames, mixins } from '../styles/styles';
-import { Horizontal } from './horizontal';
-import { Section } from './section';
-import { Vertical } from './vertical';
-
-const useStyles = makeStyles({
-    list: {
-        rowGap: 0
-    },
-    listItem: {
-        padding: tokens.spacingVerticalS,
-        ':hover': {
-            backgroundColor: tokens.colorNeutralBackground1Hover
-        }
-    },
-    listItemSelected: {
-        backgroundColor: tokens.colorNeutralBackground1Selected
-    },
-    media: {
-        width: '32px',
-        fontSize: tokens.fontSizeBase600,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center'
-    },
-    image: {
-        width: tokens.lineHeightBase600,
-        height: tokens.lineHeightBase600,
-        backgroundPosition: 'center center',
-        backgroundSize: 'cover',
-        borderRadius: tokens.borderRadiusCircular,
-        border: `1px solid ${tokens.colorNeutralStroke1}`
-    },
-    listItemBody: {
-        rowGap: 0,
-        width: 'calc(100% - 44px)'
-    },
-    listItemHeader: mixins.ellipsis,
-    listItemContent: {
-        ...mixins.ellipsis,
-        fontSize: tokens.fontSizeBase200
-    },
-    listItemMedia: {
-        ...mixins.ellipsis,
-        maxWidth: '20%',
-        '& svg': {
-            height: tokens.fontSizeBase300
-        },
-        '& button': {
-            padding: 0,
-            minWidth: 0,
-            minHeight: 0,
-            height: '14px'
-        }
-    },
-    listItemMediaNoTrim: {
-        overflow: 'visible',
-        maxWidth: 'fit-content'
-    },
-    listItemMultilineContent: {
-        whiteSpace: 'pre-line'
-    }
-});
-
-export interface iListItem {
-    key: string | number;
-    media?: JSX.Element | string;
-    header: string;
-    headerMedia?: JSX.Element | string;
-    content?: string | JSX.Element | (string | JSX.Element)[];
-    onClickOnMedia?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    selected?: boolean;
-}
-interface IProps {
-    selectable?: boolean;
-    items: iListItem[];
-    showAllHeaderMedia?: boolean;
-    /** allow multiline content */
-    multiline?: boolean;
-    dark?: boolean;
-}
-
-export const ListEx = (props: IProps) => {
-
-    const cssNames = useStyles();
-
-    const listItemElm = (item: iListItem) => <Horizontal key={item.key} css={[cssNames.listItem, item.selected && cssNames.listItemSelected]} onClick={item.onClick}>
-        {item.media && <Section css={[cssNames.media]} onClick={(e) => {
-            if (!item.onClickOnMedia)
-                e.stopPropagation();//media may have its on onclick
-        }}>{
-                isString(item.media)
-                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${props.dark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
-                    : item.media
-            }</Section>}
-        <Vertical main css={[cssNames.listItemBody]}>
-            <Horizontal main>
-                <Section main css={[cssNames.listItemHeader]}>{item.header}</Section>
-                {item.headerMedia && <Section onClick={(e) => {
-                    e.stopPropagation();//media may have its on onclick
-                }} css={[cssNames.listItemMedia, props.showAllHeaderMedia && cssNames.listItemMediaNoTrim]}>{item.headerMedia}</Section>}
-            </Horizontal>
-            {!isNullOrUndefined(item.content)
-                ? (Array.isArray(item.content) ? item.content : [item.content]).map((c, idx) => isNullOrUndefined(c) ? undefined : <Section key={idx} css={[cssNames.listItemContent, props.multiline ? cssNames.listItemMultilineContent : undefined]}>{c}</Section>)
-                : undefined}
-        </Vertical>
-    </Horizontal>;
-
-    return (
-        <Vertical css={[cssNames.list, KnownClassNames.list]}>
-            {props.items.map(item => listItemElm(item))}
-        </Vertical>
-    );
+import { makeStyles, tokens } from '@fluentui/react-components';
+import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
+import React from 'react';
+import { KnownClassNames, mixins } from '../styles/styles';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+import { Vertical } from './vertical';
+
+const useStyles = makeStyles({
+    list: {
+        rowGap: 0
+    },
+    listItem: {
+        padding: tokens.spacingVerticalS,
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover
+        }
+    },
+    listItemSelected: {
+        backgroundColor: tokens.colorNeutralBackground1Selected
+    },
+    media: {
+        width: '32px',
+        fontSize: tokens.fontSizeBase600,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center'
+    },
+    image: {
+        width: tokens.lineHeightBase600,
+        height: tokens.lineHeightBase600,
+        backgroundPosition: 'center center',
+        backgroundSize: 'cover',
+        borderRadius: tokens.borderRadiusCircular,
+        border: `1px solid ${tokens.colorNeutralStroke1}`
+    },
+    listItemBody: {
+        rowGap: 0,
+        width: 'calc(100% - 44px)'
+    },
+    listItemHeader: mixins.ellipsis,
+    listItemContent: {
+        ...mixins.ellipsis,
+        fontSize: tokens.fontSizeBase200
+    },
+    listItemMedia: {
+        ...mixins.ellipsis,
+        maxWidth: '20%',
+        '& svg': {
+            height: tokens.fontSizeBase300
+        },
+        '& button': {
+            padding: 0,
+            minWidth: 0,
+            minHeight: 0,
+            height: '14px'
+        }
+    },
+    listItemMediaNoTrim: {
+        overflow: 'visible',
+        maxWidth: 'fit-content'
+    },
+    listItemMultilineContent: {
+        whiteSpace: 'pre-line'
+    }
+});
+
+export interface iListItem {
+    key: string | number;
+    media?: JSX.Element | string;
+    header: string;
+    headerMedia?: JSX.Element | string;
+    content?: string | JSX.Element | (string | JSX.Element)[];
+    onClickOnMedia?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    selected?: boolean;
+}
+interface IProps {
+    selectable?: boolean;
+    items: iListItem[];
+    showAllHeaderMedia?: boolean;
+    /** allow multiline content */
+    multiline?: boolean;
+    dark?: boolean;
+}
+
+export const ListEx = (props: IProps) => {
+
+    const cssNames = useStyles();
+
+    const listItemElm = (item: iListItem) => <Horizontal key={item.key} css={[cssNames.listItem, item.selected && cssNames.listItemSelected]} onClick={item.onClick}>
+        {item.media && <Section css={[cssNames.media]} onClick={(e) => {
+            if (!item.onClickOnMedia)
+                e.stopPropagation();//media may have its on onclick
+        }}>{
+                isString(item.media)
+                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${props.dark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
+                    : item.media
+            }</Section>}
+        <Vertical main css={[cssNames.listItemBody]}>
+            <Horizontal main>
+                <Section main css={[cssNames.listItemHeader]}>{item.header}</Section>
+                {item.headerMedia && <Section onClick={(e) => {
+                    e.stopPropagation();//media may have its on onclick
+                }} css={[cssNames.listItemMedia, props.showAllHeaderMedia && cssNames.listItemMediaNoTrim]}>{item.headerMedia}</Section>}
+            </Horizontal>
+            {!isNullOrUndefined(item.content)
+                ? (Array.isArray(item.content) ? item.content : [item.content]).map((c, idx) => isNullOrUndefined(c) ? undefined : <Section key={idx} css={[cssNames.listItemContent, props.multiline ? cssNames.listItemMultilineContent : undefined]}>{c}</Section>)
+                : undefined}
+        </Vertical>
+    </Horizontal>;
+
+    return (
+        <Vertical css={[cssNames.list, KnownClassNames.list]}>
+            {props.items.map(item => listItemElm(item))}
+        </Vertical>
+    );
 }

package/src/controls/loading.tsx

@@ -1,11 +1,11 @@
-import { LOGO_ANIM_SMALL } from '@kwiz/common';
-import { Centered } from './centered';
-import React from 'react';
-
-interface IProps {
-}
-export const Loading: React.FunctionComponent<IProps> = (props) => {
-    return (
-        <Centered><img src={LOGO_ANIM_SMALL} alt="loading" style={{ width: '15vw' }} /></Centered>
-    );
+import { LOGO_ANIM_SMALL } from '@kwiz/common';
+import { Centered } from './centered';
+import React from 'react';
+
+interface IProps {
+}
+export const Loading: React.FunctionComponent<IProps> = (props) => {
+    return (
+        <Centered><img src={LOGO_ANIM_SMALL} alt="loading" style={{ width: '15vw' }} /></Centered>
+    );
 }

package/src/controls/please-wait.tsx

@@ -1,33 +1,33 @@
-import { Field, ProgressBar } from '@fluentui/react-components';
-import { isFunction } from '@kwiz/common';
-import React from 'react';
-import { IPrompterProps, Prompter } from './prompt';
-
-interface IProps {
-    step?: number; max?: number;
-    /** do not wrap in a dialog */
-    contentOnly?: boolean;
-    cancelText?: string;
-    onCancel?: () => void;
-    label?: string;
-}
-export const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const field = <Field validationMessage={props.label || "please wait..."} validationState="none">
-        <ProgressBar value={props.step} max={props.max} />
-    </Field>;
-    return (props.contentOnly
-        ? field
-        : <Prompter hideOk
-            hideCancel={!isFunction(props.onCancel)}
-            cancelButtonText={props.cancelText || 'cancel'}
-            onCancel={props.onCancel}>{field}</Prompter>
-    );
-}
-
-export const PleaseWaitPrompt = (props: { message: string; step?: number; max?: number; }): IPrompterProps => ({
-    //title: 'please wait...',
-    hideOk: true, hideCancel: true,
-    children: <Field validationMessage={props.message} validationState="none">
-        <ProgressBar value={props.step} max={props.max} />
-    </Field>
+import { Field, ProgressBar } from '@fluentui/react-components';
+import { isFunction } from '@kwiz/common';
+import React from 'react';
+import { IPrompterProps, Prompter } from './prompt';
+
+interface IProps {
+    step?: number; max?: number;
+    /** do not wrap in a dialog */
+    contentOnly?: boolean;
+    cancelText?: string;
+    onCancel?: () => void;
+    label?: string;
+}
+export const PleaseWait: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const field = <Field validationMessage={props.label || "please wait..."} validationState="none">
+        <ProgressBar value={props.step} max={props.max} />
+    </Field>;
+    return (props.contentOnly
+        ? field
+        : <Prompter hideOk
+            hideCancel={!isFunction(props.onCancel)}
+            cancelButtonText={props.cancelText || 'cancel'}
+            onCancel={props.onCancel}>{field}</Prompter>
+    );
+}
+
+export const PleaseWaitPrompt = (props: { message: string; step?: number; max?: number; }): IPrompterProps => ({
+    //title: 'please wait...',
+    hideOk: true, hideCancel: true,
+    children: <Field validationMessage={props.message} validationState="none">
+        <ProgressBar value={props.step} max={props.max} />
+    </Field>
 });