@sustaina/shared-ui 1.24.0 → 1.26.0

package/dist/index.d.mts

@@ -104,6 +104,7 @@ interface AdvanceSearchProps {
     onSearch?: (param: Params) => void;
     onClear?: () => void;
     shortDateFormat?: string;
+    filterFieldMap?: Record<string, string>;
 }
 
 declare const AdvanceSearch: React__default.FC<AdvanceSearchProps>;
@@ -567,6 +568,7 @@ type FormulaEditorProps = {
     onSelectSuggestion?: (token: FormulaTokenAttributes, config: FormulaTokenConfig) => void;
     field?: ControllerRenderProps<any, any>;
     fieldState?: ControllerFieldState;
+    mode?: "edit" | "display";
 };
 
 declare const FormulaEditor: React__default.FC<FormulaEditorProps>;

package/dist/index.d.ts

@@ -104,6 +104,7 @@ interface AdvanceSearchProps {
     onSearch?: (param: Params) => void;
     onClear?: () => void;
     shortDateFormat?: string;
+    filterFieldMap?: Record<string, string>;
 }
 
 declare const AdvanceSearch: React__default.FC<AdvanceSearchProps>;
@@ -567,6 +568,7 @@ type FormulaEditorProps = {
     onSelectSuggestion?: (token: FormulaTokenAttributes, config: FormulaTokenConfig) => void;
     field?: ControllerRenderProps<any, any>;
     fieldState?: ControllerFieldState;
+    mode?: "edit" | "display";
 };
 
 declare const FormulaEditor: React__default.FC<FormulaEditorProps>;

package/dist/index.js

@@ -5,7 +5,6 @@ var clsx2 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var React4 = require('react');
-var dateFns = require('date-fns');
 var lucideReact = require('lucide-react');
 var reactDom = require('react-dom');
 var SelectPrimitive = require('@radix-ui/react-select');
@@ -13,6 +12,7 @@ var reactHookForm = require('react-hook-form');
 var reactSlot = require('@radix-ui/react-slot');
 var LabelPrimitive = require('@radix-ui/react-label');
 var classVarianceAuthority = require('class-variance-authority');
+var dateFns = require('date-fns');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
@@ -3461,6 +3461,66 @@ function getBuilder(fieldType) {
       return new JSONBuilder();
   }
 }
+var FILTER_FIELD_MAP = {
+  timezone: "timezoneId",
+  decimalSeparator: "decimalSeparatorId",
+  country: "countryId",
+  currency: "currencyId"
+};
+function transformFilterKeys(obj, fieldMap = FILTER_FIELD_MAP) {
+  if (Array.isArray(obj)) {
+    return obj.map((item) => transformFilterKeys(item, fieldMap));
+  }
+  if (obj && typeof obj === "object") {
+    const newObj = {};
+    for (const key in obj) {
+      const mappedKey = fieldMap[key] ?? key;
+      newObj[mappedKey] = transformFilterKeys(obj[key], fieldMap);
+    }
+    return newObj;
+  }
+  return obj;
+}
+var sanitizeInput = (val) => {
+  if (!val) return val;
+  if (typeof val !== "string") return "__INVALID_TYPE__";
+  if (val.includes("\n") || val.includes("\r") || /[\u2028\u2029]/u.test(val))
+    return "__INVALID_NEWLINE__";
+  if (/\\\\/.test(val)) return "__INVALID_ESCAPE__";
+  if (/\\(n|t|r|b|f|u[0-9a-fA-F]{4})/.test(val)) return "__INVALID_ESCAPE__";
+  if (/\p{Cf}/u.test(val)) return "__INVALID_UNICODE_WHITESPACE__";
+  if (/[\u00A0\u1680\u180E\u202F\u205F\u3000]/u.test(val)) return "__INVALID_UNICODE_WHITESPACE__";
+  const trimmed = val.trim();
+  if (/^\{.*\}$/s.test(trimmed) || /^\[.*\]$/s.test(trimmed)) return "__INVALID_JSON_LITERAL__";
+  if (/\\\{/.test(val) || /\\\}/.test(val)) return "__INVALID_JSON_ESCAPE__";
+  if (/[%_*~^]/.test(trimmed)) return "__INVALID_WILDCARD__";
+  if (/[%><={}\\[\]"']/u.test(trimmed)) return "__INVALID_CHAR__";
+  if (/\p{Cc}/u.test(val)) return "__INVALID_CONTROL_CHAR__";
+  return trimmed.replace(/\s+/g, " ");
+};
+var numericTypes = ["number", "integer", "decimal"];
+var dateTypes = ["date", "datemonth"];
+var validateByFieldType = (value, fieldType) => {
+  if (!value) return { valid: true };
+  if (numericTypes.includes(fieldType)) {
+    if (!/^\d+(\.\d+)?$/.test(value)) {
+      return { valid: false, message: "Please enter a valid number." };
+    }
+  }
+  if (fieldType === "boolean") {
+    if (!["true", "false"].includes(value.toLowerCase())) {
+      return { valid: false, message: "Please enter a boolean value (true/false)." };
+    }
+  }
+  if (dateTypes.includes(fieldType)) {
+    const normalized = fieldType === "datemonth" ? `${value}-01` : value;
+    const parsed = dateFns.parseISO(normalized);
+    if (!dateFns.isValid(parsed)) {
+      return { valid: false, message: "Invalid date format." };
+    }
+  }
+  return { valid: true };
+};
 var AdvanceSearch = ({
   fields,
   portalId,
@@ -3468,7 +3528,8 @@ var AdvanceSearch = ({
   limitRows = 4,
   onSearch,
   onClear,
-  shortDateFormat
+  shortDateFormat,
+  filterFieldMap = FILTER_FIELD_MAP
 }) => {
   const fieldsData = React4.useMemo(() => {
     if (fields.length === 0) throw new Error("fields cannot be an empty array");
@@ -3520,72 +3581,75 @@ var AdvanceSearch = ({
   const onSubmit = React4.useCallback(() => {
     const operatorValidation = {};
     rows.forEach((r) => {
-      const availableOperators = operatorsForField(r.fieldName);
-      if (!availableOperators.length || !availableOperators.includes(r.operator)) {
+      const ops = operatorsForField(r.fieldName);
+      if (!ops.length || !ops.includes(r.operator))
         operatorValidation[r.id] = "Please select an operator.";
-      }
     });
     setOperatorErrors(operatorValidation);
-    if (Object.keys(operatorValidation).length > 0) {
-      return;
-    }
+    if (Object.keys(operatorValidation).length > 0) return;
     const currentValues = getValues();
-    let hasRangeError = false;
-    const rawRows = rows.map((r) => {
-      const startFieldName = `value_${r.id}`;
-      const startValue = currentValues[startFieldName] ?? "";
+    let hasError = false;
+    const processedRows = rows.map((r) => {
+      const startField = `value_${r.id}`;
+      const endField = `value2_${r.id}`;
+      let v1 = currentValues[startField] ?? "";
+      let v2 = currentValues[endField] ?? "";
+      const s1 = sanitizeInput(v1);
+      if (s1?.startsWith("__INVALID")) {
+        hasError = true;
+        setError(startField, { type: "validate", message: "Invalid input." });
+        return null;
+      }
+      v1 = s1 || "";
+      const valid1 = validateByFieldType(v1, r.fieldType);
+      if (!valid1.valid) {
+        hasError = true;
+        setError(startField, { type: "validate", message: valid1.message });
+        return null;
+      }
       if (r.operator === "between") {
-        const endFieldName = `value2_${r.id}`;
-        const endValue = currentValues[endFieldName] ?? "";
-        if (startValue && endValue) {
-          const startDate = parseRangeValue(startValue, r.fieldType);
-          const endDate = parseRangeValue(endValue, r.fieldType);
-          if (startDate && endDate && dateFns.isAfter(startDate, endDate)) {
-            hasRangeError = true;
-            setError(startFieldName, {
-              type: "validate",
-              message: "Start value must be before end value."
-            });
-            setError(endFieldName, {
-              type: "validate",
-              message: "End value must be after start value."
-            });
-          } else {
-            clearErrors([startFieldName, endFieldName]);
+        const s2 = sanitizeInput(v2);
+        if (s2?.startsWith("__INVALID")) {
+          hasError = true;
+          setError(endField, { type: "validate", message: "Invalid input." });
+          return null;
+        }
+        v2 = s2 || "";
+        const valid2 = validateByFieldType(v2, r.fieldType);
+        if (!valid2.valid) {
+          hasError = true;
+          setError(endField, { type: "validate", message: valid2.message });
+          return null;
+        }
+        if (v1 && v2 && ["date", "datemonth"].includes(r.fieldType)) {
+          const d1 = parseRangeValue(v1, r.fieldType);
+          const d2 = parseRangeValue(v2, r.fieldType);
+          if (d1 && d2 && dateFns.isAfter(d1, d2)) {
+            hasError = true;
+            setError(startField, { type: "validate", message: "Start value must be before end value." });
+            setError(endField, { type: "validate", message: "End value must be after start value." });
+            return null;
           }
         }
-        return {
-          ...r,
-          value: startValue ?? "",
-          value2: endValue ?? ""
-        };
+        return { ...r, value: v1, value2: v2 };
       }
-      return {
-        ...r,
-        value: startValue ?? ""
-      };
+      return { ...r, value: v1 };
     });
-    if (hasRangeError) {
-      return;
-    }
+    if (hasError) return;
+    const cleanedRows = processedRows.filter(Boolean);
     const param = {
-      AND: rawRows.map((r) => {
-        const builder = getBuilder(r.fieldType);
-        return builder.build(r);
-      }).filter(Boolean)
+      AND: cleanedRows.map((r) => getBuilder(r.fieldType).build(r)).filter(Boolean)
     };
-    if (onSearch) {
-      onSearch(param);
-    }
+    if (onSearch) onSearch(transformFilterKeys(param, filterFieldMap));
   }, [
-    clearErrors,
-    getValues,
-    onSearch,
+    rows,
     operatorsForField,
+    getValues,
     parseRangeValue,
-    rows,
     setError,
-    setOperatorErrors
+    setOperatorErrors,
+    filterFieldMap,
+    onSearch
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ExpandCollapse_default,
@@ -3623,9 +3687,7 @@ var AdvanceSearch = ({
               unregister(`value_${row.id}`);
               unregister(`value2_${row.id}`);
             },
-            onClearValue: (which) => {
-              clearValue(row.id, which);
-            },
+            onClearValue: (which) => clearValue(row.id, which),
             disableAdd: limitRows !== void 0 && rows.length >= limitRows
           },
           row.id
@@ -3650,7 +3712,7 @@ var AdvanceSearch = ({
             Button,
             {
               type: "submit",
-              className: "w-full bg-[#379a2a] text-white hover:bg-[#2f7c21] md:w-auto md:min-w-[120px]",
+              className: "w-full bg-sus-green-2 text-white hover:bg-[#2f7c21] md:w-auto md:min-w-[120px]",
               "data-testid": "advsearch-btn-search",
               children: "Search"
             }
@@ -6243,7 +6305,8 @@ var FormulaEditor = ({
   onChange,
   onSelectSuggestion,
   field,
-  fieldState
+  fieldState,
+  mode = "edit"
 }) => {
   const [isExpanded, setIsExpanded] = React4.useState(false);
   const lastEmittedValueRef = React4.useRef(null);
@@ -6260,27 +6323,22 @@ var FormulaEditor = ({
   const prefixMap = React4.useMemo(() => buildPrefixMap(normalizedConfigs), [normalizedConfigs]);
   const configLookup = React4.useMemo(() => {
     const lookup = /* @__PURE__ */ new Map();
-    normalizedConfigs.forEach((config) => {
-      lookup.set(config.prefix, config);
-    });
+    normalizedConfigs.forEach((config) => lookup.set(config.prefix, config));
     return lookup;
   }, [normalizedConfigs]);
   const allowedOperators = React4.useMemo(() => operators.map((operator) => operator.value), [operators]);
   const displayError = errorMessage ?? fieldState?.error?.message;
   const hasError = Boolean(displayError);
-  const isInteractionDisabled = Boolean(disabled || loading);
+  const isEditorReadOnly = mode === "display";
+  const isEditorDisabled = disabled || loading || isEditorReadOnly;
   const convertValueToContent = React4.useCallback(
     (input) => {
       if (!input) return "";
       const trimmed = input.trim();
       if (!trimmed) return "";
       const parsedJSON = tryParseJSON(trimmed);
-      if (parsedJSON && parsedJSON.type === "doc") {
-        return parsedJSON;
-      }
-      if (looksLikeHTML(trimmed)) {
-        return input;
-      }
+      if (parsedJSON && parsedJSON.type === "doc") return parsedJSON;
+      if (looksLikeHTML(trimmed)) return input;
       return buildDocFromRaw(input, prefixMap, configLookup);
     },
     [configLookup, prefixMap]
@@ -6311,7 +6369,7 @@ var FormulaEditor = ({
           hasError ? "border border-destructive" : "border focus-visible:border-ring",
           "w-full rounded-lg bg-white px-4 py-3",
           "overflow-y-auto whitespace-pre-wrap wrap-break-word focus:outline-none",
-          isInteractionDisabled && "pointer-events-none opacity-60",
+          isEditorDisabled && "pointer-events-none",
           editorClassName
         ),
         ...loading ? { "aria-busy": "true" } : {}
@@ -6320,8 +6378,8 @@ var FormulaEditor = ({
   });
   React4.useEffect(() => {
     if (!editor) return;
-    editor.setEditable(!isInteractionDisabled);
-  }, [editor, isInteractionDisabled]);
+    editor.setEditable(!isEditorDisabled);
+  }, [editor, isEditorDisabled]);
   React4.useEffect(() => {
     if (!editor || resolvedContent === void 0) return;
     if (ignorePropValueRef.current && typeof value === "string" && value === lastEmittedValueRef.current) {
@@ -6355,9 +6413,7 @@ var FormulaEditor = ({
         className: "relative",
         "aria-busy": loading,
         onFocus: () => {
-          if (editor && !editor.isFocused) {
-            editor.chain().focus().run();
-          }
+          if (editor && !editor.isFocused) editor.chain().focus().run();
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }),
@@ -6369,14 +6425,14 @@ var FormulaEditor = ({
               spinnerClassName: "size-6 text-sus-blue-3"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !isEditorReadOnly && /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
               type: "button",
               variant: "ghost",
               size: "icon",
               className: "absolute bottom-2 right-4 h-6 w-6 rounded-full bg-white shadow",
-              disabled: isInteractionDisabled,
+              disabled: isEditorDisabled,
               onClick: () => setIsExpanded((prev) => !prev),
               children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-4 w-4" })
             }
@@ -6385,13 +6441,13 @@ var FormulaEditor = ({
       }
     ),
     hasError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", role: "alert", children: displayError }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-end gap-2 py-2", children: operators.map((operator) => /* @__PURE__ */ jsxRuntime.jsx(
+    mode === "edit" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-end gap-2 py-2", children: operators.map((operator) => /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         type: "button",
         onClick: () => insertOperator(operator.value),
         className: "min-w-10 rounded-sm px-3 bg-sus-blue-3",
-        disabled: isInteractionDisabled,
+        disabled: isEditorDisabled,
         children: operator.label
       },
       operator.value
@@ -6587,8 +6643,8 @@ var GridSettingsModal = ({
     }
   }, [isOpen, currentColumns, form]);
   const addColumn = async () => {
-    const isValid5 = await trigger("columns");
-    if (isValid5) {
+    const isValid6 = await trigger("columns");
+    if (isValid6) {
       append({ id: "" });
       requestAnimationFrame(() => {
         const container = scrollRef.current;