Fix issue with padding calculations

apps/docs/package.json

@@ -10,13 +10,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^2.13.10",
+    "@codesandbox/sandpack-react": "^2.14.4",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@vercel/og": "^0.6.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.2.6",
-    "next": "^14.2.3",
+    "framer-motion": "^11.2.11",
+    "next": "^14.2.4",
     "nextra": "2.13.4",
     "nextra-theme-docs": "2.13.4",
     "react": "^18.3.1",
@@ -26,11 +26,11 @@
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
     "@types/body-scroll-lock": "^3.1.2",
-    "@types/node": "^20.12.12",
+    "@types/node": "^20.14.6",
     "@types/react": "^18.3.3",
     "autoprefixer": "^10.4.19",
-    "eslint": "^9.3.0",
+    "eslint": "^9.5.0",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.4"
   }
 }

apps/web/components/config.tsx

@@ -8,6 +8,7 @@ const tourConfig: StepType[] = [
     selector: '[data-tut="reactour__iso"]',
     content:
       "Ok, let's start with the name of the Tour that is about to begin.",
+    position: 'right',
   },
   {
     selector: '[data-tut="reactour__logo"]',

apps/web/package.json

@@ -10,7 +10,7 @@
     "export": "rm -rf ../../docs && next build && next export  -o ../../docs"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^2.13.10",
+    "@codesandbox/sandpack-react": "^2.14.4",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
@@ -19,20 +19,20 @@
     "@reactour/tour": "*",
     "@reactour/utils": "*",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "framer-motion": "^11.2.6",
+    "framer-motion": "^11.2.11",
     "modaaals": "^1.1.2",
-    "next": "14.2.3",
+    "next": "14.2.4",
     "react": "18.3.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@reactour/tsconfig": "*",
     "@types/body-scroll-lock": "^3.1.2",
-    "@types/node": "^20.12.12",
+    "@types/node": "^20.14.6",
     "@types/react": "18.3.3",
     "config": "3.3.11",
-    "eslint": "9.3.0",
+    "eslint": "9.5.0",
     "eslint-plugin-prettier": "^5.1.3",
     "next-transpile-modules": "10.0.1",
     "typescript": "^5.4.5"

package.json

@@ -18,8 +18,8 @@
   },
   "devDependencies": {
     "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.2.5",
-    "turbo": "^1.13.3"
+    "prettier": "^3.3.2",
+    "turbo": "^2.0.4"
   },
   "engines": {
     "npm": ">=7.0.0",

packages/config/package.json

@@ -7,8 +7,8 @@
     "eslint-preset.js"
   ],
   "dependencies": {
-    "eslint-config-next": "^14.2.3",
+    "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "7.34.1"
+    "eslint-plugin-react": "7.34.3"
   }
 }

packages/mask/package.json

@@ -12,7 +12,7 @@
     "@types/react-dom": "^18.3.0",
     "config": "3.3.11",
     "react": "^18.3.1",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5"
   },
   "dependencies": {

packages/popover/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reactour/popover
 
+## 1.1.2
+
+### Patch Changes
+
+- Fix issue with padding calculations
+
 ## 1.1.1
 
 ### Patch Changes

packages/popover/Popover.tsx

@@ -33,10 +33,11 @@ const Popover: React.FC<PopoverProps> = ({
   const helperRect = useRect(helperRef, refresher)
   const { width: helperWidth, height: helperHeight } = helperRect
 
-  const targetLeft = sizes?.left
-  const targetTop = sizes?.top
-  const targetRight = sizes?.right
-  const targetBottom = sizes?.bottom
+  const [pt, pr, pb, pl] = getPadding(padding)
+  const targetLeft = sizes?.left - pl
+  const targetTop = sizes?.top - pt
+  const targetRight = sizes?.right + pr
+  const targetBottom = sizes?.bottom + pb
 
   const position =
     providedPosition && typeof providedPosition === 'function'
@@ -64,8 +65,6 @@ const Popover: React.FC<PopoverProps> = ({
     bottom: windowHeight - targetBottom,
   }
 
-  const [pt, pr, pb, pl] = getPadding(padding)
-
   const couldPositionAt = (
     position: string,
     isOutsideX: boolean,
@@ -126,7 +125,7 @@ const Popover: React.FC<PopoverProps> = ({
       targetBottom + helperHeight,
       windowHeight
     )
-
+    console.log({ isHelperOutsideX, isHelperOutsideY })
     const x = isHelperOutsideX
       ? Math.min(targetLeft, windowWidth - helperWidth)
       : Math.max(targetLeft, 0)
@@ -136,6 +135,7 @@ const Popover: React.FC<PopoverProps> = ({
         ? Math.max(targetBottom - helperHeight, 0)
         : Math.max(targetTop, 0)
       : targetTop
+    console.log(y)
 
     if (isHelperOutsideY) {
       if (helperHeight > available.bottom) {

packages/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactour/popover",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,7 +12,7 @@
     "@types/react-dom": "^18.3.0",
     "config": "3.3.11",
     "react": "^18.3.1",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5"
   },
   "dependencies": {

packages/tour/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @reactour/tour
 
+## 3.6.3
+
+### Patch Changes
+
+- Fix issue with padding calculations
+- Updated dependencies
+  - @reactour/popover@1.1.2
+
 ## 3.6.2
 
 ### Patch Changes

packages/tour/Tour.tsx

@@ -103,10 +103,10 @@ const Tour: React.FC<TourProps> = ({
     typeof step?.stepInteraction === 'boolean'
       ? !step?.stepInteraction
       : disableInteraction
-      ? typeof disableInteraction === 'boolean'
-        ? disableInteraction
-        : disableInteraction(clickProps)
-      : false
+        ? typeof disableInteraction === 'boolean'
+          ? disableInteraction
+          : disableInteraction(clickProps)
+        : false
 
   useEffect(() => {
     if (step?.action && typeof step?.action === 'function') {
@@ -127,8 +127,8 @@ const Tour: React.FC<TourProps> = ({
   const popoverPosition = transition
     ? onTransition
     : step?.position
-    ? step?.position
-    : position
+      ? step?.position
+      : position
 
   const TourWrapper = Wrapper ? Wrapper : React.Fragment
 

packages/tour/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactour/tour",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -12,7 +12,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5"
   },
   "dependencies": {

packages/utils/package.json

@@ -12,7 +12,7 @@
     "@types/react-dom": "^18.3.0",
     "config": "3.3.11",
     "react": "^18.3.1",
-    "tsup": "^8.0.2",
+    "tsup": "^8.1.0",
     "typescript": "^5.4.5"
   },
   "dependencies": {

turbo.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "pipeline": {
+  "tasks": {
     "build": {
       "outputs": ["dist/**", ".next/**"],
       "dependsOn": ["^build"]