@mtes-mct/monitor-ui 2.8.1 → 2.9.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [2.9.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.8.1...v2.9.0) (2023-01-25)
+
+
+### Features
+
+* **types:** restrict component props types to handle exact optional prop types ([296acf4](https://github.com/MTES-MCT/monitor-ui/commit/296acf48a7c701f85cbee72ceeea4071d60f0ea6))
+
+## [2.8.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.8.0...v2.8.1) (2023-01-19)
+
+
+### Bug Fixes
+
+* **fields:** fix string date wrong default value offset in DatePicker & DateRangePicker ([18bc2aa](https://github.com/MTES-MCT/monitor-ui/commit/18bc2aa729cbe88c8e87fac294515a2fa75abbe7))
+
 # [2.8.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.7.2...v2.8.0) (2023-01-17)
 
 

package/index.js

@@ -2809,6 +2809,10 @@ const useClickOutside = (zoneRefOrzoneRefs, action, baseContainer) => {
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 /**
  * lodash (Custom Build) <https://lodash.com/>
  * Build: `lodash modularize exports="npm" -o ./`
@@ -3390,47 +3394,64 @@ const StyledCheckbox = styled(Checkbox$1) `
   }
 `;
 
-var dayjs_min = {exports: {}};
+var dayjs_minExports$1 = {};
+var dayjs_min = {
+  get exports(){ return dayjs_minExports$1; },
+  set exports(v){ dayjs_minExports$1 = v; },
+};
 
 var hasRequiredDayjs_min;
 
 function requireDayjs_min () {
-	if (hasRequiredDayjs_min) return dayjs_min.exports;
+	if (hasRequiredDayjs_min) return dayjs_minExports$1;
 	hasRequiredDayjs_min = 1;
 	(function (module, exports) {
 		!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),l=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(h){case c:return r?l(1,0):l(31,11);case f:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),l=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,l=this;r=Number(r);var $=O.p(h),y=function(t){var e=w(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===f)return this.set(f,this.$M+r);if($===c)return this.set(c,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},$={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||$[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,v=this-M,g=O.m(this,M);return g=($={},$[c]=g/12,$[f]=g,$[h]=g/3,$[o]=(v-m)/6048e5,$[a]=(v-m)/864e5,$[u]=v/n,$[s]=v/e,$[i]=v/t,$)[y]||v,l?g:O.a(g)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[g],w.Ls=D,w.p={},w}));
 } (dayjs_min));
-	return dayjs_min.exports;
+	return dayjs_minExports$1;
 }
 
 var dayjs_minExports = requireDayjs_min();
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
 
-var timezone$1 = {exports: {}};
+var timezoneExports = {};
+var timezone$1 = {
+  get exports(){ return timezoneExports; },
+  set exports(v){ timezoneExports = v; },
+};
 
 (function (module, exports) {
 	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,v=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",h=+e;return (o.utc(v).valueOf()-(h-=h%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}}));
 } (timezone$1));
 
-var timezone = timezone$1.exports;
+var timezone = timezoneExports;
 
-var utc$1 = {exports: {}};
+var utcExports = {};
+var utc$1 = {
+  get exports(){ return utcExports; },
+  set exports(v){ utcExports = v; },
+};
 
 (function (module, exports) {
 	!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}}));
 } (utc$1));
 
-var utc = utc$1.exports;
+var utc = utcExports;
 
-var fr = {exports: {}};
+var frExports = {};
+var fr = {
+  get exports(){ return frExports; },
+  set exports(v){ frExports = v; },
+};
 
 (function (module, exports) {
 	!function(e,n){module.exports=n(requireDayjs_min());}(commonjsGlobal,(function(e){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e),i={name:"fr",weekdays:"dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),weekdaysShort:"dim._lun._mar._mer._jeu._ven._sam.".split("_"),weekdaysMin:"di_lu_ma_me_je_ve_sa".split("_"),months:"janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),monthsShort:"janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd D MMMM YYYY HH:mm"},relativeTime:{future:"dans %s",past:"il y a %s",s:"quelques secondes",m:"une minute",mm:"%d minutes",h:"une heure",hh:"%d heures",d:"un jour",dd:"%d jours",M:"un mois",MM:"%d mois",y:"un an",yy:"%d ans"},ordinal:function(e){return ""+e+(1===e?"er":"")}};return t.default.locale(i,null,!0),i}));
 } (fr));
 
-dayjs_minExports.extend(timezone);
-dayjs_minExports.extend(utc);
-dayjs_minExports.locale('fr');
-dayjs_minExports.tz.setDefault('UTC');
+dayjs.extend(timezone);
+dayjs.extend(utc);
+dayjs.locale('fr');
+dayjs.tz.setDefault('UTC');
 
 // TODO Use `date-fns` instead of `dayjs`.
 /**
@@ -3443,7 +3464,7 @@ function getLocalizedDayjs(utcDate) {
     // The number of minutes returned by getTimezoneOffset() is positive if the local time zone is behind UTC,
     // and negative if the local time zone is ahead of UTC. For example, for UTC+10, -600 will be returned.
     const timezoneOffsetInMinutes = new Date().getTimezoneOffset();
-    return dayjs_minExports(utcDate).add(timezoneOffsetInMinutes, 'minutes');
+    return dayjs(utcDate).add(timezoneOffsetInMinutes, 'minutes');
 }
 
 // TODO Use `date-fns` instead of `dayjs`.
@@ -3458,7 +3479,7 @@ function getUtcizedDayjs(localDate) {
     // The number of minutes returned by getTimezoneOffset() is positive if the local time zone is behind UTC,
     // and negative if the local time zone is ahead of UTC. For example, for UTC+10, -600 will be returned.
     const timezoneOffsetInMinutes = definedLocalDate.getTimezoneOffset();
-    return dayjs_minExports(definedLocalDate).subtract(timezoneOffsetInMinutes, 'minutes');
+    return dayjs(definedLocalDate).subtract(timezoneOffsetInMinutes, 'minutes');
 }
 
 /**
@@ -3893,7 +3914,7 @@ function formatNumberAsDoubleDigit(numberLike) {
 function getDateFromDateAndTimeTuple(dateTuple, timeTuple, isEnd = false) {
     const [year, month, day] = dateTuple;
     const [hour, minute] = timeTuple;
-    const rawDateAsDayjs = dayjs_minExports()
+    const rawDateAsDayjs = dayjs()
         .year(Number(year))
         .month(Number(month) - 1)
         .date(Number(day))
@@ -4257,7 +4278,7 @@ const InputGroup = styled.div `
 `;
 
 function getUtcDayjs() {
-    return dayjs_minExports().utc();
+    return dayjs().utc();
 }
 
 new Array(24).fill(undefined).map((_, index) => ({
@@ -4304,7 +4325,9 @@ function CalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
     }, [forceUpdate]);
     return (jsx(Box$5, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
-            ranges: [], value: defaultValue })) }));
+            ranges: [], 
+            // eslint-disable-next-line no-null/no-null
+            value: defaultValue ?? null })) }));
 }
 const Box$5 = styled.div `
   height: 0;
@@ -4572,19 +4595,21 @@ function sortDates(dates) {
     return dates
         .map(date => date.toISOString())
         .sort()
-        .map(dateAsIsoString => dayjs_minExports(dateAsIsoString).toDate());
+        .map(dateAsIsoString => dayjs(dateAsIsoString).toDate());
 }
 
 function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
     const boxRef = useRef();
     const selectedFirstDate = useRef();
+    const selectedSecondDate = useRef();
     const { forceUpdate } = useForceUpdate();
     const controlledValue = useMemo(() => (defaultValue ? sortDates(defaultValue) : undefined), [defaultValue]);
     const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), []);
     const disabledDate = useMemo(() => (date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
     const handleSelect = useCallback((nextDate) => {
-        if (!selectedFirstDate.current) {
+        if (!selectedFirstDate.current || selectedSecondDate.current) {
             selectedFirstDate.current = nextDate;
+            selectedSecondDate.current = undefined;
             return;
         }
         const sortedDateRange = sortDates([selectedFirstDate.current, nextDate]);
@@ -4592,6 +4617,7 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         const startDateTuple = getDateTupleFromDate(startDate);
         const endDateTuple = getDateTupleFromDate(endDate);
         const nextDateTupleRange = [startDateTuple, endDateTuple];
+        selectedSecondDate.current = nextDate;
         onChange(nextDateTupleRange);
     }, [onChange]);
     useEffect(() => {
@@ -4601,7 +4627,8 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
     }, [forceUpdate]);
     return (jsx(Box$3, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
-            value: controlledValue })) }));
+            // eslint-disable-next-line no-null/no-null
+            value: controlledValue ?? null })) }));
 }
 const Box$3 = styled.div `
   height: 0;
@@ -4891,9 +4918,8 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         selectedLocalizedEndDateTupleRef.current = nextEndDateTuple;
         selectedLocalizedEndTimeTupleRef.current = getTimeTupleFromDate(selectedLocalizedEndDateRef.current);
         closeRangeCalendarPicker();
-        forceUpdate();
         submit();
-    }, [closeRangeCalendarPicker, forceUpdate, submit, withTime]);
+    }, [closeRangeCalendarPicker, submit, withTime]);
     const handleTimeInputFilled = useCallback((position, nextTimeTuple) => {
         if (position === DateRangePosition.START) {
             // If a start date has already been selected
@@ -4991,16 +5017,16 @@ const ChecboxesBox$1 = styled.div `
     `}
 `;
 
-function MultiSelect({ baseContainer, error, fixedWidth = 5, isLabelHidden = false, isLight = false, label, onChange, options, 
+function MultiSelect({ baseContainer, error, fixedWidth, isLabelHidden = false, isLight = false, label, onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const { forceUpdate } = useForceUpdate();
+    const [isOpen, setIsOpen] = useState(true);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const { forceUpdate } = useForceUpdate();
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -5011,46 +5037,51 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
         onChange(normalizedNextValue);
     }, [onChange]);
-    const open = useCallback(() => {
-        setIsOpen(true);
-    }, []);
+    const toggle = useCallback((event) => {
+        let targetElement = event.target;
+        if (targetElement.tagName === 'path') {
+            if (targetElement.parentElement) {
+                targetElement = targetElement.parentElement;
+            }
+        }
+        if (targetElement.classList.contains('rs-picker-toggle') ||
+            targetElement.classList.contains('rs-picker-tag-wrapper') ||
+            targetElement.classList.contains('rs-picker-toggle-caret')) {
+            setIsOpen(!isOpen);
+        }
+    }, [isOpen]);
     useClickOutside(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledTagPicker, { "$fixedWidth": fixedWidth, "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$1, { ref: boxRef, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, data: options, id: originalProps.name, onChange: handleChange, onClick: toggle, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
-// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
-// We should hack that.
-const StyledTagPicker = styled(TagPicker) `
-  border: 0;
-  cursor: pointer;
-  width: ${p => p.$fixedWidth}px;
-
-  > .rs-picker-toggle {
-    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
-    cursor: inherit;
-  }
-`;
 const Box$1 = styled.div `
   position: relative;
+  width: 100%;
 
   > .rs-picker-input {
+    border: solid 1px ${p => (p.$isActive ? p.theme.color.blueGray[100] : p.theme.color.gainsboro)} !important;
+    cursor: pointer;
+    width: 100%;
+
+    :hover {
+      border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
+    }
+
+    :active,
+    :focus {
+      border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+    }
+
     > .rs-picker-toggle {
-      border: solid 1px ${p => p.theme.color.gainsboro} !important;
+      background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)} !important;
+      border: 0;
+      cursor: inherit;
       font-size: 13px;
       line-height: 1.3846;
       padding: 5px 40px 5px 8px !important;
 
-      :hover {
-        border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
-      }
-
-      :active,
-      :focus {
-        border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
-      }
-
       > .rs-stack {
         > .rs-stack-item {
           > .rs-picker-toggle-placeholder {
@@ -5079,6 +5110,29 @@ const Box$1 = styled.div `
       }
     }
   }
+
+  > .rs-picker-menu {
+    > .rs-picker-check-menu {
+      margin: 0;
+
+      > div[role='option'] {
+        > .rs-check-item {
+          > .rs-checkbox-checker {
+            > label {
+              font-size: 13px;
+              line-height: 1.3846;
+              padding: 8px 12px 8px 38px;
+
+              > .rs-checkbox-wrapper {
+                left: 12px;
+                top: 10px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 `;
 
 function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
@@ -5227,20 +5281,20 @@ searchable = false, ...originalProps }) {
         setIsOpen(false);
     }, []);
     const handleChange = useCallback((nextValue) => {
-        if (!onChange) {
-            return;
+        close();
+        if (onChange) {
+            const normalizedNextValue = nextValue ?? undefined;
+            onChange(normalizedNextValue);
         }
-        const normalizedNextValue = nextValue ?? undefined;
-        onChange(normalizedNextValue);
-    }, [onChange]);
-    const open = useCallback(() => {
-        setIsOpen(true);
-    }, []);
+    }, [close, onChange]);
+    const toggle = useCallback(() => {
+        setIsOpen(!isOpen);
+    }, [isOpen]);
     useClickOutside(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, 
+    return (jsxs(Field$2, { children: [jsx(Label, { hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, 
                     // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
                     // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
                     onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
@@ -5253,8 +5307,11 @@ const StyledSelectPicker = styled(SelectPicker) `
 `;
 const Box = styled.div `
   position: relative;
+  width: 100%;
 
   > .rs-picker-select {
+    width: 100%;
+
     > .rs-picker-toggle {
       border: solid 1px ${p => p.theme.color.gainsboro} !important;
       font-size: 13px;
@@ -5338,6 +5395,9 @@ function FormikAutoComplete({ name, ...originalProps }) {
     const [field, , helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
     const defaultValue = useMemo(() => field.value, []);
+    if (!defaultValue) {
+        return jsx(AutoComplete, { name: name, onChange: helpers.setValue, ...originalProps });
+    }
     return jsx(AutoComplete, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
 }