@sustaina/shared-ui 1.23.1 → 1.25.0

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');
@@ -58,6 +58,7 @@ var selection = require('@lexical/selection');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var Cropper = require('react-easy-crop');
+var reactNumberFormat = require('react-number-format');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -3460,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,
@@ -3467,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");
@@ -3519,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,
@@ -3622,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
@@ -3649,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"
             }
@@ -6586,8 +6649,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;
@@ -9777,6 +9840,173 @@ var Truncated = ({ children, className, ellipsis = true, as = "p", style }) => {
   );
 };
 var truncated_default = Truncated;
+var InputPrimitive2 = React4__namespace.forwardRef(
+  ({ className, type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref,
+        type,
+        className: cn(
+          "placeholder:text-neutral-400 text-neutral-900 flex h-10 w-full min-w-0 items-center rounded-lg border bg-white px-4 text-sm transition-colors outline-none file:inline-flex file:h-7 file:rounded-md file:border-0 file:bg-transparent file:px-2 file:text-sm file:font-medium hover:border-neutral-500 focus-visible:border-neutral-900 focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:text-neutral-400 disabled:border-neutral-200 aria-invalid:border-destructive",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+InputPrimitive2.displayName = "InputPrimitive";
+var inputVariants2 = classVarianceAuthority.cva("", {
+  variants: {
+    controlSize: {
+      sm: "h-9 rounded-md px-3 text-sm",
+      md: "h-10 rounded-lg px-4 text-sm",
+      lg: "h-12 rounded-xl px-5 text-base"
+    },
+    fullWidth: {
+      true: "w-full",
+      false: "w-auto"
+    },
+    appearance: {
+      filled: "border-neutral-200 hover:border-neutral-500 focus-visible:border-neutral-900",
+      unfilled: "bg-white border-neutral-300 hover:border-neutral-500 focus-visible:border-neutral-900"
+    }
+  },
+  defaultVariants: {
+    controlSize: "sm",
+    fullWidth: true,
+    appearance: "filled"
+  }
+});
+var Input2 = React4__namespace.forwardRef(
+  ({
+    className,
+    wrapperClassName,
+    controlSize,
+    fullWidth,
+    appearance,
+    addonPrefix,
+    addonPrefixProps,
+    prefixInteractive,
+    addonSuffix,
+    addonSuffixProps,
+    suffixInteractive,
+    invalid,
+    loading,
+    loadingIcon,
+    validationMessage,
+    validationIcon,
+    validationMessageProps,
+    onValueChange,
+    type = "text",
+    ...rest
+  }, ref) => {
+    const inputProps = rest;
+    const hasPrefix = Boolean(addonPrefix);
+    const hasSuffix = Boolean(addonSuffix) || loading;
+    const isFullWidth = fullWidth ?? true;
+    const {
+      "aria-invalid": ariaInvalidProp,
+      "aria-describedby": ariaDescribedByProp,
+      onChange: onChangeProp
+    } = rest;
+    const ariaInvalid = invalid ?? ariaInvalidProp;
+    const messageId = React4__namespace.useId();
+    const handleChange = React4__namespace.useCallback(
+      (event) => {
+        onChangeProp?.(event);
+        onValueChange?.(event.target.value);
+      },
+      [onChangeProp, onValueChange]
+    );
+    const resolvedAriaInvalid = typeof ariaInvalid === "string" ? ariaInvalid : ariaInvalid ? true : void 0;
+    const describedBy = validationMessage ? [ariaDescribedByProp, messageId].filter(Boolean).join(" ") : ariaDescribedByProp;
+    const controlWrapperClassName = cn(
+      "relative inline-flex items-center",
+      isFullWidth ? "w-full" : "w-fit",
+      !validationMessage && wrapperClassName
+    );
+    const inputElement = /* @__PURE__ */ jsxRuntime.jsx(
+      InputPrimitive2,
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(
+          inputVariants2({ controlSize, fullWidth: isFullWidth, appearance }),
+          hasPrefix && "pl-10",
+          hasSuffix && "pr-10",
+          className
+        ),
+        "aria-invalid": resolvedAriaInvalid,
+        "aria-describedby": describedBy || void 0,
+        onChange: handleChange,
+        ...inputProps
+      }
+    );
+    if (!hasPrefix && !hasSuffix && !validationMessage) {
+      return inputElement;
+    }
+    const { className: prefixClassName, ...prefixRest } = addonPrefixProps ?? {};
+    const { className: suffixClassName, ...suffixRest } = addonSuffixProps ?? {};
+    const { className: validationMessageClassName, ...validationMessageRest } = validationMessageProps ?? {};
+    const suffixContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      addonSuffix,
+      loading && (loadingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 16, variant: "muted" }))
+    ] });
+    const inputWithAffixes = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "input-wrapper", className: controlWrapperClassName, children: [
+      hasPrefix && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ...prefixRest,
+          className: cn(
+            "absolute left-3 top-1/2 -translate-y-1/2 inline-flex items-center text-muted-foreground",
+            !prefixInteractive && "pointer-events-none",
+            prefixClassName
+          ),
+          children: addonPrefix
+        }
+      ),
+      inputElement,
+      hasSuffix && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ...suffixRest,
+          className: cn(
+            "absolute right-3 top-1/2 -translate-y-1/2 inline-flex items-center gap-2 text-muted-foreground",
+            !suffixInteractive && "pointer-events-none",
+            suffixClassName
+          ),
+          children: suffixContent
+        }
+      )
+    ] });
+    if (!validationMessage) {
+      return inputWithAffixes;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", isFullWidth ? "w-full" : "w-fit", wrapperClassName), children: [
+      inputWithAffixes,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "p",
+        {
+          id: messageId,
+          ...validationMessageRest,
+          className: cn("flex items-center gap-2 text-sm text-destructive", validationMessageClassName),
+          children: [
+            validationIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { className: "size-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: validationMessage })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Input2.displayName = "Input";
+var InputNumber = ({ customInputProps, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNumberFormat.NumericFormat, { customInput: Input2, ...props, ...customInputProps });
+};
+var InputNumber_default = InputNumber;
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -9819,6 +10049,7 @@ exports.GridSettingsModal = GridSettingsModal_default;
 exports.HeaderCell = HeaderCell_default;
 exports.Image = Image2;
 exports.Input = Input;
+exports.InputNumber = InputNumber_default;
 exports.Label = Label2;
 exports.List = List_default;
 exports.ListContainer = container_default;