@kwiz/fluentui 1.0.62 → 1.0.64

package/dist/controls/search.d.ts

@@ -1,12 +1,13 @@
 import { InputProps } from '@fluentui/react-components';
 import React from 'react';
-interface IProps extends InputProps {
+interface IProps extends Omit<InputProps, "onChange"> {
     main?: boolean;
+    /** number of seconds to debounce the deferred event */
     delay?: number;
     /** if changing the value in the caller - change this prop to reset */
     resetValue?: string;
     onChangeDeferred?: (newValue: string) => void;
-    onChangeSync?: (newValue: string) => void;
+    onChange?: (newValue: string) => void;
 }
 /** value is set on first load. to change the value after it was first set - change the compoenet's key. */
 export declare const Search: React.FunctionComponent<React.PropsWithChildren<IProps>>;

package/dist/controls/search.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input, makeStyles, mergeClasses } from '@fluentui/react-components';
 import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
-import { debounce, isFunction, isNullOrEmptyString, isUndefined } from '@kwiz/common';
-import React, { useState } from 'react';
+import { debounce, isNullOrEmptyString } from '@kwiz/common';
+import React, { useRef } from 'react';
 import { GetLogger } from '../_modules/config';
-import { useStateEX } from '../helpers';
 import { mixins } from '../styles/styles';
 const logger = GetLogger("Search");
 const useStyles = makeStyles({
@@ -16,35 +15,28 @@ const useStyles = makeStyles({
 /** value is set on first load. to change the value after it was first set - change the compoenet's key. */
 export const Search = (props) => {
     const cssNames = useStyles();
-    const [resetKey, setResetKey] = useState(1);
     let delay = props.delay || 1;
+    let refonChangeDeferred = useRef(props.onChangeDeferred);
+    //keep updating the ref
+    React.useEffect(() => { refonChangeDeferred.current = props.onChangeDeferred; }, [props.onChangeDeferred]);
     //cannot call debounce every render, since it won't be the same debounced instance...
     var notifyParent = React.useMemo(() => debounce(v => {
+        var _a;
         logger.log(`Set: ${v}`);
-        props.onChangeDeferred(v);
+        //Call the latest ref - we don't want to call an old version of this function
+        (_a = refonChangeDeferred.current) === null || _a === void 0 ? void 0 : _a.call(refonChangeDeferred, v);
     }, delay * 1000), [delay]);
-    let [value, setValue] = useStateEX(props.value || "", {
-        onChange: newValue => {
-            if (isFunction(props.onChangeSync))
-                props.onChangeSync(newValue);
-            if (isFunction(props.onChangeDeferred))
-                notifyParent(newValue);
-            return newValue;
-        }
-    });
-    //once props change, reset this control value to match
-    React.useEffect(() => {
-        if (!isUndefined(props.resetValue))
-            setValue(props.resetValue);
-        //todo: bug: setting value does not sync into the text box
-        setResetKey(resetKey + 1);
-    }, [props.resetValue]);
-    return (_jsx(Input, Object.assign({}, props, { value: value, onChange: (e, data) => setValue(data.value), className: mergeClasses(cssNames.root, props.main && cssNames.main), contentBefore: !isNullOrEmptyString(value) ? undefined : _jsx(SearchRegular, { className: cssNames.searchIcon }), contentAfter: isNullOrEmptyString(value)
+    const currentValue = props.value || "";
+    return (_jsx(Input, Object.assign({}, props, { value: currentValue, onChange: (e, data) => {
+            var _a;
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, data.value);
+            notifyParent(data.value);
+        }, className: mergeClasses(cssNames.root, props.main && cssNames.main), contentBefore: !isNullOrEmptyString(currentValue) ? undefined : _jsx(SearchRegular, { className: cssNames.searchIcon }), contentAfter: isNullOrEmptyString(currentValue)
             ? undefined
             : _jsx(DismissRegular, { className: cssNames.clickable, onClick: () => {
-                    setValue("");
-                    //todo: bug: setting value does not sync into the text box
-                    setResetKey(resetKey + 1);
-                } }) }), resetKey));
+                    var _a;
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, "");
+                    notifyParent("");
+                } }) })));
 };
 //# sourceMappingURL=search.js.map

package/dist/controls/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACtF,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,MAAM,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAEnC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,EAAE,EACL;IACD,UAAU,EAAE,EACX;CACJ,CAAC,CAAA;AAWF,2GAA2G;AAC3G,MAAM,CAAC,MAAM,MAAM,GAA6D,CAAC,KAAK,EAAE,EAAE;IACtF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE5C,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;IAE7B,qFAAqF;IACrF,IAAI,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;QAChD,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACxB,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3B,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,EAAE;QAClD,QAAQ,EAAE,QAAQ,CAAC,EAAE;YACjB,IAAI,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC;gBAAE,KAAK,CAAC,YAAY,CAAC,QAAkB,CAAC,CAAC;YAC3E,IAAI,UAAU,CAAC,KAAK,CAAC,gBAAgB,CAAC;gBAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;YAC/D,OAAO,QAAQ,CAAC;QACpB,CAAC;KACJ,CAAC,CAAC;IAEH,sDAAsD;IACtD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,CAAC;YAC9B,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC/B,0DAA0D;QAC1D,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvB,OAAO,CACH,KAAC,KAAK,oBAAoB,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EACtF,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,EACnE,aAAa,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,GAAI,EAC1G,YAAY,EAAE,mBAAmB,CAAC,KAAK,CAAC;YACpC,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,KAAC,cAAc,IAAC,SAAS,EAAE,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE;oBAC3D,QAAQ,CAAC,EAAE,CAAC,CAAC;oBACb,0DAA0D;oBAC1D,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA;gBAC7B,CAAC,GAAI,KATD,QAAQ,CAUZ,CACX,CAAC;AACN,CAAC,CAAA"}
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/controls/search.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,MAAM,MAAM,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;AAEnC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,EAAE,EACL;IACD,UAAU,EAAE,EACX;CACJ,CAAC,CAAA;AAYF,2GAA2G;AAC3G,MAAM,CAAC,MAAM,MAAM,GAA6D,CAAC,KAAK,EAAE,EAAE;IACtF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;IAE7B,IAAI,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACzD,uBAAuB;IACvB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,mBAAmB,CAAC,OAAO,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE3G,qFAAqF;IACrF,IAAI,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;QAChD,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACxB,6EAA6E;QAC7E,MAAA,mBAAmB,CAAC,OAAO,oEAAG,CAAC,CAAC,CAAC;IACrC,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3B,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IAEvC,OAAO,CACH,KAAC,KAAK,oBAAK,KAAK,IAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;;YACzD,MAAA,KAAK,CAAC,QAAQ,sDAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YAC7B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,EACG,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,EACnE,aAAa,EAAE,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,SAAS,EAAE,QAAQ,CAAC,UAAU,GAAI,EACjH,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC;YAC3C,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,KAAC,cAAc,IAAC,SAAS,EAAE,QAAQ,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE;;oBAC3D,MAAA,KAAK,CAAC,QAAQ,sDAAG,EAAE,CAAC,CAAC;oBACrB,YAAY,CAAC,EAAE,CAAC,CAAC;gBACrB,CAAC,GAAI,IACL,CACX,CAAC;AACN,CAAC,CAAA"}

package/dist/helpers/hooks.d.ts

@@ -11,3 +11,8 @@ export declare function useStateEX<ValueType>(initialValue: ValueType, options?:
     (newValue: SetStateAction<ValueType>) => Promise<ValueType>,
     MutableRefObject<ValueType>
 ];
+export declare function useRefWithState<T>(initialValue?: T): {
+    asRef: MutableRefObject<T>;
+    asState: T;
+    setRef: (newValue: T) => void;
+};

package/dist/helpers/hooks.js

@@ -86,4 +86,13 @@ export function useStateEX(initialValue, options) {
     }), []);
     return [value, setValue, currentValue];
 }
+export function useRefWithState(initialValue) {
+    let asRef = useRef(initialValue);
+    let [asState, setState] = useState(initialValue);
+    let setRef = useCallback((newValue) => {
+        asRef.current = newValue;
+        setState(newValue);
+    }, useEffectOnlyOnMount);
+    return { asRef, asState, setRef };
+}
 //# sourceMappingURL=hooks.js.map

package/dist/helpers/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../src/helpers/hooks.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.62",
+    "version": "1.0.64",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/controls/search.tsx

@@ -1,9 +1,8 @@
 import { Input, InputProps, makeStyles, mergeClasses } from '@fluentui/react-components';
 import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
-import { debounce, isFunction, isNullOrEmptyString, isUndefined } from '@kwiz/common';
-import React, { useState } from 'react';
+import { debounce, isNullOrEmptyString } from '@kwiz/common';
+import React, { useRef } from 'react';
 import { GetLogger } from '../_modules/config';
-import { useStateEX } from '../helpers';
 import { mixins } from '../styles/styles';
 const logger = GetLogger("Search");
 
@@ -16,55 +15,47 @@ const useStyles = makeStyles({
     },
 })
 
-interface IProps extends InputProps {
+interface IProps extends Omit<InputProps, "onChange"> {
     main?: boolean;
+    /** number of seconds to debounce the deferred event */
     delay?: number;
     /** if changing the value in the caller - change this prop to reset */
     resetValue?: string;
     onChangeDeferred?: (newValue: string) => void;
-    onChangeSync?: (newValue: string) => void;
+    onChange?: (newValue: string) => void;
 }
 
 /** value is set on first load. to change the value after it was first set - change the compoenet's key. */
 export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
     const cssNames = useStyles();
 
-    const [resetKey, setResetKey] = useState(1);
-
     let delay = props.delay || 1;
 
+    let refonChangeDeferred = useRef(props.onChangeDeferred);
+    //keep updating the ref
+    React.useEffect(() => { refonChangeDeferred.current = props.onChangeDeferred; }, [props.onChangeDeferred]);
+
     //cannot call debounce every render, since it won't be the same debounced instance...
     var notifyParent = React.useMemo(() => debounce(v => {
         logger.log(`Set: ${v}`);
-        props.onChangeDeferred(v);
+        //Call the latest ref - we don't want to call an old version of this function
+        refonChangeDeferred.current?.(v);
     }, delay * 1000), [delay]);
 
-    let [value, setValue] = useStateEX(props.value || "", {
-        onChange: newValue => {
-            if (isFunction(props.onChangeSync)) props.onChangeSync(newValue as string);
-            if (isFunction(props.onChangeDeferred)) notifyParent(newValue);
-            return newValue;
-        }
-    });
-
-    //once props change, reset this control value to match
-    React.useEffect(() => {
-        if (!isUndefined(props.resetValue))
-            setValue(props.resetValue);
-        //todo: bug: setting value does not sync into the text box
-        setResetKey(resetKey + 1)
-    }, [props.resetValue]);
+    const currentValue = props.value || "";
 
     return (
-        <Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
+        <Input {...props} value={currentValue} onChange={(e, data) => {
+            props.onChange?.(data.value);
+            notifyParent(data.value);
+        }}
             className={mergeClasses(cssNames.root, props.main && cssNames.main)}
-            contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
-            contentAfter={isNullOrEmptyString(value)
+            contentBefore={!isNullOrEmptyString(currentValue) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
+            contentAfter={isNullOrEmptyString(currentValue)
                 ? undefined
                 : <DismissRegular className={cssNames.clickable} onClick={() => {
-                    setValue("");
-                    //todo: bug: setting value does not sync into the text box
-                    setResetKey(resetKey + 1)
+                    props.onChange?.("");
+                    notifyParent("");
                 }} />
             } />
     );

package/src/helpers/hooks.tsx

@@ -104,4 +104,14 @@ export function useStateEX<ValueType>(initialValue: ValueType, options?: {
     }), []);
 
     return [value, setValue, currentValue];
+}
+
+export function useRefWithState<T>(initialValue?: T) {
+    let asRef = useRef<T>(initialValue);
+    let [asState, setState] = useState<T>(initialValue);
+    let setRef = useCallback((newValue: T) => {
+        asRef.current = newValue;
+        setState(newValue);
+    }, useEffectOnlyOnMount);
+    return { asRef, asState, setRef };
 }