@korsolutions/guidon 1.0.17 → 1.0.19
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.
- package/README.md +63 -0
- package/dist/commonjs/hooks/index.js +7 -0
- package/dist/commonjs/hooks/index.js.map +1 -1
- package/dist/commonjs/hooks/useGuidonRef.js +31 -0
- package/dist/commonjs/hooks/useGuidonRef.js.map +1 -1
- package/dist/commonjs/hooks/useGuidonScrollContainer.js +60 -0
- package/dist/commonjs/hooks/useGuidonScrollContainer.js.map +1 -0
- package/dist/commonjs/index.js +6 -0
- package/dist/commonjs/index.js.map +1 -1
- package/dist/module/hooks/index.js +1 -0
- package/dist/module/hooks/index.js.map +1 -1
- package/dist/module/hooks/useGuidonRef.js +31 -0
- package/dist/module/hooks/useGuidonRef.js.map +1 -1
- package/dist/module/hooks/useGuidonScrollContainer.js +57 -0
- package/dist/module/hooks/useGuidonScrollContainer.js.map +1 -0
- package/dist/module/index.js +1 -1
- package/dist/module/index.js.map +1 -1
- package/dist/typescript/commonjs/components/GuidonOverlay.d.ts +1 -1
- package/dist/typescript/commonjs/components/GuidonOverlay.d.ts.map +1 -1
- package/dist/typescript/commonjs/components/GuidonProvider.d.ts +1 -1
- package/dist/typescript/commonjs/components/GuidonProvider.d.ts.map +1 -1
- package/dist/typescript/commonjs/components/GuidonTarget.d.ts +1 -1
- package/dist/typescript/commonjs/components/GuidonTarget.d.ts.map +1 -1
- package/dist/typescript/commonjs/components/GuidonTooltip.d.ts +1 -1
- package/dist/typescript/commonjs/components/GuidonTooltip.d.ts.map +1 -1
- package/dist/typescript/commonjs/hooks/index.d.ts +1 -0
- package/dist/typescript/commonjs/hooks/index.d.ts.map +1 -1
- package/dist/typescript/commonjs/hooks/useGuidonRef.d.ts +1 -0
- package/dist/typescript/commonjs/hooks/useGuidonRef.d.ts.map +1 -1
- package/dist/typescript/commonjs/hooks/useGuidonScrollContainer.d.ts +41 -0
- package/dist/typescript/commonjs/hooks/useGuidonScrollContainer.d.ts.map +1 -0
- package/dist/typescript/commonjs/index.d.ts +2 -2
- package/dist/typescript/commonjs/index.d.ts.map +1 -1
- package/dist/typescript/commonjs/store.d.ts +2 -2
- package/dist/typescript/commonjs/store.d.ts.map +1 -1
- package/dist/typescript/commonjs/types.d.ts +22 -0
- package/dist/typescript/commonjs/types.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonOverlay.d.ts +1 -1
- package/dist/typescript/module/components/GuidonOverlay.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonProvider.d.ts +1 -1
- package/dist/typescript/module/components/GuidonProvider.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonTarget.d.ts +1 -1
- package/dist/typescript/module/components/GuidonTarget.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonTooltip.d.ts +1 -1
- package/dist/typescript/module/components/GuidonTooltip.d.ts.map +1 -1
- package/dist/typescript/module/hooks/index.d.ts +1 -0
- package/dist/typescript/module/hooks/index.d.ts.map +1 -1
- package/dist/typescript/module/hooks/useGuidonRef.d.ts +1 -0
- package/dist/typescript/module/hooks/useGuidonRef.d.ts.map +1 -1
- package/dist/typescript/module/hooks/useGuidonScrollContainer.d.ts +41 -0
- package/dist/typescript/module/hooks/useGuidonScrollContainer.d.ts.map +1 -0
- package/dist/typescript/module/index.d.ts +2 -2
- package/dist/typescript/module/index.d.ts.map +1 -1
- package/dist/typescript/module/store.d.ts +2 -2
- package/dist/typescript/module/store.d.ts.map +1 -1
- package/dist/typescript/module/types.d.ts +22 -0
- package/dist/typescript/module/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/hooks/index.ts +4 -0
- package/src/hooks/useGuidonRef.ts +44 -1
- package/src/hooks/useGuidonScrollContainer.ts +80 -0
- package/src/index.ts +6 -1
- package/src/types.ts +23 -0
- package/dist/commonjs/babel.config.js +0 -15
- package/dist/commonjs/babel.config.js.map +0 -1
- package/dist/commonjs/bob.config.js +0 -11
- package/dist/commonjs/bob.config.js.map +0 -1
- package/dist/commonjs/tsconfig.json +0 -32
- package/dist/module/babel.config.js +0 -15
- package/dist/module/babel.config.js.map +0 -1
- package/dist/module/bob.config.js +0 -11
- package/dist/module/bob.config.js.map +0 -1
- package/dist/module/tsconfig.json +0 -32
- package/src/babel.config.js +0 -18
- package/src/bob.config.js +0 -14
- package/src/tsconfig.json +0 -32
package/README.md
CHANGED
|
@@ -396,6 +396,69 @@ function GuidonStatus() {
|
|
|
396
396
|
>
|
|
397
397
|
```
|
|
398
398
|
|
|
399
|
+
## Auto-Scroll Behavior
|
|
400
|
+
|
|
401
|
+
### Web
|
|
402
|
+
On web, targets automatically scroll into view using the native `scrollIntoView()` API. You can customize this via theme:
|
|
403
|
+
|
|
404
|
+
```tsx
|
|
405
|
+
const config = {
|
|
406
|
+
theme: {
|
|
407
|
+
scrollOptions: {
|
|
408
|
+
behavior: 'smooth', // 'smooth' | 'instant'
|
|
409
|
+
block: 'center', // 'start' | 'center' | 'end' | 'nearest'
|
|
410
|
+
inline: 'nearest', // 'start' | 'center' | 'end' | 'nearest'
|
|
411
|
+
},
|
|
412
|
+
},
|
|
413
|
+
tours: { ... },
|
|
414
|
+
} satisfies GuidonToursConfig;
|
|
415
|
+
```
|
|
416
|
+
|
|
417
|
+
### Mobile (React Native)
|
|
418
|
+
For mobile, use the `useGuidonScrollContainer` hook to enable auto-scrolling:
|
|
419
|
+
|
|
420
|
+
```tsx
|
|
421
|
+
import { useRef } from 'react';
|
|
422
|
+
import { ScrollView } from 'react-native';
|
|
423
|
+
import { useGuidon, useGuidonScrollContainer } from '@korsolutions/guidon';
|
|
424
|
+
|
|
425
|
+
function MyScreen() {
|
|
426
|
+
const scrollRef = useRef<ScrollView>(null);
|
|
427
|
+
const { register } = useGuidon();
|
|
428
|
+
|
|
429
|
+
// Enable auto-scroll when steps change
|
|
430
|
+
useGuidonScrollContainer(scrollRef);
|
|
431
|
+
|
|
432
|
+
return (
|
|
433
|
+
<ScrollView ref={scrollRef}>
|
|
434
|
+
<View ref={register('step-1')}>First target</View>
|
|
435
|
+
<View ref={register('step-2')}>Second target</View>
|
|
436
|
+
</ScrollView>
|
|
437
|
+
);
|
|
438
|
+
}
|
|
439
|
+
```
|
|
440
|
+
|
|
441
|
+
Options:
|
|
442
|
+
```tsx
|
|
443
|
+
useGuidonScrollContainer(scrollRef, {
|
|
444
|
+
padding: 150, // Distance from top of viewport (default: 100)
|
|
445
|
+
enabled: false, // Temporarily disable (default: true)
|
|
446
|
+
});
|
|
447
|
+
```
|
|
448
|
+
|
|
449
|
+
### Disabling Scroll Per Step
|
|
450
|
+
Disable auto-scroll for individual steps:
|
|
451
|
+
|
|
452
|
+
```tsx
|
|
453
|
+
{
|
|
454
|
+
id: 'modal-step',
|
|
455
|
+
targetId: 'modal-button',
|
|
456
|
+
title: 'Modal Content',
|
|
457
|
+
description: 'This element is already visible',
|
|
458
|
+
scrollIntoView: false, // Don't scroll for this step
|
|
459
|
+
}
|
|
460
|
+
```
|
|
461
|
+
|
|
399
462
|
## Platform Support
|
|
400
463
|
|
|
401
464
|
- iOS
|
|
@@ -9,5 +9,12 @@ Object.defineProperty(exports, "useGuidon", {
|
|
|
9
9
|
return _useGuidonRef.useGuidon;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
+
Object.defineProperty(exports, "useGuidonScrollContainer", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _useGuidonScrollContainer.useGuidonScrollContainer;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
12
18
|
var _useGuidonRef = require("./useGuidonRef.js");
|
|
19
|
+
var _useGuidonScrollContainer = require("./useGuidonScrollContainer.js");
|
|
13
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_useGuidonRef","require"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_useGuidonRef","require","_useGuidonScrollContainer"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,yBAAA,GAAAD,OAAA","ignoreList":[]}
|
|
@@ -13,6 +13,26 @@ var _store = require("../store.js");
|
|
|
13
13
|
* Supports both web elements and React Native Views
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
|
+
/**
|
|
17
|
+
* Check if element is within viewport (web only)
|
|
18
|
+
*/
|
|
19
|
+
function isElementInViewport(el) {
|
|
20
|
+
const rect = el.getBoundingClientRect();
|
|
21
|
+
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Scroll element into view (web only)
|
|
26
|
+
*/
|
|
27
|
+
function scrollElementIntoView(el, options) {
|
|
28
|
+
if (isElementInViewport(el)) return;
|
|
29
|
+
el.scrollIntoView({
|
|
30
|
+
behavior: options?.behavior ?? "smooth",
|
|
31
|
+
block: options?.block ?? "center",
|
|
32
|
+
inline: options?.inline ?? "nearest"
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
|
|
16
36
|
/**
|
|
17
37
|
* Hook that returns a function to attach to an element for guidon targeting.
|
|
18
38
|
* Alternative to the GuidonTarget wrapper component.
|
|
@@ -117,11 +137,22 @@ function useGuidonRegister() {
|
|
|
117
137
|
if (!isActive || !config) return;
|
|
118
138
|
console.log("[useGuidon] Effect triggered - measuring all targets in this instance:", Array.from(elementsRef.current.keys()));
|
|
119
139
|
|
|
140
|
+
// Get current step's target
|
|
141
|
+
const currentStep = config.steps[currentStepIndex];
|
|
142
|
+
const currentTargetId = currentStep?.targetId;
|
|
143
|
+
const shouldScroll = currentStep?.scrollIntoView !== false;
|
|
144
|
+
|
|
120
145
|
// Measure all targets registered in this hook instance
|
|
121
146
|
elementsRef.current.forEach((node, id) => {
|
|
122
147
|
console.log("[useGuidon] Scheduling measurement for:", id);
|
|
123
148
|
requestAnimationFrame(() => {
|
|
124
149
|
measure(id, node);
|
|
150
|
+
|
|
151
|
+
// On web: scroll current step's target into view if not visible
|
|
152
|
+
if (_reactNative.Platform.OS === "web" && shouldScroll && id === currentTargetId && node) {
|
|
153
|
+
const el = node;
|
|
154
|
+
scrollElementIntoView(el, config.theme?.scrollOptions);
|
|
155
|
+
}
|
|
125
156
|
});
|
|
126
157
|
});
|
|
127
158
|
}, [currentStepIndex, isActive, config, measure]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_store","useGuidon","register","useGuidonRegister","elementsRef","useRef","Map","rafRef","registerTarget","useGuidonStore","state","unregisterTarget","isActive","config","currentStepIndex","measure","useCallback","targetId","node","console","log","hasNode","hasConfig","isTargetUsed","steps","some","step","Platform","OS","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_store","isElementInViewport","el","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","scrollElementIntoView","options","scrollIntoView","behavior","block","inline","useGuidon","register","useGuidonRegister","elementsRef","useRef","Map","rafRef","registerTarget","useGuidonStore","state","unregisterTarget","isActive","config","currentStepIndex","measure","useCallback","targetId","node","console","log","hasNode","hasConfig","isTargetUsed","steps","some","step","Platform","OS","style","getComputedStyle","paddingLeft","parseFloat","paddingRight","paddingTop","paddingBottom","borderLeft","borderLeftWidth","borderRight","borderRightWidth","borderTop","borderTopWidth","borderBottom","borderBottomWidth","measurements","x","scrollX","y","scrollY","width","height","native","measureInWindow","current","set","raf","requestAnimationFrame","delete","get","cancelAnimationFrame","useEffect","Array","from","keys","currentStep","currentTargetId","shouldScroll","forEach","id","theme","scrollOptions","handler","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useGuidonRef.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useGuidonScrollContainer = useGuidonScrollContainer;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _store = require("../store.js");
|
|
10
|
+
/**
|
|
11
|
+
* Scrollable container interface (ScrollView, FlatList, etc.)
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Hook that registers a ScrollView for auto-scrolling on mobile platforms.
|
|
16
|
+
* When a guidon step changes, automatically scrolls to bring the target into view.
|
|
17
|
+
*
|
|
18
|
+
* @param scrollViewRef - Ref to a ScrollView or FlatList
|
|
19
|
+
* @param options - Configuration options
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* function MyScreen() {
|
|
24
|
+
* const scrollRef = useRef<ScrollView>(null);
|
|
25
|
+
* useGuidonScrollContainer(scrollRef);
|
|
26
|
+
*
|
|
27
|
+
* return (
|
|
28
|
+
* <ScrollView ref={scrollRef}>
|
|
29
|
+
* <View ref={register('step-1')}>...</View>
|
|
30
|
+
* </ScrollView>
|
|
31
|
+
* );
|
|
32
|
+
* }
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
function useGuidonScrollContainer(scrollViewRef, options) {
|
|
36
|
+
const currentStepIndex = (0, _store.useGuidonStore)(s => s.currentStepIndex);
|
|
37
|
+
const config = (0, _store.useGuidonStore)(s => s.config);
|
|
38
|
+
const isActive = (0, _store.useGuidonStore)(s => s.isActive);
|
|
39
|
+
const targetMeasurements = (0, _store.useGuidonStore)(s => s.targetMeasurements);
|
|
40
|
+
const padding = options?.padding ?? 100;
|
|
41
|
+
const enabled = options?.enabled ?? true;
|
|
42
|
+
(0, _react.useEffect)(() => {
|
|
43
|
+
// Only handle mobile platforms - web uses native scrollIntoView
|
|
44
|
+
if (_reactNative.Platform.OS === "web" || !isActive || !config || !enabled) return;
|
|
45
|
+
const step = config.steps[currentStepIndex];
|
|
46
|
+
if (!step?.targetId || step.scrollIntoView === false) return;
|
|
47
|
+
const measurements = targetMeasurements[step.targetId];
|
|
48
|
+
if (!measurements) return;
|
|
49
|
+
|
|
50
|
+
// Small delay to ensure measurements are settled after step transition
|
|
51
|
+
const timeoutId = setTimeout(() => {
|
|
52
|
+
scrollViewRef.current?.scrollTo?.({
|
|
53
|
+
y: Math.max(0, measurements.y - padding),
|
|
54
|
+
animated: true
|
|
55
|
+
});
|
|
56
|
+
}, 50);
|
|
57
|
+
return () => clearTimeout(timeoutId);
|
|
58
|
+
}, [currentStepIndex, isActive, config, targetMeasurements, scrollViewRef, padding, enabled]);
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=useGuidonScrollContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_store","useGuidonScrollContainer","scrollViewRef","options","currentStepIndex","useGuidonStore","s","config","isActive","targetMeasurements","padding","enabled","useEffect","Platform","OS","step","steps","targetId","scrollIntoView","measurements","timeoutId","setTimeout","current","scrollTo","y","Math","max","animated","clearTimeout"],"sourceRoot":"../../../src","sources":["hooks/useGuidonScrollContainer.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASG,wBAAwBA,CACtCC,aAAuC,EACvCC,OAAyC,EACzC;EACA,MAAMC,gBAAgB,GAAG,IAAAC,qBAAc,EAAEC,CAAC,IAAKA,CAAC,CAACF,gBAAgB,CAAC;EAClE,MAAMG,MAAM,GAAG,IAAAF,qBAAc,EAAEC,CAAC,IAAKA,CAAC,CAACC,MAAM,CAAC;EAC9C,MAAMC,QAAQ,GAAG,IAAAH,qBAAc,EAAEC,CAAC,IAAKA,CAAC,CAACE,QAAQ,CAAC;EAClD,MAAMC,kBAAkB,GAAG,IAAAJ,qBAAc,EAAEC,CAAC,IAAKA,CAAC,CAACG,kBAAkB,CAAC;EAEtE,MAAMC,OAAO,GAAGP,OAAO,EAAEO,OAAO,IAAI,GAAG;EACvC,MAAMC,OAAO,GAAGR,OAAO,EAAEQ,OAAO,IAAI,IAAI;EAExC,IAAAC,gBAAS,EAAC,MAAM;IACd;IACA,IAAIC,qBAAQ,CAACC,EAAE,KAAK,KAAK,IAAI,CAACN,QAAQ,IAAI,CAACD,MAAM,IAAI,CAACI,OAAO,EAAE;IAE/D,MAAMI,IAAI,GAAGR,MAAM,CAACS,KAAK,CAACZ,gBAAgB,CAAC;IAC3C,IAAI,CAACW,IAAI,EAAEE,QAAQ,IAAIF,IAAI,CAACG,cAAc,KAAK,KAAK,EAAE;IAEtD,MAAMC,YAAY,GAAGV,kBAAkB,CAACM,IAAI,CAACE,QAAQ,CAAC;IACtD,IAAI,CAACE,YAAY,EAAE;;IAEnB;IACA,MAAMC,SAAS,GAAGC,UAAU,CAAC,MAAM;MACjCnB,aAAa,CAACoB,OAAO,EAAEC,QAAQ,GAAG;QAChCC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEP,YAAY,CAACK,CAAC,GAAGd,OAAO,CAAC;QACxCiB,QAAQ,EAAE;MACZ,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,MAAMC,YAAY,CAACR,SAAS,CAAC;EACtC,CAAC,EAAE,CACDhB,gBAAgB,EAChBI,QAAQ,EACRD,MAAM,EACNE,kBAAkB,EAClBP,aAAa,EACbQ,OAAO,EACPC,OAAO,CACR,CAAC;AACJ","ignoreList":[]}
|
package/dist/commonjs/index.js
CHANGED
|
@@ -99,6 +99,12 @@ Object.defineProperty(exports, "useGuidonProgress", {
|
|
|
99
99
|
return _store.useGuidonProgress;
|
|
100
100
|
}
|
|
101
101
|
});
|
|
102
|
+
Object.defineProperty(exports, "useGuidonScrollContainer", {
|
|
103
|
+
enumerable: true,
|
|
104
|
+
get: function () {
|
|
105
|
+
return _index2.useGuidonScrollContainer;
|
|
106
|
+
}
|
|
107
|
+
});
|
|
102
108
|
Object.defineProperty(exports, "useGuidonStep", {
|
|
103
109
|
enumerable: true,
|
|
104
110
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_index","require","_index2","_store","_adapters","_hooks"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_index","require","_index2","_store","_adapters","_hooks"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AASA,IAAAC,OAAA,GAAAD,OAAA;AAOA,IAAAE,MAAA,GAAAF,OAAA;AAmCA,IAAAG,SAAA,GAAAH,OAAA;AASA,IAAAI,MAAA,GAAAJ,OAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useGuidon"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,mBAAgB","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["useGuidon","useGuidonScrollContainer"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,mBAAgB;AAC1C,SACEC,wBAAwB,QAEnB,+BAA4B","ignoreList":[]}
|
|
@@ -9,6 +9,26 @@ import { useGuidonStore } from "../store.js";
|
|
|
9
9
|
* Supports both web elements and React Native Views
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Check if element is within viewport (web only)
|
|
14
|
+
*/
|
|
15
|
+
function isElementInViewport(el) {
|
|
16
|
+
const rect = el.getBoundingClientRect();
|
|
17
|
+
return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Scroll element into view (web only)
|
|
22
|
+
*/
|
|
23
|
+
function scrollElementIntoView(el, options) {
|
|
24
|
+
if (isElementInViewport(el)) return;
|
|
25
|
+
el.scrollIntoView({
|
|
26
|
+
behavior: options?.behavior ?? "smooth",
|
|
27
|
+
block: options?.block ?? "center",
|
|
28
|
+
inline: options?.inline ?? "nearest"
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
|
|
12
32
|
/**
|
|
13
33
|
* Hook that returns a function to attach to an element for guidon targeting.
|
|
14
34
|
* Alternative to the GuidonTarget wrapper component.
|
|
@@ -113,11 +133,22 @@ export function useGuidonRegister() {
|
|
|
113
133
|
if (!isActive || !config) return;
|
|
114
134
|
console.log("[useGuidon] Effect triggered - measuring all targets in this instance:", Array.from(elementsRef.current.keys()));
|
|
115
135
|
|
|
136
|
+
// Get current step's target
|
|
137
|
+
const currentStep = config.steps[currentStepIndex];
|
|
138
|
+
const currentTargetId = currentStep?.targetId;
|
|
139
|
+
const shouldScroll = currentStep?.scrollIntoView !== false;
|
|
140
|
+
|
|
116
141
|
// Measure all targets registered in this hook instance
|
|
117
142
|
elementsRef.current.forEach((node, id) => {
|
|
118
143
|
console.log("[useGuidon] Scheduling measurement for:", id);
|
|
119
144
|
requestAnimationFrame(() => {
|
|
120
145
|
measure(id, node);
|
|
146
|
+
|
|
147
|
+
// On web: scroll current step's target into view if not visible
|
|
148
|
+
if (Platform.OS === "web" && shouldScroll && id === currentTargetId && node) {
|
|
149
|
+
const el = node;
|
|
150
|
+
scrollElementIntoView(el, config.theme?.scrollOptions);
|
|
151
|
+
}
|
|
121
152
|
});
|
|
122
153
|
});
|
|
123
154
|
}, [currentStepIndex, isActive, config, measure]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useRef","Platform","useGuidonStore","useGuidon","register","useGuidonRegister","elementsRef","Map","rafRef","registerTarget","state","unregisterTarget","isActive","config","currentStepIndex","measure","targetId","node","console","log","hasNode","hasConfig","isTargetUsed","steps","some","step","OS","
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useRef","Platform","useGuidonStore","isElementInViewport","el","rect","getBoundingClientRect","top","left","bottom","window","innerHeight","document","documentElement","clientHeight","right","innerWidth","clientWidth","scrollElementIntoView","options","scrollIntoView","behavior","block","inline","useGuidon","register","useGuidonRegister","elementsRef","Map","rafRef","registerTarget","state","unregisterTarget","isActive","config","currentStepIndex","measure","targetId","node","console","log","hasNode","hasConfig","isTargetUsed","steps","some","step","OS","style","getComputedStyle","paddingLeft","parseFloat","paddingRight","paddingTop","paddingBottom","borderLeft","borderLeftWidth","borderRight","borderRightWidth","borderTop","borderTopWidth","borderBottom","borderBottomWidth","measurements","x","scrollX","y","scrollY","width","height","native","measureInWindow","current","set","raf","requestAnimationFrame","delete","get","cancelAnimationFrame","Array","from","keys","currentStep","currentTargetId","shouldScroll","forEach","id","theme","scrollOptions","handler","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useGuidonRef.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect } from "react";
|
|
4
|
+
import { Platform } from "react-native";
|
|
5
|
+
import { useGuidonStore } from "../store.js";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Scrollable container interface (ScrollView, FlatList, etc.)
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Hook that registers a ScrollView for auto-scrolling on mobile platforms.
|
|
13
|
+
* When a guidon step changes, automatically scrolls to bring the target into view.
|
|
14
|
+
*
|
|
15
|
+
* @param scrollViewRef - Ref to a ScrollView or FlatList
|
|
16
|
+
* @param options - Configuration options
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* function MyScreen() {
|
|
21
|
+
* const scrollRef = useRef<ScrollView>(null);
|
|
22
|
+
* useGuidonScrollContainer(scrollRef);
|
|
23
|
+
*
|
|
24
|
+
* return (
|
|
25
|
+
* <ScrollView ref={scrollRef}>
|
|
26
|
+
* <View ref={register('step-1')}>...</View>
|
|
27
|
+
* </ScrollView>
|
|
28
|
+
* );
|
|
29
|
+
* }
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export function useGuidonScrollContainer(scrollViewRef, options) {
|
|
33
|
+
const currentStepIndex = useGuidonStore(s => s.currentStepIndex);
|
|
34
|
+
const config = useGuidonStore(s => s.config);
|
|
35
|
+
const isActive = useGuidonStore(s => s.isActive);
|
|
36
|
+
const targetMeasurements = useGuidonStore(s => s.targetMeasurements);
|
|
37
|
+
const padding = options?.padding ?? 100;
|
|
38
|
+
const enabled = options?.enabled ?? true;
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
// Only handle mobile platforms - web uses native scrollIntoView
|
|
41
|
+
if (Platform.OS === "web" || !isActive || !config || !enabled) return;
|
|
42
|
+
const step = config.steps[currentStepIndex];
|
|
43
|
+
if (!step?.targetId || step.scrollIntoView === false) return;
|
|
44
|
+
const measurements = targetMeasurements[step.targetId];
|
|
45
|
+
if (!measurements) return;
|
|
46
|
+
|
|
47
|
+
// Small delay to ensure measurements are settled after step transition
|
|
48
|
+
const timeoutId = setTimeout(() => {
|
|
49
|
+
scrollViewRef.current?.scrollTo?.({
|
|
50
|
+
y: Math.max(0, measurements.y - padding),
|
|
51
|
+
animated: true
|
|
52
|
+
});
|
|
53
|
+
}, 50);
|
|
54
|
+
return () => clearTimeout(timeoutId);
|
|
55
|
+
}, [currentStepIndex, isActive, config, targetMeasurements, scrollViewRef, padding, enabled]);
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=useGuidonScrollContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","Platform","useGuidonStore","useGuidonScrollContainer","scrollViewRef","options","currentStepIndex","s","config","isActive","targetMeasurements","padding","enabled","OS","step","steps","targetId","scrollIntoView","measurements","timeoutId","setTimeout","current","scrollTo","y","Math","max","animated","clearTimeout"],"sourceRoot":"../../../src","sources":["hooks/useGuidonScrollContainer.ts"],"mappings":";;AAAA,SAASA,SAAS,QAAwB,OAAO;AACjD,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,cAAc,QAAQ,aAAU;;AAEzC;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,wBAAwBA,CACtCC,aAAuC,EACvCC,OAAyC,EACzC;EACA,MAAMC,gBAAgB,GAAGJ,cAAc,CAAEK,CAAC,IAAKA,CAAC,CAACD,gBAAgB,CAAC;EAClE,MAAME,MAAM,GAAGN,cAAc,CAAEK,CAAC,IAAKA,CAAC,CAACC,MAAM,CAAC;EAC9C,MAAMC,QAAQ,GAAGP,cAAc,CAAEK,CAAC,IAAKA,CAAC,CAACE,QAAQ,CAAC;EAClD,MAAMC,kBAAkB,GAAGR,cAAc,CAAEK,CAAC,IAAKA,CAAC,CAACG,kBAAkB,CAAC;EAEtE,MAAMC,OAAO,GAAGN,OAAO,EAAEM,OAAO,IAAI,GAAG;EACvC,MAAMC,OAAO,GAAGP,OAAO,EAAEO,OAAO,IAAI,IAAI;EAExCZ,SAAS,CAAC,MAAM;IACd;IACA,IAAIC,QAAQ,CAACY,EAAE,KAAK,KAAK,IAAI,CAACJ,QAAQ,IAAI,CAACD,MAAM,IAAI,CAACI,OAAO,EAAE;IAE/D,MAAME,IAAI,GAAGN,MAAM,CAACO,KAAK,CAACT,gBAAgB,CAAC;IAC3C,IAAI,CAACQ,IAAI,EAAEE,QAAQ,IAAIF,IAAI,CAACG,cAAc,KAAK,KAAK,EAAE;IAEtD,MAAMC,YAAY,GAAGR,kBAAkB,CAACI,IAAI,CAACE,QAAQ,CAAC;IACtD,IAAI,CAACE,YAAY,EAAE;;IAEnB;IACA,MAAMC,SAAS,GAAGC,UAAU,CAAC,MAAM;MACjChB,aAAa,CAACiB,OAAO,EAAEC,QAAQ,GAAG;QAChCC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEP,YAAY,CAACK,CAAC,GAAGZ,OAAO,CAAC;QACxCe,QAAQ,EAAE;MACZ,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,MAAMC,YAAY,CAACR,SAAS,CAAC;EACtC,CAAC,EAAE,CACDb,gBAAgB,EAChBG,QAAQ,EACRD,MAAM,EACNE,kBAAkB,EAClBN,aAAa,EACbO,OAAO,EACPC,OAAO,CACR,CAAC;AACJ","ignoreList":[]}
|
package/dist/module/index.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
export { GuidonTarget, GuidonOverlay, GuidonTooltip, GuidonProvider, useGuidonContext } from "./components/index.js";
|
|
5
5
|
|
|
6
6
|
// Hooks
|
|
7
|
-
export { useGuidon } from "./hooks/index.js";
|
|
7
|
+
export { useGuidon, useGuidonScrollContainer } from "./hooks/index.js";
|
|
8
8
|
|
|
9
9
|
// Store and API
|
|
10
10
|
export { useGuidonStore, Guidon, useGuidonActive, useGuidonStep, useGuidonProgress, useTargetMeasurements, useWaitingState, useIsFloatingStep } from "./store.js";
|
package/dist/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["GuidonTarget","GuidonOverlay","GuidonTooltip","GuidonProvider","useGuidonContext","useGuidon","useGuidonStore","Guidon","useGuidonActive","useGuidonStep","useGuidonProgress","useTargetMeasurements","useWaitingState","useIsFloatingStep","createNoopAdapter","createMemoryAdapter","createLocalStorageAdapter","createAsyncStorageAdapter","createApiAdapter","createCompositeAdapter","useGuidonPersistence","useShouldShowGuidon"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,SACEA,YAAY,EACZC,aAAa,EACbC,aAAa,EACbC,cAAc,EACdC,gBAAgB,QACX,uBAAc;;AAErB;AACA,
|
|
1
|
+
{"version":3,"names":["GuidonTarget","GuidonOverlay","GuidonTooltip","GuidonProvider","useGuidonContext","useGuidon","useGuidonScrollContainer","useGuidonStore","Guidon","useGuidonActive","useGuidonStep","useGuidonProgress","useTargetMeasurements","useWaitingState","useIsFloatingStep","createNoopAdapter","createMemoryAdapter","createLocalStorageAdapter","createAsyncStorageAdapter","createApiAdapter","createCompositeAdapter","useGuidonPersistence","useShouldShowGuidon"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,SACEA,YAAY,EACZC,aAAa,EACbC,aAAa,EACbC,cAAc,EACdC,gBAAgB,QACX,uBAAc;;AAErB;AACA,SACEC,SAAS,EACTC,wBAAwB,QAEnB,kBAAS;;AAEhB;AACA,SACEC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,aAAa,EACbC,iBAAiB,EACjBC,qBAAqB,EACrBC,eAAe,EACfC,iBAAiB,QACZ,YAAS;;AAEhB;;AAuBA;AACA,SACEC,iBAAiB,EACjBC,mBAAmB,EACnBC,yBAAyB,EACzBC,yBAAyB,EACzBC,gBAAgB,EAChBC,sBAAsB,QACjB,2BAAwB;AAE/B,SAASC,oBAAoB,EAAEC,mBAAmB,QAAQ,wBAAqB","ignoreList":[]}
|
|
@@ -4,6 +4,6 @@ interface GuidonOverlayProps {
|
|
|
4
4
|
animationDuration?: number;
|
|
5
5
|
onBackdropPress?: () => void;
|
|
6
6
|
}
|
|
7
|
-
export declare function GuidonOverlay({ theme, animationDuration, onBackdropPress, }: GuidonOverlayProps): import("react
|
|
7
|
+
export declare function GuidonOverlay({ theme, animationDuration, onBackdropPress, }: GuidonOverlayProps): import("react").JSX.Element | null;
|
|
8
8
|
export {};
|
|
9
9
|
//# sourceMappingURL=GuidonOverlay.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuidonOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonOverlay.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAe,WAAW,EAAsB,MAAM,UAAU,CAAC;AAmB7E,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,iBAAuB,EACvB,eAAe,GAChB,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"GuidonOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonOverlay.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAe,WAAW,EAAsB,MAAM,UAAU,CAAC;AAmB7E,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,iBAAuB,EACvB,eAAe,GAChB,EAAE,kBAAkB,sCAmKpB"}
|
|
@@ -9,6 +9,6 @@ interface GuidonContextValue {
|
|
|
9
9
|
isLoading: boolean;
|
|
10
10
|
}
|
|
11
11
|
export declare function useGuidonContext(): GuidonContextValue;
|
|
12
|
-
export declare function GuidonProvider({ children, persistenceAdapter, portalComponent: Portal, renderTooltip, tooltipLabels, onBackdropPress, }: GuidonProviderProps): import("react
|
|
12
|
+
export declare function GuidonProvider({ children, persistenceAdapter, portalComponent: Portal, renderTooltip, tooltipLabels, onBackdropPress, }: GuidonProviderProps): import("react").JSX.Element;
|
|
13
13
|
export {};
|
|
14
14
|
//# sourceMappingURL=GuidonProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuidonProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAe,MAAM,UAAU,CAAC;AAIjE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB;AAID,wBAAgB,gBAAgB,uBAM/B;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,kBAAkB,EAClB,eAAe,EAAE,MAAM,EACvB,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,mBAAmB
|
|
1
|
+
{"version":3,"file":"GuidonProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAe,MAAM,UAAU,CAAC;AAIjE,UAAU,kBAAkB;IAC1B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB;AAID,wBAAgB,gBAAgB,uBAM/B;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,kBAAkB,EAClB,eAAe,EAAE,MAAM,EACvB,aAAa,EACb,aAAa,EACb,eAAe,GAChB,EAAE,mBAAmB,+BAkHrB"}
|
|
@@ -3,5 +3,5 @@ import type { GuidonTargetProps } from "../types";
|
|
|
3
3
|
* Wrapper component that marks an element as a walkthrough target
|
|
4
4
|
* Automatically measures and reports its position to the walkthrough store
|
|
5
5
|
*/
|
|
6
|
-
export declare function GuidonTarget({ children, targetId, active, }: GuidonTargetProps): import("react
|
|
6
|
+
export declare function GuidonTarget({ children, targetId, active, }: GuidonTargetProps): import("react").JSX.Element;
|
|
7
7
|
//# sourceMappingURL=GuidonTarget.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuidonTarget.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonTarget.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,iBAAiB,EAIlB,MAAM,UAAU,CAAC;AAElB;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,MAAa,GACd,EAAE,iBAAiB
|
|
1
|
+
{"version":3,"file":"GuidonTarget.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonTarget.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,iBAAiB,EAIlB,MAAM,UAAU,CAAC;AAElB;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,MAAa,GACd,EAAE,iBAAiB,+BAyGnB"}
|
|
@@ -19,6 +19,6 @@ interface GuidonTooltipProps {
|
|
|
19
19
|
waitingDefault?: string;
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
|
-
export declare function GuidonTooltip({ theme, animationDuration, renderCustomTooltip, labels, }: GuidonTooltipProps): import("react
|
|
22
|
+
export declare function GuidonTooltip({ theme, animationDuration, renderCustomTooltip, labels, }: GuidonTooltipProps): import("react").JSX.Element | null;
|
|
23
23
|
export {};
|
|
24
24
|
//# sourceMappingURL=GuidonTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuidonTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonTooltip.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,UAAU,EAEV,WAAW,EAGZ,MAAM,UAAU,CAAC;AAyFlB,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC5B,IAAI,EAAE,UAAU,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,UAAU,EAAE,MAAM,IAAI,CAAC;QACvB,MAAM,EAAE,MAAM,IAAI,CAAC;KACpB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QACpD,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,iBAAuB,EACvB,mBAAmB,EACnB,MAAW,GACZ,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"GuidonTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonTooltip.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAEV,UAAU,EAEV,WAAW,EAGZ,MAAM,UAAU,CAAC;AAyFlB,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC5B,IAAI,EAAE,UAAU,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,UAAU,EAAE,MAAM,IAAI,CAAC;QACvB,MAAM,EAAE,MAAM,IAAI,CAAC;KACpB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QACpD,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,iBAAuB,EACvB,mBAAmB,EACnB,MAAW,GACZ,EAAE,kBAAkB,sCAkTpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EACL,wBAAwB,EACxB,KAAK,+BAA+B,GACrC,MAAM,4BAA4B,CAAC"}
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
type MeasurableElement = {
|
|
6
6
|
getBoundingClientRect?: () => DOMRect;
|
|
7
7
|
measureInWindow?: (callback: (x: number, y: number, width: number, height: number) => void) => void;
|
|
8
|
+
scrollIntoView?: (options?: ScrollIntoViewOptions) => void;
|
|
8
9
|
};
|
|
9
10
|
/**
|
|
10
11
|
* Hook that returns a function to attach to an element for guidon targeting.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGuidonRef.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useGuidonRef.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,KAAK,iBAAiB,GAAG;IACvB,qBAAqB,CAAC,EAAE,MAAM,OAAO,CAAC;IACtC,eAAe,CAAC,EAAE,CAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,KACpE,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"useGuidonRef.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useGuidonRef.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,KAAK,iBAAiB,GAAG;IACvB,qBAAqB,CAAC,EAAE,MAAM,OAAO,CAAC;IACtC,eAAe,CAAC,EAAE,CAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,KACpE,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC5D,CAAC;AA4BF;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,SAAS;yBAoGV,MAAM,YACD,iBAAiB,GAAG,IAAI;EAlG3C;AAED,wBAAgB,iBAAiB,eA+FlB,MAAM,YACD,iBAAiB,GAAG,IAAI,UA2E3C"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { type RefObject } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Scrollable container interface (ScrollView, FlatList, etc.)
|
|
4
|
+
*/
|
|
5
|
+
type ScrollableRef = {
|
|
6
|
+
scrollTo?: (options: {
|
|
7
|
+
x?: number;
|
|
8
|
+
y: number;
|
|
9
|
+
animated?: boolean;
|
|
10
|
+
}) => void;
|
|
11
|
+
};
|
|
12
|
+
export interface UseGuidonScrollContainerOptions {
|
|
13
|
+
/** Padding from the top when scrolling to target (default: 100) */
|
|
14
|
+
padding?: number;
|
|
15
|
+
/** Whether scrolling is enabled (default: true) */
|
|
16
|
+
enabled?: boolean;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Hook that registers a ScrollView for auto-scrolling on mobile platforms.
|
|
20
|
+
* When a guidon step changes, automatically scrolls to bring the target into view.
|
|
21
|
+
*
|
|
22
|
+
* @param scrollViewRef - Ref to a ScrollView or FlatList
|
|
23
|
+
* @param options - Configuration options
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* function MyScreen() {
|
|
28
|
+
* const scrollRef = useRef<ScrollView>(null);
|
|
29
|
+
* useGuidonScrollContainer(scrollRef);
|
|
30
|
+
*
|
|
31
|
+
* return (
|
|
32
|
+
* <ScrollView ref={scrollRef}>
|
|
33
|
+
* <View ref={register('step-1')}>...</View>
|
|
34
|
+
* </ScrollView>
|
|
35
|
+
* );
|
|
36
|
+
* }
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
export declare function useGuidonScrollContainer(scrollViewRef: RefObject<ScrollableRef>, options?: UseGuidonScrollContainerOptions): void;
|
|
40
|
+
export {};
|
|
41
|
+
//# sourceMappingURL=useGuidonScrollContainer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useGuidonScrollContainer.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useGuidonScrollContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlD;;GAEG;AACH,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF,MAAM,WAAW,+BAA+B;IAC9C,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,wBAAwB,CACtC,aAAa,EAAE,SAAS,CAAC,aAAa,CAAC,EACvC,OAAO,CAAC,EAAE,+BAA+B,QAsC1C"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { GuidonTarget, GuidonOverlay, GuidonTooltip, GuidonProvider, useGuidonContext, } from "./components";
|
|
2
|
-
export { useGuidon } from "./hooks";
|
|
2
|
+
export { useGuidon, useGuidonScrollContainer, type UseGuidonScrollContainerOptions, } from "./hooks";
|
|
3
3
|
export { useGuidonStore, Guidon, useGuidonActive, useGuidonStep, useGuidonProgress, useTargetMeasurements, useWaitingState, useIsFloatingStep, } from "./store";
|
|
4
|
-
export type { GuidonStep, GuidonConfig, GuidonTours, GuidonToursConfig, GuidonTourDefinition, GuidonTheme, GuidonProgress, GuidonPersistenceAdapter, GuidonProviderProps, GuidonTargetProps, GuidonTooltipLabels, GuidonTooltipRenderProps, TooltipPosition, FloatingPosition, TargetMeasurements, GuidonState, GuidonActions, GuidonStore, } from "./types";
|
|
4
|
+
export type { GuidonStep, GuidonConfig, GuidonTours, GuidonToursConfig, GuidonTourDefinition, GuidonTheme, GuidonScrollOptions, GuidonProgress, GuidonPersistenceAdapter, GuidonProviderProps, GuidonTargetProps, GuidonTooltipLabels, GuidonTooltipRenderProps, TooltipPosition, FloatingPosition, TargetMeasurements, GuidonState, GuidonActions, GuidonStore, } from "./types";
|
|
5
5
|
export { createNoopAdapter, createMemoryAdapter, createLocalStorageAdapter, createAsyncStorageAdapter, createApiAdapter, createCompositeAdapter, } from "./persistence/adapters";
|
|
6
6
|
export { useGuidonPersistence, useShouldShowGuidon } from "./persistence/hooks";
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAGtB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,aAAa,EACb,cAAc,EACd,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,SAAS,EACT,wBAAwB,EACxB,KAAK,+BAA+B,GACrC,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,cAAc,EACd,MAAM,EACN,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,oBAAoB,EACpB,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,EACzB,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -88,13 +88,13 @@ export declare const Guidon: {
|
|
|
88
88
|
* Hook selectors for common use cases
|
|
89
89
|
*/
|
|
90
90
|
export declare const useGuidonActive: () => boolean;
|
|
91
|
-
export declare const useGuidonStep: () => import("./types").GuidonStep | null;
|
|
91
|
+
export declare const useGuidonStep: () => import("./types").GuidonStep | null | undefined;
|
|
92
92
|
export declare const useGuidonProgress: () => {
|
|
93
93
|
currentStep: number;
|
|
94
94
|
totalSteps: number;
|
|
95
95
|
percentage: number;
|
|
96
96
|
};
|
|
97
|
-
export declare const useTargetMeasurements: (targetId: string) => TargetMeasurements;
|
|
97
|
+
export declare const useTargetMeasurements: (targetId: string) => TargetMeasurements | undefined;
|
|
98
98
|
/**
|
|
99
99
|
* Hook to check if the Guidon is waiting for a target element to mount
|
|
100
100
|
* Returns null if not active, not waiting, or if it's a floating step
|