@wavemaker-ai/react-runtime 1.0.0-rc.326 → 1.0.0-rc.328

package/components/basic/icon/index.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import clsx from "clsx";
@@ -21,9 +36,10 @@ import Box from "@mui/material/Box";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
 import Label from "../label";
 import { WmAppIcon } from "../../common/WmAppIcon";
+import { removeInvalidAttributes } from "../../../utils/attr";
 const DEFAULT_CLASS = "app-icon-wrapper";
 const WmIcon = memo((props) => {
-  const {
+  const _a = props, {
     name,
     listener,
     caption,
@@ -37,7 +53,21 @@ const WmIcon = memo((props) => {
     styles,
     className,
     id
-  } = props;
+  } = _a, restProps = __objRest(_a, [
+    "name",
+    "listener",
+    "caption",
+    "hint",
+    "iconclass",
+    "iconurl",
+    "prefabName",
+    "iconposition",
+    "iconsize",
+    "arialabel",
+    "styles",
+    "className",
+    "id"
+  ]);
   const wrapperStyle = useMemo(() => {
     const rootStyle = __spreadValues({}, styles || {});
     if (iconsize) {
@@ -49,7 +79,7 @@ const WmIcon = memo((props) => {
   }, [styles, iconsize]);
   return /* @__PURE__ */ jsxs(
     Box,
-    {
+    __spreadProps(__spreadValues({
       className: clsx(
         DEFAULT_CLASS,
         "wm-icon-root",
@@ -61,7 +91,8 @@ const WmIcon = memo((props) => {
       "aria-label": arialabel,
       id,
       "data-icon-position": iconposition,
-      hidden: props.hidden,
+      hidden: props.hidden
+    }, removeInvalidAttributes(restProps)), {
       children: [
         /* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
           caption,
@@ -93,7 +124,7 @@ const WmIcon = memo((props) => {
           }
         )
       ]
-    }
+    })
   );
 });
 WmIcon.displayName = "WmIcon";

package/components/basic/iframe/index.js

@@ -27,17 +27,22 @@ import {
 import { needsEncoding, toCssLength } from "./iframe.utils";
 const DEFAULT_CLASS = "embed-responsive app-iframe";
 const WmIframe = (props) => {
+  var _a, _b;
   const {
     iframesrc,
     encodeurl = false,
     name,
     hint,
     arialabel,
-    width = "300px",
-    height = "150px",
+    width,
+    height,
     className,
     styles
   } = props;
+  const styleWidth = styles == null ? void 0 : styles.width;
+  const styleHeight = styles == null ? void 0 : styles.height;
+  const effectiveWidth = (_a = width != null ? width : styleWidth) != null ? _a : "300px";
+  const effectiveHeight = (_b = height != null ? height : styleHeight) != null ? _b : "150px";
   const { safeIframeSrc, showContentLoadError, errorMsg } = useMemo(() => {
     if (!iframesrc) {
       return {
@@ -63,13 +68,18 @@ const WmIframe = (props) => {
     const rootStyle = __spreadValues({}, styles || {});
     delete rootStyle.width;
     delete rootStyle.height;
-    rootStyle["--wm-iframe-width"] = toCssLength(width);
-    rootStyle["--wm-iframe-height"] = toCssLength(height);
-    rootStyle["--wm-iframe-inner-width"] = toCssLength(width || "100%");
-    rootStyle["--wm-iframe-inner-height"] = toCssLength(height || "400px");
+    rootStyle["--wm-iframe-width"] = toCssLength(effectiveWidth);
+    rootStyle["--wm-iframe-height"] = toCssLength(effectiveHeight);
+    rootStyle["--wm-iframe-inner-width"] = toCssLength(effectiveWidth || "100%");
+    rootStyle["--wm-iframe-inner-height"] = toCssLength(effectiveHeight || "400px");
     return rootStyle;
-  }, [styles, width, height]);
-  const iframeElementStyle = useMemo(() => __spreadValues({}, styles || {}), [styles]);
+  }, [styles, effectiveWidth, effectiveHeight]);
+  const iframeElementStyle = useMemo(() => {
+    const elementStyle = __spreadValues({}, styles || {});
+    delete elementStyle.width;
+    delete elementStyle.height;
+    return elementStyle;
+  }, [styles]);
   return /* @__PURE__ */ jsxs(
     Box,
     {

package/components/basic/label/index.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { jsx } from "react/jsx-runtime";
-import { Fragment, memo } from "react";
+import { Fragment, memo, useMemo } from "react";
 import clsx from "clsx";
 import DOMPurify from "dompurify";
 import Box from "@mui/material/Box";
@@ -75,7 +75,7 @@ const WmLabel = memo(
       htmlFor,
       onClick,
       listener,
-      variant = "default:p",
+      variant,
       viewParent,
       loading,
       showSkeleton
@@ -116,6 +116,7 @@ const WmLabel = memo(
         onClick(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
       }
     };
+    const validProps = useMemo(() => removeInvalidAttributes(rest), [rest]);
     if (shouldRenderAsHTML) {
       return /* @__PURE__ */ jsx(
         Box,
@@ -129,7 +130,7 @@ const WmLabel = memo(
           caption: captionString,
           variant,
           dangerouslySetInnerHTML: { __html: sanitizedContent }
-        }, removeInvalidAttributes(rest)), {
+        }, validProps), {
           onClick: handleOnClick
         })
       );

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

@@ -37,6 +37,7 @@ declare const WmSearchStandalone: React.ComponentType<import("../../data/form/fo
     getDisplayExpression?: (data: any) => string;
     isSearchInChips?: boolean;
     onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     clearSearch?: unknown;
     destroy?: (((names: string[]) => void) | ((formName?: string) => void)) & (((names: string[]) => void) | ((formName?: string) => void));
     standalone?: boolean;
@@ -131,8 +132,78 @@ export { WmSearchStandalone as WmSearch };
  *
  * @param props - {@link WmSearchProps}
  */
-declare const _default: React.NamedExoticComponent<import("../../data/form/form-controller/props").WithFormControllerProps & {
+declare const _default: React.ComponentType<{
+    searchon?: import("./props").SearchOn;
+    showclear?: boolean | string;
+    fieldName?: string;
+    debouncetime?: number;
+    searchkey?: string;
+    matchmode?: string;
+    minchars?: number;
+    limit?: number;
+    placeholder?: string;
+    dropup?: boolean;
+    type?: import("./props").SearchType;
+    showsearchicon?: boolean;
+    showbackbutton?: boolean;
+    imagewidth?: string;
+    datacompletemsg?: string;
+    loadingdatamsg?: string;
+    clearsearchiconclass?: string;
+    clearsearchiconurl?: string;
+    backsearchiconclass?: string;
+    backsearchiconurl?: string;
+    searchiconclass?: string;
+    searchiconurl?: string;
+    navsearchbar?: boolean;
+    shortcutkey?: string;
+    id?: string;
+    onBeforeservicecall?: (widget: any, inputData: any) => void;
+    onSelect?: (event: React.MouseEvent<HTMLLIElement>, widget: any, selectedValue: any) => void;
+    onSubmit?: (event: React.MouseEvent<HTMLDivElement>, widget: any) => void;
+    onClear?: (event: any, widget: any) => void;
+    onSearch?: (event: React.MouseEvent<HTMLButtonElement>, widget: any) => void;
+    onDatasetready?: (widget: any, data: any[]) => void;
+    onQuerySearch?: (params: any, success: (val: any) => void, error: (err: any) => void) => void;
+    autofocus?: boolean;
+    dataPath?: string;
+    getDisplayExpression?: (data: any) => string;
+    isSearchInChips?: boolean;
+    onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    clearSearch?: unknown;
+    destroy?: (((names: string[]) => void) | ((formName?: string) => void)) & (((names: string[]) => void) | ((formName?: string) => void));
     standalone?: boolean;
+    datafield?: string;
+    displayfield?: string;
+    displaylabel?: string;
+    displayimagesrc?: string | ((data: any) => string);
+    displayexpression?: (data: any) => string;
+    usekeys?: boolean;
+    orderby?: string;
+    multiple?: boolean;
+    readonly?: boolean;
+    content?: string;
+    collapsible?: boolean;
+    groupby?: string;
+    allowempty?: boolean;
+    compareby?: string | any[];
+    disabled?: boolean;
+    required?: boolean;
+    isDestroyed?: boolean;
+    widgetType?: string;
+    validation?: any;
+    casesensitive?: boolean;
+    class?: string;
+    value?: any;
+    datasetItems?: any[];
+    selectedItems?: any[];
+    displayValue?: string;
+    groupedData?: any;
+    handleHeaderClick?: any;
+    toggleAllHeaders?: any;
+    isUpdateRequired?: boolean;
+    query?: string;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
     show?: boolean | string;
@@ -158,14 +229,12 @@ declare const _default: React.NamedExoticComponent<import("../../data/form/form-
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
-    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
     styles?: React.CSSProperties;
     children?: React.ReactNode;
     hidden?: boolean;
-    id?: string;
     name?: string;
     listener?: Record<string, any>;
     "data-widget-id"?: string;

package/components/basic/search/index.js

@@ -105,6 +105,7 @@ const Search = React.forwardRef((props, ref) => {
     onSubmit,
     onClear,
     onSearch,
+    onKeyDown: onKeyDownProp,
     onDatasetready,
     styles: styles = {},
     name,
@@ -179,6 +180,7 @@ const Search = React.forwardRef((props, ref) => {
     "onSubmit",
     "onClear",
     "onSearch",
+    "onKeyDown",
     "onDatasetready",
     // Added onDatasetready callback
     "styles",
@@ -219,6 +221,8 @@ const Search = React.forwardRef((props, ref) => {
   const listRef = useRef(null);
   const initializedRef = useRef(false);
   const isLoadingNextPageRef = useRef(false);
+  const latestQueryRef = useRef("");
+  const latestDatavalueRef = useRef(datavalue);
   const [query, setQuery] = useState(typeof datavalue === "string" ? datavalue : "");
   const [isOpen, setIsOpen] = useState(false);
   const [loadingItems, setLoadingItems] = useState(false);
@@ -271,12 +275,28 @@ const Search = React.forwardRef((props, ref) => {
     handleQueryChange(queryValue);
   }, [queryProp]);
   useEffect(() => {
-    var _a2;
+    latestQueryRef.current = query;
+  }, [query]);
+  useEffect(() => {
+    latestDatavalueRef.current = datavalue;
+  }, [datavalue]);
+  useEffect(() => {
+    var _a2, _b;
     if (datavalue === void 0 || datavalue === null || datavalue === "") {
       setQuery("");
       handleQueryChange("");
       setSelectedItem(null);
       setFormattedDataset([]);
+      setIsOpen(false);
+      setMenuOpen(false);
+      (_a2 = debouncedSearchRef.current) == null ? void 0 : _a2.cancel();
+      return;
+    }
+    if (props.isSearchInChips) {
+      if (!isPlainObject(datavalue)) {
+        setQuery(datavalue);
+        handleQueryChange(datavalue);
+      }
       return;
     }
     if ((isPlainObject(datavalue) || Array.isArray(datavalue)) && searchkey && Object.keys(datavalue).length > 0) {
@@ -298,13 +318,15 @@ const Search = React.forwardRef((props, ref) => {
         handleQueryChange(displayValue2);
         handleUpdateDatavalue(findItem);
       } else {
-        (_a2 = debouncedSearchItemRef.current) == null ? void 0 : _a2.call(debouncedSearchItemRef, datavalue);
+        setQuery(datavalue);
+        handleQueryChange(datavalue);
+        (_b = debouncedSearchItemRef.current) == null ? void 0 : _b.call(debouncedSearchItemRef, datavalue);
       }
     } else if (!isPlainObject(datavalue)) {
       setQuery(datavalue);
       handleQueryChange(datavalue);
     }
-  }, [datavalue]);
+  }, [datavalue, props.isSearchInChips]);
   const searchStyle = __spreadValues({
     width
   }, styles);
@@ -314,6 +336,7 @@ const Search = React.forwardRef((props, ref) => {
     }
     debouncedSearchItemRef.current = debounce(async (value2) => {
       const response = await (dataProvider == null ? void 0 : dataProvider.invokeVariable(props, value2));
+      if (latestDatavalueRef.current !== value2) return;
       if (response && response.length > 0) {
         let key = (searchkey == null ? void 0 : searchkey.split(",")[0]) || searchkey;
         if (!key) return;
@@ -432,6 +455,9 @@ const Search = React.forwardRef((props, ref) => {
         if (searchkey && isUpdateRequired2) {
           try {
             const response2 = await (dataProvider == null ? void 0 : dataProvider.invokeVariable(dataConfig, query2));
+            if (latestQueryRef.current !== query2) {
+              return [];
+            }
             if (response2) {
               const dataSet = Array.isArray(response2) ? response2 : [response2];
               if (!nextPage) {
@@ -469,6 +495,9 @@ const Search = React.forwardRef((props, ref) => {
         const localDataProvider = new LocalDataProvider();
         const response = await localDataProvider.filter(dataConfig);
         const { data, isLastPage } = response;
+        if (latestQueryRef.current !== query2) {
+          return [];
+        }
         setHasMoreData(data.length > 0 && !isLastPage);
         if (!nextPage) {
           setFormattedDataset(data);
@@ -539,6 +568,9 @@ const Search = React.forwardRef((props, ref) => {
           setLoadingItems(true);
           const data = await ((_a2 = getDataSourceRef.current) == null ? void 0 : _a2.call(getDataSourceRef, query2)) || [];
           setLoadingItems(false);
+          if (latestQueryRef.current !== query2) {
+            return;
+          }
           setFormattedDataset(data);
           if (data && data.length > 0) {
             setIsOpen(true);
@@ -562,9 +594,11 @@ const Search = React.forwardRef((props, ref) => {
     };
   }, [minchars, debouncetime]);
   useEffect(() => {
-    var _a2;
+    var _a2, _b;
     if (query && (type === "autocomplete" && listenQuery || type === "search" && searchon === "typing")) {
       (_a2 = debouncedSearchRef.current) == null ? void 0 : _a2.call(debouncedSearchRef, query);
+    } else {
+      (_b = debouncedSearchRef.current) == null ? void 0 : _b.cancel();
     }
   }, [query, type, listenQuery, searchon]);
   function clearDataValue() {
@@ -775,7 +809,7 @@ const Search = React.forwardRef((props, ref) => {
     return ((_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2.dataObject) || (item == null ? void 0 : item.dataObject) || item;
   }
   const handleMatchSelect = (match) => {
-    var _a2, _b;
+    var _a2, _b, _c;
     if (readonly || disabled) {
       return;
     }
@@ -814,10 +848,16 @@ const Search = React.forwardRef((props, ref) => {
           // Chips expects queryModel (DataSetItem), not the raw dataObject
           props.isSearchInChips ? item : selectedItem2
         );
-        props.onSubmit && !props.isSearchInChips && props.onSubmit(
-          new MouseEvent("click"),
-          props
-        );
+      }
+      if (onSubmit && !props.isSearchInChips && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
+        const submitEvent = new MouseEvent("click");
+        submitEvent.data = {
+          item: ((_c = item == null ? void 0 : item.dataObject) == null ? void 0 : _c.dataObject) || (item == null ? void 0 : item.dataObject) || item,
+          model: item.value,
+          label: item.label,
+          query
+        };
+        onSubmit(submitEvent, props);
       }
     } catch (error) {
       console.error("Error parsing item data:", error);
@@ -924,20 +964,17 @@ const Search = React.forwardRef((props, ref) => {
   const highlightMatch = (text, query2) => {
     if (!query2 || !text) return text;
     try {
-      const parts = text.split(new RegExp(`(${query2})`, "gi"));
-      return parts.map((part, index) => {
-        if (part.toLowerCase() === query2.toLowerCase()) {
-          return /* @__PURE__ */ jsx("strong", { className: "wm-search-match-highlight", children: part }, index);
-        }
-        return part;
-      });
+      return text.replace(
+        new RegExp(`(${query2})`, "gi"),
+        '<strong class="wm-search-match-highlight">$1</strong>'
+      );
     } catch (e) {
       return text;
     }
   };
   const renderItem = (item, query2, index) => {
     const dataItem = prepareDataItem(item, index);
-    const displayText = typeof dataItem.displayValue === "string" ? DOMPurify.sanitize(dataItem.displayValue) : String(dataItem.label);
+    const displayText = typeof dataItem.displayValue === "string" ? DOMPurify.sanitize(dataItem.displayValue) : DOMPurify.sanitize(String(dataItem.label));
     function handleClick(event) {
       handleMenuItemClick(event, dataItem);
     }
@@ -973,7 +1010,20 @@ const Search = React.forwardRef((props, ref) => {
                   className: "wm-search-item-image"
                 }
               ),
-              /* @__PURE__ */ jsx(Box, { component: "span", className: "", title: displayText, children: getDisplayExpression ? highlightMatch(getDisplayExpression(getSelectedItem(item)), query2) : highlightMatch(displayText, query2) })
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  className: "",
+                  title: displayText,
+                  dangerouslySetInnerHTML: {
+                    __html: getDisplayExpression ? highlightMatch(
+                      DOMPurify.sanitize(String(getDisplayExpression(getSelectedItem(item)))),
+                      query2
+                    ) : highlightMatch(displayText, query2)
+                  }
+                }
+              )
             ] })
           }
         )
@@ -1179,7 +1229,10 @@ const Search = React.forwardRef((props, ref) => {
             readOnly: readonly,
             onBlur: (e) => handleBlur(e),
             onFocus: (e) => handleFocus(e),
-            onKeyDown: (e) => handleKeyDown(e)
+            onKeyDown: (e) => {
+              onKeyDownProp == null ? void 0 : onKeyDownProp(e);
+              handleKeyDown(e);
+            }
           }
         ),
         type === "autocomplete" ? null : /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-addon", children: /* @__PURE__ */ jsx(Box, { component: "form", noValidate: true, autoComplete: "off", children: renderSearchIcon() }) }),
@@ -1190,9 +1243,10 @@ const Search = React.forwardRef((props, ref) => {
     })
   ) });
 });
-const WmSearchStandalone = withStandalone(withFormController(Search));
+const WithFormSearch = withFormController(Search);
+const WmSearchStandalone = withStandalone(WithFormSearch);
 Search.displayName = "WmSearch";
-var search_default = withFormController(withBaseWrapper(Search));
+var search_default = withBaseWrapper(WithFormSearch);
 export {
   WmSearchStandalone as WmSearch,
   search_default as default

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

@@ -152,6 +152,10 @@ export interface SearchProps extends DatasetAwareFormComponentProps {
      * Callback fired when the search value changes.
      */
     onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
+    /**
+     * Callback fired on keydown in the search input (e.g. Chips' backspace-to-delete-chip handling).
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     clearSearch?: unknown;
     destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     /**

package/components/common/WmAppIcon/index.js

@@ -64,6 +64,7 @@ function SvgIconInline({
 }
 const WmAppIcon = memo((props) => {
   const {
+    icon,
     iconclass,
     iconurl,
     defaultIconClass,
@@ -73,19 +74,21 @@ const WmAppIcon = memo((props) => {
     prefabName
   } = props;
   const extras = useMemo(() => toExtraClasses(defaultClasses), [defaultClasses]);
-  const isSvg = isSvgIconUrl(iconurl);
-  const isImage = !!iconurl && !isSvg;
+  const effectiveIconurl = iconurl || (isSvgIconUrl(icon) ? icon : null);
+  const effectiveIconclass = iconclass || (icon && !isSvgIconUrl(icon) ? icon : null);
+  const isSvg = isSvgIconUrl(effectiveIconurl);
+  const isImage = !!effectiveIconurl && !isSvg;
   const fontClass = useMemo(
-    () => [defaultIconClass, iconclass].filter(Boolean).join(" "),
-    [defaultIconClass, iconclass]
+    () => [defaultIconClass, effectiveIconclass].filter(Boolean).join(" "),
+    [defaultIconClass, effectiveIconclass]
   );
   const resolvedImageUrl = useMemo(
-    () => isImage ? resolveIconUrl(iconurl, prefabName) : null,
-    [isImage, iconurl, prefabName]
+    () => isImage ? resolveIconUrl(effectiveIconurl, prefabName) : null,
+    [isImage, effectiveIconurl, prefabName]
   );
   const resolvedSvgUrl = useMemo(
-    () => isSvg && iconurl ? resolveIconUrl(iconurl, prefabName) : null,
-    [isSvg, iconurl, prefabName]
+    () => isSvg && effectiveIconurl ? resolveIconUrl(effectiveIconurl, prefabName) : null,
+    [isSvg, effectiveIconurl, prefabName]
   );
   if (isSvg && resolvedSvgUrl) {
     return /* @__PURE__ */ jsx("span", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(

package/components/common/WmAppIcon/props.d.ts

@@ -1,5 +1,7 @@
 import { CSSProperties } from "react";
 export interface WmAppIconProps {
+    /** Generic icon value: `.svg` URL -> inline SVG, anything else -> font-icon class. Lower priority than iconclass/iconurl. */
+    icon?: string | null;
     /** Font-icon CSS class (e.g. `wi wi-user`). Lowest priority when iconurl is set. */
     iconclass?: string | null;
     /** Icon URL. `.svg` -> inline SVG, anything else -> `<img>`. Wins over iconclass. */

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

@@ -30,6 +30,7 @@ declare const _default: React.ComponentType<{
     render?: (props: WmAccordionPaneProps, onLoadCallback?: () => void) => React.ReactNode;
     tabindex?: number;
     layoutClassName?: string;
+    direction?: string;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;

package/components/container/accordion/accordion-pane/index.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { WmAppIcon } from "../../../common/WmAppIcon";
@@ -61,12 +64,13 @@ const WmAccordionPane = memo((Props) => {
   }, [props.onLoad]);
   return /* @__PURE__ */ jsxs(
     Accordion.Root,
-    {
+    __spreadProps(__spreadValues({
       tabIndex: props.tabindex,
       className: clsx(DEFAULT_CLASS, props.className, props.layoutClassName),
       name: props.name,
       show: (_a = props.show) != null ? _a : true,
-      hidden: (_b = props.hidden) != null ? _b : false,
+      hidden: (_b = props.hidden) != null ? _b : false
+    }, props.direction ? { direction: props.direction } : {}), {
       children: [
         /* @__PURE__ */ jsx(
           AccordionSummary,
@@ -111,7 +115,7 @@ const WmAccordionPane = memo((Props) => {
           return (_a2 = props.onLoad) == null ? void 0 : _a2.call(props, props);
         }) : props.children }) })
       ]
-    }
+    })
   );
 });
 WmAccordionPane.displayName = "WmAccordionPane";

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

@@ -81,6 +81,7 @@ export interface AccordionPanePropsBase {
      * Utility layout classes from Studio Auto Layout (merged on the pane root).
      */
     layoutClassName?: string;
+    direction?: string;
 }
 /**
  * Combined props for the WmAccordionPane component, including base WaveMaker props.

package/components/container/index.js

@@ -34,7 +34,8 @@ import {
   useEffect,
   useRef,
   useMemo,
-  useCallback
+  useCallback,
+  useState
 } from "react";
 import { clsx } from "clsx";
 import { withBaseWrapper } from "../../higherOrder/withBaseWrapper";
@@ -43,7 +44,7 @@ import { removeInvalidAttributes } from "../../utils/attr";
 import { normalizeBackgroundImage } from "../../utils/style-utils";
 const DEFAULT_CLASS = "app-container";
 const WmContainer = (props) => {
-  var _c;
+  var _c, _d, _e;
   const _a = props, { listener } = _a, restPartialProps = __objRest(_a, ["listener"]);
   const _b = restPartialProps, {
     className,
@@ -153,6 +154,9 @@ const WmContainer = (props) => {
   const isLoaded = useRef(false);
   const widget_instance = (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name];
   const containerRef = useRef(null);
+  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 containerStyles = useMemo(() => {
     if (!(styles == null ? void 0 : styles.backgroundImage)) {
       return styles;
@@ -205,6 +209,9 @@ const WmContainer = (props) => {
         viewParent.Widgets[props.name || partialName] = widget || props;
         isLoaded.current = true;
         onLoad == null ? void 0 : onLoad(widget || props);
+        if (!props.name && partialName) {
+          setPartialHostKey(partialName);
+        }
       }
     },
     [onLoad, props.name]
@@ -217,7 +224,7 @@ const WmContainer = (props) => {
   const classNames = (className == null ? void 0 : className.split(" ")) || [];
   return /* @__PURE__ */ jsx(
     "div",
-    __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({
       className: clsx(
         {
           [className || ""]: Boolean(className),
@@ -229,10 +236,11 @@ const WmContainer = (props) => {
       ),
       "data-widget-id": props["data-widget-id"],
       id,
-      hidden: props.hidden
+      hidden: props.hidden || hostShouldHide
     }, removeInvalidAttributes(rest)), domEvents), { name }), {
       style: __spreadValues(__spreadValues({}, containerStyles), conditionalstyle),
-      ref: containerRef,
+      ref: containerRef
+    }), direction ? { direction } : {}), {
       children: renderPartial ? renderPartial(restPartialProps, handleOnLoad) : children
     })
   );