{
selected={selectedA}
onSelectedChange={setSelectedA}
onFilterChange={setFilter}
- showItemDividers={true}
overlayProps={{height: 'medium'}}
/>
With height:auto, maxheight:medium
@@ -293,7 +286,6 @@ export const SelectPanelHeightAndScroll = () => {
selected={selectedB}
onSelectedChange={setSelectedB}
onFilterChange={setFilter}
- showItemDividers={true}
overlayProps={{
height: 'auto',
maxHeight: 'medium',
diff --git a/src/SelectPanel/SelectPanel.stories.tsx b/src/SelectPanel/SelectPanel.stories.tsx
index 1ab7d29b47b..a755207e390 100644
--- a/src/SelectPanel/SelectPanel.stories.tsx
+++ b/src/SelectPanel/SelectPanel.stories.tsx
@@ -2,10 +2,10 @@ import {TriangleDownIcon} from '@primer/octicons-react'
import {ComponentMeta} from '@storybook/react'
import React, {useState} from 'react'
-import Box from '../Box'
import {Button} from '../Button'
import {SelectPanel} from '../SelectPanel'
-import {ItemInput} from '../deprecated/ActionList/List'
+import Box from '../Box'
+import {ItemInput} from '../FilteredActionList'
export default {
title: 'Components/SelectPanel',
@@ -13,32 +13,30 @@ export default {
} as ComponentMeta
function getColorCircle(color: string) {
- return function () {
- return (
-
- )
- }
+ return (
+
+ )
}
const items = [
- {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
- {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
- {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
- {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
- {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
- {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
- {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+ {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: '1'},
+ {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: '2'},
+ {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: '3'},
+ {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: '4'},
+ {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: '5'},
+ {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: '6'},
+ {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: '7'},
]
export const Default = () => {
@@ -65,7 +63,6 @@ export const Default = () => {
selected={selected}
onSelectedChange={setSelected}
onFilterChange={setFilter}
- showItemDividers={true}
overlayProps={{width: 'small', height: 'xsmall'}}
/>
>
diff --git a/src/SelectPanel/SelectPanel.test.tsx b/src/SelectPanel/SelectPanel.test.tsx
index 05332623326..551d742aaa3 100644
--- a/src/SelectPanel/SelectPanel.test.tsx
+++ b/src/SelectPanel/SelectPanel.test.tsx
@@ -5,7 +5,7 @@ import theme from '../theme'
import {SelectPanel} from '../SelectPanel'
import {behavesAsComponent, checkExports} from '../utils/testing'
import {BaseStyles, SSRProvider, ThemeProvider} from '..'
-import {ItemInput} from '../deprecated/ActionList/List'
+import {ItemInput} from '../FilteredActionList'
expect.extend(toHaveNoViolations)
diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx
index dfcac4cdd97..02fd71726d3 100644
--- a/src/SelectPanel/SelectPanel.tsx
+++ b/src/SelectPanel/SelectPanel.tsx
@@ -1,17 +1,16 @@
import {SearchIcon} from '@primer/octicons-react'
import React, {useCallback, useMemo} from 'react'
+import {FilteredActionList, FilteredActionListProps, ItemInput} from '../FilteredActionList'
+import {OverlayProps} from '../Overlay'
+import {FocusZoneHookSettings} from '../hooks/useFocusZone'
+import {DropdownButton} from '../deprecated/DropdownMenu'
+import {ActionListItemProps} from '../ActionList'
import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay'
import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
import Box from '../Box'
-import {FilteredActionList, FilteredActionListProps} from '../FilteredActionList'
import Heading from '../Heading'
-import {OverlayProps} from '../Overlay'
import {TextInputProps} from '../TextInput'
-import {ItemProps} from '../deprecated/ActionList'
-import {ItemInput} from '../deprecated/ActionList/List'
-import {DropdownButton} from '../deprecated/DropdownMenu'
import {useProvidedRefOrCreate} from '../hooks'
-import {FocusZoneHookSettings} from '../hooks/useFocusZone'
import {useId} from '../hooks/useId'
import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
@@ -43,7 +42,8 @@ export type SelectPanelProps = SelectPanelBaseProps &
Omit &
Pick &
AnchoredOverlayWrapperAnchorProps &
- (SelectPanelSingleSelection | SelectPanelMultiSelection)
+ // TODO: 23-05-23 - Remove showItemDividers after next-major release
+ (SelectPanelSingleSelection | SelectPanelMultiSelection) & {showItemDividers?: boolean}
function isMultiSelectVariant(
selected: SelectPanelSingleSelection['selected'] | SelectPanelMultiSelection['selected'],
@@ -120,9 +120,7 @@ export function SelectPanel({
...item,
role: 'option',
selected: 'selected' in item && item.selected === undefined ? undefined : isItemSelected,
- onAction: (itemFromAction, event) => {
- item.onAction?.(itemFromAction, event)
-
+ onSelect: (event: React.MouseEvent | React.KeyboardEvent) => {
if (event.defaultPrevented) {
return
}
@@ -141,7 +139,7 @@ export function SelectPanel({
singleSelectOnChange(item === selected ? undefined : item)
onClose('selection')
},
- } as ItemProps
+ } as ActionListItemProps
})
}, [onClose, onSelectedChange, items, selected])
@@ -191,11 +189,10 @@ export function SelectPanel({
{
.map(
(reply, i): Item => ({
text: reply.name,
- description: reply.content,
+ description: (
+
+ {reply.content}
+
+ ),
descriptionVariant: 'block',
trailingVisual: i < 9 ? `Ctrl + ${i + 1}` : undefined,
sx: {
@@ -66,6 +71,7 @@ export const SavedRepliesButton = () => {
maxWidth: '100%',
},
},
+ id: i.toString(),
}),
)
@@ -105,6 +111,12 @@ export const SavedRepliesButton = () => {
onSelectItem(Array.isArray(selection) ? selection[0] : selection)
}}
overlayProps={{width: 'small', maxHeight: 'small', anchorSide: 'outside-right', onKeyDown}}
+ // @ts-ignore this is bad because SelectPanel does not accept selectionVariant in the public API
+ // but it does pass it down to FilteredActionList underneath.
+ // SavedReplies should not use SelectPanel and override it's semantics, it should instead
+ // use the building blocks of SelectPanel to build a new component
+ selectionVariant={undefined}
+ aria-multiselectable={undefined}
/>
) : (
<>>