@homecode/ui 4.30.8 → 4.30.10

package/.cursor/debug-8c6f78.log

@@ -0,0 +1,44 @@
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"scrollTop":0},"hypothesisId":"C","timestamp":1771711527049}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":true,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":true},"hypothesisId":"B","timestamp":1771711527054}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:fetchOptionsCore","message":"setScrollTop(0) initial items","data":{"filter":"","offset":0,"totalCount":0},"hypothesisId":"B","timestamp":1771711527555}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":true,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711527556}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:fetchOptionsCore-RAF","message":"setScrollTop(undefined) clear","data":{"filter":"","offset":0},"hypothesisId":"E","timestamp":1771711527557}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711528848}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711528850}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleSelect","message":"select","data":{"selectable":true,"label":"Option 15"},"hypothesisId":"A","timestamp":1771711528971}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"savedScrollTop":521.1111450195312},"hypothesisId":"C","timestamp":1771711532390}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":true,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711532394}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711535314}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711535317}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleSelect","message":"select","data":{"selectable":true,"label":"Option 27"},"hypothesisId":"A","timestamp":1771711535455}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"savedScrollTop":962.2222290039062},"hypothesisId":"C","timestamp":1771711540906}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":true,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711540911}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711542255}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711542257}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"savedScrollTop":962.2222290039062},"hypothesisId":"C","timestamp":1771711543181}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":true,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711543185}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711543773}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711543776}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"savedScrollTop":962.2222290039062},"hypothesisId":"C","timestamp":1771711544455}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":true,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711544459}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711545022}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711545023}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711551359}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":200,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711551359}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711551360}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711552110}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711552111}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711552853}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711552853}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711553442}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711553443}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711553951}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711553951}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711554564}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711554564}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711555318}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711555319}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711555975}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711555975}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711556573}
+{"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-open","message":"open/fetch effect","data":{"open":false,"currentFilter":"","totalCount":0,"itemsLen":20,"willFetch":false},"hypothesisId":"B","timestamp":1771711557126}

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -73,7 +73,7 @@ const getTotalCount = (total, newItemsCount = 0, offset = 0, pageSize = 20) => {
     return offset + (newItemsCount === pageSize ? 1 : 0);
 };
 function Autocomplete(props) {
-    const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, items, itemHeight = SIZE_TO_ITEM_HEIGHT[size], pageSize = 20, debounceDelay = 300, round = false, blur = false, selectable = false, inputProps = {}, popupProps = {}, menuProps = {}, scrollProps = {}, loadingPlaceholder, } = props;
+    const { className, value, onChange, size = 'm', getOptions, onSelect, items, itemHeight = SIZE_TO_ITEM_HEIGHT[size], pageSize = 20, debounceDelay = 300, round = false, blur = false, selectable = false, defaultSelected, scrollToSelected = false, inputProps = {}, popupProps = {}, menuProps = {}, scrollProps = {}, loadingPlaceholder, isOpen, } = props;
     const isMounted = useIsMounted();
     const [filteredItems, setFilteredItems] = useState([]);
     const [itemsWithoutFilter, setItemsWithoutFilter] = useState(() => items ?? []);
@@ -83,7 +83,6 @@ function Autocomplete(props) {
     const [scrollTop, setScrollTop] = useState(undefined);
     const [isLoading, setIsLoading] = useState(false);
     const [isLoadingMore, setIsLoadingMore] = useState(false);
-    const [isOpen, setIsOpen] = useState(props.isOpen);
     const [isFocused, setIsFocused] = useState(isOpen);
     const [selectedId, setSelectedId] = useState(null);
     const [selectedLabel, setSelectedLabel] = useState(null);
@@ -95,6 +94,8 @@ function Autocomplete(props) {
         _setSearchValue(val);
     };
     const currentRequest = useRef('');
+    const savedScrollTopRef = useRef(undefined);
+    const defaultSelectedAppliedRef = useRef(false);
     // @ts-ignore
     const inputRef = useRef(null);
     const inputDisplayValue = selectable && !isFocused && selectedLabel != null
@@ -104,13 +105,20 @@ function Autocomplete(props) {
         ? filteredItems
         : itemsWithoutFilter.length
             ? itemsWithoutFilter
-            : (items ?? []);
+            : items ?? [];
     const displayCount = displayItems.length;
     const hasMore = totalCount > 0 && displayCount < totalCount;
     const classes = cn(S.root, className, popupProps.className);
     const handleFocus = (e) => {
         isFocusedRef.current = true;
         setIsFocused(true);
+        if (!scrollToSelected || !selectable || !selectedId) {
+            const saved = savedScrollTopRef.current;
+            if (saved != null && saved > 0) {
+                setScrollTop(saved);
+                requestAnimationFrame(() => setScrollTop(undefined));
+            }
+        }
         inputProps?.onFocus?.(e);
     };
     const handleBlur = (e) => {
@@ -123,6 +131,7 @@ function Autocomplete(props) {
         setSearchValue(val);
         onChange(e, val);
         if (!val) {
+            savedScrollTopRef.current = undefined;
             setCurrentFilter('');
             setFilteredItems([]);
             setItemsWithoutFilter(items ?? []);
@@ -131,6 +140,7 @@ function Autocomplete(props) {
             setScrollTop(0); // Reset scroll when filter is cleared
         }
         else {
+            savedScrollTopRef.current = undefined;
             setCurrentFilter(val);
             setCurrentOffset(0);
             setScrollTop(0); // Reset scroll when filter changes
@@ -150,7 +160,6 @@ function Autocomplete(props) {
         setFilteredItems([]);
         setCurrentOffset(0);
         setTotalCount(0);
-        setScrollTop(0);
         fetchOptionsCore(option.label, 0);
         onSelect?.(option);
         // set input caret to the end
@@ -187,6 +196,7 @@ function Autocomplete(props) {
             const newTotal = getTotalCount(total, newOptions.length, offset + newOptions.length, pageSize);
             if (filter) {
                 if (offset === 0) {
+                    savedScrollTopRef.current = undefined;
                     setFilteredItems(newOptions);
                     setScrollTop(0); // Reset scroll when new filter results load
                 }
@@ -198,6 +208,7 @@ function Autocomplete(props) {
             }
             else {
                 if (offset === 0) {
+                    savedScrollTopRef.current = undefined;
                     setItemsWithoutFilter(newOptions);
                     setScrollTop(0); // Reset scroll when loading initial items
                 }
@@ -232,6 +243,9 @@ function Autocomplete(props) {
         }
     }, [getOptions, isMounted, pageSize, items]);
     const fetchOptions = useMemo(() => debounce(fetchOptionsCore, debounceDelay), [fetchOptionsCore, debounceDelay]);
+    const handleScroll = useCallback(({ scrollTop: top }) => {
+        savedScrollTopRef.current = top;
+    }, []);
     const handleScrollEnd = useCallback(() => {
         if (!hasMore || isLoading || isLoadingMore)
             return;
@@ -259,6 +273,7 @@ function Autocomplete(props) {
             return;
         setSearchValue(value);
         if (!value) {
+            savedScrollTopRef.current = undefined;
             setCurrentFilter('');
             setFilteredItems([]);
             setItemsWithoutFilter(items ?? []);
@@ -267,6 +282,7 @@ function Autocomplete(props) {
             setScrollTop(0); // Reset scroll when value is cleared
         }
         else if (isFocusedRef.current) {
+            savedScrollTopRef.current = undefined;
             setCurrentFilter(value);
             setCurrentOffset(0);
             setScrollTop(0); // Reset scroll when filter changes
@@ -277,8 +293,22 @@ function Autocomplete(props) {
         if (selectable && !value) {
             setSelectedId(null);
             setSelectedLabel(null);
+            defaultSelectedAppliedRef.current = false;
         }
     }, [selectable, value]);
+    useEffect(() => {
+        if (selectable &&
+            defaultSelected &&
+            !defaultSelectedAppliedRef.current &&
+            displayItems.length) {
+            const item = displayItems.find(o => o.id === defaultSelected);
+            if (item) {
+                defaultSelectedAppliedRef.current = true;
+                setSelectedId(item.id);
+                setSelectedLabel(item.label);
+            }
+        }
+    }, [selectable, defaultSelected, displayItems]);
     useEffect(() => {
         if (!currentFilter && items?.length) {
             setItemsWithoutFilter(items);
@@ -330,11 +360,20 @@ function Autocomplete(props) {
             return !selectable && isLoading ? LoadingPlaceholder : null;
         }
         const computedTotalCount = totalCount > 0 ? totalCount : displayItems.length;
-        return (jsx(ListScroll, { ...(selectable && { id: selectedId ?? 'none' }), className: cn(S.options, menuProps.className), scrollProps: {
+        const open = isOpen ?? isFocused;
+        let initialScrollTop;
+        if (open && scrollToSelected && selectable && selectedId) {
+            const idx = displayItems.findIndex(o => o.id === selectedId);
+            initialScrollTop =
+                idx >= 0 ? Math.max(0, idx * itemHeight - itemHeight) : undefined;
+        }
+        return (jsx(ListScroll, { ...(selectable && { id: selectedId ?? 'none' }), ...(typeof initialScrollTop === 'number' && {
+                initialScrollTop,
+            }), className: cn(S.options, menuProps.className), scrollProps: {
                 y: true,
                 ...scrollProps,
                 className: cn(S.scroll, scrollProps?.className),
-            }, itemHeight: itemHeight, itemsCount: displayItems.length, totalCount: computedTotalCount, overlapCount: 10, pageSize: pageSize, scrollTop: scrollTop, onScrollEnd: handleScrollEnd, renderItem: renderItem, contentAfter: hasMore && LoadingPlaceholder }));
+            }, itemHeight: itemHeight, itemsCount: displayItems.length, totalCount: computedTotalCount, overlapCount: 10, pageSize: pageSize, scrollTop: scrollTop, onScroll: handleScroll, onScrollEnd: handleScrollEnd, renderItem: renderItem, contentAfter: hasMore && LoadingPlaceholder }));
     }, [
         displayItems,
         focusedIndex,
@@ -344,6 +383,7 @@ function Autocomplete(props) {
         isLoadingMore,
         itemHeight,
         pageSize,
+        handleScroll,
         handleScrollEnd,
         renderItem,
         size,
@@ -353,6 +393,9 @@ function Autocomplete(props) {
         scrollTop,
         selectable,
         selectedId,
+        isOpen,
+        isFocused,
+        scrollToSelected,
         LoadingPlaceholder,
     ]);
     return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, round: round, size: size, blur: blur, direction: "bottom", ...popupProps, trigger: jsx(Input, { ref: inputRef, 

package/dist/esm/types/src/components/Autocomplete/Autocomplete.types.d.ts

@@ -11,7 +11,6 @@ export type Option = {
 export type Value = string;
 export type Props = FormControl<Value, HTMLInputElement> & {
     className?: string;
-    inputWrapperClassName?: string;
     size?: Size;
     value: Value;
     isOpen?: boolean;
@@ -31,6 +30,8 @@ export type Props = FormControl<Value, HTMLInputElement> & {
     round?: boolean;
     blur?: boolean;
     selectable?: boolean;
+    defaultSelected?: string;
+    scrollToSelected?: boolean;
     renderItem?: (props: RenderItemProps) => React.ReactElement;
     loadingPlaceholder?: React.ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.30.8",
+  "version": "4.30.10",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",