@shopgate/engage 7.32.0-beta.1 → 7.32.0-beta.11

package/components/v2/CircularProgress/CircularProgress.js

@@ -17,6 +17,7 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     thickness = 3.6,
     style,
     className,
+    classes: classesProp,
     ...other
   } = props;
   const {
@@ -26,7 +27,7 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     color
   }, {
     props: {
-      classes: props.classes
+      classes: classesProp
     }
   });
   const circleStyle = {};
@@ -40,10 +41,10 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     rootStyle.transform = 'rotate(-90deg)';
   }
   return /*#__PURE__*/_jsx("div", {
-    className: cx(classes.root, className, {
+    className: cx(classes.root, {
       [classes.indeterminate]: variant === 'indeterminate',
       [classes.determinate]: variant === 'determinate'
-    }),
+    }, 'engage__circular-progress', className),
     style: {
       width: size,
       height: size,
@@ -52,6 +53,9 @@ const CircularProgress = /*#__PURE__*/forwardRef((props, ref) => {
     },
     ref: ref,
     role: "progressbar",
+    "data-variant": variant,
+    "data-color": color,
+    "data-disable-shrink": disableShrink || undefined,
     ...rootProps,
     ...other,
     children: /*#__PURE__*/_jsx("svg", {
@@ -108,8 +112,8 @@ const useStyles = makeStyles({
   return {
     root: {
       display: 'inline-block',
-      '--sg-circular-progress-circle-color': cssColor,
-      color: 'var(--sg-circular-progress-circle-color)'
+      '--circular-progress-color': cssColor,
+      color: 'var(--circular-progress-color)'
     },
     svg: {
       display: 'block'
@@ -136,4 +140,5 @@ const useStyles = makeStyles({
     }
   };
 });
+CircularProgress.displayName = 'CircularProgress';
 export default CircularProgress;

package/core/helpers/getFullImageSource.d.ts

@@ -1,5 +1,9 @@
-export function getFullImageSource(src: string, { width, height }?: {
+export function getFullImageSource(src: string | null, { width, height }?: {
     width: number;
     height: number;
+}, settings?: {
+    quality?: number | undefined;
+    fillColor?: string | undefined;
+    fillTransparent?: boolean | undefined;
 }): string;
 //# sourceMappingURL=getFullImageSource.d.ts.map

package/core/helpers/getFullImageSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getFullImageSource.d.ts","sourceRoot":"","sources":["../../../core/helpers/getFullImageSource.js"],"names":[],"mappings":"AA+CO,wCANI,MAAM,sBAEd;IAA0B,KAAK,EAAvB,MAAM;IACY,MAAM,EAAxB,MAAM;CACd,GAAU,MAAM,CAgDlB"}
+{"version":3,"file":"getFullImageSource.d.ts","sourceRoot":"","sources":["../../../core/helpers/getFullImageSource.js"],"names":[],"mappings":"AAiEO,wCAVI,MAAM,GAAC,IAAI,sBAEnB;IAA0B,KAAK,EAAvB,MAAM;IACY,MAAM,EAAxB,MAAM;CACd,aACA;IAA0B,OAAO;IACP,SAAS;IACR,eAAe;CAC1C,GAAU,MAAM,CAyDlB"}

package/core/helpers/getFullImageSource.js

@@ -5,9 +5,18 @@ import "core-js/modules/web.url.to-json.js";
 import "core-js/modules/web.url-search-params.js";
 import { CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL } from '@shopgate/engage/core/constants';
 import { configuration } from '@shopgate/engage/core/collections';
-import { getProductImageSettings } from "../../product/helpers";
+import { DEFAULT_IMAGE_FILL_COLOR, DEFAULT_IMAGE_FILL_TRANSPARENT, DEFAULT_IMAGE_QUALITY } from '@shopgate/engage/settings/constants/imageSettings';
 import { getImageFormat } from "./getImageFormat";
 
+/**
+ * The settings applied when the caller passes none.
+ */
+const defaultSettings = {
+  quality: DEFAULT_IMAGE_QUALITY,
+  fillColor: DEFAULT_IMAGE_FILL_COLOR,
+  fillTransparent: DEFAULT_IMAGE_FILL_TRANSPARENT
+};
+
 /**
  * Regex to detect the "fill" query parameter
  */
@@ -43,29 +52,38 @@ const buildUrl = (baseUrl, params = {}) => {
 };
 
 /**
- * Returns the actual url to the image, by adding url parameters with the dimensions for img-cdn
- * @param {string} src Source to the image.
+ * Builds the url that requests an image at a given size. A src that no known image source
+ * recognizes is returned untouched.
+ * @param {string|null} src Source to the image.
  * @param {Object} dimension Dimension of the requested image.
  * @param {number} dimension.width Width in pixels.
  * @param {number} dimension.height Height in pixels.
+ * @param {Object} [settings] Image service settings, as resolved by useImageServiceSettings.
+ * @param {number} [settings.quality] Compression quality.
+ * @param {string} [settings.fillColor] Fill color as a hash free hex, not a CSS color.
+ * @param {boolean} [settings.fillTransparent] Whether transparent areas are filled too.
  * @returns {string}
  */
 export const getFullImageSource = (src, {
   width,
   height
-} = {}) => {
+} = {}, settings = {}) => {
+  const {
+    quality,
+    fillColor,
+    fillTransparent
+  } = {
+    ...defaultSettings,
+    ...settings
+  };
   if (src && src.includes('images.shopgate.services')) {
-    const {
-      fillColor,
-      quality
-    } = getProductImageSettings();
     const format = getImageFormat();
     return buildUrl(src, {
       format,
       width,
       height,
       quality,
-      fill: fillColor.replace('#', '')
+      fill: fillTransparent ? `${fillColor},1` : fillColor
     });
   }
   if (src && src.startsWith('https://img-cdn.shopgate.com') && !src.includes('?')) {
@@ -74,17 +92,14 @@ export const getFullImageSource = (src, {
       h: height,
       q: 70,
       zd: 'resize',
-      fillc: 'FFFFFF'
+      // No transparency flag here - the legacy cdn only understands a plain color.
+      fillc: fillColor
     });
   }
 
   // Check if an extension registered an external image url handler within the config collection.
   const createUrlFn = configuration.get(CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL);
   if (typeof createUrlFn === 'function') {
-    const {
-      fillColor,
-      quality
-    } = getProductImageSettings();
     const format = getImageFormat();
 
     // Invoke the handler with all relevant parameters.
@@ -92,6 +107,7 @@ export const getFullImageSource = (src, {
       width,
       height,
       fillColor,
+      fillTransparent,
       quality,
       format
     });

package/core/helpers/i18n.d.ts

@@ -40,6 +40,10 @@ export type I18nHelpers = {
      * - Get locale data by path
      */
     getPath: Function;
+    /**
+     * - Check whether a translation key resolves to a value
+     */
+    has: Function;
     /**
      * - Get locale lang code, eg de-DE
      */

package/core/helpers/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../core/helpers/i18n.js"],"names":[],"mappings":"AAyEA;;GAEG;AACH,mBAFU,WAAW,CAEM;AAMpB,oCAFM,MAAM,EAAE,CAQpB"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../core/helpers/i18n.js"],"names":[],"mappings":"AA4EA;;GAEG;AACH,mBAFU,WAAW,CAEM;AAMpB,oCAFM,MAAM,EAAE,CAQpB"}

package/core/helpers/i18n.js

@@ -13,6 +13,7 @@ import { logger } from '@shopgate/pwa-core/helpers';
  * @property {Function} number - Number translator
  * @property {Function} getSupplementalData - Get Supplemental Data
  * @property {Function} getPath - Get locale data by path
+ * @property {Function} has - Check whether a translation key resolves to a value
  * @property {Function} getLang - Get locale lang code, eg de-DE
  */
 
@@ -50,6 +51,7 @@ const I18n = () => {
       this.number = getNumberFormatter(lang);
       this.getSupplementalData = () => locales.supplementalData || {};
       this.getPath = path => get(locales, path);
+      this.has = path => this.getPath(path) !== undefined;
       this.getLang = () => lang;
       // If component decides to act accordingly this information should be exposed.
       this.ready = true;
@@ -62,6 +64,7 @@ const I18n = () => {
     number: notReadyCb,
     getSupplementalData: notReadyCb,
     getPath: notReadyCb,
+    has: notReadyCb,
     getLang: notReadyCb,
     ready: false
   };

package/core/hooks/events/appEvents.d.ts

@@ -2,82 +2,67 @@
  * Additional options for app event hooks.
  */
 export interface AppEventOptions {
-  /**
-   * When false, no listener is registered.
-   * @default true
-   */
-  enabled?: boolean;
-  /**
-   * When true, the callback is removed after first call.
-   * @default false
-   */
-  once?: boolean;
+    /**
+     * When false, no listener is registered.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * When true, the callback is removed after first call.
+     * @default false
+     */
+    once?: boolean;
 }
-
 /**
  * Extended options for return-from-background hook.
  */
 export interface ReturnFromBackgroundOptions extends AppEventOptions {
-  /**
-   * If true, requires a new background event to re-arm before firing again.
-   * If false, remains armed until disabled or unmounted.
-   * @default true
-   */
-  resetAfterFire?: boolean;
+    /**
+     * If true, requires a new background event to re-arm before firing again.
+     * If false, remains armed until disabled or unmounted.
+     * @default true
+     */
+    resetAfterFire?: boolean;
 }
-
 /**
  * Registers a callback for a given event from the Shopgate app event bus.
  *
  * Automatically unsubscribes on unmount. Can optionally run only once.
- *
  * @param name The event name to subscribe to.
  * @param callback The function to call when the event fires.
  * @param options Additional options.
  */
-export declare function useAppEvent(
-  name: string,
-  callback: () => void,
-  options?: AppEventOptions
-): void;
-
+export declare function useAppEvent(name: string, callback: () => void, options?: AppEventOptions): void;
 /**
- * Registers a callback that fires when the app will enter foreground.
- *
- * Automatically unsubscribes on unmount.
+ * Registers a callback that fires when the app will enter foreground
+ * (`applicationWillEnterForeground`).
  *
+ * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
  * @param callback The callback to run when entering foreground.
  * @param options Additional options.
  */
-export declare function useAppEventOnEnterForeground(
-  callback: () => void,
-  options?: AppEventOptions
-): void;
-
+export declare function useAppEventOnEnterForeground(callback: () => void, options?: AppEventOptions): void;
 /**
- * Registers a callback that fires when the app did enter background.
- *
- * Automatically unsubscribes on unmount.
+ * Registers a callback that fires when the app did enter background
+ * (`applicationDidEnterBackground`).
  *
+ * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
  * @param callback The callback to run when entering background.
  * @param options Additional options.
  */
-export declare function useAppEventOnDidEnterBackground(
-  callback: () => void,
-  options?: AppEventOptions
-): void;
-
+export declare function useAppEventOnDidEnterBackground(callback: () => void, options?: AppEventOptions): void;
 /**
  * Invokes a callback only after the app was first sent to background and then
- * returns to the foreground — i.e. a complete background → foreground cycle.
+ * returns to the foreground - i.e. a complete background to foreground cycle.
  *
  * Common use case: user leaves the app to open system settings and returns, so you
  * can re-check permissions or refresh data.
  *
+ * Internally, this subscribes to both background and foreground events:
+ * - Arms itself when entering background
+ * - Fires on next foreground if armed
  * @param callback The callback to run after returning from background.
  * @param options Additional options.
  */
-export declare function useAppEventOnReturnFromBackground(
-  callback: () => void,
-  options?: ReturnFromBackgroundOptions
-): void;
+export declare function useAppEventOnReturnFromBackground(callback: () => void, options?: ReturnFromBackgroundOptions): void;
+//# sourceMappingURL=appEvents.d.ts.map

package/core/hooks/events/appEvents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appEvents.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/appEvents.ts"],"names":[],"mappings":"AAOA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,eAAe;IAClE;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkBD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,GAAE,eAAoB,QAiB5F;AAED;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE,eAAe,QAE3F;AAED;;;;;;;GAOG;AACH,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,OAAO,CAAC,EAAE,eAAe,QAE9F;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iCAAiC,CAC/C,QAAQ,EAAE,MAAM,IAAI,EACpB,OAAO,GAAE,2BAAgC,QAsB1C"}

package/core/hooks/events/appEvents.js

@@ -2,15 +2,22 @@ import { useEffect, useRef } from 'react';
 import { APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND } from '@shopgate/engage/core/constants';
 import { event } from '@shopgate/engage/core/classes';
 
+/**
+ * Additional options for app event hooks.
+ */
+
+/**
+ * Extended options for return-from-background hook.
+ */
+
 /**
  * Returns a stable reference to the given callback, preserving the same function identity
  * across renders, while still always calling the latest version of the callback.
  *
  * Useful when passing callbacks into event listeners or effects so they don't re-subscribe
  * on every render but still access up-to-date props/state.
- *
- * @param {Function} fn The callback function whose latest version should be retained.
- * @returns {Function} A stable function reference that always invokes the latest callback.
+ * @param fn The callback function whose latest version should be retained.
+ * @returns A stable function reference that always invokes the latest callback.
  */
 function useStableCallback(fn) {
   const ref = useRef(fn);
@@ -18,16 +25,14 @@ function useStableCallback(fn) {
   const stable = useRef((...args) => ref.current?.(...args));
   return stable.current;
 }
+
 /**
  * Registers a callback for a given event from the Shopgate app event bus.
  *
  * Automatically unsubscribes on unmount. Can optionally run only once.
- *
- * @param {string} name The event name to subscribe to.
- * @param {Function} callback The function to call when the event fires.
- * @param {Object} [options] Additional options.
- * @param {boolean} [options.enabled=true] When false, no listener is registered.
- * @param {boolean} [options.once=false] When true, the callback is removed after first call.
+ * @param name The event name to subscribe to.
+ * @param callback The function to call when the event fires.
+ * @param options Additional options.
  */
 export function useAppEvent(name, callback, options = {}) {
   const {
@@ -37,7 +42,10 @@ export function useAppEvent(name, callback, options = {}) {
   const latest = useStableCallback(callback);
   useEffect(() => {
     if (!enabled) return undefined;
-    // eslint-disable-next-line require-jsdoc
+
+    /**
+     * Invokes the callback, and unsubscribes again when the event was only wanted once.
+     */
     const handler = () => {
       latest();
       if (once) event.removeCallback(name, handler);
@@ -52,11 +60,8 @@ export function useAppEvent(name, callback, options = {}) {
  * (`applicationWillEnterForeground`).
  *
  * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
- *
- * @param {Function} callback The callback to run when entering foreground.
- * @param {Object} [options] Additional options.
- * @param {boolean} [options.enabled=true] When false, the listener is not registered.
- * @param {boolean} [options.once=false] Remove after first call.
+ * @param callback The callback to run when entering foreground.
+ * @param options Additional options.
  */
 export function useAppEventOnEnterForeground(callback, options) {
   useAppEvent(APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, callback, options);
@@ -65,12 +70,10 @@ export function useAppEventOnEnterForeground(callback, options) {
 /**
  * Registers a callback that fires when the app did enter background
  * (`applicationDidEnterBackground`).
- ** Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
  *
- * @param {Function} callback The callback to run when entering background.
- * @param {Object} [options] Additional options.
- * @param {boolean} [options.enabled=true] When false, the listener is not registered.
- * @param {boolean} [options.once=false] Remove after first call.
+ * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
+ * @param callback The callback to run when entering background.
+ * @param options Additional options.
  */
 export function useAppEventOnDidEnterBackground(callback, options) {
   useAppEvent(APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND, callback, options);
@@ -78,7 +81,7 @@ export function useAppEventOnDidEnterBackground(callback, options) {
 
 /**
  * Invokes a callback only after the app was first sent to background and then
- * returns to the foreground — i.e. a complete background → foreground cycle.
+ * returns to the foreground - i.e. a complete background to foreground cycle.
  *
  * Common use case: user leaves the app to open system settings and returns, so you
  * can re-check permissions or refresh data.
@@ -86,14 +89,8 @@ export function useAppEventOnDidEnterBackground(callback, options) {
  * Internally, this subscribes to both background and foreground events:
  * - Arms itself when entering background
  * - Fires on next foreground if armed
- *
- * @param {Function} callback The callback to run after returning from background.
- * @param {Object} [options] Additional options.
- * @param {boolean} [options.enabled=true] When false, no listener behavior is active.
- * @param {boolean} [options.once=false] When true, callback fires only for the first cycle.
- * @param {boolean} [options.resetAfterFire=true]
- *        If true, requires a new background event to re-arm before firing again.
- *        If false, remains armed until disabled or unmounted.
+ * @param callback The callback to run after returning from background.
+ * @param options Additional options.
  */
 export function useAppEventOnReturnFromBackground(callback, options = {}) {
   const {

package/core/hooks/events/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./appEvents";
-export { default as usePressHandler } from "./usePressHandler";
-export { default as useLongPress } from "./useLongPress";
-export { default as useScrollDirectionChange } from "./useScrollDirectionChange";
+export * from './appEvents';
+export { default as usePressHandler } from './usePressHandler';
+export { default as useLongPress } from './useLongPress';
+export { default as useScrollDirectionChange } from './useScrollDirectionChange';
 //# sourceMappingURL=index.d.ts.map

package/core/hooks/events/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/core/hooks/events/useLongPress.d.ts

@@ -1,68 +1,65 @@
-import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
-
+import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
+/**
+ * The events a long press interaction can originate from. The handlers below are spread onto an
+ * element, so these are React's synthetic events rather than the DOM ones.
+ */
+export type LongPressEvent = ReactMouseEvent | ReactTouchEvent;
+/**
+ * Event handlers to spread onto the element that should react to a long press.
+ */
 export interface LongPressHandlers {
-  /**
-   * Attach to `onMouseDown` event.
-   */
-  onMouseDown: (e: ReactMouseEvent | TouchEvent) => void;
-
-  /**
-   * Attach to `onTouchStart` event.
-   */
-  onTouchStart: (e: ReactTouchEvent | TouchEvent) => void;
-
-  /**
-   * Attach to `onMouseUp` event.
-   */
-  onMouseUp: (e: ReactMouseEvent | TouchEvent) => void;
-
-  /**
-   * Attach to `onMouseLeave` event.
-   */
-  onMouseLeave: (e: ReactMouseEvent | TouchEvent) => void;
-
-  /**
-   * Attach to `onTouchEnd` event.
-   */
-  onTouchEnd: (e: ReactTouchEvent | TouchEvent) => void;
-
-  /**
-   * Attach to `onContextMenu` event to prevent the native context menu.
-   */
-  onContextMenu: (e: MouseEvent) => void;
+    /**
+     * Attach to `onMouseDown` event.
+     */
+    onMouseDown: (e: LongPressEvent) => void;
+    /**
+     * Attach to `onTouchStart` event.
+     */
+    onTouchStart: (e: LongPressEvent) => void;
+    /**
+     * Attach to `onMouseUp` event.
+     */
+    onMouseUp: (e: LongPressEvent) => void;
+    /**
+     * Attach to `onMouseLeave` event.
+     */
+    onMouseLeave: (e: LongPressEvent) => void;
+    /**
+     * Attach to `onTouchEnd` event.
+     */
+    onTouchEnd: (e: LongPressEvent) => void;
+    /**
+     * Attach to `onContextMenu` event to prevent the native context menu.
+     */
+    onContextMenu: (e: ReactMouseEvent) => void;
 }
-
+/**
+ * Configuration and lifecycle callbacks for a long press interaction.
+ */
 export interface UseLongPressOptions {
-  /**
-   * Duration in milliseconds to trigger long press.
-   * @default 1000
-   */
-  threshold?: number;
-
-  /**
-   * Called when the press starts.
-   */
-  onStart?: (e: ReactMouseEvent | ReactTouchEvent) => void;
-
-  /**
-   * Called when the long press completes.
-   */
-  onFinish?: (e: ReactMouseEvent | ReactTouchEvent) => void;
-
-  /**
-   * Called when the press is cancelled before the threshold.
-   */
-  onCancel?: (e: ReactMouseEvent | ReactTouchEvent) => void;
+    /**
+     * Duration in milliseconds to trigger long press.
+     * @default 1000
+     */
+    threshold?: number;
+    /**
+     * Called when the press starts.
+     */
+    onStart?: (e: LongPressEvent) => void;
+    /**
+     * Called when the long press completes.
+     */
+    onFinish?: (e: LongPressEvent) => void;
+    /**
+     * Called when the press is cancelled before the threshold.
+     */
+    onCancel?: (e: LongPressEvent) => void;
 }
-
 /**
  * Custom hook to handle long press interactions.
- *
  * @param callback Function to call on long press.
  * @param options Configuration and lifecycle callbacks.
  * @returns An object containing event handlers for mouse and touch events.
  */
-export default function useLongPress(
-  callback: (e: ReactMouseEvent | ReactTouchEvent) => void,
-  options?: UseLongPressOptions
-): LongPressHandlers;
+export default function useLongPress(callback: (e: LongPressEvent) => void, options?: UseLongPressOptions): LongPressHandlers;
+//# sourceMappingURL=useLongPress.d.ts.map

package/core/hooks/events/useLongPress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongPress.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/useLongPress.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAE1F;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,eAAe,CAAC;AAE/D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,WAAW,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,UAAU,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7C;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxC;AAUD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAClC,QAAQ,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,EACrC,OAAO,GAAE,mBAAwB,GAChC,iBAAiB,CA4CnB"}

package/core/hooks/events/useLongPress.js

@@ -1,32 +1,39 @@
-// @ts-check
 import { useRef, useCallback } from 'react';
 
-/** @typedef {import('./useLongPress').LongPressHandlers} LongPressHandlers */
-/** @typedef {import('./useLongPress').UseLongPressOptions} UseLongPressOptions */
+/**
+ * The events a long press interaction can originate from. The handlers below are spread onto an
+ * element, so these are React's synthetic events rather than the DOM ones.
+ */
+
+/**
+ * Event handlers to spread onto the element that should react to a long press.
+ */
+
+/**
+ * Configuration and lifecycle callbacks for a long press interaction.
+ */
 
 /**
  * Prevents the default context menu from appearing on long press.
- * @param {MouseEvent} e The event object.
+ * @param e The event object.
  */
 const preventContextMenu = e => {
   e.preventDefault();
 };
 
-// eslint-disable-next-line valid-jsdoc
 /**
  * Custom hook to handle long press interactions.
- *
- * @param {(e: Event) => void} callback - Function to call on long press.
- * @param {UseLongPressOptions} [options={}] - Configuration and lifecycle callbacks.
- * @returns {LongPressHandlers} An object containing event handlers for mouse and touch events.
+ * @param callback Function to call on long press.
+ * @param options Configuration and lifecycle callbacks.
+ * @returns An object containing event handlers for mouse and touch events.
  */
-export default function useLongPress(callback, {
-  threshold = 1000,
-  onStart,
-  onFinish,
-  onCancel
-} = {}) {
-  /** @type {import('react').MutableRefObject<number | undefined>} */
+export default function useLongPress(callback, options = {}) {
+  const {
+    threshold = 1000,
+    onStart,
+    onFinish,
+    onCancel
+  } = options;
   const timerRef = useRef(undefined);
   const triggeredRef = useRef(false);
   const start = useCallback(e => {