@sustaina/shared-ui 1.36.0 → 1.36.1
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.
- package/dist/index.js +13 -16
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -16
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3234,6 +3234,7 @@ var LookupSelect = ({
|
|
|
3234
3234
|
}) => {
|
|
3235
3235
|
const [inputValue, setInputValue] = React25.useState("");
|
|
3236
3236
|
const inputRef = React25.useRef(null);
|
|
3237
|
+
const [inputFocused, setInputFocused] = React25.useState(false);
|
|
3237
3238
|
const [suggestions, setSuggestions] = React25.useState([]);
|
|
3238
3239
|
const [optionLabels, setOptionLabels] = React25.useState({});
|
|
3239
3240
|
const [loading, setLoading] = React25.useState(false);
|
|
@@ -3284,8 +3285,6 @@ var LookupSelect = ({
|
|
|
3284
3285
|
onChange([trimmed]);
|
|
3285
3286
|
}
|
|
3286
3287
|
setInputValue("");
|
|
3287
|
-
setSuggestions([]);
|
|
3288
|
-
setIsDropdownOpen(false);
|
|
3289
3288
|
},
|
|
3290
3289
|
[value, onChange, maxTags, multiple]
|
|
3291
3290
|
);
|
|
@@ -3294,12 +3293,15 @@ var LookupSelect = ({
|
|
|
3294
3293
|
if (index < 0) return;
|
|
3295
3294
|
const newTags = value.filter((_, i) => i !== index);
|
|
3296
3295
|
onChange(newTags);
|
|
3296
|
+
setIsDropdownOpen(false);
|
|
3297
|
+
setInputFocused(false);
|
|
3297
3298
|
},
|
|
3298
3299
|
[value, onChange]
|
|
3299
3300
|
);
|
|
3300
3301
|
const handleClear = React25.useCallback(() => {
|
|
3301
3302
|
setInputValue("");
|
|
3302
3303
|
setSuggestions([]);
|
|
3304
|
+
setInputFocused(false);
|
|
3303
3305
|
setIsDropdownOpen(false);
|
|
3304
3306
|
setFetchError(null);
|
|
3305
3307
|
if (onClear) onClear();
|
|
@@ -3315,7 +3317,10 @@ var LookupSelect = ({
|
|
|
3315
3317
|
}, 100);
|
|
3316
3318
|
} else {
|
|
3317
3319
|
inputRef.current?.blur();
|
|
3320
|
+
setInputFocused(false);
|
|
3321
|
+
setIsDropdownOpen(false);
|
|
3318
3322
|
}
|
|
3323
|
+
inputRef.current.value = "";
|
|
3319
3324
|
},
|
|
3320
3325
|
[addTag, multiple, upsertOptionLabels]
|
|
3321
3326
|
);
|
|
@@ -3358,18 +3363,11 @@ var LookupSelect = ({
|
|
|
3358
3363
|
});
|
|
3359
3364
|
}, [dropdownPortalElement]);
|
|
3360
3365
|
React25.useEffect(() => {
|
|
3361
|
-
if (!fetchSuggestions) return;
|
|
3366
|
+
if (!fetchSuggestions || !inputFocused) return;
|
|
3362
3367
|
if (fetchDelayRef.current) {
|
|
3363
3368
|
clearTimeout(fetchDelayRef.current);
|
|
3364
3369
|
}
|
|
3365
3370
|
const query = inputValue.trim();
|
|
3366
|
-
if (!query) {
|
|
3367
|
-
setSuggestions([]);
|
|
3368
|
-
setIsDropdownOpen(false);
|
|
3369
|
-
setLoading(false);
|
|
3370
|
-
setFetchError(null);
|
|
3371
|
-
return;
|
|
3372
|
-
}
|
|
3373
3371
|
setLoading(true);
|
|
3374
3372
|
setFetchError(null);
|
|
3375
3373
|
setIsDropdownOpen(true);
|
|
@@ -3397,7 +3395,7 @@ var LookupSelect = ({
|
|
|
3397
3395
|
clearTimeout(fetchDelayRef.current);
|
|
3398
3396
|
}
|
|
3399
3397
|
};
|
|
3400
|
-
}, [inputValue, fetchSuggestions, suggestionDebounce, upsertOptionLabels]);
|
|
3398
|
+
}, [inputValue, fetchSuggestions, suggestionDebounce, upsertOptionLabels, inputFocused]);
|
|
3401
3399
|
React25.useEffect(() => {
|
|
3402
3400
|
if (!fetchSuggestions) return;
|
|
3403
3401
|
if (value.length === 0) return;
|
|
@@ -3414,6 +3412,7 @@ var LookupSelect = ({
|
|
|
3414
3412
|
if (containerRef.current?.contains(target)) return;
|
|
3415
3413
|
if (dropdownContentRef.current?.contains(target)) return;
|
|
3416
3414
|
setIsDropdownOpen(false);
|
|
3415
|
+
setInputFocused(false);
|
|
3417
3416
|
};
|
|
3418
3417
|
document.addEventListener("mousedown", handleDocumentClick);
|
|
3419
3418
|
return () => {
|
|
@@ -3435,7 +3434,7 @@ var LookupSelect = ({
|
|
|
3435
3434
|
window.removeEventListener("resize", handleReposition);
|
|
3436
3435
|
window.removeEventListener("scroll", handleReposition, true);
|
|
3437
3436
|
};
|
|
3438
|
-
}, [dropdownPortalElement, isDropdownOpen, updateDropdownPosition]);
|
|
3437
|
+
}, [dropdownPortalElement, isDropdownOpen, updateDropdownPosition, value]);
|
|
3439
3438
|
React25.useEffect(() => {
|
|
3440
3439
|
if (suggestions.length === 0) {
|
|
3441
3440
|
setActiveSuggestionIndex(-1);
|
|
@@ -3490,7 +3489,7 @@ var LookupSelect = ({
|
|
|
3490
3489
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3491
3490
|
"span",
|
|
3492
3491
|
{
|
|
3493
|
-
className: "flex items-center gap-1 rounded-lg border border-
|
|
3492
|
+
className: "flex items-center gap-1 rounded-lg border border-sus-secondary-gray-3 bg-sus-secondary-gray-2 px-2 py-1 my-1 text-sm text-inherit max-w-full wrap-break-word",
|
|
3494
3493
|
children: [
|
|
3495
3494
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-pre-wrap break-all", children: label }),
|
|
3496
3495
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3518,9 +3517,7 @@ var LookupSelect = ({
|
|
|
3518
3517
|
onChange: (e) => setInputValue(e.target.value),
|
|
3519
3518
|
onKeyDown: handleKeyDown,
|
|
3520
3519
|
onFocus: () => {
|
|
3521
|
-
|
|
3522
|
-
setIsDropdownOpen(true);
|
|
3523
|
-
}
|
|
3520
|
+
setInputFocused(true);
|
|
3524
3521
|
},
|
|
3525
3522
|
hidden: !multiple && selectedLabel !== void 0,
|
|
3526
3523
|
placeholder: value.length === 0 && resolvedPlaceholder || "",
|