@homecode/ui 4.30.6 → 4.30.8

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import '../AssistiveText/AssistiveText.styl.js';
-import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import S from './Autocomplete.styl.js';
 import { Shimmer } from '../Shimmer/Shimmer.js';
 import debounce from '../../tools/debounce.js';
@@ -67,17 +67,26 @@ const SIZE_TO_ITEM_HEIGHT = {
     m: 40,
     l: 50,
 };
+const getTotalCount = (total, newItemsCount = 0, offset = 0, pageSize = 20) => {
+    if (total !== undefined)
+        return total;
+    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, inputProps = {}, popupProps = {}, menuProps = {}, scrollProps = {}, } = 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 isMounted = useIsMounted();
     const [filteredItems, setFilteredItems] = useState([]);
+    const [itemsWithoutFilter, setItemsWithoutFilter] = useState(() => items ?? []);
     const [currentFilter, setCurrentFilter] = useState('');
     const [currentOffset, setCurrentOffset] = useState(0);
     const [totalCount, setTotalCount] = useState(0);
+    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);
     const isFocusedRef = useRef(false);
     const searchValRef = useRef(value);
     const [searchValue, _setSearchValue] = useState(value);
@@ -88,8 +97,16 @@ function Autocomplete(props) {
     const currentRequest = useRef('');
     // @ts-ignore
     const inputRef = useRef(null);
-    const displayItems = currentFilter ? filteredItems : items || [];
-    const hasMore = currentFilter ? filteredItems.length < totalCount : false;
+    const inputDisplayValue = selectable && !isFocused && selectedLabel != null
+        ? selectedLabel
+        : searchValue;
+    const displayItems = currentFilter
+        ? filteredItems
+        : itemsWithoutFilter.length
+            ? itemsWithoutFilter
+            : (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;
@@ -108,30 +125,41 @@ function Autocomplete(props) {
         if (!val) {
             setCurrentFilter('');
             setFilteredItems([]);
+            setItemsWithoutFilter(items ?? []);
             setCurrentOffset(0);
             setTotalCount(0);
+            setScrollTop(0); // Reset scroll when filter is cleared
         }
         else {
             setCurrentFilter(val);
             setCurrentOffset(0);
+            setScrollTop(0); // Reset scroll when filter changes
             fetchOptions(val, 0);
         }
         return true;
     };
     const handleSelect = (option) => {
+        if (selectable) {
+            setSelectedId(option.id);
+            setSelectedLabel(option.label);
+            onSelect?.(option);
+            return;
+        }
         setSearchValue(option.label);
-        setCurrentFilter('');
+        setCurrentFilter(option.label);
         setFilteredItems([]);
         setCurrentOffset(0);
         setTotalCount(0);
-        onSelect(option);
+        setScrollTop(0);
+        fetchOptionsCore(option.label, 0);
+        onSelect?.(option);
         // set input caret to the end
         requestAnimationFrame(() => {
             const input = inputRef.current;
             if (!input)
                 return;
             input.focus();
-            input.setSelectionRange(value.length, value.length);
+            input.setSelectionRange(option.label.length, option.label.length);
         });
     };
     const { focusedIndex, setFocusedIndex } = useListKeyboardControl({
@@ -139,11 +167,7 @@ function Autocomplete(props) {
         itemsCount: displayItems.length,
         onSelect: index => handleSelect(displayItems[index]),
     });
-    const fetchOptions = debounce(async (filter, offset) => {
-        if (!filter) {
-            setFilteredItems([]);
-            return;
-        }
+    const fetchOptionsCore = useCallback(async (filter, offset) => {
         const requestKey = `${filter}:${offset}`;
         currentRequest.current = requestKey;
         if (offset === 0) {
@@ -153,26 +177,51 @@ function Autocomplete(props) {
             setIsLoadingMore(true);
         }
         try {
-            const newOptions = await getOptions(filter, offset);
+            const result = await getOptions(filter, offset);
+            const newOptions = result.items;
+            const total = result.total;
             if (!isMounted.current)
                 return;
             if (currentRequest.current !== requestKey)
                 return;
-            if (offset === 0) {
-                setFilteredItems(newOptions);
-                setCurrentOffset(newOptions.length);
-                setTotalCount(newOptions.length + (newOptions.length === pageSize ? 1 : 0));
+            const newTotal = getTotalCount(total, newOptions.length, offset + newOptions.length, pageSize);
+            if (filter) {
+                if (offset === 0) {
+                    setFilteredItems(newOptions);
+                    setScrollTop(0); // Reset scroll when new filter results load
+                }
+                else {
+                    setFilteredItems(prev => [...prev, ...newOptions]);
+                }
+                setCurrentOffset(offset + newOptions.length);
+                setTotalCount(newTotal);
             }
             else {
-                setFilteredItems(prev => [...prev, ...newOptions]);
-                const newOffset = offset + newOptions.length;
-                setCurrentOffset(newOffset);
-                setTotalCount(newOffset + (newOptions.length === pageSize ? 1 : 0));
+                if (offset === 0) {
+                    setItemsWithoutFilter(newOptions);
+                    setScrollTop(0); // Reset scroll when loading initial items
+                }
+                else {
+                    setItemsWithoutFilter(prev => [...prev, ...newOptions]);
+                }
+                setCurrentOffset(offset + newOptions.length);
+                setTotalCount(newTotal);
+            }
+            // Clear scrollTop after reset to allow normal scrolling
+            if (offset === 0) {
+                requestAnimationFrame(() => {
+                    setScrollTop(undefined);
+                });
             }
         }
         catch (error) {
             if (offset === 0) {
-                setFilteredItems([]);
+                if (filter) {
+                    setFilteredItems([]);
+                }
+                else {
+                    setItemsWithoutFilter(items ?? []);
+                }
                 setCurrentOffset(0);
                 setTotalCount(0);
             }
@@ -181,10 +230,21 @@ function Autocomplete(props) {
             setIsLoading(false);
             setIsLoadingMore(false);
         }
-    }, debounceDelay);
+    }, [getOptions, isMounted, pageSize, items]);
+    const fetchOptions = useMemo(() => debounce(fetchOptionsCore, debounceDelay), [fetchOptionsCore, debounceDelay]);
     const handleScrollEnd = useCallback(() => {
-        if (currentFilter && hasMore && !isLoading && !isLoadingMore) {
-            fetchOptions(currentFilter, currentOffset);
+        if (!hasMore || isLoading || isLoadingMore)
+            return;
+        const filter = currentFilter;
+        const offset = currentOffset;
+        if (offset > 0) {
+            setIsLoadingMore(true);
+            requestAnimationFrame(() => {
+                fetchOptionsCore(filter, offset);
+            });
+        }
+        else {
+            fetchOptionsCore(filter, offset);
         }
     }, [
         currentFilter,
@@ -192,7 +252,7 @@ function Autocomplete(props) {
         isLoading,
         isLoadingMore,
         currentOffset,
-        fetchOptions,
+        fetchOptionsCore,
     ]);
     useEffect(() => {
         if (typeof value !== 'string')
@@ -201,15 +261,42 @@ function Autocomplete(props) {
         if (!value) {
             setCurrentFilter('');
             setFilteredItems([]);
+            setItemsWithoutFilter(items ?? []);
             setCurrentOffset(0);
             setTotalCount(0);
+            setScrollTop(0); // Reset scroll when value is cleared
         }
         else if (isFocusedRef.current) {
             setCurrentFilter(value);
             setCurrentOffset(0);
+            setScrollTop(0); // Reset scroll when filter changes
             fetchOptions(value, 0);
         }
     }, [value]);
+    useEffect(() => {
+        if (selectable && !value) {
+            setSelectedId(null);
+            setSelectedLabel(null);
+        }
+    }, [selectable, value]);
+    useEffect(() => {
+        if (!currentFilter && items?.length) {
+            setItemsWithoutFilter(items);
+        }
+    }, [currentFilter, items]);
+    useEffect(() => {
+        const open = isOpen ?? isFocused;
+        if (open && !currentFilter && items?.length && totalCount === 0) {
+            fetchOptionsCore('', 0);
+        }
+    }, [
+        isOpen,
+        isFocused,
+        currentFilter,
+        items?.length,
+        totalCount,
+        fetchOptionsCore,
+    ]);
     const renderItem = useCallback((itemProps) => {
         const option = displayItems[itemProps.key];
         if (!option)
@@ -220,36 +307,40 @@ function Autocomplete(props) {
             className: cn(S.option, itemProps.className),
             style: itemProps.style,
             focused: focusedIndex === itemProps.key,
+            isSelected: selectable && option.id === selectedId,
             onClick: () => handleSelect(option),
             onMouseEnter: () => setFocusedIndex(itemProps.key),
         };
         if (props.renderItem) {
             return props.renderItem(itemPropsForRender);
         }
-        return (jsx(Menu.Item, { ...itemProps, focused: itemPropsForRender.focused, className: itemPropsForRender.className, onClick: itemPropsForRender.onClick, onMouseEnter: itemPropsForRender.onMouseEnter, style: itemPropsForRender.style, children: option.render ? option.render(option) : option.label }));
+        return (jsx(Menu.Item, { ...itemProps, focused: itemPropsForRender.focused, selected: itemPropsForRender.isSelected, className: itemPropsForRender.className, onClick: itemPropsForRender.onClick, onMouseEnter: itemPropsForRender.onMouseEnter, style: itemPropsForRender.style, children: option.render ? option.render(option) : option.label }));
     }, [
         displayItems,
         focusedIndex,
+        selectedId,
+        selectable,
         handleSelect,
         setFocusedIndex,
         props.renderItem,
     ]);
+    const LoadingPlaceholder = loadingPlaceholder ?? (jsxs("div", { className: S.loadingPlaceholder, children: [isLoadingMore && jsx(Shimmer, { size: size, round: round }), "Loading..."] }));
     const optionsList = useMemo(() => {
-        if (!displayItems.length)
-            return null;
-        const computedTotalCount = currentFilter ? totalCount : displayItems.length;
-        return (jsx(ListScroll, { className: cn(S.options, menuProps.className), scrollProps: {
+        if (!displayItems.length) {
+            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: {
                 y: true,
                 ...scrollProps,
                 className: cn(S.scroll, scrollProps?.className),
-            }, itemHeight: itemHeight, itemsCount: displayItems.length, totalCount: computedTotalCount, overlapCount: 10, pageSize: pageSize, onScrollEnd: handleScrollEnd, renderItem: renderItem, contentAfter: hasMore &&
-                isLoadingMore && (jsx("div", { style: { padding: '8px 12px', textAlign: 'center' }, children: jsx(Shimmer, { size: size, round: round }) })) }));
+            }, itemHeight: itemHeight, itemsCount: displayItems.length, totalCount: computedTotalCount, overlapCount: 10, pageSize: pageSize, scrollTop: scrollTop, onScrollEnd: handleScrollEnd, renderItem: renderItem, contentAfter: hasMore && LoadingPlaceholder }));
     }, [
         displayItems,
         focusedIndex,
-        currentFilter,
         totalCount,
         hasMore,
+        isLoading,
         isLoadingMore,
         itemHeight,
         pageSize,
@@ -258,10 +349,15 @@ function Autocomplete(props) {
         size,
         round,
         menuProps.className,
+        scrollProps,
+        scrollTop,
+        selectable,
+        selectedId,
+        LoadingPlaceholder,
     ]);
-    return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, round: round, size: size, blur: blur, direction: "bottom", ...popupProps, trigger: jsxs("div", { className: inputWrapperClassName, children: [jsx(Input, { ref: inputRef, 
-                    // @ts-ignore
-                    size: size, round: round, ...inputProps, value: searchValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: inputProps.className }), isLoading && (jsx(Shimmer, { className: S.shimmer, size: size, round: round }))] }), content: optionsList, contentProps: {
+    return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, round: round, size: size, blur: blur, direction: "bottom", ...popupProps, trigger: jsx(Input, { ref: inputRef, 
+            // @ts-ignore
+            size: size, round: round, ...inputProps, value: inputDisplayValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: cn(inputProps.className, selectable && !isFocused && S.inputSelectableDisplay) }), content: optionsList, contentProps: {
             ...popupProps?.contentProps,
             className: cn(S.popupContent, popupProps?.contentProps?.className),
         } }));

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

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-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_shimmer__s6rri{height:100%;left:0;position:absolute;top:0;width:100%}";
-var S = {"root":"Autocomplete_root__86RQs","popupContent":"Autocomplete_popupContent__Aet6P","scroll":"Autocomplete_scroll__bFG6f","options":"Autocomplete_options__NtttU","option":"Autocomplete_option__uBuih","shimmer":"Autocomplete_shimmer__s6rri"};
+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%}";
+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"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
 import cn from 'classnames';
 import { strToDate } from '../../tools/date.js';
 import { DateTime } from '../DateTime/DateTime.js';
@@ -8,13 +9,36 @@ import { Popup } from '../Popup/Popup.js';
 import S from './DatePickerInput.styl.js';
 
 function DatePickerInput(props) {
-    const { value, variant = 'default', size = 'm', popupProps, buttonProps, displayFormat = 'MMM Do YYYY', } = props;
+    const { value, onChange, variant = 'default', size = 'm', popupProps, buttonProps, displayFormat = 'MMM Do YYYY', } = props;
     const isRange = Array.isArray(value);
-    return (jsx(Popup, { size: size, focusControl: true, direction: "bottom-right", ...popupProps, trigger: 
+    const isControlled = popupProps?.isOpen !== undefined;
+    const [isOpen, setIsOpen] = useState(false);
+    const handleChange = useCallback((newValue) => {
+        onChange(newValue);
+        if (!isRange) {
+            if (!isControlled) {
+                setIsOpen(false);
+            }
+            popupProps?.onClose?.();
+        }
+    }, [onChange, isRange, isControlled, popupProps]);
+    const handleClose = useCallback(() => {
+        if (!isControlled) {
+            setIsOpen(false);
+        }
+        popupProps?.onClose?.();
+    }, [popupProps, isControlled]);
+    const handleOpen = useCallback(() => {
+        if (!isControlled) {
+            setIsOpen(true);
+        }
+        popupProps?.onOpen?.();
+    }, [popupProps, isControlled]);
+    return (jsx(Popup, { size: size, focusControl: true, direction: "bottom-right", isOpen: isControlled ? popupProps.isOpen : isOpen, onOpen: isControlled ? popupProps.onOpen : handleOpen, onClose: isControlled ? popupProps.onClose : handleClose, ...popupProps, trigger: 
         // @ts-ignore
         jsx(Button, { variant: variant, size: size, ...buttonProps, children: isRange ? (jsxs(Fragment, { children: [jsx(DateTime, { value: strToDate(value[0]), format: displayFormat }), ' - ', jsx(DateTime, { value: strToDate(value[1]), format: displayFormat })] })) : (jsx(DateTime, { value: strToDate(value), format: displayFormat })) }), contentProps: {
             className: cn(S.popupContent, props.doubleCalendar && S.doubleCalendar, S[`size-${size}`], popupProps?.contentProps?.className),
-        }, content: jsx(DatePicker, { ...props, className: S.content, calendarProps: { className: S.calendar } }) }));
+        }, content: jsx(DatePicker, { ...props, onChange: handleChange, className: S.content, calendarProps: { className: S.calendar } }) }));
 }
 
 export { DatePickerInput };

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

@@ -2,6 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import S from './Shimmer.styl.js';
 import cn from 'classnames';
 
-const Shimmer = ({ className, size = 'm', round = false, }) => (jsx("div", { className: cn(S.root, className, S[`size-${size}`], round && S.round), children: jsx("div", { className: S.inner }) }));
+const Shimmer = ({ className, size = 'm', round = false, children, }) => (jsx("div", { className: cn(S.root, className, S[`size-${size}`], round && S.round), children: jsx("div", { className: S.inner, children: children }) }));
 
 export { Shimmer };

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

@@ -148,8 +148,9 @@ class Virtualized extends Component {
         const { itemsCount, totalCount, pageSize, onScrollEnd } = this.props;
         if (itemsCount === totalCount)
             return;
-        if (itemsCount < this.lastScrollEndIndex)
-            return;
+        if (itemsCount < this.lastScrollEndIndex) {
+            this.lastScrollEndIndex = 0; // Reset when list shrinks (e.g. filter cleared)
+        }
         this.lastScrollEndIndex = Math.min(itemsCount + pageSize, totalCount);
         onScrollEnd?.();
     };

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

@@ -15,8 +15,11 @@ export type Props = FormControl<Value, HTMLInputElement> & {
     size?: Size;
     value: Value;
     isOpen?: boolean;
-    getOptions: (filter: string, offset: number) => Promise<Option[]>;
-    onSelect: (option: Option) => void;
+    getOptions: (filter: string, offset: number) => Promise<{
+        items: Option[];
+        total?: number;
+    }>;
+    onSelect?: (option: Option) => void;
     items?: Option[];
     itemHeight?: number;
     pageSize?: number;
@@ -27,7 +30,9 @@ export type Props = FormControl<Value, HTMLInputElement> & {
     menuProps?: Partial<MenuProps>;
     round?: boolean;
     blur?: boolean;
+    selectable?: boolean;
     renderItem?: (props: RenderItemProps) => React.ReactElement;
+    loadingPlaceholder?: React.ReactNode;
 };
 export type RenderItemProps = {
     option: Option;
@@ -35,6 +40,7 @@ export type RenderItemProps = {
     className?: string;
     style?: React.CSSProperties;
     focused: boolean;
+    isSelected: boolean;
     onClick: () => void;
     onMouseEnter: () => void;
 };

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

@@ -3,5 +3,6 @@ export type ShimmerProps = {
     className?: string;
     size?: Size;
     round?: boolean;
+    children?: React.ReactNode;
 };
-export declare const Shimmer: ({ className, size, round, }: ShimmerProps) => JSX.Element;
+export declare const Shimmer: ({ className, size, round, children, }: ShimmerProps) => JSX.Element;

package/package.json

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