Skip to content

feat(react-jsx-runtime): implements next steps (option A) #27752

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

Closed
bsunderhus wants to merge 1 commit into from
Closed

feat(react-jsx-runtime): implements next steps (option A) #27752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 11 additions & 11 deletions packages/react-components/react-dialog/etc/react-dialog.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
import { ARIAButtonResultProps } from '@fluentui/react-aria';
import { ARIAButtonType } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { JSXElementConstructor } from 'react';
import type { NextComponentState } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import { ReactElement } from 'react';
import type { Slot } from '@fluentui/react-utilities';
Expand Down Expand Up @@ -39,11 +39,11 @@ export type DialogActionsProps = ComponentProps<DialogActionsSlots> & {

// @public (undocumented)
export type DialogActionsSlots = {
root: Slot<'div'>;
root: NonNullable<Slot<'div'>>;
};

// @public
export type DialogActionsState = ComponentState<DialogActionsSlots> & Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;
export type DialogActionsState = NextComponentState<DialogActionsSlots> & Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;

// @public
export const DialogBody: ForwardRefComponent<DialogBodyProps>;
Expand All @@ -56,11 +56,11 @@ export type DialogBodyProps = ComponentProps<DialogBodySlots> & {};

// @public (undocumented)
export type DialogBodySlots = {
root: Slot<'div'>;
root: NonNullable<Slot<'div'>>;
};

// @public
export type DialogBodyState = ComponentState<DialogBodySlots>;
export type DialogBodyState = NextComponentState<DialogBodySlots>;

// @public
export const DialogContent: ForwardRefComponent<DialogContentProps>;
Expand All @@ -73,11 +73,11 @@ export type DialogContentProps = ComponentProps<DialogContentSlots>;

// @public (undocumented)
export type DialogContentSlots = {
root: Slot<'div'>;
root: NonNullable<Slot<'div'>>;
};

// @public
export type DialogContentState = ComponentState<DialogContentSlots>;
export type DialogContentState = NextComponentState<DialogContentSlots>;

// @public (undocumented)
export type DialogOpenChangeData = {
Expand Down Expand Up @@ -114,7 +114,7 @@ export type DialogProps = ComponentProps<Partial<DialogSlots>> & {
export type DialogSlots = {};

// @public (undocumented)
export type DialogState = ComponentState<DialogSlots> & DialogContextValue & {
export type DialogState = NextComponentState<DialogSlots> & DialogContextValue & {
content: React_2.ReactNode;
trigger: React_2.ReactNode;
};
Expand All @@ -134,11 +134,11 @@ export type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots>;
// @public (undocumented)
export type DialogSurfaceSlots = {
backdrop?: Slot<'div'>;
root: Slot<'div'>;
root: NonNullable<Slot<'div'>>;
};

// @public
export type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;
export type DialogSurfaceState = NextComponentState<DialogSurfaceSlots>;

// @public
export const DialogTitle: ForwardRefComponent<DialogTitleProps>;
Expand All @@ -156,7 +156,7 @@ export type DialogTitleSlots = {
};

// @public
export type DialogTitleState = ComponentState<DialogTitleSlots>;
export type DialogTitleState = NextComponentState<DialogTitleSlots>;

// @public
export const DialogTrigger: React_2.FC<DialogTriggerProps>;
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/react-dialog/src/components/Dialog/Dialog.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type * as React from 'react';
import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
import type { ComponentProps, NextComponentState } from '@fluentui/react-utilities';
import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';
import type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types';

Expand Down Expand Up @@ -96,7 +96,7 @@ export type DialogProps = ComponentProps<Partial<DialogSlots>> & {
inertTrapFocus?: boolean;
};

export type DialogState = ComponentState<DialogSlots> &
export type DialogState = NextComponentState<DialogSlots> &
DialogContextValue & {
content: React.ReactNode;
trigger: React.ReactNode;
Expand Down
6 changes: 1 addition & 5 deletions packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
/** @jsxRuntime classic */
/** @jsx createElement */

import { createElement } from '@fluentui/react-jsx-runtime';

import * as React from 'react';
import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
import type { DialogState, DialogContextValues } from './Dialog.types';

Expand Down
3 changes: 0 additions & 3 deletions packages/react-components/react-dialog/src/components/Dialog/useDialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,6 @@ export const useDialog_unstable = (props: DialogProps): DialogState => {
});

return {
components: {
backdrop: 'div',
},
inertTrapFocus,
open,
modalType,
Expand Down
6 changes: 3 additions & 3 deletions packages/react-components/react-dialog/src/components/DialogActions/DialogActions.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { ComponentProps, NextComponentState, Slot } from '@fluentui/react-utilities';

export type DialogActionsSlots = {
root: Slot<'div'>;
root: NonNullable<Slot<'div'>>;
};

export type DialogActionsPosition = 'start' | 'end';
Expand All @@ -26,5 +26,5 @@ export type DialogActionsProps = ComponentProps<DialogActionsSlots> & {
/**
* State used in rendering DialogActions
*/
export type DialogActionsState = ComponentState<DialogActionsSlots> &
export type DialogActionsState = NextComponentState<DialogActionsSlots> &
Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;
14 changes: 4 additions & 10 deletions packages/react-components/react-dialog/src/components/DialogActions/renderDialogActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
/** @jsxRuntime classic */
/** @jsx createElement */
/** @jsx createElementNext */

import { createElement } from '@fluentui/react-jsx-runtime';
import { createElementNext } from '@fluentui/react-jsx-runtime';

import { getSlotsNext } from '@fluentui/react-utilities';
import type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';
import type { DialogActionsState } from './DialogActions.types';

/**
* Render the final JSX of DialogActions
*/
export const renderDialogActions_unstable = (state: DialogActionsState) => {
const { slots, slotProps } = getSlotsNext<DialogActionsSlots>(state);

// TODO Add additional slots in the appropriate place
return <slots.root {...slotProps.root} />;
};
export const renderDialogActions_unstable = (state: DialogActionsState) => <state.root />;
16 changes: 8 additions & 8 deletions packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { getNativeElementProps } from '@fluentui/react-utilities';
import { getNativeElementProps, slot } from '@fluentui/react-utilities';
import type { DialogActionsProps, DialogActionsState } from './DialogActions.types';

/**
Expand All @@ -17,13 +17,13 @@ export const useDialogActions_unstable = (
): DialogActionsState => {
const { position = 'end', fluid = false } = props;
return {
components: {
root: 'div',
},
root: getNativeElementProps('div', {
ref,
...props,
}),
root: slot<DialogActionsProps>(
getNativeElementProps('div', {
ref,
...props,
}),
{ required: true, componentType: 'div' },
),
position,
fluid,
};
Expand Down
4 changes: 2 additions & 2 deletions ...act-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ const useStyles = makeStyles({
*/
export const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {
const styles = useStyles();
state.root.className = mergeClasses(
state.root.props.className = mergeClasses(
dialogActionsClassNames.root,
styles.root,
state.position === 'start' && styles.gridPositionStart,
state.position === 'end' && styles.gridPositionEnd,
state.fluid && state.position === 'start' && styles.fluidStart,
state.fluid && state.position === 'end' && styles.fluidEnd,
state.root.className,
state.root.props.className,
);
return state;
};
6 changes: 3 additions & 3 deletions packages/react-components/react-dialog/src/components/DialogBody/DialogBody.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { ComponentProps, NextComponentState, Slot } from '@fluentui/react-utilities';

export type DialogBodySlots = {
root: Slot<'div'>;
root: NonNullable<Slot<'div'>>;
};

/**
Expand All @@ -12,4 +12,4 @@ export type DialogBodyProps = ComponentProps<DialogBodySlots> & {};
/**
* State used in rendering DialogBody
*/
export type DialogBodyState = ComponentState<DialogBodySlots>;
export type DialogBodyState = NextComponentState<DialogBodySlots>;
14 changes: 4 additions & 10 deletions packages/react-components/react-dialog/src/components/DialogBody/renderDialogBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
/** @jsxRuntime classic */
/** @jsx createElement */
/** @jsx createElementNext */

import { createElement } from '@fluentui/react-jsx-runtime';
import { createElementNext } from '@fluentui/react-jsx-runtime';

import { getSlotsNext } from '@fluentui/react-utilities';
import type { DialogBodyState, DialogBodySlots } from './DialogBody.types';
import type { DialogBodyState } from './DialogBody.types';

/**
* Render the final JSX of DialogBody
*/
export const renderDialogBody_unstable = (state: DialogBodyState) => {
const { slots, slotProps } = getSlotsNext<DialogBodySlots>(state);

// TODO Add additional slots in the appropriate place
return <slots.root {...slotProps.root} />;
};
export const renderDialogBody_unstable = (state: DialogBodyState) => <state.root />;
16 changes: 8 additions & 8 deletions packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { getNativeElementProps } from '@fluentui/react-utilities';
import { getNativeElementProps, slot } from '@fluentui/react-utilities';
import type { DialogBodyProps, DialogBodyState } from './DialogBody.types';

/**
Expand All @@ -13,12 +13,12 @@ import type { DialogBodyProps, DialogBodyState } from './DialogBody.types';
*/
export const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {
return {
components: {
root: 'div',
},
root: getNativeElementProps(props.as ?? 'div', {
ref,
...props,
}),
root: slot<DialogBodyProps>(
getNativeElementProps(props.as ?? 'div', {
ref,
...props,
}),
{ required: true, componentType: 'div' },
),
};
};
2 changes: 1 addition & 1 deletion ...ges/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const useStyles = makeStyles({
*/
export const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {
const styles = useStyles();
state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);
state.root.props.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.props.className);

return state;
};
6 changes: 3 additions & 3 deletions packages/react-components/react-dialog/src/components/DialogContent/DialogContent.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { ComponentProps, NextComponentState, Slot } from '@fluentui/react-utilities';

export type DialogContentSlots = {
root: Slot<'div'>;
root: NonNullable<Slot<'div'>>;
};

/**
Expand All @@ -12,4 +12,4 @@ export type DialogContentProps = ComponentProps<DialogContentSlots>;
/**
* State used in rendering DialogContent
*/
export type DialogContentState = ComponentState<DialogContentSlots>;
export type DialogContentState = NextComponentState<DialogContentSlots>;
13 changes: 4 additions & 9 deletions packages/react-components/react-dialog/src/components/DialogContent/renderDialogContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
/** @jsxRuntime classic */
/** @jsx createElement */
/** @jsx createElementNext */

import { createElement } from '@fluentui/react-jsx-runtime';
import { createElementNext } from '@fluentui/react-jsx-runtime';

import { getSlotsNext } from '@fluentui/react-utilities';
import type { DialogContentState, DialogContentSlots } from './DialogContent.types';
import type { DialogContentState } from './DialogContent.types';

/**
* Render the final JSX of DialogContent
*/
export const renderDialogContent_unstable = (state: DialogContentState) => {
const { slots, slotProps } = getSlotsNext<DialogContentSlots>(state);

return <slots.root {...slotProps.root} />;
};
export const renderDialogContent_unstable = (state: DialogContentState) => <state.root />;
16 changes: 8 additions & 8 deletions packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { getNativeElementProps } from '@fluentui/react-utilities';
import { getNativeElementProps, slot } from '@fluentui/react-utilities';
import { DialogContentProps, DialogContentState } from './DialogContent.types';

/**
Expand All @@ -16,12 +16,12 @@ export const useDialogContent_unstable = (
ref: React.Ref<HTMLElement>,
): DialogContentState => {
return {
components: {
root: 'div',
},
root: getNativeElementProps(props.as ?? 'div', {
ref,
...props,
}),
root: slot<DialogContentProps>(
getNativeElementProps(props.as ?? 'div', {
ref,
...props,
}),
{ required: true, componentType: 'div' },
),
};
};
2 changes: 1 addition & 1 deletion ...act-components/react-dialog/src/components/DialogContent/useDialogContentStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,6 @@ const useStyles = makeStyles({
*/
export const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {
const styles = useStyles();
state.root.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.className);
state.root.props.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.props.className);
return state;
};
6 changes: 3 additions & 3 deletions packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
import type { ComponentProps, NextComponentState, Slot } from '@fluentui/react-utilities';
import { DialogSurfaceContextValue } from '../../contexts';

export type DialogSurfaceSlots = {
Expand All @@ -10,7 +10,7 @@ export type DialogSurfaceSlots = {
*
*/
backdrop?: Slot<'div'>;
root: Slot<'div'>;
root: NonNullable<Slot<'div'>>;
};

/**
Expand All @@ -30,4 +30,4 @@ export type DialogSurfaceContextValues = {
/**
* State used in rendering DialogSurface
*/
export type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;
export type DialogSurfaceState = NextComponentState<DialogSurfaceSlots>;
Loading