v35: Remove type aliases for ActionList (#1937)

* Replace aliases for ActionList types

* export types for LinkItem

* update selection types

Author: siddharthkp

src/ActionList/Description.tsx

@@ -4,7 +4,7 @@ import {SxProp, merge} from '../sx'
 import Truncate from '../Truncate'
 import {Slot, ItemContext} from './Item'
 
-export type DescriptionProps = {
+export type ActionListDescriptionProps = {
   /**
    * Secondary text style variations.
    *
@@ -14,7 +14,7 @@ export type DescriptionProps = {
   variant?: 'inline' | 'block'
 } & SxProp
 
-export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
+export const Description: React.FC<ActionListDescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
   const styles = {
     fontSize: 0,
     lineHeight: '16px',

src/ActionList/Group.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import {useSSRSafeId} from '@react-aria/ssr'
 import Box from '../Box'
 import {SxProp} from '../sx'
-import {ListContext, ListProps} from './List'
+import {ListContext, ActionListProps} from './List'
 import {AriaRole} from '../utils/types'
 
-export type GroupProps = {
+export type ActionListGroupProps = {
   /**
    * Style variations. Usage is discretionary.
    *
@@ -29,13 +29,13 @@ export type GroupProps = {
     /**
      * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
      */
-    selectionVariant?: ListProps['selectionVariant'] | false
+    selectionVariant?: ActionListProps['selectionVariant'] | false
   }
 
-type ContextProps = Pick<GroupProps, 'selectionVariant'>
+type ContextProps = Pick<ActionListGroupProps, 'selectionVariant'>
 export const GroupContext = React.createContext<ContextProps>({})
 
-export const Group: React.FC<GroupProps> = ({
+export const Group: React.FC<ActionListGroupProps> = ({
   title,
   variant = 'subtle',
   auxiliaryText,
@@ -73,7 +73,7 @@ export const Group: React.FC<GroupProps> = ({
   )
 }
 
-export type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
+export type HeaderProps = Pick<ActionListGroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
   labelId: string
 }
 

src/ActionList/Item.tsx

@@ -7,12 +7,15 @@ import Box, {BoxProps} from '../Box'
 import sx, {SxProp, merge} from '../sx'
 import createSlots from '../utils/create-slots'
 import {AriaRole} from '../utils/types'
-import {ListContext, ListProps} from './List'
-import {GroupContext, GroupProps} from './Group'
+import {ListContext, ActionListProps} from './List'
+import {GroupContext, ActionListGroupProps} from './Group'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {Selection} from './Selection'
 
-export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
+export const getVariantStyles = (
+  variant: ActionListItemProps['variant'],
+  disabled: ActionListItemProps['disabled']
+) => {
   if (disabled) {
     return {
       color: 'primer.fg.disabled',
@@ -39,7 +42,7 @@ export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemPr
   }
 }
 
-export type ItemProps = {
+export type ActionListItemProps = {
   /**
    * Primary content for an Item
    */
@@ -79,15 +82,15 @@ export type ItemProps = {
 
 const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
 export {Slot}
-export type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
+export type ItemContext = Pick<ActionListItemProps, 'variant' | 'disabled'> & {
   inlineDescriptionId: string
   blockDescriptionId: string
 }
 
 const LiBox = styled.li<SxProp>(sx)
 export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
 
-export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
+export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
   (
     {
       variant = 'default',
@@ -106,12 +109,12 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
     const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
     const {container, afterSelect, selectionAttribute} = React.useContext(ActionListContainerContext)
 
-    let selectionVariant: ListProps['selectionVariant'] | GroupProps['selectionVariant']
+    let selectionVariant: ActionListProps['selectionVariant'] | ActionListGroupProps['selectionVariant']
     if (typeof groupSelectionVariant !== 'undefined') selectionVariant = groupSelectionVariant
     else selectionVariant = listSelectionVariant
 
     /** Infer item role based on the container */
-    let itemRole: ItemProps['role']
+    let itemRole: ActionListItemProps['role']
     if (container === 'ActionMenu' || container === 'DropdownMenu') {
       if (selectionVariant === 'single') itemRole = 'menuitemradio'
       else if (selectionVariant === 'multiple') itemRole = 'menuitemcheckbox'
@@ -257,7 +260,7 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       </Slots>
     )
   }
-) as PolymorphicForwardRefComponent<'li', ItemProps>
+) as PolymorphicForwardRefComponent<'li', ActionListItemProps>
 
 Item.displayName = 'ActionList.Item'
 

src/ActionList/LinkItem.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '@radix-ui/react-polymorphic'
 import Link from '../Link'
 import {SxProp, merge} from '../sx'
-import {Item, ItemProps} from './Item'
+import {Item, ActionListItemProps} from './Item'
 
 // adopted from React.AnchorHTMLAttributes
 type LinkProps = {
@@ -18,7 +18,7 @@ type LinkProps = {
 }
 
 // LinkItem does not support selected, variants, etc.
-type LinkItemProps = Pick<ItemProps, 'children' | 'sx'> & LinkProps
+export type ActionListLinkItemProps = Pick<ActionListItemProps, 'children' | 'sx'> & LinkProps
 
 export const LinkItem = React.forwardRef(({sx = {}, as: Component, ...props}, forwardedRef) => {
   const styles = {
@@ -46,4 +46,4 @@ export const LinkItem = React.forwardRef(({sx = {}, as: Component, ...props}, fo
       {props.children}
     </Item>
   )
-}) as PolymorphicForwardRefComponent<'a', LinkItemProps>
+}) as PolymorphicForwardRefComponent<'a', ActionListLinkItemProps>

src/ActionList/List.tsx

@@ -5,7 +5,7 @@ import sx, {SxProp, merge} from '../sx'
 import {AriaRole} from '../utils/types'
 import {ActionListContainerContext} from './ActionListContainerContext'
 
-export type ListProps = {
+export type ActionListProps = {
   /**
    * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
    */
@@ -24,12 +24,12 @@ export type ListProps = {
   role?: AriaRole
 } & SxProp
 
-type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'>
+type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'>
 export const ListContext = React.createContext<ContextProps>({})
 
 const ListBox = styled.ul<SxProp>(sx)
 
-export const List = React.forwardRef<HTMLUListElement, ListProps>(
+export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
   (
     {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props},
     forwardedRef
@@ -68,6 +68,6 @@ export const List = React.forwardRef<HTMLUListElement, ListProps>(
       </ListBox>
     )
   }
-) as PolymorphicForwardRefComponent<'ul', ListProps>
+) as PolymorphicForwardRefComponent<'ul', ActionListProps>
 
 List.displayName = 'ActionList'

src/ActionList/Selection.tsx

@@ -1,18 +1,18 @@
 import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
-import {ListContext, ListProps} from './List'
-import {GroupContext, GroupProps} from './Group'
-import {ItemProps} from './Item'
+import {ListContext, ActionListProps} from './List'
+import {GroupContext, ActionListGroupProps} from './Group'
+import {ActionListItemProps} from './Item'
 import {LeadingVisualContainer} from './Visuals'
 
-type SelectionProps = Pick<ItemProps, 'selected'>
+type SelectionProps = Pick<ActionListItemProps, 'selected'>
 export const Selection: React.FC<SelectionProps> = ({selected}) => {
   const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
   const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
 
   /** selectionVariant in Group can override the selectionVariant in List root */
   /** fallback to selectionVariant from container menu if any (ActionMenu, SelectPanel ) */
-  let selectionVariant: ListProps['selectionVariant'] | GroupProps['selectionVariant']
+  let selectionVariant: ActionListProps['selectionVariant'] | ActionListGroupProps['selectionVariant']
   if (typeof groupSelectionVariant !== 'undefined') selectionVariant = groupSelectionVariant
   else selectionVariant = listSelectionVariant
 

src/ActionList/Visuals.tsx

@@ -28,7 +28,7 @@ export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props
   )
 }
 
-export type LeadingVisualProps = VisualProps
+export type ActionListLeadingVisualProps = VisualProps
 export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
   return (
     <Slot name="LeadingVisual">
@@ -50,7 +50,7 @@ export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
   )
 }
 
-export type TrailingVisualProps = VisualProps
+export type ActionListTrailingVisualProps = VisualProps
 export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
   return (
     <Slot name="TrailingVisual">

src/ActionList/index.ts

@@ -6,14 +6,12 @@ import {Divider} from './Divider'
 import {Description} from './Description'
 import {LeadingVisual, TrailingVisual} from './Visuals'
 
-export type {ListProps as ActionListProps} from './List'
-export type {GroupProps as ActionListGroupProps} from './Group'
-export type {ItemProps as ActionListItemProps} from './Item'
-export type {DescriptionProps as ActionListDescriptionProps} from './Description'
-export type {
-  LeadingVisualProps as ActionListLeadingVisualProps,
-  TrailingVisualProps as ActionListTrailingVisualProps
-} from './Visuals'
+export type {ActionListProps} from './List'
+export type {ActionListGroupProps} from './Group'
+export type {ActionListItemProps} from './Item'
+export type {ActionListLinkItemProps} from './LinkItem'
+export type {ActionListDescriptionProps} from './Description'
+export type {ActionListLeadingVisualProps, ActionListTrailingVisualProps} from './Visuals'
 
 /**
  * Collection of list-related components.

src/index.ts

@@ -39,6 +39,7 @@ export type {
   ActionListProps,
   ActionListGroupProps,
   ActionListItemProps,
+  ActionListLinkItemProps,
   ActionListDescriptionProps,
   ActionListLeadingVisualProps,
   ActionListTrailingVisualProps