@homecode/ui 4.30.8 → 4.30.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/.cursor/debug-8c6f78.log +44 -0
  2. package/dist/esm/src/components/Autocomplete/Autocomplete.js +19 -5
  3. package/dist/esm/types/src/components/Autocomplete/Autocomplete.types.d.ts +0 -1
  4. package/package.json +1 -1
package/.cursor/debug-8c6f78.log ADDED
@@ -0,0 +1,44 @@
1
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"scrollTop":0},"hypothesisId":"C","timestamp":1771711527049}
2
+ {"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}
3
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:fetchOptionsCore","message":"setScrollTop(0) initial items","data":{"filter":"","offset":0,"totalCount":0},"hypothesisId":"B","timestamp":1771711527555}
4
+ {"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}
5
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:fetchOptionsCore-RAF","message":"setScrollTop(undefined) clear","data":{"filter":"","offset":0},"hypothesisId":"E","timestamp":1771711527557}
6
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711528848}
7
+ {"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}
8
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleSelect","message":"select","data":{"selectable":true,"label":"Option 15"},"hypothesisId":"A","timestamp":1771711528971}
9
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"savedScrollTop":521.1111450195312},"hypothesisId":"C","timestamp":1771711532390}
10
+ {"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}
11
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711535314}
12
+ {"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}
13
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleSelect","message":"select","data":{"selectable":true,"label":"Option 27"},"hypothesisId":"A","timestamp":1771711535455}
14
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"savedScrollTop":962.2222290039062},"hypothesisId":"C","timestamp":1771711540906}
15
+ {"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}
16
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711542255}
17
+ {"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}
18
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"savedScrollTop":962.2222290039062},"hypothesisId":"C","timestamp":1771711543181}
19
+ {"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}
20
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711543773}
21
+ {"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}
22
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleFocus","message":"popup opening (focus)","data":{"savedScrollTop":962.2222290039062},"hypothesisId":"C","timestamp":1771711544455}
23
+ {"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}
24
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:handleBlur","message":"popup closing (blur)","data":{},"hypothesisId":"A","timestamp":1771711545022}
25
+ {"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}
26
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711551359}
27
+ {"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}
28
+ {"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}
29
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711552110}
30
+ {"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}
31
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711552853}
32
+ {"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}
33
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711553442}
34
+ {"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}
35
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711553951}
36
+ {"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}
37
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711554564}
38
+ {"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}
39
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711555318}
40
+ {"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}
41
+ {"sessionId":"8c6f78","location":"Autocomplete.tsx:useEffect-value","message":"setScrollTop(0) value cleared","data":{"value":""},"hypothesisId":"D","timestamp":1771711555975}
42
+ {"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}
43
+ {"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}
44
+ {"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 CHANGED
@@ -73,7 +73,7 @@ const getTotalCount = (total, newItemsCount = 0, offset = 0, pageSize = 20) => {
73
73
  return offset + (newItemsCount === pageSize ? 1 : 0);
74
74
  };
75
75
  function Autocomplete(props) {
76
- 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;
76
+ 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, inputProps = {}, popupProps = {}, menuProps = {}, scrollProps = {}, loadingPlaceholder, isOpen, } = props;
77
77
  const isMounted = useIsMounted();
78
78
  const [filteredItems, setFilteredItems] = useState([]);
79
79
  const [itemsWithoutFilter, setItemsWithoutFilter] = useState(() => items ?? []);
@@ -83,7 +83,6 @@ function Autocomplete(props) {
83
83
  const [scrollTop, setScrollTop] = useState(undefined);
84
84
  const [isLoading, setIsLoading] = useState(false);
85
85
  const [isLoadingMore, setIsLoadingMore] = useState(false);
86
- const [isOpen, setIsOpen] = useState(props.isOpen);
87
86
  const [isFocused, setIsFocused] = useState(isOpen);
88
87
  const [selectedId, setSelectedId] = useState(null);
89
88
  const [selectedLabel, setSelectedLabel] = useState(null);
@@ -95,6 +94,7 @@ function Autocomplete(props) {
95
94
  _setSearchValue(val);
96
95
  };
97
96
  const currentRequest = useRef('');
97
+ const savedScrollTopRef = useRef(undefined);
98
98
  // @ts-ignore
99
99
  const inputRef = useRef(null);
100
100
  const inputDisplayValue = selectable && !isFocused && selectedLabel != null
@@ -104,13 +104,18 @@ function Autocomplete(props) {
104
104
  ? filteredItems
105
105
  : itemsWithoutFilter.length
106
106
  ? itemsWithoutFilter
107
- : (items ?? []);
107
+ : items ?? [];
108
108
  const displayCount = displayItems.length;
109
109
  const hasMore = totalCount > 0 && displayCount < totalCount;
110
110
  const classes = cn(S.root, className, popupProps.className);
111
111
  const handleFocus = (e) => {
112
112
  isFocusedRef.current = true;
113
113
  setIsFocused(true);
114
+ const saved = savedScrollTopRef.current;
115
+ if (saved != null && saved > 0) {
116
+ setScrollTop(saved);
117
+ requestAnimationFrame(() => setScrollTop(undefined));
118
+ }
114
119
  inputProps?.onFocus?.(e);
115
120
  };
116
121
  const handleBlur = (e) => {
@@ -123,6 +128,7 @@ function Autocomplete(props) {
123
128
  setSearchValue(val);
124
129
  onChange(e, val);
125
130
  if (!val) {
131
+ savedScrollTopRef.current = undefined;
126
132
  setCurrentFilter('');
127
133
  setFilteredItems([]);
128
134
  setItemsWithoutFilter(items ?? []);
@@ -131,6 +137,7 @@ function Autocomplete(props) {
131
137
  setScrollTop(0); // Reset scroll when filter is cleared
132
138
  }
133
139
  else {
140
+ savedScrollTopRef.current = undefined;
134
141
  setCurrentFilter(val);
135
142
  setCurrentOffset(0);
136
143
  setScrollTop(0); // Reset scroll when filter changes
@@ -150,7 +157,6 @@ function Autocomplete(props) {
150
157
  setFilteredItems([]);
151
158
  setCurrentOffset(0);
152
159
  setTotalCount(0);
153
- setScrollTop(0);
154
160
  fetchOptionsCore(option.label, 0);
155
161
  onSelect?.(option);
156
162
  // set input caret to the end
@@ -187,6 +193,7 @@ function Autocomplete(props) {
187
193
  const newTotal = getTotalCount(total, newOptions.length, offset + newOptions.length, pageSize);
188
194
  if (filter) {
189
195
  if (offset === 0) {
196
+ savedScrollTopRef.current = undefined;
190
197
  setFilteredItems(newOptions);
191
198
  setScrollTop(0); // Reset scroll when new filter results load
192
199
  }
@@ -198,6 +205,7 @@ function Autocomplete(props) {
198
205
  }
199
206
  else {
200
207
  if (offset === 0) {
208
+ savedScrollTopRef.current = undefined;
201
209
  setItemsWithoutFilter(newOptions);
202
210
  setScrollTop(0); // Reset scroll when loading initial items
203
211
  }
@@ -232,6 +240,9 @@ function Autocomplete(props) {
232
240
  }
233
241
  }, [getOptions, isMounted, pageSize, items]);
234
242
  const fetchOptions = useMemo(() => debounce(fetchOptionsCore, debounceDelay), [fetchOptionsCore, debounceDelay]);
243
+ const handleScroll = useCallback(({ scrollTop: top }) => {
244
+ savedScrollTopRef.current = top;
245
+ }, []);
235
246
  const handleScrollEnd = useCallback(() => {
236
247
  if (!hasMore || isLoading || isLoadingMore)
237
248
  return;
@@ -259,6 +270,7 @@ function Autocomplete(props) {
259
270
  return;
260
271
  setSearchValue(value);
261
272
  if (!value) {
273
+ savedScrollTopRef.current = undefined;
262
274
  setCurrentFilter('');
263
275
  setFilteredItems([]);
264
276
  setItemsWithoutFilter(items ?? []);
@@ -267,6 +279,7 @@ function Autocomplete(props) {
267
279
  setScrollTop(0); // Reset scroll when value is cleared
268
280
  }
269
281
  else if (isFocusedRef.current) {
282
+ savedScrollTopRef.current = undefined;
270
283
  setCurrentFilter(value);
271
284
  setCurrentOffset(0);
272
285
  setScrollTop(0); // Reset scroll when filter changes
@@ -334,7 +347,7 @@ function Autocomplete(props) {
334
347
  y: true,
335
348
  ...scrollProps,
336
349
  className: cn(S.scroll, scrollProps?.className),
337
- }, itemHeight: itemHeight, itemsCount: displayItems.length, totalCount: computedTotalCount, overlapCount: 10, pageSize: pageSize, scrollTop: scrollTop, onScrollEnd: handleScrollEnd, renderItem: renderItem, contentAfter: hasMore && LoadingPlaceholder }));
350
+ }, itemHeight: itemHeight, itemsCount: displayItems.length, totalCount: computedTotalCount, overlapCount: 10, pageSize: pageSize, scrollTop: scrollTop, onScroll: handleScroll, onScrollEnd: handleScrollEnd, renderItem: renderItem, contentAfter: hasMore && LoadingPlaceholder }));
338
351
  }, [
339
352
  displayItems,
340
353
  focusedIndex,
@@ -344,6 +357,7 @@ function Autocomplete(props) {
344
357
  isLoadingMore,
345
358
  itemHeight,
346
359
  pageSize,
360
+ handleScroll,
347
361
  handleScrollEnd,
348
362
  renderItem,
349
363
  size,
package/dist/esm/types/src/components/Autocomplete/Autocomplete.types.d.ts CHANGED
@@ -11,7 +11,6 @@ export type Option = {
11
11
  export type Value = string;
12
12
  export type Props = FormControl<Value, HTMLInputElement> & {
13
13
  className?: string;
14
- inputWrapperClassName?: string;
15
14
  size?: Size;
16
15
  value: Value;
17
16
  isOpen?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homecode/ui",
3
- "version": "4.30.8",
3
+ "version": "4.30.9",
4
4
  "description": "React UI components library",
5
5
  "scripts": {
6
6
  "tests": "jest",