@kwiz/fluentui 1.0.44 → 1.0.46

package/src/controls/file-upload.tsx

@@ -1,11 +1,11 @@
-import { ButtonProps, makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
 import { ArrowUploadRegular } from "@fluentui/react-icons";
 import { isFunction, isNotEmptyArray, isNotEmptyString, isNullOrEmptyString, lastOrNull } from '@kwiz/common';
 import * as React from "react";
 import { useDragDropContext } from "../helpers/drag-drop/drag-drop-context";
 import { dropFiles } from "../helpers/drag-drop/exports";
 import { useEffectOnlyOnMount } from "../helpers/hooks";
-import { ButtonEX, CompoundButtonEXSecondary } from "./button";
+import { ButtonEX, ButtonEXProps, CompoundButtonEXSecondary } from "./button";
 
 const useStyles = makeStyles({
     addRowIsOver: {
@@ -24,7 +24,7 @@ interface iProps {
     icon?: JSX.Element;
     onChange?: (newFile: File | File[], errors: string[]) => void;
     asBase64?: (files: base64Result[], errors: string[]) => void;
-    buttonProps?: ButtonProps;
+    buttonProps?: Partial<ButtonEXProps>;
     disabled?: boolean;
     /** limit file size in MB, for the asBase64 */
     fileSizeLimit?: number;

package/src/controls/input.tsx

@@ -1,7 +1,9 @@
-import { GriffelStyle, Input, InputProps, makeStyles, mergeClasses, Textarea, TextareaProps } from '@fluentui/react-components';
-import { isFunction } from '@kwiz/common';
+import { GriffelStyle, Input, InputOnChangeData, InputProps, Label, makeStyles, mergeClasses, Textarea, TextareaProps } from '@fluentui/react-components';
+import { isFunction, isNullOrNaN, isNullOrUndefined, isNumber } from '@kwiz/common';
 import React from 'react';
 import { useKWIZFluentContext } from '../helpers/context';
+import { useCommonStyles } from '../styles/styles';
+import { Vertical } from './vertical';
 
 
 interface IProps extends InputProps {
@@ -58,4 +60,35 @@ export const TextAreaEx: React.FunctionComponent<React.PropsWithChildren<IPropsT
             recalcHeight();
         }} />
     );
+}
+
+
+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]);
+
+    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/helpers/hooks.tsx

@@ -1,5 +1,5 @@
 import { Label, Link, makeStyles, Toast, ToastBody, Toaster, ToastFooter, ToastIntent, ToastTitle, useId, useToastController } from "@fluentui/react-components";
-import { IDictionary, isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
+import { IDictionary, isDebug, isFunction, isNotEmptyArray, isNullOrEmptyString, isPrimitiveValue, jsonClone, jsonStringify, LoggerLevel, objectsEqual, wrapFunction } from "@kwiz/common";
 import { MutableRefObject, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
 import { GetLogger } from "../_modules/config";
 import { IPrompterProps, Prompter } from "../controls/prompt";
@@ -76,8 +76,14 @@ export function useStateEX<ValueType>(initialValue: ValueType, options?: {
 
 
     let setValueWithEvents = wrapFunction(setValueWithCheck, {
-        before: newValue => isFunction(options.onChange) ? options.onChange(newValue) : newValue,
-        after: newValue => currentValue.current = newValue as ValueType
+        before: (newValue: ValueType) => isFunction(options.onChange) ? options.onChange(newValue) : newValue,
+        after: (newValue: ValueType) => currentValue.current = isPrimitiveValue(newValue) || isFunction(newValue)
+            ? newValue
+            //fix skipUpdateIfSame for complex objects
+            //if we don't clone it, currentValue.current will be a ref to the value in the owner
+            //and will be treated as unchanged object, and it will be out of sync
+            //this leads to skipUpdateIfSame failing after just 1 unchanged update
+            : jsonClone(newValue) as ValueType
     });
 
     const setValue = useCallback((newState: ValueType) => new Promise<ValueType>(resolve => {

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './controls/canvas/DrawPad';
 export * from './controls/centered';
 export * from './controls/ColorPickerDialog';
 export * from './controls/date';
+export * from './controls/diagram-picker';
 export * from './controls/divider';
 export * from './controls/dropdown';
 export * from './controls/error-boundary';

package/src/styles/styles.ts

@@ -86,6 +86,18 @@ export const useCommonStyles = makeStyles({
             display: 'none !important'
         }
     },
+    hintLabel: {
+        color: tokens.colorNeutralForeground3,
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightRegular,
+        lineHeight: tokens.lineHeightBase200
+    },
+    validationLabel: {
+        color: tokens.colorPaletteRedForeground1,
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightRegular,
+        lineHeight: tokens.lineHeightBase200
+    }
 });
 
 export const commonSizes = {