@homecode/ui 4.30.9 → 4.30.11

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, 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;
+    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 ?? []);
@@ -95,6 +95,7 @@ function Autocomplete(props) {
     };
     const currentRequest = useRef('');
     const savedScrollTopRef = useRef(undefined);
+    const defaultSelectedAppliedRef = useRef(false);
     // @ts-ignore
     const inputRef = useRef(null);
     const inputDisplayValue = selectable && !isFocused && selectedLabel != null
@@ -111,10 +112,12 @@ function Autocomplete(props) {
     const handleFocus = (e) => {
         isFocusedRef.current = true;
         setIsFocused(true);
-        const saved = savedScrollTopRef.current;
-        if (saved != null && saved > 0) {
-            setScrollTop(saved);
-            requestAnimationFrame(() => setScrollTop(undefined));
+        if (!scrollToSelected || !selectable || !selectedId) {
+            const saved = savedScrollTopRef.current;
+            if (saved != null && saved > 0) {
+                setScrollTop(saved);
+                requestAnimationFrame(() => setScrollTop(undefined));
+            }
         }
         inputProps?.onFocus?.(e);
     };
@@ -290,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);
@@ -343,7 +360,16 @@ 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),
@@ -367,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/src/components/Select/Select2.js

@@ -18,7 +18,7 @@ import useEvent from '../../hooks/useEvent.js';
 import S from './Select.styl.js';
 
 function Select2(props) {
-    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionClassName, additionalOptions = [], options, variant, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, } = props;
+    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionClassName, additionalOptions = [], options, variant, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, } = props;
     const isMultiple$1 = isMultiple(value);
     const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
     const contentRef = useRef(null);
@@ -180,7 +180,7 @@ function Select2(props) {
             const label = getLabel(id);
             if (!label)
                 return null;
-            return (jsx(Chip, { className: S.chip, size: size, onRemove: () => onItemToggle(id), onClick: () => onChipClick?.(id), removeTooltip: selectedChipRemoveTooltip, children: label }, id));
+            return (jsx(Chip, { className: S.chip, size: size, selected: selectedChipIds?.includes(id), onRemove: () => onItemToggle(id), onClick: () => onChipClick?.(id), removeTooltip: selectedChipRemoveTooltip, children: label }, id));
         });
     };
     const triggerArrow = useMemo(() => {

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

@@ -30,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/dist/esm/types/src/components/Select/Select.types.d.ts

@@ -63,6 +63,7 @@ export type Props = FormControl<Value> & InheritedInputProps & {
     popupProps?: SelectPopupProps;
     hideRequiredStar?: boolean;
     selectedChipRemoveTooltip?: ReactNode;
+    selectedChipIds?: Id[];
 };
 export type State = {
     isFocused: boolean;

package/package.json

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