@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/page/content/index.js

@@ -0,0 +1,35 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-content clearfix";
+function WmContent(props) {
+  var styles = props.styles,
+    children = props.children,
+    className = props.className;
+  return __jsx("main", {
+    style: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className)
+  }, __jsx("div", {
+    className: "app-content-row"
+  }, children));
+}
+WmContent.displayName = "WmContent";
+
+/**
+ * The WmContent component is the main content area container for page layout.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-content--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-content--docs#tab-overview)
+ *
+ * @param props - {@link WmContentProps}
+ */
+var _default = exports["default"] = WmContent;

package/components/page/content/props.d.ts

@@ -0,0 +1,6 @@
+import { BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * WmContent has no additional props beyond BaseProps.
+ * Combined props for the WmContent component.
+ */
+export type WmContentProps = BaseProps;

package/components/page/content/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/page/error-boundary/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ErrorFallbackProps } from "./props";
+declare const ErrorFallback: React.FC<ErrorFallbackProps>;
+/**
+ * The ErrorFallback component displays a user-friendly error UI when a React error boundary catches an error.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-error-boundary--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-error-boundary--docs#tab-overview)
+ *
+ * @param props - {@link ErrorFallbackProps}
+ */
+export default ErrorFallback;

package/components/page/error-boundary/index.js

@@ -0,0 +1,119 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _button = require("../../form/button");
+var _label = require("../../basic/label");
+var _icon = require("../../basic/icon");
+var _picture = require("../../basic/picture");
+var _container = require("../../container");
+var _store = require("../../../store");
+var _navigationMiddleware = require("../../../store/middleware/navigationMiddleware");
+var __jsx = _react["default"].createElement;
+var ErrorFallback = function ErrorFallback(_ref) {
+  var _store$getState;
+  var error = _ref.error,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Something went wrong." : _ref$title,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? "Please try again." : _ref$subtitle,
+    _ref$imageSource = _ref.imageSource,
+    imageSource = _ref$imageSource === void 0 ? "/error-fallback.svg" : _ref$imageSource;
+  var homePage = (_store$getState = _store.store.getState()) === null || _store$getState === void 0 || (_store$getState = _store$getState.info) === null || _store$getState === void 0 || (_store$getState = _store$getState.appConfig) === null || _store$getState === void 0 || (_store$getState = _store$getState.appProperties) === null || _store$getState === void 0 ? void 0 : _store$getState.homePage;
+  var handleGoHome = function handleGoHome() {
+    var router = (0, _navigationMiddleware.getRouterInstance)();
+    if (router && homePage) {
+      router.push(homePage);
+    } else {
+      window.location.href = window.location.origin;
+    }
+  };
+  var handleGoBack = function handleGoBack() {
+    var router = (0, _navigationMiddleware.getRouterInstance)();
+    if (router && window.history.length > 1) {
+      router.back();
+    } else {
+      window.location.href = window.location.origin;
+    }
+  };
+  return __jsx("div", {
+    className: "error-container"
+  }, __jsx("div", {
+    className: "error-info-container"
+  }, __jsx(_container.WmContainer, {
+    name: "error-container",
+    listener: {},
+    className: "error-image-container"
+  }, __jsx(_picture.WmPicture, {
+    picturesource: imageSource || "/error-fallback.svg",
+    resizemode: "contain",
+    name: "error-picture",
+    listener: {},
+    className: "error-fallback-image",
+    width: "120px",
+    height: "120px",
+    alttext: "Error illustration"
+  })), __jsx(_label.WmLabel, {
+    caption: title || "Something went wrong.",
+    className: "error-fallback-title",
+    type: "h2",
+    name: "error-title",
+    listener: {}
+  }), __jsx(_label.WmLabel, {
+    caption: subtitle || "Please try again.",
+    className: "error-fallback-subtitle",
+    name: "error-subtitle",
+    listener: {}
+  }), error && __jsx("div", {
+    className: "error-card"
+  }, __jsx("div", {
+    className: "error-card-row"
+  }, __jsx(_icon.WmIcon, {
+    id: "error-icon",
+    iconclass: "wi wi-error",
+    className: "error-fallback-erroricon",
+    iconsize: "20px",
+    name: "error-icon",
+    listener: {}
+  }), __jsx(_label.WmLabel, {
+    caption: "Error",
+    className: "error-fallback-error-label",
+    name: "error-label",
+    listener: {}
+  })), __jsx(_label.WmLabel, {
+    caption: (error === null || error === void 0 ? void 0 : error.message) || "An unexpected error occurred",
+    className: "error-fallback-error-message",
+    name: "error-message",
+    listener: {}
+  }))), __jsx("div", {
+    className: "error-button-container"
+  }, __jsx(_button.WmButton, {
+    caption: "Go to Home",
+    onClick: handleGoHome,
+    className: "btn btn-primary",
+    name: "go-to-home",
+    listener: {}
+  }), __jsx(_button.WmButton, {
+    caption: "Go Back",
+    onClick: handleGoBack,
+    className: "btn-secondary",
+    name: "go-back",
+    listener: {}
+  })));
+};
+
+/**
+ * The ErrorFallback component displays a user-friendly error UI when a React error boundary catches an error.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-error-boundary--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-error-boundary--docs#tab-overview)
+ *
+ * @param props - {@link ErrorFallbackProps}
+ */
+var _default = exports["default"] = ErrorFallback;

package/components/page/error-boundary/props.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Error object passed to the error fallback.
+ */
+export interface ErrorFallbackError {
+    message: string;
+    stack?: string;
+}
+/**
+ * Error info object with component stack.
+ */
+export interface ErrorFallbackErrorInfo {
+    componentStack?: string;
+}
+/**
+ * Props for the ErrorFallback component.
+ */
+export interface ErrorFallbackProps {
+    /** The error that was caught. */
+    error?: ErrorFallbackError;
+    /** Additional error info including component stack. */
+    errorInfo?: ErrorFallbackErrorInfo;
+    /** Title displayed in the fallback UI. */
+    title?: string;
+    /** Subtitle/description displayed in the fallback UI. */
+    subtitle?: string;
+    /** Image source for the error illustration. */
+    imageSource?: string;
+    /** Callback when error is displayed (for logging/analytics). */
+    onError?: (error: ErrorFallbackError, errorInfo: ErrorFallbackErrorInfo) => void;
+}

package/components/page/error-boundary/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/page/index.d.ts

@@ -0,0 +1,15 @@
+import { WmPageProps } from "./props";
+declare function WmPage(props: WmPageProps): import("react/jsx-runtime").JSX.Element;
+declare namespace WmPage {
+    var displayName: string;
+}
+/**
+ * The WmPage component is the root container for a WaveMaker page layout.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page--docs#tab-overview)
+ *
+ * @param props - {@link WmPageProps}
+ */
+export default WmPage;

package/components/page/index.js

@@ -0,0 +1,151 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Container = _interopRequireDefault(require("@mui/material/Container"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["className", "styles", "children"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "app-page container";
+function WmPage(props) {
+  var propsRef = (0, _react.useRef)(props);
+  propsRef.current = props;
+  var _useState = (0, _react.useState)(function () {
+      return {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+    }),
+    windowSize = _useState[0],
+    setWindowSize = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    hasFullNavHeight = _useState2[0],
+    setHasFullNavHeight = _useState2[1];
+  var handleNavHeightChange = (0, _react.useCallback)(function (isFull) {
+    setHasFullNavHeight(isFull);
+  }, []);
+  var handleResize = (0, _react.useCallback)(function () {
+    var newSize = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    setWindowSize(function (prevSize) {
+      // Only update if size actually changed
+      if (prevSize.width !== newSize.width || prevSize.height !== newSize.height) {
+        var currentProps = propsRef.current;
+        if (currentProps.OnResize) {
+          currentProps.OnResize({
+            type: "resize",
+            target: window
+          }, currentProps, newSize);
+        }
+        return newSize;
+      }
+      return prevSize;
+    });
+  }, []);
+
+  // Memoized orientation change handler
+  var handleOrientationChange = (0, _react.useCallback)(function (event) {
+    var currentProps = propsRef.current;
+    if (currentProps.OnOrientationChange) {
+      currentProps.OnOrientationChange(event, currentProps);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (props.OnAttach) {
+      props.OnAttach({
+        type: "attach",
+        target: window
+      }, props);
+    }
+    return function () {
+      var currentProps = propsRef.current;
+      if (currentProps.OnDetach) {
+        currentProps.OnDetach({
+          type: "detach",
+          target: window
+        }, currentProps);
+      }
+      if (currentProps.OnDestroy) {
+        currentProps.OnDestroy({
+          type: "destroy",
+          target: window
+        }, currentProps);
+      }
+    };
+  }, []); // Empty dependency array - only run once
+
+  // Handle resize events
+  (0, _react.useEffect)(function () {
+    window.addEventListener("resize", handleResize);
+
+    // Call once initially if OnResize exists
+    if (props.OnResize) {
+      props.OnResize({
+        type: "resize",
+        target: window
+      }, props, windowSize);
+    }
+    return function () {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handleResize]);
+  (0, _react.useEffect)(function () {
+    if (!props.OnOrientationChange) return;
+    window.addEventListener("orientationchange", handleOrientationChange);
+    return function () {
+      window.removeEventListener("orientationchange", handleOrientationChange);
+    };
+  }, [handleOrientationChange, props.OnOrientationChange]);
+
+  // Extract the props we're setting explicitly to avoid overrides
+  var className = props.className,
+    styles = props.styles,
+    children = props.children,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var childrenWithCallback = (0, _react.useMemo)(function () {
+    return _react["default"].Children.map(children, function (child) {
+      if (/*#__PURE__*/_react["default"].isValidElement(child)) {
+        if (typeof child.type === "string") {
+          return child;
+        }
+        return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread({
+          onNavHeightChange: handleNavHeightChange
+        }, child.props));
+      }
+      return child;
+    });
+  }, [children, handleNavHeightChange]);
+  return __jsx(_Container["default"], (0, _extends2["default"])({}, (0, _attr.removeInvalidAttributes)(restProps), {
+    className: (0, _clsx["default"])(DEFAULT_CLASS, {
+      "app-nav-full": hasFullNavHeight
+    }, className),
+    sx: _objectSpread({}, styles)
+  }), childrenWithCallback);
+}
+WmPage.displayName = "WmPage";
+
+/**
+ * The WmPage component is the root container for a WaveMaker page layout.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page--docs#tab-overview)
+ *
+ * @param props - {@link WmPageProps}
+ */
+var _default = exports["default"] = WmPage;

package/components/page/page-content/index.d.ts

@@ -0,0 +1,15 @@
+import { WmPageContentProps } from "./props";
+declare function WmPageContent(props: WmPageContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace WmPageContent {
+    var displayName: string;
+}
+/**
+ * The WmPageContent component renders a column within the page content layout.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-content--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-content--docs#tab-overview)
+ *
+ * @param props - {@link WmPageContentProps}
+ */
+export default WmPageContent;

package/components/page/page-content/index.js

@@ -0,0 +1,34 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var __jsx = _react["default"].createElement;
+var DEFAULT_CLASS = "app-page-content app-content-column";
+function WmPageContent(props) {
+  var className = props.className,
+    columnwidth = props.columnwidth,
+    styles = props.styles,
+    layoutClassName = props.layoutClassName;
+  return __jsx("div", {
+    style: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, "col-sm-".concat(columnwidth, " col-md-").concat(columnwidth), layoutClassName)
+  }, props.children);
+}
+WmPageContent.displayName = "WmPageContent";
+
+/**
+ * The WmPageContent component renders a column within the page content layout.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-content--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-content--docs#tab-overview)
+ *
+ * @param props - {@link WmPageContentProps}
+ */
+var _default = exports["default"] = WmPageContent;

package/components/page/page-content/props.d.ts

@@ -0,0 +1,16 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmPageContent component.
+ */
+export interface PageContentProps {
+    /** Column width for the content (used with Bootstrap grid classes). */
+    columnwidth?: number;
+    /**
+     * Utility layout classes from Studio Auto Layout (merged on the page-content root).
+     */
+    layoutClassName?: string;
+}
+/**
+ * Combined props for the WmPageContent component, including base WaveMaker props.
+ */
+export type WmPageContentProps = Prettify<PageContentProps & BaseProps>;

package/components/page/page-content/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/page/partial/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * The WmPartial component renders a section container for partial content.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-partial--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-partial--docs#tab-overview)
+ *
+ * @param props - {@link WmPartialProps}
+ */
+declare const _default: import("react").ComponentType<{
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    animation?: string;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: import("react").CSSProperties;
+    conditionalclass?: string;
+    showindevice?: ("xs" | "sm" | "md" | "lg" | "all")[];
+    onClick?: (event?: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onDoubleClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOver?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onMouseOut?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onBlur?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeydown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeyup?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    onKeypress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, any>, newVal?: string | number | null, oldVal?: string | number | null) => void;
+    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?: import("react").CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    name?: string;
+    listener?: Record<string, any>;
+    "data-widget-id"?: string;
+    iswidget?: boolean | string;
+    deferload?: boolean | string;
+    "item-id"?: string;
+    datavalue?: any;
+    prefab?: boolean;
+    inbound?: Record<string, any>;
+    outbound?: Record<string, any>;
+    key?: string;
+    formfield?: boolean;
+    updateon?: string;
+    dataset?: any;
+    prefabName?: string;
+}>;
+export default _default;

package/components/page/partial/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _withBaseWrapper = require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "app-partial clearfix";
+var WmPartial = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var styles = props.styles,
+    children = props.children,
+    className = props.className,
+    id = props.id;
+  return __jsx(_Box["default"], {
+    component: "section",
+    sx: _objectSpread(_objectSpread({}, styles), {}, {
+      height: "".concat((styles === null || styles === void 0 ? void 0 : styles.height) || "auto") // Ensure height overrides default
+    }),
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className),
+    id: id
+  }, children);
+}, function (prevProps, nextProps) {
+  return prevProps.children === nextProps.children;
+});
+WmPartial.displayName = "WmPartial";
+
+/**
+ * The WmPartial component renders a section container for partial content.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-partial--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-partial--docs#tab-overview)
+ *
+ * @param props - {@link WmPartialProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmPartial);

package/components/page/partial/props.d.ts

@@ -0,0 +1,6 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * WmPartial has no additional props beyond BaseProps.
+ * Combined props for the WmPartial component.
+ */
+export type WmPartialProps = Prettify<BaseProps>;

package/components/page/partial/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/page/partial-container/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { WmPartialContainerProps } from "./props";
+declare const WmPartialContainer: React.MemoExoticComponent<(props: WmPartialContainerProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * The WmPartialContainer component dynamically loads and renders partial content.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/page-partial-container--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/page-partial-container--docs#tab-overview)
+ *
+ * @param props - {@link WmPartialContainerProps}
+ */
+export default WmPartialContainer;