@wavemaker/react-runtime 11.14.2-1.245 → 12.0.0-next.28533

package/components/basic/html/index.js

@@ -1,17 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
+var _dompurify = _interopRequireDefault(require("dompurify"));
 var _withBaseWrapper = require("@wavemaker/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); }
+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; }
@@ -23,7 +25,8 @@ var getStyles = function getStyles(props) {
     width = props.width,
     horizontalalign = props.horizontalalign;
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, styles), height ? {
-    height: height
+    height: height,
+    overflow: "auto"
   } : {}), width ? {
     width: width
   } : {}), horizontalalign ? {
@@ -42,30 +45,25 @@ var WmHtml = function WmHtml(props) {
     onDoubletap = props.onDoubletap,
     eventCallback = props.eventCallback,
     forwardedRef = props.forwardedRef,
-    hint = props.hint;
+    hint = props.hint,
+    content = props.content,
+    _props$trustAs = props.trustAs,
+    trustAs = _props$trustAs === void 0 ? false : _props$trustAs,
+    children = props.children;
   var htmlRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
-    initialContentSet = _useState[0],
-    setInitialContentSet = _useState[1];
-  var _useState2 = (0, _react.useState)(null),
-    boundContentAttr = _useState2[0],
-    setBoundContentAttr = _useState2[1];
+  var _useState = (0, _react.useState)(null),
+    initialContent = _useState[0],
+    setInitialContent = _useState[1];
   var touchStartRef = (0, _react.useRef)(0);
 
-  // Initialize content and check for bound content
+  // Capture initial children content if no content prop is provided
   (0, _react.useEffect)(function () {
-    var element = htmlRef.current;
-    if (!element) return;
-
-    // Check for content.bind attribute
-    var bindAttr = element.getAttribute("content.bind");
-    setBoundContentAttr(bindAttr);
-
-    // If there's a bound content attribute, clear the content
-    if (bindAttr && !initialContentSet) {
-      setInitialContentSet(true);
+    if (!content && !initialContent && htmlRef.current && children) {
+      // Store the initial children as content
+      var childContent = typeof children === "string" ? children : htmlRef.current.innerHTML;
+      setInitialContent(childContent);
     }
-  }, [initialContentSet]);
+  }, [content, children, initialContent]);
 
   // Event handlers with proper types
   var handleClick = (0, _react.useCallback)(function (e) {
@@ -143,6 +141,96 @@ var WmHtml = function WmHtml(props) {
   }), (props === null || props === void 0 ? void 0 : props.onTouchStart) && {
     onTouchStart: handleTouchStart
   });
+
+  // Determine what content to render
+  // Strategy: Always render through content path
+  // 1. If content prop exists -> use content
+  // 2. If content prop doesn't exist -> assign children to content
+  // 3. Use flag to determine if we can use dangerouslySetInnerHTML or need to render React children
+  var _useMemo = (0, _react.useMemo)(function () {
+      // Priority: content prop > children
+      // If content is not provided, move children to content
+      var contentToRender = content !== undefined ? content : initialContent || children;
+      if (!contentToRender) {
+        return {
+          renderContent: null,
+          isReactElement: false
+        };
+      }
+
+      // Check if contentToRender is a React element (component)
+      // React elements cannot be used with dangerouslySetInnerHTML
+      if (/*#__PURE__*/_react["default"].isValidElement(contentToRender)) {
+        return {
+          renderContent: contentToRender,
+          isReactElement: true
+        };
+      }
+
+      // Handle trusted content (similar to Angular's trustAs:html)
+      if ((0, _typeof2["default"])(contentToRender) === "object" && contentToRender !== null) {
+        // Check if it's a trusted object (from trustAs pipe)
+        var keys = Object.keys(contentToRender);
+        if (keys.length > 0 && keys[0] === "changingThisBreaksApplicationSecurity") {
+          return {
+            renderContent: {
+              __html: contentToRender[keys[0]]
+            },
+            isReactElement: false
+          };
+        }
+        // Otherwise convert to string
+        return {
+          renderContent: {
+            __html: _dompurify["default"].sanitize(String(contentToRender))
+          },
+          isReactElement: false
+        };
+      }
+
+      // Convert to string if needed
+      var stringContent = String(contentToRender);
+
+      // If trustAs is true, sanitize and render as HTML
+      if (trustAs) {
+        return {
+          renderContent: {
+            __html: _dompurify["default"].sanitize(stringContent)
+          },
+          isReactElement: false
+        };
+      }
+
+      // Otherwise sanitize the content
+      return {
+        renderContent: {
+          __html: _dompurify["default"].sanitize(stringContent)
+        },
+        isReactElement: false
+      };
+    }, [content, initialContent, children, trustAs]),
+    renderContent = _useMemo.renderContent,
+    isReactElement = _useMemo.isReactElement;
+
+  // Split rendering based on whether it's a React element or HTML string
+  // React doesn't allow both children and dangerouslySetInnerHTML on the same element
+  if (isReactElement) {
+    // Render React elements as children
+    return __jsx(_material.Box, (0, _extends2["default"])({
+      component: "div",
+      ref: handleRefCallback,
+      title: hint,
+      className: "".concat(className, " app-html-container"),
+      "data-element-type": "wm-html",
+      "data-name": name,
+      "aria-label": arialabel
+    }, domEvents, {
+      style: getStyles(props),
+      hidden: props.hidden
+    }), renderContent);
+  }
+
+  // Render HTML strings via dangerouslySetInnerHTML (with no children)
   return __jsx(_material.Box, (0, _extends2["default"])({
     component: "div",
     ref: handleRefCallback,
@@ -152,7 +240,10 @@ var WmHtml = function WmHtml(props) {
     "data-name": name,
     "aria-label": arialabel
   }, domEvents, {
-    style: getStyles(props)
-  }), props.children);
+    style: getStyles(props),
+    hidden: props.hidden
+  }, renderContent && {
+    dangerouslySetInnerHTML: renderContent
+  }));
 };
 var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmHtml);

package/components/basic/icon/index.js

@@ -49,7 +49,8 @@ var WmIcon = exports.WmIcon = /*#__PURE__*/(0, _react.memo)(function (props) {
     component: "span",
     "aria-label": arialabel,
     id: id,
-    "data-icon-position": iconposition
+    "data-icon-position": iconposition,
+    hidden: props.hidden
   }, __jsx(_Box["default"], {
     component: "span",
     className: "sr-only"

package/components/basic/iframe/index.js

@@ -67,7 +67,8 @@ var WmIframe = exports.WmIframe = function WmIframe(props) {
     width: width,
     height: height,
     style: styles,
-    title: hint
+    title: hint,
+    hidden: props.hidden
   }, __jsx(_Box["default"], {
     seamless: true,
     component: "iframe",

package/components/basic/label/index.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.WmLabel = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _styles = require("@mui/material/styles");
@@ -59,7 +60,7 @@ var parseCaption = function parseCaption(caption) {
   return parts;
 };
 var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
-  var _ref, _JSON$stringify;
+  var _ref, _JSON$stringify, _props$hidden;
   var _props$required = props.required,
     required = _props$required === void 0 ? false : _props$required,
     _props$trustAs = props.trustAs,
@@ -68,16 +69,17 @@ var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
     type = _props$type === void 0 ? "p" : _props$type,
     styles = props.styles,
     className = props.className,
-    _props$caption = props.caption,
-    caption = _props$caption === void 0 ? "Label" : _props$caption,
+    caption = props.caption,
     hint = props.hint,
     name = props.name,
     htmlFor = props.htmlFor,
     rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var hasCaptionProp = Object.prototype.hasOwnProperty.call(props, "caption");
+  var safeCaption = hasCaptionProp ? caption : "Label";
   var ownerState = {
     type: type
   };
-  var captionString = (_ref = typeof caption === "string" ? caption : (_JSON$stringify = JSON.stringify(caption)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : "") === null || _ref === void 0 ? void 0 : _ref.replace(/ |undefined|null/gi, " ");
+  var captionString = (_ref = typeof safeCaption === "string" ? safeCaption : (_JSON$stringify = JSON.stringify(safeCaption)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : "") === null || _ref === void 0 ? void 0 : _ref.replace(/ |undefined|null/gi, " ");
 
   // Check if caption contains HTML tags
   var hasHTML = containsHTML(captionString);
@@ -89,7 +91,7 @@ var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
     return part.link ? "<a target=\"_blank\" href=\"".concat(part.link, "\">").concat(part.text, "</a>") : part.text;
   });
   if (shouldRenderAsHTML) {
-    return __jsx(StyledLabel, (0, _extends2["default"])({
+    return __jsx(StyledLabel, (0, _extends3["default"])({
       as: type,
       ownerState: ownerState,
       className: (0, _clsx["default"])(DEFAULT_CLASS, {
@@ -105,7 +107,8 @@ var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
       }
     }, rest));
   }
-  return __jsx(StyledLabel, (0, _extends2["default"])({
+  return __jsx(StyledLabel, (0, _extends3["default"])((0, _defineProperty2["default"])({
+    hidden: props.hidden,
     as: type,
     ownerState: ownerState,
     className: (0, _clsx["default"])(DEFAULT_CLASS, {
@@ -116,7 +119,7 @@ var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
     name: name,
     type: type,
     caption: captionString
-  }, rest), parts.map(function (part, index) {
+  }, "hidden", (_props$hidden = props.hidden) !== null && _props$hidden !== void 0 ? _props$hidden : false), rest), parts.map(function (part, index) {
     return part.link ? __jsx("a", {
       key: index,
       href: part.link,
@@ -130,7 +133,7 @@ var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
     }, part.text);
   }));
 }, function (prev, current) {
-  var keys = ["caption", "required", "trustAs", "type", "id", "htmlFor", "styles", "className", "hint"];
+  var keys = ["caption", "required", "trustAs", "type", "id", "htmlFor", "styles", "className", "hint", "hidden"];
   return keys.every(function (key) {
     return prev[key] === current[key];
   });

package/components/basic/message/index.js

@@ -60,6 +60,7 @@ var WmMessage = exports.WmMessage = /*#__PURE__*/(0, _react.memo)(function (prop
   var messageClass = messageType["class"];
   var iconClass = messageType.iconClass;
   return __jsx(_Box["default"], {
+    hidden: props.hidden,
     component: "div",
     style: styles,
     className: (0, _clsx["default"])(DEFAULT_CLS, messageClass, animation ? "animated ".concat(animation) : "", className),
@@ -83,7 +84,7 @@ var WmMessage = exports.WmMessage = /*#__PURE__*/(0, _react.memo)(function (prop
     "aria-hidden": "true"
   }, "\xD7")));
 }, function (prev, next) {
-  var keys = ["caption", "type", "hideclose", "onClose", "styles", "open"];
+  var keys = ["caption", "type", "hideclose", "onClose", "styles", "open", "hidden"];
   return keys.every(function (key) {
     return prev[key] === next[key];
   });
@@ -95,10 +96,16 @@ var WmMessageWrapper = function WmMessageWrapper(Component) {
     var _useState = (0, _react.useState)(true),
       messageOpen = _useState[0],
       setMessageOpen = _useState[1];
+    var _useState2 = (0, _react.useState)(props.caption),
+      messageCaption = _useState2[0],
+      setMessageCaption = _useState2[1];
     var hideMessage = function hideMessage() {
       setMessageOpen(false);
     };
-    var showMessage = function showMessage() {
+    var showMessage = function showMessage(caption) {
+      if (caption) {
+        setMessageCaption(caption);
+      }
       setMessageOpen(true);
     };
     var handleClose = function handleClose(event) {
@@ -111,8 +118,10 @@ var WmMessageWrapper = function WmMessageWrapper(Component) {
         showMessage: showMessage,
         close: handleClose,
         open: messageOpen
+      }, messageCaption !== undefined && {
+        caption: messageCaption
       });
-    }, [props, messageOpen, handleClose]);
+    }, [props, messageOpen, handleClose, messageCaption]);
     return __jsx(Component, updatedProps);
   };
   return WrappedComponent;

package/components/basic/picture/index.js

@@ -14,7 +14,7 @@ var _clsx2 = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _resourceUrl = require("@wavemaker/react-runtime/utils/resource-url");
-var _excluded = ["pictureaspect", "resizemode", "pictureplaceholder", "tabindex", "onLoad", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["pictureaspect", "resizemode", "pictureplaceholder", "tabindex", "onLoad", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "children", "show", "ref"];
 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; }
@@ -38,6 +38,9 @@ var WmPicture = exports.WmPicture = /*#__PURE__*/(0, _react.memo)(function (prop
     onDoubleClick = props.onDoubleClick,
     onMouseEnter = props.onMouseEnter,
     onMouseLeave = props.onMouseLeave,
+    children = props.children,
+    show = props.show,
+    ref = props.ref,
     restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(props.picturesource),
     imgSource = _useState[0],
@@ -92,7 +95,8 @@ var WmPicture = exports.WmPicture = /*#__PURE__*/(0, _react.memo)(function (prop
   var onMouseLeaveHandler = function onMouseLeaveHandler(event) {
     onMouseLeave && onMouseLeave(event, props);
   };
-  return __jsx(StyledImage, (0, _extends2["default"])({}, restProps, {
+  return __jsx(_react["default"].Fragment, null, __jsx(StyledImage, (0, _extends2["default"])({}, restProps, {
+    ref: ref,
     "data-identifier": "img",
     title: props.hint || props.name,
     onClick: onClickHandler,
@@ -109,9 +113,12 @@ var WmPicture = exports.WmPicture = /*#__PURE__*/(0, _react.memo)(function (prop
     "aria-label": props.arialabel || "Picture content",
     tabIndex: tabindex,
     name: props.name
-  }));
+  })), children);
 }, function (prev, current) {
-  return prev.picturesource === current.picturesource;
+  var keysToCompare = ["picturesource", "show"];
+  return keysToCompare.every(function (key) {
+    return prev[key] === current[key];
+  });
 });
 WmPicture.displayName = "WmPicture";
 var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmPicture);

package/components/basic/progress-bar/index.js

@@ -162,7 +162,7 @@ var WmProgressBar = /*#__PURE__*/(0, _react.memo)(function (props) {
     }, bar.displayValue));
   }));
 }, function (prev, current) {
-  return prev.datavalue === current.datavalue && prev.type === current.type && prev.height === current.height && prev.width === current.width && JSON.stringify(prev.dataset) === JSON.stringify(current.dataset);
+  return prev.datavalue === current.datavalue && prev.type === current.type && prev.height === current.height && prev.width === current.width && JSON.stringify(prev.dataset) === JSON.stringify(current.dataset) && prev.minvalue === current.minvalue && prev.maxvalue === current.maxvalue && prev.hidden === current.hidden;
 });
 WmProgressBar.displayName = "WmProgressBar";
 var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmProgressBar);

package/components/basic/progress-circle/index.js

@@ -10,15 +10,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
-var _props = require("./props");
-var _constants = require("../../constants");
+var _props = require("@wavemaker/react-runtime/components/basic/progress-circle/props");
+var _constants = require("@wavemaker/react-runtime/components/constants");
+var _props2 = require("./props");
 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 WmProgressCircle = function WmProgressCircle(props) {
-  var _props$datavalue = props.datavalue,
-    datavalue = _props$datavalue === void 0 ? "30" : _props$datavalue,
+  var datavalue = props.datavalue,
     _props$minvalue = props.minvalue,
     minvalue = _props$minvalue === void 0 ? _constants.progressBarConstants.DEFAULT_MIN_VALUE : _props$minvalue,
     _props$maxvalue = props.maxvalue,
@@ -51,39 +51,31 @@ var WmProgressCircle = function WmProgressCircle(props) {
   // Memoize core calculations
   var _useMemo = (0, _react.useMemo)(function () {
       // Calculate percentage
-      var value = typeof datavalue === "string" ? parseFloat(datavalue) : datavalue;
+      var value = typeof datavalue === "string" ? parseFloat(datavalue) : datavalue !== undefined ? datavalue : _constants.progressBarConstants.DEFAULT_DATAVALUE;
       var percent = (value - minvalue) / (maxvalue - minvalue) * 100;
-      var percentageVal = Math.min(Math.max(percent, 0), 100);
+      // Round to avoid floating-point precision issues (e.g., 55.00000000000001)
+      var percentageVal = Math.min(Math.max(Math.round(percent * 1e10) / 1e10, 0), 100);
 
       // Format display value
       var decimalPlaces = _constants.progressBarConstants.DECIMAL_COUNT_MAP[displayformat];
       var isPercent = displayformat.includes("%");
       var displayVal = percentageVal.toFixed(decimalPlaces);
-      var stroke = 5;
-      var radius = 45;
+      var stroke = props.strokeWidth || 5;
+      var radius = props.radius || 45;
       var normalized = radius - stroke / 2;
       var circum = normalized * 2 * Math.PI;
       var offset = circum - percentageVal / 100 * circum;
-
-      // Calculate the path for the progress arc
-      var angle = percentageVal / 100 * 360;
-      var rad = (angle - 90) * Math.PI / 180;
-      var x = 50 + normalized * Math.cos(rad);
-      var y = 50 + normalized * Math.sin(rad);
-      var largeArcFlag = angle > 180 ? 1 : 0;
-      var path = "M 50,".concat(50 - normalized, " A ").concat(normalized, " ").concat(normalized, " 0 ").concat(largeArcFlag, " 1 ").concat(x, " ").concat(y);
       return {
         percentageValue: percentageVal,
         displayValue: displayVal,
-        progressColor: type !== "default" ? "var(--wm-progress-circle-".concat(type, "-stroke-active)") : "var(--wm-progress-circle-stroke-active)",
+        progressColor: type !== "default" ? type in _props2.EnumProgressCircleType ? "var(--wm-progress-circle-".concat(type, "-stroke-active)") : "var(--wm-progress-circle-stroke-active)" : "var(--wm-progress-circle-stroke-active)",
         strokeWidth: stroke,
         normalizedRadius: normalized,
         circumference: circum,
         strokeDashoffset: offset,
-        isPercent: isPercent,
-        progressPath: path
+        isPercent: isPercent
       };
-    }, [datavalue, minvalue, maxvalue, type, displayformat]),
+    }, [datavalue, minvalue, maxvalue, type, displayformat, props.strokeWidth, props.radius]),
     percentageValue = _useMemo.percentageValue,
     displayValue = _useMemo.displayValue,
     progressColor = _useMemo.progressColor,
@@ -91,8 +83,7 @@ var WmProgressCircle = function WmProgressCircle(props) {
     normalizedRadius = _useMemo.normalizedRadius,
     circumference = _useMemo.circumference,
     strokeDashoffset = _useMemo.strokeDashoffset,
-    isPercent = _useMemo.isPercent,
-    progressPath = _useMemo.progressPath;
+    isPercent = _useMemo.isPercent;
 
   // Default styles if not provided
   var finalStyles = _objectSpread({
@@ -105,6 +96,13 @@ var WmProgressCircle = function WmProgressCircle(props) {
     });
     onBeforerender === null || onBeforerender === void 0 || onBeforerender(listener, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
   }, [percentageValue]);
+
+  // assigning default datavalue to the proxy object
+  (0, _react.useEffect)(function () {
+    listener.onChange(name, {
+      datavalue: datavalue !== undefined ? datavalue : _constants.progressBarConstants.DEFAULT_DATAVALUE
+    });
+  }, []);
   return __jsx(_Box["default"], {
     component: "div",
     ref: containerRef,
@@ -128,7 +126,9 @@ var WmProgressCircle = function WmProgressCircle(props) {
     "aria-valuemax": maxvalue,
     role: "progressbar",
     title: hint,
-    style: finalStyles
+    style: finalStyles,
+    hidden: props.hidden,
+    name: name
   }, __jsx("svg", {
     height: "100%",
     width: "100%",
@@ -143,14 +143,20 @@ var WmProgressCircle = function WmProgressCircle(props) {
     r: normalizedRadius,
     cx: "50",
     cy: "50"
-  }), __jsx("path", {
-    d: progressPath,
-    fill: "none",
+  }), __jsx("circle", {
+    fill: "transparent",
     strokeWidth: strokeWidth,
+    strokeDasharray: circumference,
+    strokeDashoffset: strokeDashoffset,
+    strokeLinecap: "round",
+    r: normalizedRadius,
+    cx: "50",
+    cy: "50",
     style: {
       stroke: progressColor,
-      strokeLinecap: "round",
-      transition: "all 0.3s ease"
+      transform: "rotate(-90deg)",
+      transformOrigin: "50% 50%",
+      transition: "stroke-dashoffset 0.5s ease"
     }
   }), captionplacement === "inside" && __jsx(_react["default"].Fragment, null, !title && __jsx("text", {
     x: "50",

package/components/basic/progress-circle/props.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPE_CLASS_MAP_PC = void 0;
+exports.TYPE_CLASS_MAP_PC = exports.EnumProgressCircleType = void 0;
 // Type definitions for the component props
 
 // Map of progress-bar type and classes
@@ -13,4 +13,12 @@ var TYPE_CLASS_MAP_PC = exports.TYPE_CLASS_MAP_PC = {
   info: "progress-circle-info",
   warning: "progress-circle-warning",
   danger: "progress-circle-danger"
-};
+};
+var EnumProgressCircleType = exports.EnumProgressCircleType = /*#__PURE__*/function (EnumProgressCircleType) {
+  EnumProgressCircleType["SUCCESS"] = "success";
+  EnumProgressCircleType["INFO"] = "info";
+  EnumProgressCircleType["WARNING"] = "warning";
+  EnumProgressCircleType["DANGER"] = "danger";
+  EnumProgressCircleType["DEFAULT"] = "default";
+  return EnumProgressCircleType;
+}({});