kelt-ui-kit-react 2.1.2 → 2.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": false,
   "repository": {
     "type": "git",

package/src/select/Select.tsx

@@ -5,6 +5,9 @@ import { OverlayPanel, PositionOverlay } from "../overlayPanel/OverlayPanel";
 import "./select.css";
 import { SelectOptionInterface } from "./selectOption.interface";
 
+// Nombre d'options rendues à l'ouverture puis à chaque fin de scroll
+const OPTIONS_PAGE_SIZE = 50;
+
 export interface SelectProps {
   id?: string;
   label?: string;
@@ -55,6 +58,7 @@ export const Select = ({
   const hasAutoOpened = useRef(false);
   const optionsListRef = useRef<HTMLDivElement | null>(null);
   const [search, setSearch] = useState("");
+  const [visibleCount, setVisibleCount] = useState(OPTIONS_PAGE_SIZE);
 
   useEffect(() => {
     if (!showOverlay) setSearch("");
@@ -68,6 +72,11 @@ export const Select = ({
     return options.filter((option) => normalize(option.label).includes(term));
   }, [options, search, searchable]);
 
+  const optionsByValue = useMemo(
+    () => new Map(options.map((option) => [option.value, option])),
+    [options],
+  );
+
   useEffect(() => {
     if (!showOverlay) return;
     const timer = setTimeout(() => {
@@ -95,15 +104,38 @@ export const Select = ({
         : [];
   const hasSelection = selectedValues.some((v) => v !== "");
 
+  // Rendu progressif : on repart d'une page à chaque ouverture ou recherche,
+  // en allant au moins jusqu'à l'option sélectionnée en sélection simple
+  useEffect(() => {
+    if (!showOverlay) return;
+    const selectedIndex = multiple
+      ? -1
+      : filteredOptions.findIndex((option) => option.value === selectedValues[0]);
+    setVisibleCount(Math.max(OPTIONS_PAGE_SIZE, selectedIndex + 1));
+    optionsListRef.current?.scrollTo({ top: 0 });
+  }, [showOverlay, search]);
+
+  const visibleOptions = filteredOptions.slice(0, visibleCount);
+
+  const handleOptionsScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (
+      visibleCount < filteredOptions.length &&
+      scrollHeight - scrollTop - clientHeight < 100
+    ) {
+      setVisibleCount((count) => count + OPTIONS_PAGE_SIZE);
+    }
+  };
+
   const getDisplayValue = () => {
     if (selectedValues.length === 0) return placeholder || "";
     if (multiple) {
       const labels = selectedValues
-        .map((v) => options.find((opt) => opt.value === v)?.label)
+        .map((v) => optionsByValue.get(v)?.label)
         .filter((l): l is string => !!l);
       return labels.join(", ");
     }
-    const selected = options.find((opt) => opt.value === selectedValues[0]);
+    const selected = optionsByValue.get(selectedValues[0]);
     return selected?.label || "";
   };
 
@@ -200,11 +232,15 @@ export const Select = ({
                   />
                 </div>
               )}
-              <div className="select-overlay-options" ref={optionsListRef}>
+              <div
+                className="select-overlay-options"
+                ref={optionsListRef}
+                onScroll={handleOptionsScroll}
+              >
                 {searchable && filteredOptions.length === 0 && (
                   <div className="select-overlay-empty">Aucun résultat</div>
                 )}
-                {filteredOptions.map((option) => (
+                {visibleOptions.map((option) => (
                   <div
                     key={option.value}
                     aria-valuetext={option.label}