@mtes-mct/monitor-ui 2.2.1 → 2.3.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [2.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.2.1...v2.3.0) (2022-12-16)
+
+
+### Features
+
+* **fields:** add NumberInput ([#144](https://github.com/MTES-MCT/monitor-ui/issues/144)) ([649cc6c](https://github.com/MTES-MCT/monitor-ui/commit/649cc6cf0c7c1d416c7b6a774472df30d436bf00))
+
+## [2.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.2.0...v2.2.1) (2022-12-15)
+
+
+### Bug Fixes
+
+* **elements:** use gap instead of margin in TagGroup ([#142](https://github.com/MTES-MCT/monitor-ui/issues/142)) ([b6d73ea](https://github.com/MTES-MCT/monitor-ui/commit/b6d73eaa1daaf4f7c112dd9e5b6542265a2fbb1c))
+
 # [2.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.1.1...v2.2.0) (2022-12-15)
 
 

package/config/playwright.config.d.ts

@@ -0,0 +1,3 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+declare const config: PlaywrightTestConfig;
+export default config;

package/e2e/fields.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/index.js

@@ -1,7 +1,7 @@
 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 { Dropdown as Dropdown$1, AutoComplete as AutoComplete$1, Checkbox as Checkbox$1, DateRangePicker as DateRangePicker$1, DatePicker as DatePicker$1, TagPicker, Radio, SelectPicker, Input } from 'rsuite';
+import { Dropdown as Dropdown$1, AutoComplete as AutoComplete$1, Checkbox as Checkbox$1, DateRangePicker as DateRangePicker$1, DatePicker as DatePicker$1, TagPicker, Radio, Input, SelectPicker } from 'rsuite';
 import { useField, useFormikContext } from 'formik';
 
 var Accent;
@@ -2888,7 +2888,7 @@ function NumberInputWithRef({ defaultValue, max, min, onBack, onClick, onFilled,
     }, [onBack, onNext, onPrevious]);
     return (jsx(StyledNumberInput, { ref: inputRef, "$size": size, defaultValue: defaultValue, maxLength: size, onClick: handleClick, onFocus: handleFocus, onInput: handleInput, onKeyDown: handleKeyDown, pattern: "\\d*", placeholder: placeholder, type: "text", ...nativeProps }, String(defaultValue)));
 }
-const NumberInput = forwardRef(NumberInputWithRef);
+const NumberInput$1 = forwardRef(NumberInputWithRef);
 const StyledNumberInput = styled.input `
   background-color: transparent;
   border: 0;
@@ -3028,7 +3028,7 @@ function DateInputWithRef({ defaultValue, isEndDate = false, isForcedFocused, is
         ];
         onChange(nextDateTuple);
     }, [onChange]);
-    return (jsxs(Box$6, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [isStartDate && 'Du ', isEndDate && 'Au ', jsx(NumberInput, { ref: dayInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-day`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), 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, { ref: monthInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-month`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[1]), 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, { ref: yearInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-year`, defaultValue: defaultValue && defaultValue[0], max: currentUtcYear, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }));
+    return (jsxs(Box$6, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [isStartDate && 'Du ', isEndDate && 'Au ', jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: defaultValue && formatNumberAsDoubleDigit(defaultValue[2]), 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]), 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], max: currentUtcYear, min: 2020, onBack: () => monthInputRef.current.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => monthInputRef.current.focus(), size: 4 })] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
 const Box$6 = styled.span `
@@ -3764,7 +3764,7 @@ const Option = styled.div `
   }
 `;
 
-function TimeInputWithRef({ defaultValue, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
+function TimeInputWithRef({ defaultValue, isEndDate = false, isLight, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
     const boxSpanRef = useRef();
     const hourInputRef = useRef();
     const minuteInputRef = useRef();
@@ -3851,7 +3851,7 @@ function TimeInputWithRef({ defaultValue, isLight, isStartDate = false, minutesR
         const nextTimeTuple = [hourInputRef.current.value, minuteInputRef.current.value];
         onChange(nextTimeTuple);
     }, [closeRangedTimePicker, onChange]);
-    return (jsxs(Box$3, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(Fragment, { children: [jsx(NumberInput, { ref: hourInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-hour`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], 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, { ref: minuteInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-minute`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], 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 })] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
+    return (jsxs(Box$3, { ref: boxSpanRef, "$hasError": hasFormatError || hasValidationError, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(Fragment, { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], 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], 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 })] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
 const Box$3 = styled.span `
@@ -3877,7 +3877,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false }) {
+function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const startDateInputRef = useRef();
     const startTimeInputRef = useRef();
     const endDateInputRef = useRef();
@@ -4026,7 +4026,7 @@ function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = f
             window.document.removeEventListener('click', handleClickOutside);
         };
     }, [handleClickOutside]);
-    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box$2, { children: [jsx(Field$1, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, 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$1, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), isRangeCalendarPickerOpenRef.current && (jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleRangeCalendarPickerChange }))] }));
+    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box$2, { children: [jsx(Field$1, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isStartDate: true, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, 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$1, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, onBack: handleEndDateInputPrevious, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field$1, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), isRangeCalendarPickerOpenRef.current && (jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleRangeCalendarPickerChange }))] }));
 }
 const Box$2 = styled.div `
   * {
@@ -4049,44 +4049,18 @@ const Field$1 = styled.span `
 `;
 
 function CalendarPicker({ defaultValue, isHistorical, onChange }) {
-    const boxRef = useRef();
-    const calendarRef = useRef();
-    const [isFirstLoad, setIsFirstLoad] = useState(true);
     const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), []);
     const disabledDate = useMemo(() => (date) => date && isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
     const handleSelect = useCallback((nextDate) => {
         const nextDateTuple = getDateTupleFromDate(nextDate);
         onChange(nextDateTuple);
     }, [onChange]);
-    useEffect(() => {
-        // We wait for the <Box /> to render so that `boxRef` is defined
-        // and can be used as a container for <RsuiteDateRangePicker />
-        setIsFirstLoad(false);
-    }, []);
-    return (jsxs(Fragment, { children: [jsx(GlobalStyleToHideBodyDialog, {}), jsx(Box$1, { ref: boxRef, onClick: stopMouseEventPropagation, children: !isFirstLoad && (jsx(DatePicker$1, { ref: calendarRef, container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: true, ranges: [], 
+    return (jsxs(Fragment, { children: [jsx(RsuiteCalendarPickerModalGlobalStyle, {}), jsx(Box$1, { children: jsx(DatePicker$1, { className: "AAAAAAAAA", classPrefix: "mui-picker-", disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: true, ranges: [], 
                     // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
-                    value: defaultValue })) })] }));
+                    value: defaultValue }) })] }));
 }
-const GlobalStyleToHideBodyDialog = createGlobalStyle `
-  body > div[role="dialog"].rs-picker-date-menu {
-    display: none;
-  }
-`;
-const Box$1 = styled.div `
-  height: 0;
-  position: relative;
-  top: 0;
-  user-select: none;
-
-  .rs-picker-toggle {
-    display: none;
-  }
-
-  .rs-picker-date-panel {
-    height: 290px;
-  }
-
-  .rs-picker-date-menu {
+const RsuiteCalendarPickerModalGlobalStyle = createGlobalStyle `
+  .rs-mui-picker-date-menu {
     border: solid 1px ${p => p.theme.color.lightGray};
     border-radius: 0;
     margin-top: 4px;
@@ -4173,8 +4147,22 @@ const Box$1 = styled.div `
     }
   }
 `;
+const Box$1 = styled.div `
+  /* height: 0;
+  position: relative;
+  top: 0; */
+  user-select: none;
+
+  .rs-picker-toggle {
+    display: none;
+  }
+
+  .rs-picker-date-panel {
+    height: 290px;
+  }
+`;
 
-function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false }) {
+function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false, isLight = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     const dateInputRef = useRef();
     const timeInputRef = useRef();
     const isCalendarPickerOpenRef = useRef(false);
@@ -4241,6 +4229,9 @@ function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false,
         closeCalendarPicker();
         forceUpdate();
         submit();
+        if (withTime && !selectedTimeTupleRef.current) {
+            timeInputRef.current.focus();
+        }
     }, [closeCalendarPicker, forceUpdate, submit, withTime]);
     const handleTimeInputFilled = useCallback((nextTimeTuple) => {
         // If a date has already been selected
@@ -4263,7 +4254,7 @@ function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false,
             window.document.removeEventListener('click', handleClickOutside);
         };
     }, [handleClickOutside]);
-    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box, { children: [jsx(Field, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputFilled, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), isCalendarPickerOpenRef.current && (jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleCalendarPickerChange }))] }));
+    return (jsxs(Fieldset, { ...nativeProps, children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box, { children: [jsx(Field, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputFilled, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), isCalendarPickerOpenRef.current && (jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleCalendarPickerChange }))] }));
 }
 const Box = styled.div `
   * {
@@ -4793,6 +4784,26 @@ const ZoneWrapper = styled.div `
   padding: 6px 12px 6px;
 `;
 
+function NumberInput({ isLabelHidden = false, isLight = false, label, onChange, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback((nextValue) => {
+        if (!onChange) {
+            return;
+        }
+        const normalizedNextValueAsString = nextValue && nextValue.length ? nextValue : undefined;
+        const nextValueAsNumber = Number(normalizedNextValueAsString);
+        const normalizedNextValue = !Number.isNaN(nextValueAsNumber) ? nextValueAsNumber : undefined;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$2, { "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "number", ...originalProps }, key)] }));
+}
+const StyledInput$2 = styled(Input) `
+  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
+  border: 0;
+  font-size: 13px;
+  width: 100%;
+`;
+
 function Select({ isLabelHidden = false, isLight = false, label, onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
@@ -4846,7 +4857,7 @@ function TextInput({ isLabelHidden = false, isLight = false, label, onChange, ..
         const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { "$isLight": isLight, id: originalProps.name, onChange: handleChange, ...originalProps }, key)] }));
+    return (jsxs(Field$2, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { "$isLight": isLight, id: originalProps.name, onChange: handleChange, type: "text", ...originalProps }, key)] }));
 }
 const StyledInput = styled(Input) `
   background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -4912,6 +4923,13 @@ function FormikMultiRadio({ name, ...originalProps }) {
     return jsx(MultiRadio, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
 }
 
+function FormikNumberInput({ name, ...originalProps }) {
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
+    return jsx(NumberInput, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
+}
+
 function FormikSelect({ name, ...originalProps }) {
     const [field, , helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4933,5 +4951,5 @@ function FormikTextInput({ name, ...originalProps }) {
     return jsx(TextInput, { defaultValue: defaultValue, name: name, onChange: helpers.setValue, ...originalProps });
 }
 
-export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, Select, Size, THEME, Tag$1 as Tag, TagGroup, TextInput, Textarea, ThemeProvider };
+export { Accent, AutoComplete, Button, Checkbox, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikAutoComplete, FormikCheckbox, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NumberInput, Select, Size, THEME, Tag$1 as Tag, TagGroup, TextInput, Textarea, ThemeProvider };
 //# sourceMappingURL=index.js.map