@homecode/ui 4.30.7 → 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 (5) hide show
  1. package/.cursor/debug-8c6f78.log +44 -0
  2. package/dist/esm/src/components/Autocomplete/Autocomplete.js +30 -5
  3. package/dist/esm/src/components/Autocomplete/Autocomplete.styl.js +2 -2
  4. package/dist/esm/types/src/components/Autocomplete/Autocomplete.types.d.ts +0 -1
  5. 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,9 +83,9 @@ 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);
88
+ const [selectedLabel, setSelectedLabel] = useState(null);
89
89
  const isFocusedRef = useRef(false);
90
90
  const searchValRef = useRef(value);
91
91
  const [searchValue, _setSearchValue] = useState(value);
@@ -94,8 +94,12 @@ function Autocomplete(props) {
94
94
  _setSearchValue(val);
95
95
  };
96
96
  const currentRequest = useRef('');
97
+ const savedScrollTopRef = useRef(undefined);
97
98
  // @ts-ignore
98
99
  const inputRef = useRef(null);
100
+ const inputDisplayValue = selectable && !isFocused && selectedLabel != null
101
+ ? selectedLabel
102
+ : searchValue;
99
103
  const displayItems = currentFilter
100
104
  ? filteredItems
101
105
  : itemsWithoutFilter.length
@@ -107,6 +111,11 @@ function Autocomplete(props) {
107
111
  const handleFocus = (e) => {
108
112
  isFocusedRef.current = true;
109
113
  setIsFocused(true);
114
+ const saved = savedScrollTopRef.current;
115
+ if (saved != null && saved > 0) {
116
+ setScrollTop(saved);
117
+ requestAnimationFrame(() => setScrollTop(undefined));
118
+ }
110
119
  inputProps?.onFocus?.(e);
111
120
  };
112
121
  const handleBlur = (e) => {
@@ -119,6 +128,7 @@ function Autocomplete(props) {
119
128
  setSearchValue(val);
120
129
  onChange(e, val);
121
130
  if (!val) {
131
+ savedScrollTopRef.current = undefined;
122
132
  setCurrentFilter('');
123
133
  setFilteredItems([]);
124
134
  setItemsWithoutFilter(items ?? []);
@@ -127,6 +137,7 @@ function Autocomplete(props) {
127
137
  setScrollTop(0); // Reset scroll when filter is cleared
128
138
  }
129
139
  else {
140
+ savedScrollTopRef.current = undefined;
130
141
  setCurrentFilter(val);
131
142
  setCurrentOffset(0);
132
143
  setScrollTop(0); // Reset scroll when filter changes
@@ -137,6 +148,7 @@ function Autocomplete(props) {
137
148
  const handleSelect = (option) => {
138
149
  if (selectable) {
139
150
  setSelectedId(option.id);
151
+ setSelectedLabel(option.label);
140
152
  onSelect?.(option);
141
153
  return;
142
154
  }
@@ -145,7 +157,6 @@ function Autocomplete(props) {
145
157
  setFilteredItems([]);
146
158
  setCurrentOffset(0);
147
159
  setTotalCount(0);
148
- setScrollTop(0);
149
160
  fetchOptionsCore(option.label, 0);
150
161
  onSelect?.(option);
151
162
  // set input caret to the end
@@ -182,6 +193,7 @@ function Autocomplete(props) {
182
193
  const newTotal = getTotalCount(total, newOptions.length, offset + newOptions.length, pageSize);
183
194
  if (filter) {
184
195
  if (offset === 0) {
196
+ savedScrollTopRef.current = undefined;
185
197
  setFilteredItems(newOptions);
186
198
  setScrollTop(0); // Reset scroll when new filter results load
187
199
  }
@@ -193,6 +205,7 @@ function Autocomplete(props) {
193
205
  }
194
206
  else {
195
207
  if (offset === 0) {
208
+ savedScrollTopRef.current = undefined;
196
209
  setItemsWithoutFilter(newOptions);
197
210
  setScrollTop(0); // Reset scroll when loading initial items
198
211
  }
@@ -227,6 +240,9 @@ function Autocomplete(props) {
227
240
  }
228
241
  }, [getOptions, isMounted, pageSize, items]);
229
242
  const fetchOptions = useMemo(() => debounce(fetchOptionsCore, debounceDelay), [fetchOptionsCore, debounceDelay]);
243
+ const handleScroll = useCallback(({ scrollTop: top }) => {
244
+ savedScrollTopRef.current = top;
245
+ }, []);
230
246
  const handleScrollEnd = useCallback(() => {
231
247
  if (!hasMore || isLoading || isLoadingMore)
232
248
  return;
@@ -254,6 +270,7 @@ function Autocomplete(props) {
254
270
  return;
255
271
  setSearchValue(value);
256
272
  if (!value) {
273
+ savedScrollTopRef.current = undefined;
257
274
  setCurrentFilter('');
258
275
  setFilteredItems([]);
259
276
  setItemsWithoutFilter(items ?? []);
@@ -262,12 +279,19 @@ function Autocomplete(props) {
262
279
  setScrollTop(0); // Reset scroll when value is cleared
263
280
  }
264
281
  else if (isFocusedRef.current) {
282
+ savedScrollTopRef.current = undefined;
265
283
  setCurrentFilter(value);
266
284
  setCurrentOffset(0);
267
285
  setScrollTop(0); // Reset scroll when filter changes
268
286
  fetchOptions(value, 0);
269
287
  }
270
288
  }, [value]);
289
+ useEffect(() => {
290
+ if (selectable && !value) {
291
+ setSelectedId(null);
292
+ setSelectedLabel(null);
293
+ }
294
+ }, [selectable, value]);
271
295
  useEffect(() => {
272
296
  if (!currentFilter && items?.length) {
273
297
  setItemsWithoutFilter(items);
@@ -323,7 +347,7 @@ function Autocomplete(props) {
323
347
  y: true,
324
348
  ...scrollProps,
325
349
  className: cn(S.scroll, scrollProps?.className),
326
- }, 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 }));
327
351
  }, [
328
352
  displayItems,
329
353
  focusedIndex,
@@ -333,6 +357,7 @@ function Autocomplete(props) {
333
357
  isLoadingMore,
334
358
  itemHeight,
335
359
  pageSize,
360
+ handleScroll,
336
361
  handleScrollEnd,
337
362
  renderItem,
338
363
  size,
@@ -346,7 +371,7 @@ function Autocomplete(props) {
346
371
  ]);
347
372
  return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, round: round, size: size, blur: blur, direction: "bottom", ...popupProps, trigger: jsx(Input, { ref: inputRef,
348
373
  // @ts-ignore
349
- size: size, round: round, ...inputProps, value: searchValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: inputProps.className }), content: optionsList, contentProps: {
374
+ size: size, round: round, ...inputProps, value: inputDisplayValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: cn(inputProps.className, selectable && !isFocused && S.inputSelectableDisplay) }), content: optionsList, contentProps: {
350
375
  ...popupProps?.contentProps,
351
376
  className: cn(S.popupContent, popupProps?.contentProps?.className),
352
377
  } }));
package/dist/esm/src/components/Autocomplete/Autocomplete.styl.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".Autocomplete_root__86RQs{position:relative}.Autocomplete_popupContent__Aet6P{margin-top:8px;width:100%}.Autocomplete_scroll__bFG6f{height:200px}.Autocomplete_options__NtttU{max-height:200px;overflow-y:auto}.Autocomplete_option__uBuih{cursor:pointer;padding:8px 12px;position:absolute}.Autocomplete_option__uBuih>span{align-items:center;display:flex}.Autocomplete_loadingPlaceholder__Dn0dT{padding:8px 12px;text-align:center}.Autocomplete_shimmer__s6rri{height:100%;left:0;position:absolute;top:0;width:100%}";
4
- var S = {"root":"Autocomplete_root__86RQs","popupContent":"Autocomplete_popupContent__Aet6P","scroll":"Autocomplete_scroll__bFG6f","options":"Autocomplete_options__NtttU","option":"Autocomplete_option__uBuih","loadingPlaceholder":"Autocomplete_loadingPlaceholder__Dn0dT","shimmer":"Autocomplete_shimmer__s6rri"};
3
+ var css_248z = ".Autocomplete_root__86RQs{position:relative}.Autocomplete_inputSelectableDisplay__rgFwu{overflow:hidden;text-overflow:ellipsis}.Autocomplete_popupContent__Aet6P{margin-top:8px;width:100%}.Autocomplete_scroll__bFG6f{height:200px}.Autocomplete_options__NtttU{max-height:200px;overflow-y:auto}.Autocomplete_option__uBuih{cursor:pointer;padding:8px 12px;position:absolute}.Autocomplete_option__uBuih>span{align-items:center;display:flex}.Autocomplete_loadingPlaceholder__Dn0dT{padding:8px 12px;text-align:center}.Autocomplete_shimmer__s6rri{height:100%;left:0;position:absolute;top:0;width:100%}";
4
+ var S = {"root":"Autocomplete_root__86RQs","inputSelectableDisplay":"Autocomplete_inputSelectableDisplay__rgFwu","popupContent":"Autocomplete_popupContent__Aet6P","scroll":"Autocomplete_scroll__bFG6f","options":"Autocomplete_options__NtttU","option":"Autocomplete_option__uBuih","loadingPlaceholder":"Autocomplete_loadingPlaceholder__Dn0dT","shimmer":"Autocomplete_shimmer__s6rri"};
5
5
  styleInject(css_248z);
6
6
 
7
7
  export { S as default };
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.7",
3
+ "version": "4.30.9",
4
4
  "description": "React UI components library",
5
5
  "scripts": {
6
6
  "tests": "jest",