@sustaina/shared-ui 1.6.1 → 1.6.3

package/dist/index.mjs

@@ -869,15 +869,33 @@ var DataTable = ({
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
   const fetchMoreOnScrollReached = useCallback(
     (containerRefElement) => {
-      if (!scrollFetch?.enabled) {
+      if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
         return;
       }
-      if (containerRefElement) {
-        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-        const threshold = 1.5;
-        if (scrollHeight - scrollTop - clientHeight < clientHeight * threshold && !scrollFetch?.isFetchingMore && scrollFetch?.hasMore && scrollFetch?.fetchMore) {
-          scrollFetch.fetchMore();
-        }
+      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+      const scrollableHeight = scrollHeight - clientHeight;
+      const distanceToBottom = scrollHeight - clientHeight - scrollTop;
+      const ratioToBottom = scrollableHeight > 0 ? scrollTop / scrollableHeight : 1;
+      const info = {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        scrollableHeight,
+        distanceToBottom,
+        ratioToBottom,
+        isTopReached: scrollTop === 0,
+        isBottomReached: distanceToBottom <= 0
+      };
+      let shouldTrigger = false;
+      if (typeof scrollFetch.scrollThreshold === "number") {
+        shouldTrigger = info.ratioToBottom >= scrollFetch.scrollThreshold;
+      } else if (typeof scrollFetch.scrollThreshold === "function") {
+        shouldTrigger = scrollFetch.scrollThreshold(info);
+      } else {
+        shouldTrigger = info.ratioToBottom >= 0.7;
+      }
+      if (shouldTrigger) {
+        scrollFetch.fetchMore();
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1907,9 +1925,11 @@ var Navbar = ({
   subTitle,
   headImageURL = "",
   headImageURLClassName,
+  tooltipContentClassName = "md:w-[350px] lg:w-[420px]",
   tooltipTitle,
   tooltipIcon,
   tooltipdescription = [],
+  tooltipDescriptionWrapperClassName,
   mainButtonText,
   mainButtonClassName,
   mainButtonDisable = false,
@@ -1928,17 +1948,17 @@ var Navbar = ({
     "nav",
     {
       className: cn(
-        "py-5 px-8 w-full h-[5.3rem] bg-sus-primary-1 flex items-center justify-between",
+        "py-3 px-8 w-full h-16 bg-sus-primary-1 flex items-center justify-between",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-          headImageURL !== "" ? /* @__PURE__ */ jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            isValidElement(title) ? title : /* @__PURE__ */ jsx("h1", { className: "text-white text-4xl font-bold", children: title }),
-            isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsx("h1", { className: "text-white text-xl font-bold", children: subTitle })
+          headImageURL !== "" ? /* @__PURE__ */ jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            isValidElement(title) ? title : /* @__PURE__ */ jsx("h1", { className: "text-white text-xl font-bold", children: title }),
+            isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsx("h1", { className: "text-white text-sm font-semibold", children: subTitle })
           ] }),
-          tooltipTitle && /* @__PURE__ */ jsxs(Tooltip2, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "text-white hover:opacity-80 ", children: /* @__PURE__ */ jsx(InfoIcon_default, { className: "w-4" }) }) }),
+          tooltipTitle && /* @__PURE__ */ jsxs(Tooltip2, { delayDuration: 700, children: [
+            /* @__PURE__ */ jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "text-white hover:opacity-80", children: /* @__PURE__ */ jsx(InfoIcon_default, { className: "w-4" }) }) }),
             /* @__PURE__ */ jsxs(
               TooltipContent2,
               {
@@ -1948,11 +1968,12 @@ var Navbar = ({
                 align: "start",
                 avoidCollisions: false,
                 className: cn(
-                  "bg-background text-foreground border border-black md:w-[350px] lg:w-[420px]",
+                  "bg-background text-foreground border border-black",
                   "transition-all duration-150 ease-out origin-top",
                   "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
                   "data-[state=closed]:scale-95 data-[state=open]:scale-100",
-                  { "mt-5": isDesktop }
+                  { "mt-5": isDesktop },
+                  tooltipContentClassName
                 ),
                 children: [
                   /* @__PURE__ */ jsxs(
@@ -1960,7 +1981,10 @@ var Navbar = ({
                     {
                       role: "tooltip",
                       "aria-label": tooltipTitle,
-                      className: cn("flex flex-col gap-4 max-w-sm text-sm text-gray-700", className),
+                      className: cn(
+                        "flex flex-col gap-4 max-w-sm text-sm text-gray-700",
+                        tooltipDescriptionWrapperClassName
+                      ),
                       children: [
                         tooltipTitle && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                           isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsx(Icon3, { size: 32, "aria-hidden": "true" }),
@@ -2065,6 +2089,7 @@ var ExpandCollapse_default = ExpandCollapse;
 
 // src/components/advanceSearch/operatorMap.ts
 var OPERATOR_MAP = {
+  uuid: ["equals", "notEquals", "gt", "gte", "lt", "lte"],
   text: [
     "contains",
     "equals",
@@ -2094,22 +2119,30 @@ function firstOperatorFor(fields, fieldName) {
   const t3 = getFieldType(fields, fieldName);
   return OPERATOR_MAP[t3][0];
 }
-function makeNewRow(fields) {
-  const first = fields[0];
-  const op = OPERATOR_MAP[first.type][0];
+function makeNewRow(field) {
+  const op = OPERATOR_MAP[field.type][0];
   if (op === "between") {
     return {
       id: crypto.randomUUID(),
-      fieldName: first.name,
+      fieldName: field.name,
+      fieldType: field.type,
       operator: "between",
       value: "",
-      value2: ""
+      value2: "",
+      multiTableSearch: field.multiTableSearch
     };
   }
-  return { id: crypto.randomUUID(), fieldName: first.name, operator: op, value: "" };
+  return {
+    id: crypto.randomUUID(),
+    fieldName: field.name,
+    fieldType: field.type,
+    operator: op,
+    value: "",
+    multiTableSearch: field.multiTableSearch
+  };
 }
 function useAdvanceSearch({ fields, limitRows }) {
-  const [rows, setRows] = useState([makeNewRow(fields)]);
+  const [rows, setRows] = useState([makeNewRow(fields[0])]);
   const updateRows = useCallback((next) => {
     setRows(next);
   }, []);
@@ -2122,7 +2155,7 @@ function useAdvanceSearch({ fields, limitRows }) {
   );
   const addRow = useCallback(() => {
     if (!limitRows || rows.length < limitRows) {
-      updateRows([...rows, makeNewRow(fields)]);
+      updateRows([...rows, makeNewRow(fields[0])]);
     }
   }, [rows, fields, updateRows, limitRows]);
   const removeRow = useCallback(
@@ -2138,22 +2171,29 @@ function useAdvanceSearch({ fields, limitRows }) {
         rows.map((r2) => {
           if (r2.id !== id) return r2;
           const nextOp = firstOperatorFor(fields, r2.fieldName);
-          return nextOp === "between" ? { id: r2.id, fieldName: r2.fieldName, operator: "between", value: "", value2: "" } : { id: r2.id, fieldName: r2.fieldName, operator: nextOp, value: "" };
+          return nextOp === "between" ? {
+            id: r2.id,
+            fieldName: r2.fieldName,
+            fieldType: r2.fieldType,
+            operator: "between",
+            value: "",
+            value2: ""
+          } : { id: r2.id, fieldName: r2.fieldName, fieldType: r2.fieldType, operator: nextOp, value: "" };
         })
       );
     },
     [rows, fields, updateRows]
   );
   const clearAllRow = useCallback(() => {
-    updateRows([makeNewRow(fields)]);
+    updateRows([makeNewRow(fields[0])]);
   }, [fields, updateRows]);
   const changeField = useCallback(
     (id, fieldName) => {
-      const nextOp = firstOperatorFor(fields, fieldName);
       updateRows(
         rows.map((r2) => {
           if (r2.id !== id) return r2;
-          return nextOp === "between" ? { id: r2.id, fieldName, operator: "between", value: "", value2: "" } : { id: r2.id, fieldName, operator: nextOp, value: "" };
+          const newRow = makeNewRow(fields.find((f) => f.name === fieldName) || fields[0]);
+          return { ...newRow, id: r2.id };
         })
       );
     },
@@ -2165,9 +2205,24 @@ function useAdvanceSearch({ fields, limitRows }) {
         rows.map((r2) => {
           if (r2.id !== id) return r2;
           if (operator === "between") {
-            return { id: r2.id, fieldName: r2.fieldName, operator, value: "", value2: "" };
+            return {
+              id: r2.id,
+              fieldName: r2.fieldName,
+              fieldType: r2.fieldType,
+              multiTableSearch: r2.multiTableSearch,
+              operator,
+              value: "",
+              value2: ""
+            };
           }
-          return { id: r2.id, fieldName: r2.fieldName, operator, value: "" };
+          return {
+            id: r2.id,
+            fieldName: r2.fieldName,
+            fieldType: r2.fieldType,
+            multiTableSearch: r2.multiTableSearch,
+            operator,
+            value: ""
+          };
         })
       );
     },
@@ -2192,55 +2247,16 @@ function useAdvanceSearch({ fields, limitRows }) {
     })),
     [fields]
   );
-  const rowToFilter = (row) => {
-    switch (row.operator) {
-      case "between":
-        return {
-          [row.fieldName]: {
-            gte: row.value,
-            lte: row.value2
-          }
-        };
-      case "contains":
-        return { [row.fieldName]: { contains: row.value } };
-      case "beginsWith":
-        return { [row.fieldName]: { startsWith: row.value } };
-      case "endsWith":
-        return { [row.fieldName]: { endsWith: row.value } };
-      case "notEquals":
-        return { [row.fieldName]: { not: row.value } };
-      case "gt":
-        return { [row.fieldName]: { gt: row.value } };
-      case "gte":
-        return { [row.fieldName]: { gte: row.value } };
-      case "lt":
-        return { [row.fieldName]: { lt: row.value } };
-      case "lte":
-        return { [row.fieldName]: { lte: row.value } };
-      case "is":
-        return { [row.fieldName]: row.value };
-      case "isNot":
-        return { [row.fieldName]: { not: row.value } };
-      case "notContains":
-        return { [row.fieldName]: { not: { contains: row.value } } };
-      case "notBeginsWith":
-        return { [row.fieldName]: { not: { startsWith: row.value } } };
-      case "notEndsWith":
-        return { [row.fieldName]: { not: { endsWith: row.value } } };
-      case "containsAny":
-        return { [row.fieldName]: { hasSome: row.value.split(",") } };
-      case "containsAll":
-        return { [row.fieldName]: { hasEvery: row.value.split(",") } };
-      case "containsOnly":
-        return { [row.fieldName]: { equals: row.value.split(",") } };
-      default:
-        return { [row.fieldName]: row.value };
-    }
-  };
-  const buildParam = useMemo(() => {
-    const andConditions = rows.map((r2) => r2.value ? rowToFilter(r2) : null).filter(Boolean);
-    return { AND: andConditions };
-  }, [rows]);
+  const buildFilter = useCallback(
+    (prismaFilter, options) => {
+      return options?.multiTableSearch ? {
+        some: {
+          value: { ...prismaFilter, ...options?.insensitive ? { mode: "insensitive" } : void 0 }
+        }
+      } : prismaFilter;
+    },
+    []
+  );
   return {
     rows,
     addRow,
@@ -2252,7 +2268,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     changeValue,
     operatorsForField,
     fieldOptions,
-    param: buildParam
+    buildFilter
   };
 }
 
@@ -4778,7 +4794,10 @@ var AdvanceSearch = ({
   onSearch,
   onClear
 }) => {
-  const fieldsData = useMemo(() => fields || [], [fields]);
+  const fieldsData = useMemo(() => {
+    if (fields.length === 0) throw new Error("fields cannot be an empty array");
+    return fields || [];
+  }, [fields]);
   const {
     rows,
     addRow,
@@ -4788,7 +4807,8 @@ var AdvanceSearch = ({
     changeField,
     changeOperator,
     operatorsForField,
-    fieldOptions
+    fieldOptions,
+    buildFilter
   } = useAdvanceSearch({ fields: fieldsData, limitRows });
   const form = useForm({
     mode: "onSubmit",
@@ -4800,66 +4820,181 @@ var AdvanceSearch = ({
     const currentValues = getValues();
     const param = {
       AND: rows.map((r2) => {
-        const val1 = currentValues[`value_${r2.id}`];
+        let val1 = currentValues[`value_${r2.id}`];
         const val2 = currentValues[`value2_${r2.id}`];
         if (r2.operator === "between") {
           if (!val1 || !val2) return null;
+          const start = new Date(val1);
+          start.setHours(0, 0, 0, 0);
+          const end = new Date(val2);
+          end.setHours(23, 59, 59, 59);
           return {
             [r2.fieldName]: {
-              gte: val1,
-              lte: val2
+              gte: start.toISOString(),
+              lt: end.toISOString()
             }
           };
         }
         if (!val1) return null;
+        val1 = r2.fieldType === "number" ? Number(val1) : val1;
         switch (r2.operator) {
           case "contains":
-            return { [r2.fieldName]: { contains: val1 } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { contains: val1 },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
           case "beginsWith":
-            return { [r2.fieldName]: { startsWith: val1 } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { startsWith: val1 },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
           case "endsWith":
-            return { [r2.fieldName]: { endsWith: val1 } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { endsWith: val1 },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
           case "equals":
-            return { [r2.fieldName]: { equals: val1 } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { equals: val1 },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
           case "notEquals":
-            return { [r2.fieldName]: { not: val1 } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { not: val1 },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
           case "gt":
-            return { [r2.fieldName]: { gt: val1 } };
+            return {
+              [r2.fieldName]: buildFilter({ gt: val1 }, { multiTableSearch: r2.multiTableSearch })
+            };
           case "gte":
-            return { [r2.fieldName]: { gte: val1 } };
+            return {
+              [r2.fieldName]: buildFilter({ gte: val1 }, { multiTableSearch: r2.multiTableSearch })
+            };
           case "lt":
-            return { [r2.fieldName]: { lt: val1 } };
+            return {
+              [r2.fieldName]: buildFilter({ lt: val1 }, { multiTableSearch: r2.multiTableSearch })
+            };
           case "lte":
-            return { [r2.fieldName]: { lte: val1 } };
+            return {
+              [r2.fieldName]: buildFilter({ lte: val1 }, { multiTableSearch: r2.multiTableSearch })
+            };
           case "is":
             return { [r2.fieldName]: val1 };
           case "isNot":
             return { [r2.fieldName]: { not: val1 } };
           case "notContains":
-            return { [r2.fieldName]: { not: { contains: val1 } } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { not: { contains: val1 } },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
           case "notBeginsWith":
-            return { [r2.fieldName]: { not: { startsWith: val1 } } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { not: { startsWith: val1 } },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
           case "notEndsWith":
-            return { [r2.fieldName]: { not: { endsWith: val1 } } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { not: { endsWith: val1 } },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
           case "containsAny":
-            return { [r2.fieldName]: { hasSome: String(val1).split(",") } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { hasSome: String(val1).split(",") },
+                { multiTableSearch: r2.multiTableSearch }
+              )
+            };
           case "containsAll":
-            return { [r2.fieldName]: { hasEvery: String(val1).split(",") } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { hasEvery: String(val1).split(",") },
+                { multiTableSearch: r2.multiTableSearch }
+              )
+            };
           case "containsOnly":
-            return { [r2.fieldName]: { equals: String(val1).split(",") } };
-          case "on":
-            return { [r2.fieldName]: { on: val1 } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { equals: String(val1).split(",") },
+                {
+                  multiTableSearch: r2.multiTableSearch,
+                  insensitive: true
+                }
+              )
+            };
+          case "on": {
+            const start = new Date(val1);
+            start.setHours(0, 0, 0, 0);
+            const end = new Date(val1);
+            end.setHours(23, 59, 59, 59);
+            return {
+              [r2.fieldName]: buildFilter(
+                { gte: start.toISOString(), lt: end.toISOString() },
+                { multiTableSearch: r2.multiTableSearch }
+              )
+            };
+          }
           case "after":
-            return { [r2.fieldName]: { after: val1 } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { gte: new Date(val1).toISOString() },
+                { multiTableSearch: r2.multiTableSearch }
+              )
+            };
           case "before":
-            return { [r2.fieldName]: { before: val1 } };
+            return {
+              [r2.fieldName]: buildFilter(
+                { lt: new Date(val1).toISOString() },
+                { multiTableSearch: r2.multiTableSearch }
+              )
+            };
         }
       }).filter(Boolean)
     };
     if (onSearch) {
       onSearch(param);
     }
-  }, [getValues, rows, onSearch]);
+  }, [buildFilter, getValues, rows, onSearch]);
   return /* @__PURE__ */ jsx(
     ExpandCollapse_default,
     {