diff --git a/.changeset/selectpanel-item-id-required.md b/.changeset/selectpanel-item-id-required.md new file mode 100644 index 00000000000..23045350e05 --- /dev/null +++ b/.changeset/selectpanel-item-id-required.md @@ -0,0 +1,6 @@ +--- +"@primer/react": major +--- + +SelectPanel: Make item.id required +SelectPanel: Export types `ItemInput` and `GroupedListProps` 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. 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' 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, 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}