@sustaina/shared-ui 1.13.0 → 1.13.1

package/dist/index.d.mts

@@ -38,7 +38,6 @@ interface FieldSchemaBase<T extends FieldType> {
     type: T;
     label?: string;
     multiTableSearch?: boolean;
-    jsonPath?: string[];
 }
 interface DropdownFieldSchema extends FieldSchemaBase<"dropdown"> {
     options: Option[];
@@ -58,7 +57,15 @@ interface LookupFieldSchema extends FieldSchemaBase<"lookup"> {
     loadingMessage?: string;
 }
 type UUIDFieldSchema = FieldSchemaBase<"uuid">;
-type JSONFieldSchema = FieldSchemaBase<"json">;
+interface JSONFieldSchema extends FieldSchemaBase<"json"> {
+    jsonPath?: string[];
+    maxTags?: number;
+    fetchSuggestions?: (query: string) => Promise<Option[]>;
+    suggestionDebounce?: number;
+    placeholder?: string;
+    noOptionsMessage?: string;
+    loadingMessage?: string;
+}
 type FieldSchema = DropdownFieldSchema | TextFieldSchema | NumberFieldSchema | DateFieldSchema | DateTimeFieldSchema | DateMonthFieldSchema | CheckboxFieldSchema | LookupFieldSchema | UUIDFieldSchema | JSONFieldSchema;
 type OperatorValue = "contains" | "equals" | "beginsWith" | "endsWith" | "notEquals" | "notBeginsWith" | "notEndsWith" | "notContains" | "gt" | "gte" | "lt" | "lte" | "on" | "after" | "before" | "between" | "is" | "isNot" | "containsAny" | "containsOnly" | "containsAll";
 type RowState = {
@@ -66,7 +73,7 @@ type RowState = {
     fieldName: string;
     fieldType: FieldType;
     operator: Exclude<OperatorValue, "between">;
-    value: string;
+    value: string | any[];
     value2?: undefined;
     multiTableSearch?: boolean;
     jsonPath?: string[];

package/dist/index.d.ts

@@ -38,7 +38,6 @@ interface FieldSchemaBase<T extends FieldType> {
     type: T;
     label?: string;
     multiTableSearch?: boolean;
-    jsonPath?: string[];
 }
 interface DropdownFieldSchema extends FieldSchemaBase<"dropdown"> {
     options: Option[];
@@ -58,7 +57,15 @@ interface LookupFieldSchema extends FieldSchemaBase<"lookup"> {
     loadingMessage?: string;
 }
 type UUIDFieldSchema = FieldSchemaBase<"uuid">;
-type JSONFieldSchema = FieldSchemaBase<"json">;
+interface JSONFieldSchema extends FieldSchemaBase<"json"> {
+    jsonPath?: string[];
+    maxTags?: number;
+    fetchSuggestions?: (query: string) => Promise<Option[]>;
+    suggestionDebounce?: number;
+    placeholder?: string;
+    noOptionsMessage?: string;
+    loadingMessage?: string;
+}
 type FieldSchema = DropdownFieldSchema | TextFieldSchema | NumberFieldSchema | DateFieldSchema | DateTimeFieldSchema | DateMonthFieldSchema | CheckboxFieldSchema | LookupFieldSchema | UUIDFieldSchema | JSONFieldSchema;
 type OperatorValue = "contains" | "equals" | "beginsWith" | "endsWith" | "notEquals" | "notBeginsWith" | "notEndsWith" | "notContains" | "gt" | "gte" | "lt" | "lte" | "on" | "after" | "before" | "between" | "is" | "isNot" | "containsAny" | "containsOnly" | "containsAll";
 type RowState = {
@@ -66,7 +73,7 @@ type RowState = {
     fieldName: string;
     fieldType: FieldType;
     operator: Exclude<OperatorValue, "between">;
-    value: string;
+    value: string | any[];
     value2?: undefined;
     multiTableSearch?: boolean;
     jsonPath?: string[];

package/dist/index.js

@@ -641,7 +641,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
@@ -2475,6 +2475,7 @@ var LookupSelect = ({
   dropdownPortalId
 }) => {
   const [inputValue, setInputValue] = React4.useState("");
+  const inputRef = React4.useRef(null);
   const [suggestions, setSuggestions] = React4.useState([]);
   const [optionLabels, setOptionLabels] = React4.useState({});
   const [loading, setLoading] = React4.useState(false);
@@ -2553,6 +2554,10 @@ var LookupSelect = ({
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
+      inputRef.current?.focus();
+      setTimeout(() => {
+        inputRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 100);
     },
     [addTag, upsertOptionLabels]
   );
@@ -2694,9 +2699,10 @@ var LookupSelect = ({
                 `${tag}-${i}`
               );
             }),
-            /* @__PURE__ */ jsxRuntime.jsx(
+            !limitReached && /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
+                ref: inputRef,
                 type: "text",
                 value: inputValue,
                 onChange: (e) => setInputValue(e.target.value),
@@ -2712,7 +2718,7 @@ var LookupSelect = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end absolute inset-y-1 right-2 items-center gap-2 pointer-events-auto", children: value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 items-center justify-center text-inherit", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end items-center gap-2 pointer-events-auto h-fit", children: value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 items-center justify-center text-inherit", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-4 w-4" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
             ClearButton,
             {
               onClick: handleClear,
@@ -2725,7 +2731,7 @@ var LookupSelect = ({
     ),
     renderDropdown(),
     fetchError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-red-600", children: fetchError }),
-    limitReached && !fetchError && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-xs text-inherit", children: [
+    limitReached && !fetchError && maxTags !== 1 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-xs text-inherit", children: [
       "Maximum ",
       maxTags,
       " tags reached."
@@ -2775,6 +2781,58 @@ var ConditionLookupInput = ({
     }
   }
 );
+var ConditionJSONInput = ({
+  row,
+  control,
+  onClear,
+  fieldSchema,
+  dropdownPortalId
+}) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(FormItem, { className: "relative w-full overflow-x-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: fieldSchema?.fetchSuggestions ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FormMessage, { className: "absolute left-0 top-full mt-1 text-xs text-red-600" })
+      ] });
+    }
+  }
+);
 var ConditionValue = ({ row, fields, onClearValue, dropdownPortalId }) => {
   const { control } = reactHookForm.useFormContext();
   const fieldSchema = fields.find((f) => f.name === row.fieldName);
@@ -2810,6 +2868,18 @@ var ConditionValue = ({ row, fields, onClearValue, dropdownPortalId }) => {
           dropdownPortalId
         }
       );
+    case "json": {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ConditionJSONInput,
+        {
+          row,
+          control,
+          onClear: onClearValue,
+          fieldSchema,
+          dropdownPortalId
+        }
+      );
+    }
     default:
       return /* @__PURE__ */ jsxRuntime.jsx(ConditionTextInput, { row, control, onClear: onClearValue });
   }
@@ -3025,23 +3095,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 {};
     }
@@ -5755,9 +5822,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__ */ jsxRuntime.jsx(
@@ -5765,9 +5832,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__ */ jsxRuntime.jsx(
@@ -5775,9 +5842,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"
           }
         )
       ]