chore: remove withSafeTypeForAs

change/@fluentui-react-compose-2020-06-29-21-47-56-chore-no-with-safe-type-as.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Make __PRIVATE_PROPS optional to avoid assignment requirement",
+  "packageName": "@fluentui/react-compose",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-06-29T19:47:56.765Z"
+}

packages/fluentui/docs/src/components/ComponentDoc/ComponentDocSee.tsx

@@ -15,12 +15,13 @@ const ComponentDocSee: any = ({ displayName }) => {
   return (
     <List styles={listStyle}>
       {/* Heads up! Still render empty lists to reserve the whitespace */}
-      <List.Item>
+      <List.Item index={0}>
         <Header color="grey" content={items.length > 0 ? 'See:' : ' '} />
       </List.Item>
-      {_.map(items, info => (
+      {_.map(items, (info, index) => (
         <List.Item
           as={Link}
+          index={index + 1}
           content={info.displayName}
           key={info.docblock.description}
           to={getComponentPathname(info)}

packages/fluentui/docs/src/examples/components/Tree/Performance/TreeWith60ListItems.perf.tsx

@@ -1,4 +1,4 @@
-import { Tree, Avatar, List } from '@fluentui/react-northstar';
+import { Tree, Avatar, List, ShorthandRenderFunction, TreeTitleProps } from '@fluentui/react-northstar';
 import { AcceptIcon } from '@fluentui/react-icons-northstar';
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -25,6 +25,7 @@ const itemData = id =>
     id: `tree-perf-60-item-${id}${i}`,
     key: `key${id}${i}`,
     title: {
+      index: i,
       content: `${contents[i % contents.length]}`,
       media: <Avatar {...janeAvatar} />,
       headerMedia: `${headerMedias[i % headerMedias.length]}`,
@@ -53,13 +54,25 @@ const items = [
 
 // This renders titles depending on their level. The level one titles are rendered as default
 // TreeTitle with just text, while the level 2 titles are rendered as ListItems.
-const titleRenderer = (Component, { content, header, headerMedia, media, ...restProps }) => {
+const titleRenderer: ShorthandRenderFunction<TreeTitleProps & {
+  header?: React.ReactElement;
+  headerMedia?: React.ReactElement;
+  media?: React.ReactElement;
+  index?: number;
+}> = (Component, { content, header, headerMedia, media, index, ...restProps }) => {
   // as providing all props to List.Item was showing console errors, therefore reducing props
   const { treeSize, expanded, hasSubtree, selectableParent, selectionIndicator, ...restReducedProps } = restProps;
-  return !header ? (
-    <Component {...restProps}>{content}</Component>
+  return header ? (
+    <List.Item
+      {...restReducedProps}
+      content={content}
+      header={header}
+      headerMedia={headerMedia}
+      media={media}
+      index={index}
+    />
   ) : (
-    <List.Item {...restReducedProps} content={content} header={header} headerMedia={headerMedia} media={media} />
+    <Component {...restProps}>{content}</Component>
   );
 };
 

packages/fluentui/docs/src/prototypes/SearchPage/SearchPage.tsx

@@ -46,7 +46,7 @@ const dataRecordToListItem = record => ({
 // ----------------------------------------
 // Prototype Search Page View
 // ----------------------------------------
-class SearchPage extends React.Component<SearchPageState, any> {
+class SearchPage extends React.Component<any, SearchPageState> {
   state = { loading: false, query: '', results: [] };
   searchTimer: any;
 
@@ -81,7 +81,6 @@ class SearchPage extends React.Component<SearchPageState, any> {
 
         <p>
           <Input
-            ref="input"
             value={query}
             placeholder={`Try "${_.sample(DATA_RECORDS).firstName}"`}
             icon={loading ? <Loader size="small" /> : <SearchIcon />}

packages/fluentui/docs/src/prototypes/hexagonalAvatar/index.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Flex, StatusProps, WithAsProp, Extendable, Text } from '@fluentui/react-northstar';
+import { Flex, StatusProps, Extendable, Text } from '@fluentui/react-northstar';
 import CustomAvatar from './CustomAvatar';
 import { AcceptIcon } from '@fluentui/react-icons-northstar';
 
-const statusProps: Extendable<WithAsProp<StatusProps>> = {
+const statusProps: Extendable<StatusProps> = {
   icon: <AcceptIcon />,
   state: 'success',
   title: 'Available',

packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx

@@ -18,15 +18,14 @@ import AccordionContent, { AccordionContentProps } from './AccordionContent';
 
 import {
   ComponentEventHandler,
-  WithAsProp,
   ShorthandValue,
   ShorthandRenderFunction,
-  withSafeTypeForAs,
   FluentComponentStaticProps,
   ProviderContextPrepared,
 } from '../../types';
 import { ContainerFocusHandler } from '../../utils/accessibility/FocusHandling/FocusContainer';
 import {
+  ComponentWithAs,
   useAutoControlled,
   useAccessibility,
   useTelemetry,
@@ -105,7 +104,13 @@ export const accordionSlotClassNames: AccordionSlotClassNames = {
   title: `${accordionClassName}__title`,
 };
 
-const Accordion: React.FC<WithAsProp<AccordionProps>> &
+/**
+ * An Accordion represents stacked set of content sections, with action elements to toggle the display of these sections.
+ *
+ * @accessibility
+ * Implements [ARIA Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) design pattern (keyboard navigation not yet supported).
+ */
+const Accordion: ComponentWithAs<'dl', AccordionProps> &
   FluentComponentStaticProps<AccordionProps> & {
     Title: typeof AccordionTitle;
     Content: typeof AccordionContent;
@@ -352,10 +357,4 @@ Accordion.create = createShorthandFactory({
   Component: Accordion,
 });
 
-/**
- * An Accordion represents stacked set of content sections, with action elements to toggle the display of these sections.
- *
- * @accessibility
- * Implements [ARIA Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) design pattern (keyboard navigation not yet supported).
- */
-export default withSafeTypeForAs<typeof Accordion, AccordionProps>(Accordion);
+export default Accordion;

packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx

@@ -12,16 +12,17 @@ import {
   commonPropTypes,
   rtlTextContainer,
 } from '../../utils';
-import {
-  WithAsProp,
-  ComponentEventHandler,
-  withSafeTypeForAs,
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
-} from '../../types';
+import { ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared } from '../../types';
 // @ts-ignore
 import { ThemeContext } from 'react-fela';
-import { useTelemetry, getElementType, useAccessibility, useUnhandledProps, useStyles } from '@fluentui/react-bindings';
+import {
+  ComponentWithAs,
+  useTelemetry,
+  getElementType,
+  useAccessibility,
+  useUnhandledProps,
+  useStyles,
+} from '@fluentui/react-bindings';
 
 export interface AccordionContentProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps {
   /**
@@ -48,7 +49,10 @@ export const accordionContentClassName = 'ui-accordion__content';
 
 export type AccordionContentStylesProps = Required<Pick<AccordionContentProps, 'active'>>;
 
-const AccordionContent: React.FC<WithAsProp<AccordionContentProps>> &
+/**
+ * An AccordionContent displays content hosted in an Accordion.
+ */
+const AccordionContent: ComponentWithAs<'dd', AccordionContentProps> &
   FluentComponentStaticProps<AccordionContentProps> = props => {
   const context: ProviderContextPrepared = React.useContext(ThemeContext);
   const { setStart, setEnd } = useTelemetry(AccordionContent.displayName, context.telemetry);
@@ -126,7 +130,4 @@ AccordionContent.create = createShorthandFactory({
   mappedProp: 'content',
 });
 
-/**
- * An AccordionContent displays content hosted in an Accordion.
- */
-export default withSafeTypeForAs<typeof AccordionContent, AccordionContentProps>(AccordionContent);
+export default AccordionContent;

packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx

@@ -15,15 +15,20 @@ import {
   rtlTextContainer,
 } from '../../utils';
 import {
-  WithAsProp,
   ComponentEventHandler,
   ShorthandValue,
-  withSafeTypeForAs,
   FluentComponentStaticProps,
   ProviderContextPrepared,
 } from '../../types';
 import Box, { BoxProps } from '../Box/Box';
-import { getElementType, useTelemetry, useUnhandledProps, useAccessibility, useStyles } from '@fluentui/react-bindings';
+import {
+  ComponentWithAs,
+  getElementType,
+  useTelemetry,
+  useUnhandledProps,
+  useAccessibility,
+  useStyles,
+} from '@fluentui/react-bindings';
 // @ts-ignore
 import { ThemeContext } from 'react-fela';
 
@@ -89,7 +94,10 @@ export type AccordionTitleStylesProps = Required<Pick<AccordionTitleProps, 'disa
   content: boolean;
 };
 
-const AccordionTitle: React.FC<WithAsProp<AccordionTitleProps>> &
+/**
+ * An AccordionTitle represents the title of Accordion's item that can be interacted with to expand or collapse the item's content.
+ */
+const AccordionTitle: ComponentWithAs<'dt', AccordionTitleProps> &
   FluentComponentStaticProps<AccordionTitleProps> = props => {
   const context: ProviderContextPrepared = React.useContext(ThemeContext);
   const { setStart, setEnd } = useTelemetry(AccordionTitle.displayName, context.telemetry);
@@ -126,7 +134,7 @@ const AccordionTitle: React.FC<WithAsProp<AccordionTitleProps>> &
     mapPropsToBehavior: () => ({
       hasContent: !!content,
       canBeCollapsed,
-      as,
+      as: String(as),
       active,
       disabled,
       accordionContentId,
@@ -248,7 +256,4 @@ AccordionTitle.defaultProps = {
 
 AccordionTitle.create = createShorthandFactory({ Component: AccordionTitle, mappedProp: 'content' });
 
-/**
- * An AccordionTitle represents the title of Accordion's item that can be interacted with to expand or collapse the item's content.
- */
-export default withSafeTypeForAs<typeof AccordionTitle, AccordionTitleProps>(AccordionTitle);
+export default AccordionTitle;

packages/fluentui/react-northstar/src/components/Alert/Alert.tsx

@@ -14,9 +14,7 @@ import {
 } from '../../utils';
 import {
   ComponentEventHandler,
-  WithAsProp,
   ShorthandValue,
-  withSafeTypeForAs,
   ShorthandCollection,
   FluentComponentStaticProps,
   ProviderContextPrepared,
@@ -28,6 +26,7 @@ import Text, { TextProps } from '../Text/Text';
 import ButtonGroup, { ButtonGroupProps } from '../Button/ButtonGroup';
 import AlertDismissAction, { AlertDismissActionProps } from './AlertDismissAction';
 import {
+  ComponentWithAs,
   useAccessibility,
   getElementType,
   useStyles,
@@ -124,7 +123,13 @@ export const alertSlotClassNames: AlertSlotClassNames = {
   body: `${alertClassName}__body`,
 };
 
-const Alert: React.FC<WithAsProp<AlertProps>> &
+/**
+ * An Alert displays a brief, important message to attract a user's attention without interrupting their current task.
+ *
+ * @accessibility
+ * Implements [ARIA Alert](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) design pattern.
+ */
+const Alert: ComponentWithAs<'div', AlertProps> &
   FluentComponentStaticProps<AlertProps> & {
     DismissAction: typeof AlertDismissAction;
   } = props => {
@@ -322,10 +327,5 @@ Alert.create = createShorthandFactory({
 });
 
 Alert.DismissAction = AlertDismissAction;
-/**
- * An Alert displays a brief, important message to attract a user's attention without interrupting their current task.
- *
- * @accessibility
- * Implements [ARIA Alert](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) design pattern.
- */
-export default withSafeTypeForAs<typeof Alert, AlertProps>(Alert);
+
+export default Alert;

packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx

@@ -15,13 +15,18 @@ import {
 
 import {
   ComponentEventHandler,
-  WithAsProp,
-  withSafeTypeForAs,
   FluentComponentStaticProps,
   ProviderContextPrepared,
   ShorthandValue,
 } from '../../types';
-import { getElementType, useAccessibility, useStyles, useTelemetry, useUnhandledProps } from '@fluentui/react-bindings';
+import {
+  ComponentWithAs,
+  getElementType,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+  useUnhandledProps,
+} from '@fluentui/react-bindings';
 import Box, { BoxProps } from '../Box/Box';
 // @ts-ignore
 import { ThemeContext } from 'react-fela';
@@ -72,7 +77,13 @@ export const alertDismissActionSlotClassNames: AlertDismissActionSlotClassNames
   content: `${alertDismissActionClassName}__content`,
 };
 
-const AlertDismissAction: React.FC<WithAsProp<AlertDismissActionProps>> &
+/**
+ * A AlertDismissAction allows users to customize the dismissAction slot  inside the Alert component.
+ *
+ * @accessibility
+ * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern.
+ */
+const AlertDismissAction: ComponentWithAs<'button', AlertDismissActionProps> &
   FluentComponentStaticProps<AlertDismissActionProps> = props => {
   const context: ProviderContextPrepared = React.useContext(ThemeContext);
   const { setStart, setEnd } = useTelemetry(AlertDismissAction.displayName, context.telemetry);
@@ -100,7 +111,7 @@ const AlertDismissAction: React.FC<WithAsProp<AlertDismissActionProps>> &
   const getA11Props = useAccessibility(accessibility, {
     debugName: AlertDismissAction.displayName,
     mapPropsToBehavior: () => ({
-      as,
+      as: String(as),
       disabled,
     }),
     actionHandlers: {
@@ -193,10 +204,4 @@ AlertDismissAction.handledProps = Object.keys(AlertDismissAction.propTypes) as a
 
 AlertDismissAction.create = createShorthandFactory({ Component: AlertDismissAction, mappedProp: 'content' });
 
-/**
- * A AlertDismissAction allows users to customize the dismissAction slot  inside the Alert component.
- *
- * @accessibility
- * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern.
- */
-export default withSafeTypeForAs<typeof AlertDismissAction, AlertDismissActionProps, 'button'>(AlertDismissAction);
+export default AlertDismissAction;

packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,12 @@
 import { Accessibility } from '@fluentui/accessibility';
-import { getElementType, useUnhandledProps, useAccessibility, useStyles, useTelemetry } from '@fluentui/react-bindings';
+import {
+  ComponentWithAs,
+  getElementType,
+  useUnhandledProps,
+  useAccessibility,
+  useStyles,
+  useTelemetry,
+} from '@fluentui/react-bindings';
 import * as customPropTypes from '@fluentui/react-proptypes';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
@@ -10,13 +17,7 @@ import Box, { BoxProps } from '../Box/Box';
 import Image, { ImageProps } from '../Image/Image';
 import Label, { LabelProps } from '../Label/Label';
 import Status, { StatusProps } from '../Status/Status';
-import {
-  WithAsProp,
-  ShorthandValue,
-  withSafeTypeForAs,
-  FluentComponentStaticProps,
-  ProviderContextPrepared,
-} from '../../types';
+import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types';
 import { createShorthandFactory, UIComponentProps, commonPropTypes, SizeValue } from '../../utils';
 
 export interface AvatarProps extends UIComponentProps {
@@ -53,7 +54,10 @@ export interface AvatarProps extends UIComponentProps {
 export type AvatarStylesProps = Pick<AvatarProps, 'size' | 'square'>;
 export const avatarClassName = 'ui-avatar';
 
-const Avatar: React.FC<WithAsProp<AvatarProps>> & FluentComponentStaticProps<AvatarProps> = props => {
+/**
+ * An Avatar is a graphical representation of a user.
+ */
+const Avatar: ComponentWithAs<'div', AvatarProps> & FluentComponentStaticProps<AvatarProps> = props => {
   const context: ProviderContextPrepared = React.useContext(ThemeContext);
   const { setStart, setEnd } = useTelemetry(Avatar.displayName, context.telemetry);
   setStart();
@@ -187,7 +191,4 @@ Avatar.handledProps = Object.keys(Avatar.propTypes) as any;
 
 Avatar.create = createShorthandFactory({ Component: Avatar, mappedProp: 'name' });
 
-/**
- * An Avatar is a graphical representation of a user.
- */
-export default withSafeTypeForAs<typeof Avatar, AvatarProps>(Avatar);
+export default Avatar;