diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx index b82b3486730..f3feff2f86c 100644 --- a/src/ActionList/Description.tsx +++ b/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 = ({variant = 'inline', sx = {}, ...props}) => { +export const Description: React.FC = ({variant = 'inline', sx = {}, ...props}) => { const styles = { fontSize: 0, lineHeight: '16px', diff --git a/src/ActionList/Group.tsx b/src/ActionList/Group.tsx index d67be85f3ce..74afa85018f 100644 --- a/src/ActionList/Group.tsx +++ b/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 +type ContextProps = Pick export const GroupContext = React.createContext({}) -export const Group: React.FC = ({ +export const Group: React.FC = ({ title, variant = 'subtle', auxiliaryText, @@ -73,7 +73,7 @@ export const Group: React.FC = ({ ) } -export type HeaderProps = Pick & { +export type HeaderProps = Pick & { labelId: string } diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index db1c4ed04db..2fbe35f1893 100644 --- a/src/ActionList/Item.tsx +++ b/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,7 +82,7 @@ export type ItemProps = { const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']) export {Slot} -export type ItemContext = Pick & { +export type ItemContext = Pick & { inlineDescriptionId: string blockDescriptionId: string } @@ -87,7 +90,7 @@ export type ItemContext = Pick & { const LiBox = styled.li(sx) export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale -export const Item = React.forwardRef( +export const Item = React.forwardRef( ( { variant = 'default', @@ -106,12 +109,12 @@ export const Item = React.forwardRef( 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( ) } -) as PolymorphicForwardRefComponent<'li', ItemProps> +) as PolymorphicForwardRefComponent<'li', ActionListItemProps> Item.displayName = 'ActionList.Item' diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx index e2bad03244a..7ee84b699d1 100644 --- a/src/ActionList/LinkItem.tsx +++ b/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 & LinkProps +export type ActionListLinkItemProps = Pick & 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} ) -}) as PolymorphicForwardRefComponent<'a', LinkItemProps> +}) as PolymorphicForwardRefComponent<'a', ActionListLinkItemProps> diff --git a/src/ActionList/List.tsx b/src/ActionList/List.tsx index a3c060a532a..dd52ca0ae1b 100644 --- a/src/ActionList/List.tsx +++ b/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 +type ContextProps = Pick export const ListContext = React.createContext({}) const ListBox = styled.ul(sx) -export const List = React.forwardRef( +export const List = React.forwardRef( ( {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props}, forwardedRef @@ -68,6 +68,6 @@ export const List = React.forwardRef( ) } -) as PolymorphicForwardRefComponent<'ul', ListProps> +) as PolymorphicForwardRefComponent<'ul', ActionListProps> List.displayName = 'ActionList' diff --git a/src/ActionList/Selection.tsx b/src/ActionList/Selection.tsx index acc86509893..9e7e03e8ee1 100644 --- a/src/ActionList/Selection.tsx +++ b/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 +type SelectionProps = Pick export const Selection: React.FC = ({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 diff --git a/src/ActionList/Visuals.tsx b/src/ActionList/Visuals.tsx index 1e4e98bf84b..80cf9e0814d 100644 --- a/src/ActionList/Visuals.tsx +++ b/src/ActionList/Visuals.tsx @@ -28,7 +28,7 @@ export const LeadingVisualContainer: React.FC = ({sx = {}, ...props ) } -export type LeadingVisualProps = VisualProps +export type ActionListLeadingVisualProps = VisualProps export const LeadingVisual: React.FC = ({sx = {}, ...props}) => { return ( @@ -50,7 +50,7 @@ export const LeadingVisual: React.FC = ({sx = {}, ...props}) => { ) } -export type TrailingVisualProps = VisualProps +export type ActionListTrailingVisualProps = VisualProps export const TrailingVisual: React.FC = ({sx = {}, ...props}) => { return ( diff --git a/src/ActionList/index.ts b/src/ActionList/index.ts index f27a3b53d50..4d5e0758fd0 100644 --- a/src/ActionList/index.ts +++ b/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. diff --git a/src/index.ts b/src/index.ts index 99404febcb3..2f432a05457 100644 --- a/src/index.ts +++ b/src/index.ts @@ -39,6 +39,7 @@ export type { ActionListProps, ActionListGroupProps, ActionListItemProps, + ActionListLinkItemProps, ActionListDescriptionProps, ActionListLeadingVisualProps, ActionListTrailingVisualProps