Remove slotNames param from getSlots, and delete {component}Shorthand…

…Props arrays (microsoft#21134)

Remove slotNames param from getSlots, and delete {component}ShorthandProps arrays

#### Issue

Currently, `getSlots` requires a second `slotNames` parameter, which is redundant with the keys of the `state.components` object. Not only is this unnecessary repetition of the same information, it's also not possible to use TypeScript to catch mistakes of accidentally leaving out one or more slot names from the array. This can lead to unexpected and hard to debug bugs.

#### Description of changes

* compose/getSlots.ts: `getSlots` uses the keys of `state.components` to get the list of slots, rather than a second `slotNames` param.
* compose/types.ts: The `components` property is now required on the ComponentState object. This is enforced to be an exhaustive list of every slot and its type (so it's not possible to accidentally miss a slot, or forget to include `components` at all).
  * This required adding the components array to a few components that had previously omitted it because they only had a single `root` slot that's a `<div>`. IMO it's better to be explicit even for the simple case.
* Delete all of the now unnecessary `{component}ShorthandProps` arrays.

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

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"
+}

packages/react-accordion/etc/react-accordion.api.md

@@ -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'>;

packages/react-accordion/src/components/Accordion/useAccordion.ts

@@ -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,

packages/react-accordion/src/components/AccordionHeader/renderAccordionHeader.tsx

@@ -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}>

packages/react-accordion/src/components/AccordionHeader/useAccordionHeader.ts

@@ -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

packages/react-accordion/src/components/AccordionItem/renderAccordionItem.tsx

@@ -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}>

packages/react-accordion/src/components/AccordionItem/useAccordionItem.ts

@@ -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 : {}),

packages/react-accordion/src/components/AccordionPanel/renderAccordionPanel.tsx

@@ -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;
 };

packages/react-accordion/src/components/AccordionPanel/useAccordionPanel.ts

@@ -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',

packages/react-aria/src/hooks/useARIAButton.stories.tsx

@@ -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>;
 };
 

packages/react-avatar/src/components/Avatar/renderAvatar.tsx

@@ -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}>

packages/react-badge/src/components/Badge/renderBadge.tsx

@@ -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}>