feature(react-utilities): support for data-* attributes on slots

apps/ts-minbar-test-react-components/src/index.ts

@@ -9,7 +9,7 @@ import {
   packProjectPackages,
 } from '@fluentui/scripts-projects-test';
 
-const tsVersion = '3.9';
+const tsVersion = '4.5';
 const testName = 'ts-minbar-react-components';
 
 async function performTest() {

change/@fluentui-react-aria-8f78fc18-0062-4b31-943b-49d1f8fb792c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-aria",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-breadcrumb-b650b8ef-a676-48a6-a90f-a0a5c12d4d40.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-breadcrumb",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-button-75d223db-26c4-4e67-9efc-27d2c87d4746.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-button",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-datepicker-compat-40e91e26-ec95-4c11-8598-3e6bf2be277d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-0675581f-93c2-4eb6-8777-245169e63ccc.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-70c3f806-65d7-4b1f-aaba-3a92ade08fee.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-drawer",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-infolabel-9c771276-6832-439e-9536-8a5a65c93638.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-infolabel",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-jsx-runtime-12473640-484d-4699-a36c-5d9e9c7a1622.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-jsx-runtime",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-link-77636efd-b545-46f3-8d29-4fdf7974fbe4.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-link",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-625c3222-142a-430e-b5de-4b0d6ecd800c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-menu",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v0-v9-e5bd1559-048d-4423-8339-c1ef4cd8aa29.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v8-v9-0dbfdec5-c535-461c-979a-dedf2e792f13.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-nav-preview-0129d42b-1550-4862-a3fd-cc8ad57f7e3c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-1db35c3c-7f69-412b-ab0f-c279a9f7132e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-popover",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-search-f1e14f72-5b28-44d0-bb5e-7cc3260e00a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-search",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-swatch-picker-63fb5fd8-d730-4e34-ba24-a909c8178866.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-swatch-picker",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-b21a0221-810f-4b38-b928-13e54251c56b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-table",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabs-536a8e63-1156-4ebc-8595-e72351ff0d29.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-tabs",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tag-picker-e9aa92f6-cda0-4905-8d4d-13d63785c30b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tags-7cc19258-0545-4a21-b262-6d1dc8d513b3.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-tags",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-teaching-popover-8ad435b5-7fc5-4716-bf03-35ea896e2148.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: support for data-* attributes",
+  "packageName": "@fluentui/react-teaching-popover",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-ba1e922d-1d50-4b25-97af-f776b995023a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-toast",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toolbar-199bf58f-2421-486a-bcf1-535db8cb98cf.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-852e0ed2-030e-44aa-b7f5-c16ea6283aa2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-utilities",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-virtualizer-672c17bd-9097-418a-af72-9283de7b72dd.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-aria/library/etc/react-aria.api.md

@@ -5,7 +5,10 @@
 ```ts
 
 import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
+import type { DistributivePick } from '@fluentui/react-utilities';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
+import type { HTMLDataAttributes } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { ResolveShorthandFunction } from '@fluentui/react-utilities';
 import type { Slot } from '@fluentui/react-utilities';
@@ -67,16 +70,16 @@ export type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = H
 export type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<ARIAButtonElement<AlternateAs>>;
 
 // @public
-export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React_2.PropsWithRef<JSX.IntrinsicElements[Type]> & {
+export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<React_2.PropsWithRef<JSX.IntrinsicElements[Type]>, 'children'> & {
     disabled?: boolean;
     disabledFocusable?: boolean;
 };
 
 // @public
-export type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props & UnionToIntersection<ARIAButtonAlteredProps<Type>>;
+export type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props & UnionToIntersection<ARIAButtonAlteredProps<Type>> & HTMLDataAttributes;
 
 // @public (undocumented)
-export type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<Slot<'button', AlternateAs>> & Pick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;
+export type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<Slot<'button', AlternateAs>> & DistributivePick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;
 
 // @public (undocumented)
 export type ARIAButtonType = 'button' | 'a' | 'div';
@@ -108,7 +111,7 @@ export const useActiveDescendantContext: () => ActiveDescendantContextValue;
 export function useARIAButtonProps<Type extends ARIAButtonType, Props extends ARIAButtonProps<Type>>(type?: Type, props?: Props): ARIAButtonResultProps<Type, Props>;
 
 // @internal @deprecated (undocumented)
-export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps>;
+export const useARIAButtonShorthand: ResolveShorthandFunction<any>;
 
 // @public (undocumented)
 export const useAriaLiveAnnouncer_unstable: (props: AriaLiveAnnouncerProps) => AriaLiveAnnouncerState;

packages/react-components/react-aria/library/src/button/types.ts

@@ -1,4 +1,11 @@
-import type { ExtractSlotProps, Slot, UnionToIntersection } from '@fluentui/react-utilities';
+import type {
+  DistributiveOmit,
+  DistributivePick,
+  ExtractSlotProps,
+  HTMLDataAttributes,
+  Slot,
+  UnionToIntersection,
+} from '@fluentui/react-utilities';
 import * as React from 'react';
 
 export type ARIAButtonType = 'button' | 'a' | 'div';
@@ -18,8 +25,9 @@ export type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a'
 /**
  * Props expected by `useARIAButtonProps` hooks
  */
-export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React.PropsWithRef<
-  JSX.IntrinsicElements[Type]
+export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<
+  React.PropsWithRef<JSX.IntrinsicElements[Type]>,
+  'children'
 > & {
   disabled?: boolean;
   /**
@@ -36,7 +44,7 @@ export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = Reac
 export type ARIAButtonSlotProps<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = ExtractSlotProps<
   Slot<'button', AlternateAs>
 > &
-  Pick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;
+  DistributivePick<ARIAButtonProps<ARIAButtonType>, 'disabled' | 'disabledFocusable'>;
 
 /**
  * Props that will be modified internally by `useARIAButtonProps` by each case.
@@ -63,4 +71,5 @@ export type ARIAButtonAlteredProps<Type extends ARIAButtonType> =
  * Merge of props provided by the user and props provided internally.
  */
 export type ARIAButtonResultProps<Type extends ARIAButtonType, Props> = Props &
-  UnionToIntersection<ARIAButtonAlteredProps<Type>>;
+  UnionToIntersection<ARIAButtonAlteredProps<Type>> &
+  HTMLDataAttributes;

packages/react-components/react-aria/library/src/button/useARIAButtonShorthand.ts

@@ -1,7 +1,7 @@
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { useARIAButtonProps } from './useARIAButtonProps';
 import type { ResolveShorthandFunction } from '@fluentui/react-utilities';
-import type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './types';
+import type { ARIAButtonProps, ARIAButtonType } from './types';
 
 /**
  * @internal
@@ -14,10 +14,14 @@ import type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './typ
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
  * where no attribute addition is required.
  */
-// eslint-disable-next-line deprecation/deprecation
-export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (value, options) => {
+// eslint-disable-next-line deprecation/deprecation, @typescript-eslint/no-explicit-any
+export const useARIAButtonShorthand: ResolveShorthandFunction<any> = ((value, options) => {
   // eslint-disable-next-line deprecation/deprecation
   const shorthand = resolveShorthand(value, options);
-  const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);
+  const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(
+    shorthand?.as ?? 'button',
+    shorthand as ARIAButtonProps,
+  );
   return shorthand && shorthandARIAButton;
-};
+  // eslint-disable-next-line deprecation/deprecation, @typescript-eslint/no-explicit-any
+}) as ResolveShorthandFunction<any>;

packages/react-components/react-breadcrumb/library/etc/react-breadcrumb.api.md

@@ -11,6 +11,8 @@ import { ButtonSlots } from '@fluentui/react-button';
 import { ButtonState } from '@fluentui/react-button';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
+import type { DistributivePick } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -26,15 +28,15 @@ export const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps>;
 export const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots>;
 
 // @public
-export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'size'> & Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
+export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'size'> & DistributivePick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
     current?: boolean;
 };
 
 // @public (undocumented)
 export type BreadcrumbButtonSlots = ButtonSlots;
 
 // @public
-export type BreadcrumbButtonState = ComponentState<BreadcrumbButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'> & Required<Pick<BreadcrumbButtonProps, 'current' | 'size'>>;
+export type BreadcrumbButtonState = ComponentState<BreadcrumbButtonSlots> & DistributiveOmit<ButtonState, keyof ButtonSlots | 'components'> & Required<Pick<BreadcrumbButtonProps, 'current' | 'size'>>;
 
 // @public (undocumented)
 export const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots>;

packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.tsx

@@ -16,6 +16,7 @@ export const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps> = Reac
   useCustomStyleHook_unstable('useBreadcrumbButtonStyles_unstable')(state);
 
   return renderBreadcrumbButton_unstable(state);
-});
+  // Casting is required due to lack of distributive union to support unions on @types/react
+}) as ForwardRefComponent<BreadcrumbButtonProps>;
 
 BreadcrumbButton.displayName = 'BreadcrumbButton';

packages/react-components/react-breadcrumb/library/src/components/BreadcrumbButton/BreadcrumbButton.types.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, DistributivePick } from '@fluentui/react-utilities';
 import { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';
 import { BreadcrumbProps } from '../Breadcrumb/Breadcrumb.types';
 
@@ -9,7 +9,7 @@ export type BreadcrumbButtonSlots = ButtonSlots;
  */
 export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> &
   Pick<BreadcrumbProps, 'size'> &
-  Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
+  DistributivePick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
     /**
      * Defines current sate of BreadcrumbButton.
      *
@@ -22,5 +22,5 @@ export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> &
  * State used in rendering BreadcrumbButton
  */
 export type BreadcrumbButtonState = ComponentState<BreadcrumbButtonSlots> &
-  Omit<ButtonState, keyof ButtonSlots | 'components'> &
+  DistributiveOmit<ButtonState, keyof ButtonSlots | 'components'> &
   Required<Pick<BreadcrumbButtonProps, 'current' | 'size'>>;