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

package/actions/toast.service.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toastService = exports.ToastInitializer = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _toastProvider = require("./toast-provider");
+var _ToastService;
+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 ToastService = /*#__PURE__*/function () {
+  function ToastService() {
+    (0, _classCallCheck2["default"])(this, ToastService);
+    (0, _defineProperty2["default"])(this, "context", null);
+    (0, _defineProperty2["default"])(this, "activeToasts", new Map());
+    if (ToastService.instance) {
+      return ToastService.instance;
+    }
+    this.showToast = this.showToast.bind(this);
+    this.hideToast = this.hideToast.bind(this);
+    this.hideAllToasts = this.hideAllToasts.bind(this);
+    this.setContext = this.setContext.bind(this);
+    ToastService.instance = this;
+  }
+  return (0, _createClass2["default"])(ToastService, [{
+    key: "setContext",
+    value: function setContext(context) {
+      this.context = context;
+    }
+  }, {
+    key: "showToast",
+    value: function showToast(options) {
+      if (!this.context) {
+        console.warn("Toast service used before context is set. Make sure ToastProvider is mounted.");
+        return "error";
+      }
+      this.hideAllToasts();
+      var id = this.context.showToast(options);
+
+      // Track the toast
+      this.activeToasts.set(id, {
+        onClose: options.onClose
+      });
+      return id;
+    }
+  }, {
+    key: "hideToast",
+    value: function hideToast(id) {
+      if (!this.context) return;
+      var toastData = this.activeToasts.get(id);
+      if (toastData) {
+        if (toastData.timeoutId) {
+          clearTimeout(toastData.timeoutId);
+        }
+        this.activeToasts["delete"](id);
+      }
+      this.context.hideToast(id);
+    }
+  }, {
+    key: "hideAllToasts",
+    value: function hideAllToasts() {
+      if (!this.context) return;
+      this.activeToasts.forEach(function (data) {
+        if (data.timeoutId) {
+          clearTimeout(data.timeoutId);
+        }
+      });
+      this.activeToasts.clear();
+      this.context.hideAllToasts();
+    }
+  }]);
+}(); // Create singleton instance
+_ToastService = ToastService;
+(0, _defineProperty2["default"])(ToastService, "instance", void 0);
+var toastService = exports.toastService = new ToastService();
+var ToastInitializer = exports.ToastInitializer = function ToastInitializer(_ref) {
+  var children = _ref.children;
+  var toast = (0, _toastProvider.useToast)();
+  (0, _react.useEffect)(function () {
+    toastService.setContext(toast);
+    return function () {
+      // Clear context reference
+      toastService.setContext(null);
+    };
+  }, [toast]);
+  return __jsx(_react["default"].Fragment, null, children);
+};

package/actions/types/index.d.ts

@@ -0,0 +1,26 @@
+export interface ToastOptions {
+    text: string;
+    type?: "success" | "error" | "warning" | "info";
+    duration?: number;
+    position?: ToastPosition;
+    onClick?: () => void;
+    onClose?: () => void;
+    placement?: ToastPosition;
+    content?: Record<string, any> | undefined;
+    name?: string;
+    showTypeLabel?: boolean;
+}
+export type ToastPosition = "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right";
+export declare const TOAST_CONFIG: {
+    CONTAINER_ID: string;
+    DEFAULT_DURATION: number;
+    DEFAULT_POSITION: ToastPosition;
+};
+export interface Toast extends ToastOptions {
+    id: string;
+}
+export interface ToastContextValue {
+    showToast: (options: ToastOptions) => string;
+    hideToast: (id: string) => void;
+    hideAllToasts: () => void;
+}

package/actions/types/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOAST_CONFIG = void 0;
+var TOAST_CONFIG = exports.TOAST_CONFIG = {
+  CONTAINER_ID: "mui-toast-container",
+  DEFAULT_DURATION: 3000,
+  DEFAULT_POSITION: "bottom right"
+};

package/components/advanced/carousel/index.d.ts

@@ -0,0 +1,72 @@
+import React from "react";
+/**
+ * The WmCarousel component is used to display a series of content panes in a cycle.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/advanced-carousel--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/advanced-carousel--docs)
+ *
+ * @param props - {@link WmCarouselProps}
+ */
+declare const _default: React.ComponentType<{
+    animation?: "auto" | "none";
+    animationinterval?: number;
+    controls?: import("./props").CarouselControlsType;
+    dataset?: any;
+    nodatamessage?: string;
+    onChange?: (event: any, widget?: Record<string, any>, newIndex?: number, oldIndex?: number) => void;
+    currentslide?: any;
+    previousslide?: any;
+    render?: (item: any, index: number) => React.ReactNode;
+    hyperlink?: string;
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    encodeurl?: "true" | "false";
+    id?: string;
+    standalone?: boolean;
+    ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
+    show?: boolean | string;
+    padding?: string;
+    margin?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    conditionalstyle?: React.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;
+    eventCallback?: (eventName: string, data: any) => void;
+    forwardedRef?: React.ForwardedRef<any>;
+    viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
+    hint?: string;
+    arialabel?: string;
+    tabindex?: number;
+    styles?: React.CSSProperties;
+    children?: React.ReactNode;
+    hidden?: boolean;
+    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;
+    prefabName?: string;
+}>;
+export default _default;

package/components/advanced/carousel/index.js

@@ -0,0 +1,467 @@
+"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 _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _isPlainObject = _interopRequireDefault(require("lodash-es/isPlainObject"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withBaseWrapper"));
+var _attr = require("@wavemaker-ai/react-runtime/utils/attr");
+var _excluded = ["name", "animation", "animationinterval", "controls", "nodatamessage", "height", "width", "children", "className", "styles", "render", "onChange"];
+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-carousel carousel";
+var StyledCarousel = (0, _styles.styled)(_Box["default"], {
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !["ownerState"].includes(prop);
+  }
+})(function (_ref) {
+  var ownerState = _ref.ownerState;
+  var height = ownerState.height,
+    width = ownerState.width,
+    isAnimating = ownerState.isAnimating;
+  return {
+    position: "relative",
+    width: width || "100%",
+    height: height || "480px",
+    overflow: "hidden",
+    "& .carousel-inner": {
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    },
+    "& .carousel-item": {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      opacity: 1,
+      transition: isAnimating ? "transform 0.6s ease-in-out" : "none",
+      transform: "translate3d(0, 0, 0)",
+      WebkitTransform: "translate3d(0, 0, 0)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "&.active": {
+        opacity: 1,
+        transform: "translate3d(0, 0, 0)",
+        WebkitTransform: "translate3d(0, 0, 0)",
+        zIndex: 2
+      },
+      "&.carousel-item-left": {
+        transform: "translate3d(-100%, 0, 0)",
+        WebkitTransform: "translate3d(-100%, 0, 0)",
+        zIndex: 1
+      },
+      "&.carousel-item-right": {
+        transform: "translate3d(100%, 0, 0)",
+        WebkitTransform: "translate3d(100%, 0, 0)",
+        zIndex: 1
+      },
+      "&.carousel-item-prev": {
+        transform: "translate3d(-100%, 0, 0)",
+        WebkitTransform: "translate3d(-100%, 0, 0)",
+        zIndex: 1,
+        "&.carousel-item-left": {
+          transform: "translate3d(0, 0, 0)",
+          WebkitTransform: "translate3d(0, 0, 0)",
+          zIndex: 2
+        }
+      },
+      "&.carousel-item-next": {
+        transform: "translate3d(100%, 0, 0)",
+        WebkitTransform: "translate3d(100%, 0, 0)",
+        zIndex: 1,
+        "&.carousel-item-right": {
+          transform: "translate3d(0, 0, 0)",
+          WebkitTransform: "translate3d(0, 0, 0)",
+          zIndex: 2
+        }
+      },
+      // Special handling for active items during animation
+      "&.active.carousel-item-left": {
+        transform: "translate3d(-100%, 0, 0)",
+        WebkitTransform: "translate3d(-100%, 0, 0)",
+        zIndex: 1
+      },
+      "&.active.carousel-item-right": {
+        transform: "translate3d(100%, 0, 0)",
+        WebkitTransform: "translate3d(100%, 0, 0)",
+        zIndex: 1
+      }
+    },
+    // Navigation controls
+    "& .carousel-control": {
+      zIndex: 5,
+      height: "inherit"
+    },
+    // Hide controls based on controls prop
+    "&.hide-navs .carousel-control": {
+      display: "none"
+    },
+    "&.hide-indicators .carousel-indicators": {
+      display: "none"
+    },
+    "&.hide-both .carousel-control, &.hide-both .carousel-indicators": {
+      display: "none"
+    }
+  };
+});
+var WmCarousel = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var name = props.name,
+    _props$animation = props.animation,
+    animation = _props$animation === void 0 ? "auto" : _props$animation,
+    _props$animationinter = props.animationinterval,
+    animationinterval = _props$animationinter === void 0 ? 3 : _props$animationinter,
+    _props$controls = props.controls,
+    controls = _props$controls === void 0 ? "both" : _props$controls,
+    _props$nodatamessage = props.nodatamessage,
+    nodatamessage = _props$nodatamessage === void 0 ? "No Data Found" : _props$nodatamessage,
+    _props$height = props.height,
+    height = _props$height === void 0 ? "480px" : _props$height,
+    _props$width = props.width,
+    width = _props$width === void 0 ? "100%" : _props$width,
+    children = props.children,
+    className = props.className,
+    styles = props.styles,
+    render = props.render,
+    onChange = props.onChange,
+    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var dataset = props.dataset || [];
+  var _useState = (0, _react.useState)(0),
+    activeIndex = _useState[0],
+    setActiveIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isAnimating = _useState2[0],
+    setIsAnimating = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isPaused = _useState3[0],
+    setIsPaused = _useState3[1];
+  var _useState4 = (0, _react.useState)("right"),
+    direction = _useState4[0],
+    setDirection = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    prevActiveIndex = _useState5[0],
+    setPrevActiveIndex = _useState5[1];
+  var intervalRef = (0, _react.useRef)(undefined);
+  var carouselRef = (0, _react.useRef)(null);
+  dataset = (0, _isPlainObject["default"])(dataset) ? [dataset] : dataset;
+
+  // Determine if it's a dynamic carousel (has dataset) or static (has children)
+  var isDynamic = dataset && dataset.length > 0;
+  var items = isDynamic ? dataset : _react["default"].Children.toArray(children || []);
+  var itemCount = items.length;
+  var ownerState = (0, _react.useMemo)(function () {
+    return {
+      height: height,
+      width: width,
+      isAnimating: isAnimating
+    };
+  }, [height, width, isAnimating]);
+
+  // Auto-play functionality
+  var startAutoPlay = (0, _react.useCallback)(function () {
+    if (animation === "auto" && animationinterval > 0 && itemCount > 1) {
+      intervalRef.current = setInterval(function () {
+        if (!isPaused) {
+          setActiveIndex(function (prevIndex) {
+            var newIndex = (prevIndex + 1) % itemCount;
+            setDirection("right");
+            setPrevActiveIndex(prevIndex);
+            setIsAnimating(true);
+            setTimeout(function () {
+              return setIsAnimating(false);
+            }, 600);
+            return newIndex;
+          });
+        }
+      }, animationinterval * 500);
+    }
+  }, [animation, animationinterval, itemCount, isPaused]);
+  var stopAutoPlay = (0, _react.useCallback)(function () {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = undefined;
+    }
+  }, []);
+
+  // Start/stop auto-play based on props
+  (0, _react.useEffect)(function () {
+    if (animation === "auto" && !isPaused) {
+      startAutoPlay();
+    } else {
+      stopAutoPlay();
+    }
+    return function () {
+      return stopAutoPlay();
+    };
+  }, [animation, startAutoPlay, stopAutoPlay, isPaused]);
+
+  // Navigation functions
+  var goToSlide = (0, _react.useCallback)(function (index, slideDirection) {
+    if (index >= 0 && index < itemCount && index !== activeIndex) {
+      setIsAnimating(true);
+      var oldIndex = activeIndex;
+
+      // Determine slide direction
+      var dir = slideDirection;
+      if (!dir) {
+        // Handle circular navigation properly
+        if (index === 0 && activeIndex === itemCount - 1) {
+          dir = "right"; // Last to first
+        } else if (index === itemCount - 1 && activeIndex === 0) {
+          dir = "left"; // First to last
+        } else if (index > activeIndex) {
+          dir = "right";
+        } else {
+          dir = "left";
+        }
+      }
+      setDirection(dir);
+      setPrevActiveIndex(activeIndex);
+
+      // Set new active index
+      setActiveIndex(index);
+
+      // Call onChange callback
+      onChange === null || onChange === void 0 || onChange(null, props, index, oldIndex);
+
+      // Reset animation state after transition
+      setTimeout(function () {
+        return setIsAnimating(false);
+      }, 600);
+    }
+  }, [activeIndex, itemCount, onChange, props]);
+  var goToPrevious = (0, _react.useCallback)(function () {
+    var newIndex = activeIndex === 0 ? itemCount - 1 : activeIndex - 1;
+    goToSlide(newIndex, "left");
+  }, [activeIndex, itemCount, goToSlide]);
+  var goToNext = (0, _react.useCallback)(function () {
+    var newIndex = (activeIndex + 1) % itemCount;
+    goToSlide(newIndex, "right");
+  }, [activeIndex, itemCount, goToSlide]);
+
+  // Mouse event handlers for pause/resume
+  var handleMouseEnter = (0, _react.useCallback)(function (event) {
+    var _props$onMouseEnter;
+    setIsPaused(true);
+    (_props$onMouseEnter = props.onMouseEnter) === null || _props$onMouseEnter === void 0 || _props$onMouseEnter.call(props, event, props);
+  }, [props]);
+  var handleMouseLeave = (0, _react.useCallback)(function (event) {
+    var _props$onMouseLeave;
+    setIsPaused(false);
+    (_props$onMouseLeave = props.onMouseLeave) === null || _props$onMouseLeave === void 0 || _props$onMouseLeave.call(props, event, props);
+  }, [props]);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var _props$onClick;
+    (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event, props);
+  }, [props]);
+  var handleDoubleClick = (0, _react.useCallback)(function (event) {
+    var _props$onDoubleClick;
+    (_props$onDoubleClick = props.onDoubleClick) === null || _props$onDoubleClick === void 0 || _props$onDoubleClick.call(props, event, props);
+  }, [props]);
+
+  // Keyboard navigation
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        goToPrevious();
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        goToNext();
+        break;
+      case " ":
+        // Space key
+        event.preventDefault();
+        setIsPaused(function (prev) {
+          return !prev;
+        });
+        break;
+    }
+  }, [goToPrevious, goToNext]);
+
+  // Get navigation class based on controls prop
+  var getNavigationClass = function getNavigationClass() {
+    switch (controls) {
+      case "indicators":
+        return "hide-navs";
+      case "navs":
+        return "hide-indicators";
+      case "none":
+        return "hide-both";
+      default:
+        return "";
+    }
+  };
+
+  // Render carousel items
+  var renderCarouselItems = function renderCarouselItems() {
+    if (itemCount === 0) {
+      return __jsx("div", {
+        className: "carousel-item active"
+      }, __jsx(_Typography["default"], {
+        variant: "body1",
+        sx: {
+          textAlign: "center",
+          color: "text.secondary"
+        }
+      }, nodatamessage));
+    }
+    return items.map(function (item, index) {
+      var isActive = index === activeIndex;
+      var isPrevious = index === prevActiveIndex;
+      var getItemClasses = function getItemClasses() {
+        var classes = "carousel-item";
+        if (isActive && !isAnimating) {
+          classes += " active";
+        } else if (isAnimating) {
+          if (isActive) {
+            // New active item coming in
+            if (direction === "left") {
+              classes += " carousel-item-prev carousel-item-left";
+            } else {
+              classes += " carousel-item-next carousel-item-right";
+            }
+          } else if (isPrevious) {
+            // Previous active item going out
+            if (direction === "left") {
+              classes += " active carousel-item-right";
+            } else {
+              classes += " active carousel-item-left";
+            }
+          } else {
+            // Position other items off-screen
+            if (index < activeIndex) {
+              classes += " carousel-item-left";
+            } else {
+              classes += " carousel-item-right";
+            }
+          }
+        } else {
+          // Default positioning when not animating
+          if (isActive) {
+            classes += " active";
+          } else if (index < activeIndex) {
+            classes += " carousel-item-left";
+          } else if (index > activeIndex) {
+            classes += " carousel-item-right";
+          }
+        }
+        return classes;
+      };
+      return __jsx("div", {
+        key: index,
+        className: getItemClasses(),
+        "aria-hidden": index !== activeIndex && !isAnimating
+      }, isDynamic && render ? render(item, index) : item);
+    });
+  };
+
+  // Render navigation controls
+  var renderNavControls = function renderNavControls() {
+    if (controls === "indicators" || controls === "none") return null;
+    return __jsx(_react["default"].Fragment, null, __jsx("div", {
+      "aria-disabled": itemCount <= 1,
+      className: "left carousel-control carousel-control-prev app-anchor",
+      tabIndex: 0,
+      onClick: goToPrevious,
+      "aria-label": "".concat(activeIndex + 1, " of ").concat(itemCount),
+      name: name,
+      disabled: itemCount <= 1
+    }, __jsx("span", {
+      "aria-hidden": "true",
+      className: "icon-prev carousel-control-prev-icon"
+    })), __jsx("div", {
+      "aria-disabled": itemCount <= 1,
+      className: "right carousel-control carousel-control-next app-anchor",
+      tabIndex: 0,
+      onClick: goToNext,
+      "aria-label": "Next slide",
+      name: name,
+      disabled: itemCount <= 1
+    }, __jsx("span", {
+      "aria-hidden": "true",
+      className: "icon-next carousel-control-next-icon"
+    })));
+  };
+
+  // Render indicators
+  var renderIndicators = function renderIndicators() {
+    if (controls === "navs" || controls === "none" || itemCount <= 1) return null;
+    return __jsx("ul", {
+      className: "carousel-indicators",
+      role: "tablist"
+    }, items.map(function (_, index) {
+      return __jsx("li", {
+        key: index,
+        className: (0, _clsx["default"])({
+          active: index === activeIndex
+        }),
+        onClick: function onClick() {
+          return goToSlide(index);
+        },
+        role: "tab",
+        "aria-label": "Slide ".concat(index + 1),
+        "aria-selected": index === activeIndex
+      });
+    }));
+  };
+  return __jsx(StyledCarousel, (0, _extends2["default"])({
+    ref: carouselRef,
+    ownerState: ownerState,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, getNavigationClass(), props.className),
+    sx: props.styles,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick,
+    onDoubleClick: handleDoubleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: props.tabindex || 0,
+    role: "region",
+    "aria-label": props.arialabel || "Carousel",
+    "aria-live": animation === "auto" ? "polite" : "off"
+  }, (0, _attr.removeInvalidAttributes)(rest)), __jsx("div", {
+    className: "carousel slide",
+    style: _objectSpread({}, styles)
+  }, __jsx("div", {
+    className: "carousel-inner",
+    role: "group"
+  }, renderCarouselItems()), renderNavControls(), renderIndicators()));
+}, function (prevProps, nextProps) {
+  // Custom comparison for memoization
+  var keysToCompare = ["dataset", "animation", "animationinterval", "controls", "children", "className", "styles"];
+  return keysToCompare.every(function (key) {
+    if (key === "dataset") {
+      return JSON.stringify(prevProps[key]) === JSON.stringify(nextProps[key]);
+    }
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmCarousel.displayName = "WmCarousel";
+
+/**
+ * The WmCarousel component is used to display a series of content panes in a cycle.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/advanced-carousel--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/advanced-carousel--docs)
+ *
+ * @param props - {@link WmCarouselProps}
+ */
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmCarousel);