@sustaina/shared-ui 1.13.0 → 1.13.2

package/dist/index.d.mts

@@ -38,7 +38,7 @@ interface FieldSchemaBase<T extends FieldType> {
     type: T;
     label?: string;
     multiTableSearch?: boolean;
-    jsonPath?: string[];
+    lookupFieldName?: string;
 }
 interface DropdownFieldSchema extends FieldSchemaBase<"dropdown"> {
     options: Option[];
@@ -58,7 +58,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,10 +74,11 @@ type RowState = {
     fieldName: string;
     fieldType: FieldType;
     operator: Exclude<OperatorValue, "between">;
-    value: string;
+    value: string | any[];
     value2?: undefined;
     multiTableSearch?: boolean;
     jsonPath?: string[];
+    lookupFieldName?: string;
 } | {
     id: string;
     fieldName: string;
@@ -79,6 +88,7 @@ type RowState = {
     value2: string;
     multiTableSearch?: boolean;
     jsonPath?: string[];
+    lookupFieldName?: string;
 };
 interface Params {
     AND: Record<string, unknown>[];

package/dist/index.d.ts

@@ -38,7 +38,7 @@ interface FieldSchemaBase<T extends FieldType> {
     type: T;
     label?: string;
     multiTableSearch?: boolean;
-    jsonPath?: string[];
+    lookupFieldName?: string;
 }
 interface DropdownFieldSchema extends FieldSchemaBase<"dropdown"> {
     options: Option[];
@@ -58,7 +58,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,10 +74,11 @@ type RowState = {
     fieldName: string;
     fieldType: FieldType;
     operator: Exclude<OperatorValue, "between">;
-    value: string;
+    value: string | any[];
     value2?: undefined;
     multiTableSearch?: boolean;
     jsonPath?: string[];
+    lookupFieldName?: string;
 } | {
     id: string;
     fieldName: string;
@@ -79,6 +88,7 @@ type RowState = {
     value2: string;
     multiTableSearch?: boolean;
     jsonPath?: string[];
+    lookupFieldName?: string;
 };
 interface Params {
     AND: Record<string, unknown>[];

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
@@ -666,7 +666,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 {
@@ -676,7 +688,7 @@ function makeNewRow(field) {
     operator: op,
     value: "",
     multiTableSearch: field.multiTableSearch,
-    jsonPath: field.jsonPath
+    lookupFieldName: field.lookupFieldName
   };
 }
 function useAdvanceSearch({ fields, limitRows }) {
@@ -718,7 +730,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,
@@ -726,7 +739,8 @@ function useAdvanceSearch({ fields, limitRows }) {
             operator: nextOp,
             value: "",
             multiTableSearch: r.multiTableSearch,
-            jsonPath: r.jsonPath
+            jsonPath: r.jsonPath,
+            lookupFieldName: r.lookupFieldName
           };
         })
       );
@@ -759,6 +773,7 @@ function useAdvanceSearch({ fields, limitRows }) {
               fieldName: r.fieldName,
               fieldType: r.fieldType,
               multiTableSearch: r.multiTableSearch,
+              lookupFieldName: r.lookupFieldName,
               jsonPath: r.jsonPath,
               operator,
               value: "",
@@ -770,6 +785,7 @@ function useAdvanceSearch({ fields, limitRows }) {
             fieldName: r.fieldName,
             fieldType: r.fieldType,
             multiTableSearch: r.multiTableSearch,
+            lookupFieldName: r.lookupFieldName,
             jsonPath: r.jsonPath,
             operator,
             value: ""
@@ -2475,6 +2491,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 +2570,10 @@ var LookupSelect = ({
     (option) => {
       upsertOptionLabels([option]);
       addTag(option.value);
+      inputRef.current?.focus();
+      setTimeout(() => {
+        inputRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 100);
     },
     [addTag, upsertOptionLabels]
   );
@@ -2694,9 +2715,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 +2734,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 +2747,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 +2797,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 +2884,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 +3111,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 {};
     }
@@ -3051,40 +3134,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 {};
@@ -5755,9 +5827,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 +5837,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 +5847,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"
           }
         )
       ]