Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Unify component export patterns #1478

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

[core] Unify component export patterns #1478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ae0767
[core] Unify component export patterns
michaldudak Feb 25, 2025
c2069d2
Update functions
michaldudak Feb 25, 2025
ec5da43
Update Portal parts declarations
michaldudak Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions packages/react/src/accordion/header/AccordionHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { accordionStyleHookMapping } from '../item/styleHooks';
*
* Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
*/
const AccordionHeader = React.forwardRef(function AccordionHeader(
export const AccordionHeader = React.forwardRef(function AccordionHeader(
props: AccordionHeader.Props,
forwardedRef: React.ForwardedRef<HTMLHeadingElement>,
) {
Expand All @@ -33,12 +33,10 @@ const AccordionHeader = React.forwardRef(function AccordionHeader(
return renderElement();
});

namespace AccordionHeader {
export namespace AccordionHeader {
export interface Props extends BaseUIComponentProps<'h3', AccordionItem.State> {}
}

export { AccordionHeader };

AccordionHeader.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/accordion/item/AccordionItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { accordionStyleHookMapping } from './styleHooks';
*
* Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
*/
const AccordionItem = React.forwardRef(function AccordionItem(
export const AccordionItem = React.forwardRef(function AccordionItem(
props: AccordionItem.Props,
forwardedRef: React.ForwardedRef<HTMLDivElement>,
) {
Expand Down Expand Up @@ -135,7 +135,7 @@ const AccordionItem = React.forwardRef(function AccordionItem(

export type AccordionItemValue = any | null;

namespace AccordionItem {
export namespace AccordionItem {
export interface State extends AccordionRoot.State {
index: number;
open: boolean;
Expand All @@ -149,8 +149,6 @@ namespace AccordionItem {
}
}

export { AccordionItem };

AccordionItem.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/accordion/panel/AccordionPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { AccordionPanelCssVars } from './AccordionPanelCssVars';
*
* Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
*/
const AccordionPanel = React.forwardRef(function AccordionPanel(
export const AccordionPanel = React.forwardRef(function AccordionPanel(
props: AccordionPanel.Props,
forwardedRef: React.ForwardedRef<HTMLButtonElement>,
) {
Expand Down Expand Up @@ -93,14 +93,12 @@ const AccordionPanel = React.forwardRef(function AccordionPanel(
return renderElement();
});

namespace AccordionPanel {
export namespace AccordionPanel {
export interface Props
extends BaseUIComponentProps<'div', AccordionItem.State>,
Pick<AccordionRoot.Props, 'hiddenUntilFound' | 'keepMounted'> {}
}

export { AccordionPanel };

AccordionPanel.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/accordion/root/AccordionRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const rootStyleHookMapping = {
*
* Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
*/
const AccordionRoot = React.forwardRef(function AccordionRoot(
export const AccordionRoot = React.forwardRef(function AccordionRoot(
props: AccordionRoot.Props,
forwardedRef: React.ForwardedRef<HTMLDivElement>,
) {
Expand Down Expand Up @@ -114,7 +114,7 @@ const AccordionRoot = React.forwardRef(function AccordionRoot(
);
});

namespace AccordionRoot {
export namespace AccordionRoot {
export interface State {
value: AccordionValue;
/**
Expand Down Expand Up @@ -155,8 +155,6 @@ namespace AccordionRoot {
}
}

export { AccordionRoot };

AccordionRoot.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/accordion/trigger/AccordionTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useAccordionItemContext } from '../item/AccordionItemContext';
* Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
*/

const AccordionTrigger = React.forwardRef(function AccordionTrigger(
export const AccordionTrigger = React.forwardRef(function AccordionTrigger(
props: AccordionTrigger.Props,
forwardedRef: React.ForwardedRef<Element>,
) {
Expand Down Expand Up @@ -59,12 +59,10 @@ const AccordionTrigger = React.forwardRef(function AccordionTrigger(
return renderElement();
});

namespace AccordionTrigger {
export namespace AccordionTrigger {
export interface Props extends BaseUIComponentProps<'button', AccordionItem.State> {}
}

export { AccordionTrigger };

AccordionTrigger.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const customStyleHookMapping: CustomStyleHookMapping<AlertDialogBackdrop.State>
*
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop(
export const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop(
props: AlertDialogBackdrop.Props,
forwardedRef: React.ForwardedRef<HTMLDivElement>,
) {
Expand Down Expand Up @@ -60,7 +60,7 @@ const AlertDialogBackdrop = React.forwardRef(function AlertDialogBackdrop(
return renderElement();
});

namespace AlertDialogBackdrop {
export namespace AlertDialogBackdrop {
export interface Props extends BaseUIComponentProps<'div', State> {}

export interface State {
Expand Down Expand Up @@ -94,5 +94,3 @@ AlertDialogBackdrop.propTypes /* remove-proptypes */ = {
*/
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
} as any;

export { AlertDialogBackdrop };
6 changes: 2 additions & 4 deletions packages/react/src/alert-dialog/close/AlertDialogClose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import type { BaseUIComponentProps } from '../../utils/types';
*
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
const AlertDialogClose = React.forwardRef(function AlertDialogClose(
export const AlertDialogClose = React.forwardRef(function AlertDialogClose(
props: AlertDialogClose.Props,
forwardedRef: React.ForwardedRef<HTMLButtonElement>,
) {
Expand All @@ -33,7 +33,7 @@ const AlertDialogClose = React.forwardRef(function AlertDialogClose(
return renderElement();
});

namespace AlertDialogClose {
export namespace AlertDialogClose {
export interface Props extends BaseUIComponentProps<'button', State> {}

export interface State {
Expand Down Expand Up @@ -70,5 +70,3 @@ AlertDialogClose.propTypes /* remove-proptypes */ = {
*/
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
} as any;

export { AlertDialogClose };
6 changes: 2 additions & 4 deletions packages/react/src/alert-dialog/description/AlertDialogDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const state = {};
*
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
const AlertDialogDescription = React.forwardRef(function AlertDialogDescription(
export const AlertDialogDescription = React.forwardRef(function AlertDialogDescription(
props: AlertDialogDescription.Props,
forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
) {
Expand Down Expand Up @@ -52,7 +52,7 @@ const AlertDialogDescription = React.forwardRef(function AlertDialogDescription(
return renderElement();
});

namespace AlertDialogDescription {
export namespace AlertDialogDescription {
export interface Props extends BaseUIComponentProps<'p', State> {}

export interface State {}
Expand Down Expand Up @@ -84,5 +84,3 @@ AlertDialogDescription.propTypes /* remove-proptypes */ = {
*/
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
} as any;

export { AlertDialogDescription };
6 changes: 2 additions & 4 deletions packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const customStyleHookMapping: CustomStyleHookMapping<AlertDialogPopup.State> = {
*
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
export const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
props: AlertDialogPopup.Props,
forwardedRef: React.ForwardedRef<HTMLDivElement>,
) {
Expand Down Expand Up @@ -127,7 +127,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
);
});

namespace AlertDialogPopup {
export namespace AlertDialogPopup {
export interface Props extends BaseUIComponentProps<'div', State> {
/**
* Determines the element to focus when the dialog is opened.
Expand Down Expand Up @@ -203,5 +203,3 @@ AlertDialogPopup.propTypes /* remove-proptypes */ = {
*/
style: PropTypes.object,
} as any;

export { AlertDialogPopup };
10 changes: 5 additions & 5 deletions packages/react/src/alert-dialog/portal/AlertDialogPortal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ import { HTMLElementType, refType } from '../../utils/proptypes';
*
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
function AlertDialogPortal(props: AlertDialogPortal.Props) {
export const AlertDialogPortal: React.FC<AlertDialogPortal.Props> = function AlertDialogPortal(
props,
) {
const { children, keepMounted = false, container } = props;

const { mounted } = useAlertDialogRootContext();
Expand All @@ -27,9 +29,9 @@ function AlertDialogPortal(props: AlertDialogPortal.Props) {
<FloatingPortal root={container}>{children}</FloatingPortal>
</AlertDialogPortalContext.Provider>
);
}
};

namespace AlertDialogPortal {
export namespace AlertDialogPortal {
export interface Props {
children?: React.ReactNode;
/**
Expand Down Expand Up @@ -63,5 +65,3 @@ AlertDialogPortal.propTypes /* remove-proptypes */ = {
*/
keepMounted: PropTypes.bool,
} as any;

export { AlertDialogPortal };
6 changes: 2 additions & 4 deletions packages/react/src/alert-dialog/root/AlertDialogRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { useDialogRoot } from '../../dialog/root/useDialogRoot';
*
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
const AlertDialogRoot: React.FC<AlertDialogRoot.Props> = function AlertDialogRoot(props) {
export const AlertDialogRoot: React.FC<AlertDialogRoot.Props> = function AlertDialogRoot(props) {
const {
children,
defaultOpen = false,
Expand Down Expand Up @@ -53,7 +53,7 @@ const AlertDialogRoot: React.FC<AlertDialogRoot.Props> = function AlertDialogRoo
);
};

namespace AlertDialogRoot {
export namespace AlertDialogRoot {
export interface Props extends Omit<DialogRoot.Props, 'modal' | 'dismissible'> {}

export type Actions = DialogRoot.Actions;
Expand Down Expand Up @@ -96,5 +96,3 @@ AlertDialogRoot.propTypes /* remove-proptypes */ = {
*/
open: PropTypes.bool,
} as any;

export { AlertDialogRoot };
6 changes: 2 additions & 4 deletions packages/react/src/alert-dialog/title/AlertDialogTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const state = {};
*
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(
export const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(
props: AlertDialogTitle.Props,
forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
) {
Expand Down Expand Up @@ -52,7 +52,7 @@ const AlertDialogTitle = React.forwardRef(function AlertDialogTitle(
return renderElement();
});

namespace AlertDialogTitle {
export namespace AlertDialogTitle {
export interface Props extends BaseUIComponentProps<'h2', State> {}

export interface State {}
Expand Down Expand Up @@ -84,5 +84,3 @@ AlertDialogTitle.propTypes /* remove-proptypes */ = {
*/
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
} as any;

export { AlertDialogTitle };
6 changes: 2 additions & 4 deletions packages/react/src/alert-dialog/trigger/AlertDialogTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
*
* Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
*/
const AlertDialogTrigger = React.forwardRef(function AlertDialogTrigger(
export const AlertDialogTrigger = React.forwardRef(function AlertDialogTrigger(
props: AlertDialogTrigger.Props,
forwardedRef: React.ForwardedRef<HTMLButtonElement>,
) {
Expand Down Expand Up @@ -46,7 +46,7 @@ const AlertDialogTrigger = React.forwardRef(function AlertDialogTrigger(
return renderElement();
});

namespace AlertDialogTrigger {
export namespace AlertDialogTrigger {
export interface Props extends BaseUIComponentProps<'button', State> {}

export interface State {
Expand Down Expand Up @@ -87,5 +87,3 @@ AlertDialogTrigger.propTypes /* remove-proptypes */ = {
*/
render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
} as any;

export { AlertDialogTrigger };
6 changes: 2 additions & 4 deletions packages/react/src/avatar/fallback/AvatarFallback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { avatarStyleHookMapping } from '../root/styleHooks';
*
* Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
*/
const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallback.Props>(
export const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallback.Props>(
function AvatarFallback(props: AvatarFallback.Props, forwardedRef) {
const { className, render, delay, ...otherProps } = props;

Expand Down Expand Up @@ -54,7 +54,7 @@ const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallback.Props>(
},
);

namespace AvatarFallback {
export namespace AvatarFallback {
export interface Props extends BaseUIComponentProps<'span', AvatarRoot.State> {
/**
* How long to wait before showing the fallback. Specified in milliseconds.
Expand All @@ -63,8 +63,6 @@ namespace AvatarFallback {
}
}

export { AvatarFallback };

AvatarFallback.propTypes /* remove-proptypes */ = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
Expand Down
Loading