@dartech/arsenal-ui 1.4.21 → 1.4.22

package/index.js

@@ -810,6 +810,7 @@ const ControlAutocomplete = _a => {
 };
 
 function ControlQueryAutocomplete(_a) {
+  var _b;
   var {
       name,
       label,
@@ -831,7 +832,7 @@ function ControlQueryAutocomplete(_a) {
       requiredErrorText = ''
     } = _a,
     autocompleteProps = __rest(_a, ["name", "label", "control", "required", "searchBy", "labelKey", "multiple", "disabled", "valueKey", "sortBy", "hideErrorMessage", "disableCloseOnSelect", "textFieldProps", "onChange", "queryFunction", "validate", "itemQueryFunction", "requiredErrorText"]);
-  const _b = useController({
+  const _c = useController({
       control,
       name,
       defaultValue: multiple ? [] : null,
@@ -840,20 +841,19 @@ function ControlQueryAutocomplete(_a) {
         validate
       }
     }),
-    _c = _b.field,
+    _d = _c.field,
     {
       ref,
       onChange: setFieldValue,
       value: formValue
-    } = _c,
-    fieldProps = __rest(_c, ["ref", "onChange", "value"]),
+    } = _d,
+    fieldProps = __rest(_d, ["ref", "onChange", "value"]),
     {
       fieldState: {
         error,
         isDirty
       }
-    } = _b;
-  // const formValue = useWatch({ control, name, defaultValue:  });
+    } = _c;
   const {
     getOptionLabel,
     isOptionEqualToValue,
@@ -865,13 +865,25 @@ function ControlQueryAutocomplete(_a) {
   const [open, setOpen] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const [searchValue, setSearchValue] = useState('');
-  const [totalItems, setTotalItems] = useState(0);
   const [page, setPage] = useState(0);
-  const [options, setOptions] = useState([]);
+  const {
+    data,
+    isFetching
+  } = useQuery(['options', page, searchValue], () => {
+    const params = qs.parse(Object.assign({
+      page: `${page}`,
+      size: '20',
+      sort: sortBy
+    }, searchValue ? {
+      [searchBy]: searchValue
+    } : {}), {
+      ignoreQueryPrefix: true
+    });
+    return queryFunction(params);
+  });
   const debouncedChange = useDebounce(val => {
     setPage(0);
     setSearchValue(val);
-    setOptions([]);
   }, 500);
   const handleInputChange = useCallback((_, value) => {
     setInputValue(value);
@@ -897,10 +909,10 @@ function ControlQueryAutocomplete(_a) {
   }, [formValue, isDirty, valueKey, labelKey, itemQueryFunction, setFieldValue]);
   const handleOnScroll = useCallback(event => {
     const listboxNode = event.currentTarget;
-    if (listboxNode.scrollHeight - listboxNode.scrollTop - listboxNode.clientHeight <= 1 && options.length < totalItems) {
+    if (listboxNode.scrollHeight - listboxNode.scrollTop - listboxNode.clientHeight <= 1 && (data === null || data === void 0 ? void 0 : data.collection.length) < (data === null || data === void 0 ? void 0 : data.totalItems)) {
       setPage(page => page + 1);
     }
-  }, [totalItems, options]);
+  }, [data]);
   const handleOpen = () => {
     setOpen(true);
   };
@@ -908,33 +920,12 @@ function ControlQueryAutocomplete(_a) {
     setOpen(false);
     setSearchValue('');
   };
-  const {
-    data,
-    isFetching
-  } = useQuery(['options', page, searchValue], () => {
-    const params = qs.parse(Object.assign({
-      page: `${page}`,
-      size: '20',
-      sort: sortBy
-    }, searchValue ? {
-      [searchBy]: searchValue
-    } : {}), {
-      ignoreQueryPrefix: true
-    });
-    return queryFunction(params);
-  });
-  useEffect(() => {
-    if (data) {
-      setOptions(prevOptions => [...prevOptions, ...data.collection]);
-      setTotalItems(data.totalItems);
-    }
-  }, [data]);
   return jsx(Autocomplete, Object.assign({}, fieldProps, {
     fullWidth: true,
     disablePortal: true,
     size: "small",
     readOnly: disabled,
-    options: options,
+    options: (_b = data === null || data === void 0 ? void 0 : data.collection) !== null && _b !== void 0 ? _b : [],
     multiple: multiple,
     getOptionLabel: getOptionLabel,
     isOptionEqualToValue: isOptionEqualToValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.4.21",
+  "version": "1.4.22",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"