@mtes-mct/monitor-ui 7.0.0 → 7.2.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [7.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v7.0.0...v7.1.0) (2023-05-30)
+
+
+### Features
+
+* **elements:** expose FieldError ([1e8efa9](https://github.com/MTES-MCT/monitor-ui/commit/1e8efa9c82812442d532cfce2b8837716570e78a))
+
+# [7.0.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.6.0...v7.0.0) (2023-05-29)
+
+
+* fix(fields)!: move style prop passing to container level ([3d727a1](https://github.com/MTES-MCT/monitor-ui/commit/3d727a17b49898f268c7e7b8405ba60c65211a30))
+
+
+### BREAKING CHANGES
+
+* Fields `style` & `className` props are now passed to the container.
+
 # [6.6.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.5.2...v6.6.0) (2023-05-28)
 
 

package/README.md

@@ -31,6 +31,7 @@ import { createGlobalStyle, ThemeProvider } from 'styled-components'
 
 const UntypedThemeProvider = ThemeProvider as any
 
+import 'react-toastify/dist/ReactToastify.css'
 import 'rsuite/dist/rsuite.css'
 import '@mtes-mct/monitor-ui/assets/stylesheets/rsuite-override.css'
 

package/components/Notifier/NotificationEvent.d.ts

@@ -0,0 +1,9 @@
+import type { TypeOptions } from 'react-toastify';
+export type NotificationEventDetail = {
+    isSideWindowError: boolean;
+    message: string;
+    type: TypeOptions;
+};
+export declare class NotificationEvent extends CustomEvent<NotificationEventDetail> {
+    constructor(message: string, type: TypeOptions, isSideWindowError?: boolean);
+}

package/components/Notifier/index.d.ts

@@ -0,0 +1,6 @@
+import { NotificationEvent } from './NotificationEvent';
+export { NotificationEvent };
+export type NotifierProps = {
+    isSideWindow?: boolean;
+};
+export declare function Notifier({ isSideWindow }: NotifierProps): import("react/jsx-runtime").JSX.Element;

package/index.d.ts

@@ -13,10 +13,12 @@ export { ThemeProvider } from './ThemeProvider';
 export { Dialog } from './components/Dialog';
 export { Dropdown } from './components/Dropdown';
 export { NewWindow } from './components/NewWindow';
+export { NotificationEvent, Notifier } from './components/Notifier';
 export { SingleTag } from './components/SingleTag';
 export { Button } from './elements/Button';
 export { Field } from './elements/Field';
 export { Fieldset } from './elements/Fieldset';
+export { FieldError } from './elements/FieldError';
 export { IconButton } from './elements/IconButton';
 export { Label } from './elements/Label';
 export { Legend } from './elements/Legend';
@@ -63,16 +65,19 @@ export { getLocalizedDayjs } from './utils/getLocalizedDayjs';
 export { getPseudoRandomString } from './utils/getPseudoRandomString';
 export { getUtcizedDayjs } from './utils/getUtcizedDayjs';
 export { isNumeric } from './utils/isNumeric';
+export { logSoftError } from './utils/logSoftError';
 export { stopMouseEventPropagation } from './utils/stopMouseEventPropagation';
 export type { PartialTheme, Theme } from './theme';
 export type { Coordinates, DateAsStringRange, DateRange, Defined, IconProps, Option, OptionValueType, Undefine } from './types';
 export type { DialogProps } from './components/Dialog';
 export type { DropdownProps, DropdownItemProps } from './components/Dropdown';
 export type { NewWindowProps } from './components/NewWindow';
+export type { NotifierProps } from './components/Notifier';
 export type { SingleTagProps } from './components/SingleTag';
 export type { ButtonProps } from './elements/Button';
 export type { FieldProps } from './elements/Field';
 export type { FieldsetProps } from './elements/Fieldset';
+export type { FieldErrorProps } from './elements/FieldError';
 export type { IconButtonProps } from './elements/IconButton';
 export type { LabelProps } from './elements/Label';
 export type { LegendProps } from './elements/Legend';

package/index.js

@@ -1,9 +1,10 @@
 import styled, { createGlobalStyle, ThemeProvider as ThemeProvider$1, css } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useMemo, PureComponent, useCallback, useEffect, useRef, useReducer, useState, forwardRef, useImperativeHandle, createContext, useContext } from 'react';
+import t, { useMemo, PureComponent, forwardRef, useEffect, useReducer, useState, useRef, isValidElement, cloneElement, useLayoutEffect, useCallback, useImperativeHandle, createContext, useContext } 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 ReactDOM from 'react-dom';
 import { useField, useFormikContext } from 'formik';
+import { captureMessage } from '@sentry/react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2593,6 +2594,52 @@ function toWindowFeatures(features) {
         .join(',');
 }
 
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const u=t=>"number"==typeof t&&!isNaN(t),d=t=>"string"==typeof t,p=t=>"function"==typeof t,m=t=>d(t)||p(t)?t:null,f=t=>isValidElement(t)||d(t)||p(t)||u(t);function g(t,e,n){void 0===n&&(n=300);const{scrollHeight:o,style:s}=t;requestAnimationFrame(()=>{s.minHeight="initial",s.height=o+"px",s.transition=`all ${n}ms`,requestAnimationFrame(()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(e,n);});});}function h(e){let{enter:a,exit:r,appendPosition:i=!1,collapse:l=!0,collapseDuration:c=300}=e;return function(e){let{children:u,position:d,preventExitTransition:p,done:m,nodeRef:f,isIn:h}=e;const y=i?`${a}--${d}`:a,v=i?`${r}--${d}`:r,T=useRef(0);return useLayoutEffect(()=>{const t=f.current,e=y.split(" "),n=o=>{o.target===f.current&&(t.dispatchEvent(new Event("d")),t.removeEventListener("animationend",n),t.removeEventListener("animationcancel",n),0===T.current&&"animationcancel"!==o.type&&t.classList.remove(...e));};t.classList.add(...e),t.addEventListener("animationend",n),t.addEventListener("animationcancel",n);},[]),useEffect(()=>{const t=f.current,e=()=>{t.removeEventListener("animationend",e),l?g(t,m,c):m();};h||(p?e():(T.current=1,t.className+=` ${v}`,t.addEventListener("animationend",e)));},[h]),t.createElement(t.Fragment,null,u)}}function y(t,e){return null!=t?{content:t.content,containerId:t.props.containerId,id:t.props.toastId,theme:t.props.theme,type:t.props.type,data:t.props.data||{},isLoading:t.props.isLoading,icon:t.props.icon,status:e}:{}}const v={list:new Map,emitQueue:new Map,on(t,e){return this.list.has(t)||this.list.set(t,[]),this.list.get(t).push(e),this},off(t,e){if(e){const n=this.list.get(t).filter(t=>t!==e);return this.list.set(t,n),this}return this.list.delete(t),this},cancelEmit(t){const e=this.emitQueue.get(t);return e&&(e.forEach(clearTimeout),this.emitQueue.delete(t)),this},emit(t){this.list.has(t)&&this.list.get(t).forEach(e=>{const n=setTimeout(()=>{e(...[].slice.call(arguments,1));},0);this.emitQueue.has(t)||this.emitQueue.set(t,[]),this.emitQueue.get(t).push(n);});}},T=e=>{let{theme:n,type:o,...s}=e;return t.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:"colored"===n?"currentColor":`var(--toastify-icon-color-${o})`,...s})},E={info:function(e){return t.createElement(T,{...e},t.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))},warning:function(e){return t.createElement(T,{...e},t.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))},success:function(e){return t.createElement(T,{...e},t.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))},error:function(e){return t.createElement(T,{...e},t.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))},spinner:function(){return t.createElement("div",{className:"Toastify__spinner"})}};function C(t){const[,o]=useReducer(t=>t+1,0),[l,c]=useState([]),g=useRef(null),h=useRef(new Map).current,T=t=>-1!==l.indexOf(t),C=useRef({toastKey:1,displayedToast:0,count:0,queue:[],props:t,containerId:null,isToastActive:T,getToast:t=>h.get(t)}).current;function b(t){let{containerId:e}=t;const{limit:n}=C.props;!n||e&&C.containerId!==e||(C.count-=C.queue.length,C.queue=[]);}function I(t){c(e=>null==t?[]:e.filter(e=>e!==t));}function _(){const{toastContent:t,toastProps:e,staleId:n}=C.queue.shift();O(t,e,n);}function L(t,n){let{delay:s,staleId:r,...i}=n;if(!f(t)||function(t){return !g.current||C.props.enableMultiContainer&&t.containerId!==C.props.containerId||h.has(t.toastId)&&null==t.updateId}(i))return;const{toastId:l,updateId:c,data:T}=i,{props:b}=C,L=()=>I(l),N=null==c;N&&C.count++;const M={...b,style:b.toastStyle,key:C.toastKey++,...Object.fromEntries(Object.entries(i).filter(t=>{let[e,n]=t;return null!=n})),toastId:l,updateId:c,data:T,closeToast:L,isIn:!1,className:m(i.className||b.toastClassName),bodyClassName:m(i.bodyClassName||b.bodyClassName),progressClassName:m(i.progressClassName||b.progressClassName),autoClose:!i.isLoading&&(R=i.autoClose,w=b.autoClose,!1===R||u(R)&&R>0?R:w),deleteToast(){const t=y(h.get(l),"removed");h.delete(l),v.emit(4,t);const e=C.queue.length;if(C.count=null==l?C.count-C.displayedToast:C.count-1,C.count<0&&(C.count=0),e>0){const t=null==l?C.props.limit:1;if(1===e||1===t)C.displayedToast++,_();else {const n=t>e?e:t;C.displayedToast=n;for(let t=0;t<n;t++)_();}}else o();}};var R,w;M.iconOut=function(t){let{theme:n,type:o,isLoading:s,icon:r}=t,i=null;const l={theme:n,type:o};return !1===r||(p(r)?i=r(l):isValidElement(r)?i=cloneElement(r,l):d(r)||u(r)?i=r:s?i=E.spinner():(t=>t in E)(o)&&(i=E[o](l))),i}(M),p(i.onOpen)&&(M.onOpen=i.onOpen),p(i.onClose)&&(M.onClose=i.onClose),M.closeButton=b.closeButton,!1===i.closeButton||f(i.closeButton)?M.closeButton=i.closeButton:!0===i.closeButton&&(M.closeButton=!f(b.closeButton)||b.closeButton);let x=t;isValidElement(t)&&!d(t.type)?x=cloneElement(t,{closeToast:L,toastProps:M,data:T}):p(t)&&(x=t({closeToast:L,toastProps:M,data:T})),b.limit&&b.limit>0&&C.count>b.limit&&N?C.queue.push({toastContent:x,toastProps:M,staleId:r}):u(s)?setTimeout(()=>{O(x,M,r);},s):O(x,M,r);}function O(t,e,n){const{toastId:o}=e;n&&h.delete(n);const s={content:t,props:e};h.set(o,s),c(t=>[...t,o].filter(t=>t!==n)),v.emit(4,y(s,null==s.props.updateId?"added":"updated"));}return useEffect(()=>(C.containerId=t.containerId,v.cancelEmit(3).on(0,L).on(1,t=>g.current&&I(t)).on(5,b).emit(2,C),()=>{h.clear(),v.emit(3,C);}),[]),useEffect(()=>{C.props=t,C.isToastActive=T,C.displayedToast=l.length;}),{getToastToRender:function(e){const n=new Map,o=Array.from(h.values());return t.newestOnTop&&o.reverse(),o.forEach(t=>{const{position:e}=t.props;n.has(e)||n.set(e,[]),n.get(e).push(t);}),Array.from(n,t=>e(t[0],t[1]))},containerRef:g,isToastActive:T}}function b(t){return t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}function I(t){return t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.clientY}function _$1(t){const[o,a]=useState(!1),[r,l]=useState(!1),c=useRef(null),u=useRef({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,d=useRef(t),{autoClose:m,pauseOnHover:f,closeToast:g,onClick:h,closeOnClick:y}=t;function v(e){if(t.draggable){"touchstart"===e.nativeEvent.type&&e.nativeEvent.preventDefault(),u.didMove=!1,document.addEventListener("mousemove",_),document.addEventListener("mouseup",L),document.addEventListener("touchmove",_),document.addEventListener("touchend",L);const n=c.current;u.canCloseOnClick=!0,u.canDrag=!0,u.boundingRect=n.getBoundingClientRect(),n.style.transition="",u.x=b(e.nativeEvent),u.y=I(e.nativeEvent),"x"===t.draggableDirection?(u.start=u.x,u.removalDistance=n.offsetWidth*(t.draggablePercent/100)):(u.start=u.y,u.removalDistance=n.offsetHeight*(80===t.draggablePercent?1.5*t.draggablePercent:t.draggablePercent/100));}}function T(e){if(u.boundingRect){const{top:n,bottom:o,left:s,right:a}=u.boundingRect;"touchend"!==e.nativeEvent.type&&t.pauseOnHover&&u.x>=s&&u.x<=a&&u.y>=n&&u.y<=o?C():E();}}function E(){a(!0);}function C(){a(!1);}function _(e){const n=c.current;u.canDrag&&n&&(u.didMove=!0,o&&C(),u.x=b(e),u.y=I(e),u.delta="x"===t.draggableDirection?u.x-u.start:u.y-u.start,u.start!==u.x&&(u.canCloseOnClick=!1),n.style.transform=`translate${t.draggableDirection}(${u.delta}px)`,n.style.opacity=""+(1-Math.abs(u.delta/u.removalDistance)));}function L(){document.removeEventListener("mousemove",_),document.removeEventListener("mouseup",L),document.removeEventListener("touchmove",_),document.removeEventListener("touchend",L);const e=c.current;if(u.canDrag&&u.didMove&&e){if(u.canDrag=!1,Math.abs(u.delta)>u.removalDistance)return l(!0),void t.closeToast();e.style.transition="transform 0.2s, opacity 0.2s",e.style.transform=`translate${t.draggableDirection}(0)`,e.style.opacity="1";}}useEffect(()=>{d.current=t;}),useEffect(()=>(c.current&&c.current.addEventListener("d",E,{once:!0}),p(t.onOpen)&&t.onOpen(isValidElement(t.children)&&t.children.props),()=>{const t=d.current;p(t.onClose)&&t.onClose(isValidElement(t.children)&&t.children.props);}),[]),useEffect(()=>(t.pauseOnFocusLoss&&(document.hasFocus()||C(),window.addEventListener("focus",E),window.addEventListener("blur",C)),()=>{t.pauseOnFocusLoss&&(window.removeEventListener("focus",E),window.removeEventListener("blur",C));}),[t.pauseOnFocusLoss]);const O={onMouseDown:v,onTouchStart:v,onMouseUp:T,onTouchEnd:T};return m&&f&&(O.onMouseEnter=C,O.onMouseLeave=E),y&&(O.onClick=t=>{h&&h(t),u.canCloseOnClick&&g();}),{playToast:E,pauseToast:C,isRunning:o,preventExitTransition:r,toastRef:c,eventHandlers:O}}function L(e){let{closeToast:n,theme:o,ariaLabel:s="close"}=e;return t.createElement("button",{className:`Toastify__close-button Toastify__close-button--${o}`,type:"button",onClick:t=>{t.stopPropagation(),n(t);},"aria-label":s},t.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},t.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function O(e){let{delay:n,isRunning:o,closeToast:s,type:a="default",hide:r,className:i,style:l,controlledProgress:u,progress:d,rtl:m,isIn:f,theme:g}=e;const h=r||u&&0===d,y={...l,animationDuration:`${n}ms`,animationPlayState:o?"running":"paused",opacity:h?0:1};u&&(y.transform=`scaleX(${d})`);const v=clsx("Toastify__progress-bar",u?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated",`Toastify__progress-bar-theme--${g}`,`Toastify__progress-bar--${a}`,{"Toastify__progress-bar--rtl":m}),T=p(i)?i({rtl:m,type:a,defaultClassName:v}):clsx(v,i);return t.createElement("div",{role:"progressbar","aria-hidden":h?"true":"false","aria-label":"notification timer",className:T,style:y,[u&&d>=1?"onTransitionEnd":"onAnimationEnd"]:u&&d<1?null:()=>{f&&s();}})}const N=n=>{const{isRunning:o,preventExitTransition:s,toastRef:r,eventHandlers:i}=_$1(n),{closeButton:l,children:u,autoClose:d,onClick:m,type:f,hideProgressBar:g,closeToast:h,transition:y,position:v,className:T,style:E,bodyClassName:C,bodyStyle:b,progressClassName:I,progressStyle:N,updateId:M,role:R,progress:w,rtl:x,toastId:$,deleteToast:k,isIn:P,isLoading:B,iconOut:D,closeOnClick:A,theme:z}=n,F=clsx("Toastify__toast",`Toastify__toast-theme--${z}`,`Toastify__toast--${f}`,{"Toastify__toast--rtl":x},{"Toastify__toast--close-on-click":A}),H=p(T)?T({rtl:x,position:v,type:f,defaultClassName:F}):clsx(F,T),S=!!w||!d,q={closeToast:h,type:f,theme:z};let Q=null;return !1===l||(Q=p(l)?l(q):isValidElement(l)?cloneElement(l,q):L(q)),t.createElement(y,{isIn:P,done:k,position:v,preventExitTransition:s,nodeRef:r},t.createElement("div",{id:$,onClick:m,className:H,...i,style:E,ref:r},t.createElement("div",{...P&&{role:R},className:p(C)?C({type:f}):clsx("Toastify__toast-body",C),style:b},null!=D&&t.createElement("div",{className:clsx("Toastify__toast-icon",{"Toastify--animate-icon Toastify__zoom-enter":!B})},D),t.createElement("div",null,u)),Q,t.createElement(O,{...M&&!S?{key:`pb-${M}`}:{},rtl:x,theme:z,delay:d,isRunning:o,isIn:P,closeToast:h,hide:g,type:f,style:N,className:I,controlledProgress:S,progress:w||0})))},M=function(t,e){return void 0===e&&(e=!1),{enter:`Toastify--animate Toastify__${t}-enter`,exit:`Toastify--animate Toastify__${t}-exit`,appendPosition:e}},R=h(M("bounce",!0));h(M("slide",!0));h(M("zoom"));h(M("flip"));const k=forwardRef((e,n)=>{const{getToastToRender:o,containerRef:a,isToastActive:r}=C(e),{className:i,style:l,rtl:u,containerId:d}=e;function f(t){const e=clsx("Toastify__toast-container",`Toastify__toast-container--${t}`,{"Toastify__toast-container--rtl":u});return p(i)?i({position:t,rtl:u,defaultClassName:e}):clsx(e,m(i))}return useEffect(()=>{n&&(n.current=a.current);},[]),t.createElement("div",{ref:a,className:"Toastify",id:d},o((e,n)=>{const o=n.length?{...l}:{...l,pointerEvents:"none"};return t.createElement("div",{className:f(e),style:o,key:`container-${e}`},n.map((e,o)=>{let{content:s,props:a}=e;return t.createElement(N,{...a,isIn:r(a.toastId),style:{...a.style,"--nth":o+1,"--len":n.length},key:`toast-${a.key}`},s)}))}))});k.displayName="ToastContainer",k.defaultProps={position:"top-right",transition:R,autoClose:5e3,closeButton:L,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};let P,B=new Map,D=[],A=1;function z(){return ""+A++}function F(t){return t&&(d(t.toastId)||u(t.toastId))?t.toastId:z()}function H(t,e){return B.size>0?v.emit(0,t,e):D.push({content:t,options:e}),e.toastId}function S(t,e){return {...e,type:e&&e.type||t,toastId:F(e)}}function q(t){return (e,n)=>H(e,S(t,n))}function Q(t,e){return H(t,S("default",e))}Q.loading=(t,e)=>H(t,S("default",{isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1,...e})),Q.promise=function(t,e,n){let o,{pending:s,error:a,success:r}=e;s&&(o=d(s)?Q.loading(s,n):Q.loading(s.render,{...n,...s}));const i={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null},l=(t,e,s)=>{if(null==e)return void Q.dismiss(o);const a={type:t,...i,...n,data:s},r=d(e)?{render:e}:e;return o?Q.update(o,{...a,...r}):Q(r.render,{...a,...r}),s},c=p(t)?t():t;return c.then(t=>l("success",r,t)).catch(t=>l("error",a,t)),c},Q.success=q("success"),Q.info=q("info"),Q.error=q("error"),Q.warning=q("warning"),Q.warn=Q.warning,Q.dark=(t,e)=>H(t,S("default",{theme:"dark",...e})),Q.dismiss=t=>{B.size>0?v.emit(1,t):D=D.filter(e=>null!=t&&e.options.toastId!==t);},Q.clearWaitingQueue=function(t){return void 0===t&&(t={}),v.emit(5,t)},Q.isActive=t=>{let e=!1;return B.forEach(n=>{n.isToastActive&&n.isToastActive(t)&&(e=!0);}),e},Q.update=function(t,e){void 0===e&&(e={}),setTimeout(()=>{const n=function(t,e){let{containerId:n}=e;const o=B.get(n||P);return o&&o.getToast(t)}(t,e);if(n){const{props:o,content:s}=n,a={delay:100,...o,...e,toastId:e.toastId||t,updateId:z()};a.toastId!==t&&(a.staleId=t);const r=a.render||s;delete a.render,H(r,a);}},0);},Q.done=t=>{Q.update(t,{progress:1});},Q.onChange=t=>(v.on(4,t),()=>{v.off(4,t);}),Q.POSITION={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},Q.TYPE={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"},v.on(2,t=>{P=t.containerId||t,B.set(P,t),D.forEach(t=>{v.emit(0,t.content,t.options);}),D=[];}).on(3,t=>{B.delete(t.containerId||t),0===B.size&&v.off(0).off(1).off(5);});
+
+class NotificationEvent extends CustomEvent {
+    constructor(message, type, isSideWindowError = false) {
+        super('NOTIFICATION_EVENT', {
+            detail: {
+                isSideWindowError,
+                message,
+                type
+            }
+        });
+    }
+}
+
+function Notifier({ isSideWindow = false }) {
+    const push = useCallback((event) => {
+        if (event.detail.isSideWindowError !== isSideWindow) {
+            return;
+        }
+        Q(event.detail.message, {
+            position: Q.POSITION.BOTTOM_RIGHT,
+            type: event.detail.type
+        });
+    }, 
+    // We don't want to depend on `isSideWindow` since it should never change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    useEffect(() => {
+        window.document.addEventListener('NOTIFICATION_EVENT', push);
+        return () => {
+            window.document.removeEventListener('NOTIFICATION_EVENT', push);
+        };
+    }, [push]);
+    return (jsx(StyledToastContainer
+    // We may wish to let the user be able to copy the notification message
+    // which is not easy to achieve when the notification is draggable
+    , { 
+        // We may wish to let the user be able to copy the notification message
+        // which is not easy to achieve when the notification is draggable
+        draggable: false }));
+}
+// TODO Style the notifications with Adeline.
+const StyledToastContainer = styled(k) ``;
+
 const ICON_SIZE = {
     [Size.LARGE]: 20,
     [Size.NORMAL]: 20,
@@ -3263,6 +3310,17 @@ const InnerBox = styled.div `
     `}
 `;
 
+const FieldError = styled.p.attrs(props => ({
+    className: classnames('Element-FieldError', props.className)
+})) `
+  color: ${p => p.theme.color.maximumRed};
+  display: ${p => (p.isDisabled ? 'none' : 'block')};
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3846;
+  margin: 4px 0 0 0;
+`;
+
 const Label = styled.label.attrs(props => ({
     className: classnames('Element-Label', props.className)
 })) `
@@ -3429,17 +3487,6 @@ const SimpleTable = {
     Th
 };
 
-const FieldError = styled.p.attrs(props => ({
-    className: classnames('Element-FieldError', props.className)
-})) `
-  color: ${p => p.theme.color.maximumRed};
-  display: ${p => (p.isDisabled ? 'none' : 'block')};
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.3846;
-  margin: 4px 0 0 0;
-`;
-
 const useClickOutsideEffect = (zoneRefOrzoneRefs, action, baseContainer) => {
     const handleClickOutside = useCallback((event) => {
         const eventTarget = event.target;
@@ -20697,7 +20744,11 @@ function useForceUpdate() {
     return { forceDebouncedUpdate, forceUpdate };
 }
 
-const getPseudoRandomString = () => Math.random().toString(36).slice(2);
+function getPseudoRandomString() {
+    const nowAsString = new Date().toISOString();
+    const token = Math.random().toString(36).slice(2);
+    return `${nowAsString}${token}`;
+}
 
 function useKey(deps) {
     const keyRef = useRef(getPseudoRandomString());
@@ -31283,7 +31334,7 @@ var CoordinateInput = function CoordinateInput(_ref) {
       inputRef(innerRef.current);
     }
   }, [innerRef, inputRef]);
-  return /*#__PURE__*/React.createElement("input", _extends({}, props, {
+  return /*#__PURE__*/t.createElement("input", _extends({}, props, {
     defaultValue: controlledValue,
     placeholder: placeholder,
     ref: innerRef,
@@ -33866,7 +33917,7 @@ const MASK_OPTIONS_PROPS_NAMES = MASK_PROPS_NAMES.filter(pName => NON_MASK_OPTIO
 // 1. seems like it's wrong to have Opts as only mask options. Other component/input props should also be there. Where is "unmask" prop for instance?
 // 2. Unmask should be infered from Opts (see https://github.com/uNmAnNeR/imaskjs/issues/554#issuecomment-1114014010)
 function IMaskMixin(ComposedComponent) {
-  const MaskedComponent = class extends React.Component {
+  const MaskedComponent = class extends t.Component {
     constructor(props) {
       super(props);
       this._inputRef = this._inputRef.bind(this);
@@ -33944,7 +33995,7 @@ function IMaskMixin(ComposedComponent) {
       if (this.props.onComplete && this.maskRef) this.props.onComplete(this.maskValue, this.maskRef, e);
     }
     render() {
-      return React.createElement(ComposedComponent, Object.assign({}, this._extractNonMaskProps(this.props), {
+      return t.createElement(ComposedComponent, Object.assign({}, this._extractNonMaskProps(this.props), {
         inputRef: this._inputRef
       }));
     }
@@ -33952,7 +34003,7 @@ function IMaskMixin(ComposedComponent) {
   const nestedComponentName = ComposedComponent.displayName || ComposedComponent.name || 'Component';
   MaskedComponent.displayName = "IMask(".concat(nestedComponentName, ")");
   MaskedComponent.propTypes = MASK_PROPS;
-  return React.forwardRef((props, ref) => React.createElement(MaskedComponent, Object.assign({}, props, {
+  return t.forwardRef((props, ref) => t.createElement(MaskedComponent, Object.assign({}, props, {
     ref
   })));
 }
@@ -33963,7 +34014,7 @@ const IMaskInput = IMaskMixin(_ref => {
       inputRef
     } = _ref,
     props = _objectWithoutPropertiesLoose$1(_ref, _excluded);
-  return React.createElement('input', Object.assign({}, props, {
+  return t.createElement('input', Object.assign({}, props, {
     ref: inputRef
   }));
 });
@@ -35465,5 +35516,26 @@ function useNewWindow() {
     return contextValue;
 }
 
-export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+/* eslint-disable no-console */
+function logSoftError({ context = {}, isSideWindowError = false, message, originalError, userMessage }) {
+    console.group(`Soft Error: ${message}`);
+    console.debug('context', context);
+    console.debug('originalError', originalError);
+    console.groupEnd();
+    const extra = originalError
+        ? {
+            ...context,
+            originalError
+        }
+        : { ...context };
+    captureMessage(message, {
+        extra,
+        level: 'warning'
+    });
+    if (userMessage) {
+        window.document.dispatchEvent(new NotificationEvent(userMessage, 'error', isSideWindowError));
+    }
+}
+
+export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, logSoftError, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map