@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

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

@@ -1,119 +1,129 @@
-"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)();
+import { jsx, jsxs } from "react/jsx-runtime";
+import { WmButton } from "../../form/button";
+import { WmLabel } from "../../basic/label";
+import { WmIcon } from "../../basic/icon";
+import { WmPicture } from "../../basic/picture";
+import { WmContainer } from "../../container";
+import { store } from "../../../store";
+import { getRouterInstance } from "../../../store/middleware/navigationMiddleware";
+const ErrorFallback = ({
+  error,
+  title = "Something went wrong.",
+  subtitle = "Please try again.",
+  imageSource = "/error-fallback.svg"
+}) => {
+  var _a, _b, _c, _d;
+  const homePage = (_d = (_c = (_b = (_a = store.getState()) == null ? void 0 : _a.info) == null ? void 0 : _b.appConfig) == null ? void 0 : _c.appProperties) == null ? void 0 : _d.homePage;
+  const handleGoHome = () => {
+    const router = getRouterInstance();
     if (router && homePage) {
       router.push(homePage);
     } else {
       window.location.href = window.location.origin;
     }
   };
-  var handleGoBack = function handleGoBack() {
-    var router = (0, _navigationMiddleware.getRouterInstance)();
+  const handleGoBack = () => {
+    const router = 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: {}
-  })));
+  return /* @__PURE__ */ jsxs("div", { className: "error-container", children: [
+    /* @__PURE__ */ jsxs("div", { className: "error-info-container", children: [
+      /* @__PURE__ */ jsx(WmContainer, { name: "error-container", listener: {}, className: "error-image-container", children: /* @__PURE__ */ jsx(
+        WmPicture,
+        {
+          picturesource: imageSource || "/error-fallback.svg",
+          resizemode: "contain",
+          name: "error-picture",
+          listener: {},
+          className: "error-fallback-image",
+          width: "120px",
+          height: "120px",
+          alttext: "Error illustration"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        WmLabel,
+        {
+          caption: title || "Something went wrong.",
+          className: "error-fallback-title",
+          type: "h2",
+          name: "error-title",
+          listener: {}
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        WmLabel,
+        {
+          caption: subtitle || "Please try again.",
+          className: "error-fallback-subtitle",
+          name: "error-subtitle",
+          listener: {}
+        }
+      ),
+      error && /* @__PURE__ */ jsxs("div", { className: "error-card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "error-card-row", children: [
+          /* @__PURE__ */ jsx(
+            WmIcon,
+            {
+              id: "error-icon",
+              iconclass: "wi wi-error",
+              className: "error-fallback-erroricon",
+              iconsize: "20px",
+              name: "error-icon",
+              listener: {}
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            WmLabel,
+            {
+              caption: "Error",
+              className: "error-fallback-error-label",
+              name: "error-label",
+              listener: {}
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          WmLabel,
+          {
+            caption: (error == null ? void 0 : error.message) || "An unexpected error occurred",
+            className: "error-fallback-error-message",
+            name: "error-message",
+            listener: {}
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "error-button-container", children: [
+      /* @__PURE__ */ jsx(
+        WmButton,
+        {
+          caption: "Go to Home",
+          onClick: handleGoHome,
+          className: "btn btn-primary",
+          name: "go-to-home",
+          listener: {}
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        WmButton,
+        {
+          caption: "Go Back",
+          onClick: handleGoBack,
+          className: "btn-secondary",
+          name: "go-back",
+          listener: {}
+        }
+      )
+    ] })
+  ] });
+};
+var error_boundary_default = ErrorFallback;
+export {
+  error_boundary_default as default
 };
-
-/**
- * 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.js

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

package/components/page/index.js

@@ -1,151 +1,149 @@
-"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";
+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;
+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;
+};
+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 } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import clsx from "clsx";
+import Container from "@mui/material/Container";
+import React from "react";
+import { removeInvalidAttributes } from "../../utils/attr";
+import { PageLayoutContext } from "./page-context";
+import { getCurrentPath } from "../../core/util/utils";
+const getDefaultClass = (pageName) => clsx("app-page", pageName ? `app-page-${pageName.toLowerCase()}` : "", "container");
 function WmPage(props) {
-  var propsRef = (0, _react.useRef)(props);
+  const pathname = getCurrentPath();
+  const pageName = pathname.split("/").pop();
+  const propsRef = 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) {
+  const [windowSize, setWindowSize] = useState(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight
+  }));
+  const [hasFullNavHeight, setHasFullNavHeight] = useState(false);
+  const [leftPanelPageClasses, setLeftPanelPageClasses] = useState();
+  const handleNavHeightChange = useCallback((isFull) => {
     setHasFullNavHeight(isFull);
   }, []);
-  var handleResize = (0, _react.useCallback)(function () {
-    var newSize = {
+  const handleLeftPanelPageClassesChange = useCallback((pageClasses) => {
+    setLeftPanelPageClasses(pageClasses);
+  }, []);
+  const handleResize = useCallback(() => {
+    const newSize = {
       width: window.innerWidth,
       height: window.innerHeight
     };
-    setWindowSize(function (prevSize) {
-      // Only update if size actually changed
+    setWindowSize((prevSize) => {
       if (prevSize.width !== newSize.width || prevSize.height !== newSize.height) {
-        var currentProps = propsRef.current;
+        const currentProps = propsRef.current;
         if (currentProps.OnResize) {
-          currentProps.OnResize({
-            type: "resize",
-            target: window
-          }, currentProps, newSize);
+          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;
+  const handleOrientationChange = useCallback((event) => {
+    const currentProps = propsRef.current;
     if (currentProps.OnOrientationChange) {
       currentProps.OnOrientationChange(event, currentProps);
     }
   }, []);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (props.OnAttach) {
-      props.OnAttach({
-        type: "attach",
-        target: window
-      }, props);
+      props.OnAttach({ type: "attach", target: window }, props);
     }
-    return function () {
-      var currentProps = propsRef.current;
+    return () => {
+      const currentProps = propsRef.current;
       if (currentProps.OnDetach) {
-        currentProps.OnDetach({
-          type: "detach",
-          target: window
-        }, currentProps);
+        currentProps.OnDetach({ type: "detach", target: window }, currentProps);
       }
       if (currentProps.OnDestroy) {
-        currentProps.OnDestroy({
-          type: "destroy",
-          target: window
-        }, currentProps);
+        currentProps.OnDestroy({ type: "destroy", target: window }, currentProps);
       }
     };
-  }, []); // Empty dependency array - only run once
-
-  // Handle resize events
-  (0, _react.useEffect)(function () {
+  }, []);
+  useEffect(() => {
     window.addEventListener("resize", handleResize);
-
-    // Call once initially if OnResize exists
     if (props.OnResize) {
-      props.OnResize({
-        type: "resize",
-        target: window
-      }, props, windowSize);
+      props.OnResize({ type: "resize", target: window }, props, windowSize);
     }
-    return function () {
+    return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, [handleResize]);
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (!props.OnOrientationChange) return;
     window.addEventListener("orientationchange", handleOrientationChange);
-    return function () {
+    return () => {
       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)) {
+  const _a = props, { className, styles, children } = _a, restProps = __objRest(_a, ["className", "styles", "children"]);
+  const childrenWithCallback = useMemo(() => {
+    return React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
         if (typeof child.type === "string") {
           return child;
         }
-        return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread({
+        return React.cloneElement(child, __spreadValues({
           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);
+  return /* @__PURE__ */ jsx(
+    PageLayoutContext.Provider,
+    {
+      value: { onLeftPanelPageClassesChange: handleLeftPanelPageClassesChange },
+      children: /* @__PURE__ */ jsx(
+        Container,
+        __spreadProps(__spreadValues({}, removeInvalidAttributes(restProps)), {
+          className: clsx(
+            getDefaultClass(pageName),
+            { "app-nav-full": hasFullNavHeight },
+            leftPanelPageClasses,
+            className
+          ),
+          sx: __spreadValues({}, styles),
+          children: 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;
+var page_default = WmPage;
+export {
+  page_default as default
+};

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

@@ -1,34 +1,25 @@
-"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";
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const 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);
+  const { className, columnwidth, styles, layoutClassName } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: styles,
+      className: clsx(
+        DEFAULT_CLASS,
+        className,
+        `col-sm-${columnwidth} col-md-${columnwidth}`,
+        layoutClassName
+      ),
+      children: 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;
+var page_content_default = WmPageContent;
+export {
+  page_content_default as default
+};

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

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

package/components/page/page-context.d.ts

@@ -0,0 +1,4 @@
+export interface PageLayoutContextValue {
+    onLeftPanelPageClassesChange?: (pageClasses?: string) => void;
+}
+export declare const PageLayoutContext: import("react").Context<PageLayoutContextValue>;

package/components/page/page-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const PageLayoutContext = createContext({});
+export {
+  PageLayoutContext
+};