diff --git a/docs/data/api/popover-root.json b/docs/data/api/popover-root.json index 7235da5dc..29da12e96 100644 --- a/docs/data/api/popover-root.json +++ b/docs/data/api/popover-root.json @@ -2,18 +2,14 @@ "props": { "animated": { "type": { "name": "bool" }, "default": "true" }, "closeDelay": { "type": { "name": "number" }, "default": "0" }, - "defaultOpen": { "type": { "name": "bool" } }, + "defaultOpen": { "type": { "name": "bool" }, "default": "false" }, "delay": { "type": { "name": "number" }, "default": "300" }, "delayType": { "type": { "name": "enum", "description": "'hover'
| 'rest'" }, "default": "'rest'" }, - "followCursorAxis": { - "type": { "name": "enum", "description": "'none'
| 'x'
| 'y'" }, - "default": "'none'" - }, "onOpenChange": { "type": { "name": "func" } }, - "open": { "type": { "name": "bool" } }, + "open": { "type": { "name": "bool" }, "default": "false" }, "openOnHover": { "type": { "name": "bool" }, "default": "false" } }, "name": "PopoverRoot", diff --git a/docs/data/translations/api-docs/popover-positioner/popover-positioner.json b/docs/data/translations/api-docs/popover-positioner/popover-positioner.json index b6354442e..327de01f6 100644 --- a/docs/data/translations/api-docs/popover-positioner/popover-positioner.json +++ b/docs/data/translations/api-docs/popover-positioner/popover-positioner.json @@ -2,43 +2,39 @@ "componentDescription": "The popover positioner element.", "propDescriptions": { "alignment": { - "description": "The alignment of the popover popup element to the anchor element along its cross axis." + "description": "The alignment of the popover element to the anchor element along its cross axis." }, "alignmentOffset": { - "description": "The offset of the popover popup element along its alignment axis." + "description": "The offset of the popover element along its alignment axis." }, - "anchor": { "description": "The element to which the popover popup element is anchored to." }, + "anchor": { "description": "The element to which the popover element is anchored to." }, "arrowPadding": { - "description": "Determines the padding between the arrow and the popover popup edges. Useful when the popover popup element has rounded corners via border-radius." + "description": "Determines the padding between the arrow and the popover edges. Useful when the popover element has rounded corners via border-radius." }, "className": { "description": "Class names applied to the element or a function that returns them based on the component's state." }, "collisionBoundary": { - "description": "The boundary that the popover popup element should be constrained to." + "description": "The boundary that the popover element should be constrained to." }, "collisionPadding": { - "description": "The padding between the popover popup element and the edges of the collision boundary to add whitespace between them to prevent them from touching." - }, - "container": { - "description": "The container element to which the popover positioner is appended to." + "description": "The padding between the popover element and the edges of the collision boundary to add whitespace between them to prevent them from touching." }, + "container": { "description": "The element the popover positioner element is appended to." }, "hideWhenDetached": { - "description": "Whether the popover popup element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view." + "description": "Whether the popover element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view." }, "keepMounted": { - "description": "Whether the popover popup remains mounted in the DOM while closed." + "description": "Whether the popover remains mounted in the DOM while closed." }, "positionStrategy": { - "description": "The CSS position strategy for positioning the popover popup element." + "description": "The CSS position strategy for positioning the popover element." }, "render": { "description": "A function to customize rendering of the component." }, "side": { - "description": "The side of the anchor element that the popover popup element should be placed at." - }, - "sideOffset": { - "description": "The gap between the anchor element and the popover popup element." + "description": "The side of the anchor element that the popover element should be placed at." }, + "sideOffset": { "description": "The gap between the anchor element and the popover element." }, "sticky": { "description": "Whether to allow the popover to remain stuck in view while the anchor element is scrolled out of view." } diff --git a/docs/data/translations/api-docs/popover-root/popover-root.json b/docs/data/translations/api-docs/popover-root/popover-root.json index fdadf6bef..0029313ff 100644 --- a/docs/data/translations/api-docs/popover-root/popover-root.json +++ b/docs/data/translations/api-docs/popover-root/popover-root.json @@ -2,13 +2,13 @@ "componentDescription": "The foundation for building custom-styled popovers.", "propDescriptions": { "animated": { - "description": "Whether the tooltip can animate, adding animation-related attributes and allowing for exit animations to play. Useful to disable in tests to remove async behavior." + "description": "Whether the popover can animate, adding animation-related attributes and allowing for exit animations to play. Useful to disable in tests to remove async behavior." }, "closeDelay": { "description": "The delay in milliseconds until the popover popup is closed when openOnHover is true." }, "defaultOpen": { - "description": "Specifies whether the popover is open initially when uncontrolled." + "description": "Whether the popover popup is open by default. Use when uncontrolled." }, "delay": { "description": "The delay in milliseconds until the popover popup is opened when openOnHover is true." @@ -16,17 +16,12 @@ "delayType": { "description": "The delay type to use when openOnHover is true. rest means the delay represents how long the user's cursor must rest on the trigger before the popover popup is opened. hover means the delay represents how long to wait as soon as the user's cursor has entered the trigger." }, - "followCursorAxis": { - "description": "Determines which axis the tooltip should follow the cursor on." - }, "onOpenChange": { "description": "Callback fired when the popover popup is requested to be opened or closed. Use when controlled." }, - "open": { - "description": "If true, the popover popup is open. Use when controlled." - }, + "open": { "description": "Whether the popover popup is open. Use when controlled." }, "openOnHover": { - "description": "If true, the popover popup opens when the trigger is hovered." + "description": "Whether the popover popup opens when the trigger is hovered after the provided delay." } }, "classDescriptions": {} diff --git a/packages/mui-base/src/Popover/Arrow/PopoverArrow.tsx b/packages/mui-base/src/Popover/Arrow/PopoverArrow.tsx index 1f759fc75..d0ab6c5df 100644 --- a/packages/mui-base/src/Popover/Arrow/PopoverArrow.tsx +++ b/packages/mui-base/src/Popover/Arrow/PopoverArrow.tsx @@ -1,12 +1,22 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import type { PopoverArrowOwnerState, PopoverArrowProps } from './PopoverArrow.types'; import { usePopoverPositionerContext } from '../Positioner/PopoverPositionerContext'; import { usePopoverRootContext } from '../Root/PopoverRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import { usePopoverArrow } from './usePopoverArrow'; +import type { Alignment, Side } from '../../utils/useAnchorPositioning'; +import type { BaseUIComponentProps } from '../../utils/types'; +import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; + +const customStyleHookMapping: CustomStyleHookMapping = { + open(value) { + return { + 'data-state': value ? 'open' : 'closed', + }; + }, +}; /** * Renders an arrow that points to the center of the anchor element. @@ -20,7 +30,7 @@ import { usePopoverArrow } from './usePopoverArrow'; * - [PopoverArrow API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverArrow) */ const PopoverArrow = React.forwardRef(function PopoverArrow( - props: PopoverArrowProps, + props: PopoverArrow.Props, forwardedRef: React.ForwardedRef, ) { const { className, render, hideWhenUncentered = false, ...otherProps } = props; @@ -33,7 +43,7 @@ const PopoverArrow = React.forwardRef(function PopoverArrow( hidden: hideWhenUncentered && arrowUncentered, }); - const ownerState: PopoverArrowOwnerState = React.useMemo( + const ownerState: PopoverArrow.OwnerState = React.useMemo( () => ({ open, side, @@ -52,18 +62,29 @@ const PopoverArrow = React.forwardRef(function PopoverArrow( ownerState, ref: mergedRef, extraProps: otherProps, - customStyleHookMapping: { - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; - }, - }, + customStyleHookMapping, }); return renderElement(); }); +namespace PopoverArrow { + export interface OwnerState { + open: boolean; + side: Side; + alignment: Alignment; + arrowUncentered: boolean; + } + + export interface Props extends BaseUIComponentProps<'div', OwnerState> { + /** + * If `true`, the arrow is hidden when it can't point to the center of the anchor element. + * @default false + */ + hideWhenUncentered?: boolean; + } +} + PopoverArrow.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ diff --git a/packages/mui-base/src/Popover/Arrow/PopoverArrow.types.ts b/packages/mui-base/src/Popover/Arrow/PopoverArrow.types.ts deleted file mode 100644 index 10435c668..000000000 --- a/packages/mui-base/src/Popover/Arrow/PopoverArrow.types.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { Side, Alignment } from '../../utils/useAnchorPositioning'; -import type { BaseUIComponentProps } from '../../utils/types'; - -export type PopoverArrowOwnerState = { - open: boolean; - side: Side; - alignment: Alignment; - arrowUncentered: boolean; -}; - -export interface PopoverArrowProps extends BaseUIComponentProps<'div', PopoverArrowOwnerState> { - /** - * If `true`, the arrow is hidden when it can't point to the center of the anchor element. - * @default false - */ - hideWhenUncentered?: boolean; -} diff --git a/packages/mui-base/src/Popover/Arrow/usePopoverArrow.ts b/packages/mui-base/src/Popover/Arrow/usePopoverArrow.ts index 49c56f2f7..3d34e3005 100644 --- a/packages/mui-base/src/Popover/Arrow/usePopoverArrow.ts +++ b/packages/mui-base/src/Popover/Arrow/usePopoverArrow.ts @@ -1,21 +1,20 @@ -'use client'; import * as React from 'react'; import { mergeReactProps } from '../../utils/mergeReactProps'; -import type { - UsePopoverArrowParameters, - UsePopoverArrowReturnValue, -} from './usePopoverArrow.types'; +import type { GenericHTMLProps } from '../../utils/types'; -export function usePopoverArrow(params: UsePopoverArrowParameters): UsePopoverArrowReturnValue { - const { arrowStyles } = params; +export function usePopoverArrow(params: usePopoverArrow.Parameters): usePopoverArrow.ReturnValue { + const { arrowStyles, hidden } = params; const getArrowProps = React.useCallback( (externalProps = {}) => { return mergeReactProps<'div'>(externalProps, { - style: arrowStyles, + style: { + ...arrowStyles, + ...(hidden && { visibility: 'hidden' }), + }, }); }, - [arrowStyles], + [arrowStyles, hidden], ); return React.useMemo( @@ -25,3 +24,13 @@ export function usePopoverArrow(params: UsePopoverArrowParameters): UsePopoverAr [getArrowProps], ); } + +namespace usePopoverArrow { + export interface Parameters { + arrowStyles: React.CSSProperties; + hidden?: boolean; + } + export interface ReturnValue { + getArrowProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + } +} diff --git a/packages/mui-base/src/Popover/Arrow/usePopoverArrow.types.ts b/packages/mui-base/src/Popover/Arrow/usePopoverArrow.types.ts deleted file mode 100644 index eb5a8a520..000000000 --- a/packages/mui-base/src/Popover/Arrow/usePopoverArrow.types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type * as React from 'react'; -import type { GenericHTMLProps } from '../../utils/types'; - -export interface UsePopoverArrowParameters { - arrowStyles: React.CSSProperties; - hidden?: boolean; -} - -export interface UsePopoverArrowReturnValue { - getArrowProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; -} diff --git a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx index a1ca2ecfa..f7732dd34 100644 --- a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx +++ b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { FloatingPortal } from '@floating-ui/react'; -import type { PopoverBackdropProps } from './PopoverBackdrop.types'; import { usePopoverRootContext } from '../Root/PopoverRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { HTMLElementType } from '../../utils/proptypes'; import { usePopoverBackdrop } from './usePopoverBackdrop'; +import type { BaseUIComponentProps } from '../../utils/types'; /** * Renders a backdrop for the popover. @@ -20,7 +20,7 @@ import { usePopoverBackdrop } from './usePopoverBackdrop'; * - [PopoverBackdrop API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverBackdrop) */ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop( - props: PopoverBackdropProps, + props: PopoverBackdrop.Props, forwardedRef: React.ForwardedRef, ) { const { className, render, keepMounted = false, container, ...otherProps } = props; @@ -48,6 +48,25 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop( return {renderElement()}; }); +namespace PopoverBackdrop { + export interface OwnerState { + open: boolean; + } + + export interface Props extends BaseUIComponentProps<'div', OwnerState> { + /** + * If `true`, the backdrop remains mounted when the popover content is closed. + * @default false + */ + keepMounted?: boolean; + /** + * The container element to which the backdrop is appended to. + * @default false + */ + container?: HTMLElement | null | React.MutableRefObject; + } +} + PopoverBackdrop.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ diff --git a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.types.ts b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.types.ts deleted file mode 100644 index 6c67f8c2f..000000000 --- a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.types.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { BaseUIComponentProps } from '../../utils/types'; - -export type PopoverBackdropOwnerState = { - open: boolean; -}; - -export interface PopoverBackdropProps - extends BaseUIComponentProps<'div', PopoverBackdropOwnerState> { - /** - * If `true`, the backdrop remains mounted when the popover content is closed. - * @default false - */ - keepMounted?: boolean; - /** - * The container element to which the backdrop is appended to. - * @default false - */ - container?: HTMLElement | null | React.MutableRefObject; -} diff --git a/packages/mui-base/src/Popover/Backdrop/usePopoverBackdrop.ts b/packages/mui-base/src/Popover/Backdrop/usePopoverBackdrop.ts index 41d0d8f75..08e5eadb9 100644 --- a/packages/mui-base/src/Popover/Backdrop/usePopoverBackdrop.ts +++ b/packages/mui-base/src/Popover/Backdrop/usePopoverBackdrop.ts @@ -1,9 +1,8 @@ -'use client'; import * as React from 'react'; import { mergeReactProps } from '../../utils/mergeReactProps'; -import type { UsePopoverBackdropReturnValue } from './usePopoverBackdrop.types'; +import type { GenericHTMLProps } from '../../utils/types'; -export function usePopoverBackdrop(): UsePopoverBackdropReturnValue { +export function usePopoverBackdrop(): usePopoverBackdrop.ReturnValue { const getBackdropProps = React.useCallback((externalProps = {}) => { return mergeReactProps<'div'>(externalProps, { role: 'presentation', @@ -23,3 +22,9 @@ export function usePopoverBackdrop(): UsePopoverBackdropReturnValue { [getBackdropProps], ); } + +namespace usePopoverBackdrop { + export interface ReturnValue { + getBackdropProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + } +} diff --git a/packages/mui-base/src/Popover/Backdrop/usePopoverBackdrop.types.ts b/packages/mui-base/src/Popover/Backdrop/usePopoverBackdrop.types.ts deleted file mode 100644 index 665dfea18..000000000 --- a/packages/mui-base/src/Popover/Backdrop/usePopoverBackdrop.types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { GenericHTMLProps } from '../../utils/types'; - -export interface UsePopoverBackdropParameters {} - -export interface UsePopoverBackdropReturnValue { - getBackdropProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; -} diff --git a/packages/mui-base/src/Popover/Close/PopoverClose.tsx b/packages/mui-base/src/Popover/Close/PopoverClose.tsx index d3f85f863..65fb0ccd6 100644 --- a/packages/mui-base/src/Popover/Close/PopoverClose.tsx +++ b/packages/mui-base/src/Popover/Close/PopoverClose.tsx @@ -2,10 +2,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import type { PopoverCloseProps } from './PopoverClose.types'; +import type { BaseUIComponentProps } from '../../utils/types'; import { usePopoverRootContext } from '../Root/PopoverRootContext'; import { usePopoverClose } from './usePopoverClose'; +const ownerState = {}; + /** * Renders a button that closes the popover when clicked. * @@ -18,7 +20,7 @@ import { usePopoverClose } from './usePopoverClose'; * - [PopoverClose API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverClose) */ const PopoverClose = React.forwardRef(function PopoverClose( - props: PopoverCloseProps, + props: PopoverClose.Props, forwardedRef: React.ForwardedRef, ) { const { render, className, ...otherProps } = props; @@ -35,7 +37,7 @@ const PopoverClose = React.forwardRef(function PopoverClose( propGetter: getCloseProps, render: render ?? 'button', className, - ownerState: {}, + ownerState, extraProps: otherProps, ref: forwardedRef, }); @@ -43,6 +45,12 @@ const PopoverClose = React.forwardRef(function PopoverClose( return renderElement(); }); +namespace PopoverClose { + export interface OwnerState {} + + export interface Props extends BaseUIComponentProps<'button', OwnerState> {} +} + PopoverClose.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ diff --git a/packages/mui-base/src/Popover/Close/PopoverClose.types.ts b/packages/mui-base/src/Popover/Close/PopoverClose.types.ts deleted file mode 100644 index 76ee18edb..000000000 --- a/packages/mui-base/src/Popover/Close/PopoverClose.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { BaseUIComponentProps } from '../../utils/types'; - -export type PopoverCloseOwnerState = {}; - -export interface PopoverCloseProps extends BaseUIComponentProps<'button', PopoverCloseOwnerState> {} diff --git a/packages/mui-base/src/Popover/Close/usePopoverClose.ts b/packages/mui-base/src/Popover/Close/usePopoverClose.ts index ffd009017..a65d24f2f 100644 --- a/packages/mui-base/src/Popover/Close/usePopoverClose.ts +++ b/packages/mui-base/src/Popover/Close/usePopoverClose.ts @@ -1,24 +1,21 @@ -'use client'; import * as React from 'react'; import { mergeReactProps } from '../../utils/mergeReactProps'; -import type { - UsePopoverCloseParameters, - UsePopoverCloseReturnValue, -} from './usePopoverClose.types'; import { useEventCallback } from '../../utils/useEventCallback'; -export function usePopoverClose(params: UsePopoverCloseParameters): UsePopoverCloseReturnValue { - const { onClose } = params; +export function usePopoverClose( + params: usePopoverDescription.Parameters, +): usePopoverDescription.ReturnValue { + const { onClose: onCloseProp } = params; - const onCloseMemo = useEventCallback(onClose); + const onClose = useEventCallback(onCloseProp); const getCloseProps = React.useCallback( (externalProps = {}) => { return mergeReactProps<'button'>(externalProps, { - onClick: onCloseMemo, + onClick: onClose, }); }, - [onCloseMemo], + [onClose], ); return React.useMemo( @@ -28,3 +25,14 @@ export function usePopoverClose(params: UsePopoverCloseParameters): UsePopoverCl [getCloseProps], ); } + +namespace usePopoverDescription { + export interface Parameters { + onClose: () => void; + } + export interface ReturnValue { + getCloseProps: ( + externalProps?: React.ComponentPropsWithoutRef<'button'>, + ) => React.ComponentPropsWithoutRef<'button'>; + } +} diff --git a/packages/mui-base/src/Popover/Close/usePopoverClose.types.ts b/packages/mui-base/src/Popover/Close/usePopoverClose.types.ts deleted file mode 100644 index a402a279c..000000000 --- a/packages/mui-base/src/Popover/Close/usePopoverClose.types.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface UsePopoverCloseParameters { - onClose: () => void; -} - -export interface UsePopoverCloseReturnValue { - getCloseProps: ( - externalProps?: React.ComponentPropsWithoutRef<'button'>, - ) => React.ComponentPropsWithoutRef<'button'>; -} diff --git a/packages/mui-base/src/Popover/Description/PopoverDescription.tsx b/packages/mui-base/src/Popover/Description/PopoverDescription.tsx index 2df52e385..0e8c15b5d 100644 --- a/packages/mui-base/src/Popover/Description/PopoverDescription.tsx +++ b/packages/mui-base/src/Popover/Description/PopoverDescription.tsx @@ -3,8 +3,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { usePopoverRootContext } from '../Root/PopoverRootContext'; -import type { PopoverDescriptionProps } from './PopoverDescription.types'; import { usePopoverDescription } from './usePopoverDescription'; +import type { BaseUIComponentProps } from '../../utils/types'; + +const ownerState = {}; /** * Renders a description element that describes the popover. @@ -18,7 +20,7 @@ import { usePopoverDescription } from './usePopoverDescription'; * - [PopoverDescription API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverDescription) */ const PopoverDescription = React.forwardRef(function PopoverDescription( - props: PopoverDescriptionProps, + props: PopoverDescription.Props, forwardedRef: React.ForwardedRef, ) { const { render, className, ...otherProps } = props; @@ -34,7 +36,7 @@ const PopoverDescription = React.forwardRef(function PopoverDescription( propGetter: getDescriptionProps, render: render ?? 'p', className, - ownerState: {}, + ownerState, ref: forwardedRef, extraProps: otherProps, }); @@ -42,6 +44,12 @@ const PopoverDescription = React.forwardRef(function PopoverDescription( return renderElement(); }); +namespace PopoverDescription { + export interface OwnerState {} + + export interface Props extends BaseUIComponentProps<'p', OwnerState> {} +} + PopoverDescription.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ diff --git a/packages/mui-base/src/Popover/Description/PopoverDescription.types.ts b/packages/mui-base/src/Popover/Description/PopoverDescription.types.ts deleted file mode 100644 index c6fbba455..000000000 --- a/packages/mui-base/src/Popover/Description/PopoverDescription.types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { BaseUIComponentProps } from '../../utils/types'; - -export type PopoverDescriptionOwnerState = {}; - -export interface PopoverDescriptionProps - extends BaseUIComponentProps<'p', PopoverDescriptionOwnerState> {} diff --git a/packages/mui-base/src/Popover/Description/usePopoverDescription.ts b/packages/mui-base/src/Popover/Description/usePopoverDescription.ts index 15a911e64..9941d2db1 100644 --- a/packages/mui-base/src/Popover/Description/usePopoverDescription.ts +++ b/packages/mui-base/src/Popover/Description/usePopoverDescription.ts @@ -1,16 +1,11 @@ -'use client'; import * as React from 'react'; import { mergeReactProps } from '../../utils/mergeReactProps'; import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; -import type { - UsePopoverDescriptionParameters, - UsePopoverDescriptionReturnValue, -} from './usePopoverDescription.types'; import { useId } from '../../utils/useId'; export function usePopoverDescription( - params: UsePopoverDescriptionParameters, -): UsePopoverDescriptionReturnValue { + params: usePopoverDescription.Parameters, +): usePopoverDescription.ReturnValue { const { descriptionId, setDescriptionId } = params; const id = useId(descriptionId); @@ -38,3 +33,15 @@ export function usePopoverDescription( [getDescriptionProps], ); } + +namespace usePopoverDescription { + export interface Parameters { + descriptionId: string | undefined; + setDescriptionId: React.Dispatch>; + } + export interface ReturnValue { + getDescriptionProps: ( + externalProps?: React.ComponentPropsWithoutRef<'p'>, + ) => React.ComponentPropsWithoutRef<'p'>; + } +} diff --git a/packages/mui-base/src/Popover/Description/usePopoverDescription.types.ts b/packages/mui-base/src/Popover/Description/usePopoverDescription.types.ts deleted file mode 100644 index 05fdcae7a..000000000 --- a/packages/mui-base/src/Popover/Description/usePopoverDescription.types.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type * as React from 'react'; - -export interface UsePopoverDescriptionParameters { - descriptionId: string | undefined; - setDescriptionId: React.Dispatch>; -} - -export interface UsePopoverDescriptionReturnValue { - getDescriptionProps: ( - externalProps?: React.ComponentPropsWithoutRef<'p'>, - ) => React.ComponentPropsWithoutRef<'p'>; -} diff --git a/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx b/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx index 29f5d1c04..aead56124 100644 --- a/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx +++ b/packages/mui-base/src/Popover/Popup/PopoverPopup.tsx @@ -2,11 +2,27 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { usePopoverRootContext } from '../Root/PopoverRootContext'; -import { PopoverPopupOwnerState, PopoverPopupProps } from './PopoverPopup.types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { usePopoverPositionerContext } from '../Positioner/PopoverPositionerContext'; import { usePopoverPopup } from './usePopoverPopup'; import { useForkRef } from '../../utils/useForkRef'; +import type { Side, Alignment } from '../../utils/useAnchorPositioning'; +import type { BaseUIComponentProps } from '../../utils/types'; +import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; + +const customStyleHookMapping: CustomStyleHookMapping = { + entering(value) { + return value ? { 'data-entering': '' } : null; + }, + exiting(value) { + return value ? { 'data-exiting': '' } : null; + }, + open(value) { + return { + 'data-state': value ? 'open' : 'closed', + }; + }, +}; /** * Renders the popover popup element. @@ -20,7 +36,7 @@ import { useForkRef } from '../../utils/useForkRef'; * - [PopoverPopup API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverPopup) */ const PopoverPopup = React.forwardRef(function PopoverPopup( - props: PopoverPopupProps, + props: PopoverPopup.Props, forwardedRef: React.ForwardedRef, ) { const { className, render, ...otherProps } = props; @@ -42,7 +58,7 @@ const PopoverPopup = React.forwardRef(function PopoverPopup( descriptionId, }); - const ownerState: PopoverPopupOwnerState = React.useMemo( + const ownerState: PopoverPopup.OwnerState = React.useMemo( () => ({ open, side, @@ -63,24 +79,24 @@ const PopoverPopup = React.forwardRef(function PopoverPopup( className, ownerState, extraProps: otherProps, - customStyleHookMapping: { - entering(value) { - return value ? { 'data-entering': '' } : null; - }, - exiting(value) { - return value ? { 'data-exiting': '' } : null; - }, - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; - }, - }, + customStyleHookMapping, }); return renderElement(); }); +namespace PopoverPopup { + export interface OwnerState { + open: boolean; + side: Side; + alignment: Alignment; + entering: boolean; + exiting: boolean; + } + + export interface Props extends BaseUIComponentProps<'div', OwnerState> {} +} + PopoverPopup.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ diff --git a/packages/mui-base/src/Popover/Popup/PopoverPopup.types.ts b/packages/mui-base/src/Popover/Popup/PopoverPopup.types.ts deleted file mode 100644 index 7a9357f8f..000000000 --- a/packages/mui-base/src/Popover/Popup/PopoverPopup.types.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { Side, Alignment } from '../../utils/useAnchorPositioning'; -import type { BaseUIComponentProps } from '../../utils/types'; - -export type PopoverPopupOwnerState = { - open: boolean; - side: Side; - alignment: Alignment; - entering: boolean; - exiting: boolean; -}; - -export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPopupOwnerState> {} diff --git a/packages/mui-base/src/Popover/Popup/usePopoverPopup.ts b/packages/mui-base/src/Popover/Popup/usePopoverPopup.ts index a100d9683..1326c9822 100644 --- a/packages/mui-base/src/Popover/Popup/usePopoverPopup.ts +++ b/packages/mui-base/src/Popover/Popup/usePopoverPopup.ts @@ -1,12 +1,8 @@ -'use client'; import * as React from 'react'; import { mergeReactProps } from '../../utils/mergeReactProps'; -import type { - UsePopoverPopupParameters, - UsePopoverPopupReturnValue, -} from './usePopoverPopup.types'; +import type { GenericHTMLProps } from '../../utils/types'; -export function usePopoverPopup(params: UsePopoverPopupParameters): UsePopoverPopupReturnValue { +export function usePopoverPopup(params: usePopoverPopup.Parameters): usePopoverPopup.ReturnValue { const { getProps, titleId, descriptionId } = params; const getPopupProps = React.useCallback( @@ -14,10 +10,6 @@ export function usePopoverPopup(params: UsePopoverPopupParameters): UsePopoverPo return mergeReactProps<'div'>(getProps(externalProps), { 'aria-labelledby': titleId, 'aria-describedby': descriptionId, - style: { - // must be relative to the element. - position: 'relative', - }, }); }, [getProps, titleId, descriptionId], @@ -30,3 +22,14 @@ export function usePopoverPopup(params: UsePopoverPopupParameters): UsePopoverPo [getPopupProps], ); } + +namespace usePopoverPopup { + export interface Parameters { + getProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + titleId: string | undefined; + descriptionId: string | undefined; + } + export interface ReturnValue { + getPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + } +} diff --git a/packages/mui-base/src/Popover/Popup/usePopoverPopup.types.ts b/packages/mui-base/src/Popover/Popup/usePopoverPopup.types.ts deleted file mode 100644 index 7fa3b0125..000000000 --- a/packages/mui-base/src/Popover/Popup/usePopoverPopup.types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { GenericHTMLProps } from '../../utils/types'; - -export interface UsePopoverPopupParameters { - getProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; - titleId: string | undefined; - descriptionId: string | undefined; -} - -export interface UsePopoverPopupReturnValue { - getPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; -} diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.tsx b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.tsx index faf9e0ad3..1e03b0208 100644 --- a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.tsx +++ b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.tsx @@ -2,17 +2,14 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { FloatingFocusManager, FloatingPortal } from '@floating-ui/react'; -import type { - PopoverPositionerContextValue, - PopoverPositionerOwnerState, - PopoverPositionerProps, -} from './PopoverPositioner.types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; import { usePopoverRootContext } from '../Root/PopoverRootContext'; import { usePopoverPositioner } from './usePopoverPositioner'; import { PopoverPositionerContext } from './PopoverPositionerContext'; import { HTMLElementType } from '../../utils/proptypes'; +import type { BaseUIComponentProps } from '../../utils/types'; +import type { Side, Alignment } from '../../utils/useAnchorPositioning'; /** * The popover positioner element. @@ -26,7 +23,7 @@ import { HTMLElementType } from '../../utils/proptypes'; * - [PopoverPositioner API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverPositioner) */ const PopoverPositioner = React.forwardRef(function PopoverPositioner( - props: PopoverPositionerProps, + props: PopoverPositioner.Props, forwardedRef: React.ForwardedRef, ) { const { @@ -68,7 +65,7 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner( sticky, }); - const ownerState: PopoverPositionerOwnerState = React.useMemo( + const ownerState: PopoverPositioner.OwnerState = React.useMemo( () => ({ open, side: positioner.side, @@ -77,7 +74,7 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner( [open, positioner.side, positioner.alignment], ); - const contextValue: PopoverPositionerContextValue = React.useMemo( + const contextValue: PopoverPositionerContext = React.useMemo( () => ({ ...ownerState, arrowRef: positioner.arrowRef, @@ -107,9 +104,9 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner( {renderElement()} @@ -118,23 +115,40 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner( ); }); +namespace PopoverPositioner { + export interface OwnerState { + open: boolean; + side: Side; + alignment: Alignment; + } + + export interface Props + extends usePopoverPositioner.SharedParameters, + BaseUIComponentProps<'div', OwnerState> { + /** + * The element the popover positioner element is appended to. + */ + container?: HTMLElement | null | React.MutableRefObject; + } +} + PopoverPositioner.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ // └─────────────────────────────────────────────────────────────────────┘ /** - * The alignment of the popover popup element to the anchor element along its cross axis. + * The alignment of the popover element to the anchor element along its cross axis. * @default 'center' */ alignment: PropTypes.oneOf(['center', 'end', 'start']), /** - * The offset of the popover popup element along its alignment axis. + * The offset of the popover element along its alignment axis. * @default 0 */ alignmentOffset: PropTypes.number, /** - * The element to which the popover popup element is anchored to. + * The element to which the popover element is anchored to. */ anchor: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ HTMLElementType, @@ -142,8 +156,8 @@ PopoverPositioner.propTypes /* remove-proptypes */ = { PropTypes.func, ]), /** - * Determines the padding between the arrow and the popover popup edges. Useful when the popover - * popup element has rounded corners via `border-radius`. + * Determines the padding between the arrow and the popover edges. Useful when the popover + * element has rounded corners via `border-radius`. * @default 5 */ arrowPadding: PropTypes.number, @@ -156,7 +170,7 @@ PopoverPositioner.propTypes /* remove-proptypes */ = { */ className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), /** - * The boundary that the popover popup element should be constrained to. + * The boundary that the popover element should be constrained to. * @default 'clippingAncestors' */ collisionBoundary: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ @@ -171,7 +185,7 @@ PopoverPositioner.propTypes /* remove-proptypes */ = { }), ]), /** - * The padding between the popover popup element and the edges of the collision boundary to add + * The padding between the popover element and the edges of the collision boundary to add * whitespace between them to prevent them from touching. * @default 5 */ @@ -185,25 +199,25 @@ PopoverPositioner.propTypes /* remove-proptypes */ = { }), ]), /** - * The container element to which the popover positioner is appended to. + * The element the popover positioner element is appended to. */ container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ HTMLElementType, PropTypes.func, ]), /** - * Whether the popover popup element is hidden if it appears detached from its anchor element due + * Whether the popover element is hidden if it appears detached from its anchor element due * to the anchor element being clipped (or hidden) from view. * @default false */ hideWhenDetached: PropTypes.bool, /** - * Whether the popover popup remains mounted in the DOM while closed. + * Whether the popover remains mounted in the DOM while closed. * @default false */ keepMounted: PropTypes.bool, /** - * The CSS position strategy for positioning the popover popup element. + * The CSS position strategy for positioning the popover element. * @default 'absolute' */ positionStrategy: PropTypes.oneOf(['absolute', 'fixed']), @@ -212,12 +226,12 @@ PopoverPositioner.propTypes /* remove-proptypes */ = { */ render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), /** - * The side of the anchor element that the popover popup element should be placed at. + * The side of the anchor element that the popover element should be placed at. * @default 'bottom' */ side: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), /** - * The gap between the anchor element and the popover popup element. + * The gap between the anchor element and the popover element. * @default 0 */ sideOffset: PropTypes.number, diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.types.ts b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.types.ts deleted file mode 100644 index bb5c601bc..000000000 --- a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.types.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type * as React from 'react'; -import type { Side, Alignment } from '../../utils/useAnchorPositioning'; -import type { BaseUIComponentProps } from '../../utils/types'; -import type { PopoverPositionerParameters } from './usePopoverPositioner.types'; - -export interface PopoverPositionerContextValue { - side: Side; - alignment: Alignment; - arrowRef: React.MutableRefObject; - arrowUncentered: boolean; - arrowStyles: React.CSSProperties; -} - -export type PopoverPositionerOwnerState = { - open: boolean; - side: Side; - alignment: Alignment; -}; - -export interface PopoverPositionerProps - extends PopoverPositionerParameters, - BaseUIComponentProps<'div', PopoverPositionerOwnerState> { - /** - * The container element to which the popover positioner is appended to. - */ - container?: HTMLElement | null | React.MutableRefObject; -} diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts b/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts index 59193681b..073694c62 100644 --- a/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts +++ b/packages/mui-base/src/Popover/Positioner/PopoverPositionerContext.ts @@ -1,10 +1,16 @@ 'use client'; import * as React from 'react'; -import type { PopoverPositionerContextValue } from './PopoverPositioner.types'; +import type { Side, Alignment } from '../../utils/useAnchorPositioning'; -export const PopoverPositionerContext = React.createContext( - null, -); +export interface PopoverPositionerContext { + side: Side; + alignment: Alignment; + arrowRef: React.MutableRefObject; + arrowUncentered: boolean; + arrowStyles: React.CSSProperties; +} + +export const PopoverPositionerContext = React.createContext(null); export function usePopoverPositionerContext() { const context = React.useContext(PopoverPositionerContext); diff --git a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx b/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx index 8b4ef430f..4a9c04746 100644 --- a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx +++ b/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.tsx @@ -1,15 +1,18 @@ -'use client'; import * as React from 'react'; import type { - UsePopoverPositionerParameters, - UsePopoverPositionerReturnValue, -} from './usePopoverPositioner.types'; + VirtualElement, + Padding, + Boundary, + FloatingContext, + FloatingRootContext, +} from '@floating-ui/react'; import { mergeReactProps } from '../../utils/mergeReactProps'; import { useAnchorPositioning } from '../../utils/useAnchorPositioning'; +import type { GenericHTMLProps } from '../../utils/types'; export function usePopoverPositioner( - params: UsePopoverPositionerParameters, -): UsePopoverPositionerReturnValue { + params: usePopoverPositioner.Parameters, +): usePopoverPositioner.ReturnValue { const { open = false, keepMounted = false } = params; const { @@ -23,7 +26,7 @@ export function usePopoverPositioner( positionerContext, } = useAnchorPositioning(params); - const getPositionerProps: UsePopoverPositionerReturnValue['getPositionerProps'] = + const getPositionerProps: usePopoverPositioner.ReturnValue['getPositionerProps'] = React.useCallback( (externalProps = {}) => { const hiddenStyles: React.CSSProperties = {}; @@ -34,6 +37,8 @@ export function usePopoverPositioner( return mergeReactProps<'div'>(externalProps, { role: 'presentation', + // @ts-ignore + inert: open ? undefined : 'true', style: { ...positionerStyles, ...hiddenStyles, @@ -65,3 +70,124 @@ export function usePopoverPositioner( ], ); } + +export namespace usePopoverPositioner { + export interface SharedParameters { + /** + * The element to which the popover element is anchored to. + */ + anchor?: + | Element + | null + | VirtualElement + | React.MutableRefObject + | (() => Element | VirtualElement | null); + /** + * The CSS position strategy for positioning the popover element. + * @default 'absolute' + */ + positionStrategy?: 'absolute' | 'fixed'; + /** + * The side of the anchor element that the popover element should be placed at. + * @default 'bottom' + */ + side?: 'top' | 'right' | 'bottom' | 'left'; + /** + * The gap between the anchor element and the popover element. + * @default 0 + */ + sideOffset?: number; + /** + * The alignment of the popover element to the anchor element along its cross axis. + * @default 'center' + */ + alignment?: 'start' | 'end' | 'center'; + /** + * The offset of the popover element along its alignment axis. + * @default 0 + */ + alignmentOffset?: number; + /** + * The boundary that the popover element should be constrained to. + * @default 'clippingAncestors' + */ + collisionBoundary?: Boundary; + /** + * The padding between the popover element and the edges of the collision boundary to add + * whitespace between them to prevent them from touching. + * @default 5 + */ + collisionPadding?: Padding; + /** + * Whether the popover element is hidden if it appears detached from its anchor element due + * to the anchor element being clipped (or hidden) from view. + * @default false + */ + hideWhenDetached?: boolean; + /** + * Whether to allow the popover to remain stuck in view while the anchor element is scrolled out + * of view. + * @default false + */ + sticky?: boolean; + /** + * Determines the padding between the arrow and the popover edges. Useful when the popover + * element has rounded corners via `border-radius`. + * @default 5 + */ + arrowPadding?: number; + /** + * Whether the popover remains mounted in the DOM while closed. + * @default false + */ + keepMounted?: boolean; + /** + * Whether the popover continuously tracks its anchor after the initial positioning upon mount. + * @default true + */ + trackAnchor?: boolean; + } + + export interface Parameters extends SharedParameters { + /** + * Whether the popover is open. + * @default false + */ + open?: boolean; + /** + * The floating root context. + */ + floatingRootContext?: FloatingRootContext; + } + + export interface ReturnValue { + /** + * Props to spread on the popover positioner element. + */ + getPositionerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + /** + * The ref of the popover arrow element. + */ + arrowRef: React.MutableRefObject; + /** + * Determines if the arrow cannot be centered. + */ + arrowUncentered: boolean; + /** + * The rendered side of the popover element. + */ + side: 'top' | 'right' | 'bottom' | 'left'; + /** + * The rendered alignment of the popover element. + */ + alignment: 'start' | 'end' | 'center'; + /** + * The styles to apply to the popover arrow element. + */ + arrowStyles: React.CSSProperties; + /** + * The floating context. + */ + positionerContext: FloatingContext; + } +} diff --git a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.types.ts b/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.types.ts deleted file mode 100644 index edeb248e3..000000000 --- a/packages/mui-base/src/Popover/Positioner/usePopoverPositioner.types.ts +++ /dev/null @@ -1,134 +0,0 @@ -import type * as React from 'react'; -import type { - Boundary, - Padding, - VirtualElement, - FloatingRootContext, - FloatingContext, -} from '@floating-ui/react'; -import type { GenericHTMLProps } from '../../utils/types'; - -export interface PopoverPositionerParameters { - /** - * The element to which the popover popup element is anchored to. - */ - anchor?: - | Element - | null - | VirtualElement - | React.MutableRefObject - | (() => Element | VirtualElement | null); - /** - * Whether the popover popup is open. - * @default false - */ - open?: boolean; - /** - * The CSS position strategy for positioning the popover popup element. - * @default 'absolute' - */ - positionStrategy?: 'absolute' | 'fixed'; - /** - * The side of the anchor element that the popover popup element should be placed at. - * @default 'bottom' - */ - side?: 'top' | 'right' | 'bottom' | 'left'; - /** - * The gap between the anchor element and the popover popup element. - * @default 0 - */ - sideOffset?: number; - /** - * The alignment of the popover popup element to the anchor element along its cross axis. - * @default 'center' - */ - alignment?: 'start' | 'end' | 'center'; - /** - * The offset of the popover popup element along its alignment axis. - * @default 0 - */ - alignmentOffset?: number; - /** - * The boundary that the popover popup element should be constrained to. - * @default 'clippingAncestors' - */ - collisionBoundary?: Boundary; - /** - * The padding between the popover popup element and the edges of the collision boundary to add - * whitespace between them to prevent them from touching. - * @default 5 - */ - collisionPadding?: Padding; - /** - * Whether the popover popup element is hidden if it appears detached from its anchor element due - * to the anchor element being clipped (or hidden) from view. - * @default false - */ - hideWhenDetached?: boolean; - /** - * Whether to allow the popover to remain stuck in view while the anchor element is scrolled out - * of view. - * @default false - */ - sticky?: boolean; - /** - * Determines the padding between the arrow and the popover popup edges. Useful when the popover - * popup element has rounded corners via `border-radius`. - * @default 5 - */ - arrowPadding?: number; - /** - * Whether the popover popup remains mounted in the DOM while closed. - * @default false - */ - keepMounted?: boolean; - /** - * Whether the popover popup continuously tracks its anchor after the initial positioning upon - * mount. - * @default true - */ - trackAnchor?: boolean; -} - -export interface UsePopoverPositionerParameters extends PopoverPositionerParameters { - /** - * Determines if the popover popup is currently mounted in the DOM. - * @default true - */ - mounted?: boolean; - /** - * The popover root context. - */ - floatingRootContext?: FloatingRootContext; -} - -export interface UsePopoverPositionerReturnValue { - /** - * Props to spread on the popover positioner element. - */ - getPositionerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; - /** - * The ref of the popover arrow element. - */ - arrowRef: React.MutableRefObject; - /** - * Determines if the arrow cannot be centered. - */ - arrowUncentered: boolean; - /** - * The rendered side of the popover element. - */ - side: 'top' | 'right' | 'bottom' | 'left'; - /** - * The rendered alignment of the popover element. - */ - alignment: 'start' | 'end' | 'center'; - /** - * The styles to apply to the popover arrow element. - */ - arrowStyles: React.CSSProperties; - /** - * The floating context. - */ - positionerContext: FloatingContext; -} diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx index 2b14d8a0d..657e47d73 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx +++ b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx @@ -9,7 +9,7 @@ import { OPEN_DELAY } from '../utils/constants'; const user = userEvent.setup(); -function Root(props: Popover.RootProps) { +function Root(props: Popover.Root.Props) { return ; } diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.tsx index fee501a00..bbed8202d 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRoot.tsx +++ b/packages/mui-base/src/Popover/Root/PopoverRoot.tsx @@ -1,8 +1,7 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import type { PopoverRootProps, PopoverRootContextValue } from './PopoverRoot.types'; -import { PopoverContext } from './PopoverRootContext'; +import { PopoverRootContext } from './PopoverRootContext'; import { usePopoverRoot } from './usePopoverRoot'; import { OPEN_DELAY } from '../utils/constants'; @@ -17,7 +16,7 @@ import { OPEN_DELAY } from '../utils/constants'; * * - [PopoverRoot API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverRoot) */ -function PopoverRoot(props: PopoverRootProps) { +function PopoverRoot(props: PopoverRoot.Props) { const { openOnHover = false, delayType = 'rest', delay, closeDelay = 0, animated = true } = props; const delayWithDefault = delay ?? OPEN_DELAY; @@ -52,7 +51,7 @@ function PopoverRoot(props: PopoverRootProps) { defaultOpen: props.defaultOpen, }); - const contextValue: PopoverRootContextValue = React.useMemo( + const contextValue: PopoverRootContext = React.useMemo( () => ({ openOnHover, delay: delayWithDefault, @@ -103,7 +102,17 @@ function PopoverRoot(props: PopoverRootProps) { ], ); - return {props.children}; + return ( + {props.children} + ); +} + +namespace PopoverRoot { + export interface OwnerState {} + + export interface Props extends Omit { + children?: React.ReactNode; + } } PopoverRoot.propTypes /* remove-proptypes */ = { @@ -112,7 +121,7 @@ PopoverRoot.propTypes /* remove-proptypes */ = { // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ // └─────────────────────────────────────────────────────────────────────┘ /** - * Whether the tooltip can animate, adding animation-related attributes and allowing for exit + * Whether the popover can animate, adding animation-related attributes and allowing for exit * animations to play. Useful to disable in tests to remove async behavior. * @default true */ @@ -127,7 +136,8 @@ PopoverRoot.propTypes /* remove-proptypes */ = { */ closeDelay: PropTypes.number, /** - * Specifies whether the popover is open initially when uncontrolled. + * Whether the popover popup is open by default. Use when uncontrolled. + * @default false */ defaultOpen: PropTypes.bool, /** @@ -143,22 +153,18 @@ PopoverRoot.propTypes /* remove-proptypes */ = { * @default 'rest' */ delayType: PropTypes.oneOf(['hover', 'rest']), - /** - * Determines which axis the tooltip should follow the cursor on. - * @default 'none' - */ - followCursorAxis: PropTypes.oneOf(['none', 'x', 'y']), /** * Callback fired when the popover popup is requested to be opened or closed. Use when * controlled. */ onOpenChange: PropTypes.func, /** - * If `true`, the popover popup is open. Use when controlled. + * Whether the popover popup is open. Use when controlled. + * @default false */ open: PropTypes.bool, /** - * If `true`, the popover popup opens when the trigger is hovered. + * Whether the popover popup opens when the trigger is hovered after the provided `delay`. * @default false */ openOnHover: PropTypes.bool, diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.types.ts b/packages/mui-base/src/Popover/Root/PopoverRoot.types.ts deleted file mode 100644 index a6265fbf2..000000000 --- a/packages/mui-base/src/Popover/Root/PopoverRoot.types.ts +++ /dev/null @@ -1,84 +0,0 @@ -import type * as React from 'react'; -import type { FloatingRootContext, OpenChangeReason } from '@floating-ui/react'; -import type { TransitionStatus } from '../../utils/useTransitionStatus'; -import type { GenericHTMLProps } from '../../utils/types'; - -export interface PopoverRootContextValue { - open: boolean; - openOnHover: boolean; - setOpen: (open: boolean, event?: Event, reason?: OpenChangeReason) => void; - triggerElement: Element | null; - setTriggerElement: (el: Element | null) => void; - positionerElement: HTMLElement | null; - setPositionerElement: (el: HTMLElement | null) => void; - popupRef: React.RefObject; - delay: number; - closeDelay: number; - delayType: 'rest' | 'hover'; - instantType: 'dismiss' | 'click' | undefined; - mounted: boolean; - setMounted: React.Dispatch>; - transitionStatus: TransitionStatus; - titleId: string | undefined; - setTitleId: React.Dispatch>; - descriptionId: string | undefined; - setDescriptionId: React.Dispatch>; - floatingRootContext: FloatingRootContext; - getRootTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; - getRootPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; -} - -export type PopoverRootOwnerState = { - open: boolean; -}; - -export interface PopoverRootProps { - children: React.ReactNode; - /** - * If `true`, the popover popup is open. Use when controlled. - */ - open?: boolean; - /** - * Callback fired when the popover popup is requested to be opened or closed. Use when - * controlled. - */ - onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void; - /** - * Specifies whether the popover is open initially when uncontrolled. - */ - defaultOpen?: boolean; - /** - * If `true`, the popover popup opens when the trigger is hovered. - * @default false - */ - openOnHover?: boolean; - /** - * The delay in milliseconds until the popover popup is opened when `openOnHover` is `true`. - * @default 300 - */ - delay?: number; - /** - * The delay in milliseconds until the popover popup is closed when `openOnHover` is `true`. - * @default 0 - */ - closeDelay?: number; - /** - * The delay type to use when `openOnHover` is `true`. `rest` means the `delay` represents how - * long the user's cursor must rest on the trigger before the popover popup is opened. `hover` - * means the `delay` represents how long to wait as soon as the user's cursor has entered the - * trigger. - * @default 'rest' - */ - delayType?: 'rest' | 'hover'; - /** - * Determines which axis the tooltip should follow the cursor on. - * @default 'none' - */ - followCursorAxis?: 'none' | 'x' | 'y'; - /** - * Whether the tooltip can animate, adding animation-related attributes and allowing for exit - * animations to play. Useful to disable in tests to remove async behavior. - * @default true - */ - animated?: boolean; -} diff --git a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts index f69a7ae11..da3e905f2 100644 --- a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts +++ b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts @@ -1,11 +1,38 @@ 'use client'; import * as React from 'react'; -import type { PopoverRootContextValue } from './PopoverRoot.types'; +import type { OpenChangeReason, FloatingRootContext } from '@floating-ui/react'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; +import type { GenericHTMLProps } from '../../utils/types'; -export const PopoverContext = React.createContext(null); +export interface PopoverRootContext { + open: boolean; + openOnHover: boolean; + setOpen: (open: boolean, event?: Event, reason?: OpenChangeReason) => void; + triggerElement: Element | null; + setTriggerElement: (el: Element | null) => void; + positionerElement: HTMLElement | null; + setPositionerElement: (el: HTMLElement | null) => void; + popupRef: React.RefObject; + delay: number; + closeDelay: number; + delayType: 'rest' | 'hover'; + instantType: 'dismiss' | 'click' | undefined; + mounted: boolean; + setMounted: React.Dispatch>; + transitionStatus: TransitionStatus; + titleId: string | undefined; + setTitleId: React.Dispatch>; + descriptionId: string | undefined; + setDescriptionId: React.Dispatch>; + floatingRootContext: FloatingRootContext; + getRootTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + getRootPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; +} + +export const PopoverRootContext = React.createContext(null); export function usePopoverRootContext() { - const context = React.useContext(PopoverContext); + const context = React.useContext(PopoverRootContext); if (context === null) { throw new Error('Popover components must be used within the component'); } diff --git a/packages/mui-base/src/Popover/Root/usePopoverRoot.ts b/packages/mui-base/src/Popover/Root/usePopoverRoot.ts index 890f52dba..6a3144a36 100644 --- a/packages/mui-base/src/Popover/Root/usePopoverRoot.ts +++ b/packages/mui-base/src/Popover/Root/usePopoverRoot.ts @@ -1,4 +1,3 @@ -'use client'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { @@ -10,15 +9,17 @@ import { useInteractions, useRole, type OpenChangeReason, + type FloatingRootContext, } from '@floating-ui/react'; -import type { UsePopoverRootParameters, UsePopoverRootReturnValue } from './usePopoverRoot.types'; import { useControlled } from '../../utils/useControlled'; import { useEventCallback } from '../../utils/useEventCallback'; import { useTransitionStatus } from '../../utils/useTransitionStatus'; import { useAnimationsFinished } from '../../utils/useAnimationsFinished'; import { OPEN_DELAY } from '../utils/constants'; +import type { GenericHTMLProps } from '../../utils/types'; +import type { TransitionStatus } from '../../utils/useTransitionStatus'; -export function usePopoverRoot(params: UsePopoverRootParameters): UsePopoverRootReturnValue { +export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoot.ReturnValue { const { open: externalOpen, onOpenChange: onOpenChangeProp = () => {}, @@ -157,3 +158,78 @@ export function usePopoverRoot(params: UsePopoverRootParameters): UsePopoverRoot ], ); } + +export namespace usePopoverRoot { + export interface Parameters { + /** + * Whether the popover popup is open by default. Use when uncontrolled. + * @default false + */ + defaultOpen?: boolean; + /** + * Whether the popover popup is open. Use when controlled. + * @default false + */ + open?: boolean; + /** + * Callback fired when the popover popup is requested to be opened or closed. Use when + * controlled. + */ + onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void; + /** + * Whether the popover popup opens when the trigger is hovered after the provided `delay`. + * @default false + */ + openOnHover?: boolean; + /** + * The delay in milliseconds until the popover popup is opened when `openOnHover` is `true`. + * @default 300 + */ + delay?: number; + /** + * The delay in milliseconds until the popover popup is closed when `openOnHover` is `true`. + * @default 0 + */ + closeDelay?: number; + /** + * The delay type to use when `openOnHover` is `true`. `rest` means the `delay` represents how + * long the user's cursor must rest on the trigger before the popover popup is opened. `hover` + * means the `delay` represents how long to wait as soon as the user's cursor has entered the + * trigger. + * @default 'rest' + */ + delayType?: 'rest' | 'hover'; + /** + * Whether the popover popup element stays mounted in the DOM when closed. + * @default false + */ + keepMounted?: boolean; + /** + * Whether the popover can animate, adding animation-related attributes and allowing for exit + * animations to play. Useful to disable in tests to remove async behavior. + * @default true + */ + animated?: boolean; + } + + export interface ReturnValue { + open: boolean; + setOpen: (open: boolean, event?: Event, reason?: OpenChangeReason) => void; + mounted: boolean; + setMounted: React.Dispatch>; + transitionStatus: TransitionStatus; + titleId: string | undefined; + setTitleId: React.Dispatch>; + descriptionId: string | undefined; + setDescriptionId: React.Dispatch>; + floatingRootContext: FloatingRootContext; + getRootTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + getRootPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + instantType: 'dismiss' | 'click' | undefined; + triggerElement: Element | null; + setTriggerElement: React.Dispatch>; + positionerElement: HTMLElement | null; + setPositionerElement: React.Dispatch>; + popupRef: React.RefObject; + } +} diff --git a/packages/mui-base/src/Popover/Root/usePopoverRoot.types.ts b/packages/mui-base/src/Popover/Root/usePopoverRoot.types.ts deleted file mode 100644 index 081eb3a69..000000000 --- a/packages/mui-base/src/Popover/Root/usePopoverRoot.types.ts +++ /dev/null @@ -1,77 +0,0 @@ -import type * as React from 'react'; -import type { FloatingRootContext, OpenChangeReason } from '@floating-ui/react'; -import type { GenericHTMLProps } from '../../utils/types'; -import type { TransitionStatus } from '../../utils/useTransitionStatus'; - -export interface UsePopoverRootParameters { - /** - * Whether the popover popup is open by default. Use when uncontrolled. - * @default false - */ - defaultOpen?: boolean; - /** - * Whether the popover popup is open. Use when controlled. - * @default false - */ - open?: boolean; - /** - * Callback fired when the popover popup is requested to be opened or closed. Use when - * controlled. - */ - onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void; - /** - * Whether the popover popup opens when the trigger is hovered after the provided `delay`. - * @default false - */ - openOnHover?: boolean; - /** - * The delay in milliseconds until the popover popup is opened when `openOnHover` is `true`. - * @default 300 - */ - delay?: number; - /** - * The delay in milliseconds until the popover popup is closed when `openOnHover` is `true`. - * @default 0 - */ - closeDelay?: number; - /** - * The delay type to use when `openOnHover` is `true`. `rest` means the `delay` represents how - * long the user's cursor must rest on the trigger before the popover popup is opened. `hover` - * means the `delay` represents how long to wait as soon as the user's cursor has entered the - * trigger. - * @default 'rest' - */ - delayType?: 'rest' | 'hover'; - /** - * Whether the popover popup element stays mounted in the DOM when closed. - * @default false - */ - keepMounted?: boolean; - /** - * Whether the popover can animate, adding animation-related attributes and allowing for exit - * animations to play. Useful to disable in tests to remove async behavior. - * @default true - */ - animated?: boolean; -} - -export interface UsePopoverRootReturnValue { - open: boolean; - setOpen: (open: boolean, event?: Event, reason?: OpenChangeReason) => void; - mounted: boolean; - setMounted: React.Dispatch>; - transitionStatus: TransitionStatus; - titleId: string | undefined; - setTitleId: React.Dispatch>; - descriptionId: string | undefined; - setDescriptionId: React.Dispatch>; - floatingRootContext: FloatingRootContext; - getRootTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; - getRootPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; - instantType: 'dismiss' | 'click' | undefined; - triggerElement: Element | null; - setTriggerElement: React.Dispatch>; - positionerElement: HTMLElement | null; - setPositionerElement: React.Dispatch>; - popupRef: React.RefObject; -} diff --git a/packages/mui-base/src/Popover/Title/PopoverTitle.tsx b/packages/mui-base/src/Popover/Title/PopoverTitle.tsx index eb00058e1..3fc33d499 100644 --- a/packages/mui-base/src/Popover/Title/PopoverTitle.tsx +++ b/packages/mui-base/src/Popover/Title/PopoverTitle.tsx @@ -2,10 +2,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import type { PopoverTitleProps } from './PopoverTitle.types'; +import type { BaseUIComponentProps } from '../../utils/types'; import { usePopoverRootContext } from '../Root/PopoverRootContext'; import { usePopoverTitle } from './usePopoverTitle'; +const ownerState = {}; + /** * Renders a title element that labels the popover. * @@ -18,7 +20,7 @@ import { usePopoverTitle } from './usePopoverTitle'; * - [PopoverTitle API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverTitle) */ const PopoverTitle = React.forwardRef(function PopoverTitle( - props: PopoverTitleProps, + props: PopoverTitle.Props, forwardedRef: React.ForwardedRef, ) { const { render, className, ...otherProps } = props; @@ -34,7 +36,7 @@ const PopoverTitle = React.forwardRef(function PopoverTitle( propGetter: getTitleProps, render: render ?? 'h2', className, - ownerState: {}, + ownerState, ref: forwardedRef, extraProps: otherProps, }); @@ -42,6 +44,13 @@ const PopoverTitle = React.forwardRef(function PopoverTitle( return renderElement(); }); +namespace PopoverTitle { + export interface OwnerState {} + + export interface Props + extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', OwnerState> {} +} + PopoverTitle.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ diff --git a/packages/mui-base/src/Popover/Title/PopoverTitle.types.ts b/packages/mui-base/src/Popover/Title/PopoverTitle.types.ts deleted file mode 100644 index 93ae17963..000000000 --- a/packages/mui-base/src/Popover/Title/PopoverTitle.types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { BaseUIComponentProps } from '../../utils/types'; - -export type PopoverTitleOwnerState = {}; - -export interface PopoverTitleProps - extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', PopoverTitleOwnerState> {} diff --git a/packages/mui-base/src/Popover/Title/usePopoverTitle.ts b/packages/mui-base/src/Popover/Title/usePopoverTitle.ts index f98af1b00..64fda4ac3 100644 --- a/packages/mui-base/src/Popover/Title/usePopoverTitle.ts +++ b/packages/mui-base/src/Popover/Title/usePopoverTitle.ts @@ -2,13 +2,10 @@ import * as React from 'react'; import { mergeReactProps } from '../../utils/mergeReactProps'; import { useEnhancedEffect } from '../../utils/useEnhancedEffect'; -import type { - UsePopoverTitleParameters, - UsePopoverTitleReturnValue, -} from './usePopoverTitle.types'; import { useId } from '../../utils/useId'; +import type { GenericHTMLProps } from '../../utils/types'; -export function usePopoverTitle(params: UsePopoverTitleParameters): UsePopoverTitleReturnValue { +export function usePopoverTitle(params: usePopoverTitle.Parameters): usePopoverTitle.ReturnValue { const { titleId, setTitleId } = params; const id = useId(titleId); @@ -36,3 +33,13 @@ export function usePopoverTitle(params: UsePopoverTitleParameters): UsePopoverTi [getTitleProps], ); } + +namespace usePopoverTitle { + export interface Parameters { + titleId: string | undefined; + setTitleId: React.Dispatch>; + } + export interface ReturnValue { + getTitleProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps; + } +} diff --git a/packages/mui-base/src/Popover/Title/usePopoverTitle.types.ts b/packages/mui-base/src/Popover/Title/usePopoverTitle.types.ts deleted file mode 100644 index a724f471f..000000000 --- a/packages/mui-base/src/Popover/Title/usePopoverTitle.types.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type * as React from 'react'; - -export interface UsePopoverTitleParameters { - titleId: string | undefined; - setTitleId: React.Dispatch>; -} - -export interface UsePopoverTitleReturnValue { - getTitleProps: ( - externalProps?: React.ComponentPropsWithoutRef<'p'>, - ) => React.ComponentPropsWithoutRef<'p'>; -} diff --git a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.tsx b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.tsx index eb114c203..f350bb1cf 100644 --- a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.tsx +++ b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.tsx @@ -1,10 +1,19 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import type { PopoverTriggerOwnerState, PopoverTriggerProps } from './PopoverTrigger.types'; import { usePopoverRootContext } from '../Root/PopoverRootContext'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; import { useForkRef } from '../../utils/useForkRef'; +import type { BaseUIComponentProps } from '../../utils/types'; +import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; + +const customStyleHookMapping: CustomStyleHookMapping = { + open(value) { + return { + 'data-state': value ? 'open' : 'closed', + }; + }, +}; /** * Renders a trigger element that opens the popover. @@ -18,14 +27,14 @@ import { useForkRef } from '../../utils/useForkRef'; * - [PopoverTrigger API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverTrigger) */ const PopoverTrigger = React.forwardRef(function PopoverTrigger( - props: PopoverTriggerProps, + props: PopoverTrigger.Props, forwardedRef: React.ForwardedRef, ) { const { render, className, ...otherProps } = props; const { open, setTriggerElement, getRootTriggerProps } = usePopoverRootContext(); - const ownerState: PopoverTriggerOwnerState = React.useMemo(() => ({ open }), [open]); + const ownerState: PopoverTrigger.OwnerState = React.useMemo(() => ({ open }), [open]); const mergedRef = useForkRef(forwardedRef, setTriggerElement); @@ -36,18 +45,20 @@ const PopoverTrigger = React.forwardRef(function PopoverTrigger( ownerState, ref: mergedRef, extraProps: otherProps, - customStyleHookMapping: { - open(value) { - return { - 'data-state': value ? 'open' : 'closed', - }; - }, - }, + customStyleHookMapping, }); return renderElement(); }); +namespace PopoverTrigger { + export interface OwnerState { + open: boolean; + } + + export interface Props extends BaseUIComponentProps {} +} + PopoverTrigger.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ diff --git a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.types.ts b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.types.ts deleted file mode 100644 index 43f16f308..000000000 --- a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { BaseUIComponentProps } from '../../utils/types'; - -export type PopoverTriggerOwnerState = { - open: boolean; -}; - -export interface PopoverTriggerProps extends BaseUIComponentProps {} diff --git a/packages/mui-base/src/Popover/index.barrel.ts b/packages/mui-base/src/Popover/index.barrel.ts index 638e084ba..d970c32ab 100644 --- a/packages/mui-base/src/Popover/index.barrel.ts +++ b/packages/mui-base/src/Popover/index.barrel.ts @@ -7,13 +7,3 @@ export { PopoverBackdrop } from './Backdrop/PopoverBackdrop'; export { PopoverTitle } from './Title/PopoverTitle'; export { PopoverDescription } from './Description/PopoverDescription'; export { PopoverClose } from './Close/PopoverClose'; - -export type { PopoverRootProps, PopoverRootOwnerState } from './Root/PopoverRoot.types'; -export type * from './Trigger/PopoverTrigger.types'; -export type * from './Positioner/PopoverPositioner.types'; -export type * from './Popup/PopoverPopup.types'; -export type * from './Arrow/PopoverArrow.types'; -export type * from './Backdrop/PopoverBackdrop.types'; -export type * from './Title/PopoverTitle.types'; -export type * from './Description/PopoverDescription.types'; -export type * from './Close/PopoverClose.types'; diff --git a/packages/mui-base/src/Popover/index.ts b/packages/mui-base/src/Popover/index.ts index 5ec33e2c7..a025e3962 100644 --- a/packages/mui-base/src/Popover/index.ts +++ b/packages/mui-base/src/Popover/index.ts @@ -7,37 +7,3 @@ export { PopoverBackdrop as Backdrop } from './Backdrop/PopoverBackdrop'; export { PopoverTitle as Title } from './Title/PopoverTitle'; export { PopoverDescription as Description } from './Description/PopoverDescription'; export { PopoverClose as Close } from './Close/PopoverClose'; - -export type { PopoverRootProps as RootProps } from './Root/PopoverRoot.types'; -export type { - PopoverTriggerProps as TriggerProps, - PopoverTriggerOwnerState as TriggerOwnerState, -} from './Trigger/PopoverTrigger.types'; -export type { - PopoverPositionerProps as PositionerProps, - PopoverPositionerOwnerState as PositionerOwnerState, -} from './Positioner/PopoverPositioner.types'; -export type { - PopoverPopupProps as PopupProps, - PopoverPopupOwnerState as PopupOwnerState, -} from './Popup/PopoverPopup.types'; -export type { - PopoverArrowProps as ArrowProps, - PopoverArrowOwnerState as ArrowOwnerState, -} from './Arrow/PopoverArrow.types'; -export type { - PopoverBackdropProps as BackdropProps, - PopoverBackdropOwnerState as BackdropOwnerState, -} from './Backdrop/PopoverBackdrop.types'; -export type { - PopoverTitleProps as TitleProps, - PopoverTitleOwnerState as TitleOwnerState, -} from './Title/PopoverTitle.types'; -export type { - PopoverDescriptionProps as DescriptionProps, - PopoverDescriptionOwnerState as DescriptionOwnerState, -} from './Description/PopoverDescription.types'; -export type { - PopoverCloseProps as CloseProps, - PopoverCloseOwnerState as CloseOwnerState, -} from './Close/PopoverClose.types';