From 19daa03de22063bb9235d4f65ff3e6ddb5e5b582 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 19 Sep 2024 14:13:47 +1000
Subject: [PATCH 1/3] Explore SelectPanel.Messsage API and managing the
 visibility in the component

---
 .../src/FeatureFlags/DefaultFeatureFlags.ts   |  2 +-
 .../FilteredActionListEntry.tsx               |  5 +-
 ...eredActionListWithDeprecatedActionList.tsx |  2 +
 ...FilteredActionListWithModernActionList.tsx |  8 +-
 .../SelectPanel.features.stories.tsx          | 70 +++++++++++++++++
 .../react/src/SelectPanel/SelectPanel.tsx     | 76 ++++++++++++++++---
 6 files changed, 149 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
index 3ab756ea60f..daeb9cee255 100644
--- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
+++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
@@ -5,5 +5,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_css_modules_staff: false,
   primer_react_css_modules_ga: false,
   primer_react_action_list_item_as_button: false,
-  primer_react_select_panel_with_modern_action_list: false,
+  primer_react_select_panel_with_modern_action_list: true,
 })
diff --git a/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx b/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
index 450608c6b0a..d8f736514cd 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
@@ -6,9 +6,8 @@ import {useFeatureFlag} from '../FeatureFlags'
 
 export function FilteredActionList(props: FilteredActionListProps): JSX.Element {
   const enabled = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
-
-  if (enabled) return <WithStableActionList {...props} />
-  else return <WithDeprecatedActionList {...props} />
+  return <WithStableActionList {...props} />
+  // else return <WithDeprecatedActionList {...props} />
 }
 
 FilteredActionList.displayName = 'FilteredActionList'
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
index 3de9c215a72..77c4e7c8139 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
@@ -35,6 +35,8 @@ export interface FilteredActionListProps
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
+  emptyState?: boolean
+  children?: React.ReactNode
 }
 
 const StyledHeader = styled.div`
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
index 82e961070dc..162803dbf2b 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
@@ -18,9 +18,11 @@ import {VisuallyHidden} from '../internal/components/VisuallyHidden'
 import type {SxProp} from '../sx'
 import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
+import Text from '../Text'
 
 import {isValidElementType} from 'react-is'
 import type {RenderItemFn} from '../deprecated/ActionList/List'
+import {SelectPanelMessage} from '../SelectPanel/SelectPanel'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -35,6 +37,7 @@ export interface FilteredActionListProps
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
+  emptyState?: boolean
 }
 
 const StyledHeader = styled.div`
@@ -54,6 +57,8 @@ export function FilteredActionList({
   sx,
   groupMetadata,
   showItemDividers,
+  emptyState,
+  message,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -150,7 +155,7 @@ export function FilteredActionList({
         />
       </StyledHeader>
       <VisuallyHidden id={inputDescriptionTextId}>Items will be filtered as you type</VisuallyHidden>
-      <Box ref={scrollContainerRef} overflow="auto">
+      <Box ref={scrollContainerRef} sx={{overflow: 'auto', height: '100%'}}>
         {loading && loadingType.appearsInBody ? (
           <FilteredActionListBodyLoader loadingType={loadingType} />
         ) : (
@@ -173,6 +178,7 @@ export function FilteredActionList({
                 })}
           </ActionList>
         )}
+        {message}
       </Box>
     </Box>
   )
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index d8053503244..f6d779af44c 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -15,6 +15,8 @@ import {
   VersionsIcon,
 } from '@primer/octicons-react'
 import useSafeTimeout from '../hooks/useSafeTimeout'
+import Link from '../Link'
+import Text from '../Text'
 
 const meta = {
   title: 'Components/SelectPanel/Features',
@@ -422,3 +424,71 @@ export const AsyncFetch: StoryObj<typeof SelectPanel> = {
     },
   },
 }
+
+export const NoItems = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([])
+  const [filteredItems, setFilteredItems] = React.useState<ItemInput[]>([])
+  const [open, setOpen] = useState(true)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const onFilterChange = (value: string = '') => {
+    setTimeout(() => {
+      // fetch the items
+      setFilteredItems([])
+    }, 0)
+  }
+  return (
+    <SelectPanel
+      title="Set projects"
+      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          {children ?? 'Select Labels'}
+        </Button>
+      )}
+      open={open}
+      onOpenChange={setOpen}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onFilterChange={onFilterChange}
+      overlayProps={{width: 'medium', height: 'large'}}
+    >
+      <SelectPanel.Message variant="noitems" title="You haven't created any projects yet">
+        <Link href="https://github.com/projects">Start your first project </Link> to organise your issues.
+      </SelectPanel.Message>
+      <SelectPanel.Message variant="nomatches" title={`No language found for `}>
+        Adjust your search term to find other languages
+      </SelectPanel.Message>
+    </SelectPanel>
+  )
+}
+export const NoMatches = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([])
+  const [filter, setFilter] = React.useState<string>('')
+  const [open, setOpen] = useState(true)
+
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  return (
+    <SelectPanel
+      title="Set projects"
+      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          {children ?? 'Select Labels'}
+        </Button>
+      )}
+      open={open}
+      onOpenChange={setOpen}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={setSelected}
+      onFilterChange={setFilter}
+      overlayProps={{width: 'medium', height: 'small'}}
+    >
+      <SelectPanel.Message variant="noitems" title="You haven't created any projects yet">
+        <Link href="https://github.com/projects">Start your first project </Link> to organise your issues.
+      </SelectPanel.Message>
+      <SelectPanel.Message variant="nomatches" title={`No language found for ${filter}`}>
+        Adjust your search term to find other languages
+      </SelectPanel.Message>
+    </SelectPanel>
+  )
+}
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 9497c7e9199..6934eaa2ab5 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -4,6 +4,7 @@ import type {AnchoredOverlayProps} from '../AnchoredOverlay'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import type {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
 import Box from '../Box'
+import Text from '../Text'
 import type {FilteredActionListProps} from '../FilteredActionList'
 import {FilteredActionList} from '../FilteredActionList'
 import Heading from '../Heading'
@@ -49,11 +50,13 @@ interface SelectPanelBaseProps {
   initialLoadingType?: InitialLoadingType
 }
 
-export type SelectPanelProps = SelectPanelBaseProps &
-  Omit<FilteredActionListProps, 'selectionVariant'> &
-  Pick<AnchoredOverlayProps, 'open'> &
-  AnchoredOverlayWrapperAnchorProps &
-  (SelectPanelSingleSelection | SelectPanelMultiSelection)
+export type SelectPanelProps = React.PropsWithChildren<
+  SelectPanelBaseProps &
+    Omit<FilteredActionListProps, 'selectionVariant'> &
+    Pick<AnchoredOverlayProps, 'open'> &
+    AnchoredOverlayWrapperAnchorProps &
+    (SelectPanelSingleSelection | SelectPanelMultiSelection)
+>
 
 function isMultiSelectVariant(
   selected: SelectPanelSingleSelection['selected'] | SelectPanelMultiSelection['selected'],
@@ -66,7 +69,40 @@ const focusZoneSettings: Partial<FocusZoneHookSettings> = {
   disabled: true,
 }
 
-export function SelectPanel({
+export type SelectPanelMessageProps = {
+  children: React.ReactNode
+  title: string
+  variant: 'noitems' | 'nomatches'
+}
+export const SelectPanelMessage: React.FC<SelectPanelMessageProps> = ({variant = 'noitems', title, children}) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexGrow: 1,
+        height: '100%',
+        gap: 1,
+        paddingX: 4,
+        textAlign: 'center',
+        a: {color: 'inherit', textDecoration: 'underline'},
+        minHeight: 'min(calc(var(--max-height) - 150px), 324px)',
+        //                 maxHeight of dialog - (header & footer)
+      }}
+    >
+      <Text sx={{fontSize: 1, fontWeight: 'semibold'}}>{title}</Text>
+      <Text
+        sx={{fontSize: 1, color: 'fg.muted', display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center'}}
+      >
+        {children}
+      </Text>
+    </Box>
+  )
+}
+
+function Panel({
   open,
   onOpenChange,
   renderAnchor = props => {
@@ -94,6 +130,7 @@ export function SelectPanel({
   sx,
   loading,
   initialLoadingType = 'spinner',
+  children,
   ...listProps
 }: SelectPanelProps): JSX.Element {
   const inputRef = React.useRef<HTMLInputElement>(null)
@@ -241,6 +278,19 @@ export function SelectPanel({
     }
   }
 
+  const isNoItemsState = items.length === 0 && dataLoadedOnce.current && !loading
+  const isNoMatchState = items.length === 0 && filterValue !== '' && dataLoadedOnce.current && !loading
+
+  const deconstructChildren = (children: React.ReactNode) => {
+    return React.Children.toArray(children).find(child => {
+      if (isNoMatchState) return child.props.variant === 'nomatches' && React.isValidElement(child)
+      else if (isNoItemsState) return child.props.variant === 'noitems' && React.isValidElement(child)
+      else return []
+    })
+  }
+
+  const message = deconstructChildren(children)
+
   return (
     <LiveRegion>
       <AnchoredOverlay
@@ -279,6 +329,7 @@ export function SelectPanel({
               </Box>
             ) : null}
           </Box>
+
           <FilteredActionList
             filterValue={filterValue}
             onFilterChange={onFilterChange}
@@ -295,11 +346,14 @@ export function SelectPanel({
             inputRef={inputRef}
             loading={isLoading}
             loadingType={loadingType()}
+            emptyState={isNoItemsState}
+            message={message}
             // inheriting height and maxHeight ensures that the FilteredActionList is never taller
             // than the Overlay (which would break scrolling the items)
             sx={{...sx, height: 'inherit', maxHeight: 'inherit'}}
           />
-          {footer && (
+
+          {footer && !isNoItemsState ? (
             <Box
               sx={{
                 display: 'flex',
@@ -310,11 +364,15 @@ export function SelectPanel({
             >
               {footer}
             </Box>
-          )}
+          ) : null}
         </Box>
       </AnchoredOverlay>
     </LiveRegion>
   )
 }
 
-SelectPanel.displayName = 'SelectPanel'
+Panel.displayName = 'SelectPanel'
+
+export const SelectPanel = Object.assign(Panel, {
+  Message: SelectPanelMessage,
+})

From 38ca715049e73e1f817ac36474976064cc74f457 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 19 Sep 2024 14:33:35 +1000
Subject: [PATCH 2/3] fix linting and staff

---
 packages/react/src/FeatureFlags/DefaultFeatureFlags.ts        | 2 +-
 .../react/src/FilteredActionList/FilteredActionListEntry.tsx  | 4 ++--
 .../FilteredActionListWithDeprecatedActionList.tsx            | 2 --
 .../FilteredActionListWithModernActionList.tsx                | 4 ----
 .../react/src/SelectPanel/SelectPanel.features.stories.tsx    | 1 -
 packages/react/src/SelectPanel/SelectPanel.tsx                | 3 ++-
 6 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
index daeb9cee255..3ab756ea60f 100644
--- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
+++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
@@ -5,5 +5,5 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_css_modules_staff: false,
   primer_react_css_modules_ga: false,
   primer_react_action_list_item_as_button: false,
-  primer_react_select_panel_with_modern_action_list: true,
+  primer_react_select_panel_with_modern_action_list: false,
 })
diff --git a/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx b/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
index d8f736514cd..e185ecedfc0 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListEntry.tsx
@@ -6,8 +6,8 @@ import {useFeatureFlag} from '../FeatureFlags'
 
 export function FilteredActionList(props: FilteredActionListProps): JSX.Element {
   const enabled = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
-  return <WithStableActionList {...props} />
-  // else return <WithDeprecatedActionList {...props} />
+  if (enabled) return <WithStableActionList {...props} />
+  else return <WithDeprecatedActionList {...props} />
 }
 
 FilteredActionList.displayName = 'FilteredActionList'
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
index 77c4e7c8139..3de9c215a72 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
@@ -35,8 +35,6 @@ export interface FilteredActionListProps
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
-  emptyState?: boolean
-  children?: React.ReactNode
 }
 
 const StyledHeader = styled.div`
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
index 162803dbf2b..2ccc9ac9f2c 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
@@ -18,11 +18,9 @@ import {VisuallyHidden} from '../internal/components/VisuallyHidden'
 import type {SxProp} from '../sx'
 import type {FilteredActionListLoadingType} from './FilteredActionListLoaders'
 import {FilteredActionListLoadingTypes, FilteredActionListBodyLoader} from './FilteredActionListLoaders'
-import Text from '../Text'
 
 import {isValidElementType} from 'react-is'
 import type {RenderItemFn} from '../deprecated/ActionList/List'
-import {SelectPanelMessage} from '../SelectPanel/SelectPanel'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -37,7 +35,6 @@ export interface FilteredActionListProps
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
-  emptyState?: boolean
 }
 
 const StyledHeader = styled.div`
@@ -57,7 +54,6 @@ export function FilteredActionList({
   sx,
   groupMetadata,
   showItemDividers,
-  emptyState,
   message,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
diff --git a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
index f6d779af44c..f2fb3cf5f0b 100644
--- a/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.features.stories.tsx
@@ -16,7 +16,6 @@ import {
 } from '@primer/octicons-react'
 import useSafeTimeout from '../hooks/useSafeTimeout'
 import Link from '../Link'
-import Text from '../Text'
 
 const meta = {
   title: 'Components/SelectPanel/Features',
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 6934eaa2ab5..eafda3d77a7 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -74,6 +74,8 @@ export type SelectPanelMessageProps = {
   title: string
   variant: 'noitems' | 'nomatches'
 }
+// we will have more variants in the future like error / warning etc
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const SelectPanelMessage: React.FC<SelectPanelMessageProps> = ({variant = 'noitems', title, children}) => {
   return (
     <Box
@@ -346,7 +348,6 @@ function Panel({
             inputRef={inputRef}
             loading={isLoading}
             loadingType={loadingType()}
-            emptyState={isNoItemsState}
             message={message}
             // inheriting height and maxHeight ensures that the FilteredActionList is never taller
             // than the Overlay (which would break scrolling the items)

From 9895c58d1e6118ead816629b71c6e97e2d8a55fa Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 19 Sep 2024 14:35:30 +1000
Subject: [PATCH 3/3] footer not depend on empty state

---
 packages/react/src/SelectPanel/SelectPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index eafda3d77a7..59c458c5f5c 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -354,7 +354,7 @@ function Panel({
             sx={{...sx, height: 'inherit', maxHeight: 'inherit'}}
           />
 
-          {footer && !isNoItemsState ? (
+          {footer ? (
             <Box
               sx={{
                 display: 'flex',