fix: remove components from prop destructuring (#30520)

change/@fluentui-react-rating-preview-098152fc-985c-46de-aee3-2e1e7917e969.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove component assignment from prop destructuring",
+  "packageName": "@fluentui/react-rating-preview",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-rating-preview/src/components/Rating/useRating.tsx

@@ -11,6 +11,9 @@ import type { RatingProps, RatingState } from './Rating.types';
 import { RatingItem } from '../../RatingItem';
 import { StarFilled, StarRegular } from '@fluentui/react-icons';
 
+const defaultIconFilled = <StarFilled />;
+const defaultIconOutline = <StarRegular />;
+
 /**
  * Create the state required to render Rating.
  *
@@ -24,8 +27,8 @@ export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivEle
   const generatedName = useId('rating-');
   const {
     color = 'neutral',
-    iconFilled = <StarFilled />,
-    iconOutline = <StarRegular />,
+    iconFilled = defaultIconFilled,
+    iconOutline = defaultIconOutline,
     max = 5,
     name = generatedName,
     onChange,

packages/react-components/react-rating-preview/src/components/RatingDisplay/useRatingDisplay.tsx

@@ -4,6 +4,8 @@ import type { RatingDisplayProps, RatingDisplayState } from './RatingDisplay.typ
 import { StarFilled } from '@fluentui/react-icons';
 import { RatingItem } from '../RatingItem/RatingItem';
 
+const defaultIcon = <StarFilled />;
+
 /**
  * Create the state required to render RatingDisplay.
  *
@@ -17,7 +19,7 @@ export const useRatingDisplay_unstable = (
   props: RatingDisplayProps,
   ref: React.Ref<HTMLDivElement>,
 ): RatingDisplayState => {
-  const { color = 'neutral', count, compact = false, icon = <StarFilled />, max = 5, size = 'medium', value } = props;
+  const { color = 'neutral', count, compact = false, icon = defaultIcon, max = 5, size = 'medium', value } = props;
 
   const valueTextId = useId('rating-value-');
   const countTextId = useId('rating-count-');

packages/react-components/react-rating-preview/src/components/RatingItem/useRatingItem.tsx

@@ -4,6 +4,8 @@ import { useFocusWithin } from '@fluentui/react-tabster';
 import type { RatingItemProps, RatingItemState } from './RatingItem.types';
 import { useRatingItemContextValue_unstable } from '../../contexts/RatingItemContext';
 
+const defaultItemLabel = (num: number) => num + '';
+
 /**
  * Create the state required to render RatingItem.
  *
@@ -16,7 +18,7 @@ import { useRatingItemContextValue_unstable } from '../../contexts/RatingItemCon
 export const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HTMLSpanElement>): RatingItemState => {
   const context = useRatingItemContextValue_unstable();
   const { value = 0 } = props;
-  const { itemLabel = num => num + '' } = context;
+  const { itemLabel = defaultItemLabel } = context;
 
   const ratingValue = Math.round((context.value || 0) * 2) / 2; // round to the nearest 0.5