@mtes-mct/monitor-ui 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [3.3.1](https://github.com/MTES-MCT/monitor-ui/compare/v3.3.0...v3.3.1) (2023-02-28)
+
+
+### Bug Fixes
+
+* **deps:** downgrade cypress version ([cd7c3bd](https://github.com/MTES-MCT/monitor-ui/commit/cd7c3bd327d8b2463995214dc3d40bd539ba0f0b))
+
+# [3.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v3.2.0...v3.3.0) (2023-02-27)
+
+
+### Bug Fixes
+
+* **fields:** fix crash when custom type is given ([57117d9](https://github.com/MTES-MCT/monitor-ui/commit/57117d9d06fe33020abce79260964fe82ed21405))
+
+
+### Features
+
+* **fields:** Add generic type, rename and style search input ([2fd516c](https://github.com/MTES-MCT/monitor-ui/commit/2fd516cf93cf6f9d89c3b33ef08b1ef2390a9189))
+
 # [3.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v3.1.1...v3.2.0) (2023-02-24)
 
 

package/fields/Search.d.ts

@@ -18,5 +18,7 @@ export type SearchProps<T = string> = Omit<RsuiteAutoCompleteProps, 'as' | 'cont
     options?: Option<T>[] | undefined;
     queryMap?: ((record: Record<string, any>) => Option<T>) | undefined;
     queryUrl?: string | undefined;
+    /** Duration in milliseconds */
+    throttleDuration?: number;
 };
-export declare function Search<T = string>({ baseContainer, defaultValue, error, isLabelHidden, isLight, isSearchIconHidden, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }: SearchProps<T>): JSX.Element;
+export declare function Search<T = string>({ baseContainer, defaultValue, error, isLabelHidden, isLight, isSearchIconHidden, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration, ...originalProps }: SearchProps<T>): JSX.Element;

package/index.js

@@ -1,6 +1,6 @@
 import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useMemo, useCallback, useEffect, useReducer, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect, useReducer, useState, forwardRef, useImperativeHandle } from 'react';
 import { Dropdown as Dropdown$1, AutoComplete, Checkbox as Checkbox$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
 import { useField, useFormikContext } from 'formik';
 
@@ -3388,6 +3388,8 @@ const createInstance = (defaults) => {
 const ky = createInstance();
 var ky$1 = ky;
 
+function c(u,e,c){var i=this,a=useRef(null),o=useRef(0),f=useRef(null),l=useRef([]),m=useRef(),v=useRef(),d=useRef(u),p=useRef(!0);useEffect(function(){d.current=u;},[u]);var g=!e&&0!==e&&"undefined"!=typeof window;if("function"!=typeof u)throw new TypeError("Expected a function");e=+e||0;var w=!!(c=c||{}).leading,s=!("trailing"in c)||!!c.trailing,x="maxWait"in c,y=x?Math.max(+c.maxWait||0,e):null;useEffect(function(){return p.current=!0,function(){p.current=!1;}},[]);var h=useMemo(function(){var r=function(r){var n=l.current,t=m.current;return l.current=m.current=null,o.current=r,v.current=d.current.apply(t,n)},n=function(r,n){g&&cancelAnimationFrame(f.current),f.current=g?requestAnimationFrame(r):setTimeout(r,n);},t=function(r){if(!p.current)return !1;var n=r-a.current;return !a.current||n>=e||n<0||x&&r-o.current>=y},u=function(n){return f.current=null,s&&l.current?r(n):(l.current=m.current=null,v.current)},c=function r(){var c=Date.now();if(t(c))return u(c);if(p.current){var i=e-(c-a.current),f=x?Math.min(i,y-(c-o.current)):i;n(r,f);}},h=function(){var u=Date.now(),d=t(u);if(l.current=[].slice.call(arguments),m.current=i,a.current=u,d){if(!f.current&&p.current)return o.current=a.current,n(c,e),w?r(a.current):v.current;if(x)return n(c,e),r(a.current)}return f.current||n(c,e),v.current};return h.cancel=function(){f.current&&(g?cancelAnimationFrame(f.current):clearTimeout(f.current)),o.current=0,l.current=a.current=m.current=f.current=null;},h.isPending=function(){return !!f.current},h.flush=function(){return f.current?u(Date.now()):v.current},h},[w,x,e,y,s,g]);return h}
+
 const FieldError = styled.p `
   color: ${p => p.theme.color.maximumRed};
   display: ${p => (p.isDisabled ? 'none' : 'block')};
@@ -3928,7 +3930,7 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Search({ baseContainer, defaultValue, error, isLabelHidden, isLight = false, isSearchIconHidden = false, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }) {
+function Search({ baseContainer, defaultValue, error, isLabelHidden, isLight = false, isSearchIconHidden = false, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration = 200, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const queryRef = useRef(undefined);
@@ -3956,6 +3958,11 @@ function Search({ baseContainer, defaultValue, error, isLabelHidden, isLight = f
         setInputValue('');
         setIsOpen(false);
     }, []);
+    const fetchQueryResponse = c(async (_searched, _queryUrl, _queryMap) => {
+        const url = _queryUrl.replace('%s', _searched);
+        const rawData = await ky$1.get(url).json();
+        return rawData.map(_queryMap);
+    }, throttleDuration);
     const handleChange = useCallback(async (nextQuery) => {
         if (!(typeof nextQuery === 'string')) {
             return;
@@ -3963,9 +3970,7 @@ function Search({ baseContainer, defaultValue, error, isLabelHidden, isLight = f
         setInputValue(nextQuery);
         queryRef.current = normalizeString(nextQuery);
         if (queryUrl && queryMap && queryRef.current) {
-            const url = queryUrl.replace('%s', queryRef.current);
-            const rawData = await ky$1.get(url).json();
-            const nextData = rawData.map(queryMap);
+            const nextData = (await fetchQueryResponse(queryRef.current, queryUrl, queryMap)) || [];
             setAutoGeneratedOptions(nextData);
         }
         setIsOpen(Boolean(queryRef.current));
@@ -3975,7 +3980,7 @@ function Search({ baseContainer, defaultValue, error, isLabelHidden, isLight = f
         if (onQuery) {
             onQuery(queryRef.current);
         }
-    }, [onChange, onQuery, queryMap, queryUrl]);
+    }, [onChange, onQuery, queryMap, queryUrl, fetchQueryResponse]);
     const handleSelect = useCallback((nextValue) => {
         if (onChange) {
             onChange(nextValue);
@@ -5697,8 +5702,6 @@ const StyledInput$2 = styled(Input) `
 
 const noop = () => { };
 
-function c(u,e,c){var i=this,a=useRef(null),o=useRef(0),f=useRef(null),l=useRef([]),m=useRef(),v=useRef(),d=useRef(u),p=useRef(!0);useEffect(function(){d.current=u;},[u]);var g=!e&&0!==e&&"undefined"!=typeof window;if("function"!=typeof u)throw new TypeError("Expected a function");e=+e||0;var w=!!(c=c||{}).leading,s=!("trailing"in c)||!!c.trailing,x="maxWait"in c,y=x?Math.max(+c.maxWait||0,e):null;useEffect(function(){return p.current=!0,function(){p.current=!1;}},[]);var h=useMemo(function(){var r=function(r){var n=l.current,t=m.current;return l.current=m.current=null,o.current=r,v.current=d.current.apply(t,n)},n=function(r,n){g&&cancelAnimationFrame(f.current),f.current=g?requestAnimationFrame(r):setTimeout(r,n);},t=function(r){if(!p.current)return !1;var n=r-a.current;return !a.current||n>=e||n<0||x&&r-o.current>=y},u=function(n){return f.current=null,s&&l.current?r(n):(l.current=m.current=null,v.current)},c=function r(){var c=Date.now();if(t(c))return u(c);if(p.current){var i=e-(c-a.current),f=x?Math.min(i,y-(c-o.current)):i;n(r,f);}},h=function(){var u=Date.now(),d=t(u);if(l.current=[].slice.call(arguments),m.current=i,a.current=u,d){if(!f.current&&p.current)return o.current=a.current,n(c,e),w?r(a.current):v.current;if(x)return n(c,e),r(a.current)}return f.current||n(c,e),v.current};return h.cancel=function(){f.current&&(g?cancelAnimationFrame(f.current):clearTimeout(f.current)),o.current=0,l.current=a.current=m.current=f.current=null;},h.isPending=function(){return !!f.current},h.flush=function(){return f.current?u(Date.now()):v.current},h},[w,x,e,y,s,g]);return h}
-
 function isNumeric(val) {
     // parseFloat NaNs numeric-cast false positives (null|true|false|"")
     // ...but misinterprets leading-number strings, particularly hex literals ("0x...")