@mtes-mct/monitor-ui 5.9.2 → 6.0.1

package/index.js

@@ -1014,84 +1014,6 @@ _dispatchable(['fantasy-land/map', 'map'], _xmap, function map(fn, functor) {
 
 var map$1 = map;
 
-/**
- * Determine if the passed argument is an integer.
- *
- * @private
- * @param {*} n
- * @category Type
- * @return {Boolean}
- */
-var _isInteger = Number.isInteger || function _isInteger(n) {
-  return n << 0 === n;
-};
-
-/**
- * Returns the nth element of the given list or string. If n is negative the
- * element at index length + n is returned.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category List
- * @sig Number -> [a] -> a | Undefined
- * @sig Number -> String -> String
- * @param {Number} offset
- * @param {*} list
- * @return {*}
- * @example
- *
- *      const list = ['foo', 'bar', 'baz', 'quux'];
- *      R.nth(1, list); //=> 'bar'
- *      R.nth(-1, list); //=> 'quux'
- *      R.nth(-99, list); //=> undefined
- *
- *      R.nth(2, 'abc'); //=> 'c'
- *      R.nth(3, 'abc'); //=> ''
- * @symb R.nth(-1, [a, b, c]) = c
- * @symb R.nth(0, [a, b, c]) = a
- * @symb R.nth(1, [a, b, c]) = b
- */
-
-var nth =
-/*#__PURE__*/
-_curry2(function nth(offset, list) {
-  var idx = offset < 0 ? list.length + offset : offset;
-  return _isString(list) ? list.charAt(idx) : list[idx];
-});
-
-/**
- * Returns a function that when supplied an object returns the indicated
- * property of that object, if it exists.
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Object
- * @typedefn Idx = String | Int | Symbol
- * @sig Idx -> {s: a} -> a | Undefined
- * @param {String|Number} p The property name or array index
- * @param {Object} obj The object to query
- * @return {*} The value at `obj.p`.
- * @see R.path, R.props, R.pluck, R.project, R.nth
- * @example
- *
- *      R.prop('x', {x: 100}); //=> 100
- *      R.prop('x', {}); //=> undefined
- *      R.prop(0, [100]); //=> 100
- *      R.compose(R.inc, R.prop('x'))({ x: 3 }) //=> 4
- */
-
-var prop =
-/*#__PURE__*/
-_curry2(function prop(p, obj) {
-  if (obj == null) {
-    return;
-  }
-
-  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
@@ -2123,47 +2045,13 @@ _curry2(function mergeDeepRight(lObj, rObj) {
 
 var mergeDeepRight$1 = mergeDeepRight;
 
-/**
- * Returns `true` if the specified object property is equal, in
- * [`R.equals`](#equals) terms, to the given value; `false` otherwise.
- * You can test multiple properties with [`R.whereEq`](#whereEq).
- *
- * @func
- * @memberOf R
- * @since v0.1.0
- * @category Relation
- * @sig String -> a -> Object -> Boolean
- * @param {String} name
- * @param {*} val
- * @param {*} obj
- * @return {Boolean}
- * @see R.whereEq, R.propSatisfies, R.equals
- * @example
- *
- *      const abby = {name: 'Abby', age: 7, hair: 'blond'};
- *      const fred = {name: 'Fred', age: 12, hair: 'brown'};
- *      const rusty = {name: 'Rusty', age: 10, hair: 'brown'};
- *      const alois = {name: 'Alois', age: 15, disposition: 'surly'};
- *      const kids = [abby, fred, rusty, alois];
- *      const hasBrownHair = R.propEq('hair', 'brown');
- *      R.filter(hasBrownHair, kids); //=> [fred, rusty]
- */
-
-var propEq =
-/*#__PURE__*/
-_curry3(function propEq(name, val, obj) {
-  return equals$1(val, prop(name, obj));
-});
-
-var propEq$1 = propEq;
-
 const UntypedStyledComponentsThemeProvider = ThemeProvider$1;
 function ThemeProvider({ children, theme = {} }) {
     const finalTheme = mergeDeepRight$1(THEME, theme);
     return jsx(UntypedStyledComponentsThemeProvider, { theme: finalTheme, children: children });
 }
 
-var classnames = {exports: {}};
+var classnames$1 = {exports: {}};
 
 /*!
 	Copyright (c) 2018 Jed Watson.
@@ -2220,10 +2108,10 @@ var classnames = {exports: {}};
 			window.classNames = classNames;
 		}
 	}()); 
-} (classnames));
+} (classnames$1));
 
-var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var classnamesExports = classnames$1.exports;
+var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const Action = styled.div `
   background-color: ${p => p.theme.color.white};
@@ -2285,8 +2173,8 @@ function stopMouseEventPropagation(event) {
 }
 
 function RawDialog({ children, className, isAbsolute = false, ...nativeProps }) {
-    const controlledClassName = useMemo(() => classNames('Component-Dialog', className), [className]);
-    return (jsxs(Box$g, { "$isAbsolute": isAbsolute, className: controlledClassName, ...nativeProps, onClick: stopMouseEventPropagation, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
+    const controlledClassName = classnames('Component-Dialog', className);
+    return (jsxs(Box$g, { "$isAbsolute": isAbsolute, className: controlledClassName, onClick: stopMouseEventPropagation, ...nativeProps, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
 }
 const Box$g = styled.div `
   position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
@@ -2354,10 +2242,11 @@ const StyledDropdownItem = styled(Dropdown$1.Item) `
   }
 `;
 
-function RawDropdown({ Icon, ...originalProps }) {
+function RawDropdown({ className, Icon, ...originalProps }) {
+    const controlledClassName = classnames('Component-Dropdow', className);
     const icon = useMemo(() => (Icon ? jsx(Icon, { size: 20 }) : undefined), [Icon]);
     const hasIcon = useMemo(() => Boolean(Icon), [Icon]);
-    return jsx(StyledDropdown, { "$hasIcon": hasIcon, icon: icon, ...originalProps });
+    return jsx(StyledDropdown, { "$hasIcon": hasIcon, className: controlledClassName, icon: icon, ...originalProps });
 }
 // TODO We need to split into multiple styled components as done in `<Button />`.
 const StyledDropdown = styled(Dropdown$1) `
@@ -2709,16 +2598,17 @@ const ICON_SIZE = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 12
 };
-function Button({ accent = Accent.PRIMARY, children, Icon, isFullWidth = false, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function Button({ accent = Accent.PRIMARY, children, className, Icon, isFullWidth = false, size = Size.NORMAL, type = 'button', ...nativeProps }) {
     const commonChildren = useMemo(() => (jsxs(Fragment, { children: [Icon && jsx(Icon, { size: ICON_SIZE[size] }), children && jsx(ButtonLabel, { children: children })] })), [children, Icon, size]);
     const commonProps = useMemo(() => ({
         as: StyledButton$1,
         children: commonChildren,
+        className: classnames('Element-Button', className),
         isFullWidth,
         size,
         type,
         ...nativeProps
-    }), [commonChildren, isFullWidth, nativeProps, size, type]);
+    }), [className, commonChildren, isFullWidth, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { ...commonProps });
@@ -2844,14 +2734,15 @@ const ICON_SIZE_IN_PX = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 14
 };
-function IconButton({ accent = Accent.PRIMARY, color, Icon, iconSize, size = Size.NORMAL, type = 'button', ...nativeProps }) {
+function IconButton({ accent = Accent.PRIMARY, className, color, Icon, iconSize, size = Size.NORMAL, type = 'button', ...nativeProps }) {
     const children = useMemo(() => jsx(Icon, { color: color, size: iconSize || ICON_SIZE_IN_PX[size] }), [color, Icon, iconSize, size]);
     const commonProps = useMemo(() => ({
         children,
+        className: classnames('Element-IconButton', className),
         size,
         type,
         ...nativeProps
-    }), [children, nativeProps, size, type]);
+    }), [children, className, nativeProps, size, type]);
     switch (accent) {
         case Accent.SECONDARY:
             return jsx(SecondaryButton, { as: StyledButton, ...commonProps });
@@ -2902,7 +2793,9 @@ const TertiaryButton = styled.button `
 /**
  * Internal component used to wrap SVG icon components
  */
-const IconBox = styled.div `
+const IconBox = styled.div.attrs(() => ({
+    className: 'Element-IconBox'
+})) `
   display: inline-block;
   color: ${p => p.$color ?? 'inherit'};
 
@@ -3257,13 +3150,14 @@ var index = /*#__PURE__*/Object.freeze({
 	Vms: Vms
 });
 
-function SingleTag({ children, onDelete }) {
+function SingleTag({ children, className, onDelete, ...nativeProps }) {
+    const controlledClassName = classnames('Component-SingleTag', className);
     const handleDelete = useCallback(() => {
         if (onDelete) {
             onDelete();
         }
     }, [onDelete]);
-    return (jsx("div", { children: jsxs(Box$f, { children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }) }));
+    return (jsxs(Box$f, { className: controlledClassName, ...nativeProps, children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
 }
 const Box$f = styled.div `
   align-items: center;
@@ -3298,14 +3192,16 @@ const StyledIconButton = styled(IconButton) `
 `;
 
 const Field$2 = styled.div.attrs(props => ({
-    className: classNames('Element-Field', props.className)
+    className: classnames('Element-Field', props.className)
 })) `
   align-items: flex-start;
   display: flex;
   flex-direction: column;
 `;
 
-const Label = styled.label `
+const Legend = styled.legend.attrs(props => ({
+    className: classnames('Element-Legend', props.className)
+})) `
   color: ${p => 
 // eslint-disable-next-line no-nested-ternary
 p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
@@ -3313,25 +3209,22 @@ p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p
   font-size: 13px;
   line-height: 1.3846;
   margin-bottom: 4px;
-`;
-
-function Legend({ disabled = false, hasError = false, isHidden = false, ...nativeProps }) {
-    return jsx(StyledLabel, { as: "legend", disabled: disabled, hasError: hasError, isHidden: isHidden, ...nativeProps });
-}
-const StyledLabel = styled(Label) `
   padding: 0;
 `;
 
-function Fieldset({ children, hasBorder = false, hasError = false, isLegendHidden = false, isLight = false, legend, ...nativeProps }) {
+function Fieldset({ children, className, hasBorder = false, hasError = false, isLegendHidden = false, isLight = false, legend, ...nativeProps }) {
     const hasLegend = useMemo(() => Boolean(legend), [legend]);
-    return (jsxs(StyledField, { as: "fieldset", ...nativeProps, children: [legend && (jsx(Legend, { disabled: nativeProps.disabled, hasError: hasError, isHidden: isLegendHidden, children: legend })), jsx(Box$e, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
+    return (jsxs(Box$e, { className: classnames('Element-Fieldset', className), ...nativeProps, children: [legend && (jsx(Legend, { disabled: nativeProps.disabled, hasError: hasError, isHidden: isLegendHidden, children: legend })), jsx(InnerBox, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
 }
-const StyledField = styled(Field$2) `
+const Box$e = styled.fieldset `
+  align-items: flex-start;
   border: 0;
+  display: flex;
+  flex-direction: column;
   margin: 0;
   padding: 0;
 `;
-const Box$e = styled.div `
+const InnerBox = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   padding: ${p => (p.$hasBorder || p.$isLight ? '16px' : 0)};
   width: 100%;
@@ -3342,12 +3235,24 @@ const Box$e = styled.div `
     `}
 `;
 
+const Label = styled.label.attrs(props => ({
+    className: classnames('Element-Label', props.className)
+})) `
+  color: ${p => 
+// eslint-disable-next-line no-nested-ternary
+p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p.theme.color.slateGray};
+  display: ${p => (p.isHidden ? 'none' : 'block')};
+  font-size: 13px;
+  line-height: 1.3846;
+  margin-bottom: 4px;
+`;
+
 const Disk = styled.span `
   background-color: ${p => p.$color};
   border-radius: 50%;
 `;
 
-function Tag({ accent, bullet, bulletColor, children, color, Icon, isLight = false, ...nativeProps }) {
+function Tag({ accent, bullet, bulletColor, children, className, color, Icon, isLight = false, ...nativeProps }) {
     const commonChildren = useMemo(() => {
         const defaultColor = color || THEME.color.gunMetal;
         const controlledBulletColor = bulletColor ||
@@ -3363,8 +3268,9 @@ function Tag({ accent, bullet, bulletColor, children, color, Icon, isLight = fal
     const commonProps = useMemo(() => ({
         $isLight: isLight,
         children: commonChildren,
+        className: classnames('Element-Tag', className),
         ...nativeProps
-    }), [commonChildren, isLight, nativeProps]);
+    }), [className, commonChildren, isLight, nativeProps]);
     switch (accent) {
         case Accent.PRIMARY:
             return jsx(PrimaryTag, { ...commonProps });
@@ -3412,7 +3318,9 @@ const TertiaryTag = styled(Box$d) `
   color: ${p => p.theme.color.white};
 `;
 
-const TagGroup = styled.div `
+const TagGroup = styled.div.attrs(props => ({
+    className: classnames('Element-TagGroup', props.className)
+})) `
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -4010,7 +3918,9 @@ 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 `
+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;
@@ -21288,6 +21198,18 @@ function useKey(deps) {
     return keyRef.current;
 }
 
+function getRsuiteValueFromOptionValue(optionValue, optionValueKey) {
+    return optionValue !== undefined ? String(optionValueKey ? optionValue[optionValueKey] : optionValue) : undefined;
+}
+
+function getRsuiteDataFromOptions(options, optionValueKey) {
+    return options.map(({ value, ...rest }) => ({
+        ...rest,
+        optionValue: value,
+        value: getRsuiteValueFromOptionValue(value, optionValueKey)
+    }));
+}
+
 /**
  * Trim and single-space a string
  */
@@ -21306,27 +21228,20 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Search({ baseContainer, defaultValue, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconHidden = false, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration = 200, ...originalProps }) {
+function Search({ baseContainer, className, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, queryMap, queryUrl, throttleDuration = 200, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const queryRef = useRef(undefined);
-    const prevDefaultValuePropRef = useRef(defaultValue);
-    const [inputValue, setInputValue] = useState(undefined);
-    const [autoGeneratedOptions, setAutoGeneratedOptions] = useState([]);
-    const [controlledDefaultValue, setDefaultControlledValue] = useState(defaultValue);
+    const data = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
+    const [formattedOptions, setFormattedOptions] = useState(data);
     const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
+    const controlledClassName = useMemo(() => classnames('Field-Search', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
-    const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options]);
-    const controlledValueAsLabel = useMemo(() => {
-        if (originalProps.disabled) {
-            return undefined;
-        }
-        const foundOption = controlledOptions.find(propEq$1('value', controlledDefaultValue));
-        return foundOption ? foundOption.label : undefined;
-    }, [controlledDefaultValue, controlledOptions, originalProps.disabled]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useKey([controlledDefaultValue, originalProps.disabled, originalProps.name]);
+    const key = useKey([value, originalProps.disabled, originalProps.name]);
+    const rsuiteValue = useMemo(() => getRsuiteValueFromOptionValue(value, optionValueKey), [value, optionValueKey]);
+    const [inputValue, setInputValue] = useState(rsuiteValue);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -21339,61 +21254,51 @@ function Search({ baseContainer, defaultValue, error, isErrorMessageHidden = fal
         const rawData = await ky$1.get(url).json();
         return rawData.map(_queryMap);
     }, throttleDuration);
-    const handleChange = useCallback(async (nextQuery) => {
+    const handleChange = useCallback(async (nextQuery, event) => {
         if (!(typeof nextQuery === 'string')) {
             return;
         }
-        setInputValue(nextQuery);
         queryRef.current = normalizeString(nextQuery);
+        if (event.type === 'change') {
+            setInputValue(nextQuery);
+            setIsOpen(Boolean(queryRef.current));
+        }
+        else {
+            setIsOpen(false);
+        }
         if (queryUrl && queryMap && queryRef.current) {
             const nextData = (await fetchQueryResponse(queryRef.current, queryUrl, queryMap)) || [];
-            setAutoGeneratedOptions(nextData);
+            setFormattedOptions(getRsuiteDataFromOptions(nextData, optionValueKey));
         }
-        setIsOpen(Boolean(queryRef.current));
         if (onChange && !queryRef.current) {
             onChange(undefined);
         }
         if (onQuery) {
             onQuery(queryRef.current);
         }
-    }, [onChange, onQuery, queryMap, queryUrl, fetchQueryResponse]);
-    const handleSelect = useCallback((nextValue) => {
+    }, [onChange, onQuery, queryMap, queryUrl, fetchQueryResponse, optionValueKey]);
+    const handleSelect = useCallback((_, item) => {
         if (onChange) {
-            onChange(nextValue);
+            onChange(item.optionValue);
         }
-        setDefaultControlledValue(nextValue);
+        setInputValue(item.label);
     }, [onChange]);
-    const open = useCallback(() => {
-        if (!queryRef.current) {
-            return;
-        }
-        setIsOpen(true);
-    }, []);
-    useEffect(() => {
-        if (defaultValue === prevDefaultValuePropRef.current) {
-            return;
-        }
-        setDefaultControlledValue(defaultValue);
-    }, [defaultValue]);
     useFieldUndefineEffect(originalProps.disabled, onChange);
     useClickOutsideEffect(boxRef, close, baseContainer);
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-Search", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, 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, renderMenuItem: (itemLabel, item) => MenuItem ? jsx(MenuItem, { item: item.value }) : itemLabel, value: inputValue, ...originalProps }, key)), inputValue && (jsxs(Fragment, { children: [jsx(StyledCloseButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Close, isSearchIconHidden: isSearchIconHidden, onClick: clean, size: Size.SMALL }), !isSearchIconHidden && jsx(Separator, { children: "|" })] })), !isSearchIconHidden && (jsx(StyledSearchButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Search$1, size: Size.NORMAL }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: formattedOptions, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, open: isOpen, renderMenuItem: (itemLabel, item) => MenuItem ? jsx(MenuItem, { item: item.value }) : itemLabel, value: inputValue, ...originalProps }, key)), inputValue && (jsxs(Fragment, { children: [jsx(StyledCloseButton, { accent: Accent.TERTIARY, color: THEME.color.slateGray, Icon: Close, isSearchIconVisible: isSearchIconVisible, onClick: clean, size: Size.SMALL }), isSearchIconVisible && jsx(Separator, { children: "|" })] })), isSearchIconVisible && jsx(StyledIconSearch, { color: THEME.color.slateGray, size: 20 })] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledCloseButton = styled(IconButton) `
   cursor: pointer;
   height: 30px;
-  margin: 5px ${p => (p.isSearchIconHidden ? 5 : 0)}px 5px 5px;
+  margin: 5px ${p => (p.isSearchIconVisible ? 0 : 5)}px 5px 5px;
   padding: 8px;
   width: 30px;
 `;
-const StyledSearchButton = styled(IconButton) `
-  border: unset;
-  cursor: pointer;
+const StyledIconSearch = styled(Search$1) `
   margin: 10px 10px 10px 8px;
-  padding: 0px;
 `;
 const Separator = styled.div `
   height: 40px;
@@ -21410,6 +21315,7 @@ const StyledAutoComplete = styled(AutoComplete) `
     background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
     border-width: 0 0 1px;
     border-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+
     font-size: 13px;
     width: 100%;
     height: 40px;
@@ -22308,6 +22214,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
     const selectedUtcTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current));
     const previousDefaultValue = usePrevious(defaultValue);
     const { forceUpdate } = useForceUpdate();
+    const controlledClassName = useMemo(() => classnames('Field-DatePicker', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const defaultTimeTuple = useMemo(() => (isEndDate ? ['23', '59'] : ['00', '00']), [isEndDate]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -22433,7 +22340,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
         selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    return (jsxs(Fieldset, { className: classNames('Field-DatePicker', className), disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$7, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext, value: selectedUtcDateTupleRef.current }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true), value: selectedUtcTimeTupleRef.current }, JSON.stringify(selectedUtcTimeTupleRef.current)) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$7, { ref: boxRef, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext, value: selectedUtcDateTupleRef.current }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true), value: selectedUtcTimeTupleRef.current }, JSON.stringify(selectedUtcTimeTupleRef.current)) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
 }
 const Box$7 = styled.div `
   * {
@@ -22664,7 +22571,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, isUndefinedWhenDisabled = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DateRangePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, isUndefinedWhenDisabled = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     /* eslint-disable no-null/no-null */
     const startDateInputRef = useRef(null);
     const startTimeInputRef = useRef(null);
@@ -22681,6 +22588,7 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
     const selectedEndTimeTupleRef = useRef(getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current));
     const previousDefaultValue = usePrevious(defaultValue);
     const { forceUpdate } = useForceUpdate();
+    const controlledClassName = useMemo(() => classnames('Field-DateRangePicker', className), [className]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const rangeCalendarPickerDefaultValue = useMemo(() => selectedStartDateTupleRef.current && selectedEndDateTupleRef.current
@@ -22887,7 +22795,7 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
         selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    return (jsxs(Fieldset, { className: "Field-DateRangePicker", disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$5, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleStartDateInputNext, value: selectedStartDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true), value: selectedStartTimeTupleRef.current }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious, value: selectedEndDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => endDateInputRef.current?.focus(true), value: selectedEndTimeTupleRef.current }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$5, { isDisabled: disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleStartDateInputNext, value: selectedStartDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true), value: selectedStartTimeTupleRef.current }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious, value: selectedEndDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => endDateInputRef.current?.focus(true), value: selectedEndTimeTupleRef.current }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
 }
 const Box$5 = styled.div `
   * {
@@ -22971,18 +22879,6 @@ const ChecboxesBox = styled.div `
     `}
 `;
 
-function getRsuiteValueFromOptionValue(optionValue, optionValueKey) {
-    return optionValue !== undefined ? String(optionValueKey ? optionValue[optionValueKey] : optionValue) : undefined;
-}
-
-function getRsuiteDataFromOptions(options, optionValueKey) {
-    return options.map(({ value, ...rest }) => ({
-        ...rest,
-        optionValue: value,
-        value: getRsuiteValueFromOptionValue(value, optionValueKey)
-    }));
-}
-
 function MultiSelect({ baseContainer, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
@@ -32174,6 +32070,7 @@ const Box$1 = styled.div `
 const noop = () => { };
 
 function CoordinatesInput({ className, coordinatesFormat, defaultValue, error, isLabelHidden = false, isLight = false, label, onChange = noop, ...nativeProps }) {
+    const controlledClassName = classnames('Field-CoordinatesInput', className);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const getCoordinatesInput = useCallback(() => {
@@ -32190,7 +32087,7 @@ function CoordinatesInput({ className, coordinatesFormat, defaultValue, error, i
     }, [defaultValue, nativeProps.disabled, onChange, coordinatesFormat]);
     // TODO We must add a `handleDisable()` callback here to effectively empty the inputs when disabling this field.
     useFieldUndefineEffect(nativeProps.disabled, onChange /* , handleDisable */);
-    return (jsxs(StyledFieldset, { className: classNames('Field-CoordinatesInput', className), isLegendHidden: isLabelHidden, isLight: isLight, legend: label, ...nativeProps, children: [getCoordinatesInput(), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(StyledFieldset, { className: controlledClassName, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, ...nativeProps, children: [getCoordinatesInput(), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledFieldset = styled(Fieldset) `
   input {
@@ -32390,13 +32287,8 @@ const StyledInput = styled(Input) `
 function FormikSearch({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const defaultValue = useMemo(() => field.value, []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    if (!defaultValue) {
-        return jsx(Search, { name: name, onChange: helpers.setValue, ...originalProps });
-    }
-    return (jsx(Search, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
+    return jsx(Search, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikCheckbox({ name, ...originalProps }) {