@mtes-mct/monitor-ui 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.5.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.5.0...v2.5.1) (2023-01-06)
+
+
+### Bug Fixes
+
+* **fields:** force width for DateRangePicker calendar container ([2c3bab7](https://github.com/MTES-MCT/monitor-ui/commit/2c3bab7a1f6ab5a70ad2e679045eef8822f310d5))
+
+# [2.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.4.1...v2.5.0) (2023-01-06)
+
+
+### Features
+
+* add OnlyFontGlobalStyle for legacy integration ([16fb494](https://github.com/MTES-MCT/monitor-ui/commit/16fb4941ed0a6420f56ed85333bd2231317b9972))
+
 ## [2.4.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.4.0...v2.4.1) (2023-01-04)
 
 

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, useRef, useState, useCallback, useEffect, useReducer, forwardRef, useImperativeHandle } from 'react';
+import { useMemo, useReducer, useRef, useState, useCallback, useEffect, 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';
 
@@ -89,7 +89,7 @@ const GlobalStyle = createGlobalStyle `
   body {
     font-family: Marianne, sans-serif;
     font-size: 16px;
-    line-height: 1.4;
+    line-height: 1.3846;
   }
 `;
 
@@ -1599,10 +1599,12 @@ const Field$2 = styled.div `
 `;
 
 const Label = styled.label `
-  color: ${p => (p.isDisabled ? p.theme.color.lightGray : p.theme.color.slateGray)};
-  display: ${p => (p.isHidden ? 'none' : 'table')};
+  color: ${p => 
+// eslint-disable-next-line no-nested-ternary
+p.isDisabled ? 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.4;
+  line-height: 1.3846;
   margin-bottom: 4px;
 `;
 
@@ -1615,14 +1617,14 @@ const StyledLabel = styled(Label) `
 
 function Fieldset({ children, hasBorder = false, isHidden = false, isLight = false, legend, ...nativeProps }) {
     const hasLegend = useMemo(() => Boolean(legend), [legend]);
-    return (jsxs(StyledField, { as: "fieldset", ...nativeProps, children: [legend && jsx(Legend, { isHidden: isHidden, children: legend }), jsx(Box$8, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
+    return (jsxs(StyledField, { as: "fieldset", ...nativeProps, children: [legend && jsx(Legend, { isHidden: isHidden, children: legend }), jsx(Box$b, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
 }
 const StyledField = styled(Field$2) `
   border: 0;
   margin: 0;
   padding: 0;
 `;
-const Box$8 = styled.div `
+const Box$b = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   padding: ${p => (p.$hasBorder || p.$isLight ? '16px' : 0)};
 
@@ -1727,17 +1729,17 @@ function Tag$1({ accent, bullet, children, color, Icon, isLight = false, ...nati
         case Accent.TERTIARY:
             return jsx(TertiaryTag, { ...commonProps });
         default:
-            return jsx(Box$7, { "$color": color, ...commonProps });
+            return jsx(Box$a, { "$color": color, ...commonProps });
     }
 }
-const Box$7 = styled.span `
+const Box$a = styled.span `
   align-items: center;
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   border-radius: 11px;
   color: ${p => (p.$color ? p.$color : p.theme.color.gunMetal)};
   display: inline-flex;
   font-size: 13px;
-  line-height: 1.4;
+  line-height: 1.3846;
   padding: 1px 8px 3px 8px;
 
   /* Bullet components are a span */
@@ -1752,16 +1754,16 @@ const Box$7 = styled.span `
     margin-right: 4px;
   }
 `;
-const PrimaryTag = styled(Box$7) `
+const PrimaryTag = styled(Box$a) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   color: ${p => p.theme.color.gunMetal};
 `;
 // TODO Fix this color.
-const SecondaryTag = styled(Box$7) `
+const SecondaryTag = styled(Box$a) `
   background-color: ${p => (p.$isLight ? '#f6d012' : '#f6d012')};
   color: ${p => p.theme.color.gunMetal};
 `;
-const TertiaryTag = styled(Box$7) `
+const TertiaryTag = styled(Box$a) `
   background-color: ${p => (p.$isLight ? p.theme.color.charcoal : p.theme.color.charcoal)};
   color: ${p => p.theme.color.white};
 `;
@@ -2288,77 +2290,13 @@ const createInstance = (defaults) => {
 const ky = createInstance();
 var ky$1 = ky;
 
-function AutoComplete({ defaultValue, isLabelHidden, isLight = false, label, onChange, onQuery, options, queryMap, queryUrl, ...originalProps }) {
-    const prevDefaultValuePropRef = useRef(defaultValue);
-    const [controlledDefaultValue, setDefaultControlledValue] = useState(defaultValue);
-    const [autoGeneratedOptions, setAutoGeneratedOptions] = useState([]);
-    const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options]);
-    const controlledValueAsLabel = useMemo(() => {
-        const foundOption = controlledOptions.find(propEq('value', controlledDefaultValue));
-        return foundOption ? foundOption.label : undefined;
-    }, [controlledDefaultValue, controlledOptions]);
-    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(controlledDefaultValue)}`, [controlledDefaultValue, originalProps.name]);
-    const handleChange = useCallback(async (nextQuery) => {
-        if (queryUrl && queryMap) {
-            const url = queryUrl.replace('%s', nextQuery);
-            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) {
-            onChange(undefined);
-        }
-        if (onQuery) {
-            onQuery(normalizedNextQuery);
-        }
-    }, [onChange, onQuery, queryMap, queryUrl]);
-    const handleSelect = useCallback((nextValue) => {
-        if (onChange) {
-            onChange(nextValue);
-        }
-        setDefaultControlledValue(nextValue);
-    }, [onChange]);
-    useEffect(() => {
-        if (defaultValue === prevDefaultValuePropRef.current) {
-            return;
-        }
-        setDefaultControlledValue(defaultValue);
-    }, [defaultValue]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledAutoComplete, { "$isLight": isLight, data: controlledOptions, defaultValue: controlledValueAsLabel, id: originalProps.name, onChange: handleChange, onSelect: handleSelect, ...originalProps }, key)] }));
-}
-const StyledAutoComplete = styled(AutoComplete$1) `
+const FieldError = styled.p `
+  color: ${p => p.theme.color.maximumRed};
+  display: ${p => (p.isDisabled ? 'none' : 'block')};
   font-size: 13px;
-
-  > input {
-    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-    border: 0;
-    font-size: 13px;
-    width: 100%;
-  }
-`;
-
-function Checkbox({ label, onChange, ...originalProps }) {
-    const key = useMemo(() => `${originalProps.name}-${String(originalProps.defaultChecked)}`, [originalProps.defaultChecked, originalProps.name]);
-    const handleChange = useCallback((_, isChecked) => {
-        if (!onChange) {
-            return;
-        }
-        onChange(isChecked);
-    }, [onChange]);
-    return (jsx(StyledCheckbox, { id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key));
-}
-const StyledCheckbox = styled(Checkbox$1) `
-  > .rs-checkbox-checker {
-    min-height: 0;
-    padding-left: 28px;
-    padding-top: 0;
-
-    .rs-checkbox-wrapper {
-      left: 2px;
-      top: 2px !important;
-    }
-  }
+  font-weight: 700;
+  line-height: 1.3846;
+  margin-top: 4px;
 `;
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2815,6 +2753,122 @@ function useForceUpdate() {
     return { forceDebouncedUpdate, forceUpdate };
 }
 
+/**
+ * Trim and single-space a string
+ */
+function cleanString(text) {
+    return text.replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * Normalize a string, making them undefined if empty-ish
+ */
+function normalizeString(text) {
+    if (!text) {
+        return undefined;
+    }
+    const cleanText = cleanString(text);
+    return cleanText.length > 0 ? cleanText : undefined;
+}
+
+function AutoComplete({ 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 prevDefaultValuePropRef = useRef(defaultValue);
+    const [controlledDefaultValue, setDefaultControlledValue] = useState(defaultValue);
+    const [autoGeneratedOptions, setAutoGeneratedOptions] = useState([]);
+    const { forceUpdate } = useForceUpdate();
+    const controlledError = useMemo(() => normalizeString(error), [error]);
+    const controlledOptions = useMemo(() => options ?? autoGeneratedOptions, [autoGeneratedOptions, options]);
+    const controlledValueAsLabel = useMemo(() => {
+        const foundOption = controlledOptions.find(propEq('value', controlledDefaultValue));
+        return foundOption ? foundOption.label : undefined;
+    }, [controlledDefaultValue, controlledOptions]);
+    const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(controlledDefaultValue)}`, [controlledDefaultValue, originalProps.name]);
+    const handleChange = useCallback(async (nextQuery) => {
+        if (queryUrl && queryMap) {
+            const url = queryUrl.replace('%s', nextQuery);
+            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) {
+            onChange(undefined);
+        }
+        if (onQuery) {
+            onQuery(normalizedNextQuery);
+        }
+    }, [onChange, onQuery, queryMap, queryUrl]);
+    const handleSelect = useCallback((nextValue) => {
+        if (onChange) {
+            onChange(nextValue);
+        }
+        setDefaultControlledValue(nextValue);
+    }, [onChange]);
+    useEffect(() => {
+        if (defaultValue === prevDefaultValuePropRef.current) {
+            return;
+        }
+        setDefaultControlledValue(defaultValue);
+    }, [defaultValue]);
+    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 })] }));
+}
+const StyledAutoComplete = styled(AutoComplete$1) `
+  font-size: 13px;
+
+  > input {
+    background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+    border: 0;
+    font-size: 13px;
+    width: 100%;
+  }
+`;
+const Box$9 = styled.div `
+  position: relative;
+
+  > .rs-picker-select {
+    > .rs-picker-toggle {
+      font-size: 13px;
+
+      > .rs-stack {
+        > .rs-stack-item {
+          > .rs-picker-toggle-placeholder {
+            font-size: 13px;
+          }
+        }
+      }
+    }
+  }
+`;
+
+function Checkbox({ label, onChange, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${String(originalProps.defaultChecked)}`, [originalProps.defaultChecked, originalProps.name]);
+    const handleChange = useCallback((_, isChecked) => {
+        if (!onChange) {
+            return;
+        }
+        onChange(isChecked);
+    }, [onChange]);
+    return (jsx(StyledCheckbox, { id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key));
+}
+const StyledCheckbox = styled(Checkbox$1) `
+  > .rs-checkbox-checker {
+    min-height: 0;
+    padding-left: 28px;
+    padding-top: 0;
+
+    .rs-checkbox-wrapper {
+      left: 2px;
+      top: 2px !important;
+    }
+  }
+`;
+
 var dayjs_min = {exports: {}};
 
 var hasRequiredDayjs_min;
@@ -3437,10 +3491,10 @@ disabled = false, isCompact, isEndDate = false, isForcedFocused, isLight, isStar
         ];
         onChange(nextDateTuple, isFilled);
     }, [onChange]);
-    return (jsxs(Box$6, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isStartDate && jsx("span", { children: "Du " }), isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => monthInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => yearInputRef.current.focus(), onPrevious: () => dayInputRef.current.focus(), size: 2 }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && defaultValue[0], disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }), !isCompact && jsx(Calendar, {})] }));
+    return (jsxs(Box$8, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isStartDate && jsx("span", { children: "Du " }), isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => monthInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: () => yearInputRef.current.focus(), onPrevious: () => dayInputRef.current.focus(), size: 2 }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && defaultValue[0], disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }), !isCompact && jsx(Calendar, {})] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
-const Box$6 = styled.div `
+const Box$8 = styled.div `
   align-items: center;
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p => p.$hasError || p.$isFocused
@@ -3517,9 +3571,9 @@ function RangedTimePicker({ filter, minutesRange, onChange }) {
     if (!filteredRangedTimeOptions.length) {
         return jsx(Fragment, {});
     }
-    return (jsx(Box$5, { onClick: stopMouseEventPropagation, role: "listbox", children: filteredRangedTimeOptions.map(({ label, value }, index) => (jsx(Option, { "aria-selected": false, className: "js-ranged-time-picker-option", isSelected: index === selectedOptionIndex, onClick: () => onChange(value), role: "option", tabIndex: -1, children: spannedLabels[index] }, label))) }));
+    return (jsx(Box$7, { onClick: stopMouseEventPropagation, role: "listbox", children: filteredRangedTimeOptions.map(({ label, value }, index) => (jsx(Option, { "aria-selected": false, className: "js-ranged-time-picker-option", isSelected: index === selectedOptionIndex, onClick: () => onChange(value), role: "option", tabIndex: -1, children: spannedLabels[index] }, label))) }));
 }
-const Box$5 = styled.div `
+const Box$7 = styled.div `
   background-color: ${p => p.theme.color.white};
   box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray};
   display: flex;
@@ -3656,10 +3710,10 @@ disabled = false, isCompact, isEndDate = false, isLight, isStartDate = false, mi
         const nextTimeTuple = [hourInputRef.current.value, minuteInputRef.current.value];
         onChange(nextTimeTuple);
     }, [closeRangedTimePicker, onChange]);
-    return (jsxs(Box$4, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(InputGroup, { children: [jsxs("div", { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], disabled: disabled, isLight: isLight, max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => hourInputRef.current.focus(), size: 2 })] }), !isCompact && jsx(Clock, {})] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
+    return (jsxs(Box$6, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(InputGroup, { children: [jsxs("div", { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], disabled: disabled, isLight: isLight, max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => hourInputRef.current.focus(), size: 2 })] }), !isCompact && jsx(Clock, {})] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
-const Box$4 = styled.div `
+const Box$6 = styled.div `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   box-shadow: ${p => p.$hasError || p.$isFocused
     ? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
@@ -3738,11 +3792,11 @@ function CalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         // and can be used as a container for <RsuiteDatePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$3, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, 
+    return (jsx(Box$5, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
             ranges: [], value: defaultValue })) }));
 }
-const Box$3 = styled.div `
+const Box$5 = styled.div `
   height: 0;
   position: relative;
   user-select: none;
@@ -3780,7 +3834,7 @@ const Box$3 = styled.div `
       border: 0;
       font-size: 13px;
       height: auto !important;
-      line-height: 1.4;
+      line-height: 1.3846;
       padding: 0;
 
       > .rs-calendar-header {
@@ -3994,9 +4048,9 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
             window.document.removeEventListener('click', handleClickOutside);
         };
     }, [handleClickOutside]);
-    return (jsxs(Fieldset, { disabled: disabled, ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box$2, { 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 })] }));
+    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$2 = styled.div `
+const Box$4 = styled.div `
   * {
     font-weight: 500;
     line-height: 1;
@@ -4042,11 +4096,11 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         // and can be used as a container for <RsuiteDateRangePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$1, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], 
+    return (jsx(Box$3, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
             value: controlledValue })) }));
 }
-const Box$1 = styled.div `
+const Box$3 = styled.div `
   height: 0;
   position: relative;
   user-select: none;
@@ -4073,6 +4127,7 @@ const Box$1 = styled.div `
     box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray};
     border-radius: 0;
     margin-top: 2px;
+    width: 495px;
 
     .rs-picker-daterange-header,
     .rs-calendar-header-time-toolbar,
@@ -4086,7 +4141,7 @@ const Box$1 = styled.div `
       > .rs-calendar {
         font-size: 13px;
         height: auto !important;
-        line-height: 1.4;
+        line-height: 1.3846;
         padding: 0;
 
         &:first-child {
@@ -4369,9 +4424,9 @@ disabled = false, isCompact = false, isHistorical = false, isLabelHidden = false
             window.document.removeEventListener('click', handleClickOutside);
         };
     }, [handleClickOutside]);
-    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isDisabled: disabled, isHidden: isLabelHidden, children: label }), jsxs(Box, { 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 })] }));
+    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 = styled.div `
+const Box$2 = styled.div `
   * {
     font-weight: 500;
     line-height: 1;
@@ -4437,9 +4492,14 @@ const ChecboxesBox$1 = styled.div `
     `}
 `;
 
-function MultiSelect({ fixedWidth = 5, isLabelHidden = false, isLight = false, label, onChange, options, 
+function MultiSelect({ 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 { 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 handleChange = useCallback((nextValue) => {
         if (!onChange) {
@@ -4448,7 +4508,10 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledTagPicker, { "$fixedWidth": fixedWidth, "$isLight": isLight, data: options, id: originalProps.name, onChange: handleChange, searchable: searchable, ...originalProps }, key)] }));
+    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 })] }));
 }
 // TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
 // We should hack that.
@@ -4462,6 +4525,54 @@ const StyledTagPicker = styled(TagPicker) `
     cursor: inherit;
   }
 `;
+const Box$1 = styled.div `
+  position: relative;
+
+  > .rs-picker-input {
+    > .rs-picker-toggle {
+      border: solid 1px ${p => p.theme.color.gainsboro} !important;
+      font-size: 13px;
+      line-height: 1.3846;
+      padding: 5px 40px 5px 8px !important;
+
+      :hover {
+        border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
+      }
+
+      :active,
+      :focus {
+        border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+      }
+
+      > .rs-stack {
+        > .rs-stack-item {
+          > .rs-picker-toggle-placeholder {
+            font-size: 13px;
+            line-height: 1.3846;
+          }
+
+          > svg {
+            height: 18px;
+            /* margin-top: -2px; */
+          }
+        }
+      }
+    }
+
+    > .rs-picker-tag-wrapper {
+      .rs-picker-search {
+        .rs-picker-search-input {
+          padding: 0 8px !important;
+
+          input {
+            font-size: 13px;
+            line-height: 1.3846;
+          }
+        }
+      }
+    }
+  }
+`;
 
 function MultiRadio({ defaultValue, isInline = false, isLabelHidden = false, isLight = false, label, name, onChange, options }) {
     const [checkedOptionValue, setCheckedOptionValue] = useState(undefined);
@@ -4595,9 +4706,14 @@ const StyledInput$2 = styled(Input) `
   width: 100%;
 `;
 
-function Select({ isLabelHidden = false, isLight = false, label, onChange, options, 
+function Select({ 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 { 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 handleChange = useCallback((nextValue) => {
         if (!onChange) {
@@ -4606,10 +4722,13 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = nextValue ?? undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledSelectPicker, { "$isLight": isLight, 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)] }));
+    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, 
+                    // 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 })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {
@@ -4617,6 +4736,41 @@ const StyledSelectPicker = styled(SelectPicker) `
     border: 0;
   }
 `;
+const Box = styled.div `
+  position: relative;
+
+  > .rs-picker-select {
+    > .rs-picker-toggle {
+      border: solid 1px ${p => p.theme.color.gainsboro} !important;
+      font-size: 13px;
+      line-height: 1.3846;
+      padding: 4px 40px 6px 8px;
+
+      :hover {
+        border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
+      }
+
+      :active,
+      :focus {
+        border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+      }
+
+      > .rs-stack {
+        > .rs-stack-item {
+          > .rs-picker-toggle-placeholder {
+            font-size: 13px;
+            line-height: 1.3846;
+          }
+
+          > svg {
+            height: 18px;
+            margin-top: -2px;
+          }
+        }
+      }
+    }
+  }
+`;
 
 function Textarea({ isLabelHidden = false, isLight = false, label, onChange, rows = 3, ...originalProps }) {
     const inputRef = useRef();
@@ -4730,10 +4884,11 @@ function FormikNumberInput({ name, ...originalProps }) {
 }
 
 function FormikSelect({ name, ...originalProps }) {
-    const [field, , helpers] = useField(name);
+    const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    return jsx(Select, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
+    return jsx(Select, { defaultValue: defaultValue, error: error, name: name, onChange: helpers.setValue, ...originalProps });
 }
 
 function FormikTextarea({ name, ...originalProps }) {