@wavemaker/react-runtime 11.14.1-rc.236

package/components/basic/label/index.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmLabel = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _extends2 = _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");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _material = require("@mui/material");
+var _excluded = ["required", "trustAs", "type", "styles", "className", "caption", "hint", "name", "htmlFor"];
+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;
+var DEFAULT_CLASS = "app-label";
+var StyledLabel = (0, _styles.styled)(_material.Box, {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== "ownerState";
+  }
+})(function () {
+  return {
+    display: "inline-block"
+  };
+});
+var containsHTML = function containsHTML(text) {
+  // Check if the string contains HTML tags
+  return /<[^>]*>/g.test(text);
+};
+var parseCaption = function parseCaption(caption) {
+  if (!caption) return [];
+  var parts = [];
+  var pattern = /\[([^\]]+)\]\(([^)]*)\)/g;
+  var match;
+  while ((match = pattern.exec(caption)) !== null) {
+    var _match = match,
+      _match2 = (0, _slicedToArray2["default"])(_match, 3),
+      fullMatch = _match2[0],
+      text = _match2[1],
+      link = _match2[2];
+    var startIndex = caption.indexOf(fullMatch);
+    if (startIndex > 0) parts.push({
+      text: caption.slice(0, startIndex)
+    });
+    parts.push({
+      text: text,
+      link: link
+    });
+    caption = caption.slice(startIndex + fullMatch.length);
+  }
+  if (caption) parts.push({
+    text: caption
+  });
+  return parts;
+};
+var WmLabel = exports.WmLabel = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _JSON$stringify;
+  var _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$trustAs = props.trustAs,
+    trustAs = _props$trustAs === void 0 ? false : _props$trustAs,
+    _props$type = props.type,
+    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,
+    hint = props.hint,
+    name = props.name,
+    htmlFor = props.htmlFor,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var ownerState = {
+    type: type
+  };
+  var captionString = typeof caption === "string" ? caption : (_JSON$stringify = JSON.stringify(caption)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : "";
+
+  // Check if caption contains HTML tags
+  var hasHTML = containsHTML(captionString);
+
+  // If trustAs is true OR caption contains HTML, use dangerouslySetInnerHTML
+  var shouldRenderAsHTML = trustAs || hasHTML;
+  var parts = parseCaption(captionString);
+  var sanitizedContent = shouldRenderAsHTML ? _dompurify["default"].sanitize(captionString) : parts.map(function (part) {
+    return part.link ? "<a target=\"_blank\" href=\"".concat(part.link, "\">").concat(part.text, "</a>") : part.text;
+  });
+  if (shouldRenderAsHTML) {
+    return __jsx(StyledLabel, (0, _extends2["default"])({
+      as: type,
+      ownerState: ownerState,
+      className: (0, _clsx["default"])(DEFAULT_CLASS, {
+        required: required
+      }, className),
+      style: styles,
+      title: hint,
+      name: name,
+      type: type,
+      caption: captionString,
+      dangerouslySetInnerHTML: {
+        __html: sanitizedContent
+      }
+    }, rest));
+  }
+  return __jsx(StyledLabel, (0, _extends2["default"])({
+    as: type,
+    ownerState: ownerState,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, {
+      required: required
+    }, className),
+    style: styles,
+    title: hint,
+    name: name,
+    type: type,
+    caption: captionString
+  }, rest), parts.map(function (part, index) {
+    return part.link ? __jsx("a", {
+      key: index,
+      href: part.link,
+      target: "_blank",
+      style: {
+        textDecoration: "underline",
+        color: "blue"
+      }
+    }, part.text) : __jsx(_react.Fragment, {
+      key: index
+    }, part.text);
+  }));
+}, function (prev, current) {
+  var keys = ["caption", "required", "trustAs", "type", "id", "htmlFor", "styles", "className", "hint"];
+  return keys.every(function (key) {
+    return prev[key] === current[key];
+  });
+});
+WmLabel.displayName = "WmLabel";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmLabel);

package/components/basic/message/index.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmMessage = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _button = require("@wavemaker/react-runtime/components/form/button");
+var _clsx = _interopRequireDefault(require("clsx"));
+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 MESSAGE_TYPES = {
+  success: {
+    "class": "alert-success",
+    iconClass: "wm-sl-l sl-check"
+  },
+  error: {
+    "class": "alert-danger",
+    iconClass: "wi wi-cancel"
+  },
+  warning: {
+    "class": "alert-warning",
+    iconClass: "wm-sl-l sl-alarm-bell"
+  },
+  info: {
+    "class": "alert-info",
+    iconClass: "wi wi-info"
+  },
+  loading: {
+    "class": "alert-info alert-loading",
+    iconClass: "fa fa-spinner fa-spin"
+  }
+};
+var DEFAULT_CLS = "alert app-message";
+var WmMessage = exports.WmMessage = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$caption = props.caption,
+    caption = _props$caption === void 0 ? "Message" : _props$caption,
+    _props$type = props.type,
+    type = _props$type === void 0 ? "success" : _props$type,
+    _props$hideclose = props.hideclose,
+    hideclose = _props$hideclose === void 0 ? false : _props$hideclose,
+    close = props.close,
+    styles = props.styles,
+    open = props.open,
+    name = props.name,
+    animation = props.animation,
+    className = props.className;
+  if (!open) return null;
+  var getMessageType = function getMessageType(type) {
+    return MESSAGE_TYPES[type] || MESSAGE_TYPES.info;
+  };
+  var messageType = getMessageType(type);
+  var messageClass = messageType["class"];
+  var iconClass = messageType.iconClass;
+  return __jsx(_Box["default"], {
+    component: "div",
+    style: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLS, messageClass, animation ? "animated ".concat(animation) : "", className),
+    title: caption
+  }, __jsx(_Box["default"], {
+    component: "i",
+    "aria-hidden": "true",
+    title: "".concat(type, "Alert"),
+    className: "icon ".concat(type, " ").concat(iconClass)
+  }), __jsx(_Box["default"], {
+    component: "span"
+  }, caption || ""), !hideclose && __jsx(_button.WmButton, {
+    title: "Close",
+    type: "button",
+    className: "btn-transparent close",
+    onClick: close,
+    "aria-label": "Close",
+    listener: {},
+    name: ""
+  }, __jsx("span", {
+    "aria-hidden": "true"
+  }, "\xD7")));
+}, function (prev, next) {
+  var keys = ["caption", "type", "hideclose", "onClose", "styles", "open"];
+  return keys.every(function (key) {
+    return prev[key] === next[key];
+  });
+});
+WmMessage.displayName = "WmMessage";
+var WmMessageWrapper = function WmMessageWrapper(Component) {
+  var WrappedComponent = function WrappedComponent(props) {
+    var onClose = props.onClose;
+    var _useState = (0, _react.useState)(true),
+      messageOpen = _useState[0],
+      setMessageOpen = _useState[1];
+    var hideMessage = function hideMessage() {
+      setMessageOpen(false);
+    };
+    var showMessage = function showMessage() {
+      setMessageOpen(true);
+    };
+    var handleClose = function handleClose(event) {
+      hideMessage();
+      onClose === null || onClose === void 0 || onClose(event);
+    };
+    var updatedProps = (0, _react.useMemo)(function () {
+      return _objectSpread(_objectSpread({}, props), {}, {
+        hideMessage: hideMessage,
+        showMessage: showMessage,
+        close: handleClose,
+        open: messageOpen
+      });
+    }, [props, messageOpen, handleClose]);
+    return __jsx(Component, updatedProps);
+  };
+  return WrappedComponent;
+};
+var _default = exports["default"] = WmMessageWrapper((0, _withBaseWrapper["default"])(WmMessage));

package/components/basic/message/props.js

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

package/components/basic/picture/index.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmPicture = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+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"];
+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-picture";
+var StyledImage = (0, _styles.styled)("img")(function (_ref) {
+  var styleConfig = _ref.styleConfig;
+  return _objectSpread({}, styleConfig || {});
+});
+var WmPicture = exports.WmPicture = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$pictureaspect = props.pictureaspect,
+    pictureaspect = _props$pictureaspect === void 0 ? "None" : _props$pictureaspect,
+    _props$resizemode = props.resizemode,
+    resizemode = _props$resizemode === void 0 ? "fill" : _props$resizemode,
+    _props$pictureplaceho = props.pictureplaceholder,
+    pictureplaceholder = _props$pictureplaceho === void 0 ? "resources/images/imagelists/default-image.png" : _props$pictureplaceho,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    onLoad = props.onLoad,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(props.picturesource),
+    imgSource = _useState[0],
+    setImgSource = _useState[1];
+  var _useState2 = (0, _react.useState)(props.width || "auto"),
+    imageWidth = _useState2[0],
+    setImageWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(props.height || "auto"),
+    imageHeight = _useState3[0],
+    setImageHeight = _useState3[1];
+  (0, _react.useEffect)(function () {
+    var source = props.picturesource || "";
+    if (props.encodeurl) {
+      source = encodeURIComponent(source);
+    }
+    var prefixed = (0, _resourceUrl.prefixPrefabResourceUrl)(source || props.pictureplaceholder || "", props.prefabName);
+    setImgSource(prefixed);
+  }, [props.picturesource, props.encodeurl, props.pictureplaceholder, props.prefabName]);
+  (0, _react.useEffect)(function () {
+    switch (props.pictureaspect) {
+      case "H":
+        setImageWidth(props.width || "100%");
+        setImageHeight("auto");
+        break;
+      case "V":
+        setImageWidth("auto");
+        setImageHeight(props.height || "100%");
+        break;
+      case "Both":
+        setImageWidth(props.height || "100%");
+        setImageHeight(props.height || "100%");
+        break;
+      case "None":
+      default:
+        setImageWidth(props.width);
+        setImageHeight(props.height);
+        break;
+    }
+  }, [props.pictureaspect, props.width, props.height]);
+  var styleConfig = {
+    objectFit: resizemode || "cover"
+  };
+  var onClickHandler = function onClickHandler(event) {
+    onClick && onClick(event, props);
+  };
+  var onDoubleClickHandler = function onDoubleClickHandler(event) {
+    onDoubleClick && onDoubleClick(event, props);
+  };
+  var onMouseEnterHandler = function onMouseEnterHandler(event) {
+    onMouseEnter && onMouseEnter(event, props);
+  };
+  var onMouseLeaveHandler = function onMouseLeaveHandler(event) {
+    onMouseLeave && onMouseLeave(event, props);
+  };
+  return __jsx(StyledImage, (0, _extends2["default"])({}, restProps, {
+    "data-identifier": "img",
+    title: props.hint || props.name,
+    onClick: onClickHandler,
+    onDoubleClick: onDoubleClickHandler,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    src: imgSource || pictureplaceholder,
+    alt: props.alttext || "image alt text not provided",
+    className: (0, _clsx2["default"])(DEFAULT_CLASS, (0, _defineProperty2["default"])({}, "img-".concat(props.shape), props.shape), props.className),
+    sx: styleConfig,
+    style: props.styles,
+    height: imageHeight,
+    width: imageWidth,
+    "aria-label": props.arialabel || "Picture content",
+    tabIndex: tabindex,
+    name: props.name
+  }));
+}, function (prev, current) {
+  return prev.picturesource === current.picturesource;
+});
+WmPicture.displayName = "WmPicture";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmPicture);

package/components/basic/picture/props.js

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

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

@@ -0,0 +1,168 @@
+"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 _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 _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _props = require("@wavemaker/react-runtime/components/basic/progress-bar/props");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _formatUtil = require("@wavemaker/react-runtime/utils/format-util");
+var _constants = require("@wavemaker/react-runtime/components/constants");
+var _excluded = ["type", "datavalue", "minvalue", "maxvalue", "captionplacement", "tabindex", "arialabel", "dataset", "displayformat", "styles", "className", "hint", "height", "width", "listener", "onClick", "onDoubleClick", "onMouseenter", "onMouseleave"];
+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 WmProgressBar = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? _constants.progressBarConstants.DEFAULT_TYPE : _props$type,
+    _props$datavalue = props.datavalue,
+    datavalue = _props$datavalue === void 0 ? 30 : _props$datavalue,
+    _props$minvalue = props.minvalue,
+    minvalue = _props$minvalue === void 0 ? _constants.progressBarConstants.DEFAULT_MIN_VALUE : _props$minvalue,
+    _props$maxvalue = props.maxvalue,
+    maxvalue = _props$maxvalue === void 0 ? _constants.progressBarConstants.DEFAULT_MAX_VALUE : _props$maxvalue,
+    _props$captionplaceme = props.captionplacement,
+    captionplacement = _props$captionplaceme === void 0 ? _constants.progressBarConstants.DEFAULT_CAPTION_PLACEMENT : _props$captionplaceme,
+    tabindex = props.tabindex,
+    arialabel = props.arialabel,
+    dataset = props.dataset,
+    displayformat = props.displayformat,
+    styles = props.styles,
+    className = props.className,
+    hint = props.hint,
+    height = props.height,
+    width = props.width,
+    listener = props.listener,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onMouseenter = props.onMouseenter,
+    onMouseleave = props.onMouseleave,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var transformedDataset = (0, _react.useMemo)(function () {
+    var firstItem = dataset === null || dataset === void 0 ? void 0 : dataset[0];
+    var firstKey = firstItem ? Object.keys(firstItem)[0] : "";
+    return (0, _transformedDatasetUtils.transformDataset)(dataset, datavalue, firstKey, "", "", "", "", "");
+  }, [dataset]);
+  var _useState = (0, _react.useState)([{
+      cls: _props.TYPE_CLASS_MAP[type || "default"],
+      progressBarWidth: "0%",
+      displayValue: "0"
+    }]),
+    progressData = _useState[0],
+    setProgressData = _useState[1];
+  var getFormattedDisplayVal = (0, _react.useCallback)(function (val) {
+    var format = displayformat || "9";
+    var formattedValue = parseFloat(String(val)).toFixed((0, _formatUtil.getDecimalCount)(format, _constants.progressBarConstants.DECIMAL_COUNT_MAP));
+    if (format.includes("%")) {
+      formattedValue += "%";
+    }
+    return formattedValue;
+  }, [displayformat]);
+  var prepareData = (0, _react.useCallback)(function () {
+    if (transformedDataset && Array.isArray(transformedDataset) && transformedDataset.length > 0 && type && datavalue) {
+      var newProgressData = transformedDataset.map(function (datum) {
+        var _valFromDatum$dataObj;
+        var valFromDatum = (0, _formatUtil.findValueOf)(datum, datavalue);
+        var valStr = String((valFromDatum === null || valFromDatum === void 0 || (_valFromDatum$dataObj = valFromDatum.dataObject) === null || _valFromDatum$dataObj === void 0 ? void 0 : _valFromDatum$dataObj[datavalue]) || datavalue);
+        var progressBarWidthStr = valStr;
+        if (valStr && !valStr.includes("%")) {
+          progressBarWidthStr = "".concat(valStr, "%");
+        }
+        var cls = _props.TYPE_CLASS_MAP[type];
+        var displayValue = getFormattedDisplayVal(valStr);
+        return {
+          cls: cls,
+          progressBarWidth: progressBarWidthStr,
+          displayValue: displayValue
+        };
+      });
+      setProgressData(newProgressData);
+    } else {
+      var calculatedWidth = "0%";
+      var valueForDisplayFormat = 0;
+      if (datavalue !== undefined && datavalue !== null) {
+        var datavalueStr = String(datavalue);
+        if ((0, _formatUtil.isPercentageValue)(datavalueStr)) {
+          calculatedWidth = datavalueStr || "0%";
+          valueForDisplayFormat = datavalueStr;
+        } else {
+          var denominator = Number(maxvalue) - Number(minvalue) || 1;
+          calculatedWidth = "".concat((Number(datavalueStr) - Number(minvalue)) * 100 / denominator, "%");
+          valueForDisplayFormat = calculatedWidth;
+        }
+      }
+      setProgressData([{
+        displayValue: getFormattedDisplayVal(String(valueForDisplayFormat)),
+        progressBarWidth: calculatedWidth,
+        cls: _props.TYPE_CLASS_MAP[type || "default"]
+      }]);
+    }
+  }, [transformedDataset, datavalue, type, minvalue, maxvalue, getFormattedDisplayVal, setProgressData]);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    onClick === null || onClick === void 0 || onClick(event, props);
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(props.name, {
+        datavalue: datavalue
+      });
+    }
+  }, [onClick, listener, datavalue, props]);
+  var handleDoubleClick = (0, _react.useCallback)(function (event) {
+    onDoubleClick === null || onDoubleClick === void 0 || onDoubleClick(event, props);
+  }, [onDoubleClick]);
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    onMouseenter === null || onMouseenter === void 0 || onMouseenter(event, props);
+  }, [onMouseenter]);
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    onMouseleave === null || onMouseleave === void 0 || onMouseleave(event, props);
+  }, [onMouseleave]);
+  (0, _react.useEffect)(function () {
+    prepareData();
+  }, [prepareData]);
+  var events = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, onClick ? {
+    onClick: handleClick
+  } : {}), onDoubleClick ? {
+    onDoubleClick: handleDoubleClick
+  } : {}), onMouseenter ? {
+    onMouseEnter: handleMouseEnter
+  } : {}), onMouseleave ? {
+    onMouseLeave: handleMouseLeave
+  } : {});
+  return __jsx(_Box["default"], (0, _extends2["default"])({
+    className: (0, _clsx["default"])(_constants.progressBarConstants.DEFAULT_CLASS, className)
+  }, rest, {
+    style: styles,
+    "aria-label": arialabel,
+    title: hint
+  }), progressData.map(function (bar, index) {
+    return __jsx(_Box["default"], (0, _extends2["default"])({}, events, {
+      role: "progressbar",
+      key: index,
+      className: "multi-bar ".concat(bar.cls),
+      style: {
+        width: bar.progressBarWidth
+      },
+      "aria-valuenow": bar.displayValue,
+      "aria-valuemin": minvalue,
+      "aria-valuemax": maxvalue,
+      tabIndex: tabindex
+    }), captionplacement === "inside" && __jsx(_Box["default"], {
+      component: "span",
+      className: "app-progress-label",
+      "data-caption-placement": captionplacement
+    }, 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);
+});
+WmProgressBar.displayName = "WmProgressBar";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)(WmProgressBar);

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TYPE_CLASS_MAP = void 0;
+var TYPE_CLASS_MAP = exports.TYPE_CLASS_MAP = {
+  "default": "progress-bar",
+  "default-striped": "progress-bar progress-bar-striped",
+  success: "progress-bar progress-bar-success",
+  "success-striped": "progress-bar progress-bar-success progress-bar-striped",
+  info: "progress-bar progress-bar-info",
+  "info-striped": "progress-bar progress-bar-info progress-bar-striped",
+  warning: "progress-bar progress-bar-warning",
+  "warning-striped": "progress-bar progress-bar-warning progress-bar-striped",
+  danger: "progress-bar progress-bar-danger",
+  "danger-striped": "progress-bar progress-bar-danger progress-bar-striped"
+};