@planningcenter/tapestry-migration-cli 2.6.0-rc.1 → 3.0.0-rc.3

package/dist/tapestry-react-shim.cjs

@@ -2725,8 +2725,8 @@ const tokens = {
   "--t-border-radius-lg": "8px",
   "--t-border-radius-xl": "16px",
   "--t-border-radius-round": "56px",
-  "--t-border-radius-default": "4px",
-  "--t-border-width-default": "1px",
+  "--t-border-radius": "4px",
+  "--t-border-width": "1px",
   "--t-border-width-thick": "2px",
   "--t-border-size-default": "1px",
   "--t-border-size-thick": "2px",
@@ -2771,13 +2771,13 @@ const tokens = {
   "--t-avatar-size-48": "48px",
   "--t-avatar-size-72": "72px",
   "--t-avatar-size-112": "112px",
-  "--t-text-color-default-headline": "hsl(0, 0%, 12%)",
-  "--t-text-color-default-primary": "hsl(0, 0%, 24%)",
-  "--t-text-color-default-secondary": "hsl(0, 0%, 42%)",
-  "--t-text-color-default-disabled": "hsl(0, 0%, 81%)",
-  "--t-text-color-default-placeholder": "hsl(0, 0%, 58%)",
-  "--t-text-color-default-inverted": "hsl(0, 0%, 100%)",
-  "--t-text-color-interaction-primary": "hsl(204, 100%, 40%)",
+  "--t-text-color-headline": "hsl(0, 0%, 12%)",
+  "--t-text-color": "hsl(0, 0%, 24%)",
+  "--t-text-color-secondary": "hsl(0, 0%, 42%)",
+  "--t-text-color-disabled": "hsl(0, 0%, 81%)",
+  "--t-text-color-placeholder": "hsl(0, 0%, 58%)",
+  "--t-text-color-inverted": "hsl(0, 0%, 100%)",
+  "--t-text-color-interaction": "hsl(204, 100%, 40%)",
   "--t-text-color-interaction-hover": "hsl(204, 100%, 35%)",
   "--t-text-color-interaction-active": "hsl(204, 100%, 30%)",
   "--t-text-color-interaction-visited": "hsl(204, 100%, 30%)",
@@ -2808,21 +2808,21 @@ const tokens = {
   "--t-text-color-tag-bold-pink": "hsl(327, 88%, 20%)",
   "--t-text-color-tag-bold-purple": "hsl(268, 71%, 27%)",
   "--t-text-color-tag-bold-magenta": "hsl(285, 71%, 20%)",
-  "--t-icon-color-default-primary": "hsl(0, 0%, 24%)",
-  "--t-icon-color-default-secondary": "hsl(0, 0%, 42%)",
-  "--t-icon-color-default-dim": "hsl(0, 0%, 58%)",
-  "--t-icon-color-default-disabled": "hsl(0, 0%, 81%)",
-  "--t-icon-color-default-inverted": "hsl(0, 0%, 100%)",
-  "--t-icon-color-status-neutral-primary": "hsl(0, 0%, 42%)",
+  "--t-icon-color": "hsl(0, 0%, 24%)",
+  "--t-icon-color-secondary": "hsl(0, 0%, 42%)",
+  "--t-icon-color-dim": "hsl(0, 0%, 58%)",
+  "--t-icon-color-disabled": "hsl(0, 0%, 81%)",
+  "--t-icon-color-inverted": "hsl(0, 0%, 100%)",
+  "--t-icon-color-status-neutral": "hsl(0, 0%, 42%)",
   "--t-icon-color-status-neutral-secondary": "hsl(0, 0%, 58%)",
   "--t-icon-color-status-neutral-bold": "hsl(0, 0%, 24%)",
   "--t-icon-color-status-neutral-dark": "hsl(0, 0%, 24%)",
-  "--t-icon-color-status-info-primary": "hsl(204, 100%, 40%)",
+  "--t-icon-color-status-info": "hsl(204, 100%, 40%)",
   "--t-icon-color-status-info-secondary": "hsl(204, 100%, 40%)",
-  "--t-icon-color-status-success-primary": "hsl(96, 57%, 33%)",
+  "--t-icon-color-status-success": "hsl(96, 57%, 33%)",
   "--t-icon-color-status-success-secondary": "hsl(97, 57%, 40%)",
-  "--t-icon-color-status-warning-primary": "hsl(42, 84%, 49%)",
-  "--t-icon-color-status-error-primary": "hsl(8, 60%, 47%)",
+  "--t-icon-color-status-warning": "hsl(42, 84%, 49%)",
+  "--t-icon-color-status-error": "hsl(8, 60%, 47%)",
   "--t-fill-color-neutral-100": "hsl(0, 0%, 100%)",
   "--t-fill-color-neutral-000": "hsl(0, 0%, 12%)",
   "--t-fill-color-neutral-010": "hsl(0, 0%, 24%)",
@@ -2835,36 +2835,41 @@ const tokens = {
   "--t-fill-color-neutral-070": "hsl(0, 0%, 95%)",
   "--t-fill-color-neutral-080": "hsl(0, 0%, 97%)",
   "--t-fill-color-neutral-090": "hsl(0, 0%, 98%)",
-  "--t-fill-color-interaction-default": "hsl(204, 100%, 40%)",
+  "--t-fill-color-interaction": "hsl(204, 100%, 40%)",
   "--t-fill-color-interaction-hover": "hsl(204, 100%, 35%)",
   "--t-fill-color-interaction-active": "hsl(204, 100%, 30%)",
   "--t-fill-color-interaction-disabled": "hsl(0, 0%, 81%)",
   "--t-fill-color-control-neutral-off": "hsl(0, 0%, 58%)",
   "--t-fill-color-control-neutral-on": "hsl(0, 0%, 24%)",
-  "--t-fill-color-control-primary": "hsl(204, 100%, 40%)",
+  "--t-fill-color-control": "hsl(204, 100%, 40%)",
   "--t-fill-color-control-secondary": "hsl(97, 57%, 40%)",
   "--t-fill-color-control-error": "hsl(8, 60%, 47%)",
   "--t-fill-color-control-disabled": "hsl(0, 0%, 81%)",
-  "--t-fill-color-status-neutral-solid": "hsl(0, 0%, 42%)",
+  "--t-fill-color-status-neutral": "hsl(0, 0%, 42%)",
   "--t-fill-color-status-neutral-ghost": "hsl(0, 0%, 93%)",
   "--t-fill-color-status-neutral-dim": "hsl(0, 0%, 97%)",
-  "--t-fill-color-status-info-solid": "hsl(204, 100%, 40%)",
+  "--t-fill-color-status-neutral-solid": "hsl(0, 0%, 42%)",
+  "--t-fill-color-status-info": "hsl(204, 100%, 40%)",
   "--t-fill-color-status-info-ghost": "hsl(203, 94%, 94%)",
   "--t-fill-color-status-info-dim": "hsl(204, 100%, 97%)",
-  "--t-fill-color-status-success-solid": "hsl(96, 57%, 33%)",
+  "--t-fill-color-status-info-solid": "hsl(204, 100%, 40%)",
+  "--t-fill-color-status-success": "hsl(96, 57%, 33%)",
   "--t-fill-color-status-success-ghost": "hsl(97, 57%, 90%)",
   "--t-fill-color-status-success-dim": "hsl(96, 60%, 95%)",
-  "--t-fill-color-status-warning-solid": "hsl(42, 84%, 63%)",
+  "--t-fill-color-status-success-solid": "hsl(96, 57%, 33%)",
+  "--t-fill-color-status-warning": "hsl(42, 84%, 63%)",
   "--t-fill-color-status-warning-ghost": "hsl(42, 87%, 94%)",
   "--t-fill-color-status-warning-dim": "hsl(42, 87%, 97%)",
-  "--t-fill-color-status-error-solid": "hsl(8, 60%, 47%)",
+  "--t-fill-color-status-warning-solid": "hsl(42, 84%, 63%)",
+  "--t-fill-color-status-error": "hsl(8, 60%, 47%)",
   "--t-fill-color-status-error-ghost": "hsl(9, 59%, 93%)",
   "--t-fill-color-status-error-dim": "hsl(7, 60%, 97%)",
+  "--t-fill-color-status-error-solid": "hsl(8, 60%, 47%)",
   "--t-fill-color-alert-info": "hsl(204, 94%, 49%)",
   "--t-fill-color-alert-success": "hsl(122, 60%, 41%)",
   "--t-fill-color-alert-warning": "hsl(43, 96%, 58%)",
   "--t-fill-color-alert-error": "hsl(4, 77%, 59%)",
-  "--t-fill-color-tooltip-primary": "hsla(0, 0%, 12%, 0.9)",
+  "--t-fill-color-tooltip": "hsla(0, 0%, 12%, 0.9)",
   "--t-fill-color-product-accounts-010": "hsl(212, 54%, 93%)",
   "--t-fill-color-product-accounts-020": "hsl(209, 53%, 90%)",
   "--t-fill-color-product-accounts-030": "hsl(210, 56%, 70%)",
@@ -2945,7 +2950,7 @@ const tokens = {
   "--t-fill-color-product-services-060": "hsl(89, 62%, 31%)",
   "--t-fill-color-product-services-070": "hsl(89, 62%, 26%)",
   "--t-fill-color-product-services-080": "hsl(89, 63%, 21%)",
-  "--t-fill-color-product-staff-base": "hsl(328, 100%, 45%)",
+  "--t-fill-color-product-staff": "hsl(328, 100%, 45%)",
   "--t-fill-color-product-staff-dark": "hsl(328, 100%, 38%)",
   "--t-fill-color-product-staff-darker": "hsl(328, 100%, 33%)",
   "--t-fill-color-product-accounts-gradient-brand": "linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%))",
@@ -3025,36 +3030,44 @@ const tokens = {
   "--t-fill-color-tag-indigo-020": "hsl(233, 79%, 87%)",
   "--t-fill-color-tag-indigo-030": "hsl(233, 77%, 81%)",
   "--t-fill-color-tag-indigo-040": "hsl(236, 79%, 74%)",
-  "--t-fill-color-button-neutral-solid-default": "hsl(0, 0%, 93%)",
+  "--t-fill-color-button-neutral-solid": "hsl(0, 0%, 93%)",
   "--t-fill-color-button-neutral-solid-hover": "hsl(0, 0%, 88%)",
   "--t-fill-color-button-neutral-solid-active": "hsl(0, 0%, 81%)",
   "--t-fill-color-button-neutral-solid-disabled": "hsl(0, 0%, 95%)",
-  "--t-fill-color-button-neutral-outline-dim-default": "hsla(0, 0%, 100%, 0)",
-  "--t-fill-color-button-neutral-outline-dim-hover": "hsl(0, 0%, 95%)",
-  "--t-fill-color-button-neutral-outline-dim-active": "hsl(0, 0%, 93%)",
-  "--t-fill-color-button-neutral-outline-dim-disabled": "hsl(0, 0%, 98%)",
-  "--t-fill-color-button-neutral-outline-dim-disabled-solid": "hsl(0, 0%, 98%)",
-  "--t-fill-color-button-neutral-ghost-default": "hsla(0, 0%, 100%, 0)",
+  "--t-fill-color-button-neutral-outline": "hsla(0, 0%, 100%, 0)",
+  "--t-fill-color-button-neutral-outline-hover": "hsl(0, 0%, 95%)",
+  "--t-fill-color-button-neutral-outline-active": "hsl(0, 0%, 93%)",
+  "--t-fill-color-button-neutral-outline-disabled": "hsl(0, 0%, 98%)",
+  "--t-fill-color-button-neutral-ghost": "hsla(0, 0%, 100%, 0)",
   "--t-fill-color-button-neutral-ghost-hover": "hsl(0, 0%, 95%)",
   "--t-fill-color-button-neutral-ghost-active": "hsl(0, 0%, 93%)",
   "--t-fill-color-button-neutral-ghost-disabled": "hsla(0, 0%, 100%, 0)",
   "--t-fill-color-button-neutral-ghost-disabled-solid": "hsl(0, 0%, 98%)",
-  "--t-fill-color-button-neutral-responsive-header-default": "hsla(0, 0%, 0%, 0.1)",
+  "--t-fill-color-button-neutral-responsive-header": "hsla(0, 0%, 0%, 0.1)",
   "--t-fill-color-button-neutral-responsive-header-hover": "hsla(0, 0%, 0%, 0.2)",
   "--t-fill-color-button-neutral-responsive-header-active": "hsla(0, 0%, 0%, 0.3)",
   "--t-fill-color-button-neutral-responsive-header-disabled": "hsla(0, 0%, 0%, 0.05)",
-  "--t-fill-color-button-interaction-solid-default": "hsl(204, 100%, 40%)",
+  "--t-fill-color-button-neutral-outline-dim-default": "hsla(0, 0%, 100%, 0)",
+  "--t-fill-color-button-neutral-outline-dim-hover": "hsl(0, 0%, 95%)",
+  "--t-fill-color-button-neutral-outline-dim-active": "hsl(0, 0%, 93%)",
+  "--t-fill-color-button-neutral-outline-dim-disabled": "hsl(0, 0%, 98%)",
+  "--t-fill-color-button-neutral-outline-dim-disabled-solid": "hsl(0, 0%, 98%)",
+  "--t-fill-color-button-interaction-solid": "hsl(204, 100%, 40%)",
   "--t-fill-color-button-interaction-solid-hover": "hsl(204, 100%, 35%)",
   "--t-fill-color-button-interaction-solid-active": "hsl(204, 100%, 30%)",
   "--t-fill-color-button-interaction-solid-disabled": "hsl(0, 0%, 95%)",
+  "--t-fill-color-button-interaction-outline": "hsla(0, 0%, 100%, 0)",
+  "--t-fill-color-button-interaction-outline-hover": "hsl(204, 100%, 97%)",
+  "--t-fill-color-button-interaction-outline-active": "hsl(203, 94%, 94%)",
+  "--t-fill-color-button-interaction-outline-disabled": "hsl(0, 0%, 98%)",
+  "--t-fill-color-button-interaction-ghost": "hsla(0, 0%, 100%, 0)",
+  "--t-fill-color-button-interaction-ghost-hover": "hsl(204, 100%, 97%)",
+  "--t-fill-color-button-interaction-ghost-active": "hsl(203, 94%, 94%)",
+  "--t-fill-color-button-interaction-ghost-disabled": "hsla(0, 0%, 100%, 0)",
   "--t-fill-color-button-interaction-outline-dim-default": "hsla(0, 0%, 100%, 0)",
   "--t-fill-color-button-interaction-outline-dim-hover": "hsl(204, 100%, 97%)",
   "--t-fill-color-button-interaction-outline-dim-active": "hsl(203, 94%, 94%)",
   "--t-fill-color-button-interaction-outline-dim-disabled": "hsl(0, 0%, 98%)",
-  "--t-fill-color-button-interaction-ghost-default": "hsla(0, 0%, 100%, 0)",
-  "--t-fill-color-button-interaction-ghost-hover": "hsl(204, 100%, 97%)",
-  "--t-fill-color-button-interaction-ghost-active": "hsl(203, 94%, 94%)",
-  "--t-fill-color-button-interaction-ghost-disabled": "hsla(0, 0%, 100%, 0)",
   "--t-fill-color-button-create-solid-default": "hsl(96, 57%, 33%)",
   "--t-fill-color-button-create-solid-hover": "hsl(97, 57%, 28%)",
   "--t-fill-color-button-create-solid-active": "hsl(97, 57%, 23%)",
@@ -3063,19 +3076,23 @@ const tokens = {
   "--t-fill-color-button-create-ghost-hover": "hsl(96, 60%, 95%)",
   "--t-fill-color-button-create-ghost-active": "hsl(97, 57%, 90%)",
   "--t-fill-color-button-create-ghost-disabled": "hsla(0, 0%, 100%, 0)",
-  "--t-fill-color-button-delete-solid-default": "hsl(8, 60%, 47%)",
+  "--t-fill-color-button-delete-solid": "hsl(8, 60%, 47%)",
   "--t-fill-color-button-delete-solid-hover": "hsl(8, 60%, 45%)",
   "--t-fill-color-button-delete-solid-active": "hsl(8, 60%, 40%)",
   "--t-fill-color-button-delete-solid-disabled": "hsl(0, 0%, 95%)",
+  "--t-fill-color-button-delete-outline": "hsla(0, 0%, 100%, 0)",
+  "--t-fill-color-button-delete-outline-hover": "hsl(7, 60%, 97%)",
+  "--t-fill-color-button-delete-outline-active": "hsl(9, 59%, 93%)",
+  "--t-fill-color-button-delete-outline-disabled": "hsl(0, 0%, 98%)",
+  "--t-fill-color-button-delete-ghost": "hsla(0, 0%, 100%, 0)",
+  "--t-fill-color-button-delete-ghost-hover": "hsl(7, 60%, 97%)",
+  "--t-fill-color-button-delete-ghost-active": "hsl(9, 59%, 93%)",
+  "--t-fill-color-button-delete-ghost-disabled": "hsla(0, 0%, 100%, 0)",
   "--t-fill-color-button-delete-outline-dim-default": "hsla(0, 0%, 100%, 0)",
   "--t-fill-color-button-delete-outline-dim-hover": "hsl(7, 60%, 97%)",
   "--t-fill-color-button-delete-outline-dim-active": "hsl(9, 59%, 93%)",
   "--t-fill-color-button-delete-outline-dim-disabled": "hsl(0, 0%, 98%)",
-  "--t-fill-color-button-delete-ghost-default": "hsla(0, 0%, 100%, 0)",
-  "--t-fill-color-button-delete-ghost-hover": "hsl(7, 60%, 97%)",
-  "--t-fill-color-button-delete-ghost-active": "hsl(9, 59%, 93%)",
-  "--t-fill-color-button-delete-ghost-disabled": "hsla(0, 0%, 100%, 0)",
-  "--t-fill-color-button-pill-default": "hsl(0, 0%, 93%)",
+  "--t-fill-color-button-pill": "hsl(0, 0%, 93%)",
   "--t-fill-color-button-pill-hover": "hsl(0, 0%, 88%)",
   "--t-fill-color-button-pill-active": "hsl(0, 0%, 88%)",
   "--t-fill-color-button-pill-disabled": "hsl(0, 0%, 93%)",
@@ -3108,13 +3125,13 @@ const tokens = {
   "--t-fill-color-transparency-dark-static-090": "hsla(0, 0%, 0%, 0.9)",
   "--t-surface-color-card": "hsl(0, 0%, 100%)",
   "--t-surface-color-canvas": "hsl(0, 0%, 100%)",
-  "--t-border-color-default-base": "hsl(0, 0%, 88%)",
-  "--t-border-color-default-dark": "hsl(0, 0%, 81%)",
-  "--t-border-color-default-darker": "hsl(0, 0%, 68%)",
-  "--t-border-color-default-darkest": "hsl(0, 0%, 58%)",
-  "--t-border-color-default-disabled": "hsl(0, 0%, 88%)",
-  "--t-border-color-default-dim": "hsl(0, 0%, 95%)",
-  "--t-border-color-default-white": "hsl(0, 0%, 100%)",
+  "--t-border-color": "hsl(0, 0%, 88%)",
+  "--t-border-color-dark": "hsl(0, 0%, 81%)",
+  "--t-border-color-darker": "hsl(0, 0%, 68%)",
+  "--t-border-color-darkest": "hsl(0, 0%, 58%)",
+  "--t-border-color-disabled": "hsl(0, 0%, 88%)",
+  "--t-border-color-dim": "hsl(0, 0%, 95%)",
+  "--t-border-color-white": "hsl(0, 0%, 100%)",
   "--t-border-color-status-neutral": "hsl(0, 0%, 58%)",
   "--t-border-color-status-info": "hsl(204, 100%, 40%)",
   "--t-border-color-status-success": "hsl(97, 57%, 40%)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "2.6.0-rc.1",
+  "version": "3.0.0-rc.3",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3a70dfe425ce2ed9b17d5226ef57833173d15125"
+  "gitHead": "011db79d39979086a0d8ad4622e008efe2d36778"
 }

package/src/components/button/transforms/tooltipToWrapper.test.ts

@@ -30,7 +30,8 @@ export default function Test() {
       expect(result).toContain(
         'import { Button, Tooltip } from "@planningcenter/tapestry-react"'
       )
-      expect(result).toContain('<Tooltip {...{ title: "Save this item" }}>')
+      expect(result).toContain('<Tooltip {...{ title: "Save this item" }}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<Button>Save</Button>")
       expect(result).toContain("</Tooltip>")
       expect(result).not.toContain("tooltip=")
@@ -47,7 +48,8 @@ export default function Test() {
 
       const result = applyTransform(input)
 
-      expect(result).toContain('<Tooltip {...{ title: "Save this item" }}>')
+      expect(result).toContain('<Tooltip {...{ title: "Save this item" }}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<Button>Save</Button>")
       expect(result).not.toContain("tooltip=")
     })
@@ -63,9 +65,8 @@ export default function Test() {
 
       const result = applyTransform(input)
 
-      expect(result).toContain(
-        '<Tooltip {...{text: "Save", placement: "top"}}>'
-      )
+      expect(result).toContain('<Tooltip {...{text: "Save", placement: "top"}}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<Button>Save</Button>")
       expect(result).not.toContain("tooltip=")
     })
@@ -81,7 +82,8 @@ export default function Test() {
 
       const result = applyTransform(input)
 
-      expect(result).toContain('<Tooltip {...{title: "Help"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Help"}}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain(
         '<Button variant="primary" onClick={handler} disabled>Save</Button>'
       )
@@ -99,7 +101,8 @@ export default function Test() {
 
       const result = applyTransform(input)
 
-      expect(result).toContain('<Tooltip {...{title: "Icon button"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Icon button"}}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<Button />")
       expect(result).toContain("</Tooltip>")
       expect(result).not.toContain("tooltip=")
@@ -121,7 +124,8 @@ export default function Test() {
       expect(result).toContain(
         'import { Button, Link, Tooltip } from "@planningcenter/tapestry-react"'
       )
-      expect(result).toContain('<Tooltip {...{title: "Save"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Save"}}')
+      expect(result).toContain("refAsInnerRef={false}")
     })
 
     it("should not add duplicate Tooltip import", () => {
@@ -197,8 +201,9 @@ export default function Test() {
       expect(result).toContain(
         'import { Button, Tooltip } from "@planningcenter/tapestry-react"'
       )
-      expect(result).toContain('<Tooltip {...{title: "Save the document"}}>')
-      expect(result).toContain('<Tooltip {...{title: "Cancel operation"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Save the document"}}')
+      expect(result).toContain('<Tooltip {...{title: "Cancel operation"}}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).not.toContain("tooltip=")
     })
 
@@ -218,7 +223,8 @@ export default function Test() {
 
       const result = applyTransform(input)
 
-      expect(result).toContain('<Tooltip {...{title: "Has tooltip"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Has tooltip"}}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<Button>With Tooltip</Button>")
       expect(result).toContain("<Button>Without Tooltip</Button>")
       // Only one Tooltip wrapper should be created
@@ -282,7 +288,8 @@ export default function Test() {
       expect(result).toContain(
         'import { Button as TapestryButton, Tooltip } from "@planningcenter/tapestry-react"'
       )
-      expect(result).toContain('<Tooltip {...{title: "Save item"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Save item"}}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<TapestryButton>Save</TapestryButton>")
       expect(result).not.toContain("tooltip=")
     })
@@ -307,8 +314,9 @@ export default function Test({ items }) {
       const result = applyTransform(input)
 
       expect(result).toContain(
-        "<Tooltip key={item.id} {...`Save ${item.name}`}>"
+        "<Tooltip key={item.id} {...`Save ${item.name}`}"
       )
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<Button onClick={() => save(item)}>")
       expect(result).not.toContain("tooltip=")
     })
@@ -324,7 +332,8 @@ export default function Test() {
 
       const result = applyTransform(input)
 
-      expect(result).toContain("<Tooltip>")
+      expect(result).toContain("<Tooltip")
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain("<Button>Save</Button>")
       expect(result).toContain("</Tooltip>")
       expect(result).not.toContain("tooltip")
@@ -359,11 +368,12 @@ export default function Test() {
       expect(result).toContain(
         'import { Button, Link, Tooltip } from "@planningcenter/tapestry-react"'
       )
-      expect(result).toContain('<Tooltip {...{title: "Submit the form"}}>')
+      expect(result).toContain('<Tooltip {...{title: "Submit the form"}}')
+      expect(result).toContain("refAsInnerRef={false}")
       expect(result).toContain('type="submit" variant="primary"')
       expect(result).toContain("Submit")
       expect(result).toContain(
-        '<Tooltip {...{text: "Reset form", placement: "bottom"}}>'
+        '<Tooltip {...{text: "Reset form", placement: "bottom"}}'
       )
       expect(result).toContain('type="reset"')
       expect(result).toContain("Reset")
@@ -384,8 +394,9 @@ export default function Test() {
     const result = applyTransform(input)!
 
     expect(result.replace(/(\s*)?\n(\s*)?/gm, " ")).toContain(
-      '<Tooltip {...{ title: "Click me" }}>'
+      '<Tooltip {...{ title: "Click me" }}'
     )
+    expect(result).toContain("refAsInnerRef={false}")
     expect(result).toContain("<Button>Click</Button>")
     expect(result).not.toContain("tooltip=")
   })

package/src/components/button/transforms/tooltipToWrapper.ts

@@ -1,3 +1,4 @@
+import { addAttribute } from "../../shared/actions/addAttribute"
 import { createWrapper } from "../../shared/actions/createWrapper"
 import { getAttributeValueAsProps } from "../../shared/actions/getAttributeValueAsProps"
 import { removeAttribute } from "../../shared/actions/removeAttribute"
@@ -18,7 +19,7 @@ const transform = attributeTransformFactory({
 
     removeAttribute("tooltip", { element, j, source })
 
-    createWrapper({
+    const wrapperElement = createWrapper({
       conflictAlias: "TRTooltip",
       element,
       j,
@@ -28,6 +29,13 @@ const transform = attributeTransformFactory({
       wrapperProps,
     })
 
+    addAttribute({
+      element: wrapperElement,
+      j,
+      name: "refAsInnerRef",
+      value: false,
+    })
+
     return true
   },
 })