@shopgate/engage 7.32.0-beta.4 → 7.32.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.32.0-beta.4",
+  "version": "7.32.0-beta.5",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.32",
-    "@shopgate/pwa-common": "7.32.0-beta.4",
-    "@shopgate/pwa-common-commerce": "7.32.0-beta.4",
-    "@shopgate/pwa-core": "7.32.0-beta.4",
-    "@shopgate/pwa-ui-ios": "7.32.0-beta.4",
-    "@shopgate/pwa-ui-material": "7.32.0-beta.4",
-    "@shopgate/pwa-ui-shared": "7.32.0-beta.4",
+    "@shopgate/pwa-common": "7.32.0-beta.5",
+    "@shopgate/pwa-common-commerce": "7.32.0-beta.5",
+    "@shopgate/pwa-core": "7.32.0-beta.5",
+    "@shopgate/pwa-ui-ios": "7.32.0-beta.5",
+    "@shopgate/pwa-ui-material": "7.32.0-beta.5",
+    "@shopgate/pwa-ui-shared": "7.32.0-beta.5",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/NotFound.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The NotFoundPage component renders a "Page Not Found" view
+ * with options to navigate back or to the home page.
+ */
+declare const NotFound: () => import("react").JSX.Element;
+export default NotFound;
+//# sourceMappingURL=NotFound.d.ts.map

package/page/components/NotFound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../page/components/NotFound.tsx"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,QAAA,MAAM,QAAQ,mCA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/page/components/NotFound.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import RippleButton from '@shopgate/pwa-ui-shared/RippleButton';
 import { I18n, Typography } from '@shopgate/engage/components';
@@ -32,7 +32,6 @@ const useStyles = makeStyles()(theme => ({
 /**
  * The NotFoundPage component renders a "Page Not Found" view
  * with options to navigate back or to the home page.
- * @returns {JSX.Element}
  */
 const NotFound = () => {
   const {

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts

@@ -0,0 +1,52 @@
+export default Protector;
+export type OnImageRatioChange = (ratio: string) => any;
+export type CustomResponsiveImageProps = {
+    /**
+     * Whether to enable the parallax effect.
+     */
+    enableParallax?: boolean | undefined;
+    /**
+     * The border radius to apply to the image.
+     */
+    borderRadius?: number | undefined;
+    /**
+     * The breakpoint from which on a higher resolution image should
+     * be loaded.
+     */
+    breakpoint?: import("../../../styles/theme").Breakpoint | undefined;
+    /**
+     * Whether the image is used as a banner (full width and height of
+     * its container).
+     */
+    isBanner?: boolean | undefined;
+    /**
+     * Called when the aspect ratio of the image
+     * changes.
+     */
+    onImageRatioChange?: OnImageRatioChange | undefined;
+};
+export type Theme = import("@shopgate/engage/styles").Theme;
+export type Breakpoint = Theme["breakpoints"]["keys"][0];
+export type ImgProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export type ResponsiveImageProps = CustomResponsiveImageProps & ImgProps;
+/**
+ * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
+ * It renders a image with higher resolution on larger screens
+ * It can apply a parallax effect when scrolling.
+ *
+ * @param {ResponsiveImageProps} props The component props.
+ * @returns {JSX.Element}
+ */
+declare function Protector({ src, ...rest }: ResponsiveImageProps): JSX.Element;
+declare namespace Protector {
+    namespace propTypes {
+        let src: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let src_1: null;
+        export { src_1 as src };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ResponsiveWidgetImage.d.ts.map

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveWidgetImage.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.jsx"],"names":[],"mappings":";yCASW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;oBAeH,OAAO,yBAAyB,EAAE,KAAK;yBACvC,KAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;uBAC/B,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;mCACzC,0BAA0B,GAAG,QAAQ;AAgKnD;;;;;;;GAOG;AACH,6CAHW,oBAAoB,GAClB,GAAG,CAAC,OAAO,CASvB;;;;;;;;;;kBA1MmD,OAAO;sBACrC,YAAY"}

package/page/components/ResponsiveWidgetImage/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ResponsiveWidgetImage";
+//# sourceMappingURL=index.d.ts.map

package/page/components/ResponsiveWidgetImage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/ResponsiveWidgetImage/index.js"],"names":[],"mappings":""}

package/page/components/WidgetRichText/WidgetRichText.d.ts

@@ -0,0 +1,25 @@
+export default WidgetRichText;
+/**
+ * @param {Object} props The component props.
+ * @param {string} props.content The rich text content.
+ * @param {string} [props.className] An optional class name.
+ * @returns {JSX.Element}
+ */
+declare function WidgetRichText({ content, className, }: {
+    content: string;
+    className?: string | undefined;
+}): JSX.Element;
+declare namespace WidgetRichText {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let content: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let content_1: string;
+        export { content_1 as content };
+        let className_1: null;
+        export { className_1 as className };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=WidgetRichText.d.ts.map

package/page/components/WidgetRichText/WidgetRichText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetRichText.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetRichText/WidgetRichText.jsx"],"names":[],"mappings":";AA2DA;;;;;GAKG;AACH,yDAJG;IAAsB,OAAO,EAArB,MAAM;IACS,SAAS;CAChC,GAAU,GAAG,CAAC,OAAO,CAmBvB;;;;;;;;;;;;;sBAjFqB,YAAY"}

package/page/components/WidgetRichText/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./WidgetRichText";
+//# sourceMappingURL=index.d.ts.map

package/page/components/WidgetRichText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetRichText/index.js"],"names":[],"mappings":""}

package/page/components/WidgetVideo/WidgetVideo.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Props of the {@link WidgetVideo} component.
+ */
+export interface WidgetVideoProps {
+    /**
+     * Whether the video is used in a banner.
+     */
+    isBanner?: boolean;
+    /**
+     * The video URL.
+     */
+    url?: string | null;
+    /**
+     * Whether the video is muted.
+     */
+    muted?: boolean;
+    /**
+     * Whether the video is looping.
+     */
+    loop?: boolean;
+    /**
+     * Whether the video controls are shown.
+     */
+    controls?: boolean;
+    /**
+     * Whether the video should autoplay.
+     */
+    autoplay?: boolean;
+    /**
+     * The border radius value.
+     */
+    borderRadius?: number;
+    /**
+     * The link URL.
+     */
+    link?: string | null;
+}
+/**
+ * The WidgetVideo component is used to display a video in a widget.
+ */
+declare const WidgetVideo: ({ isBanner, url, muted, loop, controls, autoplay, borderRadius, link, }: WidgetVideoProps) => import("react").JSX.Element | null;
+export default WidgetVideo;
+//# sourceMappingURL=WidgetVideo.d.ts.map

package/page/components/WidgetVideo/WidgetVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetVideo.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetVideo/WidgetVideo.tsx"],"names":[],"mappings":"AAsDA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,GAAI,yEASlB,gBAAgB,uCAsFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/page/components/WidgetVideo/WidgetVideo.js

@@ -1,11 +1,19 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useRef } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useReduceMotion } from '@shopgate/engage/a11y/hooks';
 import { usePrevious, useAppEventOnReturnFromBackground } from '@shopgate/engage/core/hooks';
-import { ConditionalWrapper, Link } from '@shopgate/engage/components';
-import PropTypes from 'prop-types';
+import { ConditionalWrapper, Link as EngageLink } from '@shopgate/engage/components';
 import { isHttpsUrl } from "../../helpers";
+
+// `Link` is a redux-connected component whose react-redux connect() typing resolves its own props
+// (href/children) to `never`; alias it to its actual usable prop shape.
 import { jsx as _jsx } from "react/jsx-runtime";
+const Link = EngageLink;
+
+/**
+ * Style parameters for the widget video.
+ */
+
 const useStyles = makeStyles()((_theme, {
   borderRadius
 }) => ({
@@ -36,28 +44,22 @@ const useStyles = makeStyles()((_theme, {
   }
 }));
 
+/**
+ * Props of the {@link WidgetVideo} component.
+ */
+
 /**
  * The WidgetVideo component is used to display a video in a widget.
- * @param {Object} props The component props.
- * @param {boolean} props.isBanner Whether the video is used in a banner.
- * @param {string} props.url The video URL.
- * @param {boolean} props.muted Whether the video is muted.
- * @param {boolean} props.loop Whether the video is looping.
- * @param {boolean} props.controls Whether the video controls are shown.
- * @param {boolean} props.autoplay Whether the video should autoplay.
- * @param {number} props.borderRadius The border radius value.
- * @param {string} props.link The link URL.
- * @returns {JSX.Element}
  */
 const WidgetVideo = ({
-  isBanner,
-  url,
-  muted,
-  loop,
-  controls,
-  autoplay,
-  borderRadius,
-  link
+  isBanner = false,
+  url = null,
+  muted = false,
+  loop = false,
+  controls = false,
+  autoplay = false,
+  borderRadius = 0,
+  link = null
 }) => {
   const reduceMotion = useReduceMotion();
   const autoplayValue = reduceMotion ? false : isBanner || autoplay;
@@ -68,7 +70,7 @@ const WidgetVideo = ({
     borderRadius
   });
   const [hasError, setHasError] = useState(false);
-  const videoRef = React.useRef(null);
+  const videoRef = useRef(null);
   const prevUrl = usePrevious(url);
   const isValidUrl = useMemo(() => url ? isHttpsUrl(url) : false, [url]);
   const showControls = useMemo(() => {
@@ -81,25 +83,27 @@ const WidgetVideo = ({
 
   // Resume video playback when app returned from background
   useAppEventOnReturnFromBackground(() => {
-    if (!videoRef.current || reduceMotion || !autoplayValue) {
+    const video = videoRef.current;
+    if (!video || reduceMotion || !autoplayValue) {
       return;
     }
-    videoRef.current.play();
+    video.play();
   });
   useEffect(() => {
-    if (!videoRef.current) {
+    const video = videoRef.current;
+    if (!video) {
       return;
     }
     if (reduceMotion) {
       // Pause playback when reduced motion settings changed after video was rendered
-      videoRef.current.pause();
+      video.pause();
       return;
     }
     if (autoplayValue) {
-      videoRef.current.play();
+      video.play();
     } else {
-      videoRef.current.pause();
-      videoRef.current.currentTime = 0;
+      video.pause();
+      video.currentTime = 0;
     }
   }, [autoplayValue, reduceMotion]);
   useEffect(() => {
@@ -146,14 +150,4 @@ const WidgetVideo = ({
     })
   });
 };
-WidgetVideo.defaultProps = {
-  isBanner: false,
-  link: null,
-  url: null,
-  muted: false,
-  loop: false,
-  controls: false,
-  autoplay: false,
-  borderRadius: 0
-};
 export default WidgetVideo;

package/page/components/WidgetVideo/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './WidgetVideo';
+//# sourceMappingURL=index.d.ts.map

package/page/components/WidgetVideo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../page/components/WidgetVideo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/page/components/Widgets/Overlay.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from 'react';
+/**
+ * Props of the {@link Overlay} component.
+ */
+export interface OverlayProps {
+    /**
+     * The reference to the container element that holds the widgets.
+     */
+    containerRef: RefObject<HTMLDivElement>;
+}
+/**
+ * The Overlay component is used to highlight the active widget when preview mode is active.
+ * It also visualizes the margins of the widget and the borders to its sibling widgets.
+ */
+declare const Overlay: ({ containerRef, }: OverlayProps) => import("react").JSX.Element | null;
+export default Overlay;
+//# sourceMappingURL=Overlay.d.ts.map

package/page/components/Widgets/Overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EACqC,KAAK,SAAS,EACzD,MAAM,OAAO,CAAC;AA+Ff;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACzC;AAED;;;GAGG;AACH,QAAA,MAAM,OAAO,GAAI,mBAEd,YAAY,uCAmNd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/page/components/Widgets/Overlay.js

@@ -1,5 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { makeStyles, keyframes, colorToRgba } from '@shopgate/engage/styles';
 import { useRoute } from '@shopgate/engage/core/hooks';
 import { getScrollContainer } from "./helpers";
@@ -7,19 +6,15 @@ import { useWidgetPreviewEvent } from "./events";
 import { useWidgetsPreview } from "./hooks";
 
 /**
- * @typedef {Object} OverlayStyle
- * @property {number} top Style for the top position of the overlay.
- * @property {number} left Style for the left position of the overlay.
- * @property {number} width Style for the width of the overlay.
- * @property {number} height Style for the height of the overlay.
+ * Position and dimensions of a single overlay rectangle.
  */
 
 /**
- * @typedef {Object} MarginOverlayStyles
- * @property {OverlayStyle} top Style for the top margin overlay.
- * @property {OverlayStyle} left Style for the left margin overlay.
- * @property {OverlayStyle} bottom Style for the bottom margin overlay.
- * @property {OverlayStyle} right Style for the right margin overlay.
+ * Styles for the four margin overlays surrounding the active widget.
+ */
+
+/**
+ * Style parameters for the overlay.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles({
@@ -62,13 +57,13 @@ const useStyles = makeStyles({
   }
 }));
 
+/**
+ * Props of the {@link Overlay} component.
+ */
+
 /**
  * The Overlay component is used to highlight the active widget when preview mode is active.
  * It also visualizes the margins of the widget and the borders to its sibling widgets.
- * @param {Object} props The component props.
- * @param {React.Ref<HTMLDivElement>} props.containerRef The reference to the container element that
- * holds the widgets.
- * @returns {JSX.Element|null}
  */
 const Overlay = ({
   containerRef
@@ -84,17 +79,10 @@ const Overlay = ({
     activeWidget
   } = useWidgetsPreview();
 
-  /**
-   * State to hold the style for the main overlay that highlights the active widget.
-   * @type {[OverlayStyle|null, React.Dispatch<React.SetStateAction<OverlayStyle|null>>]}
-   */
+  // State to hold the style for the main overlay that highlights the active widget.
   const [mainOverlayStyle, setMainOverlayStyle] = useState(null);
 
-  /**
-   * State to hold the styles for the margin overlays that visualize the widget margins.
-   * @type {[MarginOverlayStyles|null,
-   * React.Dispatch<React.SetStateAction<MarginOverlayStyles|null>>]}
-   */
+  // State to hold the styles for the margin overlays that visualize the widget margins.
   const [marginOverlays, setMarginOverlays] = useState(null);
   const [isFlashing, setIsFlashing] = useState(false);
   const {
@@ -105,14 +93,7 @@ const Overlay = ({
     marginOverlayColor,
     isFlashing
   });
-
-  /**
-   * @type {import('react').MutableRefObject<ResizeObserver|null>}
-   */
   const resizeRef = useRef(null);
-  /**
-   * @type {import('react').MutableRefObject<MutationObserver|null>}
-   */
   const mutationRef = useRef(null);
 
   /**
@@ -128,6 +109,9 @@ const Overlay = ({
       return;
     }
     const scrollContainer = getScrollContainer();
+    if (!scrollContainer) {
+      return;
+    }
 
     // Get the computed styles of the active widget to calculate margins
     const styles = window.getComputedStyle(target);
@@ -191,33 +175,34 @@ const Overlay = ({
     if (!containerEl) return undefined;
 
     // Create a ResizeObserver to watch for size changes of children
-    resizeRef.current = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(() => {
       // Whenever any observed child resizes, update overlay
       updateOverlay();
     });
+    resizeRef.current = resizeObserver;
 
     // Observe all existing children
     Array.from(containerEl.children).forEach(child => {
       if (child.nodeType === Node.ELEMENT_NODE) {
-        resizeRef.current.observe(child);
+        resizeObserver.observe(child);
       }
     });
 
     // Create one MutationObserver on the container to watch for changes in the DOM
-    mutationRef.current = new MutationObserver(mutations => {
+    const mutationObserver = new MutationObserver(mutations => {
       for (const mutation of mutations) {
         if (mutation.type === 'childList') {
           // Handle newly added nodes - observe them for size changes
           mutation.addedNodes.forEach(node => {
             if (node.nodeType === Node.ELEMENT_NODE) {
-              resizeRef.current.observe(node);
+              resizeObserver.observe(node);
             }
           });
 
           // Handle removed nodes - remove them from observation
           mutation.removedNodes.forEach(node => {
             if (node.nodeType === Node.ELEMENT_NODE) {
-              resizeRef.current.unobserve(node);
+              resizeObserver.unobserve(node);
             }
           });
 
@@ -231,11 +216,12 @@ const Overlay = ({
         }
       }
     });
+    mutationRef.current = mutationObserver;
 
     // Start observing:
     // - childList:true → to catch added/removed children
     // - subtree:true + attributes:true → to catch any class/style changes in descendants
-    mutationRef.current.observe(containerEl, {
+    mutationObserver.observe(containerEl, {
       childList: true,
       subtree: true,
       attributes: true,

package/page/components/Widgets/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+/**
+ * Props of the {@link Tooltip} component.
+ */
+export interface TooltipProps {
+    /**
+     * The child elements to wrap.
+     */
+    children: ReactNode;
+    /**
+     * The tooltip text to display.
+     */
+    text?: string | null;
+}
+/**
+ * AI generated Tooltip component to display additional information on hover.
+ */
+declare function Tooltip({ children, text }: TooltipProps): import("react").JSX.Element;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map

package/page/components/Widgets/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACwB,KAAK,SAAS,EAC5C,MAAM,OAAO,CAAC;AAwDf;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,YAAY,+BA0IhD;AAED,eAAe,OAAO,CAAC"}

package/page/components/Widgets/Tooltip.js

@@ -1,6 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
 import { Typography } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -56,12 +55,12 @@ const useStyles = makeStyles()(theme => ({
   }
 }));
 
+/**
+ * Props of the {@link Tooltip} component.
+ */
+
 /**
  * AI generated Tooltip component to display additional information on hover.
- * @param {Object} props The component props.
- * @param {React.ReactNode} props.children The child elements to wrap.
- * @param {string} props.text The tooltip text to display.
- * @returns {JSX.Element}
  */
 function Tooltip({
   children,
@@ -80,7 +79,7 @@ function Tooltip({
     top: 0
   });
   const [arrowLeft, setArrowLeft] = useState(null);
-  const [positionState, setPositionState] = useState('top'); // 'top' or 'bottom'
+  const [positionState, setPositionState] = useState('top');
   const tooltipId = useRef(Math.random().toString(36).slice(2, 11));
 
   // Handle mounting/unmounting and trigger fade animation
@@ -196,7 +195,4 @@ function Tooltip({
     }), document.body)]
   });
 }
-Tooltip.defaultProps = {
-  text: null
-};
 export default Tooltip;

package/page/components/Widgets/Widget.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentType } from 'react';
+import { type WidgetDefinition } from './types';
+/**
+ * Props of the {@link Widget} component.
+ */
+export interface WidgetProps {
+    /**
+     * The widget component to render.
+     */
+    component: ComponentType<{
+        settings?: WidgetDefinition['widgetConfig'];
+    }>;
+    /**
+     * The widget definition data.
+     */
+    definition: WidgetDefinition;
+    /**
+     * Whether the widget is in preview mode.
+     */
+    isPreview: boolean;
+    /**
+     * Whether the widget is a legacy custom widget provided by an extension that's configured
+     * via an HTML comment inside a HTML widget.
+     */
+    isCustomLegacyWidget?: boolean;
+}
+/**
+ * The Widget component.
+ */
+declare const Widget: ({ component: Component, definition, isPreview, isCustomLegacyWidget, }: WidgetProps) => import("react").JSX.Element | null;
+export default Widget;
+//# sourceMappingURL=Widget.d.ts.map

package/page/components/Widgets/Widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../../page/components/Widgets/Widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EACkB,KAAK,aAAa,EAC1C,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAiDhD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;QAAE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;KAAE,CAAC,CAAC;IAC1E;;OAEG;IACH,UAAU,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,wEAKb,WAAW,uCAqEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/page/components/Widgets/Widget.js

@@ -1,5 +1,4 @@
-import React, { Suspense, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { Suspense, useCallback } from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { VisibilityOffIcon, TimeIcon, Loading } from '@shopgate/engage/components';
 import { usePressHandler } from '@shopgate/engage/core/hooks';
@@ -7,6 +6,10 @@ import WidgetProvider from "./WidgetProvider";
 import { dispatchWidgetPreviewEvent } from "./events";
 import { useWidgetsPreview } from "./hooks";
 import Tooltip from "./Tooltip";
+
+/**
+ * Style parameters for the widget, derived from its layout margins.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
   marginTop,
@@ -46,28 +49,17 @@ const useStyles = makeStyles()((theme, {
 }));
 
 /**
- * @typedef {import('./types').WidgetDefinition} WidgetDefinition
- */
-
-/**
- * @typedef {import('./types').ScheduledStatus} ScheduledStatus
+ * Props of the {@link Widget} component.
  */
 
 /**
  * The Widget component.
- * @param {Object} props The component props.
- * @param {React.ComponentType} props.component The widget component to render.
- * @param {WidgetDefinition} props.definition The widget definition data.
- * @param {boolean} props.isPreview Whether the widget is in preview mode.
- * @param {boolean} props.isCustomLegacyWidget Whether the widget is a legacy custom widget provided
- * by an extension that's configured via an HTML comment inside a HTML widget.
- * @returns {JSX.Element}
  */
 const Widget = ({
   component: Component,
   definition,
   isPreview,
-  isCustomLegacyWidget
+  isCustomLegacyWidget = false
 }) => {
   const {
     classes,
@@ -138,7 +130,4 @@ const Widget = ({
     })]
   });
 };
-Widget.defaultProps = {
-  isCustomLegacyWidget: false
-};
 export default Widget;