microsoft · behowell · Jan 12, 2022 · Dec 28, 2021 · Dec 29, 2021 · Dec 29, 2021
diff --git a/change/@fluentui-react-accordion-77a23f82-2903-4296-9e51-c9cf9ff456b5.json b/change/@fluentui-react-accordion-77a23f82-2903-4296-9e51-c9cf9ff456b5.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-aria-e7e52cc8-c29f-4309-b07b-159fd39ff1ad.json b/change/@fluentui-react-aria-e7e52cc8-c29f-4309-b07b-159fd39ff1ad.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-aria",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-avatar-c96b5d10-5f6d-4f66-907d-6f5f22cbe350.json b/change/@fluentui-react-avatar-c96b5d10-5f6d-4f66-907d-6f5f22cbe350.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-9921cb7c-dd2b-4e2b-812e-29b480f11827.json b/change/@fluentui-react-badge-9921cb7c-dd2b-4e2b-812e-29b480f11827.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-button-398ba8fc-f98c-4664-8013-79f66c69fffd.json b/change/@fluentui-react-button-398ba8fc-f98c-4664-8013-79f66c69fffd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-e7a95642-3eb8-4e8b-8a78-e77ca71df05c.json b/change/@fluentui-react-card-e7a95642-3eb8-4e8b-8a78-e77ca71df05c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-card",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-checkbox-2e4a3702-f15b-4431-ac93-c14c1f75d627.json b/change/@fluentui-react-checkbox-2e4a3702-f15b-4431-ac93-c14c1f75d627.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-components-f68b325d-17f9-40ae-85e0-8ed8e33c93be.json b/change/@fluentui-react-components-f68b325d-17f9-40ae-85e0-8ed8e33c93be.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove components' shorthandProps array exports",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-divider-2f789fa2-9d14-4669-9882-8ce43cda090d.json b/change/@fluentui-react-divider-2f789fa2-9d14-4669-9882-8ce43cda090d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-image-67e82e61-d6fd-45af-b930-37520bec4794.json b/change/@fluentui-react-image-67e82e61-d6fd-45af-b930-37520bec4794.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-4f7b9fb8-ec7b-46a0-a286-3e6ba7286179.json b/change/@fluentui-react-input-4f7b9fb8-ec7b-46a0-a286-3e6ba7286179.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-label-7a22cb57-afaa-4010-9ed8-c73c45499b72.json b/change/@fluentui-react-label-7a22cb57-afaa-4010-9ed8-c73c45499b72.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-label",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-link-1a410dde-bb4d-44ae-b42f-91ab5b79e574.json b/change/@fluentui-react-link-1a410dde-bb4d-44ae-b42f-91ab5b79e574.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-4d1ae281-9306-4403-aa4d-bfc297de8f8b.json b/change/@fluentui-react-menu-4d1ae281-9306-4403-aa4d-bfc297de8f8b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-0efeb724-f1a8-40e7-8b0d-6bc45d900114.json b/change/@fluentui-react-popover-0efeb724-f1a8-40e7-8b0d-6bc45d900114.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-provider-fc6f0196-7fc7-4cda-b173-e14429902c54.json b/change/@fluentui-react-provider-fc6f0196-7fc7-4cda-b173-e14429902c54.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-slider-32bb880f-055c-4287-85c4-e431c26978e4.json b/change/@fluentui-react-slider-32bb880f-055c-4287-85c4-e431c26978e4.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-switch-3a11a966-1724-4b22-a4fc-1a0bfaa16a7a.json b/change/@fluentui-react-switch-3a11a966-1724-4b22-a4fc-1a0bfaa16a7a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-switch",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-7e8fed9d-fac7-4400-82b3-d7fb3078b16e.json b/change/@fluentui-react-tooltip-7e8fed9d-fac7-4400-82b3-d7fb3078b16e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Remove component's shorthandProps array",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-utilities-2242ee35-0d90-4659-8573-8f13a762c098.json b/change/@fluentui-react-utilities-2242ee35-0d90-4659-8573-8f13a762c098.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "getSlots: remove slotNames param, and infer from state.components instead",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -78,9 +78,6 @@ export type AccordionHeaderExpandIconProps = IntrinsicShorthandProps<'span'>;
 // @public (undocumented)
 export type AccordionHeaderProps = ComponentProps<AccordionHeaderSlots> & Partial<AccordionHeaderCommons>;
 
-// @public
-export const accordionHeaderShorthandProps: Array<keyof AccordionHeaderSlots>;
-
 // @public (undocumented)
 export type AccordionHeaderSize = 'small' | 'medium' | 'large' | 'extra-large';
 
@@ -128,9 +125,6 @@ export type AccordionItemContextValues = {
 // @public (undocumented)
 export type AccordionItemProps = ComponentProps<AccordionItemSlots> & Partial<AccordionItemCommons> & Pick<AccordionItemCommons, 'value'>;
 
-// @public
-export const accordionItemShorthandProps: Array<keyof AccordionItemSlots>;
-
 // @public (undocumented)
 export type AccordionItemSlots = {
     root: IntrinsicShorthandProps<'div'>;
@@ -151,9 +145,6 @@ export const accordionPanelClassName = "fui-AccordionPanel";
 // @public (undocumented)
 export type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
 
-// @public
-export const accordionPanelShorthandProps: Array<keyof AccordionPanelSlots>;
-
 // @public (undocumented)
 export type AccordionPanelSlots = {
     root: IntrinsicShorthandProps<'div'>;
@@ -171,9 +162,6 @@ export type AccordionProps = ComponentProps<AccordionSlots> & Partial<AccordionC
     onToggle?: AccordionToggleEventHandler;
 };
 
-// @public (undocumented)
-export const accordionShorthandProps: Array<keyof AccordionSlots>;
-
 // @public (undocumented)
 export type AccordionSlots = {
     root: IntrinsicShorthandProps<'div'>;

@@ -1,16 +1,8 @@
 import * as React from 'react';
 import { getNativeElementProps, useControllableState, useEventCallback } from '@fluentui/react-utilities';
-import type {
-  AccordionProps,
-  AccordionSlots,
-  AccordionState,
-  AccordionToggleData,
-  AccordionToggleEvent,
-} from './Accordion.types';
+import type { AccordionProps, AccordionState, AccordionToggleData, AccordionToggleEvent } from './Accordion.types';
 import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
 
-export const accordionShorthandProps: Array<keyof AccordionSlots> = ['root'];
-
 /**
  * Returns the props and state required to render the component
  * @param props - Accordion properties
@@ -47,6 +39,9 @@ export const useAccordion = (props: AccordionProps, ref: React.Ref<HTMLElement>)
     navigable,
     openItems,
     requestToggle,
+    components: {
+      root: 'div',
+    },
     root: getNativeElementProps('div', {
       ...props,
       ref,

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { accordionHeaderShorthandProps } from './useAccordionHeader';
 import { AccordionHeaderContext } from './AccordionHeaderContext';
 import type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';
 
 /**
  * Function that renders the final JSX of the component
  */
 export const renderAccordionHeader = (state: AccordionHeaderState, contextValues: AccordionHeaderContextValues) => {
-  const { slots, slotProps } = getSlots<AccordionHeaderSlots>(state, accordionHeaderShorthandProps);
+  const { slots, slotProps } = getSlots<AccordionHeaderSlots>(state);
 
   return (
     <AccordionHeaderContext.Provider value={contextValues.accordionHeader}>

@@ -7,17 +7,6 @@ import type { AccordionHeaderProps, AccordionHeaderState, AccordionHeaderSlots }
 import { useContextSelector } from '@fluentui/react-context-selector';
 import { AccordionContext } from '../Accordion/AccordionContext';
 
-/**
- * Const listing which props are shorthand props.
- */
-export const accordionHeaderShorthandProps: Array<keyof AccordionHeaderSlots> = [
-  'root',
-  'icon',
-  'button',
-  'children',
-  'expandIcon',
-];
-
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionHeader properties

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { accordionItemShorthandProps } from './useAccordionItem';
 import { AccordionItemContext } from './AccordionItemContext';
 import type { AccordionItemState, AccordionItemSlots, AccordionItemContextValues } from './AccordionItem.types';
 
 /**
  * Function that renders the final JSX of the component
  */
 export const renderAccordionItem = (state: AccordionItemState, contextValues: AccordionItemContextValues) => {
-  const { slots, slotProps } = getSlots<AccordionItemSlots>(state, accordionItemShorthandProps);
+  const { slots, slotProps } = getSlots<AccordionItemSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

@@ -3,14 +3,9 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
 import { useContextSelector } from '@fluentui/react-context-selector';
 import { AccordionContext } from '../Accordion/AccordionContext';
-import type { AccordionItemProps, AccordionItemState, AccordionItemSlots } from './AccordionItem.types';
+import type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';
 import type { AccordionToggleEvent } from '../Accordion/Accordion.types';
 
-/**
- * Const listing which props are shorthand props.
- */
-export const accordionItemShorthandProps: Array<keyof AccordionItemSlots> = ['root'];
-
 /**
  * Returns the props and state required to render the component
  * @param props - AccordionItem properties
@@ -35,6 +30,9 @@ export const useAccordionItem = (props: AccordionItemProps, ref: React.Ref<HTMLE
     value,
     disabled,
     onHeaderClick: onAccordionHeaderClick,
+    components: {
+      root: 'div',
+    },
     root: getNativeElementProps('div', {
       ref: ref,
       ...(navigable ? tabsterAttributes : {}),

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { accordionPanelShorthandProps } from './useAccordionPanel';
 import type { AccordionPanelState, AccordionPanelSlots } from './AccordionPanel.types';
 
 /**
  * Function that renders the final JSX of the component
  */
 export const renderAccordionPanel = (state: AccordionPanelState) => {
-  const { slots, slotProps } = getSlots<AccordionPanelSlots>(state, accordionPanelShorthandProps);
+  const { slots, slotProps } = getSlots<AccordionPanelSlots>(state);
   return state.open ? <slots.root {...slotProps.root}>{slotProps.root.children}</slots.root> : null;
 };
@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps } from '@fluentui/react-utilities';
 import { useAccordionItemContext } from '../AccordionItem/index';
-import type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
-
-/**
- * Const listing which props are shorthand props.
- */
-export const accordionPanelShorthandProps: Array<keyof AccordionPanelSlots> = ['root'];
+import type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';
 
 /**
  * Returns the props and state required to render the component
@@ -17,6 +12,9 @@ export const useAccordionPanel = (props: AccordionPanelProps, ref: React.Ref<HTM
   const { open } = useAccordionItemContext();
   return {
     open,
+    components: {
+      root: 'div',
+    },
     root: getNativeElementProps('div', {
       ref,
       role: 'region',

@@ -17,13 +17,14 @@ interface DefaultArgs {
 
 export const Default = (args: DefaultArgs) => {
   const state: State = {
+    components: { root: 'div', button: 'button' },
     root: {},
     button: {
       ...useARIAButton({ as: 'button', onClick: args.onClick }, { required: true }),
       children: React.Fragment,
     },
   };
-  const { slots, slotProps } = getSlots<Slots>(state, ['button', 'root']);
+  const { slots, slotProps } = getSlots<Slots>(state);
   return (
     <slots.root {...slotProps.root}>
       <slots.button {...slotProps.button}>this is a button</slots.button>
@@ -32,6 +33,9 @@ export const Default = (args: DefaultArgs) => {
 };
 
 export const Anchor = (args: DefaultArgs) => {
+  type AnchorSlots = {
+    root: ARIAButtonShorthandProps;
+  };
   const props = useARIAButton(
     {
       as: 'a',
@@ -43,7 +47,10 @@ export const Anchor = (args: DefaultArgs) => {
     },
     { required: true },
   );
-  const { slots, slotProps } = getSlots({ root: props }, ['root']);
+  const { slots, slotProps } = getSlots<AnchorSlots>({
+    components: { root: 'a' },
+    root: props,
+  });
   return <slots.root {...slotProps.root}>this is an anchor</slots.root>;
 };
 

@@ -3,7 +3,7 @@ import { getSlots } from '@fluentui/react-utilities';
 import type { AvatarSlots, AvatarState } from './Avatar.types';
 
 export const renderAvatar = (state: AvatarState) => {
-  const { slots, slotProps } = getSlots<AvatarSlots>(state, ['root', 'label', 'image', 'badge', 'icon']);
+  const { slots, slotProps } = getSlots<AvatarSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>

@@ -3,7 +3,7 @@ import { getSlots } from '@fluentui/react-utilities';
 import type { BadgeState, BadgeSlots } from './Badge.types';
 
 export const renderBadge = (state: BadgeState) => {
-  const { slots, slotProps } = getSlots<BadgeSlots>(state, ['icon', 'root']);
+  const { slots, slotProps } = getSlots<BadgeSlots>(state);
 
   return (
     <slots.root {...slotProps.root}>