feat: support children as fn and remove disclosure

.changeset/chatty-apes-speak.md

@@ -11,7 +11,6 @@ Breaking changes:
 * HTML structure output may have changed
 * Some passed props from our component to reakit and not documented as a usage as been removed. If you need a different usage let us knwow, now we own the code
 * Tabs props API has been completly changed
-* Tooltip do not use cloneElement and accept only children as function now.
 
 Components changed:
 * Accordion (useId)

packages/design-system/src/components/Popover/Popover.stories.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, Ref } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Popover, ButtonPrimary, ButtonIcon, StackVertical, Form } from '../../';
-import { DisclosureFnProps } from '../Disclosure/Disclosure';
+import { Popover, ButtonPrimary, StackVertical, Form } from '../../';
+import { PopoverTriggerProps } from './';
 
 export default {
 	component: Popover,
@@ -10,61 +10,60 @@ export default {
 const EasyPopover = () => <StackVertical gap="S">Hello hello</StackVertical>;
 
 /* eslint-disable-next-line react/display-name */
-const OpenPopover = forwardRef((props: any, ref: Ref) => {
+const OpenPopover = forwardRef(({ onClick, ...props }: any, ref: Ref) => {
 	return (
-		<ButtonPrimary onClick={action('Clicked disclosure')} {...props} ref={ref}>
+		<ButtonPrimary
+			onClick={() => {
+				if (onClick) {
+					onClick();
+				}
+				action('Clicked disclosure');
+			}}
+			{...props}
+			ref={ref}
+		>
 			Open popover
 		</ButtonPrimary>
 	);
 });
 
 export const DefaultStory = () => (
 	<div style={{ padding: '1.2rem' }}>
-		<Popover aria-label="Custom popover" disclosure={<OpenPopover />}>
-			Text Content
+		<Popover aria-label="Custom popover" popup="Text Content">
+			<OpenPopover />
 		</Popover>
 	</div>
 );
 
-export const DisclosureStory = () => (
+export const ChildrenAsFunctionStory = () => (
 	<div style={{ padding: '1.2rem' }}>
-		<Popover
-			aria-label="Custom popover"
-			disclosure={
-				<ButtonIcon onClick={action('Clicked disclosure')} icon="question-filled">
-					Open popover
-				</ButtonIcon>
-			}
-		>
-			Text Content
+		<Popover aria-label="Custom popover" popup="Text Content">
+			{(props: PopoverTriggerProps) => <OpenPopover {...props} />}
 		</Popover>
 	</div>
 );
 
-export const FormDisclosureStory = () => (
+export const FormFocusStory = () => (
 	<div style={{ padding: '1.2rem' }}>
-		<Popover
-			aria-label="Custom popover"
-			focusOnDisclosure
-			disclosure={<Form.Text name="text" label="Text enabled" />}
-		>
-			Text Content
+		<Popover aria-label="Custom popover" popup="Text Content">
+			<Form.Text name="text" label="Text enabled" />
 		</Popover>
 	</div>
 );
 
-export const WithoutPaddingStory = () => (
-	<div style={{ padding: '1.2rem' }}>
-		<Popover aria-label="Custom popover" disclosure={<OpenPopover />} isFixed hasPadding={false}>
-			Text Content without padding
+export const FixedStory = () => (
+	<div>
+		<Popover aria-label="Custom popover" popup="Text Content" isFixed hasPadding={false}>
+			<OpenPopover />
 		</Popover>
 	</div>
 );
 
-export const WithFunctionAsChildren = () => (
+export const WithContentAsFunction = () => (
 	<div style={{ padding: '1.2rem' }}>
-		<Popover aria-label="Custom popover" disclosure={<OpenPopover />}>
-			{(popover: DisclosureFnProps) => (
+		<Popover
+			aria-label="Custom popover"
+			popup={(popover: DisclosureFnProps) => (
 				<>
 					<StackVertical gap="S">
 						There is some content
@@ -73,6 +72,8 @@ export const WithFunctionAsChildren = () => (
 					<EasyPopover />
 				</>
 			)}
+		>
+			<OpenPopover />
 		</Popover>
 	</div>
 );

packages/design-system/src/components/Popover/Popover.tsx

@@ -1,69 +1,65 @@
-import { useRef } from 'react';
-import type { ReactNode } from 'react';
+import { useRef, Fragment } from 'react';
+import type { ReactNode, MouseEvent } from 'react';
 import tokens from '@talend/design-tokens';
 
 import { Placement, FloatingArrow, FloatingPortal } from '@floating-ui/react';
 import { usePopover } from './usePopover';
-import { Disclosure } from '../Disclosure/Disclosure';
 import theme from './Popover.module.scss';
+import { renderOrClone, ChildrenOrFn } from '../../renderOrClone';
 
-interface PopoverOptions {
-	disclosure?: ReactNode;
+type PopoverOptions = {
+	popup: ReactNode | ((props: any) => ReactNode);
 	initialOpen?: boolean;
 	placement?: Placement;
 	modal?: boolean;
 	open?: boolean;
 	isFixed?: boolean;
 	onOpenChange?: (open: boolean) => void;
-}
+};
+
+export type PopoverProps = {
+	children: ChildrenOrFn;
+} & PopoverOptions;
 
 export function Popover({
 	children,
-	disclosure,
 	modal = true,
 	isFixed = false,
+	popup,
 	...restOptions
-}: {
-	children: ReactNode;
-} & PopoverOptions) {
+}: PopoverProps) {
 	// This can accept any props as options, e.g. `placement`,
 	// or other positioning options.
 	const arrowRef = useRef<SVGSVGElement>(null);
 	const popover = usePopover({ modal, arrowRef, ...restOptions });
 
-	let childrenRendered = children;
-	if (typeof children === 'function') {
-		childrenRendered = children(popover);
-	}
-	let content = (
-		<div
-			ref={popover.refs.setFloating}
-			className={theme.popover}
-			style={{ ...popover.floatingStyles, display: popover.open ? 'block' : 'none' }}
-			aria-labelledby={popover.labelId}
-			aria-describedby={popover.descriptionId}
-			{...popover.getFloatingProps(restOptions)}
-		>
-			<FloatingArrow
-				ref={arrowRef}
-				context={popover.context}
-				strokeWidth={1}
-				stroke={tokens.coralColorIllustrationShadow}
-				fill={tokens.coralColorNeutralBackground}
-			/>
-			{childrenRendered}
-		</div>
-	);
-	if (isFixed) {
-		content = <FloatingPortal>{content}</FloatingPortal>;
-	}
-	const disclosureProps = popover.getReferenceProps({ onClick: e => e.stopPropagation() });
+	const Wrapper = isFixed ? FloatingPortal : Fragment;
+	const onClick = (e: MouseEvent<HTMLElement>) => {
+		e.preventDefault();
+	};
+	const childrenProps = popover.getReferenceProps({ onClick });
 	return (
 		<>
-			<Disclosure popref={popover.refs.setReference} {...disclosureProps}>
-				{disclosure}
-			</Disclosure>
-			{content}
+			{renderOrClone(children, { ...childrenProps, ref: popover.refs.setReference })}
+			<Wrapper>
+				<div
+					ref={popover.refs.setFloating}
+					className={theme.popover}
+					style={{ ...popover.floatingStyles, display: popover.open ? 'block' : 'none' }}
+					aria-labelledby={popover.labelId}
+					aria-describedby={popover.descriptionId}
+					{...popover.getFloatingProps(restOptions)}
+				>
+					<FloatingArrow
+						ref={arrowRef}
+						context={popover.context}
+						strokeWidth={1}
+						stroke={tokens.coralColorIllustrationShadow}
+						fill={tokens.coralColorNeutralBackground}
+					/>
+					{typeof popup === 'function' ? popup(popover.getFloatingProps()) : popup}
+				</div>
+			</Wrapper>
 		</>
 	);
 }

packages/design-system/src/components/Popover/index.ts

@@ -1,3 +1,4 @@
 import { Popover } from './Popover';
-
+export type { PopoverProps } from './Popover';
+export type { PopoverTriggerProps } from './usePopover';
 export default Popover;

packages/design-system/src/components/Popover/usePopover.tsx

@@ -17,14 +17,36 @@ import {
 const ARROW_HEIGHT = 7;
 const GAP = 2;
 
-interface PopoverOptions {
+type PopoverOptions = {
 	initialOpen?: boolean;
 	arrowRef?: MutableRefObject<SVGSVGElement | null>;
 	placement?: Placement;
 	modal?: boolean;
 	open?: boolean;
 	onOpenChange?: (open: boolean) => void;
-}
+};
+
+export type PopoverTriggerProps = {
+	onClick?: (event: any) => void;
+	ref: any;
+};
+
+export type UsePopoverType = {
+	// floating-ui types
+	refs: any;
+	getFloatingProps: (props?: any) => any;
+	floatingStyles: any;
+	context: any;
+	getReferenceProps: (props?: any) => any;
+	// local state
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	modal?: boolean;
+	labelId?: string;
+	descriptionId?: string;
+	setLabelId: (id: string) => void;
+	setDescriptionId: (id: string) => void;
+};
 
 export function usePopover({
 	initialOpen = false,
@@ -33,7 +55,7 @@ export function usePopover({
 	modal,
 	open: controlledOpen,
 	onOpenChange: setControlledOpen,
-}: PopoverOptions = {}) {
+}: PopoverOptions = {}): UsePopoverType {
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
 	const [labelId, setLabelId] = useState<string | undefined>();
 	const [descriptionId, setDescriptionId] = useState<string | undefined>();

packages/design-system/src/components/Tooltip/Tooltip.tsx

@@ -20,6 +20,7 @@ import {
 import { useId } from '../../useId';
 
 import styles from './Tooltip.module.scss';
+import { renderOrClone } from '../../renderOrClone';
 
 export type Placement =
 	| 'top-start'
@@ -84,13 +85,11 @@ const Tooltip = ({ id, children, title, placement = 'top', ...rest }: TooltipPro
 
 	return (
 		<>
-			{children(
-				{
-					...getReferenceProps(),
-					'aria-describedby': safeId,
-				},
-				floating.refs.setReference,
-			)}
+			{renderOrClone(children, {
+				...getReferenceProps(),
+				'aria-describedby': safeId,
+				ref: floating.refs.setReference,
+			})}
 			<FloatingPortal>
 				<div
 					{...getFloatingProps()}

packages/design-system/src/renderOrClone.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type ChildrenOrFn = ReactNode | ((props: any) => ReactNode);
+
+export function renderOrClone(children: ChildrenOrFn, props: any = {}): ReactNode {
+	if (typeof children === 'function') {
+		return children(props);
+	}
+	return children && props ? React.cloneElement(children, props) : children;
+}