@mtes-mct/monitor-ui 2.6.0 → 2.7.0

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 { useMemo, useReducer, useRef, useState, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { useMemo, useCallback, useEffect, useReducer, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import { Dropdown as Dropdown$1, AutoComplete as AutoComplete$1, Checkbox as Checkbox$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
 import { useField, useFormikContext } from 'formik';
 
@@ -333,6 +333,100 @@ function _arity(n, fn) {
   }
 }
 
+/**
+ * Internal curryN function.
+ *
+ * @private
+ * @category Function
+ * @param {Number} length The arity of the curried function.
+ * @param {Array} received An array of arguments received thus far.
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curryN(length, received, fn) {
+  return function () {
+    var combined = [];
+    var argsIdx = 0;
+    var left = length;
+    var combinedIdx = 0;
+
+    while (combinedIdx < received.length || argsIdx < arguments.length) {
+      var result;
+
+      if (combinedIdx < received.length && (!_isPlaceholder(received[combinedIdx]) || argsIdx >= arguments.length)) {
+        result = received[combinedIdx];
+      } else {
+        result = arguments[argsIdx];
+        argsIdx += 1;
+      }
+
+      combined[combinedIdx] = result;
+
+      if (!_isPlaceholder(result)) {
+        left -= 1;
+      }
+
+      combinedIdx += 1;
+    }
+
+    return left <= 0 ? fn.apply(this, combined) : _arity(left, _curryN(length, combined, fn));
+  };
+}
+
+/**
+ * Returns a curried equivalent of the provided function, with the specified
+ * arity. The curried function has two unusual capabilities. First, its
+ * arguments needn't be provided one at a time. If `g` is `R.curryN(3, f)`, the
+ * following are equivalent:
+ *
+ *   - `g(1)(2)(3)`
+ *   - `g(1)(2, 3)`
+ *   - `g(1, 2)(3)`
+ *   - `g(1, 2, 3)`
+ *
+ * Secondly, the special placeholder value [`R.__`](#__) may be used to specify
+ * "gaps", allowing partial application of any combination of arguments,
+ * regardless of their positions. If `g` is as above and `_` is [`R.__`](#__),
+ * the following are equivalent:
+ *
+ *   - `g(1, 2, 3)`
+ *   - `g(_, 2, 3)(1)`
+ *   - `g(_, _, 3)(1)(2)`
+ *   - `g(_, _, 3)(1, 2)`
+ *   - `g(_, 2)(1)(3)`
+ *   - `g(_, 2)(1, 3)`
+ *   - `g(_, 2)(_, 3)(1)`
+ *
+ * @func
+ * @memberOf R
+ * @since v0.5.0
+ * @category Function
+ * @sig Number -> (* -> a) -> (* -> a)
+ * @param {Number} length The arity for the returned function.
+ * @param {Function} fn The function to curry.
+ * @return {Function} A new, curried function.
+ * @see R.curry
+ * @example
+ *
+ *      const sumArgs = (...args) => R.sum(args);
+ *
+ *      const curriedAddFourNumbers = R.curryN(4, sumArgs);
+ *      const f = curriedAddFourNumbers(1, 2);
+ *      const g = f(3);
+ *      g(4); //=> 10
+ */
+
+var curryN =
+/*#__PURE__*/
+_curry2(function curryN(length, fn) {
+  if (length === 1) {
+    return _curry1(fn);
+  }
+
+  return _arity(length, _curryN(length, [], fn));
+});
+
 /**
  * Optimized internal three-arity curry function.
  *
@@ -445,6 +539,13 @@ function _dispatchable(methodNames, transducerCreator, fn) {
   };
 }
 
+function _reduced(x) {
+  return x && x['@@transducer/reduced'] ? x : {
+    '@@transducer/value': x,
+    '@@transducer/reduced': true
+  };
+}
+
 var _xfBase = {
   init: function () {
     return this.xf['@@transducer/init']();
@@ -454,6 +555,19 @@ var _xfBase = {
   }
 };
 
+function _map(fn, functor) {
+  var idx = 0;
+  var len = functor.length;
+  var result = Array(len);
+
+  while (idx < len) {
+    result[idx] = fn(functor[idx]);
+    idx += 1;
+  }
+
+  return result;
+}
+
 function _isString(x) {
   return Object.prototype.toString.call(x) === '[object String]';
 }
@@ -632,6 +746,30 @@ function _reduce(fn, acc, list) {
   throw new TypeError('reduce: list must be array or iterable');
 }
 
+var XMap =
+/*#__PURE__*/
+function () {
+  function XMap(f, xf) {
+    this.xf = xf;
+    this.f = f;
+  }
+
+  XMap.prototype['@@transducer/init'] = _xfBase.init;
+  XMap.prototype['@@transducer/result'] = _xfBase.result;
+
+  XMap.prototype['@@transducer/step'] = function (result, input) {
+    return this.xf['@@transducer/step'](result, this.f(input));
+  };
+
+  return XMap;
+}();
+
+var _xmap =
+/*#__PURE__*/
+_curry2(function _xmap(f, xf) {
+  return new XMap(f, xf);
+});
+
 function _has(prop, obj) {
   return Object.prototype.hasOwnProperty.call(obj, prop);
 }
@@ -734,6 +872,64 @@ _curry1(function keys(obj) {
   return ks;
 });
 
+/**
+ * Takes a function and
+ * a [functor](https://github.com/fantasyland/fantasy-land#functor),
+ * applies the function to each of the functor's values, and returns
+ * a functor of the same shape.
+ *
+ * Ramda provides suitable `map` implementations for `Array` and `Object`,
+ * so this function may be applied to `[1, 2, 3]` or `{x: 1, y: 2, z: 3}`.
+ *
+ * Dispatches to the `map` method of the second argument, if present.
+ *
+ * Acts as a transducer if a transformer is given in list position.
+ *
+ * Also treats functions as functors and will compose them together.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig Functor f => (a -> b) -> f a -> f b
+ * @param {Function} fn The function to be called on every element of the input `list`.
+ * @param {Array} list The list to be iterated over.
+ * @return {Array} The new list.
+ * @see R.transduce, R.addIndex, R.pluck, R.project
+ * @example
+ *
+ *      const double = x => x * 2;
+ *
+ *      R.map(double, [1, 2, 3]); //=> [2, 4, 6]
+ *
+ *      R.map(double, {x: 1, y: 2, z: 3}); //=> {x: 2, y: 4, z: 6}
+ * @symb R.map(f, [a, b]) = [f(a), f(b)]
+ * @symb R.map(f, { x: a, y: b }) = { x: f(a), y: f(b) }
+ * @symb R.map(f, functor_o) = functor_o.map(f)
+ */
+
+var map =
+/*#__PURE__*/
+_curry2(
+/*#__PURE__*/
+_dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
+  switch (Object.prototype.toString.call(functor)) {
+    case '[object Function]':
+      return curryN(functor.length, function () {
+        return fn.call(this, functor.apply(this, arguments));
+      });
+
+    case '[object Object]':
+      return _reduce(function (acc, key) {
+        acc[key] = fn(functor[key]);
+        return acc;
+      }, {}, keys(functor));
+
+    default:
+      return _map(fn, functor);
+  }
+}));
+
 /**
  * Determine if the passed argument is an integer.
  *
@@ -812,6 +1008,138 @@ _curry2(function prop(p, obj) {
   return _isInteger(p) ? nth(p, obj) : obj[p];
 });
 
+/**
+ * Returns a single item by iterating through the list, successively calling
+ * the iterator function and passing it an accumulator value and the current
+ * value from the array, and then passing the result to the next call.
+ *
+ * The iterator function receives two values: *(acc, value)*. It may use
+ * [`R.reduced`](#reduced) to shortcut the iteration.
+ *
+ * The arguments' order of [`reduceRight`](#reduceRight)'s iterator function
+ * is *(value, acc)*.
+ *
+ * Note: `R.reduce` does not skip deleted or unassigned indices (sparse
+ * arrays), unlike the native `Array.prototype.reduce` method. For more details
+ * on this behavior, see:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce#Description
+ *
+ * Dispatches to the `reduce` method of the third argument, if present. When
+ * doing so, it is up to the user to handle the [`R.reduced`](#reduced)
+ * shortcuting, as this is not implemented by `reduce`.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig ((a, b) -> a) -> a -> [b] -> a
+ * @param {Function} fn The iterator function. Receives two values, the accumulator and the
+ *        current element from the array.
+ * @param {*} acc The accumulator value.
+ * @param {Array} list The list to iterate over.
+ * @return {*} The final, accumulated value.
+ * @see R.reduced, R.addIndex, R.reduceRight
+ * @example
+ *
+ *      R.reduce(R.subtract, 0, [1, 2, 3, 4]) // => ((((0 - 1) - 2) - 3) - 4) = -10
+ *      //          -               -10
+ *      //         / \              / \
+ *      //        -   4           -6   4
+ *      //       / \              / \
+ *      //      -   3   ==>     -3   3
+ *      //     / \              / \
+ *      //    -   2           -1   2
+ *      //   / \              / \
+ *      //  0   1            0   1
+ *
+ * @symb R.reduce(f, a, [b, c, d]) = f(f(f(a, b), c), d)
+ */
+
+var reduce =
+/*#__PURE__*/
+_curry3(_reduce);
+
+var XAny =
+/*#__PURE__*/
+function () {
+  function XAny(f, xf) {
+    this.xf = xf;
+    this.f = f;
+    this.any = false;
+  }
+
+  XAny.prototype['@@transducer/init'] = _xfBase.init;
+
+  XAny.prototype['@@transducer/result'] = function (result) {
+    if (!this.any) {
+      result = this.xf['@@transducer/step'](result, false);
+    }
+
+    return this.xf['@@transducer/result'](result);
+  };
+
+  XAny.prototype['@@transducer/step'] = function (result, input) {
+    if (this.f(input)) {
+      this.any = true;
+      result = _reduced(this.xf['@@transducer/step'](result, true));
+    }
+
+    return result;
+  };
+
+  return XAny;
+}();
+
+var _xany =
+/*#__PURE__*/
+_curry2(function _xany(f, xf) {
+  return new XAny(f, xf);
+});
+
+/**
+ * Returns `true` if at least one of the elements of the list match the predicate,
+ * `false` otherwise.
+ *
+ * Dispatches to the `any` method of the second argument, if present.
+ *
+ * Acts as a transducer if a transformer is given in list position.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig (a -> Boolean) -> [a] -> Boolean
+ * @param {Function} fn The predicate function.
+ * @param {Array} list The array to consider.
+ * @return {Boolean} `true` if the predicate is satisfied by at least one element, `false`
+ *         otherwise.
+ * @see R.all, R.none, R.transduce
+ * @example
+ *
+ *      const lessThan0 = R.flip(R.lt)(0);
+ *      const lessThan2 = R.flip(R.lt)(2);
+ *      R.any(lessThan0)([1, 2]); //=> false
+ *      R.any(lessThan2)([1, 2]); //=> true
+ */
+
+var any =
+/*#__PURE__*/
+_curry2(
+/*#__PURE__*/
+_dispatchable(['any'], _xany, function any(fn, list) {
+  var idx = 0;
+
+  while (idx < list.length) {
+    if (fn(list[idx])) {
+      return true;
+    }
+
+    idx += 1;
+  }
+
+  return false;
+}));
+
 /**
  * Gives a single-word string description of the (native) type of a value,
  * returning such answers as 'Object', 'Number', 'Array', or 'Null'. Does not
@@ -844,6 +1172,166 @@ _curry1(function type(val) {
   return val === null ? 'Null' : val === undefined ? 'Undefined' : Object.prototype.toString.call(val).slice(8, -1);
 });
 
+function _pipe(f, g) {
+  return function () {
+    return g.call(this, f.apply(this, arguments));
+  };
+}
+
+/**
+ * This checks whether a function has a [methodname] function. If it isn't an
+ * array it will execute that function otherwise it will default to the ramda
+ * implementation.
+ *
+ * @private
+ * @param {Function} fn ramda implementation
+ * @param {String} methodname property to check for a custom implementation
+ * @return {Object} Whatever the return value of the method is.
+ */
+
+function _checkForMethod(methodname, fn) {
+  return function () {
+    var length = arguments.length;
+
+    if (length === 0) {
+      return fn();
+    }
+
+    var obj = arguments[length - 1];
+    return _isArray(obj) || typeof obj[methodname] !== 'function' ? fn.apply(this, arguments) : obj[methodname].apply(obj, Array.prototype.slice.call(arguments, 0, length - 1));
+  };
+}
+
+/**
+ * Returns the elements of the given list or string (or object with a `slice`
+ * method) from `fromIndex` (inclusive) to `toIndex` (exclusive).
+ *
+ * Dispatches to the `slice` method of the third argument, if present.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.4
+ * @category List
+ * @sig Number -> Number -> [a] -> [a]
+ * @sig Number -> Number -> String -> String
+ * @param {Number} fromIndex The start index (inclusive).
+ * @param {Number} toIndex The end index (exclusive).
+ * @param {*} list
+ * @return {*}
+ * @example
+ *
+ *      R.slice(1, 3, ['a', 'b', 'c', 'd']);        //=> ['b', 'c']
+ *      R.slice(1, Infinity, ['a', 'b', 'c', 'd']); //=> ['b', 'c', 'd']
+ *      R.slice(0, -1, ['a', 'b', 'c', 'd']);       //=> ['a', 'b', 'c']
+ *      R.slice(-3, -1, ['a', 'b', 'c', 'd']);      //=> ['b', 'c']
+ *      R.slice(0, 3, 'ramda');                     //=> 'ram'
+ */
+
+var slice =
+/*#__PURE__*/
+_curry3(
+/*#__PURE__*/
+_checkForMethod('slice', function slice(fromIndex, toIndex, list) {
+  return Array.prototype.slice.call(list, fromIndex, toIndex);
+}));
+
+/**
+ * Returns all but the first element of the given list or string (or object
+ * with a `tail` method).
+ *
+ * Dispatches to the `slice` method of the first argument, if present.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig [a] -> [a]
+ * @sig String -> String
+ * @param {*} list
+ * @return {*}
+ * @see R.head, R.init, R.last
+ * @example
+ *
+ *      R.tail([1, 2, 3]);  //=> [2, 3]
+ *      R.tail([1, 2]);     //=> [2]
+ *      R.tail([1]);        //=> []
+ *      R.tail([]);         //=> []
+ *
+ *      R.tail('abc');  //=> 'bc'
+ *      R.tail('ab');   //=> 'b'
+ *      R.tail('a');    //=> ''
+ *      R.tail('');     //=> ''
+ */
+
+var tail =
+/*#__PURE__*/
+_curry1(
+/*#__PURE__*/
+_checkForMethod('tail',
+/*#__PURE__*/
+slice(1, Infinity)));
+
+/**
+ * Performs left-to-right function composition. The first argument may have
+ * any arity; the remaining arguments must be unary.
+ *
+ * In some libraries this function is named `sequence`.
+ *
+ * **Note:** The result of pipe is not automatically curried.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Function
+ * @sig (((a, b, ..., n) -> o), (o -> p), ..., (x -> y), (y -> z)) -> ((a, b, ..., n) -> z)
+ * @param {...Function} functions
+ * @return {Function}
+ * @see R.compose
+ * @example
+ *
+ *      const f = R.pipe(Math.pow, R.negate, R.inc);
+ *
+ *      f(3, 4); // -(3^4) + 1
+ * @symb R.pipe(f, g, h)(a, b) = h(g(f(a, b)))
+ * @symb R.pipe(f, g, h)(a)(b) = h(g(f(a)))(b)
+ */
+
+function pipe() {
+  if (arguments.length === 0) {
+    throw new Error('pipe requires at least one argument');
+  }
+
+  return _arity(arguments[0].length, reduce(_pipe, arguments[0], tail(arguments)));
+}
+
+function _identity(x) {
+  return x;
+}
+
+/**
+ * A function that does nothing but return the parameter supplied to it. Good
+ * as a default or placeholder function.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Function
+ * @sig a -> a
+ * @param {*} x The value to return.
+ * @return {*} The input value, `x`.
+ * @example
+ *
+ *      R.identity(1); //=> 1
+ *
+ *      const obj = {};
+ *      R.identity(obj) === obj; //=> true
+ * @symb R.identity(a) = a
+ */
+
+var identity =
+/*#__PURE__*/
+_curry1(_identity);
+
 function _arrayFromIterator(iter) {
   var list = [];
   var next;
@@ -1594,6 +2082,7 @@ const TertiaryButton$1 = styled.button `
 `;
 
 const Field$2 = styled.div `
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
 `;
@@ -2299,6 +2788,25 @@ const FieldError = styled.p `
   margin-top: 4px;
 `;
 
+const useClickOutside = (zoneRefOrzoneRefs, action, baseContainer) => {
+    const handleClickOutside = useCallback((event) => {
+        const eventTarget = event.target;
+        const zoneRefs = Array.isArray(zoneRefOrzoneRefs) ? zoneRefOrzoneRefs : [zoneRefOrzoneRefs];
+        const isEventTargetInZones = pipe(map((zoneRef) => zoneRef.current.contains(eventTarget)), any(identity))(zoneRefs);
+        if (isEventTargetInZones) {
+            return;
+        }
+        action();
+    }, [action, zoneRefOrzoneRefs]);
+    useEffect(() => {
+        const globalContainer = baseContainer ?? window.document;
+        globalContainer.addEventListener('click', handleClickOutside);
+        return () => {
+            globalContainer.removeEventListener('click', handleClickOutside);
+        };
+    }, [baseContainer, handleClickOutside]);
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 /**
@@ -2771,12 +3279,14 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function AutoComplete({ defaultValue, error, isLabelHidden, isLight = false, label, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }) {
+function AutoComplete({ baseContainer, defaultValue, error, isLabelHidden, isLight = false, label, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
+    const queryRef = useRef(undefined);
     const prevDefaultValuePropRef = useRef(defaultValue);
-    const [controlledDefaultValue, setDefaultControlledValue] = useState(defaultValue);
     const [autoGeneratedOptions, setAutoGeneratedOptions] = useState([]);
+    const [controlledDefaultValue, setDefaultControlledValue] = useState(defaultValue);
+    const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options]);
@@ -2786,19 +3296,23 @@ function AutoComplete({ defaultValue, error, isLabelHidden, isLight = false, lab
     }, [controlledDefaultValue, controlledOptions]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(controlledDefaultValue)}`, [controlledDefaultValue, originalProps.name]);
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
     const handleChange = useCallback(async (nextQuery) => {
-        if (queryUrl && queryMap) {
-            const url = queryUrl.replace('%s', 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);
             setAutoGeneratedOptions(nextData);
         }
-        const normalizedNextQuery = nextQuery && nextQuery.trim().length ? nextQuery : undefined;
-        if (onChange && !normalizedNextQuery) {
+        setIsOpen(Boolean(queryRef.current));
+        if (onChange && !queryRef.current) {
             onChange(undefined);
         }
         if (onQuery) {
-            onQuery(normalizedNextQuery);
+            onQuery(queryRef.current);
         }
     }, [onChange, onQuery, queryMap, queryUrl]);
     const handleSelect = useCallback((nextValue) => {
@@ -2807,16 +3321,23 @@ function AutoComplete({ defaultValue, error, isLabelHidden, isLight = false, lab
         }
         setDefaultControlledValue(nextValue);
     }, [onChange]);
+    const open = useCallback(() => {
+        if (!queryRef.current) {
+            return;
+        }
+        setIsOpen(true);
+    }, []);
     useEffect(() => {
         if (defaultValue === prevDefaultValuePropRef.current) {
             return;
         }
         setDefaultControlledValue(defaultValue);
     }, [defaultValue]);
+    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$9, { ref: boxRef, children: boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: controlledOptions, defaultValue: controlledValueAsLabel, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, ...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$9, { ref: boxRef, onClick: open, children: boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: controlledOptions, defaultValue: controlledValueAsLabel, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledAutoComplete = styled(AutoComplete$1) `
   font-size: 13px;
@@ -3445,6 +3966,7 @@ disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isStar
     const [isFocused, setIsFocused] = useState(false);
     useImperativeHandle(ref, () => ({
         box: boxRef.current,
+        contains: boxRef.current.contains.bind(boxRef.current),
         focus: (isInLastInputOfTheGroup = false) => {
             if (isInLastInputOfTheGroup) {
                 yearInputRef.current.focus();
@@ -3951,7 +4473,7 @@ const Box$5 = styled.div `
   }
 `;
 
-function DatePicker({ defaultValue, 
+function DatePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const boxRef = useRef();
@@ -3978,13 +4500,6 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isCalendarPickerOpenRef.current = false;
         forceUpdate();
     }, [forceUpdate]);
-    const handleClickOutside = useCallback((event) => {
-        const target = event.target;
-        if (dateInputRef.current.box.contains(target)) {
-            return;
-        }
-        closeCalendarPicker();
-    }, [closeCalendarPicker]);
     const handleDateInputNext = useCallback(() => {
         if (!withTime) {
             return;
@@ -4042,12 +4557,7 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useEffect(() => {
-        window.document.addEventListener('click', handleClickOutside);
-        return () => {
-            window.document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside]);
+    useClickOutside(boxRef, closeCalendarPicker, baseContainer);
     return (jsxs(Fieldset, { disabled: disabled, ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$4, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange })] }));
 }
 const Box$4 = styled.div `
@@ -4269,7 +4779,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ defaultValue, 
+function DateRangePicker({ baseContainer, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const startDateInputRef = useRef();
@@ -4305,13 +4815,6 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isRangeCalendarPickerOpenRef.current = false;
         forceUpdate();
     }, [forceUpdate]);
-    const handleClickOutside = useCallback((event) => {
-        const target = event.target;
-        if (startDateInputRef.current.box.contains(target) || endDateInputRef.current.box.contains(target)) {
-            return;
-        }
-        closeRangeCalendarPicker();
-    }, [closeRangeCalendarPicker]);
     const handleEndDateInputNext = useCallback(() => {
         if (!withTime) {
             return;
@@ -4418,12 +4921,7 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
         isRangeCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useEffect(() => {
-        window.document.addEventListener('click', handleClickOutside);
-        return () => {
-            window.document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside]);
+    useClickOutside([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer);
     return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$2, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onNext: () => endDateInputRef.current.focus(), onPrevious: () => startDateInputRef.current.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
 }
 const Box$2 = styled.div `
@@ -4492,15 +4990,19 @@ const ChecboxesBox$1 = styled.div `
     `}
 `;
 
-function MultiSelect({ error, fixedWidth = 5, isLabelHidden = false, isLight = false, label, onChange, options, 
+function MultiSelect({ baseContainer, error, fixedWidth = 5, 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 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 close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
@@ -4508,10 +5010,14 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
         onChange(normalizedNextValue);
     }, [onChange]);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    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, children: boxRef.current && (jsx(StyledTagPicker, { "$fixedWidth": fixedWidth, "$isLight": isLight, container: boxRef.current, data: options, id: originalProps.name, onChange: handleChange, 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, 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 })] }));
 }
 // TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
 // We should hack that.
@@ -4706,15 +5212,19 @@ const StyledInput$2 = styled(Input) `
   width: 100%;
 `;
 
-function Select({ error, isLabelHidden = false, isLight = false, label, onChange, options, 
+function Select({ baseContainer, error, 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 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 close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
@@ -4722,13 +5232,17 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = nextValue ?? undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
+    const open = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+    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, 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: open, 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, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+                    onChange: handleChange, open: isOpen, searchable: searchable, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {
@@ -4905,5 +5419,5 @@ function FormikTextInput({ name, ...originalProps }) {
     return jsx(TextInput, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
 }
 
-export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OnlyFontGlobalStyle, Select, Size, THEME, Tag$1 as Tag, TagGroup, TextInput, Textarea, ThemeProvider };
+export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, OnlyFontGlobalStyle, Select, Size, THEME, Tag$1 as Tag, TagGroup, TextInput, Textarea, ThemeProvider, useClickOutside, useForceUpdate };
 //# sourceMappingURL=index.js.map