@sustaina/shared-ui 1.25.0 → 1.27.0

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;
 };
@@ -568,6 +570,7 @@ type FormulaEditorProps = {
     onSelectSuggestion?: (token: FormulaTokenAttributes, config: FormulaTokenConfig) => void;
     field?: ControllerRenderProps<any, any>;
     fieldState?: ControllerFieldState;
+    mode?: "edit" | "display";
 };
 
 declare const FormulaEditor: React__default.FC<FormulaEditorProps>;
@@ -834,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;
 };
@@ -568,6 +570,7 @@ type FormulaEditorProps = {
     onSelectSuggestion?: (token: FormulaTokenAttributes, config: FormulaTokenConfig) => void;
     field?: ControllerRenderProps<any, any>;
     fieldState?: ControllerFieldState;
+    mode?: "edit" | "display";
 };
 
 declare const FormulaEditor: React__default.FC<FormulaEditorProps>;
@@ -834,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" })
@@ -6305,7 +6348,8 @@ var FormulaEditor = ({
   onChange,
   onSelectSuggestion,
   field,
-  fieldState
+  fieldState,
+  mode = "edit"
 }) => {
   const [isExpanded, setIsExpanded] = React4.useState(false);
   const lastEmittedValueRef = React4.useRef(null);
@@ -6322,27 +6366,22 @@ var FormulaEditor = ({
   const prefixMap = React4.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
   const configLookup = React4.useMemo(() => {
     const lookup = /* @__PURE__ */ new Map();
-    normalizedConfigs.forEach((config) => {
-      lookup.set(config.prefix, config);
-    });
+    normalizedConfigs.forEach((config) => lookup.set(config.prefix, config));
     return lookup;
   }, [normalizedConfigs]);
   const allowedOperators = React4.useMemo(() => operators.map((operator) => operator.value), [operators]);
   const displayError = errorMessage ?? fieldState?.error?.message;
   const hasError = Boolean(displayError);
-  const isInteractionDisabled = Boolean(disabled || loading);
+  const isEditorReadOnly = mode === "display";
+  const isEditorDisabled = disabled || loading || isEditorReadOnly;
   const convertValueToContent = React4.useCallback(
     (input) => {
       if (!input) return "";
       const trimmed = input.trim();
       if (!trimmed) return "";
       const parsedJSON = tryParseJSON(trimmed);
-      if (parsedJSON && parsedJSON.type === "doc") {
-        return parsedJSON;
-      }
-      if (looksLikeHTML(trimmed)) {
-        return input;
-      }
+      if (parsedJSON && parsedJSON.type === "doc") return parsedJSON;
+      if (looksLikeHTML(trimmed)) return input;
       return buildDocFromRaw(input, prefixMap, configLookup);
     },
     [configLookup, prefixMap]
@@ -6373,7 +6412,7 @@ var FormulaEditor = ({
           hasError ? "border border-destructive" : "border focus-visible:border-ring",
           "w-full rounded-lg bg-white px-4 py-3",
           "overflow-y-auto whitespace-pre-wrap wrap-break-word focus:outline-none",
-          isInteractionDisabled && "pointer-events-none opacity-60",
+          isEditorDisabled && "pointer-events-none",
           editorClassName
         ),
         ...loading ? { "aria-busy": "true" } : {}
@@ -6382,8 +6421,8 @@ var FormulaEditor = ({
   });
   React4.useEffect(() => {
     if (!editor) return;
-    editor.setEditable(!isInteractionDisabled);
-  }, [editor, isInteractionDisabled]);
+    editor.setEditable(!isEditorDisabled);
+  }, [editor, isEditorDisabled]);
   React4.useEffect(() => {
     if (!editor || resolvedContent === void 0) return;
     if (ignorePropValueRef.current && typeof value === "string" && value === lastEmittedValueRef.current) {
@@ -6417,9 +6456,7 @@ var FormulaEditor = ({
         className: "relative",
         "aria-busy": loading,
         onFocus: () => {
-          if (editor && !editor.isFocused) {
-            editor.chain().focus().run();
-          }
+          if (editor && !editor.isFocused) editor.chain().focus().run();
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }),
@@ -6431,14 +6468,14 @@ var FormulaEditor = ({
               spinnerClassName: "size-6 text-sus-blue-3"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !isEditorReadOnly && /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
               type: "button",
               variant: "ghost",
               size: "icon",
               className: "absolute bottom-2 right-4 h-6 w-6 rounded-full bg-white shadow",
-              disabled: isInteractionDisabled,
+              disabled: isEditorDisabled,
               onClick: () => setIsExpanded((prev) => !prev),
               children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-4 w-4" })
             }
@@ -6447,13 +6484,13 @@ var FormulaEditor = ({
       }
     ),
     hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", role: "alert", children: displayError }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-end gap-2 py-2", children: operators.map((operator) => /* @__PURE__ */ jsxRuntime.jsx(
+    mode === "edit" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-end gap-2 py-2", children: operators.map((operator) => /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         type: "button",
         onClick: () => insertOperator(operator.value),
         className: "min-w-10 rounded-sm px-3 bg-sus-blue-3",
-        disabled: isInteractionDisabled,
+        disabled: isEditorDisabled,
         children: operator.label
       },
       operator.value