diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx index 272b83a864c..48a1425caa1 100644 --- a/src/ActionMenu.tsx +++ b/src/ActionMenu.tsx @@ -14,7 +14,7 @@ interface ActionMenuPropsWithAnchor { * Will receive the `anchoredContent` prop as `children` prop. * Uses a `Button` by default. */ - renderAnchor: null | (>(props: T) => JSX.Element) + renderAnchor?: >(props: T) => JSX.Element | null /** * An override to the internal ref that will be spread on to the renderAnchor diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx index 9473ef537c8..5ee841f649c 100644 --- a/src/AnchoredOverlay/AnchoredOverlay.tsx +++ b/src/AnchoredOverlay/AnchoredOverlay.tsx @@ -10,7 +10,7 @@ interface AnchoredOverlayPropsWithAnchor { * A custom function component used to render the anchor element. * Will receive the selected text as `children` prop when an item is activated. */ - renderAnchor: >(props: T) => JSX.Element + renderAnchor: >(props: T) => JSX.Element | null /** * An override to the internal ref that will be spread on to the renderAnchor @@ -30,18 +30,8 @@ interface AnchoredOverlayPropsWithoutAnchor { */ anchorRef: React.RefObject } -interface AnchoredOverlayBaseProps extends Pick { - /** - * A custom function component used to render the anchor element. - * Will receive the selected text as `children` prop when an item is activated. - */ - renderAnchor: null | (>(props: T) => JSX.Element) - - /** - * An override to the internal ref that will be used to position the overlay. This ref will also be passed to renderAnchor. If you want to use an external anchor, you should provide `anchorRef` and set the `rendorAnchor` prop to `() => null` - */ - anchorRef?: React.RefObject +interface AnchoredOverlayBaseProps extends Pick { /** * Determines whether the overlay portion of the component should be shown or not */ diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx index 39354a1ad42..2cc3cd4fa98 100644 --- a/src/SelectPanel/SelectPanel.tsx +++ b/src/SelectPanel/SelectPanel.tsx @@ -86,10 +86,13 @@ export function SelectPanel({ props => { const selectedItems = Array.isArray(selected) ? selected : [...(selected ? [selected] : [])] - return renderAnchor({ - ...props, - children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder - }) + return ( + renderAnchor && + renderAnchor({ + ...props, + children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder + }) + ) }, [placeholder, renderAnchor, selected] )