@sustaina/shared-ui 1.13.0 → 1.13.2

package/dist/index.mjs

@@ -604,7 +604,7 @@ var OPERATOR_MAP = {
   dropdown: ["is", "isNot"],
   lookup: ["containsAny", "containsOnly", "containsAll", "notContains"],
   uuid: ["equals", "notEquals", "gt", "gte", "lt", "lte"],
-  json: ["contains", "equals", "beginsWith", "endsWith"]
+  json: ["equals", "notEquals", "containsAny"]
 };
 
 // src/components/advanceSearch/hooks/useAdvanceSearch.ts
@@ -629,7 +629,19 @@ function makeNewRow(field) {
       value: "",
       value2: "",
       multiTableSearch: field.multiTableSearch,
-      jsonPath: field.jsonPath
+      lookupFieldName: field.lookupFieldName
+    };
+  }
+  if (field.type === "json") {
+    return {
+      id: crypto.randomUUID(),
+      fieldName: field.name,
+      fieldType: field.type,
+      operator: op,
+      value: "",
+      multiTableSearch: field.multiTableSearch,
+      jsonPath: field.jsonPath,
+      lookupFieldName: field.lookupFieldName
     };
   }
   return {
@@ -639,7 +651,7 @@ function makeNewRow(field) {
     operator: op,
     value: "",
     multiTableSearch: field.multiTableSearch,
-    jsonPath: field.jsonPath
+    lookupFieldName: field.lookupFieldName
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
@@ -681,7 +693,8 @@ function useAdvanceSearch({ fields, limitRows }) {
             value: "",
             value2: "",
             multiTableSearch: r.multiTableSearch,
-            jsonPath: r.jsonPath
+            jsonPath: r.jsonPath,
+            lookupFieldName: r.lookupFieldName
           } : {
             id: r.id,
             fieldName: r.fieldName,
@@ -689,7 +702,8 @@ function useAdvanceSearch({ fields, limitRows }) {
             operator: nextOp,
             value: "",
             multiTableSearch: r.multiTableSearch,
-            jsonPath: r.jsonPath
+            jsonPath: r.jsonPath,
+            lookupFieldName: r.lookupFieldName
           };
         })
       );
@@ -722,6 +736,7 @@ function useAdvanceSearch({ fields, limitRows }) {
               fieldName: r.fieldName,
               fieldType: r.fieldType,
               multiTableSearch: r.multiTableSearch,
+              lookupFieldName: r.lookupFieldName,
               jsonPath: r.jsonPath,
               operator,
               value: "",
@@ -733,6 +748,7 @@ function useAdvanceSearch({ fields, limitRows }) {
             fieldName: r.fieldName,
             fieldType: r.fieldType,
             multiTableSearch: r.multiTableSearch,
+            lookupFieldName: r.lookupFieldName,
             jsonPath: r.jsonPath,
             operator,
             value: ""
@@ -2438,6 +2454,7 @@ var LookupSelect = ({
   dropdownPortalId
 }) => {
   const [inputValue, setInputValue] = useState("");
+  const inputRef = useRef(null);
   const [suggestions, setSuggestions] = useState([]);
   const [optionLabels, setOptionLabels] = useState({});
   const [loading, setLoading] = useState(false);
@@ -2516,6 +2533,10 @@ var LookupSelect = ({
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
+      inputRef.current?.focus();
+      setTimeout(() => {
+        inputRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 100);
     },
     [addTag, upsertOptionLabels]
   );
@@ -2657,9 +2678,10 @@ var LookupSelect = ({
                 `${tag}-${i}`
               );
             }),
-            /* @__PURE__ */ jsx(
+            !limitReached && /* @__PURE__ */ jsx(
               "input",
               {
+                ref: inputRef,
                 type: "text",
                 value: inputValue,
                 onChange: (e) => setInputValue(e.target.value),
@@ -2675,7 +2697,7 @@ var LookupSelect = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex justify-end absolute inset-y-1 right-2 items-center gap-2 pointer-events-auto", children: value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 items-center justify-center text-inherit", children: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end items-center gap-2 pointer-events-auto h-fit", children: value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 items-center justify-center text-inherit", children: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsx(
             ClearButton,
             {
               onClick: handleClear,
@@ -2688,7 +2710,7 @@ var LookupSelect = ({
     ),
     renderDropdown(),
     fetchError && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-red-600", children: fetchError }),
-    limitReached && !fetchError && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-inherit", children: [
+    limitReached && !fetchError && maxTags !== 1 && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-inherit", children: [
       "Maximum ",
       maxTags,
       " tags reached."
@@ -2738,6 +2760,58 @@ var ConditionLookupInput = ({
     }
   }
 );
+var ConditionJSONInput = ({
+  row,
+  control,
+  onClear,
+  fieldSchema,
+  dropdownPortalId
+}) => /* @__PURE__ */ jsx(
+  FormField,
+  {
+    control,
+    name: `value_${row.id}`,
+    rules: { required: "This field is required." },
+    render: ({ field, fieldState }) => {
+      const value = Array.isArray(field.value) ? field.value : [];
+      const handleChange = (tags) => {
+        field.onChange(tags);
+      };
+      const handleClear = () => {
+        field.onChange([]);
+        onClear("value");
+      };
+      return /* @__PURE__ */ jsxs(FormItem, { className: "relative w-full overflow-x-hidden", children: [
+        /* @__PURE__ */ jsx(FormControl, { children: fieldSchema?.fetchSuggestions ? /* @__PURE__ */ jsx(
+          LookupSelect,
+          {
+            value,
+            onChange: handleChange,
+            onClear: handleClear,
+            error: Boolean(fieldState.error),
+            placeholder: fieldSchema?.placeholder,
+            maxTags: row.operator === "containsAny" ? fieldSchema?.maxTags : 1,
+            fetchSuggestions: fieldSchema?.fetchSuggestions,
+            suggestionDebounce: fieldSchema?.suggestionDebounce,
+            noOptionsMessage: fieldSchema?.noOptionsMessage,
+            loadingMessage: fieldSchema?.loadingMessage,
+            dropdownPortalId
+          }
+        ) : /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...field,
+            value: field.value ?? "",
+            autoComplete: "off",
+            inputMode: "text",
+            className: "w-full h-9 rounded-md bg-white pr-8 text-sm text-gray-700 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormMessage, { className: "absolute left-0 top-full mt-1 text-xs text-red-600" })
+      ] });
+    }
+  }
+);
 var ConditionValue = ({ row, fields, onClearValue, dropdownPortalId }) => {
   const { control } = useFormContext();
   const fieldSchema = fields.find((f) => f.name === row.fieldName);
@@ -2773,6 +2847,18 @@ var ConditionValue = ({ row, fields, onClearValue, dropdownPortalId }) => {
           dropdownPortalId
         }
       );
+    case "json": {
+      return /* @__PURE__ */ jsx(
+        ConditionJSONInput,
+        {
+          row,
+          control,
+          onClear: onClearValue,
+          fieldSchema,
+          dropdownPortalId
+        }
+      );
+    }
     default:
       return /* @__PURE__ */ jsx(ConditionTextInput, { row, control, onClear: onClearValue });
   }
@@ -2988,23 +3074,20 @@ var DropdownBuilder = class {
 // src/components/advanceSearch/builder/json.ts
 var JSONBuilder = class {
   build(row) {
+    const isArray = Array.isArray(row.value);
     switch (row.operator) {
-      case "contains":
-        return { [row.fieldName]: { path: row.jsonPath, string_contains: row.value } };
       case "equals":
-        return { [row.fieldName]: { path: row.jsonPath, equals: row.value } };
-      case "beginsWith":
-        return { [row.fieldName]: { path: row.jsonPath, string_starts_with: row.value } };
-      case "endsWith":
-        return { [row.fieldName]: { path: row.jsonPath, string_ends_with: row.value } };
-      case "notContains":
-        return { [row.fieldName]: { path: row.jsonPath, not: { string_contains: row.value } } };
+        return { [row.fieldName]: { path: row.jsonPath, equals: isArray ? row.value[0] : row.value } };
       case "notEquals":
-        return { [row.fieldName]: { path: row.jsonPath, not: { equals: row.value } } };
-      case "notBeginsWith":
-        return { [row.fieldName]: { path: row.jsonPath, not: { string_starts_with: row.value } } };
-      case "notEndsWith":
-        return { [row.fieldName]: { path: row.jsonPath, not: { string_ends_with: row.value } } };
+        return {
+          NOT: { [row.fieldName]: { path: row.jsonPath, equals: isArray ? row.value[0] : row.value } }
+        };
+      case "containsAny":
+        if (!isArray)
+          return { [row.fieldName]: { path: row.jsonPath, equals: isArray ? row.value[0] : row.value } };
+        return {
+          OR: row.value.map((v) => ({ [row.fieldName]: { path: row.jsonPath, equals: v } }))
+        };
       default:
         return {};
     }
@@ -3014,40 +3097,29 @@ var JSONBuilder = class {
 // src/components/advanceSearch/builder/lookup.ts
 var LookupBuilder = class {
   build(row) {
+    if (!Array.isArray(row.value)) {
+      return {};
+    }
+    const lookupField = row.lookupFieldName ?? "id";
     switch (row.operator) {
       case "containsAny":
         return {
-          [row.fieldName]: helper(
-            { hasSome: String(row.value).split(",") },
-            { multiTableSearch: row.multiTableSearch }
-          )
+          OR: row.value.map((v) => ({ [row.fieldName]: { some: { [lookupField]: v } } }))
         };
-      case "containsAll":
+      case "containsOnly":
         return {
-          [row.fieldName]: helper(
-            { hasEvery: String(row.value).split(",") },
-            { multiTableSearch: row.multiTableSearch }
-          )
+          AND: row.value.map((v) => ({ [row.fieldName]: { some: { [lookupField]: v } } }))
         };
-      case "containsOnly":
+      case "containsAll": {
+        const includes = row.value.map((v) => ({ [row.fieldName]: { some: { [lookupField]: v } } }));
+        const excludes = { [row.fieldName]: { none: { [lookupField]: { notIn: row.value } } } };
         return {
-          [row.fieldName]: helper(
-            { equals: String(row.value).split(",") },
-            {
-              multiTableSearch: row.multiTableSearch,
-              insensitive: true
-            }
-          )
+          AND: [...includes, excludes]
         };
+      }
       case "notContains":
         return {
-          [row.fieldName]: helper(
-            { not: { contains: row.value } },
-            {
-              multiTableSearch: row.multiTableSearch,
-              insensitive: true
-            }
-          )
+          NOT: { OR: row.value.map((v) => ({ [row.fieldName]: { some: { [lookupField]: v } } })) }
         };
       default:
         return {};
@@ -5718,9 +5790,9 @@ var InfoIcon = (props) => {
           {
             d: "M10.0013 18.3327C14.6037 18.3327 18.3346 14.6017 18.3346 9.99935C18.3346 5.39698 14.6037 1.66602 10.0013 1.66602C5.39893 1.66602 1.66797 5.39698 1.66797 9.99935C1.66797 14.6017 5.39893 18.3327 10.0013 18.3327Z",
             stroke: "white",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -5728,9 +5800,9 @@ var InfoIcon = (props) => {
           {
             d: "M10 13.3333V10",
             stroke: "white",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -5738,9 +5810,9 @@ var InfoIcon = (props) => {
           {
             d: "M10 6.66602H10.0083",
             stroke: "white",
-            "stroke-width": "1.5",
-            "stroke-linecap": "round",
-            "stroke-linejoin": "round"
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         )
       ]