primer · TylerJDev · Apr 7, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 7, 2025
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+SelectPanel2: Deprecate `SelectPanel2`
@@ -1,7 +1,7 @@
 import {test, expect} from '@playwright/test'
-import {visit} from '../../test-helpers/storybook'
-import {themes} from '../../test-helpers/themes'
-import {waitForImages} from '../../test-helpers/waitForImages'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+import {waitForImages} from '../test-helpers/waitForImages'
 
 const stories: Array<{
   title: string
@@ -10,28 +10,28 @@ const stories: Array<{
 }> = [
   {
     title: 'Default',
-    id: 'experimental-components-selectpanel--default',
+    id: 'deprecated-components-selectpanel--default',
   },
   {
-    id: 'experimental-components-selectpanel-features--as-modal',
+    id: 'deprecated-components-selectpanel-features--as-modal',
     title: 'As Modal',
   },
   {
-    id: 'experimental-components-selectpanel-features--external-anchor',
+    id: 'deprecated-components-selectpanel-features--external-anchor',
     title: 'External Anchor',
   },
   {
-    id: 'experimental-components-selectpanel-features--instant-selection-variant',
+    id: 'deprecated-components-selectpanel-features--instant-selection-variant',
     title: 'Instant Selection Variant',
     buttonText: 'Choose a tag',
   },
   {
-    id: 'experimental-components-selectpanel-features--with-warning',
+    id: 'deprecated-components-selectpanel-features--with-warning',
     title: 'With Warning',
     buttonText: 'Assignees',
   },
   {
-    id: 'experimental-components-selectpanel-features--with-errors',
+    id: 'deprecated-components-selectpanel-features--with-errors',
     title: 'With Errors',
     buttonText: 'Assignees',
   },
@@ -55,7 +55,7 @@ test.describe('SelectPanel', () => {
             await page.getByText(buttonText).click()
             await waitForImages(page)
             expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-              `drafts.SelectPanel.${story.title}.${theme}.png`,
+              `deprecated.SelectPanel.${story.title}.${theme}.png`,
             )
           })
 

@@ -21,7 +21,7 @@ import {
 import {Box, Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '..'
 import {Dialog} from '../DialogV1'
 import {Divider} from '../deprecated/ActionList/Divider'
-import mockData from '../experimental/SelectPanel2/mock-story-data'
+import mockData from '../SelectPanel2/mock-story-data'
 
 export default {
   title: 'Experimental/Components/ActionBar/Examples',

@@ -2,20 +2,20 @@
   "id": "select_panel_v2",
   "docsId": "select_panel",
   "name": "SelectPanel",
-  "status": "draft",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [
-    {"id": "experimental-components-selectpanel-examples--minimal"},
-    {"id": "experimental-components-selectpanel-examples--short-select-panel"},
-    {"id": "experimental-components-selectpanel-features--instant-selection-variant"},
-    {"id": "experimental-components-selectpanel-features--with-warning"},
-    {"id": "experimental-components-selectpanel-examples--open-from-menu"},
-    {"id": "experimental-components-selectpanel-examples--with-groups"},
-    {"id": "experimental-components-selectpanel-examples--async-search-with-use-transition"},
-    {"id": "experimental-components-selectpanel-examples--async-with-suspended-list"},
-    {"id": "experimental-components-selectpanel-examples--with-filter-buttons"}
+    {"id": "deprecated-components-selectpanel-examples--minimal"},
+    {"id": "deprecated-components-selectpanel-examples--short-select-panel"},
+    {"id": "deprecated-components-selectpanel-features--instant-selection-variant"},
+    {"id": "deprecated-components-selectpanel-features--with-warning"},
+    {"id": "deprecated-components-selectpanel-examples--open-from-menu"},
+    {"id": "deprecated-components-selectpanel-examples--with-groups"},
+    {"id": "deprecated-components-selectpanel-examples--async-search-with-use-transition"},
+    {"id": "deprecated-components-selectpanel-examples--async-with-suspended-list"},
+    {"id": "deprecated-components-selectpanel-examples--with-filter-buttons"}
   ],
-  "importPath": "@primer/react/experimental",
+  "importPath": "@primer/react/deprecated",
   "props": [
     {
       "name": "title",

@@ -1,8 +1,8 @@
 import React from 'react'
 import {SelectPanel} from './SelectPanel'
-import {ActionList, ActionMenu, Avatar, Box, Button, Text, Flash, FormControl, TextInput} from '../../index'
-import Octicon from '../../Octicon'
-import {Dialog} from '../../experimental'
+import {ActionList, ActionMenu, Avatar, Box, Button, Text, Flash, FormControl, TextInput} from '../index'
+import Octicon from '../Octicon'
+import {Dialog} from '../experimental'
 import {
   ArrowRightIcon,
   EyeIcon,
@@ -18,7 +18,7 @@ import {
 import data from './mock-story-data'
 
 export default {
-  title: 'Experimental/Components/SelectPanel/Examples',
+  title: 'Deprecated/Components/SelectPanel/Examples',
   component: SelectPanel,
 }
 
@@ -298,8 +298,8 @@ const SuspendedActionList: React.FC<{query: string}> = ({query}) => {
   )
 }
 
-/* 
-  `data` is already pre-fetched with the issue 
+/*
+  `data` is already pre-fetched with the issue
   `users` are fetched async on search
 */
 const SearchableUserList: React.FC<{
@@ -347,8 +347,8 @@ const SearchableUserList: React.FC<{
   )
 }
 
-/* 
-  `data` is already pre-fetched with the issue 
+/*
+  `data` is already pre-fetched with the issue
   `users` are fetched async on search
 */
 export const AsyncSearchWithUseTransition = () => {
@@ -931,8 +931,8 @@ export const CreateNewRow = () => {
 
   const itemsToShow = query ? filteredLabels : data.labels.sort(sortingFn)
 
-  /* 
-    Controlled state + Create new label Dialog 
+  /*
+    Controlled state + Create new label Dialog
     We only have to do this until https://github.com/primer/react/pull/3840 is merged
   */
   const [panelOpen, setPanelOpen] = React.useState(false)

@@ -1,21 +1,11 @@
 import React from 'react'
 import {SelectPanel} from './SelectPanel'
-import {
-  ActionList,
-  Avatar,
-  Box,
-  Button,
-  Link,
-  SegmentedControl,
-  Text,
-  ToggleSwitch,
-  useResponsiveValue,
-} from '../../index'
+import {ActionList, Avatar, Box, Button, Link, SegmentedControl, Text, ToggleSwitch, useResponsiveValue} from '../index'
 import {TagIcon, GearIcon, ArrowBothIcon} from '@primer/octicons-react'
 import data from './mock-story-data'
 
 export default {
-  title: 'Experimental/Components/SelectPanel/Features',
+  title: 'Deprecated/Components/SelectPanel/Features',
   component: SelectPanel,
 }
 

@@ -2,11 +2,11 @@ import React from 'react'
 import type {Meta, StoryFn} from '@storybook/react'
 import type {SelectPanelProps} from './SelectPanel'
 import {SelectPanel} from './SelectPanel'
-import {ActionList, Box} from '../../index'
+import {ActionList, Box} from '../index'
 import data from './mock-story-data'
 
 export default {
-  title: 'Experimental/Components/SelectPanel/Playground',
+  title: 'Deprecated/Components/SelectPanel/Playground',
   component: SelectPanel,
 
   args: {

@@ -1,10 +1,10 @@
 import React from 'react'
 import {SelectPanel} from './SelectPanel'
-import {ActionList, Box} from '../../index'
+import {ActionList, Box} from '../index'
 import data from './mock-story-data'
 
 export default {
-  title: 'Experimental/Components/SelectPanel',
+  title: 'Deprecated/Components/SelectPanel',
   component: SelectPanel,
 }
 

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ThemeProvider, ActionList, FormControl} from '../../'
+import {ThemeProvider, ActionList, FormControl} from '../'
 import type {RenderResult} from '@testing-library/react'
 import {render} from '@testing-library/react'
 import type {UserEvent} from '@testing-library/user-event'

@@ -1,7 +1,7 @@
 import React, {useEffect, useState, type MutableRefObject} from 'react'
 import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLeftIcon} from '@primer/octicons-react'
 
-import type {ButtonProps, TextInputProps, ActionListProps, LinkProps, CheckboxProps} from '../../index'
+import type {ButtonProps, TextInputProps, ActionListProps, LinkProps, CheckboxProps} from '../index'
 import {
   Button,
   IconButton,
@@ -13,20 +13,20 @@ import {
   Link,
   Checkbox,
   useFormControlForwardedProps,
-} from '../../index'
-import Octicon from '../../Octicon'
-import {ActionListContainerContext} from '../../ActionList/ActionListContainerContext'
-import {useSlots} from '../../hooks/useSlots'
-import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
-import type {OverlayProps} from '../../Overlay/Overlay'
-import {BaseOverlay, heightMap} from '../../Overlay/Overlay'
-import {InputLabel} from '../../internal/components/InputLabel'
-import {invariant} from '../../utils/invariant'
-import {AriaStatus} from '../../live-region'
-import {useResponsiveValue} from '../../hooks/useResponsiveValue'
-import type {ResponsiveValue} from '../../hooks/useResponsiveValue'
+} from '../index'
+import Octicon from '../Octicon'
+import {ActionListContainerContext} from '../ActionList/ActionListContainerContext'
+import {useSlots} from '../hooks/useSlots'
+import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../hooks'
+import type {OverlayProps} from '../Overlay/Overlay'
+import {BaseOverlay, heightMap} from '../Overlay/Overlay'
+import {InputLabel} from '../internal/components/InputLabel'
+import {invariant} from '../utils/invariant'
+import {AriaStatus} from '../live-region'
+import {useResponsiveValue} from '../hooks/useResponsiveValue'
+import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {clsx} from 'clsx'
-import {useFeatureFlag} from '../../FeatureFlags'
+import {useFeatureFlag} from '../FeatureFlags'
 
 import classes from './SelectPanel.module.css'
 import type {PositionSettings} from '@primer/behaviors'

@@ -236,6 +236,10 @@ exports[`@primer/react/deprecated should not update exports without a semver cha
   "type OcticonProps",
   "Pagehead",
   "type PageheadProps",
+  "SelectPanel",
+  "type SelectPanelMessageProps",
+  "type SelectPanelProps",
+  "type SelectPanelSecondaryActionProps",
   "TabNav",
   "type TabNavLinkProps",
   "type TabNavProps",
@@ -307,10 +311,6 @@ exports[`@primer/react/experimental should not update exports without a semver c
   "type ParentLinkProps",
   "ScrollableRegion",
   "type ScrollableRegionProps",
-  "SelectPanel",
-  "type SelectPanelMessageProps",
-  "type SelectPanelProps",
-  "type SelectPanelSecondaryActionProps",
   "SkeletonAvatar",
   "SkeletonBox",
   "SkeletonText",

@@ -42,3 +42,5 @@ export type {TabNavProps, TabNavLinkProps} from '../TabNav'
 export {default as Tooltip} from '../Tooltip/Tooltip'
 export type {TooltipProps} from '../Tooltip/Tooltip'
 // end of v37.0.0
+
+export * from '../SelectPanel2'
@@ -58,7 +58,7 @@ export type {
   NavListTrailingVisualProps,
   NavListDividerProps,
 } from '../NavList'
-export * from './SelectPanel2'
+
 export {Tooltip} from '../TooltipV2'
 export type {TooltipProps} from '../TooltipV2'
 export * from '../ActionBar'