@kwiz/fluentui 1.0.73 → 1.0.75

package/src/controls/input.tsx

@@ -1,161 +1,161 @@
-import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, Link, makeStyles, mergeClasses, Textarea, TextareaOnChangeData, TextareaProps } from '@fluentui/react-components';
-import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber, pasteTextAtCursor, stopEvent } from '@kwiz/common';
-import React, { useCallback, useEffect } from 'react';
-import { useEffectOnlyOnMount, useRefWithState } from '../helpers';
-import { useKWIZFluentContext } from '../helpers/context-internal';
-import { useCommonStyles } from '../styles/styles';
-import { Horizontal } from './horizontal';
-import { MenuEx } from './menu';
-import { Section } from './section';
-import { Vertical } from './vertical';
-
-
-interface IProps extends InputProps {
-    /** fire on enter */
-    onOK?: () => void;
-    /** fire on escape */
-    onCancel?: () => void;
-    tokens?: { title: string; value: string; replace?: boolean; }[];
-    tokenMenuLabel?: string;
-}
-export const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const ctx = useKWIZFluentContext();
-    const input = <Input appearance={ctx.inputAppearance} {...props}
-        onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
-            ? e => {
-                if (e.key === "Enter") props.onOK?.();
-                if (e.key === "Escape") props.onCancel?.();
-            }
-            : undefined
-        }
-    />;
-    return (
-        isNotEmptyArray(props.tokens)
-            ? <Vertical nogap>
-                {input}
-                <Horizontal nogap>
-                    <Section main />
-                    <MenuEx trigger={<Link>{props.tokenMenuLabel || "tokens"}</Link>} items={props.tokens.map(token =>
-                    ({
-                        title: token.title, onClick: () => {
-                            let newValue = props.value || "";
-                            if (token.replace) {
-                                newValue = token.value;
-                            }
-                            else {
-                                if (isNullOrEmptyString(props.value))
-                                    newValue = token.value;
-                                else
-                                    newValue += ` ${token.value}`;
-                            }
-                            props.onChange(null, {
-                                value: newValue
-                            });
-                        }
-                    }))} />
-                </Horizontal>
-            </Vertical>
-            : input
-    );
-}
-
-const fullSize: GriffelStyle = {
-    width: '100% !important',
-    maxHeight: '100% !important'
-};
-const useStyles = makeStyles({
-    fullSizeTextArea: {
-        ...fullSize,
-        ['& > textarea']: fullSize
-    },
-})
-
-interface IPropsTextArea extends TextareaProps {
-    fullSize?: boolean;
-    /** recalc the height to grow to show all text */
-    growNoShrink?: boolean;
-    allowTab?: boolean;
-    /** fire on enter */
-    onOK?: () => void;
-    /** fire on escape */
-    onCancel?: () => void;
-    onValueChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: {
-        value: string;
-        elm: HTMLTextAreaElement;
-    }) => void;
-}
-export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>> = (props) => {
-    const cssNames = useStyles();
-    let css: string[] = [];
-
-    if (props.fullSize) css.push(cssNames.fullSizeTextArea);
-    const textAreaRef = useRefWithState<HTMLTextAreaElement>(null);
-    const recalcHeight = React.useCallback(() => {
-        if (textAreaRef.ref.current && props.growNoShrink) {
-            if (textAreaRef.ref.current.scrollHeight > textAreaRef.ref.current.clientHeight)
-                textAreaRef.ref.current.style.minHeight = textAreaRef.ref.current.scrollHeight + 'px';
-        }
-    }, useEffectOnlyOnMount);
-
-    useEffect(() => { recalcHeight(); }, [textAreaRef.value]);
-
-    const onChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: TextareaOnChangeData) => {
-        props.onValueChange?.(e, { value: d.value, elm: textAreaRef.ref.current });
-        recalcHeight();
-    }, [props.onChange]);
-
-    const needOnKeyDown = props.allowTab || isFunction(props.onOK) || isFunction(props.onCancel);
-
-    let style: React.CSSProperties = { height: '100%', ...props.style };
-
-    return (
-        <Textarea ref={textAreaRef.set} className={mergeClasses(...css)} {...props} style={style}
-            onKeyDown={needOnKeyDown ? (e) => {
-                if (props.allowTab && e.key === "Tab") {
-                    stopEvent(e);
-                    const textArea = e.target as HTMLTextAreaElement;
-                    pasteTextAtCursor(textArea, "\t");
-                    onChange(e, { value: textArea.value });
-                    return;
-                }
-                if (e.key === "Enter") props.onOK?.();
-                if (e.key === "Escape") props.onCancel?.();
-                props.onKeyDown?.(e);
-            } : props.onKeyDown}
-            onChange={(e, d) => {
-                props.onChange?.(e, d);
-                onChange(e, d);
-            }} />
-    );
-}
-
-
-interface INumberProps extends Omit<IProps, "value" | "onChange" | "defaultValue" | "inputMode"> {
-    defaultValue?: number;
-    onChange: (value: number) => void;
-    allowDecimals?: boolean;
-    /** if sent true - onChange will only be called when a valid non-empty value is being set */
-    required?: boolean;
-}
-export const InputNumberEx: React.FunctionComponent<React.PropsWithChildren<INumberProps>> = (props) => {
-    const commonStyles = useCommonStyles();
-    const [valueStr, setValueStr] = React.useState(isNumber(props.defaultValue) ? `${props.defaultValue}` : '');
-    const [isValid, setIsValid] = React.useState(true);
-    const onChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
-        const newValue = data.value;
-        setValueStr(newValue);//update text box anyways
-        const asNumber = props.allowDecimals ? parseFloat(newValue) : parseInt(newValue, 10);
-        const isValid = props.required ? !isNullOrNaN(asNumber) : isNullOrUndefined(asNumber) || !isNaN(asNumber);
-        setIsValid(isValid);
-        props.onChange(isValid ? asNumber : null);
-    }, [props.allowDecimals, props.onChange, props.required]);
-
-    const passProps: IProps = { ...props, defaultValue: undefined, value: undefined, onChange: undefined };
-
-    return (
-        <Vertical nogap>
-            <InputEx inputMode={props.allowDecimals ? "decimal" : "numeric"} {...passProps} value={valueStr} onChange={onChange} />
-            {!isValid && <Label className={commonStyles.validationLabel}>this is not a valid value</Label>}
-        </Vertical>
-    );
+import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, Link, makeStyles, mergeClasses, Textarea, TextareaOnChangeData, TextareaProps } from '@fluentui/react-components';
+import { isFunction, isNotEmptyArray, isNullOrEmptyString, isNullOrNaN, isNullOrUndefined, isNumber, pasteTextAtCursor, stopEvent } from '@kwiz/common';
+import React, { useCallback, useEffect } from 'react';
+import { useEffectOnlyOnMount, useRefWithState } from '../helpers';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { useCommonStyles } from '../styles/styles';
+import { Horizontal } from './horizontal';
+import { MenuEx } from './menu';
+import { Section } from './section';
+import { Vertical } from './vertical';
+
+
+interface IProps extends InputProps {
+    /** fire on enter */
+    onOK?: () => void;
+    /** fire on escape */
+    onCancel?: () => void;
+    tokens?: { title: string; value: string; replace?: boolean; }[];
+    tokenMenuLabel?: string;
+}
+export const InputEx: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const ctx = useKWIZFluentContext();
+    const input = <Input appearance={ctx.inputAppearance} {...props}
+        onKeyDown={isFunction(props.onOK) || isFunction(props.onCancel)
+            ? e => {
+                if (e.key === "Enter") props.onOK?.();
+                if (e.key === "Escape") props.onCancel?.();
+            }
+            : undefined
+        }
+    />;
+    return (
+        isNotEmptyArray(props.tokens)
+            ? <Vertical nogap>
+                {input}
+                <Horizontal nogap>
+                    <Section main />
+                    <MenuEx trigger={<Link>{props.tokenMenuLabel || "tokens"}</Link>} items={props.tokens.map(token =>
+                    ({
+                        title: token.title, onClick: () => {
+                            let newValue = props.value || "";
+                            if (token.replace) {
+                                newValue = token.value;
+                            }
+                            else {
+                                if (isNullOrEmptyString(props.value))
+                                    newValue = token.value;
+                                else
+                                    newValue += ` ${token.value}`;
+                            }
+                            props.onChange(null, {
+                                value: newValue
+                            });
+                        }
+                    }))} />
+                </Horizontal>
+            </Vertical>
+            : input
+    );
+}
+
+const fullSize: GriffelStyle = {
+    width: '100% !important',
+    maxHeight: '100% !important'
+};
+const useStyles = makeStyles({
+    fullSizeTextArea: {
+        ...fullSize,
+        ['& > textarea']: fullSize
+    },
+})
+
+interface IPropsTextArea extends TextareaProps {
+    fullSize?: boolean;
+    /** recalc the height to grow to show all text */
+    growNoShrink?: boolean;
+    allowTab?: boolean;
+    /** fire on enter */
+    onOK?: () => void;
+    /** fire on escape */
+    onCancel?: () => void;
+    onValueChange?: (e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: {
+        value: string;
+        elm: HTMLTextAreaElement;
+    }) => void;
+}
+export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsTextArea>> = (props) => {
+    const cssNames = useStyles();
+    let css: string[] = [];
+
+    if (props.fullSize) css.push(cssNames.fullSizeTextArea);
+    const textAreaRef = useRefWithState<HTMLTextAreaElement>(null);
+    const recalcHeight = React.useCallback(() => {
+        if (textAreaRef.ref.current && props.growNoShrink) {
+            if (textAreaRef.ref.current.scrollHeight > textAreaRef.ref.current.clientHeight)
+                textAreaRef.ref.current.style.minHeight = textAreaRef.ref.current.scrollHeight + 'px';
+        }
+    }, useEffectOnlyOnMount);
+
+    useEffect(() => { recalcHeight(); }, [textAreaRef.value]);
+
+    const onChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement> | React.KeyboardEvent<HTMLTextAreaElement>, d: TextareaOnChangeData) => {
+        props.onValueChange?.(e, { value: d.value, elm: textAreaRef.ref.current });
+        recalcHeight();
+    }, [props.onChange]);
+
+    const needOnKeyDown = props.allowTab || isFunction(props.onOK) || isFunction(props.onCancel);
+
+    let style: React.CSSProperties = { height: '100%', ...props.style };
+
+    return (
+        <Textarea ref={textAreaRef.set} className={mergeClasses(...css)} {...props} style={style}
+            onKeyDown={needOnKeyDown ? (e) => {
+                if (props.allowTab && e.key === "Tab") {
+                    stopEvent(e);
+                    const textArea = e.target as HTMLTextAreaElement;
+                    pasteTextAtCursor(textArea, "\t");
+                    onChange(e, { value: textArea.value });
+                    return;
+                }
+                if (e.key === "Enter") props.onOK?.();
+                if (e.key === "Escape") props.onCancel?.();
+                props.onKeyDown?.(e);
+            } : props.onKeyDown}
+            onChange={(e, d) => {
+                props.onChange?.(e, d);
+                onChange(e, d);
+            }} />
+    );
+}
+
+
+interface INumberProps extends Omit<IProps, "value" | "onChange" | "defaultValue" | "inputMode"> {
+    defaultValue?: number;
+    onChange: (value: number) => void;
+    allowDecimals?: boolean;
+    /** if sent true - onChange will only be called when a valid non-empty value is being set */
+    required?: boolean;
+}
+export const InputNumberEx: React.FunctionComponent<React.PropsWithChildren<INumberProps>> = (props) => {
+    const commonStyles = useCommonStyles();
+    const [valueStr, setValueStr] = React.useState(isNumber(props.defaultValue) ? `${props.defaultValue}` : '');
+    const [isValid, setIsValid] = React.useState(true);
+    const onChange = React.useCallback((ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
+        const newValue = data.value;
+        setValueStr(newValue);//update text box anyways
+        const asNumber = props.allowDecimals ? parseFloat(newValue) : parseInt(newValue, 10);
+        const isValid = props.required ? !isNullOrNaN(asNumber) : isNullOrUndefined(asNumber) || !isNaN(asNumber);
+        setIsValid(isValid);
+        props.onChange(isValid ? asNumber : null);
+    }, [props.allowDecimals, props.onChange, props.required]);
+
+    const passProps: IProps = { ...props, defaultValue: undefined, value: undefined, onChange: undefined };
+
+    return (
+        <Vertical nogap>
+            <InputEx inputMode={props.allowDecimals ? "decimal" : "numeric"} {...passProps} value={valueStr} onChange={onChange} />
+            {!isValid && <Label className={commonStyles.validationLabel}>this is not a valid value</Label>}
+        </Vertical>
+    );
 }

package/src/controls/kwizoverflow.tsx

@@ -1,107 +1,107 @@
-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';
-import { useKWIZFluentContext } from "../helpers/context-internal";
-
-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 ctx = useKWIZFluentContext();
-
-    const { ref, isOverflowing, overflowCount } =
-        useOverflowMenu<HTMLButtonElement>();
-
-    if (!isOverflowing) {
-        return null;
-    }
-
-    let menu = <Menu mountNode={ctx.mountNode}>
-        <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';
+import { useKWIZFluentContext } from "../helpers/context-internal";
+
+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 ctx = useKWIZFluentContext();
+
+    const { ref, isOverflowing, overflowCount } =
+        useOverflowMenu<HTMLButtonElement>();
+
+    if (!isOverflowing) {
+        return null;
+    }
+
+    let menu = <Menu mountNode={ctx.mountNode}>
+        <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>
+    )
 };