@mtes-mct/monitor-ui 6.3.3 → 6.4.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [6.4.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.3.3...v6.4.0) (2023-05-25)
+
+
+### Bug Fixes
+
+* **formiks:** delete setTouched in handleChange and delete touched condition for error ([17a9e24](https://github.com/MTES-MCT/monitor-ui/commit/17a9e249a74352f0696a9cc2146aa4e88422a542))
+
+
+### Features
+
+* **fields:** add customSearch prop to Search ([53e993a](https://github.com/MTES-MCT/monitor-ui/commit/53e993ac1cd8c218a3bddbd5cef0d36778589166))
+
+## [6.3.3](https://github.com/MTES-MCT/monitor-ui/compare/v6.3.2...v6.3.3) (2023-05-25)
+
+
+### Bug Fixes
+
+* **fields:** control options internally with customSearch in Select & MultiSelect ([251ad18](https://github.com/MTES-MCT/monitor-ui/commit/251ad188dbc388c6efcaa1e2bf0afdd0ba343a65))
+* **fields:** reset controlled rsuite data on change with customSearch in MultiSelect ([b96b6d5](https://github.com/MTES-MCT/monitor-ui/commit/b96b6d5eb0e3e00170449ec5df0615ee7c6cea96))
+
 ## [6.3.2](https://github.com/MTES-MCT/monitor-ui/compare/v6.3.1...v6.3.2) (2023-05-25)
 
 

package/fields/Search.d.ts

@@ -1,4 +1,5 @@
 import { type ElementType } from 'react';
+import type { CustomSearch } from '../libs/CustomSearch';
 import type { Option, OptionValueType } from '../types';
 import type { AutoCompleteProps as RsuiteAutoCompleteProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
@@ -6,6 +7,9 @@ export type SearchProps<OptionValue extends OptionValueType = string> = Omit<Rsu
     MenuItem?: ElementType | undefined;
     /** Used to pass something else than `window.document` as a base container to attach global events listeners. */
     baseContainer?: Document | HTMLDivElement | null | undefined;
+    customSearch?: CustomSearch<Option<OptionValue>> | undefined;
+    /** Minimum search query length required to trigger custom search filtering. */
+    customSearchMinQueryLength?: number | undefined;
     error?: string | undefined;
     isErrorMessageHidden?: boolean | undefined;
     isLabelHidden?: boolean | undefined;
@@ -19,4 +23,4 @@ export type SearchProps<OptionValue extends OptionValueType = string> = Omit<Rsu
     options?: Option<OptionValue>[];
     value?: OptionValue | undefined;
 };
-export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, className, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconVisible, label, MenuItem, onChange, onQuery, options, optionValueKey, value, ...originalProps }: SearchProps<OptionValue>): JSX.Element;
+export declare function Search<OptionValue extends OptionValueType = string>({ baseContainer, className, customSearch, customSearchMinQueryLength, error, isErrorMessageHidden, isLabelHidden, isLight, isSearchIconVisible, label, MenuItem, onChange, onQuery, options, optionValueKey, value, ...originalProps }: SearchProps<OptionValue>): JSX.Element;

package/index.js

@@ -20739,9 +20739,11 @@ function normalizeString(text) {
     return cleanText.length > 0 ? cleanText : undefined;
 }
 
-function Search({ baseContainer, className, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, value, ...originalProps }) {
+function Search({ baseContainer, className, customSearch = undefined, customSearchMinQueryLength = 1, error, isErrorMessageHidden = false, isLabelHidden, isLight = false, isSearchIconVisible = true, label, MenuItem, onChange, onQuery, options = [], optionValueKey, value, ...originalProps }) {
     // eslint-disable-next-line no-null/no-null
     const boxRef = useRef(null);
+    /** Instance of `CustomSearch` */
+    const customSearchRef = useRef(customSearch);
     const queryRef = useRef(undefined);
     const data = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const [isOpen, setIsOpen] = useState(false);
@@ -20752,6 +20754,8 @@ function Search({ baseContainer, className, error, isErrorMessageHidden = false,
     const key = useKey([value, originalProps.disabled, originalProps.name]);
     const rsuiteValue = useMemo(() => getRsuiteValueFromOptionValue(value, optionValueKey), [value, optionValueKey]);
     const [inputValue, setInputValue] = useState(rsuiteValue);
+    // Only used when `customSearch` prop is set
+    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? [] : undefined);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -20763,6 +20767,12 @@ function Search({ baseContainer, className, error, isErrorMessageHidden = false,
         if (!(typeof nextQuery === 'string')) {
             return;
         }
+        if (customSearch && customSearchRef.current) {
+            const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength
+                ? getRsuiteDataFromOptions(customSearchRef.current.find(nextQuery), optionValueKey)
+                : [];
+            setControlledRsuiteData(nextControlledRsuiteData);
+        }
         queryRef.current = normalizeString(nextQuery);
         if (event.type === 'change') {
             setInputValue(nextQuery);
@@ -20777,7 +20787,7 @@ function Search({ baseContainer, className, error, isErrorMessageHidden = false,
         if (onQuery) {
             onQuery(queryRef.current);
         }
-    }, [onChange, onQuery]);
+    }, [customSearch, onChange, onQuery, customSearchMinQueryLength, optionValueKey]);
     const handleSelect = useCallback((_, item) => {
         if (onChange) {
             onChange(item.optionValue);
@@ -20789,7 +20799,13 @@ function Search({ baseContainer, className, error, isErrorMessageHidden = false,
     useEffect(() => {
         forceUpdate();
     }, [forceUpdate]);
-    return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, data: data, 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, isSearchIconVisible: isSearchIconVisible, onClick: clean, size: Size.SMALL }), isSearchIconVisible && jsx(Separator, { children: "|" })] })), isSearchIconVisible && jsx(StyledIconSearch, { color: THEME.color.slateGray, size: 20 })] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$c, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current, 
+                        // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+                        // when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
+                        data: controlledRsuiteData || data, 
+                        // When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
+                        // that's why we send this "always true" filter to disable Rsuite SelectPicker internal search filtering
+                        filterBy: (customSearch ? () => true : undefined), 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, isSearchIconVisible: isSearchIconVisible, onClick: clean, size: Size.SMALL }), isSearchIconVisible && jsx(Separator, { children: "|" })] })), isSearchIconVisible && jsx(StyledIconSearch, { color: THEME.color.slateGray, size: 20 })] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledCloseButton = styled(IconButton) `
   cursor: pointer;
@@ -20812,7 +20828,7 @@ const StyledAutoComplete = styled(AutoComplete) `
   font-size: 13px;
   flex-grow: 1;
 
-  > input {
+  .rs-input {
     background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
     border-width: 0 0 1px;
     border-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
@@ -20824,7 +20840,11 @@ const StyledAutoComplete = styled(AutoComplete) `
 
     :focus {
       outline: unset;
-      border-color: ${p => p.theme.color.blueGray['100']};
+      border-color: transparent;
+    }
+    :hover {
+      outline: unset;
+      border-color: transparent;
     }
   }
 `;
@@ -35165,20 +35185,17 @@ const InputBox = styled.div `
 
 function FormikSearch({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Search, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Search, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikCheckbox({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChange = useMemo(() => helpers.setValue, []);
@@ -35186,56 +35203,49 @@ function FormikCheckbox({ name, ...originalProps }) {
     // A checkbox must initialize its Formik value on mount:
     // it wouldn't make sense to keep it as `undefined` since `undefined` means `false` in the case of a checkbox
     useEffect(() => {
-        helpers.setTouched(true);
         helpers.setValue(isChecked);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Checkbox, { checked: isChecked, error: error, name: name, onChange: handleChange, ...originalProps });
+    return jsx(Checkbox, { checked: isChecked, error: meta.error, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikCoordinatesInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const defaultValue = useMemo(() => field.value, []);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(CoordinatesInput, { defaultValue: defaultValue, error: error, onChange: handleChange, ...originalProps });
+    return jsx(CoordinatesInput, { defaultValue: defaultValue, error: meta.error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDatePicker = DatePicker;
 function FormikDatePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(UntypedDatePicker, { defaultValue: field.value, error: error, onChange: handleChange, ...originalProps });
+    return jsx(UntypedDatePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps });
 }
 
 const UntypedDateRangePicker = DateRangePicker;
 function FormikDateRangePicker({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(UntypedDateRangePicker, { defaultValue: field.value, error: error, onChange: handleChange, ...originalProps });
+    return (jsx(UntypedDateRangePicker, { defaultValue: field.value, error: meta.error, onChange: handleChange, ...originalProps }));
 }
 
 function FormikEffect({ onChange }) {
@@ -35248,93 +35258,79 @@ function FormikEffect({ onChange }) {
 
 function FormikMultiCheckbox({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(MultiCheckbox, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiCheckbox, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikMultiSelect({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(MultiSelect, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiSelect, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikMultiRadio({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(MultiRadio, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(MultiRadio, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikNumberInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(NumberInput, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(NumberInput, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikSelect({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Select, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Select, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikTextarea({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(Textarea, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(Textarea, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function FormikTextInput({ name, ...originalProps }) {
     const [field, meta, helpers] = useField(name);
-    const error = meta.touched ? meta.error : undefined;
     const handleChange = useMemo(() => value => {
-        helpers.setTouched(true);
         helpers.setValue(value);
     }, 
     // We don't want to trigger infinite re-rendering since `helpers.setValue` changes after each rendering
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return jsx(TextInput, { error: error, name: name, onChange: handleChange, value: field.value, ...originalProps });
+    return jsx(TextInput, { error: meta.error, name: name, onChange: handleChange, value: field.value, ...originalProps });
 }
 
 function useFieldControl(value, onChange, defaultValueWhenUndefined) {