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

package/higherOrder/props.d.ts

@@ -0,0 +1,116 @@
+import { CSSProperties } from "react";
+/**
+ * Helper type to flatten intersection types for better VS Code intellisense.
+ */
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export interface Props {
+    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?: 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;
+    /**
+     * Internal WaveMaker event callback.
+     */
+    eventCallback?: (eventName: string, data: any) => void;
+    /**
+     * Ref forwarded by WaveMaker wrapper.
+     */
+    forwardedRef?: React.ForwardedRef<any>;
+    /**
+     * The proxy/viewParent for the widget.
+     */
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    id?: string;
+    /**
+     * The unique name of the widget.
+     */
+    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;
+}
+/**
+ * Interface for props injected by the BaseDialog (withDialogWrapper) HOC.
+ */
+export interface WmDialogInjectedProps {
+    /**
+     * Whether the dialog is currently open.
+     */
+    isopen?: boolean;
+    /**
+     * Closes the dialog.
+     */
+    close?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Opens the dialog.
+     */
+    openDialog?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Closes the dialog.
+     */
+    closeDialog?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Callback for the OK button click.
+     */
+    onOkClick?: (event?: React.SyntheticEvent) => void;
+    /**
+     * Callback for when the dialog transition has entered.
+     */
+    onTransitionEntered?: () => void;
+    /**
+     * Locale data for the dialog.
+     */
+    dialogLocale?: {
+        LABEL_CLOSE: string;
+    };
+    /**
+     * Widget type discriminator.
+     */
+    widgetType?: string;
+    /**
+     * Whether the component is a dialog.
+     */
+    isDialog?: boolean;
+}
+export interface BaseProps extends Props {
+}
+export default Props;

package/higherOrder/props.js

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

package/higherOrder/withBaseWrapper.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from "react";
+import { Prettify, BaseProps } from "@wavemaker-ai/react-runtime/higherOrder/props";
+export type { BaseProps };
+export declare const withBaseWrapper: <P extends BaseProps>(WrappedComponent: ComponentType<P>) => ComponentType<Prettify<P>>;
+export default withBaseWrapper;

package/higherOrder/withBaseWrapper.js

@@ -0,0 +1,218 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withBaseWrapper = exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _useDeviceVisibility2 = require("@wavemaker-ai/react-runtime/hooks/useDeviceVisibility");
+var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
+var _styleUtils = require("@wavemaker-ai/react-runtime/utils/style-utils");
+var _excluded = ["show", "deferload", "standalone"];
+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" != _typeof3(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 withBaseWrapper = exports.withBaseWrapper = function withBaseWrapper(WrappedComponent) {
+  var WithBaseComponent = function WithBaseComponent(props) {
+    var _pageContext$Widgets, _mergedProps$show, _mergedProps$show2;
+    var _props$show = props.show,
+      show = _props$show === void 0 ? true : _props$show,
+      deferload = props.deferload,
+      _props$standalone = props.standalone,
+      standalone = _props$standalone === void 0 ? false : _props$standalone,
+      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    var name = props["item-id"] || props.name;
+    var _usePageContext = (0, _WidgetProvider.usePageContext)(standalone),
+      pageContext = _usePageContext.pageContext,
+      updateWidgetState = _usePageContext.updateWidgetState,
+      destroy = _usePageContext.destroy,
+      proxy = _usePageContext.proxy;
+
+    // All hooks must be called before any early returns
+    var _useDeviceVisibility = (0, _useDeviceVisibility2.useDeviceVisibility)(props.showindevice || ["all"]),
+      isHidden = _useDeviceVisibility.isHidden;
+
+    // Extract widget-id from component props
+    var componentWidgetId = (0, _react.useMemo)(function () {
+      return props === null || props === void 0 ? void 0 : props["data-widget-id"];
+    }, [props === null || props === void 0 ? void 0 : props["data-widget-id"]]);
+    var widgetFromContext = name ? pageContext === null || pageContext === void 0 || (_pageContext$Widgets = pageContext.Widgets) === null || _pageContext$Widgets === void 0 ? void 0 : _pageContext$Widgets[name] : undefined;
+
+    // Register widget in context (last wins - second component should win)
+    (0, _react.useEffect)(function () {
+      if (name && (props === null || props === void 0 ? void 0 : props.iswidget) !== "false" && pageContext !== null && pageContext !== void 0 && pageContext.Widgets) {
+        var widget = (widgetFromContext === null || widgetFromContext === void 0 ? void 0 : widgetFromContext["data-widget-id"]) === componentWidgetId ? widgetFromContext : {};
+        // Create registry entry with widget-id and viewParent so wm.Widgets[name].viewParent is available
+        var registryEntry = _objectSpread(_objectSpread(_objectSpread({
+          show: show
+        }, props), widget), {}, {
+          "data-widget-id": componentWidgetId || undefined,
+          // Ensure widget-id is stored
+          viewParent: proxy
+        });
+
+        // Last component with same name overwrites previous (LAST WINS)
+        pageContext.Widgets[name] = registryEntry;
+      }
+    }, [name, pageContext === null || pageContext === void 0 ? void 0 : pageContext.Widgets, componentWidgetId, props]);
+
+    // Compute merged props in a memoized way
+    var mergedProps = (0, _react.useMemo)(function () {
+      if (!name || !(pageContext !== null && pageContext !== void 0 && pageContext.Widgets) || (props === null || props === void 0 ? void 0 : props.iswidget) === "false") {
+        return props;
+      }
+      var widget = widgetFromContext || {};
+
+      // Extract widget-id from context widget
+      var contextWidgetId = widget === null || widget === void 0 ? void 0 : widget["data-widget-id"];
+      var component = WrappedComponent.displayName;
+
+      // FIRST WINS: Only merge if this component's widget-id matches the context
+      // OR if no widget-id filtering is needed (backward compatibility)
+      var shouldMergeFromContext = !componentWidgetId || !contextWidgetId || componentWidgetId === contextWidgetId;
+      var mergedState = _objectSpread({}, props);
+      var registry = pageContext === null || pageContext === void 0 ? void 0 : pageContext.overriddenPropsRegistry;
+      var widgetDatavalue = widget.datavalue;
+      var datavalue = widgetDatavalue !== null && widgetDatavalue !== void 0 ? widgetDatavalue : props.datavalue;
+      if (shouldMergeFromContext && registry !== null && registry !== void 0 && registry.isWidgetOverridden(name, componentWidgetId || "") && !props.formfield) {
+        // Apply widget-id specific overridden properties from the registry
+        var widgetOverrides = registry === null || registry === void 0 ? void 0 : registry.getWidgetOverrides(name, componentWidgetId || "");
+        if (widgetOverrides) {
+          Object.keys(widgetOverrides).forEach(function (key) {
+            var _registry$getLastInte;
+            var internalValue = registry === null || registry === void 0 || (_registry$getLastInte = registry.getLastInternalValue) === null || _registry$getLastInte === void 0 ? void 0 : _registry$getLastInte.call(registry, name, key);
+
+            // If an internal update (user input via listener.onChange) occurred
+            // after the last script override, use the internal value.
+            // trackOverriddenProps clears internal values when a script sets
+            // a new value, so the presence of an internal value means it is newer.
+            mergedState[key] = internalValue !== undefined ? internalValue : widgetOverrides[key];
+            if (props.prefab && key !== "inbound" && key !== "outbound" && key !== "show") {
+              var updatedInbound = _objectSpread(_objectSpread({}, props.inbound), {}, (0, _defineProperty2["default"])({}, key, mergedState[key]));
+              mergedState.inbound = updatedInbound;
+            }
+          });
+
+          // Then handle other widget properties that are not overridden
+          Object.keys(widget).forEach(function (key) {
+            var isPropOverriddenCheck = registry === null || registry === void 0 ? void 0 : registry.isPropOverridden(name, key, componentWidgetId || "");
+            if (!isPropOverriddenCheck) {
+              mergedState[key] = props[key];
+            }
+          });
+        }
+      } else if (shouldMergeFromContext) {
+        mergedState = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, widget), props), props !== null && props !== void 0 && props.formfield ? {
+          datavalue: props.datavalue
+        } : {
+          datavalue: widgetDatavalue !== null && widgetDatavalue !== void 0 ? widgetDatavalue : props.datavalue
+        }), component === "WmFormField" && !props["value"] && {
+          value: datavalue,
+          datavalue: datavalue
+        });
+      } else {
+        // Widget-id mismatch: component stays independent with only its own props
+        mergedState = _objectSpread(_objectSpread({}, props), component === "WmFormField" && !props["value"] && {
+          value: datavalue,
+          datavalue: datavalue
+        });
+      }
+      if (component === "WmTable" && proxy.Widgets[name]) {
+        Object.keys(proxy.Widgets[name]).forEach(function (key) {
+          if (!mergedState[key]) {
+            mergedState[key] = proxy.Widgets[name][key];
+          }
+        });
+      }
+      return mergedState;
+    }, [props, widgetFromContext, componentWidgetId]);
+    var syncWithContext = (0, _react.useCallback)(function () {
+      if (name && pageContext !== null && pageContext !== void 0 && pageContext.Widgets && (props === null || props === void 0 ? void 0 : props.iswidget) !== "false") {
+        var currentWidgetState = pageContext.Widgets[name] || {};
+
+        // Extract widget-id from context
+        var contextWidgetId = currentWidgetState === null || currentWidgetState === void 0 ? void 0 : currentWidgetState["data-widget-id"];
+
+        // Only sync if widget-ids match OR no widget-id filtering needed
+        var shouldSync = !componentWidgetId || !contextWidgetId || componentWidgetId === contextWidgetId;
+        if (shouldSync) {
+          // Skip comparing listener property and viewParent propperties
+          var stateForComparison = _objectSpread({}, currentWidgetState);
+          var propsForComparison = _objectSpread({}, mergedProps);
+          delete stateForComparison.listener;
+          delete propsForComparison.listener;
+          delete stateForComparison.viewParent;
+          delete propsForComparison.viewParent;
+          if (!(0, _isEqual["default"])(stateForComparison, propsForComparison)) {
+            updateWidgetState(name, mergedProps);
+          }
+        }
+      }
+    }, [pageContext === null || pageContext === void 0 ? void 0 : pageContext.Widgets, mergedProps, props, componentWidgetId]);
+    (0, _react.useEffect)(function () {
+      syncWithContext();
+    }, [syncWithContext]);
+    var computedStyles = (0, _react.useMemo)(function () {
+      // Ensure conditionalstyle is a valid CSS object or undefined
+      var conditionalStyleObj = (0, _typeof2["default"])(props.conditionalstyle) === "object" && props.conditionalstyle !== null ? (0, _styleUtils.sanitizeStyleObject)(props.conditionalstyle) : {};
+      var baseStyles = (0, _styleUtils.sanitizeStyleObject)(props.styles);
+      return _objectSpread(_objectSpread({}, baseStyles), conditionalStyleObj);
+    }, [props.styles, props.conditionalstyle]);
+    var computedClassName = (0, _react.useMemo)(function () {
+      return [props.className, props.conditionalclass, props.animation && "animated ".concat(props.animation)].filter(Boolean).join(" ");
+    }, [props.className, props.conditionalclass, props.animation]);
+
+    // Early returns after all hooks
+    if (isHidden) return null;
+
+    // Optimized deferload and show logic
+    var isDeferLoad = deferload === true;
+    var showValue = (mergedProps === null || mergedProps === void 0 || (_mergedProps$show = mergedProps.show) === null || _mergedProps$show === void 0 ? void 0 : _mergedProps$show.toString()) !== "false";
+
+    // Implement exact logic from requirements:
+    // show = false, deferload = undefined/false → render initial, not UI (hidden=true)
+    // show = false, deferload = true → don't render at all
+    // show = true, deferload = true → render in both
+    // show = true, deferload = false/undefined → render in UI
+
+    if (!showValue && isDeferLoad) {
+      // Case: show = false, deferload = true → don't render at all
+      return null;
+    }
+
+    // Case: show = false, deferload = false/undefined → render with hidden=true
+    var shouldHide = !showValue && !isDeferLoad;
+    var updateon = (props === null || props === void 0 ? void 0 : props.updateon) === "default" ? "keypress" : props === null || props === void 0 ? void 0 : props.updateon;
+    return __jsx(WrappedComponent, (0, _extends2["default"])({}, rest, mergedProps, updateon && {
+      updateon: updateon
+    }, shouldHide && {
+      hidden: true
+    }, deferload !== undefined && {
+      deferload: deferload.toString()
+    }, {
+      show: mergedProps === null || mergedProps === void 0 || (_mergedProps$show2 = mergedProps.show) === null || _mergedProps$show2 === void 0 ? void 0 : _mergedProps$show2.toString(),
+      name: props.name,
+      className: computedClassName,
+      styles: computedStyles
+    }, (props === null || props === void 0 ? void 0 : props.dataset) && {
+      dataset: props === null || props === void 0 ? void 0 : props.dataset
+    }, {
+      destroy: destroy,
+      viewParent: proxy
+    }));
+  };
+  WithBaseComponent.displayName = "WithBase(".concat(WrappedComponent.displayName || WrappedComponent.name || "Component", ")");
+  return /*#__PURE__*/_react["default"].memo(WithBaseComponent, function (prevProps, nextProps) {
+    return prevProps === nextProps;
+  });
+};
+var _default = exports["default"] = withBaseWrapper;

package/higherOrder/withStandalone.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType } from "react";
+/** Defaults to `true` unless overridden; forwarded to `withFormController` and inner widgets. */
+export type WithStandaloneProps = {
+    standalone?: boolean;
+};
+/**
+ * Outermost wrapper for form-backed widgets: sets `standalone` to `true` by default
+ * (pass `standalone={false}` to opt out). Forwards all props through the inner HOC chain.
+ */
+declare const withStandalone: <P extends object>(WrappedComponent: ComponentType<P & WithStandaloneProps>) => ComponentType<P & WithStandaloneProps>;
+export default withStandalone;

package/higherOrder/withStandalone.js

@@ -0,0 +1,29 @@
+"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 _react = _interopRequireWildcard(require("react"));
+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;
+/** Defaults to `true` unless overridden; forwarded to `withFormController` and inner widgets. */
+
+/**
+ * Outermost wrapper for form-backed widgets: sets `standalone` to `true` by default
+ * (pass `standalone={false}` to opt out). Forwards all props through the inner HOC chain.
+ */
+var withStandalone = function withStandalone(WrappedComponent) {
+  var WithStandaloneComponent = /*#__PURE__*/(0, _react.memo)(function (props) {
+    return __jsx(WrappedComponent, (0, _extends2["default"])({}, props, {
+      standalone: true
+    }));
+  });
+  WithStandaloneComponent.displayName = "withStandalone(".concat(WrappedComponent.displayName || WrappedComponent.name || "Component", ")");
+  return WithStandaloneComponent;
+};
+var _default = exports["default"] = withStandalone;

package/hooks/useAccess.d.ts

@@ -0,0 +1,18 @@
+export interface UseAccessOptions {
+    componentName: string;
+    type: "PAGE" | "PARTIAL" | "PREFAB";
+    enabled?: boolean;
+}
+export declare const useAccess: (options: UseAccessOptions) => {
+    hasAccess: boolean;
+    loading: boolean;
+    error: any;
+    retry: () => void;
+    cacheKey: string;
+};
+export declare const clearAccessCache: () => void;
+export declare const preloadAccess: (components: Array<{
+    name: string;
+    type: "PAGE" | "PARTIAL" | "PREFAB";
+}>, dispatch: any) => Promise<PromiseSettledResult<any>[]>;
+export default useAccess;