From 70c52af9baf195ad0b7fe694c029ca952aeef9e9 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 29 Jun 2020 12:59:38 +0200 Subject: [PATCH 1/2] chore: remove withSafeTypeAs --- ...9-21-47-56-chore-no-with-safe-type-as.json | 8 +++ .../ComponentDoc/ComponentDocSee.tsx | 5 +- .../Performance/TreeWith60ListItems.perf.tsx | 23 ++++-- .../src/prototypes/SearchPage/SearchPage.tsx | 3 +- .../src/prototypes/hexagonalAvatar/index.tsx | 4 +- .../src/components/Accordion/Accordion.tsx | 19 +++-- .../components/Accordion/AccordionContent.tsx | 27 +++---- .../components/Accordion/AccordionTitle.tsx | 23 +++--- .../src/components/Alert/Alert.tsx | 20 +++--- .../components/Alert/AlertDismissAction.tsx | 29 ++++---- .../src/components/Avatar/Avatar.tsx | 27 +++---- .../src/components/Button/ButtonGroup.tsx | 32 ++++----- .../src/components/Card/Card.tsx | 37 +++++----- .../src/components/Card/CardBody.tsx | 21 ++++-- .../src/components/Card/CardColumn.tsx | 21 ++++-- .../src/components/Card/CardFooter.tsx | 21 ++++-- .../src/components/Card/CardHeader.tsx | 21 ++++-- .../src/components/Card/CardPreview.tsx | 21 ++++-- .../src/components/Card/CardTopControls.tsx | 21 ++++-- .../src/components/Carousel/Carousel.tsx | 23 +++--- .../src/components/Carousel/CarouselItem.tsx | 28 +++++--- .../Carousel/CarouselNavigation.tsx | 13 ++-- .../Carousel/CarouselNavigationItem.tsx | 23 +++--- .../components/Carousel/CarouselPaddle.tsx | 29 ++++---- .../src/components/Chat/Chat.tsx | 27 +++---- .../src/components/Chat/ChatItem.tsx | 27 +++---- .../src/components/Chat/ChatMessage.tsx | 21 +++--- .../src/components/Checkbox/Checkbox.tsx | 19 +++-- .../src/components/Dialog/Dialog.tsx | 31 ++++---- .../src/components/Dialog/DialogFooter.tsx | 22 ++++-- .../src/components/Divider/Divider.tsx | 21 ++++-- .../src/components/Dropdown/Dropdown.tsx | 22 +++--- .../src/components/Dropdown/DropdownItem.tsx | 16 ++--- .../Dropdown/DropdownSearchInput.tsx | 22 +++--- .../Dropdown/DropdownSelectedItem.tsx | 22 +++--- .../src/components/Embed/Embed.tsx | 21 +++--- .../src/components/Flex/Flex.tsx | 14 ++-- .../src/components/Form/Form.tsx | 21 +++--- .../src/components/Form/FormField.tsx | 28 ++++---- .../src/components/Grid/Grid.tsx | 15 ++-- .../src/components/Header/Header.tsx | 39 +++++----- .../components/Header/HeaderDescription.tsx | 21 ++++-- .../HierarchicalTree/HierarchicalTree.tsx | 19 +++-- .../HierarchicalTree/HierarchicalTreeItem.tsx | 20 +++--- .../HierarchicalTreeTitle.tsx | 25 +++---- .../src/components/Image/Image.tsx | 37 ++++++---- .../src/components/Input/Input.tsx | 18 ++--- .../src/components/ItemLayout/ItemLayout.tsx | 22 +++--- .../src/components/Label/Label.tsx | 27 +++---- .../src/components/Layout/Layout.tsx | 29 +++++--- .../src/components/List/List.tsx | 23 +++--- .../src/components/List/ListItem.tsx | 21 +++--- .../src/components/Loader/Loader.tsx | 22 ++---- .../src/components/MenuButton/MenuButton.tsx | 3 +- .../src/components/Popup/PopupContent.tsx | 20 +++--- .../src/components/Portal/Portal.tsx | 8 +-- .../src/components/Provider/Provider.tsx | 7 +- .../src/components/RadioGroup/RadioGroup.tsx | 19 +++-- .../components/RadioGroup/RadioGroupItem.tsx | 23 +++--- .../src/components/Reaction/Reaction.tsx | 29 ++++---- .../src/components/Reaction/ReactionGroup.tsx | 27 +++---- .../src/components/Segment/Segment.tsx | 27 +++---- .../src/components/Slider/Slider.tsx | 26 ++++--- .../components/SplitButton/SplitButton.tsx | 13 ++-- .../SplitButton/SplitButtonToggle.tsx | 34 ++++----- .../src/components/Status/Status.tsx | 33 ++++----- .../src/components/SvgIcon/SvgIcon.tsx | 14 ++-- .../src/components/Table/Table.tsx | 55 +++++++------- .../src/components/Table/TableCell.tsx | 27 +++---- .../src/components/Table/TableRow.tsx | 13 ++-- .../src/components/Text/Text.tsx | 21 ++++-- .../src/components/TextArea/TextArea.tsx | 33 ++++----- .../src/components/Tooltip/TooltipContent.tsx | 21 ++++-- .../src/components/Tree/Tree.tsx | 26 ++++--- .../src/components/Tree/TreeItem.tsx | 27 ++++--- .../src/components/Tree/TreeTitle.tsx | 22 +++--- .../src/components/Video/Video.tsx | 21 ++++-- .../fluentui/react-northstar/src/types.ts | 72 ------------------- .../specs/components/List/ListItem-test.tsx | 12 ++-- .../react-compose/etc/react-compose.api.md | 2 +- packages/react-compose/src/types.ts | 6 +- 81 files changed, 942 insertions(+), 870 deletions(-) create mode 100644 change/@fluentui-react-compose-2020-06-29-21-47-56-chore-no-with-safe-type-as.json diff --git a/change/@fluentui-react-compose-2020-06-29-21-47-56-chore-no-with-safe-type-as.json b/change/@fluentui-react-compose-2020-06-29-21-47-56-chore-no-with-safe-type-as.json new file mode 100644 index 00000000000000..66c4c8afd4425e --- /dev/null +++ b/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": "olfedias@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-06-29T19:47:56.765Z" +} diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentDocSee.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentDocSee.tsx index 2a8eeeb9ad11c5..b0b74969706996 100644 --- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentDocSee.tsx +++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentDocSee.tsx @@ -15,12 +15,13 @@ const ComponentDocSee: any = ({ displayName }) => { return ( {/* Heads up! Still render empty lists to reserve the whitespace */} - +
0 ? 'See:' : ' '} /> - {_.map(items, info => ( + {_.map(items, (info, index) => ( id: `tree-perf-60-item-${id}${i}`, key: `key${id}${i}`, title: { + index: i, content: `${contents[i % contents.length]}`, media: , 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 = (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 ? ( - {content} + return header ? ( + ) : ( - + {content} ); }; diff --git a/packages/fluentui/docs/src/prototypes/SearchPage/SearchPage.tsx b/packages/fluentui/docs/src/prototypes/SearchPage/SearchPage.tsx index 96d12788833fa6..e1630a89a072f3 100644 --- a/packages/fluentui/docs/src/prototypes/SearchPage/SearchPage.tsx +++ b/packages/fluentui/docs/src/prototypes/SearchPage/SearchPage.tsx @@ -46,7 +46,7 @@ const dataRecordToListItem = record => ({ // ---------------------------------------- // Prototype Search Page View // ---------------------------------------- -class SearchPage extends React.Component { +class SearchPage extends React.Component { state = { loading: false, query: '', results: [] }; searchTimer: any; @@ -81,7 +81,6 @@ class SearchPage extends React.Component {

: } diff --git a/packages/fluentui/docs/src/prototypes/hexagonalAvatar/index.tsx b/packages/fluentui/docs/src/prototypes/hexagonalAvatar/index.tsx index 9d03388a40a7cc..841d348d07cb3f 100644 --- a/packages/fluentui/docs/src/prototypes/hexagonalAvatar/index.tsx +++ b/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> = { +const statusProps: Extendable = { icon: , state: 'success', title: 'Available', diff --git a/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx b/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx index 7699ced2679955..1fd9c2db11ae85 100644 --- a/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx +++ b/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> & +/** + * 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 & { 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(Accordion); +export default Accordion; diff --git a/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx b/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx index 3345396c0c1860..0fc191efe21534 100644 --- a/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx +++ b/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>; -const AccordionContent: React.FC> & +/** + * An AccordionContent displays content hosted in an Accordion. + */ +const AccordionContent: ComponentWithAs<'dd', AccordionContentProps> & FluentComponentStaticProps = 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(AccordionContent); +export default AccordionContent; diff --git a/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx b/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx index afba0b84492954..6ca62214d25fb0 100644 --- a/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx +++ b/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> & +/** + * 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 = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(AccordionTitle.displayName, context.telemetry); @@ -126,7 +134,7 @@ const AccordionTitle: React.FC> & 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(AccordionTitle); +export default AccordionTitle; diff --git a/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx b/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx index a24929ab458fd9..74eec58ff35587 100644 --- a/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx +++ b/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> & +/** + * 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 & { 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(Alert); + +export default Alert; diff --git a/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx b/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx index 9f5c0f6e080ca0..227d3a78236820 100644 --- a/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx +++ b/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> & +/** + * 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 = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(AlertDismissAction.displayName, context.telemetry); @@ -100,7 +111,7 @@ const AlertDismissAction: React.FC> & 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(AlertDismissAction); +export default AlertDismissAction; diff --git a/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx b/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx index 79c82ac191ab3a..128eb9f26619a9 100644 --- a/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx +++ b/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; export const avatarClassName = 'ui-avatar'; -const Avatar: React.FC> & FluentComponentStaticProps = props => { +/** + * An Avatar is a graphical representation of a user. + */ +const Avatar: ComponentWithAs<'div', AvatarProps> & FluentComponentStaticProps = 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(Avatar); +export default Avatar; diff --git a/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx b/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx index f8cab7151d5ab0..693404b8d0ed81 100644 --- a/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx +++ b/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx @@ -4,13 +4,7 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; import * as _ from 'lodash'; -import { - WithAsProp, - withSafeTypeForAs, - ShorthandCollection, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandCollection, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { childrenExist, UIComponentProps, @@ -22,7 +16,14 @@ import { createShorthand, } from '../../utils'; import Button, { ButtonProps } from './Button'; -import { getElementType, useAccessibility, useUnhandledProps, useTelemetry, useStyles } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + getElementType, + useAccessibility, + useUnhandledProps, + useTelemetry, + useStyles, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -43,14 +44,17 @@ export type ButtonGroupStylesProps = Required export const buttonGroupClassName = 'ui-buttons'; -const ButtonGroup: React.FC> & FluentComponentStaticProps = props => { +/** + * A ButtonGroup represents multiple related actions as a group. + */ +const ButtonGroup: ComponentWithAs<'div', ButtonGroupProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(ButtonGroup.displayName, context.telemetry); setStart(); const { children, buttons, circular, content, className, design, styles, variables } = props; const ElementType = getElementType(props); const unhandledProps = useUnhandledProps(ButtonGroup.handledProps, props); - const { classes, styles: ResolvedStyles } = useStyles(ButtonGroup.displayName, { + const { classes, styles: resolvedStyles } = useStyles(ButtonGroup.displayName, { className: buttonGroupClassName, mapPropsToStyles: () => ({ circular, @@ -103,7 +107,7 @@ const ButtonGroup: React.FC> & FluentComponentStati createShorthand(Button, button, { defaultProps: () => ({ circular, - styles: getStyleForButtonIndex(ResolvedStyles, idx === 0, idx === buttons.length - 1), + styles: getStyleForButtonIndex(resolvedStyles, idx === 0, idx === buttons.length - 1), }), }), )} @@ -125,7 +129,6 @@ ButtonGroup.propTypes = { ButtonGroup.defaultProps = { accessibility: buttonGroupBehavior, - as: 'div', }; ButtonGroup.handledProps = Object.keys(ButtonGroup.propTypes) as any; @@ -136,7 +139,4 @@ ButtonGroup.create = createShorthandFactory({ mappedArrayProp: 'buttons', }); -/** - * A ButtonGroup represents multiple related actions as a group. - */ -export default withSafeTypeForAs(ButtonGroup); +export default ButtonGroup; diff --git a/packages/fluentui/react-northstar/src/components/Card/Card.tsx b/packages/fluentui/react-northstar/src/components/Card/Card.tsx index 252a71c36b49e0..a2f6bcd6233341 100644 --- a/packages/fluentui/react-northstar/src/components/Card/Card.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/Card.tsx @@ -1,5 +1,12 @@ import { Accessibility, cardBehavior, CardBehaviorProps } from '@fluentui/accessibility'; -import { getElementType, useAccessibility, useStyles, useTelemetry, useUnhandledProps } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + getElementType, + useAccessibility, + useStyles, + useTelemetry, + useUnhandledProps, +} from '@fluentui/react-bindings'; import { Ref } from '@fluentui/react-component-ref'; import * as CustomPropTypes from '@fluentui/react-proptypes'; import * as _ from 'lodash'; @@ -7,13 +14,7 @@ import * as PropTypes from 'prop-types'; import * as React from 'react'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { - ComponentEventHandler, - FluentComponentStaticProps, - ProviderContextPrepared, - WithAsProp, - withSafeTypeForAs, -} from '../../types'; +import { ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { commonPropTypes, createShorthandFactory, SizeValue, UIComponentProps } from '../../utils'; import CardBody from './CardBody'; import CardColumn from './CardColumn'; @@ -93,7 +94,15 @@ export type CardStylesProps = Pick< export const cardClassName = 'ui-card'; -const Card: React.FC> & +/** + * A Card is used to display data in sematically grouped way. + * * @accessibility + * By default adds `group` role ([more information available in aria documentation](https://www.w3.org/TR/wai-aria-1.1/#group)), thus it's necessary to provide `aria-roledescription` for correct widget description. [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription-property) + * When card is actionable (i.e. has `onClick` property), use [cardFocusableBehavior](/components/card/accessibility#card-focusable). [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_focus) + * When card contains actionable elements, use [cardChildrenFocusableBehavior](/components/card/accessibility#card-children-focusable). + * + */ +const Card: ComponentWithAs<'div', CardProps> & FluentComponentStaticProps & { Header: typeof CardHeader; Body: typeof CardBody; @@ -234,12 +243,4 @@ Card.ExpandableBox = CardExpandableBox; Card.create = createShorthandFactory({ Component: Card }); -/** - * A Card is used to display data in sematically grouped way. - * * @accessibility - * By default adds `group` role ([more information available in aria documentation](https://www.w3.org/TR/wai-aria-1.1/#group)), thus it's necessary to provide `aria-roledescription` for correct widget description. [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription-property) - * When card is actionable (i.e. has `onClick` property), use [cardFocusableBehavior](/components/card/accessibility#card-focusable). [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_focus) - * When card contains actionable elements, use [cardChildrenFocusableBehavior](/components/card/accessibility#card-children-focusable). - * - */ -export default withSafeTypeForAs(Card); +export default Card; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx b/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx index 499d50843cf700..639632b0a0eacd 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx @@ -1,8 +1,15 @@ import * as React from 'react'; -import { WithAsProp, withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { Accessibility } from '@fluentui/accessibility'; import { UIComponentProps, ChildrenComponentProps, commonPropTypes, createShorthandFactory } from '../../utils'; -import { useTelemetry, useStyles, getElementType, useUnhandledProps, useAccessibility } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + useTelemetry, + useStyles, + getElementType, + useUnhandledProps, + useAccessibility, +} from '@fluentui/react-bindings'; import * as PropTypes from 'prop-types'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -20,7 +27,10 @@ export interface CardBodyProps extends UIComponentProps, ChildrenComponentProps export type CardBodyStylesProps = Pick; export const cardBodyClassName = 'ui-card__body'; -const CardBody: React.FC> & FluentComponentStaticProps = props => { +/** + * A CardBody is used to display data in Card body. + */ +const CardBody: ComponentWithAs<'div', CardBodyProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CardBody.displayName, context.telemetry); setStart(); @@ -70,7 +80,4 @@ CardBody.handledProps = Object.keys(CardBody.propTypes) as any; CardBody.create = createShorthandFactory({ Component: CardBody }); -/** - * A CardBody is used to display data in Card body. - */ -export default withSafeTypeForAs(CardBody); +export default CardBody; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx b/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx index 1862d7ff86f019..f54eddb430690a 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx @@ -1,8 +1,15 @@ import * as React from 'react'; -import { WithAsProp, withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { Accessibility } from '@fluentui/accessibility'; import { UIComponentProps, ChildrenComponentProps, commonPropTypes, createShorthandFactory } from '../../utils'; -import { useTelemetry, useStyles, getElementType, useUnhandledProps, useAccessibility } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + useTelemetry, + useStyles, + getElementType, + useUnhandledProps, + useAccessibility, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -16,7 +23,10 @@ export interface CardColumnProps extends UIComponentProps, ChildrenComponentProp export type CardColumnStylesProps = never; export const cardColumnClassName = 'ui-card__column'; -const CardColumn: React.FC> & FluentComponentStaticProps = props => { +/** + * A CardColumn is used to display content in card as column + */ +const CardColumn: ComponentWithAs<'div', CardColumnProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CardColumn.displayName, context.telemetry); setStart(); @@ -64,7 +74,4 @@ CardColumn.handledProps = Object.keys(CardColumn.propTypes) as any; CardColumn.create = createShorthandFactory({ Component: CardColumn }); -/** - * A CardColumn is used to display content in card as column - */ -export default withSafeTypeForAs(CardColumn); +export default CardColumn; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx b/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx index da1628a7e29cec..998a097d053536 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx @@ -1,10 +1,17 @@ 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 PropTypes from 'prop-types'; import * as React from 'react'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { FluentComponentStaticProps, ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { ChildrenComponentProps, commonPropTypes, createShorthandFactory, UIComponentProps } from '../../utils'; export interface CardFooterProps extends UIComponentProps, ChildrenComponentProps { @@ -20,7 +27,10 @@ export interface CardFooterProps extends UIComponentProps, ChildrenComponentProp export type CardFooterStylesProps = Pick; export const cardFooterClassName = 'ui-card__footer'; -const CardFooter: React.FC> & FluentComponentStaticProps = props => { +/** + * A CardFooter is used to display data in Card component footer + */ +const CardFooter: ComponentWithAs<'div', CardFooterProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CardFooter.displayName, context.telemetry); setStart(); @@ -70,7 +80,4 @@ CardFooter.handledProps = Object.keys(CardFooter.propTypes) as any; CardFooter.create = createShorthandFactory({ Component: CardFooter }); -/** - * A CardFooter is used to display data in Card component footer - */ -export default withSafeTypeForAs(CardFooter); +export default CardFooter; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx b/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx index 9a51fd54b30889..d066021413748c 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx @@ -1,10 +1,17 @@ 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 PropTypes from 'prop-types'; import * as React from 'react'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { FluentComponentStaticProps, ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { ChildrenComponentProps, commonPropTypes, createShorthandFactory, UIComponentProps } from '../../utils'; export interface CardHeaderProps extends UIComponentProps, ChildrenComponentProps { @@ -20,7 +27,10 @@ export interface CardHeaderProps extends UIComponentProps, ChildrenComponentProp export type CardHeaderStylesProps = Pick; export const cardHeaderClassName = 'ui-card__header'; -const CardHeader: React.FC> & FluentComponentStaticProps = props => { +/** + * A CardHeader is used to display data in Card header. + */ +const CardHeader: ComponentWithAs<'div', CardHeaderProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CardHeader.displayName, context.telemetry); setStart(); @@ -70,7 +80,4 @@ CardHeader.handledProps = Object.keys(CardHeader.propTypes) as any; CardHeader.create = createShorthandFactory({ Component: CardHeader }); -/** - * A CardHeader is used to display data in Card header. - */ -export default withSafeTypeForAs(CardHeader); +export default CardHeader; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx b/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx index 78f1654fea3c63..3fe20758c4b404 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx @@ -1,10 +1,17 @@ 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 PropTypes from 'prop-types'; import * as React from 'react'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { FluentComponentStaticProps, ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { ChildrenComponentProps, commonPropTypes, createShorthandFactory, UIComponentProps } from '../../utils'; export interface CardPreviewProps extends UIComponentProps, ChildrenComponentProps { @@ -23,7 +30,10 @@ export interface CardPreviewProps extends UIComponentProps, ChildrenComponentPro export type CardPreviewStylesProps = Pick; export const cardPreviewClassName = 'ui-card__preview'; -const CardPreview: React.FC> & FluentComponentStaticProps = props => { +/** + * A CardPreview is used to display data Card preview. + */ +const CardPreview: ComponentWithAs<'div', CardPreviewProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CardPreview.displayName, context.telemetry); setStart(); @@ -74,7 +84,4 @@ CardPreview.handledProps = Object.keys(CardPreview.propTypes) as any; CardPreview.create = createShorthandFactory({ Component: CardPreview }); -/** - * A CardPreview is used to display data Card preview. - */ -export default withSafeTypeForAs(CardPreview); +export default CardPreview; diff --git a/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx b/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx index 45ef1b3b47c7de..d9138250bdf813 100644 --- a/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx +++ b/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx @@ -1,9 +1,16 @@ 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 React from 'react'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { FluentComponentStaticProps, ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { ChildrenComponentProps, commonPropTypes, createShorthandFactory, UIComponentProps } from '../../utils'; export interface CardTopControlsProps extends UIComponentProps, ChildrenComponentProps { @@ -16,7 +23,10 @@ export interface CardTopControlsProps extends UIComponentProps, ChildrenComponen export type CardTopControlsStylesProps = never; export const cardTopControlsClassName = 'ui-card__topcontrols'; -const CardTopControls: React.FC> & +/** + * A CardTopControls is used to render control elements in the top of a Card component. + */ +const CardTopControls: ComponentWithAs<'div', CardTopControlsProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CardTopControls.displayName, context.telemetry); @@ -65,7 +75,4 @@ CardTopControls.handledProps = Object.keys(CardTopControls.propTypes) as any; CardTopControls.create = createShorthandFactory({ Component: CardTopControls }); -/** - * A CardTopControls is used to render control elements in the top of a Card component. - */ -export default withSafeTypeForAs(CardTopControls); +export default CardTopControls; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx index f2d1c80e9008d9..d0106fecabd010 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx @@ -17,8 +17,6 @@ import { isFromKeyboard as isEventFromKeyboard, } from '../../utils'; import { - WithAsProp, - withSafeTypeForAs, ShorthandCollection, ShorthandValue, ComponentEventHandler, @@ -31,6 +29,7 @@ import CarouselNavigation, { CarouselNavigationProps } from './CarouselNavigatio import CarouselNavigationItem, { CarouselNavigationItemProps } from './CarouselNavigationItem'; import CarouselPaddle, { CarouselPaddleProps } from './CarouselPaddle'; import { + ComponentWithAs, getElementType, useAccessibility, useStyles, @@ -128,7 +127,15 @@ export const carouselSlotClassNames: CarouselSlotClassNames = { navigation: `${carouselClassName}__navigation`, }; -const Carousel: React.FC> & +/** + * A Carousel displays data organised as a gallery. + * + * @accessibility + * Implements [ARIA Carousel](https://www.w3.org/WAI/tutorials/carousels/structure/) design pattern. + * @accessibilityIssues + * [VoiceOver doens't narrate label referenced by aria-labelledby attribute, when role is "tabpanel"](https://bugs.chromium.org/p/chromium/issues/detail?id=1040924) + */ +const Carousel: ComponentWithAs<'div', CarouselProps> & FluentComponentStaticProps & { Item: typeof CarouselItem; Navigation: typeof CarouselNavigation; @@ -509,12 +516,4 @@ Carousel.create = createShorthandFactory({ mappedArrayProp: 'items', }); -/** - * A Carousel displays data organised as a gallery. - * - * @accessibility - * Implements [ARIA Carousel](https://www.w3.org/WAI/tutorials/carousels/structure/) design pattern. - * @accessibilityIssues - * [VoiceOver doens't narrate label referenced by aria-labelledby attribute, when role is "tabpanel"](https://bugs.chromium.org/p/chromium/issues/detail?id=1040924) - */ -export default withSafeTypeForAs(Carousel); +export default Carousel; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx index 1d6bbcffbb906a..8b84ceea879dd9 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx @@ -13,8 +13,15 @@ import { // @ts-ignore import { ThemeContext } from 'react-fela'; import { screenReaderContainerStyles } from '../../utils/accessibility/Styles/accessibilityStyles'; -import { WithAsProp, withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; -import { useAccessibility, useTelemetry, getElementType, useUnhandledProps, useStyles } from '@fluentui/react-bindings'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { + ComponentWithAs, + useAccessibility, + useTelemetry, + getElementType, + useUnhandledProps, + useStyles, +} from '@fluentui/react-bindings'; export interface CarouselItemSlotClassNames { itemPositionText: string; @@ -46,7 +53,14 @@ export const carouselItemSlotClassNames: CarouselItemSlotClassNames = { itemPositionText: `${carouselItemClassName}__itemPositionText`, }; -const CarouselItem: React.FC> & FluentComponentStaticProps = props => { +/** + * A Carousel displays data organised as a gallery. + * + * @accessibility + * Implements [ARIA Carousel](https://www.w3.org/WAI/tutorials/carousels/structure/) design pattern. + */ +const CarouselItem: ComponentWithAs<'div', CarouselItemProps> & + FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CarouselItem.displayName, context.telemetry); setStart(); @@ -127,10 +141,4 @@ CarouselItem.handledProps = Object.keys(CarouselItem.propTypes) as any; CarouselItem.create = createShorthandFactory({ Component: CarouselItem, mappedProp: 'content' }); -/** - * A Carousel displays data organised as a gallery. - * - * @accessibility - * Implements [ARIA Carousel](https://www.w3.org/WAI/tutorials/carousels/structure/) design pattern. - */ -export default withSafeTypeForAs(CarouselItem); +export default CarouselItem; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx index 97e1d6b4aea7ac..803befa4b11c00 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx @@ -1,5 +1,6 @@ import { tabListBehavior, Accessibility } from '@fluentui/accessibility'; import { + ComponentWithAs, useTelemetry, mergeVariablesOverrides, getElementType, @@ -21,8 +22,6 @@ import { rtlTextContainer, } from '../../utils'; import { - withSafeTypeForAs, - WithAsProp, ShorthandCollection, ComponentEventHandler, FluentComponentStaticProps, @@ -74,7 +73,10 @@ export type CarouselNavigationStylesProps = Required< export const carouselNavigationClassName = 'ui-carousel__navigation'; -const CarouselNavigation: React.FC> & +/** + * A Carousel navigation helps switching between Carousel items. + */ +const CarouselNavigation: ComponentWithAs<'ul', CarouselNavigationProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CarouselNavigation.displayName, context.telemetry); @@ -191,7 +193,4 @@ CarouselNavigation.create = createShorthandFactory({ mappedArrayProp: 'items', }); -/** - * A Carousel navigation helps switching between Carousel items. - */ -export default withSafeTypeForAs(CarouselNavigation); +export default CarouselNavigation; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx index 7c9e60c2e208b5..809674b4cc6a2b 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx @@ -16,15 +16,20 @@ import { // @ts-ignore import { ThemeContext } from 'react-fela'; import { - withSafeTypeForAs, - WithAsProp, ShorthandValue, ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; import Box, { BoxProps } from '../Box/Box'; -import { useTelemetry, getElementType, useUnhandledProps, useAccessibility, useStyles } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + useTelemetry, + getElementType, + useUnhandledProps, + useAccessibility, + useStyles, +} from '@fluentui/react-bindings'; export interface CarouselNavigationItemSlotClassNames { indicator: string; @@ -82,7 +87,10 @@ export const carouselNavigationItemSlotClassNames: CarouselNavigationItemSlotCla content: `${carouselNavigationItemClassName}__content`, }; -const CarouselNavigationItem: React.FC> & +/** + * A CarouselItem is an actionable item within a Carousel. + */ +const CarouselNavigationItem: ComponentWithAs<'li', CarouselNavigationItemProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CarouselNavigationItem.displayName, context.telemetry); @@ -211,9 +219,4 @@ CarouselNavigationItem.create = createShorthandFactory({ mappedArrayProp: 'content', }); -/** - * A CarouselItem is an actionable item within a Carousel. - */ -export default withSafeTypeForAs( - CarouselNavigationItem, -); +export default CarouselNavigationItem; diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx index 0318cd26e97291..763c4ee9834eac 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx @@ -16,13 +16,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'; @@ -64,7 +69,13 @@ export const carouselPaddleSlotClassNames: CarouselPaddleSlotClassNames = { content: `${carouselPaddleClassName}__content`, }; -const CarouselPaddle: React.FC> & +/** + * A CarouselPaddle allows users to customize the paddles inside the Carousel component. + * + * @accessibility + * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern. + */ +const CarouselPaddle: ComponentWithAs<'button', CarouselPaddleProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(CarouselPaddle.displayName, context.telemetry); @@ -90,7 +101,7 @@ const CarouselPaddle: React.FC> & const getA11Props = useAccessibility(accessibility, { debugName: CarouselPaddle.displayName, mapPropsToBehavior: () => ({ - as, + as: String(as), disabled, }), actionHandlers: { @@ -181,10 +192,4 @@ CarouselPaddle.handledProps = Object.keys(CarouselPaddle.propTypes) as any; CarouselPaddle.create = createShorthandFactory({ Component: CarouselPaddle, mappedProp: 'content' }); -/** - * A CarouselPaddle allows users to customize the paddles inside the Carousel component. - * - * @accessibility - * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern. - */ -export default withSafeTypeForAs(CarouselPaddle); +export default CarouselPaddle; diff --git a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx index 06763e6157ab74..eab5c1cdd5563b 100644 --- a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx +++ b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx @@ -1,5 +1,12 @@ import { Accessibility, chatBehavior, ChatBehaviorProps } 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 _ from 'lodash'; import * as PropTypes from 'prop-types'; @@ -15,13 +22,7 @@ import { rtlTextContainer, UIComponentProps, } from '../../utils'; -import { - WithAsProp, - withSafeTypeForAs, - ShorthandCollection, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandCollection, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import ChatItem, { ChatItemProps } from './ChatItem'; import ChatMessage from './ChatMessage'; import ChatMessageDetails from './ChatMessageDetails'; @@ -44,7 +45,10 @@ export const chatSlotClassNames: ChatSlotClassNames = { item: `${chatClassName}__item`, }; -const Chat: React.FC> & +/** + * A Chat displays messages from a conversation between multiple users. + */ +const Chat: ComponentWithAs<'ul', ChatProps> & FluentComponentStaticProps & { Item: typeof ChatItem; Message: typeof ChatMessage; @@ -116,7 +120,4 @@ Chat.MessageDetails = ChatMessageDetails; Chat.create = createShorthandFactory({ Component: Chat }); -/** - * A Chat displays messages from a conversation between multiple users. - */ -export default withSafeTypeForAs(Chat); +export default Chat; diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx index f8f523b94d0b1f..1f33be97fa153a 100644 --- a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx @@ -1,18 +1,19 @@ 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'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { childrenExist, createShorthandFactory, @@ -56,7 +57,10 @@ export interface ChatItemProps extends UIComponentProps, ChildrenComponentProps export type ChatItemStylesProps = Pick; -const ChatItem: React.FC> & FluentComponentStaticProps = props => { +/** + * A ChatItem is container for single entity in Chat (e.g. message, notification, etc). + */ +const ChatItem: ComponentWithAs<'li', ChatItemProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(ChatItem.displayName, context.telemetry); setStart(); @@ -155,7 +159,4 @@ ChatItem.handledProps = Object.keys(ChatItem.propTypes) as any; ChatItem.create = createShorthandFactory({ Component: ChatItem, mappedProp: 'message' }); -/** - * A ChatItem is container for single entity in Chat (e.g. message, notification, etc). - */ -export default withSafeTypeForAs(ChatItem); +export default ChatItem; diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx index fe776067dd9a32..0dd99b218b0a29 100644 --- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx +++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx @@ -5,7 +5,14 @@ import { menuAsToolbarBehavior, ChatMessageBehaviorProps, } 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 { useContextSelector } from '@fluentui/react-context-selector'; import { Ref } from '@fluentui/react-component-ref'; import * as customPropTypes from '@fluentui/react-proptypes'; @@ -34,10 +41,8 @@ import { createShorthand, } from '../../utils'; import { - WithAsProp, ShorthandValue, ComponentEventHandler, - withSafeTypeForAs, ShorthandCollection, FluentComponentStaticProps, ProviderContextPrepared, @@ -146,7 +151,10 @@ export const chatMessageSlotClassNames: ChatMessageSlotClassNames = { reactionGroup: `${chatMessageClassName}__reactions`, }; -const ChatMessage: React.FC> & FluentComponentStaticProps = props => { +/** + * A ChatMessage represents a single message in chat. + */ +const ChatMessage: ComponentWithAs<'div', ChatMessageProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(ChatMessage.displayName, context.telemetry); setStart(); @@ -413,7 +421,4 @@ ChatMessage.handledProps = Object.keys(ChatMessage.propTypes) as any; ChatMessage.create = createShorthandFactory({ Component: ChatMessage, mappedProp: 'content' }); -/** - * A ChatMessage represents a single message in chat. - */ -export default withSafeTypeForAs(ChatMessage); +export default ChatMessage; diff --git a/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx b/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx index 765fc03530c887..ef4db5c67bc19b 100644 --- a/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx +++ b/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx @@ -1,5 +1,6 @@ import { Accessibility, checkboxBehavior, CheckboxBehaviorProps } from '@fluentui/accessibility'; import { + ComponentWithAs, getElementType, useUnhandledProps, useAccessibility, @@ -18,9 +19,7 @@ import { ThemeContext } from 'react-fela'; import { createShorthandFactory, ChildrenComponentProps, commonPropTypes, UIComponentProps } from '../../utils'; import { ComponentEventHandler, - WithAsProp, ShorthandValue, - withSafeTypeForAs, ProviderContextPrepared, FluentComponentStaticProps, } from '../../types'; @@ -80,7 +79,13 @@ export const checkboxSlotClassNames: CheckboxSlotClassNames = { indicator: `${checkboxClassName}__indicator`, }; -const Checkbox: React.FC> & FluentComponentStaticProps = props => { +/** + * A Checkbox allows a user to make a choice between two mutually exclusive options. + * + * @accessibility + * Implements [ARIA Checkbox](https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox) design pattern. + */ +const Checkbox: ComponentWithAs<'div', CheckboxProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Checkbox.displayName, context.telemetry); setStart(); @@ -219,10 +224,4 @@ Checkbox.create = createShorthandFactory({ mappedProp: 'label', }); -/** - * A Checkbox allows a user to make a choice between two mutually exclusive options. - * - * @accessibility - * Implements [ARIA Checkbox](https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox) design pattern. - */ -export default withSafeTypeForAs(Checkbox); +export default Checkbox; diff --git a/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx b/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx index 9d80c18e5cfe9f..50d33bf0818e63 100644 --- a/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx +++ b/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx @@ -1,5 +1,6 @@ import { Accessibility, dialogBehavior, DialogBehaviorProps } from '@fluentui/accessibility'; import { + ComponentWithAs, FocusTrapZoneProps, useAutoControlled, useTelemetry, @@ -30,9 +31,7 @@ import { } from '../../utils'; import { ComponentEventHandler, - WithAsProp, ShorthandValue, - withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; @@ -134,7 +133,19 @@ export const dialogSlotClassNames: DialogSlotClassNames = { export type DialogStylesProps = Required>; -const Dialog: React.FC> & +/** + * A Dialog displays important information on top of a page which requires a user's attention, confirmation, or interaction. + * Dialogs are purposefully interruptive, so they should be used sparingly. + * + * @accessibility + * Implements [ARIA Dialog (Modal)](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) design pattern. + * @accessibilityIssues + * [NVDA narrates dialog title and button twice](https://github.com/nvaccess/nvda/issues/10003) + * [NVDA does not recognize the ARIA 1.1 values of aria-haspopup](https://github.com/nvaccess/nvda/issues/8235) + * [Jaws does not announce token values of aria-haspopup](https://github.com/FreedomScientific/VFO-standards-support/issues/33) + * [Issue 989517: VoiceOver narrates dialog content and button twice](https://bugs.chromium.org/p/chromium/issues/detail?id=989517) + */ +const Dialog: ComponentWithAs<'div', DialogProps> & FluentComponentStaticProps & { Footer: typeof DialogFooter; } = props => { @@ -438,16 +449,4 @@ Dialog.create = createShorthandFactory({ Component: Dialog, }); -/** - * A Dialog displays important information on top of a page which requires a user's attention, confirmation, or interaction. - * Dialogs are purposefully interruptive, so they should be used sparingly. - * - * @accessibility - * Implements [ARIA Dialog (Modal)](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) design pattern. - * @accessibilityIssues - * [NVDA narrates dialog title and button twice](https://github.com/nvaccess/nvda/issues/10003) - * [NVDA does not recognize the ARIA 1.1 values of aria-haspopup](https://github.com/nvaccess/nvda/issues/8235) - * [Jaws does not announce token values of aria-haspopup](https://github.com/FreedomScientific/VFO-standards-support/issues/33) - * [Issue 989517: VoiceOver narrates dialog content and button twice](https://bugs.chromium.org/p/chromium/issues/detail?id=989517) - */ -export default withSafeTypeForAs(Dialog); +export default Dialog; diff --git a/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx b/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx index 28b4807d894e71..6111c7fcd0277f 100644 --- a/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx +++ b/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx @@ -10,8 +10,15 @@ import { childrenExist, } from '../../utils'; -import { WithAsProp, withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; -import { useTelemetry, getElementType, useUnhandledProps, useAccessibility, useStyles } from '@fluentui/react-bindings'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { + ComponentWithAs, + useTelemetry, + getElementType, + useUnhandledProps, + useAccessibility, + useStyles, +} from '@fluentui/react-bindings'; import { Accessibility } from '@fluentui/accessibility'; export interface DialogFooterProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { @@ -24,7 +31,11 @@ export const dialogFooterClassName = 'ui-dialog__footer'; export type DialogFooterStylesProps = never; -const DialogFooter: React.FC> & FluentComponentStaticProps = props => { +/** + * A DialogFooter represents footer content in Dialog, usually shows dialog actions. + */ +const DialogFooter: ComponentWithAs<'div', DialogFooterProps> & + FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(DialogFooter.displayName, context.telemetry); setStart(); @@ -64,7 +75,4 @@ DialogFooter.handledProps = Object.keys(DialogFooter.propTypes) as any; DialogFooter.create = createShorthandFactory({ Component: DialogFooter, mappedProp: 'content' }); -/** - * A DialogFooter represents footer content in Dialog, usually shows dialog actions. - */ -export default withSafeTypeForAs(DialogFooter); +export default DialogFooter; diff --git a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx index be7412a7061b68..9074a4c94f7833 100644 --- a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx +++ b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx @@ -1,4 +1,12 @@ import { Accessibility } from '@fluentui/accessibility'; +import { + useTelemetry, + useAccessibility, + getElementType, + useUnhandledProps, + useStyles, + ComponentWithAs, +} from '@fluentui/react-bindings'; import * as React from 'react'; import * as PropTypes from 'prop-types'; @@ -15,8 +23,7 @@ import { } from '../../utils'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { WithAsProp, withSafeTypeForAs, ProviderContextPrepared, FluentComponentStaticProps } from '../../types'; -import { useTelemetry, useAccessibility, getElementType, useUnhandledProps, useStyles } from '@fluentui/react-bindings'; +import { ProviderContextPrepared, FluentComponentStaticProps } from '../../types'; import DividerContent from './DividerContent'; export interface DividerProps @@ -50,7 +57,10 @@ export type DividerStylesProps = Required< export const dividerClassName = 'ui-divider'; -const Divider: React.FC> & +/** + * A Divider visually segments content. + */ +const Divider: ComponentWithAs<'div', DividerProps> & FluentComponentStaticProps & { Content: typeof DividerContent; } = props => { @@ -132,7 +142,4 @@ Divider.handledProps = Object.keys(Divider.propTypes) as any; Divider.create = createShorthandFactory({ Component: Divider, mappedProp: 'content' }); -/** - * A Divider visually segments content. - */ -export default withSafeTypeForAs(Divider); +export default Divider; diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index b3832f7f9597e5..0c142a47334f70 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -1,3 +1,4 @@ +import { ComponentWithAs } from '@fluentui/react-bindings'; import { handleRef, Ref } from '@fluentui/react-component-ref'; import * as customPropTypes from '@fluentui/react-proptypes'; import { indicatorBehavior } from '@fluentui/accessibility'; @@ -8,14 +9,7 @@ import cx from 'classnames'; import { getCode, keyboardKey } from '@fluentui/keyboard-key'; import computeScrollIntoView from 'compute-scroll-into-view'; -import { - DebounceResultFn, - ShorthandRenderFunction, - ShorthandValue, - ShorthandCollection, - WithAsProp, - withSafeTypeForAs, -} from '../../types'; +import { DebounceResultFn, ShorthandRenderFunction, ShorthandValue, ShorthandCollection } from '../../types'; import { ComponentSlotStylesInput, ComponentVariablesInput } from '@fluentui/styles'; import Downshift, { DownshiftState, @@ -287,7 +281,7 @@ export const dropdownSlotClassNames: DropdownSlotClassNames = { triggerButton: `${dropdownClassName}__trigger-button`, }; -class Dropdown extends AutoControlledComponent, DropdownState> { +class Dropdown extends AutoControlledComponent { buttonRef = React.createRef(); inputRef = React.createRef() as React.MutableRefObject; listRef = React.createRef(); @@ -363,7 +357,6 @@ class Dropdown extends AutoControlledComponent, Dropdo static defaultProps = { align: 'start', - as: 'div', clearIndicator: {}, itemToString: item => { if (!item || React.isValidElement(item)) { @@ -1621,4 +1614,11 @@ class Dropdown extends AutoControlledComponent, Dropdo * @accessibilityIssues * [Issue 991203: VoiceOver doesn't narrate properly elements in the input/combobox](https://bugs.chromium.org/p/chromium/issues/detail?id=991203) */ -export default withSafeTypeForAs(Dropdown); +export default (Dropdown as unknown) as ComponentWithAs<'div', DropdownProps> & { + Item: typeof DropdownItem; + SelectedItem: typeof DropdownSelectedItem; + + a11yStatusCleanupTime: number; + charKeyPressedCleanupTime: number; +}; +/* ^ A temporary typing until Dropdown will not be converted to functional component. */ diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownItem.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownItem.tsx index c6feeb5a24646d..0dc2ee655e188d 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownItem.tsx @@ -5,15 +5,13 @@ import * as PropTypes from 'prop-types'; import * as _ from 'lodash'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { getElementType, useUnhandledProps, useStyles, useTelemetry } from '@fluentui/react-bindings'; +import { ComponentWithAs, getElementType, useUnhandledProps, useStyles, useTelemetry } from '@fluentui/react-bindings'; import cx from 'classnames'; import { createShorthandFactory, commonPropTypes } from '../../utils'; import { ShorthandValue, ComponentEventHandler, - WithAsProp, - withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; @@ -78,7 +76,11 @@ export const dropdownItemSlotClassNames: DropdownItemSlotClassNames = { checkableIndicator: `${dropdownItemClassName}__checkable-indicator`, }; -const DropdownItem: React.FC & { index: number }> & +/** + * A DropdownItem represents an option of Dropdown list. + * Displays an item with optional rich media metadata. + */ +const DropdownItem: ComponentWithAs<'li', DropdownItemProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(DropdownItem.displayName, context.telemetry); @@ -206,8 +208,4 @@ DropdownItem.handledProps = Object.keys(DropdownItem.propTypes) as any; DropdownItem.create = createShorthandFactory({ Component: DropdownItem, mappedProp: 'header' }); -/** - * A DropdownItem represents an option of Dropdown list. - * Displays an item with optional rich media metadata. - */ -export default withSafeTypeForAs(DropdownItem); +export default DropdownItem; diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx index 845f93c3e5926f..1a989e058990fe 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx @@ -5,16 +5,10 @@ import * as _ from 'lodash'; // @ts-ignore import { ThemeContext } from 'react-fela'; import { createShorthandFactory, commonPropTypes } from '../../utils'; -import { - ComponentEventHandler, - WithAsProp, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { UIComponentProps } from '../../utils/commonPropInterfaces'; import Input from '../Input/Input'; -import { useTelemetry, useStyles, useUnhandledProps } from '@fluentui/react-bindings'; +import { ComponentWithAs, useTelemetry, useStyles, useUnhandledProps } from '@fluentui/react-bindings'; export interface DropdownSearchInputSlotClassNames { input: string; @@ -81,7 +75,11 @@ export const dropdownSearchInputSlotClassNames: DropdownSearchInputSlotClassName export type DropdownSearchInputStylesProps = Required>; -const DropdownSearchInput: React.FC> & +/** + * A DropdownSearchInput represents item of 'search' Dropdown. + * Used to display the search input field. + */ +const DropdownSearchInput: ComponentWithAs<'div', DropdownSearchInputProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(DropdownSearchInput.displayName, context.telemetry); @@ -176,8 +174,4 @@ DropdownSearchInput.handledProps = Object.keys(DropdownSearchInput.propTypes) as DropdownSearchInput.create = createShorthandFactory({ Component: DropdownSearchInput }); -/** - * A DropdownSearchInput represents item of 'search' Dropdown. - * Used to display the search input field. - */ -export default withSafeTypeForAs(DropdownSearchInput); +export default DropdownSearchInput; diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx index e84d1c4f42927e..41ac83092d1dc6 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx @@ -13,9 +13,7 @@ import { getCode, keyboardKey } from '@fluentui/keyboard-key'; import { ComponentEventHandler, ShorthandValue, - WithAsProp, ComponentKeyboardEventHandler, - withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; @@ -23,7 +21,14 @@ import { UIComponentProps } from '../../utils/commonPropInterfaces'; import { createShorthandFactory, commonPropTypes } from '../../utils'; import Image, { ImageProps } from '../Image/Image'; import Box, { BoxProps } from '../Box/Box'; -import { useUnhandledProps, useStyles, useTelemetry, getElementType, useAccessibility } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + useUnhandledProps, + useStyles, + useTelemetry, + getElementType, + useAccessibility, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -85,7 +90,11 @@ export const dropdownSelectedItemSlotClassNames: DropdownSelectedItemSlotClassNa export type DropdownSelectedItemStylesProps = { hasImage: boolean }; -const DropdownSelectedItem: React.FC> & +/** + * A DropdownSelectedItem represents a selected item of 'multiple-selection' Dropdown. + */ + +const DropdownSelectedItem: ComponentWithAs<'span', DropdownSelectedItemProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(DropdownSelectedItem.displayName, context.telemetry); @@ -229,7 +238,4 @@ DropdownSelectedItem.create = createShorthandFactory({ mappedProp: 'header', }); -/** - * A DropdownSelectedItem represents a selected item of 'multiple-selection' Dropdown. - */ -export default withSafeTypeForAs(DropdownSelectedItem); +export default DropdownSelectedItem; diff --git a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx index 444627bc90f391..0c06df72692125 100644 --- a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx +++ b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx @@ -10,14 +10,13 @@ import Video, { VideoProps } from '../Video/Video'; import Box, { BoxProps } from '../Box/Box'; import { ComponentEventHandler, - WithAsProp, ShorthandValue, - withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; import { Ref } from '@fluentui/react-component-ref'; import { + ComponentWithAs, getElementType, useUnhandledProps, useAutoControlled, @@ -83,7 +82,14 @@ export const embedSlotClassNames: EmbedSlotClassNames = { export type EmbedStylesProps = Required> & { iframeLoaded: boolean }; -const Embed: React.FC> & FluentComponentStaticProps = props => { +/** + * An Embed displays content from external websites, like a post from external social network. + * + * @accessibility + * A `placeholder` slot represents an [`Image`](/components/image/definition) component, please follow recommendations from its + * accessibility section. + */ +const Embed: ComponentWithAs<'span', EmbedProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Embed.displayName, context.telemetry); setStart(); @@ -247,11 +253,4 @@ Embed.handledProps = Object.keys(Embed.propTypes) as any; Embed.create = createShorthandFactory({ Component: Embed }); -/** - * An Embed displays content from external websites, like a post from external social network. - * - * @accessibility - * A `placeholder` slot represents an [`Image`](/components/image/definition) component, please follow recommendations from its - * accessibility section. - */ -export default withSafeTypeForAs(Embed); +export default Embed; diff --git a/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx b/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx index b3313e36dd946b..aac81a4ef2682d 100644 --- a/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx +++ b/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx @@ -1,4 +1,4 @@ -import { getElementType, useUnhandledProps, useStyles, useTelemetry } from '@fluentui/react-bindings'; +import { ComponentWithAs, getElementType, useUnhandledProps, useStyles, useTelemetry } from '@fluentui/react-bindings'; import * as _ from 'lodash'; import * as PropTypes from 'prop-types'; import * as React from 'react'; @@ -6,7 +6,7 @@ import * as React from 'react'; import { ThemeContext } from 'react-fela'; import { commonPropTypes, UIComponentProps, ChildrenComponentProps } from '../../utils'; -import { ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; +import { ProviderContextPrepared } from '../../types'; import FlexItem from './FlexItem'; export interface FlexProps extends UIComponentProps, ChildrenComponentProps { @@ -47,7 +47,10 @@ export type FlexStylesProps = Pick< >; export const flexClassName = 'ui-flex'; -const Flex: React.FC> & { +/** + * A Flex is a layout component that arranges group of items aligned towards common direction (either row or column). + */ +const Flex: ComponentWithAs<'div', FlexProps> & { handledProps: (keyof FlexProps)[]; Item: typeof FlexItem; } = props => { @@ -148,7 +151,4 @@ Flex.handledProps = Object.keys(Flex.propTypes) as any; Flex.Item = FlexItem; -/** - * A Flex is a layout component that arranges group of items aligned towards common direction (either row or column). - */ -export default withSafeTypeForAs(Flex); +export default Flex; diff --git a/packages/fluentui/react-northstar/src/components/Form/Form.tsx b/packages/fluentui/react-northstar/src/components/Form/Form.tsx index 1f186cf32e9eb1..4c5e6807e1fa20 100644 --- a/packages/fluentui/react-northstar/src/components/Form/Form.tsx +++ b/packages/fluentui/react-northstar/src/components/Form/Form.tsx @@ -14,14 +14,19 @@ import { } from '../../utils'; import { ComponentEventHandler, - WithAsProp, ShorthandCollection, - withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; import FormField, { FormFieldProps } from './FormField'; -import { useTelemetry, getElementType, useUnhandledProps, useStyles, useAccessibility } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + useTelemetry, + getElementType, + useUnhandledProps, + useStyles, + useAccessibility, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; import FormLabel from './FormLabel'; @@ -58,7 +63,10 @@ export const formClassName = 'ui-form'; export type FormStylesProps = never; -const Form: React.FC> & +/** + * A Form is used to collect, oprionally validate, and submit the user input, in a structured way. + */ +const Form: ComponentWithAs<'form', FormProps> & FluentComponentStaticProps & { Field: typeof FormField; Label: typeof FormLabel; @@ -157,7 +165,4 @@ Form.Button = FormButton; Form.RadioGroup = FormRadioGroup; Form.Slider = FormSlider; -/** - * A Form is used to collect, oprionally validate, and submit the user input, in a structured way. - */ -export default withSafeTypeForAs(Form); +export default Form; diff --git a/packages/fluentui/react-northstar/src/components/Form/FormField.tsx b/packages/fluentui/react-northstar/src/components/Form/FormField.tsx index 17e28cf5d86599..73ddead9ea4fd6 100644 --- a/packages/fluentui/react-northstar/src/components/Form/FormField.tsx +++ b/packages/fluentui/react-northstar/src/components/Form/FormField.tsx @@ -10,17 +10,18 @@ import { commonPropTypes, getOrGenerateIdFromShorthand, } from '../../utils'; -import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import Text, { TextProps } from '../Text/Text'; import Input from '../Input/Input'; import Box, { BoxProps } from '../Box/Box'; -import { getElementType, useUnhandledProps, useTelemetry, useStyles, useAccessibility } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + getElementType, + useUnhandledProps, + useTelemetry, + useStyles, + useAccessibility, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -65,7 +66,10 @@ export type FormFieldStylesProps = Required> & FluentComponentStaticProps = props => { +/** + * A FormField represents a Form element containing a label and an input. + */ +const FormField: ComponentWithAs<'div', FormFieldProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(FormField.displayName, context.telemetry); setStart(); @@ -199,13 +203,9 @@ FormField.handledProps = Object.keys(FormField.propTypes) as any; FormField.defaultProps = { accessibility: formFieldBehavior, - as: 'div', control: { as: Input }, }; FormField.create = createShorthandFactory({ Component: FormField, mappedProp: 'label' }); -/** - * A FormField represents a Form element containing a label and an input. - */ -export default withSafeTypeForAs(FormField); +export default FormField; diff --git a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx index 316286f613f40b..5573b60d916c23 100644 --- a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx +++ b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx @@ -12,7 +12,6 @@ import { ContentComponentProps, rtlTextContainer, } from '../../utils'; -import { WithAsProp, withSafeTypeForAs } from '../../types'; export interface GridProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { /** @@ -30,7 +29,10 @@ export interface GridProps extends UIComponentProps, ChildrenComponentProps, Con export const gridClassName = 'ui-grid'; -class Grid extends UIComponent> { +/** + * A Grid is a layout component that harmonizes negative space, by controlling both the row and column alignment. + */ +class Grid extends UIComponent { static displayName = 'Grid'; static deprecated_className = gridClassName; @@ -47,10 +49,6 @@ class Grid extends UIComponent> { rows: PropTypes.number, }; - static defaultProps: WithAsProp = { - as: 'div', - }; - renderComponent({ accessibility, ElementType, classes, unhandledProps }: RenderResultConfig): React.ReactNode { const { children, content } = this.props; @@ -67,7 +65,4 @@ class Grid extends UIComponent> { } } -/** - * A Grid is a layout component that harmonizes negative space, by controlling both the row and column alignment. - */ -export default withSafeTypeForAs(Grid); +export default Grid; diff --git a/packages/fluentui/react-northstar/src/components/Header/Header.tsx b/packages/fluentui/react-northstar/src/components/Header/Header.tsx index 341caaee48a64f..3e51c076f7e9f2 100644 --- a/packages/fluentui/react-northstar/src/components/Header/Header.tsx +++ b/packages/fluentui/react-northstar/src/components/Header/Header.tsx @@ -17,14 +17,15 @@ import { import { ThemeContext } from 'react-fela'; import HeaderDescription, { HeaderDescriptionProps } from './HeaderDescription'; +import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; -import { useTelemetry, useAccessibility, getElementType, useUnhandledProps, useStyles } from '@fluentui/react-bindings'; + ComponentWithAs, + useTelemetry, + useAccessibility, + getElementType, + useUnhandledProps, + useStyles, +} from '@fluentui/react-bindings'; export interface HeaderProps extends UIComponentProps, @@ -46,7 +47,17 @@ export interface HeaderProps export const headerClassName = 'ui-header'; export type HeaderStylesProps = Required> & { hasDescription: boolean }; -const Header: React.FC> & +/** + * A Header organises the content by declaring a content's topic. + * + * @accessibility + * Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. + * Nest headings by their rank (or level). The most important heading has the rank 1 (

), the least important heading rank 6 (

). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. + * + * Other considerations: + * - when the description property is used in header, readers will narrate both header content and description within the element. In addition to that, both will be displayed in the list of headings. + */ +const Header: ComponentWithAs<'h1', HeaderProps> & FluentComponentStaticProps & { Description: typeof HeaderDescription; } = props => { @@ -122,14 +133,4 @@ Header.Description = HeaderDescription; Header.create = createShorthandFactory({ Component: Header, mappedProp: 'content' }); -/** - * A Header organises the content by declaring a content's topic. - * - * @accessibility - * Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation. - * Nest headings by their rank (or level). The most important heading has the rank 1 (

), the least important heading rank 6 (

). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. - * - * Other considerations: - * - when the description property is used in header, readers will narrate both header content and description within the element. In addition to that, both will be displayed in the list of headings. - */ -export default withSafeTypeForAs(Header); +export default Header; diff --git a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx index b37b9a1a6ba6fd..3811e415facf4a 100644 --- a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx +++ b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx @@ -13,8 +13,15 @@ import { } from '../../utils'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { WithAsProp, withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; -import { useTelemetry, getElementType, useUnhandledProps, useAccessibility, useStyles } from '@fluentui/react-bindings'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { + ComponentWithAs, + useTelemetry, + getElementType, + useUnhandledProps, + useAccessibility, + useStyles, +} from '@fluentui/react-bindings'; export interface HeaderDescriptionProps extends UIComponentProps, @@ -30,7 +37,10 @@ export interface HeaderDescriptionProps export const headerDescriptionClassName = 'ui-header__description'; export type HeaderDescriptionStylesProps = Pick; -const HeaderDescription: React.FC> & +/** + * A HeaderDescription provides more detailed information about the Header. + */ +const HeaderDescription: ComponentWithAs<'p', HeaderDescriptionProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(HeaderDescription.displayName, context.telemetry); @@ -90,7 +100,4 @@ HeaderDescription.create = createShorthandFactory({ mappedProp: 'content', }); -/** - * A HeaderDescription provides more detailed information about the Header. - */ -export default withSafeTypeForAs(HeaderDescription); +export default HeaderDescription; diff --git a/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTree.tsx b/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTree.tsx index b3b79cf691c541..2cef5ece327dd1 100644 --- a/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTree.tsx +++ b/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTree.tsx @@ -20,14 +20,13 @@ import { import { ShorthandValue, ShorthandRenderFunction, - WithAsProp, - withSafeTypeForAs, ShorthandCollection, ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; import { + ComponentWithAs, useTelemetry, useAutoControlled, useUnhandledProps, @@ -79,7 +78,13 @@ export const hierarchicalTreeClassName = 'ui-hierarchicaltree'; export type HierarchicalTreeStylesProps = never; -const HierarchicalTree: React.FC> & +/** + * (DEPRECATED) A Tree displays data organised in tree hierarchy. + * + * @accessibility + * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. + */ +const HierarchicalTree: ComponentWithAs<'ul', HierarchicalTreeProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(HierarchicalTree.displayName, context.telemetry); @@ -229,10 +234,4 @@ HierarchicalTree.create = createShorthandFactory({ mappedArrayProp: 'items', }); -/** - * (DEPRECATED) A Tree displays data organised in tree hierarchy. - * - * @accessibility - * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. - */ -export default withSafeTypeForAs(HierarchicalTree); +export default HierarchicalTree; diff --git a/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTreeItem.tsx b/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTreeItem.tsx index f20a74833e5fa0..1f982b641c01eb 100644 --- a/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTreeItem.tsx +++ b/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTreeItem.tsx @@ -5,6 +5,7 @@ import { HierarchicalTreeItemBehaviorProps, } from '@fluentui/accessibility'; import { + ComponentWithAs, getFirstFocusable, useTelemetry, getElementType, @@ -30,10 +31,8 @@ import { } from '../../utils'; import { ComponentEventHandler, - WithAsProp, ShorthandRenderFunction, ShorthandValue, - withSafeTypeForAs, ShorthandCollection, FluentComponentStaticProps, ProviderContextPrepared, @@ -84,7 +83,14 @@ export const hierarchicalTreeItemSlotClassNames: HierarchicalTreeItemSlotClassNa }; export type HierarchicalTreeItemStyles = never; -const HierarchicalTreeItem: React.FC> & + +/** + * A TreeItem renders an item of a Tree. + * + * @accessibility + * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. + */ +const HierarchicalTreeItem: ComponentWithAs<'li', HierarchicalTreeItemProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(HierarchicalTreeItem.displayName, context.telemetry); @@ -249,10 +255,4 @@ HierarchicalTreeItem.create = createShorthandFactory({ mappedProp: 'title', }); -/** - * A TreeItem renders an item of a Tree. - * - * @accessibility - * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. - */ -export default withSafeTypeForAs(HierarchicalTreeItem); +export default HierarchicalTreeItem; diff --git a/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTreeTitle.tsx b/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTreeTitle.tsx index 061bcba2eafc1e..4d14856bf80cac 100644 --- a/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTreeTitle.tsx +++ b/packages/fluentui/react-northstar/src/components/HierarchicalTree/HierarchicalTreeTitle.tsx @@ -18,14 +18,15 @@ import { } from '../../utils'; // @ts-ignore import { ThemeContext } from 'react-fela'; +import { ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { - ComponentEventHandler, - WithAsProp, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; -import { getElementType, useUnhandledProps, useTelemetry, useAccessibility, useStyles } from '@fluentui/react-bindings'; + ComponentWithAs, + getElementType, + useUnhandledProps, + useTelemetry, + useAccessibility, + useStyles, +} from '@fluentui/react-bindings'; export interface HierarchicalTreeTitleProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { /** Accessibility behavior if overridden by the user. */ @@ -50,7 +51,10 @@ export const hierarchicalTreeTitleClassName = 'ui-hierarchicaltree__title'; export type HierarchicalTreeTitleStylesProps = never; -const HierarchicalTreeTitle: React.FC> & +/** + * A TreeTitle renders a title of TreeItem. + */ +const HierarchicalTreeTitle: ComponentWithAs<'a', HierarchicalTreeTitleProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(HierarchicalTreeTitle.displayName, context.telemetry); @@ -128,7 +132,4 @@ HierarchicalTreeTitle.create = createShorthandFactory({ mappedProp: 'content', }); -/** - * A TreeTitle renders a title of TreeItem. - */ -export default withSafeTypeForAs(HierarchicalTreeTitle); +export default HierarchicalTreeTitle; diff --git a/packages/fluentui/react-northstar/src/components/Image/Image.tsx b/packages/fluentui/react-northstar/src/components/Image/Image.tsx index dc5649aa86264d..a01cce9a3401dc 100644 --- a/packages/fluentui/react-northstar/src/components/Image/Image.tsx +++ b/packages/fluentui/react-northstar/src/components/Image/Image.tsx @@ -1,12 +1,19 @@ import { Accessibility, AccessibilityAttributes, imageBehavior, ImageBehaviorProps } 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 PropTypes from 'prop-types'; import * as React from 'react'; // @ts-ignore import { ThemeContext } from 'react-fela'; import { createShorthandFactory, UIComponentProps, commonPropTypes } from '../../utils'; -import { FluentComponentStaticProps, ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; export interface ImageProps extends UIComponentProps, ImageBehaviorProps { /** Alternative text. */ @@ -33,7 +40,18 @@ export interface ImageProps extends UIComponentProps, ImageBehaviorProps { export type ImageStylesProps = Pick; export const imageClassName = 'ui-image'; -const Image: React.FC> & FluentComponentStaticProps = props => { +/** + * An Image is a graphic representation of something. + * + * @accessibility + * If image should be visible to screen readers, textual representation needs to be provided in 'alt' property. + * + * Other considerations: + * - when alt property is empty, then Narrator in scan mode navigates to image and narrates it as empty paragraph. + * - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior. + * - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently. + */ +const Image: ComponentWithAs<'img', ImageProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Image.displayName, context.telemetry); setStart(); @@ -105,15 +123,4 @@ Image.handledProps = Object.keys(Image.propTypes) as any; Image.create = createShorthandFactory({ Component: Image, mappedProp: 'src', allowsJSX: false }); -/** - * An Image is a graphic representation of something. - * - * @accessibility - * If image should be visible to screen readers, textual representation needs to be provided in 'alt' property. - * - * Other considerations: - * - when alt property is empty, then Narrator in scan mode navigates to image and narrates it as empty paragraph. - * - when image has role='presentation' then screen readers navigate to the element in scan/virtual mode. To avoid this, the attribute "aria-hidden='true'" is applied by the default image behavior. - * - when alt property is used in combination with aria-label, arialabbeledby or title, additional screen readers verification is needed as each screen reader handles this combination differently. - */ -export default withSafeTypeForAs(Image); +export default Image; diff --git a/packages/fluentui/react-northstar/src/components/Input/Input.tsx b/packages/fluentui/react-northstar/src/components/Input/Input.tsx index 4b8cd6ee94969a..1f4ed12e118a23 100644 --- a/packages/fluentui/react-northstar/src/components/Input/Input.tsx +++ b/packages/fluentui/react-northstar/src/components/Input/Input.tsx @@ -16,7 +16,7 @@ import { createShorthand, } from '../../utils'; import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils'; -import { ShorthandValue, ComponentEventHandler, withSafeTypeForAs, ProviderContextPrepared } from '../../types'; +import { ShorthandValue, ComponentEventHandler, ProviderContextPrepared } from '../../types'; import Box, { BoxProps } from '../Box/Box'; import { useAutoControlled, @@ -119,7 +119,13 @@ export const inputSlotClassNames: InputSlotClassNames = { icon: `${inputClassName}__icon`, }; -const Input = compose<'div', InputProps, InputStylesProps, {}, {}>( +/** + * An Input is a field used to elicit an input from a user. + * + * @accessibility + * For good screen reader experience set `aria-label` or `aria-labelledby` attribute for input. + */ +const Input = compose<'input', InputProps, InputStylesProps, {}, {}>( (props, ref, composeOptions) => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(composeOptions.displayName, context.telemetry); @@ -377,10 +383,4 @@ Input.defaultProps = { Input.create = createShorthandFactory({ Component: Input }); -/** - * An Input is a field used to elicit an input from a user. - * - * @accessibility - * For good screen reader experience set `aria-label` or `aria-labelledby` attribute for input. - */ -export default withSafeTypeForAs(Input); +export default Input; diff --git a/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx b/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx index 5a3201ca201f61..1b15962f205a29 100644 --- a/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx +++ b/packages/fluentui/react-northstar/src/components/ItemLayout/ItemLayout.tsx @@ -1,4 +1,10 @@ -import { ComponentSlotClasses, useStyles, useTelemetry, useUnhandledProps } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + ComponentSlotClasses, + useStyles, + useTelemetry, + useUnhandledProps, +} from '@fluentui/react-bindings'; import * as React from 'react'; import * as PropTypes from 'prop-types'; import cx from 'classnames'; @@ -12,7 +18,7 @@ import { rtlTextContainer, } from '../../utils'; import Layout from '../Layout/Layout'; -import { WithAsProp, withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -66,7 +72,10 @@ export const itemLayoutSlotClassNames: ItemLayoutSlotClassNames = { export type ItemLayoutStylesProps = never; -const ItemLayout: React.FC> & FluentComponentStaticProps = props => { +/** + * (DEPRECATED) The Item Layout handles layout styles for menu items, list items and other similar item templates. + */ +const ItemLayout: ComponentWithAs<'div', ItemLayoutProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(ItemLayout.displayName, context.telemetry); setStart(); @@ -107,7 +116,7 @@ const ItemLayout: React.FC> & FluentComponentStaticP const element = ( (ItemLayout); +export default ItemLayout; diff --git a/packages/fluentui/react-northstar/src/components/Label/Label.tsx b/packages/fluentui/react-northstar/src/components/Label/Label.tsx index 56192198991547..0d18e6ec3b1f90 100644 --- a/packages/fluentui/react-northstar/src/components/Label/Label.tsx +++ b/packages/fluentui/react-northstar/src/components/Label/Label.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 _ from 'lodash'; import * as PropTypes from 'prop-types'; @@ -21,13 +28,7 @@ import { import Image, { ImageProps } from '../Image/Image'; import Box, { BoxProps } from '../Box/Box'; -import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; export interface LabelProps extends UIComponentProps, @@ -65,7 +66,10 @@ export type LabelStylesProps = Pick> & FluentComponentStaticProps = props => { +/** + * A Label allows user to classify content. + */ +const Label: ComponentWithAs<'span', LabelProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Label.displayName, context.telemetry); setStart(); @@ -186,7 +190,4 @@ Label.defaultProps = { Label.create = createShorthandFactory({ Component: Label, mappedProp: 'content' }); -/** - * A Label allows user to classify content. - */ -export default withSafeTypeForAs(Label); +export default Label; diff --git a/packages/fluentui/react-northstar/src/components/Layout/Layout.tsx b/packages/fluentui/react-northstar/src/components/Layout/Layout.tsx index 4b96e4b12ebce4..5652839c1c4578 100644 --- a/packages/fluentui/react-northstar/src/components/Layout/Layout.tsx +++ b/packages/fluentui/react-northstar/src/components/Layout/Layout.tsx @@ -4,8 +4,15 @@ import * as PropTypes from 'prop-types'; import cx from 'classnames'; import { UIComponentProps, commonPropTypes, rtlTextContainer, createShorthandFactory } from '../../utils'; -import { withSafeTypeForAs, ProviderContextPrepared } from '../../types'; -import { useStyles, getElementType, useUnhandledProps, useAccessibility, useTelemetry } from '@fluentui/react-bindings'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { + ComponentWithAs, + useStyles, + getElementType, + useUnhandledProps, + useAccessibility, + useTelemetry, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -21,10 +28,10 @@ export interface LayoutSlotClassNames { export interface LayoutProps extends UIComponentProps { debug?: boolean; - renderStartArea?: (params: object) => React.ReactNode; - renderMainArea?: (params: object) => React.ReactNode; - renderEndArea?: (params: object) => React.ReactNode; - renderGap?: (params: object) => React.ReactNode; + renderStartArea?: (params: LayoutProps & { classes: Record }) => React.ReactNode; + renderMainArea?: (params: LayoutProps & { classes: Record }) => React.ReactNode; + renderEndArea?: (params: LayoutProps & { classes: Record }) => React.ReactNode; + renderGap?: (params: LayoutProps & { classes: Record }) => React.ReactNode; /** Styled applied to the root element of the rendered component. */ rootCSS?: ICSSInJSStyle; start?: any; @@ -64,7 +71,10 @@ export type LayoutStylesProps = Required< Pick > & { hasStart: boolean; hasMain: boolean; hasEnd: boolean }; -const Layout = props => { +/** + * (DEPRECATED) A layout is a utility for arranging the content of a component. + */ +const Layout: ComponentWithAs<'div', LayoutProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Layout.displayName, context.telemetry); setStart(); @@ -284,7 +294,4 @@ Layout.create = createShorthandFactory({ Component: Layout, }); -/** - * (DEPRECATED) A layout is a utility for arranging the content of a component. - */ -export default withSafeTypeForAs(Layout); +export default Layout; diff --git a/packages/fluentui/react-northstar/src/components/List/List.tsx b/packages/fluentui/react-northstar/src/components/List/List.tsx index 55285f44173102..656caf49ecd572 100644 --- a/packages/fluentui/react-northstar/src/components/List/List.tsx +++ b/packages/fluentui/react-northstar/src/components/List/List.tsx @@ -1,5 +1,6 @@ import { Accessibility, listBehavior, ListBehaviorProps } from '@fluentui/accessibility'; import { + ComponentWithAs, getElementType, useUnhandledProps, useAccessibility, @@ -15,9 +16,7 @@ import * as React from 'react'; import { ThemeContext } from 'react-fela'; import { - WithAsProp, ComponentEventHandler, - withSafeTypeForAs, ShorthandCollection, ReactChildren, ProviderContextPrepared, @@ -79,7 +78,15 @@ export interface ListProps extends UIComponentProps, ChildrenComponentProps { export type ListStylesProps = Pick & { isListTag: boolean }; export const listClassName = 'ui-list'; -const List: React.FC> & +/** + * A List displays a group of related sequential items. + * + * @accessibility + * List may follow one of the following accessibility semantics: + * - Static non-navigable list. Implements [ARIA list](https://www.w3.org/TR/wai-aria-1.1/#list) role. + * - Selectable list: allows the user to select item from a list of choices. Implements [ARIA Listbox](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox) design pattern. + */ +const List: ComponentWithAs<'ul', ListProps> & FluentComponentStaticProps & { Item: typeof ListItem; } = props => { @@ -205,12 +212,4 @@ List.Item = ListItem; List.create = createShorthandFactory({ Component: List, mappedArrayProp: 'items' }); -/** - * A List displays a group of related sequential items. - * - * @accessibility - * List may follow one of the following accessibility semantics: - * - Static non-navigable list. Implements [ARIA list](https://www.w3.org/TR/wai-aria-1.1/#list) role. - * - Selectable list: allows the user to select item from a list of choices. Implements [ARIA Listbox](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox) design pattern. - */ -export default withSafeTypeForAs(List); +export default List; diff --git a/packages/fluentui/react-northstar/src/components/List/ListItem.tsx b/packages/fluentui/react-northstar/src/components/List/ListItem.tsx index 303d3af63429bf..0f04f8777e95e1 100644 --- a/packages/fluentui/react-northstar/src/components/List/ListItem.tsx +++ b/packages/fluentui/react-northstar/src/components/List/ListItem.tsx @@ -1,5 +1,12 @@ import { Accessibility, listItemBehavior, ListItemBehaviorProps } 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 { useContextSelectors } from '@fluentui/react-context-selector'; import cx from 'classnames'; import * as _ from 'lodash'; @@ -11,9 +18,7 @@ import { ThemeContext } from 'react-fela'; import Box, { BoxProps } from '../Box/Box'; import { ShorthandValue, - WithAsProp, ComponentEventHandler, - withSafeTypeForAs, ProviderContextPrepared, FluentComponentStaticProps, } from '../../types'; @@ -89,7 +94,10 @@ export const listItemSlotClassNames: ListItemSlotClassNames = { endMedia: `${listItemClassName}__endMedia`, }; -const ListItem: React.FC & { index: number }> & +/** + * A ListItem contains a single piece of content within a List. + */ +const ListItem: ComponentWithAs<'li', ListItemProps & { index: number }> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(ListItem.displayName, context.telemetry); @@ -281,7 +289,4 @@ ListItem.handledProps = Object.keys(ListItem.propTypes) as any; ListItem.create = createShorthandFactory({ Component: ListItem, mappedProp: 'content' }); -/** - * A ListItem contains a single piece of content within a List. - */ -export default withSafeTypeForAs(ListItem); +export default ListItem; diff --git a/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx b/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx index 8fac4a59e25371..61746488f02ffd 100644 --- a/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx +++ b/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx @@ -1,6 +1,7 @@ import { Accessibility, loaderBehavior, LoaderBehaviorProps } from '@fluentui/accessibility'; import * as customPropTypes from '@fluentui/react-proptypes'; import { + ComponentWithAs, ShorthandConfig, useTelemetry, getElementType, @@ -17,13 +18,7 @@ import { SizeValue, getOrGenerateIdFromShorthand, } from '../../utils'; -import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import Box, { BoxProps } from '../Box/Box'; import Text, { TextProps } from '../Text/Text'; // @ts-ignore @@ -77,8 +72,11 @@ export type LoaderStylesProps = Pick> & +const Loader: ComponentWithAs<'div', LoaderProps> & FluentComponentStaticProps & { shorthandConfig: ShorthandConfig; } = props => { @@ -195,10 +193,4 @@ Loader.create = createShorthandFactory({ Component: Loader, mappedProp: 'label' Loader.shorthandConfig = { mappedProp: 'label' }; -/** - * A Loader alerts a user to wait for an activity to complete. - * - * @accessibility - * Implements [ARIA progressbar](https://www.w3.org/TR/wai-aria-1.1/#progressbar) role. - */ -export default withSafeTypeForAs(Loader); +export default Loader; diff --git a/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx b/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx index eb6d4d4ad024f4..e6af475f7a5162 100644 --- a/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx +++ b/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx @@ -21,6 +21,7 @@ import { MenuItemProps } from '../Menu/MenuItem'; import { focusMenuItem } from './focusUtils'; import { ALIGNMENTS, POSITIONS, PositioningProps } from '../../utils/positioner'; import { + ComponentWithAs, useAccessibility, useTelemetry, getElementType, @@ -113,7 +114,7 @@ export type MenuButtonStylesProps = never; * A MenuButton displays a menu connected to trigger element. * @accessibility */ -const MenuButton: React.FC & FluentComponentStaticProps = props => { +const MenuButton: ComponentWithAs<'div', MenuButtonProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(MenuButton.displayName, context.telemetry); setStart(); diff --git a/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx b/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx index 2be808e90a8535..bab6dc74da949b 100644 --- a/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx +++ b/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx @@ -1,5 +1,6 @@ import { Accessibility } from '@fluentui/accessibility'; import { + ComponentWithAs, AutoFocusZone, AutoFocusZoneProps, FocusTrapZone, @@ -19,13 +20,7 @@ import * as React from 'react'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { - WithAsProp, - ComponentEventHandler, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { childrenExist, createShorthandFactory, @@ -84,7 +79,11 @@ export const popupContentSlotClassNames: PopupContentSlotClassNames = { content: `${popupContentClassName}__content`, }; -const PopupContent: React.FC> & FluentComponentStaticProps = props => { +/** + * A PopupContent displays the content of a Popup component. + */ +const PopupContent: ComponentWithAs<'div', PopupContentProps> & + FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(PopupContent.displayName, context.telemetry); setStart(); @@ -202,7 +201,4 @@ PopupContent.handledProps = Object.keys(PopupContent.propTypes) as any; PopupContent.create = createShorthandFactory({ Component: PopupContent, mappedProp: 'content' }); -/** - * A PopupContent displays the content of a Popup component. - */ -export default withSafeTypeForAs(PopupContent); +export default PopupContent; diff --git a/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx b/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx index ac1f359a214e32..2bddac32e5490b 100644 --- a/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx +++ b/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx @@ -12,7 +12,7 @@ import * as customPropTypes from '@fluentui/react-proptypes'; import * as PropTypes from 'prop-types'; import * as React from 'react'; import * as _ from 'lodash'; -import { WithAsProp, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { childrenExist, doesNodeContainClick, @@ -79,14 +79,10 @@ export interface PortalProps extends ChildrenComponentProps, ContentComponentPro onOutsideClick?: (e: React.MouseEvent) => void; } -export interface PortalState { - open?: boolean; -} - /** * A Portal allows to render children outside of their parent. */ -const Portal: React.FC> & FluentComponentStaticProps = props => { +const Portal: React.FC & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Portal.displayName, context.telemetry); setStart(); diff --git a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx index d9f8eda1caac64..a23895f386b570 100644 --- a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx +++ b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import { + ComponentWithAs, getElementType, useUnhandledProps, StylesContextPerformanceInput, @@ -25,7 +26,7 @@ import { ThemeProvider, ThemeContext } from 'react-fela'; import { ChildrenComponentProps, setUpWhatInput, tryCleanupWhatInput, UIComponentProps } from '../../utils'; -import { WithAsProp, ProviderContextInput, ProviderContextPrepared, withSafeTypeForAs } from '../../types'; +import { ProviderContextInput, ProviderContextPrepared } from '../../types'; import mergeContexts from '../../utils/mergeProviderContexts'; import ProviderConsumer from './ProviderConsumer'; import usePortalBox, { PortalBoxContext } from './usePortalBox'; @@ -90,7 +91,7 @@ export const providerClassName = 'ui-provider'; /** * The Provider passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components. */ -const Provider: React.FC> & { +const Provider: ComponentWithAs<'div', ProviderProps> & { Consumer: typeof ProviderConsumer; handledProps: (keyof ProviderProps)[]; } = props => { @@ -243,4 +244,4 @@ Provider.handledProps = Object.keys(Provider.propTypes) as any; Provider.Consumer = ProviderConsumer; -export default withSafeTypeForAs(Provider); +export default Provider; diff --git a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx index 09fcd45c49c304..72d0810586f603 100644 --- a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx @@ -15,14 +15,13 @@ import { } from '../../utils'; import RadioGroupItem, { RadioGroupItemProps } from './RadioGroupItem'; import { - WithAsProp, ComponentEventHandler, - withSafeTypeForAs, ShorthandCollection, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; import { + ComponentWithAs, useAutoControlled, useTelemetry, getElementType, @@ -61,7 +60,13 @@ export const radioGroupClassName = 'ui-radiogroup'; export type RadioGrouptStylesProps = never; -const RadioGroup: React.FC> & +/** + * A RadioGroup allows user to select a value from a small set of mutually exclusive options. + * + * @accessibility + * Implements [ARIA Radio Group](https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton) design pattern. + */ +const RadioGroup: ComponentWithAs<'div', RadioGroupProps> & FluentComponentStaticProps & { Item: typeof RadioGroupItem; } = props => { @@ -230,10 +235,4 @@ RadioGroup.create = createShorthandFactory({ Component: RadioGroup, }); -/** - * A RadioGroup allows user to select a value from a small set of mutually exclusive options. - * - * @accessibility - * Implements [ARIA Radio Group](https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton) design pattern. - */ -export default withSafeTypeForAs(RadioGroup); +export default RadioGroup; diff --git a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx index 642ec9df809701..2bc04deaf4d22d 100644 --- a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx +++ b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx @@ -8,13 +8,12 @@ import { createShorthandFactory, UIComponentProps, ChildrenComponentProps, commo import Box, { BoxProps } from '../Box/Box'; import { ComponentEventHandler, - WithAsProp, ShorthandValue, - withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; import { + ComponentWithAs, useAutoControlled, getElementType, useAccessibility, @@ -75,10 +74,6 @@ export interface RadioGroupItemProps extends UIComponentProps, ChildrenComponent vertical?: boolean; } -export interface RadioGroupItemState { - checked: boolean; -} - export const radioGroupItemClassName = 'ui-radiogroup__item'; export const radioGroupItemSlotClassNames: RadioGroupItemSlotClassNames = { indicator: `${radioGroupItemClassName}__indicator`, @@ -86,7 +81,13 @@ export const radioGroupItemSlotClassNames: RadioGroupItemSlotClassNames = { export type RadioGroupItemStylesProps = Required>; -const RadioGroupItem: React.FC> & +/** + * A RadioGroupItem represents single input element within a RadioGroup. + * + * @accessibility + * Radio items need to be grouped to correctly handle accessibility. + */ +const RadioGroupItem: ComponentWithAs<'div', RadioGroupItemProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(RadioGroupItem.displayName, context.telemetry); @@ -207,10 +208,4 @@ RadioGroupItem.handledProps = Object.keys(RadioGroupItem.propTypes) as any; RadioGroupItem.create = createShorthandFactory({ Component: RadioGroupItem, mappedProp: 'label' }); -/** - * A RadioGroupItem represents single input element within a RadioGroup. - * - * @accessibility - * Radio items need to be grouped to correctly handle accessibility. - */ -export default withSafeTypeForAs(RadioGroupItem); +export default RadioGroupItem; diff --git a/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx b/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx index 1da2be0179ddbb..085c06e4b25757 100644 --- a/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx +++ b/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx @@ -13,16 +13,17 @@ import { } from '../../utils'; import { Accessibility } from '@fluentui/accessibility'; -import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import Box, { BoxProps } from '../Box/Box'; import ReactionGroup from './ReactionGroup'; -import { useTelemetry, getElementType, useUnhandledProps, useAccessibility, useStyles } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + useTelemetry, + getElementType, + useUnhandledProps, + useAccessibility, + useStyles, +} from '@fluentui/react-bindings'; export interface ReactionSlotClassNames { icon: string; @@ -52,7 +53,11 @@ export const reactionSlotClassNames: ReactionSlotClassNames = { content: `${reactionClassName}__content`, }; -const Reaction: React.FC> & +/** + * A Reaction indicates user's emotion or perception. + * Used to display user's reaction for entity in Chat (e.g. message). + */ +const Reaction: ComponentWithAs<'span', ReactionProps> & FluentComponentStaticProps & { Group: typeof ReactionGroup; } = props => { @@ -136,8 +141,4 @@ Reaction.Group = ReactionGroup; Reaction.create = createShorthandFactory({ Component: Reaction, mappedProp: 'content' }); -/** - * A Reaction indicates user's emotion or perception. - * Used to display user's reaction for entity in Chat (e.g. message). - */ -export default withSafeTypeForAs(Reaction); +export default Reaction; diff --git a/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx b/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx index cfc86e64f106fc..3273f4e4f45227 100644 --- a/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx +++ b/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx @@ -3,13 +3,7 @@ import * as React from 'react'; import * as _ from 'lodash'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { - WithAsProp, - withSafeTypeForAs, - ShorthandCollection, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandCollection, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { childrenExist, UIComponentProps, @@ -21,7 +15,14 @@ import { } from '../../utils'; import { Accessibility } from '@fluentui/accessibility'; import Reaction, { ReactionProps } from './Reaction'; -import { getElementType, useUnhandledProps, useAccessibility, useTelemetry, useStyles } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + getElementType, + useUnhandledProps, + useAccessibility, + useTelemetry, + useStyles, +} from '@fluentui/react-bindings'; export interface ReactionGroupProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { /** @@ -37,7 +38,10 @@ export const reactionGroupClassName = 'ui-reactions'; export type ReactionGroupStylesProps = never; -const ReactionGroup: React.FC> & +/** + * A ReactionGroup groups multiple Reaction elements. + */ +const ReactionGroup: ComponentWithAs<'div', ReactionGroupProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(ReactionGroup.displayName, context.telemetry); @@ -104,7 +108,4 @@ ReactionGroup.create = createShorthandFactory({ mappedArrayProp: 'items', }); -/** - * A ReactionGroup groups multiple Reaction elements. - */ -export default withSafeTypeForAs(ReactionGroup); +export default ReactionGroup; diff --git a/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx b/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx index a06e2c864d9bec..ef70feee9e37a8 100644 --- a/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx +++ b/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx @@ -14,15 +14,16 @@ import { Accessibility } from '@fluentui/accessibility'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import Box, { BoxProps } from '../Box/Box'; -import { useTelemetry, getElementType, useAccessibility, useUnhandledProps, useStyles } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + useTelemetry, + getElementType, + useAccessibility, + useUnhandledProps, + useStyles, +} from '@fluentui/react-bindings'; export interface SegmentProps extends UIComponentProps, @@ -45,7 +46,10 @@ export type SegmentStylesProps = Required> & FluentComponentStaticProps = props => { +/** + * A Segment visually groups related content. + */ +const Segment: ComponentWithAs<'div', SegmentProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Segment.displayName, context.telemetry); setStart(); @@ -106,7 +110,4 @@ Segment.create = createShorthandFactory({ Component: Segment, }); -/** - * A Segment visually groups related content. - */ -export default withSafeTypeForAs(Segment); +export default Segment; diff --git a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx index a8ecbbd60b7182..e320e05191036b 100644 --- a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx +++ b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx @@ -1,5 +1,6 @@ import { Accessibility, sliderBehavior, SliderBehaviorProps } from '@fluentui/accessibility'; import { + ComponentWithAs, getElementType, useUnhandledProps, useAccessibility, @@ -28,9 +29,6 @@ import { import { ComponentEventHandler, ShorthandValue, - WithAsProp, - withSafeTypeForAs, - Omit, FluentComponentStaticProps, ProviderContextPrepared, } from '../../types'; @@ -125,7 +123,16 @@ export const sliderSlotClassNames: SliderSlotClassNames = { track: `${sliderClassName}__track`, }; -const Slider: React.FC> & FluentComponentStaticProps = props => { +/** + * A Slider represents an input that allows user to choose a value from within a specific range. + * + * @accessibility + * Implements [ARIA Slider](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) design pattern. + * @accessibilityIssues + * [Slider - JAWS narrates slider value twice when using PageUp / PageDown](https://github.com/FreedomScientific/VFO-standards-support/issues/220) + * [Slider - JAWS narrates current and new value in vertical slider](https://github.com/FreedomScientific/VFO-standards-support/issues/219) + */ +const Slider: ComponentWithAs<'input', SliderProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Slider.displayName, context.telemetry); setStart(); @@ -287,13 +294,4 @@ Slider.handledProps = Object.keys(Slider.propTypes) as any; Slider.create = createShorthandFactory({ Component: Slider, mappedProp: 'value' }); -/** - * A Slider represents an input that allows user to choose a value from within a specific range. - * - * @accessibility - * Implements [ARIA Slider](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) design pattern. - * @accessibilityIssues - * [Slider - JAWS narrates slider value twice when using PageUp / PageDown](https://github.com/FreedomScientific/VFO-standards-support/issues/220) - * [Slider - JAWS narrates current and new value in vertical slider](https://github.com/FreedomScientific/VFO-standards-support/issues/219) - */ -export default withSafeTypeForAs(Slider); +export default Slider; diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx index d579475da98de9..9c23179508c779 100644 --- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx +++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx @@ -5,8 +5,6 @@ import * as React from 'react'; import * as _ from 'lodash'; import { ALIGNMENTS, POSITIONS } from '../../utils/positioner'; import { - WithAsProp, - withSafeTypeForAs, ComponentEventHandler, ShorthandValue, ShorthandCollection, @@ -34,6 +32,7 @@ import { PositioningProps } from '../../utils/positioner/types'; // @ts-ignore import { ThemeContext } from 'react-fela'; import { + ComponentWithAs, useTelemetry, useAutoControlled, useAccessibility, @@ -107,7 +106,10 @@ export const splitButtonClassName = 'ui-splitbutton'; export type SplitButtonStylesProps = Required> & { isFromKeyboard: boolean }; -const SplitButton: React.FC> & +/** + * A SplitButton enables users to take one of several related actions, one being dominant and rest being displayed in a menu. + */ +const SplitButton: ComponentWithAs<'div', SplitButtonProps> & FluentComponentStaticProps & { Toggle: typeof SplitButtonToggle; } = props => { @@ -318,7 +320,4 @@ SplitButton.create = createShorthandFactory({ Component: SplitButton, }); -/** - * A SplitButton enables users to take one of several related actions, one being dominant and rest being displayed in a menu. - */ -export default withSafeTypeForAs(SplitButton); +export default SplitButton; diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx index 970875337bba5f..befb42f9daf74b 100644 --- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx +++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx @@ -15,14 +15,15 @@ import { SizeValue, } from '../../utils'; +import { ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import { - ComponentEventHandler, - WithAsProp, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; -import { getElementType, useAccessibility, useStyles, useTelemetry, useUnhandledProps } from '@fluentui/react-bindings'; + ComponentWithAs, + getElementType, + useAccessibility, + useStyles, + useTelemetry, + useUnhandledProps, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -53,7 +54,14 @@ export interface SplitButtonToggleProps extends UIComponentProps, ContentCompone export type SplitButtonToggleStylesProps = Pick; export const splitButtonToggleClassName = 'ui-splitbutton__toggle'; -const SplitButtonToggle: React.FC> & +/** + * A SplitToggleButton allows users to customize the toggle button inside the SplitButton. + * + * @accessibility + * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern. + */ + +const SplitButtonToggle: ComponentWithAs<'button', SplitButtonToggleProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(SplitButtonToggle.displayName, context.telemetry); @@ -66,7 +74,7 @@ const SplitButtonToggle: React.FC> & const getA11Props = useAccessibility(accessibility, { debugName: SplitButtonToggle.displayName, mapPropsToBehavior: () => ({ - as, + as: String(as), disabled, }), actionHandlers: { @@ -144,10 +152,4 @@ SplitButtonToggle.handledProps = Object.keys(SplitButtonToggle.propTypes) as any SplitButtonToggle.create = createShorthandFactory({ Component: SplitButtonToggle, mappedProp: 'content' }); -/** - * A SplitToggleButton allows users to customize the toggle button inside the SplitButton. - * - * @accessibility - * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern. - */ -export default withSafeTypeForAs(SplitButtonToggle); +export default SplitButtonToggle; diff --git a/packages/fluentui/react-northstar/src/components/Status/Status.tsx b/packages/fluentui/react-northstar/src/components/Status/Status.tsx index 17b62b280d1e9d..0309352e788a4f 100644 --- a/packages/fluentui/react-northstar/src/components/Status/Status.tsx +++ b/packages/fluentui/react-northstar/src/components/Status/Status.tsx @@ -1,5 +1,12 @@ import { Accessibility, statusBehavior } 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'; @@ -7,13 +14,7 @@ import * as React from 'react'; import { ThemeContext } from 'react-fela'; import { createShorthandFactory, UIComponentProps, commonPropTypes, SizeValue } from '../../utils'; -import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - ProviderContextPrepared, - FluentComponentStaticProps, -} from '../../types'; +import { ShorthandValue, ProviderContextPrepared, FluentComponentStaticProps } from '../../types'; import Box, { BoxProps } from '../Box/Box'; export interface StatusProps extends UIComponentProps { @@ -36,7 +37,13 @@ export interface StatusProps extends UIComponentProps { export type StatusStylesProps = Pick; export const statusClassName = 'ui-status'; -const Status: React.FC> & FluentComponentStaticProps = props => { +/** + * A Status represents someone's or something's state. + * + * @accessibility + * Implements [ARIA img](https://www.w3.org/TR/wai-aria-1.1/#img) role. + */ +const Status: ComponentWithAs<'span', StatusProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Status.displayName, context.telemetry); setStart(); @@ -101,10 +108,4 @@ Status.defaultProps = { Status.create = createShorthandFactory({ Component: Status, mappedProp: 'state' }); -/** - * A Status represents someone's or something's state. - * - * @accessibility - * Implements [ARIA img](https://www.w3.org/TR/wai-aria-1.1/#img) role. - */ -export default withSafeTypeForAs(Status); +export default Status; diff --git a/packages/fluentui/react-northstar/src/components/SvgIcon/SvgIcon.tsx b/packages/fluentui/react-northstar/src/components/SvgIcon/SvgIcon.tsx index e31b3a7df59d5f..0b7445f6c4a465 100644 --- a/packages/fluentui/react-northstar/src/components/SvgIcon/SvgIcon.tsx +++ b/packages/fluentui/react-northstar/src/components/SvgIcon/SvgIcon.tsx @@ -1,4 +1,4 @@ -import { getElementType, getUnhandledProps, useStyles, useTelemetry } from '@fluentui/react-bindings'; +import { ComponentWithAs, getElementType, getUnhandledProps, useStyles, useTelemetry } from '@fluentui/react-bindings'; import { SvgIconProps, svgIconClassName, @@ -11,13 +11,16 @@ import * as React from 'react'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; +import { ProviderContextPrepared } from '../../types'; export type SvgIconStylesProps = Required< Pick >; -const SvgIcon: React.FC }>> & { +/** + * An SvgIcon displays a pictogram with semantic meaning. + */ +const SvgIcon: ComponentWithAs<'span', SvgIconProps & { children: SvgIconChildrenFn }> & { handledProps: (keyof (SvgIconProps & { children: SvgIconChildrenFn }))[]; } = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); @@ -84,7 +87,4 @@ SvgIcon.defaultProps = { rotate: 0, }; -/** - * An SvgIcon displays a pictogram with semantic meaning. - */ -export default withSafeTypeForAs(SvgIcon); +export default SvgIcon; diff --git a/packages/fluentui/react-northstar/src/components/Table/Table.tsx b/packages/fluentui/react-northstar/src/components/Table/Table.tsx index 5eb83367171c2b..e1ce526f1f0b1b 100644 --- a/packages/fluentui/react-northstar/src/components/Table/Table.tsx +++ b/packages/fluentui/react-northstar/src/components/Table/Table.tsx @@ -1,5 +1,6 @@ import { Accessibility, tableBehavior, TableBehaviorProps } from '@fluentui/accessibility'; import { + ComponentWithAs, getElementType, useTelemetry, mergeVariablesOverrides, @@ -22,14 +23,7 @@ import TableRow, { TableRowProps } from './TableRow'; import TableCell from './TableCell'; // @ts-ignore import { ThemeContext } from 'react-fela'; -import { - WithAsProp, - ShorthandCollection, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandCollection, ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; export interface TableSlotClassNames { header: string; @@ -62,7 +56,26 @@ export const tableSlotClassNames: TableSlotClassNames = { export type TableStylesProps = never; -const Table: React.FC> & +/** + * A Table is used to display data in tabular layout + * * @accessibility + * Implements ARIA [Data Grid](https://www.w3.org/TR/wai-aria-practices/#dataGrid) design pattern for presenting tabular information. + * When gridcell contains actionable element, use [gridCellWithFocusableElementBehavior](/components/table/accessibility#grid-cell-with-focusable-element-behavior-ts). [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_focus) + * Use [gridCellMultipleFocusableBehavior](/components/table/accessibility#gridCellMultipleFocusableBehavior), when gridcell contains: + * \- editable content + * \- multiple actionable elements + * \- component that utilizes arrow keys in its navigation, like menu button, dropdown, radio group, slider, etc. + * [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_inside) + * @accessibilityIssues + * [NVDA narrate table title(aria-label) twice](https://github.com/nvaccess/nvda/issues/10548) + * [Accessibility DOM > Table > gridcell > when gridcell is focused, then selected state is send to reader](https://bugs.chromium.org/p/chromium/issues/detail?id=1030378) + * [JAWS narrate grid name twice, once as table and second time as grid](https://github.com/FreedomScientific/VFO-standards-support/issues/346) + * [JAWS doesn't narrate grid column name, when focus is on actionable element in the cell] (https://github.com/FreedomScientific/VFO-standards-support/issues/348) + * [aria-sort is not output at child elements](https://github.com/FreedomScientific/VFO-standards-support/issues/319) + * [VoiceOver not announcing rows correctly for a grid with presentation elements inside](https://bugs.chromium.org/p/chromium/issues/detail?id=1054424) + * VoiceOver doesn't narrate aria-rowcount value in table or grid + */ +const Table: ComponentWithAs<'div', TableProps> & FluentComponentStaticProps & { Cell: typeof TableCell; Row: typeof TableRow; @@ -164,27 +177,7 @@ Table.propTypes = { Table.handledProps = Object.keys(Table.propTypes) as any; Table.defaultProps = { - as: 'div', - accessibility: tableBehavior as Accessibility, + accessibility: tableBehavior, }; -/** - * A Table is used to display data in tabular layout - * * @accessibility - * Implements ARIA [Data Grid](https://www.w3.org/TR/wai-aria-practices/#dataGrid) design pattern for presenting tabular information. - * When gridcell contains actionable element, use [gridCellWithFocusableElementBehavior](/components/table/accessibility#grid-cell-with-focusable-element-behavior-ts). [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_focus) - * Use [gridCellMultipleFocusableBehavior](/components/table/accessibility#gridCellMultipleFocusableBehavior), when gridcell contains: - * \- editable content - * \- multiple actionable elements - * \- component that utilizes arrow keys in its navigation, like menu button, dropdown, radio group, slider, etc. - * [More information available in aria documentation.](https://www.w3.org/TR/wai-aria-practices/#gridNav_inside) - * @accessibilityIssues - * [NVDA narrate table title(aria-label) twice](https://github.com/nvaccess/nvda/issues/10548) - * [Accessibility DOM > Table > gridcell > when gridcell is focused, then selected state is send to reader](https://bugs.chromium.org/p/chromium/issues/detail?id=1030378) - * [JAWS narrate grid name twice, once as table and second time as grid](https://github.com/FreedomScientific/VFO-standards-support/issues/346) - * [JAWS doesn't narrate grid column name, when focus is on actionable element in the cell] (https://github.com/FreedomScientific/VFO-standards-support/issues/348) - * [aria-sort is not output at child elements](https://github.com/FreedomScientific/VFO-standards-support/issues/319) - * [VoiceOver not announcing rows correctly for a grid with presentation elements inside](https://bugs.chromium.org/p/chromium/issues/detail?id=1054424) - * VoiceOver doesn't narrate aria-rowcount value in table or grid - */ -export default withSafeTypeForAs(Table); +export default Table; diff --git a/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx b/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx index f416bfa5df1a32..8cac3519d70ca4 100644 --- a/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx +++ b/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx @@ -12,17 +12,18 @@ import { createShorthandFactory, UIComponentProps, } from '../../utils'; -import { useTelemetry, useStyles, getElementType, useUnhandledProps, useAccessibility } from '@fluentui/react-bindings'; +import { + ComponentWithAs, + useTelemetry, + useStyles, + getElementType, + useUnhandledProps, + useAccessibility, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; import Box, { BoxProps } from '../Box/Box'; -import { - WithAsProp, - ShorthandValue, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ShorthandValue, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; export interface TableCellProps extends UIComponentProps, @@ -51,7 +52,10 @@ export const tableCellSlotClassNames: TableCellSlotClassNames = { content: `${tableCellClassName}__content`, }; -const TableCell: React.FC> & FluentComponentStaticProps = props => { +/** + * Component represents a table cell. + */ +const TableCell: ComponentWithAs<'div', TableCellProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(TableCell.displayName, context.telemetry); setStart(); @@ -140,7 +144,4 @@ TableCell.defaultProps = { TableCell.create = createShorthandFactory({ Component: TableCell, mappedProp: 'content' }); -/** - * Component represents a table cell - */ -export default withSafeTypeForAs(TableCell); +export default TableCell; diff --git a/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx b/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx index 10750293454ab4..923626dbf1aaa9 100644 --- a/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx +++ b/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx @@ -1,5 +1,6 @@ import { Accessibility, tableRowBehavior, GridRowBehaviorProps } from '@fluentui/accessibility'; import { + ComponentWithAs, getElementType, mergeVariablesOverrides, useAccessibility, @@ -18,8 +19,6 @@ import { FluentComponentStaticProps, ProviderContextPrepared, ShorthandCollection, - WithAsProp, - withSafeTypeForAs, ComponentEventHandler, } from '../../types'; import { childrenExist, commonPropTypes, createShorthandFactory, UIComponentProps } from '../../utils'; @@ -64,7 +63,10 @@ export const tableRowClassName = 'ui-table__row'; export type TableRowStylesProps = Pick; -const TableRow: React.FC> & FluentComponentStaticProps = props => { +/** + * Component represents a single row in a tabular structure + */ +const TableRow: ComponentWithAs<'div', TableRowProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(TableRow.displayName, context.telemetry); setStart(); @@ -166,7 +168,4 @@ TableRow.defaultProps = { TableRow.create = createShorthandFactory({ Component: TableRow, mappedArrayProp: 'items' }); -/** - * Component represents a single row in a tabular structure - */ -export default withSafeTypeForAs(TableRow); +export default TableRow; diff --git a/packages/fluentui/react-northstar/src/components/Text/Text.tsx b/packages/fluentui/react-northstar/src/components/Text/Text.tsx index f16bf4ee9b1eed..7a75c2ad0a4d7a 100644 --- a/packages/fluentui/react-northstar/src/components/Text/Text.tsx +++ b/packages/fluentui/react-northstar/src/components/Text/Text.tsx @@ -16,8 +16,15 @@ import { } from '../../utils'; import { Accessibility } from '@fluentui/accessibility'; -import { FluentComponentStaticProps, ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; -import { getElementType, useUnhandledProps, useAccessibility, useStyles, useTelemetry } from '@fluentui/react-bindings'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { + ComponentWithAs, + getElementType, + useUnhandledProps, + useAccessibility, + useStyles, + useTelemetry, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -83,7 +90,10 @@ export type TextStylesProps = Pick< export const textClassName = 'ui-text'; -const Text: React.FC> & FluentComponentStaticProps = props => { +/** + * A Text consistently styles and formats occurrences of text. + */ +const Text: ComponentWithAs<'span', TextProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Text.displayName, context.telemetry); setStart(); @@ -182,7 +192,4 @@ Text.handledProps = Object.keys(Text.propTypes) as any; Text.create = createShorthandFactory({ Component: Text, mappedProp: 'content' }); -/** - * A Text consistently styles and formats occurrences of text. - */ -export default withSafeTypeForAs(Text); +export default Text; diff --git a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx index ed66f7052cf2fe..6edf1e86efb4b5 100644 --- a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx +++ b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx @@ -1,16 +1,11 @@ import { Accessibility, textAreaBehavior, TextAreaBehaviorProps } from '@fluentui/accessibility'; -import { - ComponentEventHandler, - WithAsProp, - withSafeTypeForAs, - FluentComponentStaticProps, - ProviderContextPrepared, -} from '../../types'; +import { ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; import * as _ from 'lodash'; import * as React from 'react'; import * as PropTypes from 'prop-types'; import { UIComponentProps, ChildrenComponentProps, commonPropTypes, createShorthandFactory } from '../../utils'; import { + ComponentWithAs, useAutoControlled, getElementType, useTelemetry, @@ -56,7 +51,17 @@ export type TextAreaStylesProps = Required> & FluentComponentStaticProps = props => { +/** + * A TextArea is a multi-line plan-text editing control. + * + * @accessibility + * For good screen reader experience set `aria-label` or `aria-labelledby` attribute for textarea. + * When using maxlength attribute, provide the information about max length in label for screen reader. + * @accessibilityIssues + * [NVDA - No announcement of maxlength](https://github.com/nvaccess/nvda/issues/7910) + * [JAWS - textarea - no announcement of maxlength](https://github.com/FreedomScientific/VFO-standards-support/issues/300) + */ +const TextArea: ComponentWithAs<'textarea', TextAreaProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(TextArea.displayName, context.telemetry); @@ -144,14 +149,4 @@ TextArea.create = createShorthandFactory({ Component: TextArea, }); -/** - * A TextArea is a multi-line plan-text editing control. - * - * @accessibility - * For good screen reader experience set `aria-label` or `aria-labelledby` attribute for textarea. - * When using maxlength attribute, provide the information about max length in label for screen reader. - * @accessibilityIssues - * [NVDA - No announcement of maxlength](https://github.com/nvaccess/nvda/issues/7910) - * [JAWS - textarea - no announcement of maxlength](https://github.com/FreedomScientific/VFO-standards-support/issues/300) - */ -export default withSafeTypeForAs(TextArea); +export default TextArea; diff --git a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx index f5d84cf9f0e482..1841795e1201ec 100644 --- a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx +++ b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.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 PopperJs from '@popperjs/core'; import * as PropTypes from 'prop-types'; @@ -18,7 +25,7 @@ import { } from '../../utils'; import { getBasePlacement, PopperChildrenProps } from '../../utils/positioner'; -import { FluentComponentStaticProps, ProviderContextPrepared, WithAsProp, withSafeTypeForAs } from '../../types'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; export interface TooltipContentProps extends UIComponentProps, ChildrenComponentProps, ContentComponentProps { /** @@ -45,7 +52,10 @@ export type TooltipContentStylesProps = Required> & +/** + * A TooltipContent contains the content of a Tooltip component. + */ +const TooltipContent: ComponentWithAs<'div', TooltipContentProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(TooltipContent.displayName, context.telemetry); @@ -136,7 +146,4 @@ TooltipContent.handledProps = Object.keys(TooltipContent.propTypes) as any; TooltipContent.create = createShorthandFactory({ Component: TooltipContent, mappedProp: 'content' }); -/** - * A TooltipContent contains the content of a Tooltip component. - */ -export default withSafeTypeForAs(TooltipContent); +export default TooltipContent; diff --git a/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx b/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx index ec0fb95d26f78b..6bc467d390eaf7 100644 --- a/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx +++ b/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx @@ -1,5 +1,6 @@ import { Accessibility, treeBehavior, TreeBehaviorProps } from '@fluentui/accessibility'; import { + ComponentWithAs, getNextElement, useAutoControlled, useTelemetry, @@ -25,8 +26,6 @@ import { } from '../../utils'; import { ShorthandRenderFunction, - WithAsProp, - withSafeTypeForAs, ShorthandCollection, ComponentEventHandler, ObjectShorthandCollection, @@ -161,7 +160,16 @@ const iterateItems = (items: TreeProps['items'] | TreeItemProps['items'], acc = acc, ); -const Tree: React.FC> & +/** + * A Tree displays data organised in tree hierarchy. + * + * @accessibility + * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. + * @accessibilityIssues + * [Treeview - JAWS doesn't narrate position for each tree item](https://github.com/FreedomScientific/VFO-standards-support/issues/338) + * [Aria compliant trees are read as empty tables](https://bugs.chromium.org/p/chromium/issues/detail?id=1048770) + */ +const Tree: ComponentWithAs<'div', TreeProps> & FluentComponentStaticProps & { Item: typeof TreeItem; Title: typeof TreeTitle; @@ -496,14 +504,4 @@ Tree.create = createShorthandFactory({ mappedArrayProp: 'items', }); -/** - * A Tree displays data organised in tree hierarchy. - * - * @accessibility - * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. - * @accessibilityIssues - * [Treeview - JAWS doesn't narrate position for each tree item](https://github.com/FreedomScientific/VFO-standards-support/issues/338) - * [Aria compliant trees are read as empty tables](https://bugs.chromium.org/p/chromium/issues/detail?id=1048770) - */ - -export default withSafeTypeForAs(Tree); +export default Tree; diff --git a/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx b/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx index a9dd35af62dab3..947ab66cf5f59f 100644 --- a/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx @@ -1,5 +1,12 @@ import { Accessibility, treeItemBehavior, TreeItemBehaviorProps } 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 _ from 'lodash'; import * as PropTypes from 'prop-types'; @@ -18,10 +25,8 @@ import { } from '../../utils'; import { ComponentEventHandler, - WithAsProp, ShorthandRenderFunction, ShorthandValue, - withSafeTypeForAs, ShorthandCollection, FluentComponentStaticProps, ProviderContextPrepared, @@ -101,7 +106,13 @@ export interface TreeItemProps extends UIComponentProps, ChildrenComponentProps export type TreeItemStylesProps = Required>; export const treeItemClassName = 'ui-tree__item'; -const TreeItem: React.FC> & FluentComponentStaticProps = props => { +/** + * A TreeItem renders an item of a Tree. + * + * @accessibility + * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. + */ +const TreeItem: ComponentWithAs<'div', TreeItemProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(TreeItem.displayName, context.telemetry); setStart(); @@ -304,10 +315,4 @@ TreeItem.create = createShorthandFactory({ mappedProp: 'title', }); -/** - * A TreeItem renders an item of a Tree. - * - * @accessibility - * Implements [ARIA TreeView](https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView) design pattern. - */ -export default withSafeTypeForAs(TreeItem); +export default TreeItem; diff --git a/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx b/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx index d84ce7077c6695..797643a5ff086b 100644 --- a/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx +++ b/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx @@ -1,5 +1,12 @@ import { Accessibility, treeTitleBehavior, TreeTitleBehaviorProps } 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 Box, { BoxProps } from '../Box/Box'; import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils'; import * as customPropTypes from '@fluentui/react-proptypes'; @@ -22,8 +29,6 @@ import { ComponentEventHandler, FluentComponentStaticProps, ProviderContextPrepared, - WithAsProp, - withSafeTypeForAs, ShorthandValue, } from '../../types'; @@ -87,7 +92,11 @@ export const treeTitleClassName = 'ui-tree__title'; export const treeTitleSlotClassNames = { indicator: `${treeTitleClassName}__selection-indicator`, }; -const TreeTitle: React.FC> & FluentComponentStaticProps = props => { + +/** + * A TreeTitle renders a title of TreeItem. + */ +const TreeTitle: ComponentWithAs<'a', TreeTitleProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(TreeTitle.displayName, context.telemetry); setStart(); @@ -225,7 +234,4 @@ TreeTitle.create = createShorthandFactory({ mappedProp: 'content', }); -/** - * A TreeTitle renders a title of TreeItem. - */ -export default withSafeTypeForAs(TreeTitle); +export default TreeTitle; diff --git a/packages/fluentui/react-northstar/src/components/Video/Video.tsx b/packages/fluentui/react-northstar/src/components/Video/Video.tsx index 54427e2e6c1605..95257e6722d196 100644 --- a/packages/fluentui/react-northstar/src/components/Video/Video.tsx +++ b/packages/fluentui/react-northstar/src/components/Video/Video.tsx @@ -4,8 +4,15 @@ import * as React from 'react'; import { Accessibility, VideoBehaviorProps, videoBehavior } from '@fluentui/accessibility'; import { createShorthandFactory, UIComponentProps, commonPropTypes } from '../../utils'; -import { WithAsProp, withSafeTypeForAs, FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; -import { getElementType, useStyles, useUnhandledProps, useTelemetry, useAccessibility } from '@fluentui/react-bindings'; +import { FluentComponentStaticProps, ProviderContextPrepared } from '../../types'; +import { + ComponentWithAs, + getElementType, + useStyles, + useUnhandledProps, + useTelemetry, + useAccessibility, +} from '@fluentui/react-bindings'; // @ts-ignore import { ThemeContext } from 'react-fela'; @@ -38,7 +45,10 @@ export const videoClassName = 'ui-video'; export type VideoStylesProps = Required>; -const Video: React.FC> & FluentComponentStaticProps = props => { +/** + * A Video provides ability to embed video content. + */ +const Video: ComponentWithAs<'video', VideoProps> & FluentComponentStaticProps = props => { const context: ProviderContextPrepared = React.useContext(ThemeContext); const { setStart, setEnd } = useTelemetry(Video.displayName, context.telemetry); setStart(); @@ -112,7 +122,4 @@ Video.defaultProps = { Video.handledProps = Object.keys(Video.propTypes) as any; -/** - * A Video provides ability to embed video content. - */ -export default withSafeTypeForAs(Video); +export default Video; diff --git a/packages/fluentui/react-northstar/src/types.ts b/packages/fluentui/react-northstar/src/types.ts index 03e283b6e470b7..161291e69c5dde 100644 --- a/packages/fluentui/react-northstar/src/types.ts +++ b/packages/fluentui/react-northstar/src/types.ts @@ -37,8 +37,6 @@ export type FluentComponentStaticProps

= { export type Props = T & ObjectOf; export type ReactChildren = React.ReactNodeArray | React.ReactNode; -export type WithAsProp = T & { as?: any }; - export type ComponentEventHandler = (event: React.SyntheticEvent, data?: TProps) => void; export type ComponentKeyboardEventHandler = (event: React.KeyboardEvent, data?: TProps) => void; @@ -78,76 +76,6 @@ export type ObjectShorthandValue

= Props

& { export type ObjectShorthandCollection = ObjectShorthandValue

[]; -// ======================================================== -// Types for As prop support -// ======================================================== - -type ValueOf = TKey extends keyof TFirst - ? TFirst[TKey] - : TKey extends keyof TSecond - ? TSecond[TKey] - : {}; - -type Extended = { [K in keyof (TFirst & TSecond)]: ValueOf }; - -/** - * TODO: introduce back this path once TS compiler issue that leads to - * 'JS Heap Out Of Memory' exception will be fixed - */ -// type AsHtmlElement = { -// as: Tag -// } & JSX.IntrinsicElements[Tag] & -// TProps - -/** - * TODO: restrict type further once TS compiler issue that leads to - * 'JS Heap Out Of Memory' exception will be fixed - */ -type AsComponent = { as: C } & TProps & { [K: string]: any }; // & PropsOf> - -type HoistedStaticPropsOf = Exclude | 'displayName'; - -type Intersect = { - [K in First]: K extends Second ? K : never; -}[First]; - -type PickProps = { - [K in Intersect]: T[K]; -}; - -export const withSafeTypeForAs = < - TComponentType extends React.ComponentType, - TProps, - TAs extends keyof JSX.IntrinsicElements = 'div' ->( - componentType: TComponentType, -) => { - /** - * TODO: introduce overload once TS compiler issue that leads to - * 'JS Heap Out Of Memory' exception will be fixed - */ - // function overloadedComponentType( - // x: AsHtmlElement, - // ): JSX.Element - function overloadedComponentType(x: AsComponent): JSX.Element; - function overloadedComponentType(x: Extended): JSX.Element; - function overloadedComponentType(): never { - throw new Error('Defines unreachable execution scenario'); - } - - return (componentType as any) as typeof overloadedComponentType & - PickProps>; -}; - -export type UNSAFE_TypedComponent = React.FunctionComponent & - PickProps; - -export const UNSAFE_typed = (componentType: TComponentType) => { - return { - withProps: () => (componentType as any) as UNSAFE_TypedComponent, - }; -}; - // ======================================================== // Provider's context // ======================================================== diff --git a/packages/fluentui/react-northstar/test/specs/components/List/ListItem-test.tsx b/packages/fluentui/react-northstar/test/specs/components/List/ListItem-test.tsx index 0273153c4cccbe..f04c0f242741a7 100644 --- a/packages/fluentui/react-northstar/test/specs/components/List/ListItem-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/List/ListItem-test.tsx @@ -14,18 +14,18 @@ describe('ListItem', () => { test('handleClick is executed when Enter is pressed for selectable list', () => { const onClick = jest.fn(); - const listItem = mountWithProvider().find( - 'ListItem', - ); + const listItem = mountWithProvider( + , + ).find('ListItem'); listItem.simulate('keydown', { keyCode: keyboardKey.Enter }); expect(onClick).toHaveBeenCalledTimes(1); }); test('handleClick is executed when Spacebar is pressed for selectable list', () => { const onClick = jest.fn(); - const listItem = mountWithProvider().find( - 'ListItem', - ); + const listItem = mountWithProvider( + , + ).find('ListItem'); listItem.simulate('keydown', { keyCode: SpacebarKey }); expect(onClick).toHaveBeenCalledTimes(1); }); diff --git a/packages/react-compose/etc/react-compose.api.md b/packages/react-compose/etc/react-compose.api.md index 02cd1edc0308ef..39a0c50d1d9ddc 100644 --- a/packages/react-compose/etc/react-compose.api.md +++ b/packages/react-compose/etc/react-compose.api.md @@ -30,7 +30,7 @@ export type ComponentWithAs & { + readonly __PRIVATE_PROPS?: Omit, 'as' | keyof TProps> & { as?: TElementType; } & TProps; }; diff --git a/packages/react-compose/src/types.ts b/packages/react-compose/src/types.ts index 664311224ca920..63bd99ed691bbb 100644 --- a/packages/react-compose/src/types.ts +++ b/packages/react-compose/src/types.ts @@ -34,7 +34,11 @@ export type ComponentWithAs & { as?: TElementType } & TProps; + /** + * A hack to simplify the resolution for ComponentWithAs. + * @see https://github.com/microsoft/fluentui/pull/13841 + */ + readonly __PRIVATE_PROPS?: Omit, 'as' | keyof TProps> & { as?: TElementType } & TProps; }; // From f83a8501a3f1327017bf2862a83c60f852b5d2fc Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 2 Jul 2020 12:48:25 +0200 Subject: [PATCH 2/2] Update packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx Co-authored-by: Miroslav Stastny --- .../react-northstar/src/components/Dropdown/Dropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 0c142a47334f70..3f34547bf71001 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -1621,4 +1621,4 @@ export default (Dropdown as unknown) as ComponentWithAs<'div', DropdownProps> & a11yStatusCleanupTime: number; charKeyPressedCleanupTime: number; }; -/* ^ A temporary typing until Dropdown will not be converted to functional component. */ +/* ^ A temporary typing until Dropdown is converted to functional component. */