@wavemaker-ai/react-runtime 1.0.0-next.27766

package/utils/state-persistance.js

@@ -0,0 +1,294 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { keys, merge, isObject, isArray } from "lodash-es";
+const WM_STATE_KEY = "wm_state";
+const WM_STATE_URL_PARAM = "wm_state";
+const DEFAULT_WORKSPACE = "ws";
+let pageNavigationPending = false;
+let navigationClearTimeout = null;
+const markPageNavigationPending = () => {
+  pageNavigationPending = true;
+  if (navigationClearTimeout) {
+    clearTimeout(navigationClearTimeout);
+  }
+  navigationClearTimeout = setTimeout(() => {
+    pageNavigationPending = false;
+    navigationClearTimeout = null;
+  }, 2e3);
+};
+const clearPageNavigationPending = () => {
+  pageNavigationPending = false;
+  if (navigationClearTimeout) {
+    clearTimeout(navigationClearTimeout);
+    navigationClearTimeout = null;
+  }
+};
+const isPageNavigationPending = () => pageNavigationPending;
+const getStorageKey = () => {
+  if (typeof window === "undefined") return WM_STATE_KEY;
+  return window.location.pathname.replace(/\//g, "").replace("react-pages/", "") + "_" + WM_STATE_KEY;
+};
+const getCurrentPageName = () => {
+  if (typeof window === "undefined") return "";
+  const segments = window.location.pathname.split("/").filter(Boolean);
+  return segments[segments.length - 1] || "Main";
+};
+const jsonToUri = (jsonObj) => {
+  const customStringify = (obj) => {
+    if (obj === null) return "null";
+    if (obj === void 0) return "undefined";
+    if (typeof obj === "string") return obj;
+    if (typeof obj === "number" || typeof obj === "boolean") return String(obj);
+    if (Array.isArray(obj)) {
+      if (obj.length === 0) return "!*";
+      return "!" + obj.map(customStringify).join("_") + "*";
+    }
+    if (typeof obj === "object") {
+      const pairs = [];
+      for (const [key, value] of Object.entries(obj)) {
+        pairs.push(key + "~" + customStringify(value));
+      }
+      if (pairs.length === 0) return "()";
+      return "(" + pairs.join("_") + ")";
+    }
+    return String(obj);
+  };
+  return customStringify(jsonObj);
+};
+const uriToJson = (encodedObj) => {
+  try {
+    const decoded = decodeURIComponent(encodedObj);
+    const parse = (str, startIndex = 0) => {
+      if (str[startIndex] === "(") {
+        const obj = {};
+        let i = startIndex + 1;
+        while (i < str.length && str[i] !== ")") {
+          if (str[i] === ")") break;
+          let key = "";
+          while (i < str.length && str[i] !== "~") {
+            key += str[i];
+            i++;
+          }
+          i++;
+          const { value: value2, endIndex } = parse(str, i);
+          obj[key] = value2;
+          i = endIndex;
+          if (str[i] === "_") {
+            i++;
+          }
+        }
+        return { value: obj, endIndex: i + 1 };
+      } else if (str[startIndex] === "!") {
+        const arr = [];
+        let i = startIndex + 1;
+        while (i < str.length && str[i] !== "*") {
+          const { value: value2, endIndex } = parse(str, i);
+          arr.push(value2);
+          i = endIndex;
+          if (str[i] === "_") {
+            i++;
+          }
+        }
+        return { value: arr, endIndex: i + 1 };
+      } else {
+        let value2 = "";
+        let i = startIndex;
+        while (i < str.length && str[i] !== "_" && str[i] !== ")" && str[i] !== "*") {
+          value2 += str[i];
+          i++;
+        }
+        if (value2 === "null") return { value: null, endIndex: i };
+        if (value2 === "undefined") return { value: void 0, endIndex: i };
+        if (value2 === "true") return { value: true, endIndex: i };
+        if (value2 === "false") return { value: false, endIndex: i };
+        const num = Number(value2);
+        if (!isNaN(num) && value2 !== "") {
+          return { value: num, endIndex: i };
+        }
+        return { value: value2, endIndex: i };
+      }
+    };
+    const { value } = parse(decoded);
+    return value;
+  } catch (e) {
+    console.warn("Failed to parse state from URL:", e);
+    return {};
+  }
+};
+let pendingUrlStates = null;
+let urlStateRafId = null;
+const flushPendingUrlState = () => {
+  urlStateRafId = null;
+  if (pendingUrlStates === null) return;
+  const states = pendingUrlStates;
+  pendingUrlStates = null;
+  const currentUrl = window.location.href;
+  const url = new URL(window.location.href);
+  const urlParams = new URLSearchParams(url.search);
+  if (keys(states).length > 0) {
+    const encodedState = jsonToUri(states);
+    urlParams.delete(WM_STATE_URL_PARAM);
+    let newSearch = urlParams.toString();
+    if (newSearch) newSearch += "&";
+    newSearch += `${WM_STATE_URL_PARAM}=${encodedState}`;
+    url.search = newSearch ? "?" + newSearch : "";
+  } else {
+    urlParams.delete(WM_STATE_URL_PARAM);
+    url.search = urlParams.toString();
+  }
+  if (currentUrl !== url.toString() && !pageNavigationPending) {
+    const newPath = url.pathname + url.search;
+    window.history.replaceState(__spreadValues({}, window.history.state), "", newPath);
+  }
+};
+const scheduleUrlStateUpdate = (states) => {
+  pendingUrlStates = states;
+  if (urlStateRafId === null) {
+    urlStateRafId = requestAnimationFrame(flushPendingUrlState);
+  }
+};
+const getAllStates = (storage) => {
+  switch (storage) {
+    case "localStorage":
+      const localData = localStorage.getItem(getStorageKey());
+      try {
+        return localData ? JSON.parse(localData) : {};
+      } catch (e) {
+        return {};
+      }
+    case "sessionStorage":
+      const sessionData = sessionStorage.getItem(getStorageKey());
+      try {
+        return sessionData ? JSON.parse(sessionData) : {};
+      } catch (e) {
+        return {};
+      }
+    case "URL":
+      if (pendingUrlStates !== null) {
+        return __spreadValues({}, pendingUrlStates);
+      }
+      const searchParams = window.location.search;
+      const match = searchParams.match(new RegExp(`[?&]${WM_STATE_URL_PARAM}=([^&]+)`));
+      if (!match || !match[1]) return {};
+      return uriToJson(match[1]);
+    default:
+      return {};
+  }
+};
+const setAllStates = (storage, states) => {
+  switch (storage) {
+    case "localStorage":
+      localStorage.setItem(getStorageKey(), JSON.stringify(states));
+      break;
+    case "sessionStorage":
+      sessionStorage.setItem(getStorageKey(), JSON.stringify(states));
+      break;
+    case "URL":
+      scheduleUrlStateUpdate(states);
+      break;
+  }
+};
+const getWidgetState = (config) => {
+  var _a, _b, _c;
+  const { name, type, storage } = config;
+  const allStates = getAllStates(storage);
+  if (storage === "URL") {
+    const widgetData = (_a = allStates[DEFAULT_WORKSPACE]) == null ? void 0 : _a[name];
+    return widgetData || null;
+  } else {
+    const currentPageName = getCurrentPageName();
+    const widgetData = (_c = (_b = allStates[currentPageName]) == null ? void 0 : _b[DEFAULT_WORKSPACE]) == null ? void 0 : _c[name];
+    return widgetData || null;
+  }
+};
+const setWidgetState = (config, value) => {
+  const { name, type, storage } = config;
+  if (storage === "none") {
+    return;
+  }
+  const allStates = getAllStates(storage);
+  if (storage === "URL") {
+    if (!allStates[DEFAULT_WORKSPACE]) {
+      allStates[DEFAULT_WORKSPACE] = {};
+    }
+    if (isObject(value) && !isArray(value) && allStates[DEFAULT_WORKSPACE][name]) {
+      const existingValue = allStates[DEFAULT_WORKSPACE][name];
+      if (isObject(existingValue) && !isArray(existingValue)) {
+        merge(existingValue, value);
+      } else {
+        allStates[DEFAULT_WORKSPACE][name] = value;
+      }
+    } else {
+      allStates[DEFAULT_WORKSPACE][name] = value;
+    }
+  } else {
+    const currentPageName = getCurrentPageName();
+    if (!allStates[currentPageName]) {
+      allStates[currentPageName] = {};
+    }
+    if (!allStates[currentPageName][DEFAULT_WORKSPACE]) {
+      allStates[currentPageName][DEFAULT_WORKSPACE] = {};
+    }
+    if (isObject(value) && !isArray(value) && allStates[currentPageName][DEFAULT_WORKSPACE][name]) {
+      const existingValue = allStates[currentPageName][DEFAULT_WORKSPACE][name];
+      if (isObject(existingValue) && !isArray(existingValue)) {
+        merge(existingValue, value);
+      } else {
+        allStates[currentPageName][DEFAULT_WORKSPACE][name] = value;
+      }
+    } else {
+      allStates[currentPageName][DEFAULT_WORKSPACE][name] = value;
+    }
+  }
+  setAllStates(storage, allStates);
+};
+const clearWidgetState = (config) => {
+  var _a;
+  const { name, type, storage } = config;
+  if (storage === "none") {
+    return;
+  }
+  const allStates = getAllStates(storage);
+  if (storage === "URL") {
+    if (allStates[DEFAULT_WORKSPACE]) {
+      delete allStates[DEFAULT_WORKSPACE][name];
+      if (keys(allStates[DEFAULT_WORKSPACE]).length === 0) {
+        delete allStates[DEFAULT_WORKSPACE];
+      }
+    }
+  } else {
+    const currentPageName = getCurrentPageName();
+    if ((_a = allStates[currentPageName]) == null ? void 0 : _a[DEFAULT_WORKSPACE]) {
+      delete allStates[currentPageName][DEFAULT_WORKSPACE][name];
+      if (keys(allStates[currentPageName][DEFAULT_WORKSPACE]).length === 0) {
+        delete allStates[currentPageName][DEFAULT_WORKSPACE];
+      }
+      if (keys(allStates[currentPageName]).length === 0) {
+        delete allStates[currentPageName];
+      }
+    }
+  }
+  setAllStates(storage, allStates);
+};
+export {
+  clearPageNavigationPending,
+  clearWidgetState,
+  getWidgetState,
+  isPageNavigationPending,
+  markPageNavigationPending,
+  setWidgetState
+};

package/utils/style-utils.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Utility functions for CSS style handling and validation
+ */
+/**
+ * Validates and sanitizes a style object to ensure it contains only valid CSS properties
+ * @param styleObj - The style object to sanitize
+ * @returns A sanitized style object with only valid CSS properties
+ */
+export declare const sanitizeStyleObject: (styleObj: any) => Record<string, any>;
+/**
+ * Merges multiple style objects safely, sanitizing each one
+ * @param styleObjects - Array of style objects to merge
+ * @returns A merged and sanitized style object
+ */
+export declare const mergeStyleObjects: (...styleObjects: any[]) => Record<string, any>;
+/**
+ * Validates if a value is a valid CSS style object
+ * @param value - The value to check
+ * @returns True if the value is a valid style object
+ */
+export declare const isValidStyleObject: (value: any) => boolean;
+export declare const filterAutoLayoutClasses: (layoutClassName: string | undefined, prefixesToGet: string[], mode?: "include" | "exclude") => string;
+/**
+ * Normalizes a React style length (width, height, margin, etc.): numbers become pixel
+ * values (`${n}px`), matching common React `style` behavior; strings pass through
+ * (e.g. `100%`, `2rem`, `10px`).
+ */
+export declare const toCssLength: (value: string | number) => string;
+/** Ensures a CSS `background-image` value is wrapped in `url(...)` when needed. */
+export declare const normalizeBackgroundImage: (value: string) => string;

package/utils/style-utils.js

@@ -0,0 +1,43 @@
+const sanitizeStyleObject = (styleObj) => {
+  if (!styleObj || typeof styleObj !== "object") {
+    return {};
+  }
+  const validStyles = {};
+  Object.entries(styleObj).forEach(([key, value]) => {
+    if (typeof key === "string" && value != null) {
+      if (typeof value === "string" || typeof value === "number") {
+        validStyles[key] = value;
+      }
+    }
+  });
+  return validStyles;
+};
+const mergeStyleObjects = (...styleObjects) => {
+  const sanitizedStyles = styleObjects.map(sanitizeStyleObject);
+  return Object.assign({}, ...sanitizedStyles);
+};
+const isValidStyleObject = (value) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  return Object.entries(value).every(
+    ([key, val]) => typeof key === "string" && val != null && (typeof val === "string" || typeof val === "number")
+  );
+};
+const filterAutoLayoutClasses = (layoutClassName, prefixesToGet, mode = "include") => {
+  if (!layoutClassName || prefixesToGet.length === 0) return layoutClassName || "";
+  return layoutClassName.split(" ").filter((cls) => {
+    const matches = prefixesToGet.some((p) => cls.startsWith(p));
+    return mode === "include" ? matches : !matches;
+  }).join(" ");
+};
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : String(value);
+const normalizeBackgroundImage = (value) => value.includes("url(") ? value : `url(${value})`;
+export {
+  filterAutoLayoutClasses,
+  isValidStyleObject,
+  mergeStyleObjects,
+  normalizeBackgroundImage,
+  sanitizeStyleObject,
+  toCssLength
+};

package/utils/svg-icon.d.ts

@@ -0,0 +1,27 @@
+/** Check if the url is an SVG icon url (path ends with .svg, ignoring query/hash). */
+export declare function isSvgIconUrl(url: string | null | undefined): boolean;
+/**
+ * Resolve a raw icon URL the same way image sources are resolved in React runtime
+ * (prefab resource prefixing for relative `resources/` paths).
+ */
+export declare function resolveIconUrl(rawUrl: string | null | undefined, prefabName?: string): string | null;
+/**
+ * Make fetched SVG behave like a font icon:
+ *  - replace non-"none" fill/stroke attributes with currentColor
+ *  - replace non-"none" inline fill:/stroke: style values with currentColor
+ *  - on the root <svg>, set width/height to 1em and default fill to currentColor
+ */
+export declare function normalizeSvg(svg: string): string;
+export declare function sanitizeSvgMarkup(svg: string): string;
+/**
+ * Returns cached normalized SVG markup synchronously
+ * Use before async fetch so remounts render the icon on the first paint.
+ */
+export declare function getCachedSvgIcon(resolvedUrl: string): string | undefined;
+/**
+ * Fetch and normalize SVG markup for the given resolved URL.
+ * Results are cached module-wide; concurrent requests for the same URL share one fetch.
+ */
+export declare function fetchSvgIcon(resolvedUrl: string): Promise<string>;
+/** @internal Test helper */
+export declare function clearSvgIconCache(): void;

package/utils/svg-icon.js

@@ -0,0 +1,75 @@
+import DOMPurify from "dompurify";
+import { prefixPrefabResourceUrl } from "./resource-url";
+function isSvgIconUrl(url) {
+  if (!url) {
+    return false;
+  }
+  const path = url.split(/[?#]/)[0];
+  return /\.svg$/i.test(path);
+}
+function resolveIconUrl(rawUrl, prefabName) {
+  if (!rawUrl) {
+    return null;
+  }
+  const resolved = prefixPrefabResourceUrl(rawUrl, prefabName);
+  return resolved || null;
+}
+function normalizeSvg(svg) {
+  if (!svg) return "";
+  let out = svg;
+  out = out.replace(/fill\s*=\s*"(?!\s*none\s*")[^"]*"/gi, 'fill="currentColor"').replace(/fill\s*=\s*'(?!\s*none\s*')[^']*'/gi, "fill='currentColor'").replace(/stroke\s*=\s*"(?!\s*none\s*")[^"]*"/gi, 'stroke="currentColor"').replace(/stroke\s*=\s*'(?!\s*none\s*')[^']*'/gi, "stroke='currentColor'").replace(/(fill|stroke)\s*:\s*(?!\s*none\b)[^;"']+/gi, "$1: currentColor");
+  out = out.replace(/<svg\b([^>]*)>/i, (_match, attrs) => {
+    let updated = attrs;
+    updated = updated.replace(/\swidth\s*=\s*("[^"]*"|'[^']*')/gi, "").replace(/\s+$/, "") + ' width="1em"';
+    updated = updated.replace(/\sheight\s*=\s*("[^"]*"|'[^']*')/gi, "").replace(/\s+$/, "") + ' height="1em"';
+    updated += ' fill="currentColor"';
+    return `<svg${updated}>`;
+  });
+  return out;
+}
+function sanitizeSvgMarkup(svg) {
+  return DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } });
+}
+const svgCache = /* @__PURE__ */ new Map();
+const inFlightRequests = /* @__PURE__ */ new Map();
+function getCachedSvgIcon(resolvedUrl) {
+  return svgCache.get(resolvedUrl);
+}
+async function fetchSvgIcon(resolvedUrl) {
+  const cached = svgCache.get(resolvedUrl);
+  if (cached !== void 0) {
+    return cached;
+  }
+  let request = inFlightRequests.get(resolvedUrl);
+  if (!request) {
+    request = fetch(resolvedUrl).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch SVG: ${response.status}`);
+      }
+      return response.text();
+    }).then((raw) => {
+      const normalized = sanitizeSvgMarkup(normalizeSvg(raw));
+      svgCache.set(resolvedUrl, normalized);
+      inFlightRequests.delete(resolvedUrl);
+      return normalized;
+    }).catch((error) => {
+      inFlightRequests.delete(resolvedUrl);
+      throw error;
+    });
+    inFlightRequests.set(resolvedUrl, request);
+  }
+  return request;
+}
+function clearSvgIconCache() {
+  svgCache.clear();
+  inFlightRequests.clear();
+}
+export {
+  clearSvgIconCache,
+  fetchSvgIcon,
+  getCachedSvgIcon,
+  isSvgIconUrl,
+  normalizeSvg,
+  resolveIconUrl,
+  sanitizeSvgMarkup
+};

package/utils/transformedDataset-utils.d.ts

@@ -0,0 +1,67 @@
+interface DataObjectWithChildren {
+    [key: string]: any;
+    children?: DataSetItem[];
+}
+export declare class DataSetItem {
+    key: any;
+    label: any;
+    value: any;
+    dataObject?: DataObjectWithChildren;
+    index?: number;
+    imgSrc?: string;
+    selected?: boolean;
+    children?: DataSetItem[];
+    match?: string;
+    dateformat?: string;
+}
+export declare const transformDataset: (dataset: any, datafield: any, displayfield: any, displaylabel: any, displayexpression: any, orderby: any, groupby: any, dataPath: any, itemchildren?: any, match?: string) => DataSetItem[];
+/**
+ * function to get the ordered dataset based on the given orderby
+ */
+export declare const getOrderedDataset: (dataSet: any, orderBy: string, innerItem?: string) => any[];
+/**
+ * Returns an array of object, each object contain the DataSetItem whose key, value, label are extracted from object keys.
+ */
+export declare const transformDataWithKeys: (dataSet: any) => DataSetItem[];
+export declare const extractDataAsArray: (data: any) => any[];
+export declare const convertDataToObject: (dataResult: any) => any;
+export declare const transformFormData: (context: any, dataSet: any, myDataField: string, displayOptions?: any, startIndex?: number, scope?: any, dataPath?: string) => Array<DataSetItem>;
+export declare const getUniqObjsByDataField: (data: Array<DataSetItem>, dataField: string, displayField: string, allowEmptyFields?: boolean) => any;
+export declare const setItemByCompare: (datasetItems: Array<DataSetItem>, compareWithDataObj: object, compareByField: string) => DataSetItem | undefined;
+export declare const datasetItems: (dataset: any, datafield: string, displayfield: string, displaylabel: string, displayexpression: string, orderby: string, groupby?: string, dataPath?: string, itemchildren?: any, match?: string) => DataSetItem[];
+export declare const groupData: (compRef: any, // In React, this would likely be component props or state
+data: Array<object | DataSetItem>, groupby: string, match: string, orderby: string, dateformat?: string, innerItem?: string, AppDefaults?: any) => any[];
+/**
+ * Utility functions for list group operations
+ */
+/**
+ * Toggle all list items in all groups
+ * @param containerRef - Reference to the container element
+ * @returns void
+ */
+export declare const toggleAllHeaders: (containerRef: HTMLElement) => void;
+/**
+ * Handle click on a group header
+ * @param event - Click event
+ * @returns void
+ */
+export declare const handleHeaderClick: (event: MouseEvent) => void;
+interface DragAndDropOptions {
+    containment?: HTMLElement;
+    delay?: number;
+    opacity?: number;
+    helper?: "clone";
+    zIndex?: number;
+    tolerance?: string;
+}
+/**
+ * Configure drag and drop functionality
+ * Note: This is a basic implementation. For production use, consider using modern libraries like react-beautiful-dnd
+ * @param element - Element to make sortable
+ * @param options - Sortable options
+ * @param onDragStart - Callback when drag starts
+ * @param onUpdate - Callback when sorting ends and DOM position changes
+ * @param onSort - Optional callback during sorting
+ */
+export declare const configureDnD: (element: HTMLElement, options: DragAndDropOptions, onDragStart: (event: DragEvent) => void, onUpdate: (event: DragEvent) => void, onSort?: (event: DragEvent) => void) => void;
+export {};