@mtes-mct/monitor-ui 2.14.1 → 2.14.3

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [2.14.2](https://github.com/MTES-MCT/monitor-ui/compare/v2.14.1...v2.14.2) (2023-02-08)
+
+
+### Bug Fixes
+
+* **elements:** make secondary Button background transparent ([7f1e490](https://github.com/MTES-MCT/monitor-ui/commit/7f1e4909d1a075a90de683c603dfc1b7dd586010))
+* **fields:** make MultiZoneEditor row background white when isLight ([96f7a00](https://github.com/MTES-MCT/monitor-ui/commit/96f7a00bd7eab7755de13e8202aa64367e8d7b18))
+* **formiks:** remove touched condition for errors ([91ac524](https://github.com/MTES-MCT/monitor-ui/commit/91ac524d0916390bc5308083390264d018dad980))
+
+## [2.14.1](https://github.com/MTES-MCT/monitor-ui/compare/v2.14.0...v2.14.1) (2023-02-08)
+
+
+### Bug Fixes
+
+* **fields:** remove value setting to undefined on destroy ([71f409b](https://github.com/MTES-MCT/monitor-ui/commit/71f409b699df131a70454204b87b0e563798cac9))
+
 # [2.14.0](https://github.com/MTES-MCT/monitor-ui/compare/v2.13.2...v2.14.0) (2023-02-07)
 
 

package/index.js

@@ -2132,7 +2132,7 @@ const PrimaryButton = styled.button `
   }
 `;
 const SecondaryButton = styled.button `
-  background-color: ${p => p.theme.color.white};
+  background-color: transparent;
   border: 1px solid ${p => p.theme.color.charcoal};
   color: ${p => p.theme.color.charcoal};
 
@@ -2152,7 +2152,7 @@ const SecondaryButton = styled.button `
 
   :disabled,
   &._disabled {
-    background-color: ${p => p.theme.color.white};
+    background-color: transparent;
     border: 1px solid ${p => p.theme.color.lightGray};
     color: ${p => p.theme.color.lightGray};
   }
@@ -3278,7 +3278,7 @@ const FieldError = styled.p `
   font-size: 13px;
   font-weight: 700;
   line-height: 1.3846;
-  margin-top: 4px;
+  margin: 4px 0 0 0;
 `;
 
 const useClickOutsideEffect = (zoneRefOrzoneRefs, action, baseContainer) => {
@@ -5465,9 +5465,9 @@ disabled = false, error, initialZone, isLabelHidden = false, isLight = false, la
         setZones(defaultValue);
     }, [defaultValue]);
     useFieldUndefineEffect(disabled, onChange, handleDisable);
-    return (jsxs(Fieldset, { disabled: disabled, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(Button, { accent: Accent.SECONDARY, disabled: disabled, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
+    return (jsxs(Fieldset, { disabled: disabled, isLegendHidden: isLabelHidden, legend: label, children: [jsx(Button, { accent: Accent.SECONDARY, disabled: disabled, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
                 // eslint-disable-next-line react/no-array-index-key
-                jsxs(Row, { children: [jsxs(ZoneWrapper, { children: [zone[labelPropName], jsxs(Link, { onClick: () => centerZone(zone), children: [jsx(SelectRectangle, {}), jsx("span", { children: "Centrer sur la carte" })] })] }), jsx(IconButton, { accent: Accent.SECONDARY, Icon: Edit, onClick: () => editZone(index, zone) }), jsx(IconButton, { accent: Accent.SECONDARY, "aria-label": "Supprimer cette zone", Icon: Delete, onClick: () => deleteZone(index) })] }, `zone-${index}`))) }), hasError && jsx(FieldError, { children: controlledError })] }));
+                jsxs(Row, { children: [jsxs(ZoneBox, { "$isLight": isLight, children: [zone[labelPropName], jsxs(Link, { onClick: () => centerZone(zone), children: [jsx(SelectRectangle, {}), jsx("span", { children: "Centrer sur la carte" })] })] }), jsx(IconButton, { accent: Accent.SECONDARY, Icon: Edit, onClick: () => editZone(index, zone) }), jsx(IconButton, { accent: Accent.SECONDARY, "aria-label": "Supprimer cette zone", Icon: Delete, onClick: () => deleteZone(index) })] }, `zone-${index}`))) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Row = styled.div `
   align-items: center;
@@ -5478,8 +5478,8 @@ const Row = styled.div `
     margin: 0 0 0 8px;
   }
 `;
-const ZoneWrapper = styled.div `
-  background-color: ${p => p.theme.color.gainsboro};
+const ZoneBox = styled.div `
+  background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
   display: flex;
   flex-grow: 1;
   font-size: 13px;
@@ -5671,23 +5671,21 @@ function FormikAutoComplete({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
     if (!defaultValue) {
         return jsx(AutoComplete, { name: name, onChange: helpers.setValue, ...originalProps });
     }
-    return (jsx(AutoComplete, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps }));
+    return (jsx(AutoComplete, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikCheckbox({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const isDefaultChecked = useMemo(() => Boolean(field.value), []);
-    return (jsx(Checkbox, { defaultChecked: isDefaultChecked, error: error, name: name, onChange: handleChange, ...originalProps }));
+    return (jsx(Checkbox, { defaultChecked: isDefaultChecked, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 const UntypedDatePicker = DatePicker;
@@ -5695,10 +5693,9 @@ function FormikDatePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(UntypedDatePicker, { defaultValue: defaultValue, error: error, onChange: handleChange, ...originalProps });
+    return jsx(UntypedDatePicker, { defaultValue: defaultValue, error: meta.error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDateRangePicker = DateRangePicker;
@@ -5706,10 +5703,9 @@ function FormikDateRangePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(UntypedDateRangePicker, { defaultValue: defaultValue, error: error, onChange: handleChange, ...originalProps });
+    return (jsx(UntypedDateRangePicker, { defaultValue: defaultValue, error: meta.error, onChange: handleChange, ...originalProps }));
 }
 
 function FormikEffect({ onChange }) {
@@ -5724,70 +5720,63 @@ function FormikMultiCheckbox({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return (jsx(MultiCheckbox, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps }));
+    return (jsx(MultiCheckbox, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikMultiSelect({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return (jsx(MultiSelect, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps }));
+    return (jsx(MultiSelect, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikMultiRadio({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(MultiRadio, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps });
+    return (jsx(MultiRadio, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikNumberInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return (jsx(NumberInput, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps }));
+    return (jsx(NumberInput, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikSelect({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(Select, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps });
+    return (jsx(Select, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikTextarea({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(Textarea, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps });
+    return (jsx(Textarea, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 function FormikTextInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = useMemo(() => (meta.initialTouched ? meta.error : undefined), [meta.error, meta.initialTouched]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
-    return jsx(TextInput, { defaultValue: defaultValue, error: error, name: name, onChange: handleChange, ...originalProps });
+    return (jsx(TextInput, { defaultValue: defaultValue, error: meta.error, name: name, onChange: handleChange, ...originalProps }));
 }
 
 const noop = () => { };