@mtes-mct/monitor-ui 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Features
+
+* **elements:** add TagGroup ([#139](https://github.com/MTES-MCT/monitor-ui/issues/139)) ([f12aadb](https://github.com/MTES-MCT/monitor-ui/commit/f12aadb9bdbc684116e19f7c867483d6dc69955a))
+
 ## [2.1.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.1.0...v2.1.1) (2022-12-15)
 
 

package/fields/NumberInput.d.ts

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

package/fields/TextInput.d.ts

@@ -1,6 +1,6 @@
 import type { InputProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-export type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
+export type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'type' | 'value'> & {
     defaultValue?: string;
     isLabelHidden?: boolean;
     isLight?: boolean;

package/formiks/FormikNumberInput.d.ts

@@ -0,0 +1,3 @@
+import type { NumberInputProps } from '../fields/NumberInput';
+export type FormikNumberInputProps = Omit<NumberInputProps, 'defaultValue' | 'onChange'>;
+export declare function FormikNumberInput({ name, ...originalProps }: FormikNumberInputProps): JSX.Element;

package/index.d.ts

@@ -19,6 +19,7 @@ export { MultiCheckbox } from './fields/MultiCheckbox';
 export { MultiSelect } from './fields/MultiSelect';
 export { MultiRadio } from './fields/MultiRadio';
 export { MultiZoneEditor } from './fields/MultiZoneEditor';
+export { NumberInput } from './fields/NumberInput';
 export { Select } from './fields/Select';
 export { Textarea } from './fields/Textarea';
 export { TextInput } from './fields/TextInput';
@@ -30,6 +31,7 @@ export { FormikEffect } from './formiks/FormikEffect';
 export { FormikMultiCheckbox } from './formiks/FormikMultiCheckbox';
 export { FormikMultiSelect } from './formiks/FormikMultiSelect';
 export { FormikMultiRadio } from './formiks/FormikMultiRadio';
+export { FormikNumberInput } from './formiks/FormikNumberInput';
 export { FormikSelect } from './formiks/FormikSelect';
 export { FormikTextarea } from './formiks/FormikTextarea';
 export { FormikTextInput } from './formiks/FormikTextInput';
@@ -53,6 +55,7 @@ export type { MultiCheckboxProps } from './fields/MultiCheckbox';
 export type { MultiSelectProps } from './fields/MultiSelect';
 export type { MultiRadioProps } from './fields/MultiRadio';
 export type { MultiZoneEditorProps } from './fields/MultiZoneEditor';
+export type { NumberInputProps } from './fields/NumberInput';
 export type { SelectProps } from './fields/Select';
 export type { TextareaProps } from './fields/Textarea';
 export type { TextInputProps } from './fields/TextInput';
@@ -64,6 +67,7 @@ export type { FormikEffectProps } from './formiks/FormikEffect';
 export type { FormikMultiCheckboxProps } from './formiks/FormikMultiCheckbox';
 export type { FormikMultiSelectProps } from './formiks/FormikMultiSelect';
 export type { FormikMultiRadioProps } from './formiks/FormikMultiRadio';
+export type { FormikNumberInputProps } from './formiks/FormikNumberInput';
 export type { FormikSelectProps } from './formiks/FormikSelect';
 export type { FormikTextareaProps } from './formiks/FormikTextarea';
 export type { FormikTextInputProps } from './formiks/FormikTextInput';

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;
@@ -1709,11 +1709,10 @@ const TertiaryTag = styled(Box$7) `
 `;
 
 const TagGroup = styled.div `
+  align-items: center;
   display: flex;
-
-  > span:not(:first-child) {
-    margin-left: 8px;
-  }
+  flex-wrap: wrap;
+  gap: 8px;
 `;
 
 // eslint-lint-disable-next-line @typescript-eslint/naming-convention
@@ -2889,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;
@@ -3029,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, "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$1, { 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$1, { 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 })] }));
 }
 const DateInput = forwardRef(DateInputWithRef);
 const Box$6 = styled.span `
@@ -3852,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, "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$1, { 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 }))] }));
 }
 const TimeInput = forwardRef(TimeInputWithRef);
 const Box$3 = styled.span `
@@ -4794,6 +4793,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 }) {
@@ -4847,7 +4866,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)};
@@ -4913,6 +4932,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
@@ -4934,5 +4960,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