add next entry point and move Tooltip there

docs/content/drafts/Tooltip.mdx

@@ -2,10 +2,10 @@
 componentId: tooltip_v2
 title: Tooltip v2
 status: Draft
-source: https://github.com/primer/react/blob/main/src/drafts/Tooltip.tsx
+source: https://github.com/primer/react/blob/main/src/next/Tooltip.tsx
 ---
 
-import data from '../../../src/drafts/Tooltip/Tooltip.docs.json'
+import data from '../../../src/next/Tooltip/Tooltip.docs.json'
 
 The Tooltip component is used to add context to interactive elements on the page.
 

e2e/components/Tooltip--experimental.test.ts

@@ -8,7 +8,7 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip--default',
+            id: 'next-components-tooltip--default',
             globals: {
               colorScheme: theme,
             },
@@ -26,7 +26,7 @@ test.describe('Tooltip--experimental', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip--default',
+            id: 'next-components-tooltip--default',
             globals: {
               colorScheme: theme,
             },
@@ -42,7 +42,7 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--anchor-has-margin',
+            id: 'next-components-tooltip-features--anchor-has-margin',
             globals: {
               colorScheme: theme,
             },
@@ -60,7 +60,7 @@ test.describe('Tooltip--experimental', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--anchor-has-margin',
+            id: 'next-components-tooltip-features--anchor-has-margin',
             globals: {
               colorScheme: theme,
             },
@@ -76,7 +76,7 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--calculated-direction',
+            id: 'next-components-tooltip-features--calculated-direction',
             globals: {
               colorScheme: theme,
             },
@@ -94,7 +94,7 @@ test.describe('Tooltip--experimental', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--calculated-direction',
+            id: 'next-components-tooltip-features--calculated-direction',
             globals: {
               colorScheme: theme,
             },
@@ -110,7 +110,7 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--icon-button-with-description',
+            id: 'next-components-tooltip-features--icon-button-with-description',
             globals: {
               colorScheme: theme,
             },
@@ -128,7 +128,7 @@ test.describe('Tooltip--experimental', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--icon-button-with-description',
+            id: 'next-components-tooltip-features--icon-button-with-description',
             globals: {
               colorScheme: theme,
             },
@@ -144,7 +144,7 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--label-type',
+            id: 'next-components-tooltip-features--label-type',
             globals: {
               colorScheme: theme,
             },
@@ -162,7 +162,7 @@ test.describe('Tooltip--experimental', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--label-type',
+            id: 'next-components-tooltip-features--label-type',
             globals: {
               colorScheme: theme,
             },

package.json

@@ -21,6 +21,10 @@
       "import": "./lib-esm/deprecated/index.js",
       "require": "./lib/deprecated/index.js"
     },
+    "./next": {
+      "import": "./lib-esm/next/index.js",
+      "require": "./lib/next/index.js"
+    },
     "./lib-esm/*": {
       "import": [
         "./lib-esm/*.js",

rollup.config.js

@@ -23,6 +23,9 @@ const input = new Set([
   // "./deprecated"
   'src/deprecated/index.ts',
 
+  // "./next"
+  'src/next/index.ts',
+
   // Make sure all members are exported
   'src/constants.ts',
 

script/generate-e2e-tests.js

@@ -1415,39 +1415,39 @@ const components = new Map([
     },
   ],
   [
-    'Tooltip--experimental',
+    'Tooltip--next',
     {
       stories: [
         {
-          id: 'drafts-components-tooltip--default',
+          id: 'next-components-tooltip--default',
           name: 'Default',
         },
         {
-          id: 'drafts-components-tooltip-features--anchor-has-margin',
+          id: 'next-components-tooltip-features--anchor-has-margin',
           name: 'Anchor Has Margin',
         },
         {
-          id: 'drafts-components-tooltip-features--calculated-direction',
+          id: 'next-components-tooltip-features--calculated-direction',
           name: 'Calculated Direction',
         },
         {
-          id: 'drafts-components-tooltip-features--icon-button-with-description',
+          id: 'next-components-tooltip-features--icon-button-with-description',
           name: 'Icon Button With Description',
         },
         {
-          id: 'drafts-components-tooltip-features--label-type',
+          id: 'next-components-tooltip-features--label-type',
           name: 'Label Type',
         },
         {
-          id: 'drafts-components-tooltip-features--multiline-text',
+          id: 'next-components-tooltip-features--multiline-text',
           name: 'Multiline Text',
         },
         {
-          id: 'drafts-components-tooltip-features--on-action-menu-anchor',
+          id: 'next-components-tooltip-features--on-action-menu-anchor',
           name: 'On Action Menu Anchor',
         },
         {
-          id: 'drafts-components-tooltip-examples--files-page',
+          id: 'next-components-tooltip-examples--files-page',
           name: 'Files Page Example',
         },
       ],

src/ActionList/Item.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import {AlertIcon} from '@primer/octicons-react'
 import Box, {BoxProps} from '../Box'
-import {Tooltip, TooltipProps} from '../drafts/Tooltip/Tooltip'
+import {Tooltip, TooltipProps} from '../next/Tooltip/Tooltip'
 import {useId} from '../hooks/useId'
 import {useSlots} from '../hooks/useSlots'
 import sx, {BetterSystemStyleObject, merge, SxProp} from '../sx'

src/ActionMenu/ActionMenu.tsx

@@ -9,7 +9,7 @@ import {Button, ButtonProps} from '../Button'
 import {useId} from '../hooks/useId'
 import {MandateProps} from '../utils/types'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {Tooltip} from '../drafts/Tooltip/Tooltip'
+import {Tooltip} from '../next/Tooltip/Tooltip'
 
 export type MenuContextProps = Pick<
   AnchoredOverlayProps,

src/__tests__/ActionMenu.test.tsx

@@ -4,7 +4,7 @@ import {axe} from 'jest-axe'
 import React from 'react'
 import theme from '../theme'
 import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider, Tooltip, Button} from '..'
-import {Tooltip as TooltipV2} from '../drafts/Tooltip/Tooltip'
+import {Tooltip as TooltipV2} from '../next/Tooltip/Tooltip'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories'
 import {MixedSelection} from '../ActionMenu/ActionMenu.examples.stories'

src/__tests__/exports.test.ts

@@ -70,6 +70,20 @@ describe('@primer/react/deprecated', () => {
   })
 })
 
+describe('@primer/react/next', () => {
+  it('should not update exports without a semver change', async () => {
+    const exports = project.getEntrypointExports(path.join(ROOT_DIR, 'src', 'next', 'index.ts'))
+    expect(
+      exports.map(exportInfo => {
+        if (exportInfo.type === 'type') {
+          return `type ${exportInfo.identifier}`
+        }
+        return exportInfo.identifier
+      }),
+    ).toMatchSnapshot()
+  })
+})
+
 interface Project {
   getEntrypointExports(filepath: string): Array<EntrypointExport>
 }

src/drafts/index.ts

@@ -61,4 +61,5 @@ export type {
   NavListDividerProps,
 } from '../NavList'
 export * from './SelectPanel2'
-export * from './Tooltip'
+//  We will need to remove this in the next major release
+export * from '../next/Tooltip'

src/drafts/Tooltip/Tooltip.examples.stories.tsx → src/next/Tooltip/Tooltip.examples.stories.tsx

@@ -16,7 +16,7 @@ import {
 import {default as VisuallyHidden} from '../../_VisuallyHidden'
 
 export default {
-  title: 'Drafts/Components/Tooltip/Examples',
+  title: 'Next/Components/Tooltip/Examples',
   component: Tooltip,
 }
 

src/drafts/Tooltip/Tooltip.features.stories.tsx → src/next/Tooltip/Tooltip.features.stories.tsx

@@ -4,7 +4,7 @@ import {Tooltip} from './Tooltip'
 import {SearchIcon, BookIcon, CheckIcon, TriangleDownIcon, GitBranchIcon} from '@primer/octicons-react'
 
 export default {
-  title: 'Drafts/Components/Tooltip/Features',
+  title: 'Next/Components/Tooltip/Features',
   component: Tooltip,
 }
 

src/drafts/Tooltip/Tooltip.playground.stories.tsx → src/next/Tooltip/Tooltip.playground.stories.tsx

@@ -4,7 +4,7 @@ import {Tooltip} from './Tooltip'
 import {Meta, StoryFn} from '@storybook/react'
 
 export default {
-  title: 'Drafts/Components/Tooltip/Playground',
+  title: 'Next/Components/Tooltip/Playground',
   component: Tooltip,
 
   args: {

src/drafts/Tooltip/__tests__/Tooltip.test.tsx → src/next/Tooltip/__tests__/Tooltip.test.tsx

@@ -3,7 +3,7 @@ import {Tooltip, TooltipProps} from '../Tooltip'
 import {checkStoriesForAxeViolations} from '../../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import theme from '../../../theme'
-import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles} from '../../../'
+import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles} from '../../..'
 import {XIcon} from '@primer/octicons-react'
 
 const TooltipComponent = (props: Omit<TooltipProps, 'text'> & {text?: string}) => (

src/next/index.ts

@@ -0,0 +1,3 @@
+'use client'
+
+export * from './Tooltip'