@expofp/ui 3.39.0 → 3.39.1

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Autocomplete.scss';
 import classNames from 'classnames';
-import { useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import { ResizeObserver } from 'resize-observer';
 import useOnClickOutside from '../../shared/hooks/useOnClickOutside';
@@ -18,6 +18,9 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
     const refAutocomplete = useRef(null);
     const refSearchInput = useRef(null);
     const refOptions = useRef(null);
+    const virtuosoRef = useRef(null);
+    // State, not a ref: the list can only mount once its scroll parent exists.
+    const [scrollElement, setScrollElement] = useState(null);
     const blurTimeoutRef = useRef(null);
     const listboxId = useId();
     const getOptionId = (index) => `${listboxId}-option-${index}`;
@@ -109,10 +112,10 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
         return () => observer.disconnect();
     }, [inline, showOptionsDropdown, scrollContainer]);
     useEffect(() => {
-        if (focusOptionIndex === null || !refOptions.current)
+        if (focusOptionIndex === null)
             return;
-        const items = refOptions.current.querySelectorAll('li');
-        items[focusOptionIndex]?.scrollIntoView({ block: 'nearest' });
+        // Through the list, not the DOM: a focused option far down is not rendered until scrolled to.
+        virtuosoRef.current?.scrollIntoView({ index: focusOptionIndex });
     }, [focusOptionIndex]);
     useOnClickOutside([refAutocomplete, refOptions], () => setShowOptionsDropdown(false), showOptionsDropdown);
     useEffect(() => {
@@ -215,12 +218,17 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
         if (searchText && filteredOptions.length === 0) {
             return _jsx("div", { className: "efp-autocomplete__empty", children: noOptionsLabel });
         }
-        return (_jsx("ul", { role: "listbox", id: listboxId, children: currentOptions.map((option, index) => {
-                const isFocused = index === focusOptionIndex;
-                const isActive = filteredOptions.length === 0 && index === activeOptionIndex;
-                const className = isFocused ? 'is-focus' : isActive ? 'is-active' : undefined;
-                return (_jsx("li", { id: getOptionId(index), role: "option", "aria-selected": isActive, className: className, onMouseDown: (e) => e.preventDefault(), onClick: () => selectOption(option), children: getOptionLabel(option) }, getOptionKey(option)));
-            }) }));
+        // Virtualized: a plan's booth list runs to thousands of options, and rendering, laying out and
+        // compositing every one of them froze the frame the dropdown opened in for over half a second.
+        if (!scrollElement)
+            return null;
+        const context = {
+            listboxId,
+            focusIndex: focusOptionIndex,
+            activeIndex: filteredOptions.length === 0 ? activeOptionIndex : null,
+            onSelect: (index) => selectOption(currentOptions[index]),
+        };
+        return (_jsx(Suspense, { fallback: null, children: _jsx(LazyVirtuoso, { ref: virtuosoRef, customScrollParent: scrollElement, data: currentOptions, context: context, computeItemKey: (_index, option) => getOptionKey(option), itemContent: (_index, option) => getOptionLabel(option), components: { List: OptionList, Item: OptionItem }, increaseViewportBy: 200 }) }));
     };
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: refAutocomplete, "data-no-drag": true, className: classNames('efp-autocomplete', {
                     'is-open': showOptionsDropdown,
@@ -230,7 +238,7 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
                                     : undefined, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, value: displayValue, placeholder: placeholder, ref: refSearchInput }), showClear && showOptionsDropdown && displayValue && (_jsx("button", { type: "button", className: "efp-autocomplete__clear", "aria-label": clearLabel, onMouseDown: (e) => {
                                     e.preventDefault();
                                     clearValue(true);
-                                } }))] }), showOptionsDropdown && inline && (_jsx("div", { ref: refOptions, "data-no-drag": true, className: "efp-autocomplete-options efp-autocomplete-options--inline", style: inlineMaxHeight !== null ? { maxHeight: `${inlineMaxHeight}px` } : undefined, children: _jsx("div", { className: "efp-autocomplete-options__scroll", children: renderOptions() }) }))] }), showOptionsDropdown &&
+                                } }))] }), showOptionsDropdown && inline && (_jsx("div", { ref: refOptions, "data-no-drag": true, className: "efp-autocomplete-options efp-autocomplete-options--inline", style: inlineMaxHeight !== null ? { maxHeight: `${inlineMaxHeight}px` } : undefined, children: _jsx("div", { className: "efp-autocomplete-options__scroll", ref: setScrollElement, children: renderOptions() }) }))] }), showOptionsDropdown &&
                 !inline &&
                 container &&
                 createPortal(_jsx("div", { ref: refOptions, className: "efp-autocomplete-options", style: {
@@ -241,6 +249,40 @@ const Autocomplete = ({ placeholder, options, value, showClear = false, onChange
                         left: `${dropdownPosition.left}px`,
                         width: `${dropdownPosition.width}px`,
                         maxHeight: `${dropdownPosition.maxHeight}px`,
-                    }, children: _jsx("div", { className: "efp-autocomplete-options__scroll", children: renderOptions() }) }), container)] }));
+                    }, children: _jsx("div", { className: "efp-autocomplete-options__scroll", ref: setScrollElement, children: renderOptions() }) }), container)] }));
 };
+/**
+ * The listbox itself; Virtuoso positions it inside the scroll parent.
+ * @param props - Virtuoso's list props, plus the autocomplete's context.
+ * @returns The `ul`.
+ */
+function OptionList({ context, ref, ...props }) {
+    // Virtuoso types its list element as a `div`; the listbox is a `ul`, which it handles the same.
+    return (_jsx("ul", { ...props, ref: ref, role: "listbox", id: context.listboxId }));
+}
+/**
+ * One option; Virtuoso renders only the ones in and near view.
+ * @param props - Virtuoso's item props, plus the autocomplete's context.
+ * @returns The `li`.
+ */
+function OptionItem({ context, item: _item, ...props }) {
+    const index = props['data-index'];
+    const isFocused = index === context.focusIndex;
+    const isActive = !isFocused && index === context.activeIndex;
+    return (_jsx("li", { ...props, id: `${context.listboxId}-option-${index}`, role: "option", "aria-selected": index === context.activeIndex, className: isFocused ? 'is-focus' : isActive ? 'is-active' : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => context.onSelect(index) }));
+}
+/**
+ * Loads Virtuoso on first open rather than with the SDK's main chunk, as the floorplan's own lists
+ * do; the retry covers a chunk request lost to a flaky network.
+ * @returns The module, shaped for `lazy`.
+ */
+function importVirtuoso() {
+    return import('react-virtuoso')
+        .then((mod) => ({ default: mod.Virtuoso }))
+        .catch(() => new Promise((resolve) => {
+        setTimeout(() => resolve(importVirtuoso()), 3000);
+    }));
+}
+// Typed as the generic component it resolves to; `lazy` alone erases the data and context types.
+const LazyVirtuoso = lazy(importVirtuoso);
 export default Autocomplete;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/ui",
-  "version": "3.39.0",
+  "version": "3.39.1",
   "type": "module",
   "description": "ExpoFP SDK internal: shared pure React UI components",
   "homepage": "https://developer.expofp.com/",
@@ -32,6 +32,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
+    "react-virtuoso": "^4.18.7",
     "react-zoom-pan-pinch-sr": "^0.2.0",
     "resize-observer": "^1.0.4",
     "swiper": "^9.4.1",