@shopgate/engage 7.32.0-beta.10 → 7.32.0-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/core/hooks/events/appEvents.d.ts +31 -46
  2. package/core/hooks/events/appEvents.d.ts.map +1 -0
  3. package/core/hooks/events/appEvents.js +26 -29
  4. package/core/hooks/events/index.d.ts +4 -4
  5. package/core/hooks/events/index.d.ts.map +1 -1
  6. package/core/hooks/events/useLongPress.d.ts +55 -58
  7. package/core/hooks/events/useLongPress.d.ts.map +1 -0
  8. package/core/hooks/events/useLongPress.js +23 -16
  9. package/core/hooks/events/usePressHandler.d.ts +32 -21
  10. package/core/hooks/events/usePressHandler.d.ts.map +1 -1
  11. package/core/hooks/events/usePressHandler.js +12 -10
  12. package/core/hooks/events/useScrollDirectionChange.d.ts +72 -61
  13. package/core/hooks/events/useScrollDirectionChange.d.ts.map +1 -0
  14. package/core/hooks/events/useScrollDirectionChange.js +36 -43
  15. package/development/action-creators/index.d.ts +3 -0
  16. package/development/action-creators/index.d.ts.map +1 -0
  17. package/development/action-creators/settings.d.ts +45 -0
  18. package/development/action-creators/settings.d.ts.map +1 -0
  19. package/development/action-creators/settings.js +21 -10
  20. package/development/action-creators/storage.d.ts +17 -0
  21. package/development/action-creators/storage.d.ts.map +1 -0
  22. package/development/action-creators/storage.js +7 -4
  23. package/development/components/ClientInformation/ClientInformation.d.ts +6 -0
  24. package/development/components/ClientInformation/ClientInformation.d.ts.map +1 -0
  25. package/development/components/ClientInformation/ClientInformation.js +7 -4
  26. package/development/components/ClientInformation/actions.d.ts +6 -0
  27. package/development/components/ClientInformation/actions.d.ts.map +1 -0
  28. package/development/components/ClientInformation/actions.js +1 -1
  29. package/development/components/ClientInformation/index.d.ts +2 -0
  30. package/development/components/ClientInformation/index.d.ts.map +1 -0
  31. package/development/components/DevelopmentSettings/DevelopmentSettings.d.ts +16 -0
  32. package/development/components/DevelopmentSettings/DevelopmentSettings.d.ts.map +1 -0
  33. package/development/components/DevelopmentSettings/DevelopmentSettings.js +41 -28
  34. package/development/components/DevelopmentSettings/index.d.ts +2 -0
  35. package/development/components/DevelopmentSettings/index.d.ts.map +1 -0
  36. package/development/components/DevelopmentTools/DevelopmentTools.d.ts +10 -0
  37. package/development/components/DevelopmentTools/DevelopmentTools.d.ts.map +1 -0
  38. package/development/components/DevelopmentTools/DevelopmentTools.js +8 -8
  39. package/development/components/DevelopmentTools/Shortcuts.d.ts +6 -0
  40. package/development/components/DevelopmentTools/Shortcuts.d.ts.map +1 -0
  41. package/development/components/DevelopmentTools/Shortcuts.js +0 -1
  42. package/development/components/DevelopmentTools/hooks.d.ts +8 -0
  43. package/development/components/DevelopmentTools/hooks.d.ts.map +1 -0
  44. package/development/components/DevelopmentTools/hooks.js +2 -3
  45. package/development/components/DevelopmentTools/index.d.ts +2 -0
  46. package/development/components/DevelopmentTools/index.d.ts.map +1 -0
  47. package/development/components/SimulatedInsets/SimulatedInsetBottom.d.ts +7 -0
  48. package/development/components/SimulatedInsets/SimulatedInsetBottom.d.ts.map +1 -0
  49. package/development/components/SimulatedInsets/SimulatedInsetBottom.js +1 -6
  50. package/development/components/SimulatedInsets/SimulatedInsetTop.d.ts +7 -0
  51. package/development/components/SimulatedInsets/SimulatedInsetTop.d.ts.map +1 -0
  52. package/development/components/SimulatedInsets/SimulatedInsetTop.js +2 -7
  53. package/development/components/SimulatedInsets/SimulatedInsets.d.ts +13 -0
  54. package/development/components/SimulatedInsets/SimulatedInsets.d.ts.map +1 -0
  55. package/development/components/SimulatedInsets/SimulatedInsets.js +2 -7
  56. package/development/components/SimulatedInsets/index.d.ts +2 -0
  57. package/development/components/SimulatedInsets/index.d.ts.map +1 -0
  58. package/development/components/SimulatedInsets/types.d.ts +15 -0
  59. package/development/components/SimulatedInsets/types.d.ts.map +1 -0
  60. package/development/components/SimulatedInsets/types.js +1 -0
  61. package/development/components/index.d.ts +3 -0
  62. package/development/components/index.d.ts.map +1 -0
  63. package/development/constants/actionTypes.d.ts +6 -0
  64. package/development/constants/actionTypes.d.ts.map +1 -0
  65. package/development/constants/actionTypes.js +2 -1
  66. package/development/constants/index.d.ts +2 -0
  67. package/development/constants/index.d.ts.map +1 -0
  68. package/development/reducers/index.d.ts +24 -0
  69. package/development/reducers/index.d.ts.map +1 -0
  70. package/development/reducers/settings.d.ts +17 -0
  71. package/development/reducers/settings.d.ts.map +1 -0
  72. package/development/reducers/settings.js +48 -35
  73. package/development/reducers/storage.d.ts +17 -0
  74. package/development/reducers/storage.d.ts.map +1 -0
  75. package/development/reducers/storage.js +24 -24
  76. package/development/selectors/index.d.ts +3 -0
  77. package/development/selectors/index.d.ts.map +1 -0
  78. package/development/selectors/settings.d.ts +52 -0
  79. package/development/selectors/settings.d.ts.map +1 -0
  80. package/development/selectors/settings.js +21 -11
  81. package/development/selectors/storage.d.ts +10 -0
  82. package/development/selectors/storage.d.ts.map +1 -0
  83. package/development/selectors/storage.js +6 -18
  84. package/development/streams/index.d.ts +2 -0
  85. package/development/streams/index.d.ts.map +1 -0
  86. package/development/streams/insets.d.ts +8 -0
  87. package/development/streams/insets.d.ts.map +1 -0
  88. package/development/streams/insets.js +1 -3
  89. package/development/subscriptions/index.d.ts +15 -0
  90. package/development/subscriptions/index.d.ts.map +1 -0
  91. package/development/subscriptions/index.js +6 -2
  92. package/development/types/development.d.ts +68 -0
  93. package/development/types/development.d.ts.map +1 -0
  94. package/development/types/development.js +1 -0
  95. package/development/types/index.d.ts +2 -0
  96. package/development/types/index.d.ts.map +1 -0
  97. package/development/types/index.js +1 -0
  98. package/package.json +7 -7
  99. package/page/components/Widgets/Widget.d.ts.map +1 -1
  100. package/page/components/Widgets/Widget.js +12 -15
  101. package/page/components/Widgets/WidgetContext.d.ts +3 -3
  102. package/page/components/Widgets/WidgetContext.d.ts.map +1 -1
  103. package/page/components/Widgets/WidgetProvider.d.ts +6 -2
  104. package/page/components/Widgets/WidgetProvider.d.ts.map +1 -1
  105. package/page/components/Widgets/WidgetProvider.js +3 -3
  106. package/page/components/Widgets/constants.d.ts +13 -0
  107. package/page/components/Widgets/constants.d.ts.map +1 -1
  108. package/page/components/Widgets/constants.js +21 -1
  109. package/page/components/Widgets/helpers.d.ts +19 -0
  110. package/page/components/Widgets/helpers.d.ts.map +1 -1
  111. package/page/components/Widgets/helpers.js +50 -0
  112. package/page/components/Widgets/types.d.ts +31 -5
  113. package/page/components/Widgets/types.d.ts.map +1 -1
  114. package/page/widget.config.schema.json +54 -0
  115. package/page/widgets/HeroBanner/config.json +6 -0
  116. package/page/widgets/Image/config.json +6 -0
  117. package/page/widgets/ImageRow/config.json +6 -0
  118. package/page/widgets/ImageSlider/config.json +6 -0
  119. package/page/widgets/ImageSlider/hooks.js +4 -2
  120. package/page/widgets/README.md +92 -0
  121. package/page/widgets/Video/config.json +6 -0
  122. package/settings/reducers/appSettings.d.ts.map +1 -1
  123. package/settings/reducers/appSettings.js +24 -1
  124. package/settings/selectors/appSettings.d.ts +8 -0
  125. package/settings/selectors/appSettings.d.ts.map +1 -1
  126. package/settings/selectors/appSettings.js +5 -0
  127. package/settings/types/appSettings.d.ts +35 -0
  128. package/settings/types/appSettings.d.ts.map +1 -1
  129. package/settings/types/appSettings.js +9 -0
  130. package/styles/theme/createDefaultThemeOptions/index.d.ts.map +1 -1
  131. package/styles/theme/createDefaultThemeOptions/index.js +5 -0
  132. package/styles/theme/providers/ThemeProvider.d.ts.map +1 -1
  133. package/styles/theme/providers/ThemeProvider.js +11 -4
@@ -2,82 +2,67 @@
2
2
  * Additional options for app event hooks.
3
3
  */
4
4
  export interface AppEventOptions {
5
- /**
6
- * When false, no listener is registered.
7
- * @default true
8
- */
9
- enabled?: boolean;
10
- /**
11
- * When true, the callback is removed after first call.
12
- * @default false
13
- */
14
- once?: boolean;
5
+ /**
6
+ * When false, no listener is registered.
7
+ * @default true
8
+ */
9
+ enabled?: boolean;
10
+ /**
11
+ * When true, the callback is removed after first call.
12
+ * @default false
13
+ */
14
+ once?: boolean;
15
15
  }
16
-
17
16
  /**
18
17
  * Extended options for return-from-background hook.
19
18
  */
20
19
  export interface ReturnFromBackgroundOptions extends AppEventOptions {
21
- /**
22
- * If true, requires a new background event to re-arm before firing again.
23
- * If false, remains armed until disabled or unmounted.
24
- * @default true
25
- */
26
- resetAfterFire?: boolean;
20
+ /**
21
+ * If true, requires a new background event to re-arm before firing again.
22
+ * If false, remains armed until disabled or unmounted.
23
+ * @default true
24
+ */
25
+ resetAfterFire?: boolean;
27
26
  }
28
-
29
27
  /**
30
28
  * Registers a callback for a given event from the Shopgate app event bus.
31
29
  *
32
30
  * Automatically unsubscribes on unmount. Can optionally run only once.
33
- *
34
31
  * @param name The event name to subscribe to.
35
32
  * @param callback The function to call when the event fires.
36
33
  * @param options Additional options.
37
34
  */
38
- export declare function useAppEvent(
39
- name: string,
40
- callback: () => void,
41
- options?: AppEventOptions
42
- ): void;
43
-
35
+ export declare function useAppEvent(name: string, callback: () => void, options?: AppEventOptions): void;
44
36
  /**
45
- * Registers a callback that fires when the app will enter foreground.
46
- *
47
- * Automatically unsubscribes on unmount.
37
+ * Registers a callback that fires when the app will enter foreground
38
+ * (`applicationWillEnterForeground`).
48
39
  *
40
+ * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
49
41
  * @param callback The callback to run when entering foreground.
50
42
  * @param options Additional options.
51
43
  */
52
- export declare function useAppEventOnEnterForeground(
53
- callback: () => void,
54
- options?: AppEventOptions
55
- ): void;
56
-
44
+ export declare function useAppEventOnEnterForeground(callback: () => void, options?: AppEventOptions): void;
57
45
  /**
58
- * Registers a callback that fires when the app did enter background.
59
- *
60
- * Automatically unsubscribes on unmount.
46
+ * Registers a callback that fires when the app did enter background
47
+ * (`applicationDidEnterBackground`).
61
48
  *
49
+ * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
62
50
  * @param callback The callback to run when entering background.
63
51
  * @param options Additional options.
64
52
  */
65
- export declare function useAppEventOnDidEnterBackground(
66
- callback: () => void,
67
- options?: AppEventOptions
68
- ): void;
69
-
53
+ export declare function useAppEventOnDidEnterBackground(callback: () => void, options?: AppEventOptions): void;
70
54
  /**
71
55
  * Invokes a callback only after the app was first sent to background and then
72
- * returns to the foreground i.e. a complete background foreground cycle.
56
+ * returns to the foreground - i.e. a complete background to foreground cycle.
73
57
  *
74
58
  * Common use case: user leaves the app to open system settings and returns, so you
75
59
  * can re-check permissions or refresh data.
76
60
  *
61
+ * Internally, this subscribes to both background and foreground events:
62
+ * - Arms itself when entering background
63
+ * - Fires on next foreground if armed
77
64
  * @param callback The callback to run after returning from background.
78
65
  * @param options Additional options.
79
66
  */
80
- export declare function useAppEventOnReturnFromBackground(
81
- callback: () => void,
82
- options?: ReturnFromBackgroundOptions
83
- ): void;
67
+ export declare function useAppEventOnReturnFromBackground(callback: () => void, options?: ReturnFromBackgroundOptions): void;
68
+ //# sourceMappingURL=appEvents.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -2,15 +2,22 @@ import { useEffect, useRef } from 'react';
2
2
  import { APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND } from '@shopgate/engage/core/constants';
3
3
  import { event } from '@shopgate/engage/core/classes';
4
4
 
5
+ /**
6
+ * Additional options for app event hooks.
7
+ */
8
+
9
+ /**
10
+ * Extended options for return-from-background hook.
11
+ */
12
+
5
13
  /**
6
14
  * Returns a stable reference to the given callback, preserving the same function identity
7
15
  * across renders, while still always calling the latest version of the callback.
8
16
  *
9
17
  * Useful when passing callbacks into event listeners or effects so they don't re-subscribe
10
18
  * on every render but still access up-to-date props/state.
11
- *
12
- * @param {Function} fn The callback function whose latest version should be retained.
13
- * @returns {Function} A stable function reference that always invokes the latest callback.
19
+ * @param fn The callback function whose latest version should be retained.
20
+ * @returns A stable function reference that always invokes the latest callback.
14
21
  */
15
22
  function useStableCallback(fn) {
16
23
  const ref = useRef(fn);
@@ -18,16 +25,14 @@ function useStableCallback(fn) {
18
25
  const stable = useRef((...args) => ref.current?.(...args));
19
26
  return stable.current;
20
27
  }
28
+
21
29
  /**
22
30
  * Registers a callback for a given event from the Shopgate app event bus.
23
31
  *
24
32
  * Automatically unsubscribes on unmount. Can optionally run only once.
25
- *
26
- * @param {string} name The event name to subscribe to.
27
- * @param {Function} callback The function to call when the event fires.
28
- * @param {Object} [options] Additional options.
29
- * @param {boolean} [options.enabled=true] When false, no listener is registered.
30
- * @param {boolean} [options.once=false] When true, the callback is removed after first call.
33
+ * @param name The event name to subscribe to.
34
+ * @param callback The function to call when the event fires.
35
+ * @param options Additional options.
31
36
  */
32
37
  export function useAppEvent(name, callback, options = {}) {
33
38
  const {
@@ -37,7 +42,10 @@ export function useAppEvent(name, callback, options = {}) {
37
42
  const latest = useStableCallback(callback);
38
43
  useEffect(() => {
39
44
  if (!enabled) return undefined;
40
- // eslint-disable-next-line require-jsdoc
45
+
46
+ /**
47
+ * Invokes the callback, and unsubscribes again when the event was only wanted once.
48
+ */
41
49
  const handler = () => {
42
50
  latest();
43
51
  if (once) event.removeCallback(name, handler);
@@ -52,11 +60,8 @@ export function useAppEvent(name, callback, options = {}) {
52
60
  * (`applicationWillEnterForeground`).
53
61
  *
54
62
  * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
55
- *
56
- * @param {Function} callback The callback to run when entering foreground.
57
- * @param {Object} [options] Additional options.
58
- * @param {boolean} [options.enabled=true] When false, the listener is not registered.
59
- * @param {boolean} [options.once=false] Remove after first call.
63
+ * @param callback The callback to run when entering foreground.
64
+ * @param options Additional options.
60
65
  */
61
66
  export function useAppEventOnEnterForeground(callback, options) {
62
67
  useAppEvent(APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, callback, options);
@@ -65,12 +70,10 @@ export function useAppEventOnEnterForeground(callback, options) {
65
70
  /**
66
71
  * Registers a callback that fires when the app did enter background
67
72
  * (`applicationDidEnterBackground`).
68
- ** Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
69
73
  *
70
- * @param {Function} callback The callback to run when entering background.
71
- * @param {Object} [options] Additional options.
72
- * @param {boolean} [options.enabled=true] When false, the listener is not registered.
73
- * @param {boolean} [options.once=false] Remove after first call.
74
+ * Automatically unsubscribes on unmount. Accepts same options as `useAppEvent`.
75
+ * @param callback The callback to run when entering background.
76
+ * @param options Additional options.
74
77
  */
75
78
  export function useAppEventOnDidEnterBackground(callback, options) {
76
79
  useAppEvent(APP_EVENT_APPLICATION_DID_ENTER_BACKGROUND, callback, options);
@@ -78,7 +81,7 @@ export function useAppEventOnDidEnterBackground(callback, options) {
78
81
 
79
82
  /**
80
83
  * Invokes a callback only after the app was first sent to background and then
81
- * returns to the foreground i.e. a complete background foreground cycle.
84
+ * returns to the foreground - i.e. a complete background to foreground cycle.
82
85
  *
83
86
  * Common use case: user leaves the app to open system settings and returns, so you
84
87
  * can re-check permissions or refresh data.
@@ -86,14 +89,8 @@ export function useAppEventOnDidEnterBackground(callback, options) {
86
89
  * Internally, this subscribes to both background and foreground events:
87
90
  * - Arms itself when entering background
88
91
  * - Fires on next foreground if armed
89
- *
90
- * @param {Function} callback The callback to run after returning from background.
91
- * @param {Object} [options] Additional options.
92
- * @param {boolean} [options.enabled=true] When false, no listener behavior is active.
93
- * @param {boolean} [options.once=false] When true, callback fires only for the first cycle.
94
- * @param {boolean} [options.resetAfterFire=true]
95
- * If true, requires a new background event to re-arm before firing again.
96
- * If false, remains armed until disabled or unmounted.
92
+ * @param callback The callback to run after returning from background.
93
+ * @param options Additional options.
97
94
  */
98
95
  export function useAppEventOnReturnFromBackground(callback, options = {}) {
99
96
  const {
@@ -1,5 +1,5 @@
1
- export * from "./appEvents";
2
- export { default as usePressHandler } from "./usePressHandler";
3
- export { default as useLongPress } from "./useLongPress";
4
- export { default as useScrollDirectionChange } from "./useScrollDirectionChange";
1
+ export * from './appEvents';
2
+ export { default as usePressHandler } from './usePressHandler';
3
+ export { default as useLongPress } from './useLongPress';
4
+ export { default as useScrollDirectionChange } from './useScrollDirectionChange';
5
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/index.js"],"names":[],"mappings":""}
1
+ {"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"}
@@ -1,68 +1,65 @@
1
- import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
2
-
1
+ import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
2
+ /**
3
+ * The events a long press interaction can originate from. The handlers below are spread onto an
4
+ * element, so these are React's synthetic events rather than the DOM ones.
5
+ */
6
+ export type LongPressEvent = ReactMouseEvent | ReactTouchEvent;
7
+ /**
8
+ * Event handlers to spread onto the element that should react to a long press.
9
+ */
3
10
  export interface LongPressHandlers {
4
- /**
5
- * Attach to `onMouseDown` event.
6
- */
7
- onMouseDown: (e: ReactMouseEvent | TouchEvent) => void;
8
-
9
- /**
10
- * Attach to `onTouchStart` event.
11
- */
12
- onTouchStart: (e: ReactTouchEvent | TouchEvent) => void;
13
-
14
- /**
15
- * Attach to `onMouseUp` event.
16
- */
17
- onMouseUp: (e: ReactMouseEvent | TouchEvent) => void;
18
-
19
- /**
20
- * Attach to `onMouseLeave` event.
21
- */
22
- onMouseLeave: (e: ReactMouseEvent | TouchEvent) => void;
23
-
24
- /**
25
- * Attach to `onTouchEnd` event.
26
- */
27
- onTouchEnd: (e: ReactTouchEvent | TouchEvent) => void;
28
-
29
- /**
30
- * Attach to `onContextMenu` event to prevent the native context menu.
31
- */
32
- onContextMenu: (e: MouseEvent) => void;
11
+ /**
12
+ * Attach to `onMouseDown` event.
13
+ */
14
+ onMouseDown: (e: LongPressEvent) => void;
15
+ /**
16
+ * Attach to `onTouchStart` event.
17
+ */
18
+ onTouchStart: (e: LongPressEvent) => void;
19
+ /**
20
+ * Attach to `onMouseUp` event.
21
+ */
22
+ onMouseUp: (e: LongPressEvent) => void;
23
+ /**
24
+ * Attach to `onMouseLeave` event.
25
+ */
26
+ onMouseLeave: (e: LongPressEvent) => void;
27
+ /**
28
+ * Attach to `onTouchEnd` event.
29
+ */
30
+ onTouchEnd: (e: LongPressEvent) => void;
31
+ /**
32
+ * Attach to `onContextMenu` event to prevent the native context menu.
33
+ */
34
+ onContextMenu: (e: ReactMouseEvent) => void;
33
35
  }
34
-
36
+ /**
37
+ * Configuration and lifecycle callbacks for a long press interaction.
38
+ */
35
39
  export interface UseLongPressOptions {
36
- /**
37
- * Duration in milliseconds to trigger long press.
38
- * @default 1000
39
- */
40
- threshold?: number;
41
-
42
- /**
43
- * Called when the press starts.
44
- */
45
- onStart?: (e: ReactMouseEvent | ReactTouchEvent) => void;
46
-
47
- /**
48
- * Called when the long press completes.
49
- */
50
- onFinish?: (e: ReactMouseEvent | ReactTouchEvent) => void;
51
-
52
- /**
53
- * Called when the press is cancelled before the threshold.
54
- */
55
- onCancel?: (e: ReactMouseEvent | ReactTouchEvent) => void;
40
+ /**
41
+ * Duration in milliseconds to trigger long press.
42
+ * @default 1000
43
+ */
44
+ threshold?: number;
45
+ /**
46
+ * Called when the press starts.
47
+ */
48
+ onStart?: (e: LongPressEvent) => void;
49
+ /**
50
+ * Called when the long press completes.
51
+ */
52
+ onFinish?: (e: LongPressEvent) => void;
53
+ /**
54
+ * Called when the press is cancelled before the threshold.
55
+ */
56
+ onCancel?: (e: LongPressEvent) => void;
56
57
  }
57
-
58
58
  /**
59
59
  * Custom hook to handle long press interactions.
60
- *
61
60
  * @param callback Function to call on long press.
62
61
  * @param options Configuration and lifecycle callbacks.
63
62
  * @returns An object containing event handlers for mouse and touch events.
64
63
  */
65
- export default function useLongPress(
66
- callback: (e: ReactMouseEvent | ReactTouchEvent) => void,
67
- options?: UseLongPressOptions
68
- ): LongPressHandlers;
64
+ export default function useLongPress(callback: (e: LongPressEvent) => void, options?: UseLongPressOptions): LongPressHandlers;
65
+ //# sourceMappingURL=useLongPress.d.ts.map
@@ -0,0 +1 @@
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"}
@@ -1,32 +1,39 @@
1
- // @ts-check
2
1
  import { useRef, useCallback } from 'react';
3
2
 
4
- /** @typedef {import('./useLongPress').LongPressHandlers} LongPressHandlers */
5
- /** @typedef {import('./useLongPress').UseLongPressOptions} UseLongPressOptions */
3
+ /**
4
+ * The events a long press interaction can originate from. The handlers below are spread onto an
5
+ * element, so these are React's synthetic events rather than the DOM ones.
6
+ */
7
+
8
+ /**
9
+ * Event handlers to spread onto the element that should react to a long press.
10
+ */
11
+
12
+ /**
13
+ * Configuration and lifecycle callbacks for a long press interaction.
14
+ */
6
15
 
7
16
  /**
8
17
  * Prevents the default context menu from appearing on long press.
9
- * @param {MouseEvent} e The event object.
18
+ * @param e The event object.
10
19
  */
11
20
  const preventContextMenu = e => {
12
21
  e.preventDefault();
13
22
  };
14
23
 
15
- // eslint-disable-next-line valid-jsdoc
16
24
  /**
17
25
  * Custom hook to handle long press interactions.
18
- *
19
- * @param {(e: Event) => void} callback - Function to call on long press.
20
- * @param {UseLongPressOptions} [options={}] - Configuration and lifecycle callbacks.
21
- * @returns {LongPressHandlers} An object containing event handlers for mouse and touch events.
26
+ * @param callback Function to call on long press.
27
+ * @param options Configuration and lifecycle callbacks.
28
+ * @returns An object containing event handlers for mouse and touch events.
22
29
  */
23
- export default function useLongPress(callback, {
24
- threshold = 1000,
25
- onStart,
26
- onFinish,
27
- onCancel
28
- } = {}) {
29
- /** @type {import('react').MutableRefObject<number | undefined>} */
30
+ export default function useLongPress(callback, options = {}) {
31
+ const {
32
+ threshold = 1000,
33
+ onStart,
34
+ onFinish,
35
+ onCancel
36
+ } = options;
30
37
  const timerRef = useRef(undefined);
31
38
  const triggeredRef = useRef(false);
32
39
  const start = useCallback(e => {
@@ -1,30 +1,43 @@
1
- export default usePressHandler;
2
- export type PressHandlers = {
1
+ import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent } from 'react';
2
+ /**
3
+ * The events that can activate a pressable element.
4
+ */
5
+ export type PressEvent = ReactMouseEvent | ReactKeyboardEvent;
6
+ /**
7
+ * Event handlers to spread onto the element that should react to a press.
8
+ */
9
+ export interface PressHandlers {
3
10
  /**
4
- * - Click event handler.
11
+ * Click event handler.
5
12
  */
6
- onClick: Function;
13
+ onClick: (e: ReactMouseEvent) => void;
7
14
  /**
8
- * - Keydown handler for Enter/Space.
15
+ * Keydown handler for Enter/Space.
9
16
  */
10
- onKeyDown: Function;
11
- };
17
+ onKeyDown: (e: ReactKeyboardEvent) => void;
18
+ }
12
19
  /**
13
- * @typedef {Object} PressHandlers
14
- * @property {Function} onClick - Click event handler.
15
- * @property {Function} onKeyDown - Keydown handler for Enter/Space.
20
+ * Optional configuration for the press handlers.
16
21
  */
22
+ export interface UsePressHandlerOptions {
23
+ /**
24
+ * Whether Space triggers the callback.
25
+ * @default true
26
+ */
27
+ triggerOnSpace?: boolean;
28
+ /**
29
+ * Whether Enter triggers the callback.
30
+ * @default false
31
+ */
32
+ triggerOnEnter?: boolean;
33
+ }
17
34
  /**
18
35
  * Improves development for accessibility by simplifying registration of multiple
19
36
  * listeners (click, Enter, Space) to invoke the a callback when an element is
20
37
  * interacted with.
21
- *
22
- * @param {Function} onPress Callback to run when the element is interacted with
23
- * @param {Object} [options] Optional configuration
24
- * @param {boolean} [options.triggerOnSpace=true] Whether Space triggers onActivate
25
- * @param {boolean} [options.triggerOnEnter=false] Whether Enter triggers onActivate
26
- * @returns {PressHandlers} handlers - Event handlers to spread onto an element
27
- *
38
+ * @param onPress Callback to run when the element is interacted with.
39
+ * @param options Optional configuration.
40
+ * @returns Event handlers to spread onto an element.
28
41
  * @example
29
42
  * ```js
30
43
  * function MyPressableButton({ onActivate }) {
@@ -46,8 +59,6 @@ export type PressHandlers = {
46
59
  * }
47
60
  * ```
48
61
  */
49
- declare function usePressHandler(onPress: Function, options?: {
50
- triggerOnSpace?: boolean | undefined;
51
- triggerOnEnter?: boolean | undefined;
52
- }): PressHandlers;
62
+ declare function usePressHandler(onPress: (e: PressEvent) => void, options?: UsePressHandlerOptions): PressHandlers;
63
+ export default usePressHandler;
53
64
  //# sourceMappingURL=usePressHandler.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"usePressHandler.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/usePressHandler.js"],"names":[],"mappings":";;;;;;;;;;;AAEA;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,8DAzBG;IAA0B,cAAc;IACd,cAAc;CACxC,GAAU,aAAa,CA2DzB"}
1
+ {"version":3,"file":"usePressHandler.d.ts","sourceRoot":"","sources":["../../../../core/hooks/events/usePressHandler.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,IAAI,kBAAkB,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAEhG;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,eAAe,CACtB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,EAChC,OAAO,GAAE,sBAA2B,GACnC,aAAa,CAoCf;AAED,eAAe,eAAe,CAAC"}
@@ -1,22 +1,24 @@
1
1
  import { useCallback } from 'react';
2
2
 
3
3
  /**
4
- * @typedef {Object} PressHandlers
5
- * @property {Function} onClick - Click event handler.
6
- * @property {Function} onKeyDown - Keydown handler for Enter/Space.
4
+ * The events that can activate a pressable element.
5
+ */
6
+
7
+ /**
8
+ * Event handlers to spread onto the element that should react to a press.
9
+ */
10
+
11
+ /**
12
+ * Optional configuration for the press handlers.
7
13
  */
8
14
 
9
15
  /**
10
16
  * Improves development for accessibility by simplifying registration of multiple
11
17
  * listeners (click, Enter, Space) to invoke the a callback when an element is
12
18
  * interacted with.
13
- *
14
- * @param {Function} onPress Callback to run when the element is interacted with
15
- * @param {Object} [options] Optional configuration
16
- * @param {boolean} [options.triggerOnSpace=true] Whether Space triggers onActivate
17
- * @param {boolean} [options.triggerOnEnter=false] Whether Enter triggers onActivate
18
- * @returns {PressHandlers} handlers - Event handlers to spread onto an element
19
- *
19
+ * @param onPress Callback to run when the element is interacted with.
20
+ * @param options Optional configuration.
21
+ * @returns Event handlers to spread onto an element.
20
22
  * @example
21
23
  * ```js
22
24
  * function MyPressableButton({ onActivate }) {