chore(react-avatar): adopt custom JSX pragma (#27602)

microsoft · Apr 18, 2023 · d340ff4 · d340ff4
1 parent dd76eca
commit d340ff4
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 12 deletions.
diff --git a/change/@fluentui-react-avatar-1b5a14f1-cef4-4396-b5a4-264bc60ee7c7.json b/change/@fluentui-react-avatar-1b5a14f1-cef4-4396-b5a4-264bc60ee7c7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adopt custom JSX pragma",
+  "packageName": "@fluentui/react-avatar",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-avatar/package.json b/packages/react-components/react-avatar/package.json
@@ -45,6 +45,7 @@
     "@fluentui/react-theme": "^9.1.7",
     "@fluentui/react-tooltip": "^9.2.9",
     "@fluentui/react-utilities": "^9.8.0",
+    "@fluentui/react-jsx-runtime": "9.0.0-alpha.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

diff --git a/packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx
@@ -1,9 +1,13 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { AvatarSlots, AvatarState } from './Avatar.types';
 
 export const renderAvatar_unstable = (state: AvatarState) => {
-  const { slots, slotProps } = getSlots<AvatarSlots>(state);
+  const { slots, slotProps } = getSlotsNext<AvatarSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/renderAvatarGroup.tsx
@@ -1,13 +1,17 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
 import type { AvatarGroupState, AvatarGroupSlots, AvatarGroupContextValues } from './AvatarGroup.types';
 
 /**
  * Render the final JSX of AvatarGroup
  */
 export const renderAvatarGroup_unstable = (state: AvatarGroupState, contextValues: AvatarGroupContextValues) => {
-  const { slots, slotProps } = getSlots<AvatarGroupSlots>(state);
+  const { slots, slotProps } = getSlotsNext<AvatarGroupSlots>(state);
 
   return (
     <AvatarGroupProvider value={contextValues.avatarGroup}>

diff --git a/...es/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx b/...es/react-components/react-avatar/src/components/AvatarGroupItem/renderAvatarGroupItem.tsx
@@ -1,12 +1,16 @@
-import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+
+import { getSlotsNext } from '@fluentui/react-utilities';
 import type { AvatarGroupItemState, AvatarGroupItemSlots } from './AvatarGroupItem.types';
 
 /**
  * Render the final JSX of AvatarGroupItem
  */
 export const renderAvatarGroupItem_unstable = (state: AvatarGroupItemState) => {
-  const { slots, slotProps } = getSlots<AvatarGroupItemSlots>(state);
+  const { slots, slotProps } = getSlotsNext<AvatarGroupItemSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

diff --git a/...ct-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx b/...ct-components/react-avatar/src/components/AvatarGroupPopover/renderAvatarGroupPopover.tsx
@@ -1,7 +1,11 @@
-import * as React from 'react';
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
 import { AvatarGroupProvider } from '../../contexts/AvatarGroupContext';
 import { AvatarGroupContextValues } from '../AvatarGroup/AvatarGroup.types';
-import { getSlots } from '@fluentui/react-utilities';
+
+import { getSlotsNext } from '@fluentui/react-utilities';
 import { PopoverProps, PopoverTrigger } from '@fluentui/react-popover';
 import { TooltipProps } from '@fluentui/react-tooltip';
 import type { AvatarGroupPopoverState, AvatarGroupPopoverSlots } from './AvatarGroupPopover.types';
@@ -13,7 +17,7 @@ export const renderAvatarGroupPopover_unstable = (
   state: AvatarGroupPopoverState,
   contextValues: AvatarGroupContextValues,
 ) => {
-  const { slots, slotProps } = getSlots<AvatarGroupPopoverSlots>(state);
+  const { slots, slotProps } = getSlotsNext<AvatarGroupPopoverSlots>(state);
 
   return (
     <slots.root {...(slotProps.root as PopoverProps)}>