refactor(react-button): reduce bundle size by removing the getIntrinsicElementProps helper

change/@fluentui-react-button-a3411045-3262-43b8-98e2-2923b427bdd4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "refactor: reduce bundle size by removing the getIntrinsicElementProps helper",
+  "packageName": "@fluentui/react-button",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-carousel-8ee9f14b-f785-42eb-8853-88b32f03bb5c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: ensure we pass to correct props to Button component",
+  "packageName": "@fluentui/react-carousel",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-button/library/src/components/Button/useButton.ts

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
 import { useButtonContext } from '../../contexts/ButtonContext';
 import type { ButtonProps, ButtonState } from './Button.types';
 
@@ -18,26 +18,25 @@ export const useButton_unstable = (
   const { size: contextSize } = useButtonContext();
   const {
     appearance = 'secondary',
-    as = 'button',
-    disabled = false,
-    disabledFocusable = false,
     icon,
     iconPosition = 'before',
     shape = 'rounded',
     size = contextSize ?? 'medium',
+    ...rest
   } = props;
+  const as = props.as || 'button';
   const iconShorthand = slot.optional(icon, { elementType: 'span' });
   return {
     // Props passed at the top-level
     appearance,
-    disabled,
-    disabledFocusable,
+    disabled: props.disabled || false,
+    disabledFocusable: props.disabledFocusable || false,
     iconPosition,
     shape,
     size, // State calculated from a set of props
     iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition
     components: { root: 'button', icon: 'span' },
-    root: slot.always<ARIAButtonSlotProps<'a'>>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
+    root: slot.always<ARIAButtonSlotProps<'a'>>(useARIAButtonProps(rest.as, rest), {
       elementType: 'button',
       defaultProps: {
         ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,

packages/react-components/react-button/library/src/components/SplitButton/useSplitButton.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+import { useId, slot } from '@fluentui/react-utilities';
 import { Button } from '../Button/Button';
 import { MenuButton } from '../MenuButton/MenuButton';
 import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
@@ -16,7 +16,6 @@ export const useSplitButton_unstable = (
   const {
     appearance = 'secondary',
     children,
-    disabled = false,
     disabledFocusable = false,
     icon,
     iconPosition = 'before',
@@ -25,8 +24,10 @@ export const useSplitButton_unstable = (
     primaryActionButton,
     shape = 'rounded',
     size = 'medium',
+    ...rest
   } = props;
   const baseId = useId('splitButton-');
+  const disabled = props.disabled || false;
 
   const menuButtonShorthand = slot.optional(menuButton, {
     defaultProps: {
@@ -76,7 +77,7 @@ export const useSplitButton_unstable = (
     shape,
     size, // Slots definition
     components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },
-    root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),
+    root: slot.always({ ref, ...rest } as React.HTMLAttributes<HTMLDivElement>, { elementType: 'div' }),
     menuButton: menuButtonShorthand,
     primaryActionButton: primaryActionButtonShorthand,
   };

packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx

@@ -22,7 +22,7 @@ export const useCarouselAutoplayButton_unstable = (
   props: CarouselAutoplayButtonProps,
   ref: React.Ref<ARIAButtonElement>,
 ): CarouselAutoplayButtonState => {
-  const { onCheckedChange, checked, defaultChecked } = props;
+  const { onCheckedChange, checked, defaultChecked, ...rest } = props;
 
   const [autoplay, setAutoplay] = useControllableState({
     state: checked,
@@ -63,7 +63,7 @@ export const useCarouselAutoplayButton_unstable = (
           renderByDefault: true,
           elementType: 'span',
         }),
-        ...props,
+        ...rest,
         checked: autoplay,
         onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),
       },

packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx

@@ -31,7 +31,7 @@ export const useCarouselButton_unstable = (
   props: CarouselButtonProps,
   ref: React.Ref<ARIAButtonElement>,
 ): CarouselButtonState => {
-  const { navType = 'next' } = props;
+  const { navType = 'next', ...rest } = props;
 
   // Locally tracks the total number of slides, will only update if this changes.
   const [totalSlides, setTotalSlides] = React.useState(0);
@@ -115,7 +115,7 @@ export const useCarouselButton_unstable = (
         tabIndex: isTrailing ? -1 : 0,
         'aria-disabled': isTrailing,
         appearance: 'subtle',
-        ...props,
+        ...rest,
         onClick: useEventCallback(mergeCallbacks(handleClick, props.onClick)),
       },
       useMergedRefs(ref, buttonRef) as React.Ref<HTMLButtonElement>,