@mtes-mct/monitor-ui 5.2.1 → 5.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [5.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v5.2.0...v5.2.1) (2023-04-11)
+
+
+### Bug Fixes
+
+* **cypress:** include registerMonitorUiCustomCommands() typings in module ([81373dc](https://github.com/MTES-MCT/monitor-ui/commit/81373dca3f7b3a62770cb858ae601e984834f4c0))
+
 # [5.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v5.1.1...v5.2.0) (2023-04-11)
 
 

package/fields/Checkbox.d.ts

@@ -3,9 +3,10 @@ import type { Promisable } from 'type-fest';
 export type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'defaultChecked' | 'id' | 'onChange'> & {
     checked?: boolean | undefined;
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isUndefinedWhenDisabled?: boolean | undefined;
     label: string;
     name: string;
     onChange?: ((isCheched: boolean) => Promisable<void>) | undefined;
 };
-export declare function Checkbox({ checked, error, isUndefinedWhenDisabled, label, onChange, ...originalProps }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked, error, isErrorMessageHidden, isUndefinedWhenDisabled, label, onChange, ...originalProps }: CheckboxProps): JSX.Element;

package/fields/DatePicker/index.d.ts

@@ -31,6 +31,7 @@ export interface DatePickerProps extends Omit<HTMLAttributes<HTMLFieldSetElement
     isCompact?: boolean | undefined;
     /** Set the default time to the end (instead of start) of the day when picking/entering a date. */
     isEndDate?: boolean | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     /** Only allow past dates until today. */
     isHistorical?: boolean | undefined;
     isLabelHidden?: boolean | undefined;

package/fields/DateRangePicker/index.d.ts

@@ -34,6 +34,7 @@ export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLFieldSetEl
     disabled?: boolean | undefined;
     error?: string | undefined;
     isCompact?: boolean | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     /** Only allow past dates until today. */
     isHistorical?: boolean | undefined;
     isLabelHidden?: boolean | undefined;

package/fields/MultiCheckbox.d.ts

@@ -3,6 +3,7 @@ import type { Promisable } from 'type-fest';
 export type MultiCheckboxProps<OptionValue extends OptionValueType = string> = {
     disabled?: boolean | undefined;
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isInline?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
@@ -13,4 +14,4 @@ export type MultiCheckboxProps<OptionValue extends OptionValueType = string> = {
     options: Option<OptionValue>[];
     value?: OptionValue[] | undefined;
 };
-export declare function MultiCheckbox<OptionValue extends OptionValueType = string>({ value, disabled, error, isInline, isLabelHidden, isLight, isUndefinedWhenDisabled, label, name, onChange, options }: MultiCheckboxProps<OptionValue>): JSX.Element;
+export declare function MultiCheckbox<OptionValue extends OptionValueType = string>({ disabled, error, isErrorMessageHidden, isInline, isLabelHidden, isLight, isUndefinedWhenDisabled, label, name, onChange, options, value }: MultiCheckboxProps<OptionValue>): JSX.Element;

package/fields/MultiRadio.d.ts

@@ -3,6 +3,7 @@ import type { Promisable } from 'type-fest';
 export type MultiRadioProps<OptionValue extends OptionValueType = string> = {
     disabled?: boolean | undefined;
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isInline?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
@@ -13,4 +14,4 @@ export type MultiRadioProps<OptionValue extends OptionValueType = string> = {
     options: Option<OptionValue>[];
     value?: OptionValue | undefined;
 };
-export declare function MultiRadio<OptionValue extends OptionValueType = string>({ disabled, error, isInline, isLabelHidden, isLight, isUndefinedWhenDisabled, label, name, onChange, options, value }: MultiRadioProps<OptionValue>): JSX.Element;
+export declare function MultiRadio<OptionValue extends OptionValueType = string>({ disabled, error, isErrorMessageHidden, isInline, isLabelHidden, isLight, isUndefinedWhenDisabled, label, name, onChange, options, value }: MultiRadioProps<OptionValue>): JSX.Element;

package/fields/MultiSelect.d.ts

@@ -5,6 +5,7 @@ export type MultiSelectProps<OptionValue extends OptionValueType = string> = Omi
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null | undefined;
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
     isUndefinedWhenDisabled?: boolean | undefined;
@@ -15,4 +16,4 @@ export type MultiSelectProps<OptionValue extends OptionValueType = string> = Omi
     options: Option<OptionValue>[];
     value?: OptionValue[] | undefined;
 };
-export declare function MultiSelect<OptionValue extends OptionValueType = string>({ baseContainer, disabled, error, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: MultiSelectProps<OptionValue>): JSX.Element;
+export declare function MultiSelect<OptionValue extends OptionValueType = string>({ baseContainer, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: MultiSelectProps<OptionValue>): JSX.Element;

package/fields/NumberInput.d.ts

@@ -2,6 +2,7 @@ import type { InputProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
 export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'type' | 'value'> & {
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
     isUndefinedWhenDisabled?: boolean | undefined;
@@ -10,4 +11,4 @@ export type NumberInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | '
     onChange?: ((nextValue: number | undefined) => Promisable<void>) | undefined;
     value?: number | undefined;
 };
-export declare function NumberInput({ error, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, value, ...originalProps }: NumberInputProps): JSX.Element;
+export declare function NumberInput({ error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, value, ...originalProps }: NumberInputProps): JSX.Element;

package/fields/Search.d.ts

@@ -8,6 +8,7 @@ export type SearchProps<OptionValue extends OptionValueType = string> = Omit<Rsu
     baseContainer?: Document | HTMLDivElement | null | undefined;
     defaultValue?: OptionValue | undefined;
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
     isSearchIconHidden?: boolean | undefined;
@@ -21,4 +22,4 @@ export type SearchProps<OptionValue extends OptionValueType = string> = Omit<Rsu
     /** Duration in milliseconds */
     throttleDuration?: number;
 };
-export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, defaultValue, error, isLabelHidden, isLight, isSearchIconHidden, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration, ...originalProps }: SearchProps<OptionValue>): JSX.Element;
+export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, defaultValue, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconHidden, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration, ...originalProps }: SearchProps<OptionValue>): JSX.Element;

package/fields/Select.d.ts

@@ -5,6 +5,7 @@ export type SelectProps<OptionValue extends OptionValueType = string> = Omit<Sel
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null | undefined;
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
     isUndefinedWhenDisabled?: boolean | undefined;
@@ -15,4 +16,4 @@ export type SelectProps<OptionValue extends OptionValueType = string> = Omit<Sel
     options: Option<OptionValue>[];
     value?: OptionValue | undefined;
 };
-export declare function Select<OptionValue extends OptionValueType = string>({ baseContainer, disabled, error, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: SelectProps<OptionValue>): JSX.Element;
+export declare function Select<OptionValue extends OptionValueType = string>({ baseContainer, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: SelectProps<OptionValue>): JSX.Element;

package/fields/TextInput.d.ts

@@ -2,6 +2,7 @@ import type { InputProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
 export type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'type' | 'value'> & {
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
     isUndefinedWhenDisabled?: boolean | undefined;
@@ -10,4 +11,4 @@ export type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'on
     onChange?: ((nextValue: string | undefined) => Promisable<void>) | undefined;
     value?: string | undefined;
 };
-export declare function TextInput({ error, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, value, ...originalProps }: TextInputProps): JSX.Element;
+export declare function TextInput({ error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, value, ...originalProps }: TextInputProps): JSX.Element;

package/fields/Textarea.d.ts

@@ -2,6 +2,7 @@ import type { TextareaHTMLAttributes } from 'react';
 import type { Promisable } from 'type-fest';
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     error?: string | undefined;
+    isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
     isUndefinedWhenDisabled?: boolean | undefined;
@@ -10,4 +11,4 @@ export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'd
     onChange?: ((nextValue: string | undefined) => Promisable<void>) | undefined;
     value?: string | undefined;
 };
-export declare function Textarea({ error, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, rows, value, ...originalProps }: TextareaProps): JSX.Element;
+export declare function Textarea({ error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, rows, value, ...originalProps }: TextareaProps): JSX.Element;

package/index.js

@@ -20842,7 +20842,7 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Search({ baseContainer, defaultValue, error, isLabelHidden, isLight = false, isSearchIconHidden = false, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration = 200, ...originalProps }) {
+function Search({ baseContainer, defaultValue, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconHidden = false, label, MenuItem, onChange, onQuery, options, queryMap, queryUrl, throttleDuration = 200, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
     const queryRef = useRef(undefined);
@@ -20916,7 +20916,7 @@ function Search({ baseContainer, defaultValue, error, isLabelHidden, isLight = f
     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 }))] }), hasError && jsx(FieldError, { children: controlledError })] }));
+    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 })] }));
 }
 const StyledCloseButton = styled(IconButton) `
   cursor: pointer;
@@ -20978,7 +20978,7 @@ const Box$c = styled.div `
   }
 `;
 
-function Checkbox({ checked = false, error, isUndefinedWhenDisabled = false, label, onChange, ...originalProps }) {
+function Checkbox({ checked = false, error, isErrorMessageHidden = false, isUndefinedWhenDisabled = false, label, onChange, ...originalProps }) {
     const { forceUpdate } = useForceUpdate();
     // This tracks the component internal value which allows us to react to value changes after the checkbox toggling
     const [internalChecked, setInternalChecked] = useState(checked);
@@ -21006,7 +21006,7 @@ function Checkbox({ checked = false, error, isUndefinedWhenDisabled = false, lab
         }
     }, [forceUpdate, onChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
-    return (jsxs(Field$2, { className: "Field-Checkbox", children: [jsx(StyledCheckbox, { checked: controlledChecked, id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key), hasError && jsx(FieldError, { children: controlledError })] }, key));
+    return (jsxs(Field$2, { className: "Field-Checkbox", children: [jsx(StyledCheckbox, { checked: controlledChecked, id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledCheckbox = styled(Checkbox$1) `
   > .rs-checkbox-checker {
@@ -21855,7 +21855,7 @@ const InputGroup = styled.div `
   }
 `;
 
-function DatePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isEndDate = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DatePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isEndDate = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     /* eslint-disable no-null/no-null */
     const boxRef = useRef(null);
     const dateInputRef = useRef(null);
@@ -21975,7 +21975,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
     }, [forceUpdate]);
     useFieldUndefineEffect(disabled, onChange, handleDisable);
     useClickOutsideEffect(boxRef, closeCalendarPicker, baseContainer);
-    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, defaultValue: selectedUtcDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedUtcTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true) }, JSON.stringify(selectedUtcTimeTupleRef.current)) }))] }), hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
+    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, defaultValue: selectedUtcDateTupleRef.current, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedUtcTimeTupleRef.current, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true) }, 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 `
   * {
@@ -22205,7 +22205,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DateRangePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     /* eslint-disable no-null/no-null */
     const startDateInputRef = useRef(null);
     const startTimeInputRef = useRef(null);
@@ -22403,7 +22403,7 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
     }, [forceUpdate]);
     useFieldUndefineEffect(disabled, onChange, handleDisable);
     useClickOutsideEffect([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer);
-    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, defaultValue: selectedStartDateTupleRef.current, 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 }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, 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, onInput: handleDateOrTimeInputInput, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedEndDateTupleRef.current, 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 }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, 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, onInput: handleDateOrTimeInputInput, onPrevious: () => endDateInputRef.current?.focus(true) }) }))] }), hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
+    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, defaultValue: selectedStartDateTupleRef.current, 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 }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, 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, onInput: handleDateOrTimeInputInput, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, defaultValue: selectedEndDateTupleRef.current, 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 }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, 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, onInput: handleDateOrTimeInputInput, onPrevious: () => endDateInputRef.current?.focus(true) }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
 }
 const Box$5 = styled.div `
   * {
@@ -22434,32 +22434,48 @@ const Field = styled.span `
 }};
 `;
 
-function MultiCheckbox({ value = [], disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options }) {
-    // This tracks the component internal value which allows us to react to value changes after each checkbox toggling
-    const [internalValue, setInternalValue] = useState(value);
+function useFieldControl(value, onChange, props) {
+    const { disabled, isUndefinedWhenDisabled } = props;
+    // This tracks the component internal value which allows us to react to value changes after the checkbox toggling
+    const internalValueRef = useRef(value);
     // and compare it with an eventual external value change (via the `value` prop)
     const previousValue = usePrevious(value);
-    // to decide which on is the source of "truth" in `controlledValue` (the last one to be changed is the true value)
-    const controlledValue = useMemo(() => {
-        // If the `value` has changed, `value` takes precedence,
-        // otherwise we can use our current internal value
-        const nextControlledValue = lodashExports.isEqual(value, previousValue) ? internalValue : value;
-        return !isUndefinedWhenDisabled || !disabled ? nextControlledValue : undefined;
-    }, [disabled, internalValue, isUndefinedWhenDisabled, previousValue, value]);
+    const { forceUpdate } = useForceUpdate();
+    const controlledValue = isUndefinedWhenDisabled && disabled ? undefined : internalValueRef.current;
+    const controlledOnChange = useCallback((nextValue) => {
+        internalValueRef.current = nextValue;
+        if (onChange) {
+            onChange(nextValue);
+        }
+    }, [onChange]);
+    // We update the `internalValue` each time the `value` prop is updated
+    useEffect(() => {
+        if (lodashExports.isEqual(value, previousValue)) {
+            return;
+        }
+        internalValueRef.current = value;
+        forceUpdate();
+    }, [forceUpdate, previousValue, value]);
+    return { controlledOnChange, controlledValue };
+}
+
+function MultiCheckbox({ disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
+    const { controlledOnChange, controlledValue } = useFieldControl(value, onChange, {
+        disabled,
+        isUndefinedWhenDisabled
+    });
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
+    const key = useKey([controlledValue, disabled, name]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
         const nextCheckedOptionValues = isChecked
             ? [...(controlledValue || []), nextOptionValue]
             : reject(equals(nextOptionValue))(controlledValue || []);
         const normalizedNextValue = nextCheckedOptionValues.length ? nextCheckedOptionValues : undefined;
-        setInternalValue(normalizedNextValue);
-        if (onChange) {
-            onChange(normalizedNextValue);
-        }
-    }, [controlledValue, onChange]);
+        controlledOnChange(normalizedNextValue);
+    }, [controlledOnChange, controlledValue]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
-    return (jsxs(Fieldset, { className: "Field-MultiCheckbox", disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(ChecboxesBox, { "$hasError": hasError, "$isInline": isInline, children: options.map((option, index) => (jsx(Checkbox, { checked: includes(option.value, controlledValue || []), disabled: disabled, label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, JSON.stringify(option.value)))) }), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Fieldset, { className: "Field-MultiCheckbox", disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(ChecboxesBox, { "$hasError": hasError, "$isInline": isInline, children: options.map((option, index) => (jsx(Checkbox, { checked: includes(option.value, controlledValue || []), disabled: disabled, label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const ChecboxesBox = styled.div `
   color: ${p => p.theme.color.gunMetal};
@@ -22497,31 +22513,6 @@ const ChecboxesBox = styled.div `
     `}
 `;
 
-function useFieldControl(value, onChange, props) {
-    const { disabled, isUndefinedWhenDisabled } = props;
-    // This tracks the component internal value which allows us to react to value changes after the checkbox toggling
-    const internalValueRef = useRef(value);
-    // and compare it with an eventual external value change (via the `value` prop)
-    const previousValue = usePrevious(value);
-    const { forceUpdate } = useForceUpdate();
-    const controlledValue = isUndefinedWhenDisabled && disabled ? undefined : internalValueRef.current;
-    const controlledOnChange = useCallback((nextValue) => {
-        internalValueRef.current = nextValue;
-        if (onChange) {
-            onChange(nextValue);
-        }
-    }, [onChange]);
-    // We update the `internalValue` each time the `value` prop is updated
-    useEffect(() => {
-        if (lodashExports.isEqual(value, previousValue)) {
-            return;
-        }
-        internalValueRef.current = value;
-        forceUpdate();
-    }, [forceUpdate, previousValue, value]);
-    return { controlledOnChange, controlledValue };
-}
-
 function getRsuiteValueFromOptionValue(optionValue, optionValueKey) {
     return optionValue !== undefined ? String(optionValueKey ? optionValue[optionValueKey] : optionValue) : undefined;
 }
@@ -22534,7 +22525,7 @@ function getRsuiteDataFromOptions(options, optionValueKey) {
     }));
 }
 
-function MultiSelect({ baseContainer, disabled = false, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
+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);
     const [isOpen, setIsOpen] = useState(false);
@@ -22581,7 +22572,7 @@ function MultiSelect({ baseContainer, disabled = false, error, isLabelHidden = f
     }, [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, data: data, disabled: disabled, id: originalProps.name, 
                     // Since we customized `ItemDataType` type by adding `optionValue`, we have an optional vs required conflict
-                    onChange: handleChange, onClick: toggle, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledRsuiteValue, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+                    onChange: handleChange, onClick: toggle, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Box$4 = styled.div `
   position: relative;
@@ -22676,6 +22667,8 @@ const Box$4 = styled.div `
   }
 
   > .rs-picker-menu {
+    max-width: 100%;
+
     > .rs-picker-check-menu {
       margin: 0;
 
@@ -22702,20 +22695,20 @@ const Box$4 = styled.div `
   }
 `;
 
-function MultiRadio({ disabled = false, error, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
+function MultiRadio({ disabled = false, error, isErrorMessageHidden = false, isInline = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, name, onChange, options, value }) {
     const { controlledOnChange, controlledValue } = useFieldControl(value, onChange, {
         disabled,
         isUndefinedWhenDisabled
     });
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
-    const key = useKey([disabled, name, value]);
+    const key = useKey([controlledValue, disabled, name]);
     const handleChange = useCallback((nextOptionValue, isChecked) => {
         const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined;
         controlledOnChange(nextCheckedOptionValue);
     }, [controlledOnChange]);
     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(option.value, controlledValue), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }), hasError && jsx(FieldError, { children: controlledError })] }, key));
+    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(option.value, controlledValue), 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 `
   color: ${p => p.theme.color.gunMetal};
@@ -22827,7 +22820,7 @@ const Link = styled.a `
   }
 `;
 
-function NumberInput({ error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, value, ...originalProps }) {
+function NumberInput({ error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, value, ...originalProps }) {
     const controlledValue = useMemo(() => (!isUndefinedWhenDisabled || !originalProps.disabled ? value : undefined), [isUndefinedWhenDisabled, originalProps.disabled, value]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -22842,7 +22835,7 @@ function NumberInput({ error, isLabelHidden = false, isLight = false, isUndefine
         onChange(normalizedNextValue);
     }, [onChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
-    return (jsxs(Field$2, { className: "Field-NumberInput", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$2, { "$hasError": hasError, "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "number", value: controlledValue, ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: "Field-NumberInput", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$2, { "$hasError": hasError, "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "number", value: controlledValue, ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput$2 = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -32987,7 +32980,7 @@ const StyledFieldset = styled(Fieldset) `
   }
 `;
 
-function Select({ baseContainer, disabled = false, error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
+function Select({ 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);
     const [isOpen, setIsOpen] = useState(false);
@@ -33034,7 +33027,7 @@ function Select({ baseContainer, disabled = false, error, isLabelHidden = false,
     }, [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, container: boxRef.current, data: data, disabled: disabled, id: originalProps.name, onClean: handleClean, 
                     // Since we customized `ItemDataType` type by adding `optionValue`, we have an optional vs required conflict
-                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledRsuiteValue, ...originalProps }, key)) }), hasError && jsx(FieldError, { children: controlledError })] }));
+                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: searchable, value: controlledRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {
@@ -33117,7 +33110,7 @@ const Box = styled.div `
   }
 `;
 
-function Textarea({ error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, rows = 3, value, ...originalProps }) {
+function Textarea({ error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, rows = 3, value, ...originalProps }) {
     const inputRef = useRef();
     const controlledValue = useMemo(() => (!isUndefinedWhenDisabled || !originalProps.disabled ? value : undefined), [isUndefinedWhenDisabled, originalProps.disabled, value]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
@@ -33132,7 +33125,7 @@ function Textarea({ error, isLabelHidden = false, isLight = false, isUndefinedWh
         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: controlledValue, ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
+    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: controlledValue, ...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)};
@@ -33146,7 +33139,7 @@ const StyledInput$1 = styled(Input) `
   }
 `;
 
-function TextInput({ error, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, value, ...originalProps }) {
+function TextInput({ error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, value, ...originalProps }) {
     const controlledValue = useMemo(() => (!isUndefinedWhenDisabled || !originalProps.disabled ? value : undefined), [isUndefinedWhenDisabled, originalProps.disabled, value]);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
@@ -33159,7 +33152,7 @@ function TextInput({ error, isLabelHidden = false, isLight = false, isUndefinedW
         onChange(normalizedNextValue);
     }, [onChange]);
     useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
-    return (jsxs(Field$2, { className: "Field-TextInput", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { "$hasError": hasError, "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "text", value: controlledValue, ...originalProps }, key), hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: "Field-TextInput", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { "$hasError": hasError, "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "text", value: controlledValue, ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledInput = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};