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

package/components/chart/src/pieDonutResponsiveLayout.d.ts

@@ -21,6 +21,11 @@ export declare function readLayoutBox(el: HTMLElement): {
     width: number;
     height: number;
 } | null;
+/**
+ * NVD3 sizes the pie to the plot box (often ~72px) while the SVG is the full container.
+ * Pin the pieChart wrap to the measured container so percentage sizing cannot collapse it.
+ */
+export declare function syncPieChartWrapToContainer(chartId: string, width: number, height: number): void;
 /**
  * Applies width, height, proportional margins, and (for donut) responsive donut ratio
  * from the measured layout container so NVD3 never falls back to 960×400 sanitization.

package/components/chart/src/pieDonutResponsiveLayout.js

@@ -1,76 +1,37 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.applyResponsivePieDonutLayout = applyResponsivePieDonutLayout;
-exports.computePieMargins = computePieMargins;
-exports.computeResponsiveDonutInnerRatio = computeResponsiveDonutInnerRatio;
-exports.getChartLayoutContainer = getChartLayoutContainer;
-exports.isLayoutContainerDisplayed = isLayoutContainerDisplayed;
-exports.readLayoutBox = readLayoutBox;
-var _dataUtils = require("./dataUtils");
-/**
- * Dimensionless NVD3 donut inner-radius / outer-radius ratio used when the studio
- * `donutratio` binding is unset (historically the "medium" preset).
- */
-var DEFAULT_DONUT_INNER_TO_OUTER_RATIO = 0.6;
-
-/** Clamp range for NVD3 donut inner/outer ratio (avoids degenerate arcs). Dimensionless. */
-var DONUT_INNER_RATIO_MIN = 0.08;
-var DONUT_INNER_RATIO_MAX = 0.92;
-
-/**
- * Horizontal padding per side as a fraction of measured container width
- * (clearance for outside labels and legend interaction with the plot).
- */
-var PIE_MARGIN_X_INSET_RATIO = 0.04;
-
-/**
- * Vertical padding per side as a fraction of measured container height
- * (same role as horizontal inset, for top/bottom legend and labels).
- */
-var PIE_MARGIN_Y_INSET_RATIO = 0.04;
-
-/**
- * When the box is elongated (small min/max side ratio), blend the user’s inner/outer
- * ratio slightly toward a smaller hole so the ring stays visually substantial.
- * Weight is dimensionless (0 = ignore aspect, 1 = strongest blend).
- */
-var DONUT_RATIO_ASPECT_BLEND_WEIGHT = 0.1;
+import { AXIS_CHART_DEFAULT_OFFSETS } from "./constants";
+import { isDonutChart, getNumberValue, getRadiusValue } from "./dataUtils";
+const DEFAULT_DONUT_INNER_TO_OUTER_RATIO = 0.6;
+const DONUT_INNER_RATIO_MIN = 0.08;
+const DONUT_INNER_RATIO_MAX = 0.92;
+const PIE_MARGIN_X_INSET_RATIO = 0.04;
+const PIE_MARGIN_Y_INSET_RATIO = 0.04;
+const DONUT_RATIO_ASPECT_BLEND_WEIGHT = 0.1;
 function clamp(n, lo, hi) {
   return Math.min(hi, Math.max(lo, n));
 }
-
-/** Normalized compactness of the box: 1 for square, approaches 0 for very elongated. */
 function boxAspectCompactness(width, height) {
-  var maxSide = Math.max(width, height);
+  const maxSide = Math.max(width, height);
   if (maxSide <= 0) return 1;
   return Math.min(1, Math.min(width, height) / maxSide);
 }
 function resolveBaseDonutInnerRatio(widgetContext) {
-  var v = widgetContext.donutratio;
-  if (v === undefined || v === null || v === "") {
+  const v = widgetContext.donutratio;
+  if (v === void 0 || v === null || v === "") {
     return DEFAULT_DONUT_INNER_TO_OUTER_RATIO;
   }
   if (typeof v === "number" && Number.isFinite(v)) {
     return clamp(v, DONUT_INNER_RATIO_MIN, DONUT_INNER_RATIO_MAX);
   }
-  var fromPreset = (0, _dataUtils.getNumberValue)(v, _dataUtils.getRadiusValue);
+  const fromPreset = getNumberValue(v, getRadiusValue);
   if (typeof fromPreset === "number" && Number.isFinite(fromPreset)) {
     return clamp(fromPreset, DONUT_INNER_RATIO_MIN, DONUT_INNER_RATIO_MAX);
   }
   return DEFAULT_DONUT_INNER_TO_OUTER_RATIO;
 }
-
-/**
- * Adjusts the studio inner/outer ratio using only dimensionless container shape so that
- * ring thickness in pixels still scales with radius, while elongated layouts keep balance.
- */
 function computeResponsiveDonutInnerRatio(width, height, userInnerToOuterRatio) {
-  var compactness = boxAspectCompactness(width, height);
-  var blend = 1 - DONUT_RATIO_ASPECT_BLEND_WEIGHT * (1 - compactness);
-  var r = userInnerToOuterRatio * blend;
+  const compactness = boxAspectCompactness(width, height);
+  const blend = 1 - DONUT_RATIO_ASPECT_BLEND_WEIGHT * (1 - compactness);
+  const r = userInnerToOuterRatio * blend;
   return clamp(r, DONUT_INNER_RATIO_MIN, DONUT_INNER_RATIO_MAX);
 }
 function computePieMargins(width, height) {
@@ -81,27 +42,20 @@ function computePieMargins(width, height) {
     left: width * PIE_MARGIN_X_INSET_RATIO
   };
 }
-
-/** Plot host: inner wrapper when present (excludes panel heading), else the chart root. */
 function getChartLayoutContainer(chartId) {
-  var _ref;
-  var root = document.getElementById(chartId);
+  var _a;
+  const root = document.getElementById(chartId);
   if (!root) return null;
-  return (_ref = root.querySelector(".app-chart-inner")) !== null && _ref !== void 0 ? _ref : root;
+  return (_a = root.querySelector(".app-chart-inner")) != null ? _a : root;
 }
 function isLayoutContainerDisplayed(el) {
   return window.getComputedStyle(el).display !== "none";
 }
-
-/**
- * Reads a usable layout box from the container. Uses `getBoundingClientRect()` first,
- * then `clientWidth` / `clientHeight` when sub-pixel or layout timing yields zeros.
- */
 function readLayoutBox(el) {
   if (!isLayoutContainerDisplayed(el)) return null;
-  var rect = el.getBoundingClientRect();
-  var width = rect.width;
-  var height = rect.height;
+  const rect = el.getBoundingClientRect();
+  let width = rect.width;
+  let height = rect.height;
   if (width < 1 || height < 1) {
     width = el.clientWidth;
     height = el.clientHeight;
@@ -109,47 +63,73 @@ function readLayoutBox(el) {
   if (!Number.isFinite(width) || !Number.isFinite(height) || width < 1 || height < 1) {
     return null;
   }
-  return {
-    width: width,
-    height: height
-  };
+  return { width, height };
 }
 function syncSvgToContainer(chartId, width, height) {
-  var root = document.getElementById(chartId);
-  var svg = root === null || root === void 0 ? void 0 : root.querySelector("svg");
+  const root = document.getElementById(chartId);
+  const svg = root == null ? void 0 : root.querySelector("svg");
   if (!svg) return;
-  svg.style.width = "".concat(width, "px");
-  svg.style.height = "".concat(height, "px");
+  svg.style.width = `${width}px`;
+  svg.style.height = `${height}px`;
+}
+function syncPieChartWrapToContainer(chartId, width, height) {
+  var _a;
+  const wrap = (_a = document.getElementById(chartId)) == null ? void 0 : _a.querySelector("svg > g.nv-wrap.nv-pieChart");
+  if (!wrap) return;
+  wrap.style.width = `${width}px`;
+  wrap.style.height = `${height}px`;
+}
+function resolvePieMarginSide(value, axisDefault, proportional) {
+  if (value === void 0 || value === null) return proportional;
+  if (value === axisDefault) return proportional;
+  return value;
 }
-
-/**
- * Applies width, height, proportional margins, and (for donut) responsive donut ratio
- * from the measured layout container so NVD3 never falls back to 960×400 sanitization.
- *
- * @returns whether a non-degenerate box was applied (false = hidden / not yet measurable).
- */
 function applyResponsivePieDonutLayout(chart, chartId, widgetContext) {
-  var _widgetContext$offset, _widgetContext$offset2, _widgetContext$offset3, _widgetContext$offset4;
-  var container = getChartLayoutContainer(chartId);
+  const container = getChartLayoutContainer(chartId);
   if (!container) return false;
-  var box = readLayoutBox(container);
+  const box = readLayoutBox(container);
   if (!box) return false;
-  var width = box.width,
-    height = box.height;
+  const { width, height } = box;
   syncSvgToContainer(chartId, width, height);
   chart.width(width).height(height);
-  var proportional = computePieMargins(width, height);
+  const proportional = computePieMargins(width, height);
   chart.margin({
-    top: (_widgetContext$offset = widgetContext.offsettop) !== null && _widgetContext$offset !== void 0 ? _widgetContext$offset : proportional.top,
-    right: (_widgetContext$offset2 = widgetContext.offsetright) !== null && _widgetContext$offset2 !== void 0 ? _widgetContext$offset2 : proportional.right,
-    bottom: (_widgetContext$offset3 = widgetContext.offsetbottom) !== null && _widgetContext$offset3 !== void 0 ? _widgetContext$offset3 : proportional.bottom,
-    left: (_widgetContext$offset4 = widgetContext.offsetleft) !== null && _widgetContext$offset4 !== void 0 ? _widgetContext$offset4 : proportional.left
+    top: resolvePieMarginSide(
+      widgetContext.offsettop,
+      AXIS_CHART_DEFAULT_OFFSETS.offsettop,
+      proportional.top
+    ),
+    right: resolvePieMarginSide(
+      widgetContext.offsetright,
+      AXIS_CHART_DEFAULT_OFFSETS.offsetright,
+      proportional.right
+    ),
+    bottom: resolvePieMarginSide(
+      widgetContext.offsetbottom,
+      AXIS_CHART_DEFAULT_OFFSETS.offsetbottom,
+      proportional.bottom
+    ),
+    left: resolvePieMarginSide(
+      widgetContext.offsetleft,
+      AXIS_CHART_DEFAULT_OFFSETS.offsetleft,
+      proportional.left
+    )
   });
-  if ((0, _dataUtils.isDonutChart)(widgetContext.type)) {
-    var base = resolveBaseDonutInnerRatio(widgetContext);
-    var ratio = computeResponsiveDonutInnerRatio(width, height, base);
+  syncPieChartWrapToContainer(chartId, width, height);
+  if (isDonutChart(widgetContext.type)) {
+    const base = resolveBaseDonutInnerRatio(widgetContext);
+    const ratio = computeResponsiveDonutInnerRatio(width, height, base);
     chart.donut(true);
     chart.donutRatio(ratio);
   }
   return true;
-}
+}
+export {
+  applyResponsivePieDonutLayout,
+  computePieMargins,
+  computeResponsiveDonutInnerRatio,
+  getChartLayoutContainer,
+  isLayoutContainerDisplayed,
+  readLayoutBox,
+  syncPieChartWrapToContainer
+};

package/components/chart/src/types.js

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

package/components/common/AppSpinner.js

@@ -1,36 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AppSpinner = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _material = require("@mui/material");
-var __jsx = _react["default"].createElement;
-var AppSpinner = exports.AppSpinner = function AppSpinner(_ref) {
-  var show = _ref.show,
-    _ref$spinnermessages = _ref.spinnermessages,
-    spinnermessages = _ref$spinnermessages === void 0 ? [] : _ref$spinnermessages,
-    classname = _ref.classname,
-    arialabel = _ref.arialabel;
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Box, Typography } from "@mui/material";
+const AppSpinner = ({
+  show,
+  spinnermessages = [],
+  classname,
+  arialabel
+}) => {
   if (!show) {
     return null;
   }
-  return __jsx(_material.Box, {
-    className: (0, _clsx["default"])("app-spinner", "wm-spinner-root", classname),
-    "aria-label": arialabel
-  }, __jsx(_material.Box, {
-    className: "spinner-message"
-  }, __jsx("i", {
-    className: "spinner-image animated infinite fa fa-circle-o-notch fa-spin"
-  }), __jsx(_material.Box, {
-    className: "spinner-messages"
-  }, spinnermessages.map(function (message, index) {
-    return __jsx(_material.Typography, {
-      component: "p",
-      key: index
-    }, message);
-  }))));
-};
+  return /* @__PURE__ */ jsx(Box, { className: clsx("app-spinner", "wm-spinner-root", classname), "aria-label": arialabel, children: /* @__PURE__ */ jsxs(Box, { className: "spinner-message", children: [
+    /* @__PURE__ */ jsx("i", { className: "spinner-image animated infinite fa fa-circle-o-notch fa-spin" }),
+    /* @__PURE__ */ jsx(Box, { className: "spinner-messages", children: spinnermessages.map((message, index) => /* @__PURE__ */ jsx(Typography, { component: "p", children: message }, index)) })
+  ] }) });
+};
+export {
+  AppSpinner
+};

package/components/common/app-spinner.js

@@ -1,26 +1,15 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.AppSpinner = void 0;
-var _react = _interopRequireDefault(require("react"));
-var __jsx = _react["default"].createElement;
-var AppSpinner = exports.AppSpinner = function AppSpinner(_ref) {
-  var show = _ref.show,
-    message = _ref.message;
+import { jsx, jsxs } from "react/jsx-runtime";
+const AppSpinner = ({ show, message }) => {
   if (!show) {
     return null;
   }
-  return __jsx("div", {
-    className: "app-loader"
-  }, __jsx("div", {
-    className: "spinner-message"
-  }, __jsx("i", {
-    className: "spinner-image animated infinite fa fa-circle-o-notch fa-spin"
-  }), __jsx("div", {
-    className: "spinner-messages"
-  }, __jsx("p", null, message))));
+  return /* @__PURE__ */ jsx("div", { className: "app-loader", children: /* @__PURE__ */ jsxs("div", { className: "spinner-message", children: [
+    /* @__PURE__ */ jsx("i", { className: "spinner-image animated infinite fa fa-circle-o-notch fa-spin" }),
+    /* @__PURE__ */ jsx("div", { className: "spinner-messages", children: /* @__PURE__ */ jsx("p", { children: message }) })
+  ] }) });
+};
+var app_spinner_default = AppSpinner;
+export {
+  AppSpinner,
+  app_spinner_default as default
 };
-var _default = exports["default"] = AppSpinner;

package/components/common/customTemplate/index.d.ts

@@ -0,0 +1,3 @@
+export { CustomTemplateCaption } from "./template";
+export type { CustomTemplateCaptionProps, CustomTemplateItem, UseCustomTemplateOptions, } from "./props";
+export { useCustomTemplate } from "./useCustomTemplate";

package/components/common/customTemplate/index.js

@@ -0,0 +1,6 @@
+import { CustomTemplateCaption } from "./template";
+import { useCustomTemplate } from "./useCustomTemplate";
+export {
+  CustomTemplateCaption,
+  useCustomTemplate
+};

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

@@ -0,0 +1,20 @@
+/** Dataset row shape shared by checkboxset, radioset, search, and similar widgets. */
+export type CustomTemplateItem = {
+    key: string | number;
+    label: string;
+    dataObject?: Record<string, unknown> | unknown;
+};
+export type CustomTemplateCaptionProps = {
+    templateName: string;
+    item: CustomTemplateItem;
+    index: number;
+    widgetName?: string;
+    listener?: Record<string, unknown>;
+};
+export type UseCustomTemplateOptions = {
+    /** Markup-bound partial name (`content` prop). */
+    content?: string;
+    /** Widget name for listener registration. */
+    name?: string;
+    listener?: Record<string, unknown>;
+};

package/components/common/customTemplate/template.d.ts

@@ -0,0 +1,3 @@
+import { CustomTemplateCaptionProps } from "./props";
+/** Renders the partial only */
+export declare function CustomTemplateCaption({ templateName, item, index, widgetName, listener, }: CustomTemplateCaptionProps): import("react/jsx-runtime").JSX.Element;

package/components/common/customTemplate/template.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import WmPartialContainer from "../../page/partial-container";
+import {
+  buildCustomTemplatePartialName,
+  getCustomTemplatePartialItem
+} from "./utils";
+function CustomTemplateCaption({
+  templateName,
+  item,
+  index,
+  widgetName,
+  listener
+}) {
+  return /* @__PURE__ */ jsx(
+    WmPartialContainer,
+    {
+      content: templateName,
+      listener,
+      partialName: buildCustomTemplatePartialName(widgetName, item.key, index),
+      params: ["item"],
+      item: getCustomTemplatePartialItem(item)
+    }
+  );
+}
+export {
+  CustomTemplateCaption
+};

package/components/common/customTemplate/useCustomTemplate.d.ts

@@ -0,0 +1,8 @@
+import { UseCustomTemplateOptions } from "./props";
+/**
+ * Manages runtime `setTemplate` API and resolves the effective partial name (`content || template`).
+ */
+export declare function useCustomTemplate({ content, name, listener }: UseCustomTemplateOptions): {
+    templateName: string;
+    setTemplate: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

package/components/common/customTemplate/useCustomTemplate.js

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+function useCustomTemplate({ content, name, listener }) {
+  const [template, setTemplate] = useState("");
+  const templateName = useMemo(() => content || template, [content, template]);
+  const stableOnChange = useCallback(() => {
+    if ((listener == null ? void 0 : listener.onChange) && typeof listener.onChange === "function") {
+      listener.onChange(name, { setTemplate });
+    }
+  }, [name, listener == null ? void 0 : listener.onChange]);
+  useEffect(() => {
+    stableOnChange();
+  }, [stableOnChange]);
+  return useMemo(() => ({ templateName, setTemplate }), [templateName]);
+}
+export {
+  useCustomTemplate
+};

package/components/common/customTemplate/utils.d.ts

@@ -0,0 +1,6 @@
+import { CustomTemplateItem } from "./props";
+/**
+utils of custom template widgets:
+ */
+export declare function getCustomTemplatePartialItem(item: Pick<CustomTemplateItem, "dataObject">): Record<string, unknown> | undefined;
+export declare function buildCustomTemplatePartialName(widgetName: string | undefined, itemKey: string | number, index: number): string;

package/components/common/customTemplate/utils.js

@@ -0,0 +1,12 @@
+function getCustomTemplatePartialItem(item) {
+  const dataObject = item == null ? void 0 : item.dataObject;
+  const row = dataObject && typeof dataObject === "object" && "dataObject" in dataObject ? dataObject.dataObject : dataObject;
+  return row != null && typeof row === "object" ? row : void 0;
+}
+function buildCustomTemplatePartialName(widgetName, itemKey, index) {
+  return `${widgetName}_${itemKey}_${index}`;
+}
+export {
+  buildCustomTemplatePartialName,
+  getCustomTemplatePartialItem
+};

package/components/common/index.js

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "AppSpinner", {
-  enumerable: true,
-  get: function get() {
-    return _AppSpinner.AppSpinner;
-  }
-});
-var _AppSpinner = require("./AppSpinner");
+import { AppSpinner } from "./AppSpinner";
+export {
+  AppSpinner
+};