From ece2b140a63c48bf6ee7cade2823733fb1ed7d9d Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 25 Aug 2025 10:53:45 +0200 Subject: [PATCH 1/6] make item.id compulsory required --- packages/react/src/FilteredActionList/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/FilteredActionList/types.ts b/packages/react/src/FilteredActionList/types.ts index 9bca16f3d5e..ba359388588 100644 --- a/packages/react/src/FilteredActionList/types.ts +++ b/packages/react/src/FilteredActionList/types.ts @@ -86,7 +86,7 @@ export interface FilteredActionListItemProps extends SxProp { /** * An id associated with this item. Should be unique between items */ - id?: number | string + id: number | string /** * Node to be included inside the item before the text. From 3471dd7728911dcb0f2f15f62b68ea6f806ce216 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 25 Aug 2025 10:57:21 +0200 Subject: [PATCH 2/6] add changeset --- .changeset/selectpanel-item-id-required.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/selectpanel-item-id-required.md diff --git a/.changeset/selectpanel-item-id-required.md b/.changeset/selectpanel-item-id-required.md new file mode 100644 index 00000000000..38d4e06112b --- /dev/null +++ b/.changeset/selectpanel-item-id-required.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +SelectPanel: Make item.id required From 10723d6aae7f103998c8cdf5b692e6c9de9eb802 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 25 Aug 2025 11:47:21 +0200 Subject: [PATCH 3/6] export types from selectpanel instead of deprecated/actionlist --- packages/react/src/SelectPanel/SelectPanel.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 0e17c5c5958..116ad1cb5d3 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -11,7 +11,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' import type {AnchoredOverlayProps} from '../AnchoredOverlay' import {AnchoredOverlay} from '../AnchoredOverlay' import type {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay' -import type {FilteredActionListProps} from '../FilteredActionList' +import type {FilteredActionListProps, GroupedListProps} from '../FilteredActionList' import {FilteredActionList} from '../FilteredActionList' import Heading from '../Heading' import type {OverlayProps} from '../Overlay' @@ -953,3 +953,5 @@ export const SelectPanel = Object.assign(Panel, { SecondaryActionButton: SecondaryButton, SecondaryActionLink: SecondaryLink, }) + +export type {ItemInput, GroupedListProps} From 98ce18c5dc3b07484b2e42813edbf116733ebb6a Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 25 Aug 2025 11:50:52 +0200 Subject: [PATCH 4/6] fix SelectPanel stories --- packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx | 3 +-- .../react/src/SelectPanel/SelectPanel.examples.stories.tsx | 3 +-- .../react/src/SelectPanel/SelectPanel.features.stories.tsx | 3 +-- packages/react/src/SelectPanel/SelectPanel.stories.tsx | 3 +-- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx index e2a4a2cd48d..c5acb0e7952 100644 --- a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx @@ -5,8 +5,7 @@ import {useState} from 'react' import Box from '../Box' import {Button} from '../Button' -import {SelectPanel} from '.' -import type {ItemInput} from '../deprecated/ActionList/List' +import {SelectPanel, type ItemInput} from '.' import FormControl from '../FormControl' import Text from '../Text' import Select from '../Select/Select' diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx index 22ae7f75b4a..b49dd75fc37 100644 --- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx @@ -1,8 +1,7 @@ import React, {useState, useMemo} from 'react' import type {Meta} from '@storybook/react-vite' import {Button} from '../Button' -import type {ItemInput} from '../deprecated/ActionList/List' -import {SelectPanel} from './SelectPanel' +import {SelectPanel, type ItemInput} from './SelectPanel' import type {OverlayProps} from '../Overlay' import {TriangleDownIcon} from '@primer/octicons-react' import {ActionList} from '../deprecated/ActionList' diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx index b6f817a2583..b06bd0b7a5e 100644 --- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx @@ -1,9 +1,8 @@ import React, {useState, useRef, useEffect} from 'react' import type {Meta, StoryObj} from '@storybook/react-vite' import {Button} from '../Button' -import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List' import Link from '../Link' -import {SelectPanel, type SelectPanelProps} from './SelectPanel' +import {SelectPanel, type SelectPanelProps, type ItemInput, type GroupedListProps} from './SelectPanel' import { AlertIcon, FilterIcon, diff --git a/packages/react/src/SelectPanel/SelectPanel.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.stories.tsx index c97bfe95544..a567ebc0cda 100644 --- a/packages/react/src/SelectPanel/SelectPanel.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.stories.tsx @@ -3,8 +3,7 @@ import type {Meta} from '@storybook/react-vite' import {useState} from 'react' import {Button} from '../Button' -import {SelectPanel} from '../SelectPanel' -import type {ItemInput} from '../deprecated/ActionList/List' +import {SelectPanel, type ItemInput} from '../SelectPanel' import FormControl from '../FormControl' import classes from './SelectPanel.stories.module.css' From f034596abe87a4593ffd3113c2036622917c6a9c Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 25 Aug 2025 11:50:59 +0200 Subject: [PATCH 5/6] Fix SelectPanel test --- .../src/SelectPanel/SelectPanel.test.tsx | 27 +++++-------------- 1 file changed, 7 insertions(+), 20 deletions(-) diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx index 96cd259c782..5ee3d982793 100644 --- a/packages/react/src/SelectPanel/SelectPanel.test.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx @@ -1,8 +1,7 @@ import {render, screen, waitFor} from '@testing-library/react' import {describe, expect, it, beforeEach, vi} from 'vitest' import React from 'react' -import {SelectPanel, type SelectPanelProps} from '../SelectPanel' -import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List' +import {SelectPanel, type SelectPanelProps, type ItemInput, type GroupedListProps} from '../SelectPanel' import {userEvent} from '@testing-library/user-event' import ThemeProvider from '../ThemeProvider' import {FeatureFlags} from '../FeatureFlags' @@ -34,15 +33,9 @@ const renderWithFlag = (children: React.ReactNode, flag: boolean) => { } const items: SelectPanelProps['items'] = [ - { - text: 'item one', - }, - { - text: 'item two', - }, - { - text: 'item three', - }, + {id: 'one', text: 'item one'}, + {id: 'two', text: 'item two'}, + {id: 'three', text: 'item three'}, ] function BasicSelectPanel(passthroughProps: Record) { @@ -934,15 +927,9 @@ for (const usingRemoveActiveDescendant of [false, true]) { renderWithFlag( , usingRemoveActiveDescendant, From d7a6475fa36c34e8d330d544490d21c668404eb8 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Mon, 25 Aug 2025 12:15:25 +0200 Subject: [PATCH 6/6] Update selectpanel-item-id-required.md --- .changeset/selectpanel-item-id-required.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/selectpanel-item-id-required.md b/.changeset/selectpanel-item-id-required.md index 38d4e06112b..23045350e05 100644 --- a/.changeset/selectpanel-item-id-required.md +++ b/.changeset/selectpanel-item-id-required.md @@ -3,3 +3,4 @@ --- SelectPanel: Make item.id required +SelectPanel: Export types `ItemInput` and `GroupedListProps`