cozy-sharing 30.2.2 → 30.3.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [30.3.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@30.2.2...cozy-sharing@30.3.0) (2026-04-23)
+
+### Features
+
+- **cozy-sharing:** Auto-scroll highlighted suggestion into view ([8a367f7](https://github.com/cozy/cozy-libs/commit/8a367f73e36c9cce98cd492845faaf04ec4d1771))
+
 ## [30.2.2](https://github.com/cozy/cozy-libs/compare/cozy-sharing@30.2.1...cozy-sharing@30.2.2) (2026-04-22)
 
 **Note:** Version bump only for package cozy-sharing

package/dist/components/ShareAutosuggest.js

@@ -53,6 +53,7 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
       setLoadingDisplayed = _useState8[1];
 
   var autosuggestRef = useRef(null);
+  var containerRef = useRef(null);
 
   var computeSuggestions = function computeSuggestions(value) {
     var inputValue = value.trim().toLowerCase();
@@ -151,6 +152,19 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
     autosuggestRef === null || autosuggestRef === void 0 || (_autosuggestRef$curre2 = autosuggestRef.current) === null || _autosuggestRef$curre2 === void 0 || (_autosuggestRef$curre2 = _autosuggestRef$curre2.input) === null || _autosuggestRef$curre2 === void 0 || _autosuggestRef$curre2.focus();
   };
 
+  var onSuggestionHighlighted = function onSuggestionHighlighted() {
+    requestAnimationFrame(function () {
+      if (!containerRef.current) return;
+      var highlighted = containerRef.current.querySelector('[aria-selected="true"]');
+
+      if (highlighted) {
+        highlighted.scrollIntoView({
+          block: 'nearest'
+        });
+      }
+    });
+  };
+
   var renderInput = function renderInput(inputProps) {
     return /*#__PURE__*/React.createElement("div", {
       className: styles['recipientsContainer']
@@ -186,7 +200,9 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
     });
   };
 
-  return /*#__PURE__*/React.createElement(Autosuggest, {
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(Autosuggest, {
     ref: autosuggestRef,
     theme: styles,
     suggestions: suggestions.slice(0, 20),
@@ -195,6 +211,7 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
     },
     onSuggestionsFetchRequested: onSuggestionsFetchRequested,
     onSuggestionsClearRequested: onSuggestionsClearRequested,
+    onSuggestionHighlighted: onSuggestionHighlighted,
     renderSuggestion: renderSuggestion,
     renderInputComponent: renderInput,
     highlightFirstSuggestion: true,
@@ -209,7 +226,7 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
       className: styles['suggestionInput'],
       disabled: disabled
     }
-  });
+  }));
 };
 
 ShareAutocomplete.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "30.2.2",
+  "version": "30.3.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -84,5 +84,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "54d377d08003a9d2eb2bd96f9eeb87d27637d841"
+  "gitHead": "8b1c0aece9584d82862592b6ab6e5579fa30be19"
 }

package/src/components/ShareAutosuggest.jsx

@@ -33,6 +33,7 @@ const ShareAutocomplete = ({
   const [isLoadingDisplayed, setLoadingDisplayed] = useState(false)
 
   const autosuggestRef = useRef(null)
+  const containerRef = useRef(null)
 
   const computeSuggestions = value => {
     const inputValue = value.trim().toLowerCase()
@@ -138,6 +139,18 @@ const ShareAutocomplete = ({
     autosuggestRef?.current?.input?.focus()
   }
 
+  const onSuggestionHighlighted = () => {
+    requestAnimationFrame(() => {
+      if (!containerRef.current) return
+      const highlighted = containerRef.current.querySelector(
+        '[aria-selected="true"]'
+      )
+      if (highlighted) {
+        highlighted.scrollIntoView({ block: 'nearest' })
+      }
+    })
+  }
+
   const renderInput = inputProps => (
     <div className={styles['recipientsContainer']}>
       {recipients.map((recipient, idx) => {
@@ -175,28 +188,31 @@ const ShareAutocomplete = ({
   )
 
   return (
-    <Autosuggest
-      ref={autosuggestRef}
-      theme={styles}
-      suggestions={suggestions.slice(0, 20)}
-      getSuggestionValue={contact => contact}
-      onSuggestionsFetchRequested={onSuggestionsFetchRequested}
-      onSuggestionsClearRequested={onSuggestionsClearRequested}
-      renderSuggestion={renderSuggestion}
-      renderInputComponent={renderInput}
-      highlightFirstSuggestion
-      inputProps={{
-        onFocus: onAutosuggestFocus,
-        onChange: onAutosuggestChange,
-        onPaste: onAutosuggestPaste,
-        onBlur: onAutosuggestBlur,
-        value: inputValue,
-        type: 'email',
-        placeholder,
-        className: styles['suggestionInput'],
-        disabled
-      }}
-    />
+    <div ref={containerRef}>
+      <Autosuggest
+        ref={autosuggestRef}
+        theme={styles}
+        suggestions={suggestions.slice(0, 20)}
+        getSuggestionValue={contact => contact}
+        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+        onSuggestionsClearRequested={onSuggestionsClearRequested}
+        onSuggestionHighlighted={onSuggestionHighlighted}
+        renderSuggestion={renderSuggestion}
+        renderInputComponent={renderInput}
+        highlightFirstSuggestion
+        inputProps={{
+          onFocus: onAutosuggestFocus,
+          onChange: onAutosuggestChange,
+          onPaste: onAutosuggestPaste,
+          onBlur: onAutosuggestBlur,
+          value: inputValue,
+          type: 'email',
+          placeholder,
+          className: styles['suggestionInput'],
+          disabled
+        }}
+      />
+    </div>
   )
 }