@mtes-mct/monitor-ui 6.3.2 → 6.3.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [6.3.2](https://github.com/MTES-MCT/monitor-ui/compare/v6.3.1...v6.3.2) (2023-05-25)
+
+
+### Bug Fixes
+
+* **libs:** make CustomSearch fully functional ([931dda0](https://github.com/MTES-MCT/monitor-ui/commit/931dda03e79ba3710d9ae0d14a45305e0c57b819))
+
 ## [6.3.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.3.0...v6.3.1) (2023-05-24)
 
 

package/fields/MultiSelect.d.ts

@@ -6,6 +6,8 @@ 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;
     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;
@@ -18,4 +20,4 @@ export type MultiSelectProps<OptionValue extends OptionValueType = string> = Omi
     options: Option<OptionValue>[];
     value?: OptionValue[] | undefined;
 };
-export declare function MultiSelect<OptionValue extends OptionValueType = string>({ baseContainer, customSearch, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: MultiSelectProps<OptionValue>): JSX.Element;
+export declare function MultiSelect<OptionValue extends OptionValueType = string>({ baseContainer, customSearch, customSearchMinQueryLength, disabled, error, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: MultiSelectProps<OptionValue>): JSX.Element;

package/fields/Select.d.ts

@@ -6,6 +6,8 @@ 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;
     customSearch?: CustomSearch<Option<OptionValue>> | undefined;
+    /** Minimum search query length required to trigger custom search filtering. */
+    customSearchMinQueryLength?: number | undefined;
     error?: string | undefined;
     isCleanable?: boolean | undefined;
     isErrorMessageHidden?: boolean | undefined;
@@ -19,4 +21,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, customSearch, disabled, error, isCleanable, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: SelectProps<OptionValue>): JSX.Element;
+export declare function Select<OptionValue extends OptionValueType = string>({ baseContainer, customSearch, customSearchMinQueryLength, disabled, error, isCleanable, isErrorMessageHidden, isLabelHidden, isLight, isUndefinedWhenDisabled, label, onChange, options, optionValueKey, searchable, value, ...originalProps }: SelectProps<OptionValue>): JSX.Element;

package/index.js

@@ -25681,47 +25681,19 @@ class CustomSearch {
     }
 }
 
-function MultiSelect({ baseContainer, customSearch, disabled = false, error, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
+function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength = 1, 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);
-    /**
-     * Current list of option labels found by `CustomSearch.find()` for the current select search query
-     *
-     * @description
-     * `undefined` means that search query is empty, thus all labels should be a match.
-     */
-    const customSearchLabelMatchesRef = useRef(undefined);
     /** Instance of `CustomSearch` */
     const customSearchRef = useRef(customSearch);
-    /** Last search query (only used when `customSearch` prop is set) */
-    const previousSearchQueryRef = useRef('');
-    const [isOpen, setIsOpen] = useState(false);
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const rsuiteData = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([disabled, originalProps.name, value]);
     const selectedRsuiteValue = useMemo(() => (value || []).map(valueItem => getRsuiteValueFromOptionValue(valueItem, optionValueKey)), [optionValueKey, value]);
-    const searchBy = useMemo(() => 
-    // Since this function is called by a `.filter()` in Rsuite,
-    // we first prepare `CustomSearch` results in `handleSearch()` (called each time the search query changes),
-    // and we use the `customSearchLabelMatches` ref-stored results, in the form of option labels,
-    // to check if the current option label is part of these results.
-    // Note that options label are expected to be unique in order for this pattern to work.
-    customSearchRef.current
-        ? (query, _label, item) => {
-            if (!customSearchRef.current) {
-                throw new Error('`customSearchRef.current` is undefined.');
-            }
-            // Since this function will be called xN times, N being the number of options,
-            // we only want to update found option labels once each time the search query changes.
-            if (query !== previousSearchQueryRef.current) {
-                const nextCustomSearchLabelMatches = query.trim().length > 0 ? customSearchRef.current.find(query).map(option => option.label) : undefined;
-                customSearchLabelMatchesRef.current = nextCustomSearchLabelMatches;
-                previousSearchQueryRef.current = query;
-            }
-            return customSearchLabelMatchesRef.current ? customSearchLabelMatchesRef.current.includes(item.label) : true;
-        }
-        : undefined, []);
+    // Only used when `customSearch` prop is set
+    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? rsuiteData : undefined);
+    const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
     const close = useCallback(() => {
         setIsOpen(false);
@@ -25738,8 +25710,18 @@ function MultiSelect({ baseContainer, customSearch, disabled = false, error, isE
         }
         const nextValue = nextOptionRsuiteValues ? getOptionValuesFromRsuiteDataValues(nextOptionRsuiteValues) : [];
         const normalizedNextValue = nextValue.length > 0 ? nextValue : undefined;
+        setControlledRsuiteData(rsuiteData);
         onChange(normalizedNextValue);
-    }, [getOptionValuesFromRsuiteDataValues, onChange]);
+    }, [getOptionValuesFromRsuiteDataValues, onChange, rsuiteData]);
+    const handleSearch = useCallback((nextQuery) => {
+        if (!customSearchRef.current || nextQuery.trim().length < customSearchMinQueryLength) {
+            return;
+        }
+        const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength
+            ? getRsuiteDataFromOptions(customSearchRef.current.find(nextQuery), optionValueKey)
+            : rsuiteData;
+        setControlledRsuiteData(nextControlledRsuiteData);
+    }, [customSearchMinQueryLength, optionValueKey, rsuiteData]);
     const renderMenuItem = useCallback((node) => jsx("span", { title: String(node), children: String(node) }), []);
     const toggle = useCallback((event) => {
         let targetElement = event.target;
@@ -25759,7 +25741,13 @@ function MultiSelect({ baseContainer, customSearch, disabled = false, error, isE
     useEffect(() => {
         forceUpdate();
     }, [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: rsuiteData, disabled: disabled, id: originalProps.name, onChange: handleChange, onClick: toggle, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, searchBy: searchBy, value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+    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, 
+                    // 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 || rsuiteData, disabled: disabled, id: originalProps.name, onChange: handleChange, onClick: toggle, onSearch: handleSearch, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, 
+                    // 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 TagPicker internal search filtering
+                    searchBy: (customSearch ? () => true : undefined), value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const Box$4 = styled.div `
   position: relative;
@@ -34943,48 +34931,20 @@ const StyledFieldset = styled(Fieldset) `
   }
 `;
 
-function Select({ baseContainer, customSearch, disabled = false, error, isCleanable = true, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, options, optionValueKey, searchable = false, value, ...originalProps }) {
+function Select({ baseContainer, customSearch, customSearchMinQueryLength = 1, disabled = false, error, isCleanable = true, 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);
-    /**
-     * Current list of option labels found by `CustomSearch.find()` for the current select search query
-     *
-     * @description
-     * `undefined` means that search query is empty, thus all labels should be a match.
-     */
-    const customSearchLabelMatchesRef = useRef(undefined);
     /** Instance of `CustomSearch` */
     const customSearchRef = useRef(customSearch);
-    /** Last search query (only used when `customSearch` prop is set) */
-    const previousSearchQueryRef = useRef('');
-    const [isOpen, setIsOpen] = useState(false);
     const { forceUpdate } = useForceUpdate();
     const controlledError = useMemo(() => normalizeString(error), [error]);
     const rsuiteData = useMemo(() => getRsuiteDataFromOptions(options, optionValueKey), [options, optionValueKey]);
     const hasError = useMemo(() => Boolean(controlledError), [controlledError]);
     const key = useKey([disabled, originalProps.name, value]);
     const selectedRsuiteValue = useMemo(() => getRsuiteValueFromOptionValue(value, optionValueKey), [value, optionValueKey]);
-    const searchBy = useMemo(() => 
-    // Since this function is called by a `.filter()` in Rsuite,
-    // we first prepare `CustomSearch` results in `handleSearch()` (called each time the search query changes),
-    // and we use the `customSearchLabelMatches` ref-stored results, in the form of option labels,
-    // to check if the current option label is part of these results.
-    // Note that options label are expected to be unique in order for this pattern to work.
-    customSearchRef.current
-        ? (query, _label, item) => {
-            if (!customSearchRef.current) {
-                throw new Error('`customSearchRef.current` is undefined.');
-            }
-            // Since this function will be called xN times, N being the number of options,
-            // we only want to update found option labels once each time the search query changes.
-            if (query !== previousSearchQueryRef.current) {
-                const nextCustomSearchLabelMatches = query.trim().length > 0 ? customSearchRef.current.find(query).map(option => option.label) : undefined;
-                customSearchLabelMatchesRef.current = nextCustomSearchLabelMatches;
-                previousSearchQueryRef.current = query;
-            }
-            return customSearchLabelMatchesRef.current ? customSearchLabelMatchesRef.current.includes(item.label) : true;
-        }
-        : undefined, []);
+    // Only used when `customSearch` prop is set
+    const [controlledRsuiteData, setControlledRsuiteData] = useState(customSearch ? rsuiteData : undefined);
+    const [isOpen, setIsOpen] = useState(false);
     const close = useCallback(() => {
         setIsOpen(false);
     }, []);
@@ -34994,6 +34954,15 @@ function Select({ baseContainer, customSearch, disabled = false, error, isCleana
         }
         onChange(undefined);
     }, [onChange]);
+    const handleSearch = useCallback((nextQuery) => {
+        if (!customSearchRef.current || nextQuery.trim().length < customSearchMinQueryLength) {
+            return;
+        }
+        const nextControlledRsuiteData = nextQuery.trim().length >= customSearchMinQueryLength
+            ? getRsuiteDataFromOptions(customSearchRef.current.find(nextQuery), optionValueKey)
+            : rsuiteData;
+        setControlledRsuiteData(nextControlledRsuiteData);
+    }, [customSearchMinQueryLength, optionValueKey, rsuiteData]);
     const handleSelect = useCallback((_, selectedItem) => {
         close();
         if (onChange) {
@@ -35021,10 +34990,16 @@ function Select({ baseContainer, customSearch, disabled = false, error, isCleana
     useEffect(() => {
         forceUpdate();
     }, [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, cleanable: isCleanable, container: boxRef.current, data: rsuiteData, disabled: disabled, id: originalProps.name, onClean: handleClean, 
+    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, cleanable: isCleanable, 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 || rsuiteData, disabled: disabled, id: originalProps.name, onClean: handleClean, onSearch: handleSearch, 
                     // `as any` because we customized `ItemDataType` type by adding `optionValue`,
                     // which generates an optional vs required type conflict
-                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, searchBy: searchBy, value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
+                    onSelect: handleSelect, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable, 
+                    // 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
+                    searchBy: (customSearch ? () => true : undefined), value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
 }
 const StyledSelectPicker = styled(SelectPicker) `
   > .rs-picker-toggle {