@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

package/components/advanced/carousel/index.js

@@ -1,37 +1,55 @@
-"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;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import clsx from "clsx";
+import isPlainObject from "lodash-es/isPlainObject";
+import withBaseWrapper from "../../../higherOrder/withBaseWrapper";
+import { removeInvalidAttributes } from "../../../utils/attr";
+const DEFAULT_CLASS = "app-carousel carousel";
+const StyledCarousel = styled(Box, {
+  shouldForwardProp: (prop) => !["ownerState"].includes(prop)
+})(({ ownerState }) => {
+  const { height, width, isAnimating } = ownerState;
   return {
     position: "relative",
     width: width || "100%",
@@ -121,347 +139,321 @@ var StyledCarousel = (0, _styles.styled)(_Box["default"], {
     }
   };
 });
-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";
-        }
+const WmCarousel = memo(
+  (props) => {
+    const _a = props, {
+      name,
+      animation = "auto",
+      animationinterval = 3,
+      controls = "both",
+      nodatamessage = "No Data Found",
+      height = "480px",
+      width = "100%",
+      children,
+      className,
+      styles,
+      render,
+      onChange
+    } = _a, rest = __objRest(_a, [
+      "name",
+      "animation",
+      "animationinterval",
+      "controls",
+      "nodatamessage",
+      "height",
+      "width",
+      "children",
+      "className",
+      "styles",
+      "render",
+      "onChange"
+    ]);
+    let dataset = props.dataset || [];
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [isPaused, setIsPaused] = useState(false);
+    const [direction, setDirection] = useState("right");
+    const [prevActiveIndex, setPrevActiveIndex] = useState(0);
+    const intervalRef = useRef(void 0);
+    const carouselRef = useRef(null);
+    dataset = isPlainObject(dataset) ? [dataset] : dataset;
+    const isDynamic = dataset && dataset.length > 0;
+    const items = isDynamic ? dataset : React.Children.toArray(children || []);
+    const itemCount = items.length;
+    const ownerState = useMemo(
+      () => ({
+        height,
+        width,
+        isAnimating
+      }),
+      [height, width, isAnimating]
+    );
+    const startAutoPlay = useCallback(() => {
+      if (animation === "auto" && animationinterval > 0 && itemCount > 1) {
+        intervalRef.current = setInterval(() => {
+          if (!isPaused) {
+            setActiveIndex((prevIndex) => {
+              const newIndex = (prevIndex + 1) % itemCount;
+              setDirection("right");
+              setPrevActiveIndex(prevIndex);
+              setIsAnimating(true);
+              setTimeout(() => setIsAnimating(false), 600);
+              return newIndex;
+            });
+          }
+        }, animationinterval * 500);
       }
-      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";
+    }, [animation, animationinterval, itemCount, isPaused]);
+    const stopAutoPlay = useCallback(() => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = void 0;
+      }
+    }, []);
+    useEffect(() => {
+      if (animation === "auto" && !isPaused) {
+        startAutoPlay();
+      } else {
+        stopAutoPlay();
+      }
+      return () => stopAutoPlay();
+    }, [animation, startAutoPlay, stopAutoPlay, isPaused]);
+    const goToSlide = useCallback(
+      (index, slideDirection) => {
+        if (index >= 0 && index < itemCount && index !== activeIndex) {
+          setIsAnimating(true);
+          const oldIndex = activeIndex;
+          let dir = slideDirection;
+          if (!dir) {
+            if (index === 0 && activeIndex === itemCount - 1) {
+              dir = "right";
+            } else if (index === itemCount - 1 && activeIndex === 0) {
+              dir = "left";
+            } else if (index > activeIndex) {
+              dir = "right";
             } else {
-              classes += " carousel-item-next carousel-item-right";
+              dir = "left";
             }
-          } else if (isPrevious) {
-            // Previous active item going out
-            if (direction === "left") {
-              classes += " active carousel-item-right";
+          }
+          setDirection(dir);
+          setPrevActiveIndex(activeIndex);
+          setActiveIndex(index);
+          onChange == null ? void 0 : onChange(null, props, index, oldIndex);
+          setTimeout(() => setIsAnimating(false), 600);
+        }
+      },
+      [activeIndex, itemCount, onChange, props]
+    );
+    const goToPrevious = useCallback(() => {
+      const newIndex = activeIndex === 0 ? itemCount - 1 : activeIndex - 1;
+      goToSlide(newIndex, "left");
+    }, [activeIndex, itemCount, goToSlide]);
+    const goToNext = useCallback(() => {
+      const newIndex = (activeIndex + 1) % itemCount;
+      goToSlide(newIndex, "right");
+    }, [activeIndex, itemCount, goToSlide]);
+    const handleMouseEnter = useCallback(
+      (event) => {
+        var _a2;
+        setIsPaused(true);
+        (_a2 = props.onMouseEnter) == null ? void 0 : _a2.call(props, event, props);
+      },
+      [props]
+    );
+    const handleMouseLeave = useCallback(
+      (event) => {
+        var _a2;
+        setIsPaused(false);
+        (_a2 = props.onMouseLeave) == null ? void 0 : _a2.call(props, event, props);
+      },
+      [props]
+    );
+    const handleClick = useCallback(
+      (event) => {
+        var _a2;
+        (_a2 = props.onClick) == null ? void 0 : _a2.call(props, event, props);
+      },
+      [props]
+    );
+    const handleDoubleClick = useCallback(
+      (event) => {
+        var _a2;
+        (_a2 = props.onDoubleClick) == null ? void 0 : _a2.call(props, event, props);
+      },
+      [props]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        switch (event.key) {
+          case "ArrowLeft":
+            event.preventDefault();
+            goToPrevious();
+            break;
+          case "ArrowRight":
+            event.preventDefault();
+            goToNext();
+            break;
+          case " ":
+            event.preventDefault();
+            setIsPaused((prev) => !prev);
+            break;
+        }
+      },
+      [goToPrevious, goToNext]
+    );
+    const getNavigationClass = () => {
+      switch (controls) {
+        case "indicators":
+          return "hide-navs";
+        case "navs":
+          return "hide-indicators";
+        case "none":
+          return "hide-both";
+        default:
+          return "";
+      }
+    };
+    const renderCarouselItems = () => {
+      if (itemCount === 0) {
+        return /* @__PURE__ */ jsx("div", { className: "carousel-item active", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { textAlign: "center", color: "text.secondary" }, children: nodatamessage }) });
+      }
+      return items.map((item, index) => {
+        const isActive = index === activeIndex;
+        const isPrevious = index === prevActiveIndex;
+        const getItemClasses = () => {
+          let classes = "carousel-item";
+          if (isActive && !isAnimating) {
+            classes += " active";
+          } else if (isAnimating) {
+            if (isActive) {
+              if (direction === "left") {
+                classes += " carousel-item-prev carousel-item-left";
+              } else {
+                classes += " carousel-item-next carousel-item-right";
+              }
+            } else if (isPrevious) {
+              if (direction === "left") {
+                classes += " active carousel-item-right";
+              } else {
+                classes += " active carousel-item-left";
+              }
             } else {
-              classes += " active carousel-item-left";
+              if (index < activeIndex) {
+                classes += " carousel-item-left";
+              } else {
+                classes += " carousel-item-right";
+              }
             }
           } else {
-            // Position other items off-screen
-            if (index < activeIndex) {
+            if (isActive) {
+              classes += " active";
+            } else if (index < activeIndex) {
               classes += " carousel-item-left";
-            } else {
+            } else if (index > activeIndex) {
               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 classes;
+        };
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getItemClasses(),
+            "aria-hidden": index !== activeIndex && !isAnimating,
+            children: isDynamic && render ? render(item, index) : item
+          },
+          index
+        );
       });
-    }));
-  };
-  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];
-  });
-});
+    };
+    const renderNavControls = () => {
+      if (controls === "indicators" || controls === "none") return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          __spreadProps(__spreadValues(__spreadValues({
+            "aria-disabled": itemCount <= 1,
+            className: "left carousel-control carousel-control-prev app-anchor",
+            tabIndex: 0,
+            onClick: goToPrevious,
+            "aria-label": `${activeIndex + 1} of ${itemCount}`
+          }, { name }), { disabled: itemCount <= 1 }), {
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "icon-prev carousel-control-prev-icon" })
+          })
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          __spreadProps(__spreadValues(__spreadValues({
+            "aria-disabled": itemCount <= 1,
+            className: "right carousel-control carousel-control-next app-anchor",
+            tabIndex: 0,
+            onClick: goToNext,
+            "aria-label": "Next slide"
+          }, { name }), { disabled: itemCount <= 1 }), {
+            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "icon-next carousel-control-next-icon" })
+          })
+        )
+      ] });
+    };
+    const renderIndicators = () => {
+      if (controls === "navs" || controls === "none" || itemCount <= 1) return null;
+      return /* @__PURE__ */ jsx("ul", { className: "carousel-indicators", role: "tablist", children: items.map((_, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: clsx({ active: index === activeIndex }),
+          onClick: () => goToSlide(index),
+          role: "tab",
+          "aria-label": `Slide ${index + 1}`,
+          "aria-selected": index === activeIndex
+        },
+        index
+      )) });
+    };
+    return /* @__PURE__ */ jsx(
+      StyledCarousel,
+      __spreadProps(__spreadValues({
+        ref: carouselRef,
+        ownerState,
+        className: clsx(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"
+      }, removeInvalidAttributes(rest)), {
+        children: /* @__PURE__ */ jsxs("div", { className: "carousel slide", style: __spreadValues({}, styles), children: [
+          /* @__PURE__ */ jsx("div", { className: "carousel-inner", role: "group", children: renderCarouselItems() }),
+          renderNavControls(),
+          renderIndicators()
+        ] })
+      })
+    );
+  },
+  (prevProps, nextProps) => {
+    const keysToCompare = [
+      "dataset",
+      "animation",
+      "animationinterval",
+      "controls",
+      "children",
+      "className",
+      "styles"
+    ];
+    return keysToCompare.every((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);
+var carousel_default = withBaseWrapper(WmCarousel);
+export {
+  carousel_default as default
+};