@sustaina/shared-ui 1.26.0 → 1.27.0

package/dist/index.mjs

@@ -2447,7 +2447,10 @@ var ConditionDropdownInput = ({ row, control, fieldSchema, onClear }) => /* @__P
               children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select value" })
             }
           ) }),
-          /* @__PURE__ */ jsx(SelectContent, { className: "w-full min-w-[unset]", children: fieldSchema && "options" in fieldSchema && fieldSchema.options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+          /* @__PURE__ */ jsx(SelectContent, { className: "w-full min-w-[unset]", children: fieldSchema && "options" in fieldSchema && fieldSchema.options.map((opt) => /* @__PURE__ */ jsxs(SelectItem, { value: opt.value, className: cn(opt.labelStyle), children: [
+            opt.decorator,
+            opt.label
+          ] }, opt.value)) })
         ] }),
         hasValue && /* @__PURE__ */ jsx(
           ClearButton,
@@ -2518,7 +2521,8 @@ var LookupSelect = ({
   suggestionDebounce = 250,
   noOptionsMessage = "No records found. Please try a different search.",
   loadingMessage = "Loading...",
-  dropdownPortalId
+  dropdownPortalId,
+  multiple = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const inputRef = useRef(null);
@@ -2535,6 +2539,7 @@ var LookupSelect = ({
   const assignDropdownContentRef = useCallback((node) => {
     dropdownContentRef.current = node;
   }, []);
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(-1);
   const dropdownPortalElement = useMemo(() => {
     if (typeof document === "undefined") return null;
     if (dropdownPortalId) {
@@ -2543,7 +2548,9 @@ var LookupSelect = ({
     }
     return document.body;
   }, [dropdownPortalId]);
-  const limitReached = value.length >= maxTags;
+  const limitReached = multiple && value.length >= maxTags;
+  const selectedValue = !multiple && value.length > 0 ? value[0] : void 0;
+  const selectedLabel = selectedValue ? optionLabels[selectedValue] ?? selectedValue : void 0;
   const upsertOptionLabels = useCallback((options) => {
     setOptionLabels((prev) => {
       let next = null;
@@ -2562,13 +2569,17 @@ var LookupSelect = ({
       const trimmed = val.trim();
       if (!trimmed) return;
       if (value.includes(trimmed)) return;
-      if (value.length >= maxTags) return;
-      onChange([...value, trimmed]);
+      if (multiple) {
+        if (value.length >= maxTags) return;
+        onChange([...value, trimmed]);
+      } else {
+        onChange([trimmed]);
+      }
       setInputValue("");
       setSuggestions([]);
       setIsDropdownOpen(false);
     },
-    [value, onChange, maxTags]
+    [value, onChange, maxTags, multiple]
   );
   const removeTag = useCallback(
     (index) => {
@@ -2578,17 +2589,6 @@ var LookupSelect = ({
     },
     [value, onChange]
   );
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Enter" || e.key === ",") {
-        e.preventDefault();
-      }
-      if (e.key === "Backspace" && !inputValue) {
-        removeTag(value.length - 1);
-      }
-    },
-    [inputValue, removeTag, value.length]
-  );
   const handleClear = useCallback(() => {
     setInputValue("");
     setSuggestions([]);
@@ -2607,6 +2607,33 @@ var LookupSelect = ({
     },
     [addTag, upsertOptionLabels]
   );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown" && suggestions.length > 0) {
+        e.preventDefault();
+        setIsDropdownOpen(true);
+        setActiveSuggestionIndex((prev) => Math.min(prev + 1, suggestions.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp" && suggestions.length > 0) {
+        e.preventDefault();
+        setActiveSuggestionIndex((prev) => Math.max(prev - 1, 0));
+        return;
+      }
+      if (e.key === "Enter" && activeSuggestionIndex >= 0 && suggestions[activeSuggestionIndex]) {
+        e.preventDefault();
+        handleSuggestionSelect(suggestions[activeSuggestionIndex]);
+        return;
+      }
+      if (e.key === "," || e.key === "Enter") {
+        e.preventDefault();
+      }
+      if (e.key === "Backspace" && !inputValue) {
+        removeTag(value.length - 1);
+      }
+    },
+    [suggestions, activeSuggestionIndex, handleSuggestionSelect, inputValue, removeTag, value.length]
+  );
   const updateDropdownPosition = useCallback(() => {
     if (!dropdownPortalElement || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
@@ -2633,6 +2660,7 @@ var LookupSelect = ({
     }
     setLoading(true);
     setFetchError(null);
+    setIsDropdownOpen(true);
     const requestId = ++requestIdRef.current;
     fetchDelayRef.current = setTimeout(() => {
       fetchSuggestions(query).then((items) => {
@@ -2686,21 +2714,33 @@ var LookupSelect = ({
       window.removeEventListener("scroll", handleReposition, true);
     };
   }, [dropdownPortalElement, isDropdownOpen, updateDropdownPosition]);
+  useEffect(() => {
+    if (suggestions.length === 0) {
+      setActiveSuggestionIndex(-1);
+      return;
+    }
+    setActiveSuggestionIndex((prev) => {
+      if (prev === -1) return 0;
+      if (prev >= suggestions.length) return suggestions.length - 1;
+      return prev;
+    });
+  }, [suggestions]);
   const resolvedPlaceholder = placeholder2 ?? "Select";
   const showDropdown = isDropdownOpen && !fetchError;
   const dropdownContent = /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg", children: loading ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-inherit", children: loadingMessage }) : suggestions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-3 py-4 text-sm text-inherit text-center", children: [
-    /* @__PURE__ */ jsx(not_found_default, { className: "w-full max-w-[80px] h-auto" }),
+    /* @__PURE__ */ jsx(not_found_default, { className: "w-full max-w-20 h-auto" }),
     /* @__PURE__ */ jsx("span", { className: "pt-3", children: noOptionsMessage })
-  ] }) : /* @__PURE__ */ jsx("ul", { className: "max-h-48 overflow-y-auto py-1", children: suggestions.map((option) => {
-    const disabled = value.includes(option.value) || limitReached;
+  ] }) : /* @__PURE__ */ jsx("ul", { className: "max-h-48 overflow-y-auto py-1", children: suggestions.map((option, index) => {
+    const disabled = value.includes(option.value) || multiple && limitReached;
     return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: `flex w-full items-center justify-between px-3 py-2 text-left text-sm transition hover:bg-gray-100
-                  ${disabled ? "cursor-not-allowed text-gray-400" : "text-gray-700"}`,
+        className: `flex w-full items-center justify-between px-3 py-2 text-left text-sm transition
+                  ${disabled ? "cursor-not-allowed text-gray-400" : index === activeSuggestionIndex ? "bg-gray-100 text-gray-900" : "hover:bg-gray-100 text-gray-700"}`,
         onClick: () => handleSuggestionSelect(option),
         disabled,
+        "aria-selected": index === activeSuggestionIndex,
         children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
       }
     ) }, option.value);
@@ -2719,16 +2759,16 @@ var LookupSelect = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `flex min-h-[36px] items-center gap-3 rounded-md border bg-white px-3 transition-all 
+        className: `flex min-h-9 items-center gap-3 rounded-md border bg-white px-3 transition-all 
     ${error ? "border-red-500 focus-within:ring-red-500" : "border-gray-300 "}`,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-wrap content-start gap-1 overflow-y-auto max-h-[72px] hide-scrollbar pr-4", children: [
-            value.map((tag, i) => {
+            multiple && value.map((tag, i) => {
               const label = optionLabels[tag] ?? tag;
               return /* @__PURE__ */ jsxs(
                 "span",
                 {
-                  className: "flex items-center gap-1 rounded-lg border border-[#f0f0f0] bg-[#f9f9f9] px-2 py-1 my-1 text-sm text-inherit max-w-full break-words",
+                  className: "flex items-center gap-1 rounded-lg border border-[#f0f0f0] bg-[#f9f9f9] px-2 py-1 my-1 text-sm text-inherit max-w-full wrap-break-word",
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap break-all", children: label }),
                     /* @__PURE__ */ jsx(
@@ -2737,6 +2777,7 @@ var LookupSelect = ({
                         type: "button",
                         onClick: () => removeTag(i),
                         className: "text-inherit transition hover:text-red-500",
+                        "aria-label": `Remove ${label}`,
                         children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
                       }
                     )
@@ -2745,7 +2786,8 @@ var LookupSelect = ({
                 `${tag}-${i}`
               );
             }),
-            !limitReached && /* @__PURE__ */ jsx(
+            !multiple && selectedLabel && /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-gray-700", children: selectedLabel }),
+            /* @__PURE__ */ jsx(
               "input",
               {
                 ref: inputRef,
@@ -2760,7 +2802,7 @@ var LookupSelect = ({
                 },
                 placeholder: value.length === 0 && resolvedPlaceholder || "",
                 className: "min-w-[120px] flex-1 border-none bg-transparent py-1 text-sm text-gray-600 placeholder:text-gray-400 outline-none",
-                disabled: limitReached
+                disabled: multiple && limitReached
               }
             )
           ] }),
@@ -2820,7 +2862,8 @@ var ConditionLookupInput = ({
             noOptionsMessage: fieldSchema?.noOptionsMessage,
             loadingMessage: fieldSchema?.loadingMessage,
             dropdownPortalId,
-            "data-testid": "advsearch-lookup-list"
+            "data-testid": "advsearch-lookup-list",
+            multiple: true
           }
         ) }),
         /* @__PURE__ */ jsx(FormMessage, { className: "absolute left-0 top-full mt-1 text-xs text-red-600" })