diff --git a/change/@fluentui-react-button-a3411045-3262-43b8-98e2-2923b427bdd4.json b/change/@fluentui-react-button-a3411045-3262-43b8-98e2-2923b427bdd4.json new file mode 100644 index 00000000000000..3540c101f4d187 --- /dev/null +++ b/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" +} diff --git a/change/@fluentui-react-carousel-8ee9f14b-f785-42eb-8853-88b32f03bb5c.json b/change/@fluentui-react-carousel-8ee9f14b-f785-42eb-8853-88b32f03bb5c.json new file mode 100644 index 00000000000000..29db3b0f68444c --- /dev/null +++ b/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" +} diff --git a/packages/react-components/react-button/library/src/components/Button/useButton.ts b/packages/react-components/react-button/library/src/components/Button/useButton.ts index 1351591be6e544..7e01ab0d2c237c 100644 --- a/packages/react-components/react-button/library/src/components/Button/useButton.ts +++ b/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>(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), { + root: slot.always>(useARIAButtonProps(rest.as, rest), { elementType: 'button', defaultProps: { ref: ref as React.Ref, diff --git a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButton.ts b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButton.ts index d554f6de11ee25..e08f0efb9439b4 100644 --- a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButton.ts +++ b/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, { elementType: 'div' }), menuButton: menuButtonShorthand, primaryActionButton: primaryActionButtonShorthand, }; diff --git a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx index c1a6981e9da0fd..3e1c80fa3b5551 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx +++ b/packages/react-components/react-carousel/library/src/components/CarouselAutoplayButton/useCarouselAutoplayButton.tsx @@ -22,7 +22,7 @@ export const useCarouselAutoplayButton_unstable = ( props: CarouselAutoplayButtonProps, ref: React.Ref, ): 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)), }, diff --git a/packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx b/packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx index efba9c519c6c3f..8e7a044940c45a 100644 --- a/packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx +++ b/packages/react-components/react-carousel/library/src/components/CarouselButton/useCarouselButton.tsx @@ -31,7 +31,7 @@ export const useCarouselButton_unstable = ( props: CarouselButtonProps, ref: React.Ref, ): 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,