fix(TU-15133): Rename ref prop to embedRef for proper typing

.github/workflows/pull-request.yml

@@ -10,9 +10,9 @@ jobs:
     strategy:
       matrix:
         node_version:
-          - 16 # end of life 2023-09-11
           - 18 # end of life 2025-04-30
-          - 20 # end of life 2025-04-30
+          - 20 # end of life 2026-04-30
+          - 22 # end of life 2027-04-03
     name: build-lint-test - node ${{ matrix.node_version }}
     steps:
       - name: Check out Git repository

README.md

@@ -15,7 +15,7 @@ Support for other libraries coming later. [You can help us if you want 😉](#co
 
 ## Requirements
 
-- node >= 14
+- node >= 18
 - yarn or npm
 
 **Node version support:** We aim to support all currently supported node versions (active or maintenance). Currently, we support and run tests in node versions 14, 16 and 18. Please refer to [node release schedule](https://github.com/nodejs/release#release-schedule) for specific dates on when specific node versions will be discontinued (end-of-life).

docs/react.md

@@ -12,7 +12,7 @@ nav_order: 20
 
 Requirements:
 
-- node >= 14 (for node v12 use [v1.21.0](https://www.npmjs.com/package/@typeform/embed-react/v/1.21.0))
+- node >= 18
 - yarn or npm
 
 Add the library to your project using your favourite package manager:
@@ -102,11 +102,11 @@ Pass options as props to the component.
 
 If the global `__webpack_nonce__` is set, its value will be used for a `nonce` attribute on the inline `<style>` block. See [Github issue #458](https://github.com/Typeform/embed/issues/458) for details.
 
-### Passing a custom ref
+### Passing a custom ref as `embedRef`
 
 For some custom use cases it may be convenient to open the popup programmatically (without the button being clicked).
 
-To do this, pass a ref to `PopupButton`, `SliderButton`, `Popover` and `Sidetab` components and then use `ref.current.open()` to trigger the popup to open.
+To do this, pass an `embedRef` prop to `PopupButton`, `SliderButton`, `Popover` and `Sidetab` components and then use `ref.current.open()` to trigger the popup to open.
 
 Example:
 
@@ -116,7 +116,7 @@ const openPopup = () => ref.current?.open()
 // ...
 <PopupButton
   id="<form-id>"
-  ref={ref}
+  embedRef={ref}
 >
   click to open
 </PopupButton>

docs/vanilla.md

@@ -14,7 +14,7 @@ nav_order: 10
 
 Requirements:
 
-- node >= 14 (for node v12 use [v1.38.0](https://www.npmjs.com/package/@typeform/embed/v/1.38.0))
+- node >= 18
 - yarn or npm
 
 Install using your favourite package manager:

package.json

@@ -31,13 +31,14 @@
     "@semantic-release/github": "^7.2.0",
     "@semantic-release/npm": "^7.0.10",
     "@semantic-release/release-notes-generator": "^9.0.1",
-    "@testing-library/dom": "^7.29.6",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/dom": "^10.3.2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@typeform/eslint-config": "^6.0.3",
     "@types/cypress": "^1.1.3",
     "@types/jest": "^26.0.20",
-    "@types/react": "^16.8.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@visual-regression-tracker/agent-cypress": "^5.6.0",
     "babel-loader": "^8.2.2",
     "commitlint": "^11.0.0",
@@ -56,12 +57,12 @@
     "jest-transform-css": "^2.1.0",
     "lerna": "^3.22.1",
     "mini-css-extract-plugin": "^1.3.7",
-    "next": "12.1.0",
+    "next": "^14.2.5",
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
     "raw-loader": "^4.0.2",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-scripts": "^4.0.2",
     "sass": "^1.55.0",
     "sass-loader": "^13.0.2",

packages/demo-nextjs/app/app-menu.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+
+import { Menu } from '../shared/menu'
+import { defaultFormId } from '../shared/constants'
+
+export const AppMenu = () => {
+  const query = useSearchParams()
+  return <Menu id={query?.get('id') ?? defaultFormId} />
+}

packages/demo-nextjs/app/app/popup/page.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { Popover, PopupButton } from '@typeform/embed-react'
+import { useSearchParams } from 'next/navigation'
+
+import { defaultFormId } from '../../../shared/constants'
+
+const handleOnReady = () => {
+  // eslint-disable-next-line no-console
+  console.log('form in popover ready')
+}
+
+export default function Page() {
+  const searchParams = useSearchParams()
+  const id = searchParams?.get('id') ?? defaultFormId
+
+  const buttonStyle = {
+    padding: '10px 20px',
+    borderRadius: 10,
+    border: 'none',
+    background: 'navy',
+    color: 'white',
+    fontSize: 16,
+    cursor: 'pointer',
+  }
+
+  return (
+    <main>
+      <p>All embed types &lt;3 Next.js version &gt;= 13</p>
+
+      <p>
+        <PopupButton
+          id={id}
+          style={buttonStyle}
+          size={66}
+          medium="demo-test"
+          hidden={{ foo: 'foo value', bar: 'bar value' }}
+        >
+          <span role="img" aria-label="check">
+            ️✅
+          </span>
+          <span style={{ marginLeft: 10 }}>open popup</span>
+        </PopupButton>
+      </p>
+
+      <Popover
+        id={id}
+        onReady={handleOnReady}
+        medium="demo-test"
+        hidden={{ foo: 'foo value', bar: 'bar value' }}
+        buttonProps={{ ariaLabel: 'Typeform Button', dataTestid: 'demo-button' }}
+        tooltip="welcome"
+      />
+    </main>
+  )
+}

packages/demo-nextjs/app/app/widget/page.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { Widget } from '@typeform/embed-react'
+import { useSearchParams } from 'next/navigation'
+
+import { defaultFormId } from '../../../shared/constants'
+
+export default function Page() {
+  const searchParams = useSearchParams()
+  const widgetContainerStyle = {
+    width: 500,
+    height: 400,
+    margin: '20px auto',
+  }
+
+  return (
+    <main>
+      <p>Embed widget &lt;3 Next.js version &lt;= 13</p>
+
+      <Widget
+        id={searchParams?.get('id') ?? defaultFormId}
+        style={widgetContainerStyle}
+        medium="demo-test"
+        hidden={{ foo: 'foo value', bar: 'bar value' }}
+        transitiveSearchParams={['foo', 'bar']}
+        iframeProps={{ title: 'Foo Bar' }}
+      />
+    </main>
+  )
+}

packages/demo-nextjs/app/layout.tsx

@@ -0,0 +1,17 @@
+import { AppMenu } from './app-menu'
+import '../shared/globals.css'
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <h1>
+          This is an example <a href="https://nextjs.org">Next.js</a> app with{' '}
+          <a href="https://nextjs.org/docs/app">App Router</a>.
+        </h1>
+        <AppMenu />
+        {children}
+      </body>
+    </html>
+  )
+}

packages/demo-nextjs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/demo-nextjs/pages/_app.tsx

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router'
+import { AppProps } from 'next/app'
+
+import '../shared/globals.css'
+import { Menu } from '../shared/menu'
+import { defaultFormId } from '../shared/constants'
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter()
+  const formId = router.query?.id ?? defaultFormId
+  return (
+    <>
+      <h1>
+        This is an example <a href="https://nextjs.org">Next.js</a> app with{' '}
+        <a href="https://nextjs.org/docs/pages">Pages Router</a>.
+      </h1>
+      <Menu id={`${formId}`} />
+      <Component id={formId} {...pageProps} />
+    </>
+  )
+}

packages/demo-nextjs/pages/forward-ref.tsx

@@ -0,0 +1,34 @@
+import { useRef } from 'react'
+import { PopupButton, GenericEmbed } from '@typeform/embed-react'
+
+export default function PopupPage({ id }: { id: string }) {
+  const buttonStyle = {
+    padding: '10px 20px',
+    borderRadius: 10,
+    border: 'none',
+    background: 'navy',
+    color: 'white',
+    fontSize: 16,
+    cursor: 'pointer',
+  }
+  const ref = useRef<GenericEmbed>()
+
+  return (
+    <main>
+      <p>Embed popup with forwarded ref &lt;3 Next.js</p>
+
+      <p>
+        <PopupButton id={id} embedRef={ref} style={buttonStyle} size={66} medium="demo-test">
+          <span role="img" aria-label="check">
+            ️✅
+          </span>
+          <span style={{ marginLeft: 10 }}>open popup</span>
+        </PopupButton>
+      </p>
+
+      <p>
+        <button onClick={() => ref.current?.open()}>click here to open the popup via ref</button>
+      </p>
+    </main>
+  )
+}