@mtes-mct/monitor-ui 6.5.1 → 6.6.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [6.5.2](https://github.com/MTES-MCT/monitor-ui/compare/v6.5.1...v6.5.2) (2023-05-27)
+
+
+### Bug Fixes
+
+* **fields:** add missing and normalize error styles ([8104328](https://github.com/MTES-MCT/monitor-ui/commit/810432817e7ea1dfa77427a1ea4fac83cdd41713))
+
+## [6.5.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.5.0...v6.5.1) (2023-05-26)
+
+
+### Bug Fixes
+
+* **fields:** add missing onBlur & onFocus props passing in NumberInput ([25c210e](https://github.com/MTES-MCT/monitor-ui/commit/25c210e498c37f275aa32dc5104e0c2824eb4a64))
+* **fields:** prevent wheel event in NumberInput, DatePicker & DateRangePicker ([21a1c20](https://github.com/MTES-MCT/monitor-ui/commit/21a1c205620e977b411e755793ff92dfc17da20b))
+
 # [6.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.4.1...v6.5.0) (2023-05-25)
 
 

package/formiks/FormikEffect.d.ts

@@ -1,5 +1,6 @@
 import type { Promisable } from 'type-fest';
 export type FormikEffectProps = {
     onChange: (nextValues: Record<string, any>) => Promisable<void>;
+    onError?: ((nextValues: Record<string, any>) => Promisable<void>) | undefined;
 };
-export declare function FormikEffect({ onChange }: FormikEffectProps): JSX.Element;
+export declare function FormikEffect({ onChange, onError }: FormikEffectProps): JSX.Element;

package/index.d.ts

@@ -62,7 +62,6 @@ export { getCoordinates, coordinatesAreDistinct } from './utils/coordinates';
 export { getLocalizedDayjs } from './utils/getLocalizedDayjs';
 export { getPseudoRandomString } from './utils/getPseudoRandomString';
 export { getUtcizedDayjs } from './utils/getUtcizedDayjs';
-export { noop } from './utils/noop';
 export { isNumeric } from './utils/isNumeric';
 export { stopMouseEventPropagation } from './utils/stopMouseEventPropagation';
 export type { PartialTheme, Theme } from './theme';

package/index.js

@@ -2174,9 +2174,9 @@ function stopMouseEventPropagation(event) {
 
 function RawDialog({ children, className, isAbsolute = false, ...nativeProps }) {
     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 })] }));
+    return (jsxs(Box$h, { "$isAbsolute": isAbsolute, className: controlledClassName, onClick: stopMouseEventPropagation, ...nativeProps, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
 }
-const Box$g = styled.div `
+const Box$h = styled.div `
   position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
   top: 0;
   bottom: 0;
@@ -3185,9 +3185,9 @@ function SingleTag({ children, className, onDelete, ...nativeProps }) {
             onDelete();
         }
     }, [onDelete]);
-    return (jsxs(Box$f, { className: controlledClassName, ...nativeProps, children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
+    return (jsxs(Box$g, { className: controlledClassName, ...nativeProps, children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
 }
-const Box$f = styled.div `
+const Box$g = styled.div `
   align-items: center;
   display: inline-flex;
 `;
@@ -3242,9 +3242,9 @@ p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p
 
 function Fieldset({ children, className, hasBorder = false, hasError = false, isLegendHidden = false, isLight = false, legend, ...nativeProps }) {
     const hasLegend = useMemo(() => Boolean(legend), [legend]);
-    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 })] }));
+    return (jsxs(Box$f, { 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 Box$e = styled.fieldset `
+const Box$f = styled.fieldset `
   align-items: flex-start;
   border: 0;
   display: flex;
@@ -3307,10 +3307,10 @@ function Tag({ accent, bullet, bulletColor, children, className, color, Icon, is
         case Accent.TERTIARY:
             return jsx(TertiaryTag, { ...commonProps });
         default:
-            return jsx(Box$d, { "$color": color, ...commonProps });
+            return jsx(Box$e, { "$color": color, ...commonProps });
     }
 }
-const Box$d = styled.span `
+const Box$e = styled.span `
   align-items: center;
   background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
   border-radius: 11px;
@@ -3332,16 +3332,16 @@ const Box$d = styled.span `
     margin-right: 4px;
   }
 `;
-const PrimaryTag = styled(Box$d) `
+const PrimaryTag = styled(Box$e) `
   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$d) `
+const SecondaryTag = styled(Box$e) `
   background-color: ${p => (p.$isLight ? '#f6d012' : '#f6d012')};
   color: ${p => p.theme.color.gunMetal};
 `;
-const TertiaryTag = styled(Box$d) `
+const TertiaryTag = styled(Box$e) `
   background-color: ${p => (p.$isLight ? p.theme.color.charcoal : p.theme.color.charcoal)};
   color: ${p => p.theme.color.white};
 `;
@@ -20799,7 +20799,7 @@ function Search({ baseContainer, className, customSearch = undefined, customSear
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    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, 
+    return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$d, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, 
                         // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
                         // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
                         data: controlledRsuiteData || data, 
@@ -20848,7 +20848,7 @@ const StyledAutoComplete = styled(AutoComplete) `
     }
   }
 `;
-const Box$c = styled.div `
+const Box$d = styled.div `
   background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   position: relative;
   width: 100%;
@@ -21149,11 +21149,11 @@ function CalendarPicker({ isHistorical, isOpen, onChange, value }) {
         // and can be used as a container for <RsuiteDatePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$b, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
+    return (jsx(Box$c, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
             // eslint-disable-next-line no-null/no-null
             value: controlledValue ?? null })) }));
 }
-const Box$b = styled.div `
+const Box$c = styled.div `
   height: 0;
   position: relative;
   user-select: none;
@@ -21502,10 +21502,10 @@ function DateInputWithRef({ baseContainer, disabled = false, isCompact, isEndDat
         ];
         onChange(nextDateTuple, isFilled);
     }, [baseDocument, onChange]);
-    return (jsxs(Box$a, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isRange && isStartDate && jsx("span", { children: "Du " }), isRange && isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => monthInputRef.current?.focus(), onPrevious: onPrevious, size: 2, value: controlledValue && controlledValue[2] }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => yearInputRef.current?.focus(), onPrevious: () => dayInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => monthInputRef.current?.focus(), size: 4, value: controlledValue && controlledValue[0] })] }), !isCompact && jsx(Calendar, {})] }));
+    return (jsxs(Box$b, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isRange && isStartDate && jsx("span", { children: "Du " }), isRange && isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => monthInputRef.current?.focus(), onPrevious: onPrevious, size: 2, value: controlledValue && controlledValue[2] }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => yearInputRef.current?.focus(), onPrevious: () => dayInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => monthInputRef.current?.focus(), size: 4, value: controlledValue && controlledValue[0] })] }), !isCompact && jsx(Calendar, {})] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
-const Box$a = styled.div `
+const Box$b = 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
@@ -21578,9 +21578,9 @@ function RangedTimePicker({ filter, minutesRange, onChange }) {
     if (!filteredRangedTimeOptions.length) {
         return jsx(Fragment, {});
     }
-    return (jsx(Box$9, { 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$a, { 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$9 = styled.div `
+const Box$a = styled.div `
   background-color: ${p => p.theme.color.white};
   box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray};
   display: flex;
@@ -21718,10 +21718,10 @@ function TimeInputWithRef({ baseContainer, disabled = false, isCompact, isEndDat
         }
         setControlledValue(value);
     }, [isFocused, previousValue, value]);
-    return (jsxs(Box$8, { 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' : ''}`, 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, value: controlledValue && controlledValue[0] }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current?.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => hourInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] })] }), !isCompact && jsx(Clock, {})] }), isTimePickerOpen && (jsx(RangedTimePicker, { filter: timePickerFilter, minutesRange: minutesRange, onChange: handleTimePickerChange }))] }));
+    return (jsxs(Box$9, { 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' : ''}`, 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, value: controlledValue && controlledValue[0] }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current?.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => hourInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] })] }), !isCompact && jsx(Clock, {})] }), isTimePickerOpen && (jsx(RangedTimePicker, { filter: timePickerFilter, minutesRange: minutesRange, onChange: handleTimePickerChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
-const Box$8 = styled.div `
+const Box$9 = 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]}`
@@ -21893,17 +21893,28 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
         selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    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 })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$8, { ref: boxRef, "$hasError": hasError, "$isDisabled": disabled, 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 `
+const Box$8 = styled.div `
   * {
     font-weight: 500;
     line-height: 1;
   }
 
   color: ${p => p.theme.color.gunMetal};
+  display: inline-flex;
   font-size: 13px;
+  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
   position: relative;
+
+  ${p => p.$isDisabled &&
+    css `
+      * {
+        background-color: ${p.theme.color.cultured} !important;
+        color: ${p.theme.color.lightGray} !important;
+        cursor: not-allowed;
+      }
+    `}
 `;
 const Field$1 = styled.span `
   font-size: inherit;
@@ -21949,12 +21960,12 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
         // and can be used as a container for <RsuiteDateRangePicker />
         forceUpdate();
     }, [forceUpdate]);
-    return (jsx(Box$6, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
+    return (jsx(Box$7, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate, 
             // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
             // eslint-disable-next-line no-null/no-null
             value: controlledValue ?? null })) }));
 }
-const Box$6 = styled.div `
+const Box$7 = styled.div `
   height: 0;
   position: relative;
   user-select: none;
@@ -22348,19 +22359,21 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
         selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
         forceUpdate();
     }, [defaultValue, forceUpdate, previousDefaultValue]);
-    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 })] }));
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$6, { "$hasError": hasError, "$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 `
+const Box$6 = styled.div `
   * {
     font-weight: 500;
     line-height: 1;
   }
 
   color: ${p => p.theme.color.gunMetal};
+  display: inline-flex;
   font-size: 13px;
+  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
   position: relative;
 
-  ${p => p.isDisabled &&
+  ${p => p.$isDisabled &&
     css `
       * {
         background-color: ${p.theme.color.cultured} !important;
@@ -25793,7 +25806,7 @@ function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength =
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-MultiSelect", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$4, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, 
+    return (jsxs(Field$2, { className: "Field-MultiSelect", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$5, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current, 
                     // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
                     // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
                     data: controlledRsuiteData || rsuiteData, disabled: disabled, id: originalProps.name, onChange: handleChange, onClick: toggle, onSearch: handleSearch, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, 
@@ -25801,7 +25814,7 @@ function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength =
                     // that's why we send this "always true" filter to disable Rsuite TagPicker internal search filtering
                     searchBy: (customSearch ? () => true : undefined), value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
-const Box$4 = styled.div `
+const Box$5 = styled.div `
   position: relative;
   user-select: none;
   width: 100%;
@@ -25827,7 +25840,7 @@ const Box$4 = styled.div `
 
     :active,
     :focus {
-      border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
     }
 
     > .rs-picker-toggle {
@@ -25935,13 +25948,14 @@ function MultiRadio({ disabled = false, error, isErrorMessageHidden = false, isI
         onChange(nextCheckedOptionValue);
     }, [onChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
-    return (jsxs(Fieldset, { className: "Field-MultiRadio", disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(CheckboxesBox, { "$isInline": isInline, children: options.map(option => (jsx(Radio, { checked: equals$1(option.value, value), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Fieldset, { className: "Field-MultiRadio", disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(Box$4, { "$hasError": hasError, "$isInline": isInline, children: options.map(option => (jsx(Radio, { checked: equals$1(option.value, value), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
-const CheckboxesBox = styled.div `
+const Box$4 = styled.div `
   color: ${p => p.theme.color.gunMetal};
   display: flex;
   flex-direction: ${p => (p.$isInline ? 'row' : 'column')};
   font-weight: 500;
+  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
 
   > .rs-radio {
     * {
@@ -26081,19 +26095,23 @@ function NumberInput({ className, error, isErrorMessageHidden = false, isLabelHi
 }
 const StyledInput$2 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-  border: solid 1px ${p => p.theme.color.blueYonder[100]};
+  border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
   border-radius: 0;
   font-size: 13px;
   /* TODO It should be 18px but computed line-height is stuck to min. 18.5px. Investigate that. */
   line-height: 19px;
-  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
   padding: 3px 8px 6px;
   vertical-align: center;
   width: 100%;
 
+  :hover {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+  }
+
+  :active,
   :focus {
-    outline-width: 1px;
-    outline-color: ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray)};
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    outline: 0;
   }
 `;
 
@@ -34966,9 +34984,7 @@ const Box$1 = styled.div `
   text-align: left;
 `;
 
-const noop = () => { };
-
-function CoordinatesInput({ className, coordinatesFormat, defaultValue, error, isLabelHidden = false, isLight = false, label, onChange = noop, ...nativeProps }) {
+function CoordinatesInput({ className, coordinatesFormat, defaultValue, error, isLabelHidden = false, isLight = false, label, onChange = fp.noop, ...nativeProps }) {
     const controlledClassName = classnames('Field-CoordinatesInput', className);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -35057,7 +35073,7 @@ function Select({ baseContainer, customSearch, customSearchMinQueryLength = 1, d
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: "Field-Select", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current, 
+    return (jsxs(Field$2, { className: "Field-Select", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, "$hasError": hasError, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current, 
                     // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
                     // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
                     data: controlledRsuiteData || rsuiteData, disabled: disabled, id: originalProps.name, onClean: handleClean, onSearch: handleSearch, 
@@ -35083,18 +35099,18 @@ const Box = styled.div `
     width: 100%;
 
     > .rs-picker-toggle {
-      border: solid 1px ${p => p.theme.color.gainsboro} !important;
+      border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : 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;
+        border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
       }
 
       :active,
       :focus {
-        border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
+        border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
       }
 
       > .rs-stack {
@@ -35164,11 +35180,11 @@ function Textarea({ error, isErrorMessageHidden = false, isLabelHidden = false,
         onChange(normalizedNextValue);
     }, [onChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
-    return (jsxs(Field$2, { className: "Field-Textarea", children: [jsx(Label, { disabled: originalProps.disabled, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: "Field-Textarea", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$hasError": hasError, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput$1 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-  border: 0;
+  border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
   font-size: 13px;
   padding: 7px 11px;
   width: 100%;
@@ -35176,6 +35192,16 @@ const StyledInput$1 = styled(Input) `
   ::placeholder {
     color: ${p => (p.$isLight ? p.theme.color.slateGray : p.theme.color.slateGray)};
   }
+
+  :hover {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+  }
+
+  :active,
+  :focus {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    outline: 0;
+  }
 `;
 
 function TextInput({ className, error, Icon, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, size = Size.NORMAL, style, value, ...originalProps }) {
@@ -35205,12 +35231,11 @@ const PADDING_WITH_ICON = {
 };
 const StyledInput = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
-  border: solid 1px ${p => p.theme.color.blueYonder[100]};
+  border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
   border-radius: 0;
   font-size: 13px;
   /* TODO It should be 18px but computed line-height is stuck to min. 18.5px. Investigate that. */
   line-height: 19px;
-  outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
   padding: ${p => (p.$hasIcon ? PADDING_WITH_ICON[p.$size] : PADDING[p.$size])};
   vertical-align: center;
   width: 100%;
@@ -35218,6 +35243,16 @@ const StyledInput = styled(Input) `
   ::placeholder {
     color: ${p => (p.$isLight ? p.theme.color.slateGray : p.theme.color.slateGray)};
   }
+
+  :hover {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
+  }
+
+  :active,
+  :focus {
+    border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
+    outline: 0;
+  }
 `;
 const InputBox = styled.div `
   position: relative;
@@ -35295,11 +35330,22 @@ function FormikDateRangePicker({ name, ...originalProps }) {
     return (jsx(UntypedDateRangePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps }));
 }
 
-function FormikEffect({ onChange }) {
-    const { values } = useFormikContext();
+function FormikEffect({ onChange, onError }) {
+    const { errors, values } = useFormikContext();
+    const previousErrors = usePrevious(errors);
+    const previousValues = usePrevious(values);
     useEffect(() => {
+        if (fp.isEqual(previousValues, values)) {
+            return;
+        }
         onChange(values);
-    }, [onChange, values]);
+    }, [onChange, previousValues, values]);
+    useEffect(() => {
+        if (!onError || fp.isEqual(previousErrors, errors)) {
+            return;
+        }
+        onError(errors);
+    }, [errors, onError, previousErrors]);
     return jsx(Fragment, {});
 }
 
@@ -35412,5 +35458,5 @@ function useNewWindow() {
     return contextValue;
 }
 
-export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map