@sustaina/shared-ui 1.26.0 → 1.27.1

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { CSSProperties, ReactNode, SVGProps } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ClassValue } from 'clsx';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import { VariantProps } from 'class-variance-authority';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -24,7 +25,6 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { CropperProps, Area } from 'react-easy-crop';
 import { NumericFormatProps } from 'react-number-format';
-import { ClassValue } from 'clsx';
 
 declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
@@ -33,6 +33,8 @@ declare function AccordionContent({ className, children, ...props }: React$1.Com
 
 type FieldType = "text" | "number" | "date" | "datetime" | "datemonth" | "checkbox" | "dropdown" | "lookup" | "uuid" | "json";
 type Option = {
+    decorator?: React.ReactNode;
+    labelStyle?: ClassValue;
     value: string;
     label: string;
 };
@@ -835,6 +837,7 @@ interface LookupSelectProps {
     noOptionsMessage?: string;
     loadingMessage?: string;
     dropdownPortalId?: string;
+    multiple?: boolean;
 }
 declare const LookupSelect: React__default.FC<LookupSelectProps>;
 

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { CSSProperties, ReactNode, SVGProps } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ClassValue } from 'clsx';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import { VariantProps } from 'class-variance-authority';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -24,7 +25,6 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { CropperProps, Area } from 'react-easy-crop';
 import { NumericFormatProps } from 'react-number-format';
-import { ClassValue } from 'clsx';
 
 declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
@@ -33,6 +33,8 @@ declare function AccordionContent({ className, children, ...props }: React$1.Com
 
 type FieldType = "text" | "number" | "date" | "datetime" | "datemonth" | "checkbox" | "dropdown" | "lookup" | "uuid" | "json";
 type Option = {
+    decorator?: React.ReactNode;
+    labelStyle?: ClassValue;
     value: string;
     label: string;
 };
@@ -835,6 +837,7 @@ interface LookupSelectProps {
     noOptionsMessage?: string;
     loadingMessage?: string;
     dropdownPortalId?: string;
+    multiple?: boolean;
 }
 declare const LookupSelect: React__default.FC<LookupSelectProps>;
 

package/dist/index.js

@@ -2487,7 +2487,10 @@ var ConditionDropdownInput = ({ row, control, fieldSchema, onClear }) => /* @__P
               children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select value" })
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "w-full min-w-[unset]", children: fieldSchema && "options" in fieldSchema && fieldSchema.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "w-full min-w-[unset]", children: fieldSchema && "options" in fieldSchema && fieldSchema.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: opt.value, className: cn(opt.labelStyle), children: [
+            opt.decorator,
+            opt.label
+          ] }, opt.value)) })
         ] }),
         hasValue && /* @__PURE__ */ jsxRuntime.jsx(
           ClearButton,
@@ -2558,7 +2561,8 @@ var LookupSelect = ({
   suggestionDebounce = 250,
   noOptionsMessage = "No records found. Please try a different search.",
   loadingMessage = "Loading...",
-  dropdownPortalId
+  dropdownPortalId,
+  multiple = false
 }) => {
   const [inputValue, setInputValue] = React4.useState("");
   const inputRef = React4.useRef(null);
@@ -2575,6 +2579,7 @@ var LookupSelect = ({
   const assignDropdownContentRef = React4.useCallback((node) => {
     dropdownContentRef.current = node;
   }, []);
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = React4.useState(-1);
   const dropdownPortalElement = React4.useMemo(() => {
     if (typeof document === "undefined") return null;
     if (dropdownPortalId) {
@@ -2583,7 +2588,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 = React4.useCallback((options) => {
     setOptionLabels((prev) => {
       let next = null;
@@ -2602,13 +2609,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 = React4.useCallback(
     (index) => {
@@ -2618,17 +2629,6 @@ var LookupSelect = ({
     },
     [value, onChange]
   );
-  const handleKeyDown = React4.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 = React4.useCallback(() => {
     setInputValue("");
     setSuggestions([]);
@@ -2647,6 +2647,33 @@ var LookupSelect = ({
     },
     [addTag, upsertOptionLabels]
   );
+  const handleKeyDown = React4.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 = React4.useCallback(() => {
     if (!dropdownPortalElement || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
@@ -2673,6 +2700,7 @@ var LookupSelect = ({
     }
     setLoading(true);
     setFetchError(null);
+    setIsDropdownOpen(true);
     const requestId = ++requestIdRef.current;
     fetchDelayRef.current = setTimeout(() => {
       fetchSuggestions(query).then((items) => {
@@ -2726,21 +2754,33 @@ var LookupSelect = ({
       window.removeEventListener("scroll", handleReposition, true);
     };
   }, [dropdownPortalElement, isDropdownOpen, updateDropdownPosition]);
+  React4.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__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-inherit", children: loadingMessage }) : suggestions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center px-3 py-4 text-sm text-inherit text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(not_found_default, { className: "w-full max-w-[80px] h-auto" }),
+    /* @__PURE__ */ jsxRuntime.jsx(not_found_default, { className: "w-full max-w-20 h-auto" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pt-3", children: noOptionsMessage })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "max-h-48 overflow-y-auto py-1", children: suggestions.map((option) => {
-    const disabled = value.includes(option.value) || limitReached;
+  ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
       }
     ) }, option.value);
@@ -2759,16 +2799,16 @@ var LookupSelect = ({
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "whitespace-pre-wrap break-all", children: label }),
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2777,6 +2817,7 @@ var LookupSelect = ({
                         type: "button",
                         onClick: () => removeTag(i),
                         className: "text-inherit transition hover:text-red-500",
+                        "aria-label": `Remove ${label}`,
                         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
                       }
                     )
@@ -2785,7 +2826,8 @@ var LookupSelect = ({
                 `${tag}-${i}`
               );
             }),
-            !limitReached && /* @__PURE__ */ jsxRuntime.jsx(
+            !multiple && selectedLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm text-gray-700", children: selectedLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
                 ref: inputRef,
@@ -2800,7 +2842,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
               }
             )
           ] }),
@@ -2860,7 +2902,8 @@ var ConditionLookupInput = ({
             noOptionsMessage: fieldSchema?.noOptionsMessage,
             loadingMessage: fieldSchema?.loadingMessage,
             dropdownPortalId,
-            "data-testid": "advsearch-lookup-list"
+            "data-testid": "advsearch-lookup-list",
+            multiple: true
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: "absolute left-0 top-full mt-1 text-xs text-red-600" })