Move descendants to react-utilities

This PR moves the descendants utility from `react-accordion` to `react-utilities` and adds inline polyfills because of type leakage in component packages from `react-conformance` (see microsoft#17101)
ling1726 · Mar 23, 2021 · 068ed04 · 068ed04
1 parent 79a96df
commit 068ed04
Show file tree

Hide file tree

Showing 11 changed files with 550 additions and 9 deletions.
diff --git a/packages/react-accordion/etc/react-accordion.api.md b/packages/react-accordion/etc/react-accordion.api.md
@@ -5,6 +5,7 @@
 ```ts
 
 import { ComponentProps } from '@fluentui/react-utilities';
+import { Descendant } from '@fluentui/react-utilities';
 import { ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { ShorthandProps } from '@fluentui/react-utilities';
@@ -20,8 +21,6 @@ export interface AccordionContext extends AccordionHeaderCommonProps {
     requestToggle: NonNullable<AccordionProps['onToggle']>;
 }
 
-// Warning: (ae-forgotten-export) The symbol "Descendant" needs to be exported by the entry point index.d.ts
-//
 // @public (undocumented)
 export interface AccordionDescendant<ElementType = HTMLElement> extends Descendant<ElementType> {
     disabled: boolean;

diff --git a/packages/react-accordion/src/components/Accordion/Accordion.test.tsx b/packages/react-accordion/src/components/Accordion/Accordion.test.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Accordion } from './Accordion';
 import * as renderer from 'react-test-renderer';
+import { DescendantProvider } from '@fluentui/react-utilities';
 import { ReactWrapper } from 'enzyme';
 import { isConformant } from '../../common/isConformant';
 import { accordionContext, accordionDescendantContext } from './useAccordionContext';
-import { DescendantProvider } from '../../utils/descendants';
 
 describe('Accordion', () => {
   isConformant({

diff --git a/packages/react-accordion/src/components/Accordion/Accordion.types.ts b/packages/react-accordion/src/components/Accordion/Accordion.types.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ComponentProps } from '@fluentui/react-utilities';
-import { Descendant } from '../../utils/descendants';
+import { ComponentProps, Descendant } from '@fluentui/react-utilities';
 import { AccordionHeaderProps } from '../AccordionHeader/AccordionHeader.types';
 
 export type AccordionIndex = number | number[];

diff --git a/packages/react-accordion/src/components/Accordion/renderAccordion.tsx b/packages/react-accordion/src/components/Accordion/renderAccordion.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+import { getSlots, DescendantProvider } from '@fluentui/react-utilities';
 import { AccordionState } from './Accordion.types';
 import { accordionShorthandProps } from './useAccordion';
-import { DescendantProvider } from '../../utils/descendants';
 import { accordionContext, accordionDescendantContext } from './useAccordionContext';
 
 /**

diff --git a/packages/react-accordion/src/components/Accordion/useAccordionContext.ts b/packages/react-accordion/src/components/Accordion/useAccordionContext.ts
@@ -1,7 +1,12 @@
 import * as React from 'react';
-import { createDescendantContext, useDescendant, useDescendantsInit } from '../../utils/descendants';
+import {
+  createDescendantContext,
+  useDescendant,
+  useDescendantsInit,
+  useControllableValue,
+  useEventCallback,
+} from '@fluentui/react-utilities';
 import { AccordionContext, AccordionDescendant, AccordionIndex, AccordionState } from './Accordion.types';
-import { useControllableValue, useEventCallback } from '@fluentui/react-utilities';
 import { createContext } from '@fluentui/react-context-selector';
 
 export const accordionDescendantContext = createDescendantContext<AccordionDescendant>('AccordionDescendantContext');

diff --git a/packages/react-utilities/etc/react-utilities.api.md b/packages/react-utilities/etc/react-utilities.api.md
@@ -49,6 +49,36 @@ export interface ComponentProps {
     className?: string;
 }
 
+// @public (undocumented)
+export function createDescendantContext<DescendantType extends Descendant>(name: string, initialValue?: {}): React.Context<DescendantContextValue<DescendantType>>;
+
+// @public (undocumented)
+export function createNamedContext<ContextValueType>(name: string, defaultValue: ContextValueType): React.Context<ContextValueType>;
+
+// @public (undocumented)
+export type Descendant<ElementType = HTMLElement> = {
+    element: SomeElement<ElementType> | null;
+    index: number;
+};
+
+// @public (undocumented)
+export interface DescendantContextValue<DescendantType extends Descendant> {
+    // (undocumented)
+    descendants: DescendantType[];
+    // (undocumented)
+    registerDescendant(descendant: DescendantType): void;
+    // (undocumented)
+    unregisterDescendant(element: DescendantType['element']): void;
+}
+
+// @public (undocumented)
+export const DescendantProvider: <DescendantType extends Descendant<HTMLElement>>({ context: Ctx, children, items, set, }: {
+    context: React.Context<DescendantContextValue<DescendantType>>;
+    children: React.ReactNode;
+    items: DescendantType[];
+    set: React.Dispatch<React.SetStateAction<DescendantType[]>>;
+}) => JSX.Element;
+
 // @public
 export const divProperties: Record<string, number>;
 
@@ -176,12 +206,35 @@ export function useControllableValue<TValue, TElement extends HTMLElement>(contr
 // @public (undocumented)
 export function useControllableValue<TValue, TElement extends HTMLElement, TEvent extends React.SyntheticEvent<TElement> | undefined>(controlledValue: TValue, defaultUncontrolledValue: DefaultValue<TValue>, onChange: ChangeCallback<TElement, TValue, TEvent>): Readonly<[TValue, (update: React.SetStateAction<TValue>, ev?: React.FormEvent<TElement>) => void]>;
 
+// @public
+export function useDescendant<DescendantType extends Descendant>(descendant: Omit<DescendantType, 'index'>, context: React.Context<DescendantContextValue<DescendantType>>, indexProp?: number): number;
+
+// @public
+export function useDescendantKeyDown<DescendantType extends Descendant, K extends keyof DescendantType = keyof DescendantType>(context: React.Context<DescendantContextValue<DescendantType>>, options: {
+    currentIndex: number | null | undefined;
+    key?: K | 'option';
+    filter?: (descendant: DescendantType) => boolean;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    rotate?: boolean;
+    rtl?: boolean;
+    callback(nextOption: DescendantType | DescendantType[K]): void;
+}): (event: React.KeyboardEvent<Element>) => void;
+
+// @public (undocumented)
+export function useDescendants<DescendantType extends Descendant>(ctx: React.Context<DescendantContextValue<DescendantType>>): DescendantType[];
+
+// @public (undocumented)
+export function useDescendantsInit<DescendantType extends Descendant>(): [DescendantType[], React.Dispatch<React.SetStateAction<DescendantType[]>>];
+
 // @public
 export const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;
 
 // @public
 export function useFirstMount(): boolean;
 
+// @public
+export function useForceUpdate(): () => void;
+
 // @public
 export function useId(prefix?: string, providedId?: string): string;
 
@@ -201,10 +254,17 @@ export type UseOnClickOutsideOptions = {
     callback: (ev: MouseEvent | TouchEvent) => void;
 };
 
+// @public (undocumented)
+export function usePrevious<ValueType = unknown>(value: ValueType): ValueType | null;
+
 // @public
 export const videoProperties: Record<string, number>;
 
 
+// Warnings were encountered during analysis:
+//
+// lib/descendants/descendants.d.ts:64:5 - (ae-forgotten-export) The symbol "SomeElement" needs to be exported by the entry point index.d.ts
+
 // (No @packageDocumentation comment for this package)
 
 ```