@homecode/ui 4.30.7 → 4.30.8

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

@@ -86,6 +86,7 @@ function Autocomplete(props) {
     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);
@@ -96,11 +97,14 @@ function Autocomplete(props) {
     const currentRequest = useRef('');
     // @ts-ignore
     const inputRef = useRef(null);
+    const inputDisplayValue = selectable && !isFocused && selectedLabel != null
+        ? selectedLabel
+        : searchValue;
     const displayItems = currentFilter
         ? filteredItems
         : itemsWithoutFilter.length
             ? itemsWithoutFilter
-            : items ?? [];
+            : (items ?? []);
     const displayCount = displayItems.length;
     const hasMore = totalCount > 0 && displayCount < totalCount;
     const classes = cn(S.root, className, popupProps.className);
@@ -137,6 +141,7 @@ function Autocomplete(props) {
     const handleSelect = (option) => {
         if (selectable) {
             setSelectedId(option.id);
+            setSelectedLabel(option.label);
             onSelect?.(option);
             return;
         }
@@ -268,6 +273,12 @@ function Autocomplete(props) {
             fetchOptions(value, 0);
         }
     }, [value]);
+    useEffect(() => {
+        if (selectable && !value) {
+            setSelectedId(null);
+            setSelectedLabel(null);
+        }
+    }, [selectable, value]);
     useEffect(() => {
         if (!currentFilter && items?.length) {
             setItemsWithoutFilter(items);
@@ -346,7 +357,7 @@ function Autocomplete(props) {
     ]);
     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: searchValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: inputProps.className }), content: optionsList, contentProps: {
+            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_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","popupContent":"Autocomplete_popupContent__Aet6P","scroll":"Autocomplete_scroll__bFG6f","options":"Autocomplete_options__NtttU","option":"Autocomplete_option__uBuih","loadingPlaceholder":"Autocomplete_loadingPlaceholder__Dn0dT","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/package.json

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