@flowsterix/react 0.8.1 → 0.9.0

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.
@@ -0,0 +1,46 @@
1
+ /**
2
+ * Helper utilities for programmatically controlling Radix Dialog components
3
+ * in tour lifecycle hooks (onEnter, onResume, onExit).
4
+ */
5
+ /**
6
+ * Wait for next animation frame + microtask flush.
7
+ * Use this to ensure DOM updates have completed after triggering UI changes.
8
+ */
9
+ export declare const waitForDom: () => Promise<void>;
10
+ export interface CreateRadixDialogHelpersParams {
11
+ /** Selector for the dialog content element (visible when open) */
12
+ contentSelector: string;
13
+ /** Selector for the trigger button that opens the dialog */
14
+ triggerSelector: string;
15
+ }
16
+ export interface RadixDialogHelpers {
17
+ /** Check if the dialog is currently open */
18
+ isOpen: () => boolean;
19
+ /** Open the dialog if not already open */
20
+ open: () => Promise<void>;
21
+ /** Close the dialog if currently open */
22
+ close: () => Promise<void>;
23
+ }
24
+ /**
25
+ * Create helpers for programmatically controlling a Radix Dialog.
26
+ *
27
+ * @example
28
+ * ```tsx
29
+ * const settingsDialog = createRadixDialogHelpers({
30
+ * contentSelector: '[data-tour-target="settings-dialog"]',
31
+ * triggerSelector: '[data-tour-target="settings-trigger"]',
32
+ * })
33
+ *
34
+ * // In flow step:
35
+ * {
36
+ * id: 'settings-panel',
37
+ * target: { selector: '[data-tour-target="settings-dialog"]' },
38
+ * onEnter: settingsDialog.open,
39
+ * onResume: settingsDialog.open,
40
+ * onExit: settingsDialog.close,
41
+ * content: <p>Configure your settings here</p>,
42
+ * }
43
+ * ```
44
+ */
45
+ export declare const createRadixDialogHelpers: (params: CreateRadixDialogHelpersParams) => RadixDialogHelpers;
46
+ //# sourceMappingURL=radixDialogHelpers.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radixDialogHelpers.d.ts","sourceRoot":"","sources":["../../src/adapters/radixDialogHelpers.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU,QAAO,OAAO,CAAC,IAAI,CAGvC,CAAA;AAEH,MAAM,WAAW,8BAA8B;IAC7C,kEAAkE;IAClE,eAAe,EAAE,MAAM,CAAA;IACvB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,4CAA4C;IAC5C,MAAM,EAAE,MAAM,OAAO,CAAA;IACrB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACzB,yCAAyC;IACzC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,wBAAwB,GACnC,QAAQ,8BAA8B,KACrC,kBA+BF,CAAA"}
package/dist/index.cjs CHANGED
@@ -26,6 +26,7 @@ __export(index_exports, {
26
26
  TourPopoverPortal: () => TourPopoverPortal,
27
27
  TourProvider: () => TourProvider,
28
28
  createPathString: () => createPathString,
29
+ createRadixDialogHelpers: () => createRadixDialogHelpers,
29
30
  createWaitForPredicateController: () => createWaitForPredicateController,
30
31
  defaultAnimationAdapter: () => defaultAnimationAdapter,
31
32
  defaultLabels: () => defaultLabels,
@@ -53,7 +54,8 @@ __export(index_exports, {
53
54
  useTourLabels: () => useTourLabels,
54
55
  useTourOverlay: () => useTourOverlay,
55
56
  useTourTarget: () => useTourTarget,
56
- useViewportRect: () => useViewportRect
57
+ useViewportRect: () => useViewportRect,
58
+ waitForDom: () => waitForDom
57
59
  });
58
60
  module.exports = __toCommonJS(index_exports);
59
61
 
@@ -2872,6 +2874,34 @@ var useRadixDialogAdapter = (options = {}) => {
2872
2874
  };
2873
2875
  };
2874
2876
 
2877
+ // src/adapters/radixDialogHelpers.ts
2878
+ var waitForDom = () => new Promise(
2879
+ (resolve) => requestAnimationFrame(() => setTimeout(resolve, 0))
2880
+ );
2881
+ var createRadixDialogHelpers = (params) => {
2882
+ const { contentSelector, triggerSelector } = params;
2883
+ const isOpen = () => {
2884
+ if (typeof document === "undefined") return false;
2885
+ return document.querySelector(contentSelector) !== null;
2886
+ };
2887
+ const open = async () => {
2888
+ if (typeof document === "undefined") return;
2889
+ if (isOpen()) return;
2890
+ await waitForDom();
2891
+ if (isOpen()) return;
2892
+ const trigger = document.querySelector(triggerSelector);
2893
+ trigger?.click();
2894
+ await waitForDom();
2895
+ };
2896
+ const close = async () => {
2897
+ if (typeof document === "undefined") return;
2898
+ if (!isOpen()) return;
2899
+ document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
2900
+ await waitForDom();
2901
+ };
2902
+ return { isOpen, open, close };
2903
+ };
2904
+
2875
2905
  // src/hooks/useDelayAdvance.ts
2876
2906
  var import_react18 = require("react");
2877
2907
  var getTimestamp = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
@@ -4286,6 +4316,7 @@ var useHudMotion = () => {
4286
4316
  TourPopoverPortal,
4287
4317
  TourProvider,
4288
4318
  createPathString,
4319
+ createRadixDialogHelpers,
4289
4320
  createWaitForPredicateController,
4290
4321
  defaultAnimationAdapter,
4291
4322
  defaultLabels,
@@ -4313,5 +4344,6 @@ var useHudMotion = () => {
4313
4344
  useTourLabels,
4314
4345
  useTourOverlay,
4315
4346
  useTourTarget,
4316
- useViewportRect
4347
+ useViewportRect,
4348
+ waitForDom
4317
4349
  });
package/dist/index.d.ts CHANGED
@@ -18,6 +18,8 @@ export { useHudTargetIssue } from './hooks/useHudTargetIssue';
18
18
  export type { HudTargetIssue, UseHudTargetIssueOptions, UseHudTargetIssueResult, } from './hooks/useHudTargetIssue';
19
19
  export { useRadixDialogAdapter } from './adapters/radixDialog';
20
20
  export type { RadixDialogAdapterResult, UseRadixDialogAdapterOptions, } from './adapters/radixDialog';
21
+ export { createRadixDialogHelpers, waitForDom } from './adapters/radixDialogHelpers';
22
+ export type { CreateRadixDialogHelpersParams, RadixDialogHelpers, } from './adapters/radixDialogHelpers';
21
23
  export { useTourFocusDominance } from './hooks/useTourFocusDominance';
22
24
  export type { UseTourFocusDominanceOptions, UseTourFocusDominanceResult, } from './hooks/useTourFocusDominance';
23
25
  export { useTourControls } from './hooks/useTourControls';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAChE,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,WAAW,CAAA;AAElB,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACvD,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AACrD,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEhF,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,YAAY,EACV,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,2BAA2B,CAAA;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,YAAY,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,YAAY,EACV,kBAAkB,EAClB,wBAAwB,EACxB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,wBAAwB,CAAA;AAE/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,YAAY,EACV,cAAc,EACd,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,2BAA2B,CAAA;AAElC,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAC9D,YAAY,EACV,wBAAwB,EACxB,4BAA4B,GAC7B,MAAM,wBAAwB,CAAA;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AACrE,YAAY,EACV,4BAA4B,EAC5B,2BAA2B,GAC5B,MAAM,+BAA+B,CAAA;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,YAAY,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAA;AAC9D,YAAY,EACV,oBAAoB,EACpB,kCAAkC,GACnC,MAAM,8BAA8B,CAAA;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,YAAY,EACV,qBAAqB,EACrB,sBAAsB,EACtB,4BAA4B,GAC7B,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAA;AAChE,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAE1E,OAAO,EACL,wBAAwB,EACxB,uBAAuB,EACvB,6BAA6B,EAC7B,mBAAmB,EACnB,4BAA4B,GAC7B,MAAM,2BAA2B,CAAA;AAClC,YAAY,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAA;AAElC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAA;AACzE,YAAY,EACV,6BAA6B,EAC7B,6BAA6B,GAC9B,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAEzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,0BAA0B,CAAA;AAC3E,YAAY,EACV,0BAA0B,EAC1B,iCAAiC,GAClC,MAAM,0BAA0B,CAAA;AAGjC,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
package/dist/index.mjs CHANGED
@@ -2569,6 +2569,34 @@ var useRadixDialogAdapter = (options = {}) => {
2569
2569
  };
2570
2570
  };
2571
2571
 
2572
+ // src/adapters/radixDialogHelpers.ts
2573
+ var waitForDom = () => new Promise(
2574
+ (resolve) => requestAnimationFrame(() => setTimeout(resolve, 0))
2575
+ );
2576
+ var createRadixDialogHelpers = (params) => {
2577
+ const { contentSelector, triggerSelector } = params;
2578
+ const isOpen = () => {
2579
+ if (typeof document === "undefined") return false;
2580
+ return document.querySelector(contentSelector) !== null;
2581
+ };
2582
+ const open = async () => {
2583
+ if (typeof document === "undefined") return;
2584
+ if (isOpen()) return;
2585
+ await waitForDom();
2586
+ if (isOpen()) return;
2587
+ const trigger = document.querySelector(triggerSelector);
2588
+ trigger?.click();
2589
+ await waitForDom();
2590
+ };
2591
+ const close = async () => {
2592
+ if (typeof document === "undefined") return;
2593
+ if (!isOpen()) return;
2594
+ document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
2595
+ await waitForDom();
2596
+ };
2597
+ return { isOpen, open, close };
2598
+ };
2599
+
2572
2600
  // src/hooks/useDelayAdvance.ts
2573
2601
  import { useEffect as useEffect13, useMemo as useMemo10, useState as useState10 } from "react";
2574
2602
  var getTimestamp = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
@@ -3988,6 +4016,7 @@ export {
3988
4016
  TourPopoverPortal,
3989
4017
  TourProvider,
3990
4018
  createPathString,
4019
+ createRadixDialogHelpers,
3991
4020
  createWaitForPredicateController,
3992
4021
  defaultAnimationAdapter,
3993
4022
  defaultLabels,
@@ -4015,5 +4044,6 @@ export {
4015
4044
  useTourLabels,
4016
4045
  useTourOverlay,
4017
4046
  useTourTarget,
4018
- useViewportRect
4047
+ useViewportRect,
4048
+ waitForDom
4019
4049
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flowsterix/react",
3
- "version": "0.8.1",
3
+ "version": "0.9.0",
4
4
  "description": "React bindings for Flowsterix - guided tours and onboarding flows",
5
5
  "license": "MIT",
6
6
  "repository": {