@flowsterix/react 0.14.0 → 0.14.1

package/dist/components/TourPopoverPortal.d.ts

@@ -56,7 +56,13 @@ export interface TourPopoverPortalProps {
      * The backdrop will show but the popover content remains invisible.
      */
     isInGracePeriod?: boolean;
+    /**
+     * Callback reporting the popover's rendered height (plus margin).
+     * Use as `scrollLockBottomInset` so constrained scroll lets users
+     * reach all highlighted content above the popover.
+     */
+    onHeightChange?: (height: number) => void;
 }
-export declare const TourPopoverPortal: ({ target, children, offset, width, maxWidth, zIndex, placement, role, ariaLabel, ariaDescribedBy, ariaModal, descriptionId, descriptionText, onContainerChange, layoutId, containerComponent, contentComponent, transitionsOverride, isInGracePeriod, }: TourPopoverPortalProps) => import("react").ReactPortal | null;
+export declare const TourPopoverPortal: ({ target, children, offset, width, maxWidth, zIndex, placement, role, ariaLabel, ariaDescribedBy, ariaModal, descriptionId, descriptionText, onContainerChange, layoutId, containerComponent, contentComponent, transitionsOverride, isInGracePeriod, onHeightChange, }: TourPopoverPortalProps) => import("react").ReactPortal | null;
 export {};
 //# sourceMappingURL=TourPopoverPortal.d.ts.map

package/dist/components/TourPopoverPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TourPopoverPortal.d.ts","sourceRoot":"","sources":["../../src/components/TourPopoverPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAA;AAYd,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAc,MAAM,cAAc,CAAA;AAExE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAuB7E,KAAK,kBAAkB,GAAG,WAAW,GACnC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAC3C,KAAK,CAAC,EAAE,aAAa,GAAG,WAAW,CAAA;CACpC,CAAA;AAEH,KAAK,sBAAsB,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAAA;AAoB/D,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,sBAAsB,CAAA;IACjC,OAAO,EAAE,sBAAsB,CAAA;IAC/B,cAAc,EAAE,kBAAkB,GAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QACxB,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;QAC7B,KAAK,EAAE,aAAa,CAAA;KACrB,CAAA;IACH,YAAY,EAAE,kBAAkB,GAC9B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAA;IACnD,UAAU,EAAE,qBAAqB,CAAA;IACjC,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,OAAO,CAAA;IACvB,eAAe,EAAE;QACf,IAAI,EAAE,QAAQ,CAAA;QACd,YAAY,EAAE,MAAM,CAAA;QACpB,KAAK,EAAE,aAAa,CAAA;QACpB,aAAa,EAAE,mBAAmB,CAAC,iBAAiB,CAAC,CAAA;KACtD,CAAA;IACD,gBAAgB,EAAE;QAChB,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,SAAS,CAAA;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,sBAAsB,CAAA;IAC3C,gBAAgB,CAAC,EAAE,sBAAsB,CAAA;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAA;IAC1D;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,eAAO,MAAM,iBAAiB,GAAI,yPAoB/B,sBAAsB,uCAstBxB,CAAA"}
+{"version":3,"file":"TourPopoverPortal.d.ts","sourceRoot":"","sources":["../../src/components/TourPopoverPortal.tsx"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -3599,7 +3599,8 @@ var TourPopoverPortal = ({
   containerComponent,
   contentComponent,
   transitionsOverride,
-  isInGracePeriod = false
+  isInGracePeriod = false,
+  onHeightChange
 }) => {
   if (!_chunk7SAJNRGZcjs.isBrowser) return null;
   const host = _chunk7SAJNRGZcjs.portalHost.call(void 0, );
@@ -3713,14 +3714,20 @@ var TourPopoverPortal = ({
       floatingPositionCache.set(cacheKey, floatingPosition);
     }
   }, [floatingPosition, target.isScreen, target.stepId]);
-  const dockedPosition = _react.useMemo.call(void 0, 
-    () => ({
+  const dockedPosition = _react.useMemo.call(void 0, () => {
+    if (floatingSize) {
+      return {
+        top: viewport.height - DOCKED_MARGIN - floatingSize.height,
+        left: viewport.width - DOCKED_MARGIN - floatingSize.width,
+        transform: "translate3d(0px, 0px, 0px)"
+      };
+    }
+    return {
       top: viewport.height - DOCKED_MARGIN,
       left: viewport.width - DOCKED_MARGIN,
       transform: "translate3d(-100%, -100%, 0px)"
-    }),
-    [viewport.height, viewport.width]
-  );
+    };
+  }, [viewport.height, viewport.width, floatingSize]);
   const mobilePosition = _react.useMemo.call(void 0, 
     () => ({
       top: viewport.height - MOBILE_HORIZONTAL_GUTTER,
@@ -3734,6 +3741,10 @@ var TourPopoverPortal = ({
       setFloatingPosition(dockedPosition);
     }
   }, [dockedPosition, layoutMode]);
+  _react.useEffect.call(void 0, () => {
+    if (!onHeightChange) return;
+    onHeightChange(floatingSize ? floatingSize.height + DOCKED_MARGIN : 0);
+  }, [floatingSize, onHeightChange]);
   _react.useEffect.call(void 0, () => {
     if (layoutMode === "mobile") {
       setFloatingPosition(mobilePosition);

package/dist/index.mjs

@@ -3599,7 +3599,8 @@ var TourPopoverPortal = ({
   containerComponent,
   contentComponent,
   transitionsOverride,
-  isInGracePeriod = false
+  isInGracePeriod = false,
+  onHeightChange
 }) => {
   if (!isBrowser) return null;
   const host = portalHost();
@@ -3713,14 +3714,20 @@ var TourPopoverPortal = ({
       floatingPositionCache.set(cacheKey, floatingPosition);
     }
   }, [floatingPosition, target.isScreen, target.stepId]);
-  const dockedPosition = useMemo13(
-    () => ({
+  const dockedPosition = useMemo13(() => {
+    if (floatingSize) {
+      return {
+        top: viewport.height - DOCKED_MARGIN - floatingSize.height,
+        left: viewport.width - DOCKED_MARGIN - floatingSize.width,
+        transform: "translate3d(0px, 0px, 0px)"
+      };
+    }
+    return {
       top: viewport.height - DOCKED_MARGIN,
       left: viewport.width - DOCKED_MARGIN,
       transform: "translate3d(-100%, -100%, 0px)"
-    }),
-    [viewport.height, viewport.width]
-  );
+    };
+  }, [viewport.height, viewport.width, floatingSize]);
   const mobilePosition = useMemo13(
     () => ({
       top: viewport.height - MOBILE_HORIZONTAL_GUTTER,
@@ -3734,6 +3741,10 @@ var TourPopoverPortal = ({
       setFloatingPosition(dockedPosition);
     }
   }, [dockedPosition, layoutMode]);
+  useEffect17(() => {
+    if (!onHeightChange) return;
+    onHeightChange(floatingSize ? floatingSize.height + DOCKED_MARGIN : 0);
+  }, [floatingSize, onHeightChange]);
   useEffect17(() => {
     if (layoutMode === "mobile") {
       setFloatingPosition(mobilePosition);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowsterix/react",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "React bindings for Flowsterix - guided tours and onboarding flows",
   "license": "MIT",
   "repository": {