chore(react-utilities): Deletes descendants API (#19189)

* Simplifies descendants API

* Updates accordion descendants

* Change files

* Update API

* Update packages/react-accordion/src/components/Accordion/Accordion.types.ts

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* Update packages/react-utilities/src/descendants/descendants.ts

Co-authored-by: ling1726 <lingfangao@hotmail.com>

* Updates forceUpdate & comments

* Updates API

* Updates API

* Makes support for concurrent mode

* Updates API

* Updates API

* Deletes descendants API

* Updates vr-tests

* Update packages/react-utilities/src/hooks/useForceUpdate.ts

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Updates Spec

* Updates API

Co-authored-by: ling1726 <lingfangao@hotmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Author: 3 people

apps/vr-tests/src/stories/Accordion.stories.tsx

@@ -29,12 +29,12 @@ storiesOf('Accordion', module)
   ))
   .addDecorator(FluentProviderDecorator)
   .addStory('visibility+focus', () => (
-    <Accordion index={[0]}>
-      <AccordionItem>
+    <Accordion openItems={[0]}>
+      <AccordionItem value={0}>
         <AccordionHeader button={{ id: 'opened-btn' }}>Opened</AccordionHeader>
         <AccordionPanel>Opened Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={1}>
         <AccordionHeader button={{ id: 'closed-btn' }}>Closed</AccordionHeader>
         <AccordionPanel>Closed Panel</AccordionPanel>
       </AccordionItem>
@@ -51,52 +51,52 @@ storiesOf('Accordion', module)
   ))
   .addDecorator(FluentProviderDecorator)
   .addStory('size', () => (
-    <Accordion index={[0, 1, 2, 3]}>
-      <AccordionItem>
+    <Accordion openItems={[0, 1, 2, 3]}>
+      <AccordionItem value={0}>
         <AccordionHeader size="small">Small</AccordionHeader>
         <AccordionPanel>Small Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={1}>
         <AccordionHeader size="medium">Medium</AccordionHeader>
         <AccordionPanel>Medium Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={2}>
         <AccordionHeader size="large">Large</AccordionHeader>
         <AccordionPanel>Large Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={3}>
         <AccordionHeader size="extra-large">Extra Large</AccordionHeader>
         <AccordionPanel>Extra Large Panel</AccordionPanel>
       </AccordionItem>
     </Accordion>
   ))
   .addStory('expandIconPosition="end"', () => (
-    <Accordion index={[0]}>
-      <AccordionItem>
+    <Accordion openItems={[0]}>
+      <AccordionItem value={0}>
         <AccordionHeader expandIconPosition="end">Opened</AccordionHeader>
         <AccordionPanel>Visible Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={1}>
         <AccordionHeader expandIconPosition="end">Closed</AccordionHeader>
         <AccordionPanel>Hidden Panel</AccordionPanel>
       </AccordionItem>
     </Accordion>
   ))
   .addStory('expandIcon="<Icon/>"', () => (
-    <Accordion index={[]}>
-      <AccordionItem>
+    <Accordion openItems={[]}>
+      <AccordionItem value={0}>
         <AccordionHeader expandIcon={<CircleRingIcon />} expandIconPosition="start">
           Expand Icon Start
         </AccordionHeader>
         <AccordionPanel>Expand Icon Start Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={1}>
         <AccordionHeader expandIcon={<CircleRingIcon />} expandIconPosition="end">
           Expand Icon End
         </AccordionHeader>
         <AccordionPanel>Expand Icon End Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={2}>
         <AccordionHeader inline expandIcon={<CircleRingIcon />} expandIconPosition="end">
           Expand Icon Inline End
         </AccordionHeader>
@@ -105,20 +105,20 @@ storiesOf('Accordion', module)
     </Accordion>
   ))
   .addStory('icon="<Icon/>"', () => (
-    <Accordion index={[]}>
-      <AccordionItem>
+    <Accordion openItems={[]}>
+      <AccordionItem value={0}>
         <AccordionHeader icon={<CircleRingIcon />} expandIconPosition="start">
           Icon Start
         </AccordionHeader>
         <AccordionPanel>Icon Start Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={1}>
         <AccordionHeader icon={<CircleRingIcon />} expandIconPosition="end">
           Icon End
         </AccordionHeader>
         <AccordionPanel>Icon End Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem>
+      <AccordionItem value={2}>
         <AccordionHeader inline icon={<CircleRingIcon />} expandIconPosition="end">
           Icon Inline End
         </AccordionHeader>
@@ -127,16 +127,16 @@ storiesOf('Accordion', module)
     </Accordion>
   ))
   .addStory('disabled', () => (
-    <Accordion index={[]}>
-      <AccordionItem disabled>
+    <Accordion openItems={[]}>
+      <AccordionItem value={0} disabled>
         <AccordionHeader>Disabled Item Opened</AccordionHeader>
         <AccordionPanel>Disabled Item Opened Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem disabled>
+      <AccordionItem value={1} disabled>
         <AccordionHeader>Disabled Item Closed</AccordionHeader>
         <AccordionPanel>Disabled Item Closed Panel</AccordionPanel>
       </AccordionItem>
-      <AccordionItem disabled>
+      <AccordionItem value={2} disabled>
         <AccordionHeader inline>Disabled Item ClosedInline</AccordionHeader>
         <AccordionPanel>Disabled Item ClosedInline Panel</AccordionPanel>
       </AccordionItem>

change/@fluentui-react-accordion-ef22903c-8c24-44bd-b8d6-9a874e061ca8.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Removes descendants API in favor of explicit values",
+  "packageName": "@fluentui/react-accordion",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-9a625369-2f3e-49a4-a5c8-891e4bb648cd.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Deletes descendants API",
+  "packageName": "@fluentui/react-utilities",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-accordion/Spec.md

@@ -48,14 +48,14 @@ export interface AccordionProps extends ComponentProps, React.HTMLAttributes<HTM
    */
   collapsible?: boolean;
   /**
-   * Index indicating the panels that are opened
+   * value indicating the items that are opened
    * If used, the component will be in controlled mode
    */
-  index?: number | number[];
+  openItems?: AccordionItemValue | AccordionItemValue[];
   /**
    * Index indicating the panels that are opened
    */
-  defaultIndex?: number | number[];
+  defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
   /**
    * Size of spacing in the heading
    */
@@ -80,7 +80,7 @@ export interface AccordionProps extends ComponentProps, React.HTMLAttributes<HTM
    * Indicates if the AccordionHeader should be inline-block
    */
   inline?: boolean;
-  onToggle?(index: number): void;
+  onToggle?(event: AccordionToggleEvent, data: AccordionToggleData): void;
 }
 ```
 
@@ -94,6 +94,10 @@ export interface AccordionItemProps extends ComponentProps, React.HTMLAttributes
    * Disables opening/closing of panel inside the item
    */
   disabled?: boolean;
+  /**
+   * required value that identifies this item inside an Accordion component
+   */
+  value: AccordionItemValue;
 }
 ```
 

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

@@ -8,8 +8,6 @@ import { ARIAButtonProps } from '@fluentui/react-aria';
 import { ComponentProps } from '@fluentui/react-utilities';
 import { ComponentState } from '@fluentui/react-utilities';
 import { Context } from '@fluentui/react-context-selector';
-import { Descendant } from '@fluentui/react-utilities';
-import { DescendantContextValue } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 
 // @public
@@ -29,18 +27,10 @@ export const AccordionContext: Context<AccordionContextValue>;
 export interface AccordionContextValue {
     // (undocumented)
     navigable: boolean;
-    openItems: number[];
+    openItems: AccordionItemValue[];
     requestToggle: AccordionToggleEventHandler;
 }
 
-// @public (undocumented)
-export interface AccordionDescendant<ElementType = HTMLElement> extends Descendant<ElementType> {
-    disabled: boolean;
-}
-
-// @public (undocumented)
-export const AccordionDescendantContext: React_2.Context<DescendantContextValue<AccordionDescendant<HTMLElement>>>;
-
 // @public
 export const AccordionHeader: React_2.FunctionComponent<AccordionHeaderProps & React_2.RefAttributes<HTMLElement>>;
 
@@ -95,9 +85,6 @@ export interface AccordionHeaderState extends ComponentState<AccordionHeaderSlot
     ref: React_2.Ref<HTMLElement>;
 }
 
-// @public (undocumented)
-export type AccordionIndex = number | number[];
-
 // @public
 export const AccordionItem: React_2.ForwardRefExoticComponent<AccordionItemProps & React_2.RefAttributes<HTMLElement>>;
 
@@ -119,17 +106,9 @@ export interface AccordionItemContextValue {
     open: boolean;
 }
 
-// @public (undocumented)
-export interface AccordionItemDescendant<ElementType = HTMLElement> extends Descendant<ElementType> {
-    // (undocumented)
-    id: string;
-}
-
-// @public (undocumented)
-export const accordionItemDescendantContext: React_2.Context<DescendantContextValue<AccordionItemDescendant<HTMLElement>>>;
-
 // @public (undocumented)
 export interface AccordionItemProps extends ComponentProps<AccordionItemSlots>, Partial<AccordionItemCommons> {
+    value: AccordionItemValue;
 }
 
 // @public
@@ -140,11 +119,12 @@ export type AccordionItemSlots = {};
 
 // @public (undocumented)
 export interface AccordionItemState extends ComponentState<AccordionItemSlots>, AccordionItemCommons, AccordionItemContextValue {
-    descendants: AccordionItemDescendant[];
     ref: React_2.Ref<HTMLElement>;
-    setDescendants: React_2.Dispatch<React_2.SetStateAction<AccordionItemDescendant[]>>;
 }
 
+// @public (undocumented)
+export type AccordionItemValue = unknown;
+
 // @public
 export const AccordionPanel: React_2.ForwardRefExoticComponent<AccordionPanelProps & React_2.RefAttributes<HTMLElement>>;
 
@@ -166,26 +146,24 @@ export interface AccordionPanelState extends ComponentState<AccordionPanelSlots>
 
 // @public (undocumented)
 export interface AccordionProps extends ComponentProps<AccordionSlots>, Partial<AccordionCommons> {
-    defaultIndex?: AccordionIndex;
-    index?: AccordionIndex;
+    defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
     // (undocumented)
     onToggle?: AccordionToggleEventHandler;
+    openItems?: AccordionItemValue | AccordionItemValue[];
 }
 
 // @public (undocumented)
 export type AccordionSlots = {};
 
 // @public (undocumented)
 export interface AccordionState extends ComponentState<AccordionSlots>, AccordionCommons, AccordionContextValue {
-    descendants: AccordionDescendant[];
     ref: React_2.Ref<HTMLElement>;
-    setDescendants: React_2.Dispatch<React_2.SetStateAction<AccordionDescendant[]>>;
 }
 
 // @public (undocumented)
 export interface AccordionToggleData {
     // (undocumented)
-    index: number;
+    value: AccordionItemValue;
 }
 
 // @public (undocumented)
@@ -194,9 +172,6 @@ export type AccordionToggleEvent<E = HTMLElement> = React_2.MouseEvent<E> | Reac
 // @public (undocumented)
 export type AccordionToggleEventHandler = (event: AccordionToggleEvent, data: AccordionToggleData) => void;
 
-// @public (undocumented)
-export function createAccordionContextValue({ navigable, openItems, requestToggle, }: AccordionState): AccordionContextValue;
-
 // @public
 export const renderAccordion: (state: AccordionState) => JSX.Element;
 
@@ -210,10 +185,14 @@ export const renderAccordionItem: (state: AccordionItemState) => JSX.Element;
 export const renderAccordionPanel: (state: AccordionPanelState) => JSX.Element | null;
 
 // @public (undocumented)
-export const useAccordion: ({ index, defaultIndex, multiple, collapsible, onToggle, navigable, ...rest }: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
+export const useAccordion: ({ openItems: controlledOpenItems, defaultOpenItems, multiple, collapsible, onToggle, navigable, ...rest }: AccordionProps, ref: React_2.Ref<HTMLElement>) => AccordionState;
 
-// @public
-export function useAccordionDescendant(accordionDescendant: Omit<AccordionDescendant, 'index'>): number;
+// @public (undocumented)
+export function useAccordionContextValue({ navigable, openItems, requestToggle }: AccordionState): {
+    readonly navigable: boolean;
+    readonly openItems: unknown[];
+    readonly requestToggle: AccordionToggleEventHandler;
+};
 
 // @public
 export const useAccordionHeader: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
@@ -222,24 +201,20 @@ export const useAccordionHeader: (props: AccordionHeaderProps, ref: React_2.Ref<
 export const useAccordionHeaderStyles: (state: AccordionHeaderState) => AccordionHeaderState;
 
 // @public
-export const useAccordionItem: (props: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
+export const useAccordionItem: ({ value, ...props }: AccordionItemProps, ref: React_2.Ref<HTMLElement>) => AccordionItemState;
 
 // @public (undocumented)
 export const useAccordionItemContext: () => AccordionItemContextValue;
 
 // @public (undocumented)
 export const useAccordionItemContextValue: ({ disabled, onHeaderClick, open }: AccordionItemState) => AccordionItemContextValue;
 
-// @public
-export function useAccordionItemDescendant(accordionDescendant: Omit<AccordionItemDescendant, 'index'>, index?: number): number;
-
 // @public
 export const useAccordionPanel: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
 
 // @public
 export const useAccordionPanelStyles: (state: AccordionPanelState) => AccordionPanelState;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```