@wavemaker-ai/react-runtime 1.0.0-rc.647684 → 12.0.0-rc.335

package/components/advanced/carousel/index.d.ts

@@ -30,6 +30,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/advanced/carousel/template.d.ts

@@ -29,6 +29,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/advanced/login/index.d.ts

@@ -33,6 +33,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/advanced/marquee/index.d.ts

@@ -25,6 +25,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/anchor/index.d.ts

@@ -40,6 +40,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/anchor/index.js

@@ -107,7 +107,7 @@ const WmAnchor = (props) => {
   }, [onClick, path]);
   const processedHyperlink = useMemo(() => {
     if (!hyperlink) return "#";
-    let processedLink = hyperlink;
+    let processedLink = String(hyperlink);
     if (encodeurl === "true") {
       processedLink = encodeURIComponent(processedLink);
     }
@@ -118,7 +118,7 @@ const WmAnchor = (props) => {
   }, [hyperlink, encodeurl]);
   const doesHyperlinkMatchCurrentPath = useMemo(() => {
     if (!hyperlink) return false;
-    let processedLink = hyperlink;
+    let processedLink = String(hyperlink);
     if (processedLink.startsWith("www.")) {
       processedLink = `//${processedLink}`;
     }
@@ -200,9 +200,7 @@ const WmAnchor = (props) => {
       className: clsx(DEFAULT_CLASS, "wm-anchor-link", {
         [className || ""]: Boolean(className),
         active: isActive,
-        "wm-anchor-icon-left": iconposition === "left",
-        "wm-anchor-icon-top": iconposition === "top",
-        "wm-anchor-icon-right": iconposition === "right"
+        "wm-anchor-icon-top": iconposition === "top"
       }),
       onContextMenu: handleContextMenu,
       accessKey: shortcutkey,

package/components/basic/audio/index.d.ts

@@ -30,6 +30,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/html/index.d.ts

@@ -26,6 +26,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/icon/index.d.ts

@@ -27,6 +27,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/iframe/index.d.ts

@@ -23,6 +23,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/label/index.d.ts

@@ -29,6 +29,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/picture/index.d.ts

@@ -33,6 +33,7 @@ declare const _default: React.ComponentType<{
     padding?: string;
     margin?: string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/progress-bar/index.d.ts

@@ -30,6 +30,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/progress-circle/index.d.ts

@@ -35,6 +35,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/richtexteditor/index.d.ts

@@ -18,6 +18,7 @@ declare const WmRichTextEditorStandalone: React.ComponentType<import("../../data
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
@@ -77,6 +78,7 @@ declare const _default: React.ComponentType<{
     standalone?: boolean;
     formRef?: any;
     formKey?: string;
+    hideValidationMessage?: boolean;
     name: string;
     datavalue?: any;
     defaultvalue?: any;
@@ -107,6 +109,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/search/index.js

@@ -55,6 +55,7 @@ import {
   CustomTemplateCaption,
   useCustomTemplate
 } from "../../common/customTemplate";
+import { toPlainText } from "./utils";
 const DEFAULT_CLASS = "app-search input-group";
 const Search = React.forwardRef((props, ref) => {
   const _a = props, {
@@ -303,7 +304,7 @@ const Search = React.forwardRef((props, ref) => {
       const value2 = Array.isArray(datavalue) ? datavalue[0] : datavalue;
       if (value2) {
         const key = searchkey.split(",")[0] || searchkey;
-        const item = (getDisplayExpression == null ? void 0 : getDisplayExpression(value2)) || value2[key];
+        const item = toPlainText(getDisplayExpression == null ? void 0 : getDisplayExpression(value2)) || value2[key];
         if (item) {
           setQuery(item);
           handleQueryChange(item);
@@ -313,7 +314,7 @@ const Search = React.forwardRef((props, ref) => {
     } else if (datafield !== "All Fields" && datafield) {
       let findItem = normalizedData == null ? void 0 : normalizedData.find((item) => item.value === datavalue);
       if (findItem) {
-        let displayValue2 = (getDisplayExpression == null ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem.label;
+        let displayValue2 = toPlainText(getDisplayExpression == null ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem.label;
         setQuery(displayValue2);
         handleQueryChange(displayValue2);
         handleUpdateDatavalue(findItem);
@@ -342,7 +343,7 @@ const Search = React.forwardRef((props, ref) => {
         if (!key) return;
         const findItem = response.find((item) => item[key] == value2);
         if (findItem && Object.keys(findItem).length > 0) {
-          let displayValue2 = (getDisplayExpression == null ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem[key];
+          let displayValue2 = toPlainText(getDisplayExpression == null ? void 0 : getDisplayExpression(getSelectedItem(findItem))) || findItem[key];
           setQuery(displayValue2);
           handleQueryChange(displayValue2);
         }
@@ -816,7 +817,7 @@ const Search = React.forwardRef((props, ref) => {
     try {
       const item = JSON.parse(itemData);
       const selectedItem2 = getSelectedItem(item);
-      const displayVal = (getDisplayExpression == null ? void 0 : getDisplayExpression(selectedItem2)) || item.displayValue || item.label;
+      const displayVal = toPlainText(getDisplayExpression == null ? void 0 : getDisplayExpression(selectedItem2)) || item.displayValue || item.label;
       if (props.isSearchInChips) {
         setQuery("");
         handleQueryChange("");

package/components/basic/search/utils.d.ts

@@ -0,0 +1 @@
+export declare function toPlainText(value: any): any;

package/components/basic/search/utils.js

@@ -0,0 +1,9 @@
+import DOMPurify from "dompurify";
+function toPlainText(value) {
+  if (value == null) return value;
+  const str = String(value);
+  return /<[^>]+>/.test(str) ? DOMPurify.sanitize(str, { ALLOWED_TAGS: [] }) : str;
+}
+export {
+  toPlainText
+};

package/components/basic/spinner/index.d.ts

@@ -32,6 +32,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/tile/index.d.ts

@@ -25,6 +25,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/tree/index.d.ts

@@ -40,6 +40,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/basic/video/index.d.ts

@@ -37,6 +37,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/chart/index.d.ts

@@ -90,6 +90,7 @@ declare const _default: React.ComponentType<{
     padding?: string;
     margin?: string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/common/index.d.ts

@@ -3,3 +3,5 @@ export { WmSkeleton, SKELETON_REGISTRY, shouldShowSkeleton, useShouldShowSkeleto
 export type { WmSkeletonProps, SkeletonConfig } from "./wm-skeleton";
 export { WmAppIcon } from "./WmAppIcon";
 export type { WmAppIconProps } from "./WmAppIcon/props";
+export { PartialContentWrapper } from "./partial-content-wrapper";
+export type { PartialContentWrapperProps } from "./partial-content-wrapper";

package/components/common/index.js

@@ -6,8 +6,10 @@ import {
   useShouldShowSkeleton
 } from "./wm-skeleton";
 import { WmAppIcon } from "./WmAppIcon";
+import { PartialContentWrapper } from "./partial-content-wrapper";
 export {
   AppSpinner,
+  PartialContentWrapper,
   SKELETON_REGISTRY,
   WmAppIcon,
   WmSkeleton,

package/components/common/partial-content-wrapper.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+export interface PartialContentWrapperProps {
+    content?: string;
+    children?: ReactNode;
+}
+/**
+ * Wraps a layout region's rendered partial in an `app-partial-{content}` div,
+ * matching the DOM produced by WmPartialContainer in preview so CSS scoped to
+ * that class (e.g. `.app-partial-header`) also applies in codegen builds.
+ * Used by the header/leftnav/rightnav/topnav/footer layout regions only.
+ */
+export declare const PartialContentWrapper: {
+    ({ content, children }: PartialContentWrapperProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/components/common/partial-content-wrapper.js

@@ -0,0 +1,11 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+const PartialContentWrapper = ({ content, children }) => {
+  if (!content) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `app-partial-${content.toLowerCase()}`, children });
+};
+PartialContentWrapper.displayName = "PartialContentWrapper";
+export {
+  PartialContentWrapper
+};

package/components/container/accordion/accordion-pane/index.d.ts

@@ -40,6 +40,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/accordion/index.d.ts

@@ -35,6 +35,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/index.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import { WmContainerProps } from "./props";
+export declare const WmContainerContext: React.Context<{
+    registerPartial: (partialName: string, widget: any) => void;
+}>;
 export declare const WmContainer: {
     (props: WmContainerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -31,6 +34,7 @@ declare const _default: React.ComponentType<{
     layoutClassName?: string;
     layoutWidth?: string;
     layoutHeight?: string;
+    class?: string;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;

package/components/container/index.js

@@ -35,14 +35,20 @@ import {
   useRef,
   useMemo,
   useCallback,
-  useState
+  useState,
+  createContext
 } from "react";
 import { clsx } from "clsx";
 import { withBaseWrapper } from "../../higherOrder/withBaseWrapper";
 import { useLayoutSize } from "../../hooks/useLayoutSize";
 import { removeInvalidAttributes } from "../../utils/attr";
-import { normalizeBackgroundImage } from "../../utils/style-utils";
+import {
+  normalizeBackgroundImage,
+  sanitizeStyleObject
+} from "../../utils/style-utils";
+import { publishPartialNamespaces, toHostWidgetProps } from "../../utils/partial-host-util";
 const DEFAULT_CLASS = "app-container";
+const WmContainerContext = createContext(void 0);
 const WmContainer = (props) => {
   var _c, _d, _e;
   const _a = props, { listener } = _a, restPartialProps = __objRest(_a, ["listener"]);
@@ -97,7 +103,8 @@ const WmContainer = (props) => {
     content,
     overflow,
     display,
-    layoutClassName
+    layoutClassName,
+    class: classOverride
   } = _b, rest = __objRest(_b, [
     "className",
     "styles",
@@ -149,7 +156,8 @@ const WmContainer = (props) => {
     "content",
     "overflow",
     "display",
-    "layoutClassName"
+    "layoutClassName",
+    "class"
   ]);
   const isLoaded = useRef(false);
   const widget_instance = (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name];
@@ -157,6 +165,7 @@ const WmContainer = (props) => {
   const [partialHostKey, setPartialHostKey] = useState(void 0);
   const hostWidgetState = partialHostKey ? (_d = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _d[partialHostKey] : void 0;
   const hostShouldHide = ((_e = hostWidgetState == null ? void 0 : hostWidgetState.show) == null ? void 0 : _e.toString()) === "false";
+  const registeredPartialRef = useRef(false);
   const containerStyles = useMemo(() => {
     if (!(styles == null ? void 0 : styles.backgroundImage)) {
       return styles;
@@ -206,7 +215,15 @@ const WmContainer = (props) => {
   const handleOnLoad = useCallback(
     (widget, partialName) => {
       if (viewParent && viewParent.Widgets && !isLoaded.current) {
-        viewParent.Widgets[props.name || partialName] = widget || props;
+        const hostKey = props.name || partialName;
+        if (!widget || prefab) {
+          viewParent.Widgets[hostKey] = widget || props;
+        } else {
+          if (!props.name) {
+            viewParent.Widgets[hostKey] = toHostWidgetProps(props);
+          }
+          publishPartialNamespaces(viewParent.Widgets[hostKey], widget);
+        }
         isLoaded.current = true;
         onLoad == null ? void 0 : onLoad(widget || props);
         if (!props.name && partialName) {
@@ -214,20 +231,29 @@ const WmContainer = (props) => {
         }
       }
     },
-    [onLoad, props.name]
+    [onLoad, props.name, prefab]
   );
   useEffect(() => {
     if (!content && onLoad && !isLoaded.current) {
       handleOnLoad(widget_instance || props);
     }
   }, []);
-  const classNames = (className == null ? void 0 : className.split(" ")) || [];
-  return /* @__PURE__ */ jsx(
+  const classNames = classOverride || (className == null ? void 0 : className.split(" ")) || [];
+  const handleRegisterPartial = useCallback(
+    (partialName, widget) => {
+      if (viewParent && viewParent.Widgets && !registeredPartialRef.current) {
+        viewParent.Widgets[partialName] = widget || props;
+        registeredPartialRef.current = true;
+      }
+    },
+    [viewParent]
+  );
+  return /* @__PURE__ */ jsx(WmContainerContext.Provider, { value: { registerPartial: handleRegisterPartial }, children: /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({
       className: clsx(
         {
-          [className || ""]: Boolean(className),
+          [classOverride || className || ""]: Boolean(className),
           [DEFAULT_CLASS]: !["form-elements", "dynamic-form-container"].some(
             (cls) => classNames == null ? void 0 : classNames.includes(cls)
           )
@@ -238,16 +264,17 @@ const WmContainer = (props) => {
       id,
       hidden: props.hidden || hostShouldHide
     }, removeInvalidAttributes(rest)), domEvents), { name }), {
-      style: __spreadValues(__spreadValues({}, containerStyles), conditionalstyle),
+      style: __spreadValues(__spreadValues({}, sanitizeStyleObject(containerStyles)), sanitizeStyleObject(conditionalstyle)),
       ref: containerRef
     }), direction ? { direction } : {}), {
       children: renderPartial ? renderPartial(restPartialProps, handleOnLoad) : children
     })
-  );
+  ) });
 };
 WmContainer.displayName = "WmContainer";
 var container_default = withBaseWrapper(WmContainer);
 export {
   WmContainer,
+  WmContainerContext,
   container_default as default
 };

package/components/container/layout-grid/grid-column/index.d.ts

@@ -26,6 +26,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/layout-grid/grid-row/index.d.ts

@@ -22,6 +22,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/layout-grid/index.d.ts

@@ -24,6 +24,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/layout-grid/index.js

@@ -41,7 +41,7 @@ const WmLayoutgrid = (props) => {
     Container,
     __spreadProps(__spreadValues({
       style: styles,
-      className: clsx(DEFAULT_CLASS, "wm-layout-grid-root", className)
+      className: clsx(DEFAULT_CLASS, className)
     }, removeInvalidAttributes(restProps)), {
       maxWidth: false,
       children

package/components/container/linear-layout/index.d.ts

@@ -23,6 +23,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/linear-layout/linear-layout-item/index.d.ts

@@ -20,6 +20,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/panel/index.d.ts

@@ -74,6 +74,7 @@ declare const _default: React.ComponentType<{
     margin?: string;
     width?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/props.d.ts

@@ -64,6 +64,7 @@ export interface ContainerPropsBase {
     layoutClassName?: string;
     layoutWidth?: string;
     layoutHeight?: string;
+    class?: string;
 }
 /**
  * Combined props for the WmContainer component, including base WaveMaker props.

package/components/container/repeat-template/index.d.ts

@@ -18,6 +18,7 @@ declare const _default: import("react").ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: import("react").CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];

package/components/container/repeat-template/index.js

@@ -41,7 +41,7 @@ const WmRepeatTemplate = memo(
       "div",
       __spreadProps(__spreadValues({
         className: "app-repeat-item",
-        hidden: !show
+        hidden: show === false || show === "false"
       }, removeInvalidAttributes(restProps)), {
         children
       })

package/components/container/tabs/index.d.ts

@@ -43,6 +43,7 @@ declare const _default: React.ComponentType<{
     width?: number | string;
     height?: number | string;
     className?: string;
+    class?: string;
     conditionalstyle?: React.CSSProperties;
     conditionalclass?: string;
     showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];