@sustaina/shared-ui 1.13.0 → 1.13.1

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
@@ -2438,6 +2438,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 +2517,10 @@ var LookupSelect = ({
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
+      inputRef.current?.focus();
+      setTimeout(() => {
+        inputRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 100);
     },
     [addTag, upsertOptionLabels]
   );
@@ -2657,9 +2662,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 +2681,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 +2694,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 +2744,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 +2831,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 +3058,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 {};
     }
@@ -5718,9 +5785,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 +5795,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 +5805,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"
           }
         )
       ]